Commit 56eee374 by zhangzhen

完善订单界面

parent 4cd335da
...@@ -188,7 +188,6 @@ export default { ...@@ -188,7 +188,6 @@ export default {
} }
}, },
scrollTop(val) { scrollTop(val) {
console.log(val,909090)
this.pageScroll({ this.pageScroll({
scrollTop: val scrollTop: val
}); });
......
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
onNavToHome(val){ onNavToHome(val){
uni.setStorageSync("storeId",val.id) uni.setStorageSync("storeId",val.id)
uni.switchTab({ uni.switchTab({
url:`/pages/index/index` url:`/pages/index/index?storeId=${val.id}`
}) })
}, },
onPreview(item) { onPreview(item) {
......
...@@ -2,8 +2,8 @@ const CONFIG = { ...@@ -2,8 +2,8 @@ const CONFIG = {
// 开发环境配置 // 开发环境配置
development: { development: {
assetsPath: '/static', // 静态资源路径 assetsPath: '/static', // 静态资源路径
baseUrl: 'http://10.106.30.136:8883/front', // 后台接口请求地址 baseUrl: 'http://10.106.30.135:8883/front', // 后台接口请求地址
hostUrl: 'http://10.106.30.136:8882', // H5地址(前端运行地址) hostUrl: 'http://10.106.30.135:8882', // H5地址(前端运行地址)
// baseUrl: 'http://192.168.43.242:8883/front', // 后台接口请求地址 // baseUrl: 'http://192.168.43.242:8883/front', // 后台接口请求地址
// hostUrl: 'http://192.168.43.242:8882', // H5地址(前端运行地址) // hostUrl: 'http://192.168.43.242:8882', // H5地址(前端运行地址)
websocketUrl: '', // websocket服务端地址 websocketUrl: '', // websocket服务端地址
......
<template> <template>
<view class="home" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"> <view class="home" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
<f-navbar title="凑角" :isShowTransparentTitle="false" :isShowLeft="false" fontColor="#ffffff" bgColor="#e40583" <f-navbar title="凑角" :isShowTransparentTitle="false" :isShowLeft="false" fontColor="#ffffff" :fontSize="46" bgColor="#e40583"
:scrollTop="scrollTop" navbarType='5'></f-navbar> :scrollTop="scrollTop" navbarType='5'></f-navbar>
<scroll-view class="scroll-view" scroll-y="true" @scroll="onScroll"> <scroll-view class="scroll-view" scroll-y="true" @scroll="onScroll">
<view class="content-box"> <view class="content-box">
...@@ -84,9 +84,9 @@ ...@@ -84,9 +84,9 @@
</view> </view>
<view class="flex-1 flex-between"> <view class="flex-1 flex-between">
<view class="flex-row room-type"> <view class="flex-row room-type">
<text>房间套餐</text> <text>优惠套餐:</text>
<view v-for="(item,i) in options" :key="i" class="item"> <view v-for="(item,i) in item.packList" :key="i" class="item">
<text>{{item.label}}</text> <text>{{item.name}}</text>
</view> </view>
</view> </view>
<view class="confirm" @tap="onNavToOrder(item)"> <view class="confirm" @tap="onNavToOrder(item)">
...@@ -123,6 +123,7 @@ ...@@ -123,6 +123,7 @@
return { return {
scrollTop: 0, scrollTop: 0,
storeId: '', storeId: '',
storeList:[],
storeInfo: {}, storeInfo: {},
statusBarHeight: this.statusBarHeight, statusBarHeight: this.statusBarHeight,
hostUrl: config.hostUrl, hostUrl: config.hostUrl,
...@@ -170,14 +171,31 @@ ...@@ -170,14 +171,31 @@
} }
}, },
onShow() { onShow() {
if (uni.getStorageSync("storeId")) { if (uni.getStorageSync("storeId") && this.storeList.length) {
this.storeId = uni.getStorageSync("storeId") this.storeId = uni.getStorageSync("storeId")
let obj = this.storeList.filter(item => item.id === this.storeId)[0]
console.log(obj,909090)
if (obj.roomVoList.length) {
this.storeInfo = {
...obj,
roomVoList: obj.roomVoList.map(item => {
return {
...item,
images: item.images ? item.images
.split(",").map(val => this.hostUrl + val) : []
}
})
}
this.$forceUpdate();
}
console.log(this.storeInfo, 9999)
}else{
uni.showLoading({
title: "加载中"
})
this.onLoading()
} }
uni.showLoading({
title: "加载中"
})
this.onLoading()
}, },
onReachBottom() { onReachBottom() {
if (this.status == 'loadmore') { if (this.status == 'loadmore') {
...@@ -190,11 +208,10 @@ ...@@ -190,11 +208,10 @@
}, },
onLoad(option) { onLoad(option) {
console.log(option, 909090) console.log(option, 909090)
}, },
methods: { methods: {
onScroll(e){ onScroll(e){
console.log(e,90909090) this.scrollTop = e.target.scrollTop;
}, },
onLoading() { onLoading() {
this.onGetListStore() this.onGetListStore()
...@@ -207,6 +224,7 @@ ...@@ -207,6 +224,7 @@
}).then(res => { }).then(res => {
uni.hideLoading() uni.hideLoading()
if (res.data.code == 200 && res.data.data.length) { if (res.data.code == 200 && res.data.data.length) {
this.storeList = res.data.data;
let obj = {} let obj = {}
if (this.storeId) { if (this.storeId) {
obj = res.data.data.filter(item => item.id === this.storeId)[0] obj = res.data.data.filter(item => item.id === this.storeId)[0]
...@@ -226,7 +244,6 @@ ...@@ -226,7 +244,6 @@
} }
} }
console.log(this.storeInfo, 9999)
} }
}) })
}, },
...@@ -300,13 +317,21 @@ ...@@ -300,13 +317,21 @@
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.home { .home {
width: 100vw;
height: 100vh;
overflow-x: hidden;
}
.scroll-view{
position: relative;
width: 100vw;
height: 100%;
.content-box{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100vw; width: 100%;
overflow-x: hidden;
} }
}
.header-content { .header-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -320,15 +345,6 @@ ...@@ -320,15 +345,6 @@
margin-top: -16upx; margin-top: -16upx;
} }
} }
.scroll-view{
width: 100vw;
.content-box{
display: flex;
flex-direction: column;
width: 100%;
}
}
.store-nav { .store-nav {
position: relative; position: relative;
display: flex; display: flex;
...@@ -602,8 +618,8 @@ ...@@ -602,8 +618,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 90rpx;
height: 44rpx; height: 44rpx;
padding: 0 8upx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 11rpx 11rpx 11rpx 11rpx; border-radius: 11rpx 11rpx 11rpx 11rpx;
border: 2rpx solid #130F26; border: 2rpx solid #130F26;
......
...@@ -32,8 +32,8 @@ ...@@ -32,8 +32,8 @@
<view class="bg-box" :style="{left:20*dateIndex+'%'}"></view> <view class="bg-box" :style="{left:20*dateIndex+'%'}"></view>
<view v-for="(item,k) in dateList" :key="k" class="flex-1 flex-col date-item" <view v-for="(item,k) in dateList" :key="k" class="flex-1 flex-col date-item"
:class="{active:dateIndex === k}" @tap="onDateChange(k)"> :class="{active:dateIndex === k}" @tap="onDateChange(k)">
<text class="text-title">{{ item.date}}</text> <text class="text-title text-bold text-lg" >{{ item.date}}</text>
<text class="text-title">{{ k>0?item.weekday: '今天'}}</text> <text class="text-title text-bold text-lg" >{{ k>0?item.weekday: '今天'}}</text>
</view> </view>
</view> </view>
<view v-show="index==1" class="flex-row package-mode"> <view v-show="index==1" class="flex-row package-mode">
...@@ -43,9 +43,9 @@ ...@@ -43,9 +43,9 @@
<view class="flex-1 package-box"> <view class="flex-1 package-box">
<view v-for="(item,index) in packageMode" :key="index" class="flex-col item" <view v-for="(item,index) in packageMode" :key="index" class="flex-col item"
:class="{active: modeIndex===index}" @tap="onChangeMode(index)"> :class="{active: modeIndex===index}" @tap="onChangeMode(index)">
<text class="text-title">凑够{{item.duration}}小时</text> <text class="text-title">{{item.name}}</text>
<view class="flex-row"> <view class="flex-row">
<text></text><text class="text-title text-bold text-xl">{{item.realPrice}}</text> <text></text><text class="text-title text-bold text-xl">{{item.price}}</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -83,7 +83,6 @@ ...@@ -83,7 +83,6 @@
<view class="date-interval"> <view class="date-interval">
<view class="flex-1 flex-row"> <view class="flex-1 flex-row">
<view class="round-box pink"> <view class="round-box pink">
</view> </view>
<text>已选时段</text> <text>已选时段</text>
</view> </view>
...@@ -95,14 +94,18 @@ ...@@ -95,14 +94,18 @@
</view> </view>
<view class="flex-1 flex-row"> <view class="flex-1 flex-row">
<view class="round-box gray"> <view class="round-box gray">
</view> </view>
<text>不可选时段</text> <text>不可选时段</text>
</view> </view>
<view class="flex-1 flex-row">
<view class="round-box error">
</view>
<text>重叠时段</text>
</view>
</view> </view>
<view class="date-point-box"> <view class="date-point-box">
<view v-for="(item,k) in dateIntervalList" :key="k" class="date-point-item"> <view v-for="(item,k) in intervalList" :key="k" class="date-point-item">
<view class="date-point" :class="item.status==1?'free':item.status==2?'used':'checked'"> <view class="date-point" :class="item.status === 0?'free':item.status==1?'used': item.status==2?'checked':'error'">
</view> </view>
<text class="text-gray">{{item.hour}}</text> <text class="text-gray">{{item.hour}}</text>
...@@ -114,7 +117,7 @@ ...@@ -114,7 +117,7 @@
<text class="text-title text-bold text-xl text-blank">订单总价</text> <text class="text-title text-bold text-xl text-blank">订单总价</text>
<view class="flex-row"> <view class="flex-row">
<text class="text-pink"></text> <text class="text-pink"></text>
<text class="text-pink text-xl">{{Number(duration*roomInfo.price).toFixed(2)}}</text> <text class="text-pink text-xl">{{(Number(roomInfo.price)*duration).toFixed(2)}}</text>
</view> </view>
</view> </view>
<view class="flex-between price"> <view class="flex-between price">
...@@ -128,16 +131,20 @@ ...@@ -128,16 +131,20 @@
<view class="line"></view> <view class="line"></view>
<view class="flex-between price"> <view class="flex-between price">
<text class="text-title text-lg">优惠券</text> <text class="text-title text-lg">优惠券</text>
<view class="flex-row"> <view class="flex-row" @tap="onNavToSelectCoupon">
<text class="text-gray text-lg">暂无可用</text> <text class="text-lg" :class="useCouponList.length?'text-pink':'text-gray'"> {{useCouponList.length? useCouponList[selectCouponIndex].name: '暂无可用'}}</text>
<text class="text-gray cuIcon-right "></text> <text class="cuIcon-right " :class="useCouponList.length?'text-pink':'text-gray'"></text>
</view> </view>
</view> </view>
<view class="flex-between price"> <view class="flex-between price">
<text class="text-title text-lg">套餐优惠</text> <text class="text-title text-lg">预约优惠</text>
<text class="text-title text-lg text-pink">{{couponList.length?'-¥20.00':'0'}} </text> <text class="text-title text-lg text-pink">
{{Number(roomInfo.price)*duration > computePriceInfo.payFee ?'-¥'+ Number(Number(roomInfo.price)*duration - computePriceInfo.payFee).toFixed(2):'¥0'}}
</text>
</view> </view>
<!-- <view class="flex-between price">
<!-- <view class="flex-between price">
<text class="text-title text-lg">账户余额</text> <text class="text-title text-lg">账户余额</text>
<view class="flex-row text-pink"> <view class="flex-row text-pink">
<text class="text-title text-lg">0.00 元</text> <text class="text-title text-lg">0.00 元</text>
...@@ -150,7 +157,7 @@ ...@@ -150,7 +157,7 @@
<text class="text-title text-lg">优惠价</text> <text class="text-title text-lg">优惠价</text>
<view class="flex-row margin-left"> <view class="flex-row margin-left">
<text class="text-lg"></text> <text class="text-lg"></text>
<text class="text-xxl">{{Number(duration*roomInfo.price).toFixed(2)}}</text> <text class="text-xxl">{{Number(computePriceInfo.payFee).toFixed(2)}}</text>
</view> </view>
</view> </view>
<view class=""> <view class="">
...@@ -268,22 +275,25 @@ ...@@ -268,22 +275,25 @@
], ],
// 套餐 // 套餐
modeIndex: 0, modeIndex: 0,
packageMode: [{ packageMode: [
{
id:'', id:'',
label: "", label: "优惠套餐1",
duration: 4, duration: 4,
originalPrice: 100, originalPrice: 100,
realPrice: 78 realPrice: 78
}, },
{ {
id:'', id:'',
label: "", label: "优惠套餐2",
duration: 8, duration: 8,
originalPrice: 200, originalPrice: 200,
realPrice: 138 realPrice: 138
} }
], ],
// 原数据
dateIntervalList: [], dateIntervalList: [],
intervalList: [],
duration: 0, duration: 0,
couponList: [], couponList: [],
checkedIndex: [], checkedIndex: [],
...@@ -299,77 +309,45 @@ ...@@ -299,77 +309,45 @@
3: "充值" 3: "充值"
}, },
editDuration: [], editDuration: [],
checkedCouponInfo:{ checkedCouponInfo:'',
id:'' useDateStatus:true,
selectCouponIndex:0,
useCouponList:[],//可使用的优惠券
computePriceInfo:{
couponFee: '',
payFee: '',
totalFee: '',
} }
}; };
}, },
onLoad(option) { onLoad(option) {
this.id = option.roomId; this.id = option.roomId || 106;
uni.showLoading({ uni.showLoading({
title: "加载中" title: "加载中"
}) })
this.onLoading() this.onLoading()
}, },
methods: { methods: {
//计算支付金额 // 获取房间信息相关
onComputePrice() {
uni.showLoading({
title:"计算价格中..."
})
let dateObj = this.onSetDateTime(this.startTime,this.endTime);
let params = {
storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id,
buyType: this.orderTypeList[this.index].type,
couponId: this.checkedCouponInfo.id,
orderType: this.orderType,
preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate
}
if(this.index>0){
params.packId = this.packageMode[this.modeIndex].id;
}
computePrice(params).then(res => {
uni.hideLoading()
console.log(res)
})
},
// 获取可用优惠券
onGetUseCoupon() {
let dateObj = this.onSetDateTime(this.startTime,this.endTime);
console.log(this.startTime,this.endTime,909090)
getUseCoupon({
storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id,
preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate
}).then(res => {
if (res.statusCode == 200) {
if (res.data && res.data.length) {
this.index = 1;
this.packageMode = res.data;
}
}
this.onComputePrice();
})
},
onLoading() { onLoading() {
roomInfo({ roomInfo({
id: this.id id: this.id
}).then(res => { }).then(res => {
uni.hideLoading() uni.hideLoading()
console.log(res)
if (res.data.code == 200) { if (res.data.code == 200) {
this.roomInfo = { this.roomInfo = {
...res.data.data, ...res.data.data,
images: res.data.data.images ? res.data.data.images images: res.data.data.images ? res.data.data.images
.split(",").map(val => this.hostUrl + val) : [] .split(",").map(val => this.hostUrl + val) : []
} }
if(this.roomInfo.packList&&this.roomInfo.packList.length){
this.packageMode = this.roomInfo.packList
this.index = 1;
this.modeIndex = 0;
}
this.onGetSortDistance() this.onGetSortDistance()
} }
}) })
}, },
onGetSortDistance() { onGetSortDistance() {
listSortDistance({ listSortDistance({
...@@ -379,46 +357,20 @@ ...@@ -379,46 +357,20 @@
}).then(res => { }).then(res => {
uni.hideLoading() uni.hideLoading()
console.log(res) console.log(res)
this.onSetEndTime()
this.dateIntervalList = res.data.data.map((item, index) => { this.dateIntervalList = res.data.data.map((item, index) => {
return { return {
...item, ...item,
hour: index > 0 && index - 24 == 0 ? '次日' : index > 24 ? index - 24 : index hour: index > 0 && index - 24 == 0 ? '次日' : index > 24 ? index - 24 : index
} }
}) })
this.onSetEndTime()
}) })
}, },
onTypeChange(i) {
// if (this.index === i) return;
// this.index = i
// if (this.index == 1) {
// this.modeIndex = 0
// }
// this.onSetEndTime()
},
onChangeMode(i) {
if (this.modeIndex === i) return;
this.modeIndex = i
this.onSetEndTime()
},
onDurationChange(i) {
if (i >= this.distanceMode.length - 1) {
this.onEditDuration();
return
}
if (this.distanceIndex === i) return;
this.distanceIndex = i
this.onSetEndTime()
},
onDateChange(k) {
if (this.dateIndex === k) return;
this.dateIndex = k
},
//设置预定结束时间 //设置预定结束时间
onSetEndTime() { onSetEndTime() {
if (this.index == 1) { if (this.index == 1) {
// 套餐模式 // 套餐模式
this.duration = this.packageMode[this.modeIndex].duration; this.duration = Number(this.packageMode[this.modeIndex].duration);
this.endTime = this.startTime.split(":").map((item, k) => { this.endTime = this.startTime.split(":").map((item, k) => {
let num = '' let num = ''
if (k == 0) { if (k == 0) {
...@@ -428,14 +380,14 @@ ...@@ -428,14 +380,14 @@
num = Number(item) + this.duration num = Number(item) + this.duration
} }
} else { } else {
num = item num = Number(item)
} }
return num>=10 ? num : `0${num}` return num>=10 ? num : `0${num}`
}).join(":") }).join(":")
} else { } else {
// 小时模式 // 小时模式
this.duration = this.distanceMode[this.distanceIndex].duration; this.duration = Number(this.distanceMode[this.distanceIndex].duration);
this.endTime = this.startTime.split(":").map((item, k) => { this.endTime = this.startTime.split(":").map((item, k) => {
let num = '' let num = ''
if (k == 0) { if (k == 0) {
...@@ -445,14 +397,158 @@ ...@@ -445,14 +397,158 @@
num = Number(item) + this.duration num = Number(item) + this.duration
} }
} else { } else {
num = item num = Number(item)
} }
return num>=10 ? num : `0${num}` return num>=10 ? num : `0${num}`
}).join(":") }).join(":")
} }
this.onGetUseCoupon() this.onGetUseCoupon()
this.onUpdateIntervalList()
},
// 更新时间的选取状态
onUpdateIntervalList(){
this.useDateStatus = true
console.log(this.dateIntervalList,"dateIntervalList")
let start = Number(this.startTime.split(":")[0])
let end = Number(this.endTime.split(":")[0])
console.log(start,end,"start")
if(end <= start){
end += 24
}
// 重新将数据还原到元数据
this.intervalList = [
...this.dateIntervalList
]
for(start;start<=end;start++){
if(this.dateIntervalList[start].status ===1){
// 表示时间点被占用,无法选择
this.useDateStatus = false
this.intervalList[start]= {
...this.dateIntervalList[start],
status:3
}
}else{
this.intervalList[start]= {
...this.dateIntervalList[start],
status:2
}
}
}
this.$forceUpdate();
setTimeout(()=>{
if(!this.useDateStatus){
uni.showToast({
icon:"none",
title:"时间选择有重叠"
})
}
},1500)
},
// 获取可用优惠券
onGetUseCoupon() {
let dateObj = this.onSetDateTime(this.startTime,this.endTime);
getUseCoupon({
storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id,
orderMode:this.orderTypeList[this.index].type,
preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate
}).then(res => {
console.log(res.data.data,"优惠券")
if (res.statusCode == 200) {
if (res.data && res.data.data.length) {
this.useCouponList = res.data.data.filter(item=>item.isAvailable===0).sort((a,b)=>b.subPrice-a.subPrice);
console.log(this.useCouponList)
}
}
this.onComputePrice();
})
},
onNavToSelectCoupon(){
let dateObj = this.onSetDateTime(this.startTime,this.endTime);
let that = this;
if(this.useCouponList.length){
uni.navigateTo({
url:"/pages/useCoupon/index",
events: {
getSelectData(data) {
console.log(data)
that.selectCouponIndex = that.useCouponList.findIndex(item=>item.id === data.couponId)
}
},
success(res) {
res.eventChannel.emit('sendData', {
storeId: that.roomInfo.storeId,
roomId: that.roomInfo.id,
orderMode:that.orderTypeList[that.index].type,
preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate,
selectId:that.useCouponList[that.selectCouponIndex].id
})
}
})
}
},
//计算支付金额
onComputePrice() {
uni.showLoading({
title:"计算价格中..."
})
let dateObj = this.onSetDateTime(this.startTime,this.endTime);
let params = {
storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id,
buyType: this.orderTypeList[this.index].type,
couponId:this.useCouponList.length? this.useCouponList[this.selectCouponIndex].id:'',
orderType: this.orderType,
preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate,
orderMode:this.orderTypeList[this.index].type,
}
if(this.index===1){
params.packId = this.packageMode[this.modeIndex].id;
}
computePrice(params).then(res => {
uni.hideLoading()
if(res.data.code == 200){
this.computePriceInfo = res.data.data;
}
})
},
// 下单模式切换
onTypeChange(i) {
if (this.index === i || !this.packageMode.length) return;
this.index = i
this.modeIndex = 0;
this.distanceIndex = 0;
this.onSetEndTime()
},
onChangeMode(i) {
if (this.modeIndex === i) return;
this.modeIndex = i
this.onSetEndTime()
},
onDurationChange(i) {
if (i >= this.distanceMode.length - 1) {
this.onEditDuration();
return
}
if (this.distanceIndex === i) return;
this.distanceIndex = i
this.onSetEndTime()
},
onDateChange(k) {
if (this.dateIndex === k) return;
this.dateIndex = k
this.onGetSortDistance()
}, },
onSelectDate() { onSelectDate() {
if (!this.checkedIndex.length) { if (!this.checkedIndex.length) {
...@@ -524,6 +620,7 @@ ...@@ -524,6 +620,7 @@
orderType: 1, orderType: 1,
buyType: 1, buyType: 1,
payType: 1, payType: 1,
couponId:this.useCouponList.length? this.useCouponList[this.selectCouponIndex].id:'',
preStartDate: "2023-10-25 00:00:00", preStartDate: "2023-10-25 00:00:00",
preEndDate: "2023-10-25 04:00:00", preEndDate: "2023-10-25 04:00:00",
totalFee: 100, totalFee: 100,
...@@ -557,12 +654,12 @@ ...@@ -557,12 +654,12 @@
endDate:'' endDate:''
} }
let startArr = startTime.split(":") let startArr = startTime.split(":")
let endArr = startTime.split(":") let endArr = endTime.split(":")
obj.startDate =`${moment().format("YYYY-MM-DD")} ${startTime}:00` obj.startDate =`${this.dateList[this.dateIndex].readDate} ${startTime}:00`
if(Number(endArr[0])>=Number(startArr[0])){ if(Number(endArr[0])<=Number(startArr[0])){
obj.endDate =`${moment().add(1,"days").format("YYYY-MM-DD")} ${endTime}:00` obj.endDate =`${moment(this.dateList[this.dateIndex].readDate).add(1,"days").format("YYYY-MM-DD")} ${endTime}:00`
}else{ }else{
obj.endDate =`${moment().format("YYYY-MM-DD")} ${endTime}:00` obj.endDate =`${this.dateList[this.dateIndex].readDate} ${endTime}:00`
} }
console.log(obj) console.log(obj)
return obj; return obj;
...@@ -672,13 +769,13 @@ ...@@ -672,13 +769,13 @@
z-index: 10; z-index: 10;
text { text {
color: #333333; color: #000000;
} }
} }
.active { .active {
.text-title { .text-title {
color: #000000; color: #333333;
} }
} }
...@@ -784,6 +881,9 @@ ...@@ -784,6 +881,9 @@
.gray { .gray {
background-color: #bfbfbf; background-color: #bfbfbf;
} }
.error{
background-color: #ff0000;
}
} }
.date-point-box { .date-point-box {
...@@ -817,6 +917,9 @@ ...@@ -817,6 +917,9 @@
.checked { .checked {
background-color: #e03997; background-color: #e03997;
} }
.error{
background-color: #ff0000;
}
>text { >text {
font-size: 20upx; font-size: 20upx;
......
<template> <template>
<view class="coupon-list-box"> <view class="coupon-list-box">
<view v-for="(item,index) in list" :key="index" class="coupon-item"> <view v-for="(item,index) in list" :key="index" class="coupon-item" :class="{active: current === index}"
@tap="onSelect(item,index)">
<view class="part-left"> <view class="part-left">
<image :src="item.useStatus==1? '../../static/coupon_icon.png':'../../static/coupon_icon_gray.png'" mode="widthFix"></image> <image :src="item.isAvailable === 0? '../../static/coupon_icon.png':'../../static/coupon_icon_gray.png'"
mode="widthFix"></image>
</view> </view>
<view class="part-right"> <view class="part-right">
<view class="coupon-name"> <view class="coupon-name">
<text class="text-title text-lg text-bold">{{item.name}}</text> <text class="text-title text-lg text-bold">{{item.name}}</text>
<text class="text-lg" :class="item.useStatus==1?'text-pink':'text-gray'">{{item.useStatus==1?'待使用':'已使用'}}</text> <text class="text-lg"
:class="item.isAvailable === 0?'text-pink':'text-gray'">{{item.useStatus==0?'可使用':'无法使用'}}</text>
</view> </view>
<view class="flex-row margin-top"> <view class="flex-row margin-top">
<text class="">使用说明:</text> <text class="">使用说明:</text>
...@@ -29,196 +32,228 @@ ...@@ -29,196 +32,228 @@
<text class="text-gray">有效期限:</text> <text class="text-gray">有效期限:</text>
<text class="text-gray">{{item.startDate}}{{item.endDate}}</text> <text class="text-gray">{{item.startDate}}{{item.endDate}}</text>
</view> </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 class="box-content">
<view v-if="list.length == 0" class="empty-box"> <button class="cu-btn round bg-gray " @tap="onCancle">返回</button>
<!-- 列表数量为0时 -->
<u-empty text="暂无门店数据" textColor='#C1C1C1' width="60" <button class="cu-btn round bg-pink " @tap="onConfirm">选择</button>
:icon="storeListBlankImage">
</u-empty>
</view>
<!-- 当数据没有更多时 -->
<view v-if="list.length" style="padding: 12px 6% 0;">
<u-loadmore :status="status" :icon="true" :line='true' :loading-text="loadingText"
:loadmore-text="loadmoreText" :nomore-text="nomoreText" />
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import indexConfig from "@/config/index.config"; import indexConfig from "@/config/index.config";
import FixedHeader from "@/components/fixedHeader/index"; import FixedHeader from "@/components/fixedHeader/index";
import {getCouponList} from "@/api/coupon" import {
getUseCoupon
} from "@/api/coupon"
export default { export default {
data() { data() {
return { return {
status: 'nomore ',
loadingText: '努力加载中',
loadmoreText: '上划加载',
nomoreText: '已展示全部门店',
scrollTop: 0, scrollTop: 0,
current: '', current: undefined,
hostUrl: indexConfig.hostUrl, hostUrl: indexConfig.hostUrl,
statusBarHeight: this.statusBarHeight, statusBarHeight: this.statusBarHeight,
titleBarHeight: this.titleBarHeight, titleBarHeight: this.titleBarHeight,
list: [ list: [{
{ couponId: "111",
couponId:"111", couponCode: "111",
couponCode:"111", name: "任意房型8小时通用券",
name:"任意房型8小时通用券", roomType: "标准",
roomType:"标准", couponTimeStart: "00:00",
couponTimeStart:"00:00", couponTimeEnd: "08:00",
couponTimeEnd:"08:00", couponType: "满减券(2)",
couponType:"满减券(2)", maxDuration: 8,
maxDuration:8, duration: 8,
duration:8, minPrice: 200,
minPrice:200, subPrice: 62,
subPrice:62, sourceType: "领取(1)",
sourceType:"领取(1)", platformType: 1,
platformType:1, startDate: "2023-10-23",
startDate:"2023-10-23", endDate: "2023-11-23",
endDate:"2023-11-23", useStatus: 1,
useStatus:1, useDate: ""
useDate:""
}, },
{ {
couponId:"2222", couponId: "2222",
couponCode:"2222", couponCode: "2222",
name:"任意房型4小时通用券", name: "任意房型4小时通用券",
roomType:"标准", roomType: "标准",
couponTimeStart:"", couponTimeStart: "",
couponTimeEnd:"", couponTimeEnd: "",
couponType:"满减券(2)", couponType: "满减券(2)",
maxDuration:4, maxDuration: 4,
duration:4, duration: 4,
minPrice:100, minPrice: 100,
subPrice:22, subPrice: 22,
sourceType:"领取(1)", sourceType: "领取(1)",
platformType:2, platformType: 2,
startDate:"2023-10-23", startDate: "2023-10-23",
endDate:"2023-11-23", endDate: "2023-11-23",
useStatus:1, useStatus: 1,
useDate:"" useDate: ""
}, },
{ {
couponId:"8888", couponId: "8888",
couponCode:"8888", couponCode: "8888",
name:"任意房型8小时通用券", name: "任意房型8小时通用券",
roomType:"标准", roomType: "标准",
couponTimeStart:"", couponTimeStart: "",
couponTimeEnd:"", couponTimeEnd: "",
couponType:"满减券(2)", couponType: "满减券(2)",
maxDuration:8, maxDuration: 8,
duration:8, duration: 8,
minPrice:200, minPrice: 200,
subPrice:62, subPrice: 62,
sourceType:"领取(1)", sourceType: "领取(1)",
platformType:2, platformType: 2,
startDate:"2023-10-23", startDate: "2023-10-23",
endDate:"2023-11-23", endDate: "2023-11-23",
useStatus:2, useStatus: 2,
useDate:"" useDate: ""
} }
], ],
height: 120, height: 120,
queryParams: { queryParams: {
pageSize: 2, storeId: '',
pageNum: 1, roomId: '',
useStatus: '', orderMode: '',
preStartDate: '',
preEndDate: ''
}, },
eventChannel:null, eventChannel: null,
tipText:"", tipText: "",
show:false, show: false,
eventChannel: null,
selectId: ''
}; };
}, },
components: { components: {
'fixed-header': FixedHeader 'fixed-header': FixedHeader
}, },
onReachBottom() {
if(this.status=='loadmore'){
this.queryParams.pageNum+=1;
this.onLoading();
}
},
onLoad() { onLoad() {
this.onLoading(); this.eventChannel = this.getOpenerEventChannel();
// eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
this.eventChannel.on('sendData', (data) => {
this.selectId = data.selectId
this.onLoading(data);
})
}, },
methods: { methods: {
onLoading(){ onLoading(d) {
getCouponList(this.queryParams).then(res=>{ console.log(d, 90909)
console.log(res,909090909) getUseCoupon(d).then(res => {
if(res.data.code === 200 ){ console.log(res.data.data, "优惠券")
this.list = res.data.rows if (res.statusCode == 200) {
this.total = res.data.total if (res.data && res.data.data.length) {
this.list = res.data.data.sort((a, b) => b.subPrice - a.subPrice);
if (this.list.length < this.total) { this.current = this.list.findIndex(item=>item.id === this.selectId)
this.status = 'loadmore';
} else {
this.status = 'nomore'
} }
} }
}) })
},
onSelect(item, i) {
if (item.isAvailable !== 0 || this.current === i) return
this.current = i
},
onCancle() {
uni.navigateBack()
},
onConfirm() {
this.eventChannel.emit('getSelectData', {
couponId: this.list[this.current].id
});
this.onCancle();
} }
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.coupon-list-box{ .coupon-list-box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100%; width: 100%;
.coupon-item{ padding-bottom: 140upx;
display: flex;
flex-direction: row; .coupon-item {
width: 92%; display: flex;
border-radius: 20upx; flex-direction: row;
background-color: #ffffff; width: 92%;
margin: 12upx 0; border-radius: 20upx;
padding: 30upx 20upx; background-color: #ffffff;
.part-left{ margin: 12upx 0;
display: flex; padding: 30upx 20upx;
justify-content: center;
align-items: center; .part-left {
width: 160upx; display: flex;
margin-right: 20upx; justify-content: center;
image{ align-items: center;
display: block; width: 160upx;
width: 100%; margin-right: 20upx;
max-height:140upx ;
} image {
} display: block;
.part-right{ width: 100%;
display: flex; max-height: 140upx;
flex: 1; }
flex-direction: column; }
.coupon-name{
display: flex; .part-right {
justify-content: space-between; display: flex;
} flex: 1;
.des{ flex-direction: column;
display: flex;
justify-content: space-between; .coupon-name {
align-items: center; display: flex;
.flex-row{ justify-content: space-between;
display: flex; }
flex-direction: row;
align-items: center; .des {
} display: flex;
} justify-content: space-between;
} align-items: center;
}
} .flex-row {
.empty-box{ display: flex;
display: flex; flex-direction: row;
justify-content: center; align-items: center;
align-items: center; }
min-height: 400upx; }
} }
</style>
.margin-top {
margin-top: 12upx;
}
}
.active {
box-shadow: 0 0 10upx #ff55ff;
}
}
.box-content {
position: fixed;
left: 0;
bottom: 0;
width: 100vw;
height: 120upx;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
.cu-btn {
width: 40%;
margin: 0 5%;
}
}
</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