Skip to content

G
gxpt_wechat
Commit b0f3a2ca by zhangzhen
Options

细节优化

parent 484dd93f
Showing with 147 additions and 48 deletions
components/toolBox/toolBox.vue
<template>
<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)">
<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>
</template>
......@@ -26,22 +28,26 @@
toolList:[
{
name:"开门",
url:config.assetsPath+'/tool_1.png',
imgUrl: config.assetsPath+'/open_door_icon.png',
sortName:"开"
},
{
name:"续单",
url:config.assetsPath+'/tool_2.png',
imgUrl: config.assetsPath+'/order_2_icon.png',
sortName:"续"
},
{
name:"验券",
url:config.assetsPath+'/tool_3.png',
imgUrl: config.assetsPath+'/scan_code_icon.png',
sortName:"验",
routePath:"/pages/useCouponIllustrate/useCouponIllustrate"
},
{
name:"客服",
url:config.assetsPath+'/tool_4.png',
imgUrl: config.assetsPath+'/zcpt.png',
sortName:"客"
}
......@@ -158,8 +164,8 @@
flex-direction: column;
justify-content: center;
align-items: center;
width: 42px;
height: 36px;
width: 46px;
height: 43px;
border-radius: 20upx 0 0 20upx;
background: rgba(255, 255, 255, 0.72);
// border-top: 1px solid #E40583;
......@@ -170,8 +176,8 @@
transition-timing-function:ease;
box-shadow: -4rpx 4rpx 13rpx 0rpx rgba(74, 11, 47, 0.4);
.image{
max-width: 50upx;
height: 40upx;
width: 100%;
height: 100%;
}
text{
white-space: nowrap;
......@@ -180,9 +186,9 @@
}
}
.active{
width: 24px;
height:50upx;
// border-radius: 12upx 0 0 12upx;
width: 28px;
height:26px;
border-radius: 12upx 0 0 12upx;
opacity: 0.8;
}
}
......
pages/order/order.vue
......@@ -453,13 +453,11 @@
setStartTime: {
status:false,
startTime:'',
duration:0
duration:0,
days:1
}
};
},
onShow() {
this.onGetUseCoupon();
},
onLoad(option) {
uni.showLoading({
title: "加载中"
......@@ -476,7 +474,12 @@
} else {
this.onLoading()
}
},
onShow() {
if( Number(moment().format("HHmm")) > Number(this.startTime.split(":").join(''))){
this.startTime = moment().format("HH:mm"),
this.onSetEndTime();
}
},
methods: {
onGetDicts() {
......@@ -555,6 +558,16 @@
this.dateIntervalList.forEach((item,index) =>{
if(item.status==1 && this.setStartTime.duration < this.duration && moment(item.endHoldTime).format("mm")<59 ){
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.status = true;
} else if(item.status==1 && this.setStartTime.duration < this.duration && moment(item.endHoldTime).format("mm") >=59 ){
......@@ -569,15 +582,21 @@
} else if(item.status === 0 && this.setStartTime.duration === 0 && !this.setStartTime.status){
this.setStartTime.duration += 1;
this.setStartTime.startTime = `${index}:00`;
if(index>=24){
this.setStartTime.days = 2
}
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;
} else if(item.status === 0 && this.setStartTime.duration == this.duration && this.setStartTime.status){
this.startTime = this.setStartTime.startTime;
this.setStartTime.duration+=1;
}
})
if(index >= this.dateIntervalList.length-1){
this.onSetEndTime()
}
})
})
},
//设置预定结束时间
......@@ -655,6 +674,10 @@
let end = Number(this.endTime.split(":")[0])
let endM = Number(this.endTime.split(":")[1])
if(this.setStartTime.days >=2){
start +=24
this.setStartTime.days = 1
}
if (end < start) {
end += 24
}
......@@ -1004,13 +1027,14 @@
})
},
onNavToCheckedCoupon() {
let that = this;
uni.navigateTo({
url: "/pages/couponCheck/couponCheck?openShopUuid=" + this.roomInfo.openShopUuid,
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptData(data) {
if (data.data) {
this.onGetUseCoupon()
that.onGetUseCoupon()
}
}
}
......
pages/useCoupon/index.vue
<template>
<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)">
<view class="part-left">
<image :src="item.isAvailable === 0? assetsPath + '/coupon_icon.png':assetsPath+'/coupon_icon_gray.png'"
mode="widthFix"></image>
</view>
<view class="part-top" :style="{background: 'url('+assetsPath+'/use_coupon_bg.png) 0 0 / 100% 100% no-repeat'}">
<view class="part-right">
<view class="coupon-name">
<text class="text-title text-lg text-bold">{{item.name}}</text>
<text class="text-lg"
:class="item.isAvailable === 0?'text-pink':'text-gray'">{{item.useStatus==0?'可使用':'无法使用'}}</text>
</view>
<view class="flex-row margin-top">
<text class="">使用说明：</text>
<text class="">满{{item.minPrice}}元，优惠{{item.subPrice}}元</text>
<text class="text-black">使用说明：</text>
<text class="text-black">满{{item.minPrice}}元，优惠{{item.subPrice}}元</text>
</view>
<view v-if="item.couponTimeStart && item.couponTimeEnd" class="des margin-top">
<view class="flex-row">
<text class="">可用时段：</text>
<text class="">{{item.couponTimeStart}}-{{item.couponTimeEnd}}</text>
<text class="text-black">可用时段：</text>
<text class="text-black">{{item.couponTimeStart}}-{{item.couponTimeEnd}}</text>
</view>
<text>{{item.platformType==2?'美团核销':''}}</text>
</view>
......@@ -27,7 +23,19 @@
<text class="">全天通用</text>
<text>{{item.platformType==2?'美团核销':''}}</text>
</view>
<view class="coupon-name margin-top">
</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>
<view class="part-bottom">
<view class="coupon-name">
<text class="text-gray">有效期限：</text>
<text class="text-gray">{{item.startDate}}至{{item.endDate}}</text>
</view>
......@@ -36,10 +44,10 @@
<text class="text-gray">{{item.reason}}</text>
</view>
</view>
</view>
<view class="box-content">
<button class="cu-btn round bg-gray " @tap="onCancle">返回</button>
<button class="cu-btn round bg-pink " @tap="onConfirm">确定</button>
</view>
</view>
......@@ -120,7 +128,11 @@
}
}
</script>
<style>
page{
background-color: #ffffff;
}
</style>
<style scoped lang="scss">
.coupon-list-box {
display: flex;
......@@ -131,24 +143,50 @@
.coupon-item {
display: flex;
flex-direction: row;
flex-direction: column;
width: 92%;
border-radius: 20upx;
background-color: #ffffff;
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 {
display: flex;
justify-content: center;
flex-direction: row;
.select-btn{
display: flex;
flex-direction: row;
align-items: center;
width: 160upx;
margin-right: 20upx;
image {
display: block;
width: 100%;
max-height: 140upx;
background: linear-gradient(to right,#f3d8b5,#ebc8a8);
height: 26px;
border-radius: 13px;
text{
color: #3B3326;
margin: 0 20upx 0 10upx;
}
}
.active{
background: linear-gradient(to right,#ebc7a3,#cc8d62);
}
}
......@@ -160,8 +198,13 @@
.coupon-name {
display: flex;
justify-content: space-between;
.text-title{
color: #AF7117;
}
}
.text-black{
color: #363227;
}
.des {
display: flex;
justify-content: space-between;
......@@ -180,8 +223,25 @@
}
}
.active {
box-shadow: 0 0 10upx #ff55ff;
.gray{
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 @@
width: 100vw;
height: 120upx;
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
background-color: #ffffff;
.cu-btn {
width: 40%;
margin: 0 5%;
width: 85vw;
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>
\ 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