Compare commits

..
2 Commits
Author SHA1 Message Date
jacobxu666andClaude Fable 5 e86ce2c1eb fix: 核销验券功能修复与首页公告栏改版
- 首页:金刚区「抖音核销」改名「核销验券」;公告栏移至金刚区下方并支持两条同时展示,修复行距与上下间距过近
- 核销页:「抖音」文案统一改为「第三方」;券号区新增第三方平台图标行;修复 `await uni.request` 返回任务句柄(非响应体)导致的「获取凭证失败」,改回调式 rawRequest 封装;无凭证时也弹温馨提示
- 购买页:删除支付取消/失败分支引用 try 作用域外变量 outTradeNo 的失效跳转
- 类型:VoucherItem 补 product_id 可选字段,消除存量类型报错
- 导航栏标题同步改为「第三方核销」

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-09-17 13:49:11 +08:00
jacobxu666andClaude Fable 5 32f3db7e85 feat: 首页弹窗广告(HOME_POPUP 类型,每次冷启动弹一次,点击跳内部页面,tabBar 页自动 switchTab,失败 toast 兜底)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-09-17 12:01:12 +08:00
5 changed files with 267 additions and 67 deletions
+2
View File
@@ -25,6 +25,8 @@ export interface VoucherItem {
status: number
mobile: string
product_name: string
// xuchao: 小泥人真实响应带此字段(前端按 product_id 过滤本渠道券码),mock 数据可不填,故设为可选
product_id?: string
merchant_name: string
voucherRealnameInfo?: VoucherRealnameInfo[]
}
+1 -3
View File
@@ -211,10 +211,8 @@ async function confirmBuy() {
uni.redirectTo({ url: `/packages/user/pages/order/detail?orderId=${outTradeNo}` })
}, 1500)
} catch (err: any) {
// xuchao: 取消/失败后仅提示,停留在购买页(原"跳订单列表"引用了 try 作用域外的 outTradeNo,实为失效死代码,已删)
uni.showToast({ title: err?.errMsg?.includes('cancel') ? '已取消支付' : '支付失败,请重试', icon: 'none' })
setTimeout(() => {
uni.redirectTo({ url: `/packages/user/pages/order/list?outTradeNo=${outTradeNo}` })
}, 1500)
} finally {
paying.value = false
}
+54 -12
View File
@@ -4,16 +4,23 @@
<image class="hero-bg" src="https://aliyunoss.hn12301.net/pxmall/px_douyin.png" mode="widthFix" />
<scroll-view scroll-y class="body">
<!-- 第 1 步:确认抖音下单信息 -->
<!-- 第 1 步:确认第三方下单信息 -->
<view class="section">
<view class="step-head">
<text class="step-no">第 1 步:</text>
<text class="step-title">确认抖音下单信息</text>
<text class="step-title">确认第三方下单信息</text>
</view>
<text class="step-desc">
请确认在抖音平台认证的号码与微信手机号一致,如号码不一致请在抖音订单详情页面复制券号,并粘贴在券号输入框
请确认在第三方平台认证的号码与微信手机号一致,如号码不一致请在第三方订单详情页面复制券号,并粘贴在券号输入框
</text>
<!-- xuchao: 支持的第三方出票平台图标(设计稿 50x50、间隔 12px,rpx 按 2 倍换算) -->
<view class="platform-logos">
<image class="platform-logo" src="https://aliyunoss.hn12301.net/pxmall/px_logo_dy.png" mode="aspectFit" />
<image class="platform-logo" src="https://aliyunoss.hn12301.net/pxmall/px_logo_dz.png" mode="aspectFit" />
<image class="platform-logo" src="https://aliyunoss.hn12301.net/pxmall/px_logo_mt.png" mode="aspectFit" />
</view>
<view class="field">
<text class="field-label">当前微信手机号:</text>
<view class="field-box">
@@ -22,7 +29,7 @@
</view>
<view class="field">
<text class="field-label">抖音的订单券号:</text>
<text class="field-label">第三方的订单券号:</text>
<!-- 有券号:按 code 分组单选列表 -->
<template v-if="hasVoucher">
@@ -34,7 +41,7 @@
@tap="selectVoucher(group)"
>
<text class="code-text">
抖音订单号{{ index + 1 }}:{{ group.code }}(可激活次数{{ group.count }}次)
第三方订单号{{ index + 1 }}:{{ group.code }}(可激活次数{{ group.count }}次)
</text>
<view class="radio" :class="{ 'radio--on': selectedCode === group.code }">
<view v-if="selectedCode === group.code" class="radio-dot" />
@@ -176,11 +183,11 @@
</view>
<view class="no-voucher-reason">
<text class="no-voucher-num">1.</text>
<text>抖音购卡的手机号和当前登录手机号码不一致</text>
<text>第三方购卡的手机号和当前登录手机号码不一致</text>
</view>
<view class="no-voucher-reason">
<text class="no-voucher-num">2.</text>
<text>抖音购卡的订单已经核销完成了</text>
<text>第三方购卡的订单已经核销完成了</text>
</view>
<view class="no-voucher-reason">
<text class="no-voucher-num">3.</text>
@@ -248,6 +255,27 @@ import type { BannerItem } from '../../../api/types'
const userStore = useUserStore()
// xuchao: 回调式 uni.request Promise 包装。当前 uni-app alpha 运行时下 `await uni.request()`
// 返回的是 RequestTask(仅含 uniqueId 字段)而非 HTTP 响应,res.data 恒为 undefined,
// 导致「获取凭证失败」;本页所有第三方直连请求统一改走此封装(对齐 api/request.ts 模式)。
function rawRequest(options: {
url: string
method?: 'GET' | 'POST'
data?: object
header?: Record<string, string>
}): Promise<UniApp.RequestSuccessCallbackResult> {
return new Promise((resolve, reject) => {
uni.request({
url: options.url,
method: options.method || 'GET',
data: options.data as AnyObject,
header: options.header,
success: (res: UniApp.RequestSuccessCallbackResult) => resolve(res),
fail: (err: UniApp.GeneralCallbackResult) => reject(new Error(err.errMsg || 'request:fail')),
})
})
}
const phone = ref((uni.getStorageSync('phone') as string) || '')
const maskedPhone = computed(() =>
phone.value ? phone.value.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '-'
@@ -364,7 +392,7 @@ onShow(async () => {
async function fetchOAuthToken() {
try {
console.log('[douyin] fetching OAuth token...')
const res = await uni.request({
const res = await rawRequest({
url: 'https://www.xiaoniren.cn/openapi/oauth2-token/authorize?client_id=uwfdRQD0CjHrz0oY&client_key=186c07637ed40ef9ef0a2289b188ac',
method: 'GET',
})
@@ -389,10 +417,12 @@ async function fetchVouchers() {
if (!phone.value || !accessToken.value) {
vouchers.value = []
vouchersLoaded.value = true
// xuchao: 凭证获取失败时无券可展示,同样弹温馨提示引导手动输入券码(此前静默无提示)
showNoVoucher.value = true
return
}
try {
const res = await uni.request({
const res = await rawRequest({
url: `https://www.xiaoniren.cn/openapi/ticket/voucher-list?status=1&mobile=${phone.value}&product_id=59221&page=1&per-page=100`,
method: 'GET',
header: {
@@ -425,7 +455,7 @@ async function verifyInputCode() {
}
uni.showLoading({ title: '验证中...', mask: true })
try {
const res = await uni.request({
const res = await rawRequest({
url: `https://www.xiaoniren.cn/openapi/ticket/voucher-list?status=1&code=${encodeURIComponent(code)}&product_id=59221&page=1&per-page=100`,
method: 'GET',
header: {
@@ -496,7 +526,7 @@ async function doActivate() {
uni.showLoading({ title: '核销中...', mask: true })
try {
// 第一步:调后端发卡绑定
const sendRes = await uni.request({
const sendRes = await rawRequest({
url: `${BASE_URL}/open-api/card/sendAndBind`,
method: 'POST',
data: {
@@ -521,7 +551,7 @@ async function doActivate() {
}
// 第二步:验证券码
const validateRes = await uni.request({
const validateRes = await rawRequest({
url: 'https://www.xiaoniren.cn/openapi/ticket/validate',
method: 'POST',
header: {
@@ -720,6 +750,18 @@ function closeNoVoucher() {
color: #ff383c;
line-height: 48rpx;
}
/* xuchao: 券号下方第三方平台图标行(20x20、间隔 12px 的 2 倍 rpx) */
.platform-logos {
display: flex;
flex-direction: row;
align-items: center;
gap: 24rpx;
margin-top: 24rpx;
}
.platform-logo {
width: 100rpx;
height: 100rpx;
}
.field-box {
display: flex;
align-items: center;
+1 -1
View File
@@ -141,7 +141,7 @@
{
"path": "pages/douyin-verify",
"style": {
"navigationBarTitleText": "抖音核销",
"navigationBarTitleText": "第三方核销",
"backgroundColor": "#FFFFFF",
"backgroundColorTop": "#FFFFFF",
"backgroundColorBottom": "#FFFFFF"
+209 -51
View File
@@ -9,37 +9,8 @@
</swiper>
</view>
<scroll-view scroll-y class="main-scroll">
<!-- 公告栏 -->
<view v-if="announcements.length" class="notice animate-fade-in-up stagger-1">
<view class="notice-tag">
<view class="notice-pip animate-pulse" :class="`type-${currentNoticeType}`" />
<text class="notice-label">公告</text>
</view>
<swiper
class="notice-swiper"
vertical
:autoplay="swiperAutoplay"
circular
:interval="3000"
:duration="500"
@change="onNoticeChange"
@touchstart="onNoticeTouchStart"
@touchend="onNoticeTouchEnd"
>
<swiper-item v-for="item in displayNotices" :key="item.id">
<view class="notice-item" @click="openNotice(item)">
<text class="notice-text">{{ item.title }}</text>
</view>
</swiper-item>
</swiper>
<view class="notice-more" @click="goMoreNotice">
<text class="notice-more-text">更多</text>
<view class="chevron" />
</view>
</view>
<!-- 金刚区 -->
<view class="quick-grid animate-fade-in-up stagger-2">
<view class="quick-grid animate-fade-in-up stagger-1">
<view
v-for="item in quickActions"
:key="item.label"
@@ -51,6 +22,28 @@
</view>
</view>
<!-- 公告栏:位于金刚区下方,同时展示两条公告 -->
<view v-if="announcements.length" class="notice animate-fade-in-up stagger-2">
<view class="notice-tag">
<view class="notice-pip animate-pulse" />
<text class="notice-label">公告</text>
</view>
<view class="notice-list">
<view
v-for="item in displayNotices"
:key="item.id"
class="notice-item"
@click="openNotice(item)"
>
<text class="notice-text">{{ item.title }}</text>
</view>
</view>
<view class="notice-more" @click="goMoreNotice">
<text class="notice-more-text">更多</text>
<view class="chevron" />
</view>
</view>
<!-- 旅游卡 — 大字报风格 -->
<view class="promo-wrap animate-fade-in-up stagger-2">
<view class="promo" @click="goCardDetail()">
@@ -125,12 +118,34 @@
</view>
</scroll-view>
<!-- 首页弹窗广告:每次冷启动弹一次,取「首页弹窗」类型排序最前一条 -->
<view
v-if="homePopupVisible"
class="popup-overlay"
:class="{ visible: homePopupAnim }"
@click="closeHomePopup"
>
<image
class="popup-img"
:src="homePopupData?.imageUrl || ''"
mode="widthFix"
@click.stop="onHomePopupClick"
@error="onHomePopupImgError"
/>
<view class="popup-close" @click.stop="closeHomePopup">
<view class="close-x">
<view class="close-line line-a" />
<view class="close-line line-b" />
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { ref, computed, onMounted, nextTick } from 'vue'
import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { post } from '../../api/request'
import { BASE_URL } from '../../config'
import type { BannerItem } from '../../api/types'
@@ -224,6 +239,71 @@ async function fetchSpots() {
}
}
/* ====== 首页弹窗广告(HOME_POPUP) ====== */
// xuchao: 首页为 tabBar 页,实例与进程同生命周期,实例级标志即「每次冷启动弹一次」
let homePopupHandled = false
let homePopupFetching = false
const homePopupData = ref<BannerItem | null>(null)
const homePopupVisible = ref(false)
const homePopupAnim = ref(false)
onShow(() => { checkHomePopup() })
/** 首页每次显示时检查;本次启动已弹过/请求中则跳过;接口失败不置标志,下次进首页重试 */
async function checkHomePopup() {
if (homePopupHandled || homePopupFetching) return
homePopupFetching = true
try {
const list = await post<BannerItem[]>('/mpContent/queryList', { channel: 'pingxiang', type: 'HOME_POPUP' })
homePopupHandled = true
const item = (list || []).find(c => c.imageUrl)
if (item) {
homePopupData.value = item
homePopupVisible.value = true
nextTick(() => { homePopupAnim.value = true })
}
} catch {
// 静默失败,下次进首页再试
} finally {
homePopupFetching = false
}
}
/** 点击广告图:先关弹窗,再跳配置的内部页面 */
function onHomePopupClick() {
const url = homePopupData.value?.linkUrl
homePopupAnim.value = false
homePopupVisible.value = false
if (url) navigateInnerPage(url)
}
/** 关闭弹窗(离场动画结束后移除节点) */
function closeHomePopup() {
homePopupAnim.value = false
setTimeout(() => { homePopupVisible.value = false }, 280)
}
/** 图片加载失败直接移除弹窗 */
function onHomePopupImgError() {
homePopupVisible.value = false
}
// xuchao: tabBar 页 navigateTo 会失败,必须走 switchTab
const TAB_PAGE_PATHS = ['/pages/index/index', '/pages/qrcode/index', '/pages/profile/index']
/** xuchao: 小程序内部页面智能跳转(tabBar 走 switchTab,其余 navigateTo,失败兜底提示) */
function navigateInnerPage(url: string) {
const path = url.startsWith('/') ? url : `/${url}`
if (TAB_PAGE_PATHS.includes(path.split('?')[0])) {
uni.switchTab({ url: path })
return
}
uni.navigateTo({
url: path,
fail: () => uni.showToast({ title: '页面暂未开放', icon: 'none' }),
})
}
onShareAppMessage(() => ({
title: '爱上萍乡旅游年卡',
path: '/pages/index/index',
@@ -249,7 +329,7 @@ function onBannerClick(banner: BannerItem) {
/** 金刚区操作项 */
const quickActions = [
{ label: '抖音核销', icon: 'https://aliyunoss.hn12301.net/pxmall/douyin.png' },
{ label: '核销验券', icon: 'https://aliyunoss.hn12301.net/pxmall/douyin.png' },
{ label: '我要绑卡', icon: 'https://aliyunoss.hn12301.net/pxmall/card.png' },
{ label: '我要预约', icon: 'https://aliyunoss.hn12301.net/pxmall/reserve.png' },
{ label: '我要入园', icon: 'https://aliyunoss.hn12301.net/pxmall/check.png' },
@@ -278,25 +358,13 @@ function onQuickAction(item: { label: string }) {
uni.navigateTo({ url: '/packages/content/pages/faq' })
return
}
if (item.label === '抖音核销') {
if (item.label === '核销验券') {
uni.navigateTo({ url: '/packages/user/pages/douyin-verify' })
return
}
uni.showToast({ title: `${item.label}功能开发中`, icon: 'none' })
}
/** 公告轮播状态 */
const swiperAutoplay = ref(true)
const currentNoticeIndex = ref(0)
const currentNoticeType = computed(() => announcements.value[currentNoticeIndex.value]?.type || 'scenic')
/** @param e - swiper change 事件,`{ detail: { current } }` */
function onNoticeChange(e: { detail: { current: number } }) { currentNoticeIndex.value = e.detail.current }
/** 触摸公告轮播时暂停自动播放 */
function onNoticeTouchStart() { swiperAutoplay.value = false }
/** 触摸结束后恢复自动播放 */
function onNoticeTouchEnd() { swiperAutoplay.value = true }
/** 打开公告详情页 */
function openNotice(item: BannerItem & { typeLabel: string }) {
uni.setStorageSync('notice_detail', {
@@ -413,7 +481,7 @@ function goMore() {
align-items: center;
background: $color-card;
padding: $spacing-2 $spacing-3;
margin: $spacing-2 $spacing-3 0;
margin: 0 $spacing-3 $spacing-3;
border-radius: 24rpx;
box-shadow: $shadow-sm;
}
@@ -433,21 +501,25 @@ function goMore() {
font-weight: $font-weight-medium;
}
.notice-swiper {
/* xuchao: 公告两条同时展示,纵向排列替换原单条轮播 */
.notice-list {
flex: 1;
height: 40rpx;
display: flex;
flex-direction: column;
gap: $spacing-1;
overflow: hidden;
}
.notice-item {
display: flex;
align-items: center;
height: 40rpx;
height: 56rpx;
}
.notice-text {
font-size: $font-size-sm;
color: $color-muted-foreground;
line-height: 40rpx;
line-height: 56rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
@@ -823,4 +895,90 @@ function goMore() {
.main-scroll {
flex: 1;
}
/* ============================================
首页弹窗广告
============================================ */
.popup-overlay {
position: fixed;
inset: 0;
z-index: $z-modal;
background: rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
&.visible {
opacity: 1;
.popup-img {
transform: scale(1);
opacity: 1;
}
.popup-close {
opacity: 1;
transform: scale(1);
}
}
}
/* 广告图:宽 600rpx 固定,高按原图比例(widthFix)自适应 */
.popup-img {
width: 600rpx;
border-radius: $radius-2xl;
overflow: hidden;
transform: scale(0.88);
opacity: 0;
transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.popup-close {
width: 72rpx;
height: 72rpx;
border-radius: $radius-full;
border: 2rpx solid rgba(255, 255, 255, 0.35);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
margin-top: $spacing-4;
flex-shrink: 0;
opacity: 0;
transform: scale(0.8);
transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1) 120ms,
transform 320ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
&:active {
background: rgba(255, 255, 255, 0.1);
}
}
.close-x {
width: 24rpx;
height: 24rpx;
position: relative;
}
.close-line {
position: absolute;
top: 50%;
left: 50%;
width: 28rpx;
height: 2rpx;
background: #ffffff;
border-radius: 2rpx;
&.line-a {
transform: translate(-50%, -50%) rotate(45deg);
}
&.line-b {
transform: translate(-50%, -50%) rotate(-45deg);
}
}
</style>