更新C端

homepage.html

@@ -48,6 +48,14 @@
         <div class="swiper-container">
           <div class="swiper-wrapper">
             <div class="swiper-slide"  v-for="(item,index) in swiperDataList" :key="index">
+              <div class="imgitemMask" v-if="item.available!=1">
+                  <span  >
+                        <img v-if="item.available==4" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/yet.png" alt="">
+                        <img v-if="item.available==2" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/future.png" alt="">
+                        <img v-if="item.available==3" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/overdue.png" alt="">
+                        <img v-if="item.available==6" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/empty.png" alt="">
+                    </span>   
+               </div> 
               <div class="imgbox">
                 <img class="le-img" :src="item.show_url" :class="item.stock&&item.stock<0?'changegray':''"></img>
               </div>
@@ -57,7 +65,7 @@
         </div>
       </div>
       <!-- 立即兑换 -->
-      <div class="exchangeBtn" :style="{'background': bgcolor,'color':'#fff'}" @click="exchangeBtn(this.proname)">
+      <div class="exchangeBtn" :class="gstatus!=1?'noexchangeBtn':''" :style="{'background': bgcolor,'color':'#fff'}" @click="exchangeBtn()">
         立即兑换
       </div>
     </div>
@@ -73,7 +81,8 @@
               <img :src="item.show_url" alt="" :class="item.stock&&item.stock<0?'changegray':''">
                <font :class="item.stock&&item.stock<0?'changegray':''">{{item.product_name}}</font>
             </div>
-            <span :style="{'background':bgcolor?bgcolor:'#F98F5B'}" @click="exchangeBtn(item)">兑换</span>
+            <span v-if="item.available==1" :style="{'background':bgcolor?bgcolor:'#F98F5B'}" @click="exchangeBtn(item)">兑换</span>
+            <span v-if="item.available!=1" :style="{'background':item.available==2?'#3E8EE2':'#CCCCCC'}" @click="exchangeBtn(item)">{{item.available==2?'即将开始':item.available==3?'已过期':item.available==4?'已兑换':'已兑完'}}</span>
           </li>
         </ul>
     </div>
@@ -86,6 +95,12 @@
             <ul class="listcommity">
               <li :class="item.stock&&item.stock<0?'changegray':''" v-for="(item,i) in swiperDataList" :key="i" @click="exchangeBtn(item)">
                 <div>
+                    <span class="goodsIcon">
+                        <img v-if="item.available==4" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/yet.png" alt="">
+                        <img v-if="item.available==2" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/future.png" alt="">
+                        <img v-if="item.available==3" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/overdue.png" alt="">
+                        <img v-if="item.available==6" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/empty.png" alt="">
+                      </span>   
                     <img :src="item.show_url" alt="">
                 </div>  
                   <font>{{item.product_name}}</font>
@@ -118,6 +133,14 @@
         <span @click="surexchangeBtn">确认兑换</span>
       </div>
     </div>
+    <!-- 弹出提示 -->
+    <div class="popboxshow" v-if="popboxshow&&popboxtype=='提示'" :class="popboxshow?'active':''">
+      <div class="tip">
+        <p :class="gstatus==4||gstatus==6?'yettip':''">{{tiptext}}</p>
+        <span @click="successchangeBtn" :class="gstatus==4||gstatus==6?'yetexchange':''">知道了</span>
+      </div>
+    </div>
+
      <!-- 失败 -->
      <div class="popboxshow" v-if="popboxshow&&popboxtype=='失败'" :class="popboxshow?'active':''">
         <div >
@@ -141,23 +164,25 @@
     data() {
       return {
         swiperDataList: [], //轮播
-        baseimgurl: 'https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/category_icon/'
+        layout:3,
-        ,
-        layout:1,
         maskshow:false,
         proname:'黄金爱奇艺',
         promtshow:false,
         promttip:'',
+        codebid:'',
         account:'',
         reaccount:'',
         product_id:'',
         productType:1,
         placeholder:'请输入手机号',
         iptshow:false,
+        gstatus:1,
         popboxshow:false,
         popboxtype:'兑换',
         topImg:'',
+        exchangeCommity:{},//兑换选择的商品
         bgcolor:'',
+        tiptext:'还没开始哟，兑换时间为2021-12-05 12:12:12至2021-01-01 12:12:12',
         successTip:'兑换成功，请关注短信通知！'
         }
     },
@@ -166,7 +191,6 @@
       this.topImg=sessionStorage.getItem('top_img');
       // this.layout=sessionStorage.getItem('showTyle');
       this.swiperDataList=JSON.parse(sessionStorage.getItem('goodsList'));
-
     },
     mounted() {
       let self = this;
@@ -190,6 +214,7 @@
       onSelected(item) {
         this.proname=item.product_name;
         this.product_id=item.product_id;
+        this.exchangeCommity=item;
       },
       // 单条弹框
       openDialog() {
@@ -198,14 +223,32 @@
 					this.promtshow = false;
 					this.promttip = '';
 				}, 3000)
-			},
+      },
-      //兑换
+      //选择商品点击兑换
-      exchangeBtn(row){
+      exchangeBtn(row=this.exchangeCommity){
-        this.maskshow=true;
+        this.codebid=row.code_batch_id;
-        this.iptshow=true;
+        let gstatus=row.available;
-        this.proname=row.product_name;
+        this.gstatus=gstatus;
-        this.product_id=row.product_id;
+        if(gstatus==1){
-        this.productType=row.product_type;
+          this.maskshow=true;
+          this.iptshow=true;
+          this.proname=row.product_name;
+          this.product_id=row.product_id;
+          this.productType=row.product_type;
+        }else{
+            this.maskshow=true;
+            this.popboxshow=true;
+            this.popboxtype='提示';
+          if(gstatus==2){//未开始
+            this.tiptext='还没开始哟，兑换时间为'+row.begin_time+'至'+row.end_time;
+          }else if(gstatus==3){//已结束
+            this.tiptext='兑换码已过期，兑换时间为'+row.begin_time+'至'+row.end_time;
+          }else if(gstatus==4){//仅兑换一次
+            this.tiptext='亲，仅可兑换一次哦！';
+          }else if(gstatus==6){//无库存
+            this.tiptext='暂无库存，看看其他商品吧~';
+          }
+        }
       },
       //取消
       cancelBtn(){
@@ -264,6 +307,7 @@
           "key":sessionStorage.getItem('key'),
           "product_id":this.product_id,
           "account":this.account,
+          "code_batch_id":this.codebid
         }
         req.axiosPostusage('/key/usage',data).then(res=>{
           if(res.code==200){
@@ -307,7 +351,7 @@
 					} else {
 						this.placeholder = "请输入手机号或QQ号";
 					}
-			}
+      },
 		},
   });
 </script>