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)=>{
// 订单详情
export const getOrderInfo=(id)=>{
let url=`/order/`+id
return http.get(url,data)
return http.get(url)
}
// 用户下单
......
pages.json
......@@ -97,11 +97,22 @@
{
"path": "pages/orderResult/orderResult",
"style": {
"navigationBarTitleText": "下单完成",
"enablePullDownRefresh": false
"navigationBarTitleText": "订单详情",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/share/share",
"style": {
"navigationBarTitleText": "开门分享码",
"enablePullDownRefresh": false,
"navigationStyle": "default"
}
}
],
"globalStyle": {
"navigationStyle": "default",
......
pages/my/myInfo.vue
......@@ -39,7 +39,7 @@
</view>
<view class="user-action">
<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">
<image :src="item.iconUrl" mode="widthFix"></image>
</view>
......@@ -169,12 +169,19 @@ import cleanIcon from "@/static/clean_icon.png";
url:"/pages/couponList/index"
})
},
onActionNav(val){
onActionNav(val,k){
if(val.routePath){
if(k===0){
uni.switchTab({
url:val.routePath
})
}else{
uni.navigateTo({
url:val.routePath
})
}
}
},
// 退出登录，解除手机号与当前微信的绑定
onLoginOut(){
......
pages/order/order.vue
......@@ -32,8 +32,8 @@
<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"
: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" >{{ k>0?item.weekday: '今天'}}</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>
</view>
</view>
<view v-show="index==1" class="flex-row package-mode">
......@@ -105,7 +105,8 @@
</view>
<view class="date-point-box">
<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>
<text class="text-gray">{{item.hour}}</text>
......@@ -132,7 +133,8 @@
<view class="flex-between price">
<text class="text-title text-lg">优惠券</text>
<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>
</view>
</view>
......@@ -142,15 +144,14 @@
{{Number(roomInfo.price)*duration > computePriceInfo.payFee ?'-￥'+ Number(Number(roomInfo.price)*duration - computePriceInfo.payFee).toFixed(2):'￥0'}}
</text>
</view>
<!-- <view class="flex-between price">
<view class="flex-between price">
<text class="text-title text-lg">账户余额</text>
<view class="flex-row text-pink">
<text class="text-title text-lg">0.00 元</text>
<text class="text-title cuIcon-right "></text>
<text class="text-title text-lg">￥0.00</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 class="pay-content-box">
<view class="flex-row">
......@@ -161,7 +162,7 @@
</view>
</view>
<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>
......@@ -208,6 +209,50 @@
</view>
</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>
</template>
......@@ -239,7 +284,8 @@
}
return {
id: '',
orderType: 0,
orderType: 1,
payWay: 1,
hostUrl: config.hostUrl,
roomInfo: {
images: []
......@@ -275,16 +321,15 @@
],
// 套餐
modeIndex: 0,
packageMode: [
{
id:'',
packageMode: [{
id: '',
label: "优惠套餐1",
duration: 4,
originalPrice: 100,
realPrice: 78
},
{
id:'',
id: '',
label: "优惠套餐2",
duration: 8,
originalPrice: 200,
......@@ -299,7 +344,8 @@
checkedIndex: [],
checkedDateList: [0, 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"
],
minuteList: ['00', "30"],
......@@ -309,15 +355,16 @@
3: "充值"
},
editDuration: [],
checkedCouponInfo:'',
useDateStatus:true,
selectCouponIndex:0,
useCouponList:[],//可使用的优惠券
computePriceInfo:{
checkedCouponInfo: '',
useDateStatus: true,
selectCouponIndex: 0,
useCouponList: [], //可使用的优惠券
computePriceInfo: {
couponFee: '',
payFee: '',
totalFee: '',
}
},
dateObj: {}
};
},
onLoad(option) {
......@@ -340,7 +387,7 @@
images: res.data.data.images ? res.data.data.images
.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.index = 1;
this.modeIndex = 0;
......@@ -383,7 +430,7 @@
num = Number(item)
}
return num>=10 ? num : `0${num}`
return num >= 10 ? num : `0${num}`
}).join(":")
} else {
// 小时模式
......@@ -399,21 +446,21 @@
} else {
num = Number(item)
}
return num>=10 ? num : `0${num}`
return num >= 10 ? num : `0${num}`
}).join(":")
}
this.onGetUseCoupon()
this.onUpdateIntervalList()
this.dateObj = this.onSetDateTime(this.startTime, this.endTime);
},
// 更新时间的选取状态
onUpdateIntervalList(){
onUpdateIntervalList() {
this.useDateStatus = true
console.log(this.dateIntervalList,"dateIntervalList")
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){
console.log(start, end, "start")
if (end <= start) {
end += 24
}
......@@ -422,18 +469,18 @@
...this.dateIntervalList
]
for(start;start<=end;start++){
if(this.dateIntervalList[start].status ===1){
for (start; start <= end; start++) {
if (this.dateIntervalList[start].status === 1) {
// 表示时间点被占用,无法选择
this.useDateStatus = false
this.intervalList[start]= {
this.intervalList[start] = {
...this.dateIntervalList[start],
status:3
status: 3
}
}else{
this.intervalList[start]= {
} else {
this.intervalList[start] = {
...this.dateIntervalList[start],
status:2
status: 2
}
}
......@@ -441,56 +488,58 @@
this.$forceUpdate();
setTimeout(()=>{
if(!this.useDateStatus){
setTimeout(() => {
if (!this.useDateStatus) {
uni.showToast({
icon:"none",
title:"时间选择有重叠"
icon: "none",
title: "选择时段有重复"
})
}
},1500)
}, 1000)
},
// 获取可用优惠券
onGetUseCoupon() {
let dateObj = this.onSetDateTime(this.startTime,this.endTime);
let dateObj = this.onSetDateTime(this.startTime, this.endTime);
getUseCoupon({
storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id,
orderMode:this.orderTypeList[this.index].type,
orderMode: this.orderTypeList[this.index].type,
preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate
}).then(res => {
console.log(res.data.data,"优惠券")
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);
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);
onNavToSelectCoupon() {
let dateObj = this.onSetDateTime(this.startTime, this.endTime);
let that = this;
if(this.useCouponList.length){
if (this.useCouponList.length) {
uni.navigateTo({
url:"/pages/useCoupon/index",
url: "/pages/useCoupon/index",
events: {
getSelectData(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) {
res.eventChannel.emit('sendData', {
storeId: that.roomInfo.storeId,
roomId: that.roomInfo.id,
orderMode:that.orderTypeList[that.index].type,
orderMode: that.orderTypeList[that.index].type,
preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate,
selectId:that.useCouponList[that.selectCouponIndex].id
selectId: that.useCouponList[that.selectCouponIndex].id
})
}
})
......@@ -499,25 +548,25 @@
//计算支付金额
onComputePrice() {
uni.showLoading({
title:"计算价格中..."
title: "计算价格中..."
})
let dateObj = this.onSetDateTime(this.startTime,this.endTime);
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:'',
couponId: this.useCouponList.length ? this.useCouponList[this.selectCouponIndex].id : '',
orderType: this.orderType,
preStartDate: dateObj.startDate,
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;
}
computePrice(params).then(res => {
uni.hideLoading()
if(res.data.code == 200){
if (res.data.code == 200) {
this.computePriceInfo = res.data.data;
}
......@@ -610,56 +659,97 @@
this.$refs.popup.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() {
this.onCancle();
uni.showLoading({
title: "下单中..."
})
let dateObj = this.onSetDateTime(this.startTime, this.endTime);
orderCreate({
storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id,
orderType: 1,
buyType: 1,
orderType: this.orderType,
buyType: this.orderTypeList[this.index].type,
payType: 1,
couponId:this.useCouponList.length? this.useCouponList[this.selectCouponIndex].id:'',
preStartDate: "2023-10-25 00:00:00",
preEndDate: "2023-10-25 04:00:00",
totalFee: 100,
payFee: 0
couponId: this.useCouponList.length ? this.useCouponList[this.selectCouponIndex].id : '',
preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate,
totalFee: Number(this.roomInfo.price) * this.duration,
payFee: this.computePriceInfo.payFee || 0
}).then(res => {
console.log(res, 909090)
uni.hideLoading()
if(res.data.code == 200){
if (res.data.code == 200) {
uni.showToast({
icon: "success",
title: "下单成功",
success: () => {
setTimeout(() => {
uni.navigateTo({
url: "/pages/orderResult/orderResult?orderNo="+res.data.data.orderNo
url: "/pages/orderResult/orderResult?orderNo=" +
res.data.data.orderNo
})
}, 1000)
}
})
}else{
} else {
uni.showToast({
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){
let obj={
startDate:"",
endDate:''
onSetDateTime(startTime, endTime) {
let obj = {
startDate: "",
endDate: ''
}
let startArr = startTime.split(":")
let endArr = endTime.split(":")
obj.startDate =`${this.dateList[this.dateIndex].readDate} ${startTime}:00`
if(Number(endArr[0])<=Number(startArr[0])){
obj.endDate =`${moment(this.dateList[this.dateIndex].readDate).add(1,"days").format("YYYY-MM-DD")} ${endTime}:00`
}else{
obj.endDate =`${this.dateList[this.dateIndex].readDate} ${endTime}:00`
obj.startDate = `${this.dateList[this.dateIndex].readDate} ${startTime}:00`
if (Number(endArr[0]) <= Number(startArr[0])) {
obj.endDate =
`${moment(this.dateList[this.dateIndex].readDate).add(1,"days").format("YYYY-MM-DD")} ${endTime}:00`
} else {
obj.endDate = `${this.dateList[this.dateIndex].readDate} ${endTime}:00`
}
console.log(obj)
return obj;
......@@ -881,7 +971,8 @@
.gray {
background-color: #bfbfbf;
}
.error{
.error {
background-color: #ff0000;
}
}
......@@ -917,7 +1008,8 @@
.checked {
background-color: #e03997;
}
.error{
.error {
background-color: #ff0000;
}
......@@ -975,7 +1067,6 @@
border-radius: 12upx 12upx 0 0;
box-shadow: 0 0 8upx rgba(255, 170, 255, 0.8);
padding: 0 30upx;
>.flex-row {
display: flex;
flex-direction: row;
......@@ -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>
\ No newline at end of file
pages/orderRecord/orderRecord.vue
......@@ -10,7 +10,7 @@
</scroll-view>
<view class="content-box">
<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">
<text class="text-title text-bold text-xl">一帆风顺(111)</text>
<text class="text-pink">待使用</text>
......@@ -115,6 +115,11 @@
tabSelect(e) {
console.log(e, 99999)
this.statusIndex = e.currentTarget.dataset.id;
},
onNavToOrderInfo(val){
uni.navigateTo({
url:"/pages/orderResult/orderResult?id="+val.id
})
}
}
}
......
pages/orderResult/orderResult.vue
<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>
</template>
<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 {
components:{
fNavbar
},
data() {
return {
orderNo:''
orderId:'',
orderInfo:{},
};
},
onLoad(option) {
this.orderNo = option.orderNo
console.log(option,909090)
this.orderId = option.id;
this.onLoading();
},
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")
}
})
},
onNavToShare(){
uni.navigateTo({
url:"/pages/share/share?orderId="+this.orderId
})
}
}
}
</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>
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