完成我的页面优惠券开发

components/Tabs/index.vue

@@ -49,7 +49,7 @@ export default {
 
 <style lang="scss" scoped>
 .big {
-  height: 68rpx;
+  height: 82rpx;
   display: flex;
   align-items: center;
   padding-top: 3rpx;
@@ -64,8 +64,8 @@ export default {
     .textAction{
         width: 100%;
         text-align: center;
-        margin-bottom: 12rpx;
-        font-size: 24rpx;
+        margin-bottom: 18rpx;
+        font-size: 28rpx;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
         color: #333333;
@@ -74,8 +74,8 @@ export default {
     .textDefault{
         width: 100%;
         text-align: center;
-        margin-bottom: 12rpx;
-        font-size: 24rpx;
+        margin-bottom: 18rpx;
+        font-size: 28rpx;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #666666;

components/Ticket/index.vue

@@ -15,7 +15,7 @@
                 <view class="right_top">
                     <view class="info">
                         <view :style="[titleColor]" class="title">{{info.title}}</view>
-                        <view :style="[timeColor]" class="time">有效期至{{info.time[0]}}</view> 
+                        <view :style="[timeColor]" class="time">{{info.time[0]?info.time[0]+'-'+info.time[1]:'有效期至'+info.time[1]}}</view> 
                     </view>
                     <view class="action">
                         <view v-if="type==='use'">
@@ -23,7 +23,7 @@
                         </view>
                         <view v-else>
                             <view v-if="info.status===0">
-                                <button class="gouse">去使用</button>
+                                <button class="gouse" @click="goMenu">去使用</button>
                             </view>
                         </view>
                     </view>
@@ -160,6 +160,9 @@ export default {
         selected(info) {
             if(info.status!==0)return
             this.$emit("updata",info.id)
+        },
+        goMenu() {
+            uni.switchTab({ url: '/pages/menu/menu' });
         }
     }
 

components/menuAssembly/index.vue

@@ -3,7 +3,7 @@
 		<scroll-view class="nav-left" :style="[heightStyle]" :class="[shopCarFlag||shopState===0?'shopCarcss':'' ]" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation>
 			<view class="nav-left-item"  v-for="(item,index) in classifyData" @click="categoryClickMain(item.id)" :key="item.id"
 				:class="item.id == categoryId ? 'active' : ''">
-				<view class="imgbox" v-if="item.src"><image :style="{'height':sizeList[index].height+'rpx','width':sizeList[index].width+'rpx'}" :src="item.src"/></view>
+				<view class="imgbox" v-if="item.src&&sizeList[index].width"><image :style="{'height':sizeList[index].height+'rpx','width':sizeList[index].width+'rpx'}" :src="item.src"/></view>
 				<view :style="{'margin-top':'10rpx'}"><span>{{ item.name }}</span></view>
 				<!-- <view :class="item.id == categoryId ? 'active-line' : ''"></view> -->
 			</view>
@@ -115,9 +115,9 @@ export default {
 					this.categoryPostion = data
 				}).exec();
 			})
-			categorys[0]?categorys[0].src = 'http://fakeimg.pl/43x42/':''
-			categorys[1]?categorys[1].src = 'http://fakeimg.pl/54x34/':''
-			categorys[2]?categorys[2].src = 'http://fakeimg.pl/32x30/':''
+			// categorys[0]?categorys[0].src = 'http://fakeimg.pl/43x42/':''
+			// categorys[1]?categorys[1].src = 'http://fakeimg.pl/54x34/':''
+			// categorys[2]?categorys[2].src = 'http://fakeimg.pl/32x30/':''
 			categorys.map(item=>{
 					this.imagesHeight(item.src)
 			})
@@ -142,11 +142,13 @@ export default {
 			const val = await uni.getImageInfo({
 				src
 			})
-			console.log(val[1].width)
+			console.log(val)
+			if(val.length==2){
 				this.sizeList.push({
 					width:val[1].width,
 					height:val[1].height
 				})
+			}
 		},
 		getSku(data) {
 			const { skus } = data;

menuSubPackage/pages/areaSelect/areaSelect.vue

@@ -105,7 +105,7 @@ export default {
     padding: 12rpx 32rpx;
     align-items: center;
     .text{
-        font-size: 26rpx;
+        font-size: 28rpx;
         font-family: PingFangSC-Semibold, PingFang SC;
         font-weight: 600;
         color: #000000;

mineSubPackage/pages/coupon/index.vue

@@ -4,13 +4,19 @@
     <view>
       <swiper :current="current" class="swiper" @change="swiperChange">
         <swiper-item>
-          <view class="list">
-            <Ticket/>
+          <view class="list" v-if="canuse.length!=0">
+            <Ticket v-for="(item,index) in canuse" :key="index" :info="item"/>
+          </view>
+          <view class="emty" v-else>
+            <view class="text">暂无可用优惠券</view>
           </view>
         </swiper-item>
         <swiper-item>
-          <view class="list">
-            <Ticket v-for="(item,index) in nouserList" :key="index" :info="item" />
+          <view class="list"  v-if="cantuse.length!=0">
+            <Ticket v-for="(item,index) in cantuse" :key="index" :info="item" />
+          </view>
+          <view class="emty" v-else>
+            <view class="text">暂无可用优惠券</view>
           </view>
         </swiper-item>
       </swiper>
@@ -21,6 +27,7 @@
 <script>
 import Ticket from '@/components/Ticket/index.vue'
 import Tabs from '@/components/Tabs/index.vue'
+import Mine from '@/request/mine'
 export default {
   components: {Ticket,Tabs},
   data() {
@@ -35,9 +42,19 @@ export default {
       ],
       nouserList:[],
       current: 0,
-      actionIndx:0
+      actionIndx:0,
+      canuse:[],
+      cantuse:[]
     };
   },
+  watch:{
+    current(val) {
+      console.log(val,'val')
+      if(val===1&&this.cantuse.length===0){
+        this.getTickList(false)
+      }
+    }
+  },
   mounted(){
     for(let i=0;i<2;i++){
       this.nouserList.push({
@@ -59,8 +76,48 @@ export default {
           reson:'不可与已勾选券叠加使用' // 不可使用原因
       })
     }
+    this.getTickList(true)
   },
   methods: {
+    async getTickList(val) {
+      const {data} = await Mine.getUserList(val)
+      const {rows} = data
+      console.log(data)
+            const canuse = rows.map(item=>{
+                let timeStart = ''
+                let timeEnd = ''
+                if(item.useStartTime){
+                    timeStart = item.useStartTime.slice(0,11).replace('-', '.')
+                }
+                if(item.useEndTime){
+                    timeEnd = item.useEndTime.slice(0,11).replace('-', '.')
+                }
+                return {
+                    id: item.id,
+                    status: item.state===0?0:item.state===1?2:3,
+                    couponType: item.type,
+                    typeDesc: item.categoryName,
+                    price: item.priceDiscount,
+                    priceDesc: item.ruleDesc,
+                    checkStatus: false,
+                    title: item.name,
+                    time: [timeStart,timeEnd],
+                    shopList: [item.areaLimitDesc],
+                    goodList: [item.goodLimitDesc],
+                    useScence: ['小程序下单可用'],
+                    useDesc: ['*不可与其他优惠券同时使用','*不可与门店优惠共享','*订单完成后选择退款，只退回实际支付金额，优惠券不予退回'],
+                    zkRule: item.type===1?'抵扣后实付金额无法小于0':item.type===2?'整单最高抵扣50元':'可享受规定范围内饮品免单',
+                    reson: item.notFitableDesc,
+                    couponAmount:item.couponAmount,
+                    fitItem:item
+                }
+            })
+      if(val){
+            this.canuse = canuse
+      }else{
+            this.cantuse = canuse
+      }
+    },
     changeTab(current) {
       this.current = current;
     },
@@ -81,6 +138,18 @@ export default {
       padding: 0rpx 32rpx;
       overflow-y: scroll;
     }
+    .emty{
+        .text{
+          text-align: center;
+          margin-top: 322rpx;
+          font-size: 28rpx;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #999999;
+          line-height: 40rpx;
+          letter-spacing: 1rpx;
+        }
+    }
   }
 }
 </style>

orderSubPackage/pages/coupon/index.vue

@@ -4,20 +4,27 @@
     <view class="ticketList">
       <swiper :current="current" class="swiper" @change="swiperChange">
         <swiper-item>
-          <view class="list">
+          <view class="list" v-if="canuse.length!=0">
              <Ticket v-for="(item,index) in canuse" :key="index" :info="item" type="use" @updata="updata"/>
           </view>
+          <view class="emty" v-else>
+            <view class="text">暂无可用优惠券</view>
+          </view>
         </swiper-item>
         <swiper-item>
-          <view class="list">
+          <view class="list" v-if="cantuse.length!=0">
             <Ticket v-for="(item,index) in cantuse" :key="index" :info="item" type="use"/>
           </view>
+          <view class="emty" v-else>
+            <view class="text">暂无不可用优惠券</view>
+          </view>
         </swiper-item>
       </swiper>
     </view>
-    <view class="usebtn" v-if="price!=0">
+    <view class="usebtn"  v-if="canuse.length!=0&&current===0">
       <view class="content">
-        <view class="text">已选1张HOOLOO卷，可优惠<span class="money">￥{{price}}</span></view>
+        <view class="text" v-if="price!=0">已选1张HOOLOO卷，可优惠<span class="money">￥{{price}}</span></view>
+        <view class="text" v-else>暂未选择HOOLOO优惠卷</view>
         <view>
           <view class="btnView" @click="setTickcet">确认</view>
         </view>
@@ -51,7 +58,6 @@ export default {
   },
   watch:{
     canuse(val){
-      console.log(val,123)
       const vals = val.filter((item)=>{return item.checkStatus})||[]
       this.price = vals[0]?.couponAmount||0
     }
@@ -136,6 +142,18 @@ export default {
       padding: 0rpx 32rpx;
       overflow-y: scroll;
     }
+    .emty{
+      .text{
+        text-align: center;
+        margin-top: 322rpx;
+        font-size: 28rpx;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #999999;
+        line-height: 40rpx;
+        letter-spacing: 1rpx;
+      }
+    }
   }
   }
 

orderSubPackage/pages/settlement/index.vue

@@ -43,7 +43,8 @@
 				<div :class="[ticketNum>0?'num-action':'num']">
 					<span v-if="selectPrice" class="price">-￥{{selectPrice}}</span>
 					<span v-else>{{ticketNum>0?ticketNum+'张可用':'暂无可用优惠'}}</span>
-					<!-- <image class="arrow-right-select" :src="'../../../static/imgs/jiantouhei.png'" /> -->
+					<image v-if="!ticketNum>0" class="arrow-right-select" :src="'../../../static/imgs/jiantouhei.png'" />
+					<image v-else class="arrow-right-select" :src="'../../../static/imgs/jiantoufen.jpg'" />
 				</div>
 			</div>
 
@@ -300,12 +301,10 @@ export default {
 					const {data} = list
 					this.ticketList = data
 					this.$store.commit('setTickerList',this.ticketList)
-					 console.log(this.ticketList,'list')
 				}
 				if(num.code==200){
 					const {data} = num
 					this.ticketNum = data
-					console.log(this.ticketNum,'num')
 				}
 			}
 		},

request/mine/index.js

@@ -30,5 +30,16 @@ export default {
       .catch((err) => {
         context.showToast({ title: '服务器错误', icon: 'none' });
       });
+  },
+  // 获取用户优惠卷列表
+  getUserList(data) {
+    return uni.$u.http
+    .get(`/app/coupon/list/${data}`, {})
+    .then((res) => {
+      return res;
+    })
+    .catch((err) => {
+      context.showToast({ title: '服务器错误', icon: 'none' });
+    });
   }
 };

store/modules/order.js

@@ -14,6 +14,14 @@ const order = {
         setTickerList(state, data) {
             console.log(data)
             const canuse = data.fitable.map(item=>{
+                let timeStart = ''
+                let timeEnd = ''
+                if(item.useStartTime){
+                    timeStart = item.useStartTime.slice(0,11).replace('-', '.')
+                }
+                if(item.useEndTime){
+                    timeEnd = item.useEndTime.slice(0,11).replace('-', '.')
+                }
                 return {
                     id: item.id,
                     status: 0,
@@ -23,7 +31,7 @@ const order = {
                     priceDesc: item.ruleDesc,
                     checkStatus: false,
                     title: item.name,
-                    time: [item.useStartTime,item.useEndTime],
+                    time: [timeStart,timeEnd],
                     shopList: [item.areaLimitDesc],
                     goodList: [item.goodLimitDesc],
                     useScence: ['小程序下单可用'],
@@ -38,6 +46,14 @@ const order = {
             })
             if(canuse.length!=0)canuse[0].checkStatus = true
             const cantUse = data.notfitable.map(item=>{
+                let timeStart = ''
+                let timeEnd = ''
+                if(item.useStartTime){
+                    timeStart = item.useStartTime.slice(0,11).replace('-', '.')
+                }
+                if(item.useEndTime){
+                    timeEnd = item.useEndTime.slice(0,11).replace('-', '.')
+                }
                 return {
                     id: item.id,
                     status: 1,
@@ -47,7 +63,7 @@ const order = {
                     priceDesc: item.ruleDesc,
                     checkStatus: false,
                     title: item.name,
-                    time: [item.useStartTime,item.useEndTime],
+                    time: [timeStart,timeEnd],
                     shopList: [item.areaLimitDesc],
                     goodList: [item.goodLimitDesc],
                     useScence: ['小程序下单可用'],