常见问题/联系客服/公众号二维码
This commit is contained in:
kk
@@ -0,0 +1,172 @@
|
||||
<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: '在首页浏览商品，点击商品卡片选择商品，确认后即可完成购买。支持微信支付和支付宝支付。',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
question: '如何开门取货？',
|
||||
answer: '下单成功后，点击首页底部中间的"开门"按钮，柜门会自动打开，取出商品后关闭柜门即可。',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
question: '商品质量问题怎么办？',
|
||||
answer: '如发现商品有质量问题，请在24小时内通过"联系客服"反馈，我们会为您办理退款或换货。',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
question: '如何查看订单？',
|
||||
answer: '进入"我的"页面，点击"我的订单"可查看所有订单记录，包括待付款、已完成、已退款等状态。',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
question: '忘记密码怎么办？',
|
||||
answer: '在登录页面点击"忘记密码"，输入注册手机号，通过短信验证码即可重置密码。',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
question: '如何修改收货地址？',
|
||||
answer: '进入"我的"页面，点击"收货地址"，可以新增、编辑或删除收货地址信息。',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
question: '支持哪些支付方式？',
|
||||
answer: '目前支持微信支付、支付宝支付两种方式，后续将开通更多支付渠道。',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
question: '退款多久到账？',
|
||||
answer: '退款申请审核通过后，微信支付1-3个工作日到账，支付宝1-5个工作日到账，具体以银行处理时间为准。',
|
||||
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>
|
||||
+85
-11
@@ -55,7 +55,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 菜单列表（顶部） -->
|
||||
<!-- 菜单列表 -->
|
||||
<view class="content-area">
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item)">
|
||||
@@ -72,6 +72,16 @@
|
||||
@prev="handleNavPrev"
|
||||
@next="handleNavNext"
|
||||
/>
|
||||
|
||||
<!-- 公众号二维码弹窗 -->
|
||||
<view v-if="showQrcodePopup" class="qrcode-popup-mask" @click="showQrcodePopup = false">
|
||||
<view class="qrcode-popup-content" @click.stop>
|
||||
<view class="qrcode-popup-title">关注公众号</view>
|
||||
<image class="qrcode-img" src="/static/qrcode.png" mode="aspectFit" />
|
||||
<view class="qrcode-popup-tip">扫码关注获取更多优惠信息</view>
|
||||
<view class="qrcode-popup-close" @click="showQrcodePopup = false">关闭</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -84,8 +94,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
currentTab: 'home',
|
||||
contentHeight: 0,
|
||||
areaHeight: 0,
|
||||
showQrcodePopup: false,
|
||||
productList: [
|
||||
{ name: '君乐宝450ml悦鲜活', price: '0.01', image: '/static/c1.png' },
|
||||
{ name: '白红（0.0.0.0-9.9.9）', price: '0.06', image: '/static/c2.png' },
|
||||
@@ -100,11 +109,15 @@ export default {
|
||||
{ name: '乐事薯片原味75g', price: '7.50', image: '/static/c6.png' }
|
||||
],
|
||||
userInfo: { nickname: '张三', phone: '13812345678' },
|
||||
// 菜单：我的订单、常见问题、联系客服、公众号信息
|
||||
menuList: [
|
||||
{ title: '我的订单', page: '/pages/order/order' },
|
||||
{ title: '收货地址', page: '/pages/address/address' },
|
||||
{ title: '常见问题', page: '/pages/faq/faq' }
|
||||
]
|
||||
{ title: '我的订单', action: 'order' },
|
||||
{ title: '常见问题', action: 'faq' },
|
||||
{ title: '联系客服', action: 'call' },
|
||||
{ title: '公众号信息', action: 'qrcode' }
|
||||
],
|
||||
// 客服电话
|
||||
servicePhone: '13264706088'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -113,15 +126,30 @@ export default {
|
||||
return p ? p.substring(0,3) + '****' + p.substring(7) : '';
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
switchTab(tab) { this.currentTab = tab; },
|
||||
handleOpenDoor() {
|
||||
uni.showModal({ title: '开门', content: '确认打开柜门？', success: r => r.confirm && uni.showToast({title:'柜门已打开', icon:'success'}) });
|
||||
},
|
||||
handleMenuClick(item) {
|
||||
if (item.page) {
|
||||
uni.showToast({title:'功能开发中', icon:'none'});
|
||||
switch (item.action) {
|
||||
case 'order':
|
||||
uni.showToast({ title: '订单功能开发中', icon: 'none' });
|
||||
break;
|
||||
case 'faq':
|
||||
uni.navigateTo({ url: '/pages/faq/faq' });
|
||||
break;
|
||||
case 'call':
|
||||
// 拨打电话
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.servicePhone,
|
||||
fail: () => {}
|
||||
});
|
||||
break;
|
||||
case 'qrcode':
|
||||
// 显示公众号二维码弹窗
|
||||
this.showQrcodePopup = true;
|
||||
break;
|
||||
}
|
||||
},
|
||||
handleNavPrev() {
|
||||
@@ -149,7 +177,7 @@ page { height: 100%; background-color: #fff; }
|
||||
.product-name { font-size: 24rpx; color: #333; padding: 10rpx 8rpx 6rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.product-price { font-size: 30rpx; font-weight: bold; color: #e4393c; padding: 0 8rpx 16rpx; }
|
||||
|
||||
/* 底部占位：给tab-bar和开门按钮留出空间 */
|
||||
/* 底部占位 */
|
||||
.bottom-spacer { height: 160rpx; }
|
||||
|
||||
/* 底部导航栏 */
|
||||
@@ -175,4 +203,50 @@ page { height: 100%; background-color: #fff; }
|
||||
.menu-item:last-child { border-bottom: none; }
|
||||
.menu-text { font-size: 30rpx; color: #333; }
|
||||
.menu-arrow { font-size: 28rpx; color: #ccc; }
|
||||
|
||||
/* ====== 公众号二维码弹窗 ====== */
|
||||
.qrcode-popup-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.qrcode-popup-content {
|
||||
width: 560rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 48rpx 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.qrcode-popup-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
.qrcode-img {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.qrcode-popup-tip {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
.qrcode-popup-close {
|
||||
font-size: 28rpx;
|
||||
color: #2979ff;
|
||||
padding: 16rpx 60rpx;
|
||||
border: 2rpx solid #2979ff;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
</style>
|
||||
+1
-1
@@ -78,7 +78,7 @@ export default {
|
||||
} else if (item.action === 'contact') {
|
||||
uni.showModal({
|
||||
title: '联系客服',
|
||||
content: '客服电话：400-123-4567',
|
||||
content: '客服电话：13264706088',
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user