140 lines
3.4 KiB
Plaintext
140 lines
3.4 KiB
Plaintext
<template>
|
||
<view class="page">
|
||
<scroll-view direction="vertical" :show-scrollbar="false" style="flex:1;">
|
||
<view class="hero">
|
||
<uni-icons type="help-filled" size="48" color="#FF6B6B"></uni-icons>
|
||
<text class="hero-title">常见问题</text>
|
||
</view>
|
||
|
||
<view class="qa" v-for="(item, idx) in qaList" :key="idx">
|
||
<view class="q" @click="toggle(idx)">
|
||
<text class="q-text">Q：{{ item.q }}</text>
|
||
<uni-icons :type="item.open ? 'top' : 'right'" size="18" color="#999"></uni-icons>
|
||
</view>
|
||
<view v-if="item.open" class="a">
|
||
<text class="a-text">{{ item.a }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="contact">
|
||
<text class="contact-title">仍未解决？</text>
|
||
<view class="contact-btn" @click="copyMail">
|
||
<uni-icons type="email" size="20" color="#fff"></uni-icons>
|
||
<text class="contact-btn-text">联系客服：support@xixingwl.cn</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
type QA = {
|
||
q : string
|
||
a : string
|
||
open : boolean
|
||
}
|
||
|
||
const qaList = reactive<QA[]>([
|
||
{ q: '如何修改个人资料？', a: '在「我的」页面点击左上角头像区域，或在资料卡中点击编辑即可修改昵称、签名、择偶条件等信息。', open: true },
|
||
{ q: '金币有什么用？', a: '金币可用于每日抽奖、赠送礼物给喜欢的用户，部分特权功能也需消耗金币。', open: false },
|
||
{ q: '为什么看不到对方的在线状态？', a: '对方可能在隐私设置中隐藏了在线状态、年龄或距离，这是对方的个人选择，无法强制查看。', open: false },
|
||
{ q: '动态被收藏/点赞会有提醒吗？', a: '当前版本点赞与收藏会累计到「我的」统计中，消息中心会同步相关互动通知。', open: false },
|
||
{ q: '如何注销账号？', a: '进入「账号安全」页面，点击「注销账号」，按提示操作即可。注销后资料将被匿名化处理。', open: false },
|
||
])
|
||
|
||
function toggle(idx : number) {
|
||
qaList[idx].open = ! qaList[idx].open
|
||
}
|
||
|
||
function copyMail() {
|
||
uni.setClipboardData({
|
||
data: 'support@xixingwl.cn',
|
||
success: () => {
|
||
uni.showToast({ title: '邮箱已复制', icon: 'success' })
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.page {
|
||
flex: 1;
|
||
background-color: #f7f7f7;
|
||
}
|
||
|
||
.hero {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 50rpx 0 30rpx;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.qa {
|
||
margin: 0 30rpx 16rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.q {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 28rpx 24rpx;
|
||
}
|
||
|
||
.q-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
flex: 1;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.a {
|
||
padding: 0 24rpx 28rpx;
|
||
}
|
||
|
||
.a-text {
|
||
font-size: 26rpx;
|
||
color: #888;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.contact {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 40rpx 0 80rpx;
|
||
}
|
||
|
||
.contact-title {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.contact-btn {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
align-items: center;
|
||
background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
|
||
padding: 20rpx 36rpx;
|
||
border-radius: 40rpx;
|
||
}
|
||
|
||
.contact-btn-text {
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
margin-left: 12rpx;
|
||
}
|
||
</style>
|