Skip to content

G
gxpt_wechat
Commit b0f3a2ca by zhangzhen
Options

细节优化

parent 484dd93f
Showing with 168 additions and 69 deletions
components/toolBox/toolBox.vue
<template> <template>
<view class="tool-box" > <view class="tool-box" >
<view v-for="(item, index) in toolList" :key="index" class="tool-item" :class="{active:!show}" :style="{transitionDuration: dNum+'s' }" @tap.stop="onHandle(item,index)"> <view v-for="(item, index) in toolList" :key="index" class="tool-item" :class="{active:!show}" :style="{transitionDuration: dNum+'s' }" @tap.stop="onHandle(item,index)">
<image class="image" :src="item.imgUrl" mode="heightFix"></image>
<text v-if="show" class="text-white text-bold text-xl">{{item.name}}</text> <!-- <text class="text-white text-bold text-xl">{{item.name}}</text> -->
<image v-if="show" class="image" :src="item.url" mode="scaleToFill"></image>
<image v-else class="image" :src="item.imgUrl" mode="scaleToFill"></image>
</view> </view>
</view> </view>
</template> </template>
...@@ -26,22 +28,26 @@ ...@@ -26,22 +28,26 @@
toolList:[ toolList:[
{ {
name:"开门", name:"开门",
url:config.assetsPath+'/tool_1.png',
imgUrl: config.assetsPath+'/open_door_icon.png', imgUrl: config.assetsPath+'/open_door_icon.png',
sortName:"开" sortName:"开"
}, },
{ {
name:"续单", name:"续单",
url:config.assetsPath+'/tool_2.png',
imgUrl: config.assetsPath+'/order_2_icon.png', imgUrl: config.assetsPath+'/order_2_icon.png',
sortName:"续" sortName:"续"
}, },
{ {
name:"验券", name:"验券",
url:config.assetsPath+'/tool_3.png',
imgUrl: config.assetsPath+'/scan_code_icon.png', imgUrl: config.assetsPath+'/scan_code_icon.png',
sortName:"验", sortName:"验",
routePath:"/pages/useCouponIllustrate/useCouponIllustrate" routePath:"/pages/useCouponIllustrate/useCouponIllustrate"
}, },
{ {
name:"客服", name:"客服",
url:config.assetsPath+'/tool_4.png',
imgUrl: config.assetsPath+'/zcpt.png', imgUrl: config.assetsPath+'/zcpt.png',
sortName:"客" sortName:"客"
} }
...@@ -158,8 +164,8 @@ ...@@ -158,8 +164,8 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 42px; width: 46px;
height: 36px; height: 43px;
border-radius: 20upx 0 0 20upx; border-radius: 20upx 0 0 20upx;
background: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.72);
// border-top: 1px solid #E40583; // border-top: 1px solid #E40583;
...@@ -170,8 +176,8 @@ ...@@ -170,8 +176,8 @@
transition-timing-function:ease; transition-timing-function:ease;
box-shadow: -4rpx 4rpx 13rpx 0rpx rgba(74, 11, 47, 0.4); box-shadow: -4rpx 4rpx 13rpx 0rpx rgba(74, 11, 47, 0.4);
.image{ .image{
max-width: 50upx; width: 100%;
height: 40upx; height: 100%;
} }
text{ text{
white-space: nowrap; white-space: nowrap;
...@@ -180,9 +186,9 @@ ...@@ -180,9 +186,9 @@
} }
} }
.active{ .active{
width: 24px; width: 28px;
height:50upx; height:26px;
// border-radius: 12upx 0 0 12upx; border-radius: 12upx 0 0 12upx;
opacity: 0.8; opacity: 0.8;
} }
} }
......
pages/order/order.vue
...@@ -453,13 +453,11 @@ ...@@ -453,13 +453,11 @@
setStartTime: { setStartTime: {
status:false, status:false,
startTime:'', startTime:'',
duration:0 duration:0,
days:1
} }
}; };
}, },
onShow() {
this.onGetUseCoupon();
},
onLoad(option) { onLoad(option) {
uni.showLoading({ uni.showLoading({
title: "加载中" title: "加载中"
...@@ -476,7 +474,12 @@ ...@@ -476,7 +474,12 @@
} else { } else {
this.onLoading() this.onLoading()
} }
},
onShow() {
if( Number(moment().format("HHmm")) > Number(this.startTime.split(":").join(''))){
this.startTime = moment().format("HH:mm"),
this.onSetEndTime();
}
}, },
methods: { methods: {
onGetDicts() { onGetDicts() {
...@@ -555,6 +558,16 @@ ...@@ -555,6 +558,16 @@
this.dateIntervalList.forEach((item,index) =>{ this.dateIntervalList.forEach((item,index) =>{
if(item.status==1 && this.setStartTime.duration < this.duration && moment(item.endHoldTime).format("mm")<59 ){ if(item.status==1 && this.setStartTime.duration < this.duration && moment(item.endHoldTime).format("mm")<59 ){
this.setStartTime.startTime = moment(item.endHoldTime).format("HH:mm"); this.setStartTime.startTime = moment(item.endHoldTime).format("HH:mm");
if(index>=24){
this.setStartTime.days = 2
}
this.setStartTime.duration = 0;
this.setStartTime.status = true;
}if(item.status==1 && this.setStartTime.duration < this.duration && moment(item.startHoldTime).format("mm") > 0){
this.setStartTime.startTime = moment(item.endHoldTime).format("HH:mm");
if(index>=24){
this.setStartTime.days = 2
}
this.setStartTime.duration = 0; this.setStartTime.duration = 0;
this.setStartTime.status = true; this.setStartTime.status = true;
} else if(item.status==1 && this.setStartTime.duration < this.duration && moment(item.endHoldTime).format("mm") >=59 ){ } else if(item.status==1 && this.setStartTime.duration < this.duration && moment(item.endHoldTime).format("mm") >=59 ){
...@@ -569,15 +582,21 @@ ...@@ -569,15 +582,21 @@
} else if(item.status === 0 && this.setStartTime.duration === 0 && !this.setStartTime.status){ } else if(item.status === 0 && this.setStartTime.duration === 0 && !this.setStartTime.status){
this.setStartTime.duration += 1; this.setStartTime.duration += 1;
this.setStartTime.startTime = `${index}:00`; this.setStartTime.startTime = `${index}:00`;
if(index>=24){
this.setStartTime.days = 2
}
this.setStartTime.status = true; this.setStartTime.status = true;
}else if(item.status === 0 && this.setStartTime.duration > 0 && this.setStartTime.duration < this.duration && this.setStartTime.status){ }else if(item.status === 0 && this.setStartTime.duration >= 0 && this.setStartTime.duration < this.duration && this.setStartTime.status){
this.setStartTime.duration += 1; this.setStartTime.duration += 1;
} else if(item.status === 0 && this.setStartTime.duration == this.duration && this.setStartTime.status){ } else if(item.status === 0 && this.setStartTime.duration == this.duration && this.setStartTime.status){
this.startTime = this.setStartTime.startTime; this.startTime = this.setStartTime.startTime;
this.setStartTime.duration+=1; this.setStartTime.duration+=1;
} }
if(index >= this.dateIntervalList.length-1){
this.onSetEndTime()
}
}) })
this.onSetEndTime()
}) })
}, },
//设置预定结束时间 //设置预定结束时间
...@@ -655,6 +674,10 @@ ...@@ -655,6 +674,10 @@
let end = Number(this.endTime.split(":")[0]) let end = Number(this.endTime.split(":")[0])
let endM = Number(this.endTime.split(":")[1]) let endM = Number(this.endTime.split(":")[1])
if(this.setStartTime.days >=2){
start +=24
this.setStartTime.days = 1
}
if (end < start) { if (end < start) {
end += 24 end += 24
} }
...@@ -1004,13 +1027,14 @@ ...@@ -1004,13 +1027,14 @@
}) })
}, },
onNavToCheckedCoupon() { onNavToCheckedCoupon() {
let that = this;
uni.navigateTo({ uni.navigateTo({
url: "/pages/couponCheck/couponCheck?openShopUuid=" + this.roomInfo.openShopUuid, url: "/pages/couponCheck/couponCheck?openShopUuid=" + this.roomInfo.openShopUuid,
events: { events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据 // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptData(data) { acceptData(data) {
if (data.data) { if (data.data) {
this.onGetUseCoupon() that.onGetUseCoupon()
} }
} }
} }
......
pages/useCoupon/index.vue
<template> <template>
<view class="coupon-list-box"> <view class="coupon-list-box">
<view v-for="(item,index) in list" :key="index" class="coupon-item" :class="{active: selectId === item.id }" <view v-for="(item,index) in list" :key="index" class="coupon-item" :class="{gray: item.isAvailable ==1 }"
@tap="onSelect(item,index)"> @tap="onSelect(item,index)">
<view class="part-left">
<image :src="item.isAvailable === 0? assetsPath + '/coupon_icon.png':assetsPath+'/coupon_icon_gray.png'" <view class="part-top" :style="{background: 'url('+assetsPath+'/use_coupon_bg.png) 0 0 / 100% 100% no-repeat'}">
mode="widthFix"></image> <view class="part-right">
</view> <view class="coupon-name">
<view class="part-right"> <text class="text-title text-lg text-bold">{{item.name}}</text>
<view class="coupon-name"> </view>
<text class="text-title text-lg text-bold">{{item.name}}</text> <view class="flex-row margin-top">
<text class="text-lg" <text class="text-black">使用说明：</text>
:class="item.isAvailable === 0?'text-pink':'text-gray'">{{item.useStatus==0?'可使用':'无法使用'}}</text> <text class="text-black">满{{item.minPrice}}元，优惠{{item.subPrice}}元</text>
</view> </view>
<view class="flex-row margin-top"> <view v-if="item.couponTimeStart && item.couponTimeEnd" class="des margin-top">
<text class="">使用说明：</text> <view class="flex-row">
<text class="">满{{item.minPrice}}元，优惠{{item.subPrice}}元</text> <text class="text-black">可用时段：</text>
</view> <text class="text-black">{{item.couponTimeStart}}-{{item.couponTimeEnd}}</text>
<view v-if="item.couponTimeStart && item.couponTimeEnd" class="des margin-top"> </view>
<view class="flex-row"> <text>{{item.platformType==2?'美团核销':''}}</text>
<text class="">可用时段：</text> </view>
<text class="">{{item.couponTimeStart}}-{{item.couponTimeEnd}}</text> <view v-else class="des margin-top">
<text class="">全天通用</text>
<text>{{item.platformType==2?'美团核销':''}}</text>
</view>
</view>
<view class="part-left">
<view class="select-btn" :class="{active: selectId === item.id }">
<radio-group v-if="item.isAvailable != 1" class="radio-group" >
<radio class='brown' :class="selectId === item.id?'checked':''" :checked="selectId === item.id?true:false" color="#AF7117"></radio>
</radio-group>
<text>{{item.isAvailable ==1? '不可使用':'去使用'}}</text>
</view>
</view> </view>
<text>{{item.platformType==2?'美团核销':''}}</text>
</view>
<view v-else class="des margin-top">
<text class="">全天通用</text>
<text>{{item.platformType==2?'美团核销':''}}</text>
</view>
<view class="coupon-name margin-top">
<text class="text-gray">有效期限：</text>
<text class="text-gray">{{item.startDate}}至{{item.endDate}}</text>
</view> </view>
<view v-if="item.isAvailable !== 0" class="coupon-name margin-top"> <view class="part-bottom">
<text class="text-gray">不可用原因：</text> <view class="coupon-name">
<text class="text-gray">{{item.reason}}</text> <text class="text-gray">有效期限：</text>
<text class="text-gray">{{item.startDate}}至{{item.endDate}}</text>
</view>
<view v-if="item.isAvailable !== 0" class="coupon-name margin-top">
<text class="text-gray">不可用原因：</text>
<text class="text-gray">{{item.reason}}</text>
</view>
</view> </view>
</view>
</view> </view>
<view class="box-content"> <view class="box-content">
<button class="cu-btn round bg-gray " @tap="onCancle">返回</button>
<button class="cu-btn round bg-pink " @tap="onConfirm">确定</button> <button class="cu-btn round bg-pink " @tap="onConfirm">确定</button>
</view> </view>
</view> </view>
...@@ -120,7 +128,11 @@ ...@@ -120,7 +128,11 @@
} }
} }
</script> </script>
<style>
page{
background-color: #ffffff;
}
</style>
<style scoped lang="scss"> <style scoped lang="scss">
.coupon-list-box { .coupon-list-box {
display: flex; display: flex;
...@@ -131,24 +143,50 @@ ...@@ -131,24 +143,50 @@
.coupon-item { .coupon-item {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
width: 92%; width: 92%;
border-radius: 20upx; border-radius: 20upx;
background-color: #ffffff; background-color: #ffffff;
margin: 12upx 0; margin: 12upx 0;
padding: 30upx 20upx;
.part-top{
position: relative;
display: flex;
flex-direction: row;
width: 100%;
padding: 20upx 30upx;
z-index: 99;
}
.part-bottom{
display: flex;
flex-direction: column;
width: 100%;
background: linear-gradient(97deg, rgba(251,241,232,0.44), rgba(247,241,229,0.44));
border: 1px solid #ECCAAA;
border-radius: 24rpx;
padding: 46upx 30upx 20upx 30upx;
margin-top: -30upx;
.text-gray{
color: #9C9288;
}
}
.part-left { .part-left {
display: flex; display: flex;
justify-content: center; flex-direction: row;
align-items: center; .select-btn{
width: 160upx; display: flex;
margin-right: 20upx; flex-direction: row;
align-items: center;
image { background: linear-gradient(to right,#f3d8b5,#ebc8a8);
display: block; height: 26px;
width: 100%; border-radius: 13px;
max-height: 140upx; text{
color: #3B3326;
margin: 0 20upx 0 10upx;
}
}
.active{
background: linear-gradient(to right,#ebc7a3,#cc8d62);
} }
} }
...@@ -160,8 +198,13 @@ ...@@ -160,8 +198,13 @@
.coupon-name { .coupon-name {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.text-title{
color: #AF7117;
}
}
.text-black{
color: #363227;
} }
.des { .des {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -180,8 +223,25 @@ ...@@ -180,8 +223,25 @@
} }
} }
.active { .gray{
box-shadow: 0 0 10upx #ff55ff; filter: grayscale(100%);
.select-btn{
background: #ffffff!important;
height: 32px !important;
border-radius: 16px !important;
padding: 12upx 24upx !important;
text{
color: #929292 !important;
}
}
.text-black{
color: #929292 !important;
}
.des{
text{
color: #929292 !important;
}
}
} }
} }
...@@ -192,13 +252,21 @@ ...@@ -192,13 +252,21 @@
width: 100vw; width: 100vw;
height: 120upx; height: 120upx;
display: flex; display: flex;
justify-content: space-between; justify-content: center;
align-items: center; align-items: center;
background-color: #ffffff; background-color: #ffffff;
.cu-btn { .cu-btn {
width: 40%; width: 85vw;
margin: 0 5%; height: 88upx;
background: linear-gradient(97deg, #F2D4B2, #EABB8E, #C98B62, #D29E79);
box-shadow: 0rpx 3rpx 5rpx 0rpx rgba(54,4,9,0.42);
opacity: 0.95;
border-radius: 44rpx;
font-size: 36rpx;
font-weight: bold;
color: #FFFFFF;
letter-spacing: 30upx;
} }
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment