活动页面修改

wx_application/src/views/active/activeDetail.vue

@@ -31,7 +31,7 @@
       <div class="wheel-container">
         <p class="title">{{ activityName }}</p>
         <div class="wheel">
-          <div class="wheel-point" @click="Start_Game"></div>
+          <div class="wheel-point" @click="Start_Game">开始</div>
           <img src="../../../public/img/wheel.png" alt="wheel" />
           <!-- <div class="circle"></div> -->
           <div
@@ -45,9 +45,10 @@
                   class="prize-item"
                   :style="`transform: rotate(${(360/ prizeList.length) * index }deg)`"
                 >
-                  <div class="prize-name">{{ item.name }}</div>
+                  <div class="prize-name">{{ item.prizeName }}</div>
                   <div class="prize-icon">
-                    <img src="/img/counter.png" />
+                    <!-- <p>一等奖</p> -->
+                    <!-- <img src="/img/counter.png" /> -->
                   </div>
                 </div>
               </div>
@@ -80,26 +81,28 @@
       :style="active_type === 'coupon'? 'bottom: 0': ''"
       @click="handleShare"
     >立即分享</div>
-    <van-overlay :show="showAward && !res_error" @click="showAward = false">
-      <div class="wrapper" @click.stop>
+    <van-overlay :show="showAward" @click="showAward = false">
+      <div class="wrapper">
         <div v-if="isAward" class="block">
           <div class="award-coupon">
             <img class="bg_img" src="/img/coupon.png" alt="coupon" />
             <div class="other">
               <p>{{ awardGood.coupon.type }}</p>
+              <!-- <p>代金券</p> -->
               <div class="split">
                 <img src="../../../public/img/split.png" alt="split" />
               </div>
               <p>{{ awardGood.coupon.unit }}元</p>
+              <!-- <p>2000元</p> -->
             </div>
           </div>
           <p style="font-size: 20px;font-weight: bold;">OLAY全场通用抵扣券</p>
           <p style="font-size: 20px;font-weight: bold;">{{ awardGood.prizeName }}！</p>
           <p style="font-size: 20px;font-weight: bold;">恭喜您中奖！</p>
           <van-button style="background: #f00;color: #fff;" @click="handleGet">领取奖品</van-button>
-          <van-button style="border-color: #7f7777;" @click="showAward = false">继续抽奖</van-button>
+          <van-button style="border-color: #7f7777;" @click="handleGoOn">继续抽奖</van-button>
         </div>
-        <div v-if="!isAward" class="block" style="background: #413d3de0;color: #fff;">
+        <div v-else class="block" style="background: #413d3de0;color: #fff;">
           <p style="font-size: 22px;">谢谢惠顾！</p>
           <p style="font-size: 14px;">很遗憾，此次未能中奖，再接再厉！</p>
         </div>
@@ -114,16 +117,17 @@ import axios from "axios";
 import wxAuth from "@/components/wxAuth";
 import * as APi_Active from "@/api/active";
 import { CoutDown } from "@/utils/Foundation";
+import { Dialog } from "vant";
 export default {
   name: "active-detail",
   components: { wxAuth },
   data() {
     return {
+      goOn: false,
+      env: "",
       userIcon: "/img/photo.png",
       couponDetail: {},
       game_end: false,
-      res_error: false,
-      error_message: "",
       timer: null,
       timeLine: "",
       isAward: false,
@@ -191,11 +195,16 @@ export default {
     this.userIcon = this.$route.query.headurl
       ? decodeURIComponent(this.$route.query.headurl)
       : "";
-    // 验证用户是否登录
-    if (!sessionStorage.getItem("userId")) {
+    this.env = window.navigator.userAgent.toLowerCase();
+
+    // 微信端才做验证
+    if (
+      this.env.match(/MicroMessenger/i) !== "micromessenger" ||
+      this.env.match(/wxwork/i) == "wxwork"
+    ) {
       // 1.获取code
       if (this.$route.query.unionid === undefined) {
-        this.getUnionid();
+        // this.getUnionid();
       } else {
         this.userBaseInfo.unionid = JSON.stringify(this.$route.query.unionid);
         this.userBaseInfo.openid = JSON.stringify(this.$route.query.openid);
@@ -203,9 +212,26 @@ export default {
           number: 7,
           unionId: this.$route.query.unionid
         };
-        console.log("params", params);
+        //TODO 会员验证提示
         APi_Active.isMember(params).then(res => {
-          this.isMember = res.data.vipId != null;
+          if (res.data.errMessage === "会员不存在") {
+            this.isMember = false;
+            Dialog.confirm({
+              title: "确认框",
+              message:
+                "当前活动为会员才可参加，尚未找到您的会员信息，是否前往注册？"
+            })
+              .then(() => {
+                // on confirm
+                let url = "http://oysales.oywanhao.com/register";
+                window.location.href = url;
+              })
+              .catch(() => {
+                // on cancel
+                return false;
+              });
+          }
+          this.isMember = true;
           this.userBaseInfo.vipId = res.data.vipId;
           this.userBaseInfo.mobile = res.data.mobile;
           this.userBaseInfo.name = res.data.name;
@@ -233,12 +259,21 @@ export default {
     }
   },
   methods: {
+    // 继续抽奖
+    handleGoOn() {
+      this.goOn = true;
+      this.showAward = false;
+    },
     // 领取(
     handleGet() {
-      if (this.$route.query.unionid === undefined) {
-        this.$toast("企业微信端不能领取");
-        return;
+      if (
+        this.env.match(/MicroMessenger/i) !== "micromessenger" ||
+        this.env.match(/wxwork/i) == "wxwork"
+      ) {
+        this.$toast("请在微信端领取！");
+        return false;
       }
+      // 会员领取
       let params = {
         couponId: this.awardGood.activityPrize
           ? this.awardGood.coupon.id
@@ -248,9 +283,15 @@ export default {
       };
       APi_Active.collectMyCoupon(params).then(res => {
         this.showAward = false;
-        this.$toast(
-          "领取成功！奖品已经发送到您的会员账户，请进入欧亚小程序查看。"
-        );
+        if (res.data == "领取失败") {
+          this.$toast("领取失败");
+          return false;
+        }
+        if (!this.goOn) {
+          this.$toast(
+            "领取成功！奖品已经发送到您的会员账户，请进入欧亚小程序查看。"
+          );
+        }
       });
     },
     GET_DetailById(id) {
@@ -300,35 +341,32 @@ export default {
     },
     Start_Game() {
       // 在微信端打开 会有身份验证 路径中会带上 unionid
-      if (this.$route.query.unionid === undefined) {
-        this.$toast("企业微信端不能参与抽奖活动");
-        return false;
-      }
+      // if (
+      //   this.env.match(/MicroMessenger/i) !== "micromessenger" ||
+      //   this.env.match(/wxwork/i) == "wxwork"
+      // ) {
+      //   this.$toast("请在微信端参与活动！");
+      //   return false;
+      // }
       if (this.game_end) {
         this.$toast("活动已结束");
         return false;
       }
-      if (this.userBaseInfo.vipId === null) {
-        this.$toast("非会员,");
-        let url = "http://oysales.oywanhao.com/register";
-        window.location.href = url;
-        return false;
-      }
       if (this.rolling) {
         this.$toast("抽奖中，请勿多次点击！");
         return false;
       }
       let params = {
         activityId: this.active_id,
-        openId: this.userBaseInfo.openid,
+        openId: this.userBaseInfo.openid || "ofoA-xH5niSEVKKdaw2rE4bEZ3KY",
         phone: this.userBaseInfo.phone,
-        unionId: this.userBaseInfo.unionid,
+        unionId: this.userBaseInfo.unionid || "oCIMxuC30KJI9Kn_y4miMflyQ7BY",
         userName: this.userBaseInfo.name
       };
       APi_Active.play(params)
         .then(res => {
-          if (!res.data.prizedId) {
-            this.res_error = true;
+          if (!res.data.prizeId) {
+            this.showAward = false;
             this.$toast(res.data.message);
             return false;
           }
@@ -336,7 +374,7 @@ export default {
           this.rolling = true;
           const random = prizeList
             .map(item => item.id)
-            .indexOf(res.data.prizedId);
+            .indexOf(res.data.prizeId);
           this.wheelDeg =
             wheelDeg -
             (wheelDeg % 360) +
@@ -348,12 +386,21 @@ export default {
             this.rolling = false;
             this.showAward = true;
             this.isAward = res.data.prizeName !== "谢谢惠顾";
+            if (!this.isAward) {
+              this.$toast("");
+            }
           }, 4500);
         })
         .catch(err => {
           console.log("err", err);
         });
     },
+    getUrlParams(name) {
+      let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
+      if (reg.test(location.href))
+        return unescape(RegExp.$2.replace(/\+/g, " "));
+      return "";
+    },
     // 分享
     handleShare() {
       let env = window.navigator.userAgent.toLowerCase();
@@ -381,12 +428,14 @@ export default {
         );
       } else if (env.match(/micromessenger/i) == "micromessenger") {
         console.log("微信客户端");
-        let wx_url = `http://oysales.oywanhao.com:8087/activeDetail?id=${this.$route.query.id}&active_type=${this.$route.query.active_type}`;
-        
+        let id = this.getUrlParams("id");
+        let type = this.getUrlParams("active_type");
+        let wx_url = `http://oysales.oywanhao.com:8087/activeDetail?id=${id}&active_type=${type}`;
+
         wx.ready(function() {
           wx.onMenuShareTimeline({
-            title: `${this.$route.query.active_type === 'wheel' ? '抽奖' : '送券'}活动`, // 分享标题
-            link: url, // 分享链接,将当前登录用户转为puid,以便于发展下线
+            title: `${type === "wheel" ? "抽奖" : "送券"}活动`, // 分享标题
+            link: wx_url, // 分享链接,将当前登录用户转为puid,以便于发展下线
             imgUrl: "", // 分享图标
             success: function() {
               // 用户确认分享后执行的回调函数
@@ -532,7 +581,7 @@ export default {
         right: 0;
         bottom: 0;
         margin: auto;
-        font-size: 32px;
+        font-size: 20px;
         text-align: center;
         line-height: 32px;
         z-index: 10;
@@ -580,8 +629,12 @@ export default {
         transform-origin: bottom;
 
         .prize-name {
-          padding: 16px 0 0;
-          font-size: 14px;
+          padding: 0.75rem 0 0;
+          font-size: 0.4375rem;
+          height: 70%;
+          width: 0.5rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
 
         .prize-icon {
@@ -693,8 +746,11 @@ export default {
         width: 90%;
         height: 60%;
         margin: auto;
+        text-align: center;
+        font-size: 32px;
         color: #f00;
         p {
+          width: 50%;
           margin: 0;
         }
       }

wx_application/src/views/mainSale/active/main/index.vue

@@ -238,7 +238,7 @@ export default {
         this.flag = sessionStorage.getItem("role");
       }
     } else {
-      this.zReadyUserId()
+      // this.zReadyUserId()
       this.zTestGetNowUrlInfo()
     }
     this.GET_CurrentActive()

wx_application/src/views/mainSale/active/template/index.vue

@@ -74,7 +74,7 @@ export default {
     getTemplate(params) {
       API_Active.getTemplate(params).then(res => {
         this.active.push(...res.data.list);
-        if (res.data.list === []) {
+        if (res.data.list.length === 0) {
           this.list_finished = true;
         }
       });