Skip to content

G
gxpt_wechat
Commit 415937b5 by zhangzhen
Options

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

parent 56eee374
Showing with 468 additions and 11 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/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