|
|
|
@ -9,12 +9,17 @@ |
|
|
|
<view class="code-card"> |
|
|
|
<!-- 二维码 --> |
|
|
|
<view class="qr-code-container"> |
|
|
|
<canvas canvas-id="qrcode" class="qr-code"></canvas> |
|
|
|
<img :src="goodsInfo.orderVerification.qrCodeUrl" class="qr-code" /> |
|
|
|
<!-- <canvas canvas-id="qrcode" class="qr-code"></canvas> --> |
|
|
|
</view> |
|
|
|
<!-- 兑换码 --> |
|
|
|
<view class="exchange-code"> |
|
|
|
<text class="code-label">兑换码</text> |
|
|
|
<text class="code-value">{{ exchangeCode }}</text> |
|
|
|
<text class="code-value">{{ |
|
|
|
(goodsInfo.orderVerification && |
|
|
|
goodsInfo.orderVerification.verifyCode) || |
|
|
|
"" |
|
|
|
}}</text> |
|
|
|
<view class="copy-btn" @click="copyCode"> |
|
|
|
<uni-icons type="copy" size="16" color="#667eea" /> |
|
|
|
<text>复制</text> |
|
|
|
@ -23,42 +28,50 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 预约信息 --> |
|
|
|
<view class="reservation-section" v-if="goodsInfo.reservationTime"> |
|
|
|
<view class="section-title"> |
|
|
|
<text>预约信息</text> |
|
|
|
</view> |
|
|
|
<view class="reservation-card"> |
|
|
|
<view class="reservation-item"> |
|
|
|
<text class="reservation-label">预约核销日期</text> |
|
|
|
<text class="reservation-value">{{ |
|
|
|
goodsInfo.reservationTime |
|
|
|
}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 商品信息 --> |
|
|
|
<view class="goods-section"> |
|
|
|
<view class="section-title"> |
|
|
|
<text>商品信息</text> |
|
|
|
</view> |
|
|
|
<view class="goods-card"> |
|
|
|
<image class="goods-image" :src="goodsInfo.image" mode="aspectFill" /> |
|
|
|
<image |
|
|
|
class="goods-image" |
|
|
|
:src="goodsInfo.goodsImage.split(',')[0]" |
|
|
|
mode="aspectFill" |
|
|
|
/> |
|
|
|
<view class="goods-info"> |
|
|
|
<text class="goods-name">{{ goodsInfo.goodsName || "--" }}</text> |
|
|
|
<view class="specs-info"> |
|
|
|
<view |
|
|
|
class="spec-item" |
|
|
|
v-for="(spec, index) in selectedSpecs" |
|
|
|
v-for="(spec, index) in goodsInfo.orderReservationDetails" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<text class="spec-label">第{{ index + 1 }}份规格：</text> |
|
|
|
<text class="spec-value">{{ spec.selectedSpec }}</text> |
|
|
|
<text class="spec-value" |
|
|
|
>{{ spec.specValueOne }}/{{ spec.specValueTwo }}</text |
|
|
|
> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 预约信息 --> |
|
|
|
<view class="reservation-section" v-if="selectedDate"> |
|
|
|
<view class="section-title"> |
|
|
|
<text>预约信息</text> |
|
|
|
</view> |
|
|
|
<view class="reservation-card"> |
|
|
|
<view class="reservation-item"> |
|
|
|
<text class="reservation-label">预约日期</text> |
|
|
|
<text class="reservation-value">{{ selectedDate }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 使用说明 --> |
|
|
|
<view class="instruction-section"> |
|
|
|
<view class="section-title"> |
|
|
|
@ -66,15 +79,25 @@ |
|
|
|
</view> |
|
|
|
<view class="instruction-card"> |
|
|
|
<view class="instruction-item"> |
|
|
|
<text class="instruction-text">1. 请在预约时间内到店核销</text> |
|
|
|
<text class="instruction-text" |
|
|
|
>1. |
|
|
|
<text class="expiry-highlight" |
|
|
|
>有效期至{{ |
|
|
|
goodsInfo.expireTime || "" |
|
|
|
}}，到期后将自动退款至原支付账户</text |
|
|
|
></text |
|
|
|
> |
|
|
|
</view> |
|
|
|
<view class="instruction-item"> |
|
|
|
<text class="instruction-text">2. 请在预约时间内到店核销</text> |
|
|
|
</view> |
|
|
|
<view class="instruction-item"> |
|
|
|
<text class="instruction-text" |
|
|
|
>2. 出示此页面或提供兑换码给工作人员</text |
|
|
|
>3. 出示此页面或提供兑换码给工作人员</text |
|
|
|
> |
|
|
|
</view> |
|
|
|
<view class="instruction-item"> |
|
|
|
<text class="instruction-text">3. 核销后商品不可退换</text> |
|
|
|
<text class="instruction-text">4. 核销后商品不可退换</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -95,40 +118,20 @@ import QRCode from "@/static/js/weapp-qrcode.js"; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
orderId: "WO202412250001", |
|
|
|
exchangeCode: "EX8A9B2C3D", |
|
|
|
goodsInfo: { |
|
|
|
name: "精品咖啡体验券", |
|
|
|
image: "https://via.placeholder.com/300x200/4A90E2/FFFFFF?text=Coffee", |
|
|
|
description: "享受一杯精心调制的手冲咖啡，感受咖啡豆的独特香气", |
|
|
|
}, |
|
|
|
selectedSpecs: { |
|
|
|
size: "大杯", |
|
|
|
type: "美式咖啡", |
|
|
|
temperature: "热饮", |
|
|
|
}, |
|
|
|
reservationDate: "2024-12-28 14:30", |
|
|
|
orderId: "", |
|
|
|
goodsInfo: {}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
onLoad(options) { |
|
|
|
// 接收页面参数 |
|
|
|
if (options.orderId) { |
|
|
|
this.orderId = options.orderId; |
|
|
|
this.generateExchangeCode(); |
|
|
|
} |
|
|
|
if (options.goodsInfo) { |
|
|
|
this.goodsInfo = JSON.parse(decodeURIComponent(options.goodsInfo)); |
|
|
|
} |
|
|
|
if (options.specifications) { |
|
|
|
this.selectedSpecs = JSON.parse( |
|
|
|
decodeURIComponent(options.specifications) |
|
|
|
); |
|
|
|
} |
|
|
|
if (options.selectedDate) { |
|
|
|
this.selectedDate = options.selectedDate; |
|
|
|
if (options.orderChildId) { |
|
|
|
this.orderChildId = options.orderChildId; |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
this.generateExchangeCode(); |
|
|
|
}, |
|
|
|
|
|
|
|
onReady() { |
|
|
|
// 生成二维码 |
|
|
|
@ -136,22 +139,25 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
// 生成兑换码 |
|
|
|
generateExchangeCode() { |
|
|
|
// 生成8位随机兑换码 |
|
|
|
const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; |
|
|
|
let code = ""; |
|
|
|
for (let i = 0; i < 8; i++) { |
|
|
|
code += chars.charAt(Math.floor(Math.random() * chars.length)); |
|
|
|
} |
|
|
|
this.exchangeCode = code; |
|
|
|
this.Post( |
|
|
|
{ |
|
|
|
orderChildId: this.orderChildId, |
|
|
|
}, |
|
|
|
"/framework/orderReservation/getCanByOrderChildId", |
|
|
|
"DES" |
|
|
|
).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.goodsInfo = res.data; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 生成二维码 |
|
|
|
generateQRCode() { |
|
|
|
const qrData = JSON.stringify({ |
|
|
|
orderId: this.orderId, |
|
|
|
exchangeCode: this.exchangeCode, |
|
|
|
exchangeCode: this.goodsInfo.exchangeCode, |
|
|
|
type: "writeOff", |
|
|
|
}); |
|
|
|
|
|
|
|
@ -171,7 +177,7 @@ export default { |
|
|
|
// 复制兑换码 |
|
|
|
copyCode() { |
|
|
|
uni.setClipboardData({ |
|
|
|
data: this.exchangeCode, |
|
|
|
data: this.goodsInfo.orderVerification.verifyCode, |
|
|
|
success: () => { |
|
|
|
uni.showToast({ |
|
|
|
title: "兑换码已复制", |
|
|
|
@ -202,9 +208,9 @@ export default { |
|
|
|
|
|
|
|
this.Post( |
|
|
|
{ |
|
|
|
orderId: this.orderId, |
|
|
|
orderChildId: this.orderChildId, |
|
|
|
}, |
|
|
|
"/framework/order/cancel", |
|
|
|
"/framework/orderReservation/cancel", |
|
|
|
"DES" |
|
|
|
) |
|
|
|
.then((res) => { |
|
|
|
@ -215,10 +221,8 @@ export default { |
|
|
|
icon: "success", |
|
|
|
}); |
|
|
|
setTimeout(() => { |
|
|
|
uni.redirectTo({ |
|
|
|
url: "/subPackages/orderQy/list", |
|
|
|
}); |
|
|
|
}, 1500); |
|
|
|
uni.navigateBack(); |
|
|
|
}, 800); |
|
|
|
} else { |
|
|
|
uni.showToast({ |
|
|
|
title: res.msg || "取消失败", |
|
|
|
@ -261,6 +265,7 @@ $bg-light: #f7fafc; |
|
|
|
.content-scroll { |
|
|
|
flex: 1; |
|
|
|
padding: 20rpx; |
|
|
|
width: 710rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.section-title { |
|
|
|
@ -292,8 +297,8 @@ $bg-light: #f7fafc; |
|
|
|
} |
|
|
|
|
|
|
|
.qr-code { |
|
|
|
width: 200rpx; |
|
|
|
height: 200rpx; |
|
|
|
width: 250rpx; |
|
|
|
height: 250rpx; |
|
|
|
border: 2rpx solid $border-color; |
|
|
|
border-radius: 8rpx; |
|
|
|
} |
|
|
|
@ -412,6 +417,11 @@ $bg-light: #f7fafc; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 8rpx 0; |
|
|
|
|
|
|
|
&:not(:last-child) { |
|
|
|
border-bottom: 1rpx solid $border-color; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.reservation-label { |
|
|
|
@ -451,8 +461,15 @@ $bg-light: #f7fafc; |
|
|
|
line-height: 1.5; |
|
|
|
} |
|
|
|
|
|
|
|
.expiry-highlight { |
|
|
|
color: #ff6b35; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-space { |
|
|
|
height: 120rpx; |
|
|
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); |
|
|
|
box-sizing: content-box; |
|
|
|
} |
|
|
|
|
|
|
|
// 底部操作区域 |
|
|
|
|
1054425342@qq.com
2 months ago