Compare commits
62
Commits
5bba52ae1f
...
xuchao
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
9276bd6140 | ||
|
|
748c4563fd | ||
|
|
2a6b86977c | ||
|
|
044b26d035 | ||
|
|
b6bbb0b219 | ||
|
|
8b3ac20e34 | ||
|
|
eb01701709 | ||
|
|
eeb6b91e0a | ||
|
|
6bc9b2c0d7 | ||
|
|
9f02144df7 | ||
|
|
88f4d48c80 | ||
|
|
ffe42d48c5 | ||
|
|
4daa4f3f5f | ||
|
|
1005f6bd22 | ||
|
|
b9895049d1 | ||
|
|
be4aafa6fd | ||
|
|
d39e30925d | ||
|
|
091832ce65 | ||
|
|
ad710a81ce | ||
|
|
bf3bbaa5de | ||
|
|
45f608c408 | ||
|
|
22035d543b | ||
|
|
5d253c60a8 | ||
|
|
571afb0673 | ||
|
|
966eac566c | ||
|
|
eaadae9e03 | ||
|
|
c72e08f356 | ||
|
|
f029460302 | ||
|
|
b33d59aa55 | ||
|
|
6b1037893e | ||
|
|
1fe8c133ad | ||
|
|
c80eef5112 | ||
|
|
e836fb33c8 | ||
|
|
a53b228f0b | ||
|
|
f69bd630a4 | ||
|
|
0cf11a4163 | ||
|
|
745f4bf5f1 | ||
|
|
4e72e81d47 | ||
|
|
381e609001 | ||
|
|
cdc09b9f8b | ||
|
|
1f1b86feb3 | ||
|
|
4ac98a30fb | ||
|
|
742973b31b | ||
|
|
a5caf4e9a1 | ||
|
|
567dd99d62 | ||
|
|
f05681001e | ||
|
|
2eee458802 | ||
|
|
d0ca2d961b | ||
|
|
80838143fb | ||
|
|
1521129d87 | ||
|
|
4be46bcb79 | ||
|
|
eb33144f2a | ||
|
|
805596e4a1 | ||
|
|
3e54c21f19 | ||
|
|
8a24dd033c | ||
|
|
bc2fb1715b | ||
|
|
4143667d1c | ||
|
|
1a3e6a3860 | ||
|
|
5a954a0906 | ||
|
|
1c8dddd8c7 | ||
|
|
41a380562a | ||
|
|
476cb64ee2 |
@@ -2,3 +2,6 @@ unpackage/
|
||||
node_modules/
|
||||
.DS_Store
|
||||
.playwright-mcp/
|
||||
|
||||
# xuchao: 本地 agent 说明文档,不入库(与 CLAUDE.md 均保留在本地)
|
||||
AGENTS.md
|
||||
|
||||
@@ -14,4 +14,32 @@
|
||||
<style lang="scss">
|
||||
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
|
||||
@import "uview-ui/index.scss";
|
||||
|
||||
/* xuchao: 全站统一字体栈:系统字体优先,中文回退顺序兼顾 iOS/鸿蒙/Android/Windows */
|
||||
page,
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC',
|
||||
'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Hiragino Sans GB',
|
||||
Arial, Helvetica, sans-serif;
|
||||
-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>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
**发布流程**:本地 HBuilderX 构建 → 覆盖上传产物到 `/home/hh/html/` → 静态文件即时生效,**无需重启 Nginx**。改过 Nginx 配置才需要 `nginx -t && nginx -s reload`。
|
||||
|
||||
**关键注意**:
|
||||
- 前端 API 基地址指向 `https://dscp-dev.hn12301.net`(= 120.26.254.65,数字化测试环境),**后端不在部署机上**。出现"页面能打开但数据不通"时优先排查 120.26.254.65 的接口
|
||||
- 前端 API 基地址指向 `https://dscp-uat.hn12301.net`(UAT 测试环境),**后端不在部署机上**。出现"页面能打开但数据不通"时优先排查 dscp-uat.hn12301.net 的接口
|
||||
- 页面图片走 OSS:`aliyunoss.hn12301.net/hhrs/`
|
||||
- SSH 凭据及全部运维细节见 Obsidian 工作资料《121.43.239.220(H5站点服务器)运维手册_2026-08-04.md》
|
||||
- 数据录入(商铺/资源/中奖等)操作指南见仓库根 docs 的 `hhrs-ops-guide.md`(运营向)
|
||||
@@ -0,0 +1,15 @@
|
||||
// xuchao: 账号级本地缓存集中管理。权益页首屏会读这些缓存做兜底展示,
|
||||
// 换账号/退出时漏清就会把上一个账号的中奖状态、卡号、到期时间当成当前账号的数据展示。
|
||||
const ACCOUNT_KEYS = ['token', 'phone', 'isAuth', 'hasWin', 'cardNumber', 'expiresTime',
|
||||
'rightsCount', 'totalValueFen', 'authFlowStarted', 'authName', 'authIdNo']
|
||||
|
||||
export default {
|
||||
// 清空当前账号的本地会话与权益缓存(定位 lng/lat 属于设备信息,不在此列)
|
||||
clearAccountCache() {
|
||||
ACCOUNT_KEYS.forEach(key => uni.removeStorageSync(key))
|
||||
},
|
||||
// 账号标识(手机号)
|
||||
setAccountPhone(phone) {
|
||||
uni.setStorageSync('phone', phone)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
// xuchao: 全站集中配置项 —— 后端基址/客服电话等只在这里维护一处
|
||||
const config = {
|
||||
// 后端 API 基址。当前指向 UAT 测试环境(见 AGENTS.md 部署信息),切生产改这一行即可
|
||||
baseUrl: 'https://dscp-uat.hn12301.net',
|
||||
// 对外统一客服电话,与《用户协议》《隐私协议》公示号码保持一致
|
||||
servicePhone: '0731-88912301',
|
||||
// xuchao: open-api/hhService/login 强制校验固定 password 字段(后端为 H5 开的旁路,
|
||||
// 前端去掉即登录失败,故集中存放并在此说明;待后端改造 H5 免密登录后删除。
|
||||
loginFixedPassword: '1232321'
|
||||
}
|
||||
|
||||
export default config
|
||||
@@ -0,0 +1,10 @@
|
||||
// xuchao: 卡片角标用的区县简称。后端 districtName 返回的是 region.name 行政区划全称
|
||||
// (如「芷江侗族自治县」「怀化高新技术产业开发区」),列表缩略图只有 75px,必须缩短显示
|
||||
export function shortDistrict(name) {
|
||||
if (!name) return ''
|
||||
return name
|
||||
.replace('高新技术产业开发区', '高新区')
|
||||
.replace(/(苗族|侗族|瑶族|回族|土家族|各族)*自治县$/, '')
|
||||
.replace(/(苗族|侗族|瑶族|回族|土家族|各族)*自治州$/, '')
|
||||
.replace(/([^市])县$/, '$1')
|
||||
}
|
||||
+70
-68
@@ -1,87 +1,89 @@
|
||||
// 如果没有通过拦截器配置域名的话,可以在这里写上完整的URL(加上域名部分)
|
||||
let LoginUrl = 'open-api/pingXiang/login';
|
||||
let SendVerifyCodeUrl = 'open-api/pingXiang/sendLoginVerifyCode';
|
||||
let VenueListUrl = 'mp-api/hhrs/venue/list';
|
||||
let VenueDetailUrl = 'mp-api/hhrs/venue/detail';
|
||||
let MerchantListUrl = 'mp-api/hhrs/merchant/list';
|
||||
let MerchantDetailUrl = 'mp-api/hhrs/merchant/detail';
|
||||
let RightsInfoUrl = 'mp-api/hhrs/rights/info';
|
||||
let RightsDetailUrl = 'mp-api/hhrsRights/detail';
|
||||
let RightsAuthUrl = 'mp-api/hhrs/rights/auth';
|
||||
let EligibilityUrl = 'mp-api/hhrsRights/eligibility';
|
||||
let RightsBookUrl = 'mp-api/hhrs/rights/book';
|
||||
let InitFaceVerifyUrl = 'open-api/aliyun/face/initFaceVerify';
|
||||
let DescribeFaceVerifyUrl = 'open-api/aliyun/face/describeFaceVerify';
|
||||
let RightsListUrl = 'mp-api/hhrsRights/list';
|
||||
let AppointmentListUrl = 'mp-api/hhrsRights/appointment/list';
|
||||
let CheckListUrl = 'mp-api/hhrsRights/check/list';
|
||||
let StoreListUrl = 'mp-api/hhrsStore/list';
|
||||
let StoreDetailUrl = 'mp-api/hhrsStore/detail';
|
||||
let WinnerDatesUrl = 'mp-api/hhrsWinner/dates';
|
||||
let WinnerListUrl = 'mp-api/hhrsWinner/list';
|
||||
let AppointUrl = 'zhy-api/cardBag/appoint';
|
||||
let TokenDecodeUrl = 'open-api/hhService/tokenDecode';
|
||||
|
||||
// xuchao: 怀化人社 H5 接口清单,与 docs/hhrs-api-doc.md 一一对应
|
||||
// 基址由 common/http.interceptor.js 统一注入(common/config.js.baseUrl)
|
||||
// 登录 / 云闪付入口
|
||||
// xuchao: hhrs 专属登录端点(旧地址 open-api/pingXiang/* 由后端兼容层转发,已弃用)
|
||||
const LoginUrl = 'open-api/hhService/login'
|
||||
const SendVerifyCodeUrl = 'open-api/hhService/sendLoginVerifyCode'
|
||||
const TokenDecodeUrl = 'open-api/hhService/tokenDecode'
|
||||
// 门店(文旅场馆 typeId=1 / 商户折扣 typeId=2)
|
||||
const StoreListUrl = 'mp-api/hhrsStore/list'
|
||||
const StoreDetailUrl = 'mp-api/hhrsStore/detail'
|
||||
// 权益包
|
||||
const RightsListUrl = 'mp-api/hhrsRights/list'
|
||||
const RightsDetailUrl = 'mp-api/hhrsRights/detail'
|
||||
const EligibilityUrl = 'mp-api/hhrsRights/eligibility'
|
||||
const AppointmentListUrl = 'mp-api/hhrsRights/appointment/list'
|
||||
const CheckListUrl = 'mp-api/hhrsRights/check/list'
|
||||
// 实名人脸认证(阿里云)
|
||||
const InitFaceVerifyUrl = 'open-api/aliyun/face/initFaceVerify'
|
||||
const DescribeFaceVerifyUrl = 'open-api/aliyun/face/describeFaceVerify'
|
||||
// 中奖公示
|
||||
const WinnerDatesUrl = 'mp-api/hhrsWinner/dates'
|
||||
const WinnerListUrl = 'mp-api/hhrsWinner/list'
|
||||
// 预约下单(智慧游卡包)
|
||||
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
|
||||
const install = (Vue, vm) => {
|
||||
let checkerLogin = (params = {}) => vm.$u.post(LoginUrl, params);
|
||||
let sendLoginVerifyCode = (params = {}) => vm.$u.post(SendVerifyCodeUrl, params);
|
||||
// 登录与凭证
|
||||
const checkerLogin = (params = {}) => vm.$u.post(LoginUrl, params)
|
||||
const sendLoginVerifyCode = (params = {}) => vm.$u.post(SendVerifyCodeUrl, params)
|
||||
// xuchao: 云闪付入口 token 解码
|
||||
let tokenDecode = (params = {}) => vm.$u.post(TokenDecodeUrl, params);
|
||||
const tokenDecode = (params = {}) => vm.$u.post(TokenDecodeUrl, params)
|
||||
|
||||
// 文旅场馆
|
||||
let getVenueList = (params = {}) => vm.$u.get(VenueListUrl, params);
|
||||
let getVenueDetail = (params = {}) => vm.$u.post(VenueDetailUrl, params);
|
||||
|
||||
// 商户折扣
|
||||
let getMerchantList = (params = {}) => vm.$u.get(MerchantListUrl, params);
|
||||
let getMerchantDetail = (params = {}) => vm.$u.post(MerchantDetailUrl, params);
|
||||
|
||||
// 中奖名单
|
||||
let getWinnerDates = (params = {}) => vm.$u.get(WinnerDatesUrl, params);
|
||||
let getWinnerList = (params = {}) => vm.$u.post(WinnerListUrl, params);
|
||||
let doAppoint = (params = {}) => vm.$u.post(AppointUrl, params);
|
||||
// 门店列表/详情
|
||||
const getStoreList = (params = {}) => vm.$u.post(StoreListUrl, params)
|
||||
const getStoreDetail = (params = {}) => vm.$u.post(StoreDetailUrl, params)
|
||||
|
||||
// 权益包
|
||||
let getRightsInfo = (params = {}) => vm.$u.get(RightsInfoUrl, params);
|
||||
let getRightsDetail = (params = {}) => vm.$u.post(RightsDetailUrl, params);
|
||||
let doRightsAuth = (params = {}) => vm.$u.post(RightsAuthUrl, params);
|
||||
let doRightsBook = (params = {}) => vm.$u.post(RightsBookUrl, params);
|
||||
let getEligibility = (params = {}) => vm.$u.post(EligibilityUrl, params);
|
||||
let initFaceVerify = (params = {}) => vm.$u.post(InitFaceVerifyUrl, params);
|
||||
let describeFaceVerify = (params = {}) => vm.$u.post(DescribeFaceVerifyUrl, params);
|
||||
let getRightsList = (params = {}) => vm.$u.post(RightsListUrl, params);
|
||||
let getAppointmentList = (params = {}) => vm.$u.post(AppointmentListUrl, params);
|
||||
let getCheckList = (params = {}) => vm.$u.post(CheckListUrl, params);
|
||||
let getStoreList = (params = {}) => vm.$u.post(StoreListUrl, params);
|
||||
let getStoreDetail = (params = {}) => vm.$u.post(StoreDetailUrl, params);
|
||||
const getRightsList = (params = {}) => vm.$u.post(RightsListUrl, params)
|
||||
const getRightsDetail = (params = {}) => vm.$u.post(RightsDetailUrl, params)
|
||||
// xuchao: 注意 identityNo 会触发后端“被动认证”回写,仅在认证流程中传
|
||||
const getEligibility = (params = {}) => vm.$u.post(EligibilityUrl, params)
|
||||
const getAppointmentList = (params = {}) => vm.$u.post(AppointmentListUrl, params)
|
||||
const getCheckList = (params = {}) => vm.$u.post(CheckListUrl, params)
|
||||
const doAppoint = (params = {}) => vm.$u.post(AppointUrl, params)
|
||||
|
||||
// 人脸核身
|
||||
const initFaceVerify = (params = {}) => vm.$u.post(InitFaceVerifyUrl, params)
|
||||
const describeFaceVerify = (params = {}) => vm.$u.post(DescribeFaceVerifyUrl, params)
|
||||
|
||||
// 中奖名单
|
||||
const getWinnerDates = (params = {}) => vm.$u.get(WinnerDatesUrl, 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 = {
|
||||
checkerLogin,
|
||||
sendLoginVerifyCode,
|
||||
tokenDecode,
|
||||
getVenueList,
|
||||
getVenueDetail,
|
||||
getMerchantList,
|
||||
getMerchantDetail,
|
||||
getWinnerList,
|
||||
getRightsInfo,
|
||||
getRightsDetail,
|
||||
doRightsAuth,
|
||||
doRightsBook,
|
||||
getEligibility,
|
||||
initFaceVerify,
|
||||
describeFaceVerify,
|
||||
getRightsList,
|
||||
getAppointmentList,
|
||||
getCheckList,
|
||||
getStoreList,
|
||||
getStoreDetail,
|
||||
getRightsList,
|
||||
getRightsDetail,
|
||||
getEligibility,
|
||||
getAppointmentList,
|
||||
getCheckList,
|
||||
doAppoint,
|
||||
initFaceVerify,
|
||||
describeFaceVerify,
|
||||
getWinnerDates,
|
||||
getWinnerList,
|
||||
doAppoint,
|
||||
};
|
||||
voucherCreate,
|
||||
voucherPrepay,
|
||||
voucherLatest,
|
||||
voucherCheckCode
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import config from '@/common/config.js'
|
||||
|
||||
// 这里的vm,就是我们在vue文件里面的this,所以我们能在这里获取vuex的变量,比如存放在里面的token
|
||||
// 同时,我们也可以在此使用getApp().globalData,如果你把token放在getApp().globalData的话,也是可以使用的
|
||||
const install = (Vue, vm) => {
|
||||
Vue.prototype.$u.http.setConfig({
|
||||
baseUrl: 'https://dscp-uat.hn12301.net',
|
||||
// xuchao: 基址统一取 common/config.js,避免多处硬编码
|
||||
baseUrl: config.baseUrl,
|
||||
// loadingText: '努力加载中~',
|
||||
// loadingTime: 18800,
|
||||
// 如果将此值设置为true,拦截回调中将会返回服务端返回的所有数据response,而不是response.data
|
||||
@@ -41,10 +44,17 @@ const install = (Vue, vm) => {
|
||||
|
||||
// 如果把originalData设置为了true,这里return回什么,this.$u.post的then回调中就会得到什么
|
||||
return res;
|
||||
}else if(res.errcode==-99){
|
||||
}else if(res.errcode==-99 || res.errcode==30002){
|
||||
// xuchao: 未登录/会话失效(-99 自定义、30002 框架 SESSION_AUTH_FAIL)—— 已在登录页则不再入栈
|
||||
const stack = getCurrentPages() || []
|
||||
const top = stack.length ? stack[stack.length - 1].route : ''
|
||||
if (top !== 'pages/index/login') {
|
||||
uni.navigateTo({
|
||||
url:'/pages/index/login'
|
||||
})
|
||||
}
|
||||
// xuchao: 必须把 res 交回调用方,否则页面 .then(res => res.errcode) 会因 undefined 抛错
|
||||
return res
|
||||
}else {
|
||||
|
||||
// uni.showToast({
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
// 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」里的「湖南社保卡」小程序首页进入「怀化社保卡」活动中完成购买'
|
||||
export const VOUCHER_CANCEL_TEXT = '支付已取消,请重新支付'
|
||||
|
||||
// 券详情页「使用规则 / 使用流程 / 重要须知」文案,来自石油侧材料(决策 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: '已关闭'
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<view class="tab-bar">
|
||||
<view class="tab-bar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(index)">
|
||||
<image class="tab-icon" :src="current === index ? item.selectedIconPath : item.iconPath"></image>
|
||||
<text class="tab-text" :style="{ color: current === index ? selectedColor : color }">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TabBar',
|
||||
props: {
|
||||
current: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
color: '#999999',
|
||||
selectedColor: '#007aff',
|
||||
backgroundColor: '#ffffff',
|
||||
tabList: [
|
||||
{
|
||||
pagePath: '/pages/index/index',
|
||||
iconPath: '/static/shouye.png',
|
||||
selectedIconPath: '/static/shouye_select.png',
|
||||
text: '首页'
|
||||
},
|
||||
{
|
||||
pagePath: '/pages/mine/mine',
|
||||
iconPath: '/static/wode.png',
|
||||
selectedIconPath: '/static/wode_select.png',
|
||||
text: '我的'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
if (this.current === index) return;
|
||||
uni.switchTab({
|
||||
url: this.tabList[index].pagePath
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tab-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-top: 1rpx solid rgba(242, 242, 242, 0.5);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.tab-bar-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.tab-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
.tab-text {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<!-- xuchao: 列表页「所属县区 + 所属类型」筛选条。两个入口等宽平分并占满容器宽,无底色,
|
||||
选中态只用品牌蓝字表达;面板第一行「全部 X」即清空该维度(所以没有独立重置按钮)。
|
||||
选项与各选项条数由列表接口在响应里一并返回,已按关键词与另一维度筛算好(districts/categories 首项即「全部」)。 -->
|
||||
<view class="hfb" v-if="ready">
|
||||
<view class="hfb-row">
|
||||
<view class="hfb-item" v-if="districtReady" :class="{ 'hfb-item--on': !!districtId }" @click="toggle('district')">
|
||||
<text class="hfb-text">{{ districtText }}</text>
|
||||
<view class="hfb-caret" :class="{ 'hfb-caret--up': openKey === 'district' }">
|
||||
<u-icon name="arrow-down-fill" size="20" :color="districtId ? '#0088ff' : '#bbbbbb'"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hfb-item" v-if="categoryReady" :class="{ 'hfb-item--on': !!category }" @click="toggle('category')">
|
||||
<text class="hfb-text">{{ categoryText }}</text>
|
||||
<view class="hfb-caret" :class="{ 'hfb-caret--up': openKey === 'category' }">
|
||||
<u-icon name="arrow-down-fill" size="20" :color="category ? '#0088ff' : '#bbbbbb'"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="hfb-mask" v-if="openKey" @click="close"></view>
|
||||
<view class="hfb-panel" v-if="openKey">
|
||||
<scroll-view scroll-y class="hfb-list">
|
||||
<view class="hfb-opt" v-for="o in openOptions" :key="o.value"
|
||||
:class="{ 'hfb-opt--sel': current === o.value }" @click="pick(o.value)">
|
||||
<text class="hfb-opt-label">{{ o.label }}</text>
|
||||
<text class="hfb-opt-count">{{ o.count }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'hhrs-filter-bar',
|
||||
props: {
|
||||
// xuchao: [{value,label,count}],首项为「全部 X」(value=''),县区 value 是行政区划码
|
||||
districts: { type: Array, default: () => [] },
|
||||
categories: { type: Array, default: () => [] },
|
||||
districtId: { type: String, default: '' },
|
||||
category: { type: String, default: '' }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
openKey: '',
|
||||
// xuchao: 记住见过的 value→label,避免关键词把选中项挤出选项列表后入口只能显示区划码
|
||||
labelCache: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// xuchao: 选项首项固定是「全部」,长度>1 才算该维度真有可选项。
|
||||
// 某维度没有可选项(如商铺未录入「所在地区」)时只隐藏它自己的入口,
|
||||
// 两个都没有则整条筛选不渲染,避免出现点开是空面板
|
||||
districtReady() { return this.districts.length > 1 },
|
||||
categoryReady() { return this.categories.length > 1 },
|
||||
ready() { return this.districtReady || this.categoryReady },
|
||||
openOptions() {
|
||||
return this.openKey === 'district' ? this.districts : this.categories
|
||||
},
|
||||
current() {
|
||||
return this.openKey === 'district' ? this.districtId : this.category
|
||||
},
|
||||
districtText() {
|
||||
return this.districtId ? this.cachedLabel('district', this.districtId) : '所属县区'
|
||||
},
|
||||
categoryText() {
|
||||
return this.category ? this.cachedLabel('category', this.category) : '所属类型'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
districts(list) { this.remember(list, 'district') },
|
||||
categories(list) { this.remember(list, 'category') }
|
||||
},
|
||||
created() {
|
||||
this.remember(this.districts, 'district')
|
||||
this.remember(this.categories, 'category')
|
||||
},
|
||||
methods: {
|
||||
remember(list, kind) {
|
||||
// xuchao: 必须用 $set,Vue2 对新增对象键不做响应,入口文字会跟不上缓存
|
||||
(list || []).forEach(o => {
|
||||
if (o.value) this.$set(this.labelCache, kind + ':' + o.value, o.label)
|
||||
})
|
||||
},
|
||||
cachedLabel(kind, value) {
|
||||
return this.labelCache[kind + ':' + value] || value
|
||||
},
|
||||
toggle(key) {
|
||||
// xuchao: 再点同一个入口即收起,避免面板卡在打开态
|
||||
this.openKey = this.openKey === key ? '' : key
|
||||
},
|
||||
close() {
|
||||
this.openKey = ''
|
||||
},
|
||||
pick(value) {
|
||||
if (this.openKey === 'district') {
|
||||
this.$emit('change', { districtId: value, category: this.category })
|
||||
} else {
|
||||
this.$emit('change', { districtId: this.districtId, category: value })
|
||||
}
|
||||
this.openKey = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/* xuchao: 根节点贴在 sticky 头部内,面板绝对定位到筛选条下方。
|
||||
只留上内边距:与列表的 12px 间隔必须落在头部的白底之外(各页 .list-area 的 padding-top),
|
||||
放在这里会是白色,头部白底和白色卡片连成一片,看上去就等于没有间隔 */
|
||||
.hfb {
|
||||
position: relative;
|
||||
padding: 24rpx 0 0;
|
||||
}
|
||||
|
||||
.hfb-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.hfb-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hfb-item--on {
|
||||
color: #0088ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hfb-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hfb-caret {
|
||||
display: flex;
|
||||
transition: transform 0.18s;
|
||||
}
|
||||
|
||||
.hfb-caret--up {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* xuchao: 遮罩绝对定位在筛选条下方(不用 fixed)—— fixed 会盖进 sticky 头部的层叠上下文,
|
||||
把搜索栏和筛选条一起压灰。这里从筛选条下边缘开始向下铺满一屏,列表变暗、头部保持原色 */
|
||||
.hfb-mask {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: -12px;
|
||||
right: -12px;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
/* xuchao: 面板左右各超出 12px(与页面头部的 12px 内边距等值,用 px 才能在各屏宽下都对齐),
|
||||
使面板与手机边缘齐平 */
|
||||
.hfb-panel {
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
right: -12px;
|
||||
top: 100%;
|
||||
z-index: 100;
|
||||
background: #ffffff;
|
||||
border-radius: 0 0 28rpx 28rpx;
|
||||
box-shadow: 0 20rpx 48rpx rgba(0, 0, 0, 0.12);
|
||||
padding: 12rpx 12rpx 16rpx;
|
||||
}
|
||||
|
||||
.hfb-list {
|
||||
max-height: 620rpx;
|
||||
}
|
||||
|
||||
.hfb-opt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 84rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hfb-opt--sel {
|
||||
background: #e6f2ff;
|
||||
color: #0088ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hfb-opt-label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.hfb-opt-count {
|
||||
flex-shrink: 0;
|
||||
font-size: 24rpx;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
# 第一期中奖名单导入记录(2026-09-29)
|
||||
|
||||
## 背景
|
||||
|
||||
怀化市社保卡千万好礼促消费活动第一期开奖名单产生后,需导入 UAT 库 `dscp_business_uat.hhrs_winner` 表,供公示页 https://hh.hn12301.net/#/pages/winners/winners 展示。
|
||||
|
||||
## 数据来源
|
||||
|
||||
| 文件 | 内容 |
|
||||
| --- | --- |
|
||||
| `抽奖-中奖数据.xlsx`(2026-09-29 10:21 导出) | 第一期中奖名单原始文件:2000 人(姓名+脱敏身份证号) |
|
||||
| `抽奖-中奖数据-匹配hhrs_lottery_pool-batch1.csv` | 与抽奖池 `hhrs_lottery_pool`(batch_no=1)匹配结果:2001 行(1 人双卡) |
|
||||
|
||||
## 导入内容与校验
|
||||
|
||||
- 导入通道:直连 UAT MySQL,事务内导入,前后计数复核通过。
|
||||
- 导入行数:**2000**(batch1 CSV 2001 行按 姓名+证件号 去重;会同县「杨明 431225********4219」池中有两条卡记录,保留 pool_id 较小的一条,业务侧如需明确以哪张卡中奖需另行核实)。
|
||||
- 表结构:UAT 库 `hhrs_winner` 实际为抽奖池版结构(`id, pool_id, member_name, county, member_identity_no, member_phone, created_time, updated_time`),无奖品/开奖日期列。
|
||||
- 字段取值:`id` 与 `pool_id` 均取抽奖池记录 id(一一对应、可溯源);`county` 取自池表;证件/手机号为池表脱敏值(库内即脱敏,公示展示不受影响);`created_time=NOW()`(2026-09-29 14:27)。
|
||||
- 同步操作:对应 2000 条池记录 `won` 置 1(与抽奖台「公布即回写」语义一致)。
|
||||
- 旧数据:导入前表为空,无清理动作。
|
||||
|
||||
## 已知问题(导入前即存在)
|
||||
|
||||
dscp-uat 当前部署的后端与上表结构不匹配:
|
||||
|
||||
- `mp-api/hhrsWinner/dates`、`mp-api/hhrsWinner/list` 均返回 `errcode 99999`(部署代码按旧 prize 版 schema 查询,`draw_date/card_model_id` 列已不存在);
|
||||
- `open-api/hhrsDraw/*`(抽奖台后台)在该服务上为 404,抽奖台实际使用的后端未部署在此环境。
|
||||
|
||||
因此公示页当前显示「暂无数据/接口失败」,**与本次导入的数据无关**;待与现表结构匹配的新版后端部署后,第一期名单即可展示,数据无需重导。
|
||||
|
||||
## 补充排查发现(2026-09-29 下午)
|
||||
|
||||
1. UAT 库中还存在抽奖后台配套表 `hhrs_draw_activity` / `hhrs_draw_round`(2026-09-28 建),即抽奖台新版后端的排期数据:
|
||||
- **第一期官方开奖日期 = 2026-09-29**(「2026 金秋千万好礼 · 第一期(9·29 专场)」,活动 status=1 已发布);
|
||||
- 排期设计:9·29 专场三场 600+700+700=2000 人,分别绑定 batch 1/2/3;全部轮次 status=0(待开奖)、seed/drawn_time 为空 → **抽奖台自动回写链路从未成功跑通**(与 dscp-uat 上 hhrsDraw 接口 404 相符);
|
||||
- 实际交付的第一期名单是「batch1 一次抽 2000 人」,与排期表的三场拆分不一致——若后续场次仍按排期表取 batch2/3,不受本次导入影响(批次天然互斥)。
|
||||
2. 公示页要立即显示名单,零部署方案为:`hhrs_winner` 增加旧接口所需 8 列(card_model_id/member_id/prize_*/draw_date/remark,均可空,兼容新版写入),并回填:card_model_id=747609734826757、draw_date='2026-09-29'、prize_name='怀化市社保卡千万好礼促消费千元权益包'、prize_type='权益包'、prize_amount=100000(分,即 1000 元)。**待用户批准后执行**。
|
||||
3. 前端「隐藏手机号」改动(本地已完成)生效路径:HBuilderX CLI 可本地构建,产物上传 121.43.239.220:/home/hh/html 需要 SSH 权限(凭据在 Obsidian 运维手册)。
|
||||
|
||||
## 前端配套改动(本地已改,未发布)
|
||||
|
||||
`hhrs/pages/winners/winners.vue`:
|
||||
|
||||
1. 按业务要求移除「手机号码」列(表头、行、样式、按手机号过滤逻辑),搜索框改为仅按姓名。
|
||||
2. 修复「名单未翻到的人物搜索无结果」(如 王球莲):搜索原本只在前端已加载的 10 条/页内过滤,后端列表接口无姓名检索参数;现改为输入关键字/点搜索时按 500 条大页自动拉全当期名单(实测第一期 4 次请求共 2000 条)再本地过滤,全量结果按期缓存;拉取失败静默降级为已加载部分可搜。
|
||||
|
||||
需 HBuilderX 构建后上传 121.43.239.220:/home/hh/html 生效(`sh h5-release.sh` → 产物 scp 原子切换)。
|
||||
|
||||
## 发布结果(2026-09-29 16:07 线上实测)
|
||||
|
||||
已发布生效:入口 `index.8ec4f995.js` → `index.e438708b.js`,修复分片 `pages-winners-winners.a875331e.js`(含 loadAll 全量搜索)公网 200。浏览器实测:不翻页直接搜「王球莲」命中 1 条(4 个 pageSize=500 请求自动拉全),姓名/身份证/手机号三列正常。四站点回归 hh/pxdy/mkh5/api/dw 全 200。发布过程偏差(目录切换替代覆盖式)已按手册补救:旧 hash 资源全量还原、`._*` AppleDouble 清理、webroot 备份 `/root/hh-html-backup-20260929-presearchfix.tar.gz`。winners.vue 源码改动尚未 commit。
|
||||
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' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!-- xuchao: 云闪付支付控件 SDK(石油汽油券购买,需运行于云闪付 App 容器内) -->
|
||||
<script src='https://open.95516.com/s/open/js/upsdk.js'></script>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
import App from './App'
|
||||
import { injectUpSdk } from '@/common/petrolVoucher.js'
|
||||
|
||||
// xuchao: 云闪付控件 SDK 预热——HBuilderX 构建不吃根 index.html,静态标签无效,
|
||||
// 在 App 挂载前(document-start 最早 JS 点)注入,逼近静态 head 加载时机(石油券支付修复)
|
||||
injectUpSdk()
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
|
||||
+12
@@ -51,6 +51,18 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/petrol/orderConfirm",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/petrol/voucherDetail",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/winners/winners",
|
||||
"style": {
|
||||
|
||||
+115
-7
@@ -1,14 +1,100 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="content">
|
||||
<text class="heading">隐私协议</text>
|
||||
<text class="body">请在此处填写隐私协议的具体内容。</text>
|
||||
<text class="heading">怀化社保卡惠民活动隐私协议</text>
|
||||
<text class="meta">生效日期:2026年9月1日</text>
|
||||
<view class="section" v-for="(s, i) in sections" :key="i">
|
||||
<text class="section-title">{{ s.h }}</text>
|
||||
<text class="para" v-for="(p, j) in s.p" :key="j">{{ p }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sections: [
|
||||
{
|
||||
h: '一、引言',
|
||||
p: [
|
||||
'怀化社保卡惠民活动运营方(以下简称"我们")深知个人信息对您的重要性,并会严格按照《中华人民共和国个人信息保护法》《中华人民共和国网络安全法》等法律法规的要求,采取相应的安全保护措施,保护您的个人信息安全。',
|
||||
'本隐私协议旨在向您说明本平台(网址:hh.hn12301.net,以下简称"本平台")如何收集、使用、存储、共享和保护您的个人信息,以及您如何管理自己的信息。请您在使用本平台服务前,仔细阅读并充分理解本隐私协议,特别是以粗体标识的涉及敏感个人信息的条款。您勾选同意并开始使用服务,即表示我们将按照本隐私协议处理您的个人信息。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '二、我们收集的个人信息',
|
||||
p: [
|
||||
'2.1 为向您提供本平台各项服务,我们遵循合法、正当、必要的原则收集以下信息:',
|
||||
'(1)注册与登录信息:您的手机号码及短信验证码,用于身份验证和创建平台登录状态。您通过云闪付App内活动入口进入的,我们会从该渠道的授权凭证中解析您的手机号、姓名、证件号码,用于免登录识别您的活动资格。',
|
||||
'(2)实名认证信息:您申请权益包资格认证时填写的真实姓名、证件类型、证件号码。该类信息属于敏感个人信息,仅用于核验您的社保卡持卡人身份及活动参与资格。',
|
||||
'(3)人脸信息:实名认证过程中,您需通过第三方身份核验服务完成活体人脸核验。人脸信息属于敏感个人信息,由核验服务商依据其服务规范采集与比对,我们仅接收核验结果(通过/未通过),不存储您的面部图像或人脸特征数据。拒绝进行人脸核验的,将无法完成实名认证并领取权益包,但不影响您浏览场馆、商户等公开信息。',
|
||||
'(4)位置信息:为向您展示文旅场馆、商户、权益门店与您的距离并按就近原则排序,我们会经您的设备/浏览器授权后收集您的粗略地理位置(经纬度)。您可以在浏览器定位权限中随时关闭授权;关闭后您仍可正常使用平台,仅距离展示功能不可用。',
|
||||
'(5)交易与服务记录:您预约、使用权益产生的预约记录和核销记录,用于向您展示权益状态和提供客服协助。',
|
||||
'(6)设备与日志信息:为保障网络与活动安全,我们的服务器会自动记录访问日志,包括IP地址、访问日期与时间、浏览器类型等。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '三、我们如何使用个人信息',
|
||||
p: [
|
||||
'3.1 我们将收集的个人信息用于以下目的:(1)验证用户身份,提供登录服务;(2)核验社保卡持卡人活动参与资格,发放、管理权益包;(3)处理权益的预约与核销;(4)计算并展示场馆、商户与您的距离;(5)依法开展中奖名单公示、活动审计与监管报送;(6)保障平台与账号安全,防范作弊、冒用等风险;(7)响应您的咨询与客服请求。',
|
||||
'3.2 中奖名单公示:依据活动规则,参与活动结果需向公众公示。公示内容中的姓名、证件号码、手机号码均经脱敏处理(如隐藏部分字符)后展示,我们不会以公示方式披露您的完整个人身份信息。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '四、个人信息的共享、转让与公开披露',
|
||||
p: [
|
||||
'4.1 共享:除以下情形外,我们不会与任何公司、组织和个人共享您的个人信息:(1)获取您的单独同意后共享;(2)与完成服务所必需的第三方服务商共享:短信发送服务商(共享手机号用于发送验证码)、第三方人脸/身份核验服务商(共享姓名、证件号码、人脸影像用于核验证照真伪)、云闪付服务提供方(依据您的授权回传必要信息用于资格识别)、为权益核销提供支持的场馆及商户(在您使用对应权益时共享核销所必需的权益凭证信息);(3)根据法律法规、行政或司法机关的要求提供;(4)向人力资源社会保障等相关主管部门报送活动资格核验及监管所需的数据。',
|
||||
'4.2 转让:我们不会将您的个人信息转让给任何公司、组织和个人,但涉及合并、收购或破产清算时,如涉及个人信息转让,我们会要求新的持有方继续受本隐私协议约束,否则将重新征得您的授权同意。',
|
||||
'4.3 公开披露:我们仅会对中奖名单按第3.2条所述进行脱敏公示,或在获得您明确同意或基于法律强制性要求时公开披露您的个人信息。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '五、个人信息的存储',
|
||||
p: [
|
||||
'5.1 存储地点:我们在中华人民共和国境内运营中收集和产生的个人信息,存储于境内服务器,不会向境外传输。',
|
||||
'5.2 存储期限:我们仅在实现本隐私协议所述目的所必需的最短期限内保留您的个人信息,法律法规另有规定的除外。活动结束后,超出留存期限的个人信息我们将予以删除或匿名化处理。登录状态凭证保存在您的设备本地,清除浏览器存储即可失效。',
|
||||
'5.3 如我们停止运营本平台,我们将及时停止收集您个人信息的活动,并将该终止运营的情况在本平台进行公告。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '六、我们如何保护个人信息',
|
||||
p: [
|
||||
'6.1 我们采用传输层加密(HTTPS)、访问权限控制、数据脱敏展示等业界通行的安全技术措施和管理制度,防止您的个人信息遭到未经授权的访问、公开披露、使用、修改、损坏或丢失。',
|
||||
'6.2 我们仅允许有必要知晓这些信息的员工、合作伙伴在权限范围内访问个人信息,并要求其履行相应的保密义务。',
|
||||
'6.3 若不幸发生个人信息安全事件,我们将按照法律法规的要求,及时向您告知事件基本情况、可能的影响、我们已采取的处置措施等,并向有关主管部门报告。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '七、您的权利',
|
||||
p: [
|
||||
'7.1 查阅与更正:您可以在本平台"我的"等页面查阅您的登录手机号、权益状态、预约与核销记录。如发现信息有误,或需要更新您的个人信息,可通过本隐私协议第十条所载方式联系我们更正。',
|
||||
'7.2 删除:有下列情形的,您可以通过联系我们请求删除您的个人信息:(1)我们违反法律、行政法规规定收集、使用个人信息的;(2)我们未征得您的同意收集、使用个人信息的;(3)您不再使用本平台服务,或我们终止了服务或活动的;(4)我们违反约定处理您的个人信息的。法律法规规定的存储期限届满前或存在法定留存事由的,我们可能无法立即响应您的删除请求,届时将向您说明原因。',
|
||||
'7.3 撤回同意:您可以通过设备/浏览器设置关闭地理位置授权、清除本地存储的登录凭证等方式撤回相应授权。撤回同意不影响撤回前基于同意已进行的信息处理活动。',
|
||||
'7.4 注销账号:您可以通过联系客服申请注销您的账号。注销后,我们将删除或匿名化处理您的个人信息,法律法规要求留存的除外。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '八、未成年人保护',
|
||||
p: [
|
||||
'8.1 本平台面向具备完全民事行为能力的成年人提供服务。若您为未满18周岁的未成年人,请在监护人的陪同和同意下使用本平台并接受相关权益服务。我们重视对未成年人个人信息的保护,如监护人发现我们在未获取监护人同意的情况下收集了未成年人的个人信息,可通过客服联系我们,我们将尽快删除相关数据。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '九、本隐私协议的更新',
|
||||
p: [
|
||||
'9.1 我们的服务及业务情况可能不断变化。如该等变化导致本隐私协议所述处理目的、处理方式、个人信息种类或保存期限发生变更的,我们将以页面公告等显著方式通知您,并在必要时重新征得您的同意。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '十、如何联系我们',
|
||||
p: [
|
||||
'如您对本隐私协议或个人信息处理有任何疑问、意见或投诉,可通过本平台"我的—联系客服"入口,或拨打客服电话 0731-88912301 与我们联系,我们将在收到您的反馈后的15个工作日内予以答复。'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -21,15 +107,37 @@ export default {}
|
||||
|
||||
.heading {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.body {
|
||||
.meta {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: block;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.para {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
line-height: 1.8;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
+111
-7
@@ -1,14 +1,96 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="content">
|
||||
<text class="heading">用户协议</text>
|
||||
<text class="body">请在此处填写用户协议的具体内容。</text>
|
||||
<text class="heading">怀化社保卡惠民活动用户协议</text>
|
||||
<text class="meta">生效日期:2026年9月1日</text>
|
||||
<view class="section" v-for="(s, i) in sections" :key="i">
|
||||
<text class="section-title">{{ s.h }}</text>
|
||||
<text class="para" v-for="(p, j) in s.p" :key="j">{{ p }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sections: [
|
||||
{
|
||||
h: '一、协议的范围与接受',
|
||||
p: [
|
||||
'1.1 本协议是您与怀化社保卡惠民活动运营方(以下简称"我们")之间,就您使用"怀化社保卡惠民活动"H5平台(网址:hh.hn12301.net,以下简称"本平台")及相关服务所订立的协议。',
|
||||
'1.2 您点击"我已阅读并同意《用户协议》和《隐私协议》"、完成登录或以任何方式使用本平台服务的,即表示您已充分阅读、理解并接受本协议全部内容。如您不同意,请立即停止使用。',
|
||||
'1.3 本协议内容同时包括本平台已经发布的或将来可能发布并采取合理途径公示的各类活动规则、须知、公告,一经生效即构成本协议的组成部分。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '二、服务说明',
|
||||
p: [
|
||||
'2.1 本平台是怀化社保卡惠民活动的线上服务入口,主要提供以下服务:(1)文旅场馆信息与优惠内容查询;(2)合作商户及折扣信息查询;(3)社保卡权益包的资格认证、权益领取、预约与核销记录查询;(4)活动中奖名单公示查询;(5)活动参加指南与社保卡使用指引等信息展示。',
|
||||
'2.2 您可以通过手机浏览器或云闪付App内的活动入口访问本平台。云闪付入口下,您的登录手机号等信息以该渠道传递的授权凭证为准。',
|
||||
'2.3 本平台展示的文娱场馆、商户的折扣内容、服务价格、地址等信息,由对应场馆、商户提供并对真实性负责,平台仅作信息展示。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '三、账号与登录',
|
||||
p: [
|
||||
'3.1 本平台使用真实手机号并通过短信验证码方式登录。您应使用本人实名登记的手机号,并对账号项下的一切操作负责。',
|
||||
'3.2 您的登录凭证(token)在设备本地保存以维持登录状态。请妥善保管您的手机与登录状态,勿将手机出借他人或向他人泄露验证码;因您保管不善造成的损失由您自行承担。',
|
||||
'3.3 若您发现账号被冒用或验证码被他人获取,请立即通过平台客服渠道反馈。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '四、权益包资格认证',
|
||||
p: [
|
||||
'4.1 权益包服务面向符合活动条件的怀化市社保卡持卡人员。申请认证时,您须填写真实姓名、证件类型及证件号码,并按流程完成人脸核验。',
|
||||
'4.2 您承诺所提交的身份信息真实、准确、完整且为您本人所有。以虚假、冒用他人信息等方式通过认证的,我们有权取消认证结果、收回已发放权益,并依法追究相应责任。',
|
||||
'4.3 认证结果、权益领取资格、权益状态以平台系统核定为准。权益包存在有效期限,到期未使用的权益自动失效,不予折现或补发,活动规则另有说明的除外。',
|
||||
'4.4 权益的预约、核销须按对应商户的使用规则在有效期内操作;到店消费时请按商户要求出示相应凭证并配合核销。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '五、用户行为规范',
|
||||
p: [
|
||||
'5.1 您不得实施下列行为:(1)伪造、冒用他人身份信息参与活动或认证;(2)通过机器脚本、群控设备等技术手段批量注册、恶意抢占预约名额或套取、倒卖权益;(3)干扰、破坏本平台正常运营秩序,或对平台系统进行攻击、破解;(4)利用平台发布、传播违法违规信息;(5)其他违反法律法规或活动规则的行为。',
|
||||
'5.2 若您存在上述行为,我们有权视情节采取限制或取消活动资格、收回权益、中止或终止服务、封禁账号等措施,并保留追究法律责任的权利。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '六、活动的变更、中止与终止',
|
||||
p: [
|
||||
'6.1 因活动安排、政策调整、不可抗力、系统故障、网络或安全问题等原因,本平台可能调整、中止或终止部分或全部服务,我们将尽可能提前公告或以适当方式通知您。',
|
||||
'6.2 本平台提供的内容与服务"按现状"提供。因下列原因导致服务中断、数据丢失或您未能正常享受权益的,我们不承担赔偿责任,但将尽力减少由此给您造成的损失:(1)不可抗力;(2)基础运营商或第三方服务(短信通道、云资源、身份核验渠道等)的故障;(3)您自身网络、设备或操作原因。',
|
||||
'6.3 您在使用本平台过程中所联系的场馆、商户等第三方,其与本平台之间为独立民事主体关系。您在第三方处接受服务发生的消费纠纷,由您与该第三方依据法律法规及消费约定解决,平台将视情况提供必要的信息协助。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '七、知识产权',
|
||||
p: [
|
||||
'7.1 本平台的页面设计、文字、图片、标识、软件等内容的知识产权归我们或相关权利人所有,未经许可,您不得复制、修改、翻译、镜像、出租、出售或以其他商业方式使用。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '八、协议的变更',
|
||||
p: [
|
||||
'8.1 我们可能在活动时间、政策、服务功能发生变化时修订本协议,修订后的协议将在本页面公布并标注新的生效日期。自公布之日起您继续使用本平台服务的,视为接受修订后的协议;不同意的,应停止使用并可申请注销账号。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '九、法律适用与争议解决',
|
||||
p: [
|
||||
'9.1 本协议的订立、执行与解释均适用中华人民共和国法律。',
|
||||
'9.2 因本协议或服务产生的争议,双方应友好协商解决;协商不成的,任何一方可向我们所在地有管辖权的人民法院提起诉讼。'
|
||||
]
|
||||
},
|
||||
{
|
||||
h: '十、联系我们',
|
||||
p: [
|
||||
'如您对本协议或活动服务有任何疑问、意见或建议,可通过本平台"我的—联系客服"入口,或拨打客服电话 0731-88912301 与我们联系。'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -21,15 +103,37 @@ export default {}
|
||||
|
||||
.heading {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.body {
|
||||
.meta {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: block;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.para {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
line-height: 1.8;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
+122
-19
@@ -13,31 +13,47 @@
|
||||
<view class="search-btn" @click="onSearch">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- xuchao: 所属县区 + 所属类型筛选,选项与联动条数由列表接口一并返回 -->
|
||||
<hhrs-filter-bar :districts="filters.districts" :categories="filters.categories"
|
||||
:district-id="districtId" :category="category" @change="onFilterChange" />
|
||||
</view>
|
||||
|
||||
<!-- 商户列表 -->
|
||||
<scroll-view class="list-area" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
|
||||
<view class="list-area">
|
||||
<view class="venue-card" v-for="item in list" :key="item.shopId" @click="goDetail(item)">
|
||||
<view class="card-thumb">
|
||||
<image class="card-img" :src="item.image" mode="aspectFill" />
|
||||
<!-- xuchao: 左上角所属地区角标(districtName 来自商铺「所在地区」,未录入则不显示) -->
|
||||
<text class="card-area" v-if="item.districtName">{{ shortDistrict(item.districtName) }}</text>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.name }}</text>
|
||||
<text class="card-category">{{ item.category }}</text>
|
||||
<!-- xuchao: 地址与距离同属一个模块 -->
|
||||
<view class="card-address-row">
|
||||
<text class="card-address">{{ item.address }}</text>
|
||||
</view>
|
||||
<view class="card-distance" v-if="item.distance !== null">
|
||||
<u-icon name="map" color="#999999" size="24"></u-icon>
|
||||
<text class="distance-text">{{ item.distance < 1 ? Math.round(item.distance * 1000) + 'm' : Math.round(item.distance) + 'km' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="hasScrolled" class="nomore-area">
|
||||
<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :loadmore-text="''" :nomore-text="'我也是有底线的'" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-if="hasScrolled" class="nomore-area">
|
||||
<u-loadmore :status="loadStatus" :load-text="{ loadmore: '', loading: '加载中...', nomore: '我也是有底线的' }" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// xuchao: 角标区县简称(后端返回的是行政区划全称)
|
||||
import { shortDistrict } from '@/common/district.js'
|
||||
// xuchao: 县区 + 类型筛选条,三个列表页共用(pages.json 的 easycom 只给 u- 前缀配了规则,这里显式引入)
|
||||
import HhrsFilterBar from '@/components/hhrs-filter-bar/hhrs-filter-bar.vue'
|
||||
|
||||
export default {
|
||||
components: { HhrsFilterBar },
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
@@ -49,22 +65,40 @@ export default {
|
||||
lng: '',
|
||||
lat: '',
|
||||
loadStatus: 'loadmore',
|
||||
hasScrolled: false
|
||||
hasScrolled: false,
|
||||
reqSeq: 0,
|
||||
// xuchao: 筛选条件与面板选项(选项由列表响应带回)
|
||||
districtId: '',
|
||||
category: '',
|
||||
filters: { districts: [], categories: [] }
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const loc = uni.getStorageSync('lng') && uni.getStorageSync('lat')
|
||||
? { lng: uni.getStorageSync('lng'), lat: uni.getStorageSync('lat') }
|
||||
: null
|
||||
if (loc) {
|
||||
this.lng = loc.lng
|
||||
this.lat = loc.lat
|
||||
}
|
||||
const hasLoc = uni.getStorageSync('lng') && uni.getStorageSync('lat')
|
||||
if (hasLoc) {
|
||||
this.lng = uni.getStorageSync('lng')
|
||||
this.lat = uni.getStorageSync('lat')
|
||||
this.loadList()
|
||||
} else {
|
||||
// xuchao: 定位仅在首页触发过,直接进本页无缓存时主动获取一次,保证距离列可展示
|
||||
import('@/common/location.js').then(module => module.default.getLocation())
|
||||
.then(({ lng, lat }) => {
|
||||
this.lng = lng
|
||||
this.lat = lat
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => this.loadList())
|
||||
}
|
||||
},
|
||||
// xuchao: 改用页面级触底加载(scroll-view 无固定高度时 scrolltolower 永不触发)
|
||||
onReachBottom() {
|
||||
this.loadMore()
|
||||
},
|
||||
methods: {
|
||||
shortDistrict,
|
||||
loadList() {
|
||||
if (this.loading) return
|
||||
// xuchao: 请求序号 —— 新请求直接取代在途请求,过期响应整体丢弃(修复搜索竞态,故不再用 loading 提前 return)
|
||||
const seq = ++this.reqSeq
|
||||
this.loading = true
|
||||
this.loadStatus = 'loading'
|
||||
const params = {
|
||||
@@ -75,8 +109,16 @@ export default {
|
||||
}
|
||||
if (this.lng) params.lng = this.lng
|
||||
if (this.lat) params.lat = this.lat
|
||||
if (this.districtId) params.districtId = this.districtId
|
||||
if (this.category) params.category = this.category
|
||||
this.$u.api.getStoreList(params).then(res => {
|
||||
if (seq !== this.reqSeq) return
|
||||
if (res.errcode === 0 && res.data) {
|
||||
// xuchao: 面板选项随列表一起回来(后端已按关键词与另一维度算好条数)
|
||||
this.filters = {
|
||||
districts: res.data.districts || [],
|
||||
categories: res.data.categories || []
|
||||
}
|
||||
const list = res.data.list || []
|
||||
if (this.pageNo === 1) {
|
||||
this.list = list
|
||||
@@ -84,8 +126,11 @@ export default {
|
||||
this.list = this.list.concat(list)
|
||||
}
|
||||
this.total = res.data.total || 0
|
||||
// xuchao: 本页不足一页即已到尾部,钉住 total,防止 total 中途变大时空翻
|
||||
if (list.length < this.pageSize) this.total = this.list.length
|
||||
}
|
||||
}).finally(() => {
|
||||
if (seq !== this.reqSeq) return
|
||||
this.loading = false
|
||||
if (this.list.length === 0) {
|
||||
this.loadStatus = 'nomore'
|
||||
@@ -113,12 +158,19 @@ export default {
|
||||
}
|
||||
},
|
||||
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() {
|
||||
this.pageNo = 1
|
||||
this.list = []
|
||||
this.loadList()
|
||||
},
|
||||
// xuchao: 换筛选条件即回第 1 页重查(关键词保持不变,两者为 AND)
|
||||
onFilterChange(e) {
|
||||
this.districtId = e.districtId
|
||||
this.category = e.category
|
||||
this.onSearch()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -133,7 +185,11 @@ export default {
|
||||
|
||||
.search-area {
|
||||
background-color: #ffffff;
|
||||
padding: 6px 12px;
|
||||
padding: 6px 12px 0;
|
||||
// xuchao: 滚动时固定在页面顶部;z-index 高于筛选遮罩(90),保证面板与选中态不被压住
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-row {
|
||||
@@ -184,12 +240,16 @@ export default {
|
||||
}
|
||||
|
||||
.list-area {
|
||||
// xuchao: 顶部 12px 必须是页面灰底(不能放进头部的白底里),否则与白色卡片连成一片看不出间隔
|
||||
padding: 12px;
|
||||
// xuchao: border-box 防止 padding 撑出页面横向滚动
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.venue-card {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #f2f2f7;
|
||||
border-radius: 6px;
|
||||
@@ -200,15 +260,43 @@ export default {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
.card-thumb {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* xuchao: image 由 thumb 裁圆角,自身不再设圆角 */
|
||||
.card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding: 1px 5px;
|
||||
border-radius: 0 0 6px 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
color: #ffffff;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
// xuchao: min-width:0 允许 flex 子项收缩到内容宽度以下,配合 nowrap 文本出省略号
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
@@ -218,22 +306,37 @@ export default {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-category {
|
||||
font-size: 14px;
|
||||
color: #727272;
|
||||
margin-top: 8px;
|
||||
// xuchao: 分类为空也预留一行高度,防止卡片内容底部对齐时名称上下跳动
|
||||
min-height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.card-address-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.card-address {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 14px;
|
||||
color: #727272;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.card-distance {
|
||||
|
||||
+23
-10
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="content">
|
||||
<text>参加指南</text>
|
||||
<!-- xuchao: 参加指南改为整图展示,与使用指南一致;图片资源尚未上传 OSS,加载失败时给文字兜底避免白屏 -->
|
||||
<image v-if="!imgFailed" class="join-img" :src="imgUrl" mode="widthFix" @error="imgFailed = true"></image>
|
||||
<view class="empty-tip" v-else>
|
||||
<text class="empty-text">参加指南内容整理中,请稍后再来查看</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -9,7 +11,11 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
// 运营指定图片地址(OSS 上传后可与全站统一为 aliyunoss.hn12301.net/hhrs)
|
||||
imgUrl: 'https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_zhinan.jpg',
|
||||
imgFailed: false
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {}
|
||||
@@ -18,14 +24,21 @@
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
/* xuchao: 整图展示,widthFix 随页面向下滚动 */
|
||||
.join-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.empty-tip {
|
||||
padding: 80px 24px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
+6
-10
@@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="content">
|
||||
<text>使用指南</text>
|
||||
</view>
|
||||
<image class="use-img" src="https://aliyunoss.hn12301.net/hhrs/hhrs_use.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -18,14 +16,12 @@
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
/* xuchao: 使用指南整图展示,widthFix 随页面向下滚动 */
|
||||
.use-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
+57
-59
@@ -19,14 +19,10 @@
|
||||
<view class="title-line"></view>
|
||||
<text class="title-text">活动指南</text>
|
||||
</view>
|
||||
<!-- xuchao: 图内已带标题/副标题/官方指南角标,不再叠加文字层,只保留图片 -->
|
||||
<view class="guide-list">
|
||||
<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>
|
||||
<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>
|
||||
@@ -34,6 +30,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import account from '@/common/account.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -45,32 +43,54 @@
|
||||
],
|
||||
guideList: [
|
||||
{
|
||||
title: '怀化社保卡惠民活动参加指南',
|
||||
sub: '本地文旅场馆、商户惠民福利',
|
||||
bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_cjzn.png',
|
||||
// xuchao: ?v= 为图片版本参数,运营换图必须同步更新日期,否则各平台 WebView/CDN 会继续命中旧缓存
|
||||
bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_cjzn.png?v=20260928',
|
||||
url: '/pages/guide/join'
|
||||
},
|
||||
{
|
||||
title: '社保卡领取及使用指南',
|
||||
sub: '全流程办理及激活指引',
|
||||
bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_syzn.png',
|
||||
bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_syzn.png?v=20260928',
|
||||
url: '/pages/guide/use'
|
||||
}
|
||||
]
|
||||
],
|
||||
// xuchao: 云闪付免密登录是否仍在进行中 —— 返回前不放行任何依赖身份的跳转
|
||||
tokenLoginPending: false,
|
||||
tokenLoginTimer: null
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// xuchao: 云闪付入口带 token 进来 —— 直接免密换取会话,不经过手机号验证码
|
||||
if (options.token) {
|
||||
this.handleTokenLogin(options.token)
|
||||
}
|
||||
this.getLocation()
|
||||
},
|
||||
// xuchao: 离开首页时收尾,避免看门狗与遮罩残留
|
||||
onUnload() {
|
||||
this.finishTokenLogin()
|
||||
},
|
||||
methods: {
|
||||
// xuchao: 云闪付入口 token 自动登录
|
||||
// xuchao: 云闪付入口 token 自动登录(免密换人)
|
||||
handleTokenLogin(token) {
|
||||
// xuchao: 云闪付入口是"免密换人",本机上一个账号的会话与权益缓存必须先丢弃:
|
||||
// 一是请求不能再带旧 accessToken(后端"会话优先"会把旧账号数据返给新用户),
|
||||
// 二是权益页只在 onLoad 取一次账号快照、不会自我纠正,所以清缓存必须赶在
|
||||
// 发请求之前 —— 解码返回前的窗口期里最多读到"未登录",绝不会读到别人的数据
|
||||
account.clearAccountCache()
|
||||
this.tokenLoginPending = true
|
||||
uni.showLoading({ title: '登录中', mask: true })
|
||||
// xuchao: 兜底看门狗,网络异常时不让遮罩卡死(只收遮罩,不改变登录结果)
|
||||
this.tokenLoginTimer = setTimeout(() => {
|
||||
this.finishTokenLogin()
|
||||
}, 10000)
|
||||
this.$u.api.tokenDecode({ token }).then(res => {
|
||||
this.finishTokenLogin()
|
||||
if (res.errcode === 0 && res.data && res.data.mobile) {
|
||||
uni.setStorageSync('phone', res.data.mobile)
|
||||
// xuchao: 后端已为云闪付入口签发会员会话,存下 accessToken,后续接口才认得这个用户。
|
||||
// 只认"非空字符串":后端字段缺失/为 null 时会被序列化成 {},直接存进缓存
|
||||
// 就会变成 Bearer [object Object],把所有鉴权接口全打挂
|
||||
const issued = typeof res.data.accessToken === 'string' ? res.data.accessToken : ''
|
||||
if (issued) uni.setStorageSync('token', issued)
|
||||
this.$u.api.getEligibility({ phone: res.data.mobile, identityNo: res.data.idNo || '', name: res.data.name || '' }).then(eRes => {
|
||||
if (eRes.errcode === 0) {
|
||||
uni.setStorageSync('isAuth', eRes.data.isAuth)
|
||||
@@ -85,9 +105,18 @@
|
||||
this.degradeToPhoneLogin()
|
||||
}
|
||||
}).catch(() => {
|
||||
this.finishTokenLogin()
|
||||
this.degradeToPhoneLogin()
|
||||
})
|
||||
},
|
||||
// xuchao: 免密登录收尾(收起遮罩、撤看门狗),成功/失败/超时/离开页面都会走到
|
||||
finishTokenLogin() {
|
||||
if (!this.tokenLoginPending) return
|
||||
this.tokenLoginPending = false
|
||||
clearTimeout(this.tokenLoginTimer)
|
||||
this.tokenLoginTimer = null
|
||||
uni.hideLoading()
|
||||
},
|
||||
// xuchao: 解码失败兜底,提示并跳手机号登录
|
||||
degradeToPhoneLogin() {
|
||||
uni.showToast({ title: '登录凭证已失效,请使用手机号登录', icon: 'none' })
|
||||
@@ -122,6 +151,11 @@
|
||||
uni.navigateTo({ url })
|
||||
},
|
||||
goRights() {
|
||||
// xuchao: 免密登录还没返回时不放行,避免带着空/旧身份进权益页
|
||||
if (this.tokenLoginPending) {
|
||||
uni.showToast({ title: '正在登录,请稍候', icon: 'none' })
|
||||
return
|
||||
}
|
||||
const phone = uni.getStorageSync('phone')
|
||||
if (!phone) {
|
||||
uni.navigateTo({ url: '/pages/index/login?redirect=rights' })
|
||||
@@ -142,19 +176,21 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* xuchao: 原 page/.page 固定 100vh + overflow:hidden,小屏下活动指南第二张卡片会被裁掉且无法滚动;
|
||||
改为 min-height 撑满、超出可滚动,视觉在正常屏上保持不变 */
|
||||
.page {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
@@ -186,7 +222,6 @@
|
||||
}
|
||||
|
||||
.king-text {
|
||||
font-family: 'Source Han Sans SC', 'Source Han Sans CN', 'Noto Sans CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
@@ -197,7 +232,6 @@
|
||||
flex: 1;
|
||||
background-color: #ffffff;
|
||||
margin-top: 10rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -219,7 +253,7 @@
|
||||
|
||||
.title-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
@@ -231,7 +265,6 @@
|
||||
}
|
||||
|
||||
.guide-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 252rpx;
|
||||
border-radius: 16rpx;
|
||||
@@ -244,40 +277,5 @@
|
||||
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: bold;
|
||||
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>
|
||||
|
||||
+78
-31
@@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- xuchao: 顶部导航(返回+页面名称) -->
|
||||
<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="title-area">
|
||||
<text class="title">手机号登录</text>
|
||||
@@ -32,16 +39,12 @@
|
||||
<text class="agreement-text" @click="agreed = !agreed">和</text>
|
||||
<text class="agreement-link" @click.stop="goAgreement('privacy')">《隐私协议》</text>
|
||||
</view>
|
||||
|
||||
<!-- 返回按钮 -->
|
||||
<view class="back-btn" @click="goBack">
|
||||
<image class="back-icon" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_back.png" mode="aspectFit"></image>
|
||||
<text class="back-text">返回上一页</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/common/config.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -62,6 +65,24 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// xuchao: open-api/hhService/login、sendLoginVerifyCode 返回 OpenapiResponse{code,msg,data},
|
||||
// 被网关再包一层后外层 errcode 恒为 0,真正的业务码在 data.code 里。
|
||||
// 只判 errcode 会把「验证码错误/过期、短信被限流」全部当成成功。
|
||||
// 宽松兜底:后端若改成不返回 data.code,仍按 errcode 判定,不会把成功误判为失败。
|
||||
isBizOk(res) {
|
||||
if (!res || res.errcode !== 0) return false
|
||||
const d = res.data
|
||||
if (!d || d.code === undefined || d.code === null) {
|
||||
// xuchao: 没有业务码时,还要排除“网关把 404/错误页包成 HTTP 200”的情况
|
||||
// (实测未部署的新地址会返回 {data:{timestamp,status:404,error:'Not Found'}} 且 errcode=0)
|
||||
return !d || (d.status === undefined && d.error === undefined)
|
||||
}
|
||||
return d.code === 200
|
||||
},
|
||||
// xuchao: 失败原因优先取业务 msg,其次取网关 errmsg
|
||||
bizMsg(res) {
|
||||
return (res && res.data && res.data.msg) || (res && res.errmsg) || ''
|
||||
},
|
||||
sendCode() {
|
||||
if (this.countdown > 0) return
|
||||
if (!this.phone || !/^1\d{10}$/.test(this.phone)) {
|
||||
@@ -69,14 +90,9 @@ export default {
|
||||
return
|
||||
}
|
||||
this.$u.api.sendLoginVerifyCode({ smsType: 'CIB_LOGIN', mobile: this.phone }).then(res => {
|
||||
if (res.errcode === 0) {
|
||||
if (this.isBizOk(res)) {
|
||||
uni.showToast({ title: '验证码已发送', icon: 'success' })
|
||||
} else {
|
||||
uni.showToast({ title: res.errmsg || '发送失败', icon: 'none' })
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.showToast({ title: '发送失败', icon: 'none' })
|
||||
})
|
||||
// xuchao: 倒计时移到发送成功之后(原来无条件启动,发送失败也会被白锁 60 秒无法重试)
|
||||
this.countdown = 60
|
||||
this.timer = setInterval(() => {
|
||||
this.countdown--
|
||||
@@ -85,6 +101,13 @@ export default {
|
||||
this.timer = null
|
||||
}
|
||||
}, 1000)
|
||||
} else {
|
||||
// xuchao: 透出后端真实原因,如「操作频繁,请稍后再试」
|
||||
uni.showToast({ title: this.bizMsg(res) || '发送失败', icon: 'none' })
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.showToast({ title: '发送失败', icon: 'none' })
|
||||
})
|
||||
},
|
||||
onLogin() {
|
||||
if (!this.phone || !/^1\d{10}$/.test(this.phone)) {
|
||||
@@ -99,9 +122,14 @@ export default {
|
||||
uni.showToast({ title: '请同意用户协议和隐私协议', icon: 'none' })
|
||||
return
|
||||
}
|
||||
this.$u.api.checkerLogin({ password: '1232321', mobile: this.phone, verifyCode: this.code }).then(res => {
|
||||
if (res.errcode === 0) {
|
||||
uni.setStorageSync('token', res.data.token)
|
||||
// xuchao: password 为后端要求的固定旁路口令,集中取自 config.loginFixedPassword
|
||||
this.$u.api.checkerLogin({ password: config.loginFixedPassword, mobile: this.phone, verifyCode: this.code }).then(res => {
|
||||
if (this.isBizOk(res)) {
|
||||
// xuchao: 只认"非空字符串"凭证。后端若把 null 序列化成 {}(实测 tokenDecode 就是这个形状),
|
||||
// 用 || 兜底会把对象存进缓存,之后每个请求都变成 Bearer [object Object]
|
||||
const payload = (res.data && res.data.data) || {}
|
||||
const issued = [payload.accessToken, payload.token].find(v => typeof v === 'string' && v.length > 0)
|
||||
uni.setStorageSync('token', issued || '')
|
||||
uni.setStorageSync('phone', this.phone)
|
||||
this.$u.api.getEligibility({ phone: this.phone, identityNo: '', name: '' }).then(eRes => {
|
||||
if (eRes.errcode === 0) {
|
||||
@@ -124,7 +152,9 @@ export default {
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({ title: res.errmsg || '登录失败', icon: 'none' })
|
||||
// xuchao: 透出后端真实原因,如「验证码错误」「验证码已过期,请重新获取」;
|
||||
// 失败时绝不写 phone,避免留下“假登录态”让后续页面以为已登录
|
||||
uni.showToast({ title: this.bizMsg(res) || '登录失败', icon: 'none' })
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.showToast({ title: '登录失败', icon: 'none' })
|
||||
@@ -135,7 +165,13 @@ export default {
|
||||
uni.navigateTo({ url })
|
||||
},
|
||||
goBack() {
|
||||
// xuchao: 直接通过链接进入(无历史栈)时回到首页,避免返回无响应
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -159,7 +195,7 @@ export default {
|
||||
|
||||
.title {
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
display: block;
|
||||
text-align: center;
|
||||
@@ -264,24 +300,35 @@ export default {
|
||||
color: #0088FF;
|
||||
}
|
||||
|
||||
/* 返回按钮 */
|
||||
.back-btn {
|
||||
position: fixed;
|
||||
left: 24px;
|
||||
bottom: 50px;
|
||||
/* xuchao: 顶部返回导航条(负外边距抵消页面左右 padding,通栏展示) */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 56px;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
position: relative;
|
||||
margin: 0 -40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
.nav-back {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-text {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #1a1818;
|
||||
padding: 0 56px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
||||
+12
-7
@@ -38,16 +38,14 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部 TabBar -->
|
||||
<!-- <tab-bar :current="1" /> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tabBar from '@/components/TabBar/TabBar.vue'
|
||||
import config from '@/common/config.js'
|
||||
import account from '@/common/account.js'
|
||||
|
||||
export default {
|
||||
components: { tabBar },
|
||||
data() {
|
||||
return {
|
||||
isLogin: false,
|
||||
@@ -74,8 +72,9 @@ export default {
|
||||
content: '确定要退出登录吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.removeStorageSync('token')
|
||||
uni.removeStorageSync('phone')
|
||||
// xuchao: 原来只清 token/phone,权益缓存(isAuth/hasWin/cardNumber/expiresTime/
|
||||
// rightsCount 等)残留会被下一个账号当成自己的数据展示
|
||||
account.clearAccountCache()
|
||||
this.isLogin = false
|
||||
this.phone = ''
|
||||
uni.showToast({ title: '已退出登录', icon: 'success' })
|
||||
@@ -90,7 +89,13 @@ export default {
|
||||
uni.navigateTo({ url: '/pages/guide/use' })
|
||||
},
|
||||
goService() {
|
||||
// TODO: 联系客服
|
||||
// xuchao: 唤起拨号,号码与协议页公示的统一客服电话同源(common/config.js)
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: config.servicePhone,
|
||||
fail: () => {
|
||||
uni.showToast({ title: '拨号失败,客服电话 ' + config.servicePhone, icon: 'none' })
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,241 @@
|
||||
<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, VOUCHER_CANCEL_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
|
||||
// xuchao: 临时诊断(定位弹窗真因后移除):SDK 加载不出来时展示 UA 片段
|
||||
this.guideText = '支付SDK未能加载[诊断] UA=' + (typeof navigator !== 'undefined' ? String(navigator.userAgent).slice(0, 120) : 'N/A')
|
||||
this.guideModal = true
|
||||
return
|
||||
}
|
||||
window.upsdk.pluginReady(() => {
|
||||
window.upsdk.pay({
|
||||
tn: tn,
|
||||
success: () => {
|
||||
uni.redirectTo({ url: '/pages/petrol/voucherDetail?orderNo=' + this.orderNo })
|
||||
},
|
||||
fail: (err) => {
|
||||
// xuchao: 控件回调失败(含用户取消)。按 xuchao 要求文案定为取消提示;
|
||||
// [诊断] 行临时保留采集真实错误码,区分"取消"与"容器不支持"后移除并分文案
|
||||
this.submitting = false
|
||||
this.guideText = VOUCHER_CANCEL_TEXT + '\n[诊断] ' + JSON.stringify(err || {})
|
||||
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>
|
||||
+32
-15
@@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view v-if="detail">
|
||||
<!-- 门店信息卡片 -->
|
||||
<!-- xuchao: 底部「立即预约」是 fixed 不占位,短屏滚到底会把「权益说明」压住;
|
||||
有底栏时给内容区预留 80px(底栏 68px + 12px 呼吸位)+ 安全区 -->
|
||||
<view v-if="detail" :class="{ 'has-bottom-bar': detail.isAppointment }">
|
||||
<!-- 门店信息卡片(信息+地址合并容器) -->
|
||||
<view class="store-card">
|
||||
<view class="store-main">
|
||||
<image class="store-img" :src="detail.shopImage" mode="aspectFill" />
|
||||
<view class="store-info">
|
||||
<text class="store-name">{{ detail.shopName }}</text>
|
||||
@@ -10,8 +13,7 @@
|
||||
<text class="store-hours">营业时间:{{ detail.businessTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 地址行 -->
|
||||
<view class="divider"></view>
|
||||
<view class="address-row">
|
||||
<text class="address-text">{{ detail.address }}</text>
|
||||
<view class="distance-row" v-if="detail.distance !== null">
|
||||
@@ -19,6 +21,7 @@
|
||||
<text class="distance-text">{{ detail.distance < 1 ? Math.round(detail.distance * 1000) + 'm' : Math.round(detail.distance) + 'km' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择预约日期 -->
|
||||
<view class="date-section" v-if="detail.isAppointment && detail.dates && detail.dates.length > 0">
|
||||
@@ -142,10 +145,9 @@ export default {
|
||||
}).catch(() => {
|
||||
uni.showToast({ title: '预约失败', icon: 'none' })
|
||||
})
|
||||
} else {
|
||||
// TODO: 调用使用接口
|
||||
uni.showToast({ title: '使用成功', icon: 'success' })
|
||||
}
|
||||
// xuchao: 非预约权益没有“线上使用”动作——到店由商户核销,结果体现在权益包「已使用」列表;
|
||||
// 底部按钮本身也只在 detail.isAppointment 时渲染,故删除原先只弹假 Toast 的不可达分支
|
||||
},
|
||||
loadDetail(ruleId) {
|
||||
const loc = uni.getStorageSync('lng') && uni.getStorageSync('lat')
|
||||
@@ -180,12 +182,17 @@ export default {
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
/* 门店卡片 */
|
||||
/* 门店卡片(信息+地址合并容器,样式与门店详情页一致) */
|
||||
.store-card {
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
margin:0rpx 12px 12px 12px;
|
||||
margin: 0 12px 12px 12px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.store-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
@@ -201,8 +208,8 @@ export default {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.store-name {
|
||||
@@ -221,13 +228,18 @@ export default {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* 地址行 */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #f2f2f7;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
/* 地址行(卡片内) */
|
||||
.address-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
padding: 12px 16px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.address-text {
|
||||
@@ -432,6 +444,11 @@ export default {
|
||||
}
|
||||
|
||||
/* 底部预约按钮 */
|
||||
/* xuchao: 内容区为 fixed 底栏预留的高度,短屏下「权益说明」才不会被遮住 */
|
||||
.has-bottom-bar {
|
||||
padding-bottom: calc(80px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
+284
-178
@@ -1,15 +1,17 @@
|
||||
<template>
|
||||
<view class="page" :class="{ 'page-auth': status === 'auth' }">
|
||||
<!-- xuchao: 顶部导航(返回+页面名称,认证状态使用) -->
|
||||
<view class="nav-bar" v-if="status === 'auth'">
|
||||
<view class="nav-back" @click="goBack">
|
||||
<u-icon name="arrow-left" color="#1a1818" size="40"></u-icon>
|
||||
</view>
|
||||
<text class="nav-title">权益资格认证</text>
|
||||
</view>
|
||||
<!-- 返回按钮(顶部,非auth状态) -->
|
||||
<view class="back-btn" :class="{ 'back-btn--black': status === 'noWin' }" @click="goBack" v-if="status !== 'auth'">
|
||||
<u-icon name="arrow-left" :color="status === 'noWin' ? '#000000' : '#ffffff'" size="40"></u-icon>
|
||||
<text class="back-text">返回</text>
|
||||
</view>
|
||||
<!-- 返回按钮(底部,auth状态) -->
|
||||
<view class="back-btn-bottom" @click="goBack" v-if="status === 'auth'">
|
||||
<image class="back-icon" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_back.png" mode="aspectFit"></image>
|
||||
<text class="back-text-bottom">返回上一页</text>
|
||||
</view>
|
||||
<!-- 状态1: 权益资格认证 -->
|
||||
<view v-if="status === 'auth'" class="auth-container">
|
||||
<view class="section-title">
|
||||
@@ -44,7 +46,7 @@
|
||||
<view class="tips-list">
|
||||
<text class="tip-item">1. 请输入真实的身份信息用来进行活动权益资格认证</text>
|
||||
<text class="tip-item">2. 认证通过后系统会显示出您的所获得的权益信息</text>
|
||||
<text class="tip-item">3. 手机号码为您登录的手机,无法修改。若号码对,请更换登录手机。</text>
|
||||
<text class="tip-item">3. 手机号码为您登录的手机号,无法修改。若号码不对,请更换手机号重新登录。</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -61,9 +63,9 @@
|
||||
<view style="background: #fff;">
|
||||
<view class="banner-area">
|
||||
<text class="banner-title">恭喜您!获得怀化市社保卡权益包</text>
|
||||
<view class="banner-expire">
|
||||
<view class="banner-expire" v-if="expiresTime">
|
||||
<text class="expire-icon">!</text>
|
||||
<text class="expire-text">2026年12月31日</text>
|
||||
<text class="expire-text">{{ expiresTime }}</text>
|
||||
<text class="expire-label">到期</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -74,7 +76,7 @@
|
||||
<text class="stats-label">总权益价值</text>
|
||||
<view class="stats-value-row">
|
||||
<text class="stats-currency">¥</text>
|
||||
<text class="stats-number">1500</text>
|
||||
<text class="stats-number">{{ totalValueText }}</text>
|
||||
<text class="stats-unit">元</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -82,12 +84,14 @@
|
||||
<view class="stats-item">
|
||||
<text class="stats-label">可用权益数</text>
|
||||
<view class="stats-value-row">
|
||||
<text class="stats-number-large">10</text>
|
||||
<text class="stats-number-large">{{ rightsCount }}</text>
|
||||
<text class="stats-unit">个</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- xuchao: Tab + 搜索 + 县区/类型筛选一起吸顶;筛选只作用于「待使用」(另两个 Tab 的接口不返回地址与分类) -->
|
||||
<view class="info-sticky">
|
||||
<!-- Tab 切换 -->
|
||||
<view class="tab-bar">
|
||||
<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
|
||||
@@ -95,20 +99,27 @@
|
||||
<text class="tab-text">{{ tab }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-area" v-if="currentTab==0">
|
||||
<view class="search-bar">
|
||||
<u-icon name="search" color="#cccccc" size="24"></u-icon>
|
||||
<input class="search-input" v-model="keyword" placeholder="搜索权益商家" @confirm="onSearch" />
|
||||
</view>
|
||||
<!-- xuchao: 所属县区 + 所属类型筛选,选项与联动条数由列表接口一并返回 -->
|
||||
<hhrs-filter-bar :districts="filters.districts" :categories="filters.categories"
|
||||
:district-id="districtId" :category="category" @change="onFilterChange" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 权益列表 -->
|
||||
<scroll-view class="list-area" scroll-y @scrolltolower="loadMore" :lower-threshold="100"
|
||||
v-if="currentTab==0">
|
||||
<!-- xuchao: 三 Tab 列表统一改普通容器 + 页面级触底分页(scroll-view 无固定高度时 scrolltolower 永不触发) -->
|
||||
<view class="list-area list-area--todo" v-if="currentTab==0">
|
||||
<view class="rights-card" v-for="item in rightsList" :key="item.ruleId" @click="goDetail(item)">
|
||||
<view class="card-thumb">
|
||||
<image class="card-img" :src="item.image" mode="aspectFill" />
|
||||
<!-- xuchao: 左上角所属地区角标(districtName 来自商铺「所在地区」,未录入则不显示) -->
|
||||
<text class="card-area" v-if="item.districtName">{{ shortDistrict(item.districtName) }}</text>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<view class="card-name">{{ item.name }}</view>
|
||||
<view class="card-category">{{ item.category }}</view>
|
||||
@@ -122,28 +133,33 @@
|
||||
</view>
|
||||
|
||||
<view class="empty-state" v-if="rightsList.length === 0 && !loading">
|
||||
<image class="empty-state-img" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_wzj.png" mode="widthFix"></image>
|
||||
<image class="empty-state-img" src="https://aliyunoss.hn12301.net/hhrs/hhrs_wzj.png" mode="widthFix"></image>
|
||||
<text class="empty-state-text">暂无内容</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view v-if="pager[0].hasScrolled" class="nomore-area">
|
||||
<u-loadmore :status="loadStatuses[0]" :load-text="{ loadmore: '', loading: '加载中...', nomore: '我也是有底线的' }" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="list-area" scroll-y @scrolltolower="loadAppointmentMore" :lower-threshold="100"
|
||||
v-if="currentTab==1">
|
||||
<view class="list-area" v-if="currentTab==1">
|
||||
<view class="rights-card" style="margin-top: 24rpx;flex-direction: column;" v-for="item in appointmentList"
|
||||
:key="item.id" >
|
||||
<view style="width: 654rpx;display: flex;justify-content: space-between;">
|
||||
<text>{{ item.resourceName }}</text><text style="color: #34C759;">已预约</text></view>
|
||||
<view style="font-size: 24rpx;color: #727272;margin-top: 24rpx;">预约游玩日期:{{ item.appTime.split(' ')[0] }}
|
||||
<!-- xuchao: appTime 为空时不再抛错拖垮整页渲染 -->
|
||||
<view style="font-size: 24rpx;color: #727272;margin-top: 24rpx;">预约游玩日期:{{ (item.appTime || '').split(' ')[0] }}
|
||||
<text v-if="item.timeName">({{ item.timeName }})</text></view>
|
||||
</view>
|
||||
|
||||
<view class="empty-state" v-if="appointmentList.length === 0 && !appointmentLoading">
|
||||
<image class="empty-state-img" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_wzj.png" mode="widthFix"></image>
|
||||
<image class="empty-state-img" src="https://aliyunoss.hn12301.net/hhrs/hhrs_wzj.png" mode="widthFix"></image>
|
||||
<text class="empty-state-text">暂无内容</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view class="list-area" scroll-y @scrolltolower="loadCheckMore" :lower-threshold="100"
|
||||
v-if="currentTab==2">
|
||||
<view v-if="pager[1].hasScrolled" class="nomore-area">
|
||||
<u-loadmore :status="loadStatuses[1]" :load-text="{ loadmore: '', loading: '加载中...', nomore: '我也是有底线的' }" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-area" v-if="currentTab==2">
|
||||
<view class="rights-card" style="margin-top: 24rpx;flex-direction: column;" v-for="item in checkList"
|
||||
:key="item.id" >
|
||||
<view style="width: 654rpx;display: flex;justify-content: space-between;">
|
||||
@@ -151,25 +167,33 @@
|
||||
<view style="font-size: 24rpx;color: #727272;margin-top: 24rpx;">核销时间:{{ item.checkTime }}</view>
|
||||
</view>
|
||||
<view class="empty-state" v-if="checkList.length === 0 && !checkLoading">
|
||||
<image class="empty-state-img" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_wzj.png" mode="widthFix"></image>
|
||||
<image class="empty-state-img" src="https://aliyunoss.hn12301.net/hhrs/hhrs_wzj.png" mode="widthFix"></image>
|
||||
<text class="empty-state-text">暂无内容</text>
|
||||
</view>
|
||||
<view class="loading" v-if="checkLoading">
|
||||
<text class="loading-text">加载中...</text>
|
||||
<!-- xuchao: 原先自写的“加载中/没有更多”与另两个 Tab 不一致,统一换成 u-loadmore -->
|
||||
<view v-if="pager[2].hasScrolled" class="nomore-area">
|
||||
<u-loadmore :status="loadStatuses[2]" :load-text="{ loadmore: '', loading: '加载中...', nomore: '我也是有底线的' }" />
|
||||
</view>
|
||||
<view class="no-more" v-else-if="checkList.length >= checkTotal && checkList.length > 0">
|
||||
<text class="no-more-text">没有更多了</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// xuchao: 角标区县简称(后端返回的是行政区划全称)
|
||||
import { shortDistrict } from '@/common/district.js'
|
||||
// xuchao: 县区 + 类型筛选条,三个列表页共用(pages.json 的 easycom 只给 u- 前缀配了规则,这里显式引入)
|
||||
import HhrsFilterBar from '@/components/hhrs-filter-bar/hhrs-filter-bar.vue'
|
||||
|
||||
export default {
|
||||
components: { HhrsFilterBar },
|
||||
data() {
|
||||
return {
|
||||
status: 'auth',
|
||||
// xuchao: 权益概览三字段,首屏用缓存兜底,随后由服务端复查刷新
|
||||
expiresTime: uni.getStorageSync('expiresTime') || '',
|
||||
rightsCount: uni.getStorageSync('rightsCount') || 0,
|
||||
totalValueFen: uni.getStorageSync('totalValueFen') || 0,
|
||||
form: {
|
||||
realName: '',
|
||||
phone: '',
|
||||
@@ -180,21 +204,52 @@
|
||||
tabs: ['待使用', '已预约', '已使用'],
|
||||
currentTab: 0,
|
||||
keyword: '',
|
||||
// xuchao: 待使用列表的县区/类型筛选条件与面板选项(选项由列表响应带回)
|
||||
districtId: '',
|
||||
category: '',
|
||||
filters: { districts: [], categories: [] },
|
||||
// xuchao: 待使用列表的县区/类型筛选条件与面板选项(选项由列表响应带回)
|
||||
districtId: '',
|
||||
category: '',
|
||||
filters: { districts: [], categories: [] },
|
||||
rightsList: [],
|
||||
pageNo: 1,
|
||||
pageSize: 1000,
|
||||
total: 0,
|
||||
lng: '',
|
||||
lat: '',
|
||||
loading: false,
|
||||
appointmentList: [],
|
||||
appointmentPageNo: 1,
|
||||
appointmentTotal: 0,
|
||||
appointmentLoading: false,
|
||||
checkList: [],
|
||||
checkPageNo: 1,
|
||||
checkTotal: 0,
|
||||
checkLoading: false
|
||||
// xuchao: 三个 Tab 各自独立的分页游标/加载态。原 pageSize=1000 是“一次拉全量 +
|
||||
// scroll-view 永不触发的假分页”,现改真实分页(与场馆/折扣页口径一致)
|
||||
pageSize: 10,
|
||||
pager: [
|
||||
{ pageNo: 1, total: 0, loading: false, reqSeq: 0, hasScrolled: false },
|
||||
{ pageNo: 1, total: 0, loading: false, reqSeq: 0, hasScrolled: false },
|
||||
{ pageNo: 1, total: 0, loading: false, reqSeq: 0, hasScrolled: false }
|
||||
],
|
||||
lng: '',
|
||||
lat: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// xuchao: 总权益价值分转元,整除去小数,否则保留两位
|
||||
totalValueText() {
|
||||
const yuan = this.totalValueFen / 100
|
||||
return Number.isInteger(yuan) ? String(yuan) : yuan.toFixed(2)
|
||||
},
|
||||
// xuchao: 模板沿用原有 loading / appointmentLoading / checkLoading 字段名
|
||||
loading() {
|
||||
return this.pager[0].loading
|
||||
},
|
||||
appointmentLoading() {
|
||||
return this.pager[1].loading
|
||||
},
|
||||
checkLoading() {
|
||||
return this.pager[2].loading
|
||||
},
|
||||
// xuchao: 各 Tab 底部“加载中/没有更多”独立计算,避免并行请求互相覆盖
|
||||
loadStatuses() {
|
||||
return this.pager.map((p, i) => {
|
||||
if (p.loading) return 'loading'
|
||||
const len = this.listOf(i).length
|
||||
return (len === 0 || len >= p.total) ? 'nomore' : 'loadmore'
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@@ -218,7 +273,19 @@
|
||||
this.loadRightsList()
|
||||
}
|
||||
},
|
||||
// xuchao: 页面级触底加载 —— 只作用于当前 Tab
|
||||
onReachBottom() {
|
||||
if (this.status !== 'info') return
|
||||
const tab = this.currentTab
|
||||
const p = this.pager[tab]
|
||||
p.hasScrolled = true
|
||||
if (!p.loading && this.listOf(tab).length < p.total) {
|
||||
p.pageNo++
|
||||
this.loadList(tab)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
shortDistrict,
|
||||
// xuchao: 缓存的权益状态可能过期(中奖/权益包会变化),每次进页面仅凭手机号向服务端
|
||||
// 复查最新状态并覆盖缓存(不带证件号,避免触发被动认证)
|
||||
refreshStatus() {
|
||||
@@ -236,10 +303,7 @@
|
||||
phone: phone
|
||||
}).then(res => {
|
||||
if (res.errcode !== 0 || !res.data) return
|
||||
uni.setStorageSync('isAuth', res.data.isAuth)
|
||||
uni.setStorageSync('hasWin', res.data.hasWin)
|
||||
uni.setStorageSync('cardNumber', res.data.cardNumber)
|
||||
uni.setStorageSync('expiresTime', res.data.expiresTime)
|
||||
this.applyEligibility(res.data)
|
||||
// xuchao: 服务端已认证则清除取消标记,后续按真实状态展示
|
||||
if (res.data.isAuth) uni.removeStorageSync('authFlowStarted')
|
||||
const newStatus = res.data.isAuth ? (res.data.hasWin ? 'info' : 'noWin') : 'auth'
|
||||
@@ -251,12 +315,26 @@
|
||||
}
|
||||
})
|
||||
},
|
||||
// xuchao: 资格查询结果统一写入缓存并回填页面(到期时间/总权益价值/可用权益数)
|
||||
applyEligibility(data) {
|
||||
uni.setStorageSync('isAuth', data.isAuth)
|
||||
uni.setStorageSync('hasWin', data.hasWin)
|
||||
uni.setStorageSync('cardNumber', data.cardNumber)
|
||||
uni.setStorageSync('expiresTime', data.expiresTime)
|
||||
uni.setStorageSync('rightsCount', data.rightsCount || 0)
|
||||
uni.setStorageSync('totalValueFen', data.totalValueFen || 0)
|
||||
this.expiresTime = data.expiresTime || ''
|
||||
this.rightsCount = data.rightsCount || 0
|
||||
this.totalValueFen = data.totalValueFen || 0
|
||||
},
|
||||
// xuchao: 认证取消/未通过:清理旧认证缓存并标记流程已发起,取消后应停留认证页
|
||||
markAuthCanceled() {
|
||||
uni.removeStorageSync('isAuth')
|
||||
uni.removeStorageSync('hasWin')
|
||||
uni.removeStorageSync('cardNumber')
|
||||
uni.removeStorageSync('expiresTime')
|
||||
uni.removeStorageSync('rightsCount')
|
||||
uni.removeStorageSync('totalValueFen')
|
||||
uni.setStorageSync('authFlowStarted', true)
|
||||
},
|
||||
checkAuthResult() {
|
||||
@@ -299,10 +377,7 @@
|
||||
}).then(eRes => {
|
||||
console.log('eligibility res:', eRes)
|
||||
if (eRes.errcode === 0) {
|
||||
uni.setStorageSync('isAuth', eRes.data.isAuth)
|
||||
uni.setStorageSync('hasWin', eRes.data.hasWin)
|
||||
uni.setStorageSync('cardNumber', eRes.data.cardNumber)
|
||||
uni.setStorageSync('expiresTime', eRes.data.expiresTime)
|
||||
this.applyEligibility(eRes.data)
|
||||
// xuchao: 认证成功,清除流程标记
|
||||
uni.removeStorageSync('authFlowStarted')
|
||||
if (eRes.data.isAuth) {
|
||||
@@ -406,110 +481,101 @@
|
||||
})
|
||||
})
|
||||
},
|
||||
loadRightsList() {
|
||||
const cardNumber = uni.getStorageSync('cardNumber') || ''
|
||||
this.fetchRightsList(cardNumber)
|
||||
// xuchao: Tab 索引 <-> 列表字段的唯一映射
|
||||
listOf(tab) {
|
||||
return tab === 1 ? this.appointmentList : tab === 2 ? this.checkList : this.rightsList
|
||||
},
|
||||
fetchRightsList(cardNumber) {
|
||||
if (this.loading) return
|
||||
this.loading = true
|
||||
this.$u.api.getRightsList({
|
||||
pageNo: this.pageNo,
|
||||
setList(tab, list) {
|
||||
if (tab === 1) {
|
||||
this.appointmentList = list
|
||||
} else if (tab === 2) {
|
||||
this.checkList = list
|
||||
} else {
|
||||
this.rightsList = list
|
||||
}
|
||||
},
|
||||
// xuchao: 三个 Tab 的统一分页加载器(reset=true 回到第一页重拉)
|
||||
loadList(tab, reset) {
|
||||
const p = this.pager[tab]
|
||||
if (reset) {
|
||||
p.pageNo = 1
|
||||
p.total = 0
|
||||
this.setList(tab, [])
|
||||
}
|
||||
// xuchao: 请求序号 —— 新请求取代在途请求,过期响应整体丢弃(治搜索/切 Tab 竞态)
|
||||
const seq = ++p.reqSeq
|
||||
p.loading = true
|
||||
const params = {
|
||||
pageNo: p.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
keyword: this.keyword,
|
||||
lng: this.lng,
|
||||
lat: this.lat,
|
||||
cardNumber: cardNumber
|
||||
}).then(res => {
|
||||
cardNumber: uni.getStorageSync('cardNumber') || ''
|
||||
}
|
||||
let request
|
||||
if (tab === 1) {
|
||||
request = this.$u.api.getAppointmentList(params)
|
||||
} else if (tab === 2) {
|
||||
request = this.$u.api.getCheckList(params)
|
||||
} else {
|
||||
params.keyword = this.keyword
|
||||
params.lng = this.lng
|
||||
params.lat = this.lat
|
||||
if (this.districtId) params.districtId = this.districtId
|
||||
if (this.category) params.category = this.category
|
||||
request = this.$u.api.getRightsList(params)
|
||||
}
|
||||
request.then(res => {
|
||||
if (seq !== p.reqSeq) return
|
||||
// xuchao: 筛选面板选项只随「待使用」列表返回,另两个 Tab 不覆盖
|
||||
if (tab === 0 && res.errcode === 0 && res.data) {
|
||||
this.filters = {
|
||||
districts: res.data.districts || [],
|
||||
categories: res.data.categories || []
|
||||
}
|
||||
}
|
||||
if (res.errcode === 0 && res.data) {
|
||||
const list = res.data.list || []
|
||||
if (this.pageNo === 1) {
|
||||
this.rightsList = list
|
||||
const prev = this.listOf(tab)
|
||||
// xuchao: 按 id/ruleId 去重合并 —— 兜住后端忽略 pageNo 重复返回同一页的情况
|
||||
const seen = {}
|
||||
const merged = (p.pageNo === 1 ? list : prev.concat(list)).filter(item => {
|
||||
const k = (item.id === undefined || item.id === null) ? item.ruleId : item.id
|
||||
if (k === undefined || k === null) return true
|
||||
if (seen[k]) return false
|
||||
seen[k] = true
|
||||
return true
|
||||
})
|
||||
// xuchao: 本页不足一页 或 整页都是重复 => 视为已到尾部,钉住 total,
|
||||
// 防止 total 中途变大时反复空翻/空转
|
||||
if (list.length < this.pageSize || (p.pageNo !== 1 && merged.length === prev.length)) {
|
||||
p.total = merged.length
|
||||
} else {
|
||||
this.rightsList = this.rightsList.concat(list)
|
||||
p.total = res.data.total || 0
|
||||
}
|
||||
this.total = res.data.total || 0
|
||||
this.setList(tab, merged)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
if (seq !== p.reqSeq) return
|
||||
p.loading = false
|
||||
})
|
||||
},
|
||||
loadMore() {
|
||||
if (this.rightsList.length < this.total && !this.loading) {
|
||||
this.pageNo++
|
||||
this.loadRightsList()
|
||||
}
|
||||
loadRightsList() {
|
||||
this.loadList(0, true)
|
||||
},
|
||||
switchTab(index) {
|
||||
this.currentTab = index
|
||||
if (index === 1 && this.appointmentList.length === 0) {
|
||||
this.appointmentPageNo = 1
|
||||
this.loadAppointmentList()
|
||||
}
|
||||
if (index === 2 && this.checkList.length === 0) {
|
||||
this.checkPageNo = 1
|
||||
this.loadCheckList()
|
||||
}
|
||||
},
|
||||
loadAppointmentList() {
|
||||
const cardNumber = uni.getStorageSync('cardNumber') || ''
|
||||
if (this.appointmentLoading) return
|
||||
this.appointmentLoading = true
|
||||
this.$u.api.getAppointmentList({
|
||||
pageNo: this.appointmentPageNo,
|
||||
pageSize: this.pageSize,
|
||||
cardNumber: cardNumber
|
||||
}).then(res => {
|
||||
if (res.errcode === 0 && res.data) {
|
||||
const list = res.data.list || []
|
||||
if (this.appointmentPageNo === 1) {
|
||||
this.appointmentList = list
|
||||
} else {
|
||||
this.appointmentList = this.appointmentList.concat(list)
|
||||
}
|
||||
this.appointmentTotal = res.data.total || 0
|
||||
}
|
||||
}).finally(() => {
|
||||
this.appointmentLoading = false
|
||||
})
|
||||
},
|
||||
loadAppointmentMore() {
|
||||
if (this.appointmentList.length < this.appointmentTotal && !this.appointmentLoading) {
|
||||
this.appointmentPageNo++
|
||||
this.loadAppointmentList()
|
||||
}
|
||||
},
|
||||
loadCheckList() {
|
||||
const cardNumber = uni.getStorageSync('cardNumber') || ''
|
||||
if (this.checkLoading) return
|
||||
this.checkLoading = true
|
||||
this.$u.api.getCheckList({
|
||||
pageNo: this.checkPageNo,
|
||||
pageSize: this.pageSize,
|
||||
cardNumber: cardNumber
|
||||
}).then(res => {
|
||||
if (res.errcode === 0 && res.data) {
|
||||
const list = res.data.list || []
|
||||
if (this.checkPageNo === 1) {
|
||||
this.checkList = list
|
||||
} else {
|
||||
this.checkList = this.checkList.concat(list)
|
||||
}
|
||||
this.checkTotal = res.data.total || 0
|
||||
}
|
||||
}).finally(() => {
|
||||
this.checkLoading = false
|
||||
})
|
||||
},
|
||||
loadCheckMore() {
|
||||
if (this.checkList.length < this.checkTotal && !this.checkLoading) {
|
||||
this.checkPageNo++
|
||||
this.loadCheckList()
|
||||
// xuchao: 首次进入该 Tab 才拉首页;已有数据保留各自游标继续分页
|
||||
if (this.listOf(index).length === 0 && !this.pager[index].loading) {
|
||||
this.loadList(index, true)
|
||||
}
|
||||
},
|
||||
onSearch() {
|
||||
this.pageNo = 1
|
||||
this.loadRightsList()
|
||||
this.loadList(0, true)
|
||||
},
|
||||
// xuchao: 换筛选条件即回第 1 页重查(关键词保持不变,两者为 AND)
|
||||
onFilterChange(e) {
|
||||
this.districtId = e.districtId
|
||||
this.category = e.category
|
||||
this.loadList(0, true)
|
||||
},
|
||||
goDetail(item) {
|
||||
uni.navigateTo({
|
||||
@@ -670,7 +736,7 @@
|
||||
.banner-title {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
@@ -767,11 +833,20 @@
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
/* xuchao: Tab + 搜索 + 筛选条一起吸顶。padding-top 替代原 tab-bar 的 margin-top,
|
||||
否则吸顶后顶部会留一条能透出列表内容的缝隙;z-index 需高于筛选遮罩(90) */
|
||||
.info-sticky {
|
||||
background-color: #ffffff;
|
||||
padding-top: 12px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* Tab 切换 */
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
margin-top: 12px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
@@ -806,7 +881,8 @@
|
||||
|
||||
/* 搜索栏 */
|
||||
.search-area {
|
||||
padding: 12px;
|
||||
/* xuchao: 底部留白交给筛选条的 20rpx 上内边距,保证三段间距一致 */
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
@@ -814,6 +890,10 @@
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
background-color: #ffffff;
|
||||
/* xuchao: 头部改白底后,白色搜索框在白色吸顶栏上必须描边才分得出来;
|
||||
显式 border-box 保证加边框后高度仍是 36px */
|
||||
border: 1px solid #e5e5ea;
|
||||
box-sizing: border-box;
|
||||
border-radius: 18px;
|
||||
padding: 0 12px;
|
||||
gap: 8px;
|
||||
@@ -826,12 +906,23 @@
|
||||
}
|
||||
|
||||
/* 权益列表 */
|
||||
/* xuchao: 原 scroll-view 下 gap 不生效(卡片被包在 scroll-view-content 内),
|
||||
改普通容器后去掉 gap,卡片间距仍由 .rights-card 的 margin-bottom 提供,视觉不变 */
|
||||
.list-area {
|
||||
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* xuchao: 「待使用」列表顶部 24rpx(=12px) 灰底间隔,与卡片之间的间距一致,
|
||||
也与筛选条和列表之间的 12px 对齐;只加在这个 Tab,不影响「已预约/已使用」 */
|
||||
.list-area--todo {
|
||||
padding-top: 24rpx;
|
||||
}
|
||||
|
||||
.nomore-area {
|
||||
width: 100%;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.rights-card {
|
||||
@@ -844,12 +935,38 @@
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
.card-thumb {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* xuchao: image 由 thumb 裁圆角,自身不再设圆角 */
|
||||
.card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding: 1px 5px;
|
||||
border-radius: 0 0 6px 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
color: #ffffff;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
width: 490rpx;
|
||||
@@ -903,26 +1020,6 @@
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.no-more {
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.no-more-text {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -962,25 +1059,34 @@
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* 底部返回按钮 */
|
||||
.back-btn-bottom {
|
||||
position: fixed;
|
||||
left: 24px;
|
||||
bottom: 50px;
|
||||
/* xuchao: 顶部返回导航条(auth状态) */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
z-index: 10;
|
||||
height: 56px;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
.nav-back {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-text-bottom {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #1a1818;
|
||||
padding: 0 56px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
+230
-32
@@ -1,5 +1,13 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="page" v-if="store">
|
||||
<!-- xuchao: 顶部导航(返回+页面名称) -->
|
||||
<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">{{ store.name }}</text>
|
||||
</view>
|
||||
<!-- 门店信息卡片(信息+地址合并容器) -->
|
||||
<view class="store-card">
|
||||
<view class="store-main">
|
||||
@@ -7,7 +15,7 @@
|
||||
<view class="store-info">
|
||||
<text class="store-name">{{ store.name }}</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 class="divider"></view>
|
||||
@@ -20,58 +28,178 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 原价(内容取商铺门票信息字段) -->
|
||||
<view class="discount-section" v-if="ticketInfoList.length">
|
||||
<!-- 商户电话(取商铺客服电话字段,多个用,分隔,点击拨号) -->
|
||||
<view class="discount-section" v-if="servicePhoneList.length">
|
||||
<view class="section-title">
|
||||
<text class="discount-title">原价</text>
|
||||
<u-icon name="phone-fill" color="#1296DB" size="34"></u-icon>
|
||||
<text class="discount-title">商户电话</text>
|
||||
</view>
|
||||
<view class="discount-list">
|
||||
<text class="discount-item">
|
||||
<text v-for="(p, i) in servicePhoneList" :key="i" class="phone-link"
|
||||
@click="callPhone(p)">{{ i > 0 ? ',' : '' }}{{ p }}</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息(仅商户折扣板块展示,内容取商铺门票信息字段) -->
|
||||
<view class="discount-section" v-if="!isVenue && ticketInfoList.length">
|
||||
<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="discount-list">
|
||||
<text class="discount-item" v-for="(item, index) in ticketInfoList" :key="index">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商户优惠 -->
|
||||
<view class="discount-section">
|
||||
<!-- 文旅场馆显示「使用说明」(1001板块备注),商户折扣显示「商户优惠」(1002板块备注) -->
|
||||
<view class="discount-section" v-if="remarkList.length">
|
||||
<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>
|
||||
<text class="discount-title">{{ isVenue ? '使用说明' : '商户优惠' }}</text>
|
||||
</view>
|
||||
<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 class="back-btn" @click="goBack">
|
||||
<image class="back-icon" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_back.png" mode="aspectFit"></image>
|
||||
<text class="back-text">返回上一页</text>
|
||||
<!-- 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>
|
||||
<!-- xuchao: 门店不存在或加载失败时的提示态,避免纯空白 -->
|
||||
<view class="page" v-else-if="loaded">
|
||||
<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="load-failed">
|
||||
<text class="load-failed-text">门店信息加载失败,该门店可能不存在或已下架</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PETROL_SHOP_ID, bizOk, bizData } from '@/common/petrolVoucher.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
store: null
|
||||
store: null,
|
||||
loaded: false,
|
||||
detailType: '1',
|
||||
shopId: '',
|
||||
voucher: null // xuchao: 石油券最新订单状态(statusCode 语义见 common/petrolVoucher.js)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// xuchao: 入口板块:type=2 商户折扣,其余(含缺省)按文旅场馆渲染
|
||||
isVenue() {
|
||||
return this.detailType !== '2'
|
||||
},
|
||||
isPetrol() {
|
||||
// xuchao: 业务调整:该商铺不再需要特殊购买处理,前端入口整体隐藏;券页面/接口/SDK注入均保留,恢复时去掉下面的 return false 即可
|
||||
return false
|
||||
// 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() {
|
||||
if (!this.store || !this.store.ticketInfo) return []
|
||||
return this.store.ticketInfo.split('\n')
|
||||
},
|
||||
discountList() {
|
||||
if (!this.store || !this.store.merchantDiscount) return []
|
||||
return this.store.merchantDiscount.split('\n')
|
||||
remarkList() {
|
||||
if (!this.store) return []
|
||||
const text = this.isVenue ? this.store.usageNote : this.store.merchantDiscount
|
||||
if (!text) return []
|
||||
return text.split('\n')
|
||||
},
|
||||
// xuchao: 客服电话列表:按常见分隔符切分;无分隔符连写的多个11位手机号也自动拆开
|
||||
servicePhoneList() {
|
||||
if (!this.store || !this.store.servicePhone) return []
|
||||
const parts = String(this.store.servicePhone).split(/[,,;;、\s\n]+/).filter(Boolean)
|
||||
const out = []
|
||||
parts.forEach(p => {
|
||||
if (p.length > 11 && /^1[3-9]\d{9}$/.test(p.slice(0, 11))) {
|
||||
let rest = p
|
||||
const segs = []
|
||||
while (rest.length >= 11 && /^1[3-9]\d{9}$/.test(rest.slice(0, 11))) {
|
||||
segs.push(rest.slice(0, 11))
|
||||
rest = rest.slice(11)
|
||||
}
|
||||
if (rest) segs[segs.length - 1] += rest
|
||||
if (segs.length > 1) {
|
||||
out.push(...segs)
|
||||
return
|
||||
}
|
||||
}
|
||||
out.push(p)
|
||||
})
|
||||
return out
|
||||
}
|
||||
},
|
||||
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: 拉取石油券最新订单状态(未登录也调用:作为后端服务探活,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: 点击某个商户电话唤起拨号(多个号码时逐个可点)
|
||||
callPhone(phone) {
|
||||
if (!phone) return
|
||||
uni.makePhoneCall({ phoneNumber: String(phone) })
|
||||
},
|
||||
loadDetail(shopId) {
|
||||
const loc = uni.getStorageSync('lng') && uni.getStorageSync('lat')
|
||||
? { lng: uni.getStorageSync('lng'), lat: uni.getStorageSync('lat') }
|
||||
@@ -85,10 +213,19 @@ export default {
|
||||
if (res.errcode === 0 && res.data) {
|
||||
this.store = res.data
|
||||
}
|
||||
this.loaded = true
|
||||
}).catch(() => {
|
||||
this.loaded = true
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
// xuchao: 直接通过链接进入(无历史栈)时回到首页,避免返回无响应
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -96,9 +233,9 @@ export default {
|
||||
|
||||
<style>
|
||||
.page {
|
||||
height: 100vh;
|
||||
/* xuchao: 顶部导航条占用 56px,改为 min-height 让长内容正常滚动,避免底部被裁切 */
|
||||
min-height: 100vh;
|
||||
background-color: #f2f2f7;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 门店卡片(信息+地址合并容器) */
|
||||
@@ -183,7 +320,7 @@ export default {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 商户优惠 */
|
||||
/* 使用说明 */
|
||||
.discount-section {
|
||||
background-color: #ffffff;
|
||||
margin: 12px;
|
||||
@@ -221,24 +358,85 @@ export default {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 返回按钮 */
|
||||
.back-btn {
|
||||
position: fixed;
|
||||
left: 24px;
|
||||
bottom: 50px;
|
||||
/* xuchao: 可点击拨号的电话样式 */
|
||||
.phone-link {
|
||||
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;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
/* xuchao: 加载失败提示态 */
|
||||
.load-failed {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 80px 24px;
|
||||
}
|
||||
|
||||
.back-text {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
.load-failed-text {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* xuchao: 顶部返回导航条 */
|
||||
.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;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
||||
+106
-17
@@ -13,31 +13,46 @@
|
||||
<view class="search-btn" @click="onSearch">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- xuchao: 所属县区 + 所属类型筛选,选项与联动条数由列表接口一并返回 -->
|
||||
<hhrs-filter-bar :districts="filters.districts" :categories="filters.categories"
|
||||
:district-id="districtId" :category="category" @change="onFilterChange" />
|
||||
</view>
|
||||
|
||||
<!-- 场馆列表 -->
|
||||
<scroll-view class="list-area" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
|
||||
<view class="venue-card" v-for="item in list" :key="item.shopId" @click="goDetail(item)">
|
||||
<view class="list-area">
|
||||
<view class="venue-card" v-for="item in list" :key="item.shopId">
|
||||
<view class="card-thumb">
|
||||
<image class="card-img" :src="item.image" mode="aspectFill" />
|
||||
<!-- xuchao: 左上角所属地区角标(districtName 来自商铺「所在地区」,未录入则不显示) -->
|
||||
<text class="card-area" v-if="item.districtName">{{ shortDistrict(item.districtName) }}</text>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.name }}</text>
|
||||
<text class="card-category">{{ item.category }}</text>
|
||||
<view class="card-bottom">
|
||||
<text class="card-address">{{ item.address }}</text>
|
||||
</view>
|
||||
<view class="card-distance" v-if="item.distance !== null">
|
||||
<u-icon name="map" color="#999999" size="24"></u-icon>
|
||||
<text class="distance-text">{{ item.distance < 1 ? Math.round(item.distance * 1000) + 'm' : Math.round(item.distance) + 'km' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="hasScrolled" class="nomore-area">
|
||||
<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :loadmore-text="''" :nomore-text="'我也是有底线的'" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-if="hasScrolled" class="nomore-area">
|
||||
<u-loadmore :status="loadStatus" :load-text="{ loadmore: '', loading: '加载中...', nomore: '我也是有底线的' }" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// xuchao: 角标区县简称(后端返回的是行政区划全称)
|
||||
import { shortDistrict } from '@/common/district.js'
|
||||
// xuchao: 县区 + 类型筛选条,三个列表页共用(pages.json 的 easycom 只给 u- 前缀配了规则,这里显式引入)
|
||||
import HhrsFilterBar from '@/components/hhrs-filter-bar/hhrs-filter-bar.vue'
|
||||
|
||||
export default {
|
||||
components: { HhrsFilterBar },
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
@@ -49,7 +64,12 @@ export default {
|
||||
lng: '',
|
||||
lat: '',
|
||||
loadStatus: 'loadmore',
|
||||
hasScrolled: false
|
||||
hasScrolled: false,
|
||||
reqSeq: 0,
|
||||
// xuchao: 筛选条件与面板选项(选项由列表响应带回)
|
||||
districtId: '',
|
||||
category: '',
|
||||
filters: { districts: [], categories: [] }
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@@ -62,9 +82,15 @@ export default {
|
||||
}
|
||||
this.loadList()
|
||||
},
|
||||
// xuchao: 改用页面级触底加载(scroll-view 无固定高度时 scrolltolower 永不触发)
|
||||
onReachBottom() {
|
||||
this.loadMore()
|
||||
},
|
||||
methods: {
|
||||
shortDistrict,
|
||||
loadList() {
|
||||
if (this.loading) return
|
||||
// xuchao: 请求序号 —— 新请求直接取代在途请求,过期响应整体丢弃(修复搜索竞态,故不再用 loading 提前 return)
|
||||
const seq = ++this.reqSeq
|
||||
this.loading = true
|
||||
this.loadStatus = 'loading'
|
||||
const params = {
|
||||
@@ -75,8 +101,16 @@ export default {
|
||||
}
|
||||
if (this.lng) params.lng = this.lng
|
||||
if (this.lat) params.lat = this.lat
|
||||
if (this.districtId) params.districtId = this.districtId
|
||||
if (this.category) params.category = this.category
|
||||
this.$u.api.getStoreList(params).then(res => {
|
||||
if (seq !== this.reqSeq) return
|
||||
if (res.errcode === 0 && res.data) {
|
||||
// xuchao: 面板选项随列表一起回来(后端已按关键词与另一维度算好条数)
|
||||
this.filters = {
|
||||
districts: res.data.districts || [],
|
||||
categories: res.data.categories || []
|
||||
}
|
||||
const list = res.data.list || []
|
||||
if (this.pageNo === 1) {
|
||||
this.list = list
|
||||
@@ -84,8 +118,11 @@ export default {
|
||||
this.list = this.list.concat(list)
|
||||
}
|
||||
this.total = res.data.total || 0
|
||||
// xuchao: 本页不足一页即已到尾部,钉住 total,防止 total 中途变大时空翻
|
||||
if (list.length < this.pageSize) this.total = this.list.length
|
||||
}
|
||||
}).finally(() => {
|
||||
if (seq !== this.reqSeq) return
|
||||
this.loading = false
|
||||
if (this.list.length === 0) {
|
||||
this.loadStatus = 'nomore'
|
||||
@@ -112,13 +149,16 @@ export default {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
},
|
||||
goDetail(item) {
|
||||
uni.navigateTo({ url: '/pages/venue/detail?id=' + item.shopId })
|
||||
},
|
||||
onSearch() {
|
||||
this.pageNo = 1
|
||||
this.list = []
|
||||
this.loadList()
|
||||
},
|
||||
// xuchao: 换筛选条件即回第 1 页重查(关键词保持不变,两者为 AND)
|
||||
onFilterChange(e) {
|
||||
this.districtId = e.districtId
|
||||
this.category = e.category
|
||||
this.onSearch()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -133,7 +173,11 @@ export default {
|
||||
|
||||
.search-area {
|
||||
background-color: #ffffff;
|
||||
padding: 6px 12px;
|
||||
padding: 6px 12px 0;
|
||||
/* xuchao: 滚动时固定在页面顶部;z-index 高于筛选遮罩(90),保证面板与选中态不被压住 */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-row {
|
||||
@@ -184,6 +228,7 @@ export default {
|
||||
}
|
||||
|
||||
.list-area {
|
||||
/* xuchao: 顶部 12px 必须是页面灰底(不能放进头部的白底里),否则与白色卡片连成一片看不出间隔 */
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@@ -193,47 +238,91 @@ export default {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #f2f2f7;
|
||||
border-radius: 6px;
|
||||
width: 702rpx;
|
||||
padding: 24px 12px;
|
||||
gap: 12px;
|
||||
box-shadow: 0 2px 3px #f2f2f7;
|
||||
margin-bottom: 12px;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
.card-thumb {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* xuchao: image 由 thumb 裁圆角,自身不再设圆角 */
|
||||
.card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding: 1px 5px;
|
||||
border-radius: 0 0 6px 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
color: #ffffff;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
/* xuchao: flex 项默认 min-width:auto,nowrap 地址会把列宽撑破卡片;置 0 后子元素在实宽内省略 */
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-category {
|
||||
font-size: 14px;
|
||||
color: #727272;
|
||||
margin-top: 8px;
|
||||
/* xuchao: 分类为空也预留一行高度,防止卡片内容底部对齐时名称上下跳动 */
|
||||
min-height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-address {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #727272;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-distance {
|
||||
|
||||
+79
-25
@@ -8,12 +8,12 @@
|
||||
<text class="back-text">返回</text>
|
||||
</view>
|
||||
<view class="banner-header">
|
||||
<image class="banner-icon" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/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>
|
||||
</view>
|
||||
<text class="banner-subtitle">总计 10,000份权益包,分三期公证抽取</text>
|
||||
<text class="banner-subtitle">总计 10,000份权益包,全程公证抽取</text>
|
||||
<view class="stats-card">
|
||||
<image class="stats-gift" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/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-number">{{ totalWinners.toLocaleString() }}</text>
|
||||
<text class="stats-label">名幸运持卡人</text>
|
||||
@@ -78,9 +78,14 @@ export default {
|
||||
currentTab: 0,
|
||||
tabs: [],
|
||||
winnerData: {},
|
||||
pageNo: 1,
|
||||
// xuchao: 页码改为按期维护(原单一 pageNo 在切期后会被沿用,导致同一页重复追加/跳页)
|
||||
pageNos: {},
|
||||
pageSize: 10,
|
||||
// xuchao: 搜索触发的全量拉取用大页尺寸(列表接口仅支持分页参数,无姓名检索)
|
||||
pageSizeFull: 500,
|
||||
totals: {},
|
||||
fullLoaded: {},
|
||||
loadingAll: {},
|
||||
totalWinners: 0,
|
||||
inFlight: 0,
|
||||
loadStatusMap: {},
|
||||
@@ -103,6 +108,15 @@ export default {
|
||||
return this.loadStatusMap[this.currentTab] || 'nomore'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// xuchao: 输入关键字即后台拉全当期名单,修复"没翻到的人物搜索无结果"
|
||||
keyword(val) {
|
||||
clearTimeout(this._kwTimer)
|
||||
if (val && val.trim() && !this.fullLoaded[this.currentTab]) {
|
||||
this._kwTimer = setTimeout(() => this.loadAll(this.currentTab), 400)
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadDates()
|
||||
},
|
||||
@@ -123,11 +137,13 @@ export default {
|
||||
data[index] = []
|
||||
})
|
||||
this.winnerData = data
|
||||
// xuchao: 预置各期 key,保证 totals/loadStatusMap 的响应式
|
||||
// xuchao: 预置各期 key,保证 totals/pageNos/loadStatusMap 的响应式
|
||||
this.totals = {}
|
||||
this.pageNos = {}
|
||||
this.loadStatusMap = {}
|
||||
dates.forEach((date, index) => {
|
||||
this.$set(this.totals, index, 0)
|
||||
this.$set(this.pageNos, index, 1)
|
||||
this.$set(this.loadStatusMap, index, 'loading')
|
||||
})
|
||||
// xuchao: 预取各期第一页,汇总已产生总人数
|
||||
@@ -142,21 +158,26 @@ export default {
|
||||
loadWinnerList(tabIndex, pageNo, allowConcurrent) {
|
||||
if (!this.tabs[tabIndex]) return
|
||||
if (this.inFlight > 0 && !allowConcurrent) return
|
||||
// xuchao: 本期页码独立计算,缺省续拉该期下一页
|
||||
const page = pageNo || (this.pageNos[tabIndex] || 1)
|
||||
this.inFlight++
|
||||
this.$set(this.loadStatusMap, tabIndex, 'loading')
|
||||
const drawDate = this.tabs[tabIndex].date
|
||||
this.$u.api.getWinnerList({
|
||||
pageNo: pageNo || this.pageNo,
|
||||
pageNo: page,
|
||||
pageSize: this.pageSize,
|
||||
drawDate: drawDate
|
||||
}).then(res => {
|
||||
// xuchao: 全量拉取已就绪/进行中时,旧的10条分页响应直接丢弃,避免覆盖全量列表
|
||||
if (this.fullLoaded[tabIndex] || this.loadingAll[tabIndex]) return
|
||||
if (res.errcode === 0 && res.data) {
|
||||
const list = res.data.list || []
|
||||
const page = pageNo || this.pageNo
|
||||
const prev = this.winnerData[tabIndex] || []
|
||||
this.$set(this.pageNos, tabIndex, page)
|
||||
if (page === 1) {
|
||||
this.$set(this.winnerData, tabIndex, list)
|
||||
} else {
|
||||
this.winnerData[tabIndex] = this.winnerData[tabIndex].concat(list)
|
||||
this.$set(this.winnerData, tabIndex, prev.concat(list))
|
||||
}
|
||||
this.$set(this.totals, tabIndex, res.data.total || 0)
|
||||
// xuchao: 各期总人数求和,用于顶部幸运持卡人数
|
||||
@@ -164,23 +185,61 @@ export default {
|
||||
}
|
||||
}).finally(() => {
|
||||
this.inFlight--
|
||||
const len = this.winnerData[tabIndex].length
|
||||
const len = (this.winnerData[tabIndex] || []).length
|
||||
const total = this.totals[tabIndex] || 0
|
||||
this.$set(this.loadStatusMap, tabIndex, len === 0 || len >= total ? 'nomore' : 'loadmore')
|
||||
})
|
||||
},
|
||||
loadMore() {
|
||||
const total = this.totals[this.currentTab] || 0
|
||||
if (this.winnerData[this.currentTab].length < total && this.inFlight === 0) {
|
||||
this.pageNo++
|
||||
this.loadWinnerList(this.currentTab)
|
||||
const tab = this.currentTab
|
||||
if (this.loadingAll[tab]) return
|
||||
const total = this.totals[tab] || 0
|
||||
const len = (this.winnerData[tab] || []).length
|
||||
if (len < total && this.inFlight === 0) {
|
||||
this.loadWinnerList(tab, (this.pageNos[tab] || 1) + 1)
|
||||
}
|
||||
},
|
||||
// xuchao: 按大页把当期名单一次拉全,搜索即可命中未翻到的人;完成后整期替换并标记 fullLoaded
|
||||
loadAll(tabIndex) {
|
||||
const tab = this.tabs[tabIndex]
|
||||
if (!tab || this.fullLoaded[tabIndex] || this.loadingAll[tabIndex]) return
|
||||
this.$set(this.loadingAll, tabIndex, true)
|
||||
this.$set(this.loadStatusMap, tabIndex, 'loading')
|
||||
const acc = []
|
||||
const pull = (pageNo) => this.$u.api.getWinnerList({
|
||||
pageNo: pageNo,
|
||||
pageSize: this.pageSizeFull,
|
||||
drawDate: tab.date
|
||||
}).then(res => {
|
||||
if (res.errcode !== 0 || !res.data) return
|
||||
const list = res.data.list || []
|
||||
const total = res.data.total || 0
|
||||
acc.push(...list)
|
||||
this.$set(this.totals, tabIndex, total)
|
||||
if (list.length > 0 && acc.length < total && pageNo < 50) return pull(pageNo + 1)
|
||||
})
|
||||
pull(1).then(() => {
|
||||
if (acc.length > 0) {
|
||||
this.$set(this.winnerData, tabIndex, acc)
|
||||
this.$set(this.fullLoaded, tabIndex, true)
|
||||
this.$set(this.pageNos, tabIndex, Math.ceil(acc.length / this.pageSizeFull))
|
||||
}
|
||||
this.totalWinners = Object.values(this.totals).reduce((s, n) => s + n, 0)
|
||||
}).catch(() => {
|
||||
// 拉全失败静默降级为已加载部分可搜
|
||||
}).finally(() => {
|
||||
this.$set(this.loadingAll, tabIndex, false)
|
||||
const len = (this.winnerData[tabIndex] || []).length
|
||||
const total = this.totals[tabIndex] || 0
|
||||
this.$set(this.loadStatusMap, tabIndex, len === 0 || len >= total ? 'nomore' : 'loadmore')
|
||||
})
|
||||
},
|
||||
switchTab(index) {
|
||||
this.currentTab = index
|
||||
this.pageNo = 1
|
||||
if (this.winnerData[index].length === 0) {
|
||||
this.loadWinnerList(index, 1)
|
||||
// xuchao: 不再重置全局 pageNo(各期游标自带);空列表补拉首页时允许并发,
|
||||
// 避免首屏预取仍在途时切期被丢弃后一直显示“暂无数据”
|
||||
if ((this.winnerData[index] || []).length === 0) {
|
||||
this.loadWinnerList(index, 1, true)
|
||||
} else {
|
||||
const total = this.totals[index] || 0
|
||||
this.$set(this.loadStatusMap, index, this.winnerData[index].length >= total ? 'nomore' : 'loadmore')
|
||||
@@ -196,7 +255,8 @@ export default {
|
||||
}
|
||||
},
|
||||
onSearch() {
|
||||
// 前端过滤,无需重新请求
|
||||
// xuchao: 点搜索立即确保当期全量已拉取(过滤仍在前端本地完成)
|
||||
if (!this.fullLoaded[this.currentTab]) this.loadAll(this.currentTab)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -246,8 +306,7 @@ export default {
|
||||
|
||||
.banner-title {
|
||||
color: #0D387D;
|
||||
font-family: 'Source Han Serif SC VF', 'Source Han Serif SC', serif;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
line-height: normal;
|
||||
letter-spacing: 0px;
|
||||
@@ -256,7 +315,6 @@ export default {
|
||||
|
||||
.banner-subtitle {
|
||||
color: #8E8E93;
|
||||
font-family: 'Source Han Serif SC VF', 'Source Han Serif SC', serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: normal;
|
||||
@@ -281,8 +339,6 @@ export default {
|
||||
|
||||
.stats-label {
|
||||
color: #FFFFFF;
|
||||
font-family: 'Source Han Sans CN', 'Source Han Sans SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: normal;
|
||||
letter-spacing: 0px;
|
||||
@@ -291,8 +347,7 @@ export default {
|
||||
|
||||
.stats-number {
|
||||
flex: 1;
|
||||
font-family: 'Source Han Serif SC VF', 'Source Han Serif SC', serif;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
font-size: 36px;
|
||||
line-height: normal;
|
||||
letter-spacing: 0px;
|
||||
@@ -323,7 +378,6 @@ export default {
|
||||
|
||||
.tab-label {
|
||||
color: #B1B1B1;
|
||||
font-family: 'Source Han Serif SC VF', 'Source Han Serif SC', serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user