fix:调整红包样式

pages/order_addcart/order_addcart.vue

@@ -84,13 +84,7 @@
     <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">
+          <view class="paper_list">
               <text
                 :class="{
                   acitiveRedper: activeRedPer.type === item.type,
@@ -102,10 +96,19 @@
                 {{ ["随机红包", "专属红包", "共富红包"][item.type] }}
               </text>
             </view>
+          <view class="cover-img">
+            <img class="avatar" :src="userInfo.avatar" />
+          </view>
+          <view class="h-info"
+            >当前红包
+            {{ ["随机红包", "专属红包", "共富红包"][activeRedPer.type] }}
             <view class="grabAmount_count" v-if="grabAmountFlag">
               <text>恭喜您获得</text>
               <text>￥ {{ currentRedpaper.grabAmount }}</text>
             </view>
+            <view class="grabAmount_count" v-if="(activeRedPer.msg && !grabAmountFlag)">
+              <text>{{ activeRedPer.msg }}</text>
+            </view>
           </view>
           <img
             class="op-img"
@@ -321,17 +324,7 @@ 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;
@@ -401,7 +394,18 @@ export default {
         uni.hideLoading();
       })
     },
-
+    doGrab () {
+      doGrab({
+        type: this.activeRedPer.type
+      }).then(res => {
+        // if (res.code === 200) {
+        //   this.grabFlag('dograbAmountFlag')
+        // }
+        this.currentRedpaper = res.data
+        this.grabAmountFlag = true
+        this.grabFlag('dograbAmountFlag')
+      })
+    },
     grabFlag (params) {
       grabFlag().then(res => {
         this.redPaper = res.data
@@ -409,16 +413,19 @@ export default {
           this.grabAmountFlag = false
         }
         if (params === 'created') {
-          let flag = redPaper.filter((e) => {
-            return e.flag === 0;
+          this.activeRedPer = res.data[0]
+          let flag = this.redPaper.filter((e) => {
+            return e.flag === 1;
           }).length
+          console.log(flag,this.activeRedPer);
           if (flag === 0) {
             this.show = false
             uni.stopPullDownRefresh();
             return
           }
+      
         }
-        this.activeRedPer = res.data[0]
+
         this.show = true
         uni.stopPullDownRefresh();
       })
@@ -1626,10 +1633,10 @@ export default {
   height: 950rpx;
   background: url("http://wine.gzzzyd.com/wx/order_addcart/hongbao_bg.png")
     no-repeat;
-
+  padding-top: 60rpx;
   background-size: 700rpx 950rpx;
   .cover-img {
-    margin-top: 80rpx;
+    margin-top: 40rpx;
     position: relative;
     left: 50%;
     transform: translate(-50%, 0%);
@@ -1644,20 +1651,40 @@ export default {
       height: 120rpx;
     }
   }
+  .paper_list {
+    display: flex;
+    margin: 0 auto;
+    justify-content: space-between;
+    color: rgb(244, 180, 53);
+    border-radius: 50rpx;
+    width: 80%;
+    font-size: 32rpx;
+    height: 80rpx;
+    line-height: 60rpx;
+    background: rgb(196, 40, 62);
+    text-align: center;
+      text {
+        flex:31%;
+        border-radius: 50rpx;
+        margin: 10rpx;
+      }
+    }
   .h-info {
     position: relative;
     text-align: center;
     padding: 10rpx;
-    height: 390rpx;
+    height: 290rpx;
     color: white;
-    .paper_list {
-      margin: 20rpx;
-      text {
-        margin-right: 10rpx;
-      }
-    }
+
     .grabAmount_count {
+      position: relative;
+      left: 50%;
+      transform: translate(-50%, 0rpx);
+      width: 60%;
+      text-align:center;
       margin-top: 80rpx;
+      font-size: 32rpx;
+      font-weight: 600;
       color: rgb(244, 180, 53);
       &:nth-child(1) {
         font-size: 32rpx;
@@ -1692,7 +1719,8 @@ export default {
   }
 }
 .acitiveRedper {
-  color: rgb(244, 180, 53);
-  text-decoration: underline;
+  background: rgb(244, 180, 53);
+  border-radius: 50rpx;
+  color: white;
 }
 </style>