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
+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