活动模块前端细节处理1

wx_application/src/api/active.js

@@ -69,9 +69,13 @@ export function getAllCouponsByOyStallCode(id) {
   })
 }
 
-export function getUserBaseInfo(code) {
+/**
+ * 现有开展活动
+ */
+export function getCurrentActive() {
   return request({
-    url: `activity/getUserInfo?code=${code}`,
+    url: `activity/underway`,
     method: 'get'
   })
 }
+

wx_application/src/utils/Foundation.js

+export function CoutDown(Endtime) {
+
+  let leftTime = (new Date(Endtime)) - new Date(); //计算剩余的毫秒数
+  let days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
+  let hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
+  let minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
+  let seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
+
+  days = checkTime(days);
+  hours = checkTime(hours);
+  minutes = checkTime(minutes);
+  seconds = checkTime(seconds);
+
+  if (days >= 0 || hours >= 0 || minutes >= 0 || seconds >= 0) {
+    document.getElementById("timer").innerHTML = days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
+  }
+  if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
+    window.clearInterval(_ordertimer);
+    _ordertimer = null;
+  }
+  function checkTime(i) { //将0-9的数字前面加上0，例1变为01
+    if (i < 10) {
+      i = "0" + i;
+    }
+    return i;
+  }
+}
\ No newline at end of file

wx_application/src/views/active/activeDetail.vue

 <template>
   <div id="active-detail">
     <img class="bg" src="../../../public/img/activeDetail_bg.jpg" alt="bg" />
-    <template v-if="type === 'coupon'">
+    <template v-if="active_type === 'coupon'">
       <div class="coupon">
         <div class="user-icon">用户头像</div>
         <p class="slogan">送你限量优惠券，手慢无～</p>
@@ -22,12 +22,13 @@
         <div class="btn">立即领取</div>
       </div>
     </template>
-    <template v-if="type === 'wheel'">
+    <template v-if="active_type === 'wheel'">
       <div class="wheel-container">
         <p class="title">{{ activityName }}</p>
         <div class="wheel">
           <div class="wheel-point" @click="Start_Game"></div>
           <img src="../../../public/img/wheel.png" alt="wheel" />
+          <div class="circle"></div>
           <div
             class="wheel-bg"
             :class="{freeze: freeze}"
@@ -41,7 +42,7 @@
                 >
                   <div class="prize-name">{{ item.name }}</div>
                   <div class="prize-icon">
-                    <img :src="item.icon" />
+                    <img src="/img/counter.png" />
                   </div>
                 </div>
               </div>
@@ -59,7 +60,7 @@
         </div>
         <div class="time-line">
           距离结束仅剩
-          <span>16天10:45:38</span>
+          <span id="timer"></span>
         </div>
         <div class="description">
           <div class="t">活动介绍</div>
@@ -67,12 +68,16 @@
         </div>
       </div>
     </template>
-    <div class="btn-share" :style="type === 'coupon'? 'bottom: 0': ''" @click="handleShare">立即分享</div>
+    <div
+      class="btn-share"
+      :style="active_type === 'coupon'? 'bottom: 0': ''"
+      @click="handleShare"
+    >立即分享</div>
     <van-overlay :show="showAward" @click="showAward = false">
       <div class="wrapper" @click.stop>
         <div v-if="isAward" class="block">
           <p style="font-size: 20px;font-weight: bold;">OLAY全场通用抵扣券</p>
-          <p style="font-size: 20px;font-weight: bold;">一等奖！</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>
@@ -83,7 +88,6 @@
         </div>
       </div>
     </van-overlay>
-
     <wx-auth :show-auth="showAuthDialog" @confirm="handleCheckAuth"></wx-auth>
   </div>
 </template>
@@ -92,11 +96,14 @@
 import axios from "axios";
 import wxAuth from "@/components/wxAuth";
 import * as APi_Active from "@/api/active";
+import { CoutDown } from "@/utils/Foundation";
 export default {
   name: "active-detail",
   components: { wxAuth },
   data() {
     return {
+      timer: null,
+      timeLine: "1586628005000",
       isAward: false,
       showAward: false,
       userBaseInfo: "",
@@ -110,7 +117,7 @@ export default {
       userId: "",
       code: "",
       active_id: "",
-      type: "coupon",
+      active_type: "coupon",
       freeze: false,
       rolling: false,
       wheelDeg: 0,
@@ -149,40 +156,41 @@ export default {
       ],
       activityName: "",
       prizeDesc: "",
-      des: ""
+      des: "",
+      awardGood: {
+        prizeName: ""
+      }
     };
   },
   async created() {
     console.log("活动详情1");
     this.currentUrl = location.href;
     this.active_id = this.$route.query.id;
-    this.type = this.$route.query.type;
+    this.active_type = this.$route.query.active_type;
     console.log("query", this.$route.query);
     // 验证用户是否登录
     if (!sessionStorage.getItem("userId")) {
       // 1.获取code
-      if (this.$route.query.code === undefined) {
-        this.showAuthDialog = true;
+      if (this.$route.query.unionid === undefined) {
+        // this.showAuthDialog = true;
+        // this.getUnionid();
       } else {
-        this.userBaseInfo = await this.getUserBaseInfo(this.$route.query.code);
-        console.log("userbaseInfo", this.userBaseInfo);
-        if (this.userBaseInfo.unionid) {
         let params = {
           number: 7,
-            unionId: this.userBaseInfo.unionid
+          unionId: this.$route.query.unionid
         };
         APi_Active.isMember(params).then(res => {
           this.isMember = res.data.vipId !== "";
-            this.userBaseInfo.phone = res.data.mobile ? res.data.mobile : "";
+          this.userBaseInfo.mobile = res.data.mobile;
+          this.userBaseInfo.name = res.data.name;
         });
-        } else {
-          console.log("没有unionid");
-          this.isMember = false;
-        }
       }
     }
   },
   mounted() {
+    this.timer = setInterval(() => {
+      CoutDown('2020-5-13 2:5:47');
+    }, 1000);
     this.getAgentAuth();
     this.GET_DetailById(this.active_id);
   },
@@ -205,7 +213,9 @@ export default {
     // 领取
     handleGet() {
       this.showAward = false;
-      this.$toast('领取成功！奖品已经发送到您的会员账户，请进入欧亚小程序查看。')
+      this.$toast(
+        "领取成功！奖品已经发送到您的会员账户，请进入欧亚小程序查看。"
+      );
     },
     GET_DetailById(id) {
       APi_Active.getActiveDetailById(id).then(res => {
@@ -213,64 +223,18 @@ export default {
         this.activityName = res.data.activityName;
         this.des = res.data.des;
         this.prizeDesc = res.data.prizeDesc;
+        // this.prizeListOrigin = res.data.list;
       });
     },
     handleCheckAuth() {
       this.showAuthDialog = false;
-      this.getAuthCode();
-    },
-    async getUserBaseInfo(code) {
-      const res = await APi_Active.getUserBaseInfo(code);
-      return res;
-    },
-    // 获取code
-    getAuthCode() {
-      // alert('获取code')
-      const basicInfo = {
-        head: "https://open.weixin.qq.com/connect/oauth2/authorize?",
-        appId: "ww4df265003b43fa0d",
-        redirectUrI: encodeURIComponent(
-          `oysales.oywanhao.com:8087/activeDetail?id=${this.active_id}&type=${this.type}`
-        ),
-        responseType: "code",
-        scope: "snsapi_base",
-        state: "ztest",
-        tail: "#wechat_redirect"
-      };
-      let url =
-        basicInfo.head +
-        "appid=" +
-        basicInfo.appId +
-        "&redirect_uri=" +
-        basicInfo.redirectUrI +
-        "&response_type=" +
-        basicInfo.responseType +
-        "&scope=" +
-        basicInfo.scope +
-        "&state=" +
-        basicInfo.state +
-        basicInfo.tail;
-      window.location.href = url;
+      this.getUnionid();
     },
     getUnionid() {
-      // window.location.href = 'http://wxmc.oysd.cn/GetWXUserInfo.aspx'
-      // 获取用户 unionid、openid
-      // http://wxmc.oysd.cn/GetWXUserInfo.aspx
-      // axios({
-      //   url: `http://wxmc.oysd.cn/GetWXUserInfo.aspx`,
-      //   method: 'get'
-      // }).then(res => {
-      //   console.log(res);
-      //   this.unionid = res.msg.unionid;
-      //   this.openid = res.msg.openid;
-      //   let params = {
-      //     number: 7,
-      //     unionId: this.unionid
-      //   }
-      //   APi_Active.isMember(params).then(res => {
-      //     this.isMember = res.data.vipId !== '';
-      //   })
-      // })
+      let redirect_uri = encodeURIComponent(
+        `oysales.oywanhao.com:8087/activeDetail?id=${this.active_id}&active_type=${this.active_type}`
+      );
+      window.location.href = `http://wxsyls.oysd.cn/getwxuserinfo.aspx?jump=${redirect_uri}`;
     },
     Start_Game() {
       if (!this.isMember) {
@@ -281,23 +245,26 @@ export default {
       }
       let params = {
         activityId: this.active_id,
-        openId: this.userBaseInfo.openId,
+        openId: this.$route.query.openId,
         phone: this.userBaseInfo.phone,
-        unionId: this.userBaseInfo.unionId,
-        // userId:
-        userName: this.getUserBaseInfo.nickname
+        unionId: this.$route.query.unionId,
+        userName: this.userBaseInfo.name
       };
       APi_Active.play(params)
         .then(res => {
           this.rolling = true;
           const { wheelDeg, prizeList } = this;
-          const random = parseInt(6 * Math.random(0, 5));
+          // const random = parseInt(6 * Math.random(0, 5));
+          const random = prizeList
+            .map(item => item.id)
+            .indexOf(res.data.prizeId);
           this.wheelDeg =
             wheelDeg -
             (wheelDeg % 360) +
             6 * 360 -
             (360 / prizeList.length) * random;
           setTimeout(() => {
+            this.awardGood = prizeList[random] || "";
             this.rolling = false;
             this.showAward = true;
             this.isAward = res.data.prizeName !== "谢谢惠顾";
@@ -309,14 +276,12 @@ export default {
     },
     // 分享
     handleShare() {
-      console.log("立即分享");
-      let url = `http://oysales.oywanhao.com:8087/activeDetail?id=${this.active_id}&type=${this.type}`;
-      console.log("url", url);
+      let url = `http://oysales.oywanhao.com:8087/activeDetail?id=${this.active_id}&active_type=${this.active_type}`;
       wx.invoke(
         "shareToExternalContact",
         {
-          title: "大转盘", // 分享标题
-          desc: "抽奖活动", // 分享描述
+          title: `${this.activityName}`, // 分享标题
+          desc: `${this.des}`, // 分享描述
           link: url, // 分享链接
           imgUrl: "" // 分享封面
         },
@@ -329,6 +294,9 @@ export default {
         }
       );
     }
+  },
+  destroyed() {
+    clearInterval(this.timer)
   }
 };
 </script>

wx_application/src/views/active/activeList.vue

@@ -2,20 +2,41 @@
   <div class="container">
     <div class="title">
       <span>大转盘抽奖</span>
-      <span class="fr">查看更多<span class="icon">></span></span>
     </div>
     <div class="active">
-      <div class="list" v-for="item in activeList" :key="item.id" @click="toDetail(item.id, item.activityType)">
-          <div class="left"></div>
+      <template v-for="(item, index) in activeList">
+        <div
+          v-if="index < wheelActive_limit"
+          class="list"
+          :key="item.id"
+          @click="toDetail(item.id, item.activityType)"
+        >
+          <div class="left">
+            <img :src="item.logo" alt="logo" style="width:100%;height:100%;" />
+          </div>
           <div class="right">
             <h3>{{ item.activityName }}</h3>
             <p>{{ item.des }}</p>
           </div>
         </div>
+      </template>
+      <span
+        class="more"
+        v-if="activeList.length && !activeList_finished"
+        @click="handleWheelActiveMore"
+      >
+        查看更多
+        <span class="icon">></span>
+      </span>
     </div>
     <div v-if="couponList.length > 0" class="fg">送券活动</div>
     <div class="active">
-      <div class="list" v-for="item in couponList" :key="item.id" @click="toDetail(item.id, item.activityType)">
+      <div
+        class="list"
+        v-for="item in couponList"
+        :key="item.id"
+        @click="toDetail(item.id, item.activityType)"
+      >
         <div class="left"></div>
         <div class="right">
           <h3>{{ item.activityName }}</h3>
@@ -27,70 +48,84 @@
 </template>
 
 <script>
-import * as API_Active from '@/api/active';
+import * as API_Active from "@/api/active";
 export default {
   data() {
     return {
+      wheelActive_limit: 3,
+      activeList_finished: false,
       activeList: [
         {
           id: 1,
-          activityType: 'coupon',
-          activityName: '砍价',
-          des: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。'
+          activityType: "coupon",
+          activityName: "砍价",
+          des: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。"
         },
         {
           id: 2,
-          activityType: 'wheel',
-          activityName: '集赞',
-          des: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。'
+          activityType: "wheel",
+          activityName: "集赞",
+          des: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。"
         }
       ],
       couponList: [
         {
           id: 1,
-          activityType: 'coupon',
-          activityName: '砍价',
-          des: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。'
+          activityType: "coupon",
+          activityName: "砍价",
+          des: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。"
         },
         {
           id: 2,
-          activityType: 'wheel',
-          activityName: '集赞',
-          des: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。'
+          activityType: "wheel",
+          activityName: "集赞",
+          des: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。"
         }
       ],
       params: {
         pageNo: 1,
         pageSize: 10
       }
-    }
+    };
   },
   mounted() {
     this.getActiveList(this.params);
   },
   methods: {
+    handleWheelActiveMore() {
+      this.wheelActive_limit += 3;
+      if (this.wheelActive_limit === this.activeList.length - 3) {
+        this.activeList_finished = true;
+        return;
+      }
+    },
     // 获取 活动列表
     getActiveList(params) {
       API_Active.getActiveList(params).then(res => {
-        console.log('获取到数据');
+        console.log("获取到数据");
         this.activeList = res.data.list;
-      })
+      });
     },
     // 跳转到 活动详情
     toDetail(active_id, type) {
       this.$router.push({
-        path: '/activeDetail',
+        path: "/activeDetail",
         query: {
           id: active_id,
-          type: type
+          active_type: type
         }
-      })
+      });
     }
   }
 };
 </script>
 
 <style scoped>
+.more {
+  float: right;
+  margin-bottom: 5px;
+  font-size: 12px;
+}
 .container {
   height: auto;
   background-color: rgba(248, 248, 248, 1);
@@ -122,7 +157,7 @@ export default {
 .active {
   background-color: #fff;
   padding: 12px 12px 0 12px;
-  box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
+  box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
 }
 .list {
   height: 94px;
@@ -130,19 +165,20 @@ export default {
   background-color: #fff;
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid rgba(238,238,238,1);
+  border-bottom: 1px solid rgba(238, 238, 238, 1);
   margin-bottom: 14px;
 }
 .list3 {
   border-bottom: none;
   margin-bottom: 0;
 }
-.left,.right {
+.left,
+.right {
   height: 80px;
 }
 .left {
   width: 80px;
-  background:rgba(248,248,248,1);  
+  background: rgba(248, 248, 248, 1);
 }
 .right {
   width: 76%;
@@ -151,12 +187,12 @@ export default {
 }
 h3 {
   font-size: 14px;
-  font-weight:bold;
-  color:rgba(45,71,106,1);
+  font-weight: bold;
+  color: rgba(45, 71, 106, 1);
 }
 p {
   margin-top: 10px;
-  font-size:12px;
-  color:rgba(45,71,106,0.8);
+  font-size: 12px;
+  color: rgba(45, 71, 106, 0.8);
 }
 </style>

wx_application/src/views/active/more.vue

+<template>
+  <div id="more">
+    
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'more',
+  components: {},
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+</style>