368 lines
12 KiB
Vue
368 lines
12 KiB
Vue
<template>
|
|
<view class="page">
|
|
<!-- 购买类 -->
|
|
<view class="category">
|
|
<text class="category-title">购买类</text>
|
|
<view class="category-divider" />
|
|
|
|
<view
|
|
v-for="(item, idx) in purchaseList"
|
|
:key="'p' + idx"
|
|
class="faq-card"
|
|
>
|
|
<view class="faq-header" @tap="toggle('p', idx)">
|
|
<view class="faq-index">{{ idx + 1 }}</view>
|
|
<text class="faq-question">{{ item.q }}</text>
|
|
<view class="faq-arrow" :class="{ 'faq-arrow--up': isOpen('p', idx) }" />
|
|
</view>
|
|
<view v-show="isOpen('p', idx)" class="faq-body">
|
|
<view v-for="(p, pi) in item.a" :key="pi" class="faq-paragraph">
|
|
<text
|
|
v-for="(seg, si) in p"
|
|
:key="si"
|
|
:class="seg.highlight ? 'faq-highlight' : 'faq-text'"
|
|
@tap="seg.copy ? copyText(seg.text) : null"
|
|
>{{ seg.text }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 预约类 -->
|
|
<view class="category">
|
|
<text class="category-title">预约类</text>
|
|
<view class="category-divider" />
|
|
|
|
<view
|
|
v-for="(item, idx) in reserveList"
|
|
:key="'r' + idx"
|
|
class="faq-card"
|
|
>
|
|
<view class="faq-header" @tap="toggle('r', idx)">
|
|
<view class="faq-index">{{ idx + 1 }}</view>
|
|
<text class="faq-question">{{ item.q }}</text>
|
|
<view class="faq-arrow" :class="{ 'faq-arrow--up': isOpen('r', idx) }" />
|
|
</view>
|
|
<view v-show="isOpen('r', idx)" class="faq-body">
|
|
<view v-for="(p, pi) in item.a" :key="pi" class="faq-paragraph">
|
|
<text
|
|
v-for="(seg, si) in p"
|
|
:key="si"
|
|
:class="seg.highlight ? 'faq-highlight' : 'faq-text'"
|
|
@tap="seg.copy ? copyText(seg.text) : null"
|
|
>{{ seg.text }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 绑定类 -->
|
|
<view class="category">
|
|
<text class="category-title">绑定类</text>
|
|
<view class="category-divider" />
|
|
|
|
<view
|
|
v-for="(item, idx) in bindList"
|
|
:key="'b' + idx"
|
|
class="faq-card"
|
|
>
|
|
<view class="faq-header" @tap="toggle('b', idx)">
|
|
<view class="faq-index">{{ idx + 1 }}</view>
|
|
<text class="faq-question">{{ item.q }}</text>
|
|
<view class="faq-arrow" :class="{ 'faq-arrow--up': isOpen('b', idx) }" />
|
|
</view>
|
|
<view v-show="isOpen('b', idx)" class="faq-body">
|
|
<view v-for="(p, pi) in item.a" :key="pi" class="faq-paragraph">
|
|
<text
|
|
v-for="(seg, si) in p"
|
|
:key="si"
|
|
:class="seg.highlight ? 'faq-highlight' : 'faq-text'"
|
|
@tap="seg.copy ? copyText(seg.text) : null"
|
|
>{{ seg.text }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部安全区 -->
|
|
<view class="safe-bottom" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
// 展开状态：默认全部展开
|
|
const openMap = ref<Record<string, boolean>>({})
|
|
|
|
// 初始化所有条目为展开
|
|
const purchaseList = getPurchaseList()
|
|
const reserveList = getReserveList()
|
|
const bindList = getBindList()
|
|
|
|
purchaseList.forEach((_, i) => { openMap.value[`p${i}`] = true })
|
|
reserveList.forEach((_, i) => { openMap.value[`r${i}`] = true })
|
|
bindList.forEach((_, i) => { openMap.value[`b${i}`] = true })
|
|
|
|
function toggle(cat: string, idx: number) {
|
|
const key = `${cat}${idx}`
|
|
openMap.value[key] = !openMap.value[key]
|
|
}
|
|
|
|
function isOpen(cat: string, idx: number) {
|
|
return openMap.value[`${cat}${idx}`] ?? false
|
|
}
|
|
|
|
function copyText(text: string) {
|
|
uni.setClipboardData({
|
|
data: text,
|
|
success: () => uni.showToast({ title: '已复制', icon: 'success' })
|
|
})
|
|
}
|
|
|
|
type Seg = { text: string; highlight?: boolean; copy?: boolean }
|
|
type FaqItem = { q: string; a: Seg[][] }
|
|
|
|
function getPurchaseList(): FaqItem[] {
|
|
return [
|
|
{
|
|
q: '赣湘全域旅游年卡/超级玩家卡该如何进行购买？',
|
|
a: [
|
|
[{ text: '答：首先搜索"爱上萍乡"小程序，进入首页界面，点击购买即可。' }],
|
|
[{ text: '温馨提醒：', highlight: false }, { text: '1. 赣湘全域旅游年卡/超级玩家卡一经激活或销售七日以上，不适用于退款规则；2. 部分商家限制仅对女性或特定年龄段开放，详情请查阅各商家资料规则展示页面。' }]
|
|
]
|
|
},
|
|
{
|
|
q: '对于赣湘全域旅游年卡/超级玩家卡的使用疑问怎么进行人工咨询？',
|
|
a: [
|
|
[
|
|
{ text: '答：爱上萍乡公众号的客服电话是：' },
|
|
{ text: '15388025272', highlight: true, copy: true },
|
|
{ text: '，微信号为' },
|
|
{ text: 'cshaika2024', highlight: true, copy: true },
|
|
{ text: '，人工客服工作时间：9:00-17:00（周一至周五），周末及法定节假日不受理，请大家在工作日与我们联系哦~' }
|
|
]
|
|
]
|
|
},
|
|
{
|
|
q: '赣湘全域旅游年卡/超级玩家卡该如何进行退款',
|
|
a: [
|
|
[{ text: '答：赣湘全域旅游年卡/超级玩家卡绑定激活或销售七日以上不可退卡，不适用7天无理由退货，在"爱上萍乡"小程序上购买但未激活的用户请咨询客服中心处理退卡事宜，在其他平台上购买年卡的用户请于对应平台客服进行沟通。' }]
|
|
]
|
|
},
|
|
{
|
|
q: '未成年人可以购买吗？',
|
|
a: [
|
|
[{ text: '答：可以的，赣湘全域旅游年卡/超级玩家卡覆盖的部分景区、商家目前已经对未满18周岁的少年儿童开放，未成年人也可使用本人身份证信息实名制激活使用，大小同价，由于系统对接或行业法规等限制，部分景区、商家未向少年儿童开放，建议购买前一定要详细查阅平台公告及商品详细信息哦~' }]
|
|
]
|
|
},
|
|
{
|
|
q: '小孩可以去哪些景区？在哪里可以查看？',
|
|
a: [
|
|
[{ text: '答：自2023年7月31日起，赣湘全域旅游年卡/超级玩家卡包含的景区陆续向18周岁以下儿童放开使用限制，目前已有部分景区允许儿童凭借年卡免费入园。儿童可使用权益的景区商户名单可在"爱上萍乡"-购买 - 商品详情页或各景区、商户规则展示页面进行了解。' }]
|
|
]
|
|
},
|
|
{
|
|
q: '港澳台/外国人可以购买使用赣湘全域旅游年卡/超级玩家卡吗？',
|
|
a: [
|
|
[{ text: '答：赣湘全域旅游年卡/超级玩家卡需要实名上传中国大陆的身份证信息，港澳台/外国人目前是不能激活使用年卡的。' }]
|
|
]
|
|
}
|
|
]
|
|
}
|
|
|
|
function getReserveList(): FaqItem[] {
|
|
return [
|
|
{
|
|
q: '如何预约',
|
|
a: [
|
|
[{ text: '答：部分景区、商家至少需要提前一天进行线上预约或电话预约（最多可预约七天），详细规则请进入"爱上萍乡"公众号 - 点击使用指引 - 商家预约 - 预约即可，提交预约信息后将扣除赣湘全域旅游年卡/超级玩家卡使用次数。' }],
|
|
[{ text: '需至少提前一天取消预约，详细规则请进入"爱上萍乡"公众号 - 点击使用指引 - 我的预约 - 进入预约详情界面 - 点击取消预约即可。' }],
|
|
[{ text: '使用日当天不可取消预约，过期视为自动放弃使用权益。' }]
|
|
]
|
|
},
|
|
{
|
|
q: '如何出示赣湘全域旅游年卡/超级玩家卡二维码',
|
|
a: [
|
|
[{ text: '答：关注"爱上萍乡"公众号 - 点击使用指引 - 点击入园码即可出示年卡二维码；' }]
|
|
]
|
|
},
|
|
{
|
|
q: '如何找到景区和商家',
|
|
a: [
|
|
[{ text: '答：关注"爱上萍乡"公众号 - 点击年卡 - 年卡权益，下方的游吃住行娱乐购里的景区商家都可点击查看具体的赣湘全域旅游年卡/超级玩家卡使用规则。' }]
|
|
]
|
|
},
|
|
{
|
|
q: '预约了，如果不去会扣除次数吗？',
|
|
a: [
|
|
[{ text: '答：如预约之后因非客观因素无法前往且未提前取消预约则会扣除年卡使用次数，扣除使用次数后的权益不可恢复。' }]
|
|
]
|
|
},
|
|
{
|
|
q: '景区没有预约不能进去客服可以帮我预约吗？',
|
|
a: [
|
|
[{ text: '答：后台并没有权限给客户操作预约，请大家在"爱上萍乡"公众号自行预约哦。' }]
|
|
]
|
|
}
|
|
]
|
|
}
|
|
|
|
function getBindList(): FaqItem[] {
|
|
return [
|
|
{
|
|
q: '赣湘全域旅游年卡/超级玩家卡如何绑定？',
|
|
a: [
|
|
[{ text: '答：购买赣湘全域旅游年卡/超级玩家卡后，平台会通过短信发送一个8位数的核销码，请大家搜索"爱上萍乡"公众号，点击使用指引—激活年卡—核销码激活，最后上传个人身份信息即可。' }]
|
|
]
|
|
},
|
|
{
|
|
q: '赣湘全域旅游年卡/超级玩家卡可以解绑吗？',
|
|
a: [
|
|
[{ text: '答：注意啦！赣湘全域旅游年卡/超级玩家卡一旦绑定身份信息后，是无法进行解绑或换绑的哦。' }]
|
|
]
|
|
},
|
|
{
|
|
q: '一个账号能绑定多张卡吗？',
|
|
a: [
|
|
[{ text: '答：一个微信用户只能绑定4张赣湘全域旅游年卡/超级玩家卡，请不要多绑或者错绑哦~' }],
|
|
[{ text: '成人绑定年卡建议分开绑定，以免造成出行不便哦（只需把8位数的核销码发给需要绑定的人，选择核销码激活上传自己的身份信息即可）' }]
|
|
]
|
|
},
|
|
{
|
|
q: '赣湘全域旅游年卡/超级玩家卡已激活绑定能否给别人使用？',
|
|
a: [
|
|
[{ text: '答：赣湘全域旅游年卡/超级玩家卡实行一卡一人，已激活绑定的年卡仅限本人使用，不可转借他人。' }]
|
|
]
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.page {
|
|
min-height: 100vh;
|
|
background: $color-background;
|
|
padding: 48rpx 24rpx 0;
|
|
font-family: $font-family-body;
|
|
}
|
|
|
|
/* ===== 分类区块 ===== */
|
|
.category {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.category-title {
|
|
font-family: $font-family-body;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-bold;
|
|
color: $uv-main-color;
|
|
display: block;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.category-divider {
|
|
height: 1rpx;
|
|
background: $uv-border-color;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
/* ===== 问答卡片 ===== */
|
|
.faq-card {
|
|
background: $color-card;
|
|
border-radius: 24rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
|
margin-bottom: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.faq-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 32rpx;
|
|
transition: background 0.15s ease;
|
|
|
|
&:active {
|
|
background: $uv-bg-color;
|
|
}
|
|
}
|
|
|
|
.faq-index {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
background: rgba(60, 156, 255, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-right: 16rpx;
|
|
margin-top: 4rpx;
|
|
font-family: $font-family-body;
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-bold;
|
|
color: $uv-primary;
|
|
}
|
|
|
|
.faq-question {
|
|
flex: 1;
|
|
font-family: $font-family-body;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-medium;
|
|
color: $uv-main-color;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.faq-arrow {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-right: 3rpx solid #cccccc;
|
|
border-bottom: 3rpx solid #cccccc;
|
|
transform: rotate(45deg);
|
|
flex-shrink: 0;
|
|
margin-left: 16rpx;
|
|
margin-top: 10rpx;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.faq-arrow--up {
|
|
transform: rotate(-135deg);
|
|
}
|
|
|
|
/* ===== 回答区域 ===== */
|
|
.faq-body {
|
|
padding: 0 32rpx 32rpx;
|
|
}
|
|
|
|
.faq-paragraph {
|
|
margin-bottom: 16rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.faq-text {
|
|
font-family: $font-family-body;
|
|
font-size: $font-size-sm;
|
|
font-weight: 400;
|
|
color: $uv-content-color;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.faq-highlight {
|
|
font-family: $font-family-body;
|
|
font-size: $font-size-sm;
|
|
font-weight: 400;
|
|
color: $uv-primary;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ===== 底部安全区 ===== */
|
|
.safe-bottom {
|
|
height: 64rpx;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
</style>
|