武汉大学抽奖

src/mixins/drawMixin.js

@@ -17,7 +17,8 @@ export default {
   data() {
     return {
       // * 定时函数
-      drawTiming: null
+      drawTiming: null,
+      mixinTransform: '',
     }
   },
   mounted () {
@@ -38,11 +39,13 @@ export default {
           // 表示更宽
           scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
           scale.height = (window.innerHeight / baseHeight).toFixed(5)
+          this.mixinTransform = `scale(${scale.width}, ${scale.height})`
           appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
         } else {
           // 表示更高
           scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
           scale.width = (window.innerWidth / baseWidth).toFixed(5)
+          this.mixinTransform = `scale(${scale.width}, ${scale.height})`
           appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
         }
       }

src/views/activity/activityUser.vue

@@ -78,7 +78,11 @@
             prop: 'name',
             label: '用户名称',
             align: 'left',
-
+            customFn: row => {
+              return (
+                <span>{ row.name ? row.name : (row.nickname ? JSON.parse(row.nickname) : '')}</span>
+              )
+            }
 
           }, {
             prop: 'top_department_id',

src/views/page/xhxcelshDraw.vue

@@ -33,12 +33,16 @@
       <div class="btn-end" v-show="!isResult && start">
         <img src="~@/assets/xhxcelsh/btn-end.png" alt="" @click="end">
       </div>
+      <div class="btn-end" v-show="isResult && !start">
+        <img src="~@/assets/xhxcelsh/res-btn.png" alt="" @click="showEnd = true">
+      </div>
+    </div>
 
 
     <transition name="fade">
       <div class="start-container" v-show="!start && !isResult">
         <div class="mask"></div>
-          <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
+        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;" :style="{ transform: mixinTransform }">
           <div class="start-container__title">
             {{ product.price_item }}{{ product.total }}名
           </div>
@@ -59,11 +63,11 @@
     </transition>
 
     <transition name="fade">
-        <div class="end-container" v-show="!start && isResult">
+      <div class="end-container" v-show="!start && isResult && showEnd">
         <div class="mask"></div>
 
-          <div class="body">
+        <div class="body" :style="{ transform: mixinTransform }">
-            <div class="close">
+          <div class="close" @click="showEnd = false">
             <i class="el-icon-close"></i>
           </div>
 
@@ -72,16 +76,15 @@
           </div>
 
           <div class="result-users">
-              <div class="result-users-item" v-for="i in 10">
+            <div class="result-users-item" v-for="i in resultUsers">
-                <img class="result-users-item__avatar" src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIIMRcKFGZTZCqa5TZlKYogFOHrDQUe1iacWUJYcS3fjrwib2K5lG52Cd1y93UUd7Ynnvvw1tTYR2lw/132" alt="">
+              <img class="result-users-item__avatar" :src="i.headimgurl" alt="">
-                <div class="result-users-item__name">abc</div>
+              <div class="result-users-item__name">{{ i.nickname ? JSON.parse(i.nickname) : '' }}</div>
             </div>
           </div>
         </div>
       </div>
     </transition>
   </div>
-  </div>
 </template>
 
 <script>
@@ -91,6 +94,7 @@ import { index } from '@/api/activity/activityUser'
 import drawMixin from '@/mixins/drawMixin'
 import { draw } from "@/api/mdLotteryDraw";
 import {
+  drawLog,
   show
 } from "@/api/activity/drawPrize";
 export default {
@@ -99,21 +103,36 @@ export default {
   mixins: [drawMixin],
   data() {
     return {
+      showEnd: false,
       isResult: false,
       start: false,
       avatars: [],
       timer: null,
       product: {},
+      originalUsers: [],
 
       columnIndex: 0,
+      resultUsers: [],
     }
   },
   methods: {
+    async getResult() {
+      const res = await drawLog(
+        {
+          page: 1,
+          page_size: 9999,
+          activity_list_id: 16,
+        },
+        false
+      );
+      const resUsers = res.data.filter((i) => i.draw_prize_id == this.$route.params.id)
+      this.resultUsers = this.originalUsers.filter(i => resUsers.find(j => j.mobile == i.id))
+      this.showEnd = true
+    },
     async getProduct() {
       const res = await show({
         id: this.$route.params.id,
       },false);
-      console.log(444,res)
       this.product = res
     },
     async getUsers() {
@@ -123,6 +142,7 @@ export default {
           page_size: 9999,
           activity_list_id: 16
         },false)).data
+        this.originalUsers = res;
         let users = [];
         //19x6
         if (res.length < (19*6*2)) {
@@ -191,13 +211,16 @@ export default {
     }),
     async end() {
       try {
-        const result = await draw({
+        const result = (await draw({
           id: this.$route.params.id,
-        });
+        })).draw_numbers;
-        console.log(result)
+        this.resultUsers = this.originalUsers.filter(item => result.indexOf(item.id) !== -1)
         clearInterval(this.timer)
         this.start = false
+        this.isResult = true
+        this.showEnd = true
       } catch (err) {
+        console.log(err)
         this.$message.warning({
           message: "操作失败"
         })
@@ -214,7 +237,12 @@ export default {
     this.getProduct()
   },
   mounted() {
-    this.getUsers()
+    this.getUsers().then(_ => {
+      if(this.$route.query.result == 1) {
+        this.isResult = true
+        this.getResult()
+      }
+    })
   },
   beforeDestroy() {
     clearInterval(this.timer)
@@ -239,6 +267,7 @@ export default {
     left: 50%;
     transform: translate(-50%, -50%);
     transform-origin: left top;
+    overflow: hidden;
 
     .img {
       @mixin img {
@@ -422,7 +451,7 @@ export default {
   .body {
     width: 2334px;
     height: 1425px;
-    position: relative;
+    position: absolute;
     background: url("~@/assets/xhxcelsh/result-bkg.png") no-repeat #ffffff;
     background-size: cover;
     border-radius: 10px;
@@ -475,8 +504,8 @@ export default {
       &-item {
 
         &__avatar {
-          width: 292px;
+          width: 280px;
-          height: 292px;
+          height: 280px;
           object-fit: cover;
           border-radius: 100%;
         }

vue.config.js

@@ -25,7 +25,7 @@ module.exports = {
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
   publicPath: '/admin/',
-  outputDir: '/Users/mac/Documents/朗业/0-朗业基础库/h5/public/admin',
+  outputDir: './dist',
   assetsDir: 'static',
   css: {
     loaderOptions: { // 向 CSS 相关的 loader 传递选项