kk
152 lines
3.6 KiB
Vue
152 lines
3.6 KiB
Vue
<template>
|
||
<view class="faq-page">
|
||
<!-- 问题列表 -->
|
||
<scroll-view class="faq-scroll" scroll-y>
|
||
<view class="faq-list">
|
||
<view
|
||
class="faq-item"
|
||
v-for="(item, index) in faqList"
|
||
:key="index"
|
||
>
|
||
<!-- 问题标题（点击展开/收起） -->
|
||
<view class="faq-question" @click="toggleItem(index)">
|
||
<text class="q-text">{{ item.question }}</text>
|
||
<text class="q-arrow" :class="{ expanded: item.expanded }">›</text>
|
||
</view>
|
||
|
||
<!-- 答案内容（展开时显示） -->
|
||
<view class="faq-answer" v-if="item.expanded">
|
||
<text class="a-text">{{ item.answer }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom-spacer"></view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部左右箭头导航条 -->
|
||
<page-nav-bar
|
||
:hasPrev="true"
|
||
:hasNext="false"
|
||
@prev="handleNavPrev"
|
||
@next="handleNavNext"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import PageNavBar from '@/components/page-nav-bar/page-nav-bar.vue';
|
||
|
||
export default {
|
||
components: { PageNavBar },
|
||
data() {
|
||
return {
|
||
faqList: [
|
||
{
|
||
question: '如何购买商品？',
|
||
answer: '使用微信或支付宝扫描柜体上的二维码，进入开门页面，如果是首次使用需先进行授权登录与注册，浏览设备中售卖的商品及价格，点击开门，待门锁打开后，拉开门选购商品，关门即完成购买，约1-2分钟内系统将自动识别并完成扣款。',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '如何查看订单？',
|
||
answer: '进入"我的"页面，点击"我的订单"可查看所有订单记录，包括待付款、已完成、已退款等状态。',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '支持哪些支付方式？',
|
||
answer: '目前支持微信支付、支付宝支付两种方式，后续将开通更多支付渠道。',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '退款多久到账？',
|
||
answer: '审核通过后，一般1-3个工作日到账，具体到账时间以支付渠道为准。',
|
||
expanded: false
|
||
}
|
||
]
|
||
};
|
||
},
|
||
methods: {
|
||
toggleItem(index) {
|
||
this.faqList[index].expanded = !this.faqList[index].expanded;
|
||
},
|
||
handleNavPrev() {
|
||
uni.navigateBack({ fail: () => { uni.switchTab({ url: '/pages/index/index' }); } });
|
||
},
|
||
handleNavNext() {
|
||
uni.showToast({ title: '暂无下一页', icon: 'none' });
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
page { height: 100%; background-color: #f5f5f5; }
|
||
|
||
.faq-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
/* 滚动区域 */
|
||
.faq-scroll {
|
||
flex: 1;
|
||
height: 0;
|
||
}
|
||
|
||
/* 问题列表 */
|
||
.faq-list {
|
||
padding: 16rpx;
|
||
}
|
||
|
||
.faq-item {
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 问题标题 */
|
||
.faq-question {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 28rpx 24rpx;
|
||
}
|
||
.q-text {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
flex: 1;
|
||
line-height: 1.4;
|
||
}
|
||
.q-arrow {
|
||
font-size: 32rpx;
|
||
color: #999;
|
||
transition: transform 0.25s;
|
||
flex-shrink: 0;
|
||
margin-left: 12rpx;
|
||
}
|
||
.q-arrow.expanded {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
/* 答案 */
|
||
.faq-answer {
|
||
margin: 0 24rpx 24rpx;
|
||
padding: 24rpx;
|
||
background: #f8f9fc;
|
||
border-radius: 10rpx;
|
||
}
|
||
.a-text {
|
||
font-size: 27rpx;
|
||
color: #666;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* 底部占位 */
|
||
.bottom-spacer {
|
||
height: 120rpx;
|
||
}
|
||
</style> |