422 lines
12 KiB
Vue
422 lines
12 KiB
Vue
<template><page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
||
<view class="page">
|
||
<h3 v-if="detailData.orderState==1">已下单</h3>
|
||
<h3 v-if="detailData.orderState==2">已完成</h3>
|
||
<h3 v-if="detailData.orderState==3&&detailData.payState==3">已退单</h3>
|
||
<h3 v-if="detailData.orderState==3&&detailData.payState==5">已取消</h3>
|
||
<h3 v-if="detailData.orderState==4&&detailData.payState==1">未支付</h3>
|
||
<h3 v-if="detailData.orderState==4&&detailData.payState==3">待下单</h3>
|
||
<h3 v-if="detailData.orderState==4&&detailData.payState==4">支付失败</h3>
|
||
|
||
|
||
<view class="appraise">
|
||
<view>您对本单满意吗?</view>
|
||
<view class="refund-btn" @click="refundOrder" v-if="detailData.orderState==1&&(detailData.canteenId=='378928463446282240')">
|
||
退单
|
||
</view>
|
||
<!-- <view class="refund-btn" @click="refundOrder" v-if="detailData.payState==4&&detailData.orderState==4">
|
||
申请退款
|
||
</view> -->
|
||
<view class="flex appraise-right" @click="goEvaluate" v-if="detailData.orderState==2&&detailData.commentState==2">
|
||
去评价
|
||
<u-icon name="arrow-right" size="12" />
|
||
</view>
|
||
</view>
|
||
<view class="cont">
|
||
<view class="top-source m-8" style="display: flex;align-items: center;justify-content: space-between;">
|
||
<view style="font-size: 28rpx;">
|
||
订单类型: {{detailData.orderTypeStr}}
|
||
</view>
|
||
<view style="color: rgba(15, 39, 75, 0.8);font-weight: 400;font-size: 26rpx;">就餐日期: {{ detailData.orderDate }}</view>
|
||
</view>
|
||
<view class="flex m-8">
|
||
<view class="flex align-center justify-between" style="width: 100%;font-weight: 600;">
|
||
<view style="color: #0f274b;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;max-width: 80%;">{{ detailData.canteenName }}/{{detailData.stallName}}</view>
|
||
<view class="tag">{{ detailData.mealtimeName }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="img-cont m-8">
|
||
<view class="img-list m-8" v-for="(item, index) in detailData.orderDetailList" :key="index">
|
||
<view style="width: 100%;display: flex;justify-content: space-between;">
|
||
<view style="width: 24%;">
|
||
<u-image :src="item.goodsDishesImgUrl" width="100%" height="80px" />
|
||
</view>
|
||
<view style="width: 74%;display: flex;flex-direction: column;justify-content: space-between;padding: 10rpx;font-size: 24rpx;">
|
||
<view style="display: flex;justify-content: space-between;">
|
||
<view style="font-weight: 600;font-size: 28rpx;">{{ item.goodsDishesName }}</view>
|
||
<!-- <view style="color: red;" v-if="item.refundAmount>0">￥{{ (Number(item.salePrice/100)*item.quantity).toFixed(2) }}</view> -->
|
||
<view style="font-size: 28rpx;">￥{{ (Number(item.salePrice/100)*item.quantity).toFixed(2) }}</view>
|
||
</view>
|
||
<view style="display: flex;justify-content: space-between;">
|
||
<view style="font-size: 28rpx;">x{{ item.quantity }}</view>
|
||
<view style="color: red;" v-if="item.refundAmount>0">已退款￥{{ (item.refundAmount/100).toFixed(2) }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex justify-between m-8 bt fs26">
|
||
订单金额
|
||
<view style="font-weight: 600;">￥{{ (detailData.realAmount/100).toFixed(2) }}</view>
|
||
</view>
|
||
<view class="flex justify-between m-8 bt fs26">
|
||
配送费
|
||
<view style="font-weight: 600;">{{ detailData.deliveryAmount>0? "￥"+(detailData.deliveryAmount/100).toFixed(2):"免配送费" }}</view>
|
||
</view>
|
||
<view class="flex justify-between m-8 bt fs26">
|
||
包装费
|
||
<view style="font-weight: 600;">{{ detailData.packingAmount>0? "￥"+(detailData.packingAmount/100).toFixed(2):"免包装费" }}</view>
|
||
</view>
|
||
<view class="flex justify-between m-8 bt fs26">
|
||
餐券金额
|
||
<view style="color: red;font-weight: 600;">-￥{{ (detailData.couponAmount/100).toFixed(2) }}</view>
|
||
</view>
|
||
<view class="flex justify-between m-8 bt fs26">
|
||
优惠金额
|
||
<view style="color: red;font-weight: 600;">-￥{{ (detailData.discountsAmount/100).toFixed(2) }}</view>
|
||
</view>
|
||
|
||
<view class="flex justify-between m-8 bt fs26" v-if="detailData.refundAmount>0">
|
||
退款金额
|
||
<view style="font-weight: 600;">￥{{ (detailData.refundAmount/100).toFixed(2) }}</view>
|
||
</view>
|
||
|
||
<u-line />
|
||
<view class="flex justify-between m-8 realAmount">
|
||
实付金额
|
||
<view>￥{{ (detailData.realAmount/100).toFixed(2) }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order">
|
||
<view class="flex justify-between m-8 bt fs26" style="align-items: center;">
|
||
配送方式
|
||
<view>{{ detailData.consigneeAddress ||'-'}}</view>
|
||
</view>
|
||
<view class="flex justify-between m-8 fs26" style="align-items: center;">
|
||
备注
|
||
<view>{{ detailData.remark ||'-'}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order">
|
||
<view class="m-8 fs26">订单二维码</view>
|
||
<view class="qrcode">
|
||
<canvas id="qrcode" canvas-id="qrcode" style="width: 175px; height: 175px"/>
|
||
</view>
|
||
<template >
|
||
</template>
|
||
<view class="flex justify-center fs26" style="font-size: 28rpx;">流水号: {{ detailData.mealCode }}</view>
|
||
<u-line style="margin: 20px 0;" />
|
||
<view class="flex justify-between m-8 bt fs26">
|
||
取餐码
|
||
<view>{{ '-' }}</view>
|
||
</view>
|
||
<view class="flex justify-between m-8 bt ">
|
||
订单编号
|
||
<view>{{ detailData.orderId }}</view>
|
||
</view>
|
||
<view class="flex justify-between m-8 bt fs26">
|
||
创建时间
|
||
<view>{{ detailData.orderTime }}</view>
|
||
</view>
|
||
<view class="flex justify-between m-8 bt fs26">
|
||
支付时间
|
||
<view>{{ detailData.payTime }}</view>
|
||
</view>
|
||
<view class="flex justify-between m-8 fs26">
|
||
支付方式
|
||
<view>{{ detailData.payTypeStr }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uqrCode from '@/utils/uqrcode'
|
||
import { getOrderInfoAPI,getOrderPayTypeListAPI,getOrderSourceTypeListAPI,refundOrderApi } from '../../api/order/index'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
fontValue:uni.getStorageSync('fontSize') || 8,
|
||
orderId:"",
|
||
payTypeList:[],//支付类型
|
||
sourceTypeList:[],//订单来源
|
||
typeList:[
|
||
{id:"1",name:'当餐点餐'},{id:"2",name:'预订餐'},{id:"3",name:'自定义报餐'},{id:"4",name:'商城'},{id:"5",name:'预订商城'},{id:"6",name:'包间'},
|
||
{id:"7",name:'餐桌'},{id:"8",name:'班车'},{id:"9",name:'3天报餐'},{id:"10",name:'7天报餐'},{id:"11",name:'线下消费'},{id:"12",name:'自助餐'},
|
||
{id:"13",name:'到店扫码'},{id:"14",name:'到店扫码'},{id:"15",name:'美团外卖'},{id:"16",name:'美团到店'},{id:"21",name:'补扣'},{id:"22",name:'外部订单'},{id:"99",name:'其他'}
|
||
],
|
||
// 详情页数据
|
||
detailData: {
|
||
sourceType:0,
|
||
|
||
// 订单状态
|
||
orderState: '订单已完成',
|
||
// 订单来源
|
||
orderSource: '设备下线消费',
|
||
// 餐厅名称
|
||
canteenName: '宏远工业园/本周菜谱',
|
||
// 餐次
|
||
intervalName: '午餐',
|
||
// 就餐时间
|
||
diningTime: '2024-08-12',
|
||
// 菜品
|
||
dishes: [
|
||
{
|
||
name: '苹果',
|
||
imgUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
||
price: 10,
|
||
num: 1
|
||
},
|
||
{
|
||
name: '香蕉',
|
||
imgUrl: 'https://img.yzcdn.cn/vant/banana.jpg',
|
||
price: 5,
|
||
num: 2
|
||
},
|
||
{
|
||
name: '橘子',
|
||
imgUrl: 'https://img.yzcdn.cn/vant/orange.jpg',
|
||
price: 8,
|
||
num: 1
|
||
}
|
||
],
|
||
// 配送费
|
||
deliveryFee: '免配送费',
|
||
// 包装费
|
||
packingFee: '免包装费',
|
||
// 餐券金额
|
||
mealTicketAmount: '27',
|
||
// 优惠金额
|
||
discountAmount: '0.7',
|
||
// 实付金额
|
||
realAmount: '9.3',
|
||
// 订单二维码
|
||
qrCode: '',
|
||
// 流水号
|
||
serialNumber: '361',
|
||
// 订单号
|
||
orderNumber: '397944984700981249',
|
||
// 创建时间
|
||
createTime: '2025-01-05 06:57:08',
|
||
// 支付时间
|
||
payTime: '2025-01-03 22:56:23',
|
||
// 支付方式
|
||
payType: '小程序二维码支付'
|
||
}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
options = JSON.parse(options.params)
|
||
console.log(options)
|
||
this.orderId = options.orderId;
|
||
this.getPayTypeList()
|
||
// this.getSourceTypeList()
|
||
this.getOrderDetail()
|
||
this.generate('1223321312')
|
||
},onShow() {
|
||
this.getOrderDetail()
|
||
},
|
||
methods: {
|
||
//退单
|
||
refundOrder() {
|
||
if(this.detailData.payState==3||this.detailData.payState==6){
|
||
let hours = new Date().getHours();//拿到当前小时
|
||
if(Number(hours)>13){
|
||
uni.showToast({
|
||
title: "14点以后无法退单！",
|
||
icon: 'none'
|
||
})
|
||
}else{
|
||
let param = {
|
||
"macOrderId": this.detailData.macOrderId,
|
||
"orderId": this.detailData.orderId,
|
||
"remark": ""
|
||
}
|
||
this.$modal.confirm('确定退单吗？').then(() => {
|
||
refundOrderApi(param).then((res) => {
|
||
console.log(res)
|
||
if(res.code==200){
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: 'none'
|
||
})
|
||
setTimeout(()=>{
|
||
this.getOrderDetail()
|
||
},500)
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
})
|
||
}
|
||
}
|
||
},
|
||
//评价按钮
|
||
goEvaluate() {
|
||
console.log('跳转订单详情', this.detailData)
|
||
uni.navigateTo({
|
||
url: `/pages/work/evaluate?params=${JSON.stringify(this.detailData)}`
|
||
})
|
||
},
|
||
async getPayTypeList() {
|
||
try {
|
||
const res = await getOrderPayTypeListAPI({})
|
||
// console.log('?? ~ getList ~ res:', res)
|
||
this.payTypeList=res
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
},
|
||
async getSourceTypeList() {
|
||
try {
|
||
const res = await getOrderSourceTypeListAPI({})
|
||
// console.log('?? ~ getList ~ res:', res)
|
||
this.sourceTypeList=res
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
},
|
||
async getOrderDetail() {
|
||
try {
|
||
let param = {
|
||
"orderId":this.orderId
|
||
}
|
||
const res = await getOrderInfoAPI(param)
|
||
console.log('?? ~ getList ~ res:', res)
|
||
this.detailData = res.data;
|
||
let str = `xnzn{"s":1,"y":2,"p":"${res.data.orderId}","t":${new Date().getTime()}}`
|
||
this.generate(str)
|
||
this.payTypeList.forEach((item=>{
|
||
if(item.key==this.detailData.payType){
|
||
this.detailData.payTypeStr = item.value
|
||
}
|
||
}))
|
||
this.typeList.forEach((item=>{
|
||
if(item.id==this.detailData.orderType){
|
||
this.detailData.orderTypeStr = item.name
|
||
}
|
||
}))
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
},
|
||
// 生成二维码
|
||
generate(e) {
|
||
console.log('?? ~ generate ~ e:', e)
|
||
uqrCode.make({
|
||
canvasId: 'qrcode',
|
||
componentInstance: this,
|
||
text: e, // 想生成二维码到内容
|
||
size: 175,
|
||
margin: 0,
|
||
backgroundColor: '#ffffff',
|
||
foregroundColor: '#000000',
|
||
fileType: 'jpg',
|
||
errorCorrectLevel: uqrCode.errorCorrectLevel.H,
|
||
success: res => {
|
||
// this.imgCode = res // base64的图片格式
|
||
// console.log('?? ~ generate ~ res:', res)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
background: #f9fbff;
|
||
padding: 16px;
|
||
height: 95vh;
|
||
overflow-y: auto;
|
||
color: #0f274b;
|
||
}
|
||
.appraise {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
margin: 8px 0 20px;
|
||
.appraise-right {
|
||
color: #ff6816;
|
||
}
|
||
|
||
.refund-btn{
|
||
width: 100rpx;
|
||
height: 40rpx;
|
||
text-align: center;
|
||
line-height: 40rpx;
|
||
border-radius: 8rpx;
|
||
background: #ff6816;
|
||
color: #FFF;
|
||
}
|
||
}
|
||
.m-8 {
|
||
margin: 0 8px;
|
||
}
|
||
.bt {
|
||
margin-bottom: 16px;
|
||
}
|
||
.fs26{
|
||
font-size: 26rpx;
|
||
}
|
||
.cont {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 8px 0;
|
||
font-size: 26rpx;
|
||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||
.top-source {
|
||
font-weight: 800;
|
||
margin-bottom: 12px;
|
||
}
|
||
.tag {
|
||
margin-left: 5px;
|
||
width: 52px;
|
||
border-radius: 1px 1px 1px 1px;
|
||
border: 1px solid #ff6816;
|
||
color: #ff6816;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.img-cont {
|
||
margin: 20px 0;
|
||
.img-list {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
.name-num {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
.realAmount {
|
||
margin-top: 16px;
|
||
font-size: 32rpx;
|
||
font-weight: 800;
|
||
}
|
||
}
|
||
.order {
|
||
margin-top: 16px;
|
||
padding: 8px 0;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
font-size: 26rpx;
|
||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||
.qrcode{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 28px 0 12px;
|
||
}
|
||
}
|
||
</style>
|