Compare commits
22
Commits
6b1037893e
...
master
@@ -23,4 +23,23 @@
|
|||||||
Arial, Helvetica, sans-serif;
|
Arial, Helvetica, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* xuchao: 修复默认导航栏在微信 WebView 内顶部超宽空白(参加/使用指南、协议等页)——
|
||||||
|
uni-app 内置 H5 导航栏高度为 calc(44px + env(safe-area-inset-top)),页面模板带
|
||||||
|
viewport-fit=cover 时,部分 Android 微信 WebView 会误报状态栏高度(而 H5 视口本
|
||||||
|
就位于微信原生标题栏下方、并未被遮挡),导致导航栏被垫高。强制回退固定 44px。
|
||||||
|
标准浏览器/ iOS 中该 env 值为 0,此覆盖无副作用 */
|
||||||
|
uni-page-head .uni-page-head {
|
||||||
|
height: 44px !important;
|
||||||
|
padding-top: 7px !important;
|
||||||
|
}
|
||||||
|
uni-page-head .uni-page-head ~ .uni-placeholder {
|
||||||
|
height: 44px !important;
|
||||||
|
}
|
||||||
|
uni-page-head[uni-page-head-type='default'] ~ uni-page-wrapper {
|
||||||
|
height: calc(100% - 44px) !important;
|
||||||
|
}
|
||||||
|
.uni-app--showtabbar uni-page-head[uni-page-head-type='default'] ~ uni-page-wrapper {
|
||||||
|
height: calc(100% - 44px) !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+16
-1
@@ -22,6 +22,11 @@ const WinnerDatesUrl = 'mp-api/hhrsWinner/dates'
|
|||||||
const WinnerListUrl = 'mp-api/hhrsWinner/list'
|
const WinnerListUrl = 'mp-api/hhrsWinner/list'
|
||||||
// 预约下单(智慧游卡包)
|
// 预约下单(智慧游卡包)
|
||||||
const AppointUrl = 'zhy-api/cardBag/appoint'
|
const AppointUrl = 'zhy-api/cardBag/appoint'
|
||||||
|
// xuchao: 怀化石油汽油券(下单/预支付/最新订单查询,后端 HhVoucherController)
|
||||||
|
const VoucherCreateUrl = 'open-api/hhService/voucher/create'
|
||||||
|
const VoucherPrepayUrl = 'open-api/hhService/voucher/prepay'
|
||||||
|
const VoucherLatestUrl = 'open-api/hhService/voucher/latest'
|
||||||
|
const VoucherCheckCodeUrl = 'open-api/hhService/voucher/checkCode'
|
||||||
|
|
||||||
// 此处第二个参数vm,就是我们在页面使用的this
|
// 此处第二个参数vm,就是我们在页面使用的this
|
||||||
const install = (Vue, vm) => {
|
const install = (Vue, vm) => {
|
||||||
@@ -52,6 +57,12 @@ const install = (Vue, vm) => {
|
|||||||
const getWinnerDates = (params = {}) => vm.$u.get(WinnerDatesUrl, params)
|
const getWinnerDates = (params = {}) => vm.$u.get(WinnerDatesUrl, params)
|
||||||
const getWinnerList = (params = {}) => vm.$u.post(WinnerListUrl, params)
|
const getWinnerList = (params = {}) => vm.$u.post(WinnerListUrl, params)
|
||||||
|
|
||||||
|
// xuchao: 石油汽油券
|
||||||
|
const voucherCreate = (params = {}) => vm.$u.post(VoucherCreateUrl, params)
|
||||||
|
const voucherPrepay = (params = {}) => vm.$u.post(VoucherPrepayUrl, params)
|
||||||
|
const voucherLatest = (params = {}) => vm.$u.post(VoucherLatestUrl, params)
|
||||||
|
const voucherCheckCode = (params = {}) => vm.$u.post(VoucherCheckCodeUrl, params)
|
||||||
|
|
||||||
vm.$u.api = {
|
vm.$u.api = {
|
||||||
checkerLogin,
|
checkerLogin,
|
||||||
sendLoginVerifyCode,
|
sendLoginVerifyCode,
|
||||||
@@ -67,7 +78,11 @@ const install = (Vue, vm) => {
|
|||||||
initFaceVerify,
|
initFaceVerify,
|
||||||
describeFaceVerify,
|
describeFaceVerify,
|
||||||
getWinnerDates,
|
getWinnerDates,
|
||||||
getWinnerList
|
getWinnerList,
|
||||||
|
voucherCreate,
|
||||||
|
voucherPrepay,
|
||||||
|
voucherLatest,
|
||||||
|
voucherCheckCode
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,65 @@
|
|||||||
|
// xuchao: 怀化石油汽油减免券——前端常量与工具(全写死,只服务这一个门店,决策 1/10/15)
|
||||||
|
// 价格真相=后端配置 hh.voucher.price-fen 经 latest 下发;此处 200.00 仅为接口未返回时的展示兜底
|
||||||
|
|
||||||
|
export const PETROL_SHOP_ID = '851219003520709'
|
||||||
|
export const VOUCHER_PRICE_TEXT = '200.00'
|
||||||
|
|
||||||
|
export const VOUCHER_NAME = '怀化石油汽油电子券'
|
||||||
|
|
||||||
|
export const VOUCHER_GUIDE_TEXT = '请在「云闪付 App」里的「湖南社保卡」小程序首页进入「怀化社保卡」活动中完成购买'
|
||||||
|
|
||||||
|
// 券详情页「使用规则 / 使用流程 / 重要须知」文案,来自石油侧材料(决策 14)
|
||||||
|
export const VOUCHER_USE_RULES = [
|
||||||
|
'请加油站收银员以“中石油汽油券”通道扫码核销',
|
||||||
|
'汽油券单日限用 1 张,多张可叠加使用',
|
||||||
|
'自购买日起 90 天内有效',
|
||||||
|
'券一经兑换不可退换'
|
||||||
|
]
|
||||||
|
export const VOUCHER_USE_FLOW = [
|
||||||
|
'加油后至收银台出示二维码核销',
|
||||||
|
'支付差额可选:油卡 / 现金等'
|
||||||
|
]
|
||||||
|
|
||||||
|
// xuchao: 云闪付 SDK 前置预热注入。HBuilderX 的 H5 构建不吃项目根 index.html(静态标签会被丢),
|
||||||
|
// 只能在 main.js 最早期(document-start、App 挂载前)动态注入,逼近 xghmall 的 head 静态加载时机,
|
||||||
|
// 让云闪付原生控件桥在首屏就注册,避免到确认订单页才注入导致 upsdk.pay 唤不起。
|
||||||
|
// 与 orderConfirm 页的 loadUpSdk 共用同一 script[data-upsdk] 标记,全局只注入一次。
|
||||||
|
export function injectUpSdk() {
|
||||||
|
if (typeof document === 'undefined' || typeof window === 'undefined') return
|
||||||
|
if (window.upsdk || document.querySelector('script[data-upsdk]')) return
|
||||||
|
const s = document.createElement('script')
|
||||||
|
s.src = 'https://open.95516.com/s/open/js/upsdk.js'
|
||||||
|
s.setAttribute('data-upsdk', '1')
|
||||||
|
document.head.appendChild(s)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// xuchao: open-api/hhService/voucher/* 为双层壳:外层 errcode,内层 data.code 才是业务码
|
||||||
|
// (同 login.vue 的 isBizOk 判定,提到公共层复用)
|
||||||
|
export function bizOk(res) {
|
||||||
|
if (!res || res.errcode !== 0) return false
|
||||||
|
const d = res.data
|
||||||
|
if (!d || d.code === undefined || d.code === null) {
|
||||||
|
return !d || (d.status === undefined && d.error === undefined)
|
||||||
|
}
|
||||||
|
return d.code === 200
|
||||||
|
}
|
||||||
|
|
||||||
|
export function bizMsg(res) {
|
||||||
|
return (res && res.data && res.data.msg) || (res && res.errmsg) || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
export function bizData(res) {
|
||||||
|
return (res && res.data && res.data.data) || {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// statusCode 含义与后端 HhVoucherService.toView 对齐:-1无单 0待支付 1发券中 2已发券 3已退款 4退款处理中 5已关闭
|
||||||
|
export const VOUCHER_STATUS_TEXT = {
|
||||||
|
'-1': '',
|
||||||
|
0: '待支付',
|
||||||
|
1: '发券中',
|
||||||
|
2: '有效',
|
||||||
|
3: '已退款',
|
||||||
|
4: '退款处理中',
|
||||||
|
5: '已关闭'
|
||||||
|
}
|
||||||
Executable
+14
@@ -0,0 +1,14 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# xuchao: hhrs H5 发布脚本 —— HBuilderX 构建不吃项目根 index.html(静态标签会被丢),
|
||||||
|
# 云闪付控件(upsdk)必须静态标签加载才能注册控件桥(路线B,2026-09-28 定),
|
||||||
|
# 故构建后把标签注入产物 index.html 再打包上传。发布 = sh h5-release.sh
|
||||||
|
set -e
|
||||||
|
cd "$(dirname "$0")"
|
||||||
|
rm -rf unpackage/dist/build/web
|
||||||
|
/Applications/HBuilderX.app/Contents/MacOS/cli publish web --project hhrs
|
||||||
|
BUILT=unpackage/dist/build/web/index.html
|
||||||
|
# 注入云闪付 SDK 静态标签(幂等:已有则跳过)
|
||||||
|
grep -q "open.95516.com" "$BUILT" || sed -i '' 's#<title>怀化人社</title>#<title>怀化人社</title><script src="https://open.95516.com/s/open/js/upsdk.js" data-upsdk="1"></script>#' "$BUILT"
|
||||||
|
grep -q "open.95516.com" "$BUILT" && echo "[h5-release] upsdk 静态标签已在产物 index.html"
|
||||||
|
tar czf /tmp/hh-voucher/web_release.tgz -C unpackage/dist/build/web .
|
||||||
|
echo "[h5-release] 产物就绪:/tmp/hh-voucher/web_release.tgz —— 用 expect rsh.exp scp 上传后原子切换"
|
||||||
@@ -10,6 +10,8 @@
|
|||||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||||
</script>
|
</script>
|
||||||
<title></title>
|
<title></title>
|
||||||
|
<!-- xuchao: 云闪付支付控件 SDK(石油汽油券购买,需运行于云闪付 App 容器内) -->
|
||||||
|
<script src='https://open.95516.com/s/open/js/upsdk.js'></script>
|
||||||
<!--preload-links-->
|
<!--preload-links-->
|
||||||
<!--app-context-->
|
<!--app-context-->
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -1,4 +1,9 @@
|
|||||||
import App from './App'
|
import App from './App'
|
||||||
|
import { injectUpSdk } from '@/common/petrolVoucher.js'
|
||||||
|
|
||||||
|
// xuchao: 云闪付控件 SDK 预热——HBuilderX 构建不吃根 index.html,静态标签无效,
|
||||||
|
// 在 App 挂载前(document-start 最早 JS 点)注入,逼近静态 head 加载时机(石油券支付修复)
|
||||||
|
injectUpSdk()
|
||||||
|
|
||||||
// #ifndef VUE3
|
// #ifndef VUE3
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|||||||
+12
@@ -51,6 +51,18 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/petrol/orderConfirm",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/petrol/voucherDetail",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/winners/winners",
|
"path": "pages/winners/winners",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@@ -133,7 +133,8 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
goDetail(item) {
|
goDetail(item) {
|
||||||
uni.navigateTo({ url: '/pages/venue/detail?id=' + item.shopId })
|
// xuchao: type=2 标记商户折扣入口,详情页据此展示商品信息+商户优惠模块
|
||||||
|
uni.navigateTo({ url: '/pages/venue/detail?id=' + item.shopId + '&type=2' })
|
||||||
},
|
},
|
||||||
onSearch() {
|
onSearch() {
|
||||||
this.pageNo = 1
|
this.pageNo = 1
|
||||||
@@ -154,6 +155,10 @@ export default {
|
|||||||
.search-area {
|
.search-area {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
|
// xuchao: 滚动时固定在页面顶部
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-row {
|
.nav-row {
|
||||||
@@ -253,6 +258,9 @@ export default {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #727272;
|
color: #727272;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
// xuchao: 分类为空也预留一行高度,防止卡片内容底部对齐时名称上下跳动
|
||||||
|
min-height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-address-row {
|
.card-address-row {
|
||||||
|
|||||||
+4
-47
@@ -19,14 +19,10 @@
|
|||||||
<view class="title-line"></view>
|
<view class="title-line"></view>
|
||||||
<text class="title-text">活动指南</text>
|
<text class="title-text">活动指南</text>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- xuchao: 图内已带标题/副标题/官方指南角标,不再叠加文字层,只保留图片 -->
|
||||||
<view class="guide-list">
|
<view class="guide-list">
|
||||||
<view class="guide-card" v-for="(item, index) in guideList" :key="index" @click="goPage(item.url)">
|
<view class="guide-card" v-for="(item, index) in guideList" :key="index" @click="goPage(item.url)">
|
||||||
<image class="guide-bg" :src="item.bg" mode="scaleToFill"></image>
|
<image class="guide-bg" :src="item.bg" mode="scaleToFill"></image>
|
||||||
<view class="guide-info">
|
|
||||||
<text class="guide-title">{{ item.title }}</text>
|
|
||||||
<text class="guide-sub">{{ item.sub }}</text>
|
|
||||||
<view class="guide-tag">官方指南</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -47,15 +43,12 @@
|
|||||||
],
|
],
|
||||||
guideList: [
|
guideList: [
|
||||||
{
|
{
|
||||||
title: '怀化社保卡惠民活动参加指南',
|
// xuchao: ?v= 为图片版本参数,运营换图必须同步更新日期,否则各平台 WebView/CDN 会继续命中旧缓存
|
||||||
sub: '本地文旅场馆、商户惠民福利',
|
bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_cjzn.png?v=20260928',
|
||||||
bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_cjzn.png',
|
|
||||||
url: '/pages/guide/join'
|
url: '/pages/guide/join'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '社保卡领取及使用指南',
|
bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_syzn.png?v=20260928',
|
||||||
sub: '全流程办理及激活指引',
|
|
||||||
bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_syzn.png',
|
|
||||||
url: '/pages/guide/use'
|
url: '/pages/guide/use'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
@@ -266,7 +259,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guide-card {
|
.guide-card {
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 252rpx;
|
height: 252rpx;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
@@ -279,40 +271,5 @@
|
|||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-info {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.guide-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #0088FF;
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.guide-sub {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #949AA0;
|
|
||||||
margin-bottom: 16rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.guide-tag {
|
|
||||||
display: inline-block;
|
|
||||||
width: fit-content;
|
|
||||||
padding: 4px 10px;
|
|
||||||
background-color: #e6f2ff;
|
|
||||||
color: #0088FF;
|
|
||||||
font-size: 12px;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,238 @@
|
|||||||
|
<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元 <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">购买日起 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_PRICE_TEXT, VOUCHER_GUIDE_TEXT,
|
||||||
|
bizOk, bizMsg, bizData
|
||||||
|
} from '@/common/petrolVoucher.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
phone: '',
|
||||||
|
orderNo: '',
|
||||||
|
submitting: false,
|
||||||
|
guideModal: false,
|
||||||
|
guideText: VOUCHER_GUIDE_TEXT,
|
||||||
|
voucherName: VOUCHER_NAME,
|
||||||
|
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
|
||||||
|
}
|
||||||
|
this.loadUpSdk() // xuchao: 运行时兜底注入(静态标签已在发布脚本注入产物 index.html,见 h5-release.sh)
|
||||||
|
if (options.orderNo) this.orderNo = options.orderNo
|
||||||
|
this.initFromServer()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// xuchao: upsdk 运行时注入并返回就绪 Promise(同一加载只发起一次;超时/失败 resolve(false))。
|
||||||
|
// 不能依赖 index.html 静态标签——HBuilderX 命令行构建的 H5 模板不吃根 index.html(会丢标签)。
|
||||||
|
loadUpSdk(timeout = 9000) {
|
||||||
|
if (typeof window === 'undefined' || typeof document === 'undefined') return Promise.resolve(false)
|
||||||
|
if (window.upsdk) return Promise.resolve(true)
|
||||||
|
if (this._upSdkPromise) return this._upSdkPromise
|
||||||
|
const loading = new Promise(resolve => {
|
||||||
|
let done = false
|
||||||
|
const finish = v => { if (!done) { done = true; resolve(v) } }
|
||||||
|
const exists = document.querySelector('script[data-upsdk]')
|
||||||
|
if (exists) {
|
||||||
|
// main.js 已预热注入:轮询等 window.upsdk 出现(避免重复插标签)
|
||||||
|
const t0 = Date.now()
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
if (window.upsdk) { clearInterval(timer); finish(true) }
|
||||||
|
else if (Date.now() - t0 > timeout) { clearInterval(timer); finish(false) }
|
||||||
|
}, 200)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const s = document.createElement('script')
|
||||||
|
s.src = 'https://open.95516.com/s/open/js/upsdk.js'
|
||||||
|
s.setAttribute('data-upsdk', '1')
|
||||||
|
s.onload = () => finish(!!window.upsdk)
|
||||||
|
s.onerror = () => finish(false)
|
||||||
|
document.head.appendChild(s)
|
||||||
|
setTimeout(() => finish(!!window.upsdk), timeout)
|
||||||
|
})
|
||||||
|
this._upSdkPromise = loading
|
||||||
|
return loading
|
||||||
|
},
|
||||||
|
// xuchao: 价格展示以服务端 latest 为准;已有待支付单自动续用;已发券直接跳券详情
|
||||||
|
initFromServer() {
|
||||||
|
this.$u.api.voucherLatest({ phone: this.phone }).then(res => {
|
||||||
|
if (!bizOk(res)) return
|
||||||
|
const d = bizData(res)
|
||||||
|
if (d.price) this.priceText = (d.price / 100).toFixed(2)
|
||||||
|
if (!this.orderNo && d.statusCode === 0 && d.orderNo) {
|
||||||
|
this.orderNo = d.orderNo
|
||||||
|
if (d.amount) this.priceText = (d.amount / 100).toFixed(2)
|
||||||
|
}
|
||||||
|
if (d.statusCode === 2) {
|
||||||
|
uni.redirectTo({ url: '/pages/petrol/voucherDetail?orderNo=' + (d.orderNo || '') })
|
||||||
|
}
|
||||||
|
}).catch(() => {})
|
||||||
|
},
|
||||||
|
onConfirmPay() {
|
||||||
|
if (this.submitting) return
|
||||||
|
// xuchao: 不做容器/白名单前置拦截,直接发起;云闪付控件在站外唤不起时
|
||||||
|
// 由 pay 的 fail 回调统一弹「去云闪付」指引模态(决策 11 修订:去白名单)
|
||||||
|
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: 云闪付控件唤起。先等 SDK 就绪(修复首点无反应:脚本异步加载未完成时
|
||||||
|
// 旧逻辑只重试 4 秒且静默;就绪判定收敛到 loadUpSdk 的 Promise)。
|
||||||
|
async launchUnionPay(tn) {
|
||||||
|
const ready = await this.loadUpSdk()
|
||||||
|
if (!ready) {
|
||||||
|
this.submitting = false
|
||||||
|
this.guideModal = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
window.upsdk.pluginReady(() => {
|
||||||
|
window.upsdk.pay({
|
||||||
|
tn: tn,
|
||||||
|
success: () => {
|
||||||
|
uni.redirectTo({ url: '/pages/petrol/voucherDetail?orderNo=' + this.orderNo })
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
// xuchao: 唤起失败(多为不在云闪付内)→ 指引模态;云闪付内取消也会走这里,
|
||||||
|
// 订单仍保留可"继续支付",统一用文案引导,不做环境猜测
|
||||||
|
this.submitting = false
|
||||||
|
this.guideModal = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// 控件无异步结果时兜底: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,261 @@
|
|||||||
|
<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">
|
||||||
|
<!-- 核销码为图片URL时直接展示 -->
|
||||||
|
<image v-if="isQrImage" class="qr-img" :src="qrText" mode="widthFix" />
|
||||||
|
<!-- 核销码为字符串时前端渲染二维码(每60秒向服务端换取新码) -->
|
||||||
|
<view v-else id="petrol-qr" class="qr-canvas"></view>
|
||||||
|
<view class="qr-tip">核销码每 60 秒自动刷新,请到店后出示给收银员扫码</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">{{ 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_USE_RULES, VOUCHER_USE_FLOW,
|
||||||
|
bizOk, bizMsg, bizData
|
||||||
|
} from '@/common/petrolVoucher.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
orderNo: '',
|
||||||
|
phone: '',
|
||||||
|
voucher: {},
|
||||||
|
status: null, // null=加载中;含义对齐后端 statusCode
|
||||||
|
qrText: '', // xuchao: 实时核销码(60 秒滚动,来自 /voucher/checkCode)
|
||||||
|
pollTimer: null,
|
||||||
|
pollLeft: 3,
|
||||||
|
checkTimer: null,
|
||||||
|
voucherName: VOUCHER_NAME,
|
||||||
|
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.qrText === 'string' && /^https?:\/\//i.test(this.qrText)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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()
|
||||||
|
this.stopCheckTimer()
|
||||||
|
},
|
||||||
|
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.loadCheckCode()
|
||||||
|
} else {
|
||||||
|
this.stopCheckTimer()
|
||||||
|
}
|
||||||
|
}).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: 取实时核销码并渲染;CNPC 侧 60 秒滚动,前端每 55 秒预取刷新
|
||||||
|
loadCheckCode() {
|
||||||
|
const orderNo = this.voucher.orderNo || this.orderNo
|
||||||
|
if (!orderNo) return
|
||||||
|
this.$u.api.voucherCheckCode({ orderNo, phone: this.phone }).then(res => {
|
||||||
|
if (!bizOk(res)) { uni.showToast({ title: bizMsg(res) || '获取核销码失败', icon: 'none' }); return }
|
||||||
|
const d = bizData(res)
|
||||||
|
this.qrText = d.checkCode || ''
|
||||||
|
this.$nextTick(() => this.renderQr())
|
||||||
|
this.startCheckTimer()
|
||||||
|
}).catch(() => {})
|
||||||
|
},
|
||||||
|
startCheckTimer() {
|
||||||
|
this.stopCheckTimer()
|
||||||
|
this.checkTimer = setInterval(() => this.loadCheckCode(), 55000)
|
||||||
|
},
|
||||||
|
stopCheckTimer() {
|
||||||
|
if (this.checkTimer) { clearInterval(this.checkTimer); this.checkTimer = null }
|
||||||
|
},
|
||||||
|
// xuchao: 核销码字符串→二维码渲染;qrcode.min.js 为本地静态资源(static/js/),动态注入一次
|
||||||
|
renderQr() {
|
||||||
|
if (this.isQrImage) return
|
||||||
|
if (!this.qrText) return
|
||||||
|
const draw = () => {
|
||||||
|
if (typeof document === 'undefined' || typeof window.QRCode === 'undefined') return
|
||||||
|
const el = document.getElementById('petrol-qr')
|
||||||
|
if (!el) return
|
||||||
|
el.innerHTML = ''
|
||||||
|
// eslint-disable-next-line no-new
|
||||||
|
new window.QRCode(el, {
|
||||||
|
text: this.qrText,
|
||||||
|
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-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; }
|
||||||
|
.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>
|
||||||
+113
-12
@@ -15,7 +15,7 @@
|
|||||||
<view class="store-info">
|
<view class="store-info">
|
||||||
<text class="store-name">{{ store.name }}</text>
|
<text class="store-name">{{ store.name }}</text>
|
||||||
<text class="store-category">{{ store.category }}</text>
|
<text class="store-category">{{ store.category }}</text>
|
||||||
<text class="store-hours">营业时间:{{ store.businessTime }}</text>
|
<text class="store-hours" v-if="store.businessTime">营业时间:{{ store.businessTime }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="divider"></view>
|
<view class="divider"></view>
|
||||||
@@ -42,8 +42,8 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 商品信息(内容取商铺门票信息字段) -->
|
<!-- 商品信息(仅商户折扣板块展示,内容取商铺门票信息字段) -->
|
||||||
<view class="discount-section" v-if="ticketInfoList.length">
|
<view class="discount-section" v-if="!isVenue && ticketInfoList.length">
|
||||||
<view class="section-title">
|
<view class="section-title">
|
||||||
<image src="https://aliyunoss.hn12301.net/hhrs/hhrs_qysm.png" style="width: 30rpx;height: 30rpx;"></image>
|
<image src="https://aliyunoss.hn12301.net/hhrs/hhrs_qysm.png" style="width: 30rpx;height: 30rpx;"></image>
|
||||||
<text class="discount-title">商品信息</text>
|
<text class="discount-title">商品信息</text>
|
||||||
@@ -53,16 +53,31 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 商户优惠 -->
|
<!-- 文旅场馆显示「使用说明」(1001板块备注),商户折扣显示「商户优惠」(1002板块备注) -->
|
||||||
<view class="discount-section">
|
<view class="discount-section" v-if="remarkList.length">
|
||||||
<view class="section-title">
|
<view class="section-title">
|
||||||
<image src="https://aliyunoss.hn12301.net/hhrs/hhrs_qysm.png" style="width: 30rpx;height: 30rpx;"></image>
|
<image src="https://aliyunoss.hn12301.net/hhrs/hhrs_qysm.png" style="width: 30rpx;height: 30rpx;"></image>
|
||||||
<text class="discount-title">商户优惠</text>
|
<text class="discount-title">{{ isVenue ? '使用说明' : '商户优惠' }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="discount-list">
|
<view class="discount-list">
|
||||||
<text class="discount-item" v-for="(item, index) in discountList" :key="index">{{ item }}</text>
|
<text class="discount-item" v-for="(item, index) in remarkList" :key="index">{{ item }}</text>
|
||||||
</view>
|
</view>
|
||||||
</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元 <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>
|
</view>
|
||||||
<!-- xuchao: 门店不存在或加载失败时的提示态,避免纯空白 -->
|
<!-- xuchao: 门店不存在或加载失败时的提示态,避免纯空白 -->
|
||||||
<view class="page" v-else-if="loaded">
|
<view class="page" v-else-if="loaded">
|
||||||
@@ -80,21 +95,45 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { PETROL_SHOP_ID, bizOk, bizData } from '@/common/petrolVoucher.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
store: null,
|
store: null,
|
||||||
loaded: false
|
loaded: false,
|
||||||
|
detailType: '1',
|
||||||
|
shopId: '',
|
||||||
|
voucher: null // xuchao: 石油券最新订单状态(statusCode 语义见 common/petrolVoucher.js)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
// xuchao: 入口板块:type=2 商户折扣,其余(含缺省)按文旅场馆渲染
|
||||||
|
isVenue() {
|
||||||
|
return this.detailType !== '2'
|
||||||
|
},
|
||||||
|
isPetrol() {
|
||||||
|
// xuchao: 后端券服务探活(latest 返回 price)后才展示购券模块——后端未部署期间整模块自动隐藏,无死入口
|
||||||
|
return this.loaded && String(this.shopId) === PETROL_SHOP_ID && !this.isVenue && !!(this.voucher && this.voucher.price)
|
||||||
|
},
|
||||||
|
voucherBtnText() {
|
||||||
|
const s = this.voucher ? this.voucher.statusCode : -1
|
||||||
|
if (s === 0) return '继续支付'
|
||||||
|
if (s === 1 || s === 2) return '查看我的券'
|
||||||
|
if (s === 3 || s === 4) return '重新购买'
|
||||||
|
// xuchao: 购买按钮金额取服务端下发价(测试期 0.01);未登录无数据时用中性文案
|
||||||
|
if (this.voucher && this.voucher.price) return '¥' + (this.voucher.price / 100).toFixed(2) + ' 购买'
|
||||||
|
return '购买汽油券'
|
||||||
|
},
|
||||||
ticketInfoList() {
|
ticketInfoList() {
|
||||||
if (!this.store || !this.store.ticketInfo) return []
|
if (!this.store || !this.store.ticketInfo) return []
|
||||||
return this.store.ticketInfo.split('\n')
|
return this.store.ticketInfo.split('\n')
|
||||||
},
|
},
|
||||||
discountList() {
|
remarkList() {
|
||||||
if (!this.store || !this.store.merchantDiscount) return []
|
if (!this.store) return []
|
||||||
return this.store.merchantDiscount.split('\n')
|
const text = this.isVenue ? this.store.usageNote : this.store.merchantDiscount
|
||||||
|
if (!text) return []
|
||||||
|
return text.split('\n')
|
||||||
},
|
},
|
||||||
// xuchao: 客服电话列表:按常见分隔符切分;无分隔符连写的多个11位手机号也自动拆开
|
// xuchao: 客服电话列表:按常见分隔符切分;无分隔符连写的多个11位手机号也自动拆开
|
||||||
servicePhoneList() {
|
servicePhoneList() {
|
||||||
@@ -121,11 +160,39 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
|
if (options.type) this.detailType = String(options.type)
|
||||||
if (options.id) {
|
if (options.id) {
|
||||||
|
this.shopId = String(options.id)
|
||||||
this.loadDetail(options.id)
|
this.loadDetail(options.id)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onShow() {
|
||||||
|
// xuchao: 支付/购券流程返回时刷新券按钮状态
|
||||||
|
if (String(this.shopId) === PETROL_SHOP_ID) this.loadVoucher()
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// xuchao: 拉取石油券最新订单状态(未登录也调用:作为后端服务探活,price 决定模块显隐)
|
||||||
|
loadVoucher() {
|
||||||
|
const phone = uni.getStorageSync('phone') || ''
|
||||||
|
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: 点击某个商户电话唤起拨号(多个号码时逐个可点)
|
// xuchao: 点击某个商户电话唤起拨号(多个号码时逐个可点)
|
||||||
callPhone(phone) {
|
callPhone(phone) {
|
||||||
if (!phone) return
|
if (!phone) return
|
||||||
@@ -251,7 +318,7 @@ export default {
|
|||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 商户优惠 */
|
/* 使用说明 */
|
||||||
.discount-section {
|
.discount-section {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
margin: 12px;
|
margin: 12px;
|
||||||
@@ -294,6 +361,40 @@ export default {
|
|||||||
color: #0088ff;
|
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: 加载失败提示态 */
|
/* xuchao: 加载失败提示态 */
|
||||||
.load-failed {
|
.load-failed {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
+10
-6
@@ -17,7 +17,7 @@
|
|||||||
|
|
||||||
<!-- 场馆列表 -->
|
<!-- 场馆列表 -->
|
||||||
<view class="list-area">
|
<view class="list-area">
|
||||||
<view class="venue-card" v-for="item in list" :key="item.shopId" @click="goDetail(item)">
|
<view class="venue-card" v-for="item in list" :key="item.shopId">
|
||||||
<image class="card-img" :src="item.image" mode="aspectFill" />
|
<image class="card-img" :src="item.image" mode="aspectFill" />
|
||||||
<view class="card-info">
|
<view class="card-info">
|
||||||
<text class="card-name">{{ item.name }}</text>
|
<text class="card-name">{{ item.name }}</text>
|
||||||
@@ -122,9 +122,6 @@ export default {
|
|||||||
uni.reLaunch({ url: '/pages/index/index' })
|
uni.reLaunch({ url: '/pages/index/index' })
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
goDetail(item) {
|
|
||||||
uni.navigateTo({ url: '/pages/venue/detail?id=' + item.shopId })
|
|
||||||
},
|
|
||||||
onSearch() {
|
onSearch() {
|
||||||
this.pageNo = 1
|
this.pageNo = 1
|
||||||
this.list = []
|
this.list = []
|
||||||
@@ -144,6 +141,10 @@ export default {
|
|||||||
.search-area {
|
.search-area {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
|
/* xuchao: 滚动时固定在页面顶部 */
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-row {
|
.nav-row {
|
||||||
@@ -203,7 +204,6 @@ export default {
|
|||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border: 1px solid #f2f2f7;
|
border: 1px solid #f2f2f7;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
width: 702rpx;
|
|
||||||
padding: 24px 12px;
|
padding: 24px 12px;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
box-shadow: 0 2px 3px #f2f2f7;
|
box-shadow: 0 2px 3px #f2f2f7;
|
||||||
@@ -219,6 +219,8 @@ export default {
|
|||||||
|
|
||||||
.card-info {
|
.card-info {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
/* xuchao: flex 项默认 min-width:auto,nowrap 地址会把列宽撑破卡片;置 0 后子元素在实宽内省略 */
|
||||||
|
min-width: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
@@ -234,6 +236,9 @@ export default {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #727272;
|
color: #727272;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
/* xuchao: 分类为空也预留一行高度,防止卡片内容底部对齐时名称上下跳动 */
|
||||||
|
min-height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-address {
|
.card-address {
|
||||||
@@ -243,7 +248,6 @@ export default {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
max-width: 200px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-distance {
|
.card-distance {
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
<image class="banner-icon" src="https://aliyunoss.hn12301.net/hhrs/hhrs_zjgs.png" mode="aspectFit"></image>
|
<image class="banner-icon" src="https://aliyunoss.hn12301.net/hhrs/hhrs_zjgs.png" mode="aspectFit"></image>
|
||||||
<text class="banner-title">中奖名单公示</text>
|
<text class="banner-title">中奖名单公示</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="banner-subtitle">总计 10,000份权益包,分三期公证抽取</text>
|
<text class="banner-subtitle">总计 10,000份权益包,全程公证抽取</text>
|
||||||
<view class="stats-card">
|
<view class="stats-card">
|
||||||
<image class="stats-gift" src="https://aliyunoss.hn12301.net/hhrs/hhrs_xyckr.png" mode="aspectFit"></image>
|
<image class="stats-gift" src="https://aliyunoss.hn12301.net/hhrs/hhrs_xyckr.png" mode="aspectFit"></image>
|
||||||
<text class="stats-label">已产生</text>
|
<text class="stats-label">已产生</text>
|
||||||
|
|||||||
Vendored
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user