抽盒机详情完善，购买弹窗组件跳转

api/drawCard.js

@@ -112,3 +112,19 @@ export function getBoxList(data) {
     data: data,
   })
 }
+// 箱中盒子详情
+export function getBoxDetail(data) {
+  return request({
+    url: '/wx/bkm/boxExtractor/box/detail',
+    method: 'get',
+    data: data,
+  })
+}
+// 箱子奖品预览列表
+export function getRoundPrizes(data) {
+  return request({
+    url: '/wx/bkm/boxExtractor/round/prize',
+    method: 'get',
+    data: data,
+  })
+}

component/paymentPopup.vue

@@ -215,10 +215,13 @@ export default {
       //计算订单价格
       this.getPrice()
     },
-    show(id, list, info) {
+    show(params, list, info) {
       this.refresh()
       console.log(list, 'list')
-      this.params.raffleId = id
+      this.params = {
+        ...this.params,
+        ...params,
+      }
       console.log(toString.call(list), 'toString')
       if (toString.call(list) == '[object Array]') {
         this.params.raffleNumList = list

pages/drawCard_box/drawCard_box.vue

@@ -19,7 +19,7 @@
 
     <view class="buttons">
       <view class="button" @click="toKnapsack">背包</view>
-      <view class="button" @click="toWinningRecord">中奖记录</view>
+      <!-- <view class="button" @click="toWinningRecord">中奖记录</view> -->
     </view>
     <view class="rightButtons">
       <view class="button">规则</view>

pages/drawCard_box/drawCard_boxDetail.vue

@@ -1,20 +1,258 @@
 <template>
   <view class="container">
+    <view class="product">
+      <uni-swiper-dot class="uni-swiper-dot-box" :info="info" :current="current" :mode="mode" field="content">
+        <swiper class="swiper-box" @change="swiperChange" :current="swiperDotIndex">
+          <swiper-item v-for="(item, index) in boxDetail.boxLeft">
+            <image class="swiperItem" :src="detail.prizeIcon" mode="aspectFit" />
+          </swiper-item>
+        </swiper>
+      </uni-swiper-dot>
+    </view>
+    <view class="number">{{ num }} / {{ boxDetail.boxLeft }} 包</view>
+    <view class="tipText">官方正品，非质量问题不支持退换</view>
+    <view class="prizes">
+      <view class="prizesLine">
+        <view class="prize" v-for="(item, index) in prizeList">
+          <image class="prizeImg" :src="item.icon" mode="aspectFit"></image>
+          <view class="info">
+            <view class="name">
+              {{ item.name }}
+            </view>
+            <view class="price">￥{{ detail.price }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="buttons">
+      <view class="button button1" @click="currentChange">换一包</view>
+      <view class="button button2" @click="buy">就买它</view>
+    </view>
     <view class="rightButtons">
       <view class="button">规则</view>
       <view class="button" @click="toKnapsack" style="top: 44px">背包</view>
       <view class="button" @click="toWinningRecord" style="bottom: 0">中奖记录</view>
     </view>
+
+    <paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
   </view>
 </template>
 
-<script></script>
+<script>
+import paymentPopup from '@/component/paymentPopup.vue'
+import { raffleDetailApi, getRoundPrizes, getBoxDetail } from '@/api/drawCard.js'
+export default {
+  components: {
+    paymentPopup,
+  },
+  data() {
+    return {
+      query: null,
+      detail: null,
+      boxDetail: null,
+      current: 0,
+      mode: 'dot',
+      swiperDotIndex: 0,
+      num: 1,
+      prizeList: [],
+    }
+  },
+  onLoad(query) {
+    console.log(query, 'query')
+    this.query = query
+    if (query.raffleId) {
+      this.getBoxDetail()
+      this.getDetail()
+      this.getCard()
+    }
+  },
+  methods: {
+    aniRun() {
+      // 同时右平移到 100px,旋转 360 读
+      this.$refs.ani.step({
+        translateX: '100px',
+        rotate: '360',
+      })
+      // 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
+      this.$refs.ani.step(
+        {
+          translateX: '0px',
+          rotate: '0',
+        },
+        {
+          timingFunction: 'ease-in',
+          duration: 200,
+        },
+      )
+      // 开始执行动画
+      this.$refs.ani.run(() => {
+        this.aniRun()
+      })
+    },
+    // 购买
+    buy() {
+      this.$refs.paymentPopup.show(this.query, 1, this.detail)
+    },
+    // 支付成功后回调
+    paymentSuccess() {
+      // this.init()
+    },
+    getDetail() {
+      let params = {
+        raffleId: this.query.raffleId,
+      }
+      raffleDetailApi(params).then(res => {
+        console.log(res, '详情')
+        this.detail = res.data
+      })
+    },
+    getBoxDetail() {
+      getBoxDetail(this.query).then(res => {
+        console.log(res, 'res')
+        this.boxDetail = res.data
+      })
+    },
+    getCard() {
+      let params = {
+        raffleId: this.query.raffleId,
+        roundId: this.query.roundId,
+      }
+      getRoundPrizes(params).then(res => {
+        console.log(res, '抽盒机奖品预览')
+        this.prizeList = res.data
+      })
+    },
+    swiperChange(value) {
+      console.log(value)
+      this.num = value.detail.current + 1
+    },
+    currentChange() {
+      if (this.swiperDotIndex < this.boxDetail.boxLeft - 1) {
+        this.swiperDotIndex += 1
+      } else {
+        this.swiperDotIndex = 0
+      }
+    },
+    toKnapsack() {
+      // 跳转背包界面
+      wx.navigateTo({
+        url: '/pages/knapsack/knapsack',
+      })
+    },
+    toWinningRecord() {
+      this.$navigateTo('/pages/winningRecord/winningRecord', this.query)
+    },
+  },
+}
+</script>
 
 <style scoped lang="scss">
 .container {
   background: #9ec8f9;
   overflow: inherit;
 
+  .product {
+    display: flex;
+    justify-content: center;
+    margin: 20vw auto 0 auto;
+    // background: #fff;
+
+    .uni-swiper-dot-box {
+      display: inline-block;
+      width: 60vw;
+      height: 60vw;
+
+      .swiper-box {
+        width: 60vw;
+        height: 60vw;
+      }
+
+      .swiperItem {
+        width: 60vw;
+        height: 60vw;
+      }
+    }
+  }
+
+  .number {
+    margin-top: 5vw;
+    text-align: center;
+    color: #ffffff;
+    text-shadow: 2px 2px 2px #829bfb;
+    font-weight: 600;
+  }
+
+  .tipText {
+    text-align: center;
+    margin-top: 3vw;
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  .prizes {
+    margin-top: 15vw;
+    overflow: auto;
+    padding: 0 20px;
+
+    .prizesLine {
+      position: relative;
+      white-space: nowrap;
+    }
+    .prize {
+      display: inline-block;
+      margin-right: 10px;
+      background: linear-gradient(180deg, #faf1a7 0%, #ffe456 100%);
+      border-radius: 5px;
+      overflow: hidden;
+
+      .prizeImg {
+        width: 20vw;
+        height: 20vw;
+      }
+
+      .info {
+        background: #fff;
+        text-align: center;
+
+        .name {
+          font-size: 12px;
+        }
+
+        .price {
+          color: #ff2c43;
+          font-size: 12px;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+
+  .buttons {
+    margin-top: 5vw;
+    display: flex;
+    justify-content: space-around;
+
+    .button {
+      width: 35vw;
+      height: 40px;
+      padding: 0 20px;
+      border-radius: 20px;
+      line-height: 40px;
+      color: #fff;
+      font-weight: 600;
+      font-size: 18px;
+      text-align: center;
+    }
+
+    .button1 {
+      background: linear-gradient(180deg, #89a9fa 0%, #716ff5 100%);
+    }
+
+    .button2 {
+      background: linear-gradient(180deg, #fae5af 0%, #f3ba8e 100%);
+    }
+  }
+
   .rightButtons {
     position: fixed;
     right: 0;

pages/drawCard_first/drawCard_first.vue

@@ -196,7 +196,10 @@ export default {
         })
         return
       }
-      this.$refs.paymentPopup.show(this.params.raffleId, this.selectIndex, this.detail)
+      let params = {
+        raffleId: this.params.raffleId,
+      }
+      this.$refs.paymentPopup.show(params, number, this.detail)
     },
     // 支付成功后回调
     paymentSuccess() {

pages/drawCard_fullSet/drawCard_fullSet.vue

@@ -306,7 +306,10 @@ export default {
         })
         return
       }
-      this.$refs.paymentPopup.show(this.params.raffleId, this.selectIndex, this.detail)
+      let params = {
+        raffleId: this.params.raffleId,
+      }
+      this.$refs.paymentPopup.show(params, number, this.detail)
     },
     // 支付成功后回调
     paymentSuccess() {

pages/drawCard_infinite/drawCard_infinite.vue

@@ -381,7 +381,10 @@ export default {
       })
     },
     submit(number) {
-      this.$refs.paymentPopup.show(this.raffleId, number, this.detail)
+      let params = {
+        raffleId: this.raffleId,
+      }
+      this.$refs.paymentPopup.show(params, number, this.detail)
     },
   },
 }

pages/drawCard_last/drawCard_last.vue

@@ -351,7 +351,10 @@ export default {
         })
         return
       }
-      this.$refs.paymentPopup.show(this.params.raffleId, this.selectIndex, this.detail)
+      let params = {
+        raffleId: this.params.raffleId,
+      }
+      this.$refs.paymentPopup.show(params, number, this.detail)
     },
     // 支付成功后回调
     paymentSuccess() {

pages/raffle/raffle.vue

@@ -178,6 +178,7 @@ export default {
       return url
     },
     clickTab(index) {
+      this.list = []
       this.tabActive = index
       this.getList()
     },
@@ -192,6 +193,7 @@ export default {
   width: 100%;
   height: 100%;
 }
+
 .tabs {
   margin: 10px 0;
   height: 36px;
@@ -206,6 +208,7 @@ export default {
     }
   }
 }
+
 .list {
   padding: 10px;
 
@@ -217,6 +220,7 @@ export default {
     margin-bottom: 10px;
     overflow: hidden;
   }
+
   .ka1 {
     padding: 10px;
     display: flex;
@@ -230,6 +234,7 @@ export default {
       border-radius: 10px;
       margin-right: 8px;
     }
+
     .rightInfo {
       flex: 1;
 
@@ -242,6 +247,7 @@ export default {
           color: #ff2c43;
         }
       }
+
       .title {
         font-size: 17px;
         font-weight: 600;
@@ -250,6 +256,7 @@ export default {
         text-overflow: ellipsis;
         overflow: hidden;
       }
+
       .prizes {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
@@ -261,6 +268,7 @@ export default {
           margin-right: 5px;
         }
       }
+
       .tags {
         position: absolute;
         right: -1px;
@@ -274,13 +282,16 @@ export default {
           width: 50px;
           height: 20px;
         }
+
         .tag_0 {
           z-index: 3;
         }
+
         .tag_1 {
           right: -9px;
           z-index: 2;
         }
+
         .tag_2 {
           right: -18px;
           z-index: 1;
@@ -289,6 +300,7 @@ export default {
     }
   }
 }
+
 .list2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -315,6 +327,7 @@ export default {
         // height: 50vw;
       }
     }
+
     .ka-info {
       padding: 10px;
 
@@ -326,6 +339,7 @@ export default {
         overflow: hidden;
         text-overflow: ellipsis;
       }
+
       .row {
         position: relative;
         margin-top: 5px;
@@ -334,6 +348,7 @@ export default {
 
         .tag {
         }
+
         .money {
           font-size: 12px;
           font-weight: 600;
@@ -343,25 +358,31 @@ export default {
     }
   }
 }
+
 .three {
   grid-template-columns: 1fr 1fr 1fr;
 
   .ka {
     width: 100%;
+
     .top {
       image {
         width: 80%;
         height: 30vw;
       }
     }
+
     .ka-info {
       padding: 5px 5px 10px 5px;
+
       .ka-name {
         font-size: 12px;
       }
+
       .row {
         margin-top: 2px;
         justify-content: flex-end;
+
         .tag {
           display: none;
         }

pages/winningRecord/winningRecord.vue

@@ -35,12 +35,13 @@ export default {
     return {
       rewardType: rewardType,
       list: [],
+      params: {},
     }
   },
   onLoad(query) {
     console.log(query, 'query')
     if (query.raffleId) {
-      this.raffleId = query.raffleId
+      this.params = query
       // 根据卡包id获取中奖记录
       this.getList()
     }
@@ -51,7 +52,7 @@ export default {
       let params = {
         limit: 999,
         page: 1,
-        raffleId: this.raffleId,
+        ...this.params,
       }
       prizeUserListApi(params).then(res => {
         console.log(res, 'res中奖记录')