feat: 怀化石油汽油券购买前端——门店页购券模块+确认订单/券详情两页，接 hhService/voucher 接口与云闪付控件
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jacobxu666
co-authored by
Claude Fable 5
Claude Fable 5
parent
966eac566c
commit
571afb0673
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="nav-bar">
|
||||
<view class="nav-back" @click="goBack">
|
||||
<u-icon name="arrow-left" color="#1a1818" size="40"></u-icon>
|
||||
</view>
|
||||
<text class="nav-title">确认订单</text>
|
||||
</view>
|
||||
|
||||
<!-- 券面 -->
|
||||
<view class="ticket">
|
||||
<view class="ticket-amt">满200减8 <text class="ticket-amt-sub">汽油电子券</text></view>
|
||||
<view class="ticket-dsc">{{ voucherName }} ｜ 收银台扫码核销</view>
|
||||
<text class="ticket-wm">90天</text>
|
||||
</view>
|
||||
|
||||
<!-- 订单要素 -->
|
||||
<view class="card">
|
||||
<view class="kv"><text class="k">券名称</text><text class="v">{{ voucherName }}</text></view>
|
||||
<view class="kv"><text class="k">使用规则</text><text class="v">{{ voucherRule }} ｜ 单日限用 1 张</text></view>
|
||||
<view class="kv"><text class="k">有效期</text><text class="v">购买日起 90 天</text></view>
|
||||
<view class="kv"><text class="k">购买数量</text><text class="v">1 张</text></view>
|
||||
<view class="kv"><text class="k">售价</text><text class="v">¥{{ priceText }}</text></view>
|
||||
<view class="kv"><text class="k">购买账户</text><text class="v">{{ maskedPhone }}</text></view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="card">
|
||||
<view class="card-title">支付方式</view>
|
||||
<view class="payrow">
|
||||
<image class="pay-logo" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_ysf_logo.png" mode="aspectFit" />
|
||||
<text class="pay-name">云闪付 App 安全支付</text>
|
||||
<view class="pay-radio"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="foot-note">券数量有限，售完即止；兑换后不可退换。</view>
|
||||
|
||||
<view class="footbar">
|
||||
<view class="foot-price"><text class="foot-price-label">合计 </text>¥{{ priceText }}</view>
|
||||
<view class="foot-btn" :class="{ disabled: submitting }" @click="onConfirmPay">{{ submitting ? '支付中…' : '确认支付' }}</view>
|
||||
</view>
|
||||
|
||||
<!-- xuchao: 非云闪付环境拦截弹窗，必须点「我知道了」关闭（决策 11） -->
|
||||
<view class="modal-mask" v-if="guideModal" @click.stop>
|
||||
<view class="modal-box">
|
||||
<view class="modal-text">{{ guideText }}</view>
|
||||
<view class="modal-ok" @click="guideModal = false">我知道了</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
VOUCHER_NAME, VOUCHER_RULE, VOUCHER_PRICE_TEXT, VOUCHER_GUIDE_TEXT,
|
||||
VOUCHER_PAY_WHITELIST_PHONE, isUnionPayApp, bizOk, bizMsg, bizData
|
||||
} from '@/common/petrolVoucher.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
orderNo: '',
|
||||
submitting: false,
|
||||
guideModal: false,
|
||||
guideText: VOUCHER_GUIDE_TEXT,
|
||||
voucherName: VOUCHER_NAME,
|
||||
voucherRule: VOUCHER_RULE,
|
||||
priceText: VOUCHER_PRICE_TEXT
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
maskedPhone() {
|
||||
if (!this.phone || this.phone.length !== 11) return this.phone || ''
|
||||
return this.phone.slice(0, 3) + '****' + this.phone.slice(7)
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.phone = uni.getStorageSync('phone') || ''
|
||||
if (!this.phone) {
|
||||
// xuchao: 未登录先看登录，回跳本流程从门店页重新进入（决策 15）
|
||||
uni.redirectTo({ url: '/pages/index/login?redirect=' + encodeURIComponent('/pages/venue/detail?id=851219003520709&type=2') })
|
||||
return
|
||||
}
|
||||
if (options.orderNo) this.orderNo = options.orderNo
|
||||
},
|
||||
methods: {
|
||||
onConfirmPay() {
|
||||
if (this.submitting) return
|
||||
// xuchao: 容器拦截——非云闪付且非联调白名单号，弹窗不发起支付（决策 11/13）
|
||||
if (!isUnionPayApp() && this.phone !== VOUCHER_PAY_WHITELIST_PHONE) {
|
||||
this.guideModal = true
|
||||
return
|
||||
}
|
||||
this.submitting = true
|
||||
this.doPay()
|
||||
},
|
||||
doPay() {
|
||||
const step = this.orderNo
|
||||
? Promise.resolve({ orderNo: this.orderNo })
|
||||
: this.$u.api.voucherCreate({ phone: this.phone }).then(res => {
|
||||
if (!bizOk(res)) throw new Error(bizMsg(res) || '下单失败')
|
||||
return bizData(res)
|
||||
})
|
||||
step.then(d => {
|
||||
this.orderNo = d.orderNo
|
||||
return this.$u.api.voucherPrepay({ orderNo: this.orderNo, phone: this.phone })
|
||||
}).then(res => {
|
||||
if (!bizOk(res)) throw new Error(bizMsg(res) || '发起支付失败')
|
||||
const pre = bizData(res)
|
||||
const tn = pre.extendMap && pre.extendMap.resData
|
||||
if (!tn) throw new Error('未获取到支付凭证')
|
||||
this.launchUnionPay(tn)
|
||||
}).catch(err => {
|
||||
this.submitting = false
|
||||
uni.showToast({ title: (err && err.message) || '操作失败，请稍后再试', icon: 'none' })
|
||||
})
|
||||
},
|
||||
// xuchao: 云闪付控件唤起，交互与湘工惠商城一致（xghmall ordersure.vue:195-229 同型）
|
||||
launchUnionPay(tn) {
|
||||
if (typeof window === 'undefined' || !window.upsdk) {
|
||||
this.submitting = false
|
||||
uni.showToast({ title: '支付组件未就绪，请在云闪付内重进页面', icon: 'none' })
|
||||
return
|
||||
}
|
||||
const orderNo = this.orderNo
|
||||
window.upsdk.pluginReady(() => {
|
||||
window.upsdk.pay({
|
||||
tn: tn,
|
||||
success: () => {
|
||||
uni.redirectTo({ url: '/pages/petrol/voucherDetail?orderNo=' + orderNo })
|
||||
},
|
||||
fail: () => {
|
||||
this.submitting = false
|
||||
uni.showToast({ title: '支付未完成，可在门店页继续支付', icon: 'none' })
|
||||
}
|
||||
})
|
||||
})
|
||||
// 控件无异步结果时兜底：3 秒后恢复按钮（支付成功路径以回跳/轮询为准）
|
||||
setTimeout(() => { this.submitting = false }, 3000)
|
||||
},
|
||||
goBack() {
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page { min-height: 100vh; background-color: #f2f2f7; padding-bottom: 80px; }
|
||||
|
||||
.nav-bar { display: flex; align-items: center; height: 56px; background-color: #ffffff; border-bottom: 1px solid #f0f0f0; position: relative; }
|
||||
.nav-back { position: absolute; left: 12px; top: 0; bottom: 0; display: flex; align-items: center; }
|
||||
.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1818; padding: 0 56px; }
|
||||
|
||||
.ticket { position: relative; overflow: hidden; background: linear-gradient(135deg, #0d6fe0, #2f9bff); border-radius: 8px; margin: 12px; padding: 16px; color: #ffffff; }
|
||||
.ticket-amt { font-size: 26px; font-weight: 700; }
|
||||
.ticket-amt-sub { font-size: 13px; font-weight: 400; opacity: 0.9; margin-left: 4px; }
|
||||
.ticket-dsc { font-size: 12px; opacity: 0.9; margin-top: 6px; }
|
||||
.ticket-wm { position: absolute; right: 4px; bottom: -14px; font-size: 60px; font-weight: 800; opacity: 0.1; }
|
||||
|
||||
.card { background-color: #ffffff; border-radius: 8px; margin: 12px; padding: 4px 16px 8px; }
|
||||
.card-title { font-size: 15px; font-weight: 600; color: #1a1818; padding: 12px 0 4px; }
|
||||
.kv { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 11px 0; border-bottom: 1px solid #f2f2f7; }
|
||||
.kv:last-child { border-bottom: none; }
|
||||
.k { color: #999999; flex-shrink: 0; margin-right: 12px; }
|
||||
.v { color: #1a1818; text-align: right; word-break: break-all; }
|
||||
|
||||
.payrow { display: flex; align-items: center; padding: 6px 0 12px; }
|
||||
.pay-logo { width: 26px; height: 26px; border-radius: 5px; margin-right: 10px; flex-shrink: 0; }
|
||||
.pay-name { flex: 1; font-size: 14px; color: #1a1818; }
|
||||
.pay-radio { width: 18px; height: 18px; border-radius: 50%; background-color: #0088ff; position: relative; }
|
||||
.pay-radio::after { content: ''; position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background-color: #ffffff; }
|
||||
|
||||
.foot-note { font-size: 12px; color: #999999; margin: 4px 16px; line-height: 1.6; }
|
||||
|
||||
.footbar { position: fixed; left: 0; right: 0; bottom: 0; height: 64px; background-color: #ffffff; border-top: 1px solid #f0f0f0; display: flex; align-items: center; padding: 0 16px; z-index: 5; }
|
||||
.foot-price { font-size: 20px; font-weight: 600; color: #ff4d4f; }
|
||||
.foot-price-label { font-size: 12px; font-weight: 400; color: #666666; }
|
||||
.foot-btn { flex: 1; margin-left: 14px; height: 44px; border-radius: 8px; background-color: #0088ff; color: #ffffff; font-size: 16px; display: flex; align-items: center; justify-content: center; }
|
||||
.foot-btn.disabled { background-color: #c8cdd4; }
|
||||
|
||||
.modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 99; }
|
||||
.modal-box { width: 300px; background-color: #ffffff; border-radius: 12px; overflow: hidden; }
|
||||
.modal-text { padding: 24px 20px 20px; font-size: 14px; color: #1a1818; line-height: 1.7; text-align: center; }
|
||||
.modal-ok { height: 48px; border-top: 1px solid #f2f2f7; color: #0088ff; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
|
||||
</style>
|
||||
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="nav-bar">
|
||||
<view class="nav-back" @click="goBack">
|
||||
<u-icon name="arrow-left" color="#1a1818" size="40"></u-icon>
|
||||
</view>
|
||||
<text class="nav-title">券详情</text>
|
||||
</view>
|
||||
|
||||
<!-- 发券中（statusCode=1） -->
|
||||
<view class="issuing" v-if="status === 1">
|
||||
<view class="spinner"></view>
|
||||
<view class="issuing-t">支付成功，券发放中…</view>
|
||||
<view class="issuing-d">通常 10 秒内到账，请稍后刷新查看券码</view>
|
||||
<view class="btn-line" @click="refresh()">手动刷新</view>
|
||||
</view>
|
||||
|
||||
<!-- 已发券（statusCode=2）：二维码 + 订单信息 -->
|
||||
<block v-else-if="status === 2">
|
||||
<view class="qrbox">
|
||||
<view class="qr-badge">有效</view>
|
||||
<!-- 石油返回图片URL时直接展示 -->
|
||||
<image v-if="isQrImage" class="qr-img" :src="voucher.voucherCode" mode="widthFix" />
|
||||
<!-- 返回码字符串时用 qrcodejs 渲染 -->
|
||||
<view v-else id="petrol-qr" class="qr-canvas"></view>
|
||||
<view class="qr-tip">到店出示此二维码，收银员以“中石油汽油券”通道扫码核销</view>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="card-title">订单信息</view>
|
||||
<view class="kv"><text class="k">券名称</text><text class="v">{{ voucherName }}</text></view>
|
||||
<view class="kv"><text class="k">券规则</text><text class="v rule-hl">{{ voucherRule }} ｜ 无门槛</text></view>
|
||||
<view class="kv"><text class="k">有效期至</text><text class="v">{{ voucher.validUntil || '-' }}</text></view>
|
||||
<view class="kv"><text class="k">实付金额</text><text class="v">¥{{ amountText }}</text></view>
|
||||
<view class="kv"><text class="k">支付时间</text><text class="v">{{ fmtTime(voucher.payTime) }}</text></view>
|
||||
<view class="kv"><text class="k">订单号</text><text class="v">{{ voucher.orderNo }}</text></view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 待支付（0）：续付入口 -->
|
||||
<view class="state-card" v-else-if="status === 0">
|
||||
<view class="state-t">订单待支付</view>
|
||||
<view class="state-d">实付金额 ¥{{ amountText }}，订单将在下单 30 分钟后自动关闭</view>
|
||||
<view class="btn-main" @click="goConfirm">继续支付</view>
|
||||
</view>
|
||||
|
||||
<!-- 已退款（3/4） -->
|
||||
<view class="state-card" v-else-if="status === 3 || status === 4">
|
||||
<view class="state-t">{{ status === 4 ? '退款处理中' : '已退款' }}</view>
|
||||
<view class="state-d">很抱歉，本券发放失败，支付金额已原路退回{{ status === 4 ? '处理中，到账请稍后查询' : '' }}。如有疑问请致电客服。</view>
|
||||
<view class="btn-main" @click="goConfirm">重新购买</view>
|
||||
</view>
|
||||
|
||||
<!-- 已关闭（5） -->
|
||||
<view class="state-card" v-else-if="status === 5">
|
||||
<view class="state-t">订单已关闭</view>
|
||||
<view class="state-d">该待支付订单已超时关闭，可重新下单购买。</view>
|
||||
<view class="btn-main" @click="goConfirm">重新购买</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载中 / 无单 -->
|
||||
<view class="state-card" v-else>
|
||||
<view class="state-t">{{ status === null ? '加载中…' : '暂无券订单' }}</view>
|
||||
<view class="state-d" v-if="status === null">正在获取订单状态</view>
|
||||
<view class="state-d" v-else>您还没有购买汽油券，可返回门店页购买</view>
|
||||
<view class="btn-line" v-if="status !== null" @click="refresh()">刷新</view>
|
||||
</view>
|
||||
|
||||
<!-- 使用说明（有券或发券中都展示） -->
|
||||
<block v-if="status === 2 || status === 1">
|
||||
<view class="card">
|
||||
<view class="card-title">使用规则</view>
|
||||
<view class="ol-item" v-for="(t, i) in useRules" :key="'r' + i">{{ i + 1 }}、{{ t }}</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="card-title">使用流程</view>
|
||||
<view class="ol-item" v-for="(t, i) in useFlow" :key="'f' + i">{{ i + 1 }}、{{ t }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
VOUCHER_NAME, VOUCHER_RULE, VOUCHER_USE_RULES, VOUCHER_USE_FLOW,
|
||||
bizOk, bizMsg, bizData
|
||||
} from '@/common/petrolVoucher.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderNo: '',
|
||||
phone: '',
|
||||
voucher: {},
|
||||
status: null, // null=加载中；含义对齐后端 statusCode
|
||||
pollTimer: null,
|
||||
pollLeft: 3,
|
||||
voucherName: VOUCHER_NAME,
|
||||
voucherRule: VOUCHER_RULE,
|
||||
useRules: VOUCHER_USE_RULES,
|
||||
useFlow: VOUCHER_USE_FLOW
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
amountText() {
|
||||
const f = this.voucher.amount
|
||||
return f ? (f / 100).toFixed(2) : ''
|
||||
},
|
||||
isQrImage() {
|
||||
return typeof this.voucher.voucherCode === 'string' && /^https?:\/\//i.test(this.voucher.voucherCode)
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.phone = uni.getStorageSync('phone') || ''
|
||||
this.orderNo = options.orderNo || ''
|
||||
if (!this.phone) {
|
||||
uni.redirectTo({ url: '/pages/index/login?redirect=' + encodeURIComponent('/pages/petrol/voucherDetail?orderNo=' + this.orderNo) })
|
||||
return
|
||||
}
|
||||
this.refresh(true)
|
||||
},
|
||||
onUnload() {
|
||||
this.stopPoll()
|
||||
},
|
||||
methods: {
|
||||
refresh(first) {
|
||||
this.$u.api.voucherLatest({ phone: this.phone }).then(res => {
|
||||
if (!bizOk(res)) {
|
||||
uni.showToast({ title: bizMsg(res) || '查询失败', icon: 'none' })
|
||||
return
|
||||
}
|
||||
const d = bizData(res)
|
||||
if (!d || d.statusCode === undefined || d.statusCode === -1) {
|
||||
this.status = -1
|
||||
this.voucher = {}
|
||||
return
|
||||
}
|
||||
this.voucher = d
|
||||
this.status = d.statusCode
|
||||
if (this.status === 1) {
|
||||
// xuchao: 发券中轮询（支付回跳后 5 秒 ×3 次；手动刷新不限量）
|
||||
if (first && this.pollLeft > 0) this.startPoll()
|
||||
} else {
|
||||
this.stopPoll()
|
||||
}
|
||||
if (this.status === 2) this.$nextTick(() => this.renderQr())
|
||||
}).catch(() => {
|
||||
if (first) uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' })
|
||||
})
|
||||
},
|
||||
startPoll() {
|
||||
this.stopPoll()
|
||||
this.pollTimer = setInterval(() => {
|
||||
if (this.pollLeft <= 0) { this.stopPoll(); return }
|
||||
this.pollLeft -= 1
|
||||
this.refresh(false)
|
||||
}, 5000)
|
||||
},
|
||||
stopPoll() {
|
||||
if (this.pollTimer) { clearInterval(this.pollTimer); this.pollTimer = null }
|
||||
},
|
||||
// xuchao: 码字符串→二维码渲染；qrcode.min.js 为本地静态资源（static/js/），动态注入一次
|
||||
renderQr() {
|
||||
if (this.isQrImage) return
|
||||
const draw = () => {
|
||||
if (typeof document === 'undefined' || typeof window.QRCode === 'undefined') return
|
||||
const el = document.getElementById('petrol-qr')
|
||||
if (!el || el.hasChildNodes()) {
|
||||
if (el && this.voucher.voucherCode) { el.innerHTML = ''; } else { return }
|
||||
}
|
||||
// eslint-disable-next-line no-new
|
||||
new window.QRCode(el, {
|
||||
text: this.voucher.voucherCode,
|
||||
width: 200, height: 200, colorDark: '#1a1818', colorLight: '#ffffff',
|
||||
correctLevel: window.QRCode.CorrectLevel.H
|
||||
})
|
||||
}
|
||||
if (typeof window !== 'undefined' && window.QRCode) { draw(); return }
|
||||
if (typeof document === 'undefined') return
|
||||
const s = document.createElement('script')
|
||||
s.src = '/static/js/qrcode.min.js'
|
||||
s.onload = draw
|
||||
document.head.appendChild(s)
|
||||
},
|
||||
goConfirm() {
|
||||
uni.navigateTo({ url: '/pages/petrol/orderConfirm' + (this.status === 0 ? '?orderNo=' + this.voucher.orderNo : '') })
|
||||
},
|
||||
fmtTime(t) {
|
||||
if (!t) return '-'
|
||||
return String(t).replace('T', ' ').slice(0, 16)
|
||||
},
|
||||
goBack() {
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page { min-height: 100vh; background-color: #f2f2f7; padding-bottom: 24px; }
|
||||
|
||||
.nav-bar { display: flex; align-items: center; height: 56px; background-color: #ffffff; border-bottom: 1px solid #f0f0f0; position: relative; }
|
||||
.nav-back { position: absolute; left: 12px; top: 0; bottom: 0; display: flex; align-items: center; }
|
||||
.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1818; padding: 0 56px; }
|
||||
|
||||
.qrbox { position: relative; background-color: #ffffff; border-radius: 8px; margin: 12px; padding: 28px 20px 18px; text-align: center; }
|
||||
.qr-badge { position: absolute; top: 14px; left: 14px; font-size: 11px; color: #2BB879; border: 1px solid #b6e6cf; border-radius: 3px; padding: 2px 8px; background-color: #f2fbf7; }
|
||||
.qr-canvas { display: inline-block; }
|
||||
.qr-canvas img, .qr-canvas canvas { display: block; }
|
||||
.qr-img { width: 200px; }
|
||||
.qr-tip { font-size: 12px; color: #999999; margin-top: 12px; }
|
||||
|
||||
.card { background-color: #ffffff; border-radius: 8px; margin: 12px; padding: 4px 16px 12px; }
|
||||
.card-title { font-size: 15px; font-weight: 600; color: #1a1818; padding: 14px 0 2px; }
|
||||
.kv { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 11px 0; border-bottom: 1px solid #f2f2f7; }
|
||||
.kv:last-child { border-bottom: none; }
|
||||
.k { color: #999999; flex-shrink: 0; margin-right: 12px; }
|
||||
.v { color: #1a1818; text-align: right; word-break: break-all; }
|
||||
.rule-hl { color: #ff4d4f; font-weight: 600; }
|
||||
.ol-item { font-size: 13px; color: #666666; line-height: 1.8; }
|
||||
|
||||
.issuing { background-color: #ffffff; border-radius: 8px; margin: 12px; padding: 46px 20px 26px; text-align: center; }
|
||||
.spinner { width: 44px; height: 44px; border: 3px solid #dbe9ff; border-top-color: #0088ff; border-radius: 50%; margin: 0 auto 16px; animation: spin 1s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.issuing-t { font-size: 16px; color: #1a1818; font-weight: 600; margin-bottom: 6px; }
|
||||
.issuing-d { font-size: 12px; color: #999999; line-height: 1.7; margin-bottom: 18px; }
|
||||
|
||||
.state-card { background-color: #ffffff; border-radius: 8px; margin: 12px; padding: 30px 20px; text-align: center; }
|
||||
.state-t { font-size: 17px; font-weight: 600; color: #1a1818; margin-bottom: 8px; }
|
||||
.state-d { font-size: 13px; color: #999999; line-height: 1.7; margin-bottom: 20px; }
|
||||
|
||||
.btn-main { height: 44px; border-radius: 8px; background-color: #0088ff; color: #ffffff; font-size: 15px; display: flex; align-items: center; justify-content: center; }
|
||||
.btn-line { height: 42px; border-radius: 8px; border: 1px solid #0088ff; color: #0088ff; font-size: 15px; display: flex; align-items: center; justify-content: center; background-color: #ffffff; margin: 0 30px; }
|
||||
.issuing .btn-line { margin: 0; }
|
||||
</style>
|
||||
+93
-1
@@ -63,6 +63,21 @@
|
||||
<text class="discount-item" v-for="(item, index) in remarkList" :key="index">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- xuchao: 怀化石油汽油券购买模块（shopId 写死特判，只服务该门店，决策 1/10/15） -->
|
||||
<view class="voucher-card" v-if="isPetrol">
|
||||
<view class="section-title">
|
||||
<image src="https://aliyunoss.hn12301.net/hhrs/hhrs_qysm.png" style="width: 30rpx;height: 30rpx;"></image>
|
||||
<text class="discount-title">汽油电子券</text>
|
||||
</view>
|
||||
<view class="voucher-ticket">
|
||||
<view class="voucher-amt">满200减8 <text class="voucher-amt-sub">汽油电子券</text></view>
|
||||
<view class="voucher-rule">无门槛 ｜ 90 天有效 ｜ 单日限用 1 张 ｜ 可叠加</view>
|
||||
<text class="voucher-wm">90天</text>
|
||||
</view>
|
||||
<view class="voucher-tip">支付成功后券码即时展示；到店出示二维码，收银员以“中石油汽油券”通道扫码核销。券一经售出不支持退换。</view>
|
||||
<view class="voucher-btn" @click="onVoucherClick">{{ voucherBtnText }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- xuchao: 门店不存在或加载失败时的提示态，避免纯空白 -->
|
||||
<view class="page" v-else-if="loaded">
|
||||
@@ -80,12 +95,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PETROL_SHOP_ID, bizOk, bizData } from '@/common/petrolVoucher.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
store: null,
|
||||
loaded: false,
|
||||
detailType: '1'
|
||||
detailType: '1',
|
||||
shopId: '',
|
||||
voucher: null // xuchao: 石油券最新订单状态（statusCode 语义见 common/petrolVoucher.js）
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -93,6 +112,17 @@ export default {
|
||||
isVenue() {
|
||||
return this.detailType !== '2'
|
||||
},
|
||||
isPetrol() {
|
||||
return this.loaded && String(this.shopId) === PETROL_SHOP_ID && !this.isVenue
|
||||
},
|
||||
voucherBtnText() {
|
||||
const s = this.voucher ? this.voucher.statusCode : -1
|
||||
if (s === 0) return '继续支付'
|
||||
if (s === 1) return '查看我的券'
|
||||
if (s === 2) return '查看我的券'
|
||||
if (s === 3 || s === 4) return '重新购买'
|
||||
return '¥200 购买'
|
||||
},
|
||||
ticketInfoList() {
|
||||
if (!this.store || !this.store.ticketInfo) return []
|
||||
return this.store.ticketInfo.split('\n')
|
||||
@@ -130,10 +160,38 @@ export default {
|
||||
onLoad(options) {
|
||||
if (options.type) this.detailType = String(options.type)
|
||||
if (options.id) {
|
||||
this.shopId = String(options.id)
|
||||
this.loadDetail(options.id)
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// xuchao: 支付/购券流程返回时刷新券按钮状态
|
||||
if (String(this.shopId) === PETROL_SHOP_ID) this.loadVoucher()
|
||||
},
|
||||
methods: {
|
||||
// xuchao: 拉取石油券最新订单状态（未登录不查，按钮保持“¥200 购买”，点击时再引导登录）
|
||||
loadVoucher() {
|
||||
const phone = uni.getStorageSync('phone')
|
||||
if (!phone) { this.voucher = null; return }
|
||||
this.$u.api.voucherLatest({ phone }).then(res => {
|
||||
this.voucher = bizOk(res) ? bizData(res) : null
|
||||
}).catch(() => { this.voucher = null })
|
||||
},
|
||||
onVoucherClick() {
|
||||
const phone = uni.getStorageSync('phone')
|
||||
if (!phone) {
|
||||
uni.navigateTo({ url: '/pages/index/login?redirect=' + encodeURIComponent('/pages/venue/detail?id=' + this.shopId + '&type=' + this.detailType) })
|
||||
return
|
||||
}
|
||||
const s = this.voucher ? this.voucher.statusCode : -1
|
||||
if (s === 2 || s === 1) {
|
||||
uni.navigateTo({ url: '/pages/petrol/voucherDetail' })
|
||||
} else if (s === 0) {
|
||||
uni.navigateTo({ url: '/pages/petrol/orderConfirm?orderNo=' + this.voucher.orderNo })
|
||||
} else {
|
||||
uni.navigateTo({ url: '/pages/petrol/orderConfirm' })
|
||||
}
|
||||
},
|
||||
// xuchao: 点击某个商户电话唤起拨号（多个号码时逐个可点）
|
||||
callPhone(phone) {
|
||||
if (!phone) return
|
||||
@@ -302,6 +360,40 @@ export default {
|
||||
color: #0088ff;
|
||||
}
|
||||
|
||||
/* xuchao: 石油汽油券购买模块 */
|
||||
.voucher-card {
|
||||
background-color: #ffffff;
|
||||
margin: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.voucher-ticket {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #0d6fe0, #2f9bff);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.voucher-amt { font-size: 22px; font-weight: 700; }
|
||||
.voucher-amt-sub { font-size: 12px; font-weight: 400; opacity: 0.9; margin-left: 4px; }
|
||||
.voucher-rule { font-size: 12px; opacity: 0.9; margin-top: 6px; }
|
||||
.voucher-wm { position: absolute; right: 4px; bottom: -12px; font-size: 52px; font-weight: 800; opacity: 0.1; }
|
||||
.voucher-tip { font-size: 12px; color: #666666; line-height: 1.7; margin-top: 12px; }
|
||||
.voucher-btn {
|
||||
height: 42px;
|
||||
margin-top: 12px;
|
||||
border-radius: 8px;
|
||||
background-color: #0088ff;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* xuchao: 加载失败提示态 */
|
||||
.load-failed {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user