Skip to content

G
gxpt_wechat
Commit 415937b5 by zhangzhen
Options

完善订单结果页面和分享页面

parent 56eee374
Showing with 706 additions and 93 deletions
api/order.js
...@@ -9,7 +9,7 @@ export const orderList=(data)=>{ ...@@ -9,7 +9,7 @@ export const orderList=(data)=>{
// 订单详情 // 订单详情
export const getOrderInfo=(id)=>{ export const getOrderInfo=(id)=>{
let url=`/order/`+id let url=`/order/`+id
return http.get(url,data) return http.get(url)
} }
// 用户下单 // 用户下单
......
pages.json
...@@ -97,11 +97,22 @@ ...@@ -97,11 +97,22 @@
{ {
"path": "pages/orderResult/orderResult", "path": "pages/orderResult/orderResult",
"style": { "style": {
"navigationBarTitleText": "下单完成", "navigationBarTitleText": "订单详情",
"enablePullDownRefresh": false "enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/share/share",
"style": {
"navigationBarTitleText": "开门分享码",
"enablePullDownRefresh": false,
"navigationStyle": "default"
} }
} }
], ],
"globalStyle": { "globalStyle": {
"navigationStyle": "default", "navigationStyle": "default",
......
pages/my/myInfo.vue
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
</view> </view>
<view class="user-action"> <view class="user-action">
<view v-for="(item,k) in userAction" :key="k" class="action-box"> <view v-for="(item,k) in userAction" :key="k" class="action-box">
<view v-if="item.show" class="action-item" @tap="onActionNav(item)"> <view v-if="item.show" class="action-item" @tap="onActionNav(item,k)">
<view class="img-box"> <view class="img-box">
<image :src="item.iconUrl" mode="widthFix"></image> <image :src="item.iconUrl" mode="widthFix"></image>
</view> </view>
...@@ -169,12 +169,19 @@ import cleanIcon from "@/static/clean_icon.png"; ...@@ -169,12 +169,19 @@ import cleanIcon from "@/static/clean_icon.png";
url:"/pages/couponList/index" url:"/pages/couponList/index"
}) })
}, },
onActionNav(val){ onActionNav(val,k){
if(val.routePath){ if(val.routePath){
if(k===0){
uni.switchTab({
url:val.routePath
})
}else{
uni.navigateTo({ uni.navigateTo({
url:val.routePath url:val.routePath
}) })
} }
}
}, },
// 退出登录，解除手机号与当前微信的绑定 // 退出登录，解除手机号与当前微信的绑定
onLoginOut(){ onLoginOut(){
......
pages/order/order.vue
...@@ -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 text-bold text-lg" >{{ item.date}}</text> <text class="text-title text-bold text-lg">{{ item.date}}</text>
<text class="text-title text-bold text-lg" >{{ 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">
...@@ -105,7 +105,8 @@ ...@@ -105,7 +105,8 @@
</view> </view>
<view class="date-point-box"> <view class="date-point-box">
<view v-for="(item,k) in intervalList" :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 === 0?'free':item.status==1?'used': item.status==2?'checked':'error'"> <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>
...@@ -132,7 +133,8 @@ ...@@ -132,7 +133,8 @@
<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" @tap="onNavToSelectCoupon"> <view class="flex-row" @tap="onNavToSelectCoupon">
<text class="text-lg" :class="useCouponList.length?'text-pink':'text-gray'"> {{useCouponList.length? useCouponList[selectCouponIndex].name: '暂无可用'}}</text> <text class="text-lg" :class="useCouponList.length?'text-pink':'text-gray'">
{{useCouponList.length? useCouponList[selectCouponIndex].name: '暂无可用'}}</text>
<text class="cuIcon-right " :class="useCouponList.length?'text-pink':'text-gray'"></text> <text class="cuIcon-right " :class="useCouponList.length?'text-pink':'text-gray'"></text>
</view> </view>
</view> </view>
...@@ -142,15 +144,14 @@ ...@@ -142,15 +144,14 @@
{{Number(roomInfo.price)*duration > computePriceInfo.payFee ?'-￥'+ Number(Number(roomInfo.price)*duration - computePriceInfo.payFee).toFixed(2):'￥0'}} {{Number(roomInfo.price)*duration > computePriceInfo.payFee ?'-￥'+ Number(Number(roomInfo.price)*duration - computePriceInfo.payFee).toFixed(2):'￥0'}}
</text> </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>
<text class="text-title cuIcon-right "></text> <button class="recharge-btn cu-btn round bg-pink sm" @tap="onNavRecharge">去充值</button>
<!-- <text class="text-title cuIcon-right "></text> -->
</view>
</view> </view>
</view> -->
</view> </view>
<view class="pay-content-box"> <view class="pay-content-box">
<view class="flex-row"> <view class="flex-row">
...@@ -161,7 +162,7 @@ ...@@ -161,7 +162,7 @@
</view> </view>
</view> </view>
<view class=""> <view class="">
<button class="cu-btn bg-pink round lg" @tap="onOrderCreate">确认支付</button> <button class="cu-btn bg-pink round lg" @tap="onOrderConfirm">预约</button>
</view> </view>
</view> </view>
...@@ -208,6 +209,50 @@ ...@@ -208,6 +209,50 @@
</view> </view>
</uni-popup> </uni-popup>
<uni-popup ref="confirmPop" type="center">
<view class="confirm-pop">
<view class="pop-content-box">
<view class="title">
<text class="text-black text-bold text-xl">预约信息确认</text>
</view>
<view class="info-box">
<view class="info">
<text class="text-black text-lg">预约门店：{{roomInfo.storeName|| ''}}</text>
</view>
<view class="info">
<text class="text-black text-lg">预约包间：{{roomInfo.name}}</text>
</view>
<view class="info">
<text class="text-black text-lg">开始时间：{{dateObj.startDate}}</text>
</view>
<view class="info">
<text class="text-black text-lg">结束时间：{{dateObj.endDate}}</text>
</view>
</view>
<view class="flex-1">
<view class="tip-box">
<view class="">
<text class="text-red text-bold text-xl">客户须知</text>
</view>
<view class="flex-col text-red">
<text >1.预定的订单将全时段保留,迟到不可顺延和退款。</text>
<text>2.若订单时段前包厢无使用.可提前开始订单.但订单总时长不变。</text>
<text>3.订单开始前0小时内取消订单需核收xx%退单费请合理规划您的时间。</text>
</view>
</view>
</view>
<view class="flex-between">
<view class="btn-box">
<button class="cu-btn round block line-pink lg" @tap="onCancle">返回修改</button>
</view>
<view class="btn-box">
<button class="cu-btn round block bg-pink lg" @tap="onOrderCreate">立即预定</button>
</view>
</view>
</view>
</view>
</uni-popup>
</view> </view>
</template> </template>
...@@ -239,7 +284,8 @@ ...@@ -239,7 +284,8 @@
} }
return { return {
id: '', id: '',
orderType: 0, orderType: 1,
payWay: 1,
hostUrl: config.hostUrl, hostUrl: config.hostUrl,
roomInfo: { roomInfo: {
images: [] images: []
...@@ -275,16 +321,15 @@ ...@@ -275,16 +321,15 @@
], ],
// 套餐 // 套餐
modeIndex: 0, modeIndex: 0,
packageMode: [ packageMode: [{
{ id: '',
id:'',
label: "优惠套餐1", label: "优惠套餐1",
duration: 4, duration: 4,
originalPrice: 100, originalPrice: 100,
realPrice: 78 realPrice: 78
}, },
{ {
id:'', id: '',
label: "优惠套餐2", label: "优惠套餐2",
duration: 8, duration: 8,
originalPrice: 200, originalPrice: 200,
...@@ -299,7 +344,8 @@ ...@@ -299,7 +344,8 @@
checkedIndex: [], checkedIndex: [],
checkedDateList: [0, 0], checkedDateList: [0, 0],
durationIndex: [0], durationIndex: [0],
hourList: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", hourList: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15",
"16",
"17", "18", "19", "20", "21", "22", "23" "17", "18", "19", "20", "21", "22", "23"
], ],
minuteList: ['00', "30"], minuteList: ['00', "30"],
...@@ -309,15 +355,16 @@ ...@@ -309,15 +355,16 @@
3: "充值" 3: "充值"
}, },
editDuration: [], editDuration: [],
checkedCouponInfo:'', checkedCouponInfo: '',
useDateStatus:true, useDateStatus: true,
selectCouponIndex:0, selectCouponIndex: 0,
useCouponList:[],//可使用的优惠券 useCouponList: [], //可使用的优惠券
computePriceInfo:{ computePriceInfo: {
couponFee: '', couponFee: '',
payFee: '', payFee: '',
totalFee: '', totalFee: '',
} },
dateObj: {}
}; };
}, },
onLoad(option) { onLoad(option) {
...@@ -340,7 +387,7 @@ ...@@ -340,7 +387,7 @@
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){ if (this.roomInfo.packList && this.roomInfo.packList.length) {
this.packageMode = this.roomInfo.packList this.packageMode = this.roomInfo.packList
this.index = 1; this.index = 1;
this.modeIndex = 0; this.modeIndex = 0;
...@@ -383,7 +430,7 @@ ...@@ -383,7 +430,7 @@
num = Number(item) num = Number(item)
} }
return num>=10 ? num : `0${num}` return num >= 10 ? num : `0${num}`
}).join(":") }).join(":")
} else { } else {
// 小时模式 // 小时模式
...@@ -399,21 +446,21 @@ ...@@ -399,21 +446,21 @@
} else { } else {
num = Number(item) num = Number(item)
} }
return num>=10 ? num : `0${num}` return num >= 10 ? num : `0${num}`
}).join(":") }).join(":")
} }
this.onGetUseCoupon() this.onGetUseCoupon()
this.onUpdateIntervalList() this.onUpdateIntervalList()
this.dateObj = this.onSetDateTime(this.startTime, this.endTime);
}, },
// 更新时间的选取状态 // 更新时间的选取状态
onUpdateIntervalList(){ onUpdateIntervalList() {
this.useDateStatus = true this.useDateStatus = true
console.log(this.dateIntervalList,"dateIntervalList") console.log(this.dateIntervalList, "dateIntervalList")
let start = Number(this.startTime.split(":")[0]) let start = Number(this.startTime.split(":")[0])
let end = Number(this.endTime.split(":")[0]) let end = Number(this.endTime.split(":")[0])
console.log(start,end,"start") console.log(start, end, "start")
if(end <= start){ if (end <= start) {
end += 24 end += 24
} }
...@@ -422,18 +469,18 @@ ...@@ -422,18 +469,18 @@
...this.dateIntervalList ...this.dateIntervalList
] ]
for(start;start<=end;start++){ for (start; start <= end; start++) {
if(this.dateIntervalList[start].status ===1){ if (this.dateIntervalList[start].status === 1) {
// 表示时间点被占用,无法选择 // 表示时间点被占用,无法选择
this.useDateStatus = false this.useDateStatus = false
this.intervalList[start]= { this.intervalList[start] = {
...this.dateIntervalList[start], ...this.dateIntervalList[start],
status:3 status: 3
} }
}else{ } else {
this.intervalList[start]= { this.intervalList[start] = {
...this.dateIntervalList[start], ...this.dateIntervalList[start],
status:2 status: 2
} }
} }
...@@ -441,56 +488,58 @@ ...@@ -441,56 +488,58 @@
this.$forceUpdate(); this.$forceUpdate();
setTimeout(()=>{ setTimeout(() => {
if(!this.useDateStatus){ if (!this.useDateStatus) {
uni.showToast({ uni.showToast({
icon:"none", icon: "none",
title:"时间选择有重叠" title: "选择时段有重复"
}) })
} }
},1500) }, 1000)
}, },
// 获取可用优惠券 // 获取可用优惠券
onGetUseCoupon() { onGetUseCoupon() {
let dateObj = this.onSetDateTime(this.startTime,this.endTime); let dateObj = this.onSetDateTime(this.startTime, this.endTime);
getUseCoupon({ getUseCoupon({
storeId: this.roomInfo.storeId, storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id, roomId: this.roomInfo.id,
orderMode:this.orderTypeList[this.index].type, orderMode: this.orderTypeList[this.index].type,
preStartDate: dateObj.startDate, preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate preEndDate: dateObj.endDate
}).then(res => { }).then(res => {
console.log(res.data.data,"优惠券") console.log(res.data.data, "优惠券")
if (res.statusCode == 200) { if (res.statusCode == 200) {
if (res.data && res.data.data.length) { if (res.data && res.data.data.length) {
this.useCouponList = res.data.data.filter(item=>item.isAvailable===0).sort((a,b)=>b.subPrice-a.subPrice); this.useCouponList = res.data.data.filter(item => item.isAvailable === 0).sort((a,
b) => b.subPrice - a.subPrice);
console.log(this.useCouponList) console.log(this.useCouponList)
} }
} }
this.onComputePrice(); this.onComputePrice();
}) })
}, },
onNavToSelectCoupon(){ onNavToSelectCoupon() {
let dateObj = this.onSetDateTime(this.startTime,this.endTime); let dateObj = this.onSetDateTime(this.startTime, this.endTime);
let that = this; let that = this;
if(this.useCouponList.length){ if (this.useCouponList.length) {
uni.navigateTo({ uni.navigateTo({
url:"/pages/useCoupon/index", url: "/pages/useCoupon/index",
events: { events: {
getSelectData(data) { getSelectData(data) {
console.log(data) console.log(data)
that.selectCouponIndex = that.useCouponList.findIndex(item=>item.id === data.couponId) that.selectCouponIndex = that.useCouponList.findIndex(item => item.id === data
.couponId)
} }
}, },
success(res) { success(res) {
res.eventChannel.emit('sendData', { res.eventChannel.emit('sendData', {
storeId: that.roomInfo.storeId, storeId: that.roomInfo.storeId,
roomId: that.roomInfo.id, roomId: that.roomInfo.id,
orderMode:that.orderTypeList[that.index].type, orderMode: that.orderTypeList[that.index].type,
preStartDate: dateObj.startDate, preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate, preEndDate: dateObj.endDate,
selectId:that.useCouponList[that.selectCouponIndex].id selectId: that.useCouponList[that.selectCouponIndex].id
}) })
} }
}) })
...@@ -499,25 +548,25 @@ ...@@ -499,25 +548,25 @@
//计算支付金额 //计算支付金额
onComputePrice() { onComputePrice() {
uni.showLoading({ uni.showLoading({
title:"计算价格中..." title: "计算价格中..."
}) })
let dateObj = this.onSetDateTime(this.startTime,this.endTime); let dateObj = this.onSetDateTime(this.startTime, this.endTime);
let params = { let params = {
storeId: this.roomInfo.storeId, storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id, roomId: this.roomInfo.id,
buyType: this.orderTypeList[this.index].type, buyType: this.orderTypeList[this.index].type,
couponId:this.useCouponList.length? this.useCouponList[this.selectCouponIndex].id:'', couponId: this.useCouponList.length ? this.useCouponList[this.selectCouponIndex].id : '',
orderType: this.orderType, orderType: this.orderType,
preStartDate: dateObj.startDate, preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate, preEndDate: dateObj.endDate,
orderMode:this.orderTypeList[this.index].type, orderMode: this.orderTypeList[this.index].type,
} }
if(this.index===1){ if (this.index === 1) {
params.packId = this.packageMode[this.modeIndex].id; params.packId = this.packageMode[this.modeIndex].id;
} }
computePrice(params).then(res => { computePrice(params).then(res => {
uni.hideLoading() uni.hideLoading()
if(res.data.code == 200){ if (res.data.code == 200) {
this.computePriceInfo = res.data.data; this.computePriceInfo = res.data.data;
} }
...@@ -610,56 +659,97 @@ ...@@ -610,56 +659,97 @@
this.$refs.popup.close() this.$refs.popup.close()
this.$refs.popupDuration.close() this.$refs.popupDuration.close()
}, },
onCancle() {
this.$refs.confirmPop.close();
},
onOrderConfirm(){
if (!this.useDateStatus) {
uni.showToast({
icon: "none",
title: "选择时段有重复，无法下单"
})
return
}
this.$refs.confirmPop.open();
},
onOrderCreate() { onOrderCreate() {
this.onCancle();
uni.showLoading({ uni.showLoading({
title: "下单中..." title: "下单中..."
}) })
let dateObj = this.onSetDateTime(this.startTime, this.endTime);
orderCreate({ orderCreate({
storeId: this.roomInfo.storeId, storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id, roomId: this.roomInfo.id,
orderType: 1, orderType: this.orderType,
buyType: 1, buyType: this.orderTypeList[this.index].type,
payType: 1, payType: 1,
couponId:this.useCouponList.length? this.useCouponList[this.selectCouponIndex].id:'', couponId: this.useCouponList.length ? this.useCouponList[this.selectCouponIndex].id : '',
preStartDate: "2023-10-25 00:00:00", preStartDate: dateObj.startDate,
preEndDate: "2023-10-25 04:00:00", preEndDate: dateObj.endDate,
totalFee: 100, totalFee: Number(this.roomInfo.price) * this.duration,
payFee: 0 payFee: this.computePriceInfo.payFee || 0
}).then(res => { }).then(res => {
console.log(res, 909090) console.log(res, 909090)
uni.hideLoading() uni.hideLoading()
if(res.data.code == 200){ if (res.data.code == 200) {
uni.showToast({ uni.showToast({
icon: "success", icon: "success",
title: "下单成功", title: "下单成功",
success: () => { success: () => {
setTimeout(() => { setTimeout(() => {
uni.navigateTo({ uni.navigateTo({
url: "/pages/orderResult/orderResult?orderNo="+res.data.data.orderNo url: "/pages/orderResult/orderResult?orderNo=" +
res.data.data.orderNo
}) })
}, 1000) }, 1000)
} }
}) })
}else{ } else {
uni.showToast({ uni.showToast({
title: "下单失败" title: "下单失败"
}) })
} }
}) })
}, },
onSelectTime(val, k) {
console.log(val, k, 909090)
if (val.status == 1) {
uni.showToast({
icon: "none",
title: "时间为不可选择时间"
})
} else {
if (k >= 24) {
this.dateIndex += 1
this.startTime = `${k-24}:00`
} else {
this.startTime = `${k}:00`
}
this.onSetEndTime()
}
},
onNavRecharge() {
uni.showToast({
icon: "none",
title: "功能暂未开发"
})
},
// 将时间转换成完整日期 // 将时间转换成完整日期
onSetDateTime(startTime,endTime){ onSetDateTime(startTime, endTime) {
let obj={ let obj = {
startDate:"", startDate: "",
endDate:'' endDate: ''
} }
let startArr = startTime.split(":") let startArr = startTime.split(":")
let endArr = endTime.split(":") let endArr = endTime.split(":")
obj.startDate =`${this.dateList[this.dateIndex].readDate} ${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(this.dateList[this.dateIndex].readDate).add(1,"days").format("YYYY-MM-DD")} ${endTime}:00` obj.endDate =
}else{ `${moment(this.dateList[this.dateIndex].readDate).add(1,"days").format("YYYY-MM-DD")} ${endTime}:00`
obj.endDate =`${this.dateList[this.dateIndex].readDate} ${endTime}:00` } else {
obj.endDate = `${this.dateList[this.dateIndex].readDate} ${endTime}:00`
} }
console.log(obj) console.log(obj)
return obj; return obj;
...@@ -881,7 +971,8 @@ ...@@ -881,7 +971,8 @@
.gray { .gray {
background-color: #bfbfbf; background-color: #bfbfbf;
} }
.error{
.error {
background-color: #ff0000; background-color: #ff0000;
} }
} }
...@@ -917,7 +1008,8 @@ ...@@ -917,7 +1008,8 @@
.checked { .checked {
background-color: #e03997; background-color: #e03997;
} }
.error{
.error {
background-color: #ff0000; background-color: #ff0000;
} }
...@@ -975,7 +1067,6 @@ ...@@ -975,7 +1067,6 @@
border-radius: 12upx 12upx 0 0; border-radius: 12upx 12upx 0 0;
box-shadow: 0 0 8upx rgba(255, 170, 255, 0.8); box-shadow: 0 0 8upx rgba(255, 170, 255, 0.8);
padding: 0 30upx; padding: 0 30upx;
>.flex-row { >.flex-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -1006,4 +1097,68 @@ ...@@ -1006,4 +1097,68 @@
} }
} }
} }
.recharge-btn {
margin-left: 10upx;
}
.confirm-pop {
width: 74vw;
.pop-content-box {
display: flex;
flex-direction: column;
width: 100%;
min-height: 50vh;
background-color: #ffffff;
border-radius: 20upx;
.info-box {
display: flex;
flex-direction: column;
width: 92%;
margin: 0 auto;
padding-top: 12upx 0;
.info {
padding: 12upx 0;
font-size: 20upx;
}
}
.title {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 20upx;
border-bottom: 1px solid #ffaaff;
}
.flex-1{
display: flex;
flex: 1;
width: 100%;
justify-content: center;
padding-top: 40upx;
.tip-box{
padding-top: 40upx;
width: 92%;
border-top: 1px dashed #ffaaff;
.flex-col{
text{
line-height: 52upx;
}
}
}
}
}
.flex-between {
display: flex;
width: 100%;
padding: 0 5%;
margin: 24upx 0;
.btn-box {
width: 45%;
}
}
}
</style> </style>
\ No newline at end of file
pages/orderRecord/orderRecord.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</scroll-view> </scroll-view>
<view class="content-box"> <view class="content-box">
<view class="list-content"> <view class="list-content">
<view v-for="(item,index) in list" :key="index" class="list-item"> <view v-for="(item,index) in list" :key="index" class="list-item" @tap="onNavToOrderInfo(item)">
<view class="flex-between part-1"> <view class="flex-between part-1">
<text class="text-title text-bold text-xl">一帆风顺(111)</text> <text class="text-title text-bold text-xl">一帆风顺(111)</text>
<text class="text-pink">待使用</text> <text class="text-pink">待使用</text>
...@@ -115,6 +115,11 @@ ...@@ -115,6 +115,11 @@
tabSelect(e) { tabSelect(e) {
console.log(e, 99999) console.log(e, 99999)
this.statusIndex = e.currentTarget.dataset.id; this.statusIndex = e.currentTarget.dataset.id;
},
onNavToOrderInfo(val){
uni.navigateTo({
url:"/pages/orderResult/orderResult?id="+val.id
})
} }
} }
} }
......
pages/orderResult/orderResult.vue
<template> <template>
<view> <view class="order-info-box">
<f-navbar title="订单详情" bgColor="#e40583" fontColor="#ffffff"></f-navbar>
<view class="order-info-content">
<view class="order-time">
<view class="flex-between">
<view class="flex-col part-left">
<text class="text-xxl text-bold">{{orderInfo.startTime}}</text>
<text class="text-lg">{{orderInfo.startDate}}</text>
</view>
<view class="flex-col part-center">
<text class="text-xxl text-bold">共{{orderInfo.timeLong || 0}}小时</text>
</view>
<view class="flex-col part-right">
<text class="text-xxl text-bold">{{orderInfo.endTime}}</text>
<text class="text-lg">{{orderInfo.endDate}}</text>
</view>
</view>
</view>
<view class="order-des">
<view class="part-1">
<view class="flex-between title">
<view class="flex-row">
<text class="cuIcon-titles text-pink text-xl"></text>
<text class="text-black text-xl text-bold">{{orderInfo.storeName || '门店名称'}}</text>
</view>
<button class="cu-btn line-pink">
<text>导航</text>
<image src="../../static/map_icon.png" mode="heightFix"></image>
</button>
</view>
<view class="flex-row">
<view class="part-img">
<image src="../../static/blank2.jpg" mode="scaleToFill"></image>
</view>
<view class="flex-1 flex-col">
<view class="info">
<text class="text-black text-lg">预约门店:{{orderInfo.name|| ''}}</text>
</view>
<view class="info">
<text class="text-black text-lg">下单时间:{{orderInfo.updateTime || orderInfo.createTime}}</text>
</view>
<view class="info">
<text class="text-black text-lg">开始时间:{{orderInfo.preStartDate}}</text>
</view>
<view class="info">
<text class="text-black text-lg">结束时间:{{orderInfo.preEndDate}}</text>
</view>
</view>
</view>
<view class="flex-between">
<text class="text-block text-lg">订单编号</text>
<text class="text-block text-lg">{{orderInfo.orderNo}}</text>
</view>
<view class="flex-between">
<text class="text-block text-lg">支付方式</text>
<text class="text-block text-lg"></text>
</view>
<view class="flex-between">
<text class="text-block text-lg">支付时间</text>
<text class="text-block text-lg">{{orderInfo.payTime}}</text>
</view>
</view>
<view class="part-2">
<view class="flex-between title">
<view class="flex-row">
<text class="cuIcon-titles text-pink text-xl"></text>
<text class="text-black text-xl text-bold">自助操作</text>
</view>
</view>
<view class="flex-between btn-box">
<view class="part">
<button class="cu-btn block round bg-pink lg">进店开门</button>
</view>
<view class="part">
<button class="cu-btn block round line-pink lg" @tap="onNavToShare">分享好友</button>
</view>
</view>
</view>
<view class="part-3">
<view class="flex-between title">
<view class="flex-row">
<text class="cuIcon-titles text-pink text-xl"></text>
<text class="text-black text-xl text-bold">温馨提示</text>
</view>
</view>
<view class="flex-col">
<text>1、订单转发好友后，好友也可直接自助开门进入门店包间。</text>
<text>2、订单续单可能碰到后续时间段被人预定而无法续单的情况，请提前规划好预约时间段。</text>
<text>3、如果临时有事无法到店消费，请在订单开始前进行取消订单操作，否则无法退款。</text>
<text>4、若您预定包间在您预定时段之前为空闲中你可以提前开始使用包间，使用总时长不变。</text>
</view>
</view>
</view> </view>
</view>
</view>
</template> </template>
<script> <script>
import fNavbar from '@/components/module/f-navbar/f-navbar';
import {getOrderInfo} from "@/api/order.js"
import moment from "@/common/moment_zh_cn.js";
export default { export default {
components:{
fNavbar
},
data() { data() {
return { return {
orderNo:'' orderId:'',
orderInfo:{},
}; };
}, },
onLoad(option) { onLoad(option) {
this.orderNo = option.orderNo console.log(option,909090)
this.orderId = option.id;
this.onLoading();
}, },
methods:{ methods:{
onLoading(){ onLoading(){
getOrderInfo(this.orderId).then(res=>{
console.log(res,909090)
this.orderInfo = {
...res.data.data,
startDate: res.data.data.preStartDate.split(" ")[0],
startTime: res.data.data.preStartDate.split(" ")[1],
endDate: res.data.data.preEndDate.split(" ")[0],
endTime: res.data.data.preEndDate.split(" ")[1],
payTime: moment(res.data.data.payTime).format("YYYY-MM-DD HH:mm:ss")
}
})
},
onNavToShare(){
uni.navigateTo({
url:"/pages/share/share?orderId="+this.orderId
})
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.order-info-box{
display: flex;
flex-direction: column;
width: 100vw;
.order-info-content{
display: flex;
flex-direction: column;
.order-time{
width: 100%;
padding: 20upx 10%;
height: 420upx;
border-radius: 0 0 80upx 80upx;
background-color: #e40583;
.flex-between{
display: flex;
align-items: center;
height: 100upx;
.flex-col{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #ffffff;
.text-xxl{
margin-bottom: 6upx;
}
}
.part-center{
display: flex;
flex: 1;
height: 80%;
margin: 0 40upx;
border-bottom: 1px dashed #ffffff;
>text{
letter-spacing: 3upx;
}
}
}
}
}
.order-des{
display: flex;
flex: 1;
flex-direction: column;
width: 92%;
margin: -260upx auto 0;
.part-1{
display: flex;
flex-direction: column;
width: 100%;
min-height: 400upx;
border-radius: 20upx;
background-color: #ffffff;
padding: 24upx;
.title{
.flex-row{
display: flex;
align-items: center;
}
}
.flex-between{
display: flex;
align-items: center;
width: 100%;
.cu-btn{
padding: 0 12upx;
border-radius: 16upx;
image{
display: block;
height: 100%;
width: auto;
}
}
}
.part-img{
display: flex;
margin: 20upx 20upx 20upx 0;
width: 180upx;
height: 220upx;
border-radius: 12upx;
overflow: hidden;
>image{
display: block;
width: 100%;
height: 100%;
}
}
.info{
display: flex;
flex-direction: row;
align-items: center;
flex: 1;
font-size: 20upx;
}
}
.part-2{
display: flex;
flex-direction: column;
width: 100%;
min-height: 120upx;
border-radius: 20upx;
background-color: #ffffff;
padding: 24upx;
min-height: 120upx;
margin-top: 30upx;
.btn-box{
display: flex;
justify-content: space-between;
align-items: center;
width: 94%;
margin: 24upx auto;
.part{
display: block;
width: 48%;
}
}
}
.part-3{
display: flex;
flex-direction: column;
width: 100%;
min-height: 120upx;
border-radius: 20upx;
background-color: #ffffff;
padding: 24upx;
min-height: 120upx;
margin: 30upx 0;
.flex-col{
margin-top: 20upx;
text{
line-height: 40upx;
}
}
}
}
}
</style> </style>
pages/share/share.vue 0 → 100644
<template>
<view class="share-box">
<view class="content-box">
<view class="tki-qrcode">
<tki-qrcode ref="qrcode" :cid="cid" :val="text" :size="size" unit="upx" icon="../../static/cart.png"
:iconSize="24" :onval="true" :loadMake="loadMake" :showLoading="false" @result="qrR" />
</view>
<view class="info">
<view class="room-name">
<text class="text-white text-bold text-xxl">{{orderInfo.name || '一帆风顺(111)[中包]'}}</text>
</view>
<view class="store-name">
<text class="icon cuIcon-location text-white text-xl"></text> <text class="text text-white text-lg">{{orderInfo.address || '武汉市汉阳区龙阳大道商业街110号'}}</text>
</view>
<view class="flex-between btn-box">
<view class="part">
<button class="cu-btn block round bg-white lg">进店开门</button>
</view>
<view class="part">
<button class="cu-btn block round line-white lg">门店导航</button>
</view>
</view>
<view class="flex-col tips-box">
<text class="text-white text-lg">预约时间：{{orderInfo.preStartDate|formatDate}} - {{orderInfo.preEndDate|formatDate}}</text>
<text class="text-white text-lg">客服电话：18888888888</text>
</view>
</view>
</view>
</view>
</template>
<script>
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode"
import {
getOrderInfo
} from "@/api/order.js"
import moment from "@/common/moment_zh_cn.js";
export default {
components: {
tkiQrcode
},
data() {
return {
cid: "qrCode",
qrPath: '',
text: '生成中',
size: 500,
iconSize: 120,
colorDark: '#000000',
colorLight: '#ffffff',
orderId: '',
orderInfo: {},
};
},
filters:{
formatDate(val){
return val? moment(val).format("MM-DD HH:mm") :'-'
}
},
onLoad(option) {
console.log(option, 909090)
this.orderId =option.orderId || option.id;
this.onLoading();
},
onShareAppMessage() {
return {
title: "分享立即开门",
path: "/pages/share/share?orderId="+this.orderId,
imageUrl: this.qrPath
}
},
methods: {
onLoading() {
getOrderInfo(this.orderId).then(res => {
console.log(res, 909090)
this.orderInfo = {
...res.data.data,
startDate: res.data.data.preStartDate.split(" ")[0],
startTime: res.data.data.preStartDate.split(" ")[1],
endDate: res.data.data.preEndDate.split(" ")[0],
endTime: res.data.data.preEndDate.split(" ")[1],
payTime: moment(res.data.data.payTime).format("YYYY-MM-DD HH:mm:ss")
}
this.text = "http://www.baidu.com"
})
},
qrR(r) {
console.log(r, "二维码路径")
this.qrPath = r;
}
}
}
</script>
<style lang="scss" scoped>
.share-box {
display: flex;
justify-content: center;
width: 100vw;
height: 100vh;
overflow: hidden;
.content-box {
display: flex;
flex-direction: column;
align-items: center;
width: 94%;
height: 98%;
border-radius: 20upx;
background: rgba(228, 5, 131, 0.6);
.tki-qrcode {
padding: 30upx;
border-radius: 20upx;
background-color: #ffffff;
margin-top: 60upx;
}
.info {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.room-name {
display: flex;
justify-content: center;
width: 100%;
padding: 30upx 0;
}
.store-name {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 90%;
padding: 30upx 0;
.text{
text-decoration: underline;
}
.icon{
margin-right: 10upx;
}
}
}
}
}
.btn-box {
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
margin: 24upx auto;
.part {
display: block;
width: 48%;
}
}
.tips-box{
display: flex;
flex-direction: column;
width: 80%;
border-top: 1px dashed #f1f1f1;
margin-top: 30upx;
padding-top: 30upx;
.text-white{
color: #f1f1f1;
line-height: 60upx;
}
}
</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