feat:红包弹出逻辑

api/home.js

@@ -182,3 +182,11 @@ export function logListByUserId(data) {
 export function exclusivePage(data) {
 	return request.get('/v1/re/exclusivePage', data)
 }
+// 判断当前用户是否可以抢红包
+export function grabFlag(data) {
+	return request.get('/v1/re/grabFlagList', data)
+}
+// 抢红包
+export function doGrab(data) {
+	return request.get('/v1/re/grab', data)
+}

pages.json

@@ -24,6 +24,7 @@
 			"path": "pages/order_addcart/order_addcart",
 			"style": {
 				"navigationBarTitleText": "红包",
+				"enablePullDownRefresh": true,
 				"app-plus": {
 					// #ifdef APP-PLUS
 					"titleNView": {

pages/order_addcart/order_addcart.vue

@@ -81,6 +81,52 @@
         <text class="balance">{{ src.totalAmount }}</text>
       </view>
     </view>
+    <u-overlay :show="show" @click="show = false">
+      <view class="warp">
+        <view class="rect" @tap.stop>
+          <view class="cover-img">
+            <img class="avatar" :src="userInfo.avatar" />
+          </view>
+          <view class="h-info"
+            >当前红包
+            {{ ["随机红包", "专属红包", "共富红包"][activeRedPer.type] }}
+            <view class="paper_list">
+              <text
+                :class="{
+                  acitiveRedper: activeRedPer.type === item.type,
+                }"
+                @click="activeRedPer = item;grabAmountFlag = false;"
+                v-for="item in redPaper"
+                :key="item.type"
+              >
+                {{ ["随机红包", "专属红包", "共富红包"][item.type] }}
+              </text>
+            </view>
+            <view class="grabAmount_count" v-if="grabAmountFlag">
+              <text>恭喜您获得</text>
+              <text>￥ {{ currentRedpaper.grabAmount }}</text>
+            </view>
+          </view>
+          <img
+            class="op-img"
+            @click="doGrab"
+            src="http://wine.gzzzyd.com/wx/order_addcart/ling.png"
+            alt=""
+          />
+          <!-- <img class="op-img" src="http://wine.gzzzyd.com/wx/order_addcart/kai.png" alt=""> -->
+          <view class="b-info">
+            今日已领取{{
+              redPaper.filter((e) => {
+                return e.flag === 0;
+              }).length
+            }}/3
+          </view>
+          <view class="b-box">
+            <text> 参与共富模式,用户可下单领取红包 </text>
+          </view>
+        </view>
+      </view>
+    </u-overlay>
   </view>
 </template>
 
@@ -92,7 +138,9 @@ let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
 let sysHeight = 0
 // #endif
 import {
+  grabFlag,
   leaderboard,
+  doGrab,
   todayStatistics
 } from '@/api/home.js';
 import {
@@ -136,6 +184,17 @@ export default {
   data () {
     return {
       isactiveTab: 'todayRank',
+      grabFlagisOpen: false,
+      grabAmountFlag: false,
+      show: false,
+      userInfo: {},
+      activeRedPer: {
+        type: 0
+      },
+      currentRedpaper: {
+        // 抢到的金额
+        grabAmount: '0.00'
+      },
       moneyObj: {
         lossTotalAmount: "0",
         receiveItemAmount: "0",
@@ -181,6 +240,7 @@ export default {
         productSelect: {}
       },
       rankList: [],
+      redPaper: [],
       productValue: [], //系统属性
       storeInfo: {},
       attrValue: '', //已选属性
@@ -195,6 +255,7 @@ export default {
   },
   computed: mapGetters(['isLogin']),
   onPullDownRefresh () {
+    this.grabFlag()
     console.log('下拉刷新');
   },
   onLoad (options) {
@@ -240,13 +301,16 @@ export default {
     };
   },
   created () {
-		uni.navigateTo({
-        url: '/pages/order_addcart/wallet_accelerate/index'
-      })
+    this.userInfo = JSON.parse(this.$Cache.get("USER_INFO"));
+    console.log(this.userInfo, this.userInfo.avatar);
+    this.grabFlag('created')
     this.leaderboard()
     this.todayStatistics()
   },
   methods: {
+    change (e) {
+      this.show = e.show
+    },
     goReceived () {
       uni.navigateTo({
         url: '/pages/order_addcart/wallet_received/index'
@@ -257,6 +321,17 @@ export default {
         url: '/pages/order_addcart/wallet_missed/index'
       })
     },
+    doGrab () {
+      doGrab({
+        type: this.activeRedPer.type
+      }).then(res => {
+        // if (res.code === 200) {
+        //   this.grabFlag('dograbAmountFlag')
+        // }
+        this.currentRedpaper = res.data
+        this.grabAmountFlag = true
+      })
+    },
     // 授权关闭
     authColse: function (e) {
       this.isShowAuth = e;
@@ -326,6 +401,28 @@ export default {
         uni.hideLoading();
       })
     },
+
+    grabFlag (params) {
+      grabFlag().then(res => {
+        this.redPaper = res.data
+        if (!params) {
+          this.grabAmountFlag = false
+        }
+        if (params === 'created') {
+          let flag = redPaper.filter((e) => {
+            return e.flag === 0;
+          }).length
+          if (flag === 0) {
+            this.show = false
+            uni.stopPullDownRefresh();
+            return
+          }
+        }
+        this.activeRedPer = res.data[0]
+        this.show = true
+        uni.stopPullDownRefresh();
+      })
+    },
     todayStatistics () {
       uni.showLoading({
         title: this.$t(`加载中`),
@@ -1517,4 +1614,85 @@ export default {
     }
   }
 }
+.warp {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.rect {
+  position: relative;
+  width: 700rpx;
+  height: 950rpx;
+  background: url("http://wine.gzzzyd.com/wx/order_addcart/hongbao_bg.png")
+    no-repeat;
+
+  background-size: 700rpx 950rpx;
+  .cover-img {
+    margin-top: 80rpx;
+    position: relative;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    .avatar {
+      position: absolute;
+      z-index: 9999;
+      width: 120rpx;
+      height: 120rpx;
+    }
+  }
+  .h-info {
+    position: relative;
+    text-align: center;
+    padding: 10rpx;
+    height: 390rpx;
+    color: white;
+    .paper_list {
+      margin: 20rpx;
+      text {
+        margin-right: 10rpx;
+      }
+    }
+    .grabAmount_count {
+      margin-top: 80rpx;
+      color: rgb(244, 180, 53);
+      &:nth-child(1) {
+        font-size: 32rpx;
+      }
+    }
+  }
+  .op-img {
+    cursor: pointer;
+    position: relative;
+    left: 50%;
+    transform: translate(-50%, 0rpx);
+    width: 150rpx;
+    height: 150rpx;
+  }
+  .b-info {
+    font-size: 22rpx;
+    width: 100%;
+    text-align: center;
+    color: rgb(244, 180, 53);
+    margin-bottom: 30rpx;
+  }
+  .b-box {
+    margin: 0 auto;
+    color: rgb(244, 180, 53);
+    border-radius: 50rpx;
+    width: 55%;
+    font-size: 22rpx;
+    height: 40rpx;
+    line-height: 40rpx;
+    background: rgb(196, 40, 62);
+    text-align: center;
+  }
+}
+.acitiveRedper {
+  color: rgb(244, 180, 53);
+  text-decoration: underline;
+}
 </style>