feat: 完善我的页面子菜单功能
- 设置页面：我的账号、清理缓存、用户协议、隐私政策 - 我的账号页面：绑定手机号、退出登录、注销账号 - 用户协议/隐私政策页面 - 我的收藏、帮助与反馈、关于我们页面 - 所有页面使用绿色系主题色保持一致
This commit is contained in:
H1d3rOne committed
1 parent
b4370b4bf2
commit
c157aad22d
8 files changed
+1015
-8
No files matched your search
@@ -33,6 +33,54 @@
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/settings",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设置",
|
||||
"navigationBarBackgroundColor": "#10B981",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/account",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的账号",
|
||||
"navigationBarBackgroundColor": "#10B981",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/agreement",
|
||||
"style": {
|
||||
"navigationBarTitleText": "协议",
|
||||
"navigationBarBackgroundColor": "#10B981",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/favorite",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的收藏",
|
||||
"navigationBarBackgroundColor": "#10B981",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/feedback",
|
||||
"style": {
|
||||
"navigationBarTitleText": "帮助与反馈",
|
||||
"navigationBarBackgroundColor": "#10B981",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/about",
|
||||
"style": {
|
||||
"navigationBarTitleText": "关于我们",
|
||||
"navigationBarBackgroundColor": "#10B981",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/bazi/bazi",
|
||||
"style": {
|
||||
|
||||
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="logo-card">
|
||||
<view class="logo">
|
||||
<text class="logo-text">玄</text>
|
||||
</view>
|
||||
<text class="app-name">玄机排盘</text>
|
||||
<text class="app-slogan">探索命理奥秘</text>
|
||||
<text class="version">版本 1.0.0</text>
|
||||
</view>
|
||||
|
||||
<view class="info-card">
|
||||
<view class="info-item">
|
||||
<text class="info-label">应用介绍</text>
|
||||
<text class="info-content">玄机排盘是一款专业的命理排盘应用，提供八字命理、六爻占卜、奇门遁甲、紫微斗数、大六壬等多种传统命理排盘服务，帮助您探索中华传统文化的奥秘。</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">主要功能</text>
|
||||
<text class="info-content">• 八字命理排盘\n• 六爻占卜\n• 奇门遁甲\n• 紫微斗数\n• 大六壬\n• 梅花易数\n• 西方占星\n• 塔罗牌占卜</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">免责声明</text>
|
||||
<text class="info-content">本应用提供的命理排盘结果仅供参考娱乐，不构成任何形式的预测或建议。</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="link-card">
|
||||
<view class="link-item" @click="openAgreement('user')">
|
||||
<text class="link-text">用户协议</text>
|
||||
<text class="link-arrow">›</text>
|
||||
</view>
|
||||
<view class="link-item" @click="openAgreement('privacy')">
|
||||
<text class="link-text">隐私政策</text>
|
||||
<text class="link-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
openAgreement(type) {
|
||||
uni.navigateTo({ url: '/pages/mine/agreement?type=' + type })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 50%, #A7F3D0 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.logo-card {
|
||||
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
||||
border-radius: 32rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: 0 16rpx 48rpx rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 24rpx;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 60rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.app-slogan {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.version {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
|
||||
border: 2rpx solid rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #065F46;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.link-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
|
||||
border: 2rpx solid rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.link-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx 32rpx;
|
||||
border-bottom: 2rpx solid #ECFDF5;
|
||||
}
|
||||
|
||||
.link-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
font-size: 30rpx;
|
||||
color: #065F46;
|
||||
}
|
||||
|
||||
.link-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #6EE7B7;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="user-info-card">
|
||||
<view class="avatar">
|
||||
<text class="avatar-text">👤</text>
|
||||
</view>
|
||||
<view class="user-detail">
|
||||
<text class="username">玄机用户</text>
|
||||
<text class="user-id">ID: 100001</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" @click="bindPhone">
|
||||
<view class="menu-icon">
|
||||
<text class="menu-icon-text">📱</text>
|
||||
</view>
|
||||
<view class="menu-content">
|
||||
<text class="menu-name">绑定手机号</text>
|
||||
<text class="menu-desc">{{ phone || '未绑定' }}</text>
|
||||
</view>
|
||||
<view class="menu-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-list danger-zone">
|
||||
<view class="menu-item" @click="logout">
|
||||
<view class="menu-icon warning">
|
||||
<text class="menu-icon-text">🚪</text>
|
||||
</view>
|
||||
<text class="menu-name warning">退出登录</text>
|
||||
<view class="menu-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-item" @click="deleteAccount">
|
||||
<view class="menu-icon danger">
|
||||
<text class="menu-icon-text">⚠️</text>
|
||||
</view>
|
||||
<text class="menu-name danger">注销账号</text>
|
||||
<view class="menu-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindPhone() {
|
||||
uni.showModal({
|
||||
title: '绑定手机号',
|
||||
editable: true,
|
||||
placeholderText: '请输入手机号',
|
||||
success: (res) => {
|
||||
if (res.confirm && res.content) {
|
||||
this.phone = res.content
|
||||
uni.showToast({
|
||||
title: '绑定成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
logout() {
|
||||
uni.showModal({
|
||||
title: '退出登录',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({
|
||||
title: '已退出登录',
|
||||
icon: 'success'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.switchTab({ url: '/pages/index/index' })
|
||||
}, 1500)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteAccount() {
|
||||
uni.showModal({
|
||||
title: '注销账号',
|
||||
content: '注销后数据将无法恢复，确定要注销吗？',
|
||||
confirmText: '确认注销',
|
||||
confirmColor: '#EF4444',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({
|
||||
title: '账号已注销',
|
||||
icon: 'success'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.switchTab({ url: '/pages/index/index' })
|
||||
}, 1500)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 50%, #A7F3D0 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.user-info-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
|
||||
border: 2rpx solid rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.user-detail {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #065F46;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.user-id {
|
||||
font-size: 24rpx;
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.menu-list.danger-zone {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
|
||||
border: 2rpx solid rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.menu-icon.warning {
|
||||
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
|
||||
}
|
||||
|
||||
.menu-icon.danger {
|
||||
background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
|
||||
}
|
||||
|
||||
.menu-icon-text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #065F46;
|
||||
}
|
||||
|
||||
.menu-name.warning {
|
||||
color: #D97706;
|
||||
}
|
||||
|
||||
.menu-name.danger {
|
||||
color: #DC2626;
|
||||
}
|
||||
|
||||
.menu-desc {
|
||||
font-size: 24rpx;
|
||||
color: #10B981;
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.arrow-text {
|
||||
font-size: 36rpx;
|
||||
color: #6EE7B7;
|
||||
font-weight: 300;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header-card">
|
||||
<text class="header-title">{{ title }}</text>
|
||||
<text class="header-update">更新日期：2024年1月1日</text>
|
||||
</view>
|
||||
|
||||
<view class="content-card">
|
||||
<view class="section" v-for="(section, index) in sections" :key="index">
|
||||
<text class="section-title">{{ section.title }}</text>
|
||||
<text class="section-content">{{ section.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: 'user',
|
||||
title: '用户协议',
|
||||
sections: []
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.type = options.type || 'user'
|
||||
if (this.type === 'user') {
|
||||
this.title = '用户协议'
|
||||
this.sections = [
|
||||
{
|
||||
title: '一、服务条款',
|
||||
content: '欢迎使用玄机排盘应用。在使用本应用前，请您仔细阅读以下服务条款。使用本应用即表示您同意遵守这些条款。'
|
||||
},
|
||||
{
|
||||
title: '二、用户注册',
|
||||
content: '用户需要注册账号才能使用部分功能。注册时请提供真实、准确的信息，并对账号安全负责。'
|
||||
},
|
||||
{
|
||||
title: '三、服务内容',
|
||||
content: '本应用提供八字命理、六爻占卜、奇门遁甲、紫微斗数等传统命理排盘服务，仅供参考娱乐，不构成任何决策建议。'
|
||||
},
|
||||
{
|
||||
title: '四、用户行为规范',
|
||||
content: '用户不得利用本应用从事违法活动，不得传播有害信息，不得干扰其他用户正常使用。'
|
||||
},
|
||||
{
|
||||
title: '五、知识产权',
|
||||
content: '本应用的所有内容，包括但不限于文字、图片、软件等，均受知识产权法律保护。'
|
||||
},
|
||||
{
|
||||
title: '六、免责声明',
|
||||
content: '本应用提供的命理排盘结果仅供参考，不构成任何形式的预测或建议。用户应理性对待，自行承担使用风险。'
|
||||
},
|
||||
{
|
||||
title: '七、服务变更',
|
||||
content: '我们保留随时修改、暂停或终止服务的权利，恕不另行通知。'
|
||||
},
|
||||
{
|
||||
title: '八、联系我们',
|
||||
content: '如有任何问题，请通过应用内的反馈功能联系我们。'
|
||||
}
|
||||
]
|
||||
} else {
|
||||
this.title = '隐私政策'
|
||||
this.sections = [
|
||||
{
|
||||
title: '一、信息收集',
|
||||
content: '我们收集您在使用服务时提供的个人信息，包括但不限于：注册信息（用户名、手机号）、测算记录、设备信息等。'
|
||||
},
|
||||
{
|
||||
title: '二、信息使用',
|
||||
content: '我们使用收集的信息用于：提供、维护和改进服务；保存测算记录；发送服务通知；改进用户体验。'
|
||||
},
|
||||
{
|
||||
title: '三、信息存储',
|
||||
content: '您的信息存储在安全的服务器上，我们采取合理的安全措施保护您的信息。'
|
||||
},
|
||||
{
|
||||
title: '四、信息共享',
|
||||
content: '未经您的同意，我们不会向第三方共享您的个人信息，法律法规另有规定的除外。'
|
||||
},
|
||||
{
|
||||
title: '五、用户权利',
|
||||
content: '您有权访问、更正、删除您的个人信息，有权注销账号。如需行使上述权利，请联系我们。'
|
||||
},
|
||||
{
|
||||
title: '六、Cookie使用',
|
||||
content: '我们使用本地存储技术保存您的偏好设置和测算记录，您可以在设备设置中清除这些数据。'
|
||||
},
|
||||
{
|
||||
title: '七、未成年人保护',
|
||||
content: '本应用不面向14周岁以下未成年人。如果您是未成年人，请在监护人指导下使用。'
|
||||
},
|
||||
{
|
||||
title: '八、政策更新',
|
||||
content: '我们可能会不时更新本隐私政策。更新后，我们会在应用内通知您。'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 50%, #A7F3D0 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.header-card {
|
||||
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.header-update {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.content-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
|
||||
border: 2rpx solid rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #065F46;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
line-height: 1.8;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="empty-state">
|
||||
<text class="empty-icon">❤️</text>
|
||||
<text class="empty-text">暂无收藏</text>
|
||||
<text class="empty-desc">收藏的内容会显示在这里</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 50%, #A7F3D0 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
display: block;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #10B981;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 26rpx;
|
||||
color: #6EE7B7;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="form-card">
|
||||
<view class="form-item">
|
||||
<text class="form-label">问题类型</text>
|
||||
<picker :value="typeIndex" :range="types" @change="onTypeChange" class="form-picker">
|
||||
<view class="picker-value">{{ types[typeIndex] }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">问题描述</text>
|
||||
<textarea class="form-textarea" v-model="content" placeholder="请详细描述您遇到的问题或建议"></textarea>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">联系方式</text>
|
||||
<input class="form-input" v-model="contact" placeholder="请输入手机号或邮箱（选填）" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="submit-btn" @click="submit">
|
||||
<text class="btn-text">提交反馈</text>
|
||||
</button>
|
||||
|
||||
<view class="tips-card">
|
||||
<text class="tips-title">常见问题</text>
|
||||
<view class="tips-list">
|
||||
<view class="tips-item" v-for="(item, index) in faqs" :key="index">
|
||||
<text class="tips-q">Q: {{ item.q }}</text>
|
||||
<text class="tips-a">A: {{ item.a }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
typeIndex: 0,
|
||||
types: ['功能建议', '问题反馈', '其他'],
|
||||
content: '',
|
||||
contact: '',
|
||||
faqs: [
|
||||
{ q: '如何保存测算记录？', a: '测算完成后会自动保存到记录列表中。' },
|
||||
{ q: '如何删除记录？', a: '在记录列表中左滑或点击删除按钮即可删除。' },
|
||||
{ q: '测算结果准确吗？', a: '本应用提供传统命理排盘服务，仅供参考娱乐。' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTypeChange(e) {
|
||||
this.typeIndex = parseInt(e.detail.value)
|
||||
},
|
||||
submit() {
|
||||
if (!this.content.trim()) {
|
||||
uni.showToast({ title: '请输入问题描述', icon: 'none' })
|
||||
return
|
||||
}
|
||||
uni.showToast({ title: '提交成功', icon: 'success' })
|
||||
this.content = ''
|
||||
this.contact = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 50%, #A7F3D0 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
|
||||
border: 2rpx solid rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.form-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 28rpx;
|
||||
color: #065F46;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.picker-value {
|
||||
padding: 24rpx;
|
||||
background: #ECFDF5;
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #065F46;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
padding: 24rpx;
|
||||
background: #ECFDF5;
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #065F46;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
background: #ECFDF5;
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #065F46;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: 0 12rpx 32rpx rgba(16, 185, 129, 0.3);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tips-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
|
||||
border: 2rpx solid rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #065F46;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.tips-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.tips-item {
|
||||
padding: 20rpx;
|
||||
background: #ECFDF5;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.tips-q {
|
||||
font-size: 26rpx;
|
||||
color: #065F46;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.tips-a {
|
||||
font-size: 24rpx;
|
||||
color: #10B981;
|
||||
}
|
||||
</style>
|
||||
@@ -38,19 +38,23 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
menus: [
|
||||
{ name: '我的收藏', icon: '❤️' },
|
||||
{ name: '设置', icon: '⚙️' },
|
||||
{ name: '帮助与反馈', icon: '💬' },
|
||||
{ name: '关于我们', icon: 'ℹ️' }
|
||||
{ name: '我的收藏', icon: '❤️', path: '/pages/mine/favorite' },
|
||||
{ name: '设置', icon: '⚙️', path: '/pages/mine/settings' },
|
||||
{ name: '帮助与反馈', icon: '💬', path: '/pages/mine/feedback' },
|
||||
{ name: '关于我们', icon: 'ℹ️', path: '/pages/mine/about' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openMenu(item) {
|
||||
uni.showToast({
|
||||
title: `${item.name}功能开发中`,
|
||||
icon: 'none'
|
||||
})
|
||||
if (item.path) {
|
||||
uni.navigateTo({ url: item.path })
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: `${item.name}功能开发中`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" v-for="(item, index) in menus" :key="index" @click="openMenu(item)">
|
||||
<view class="menu-icon">
|
||||
<text class="menu-icon-text">{{ item.icon }}</text>
|
||||
</view>
|
||||
<text class="menu-name">{{ item.name }}</text>
|
||||
<view class="menu-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
menus: [
|
||||
{ name: '我的账号', icon: '👤', path: '/pages/mine/account' },
|
||||
{ name: '清理缓存', icon: '🗑️', action: 'clearCache' },
|
||||
{ name: '用户协议', icon: '📄', action: 'userAgreement' },
|
||||
{ name: '隐私政策', icon: '🔒', action: 'privacyPolicy' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openMenu(item) {
|
||||
if (item.path) {
|
||||
uni.navigateTo({ url: item.path })
|
||||
} else if (item.action === 'clearCache') {
|
||||
this.clearCache()
|
||||
} else if (item.action === 'userAgreement') {
|
||||
uni.navigateTo({ url: '/pages/mine/agreement?type=user' })
|
||||
} else if (item.action === 'privacyPolicy') {
|
||||
uni.navigateTo({ url: '/pages/mine/agreement?type=privacy' })
|
||||
}
|
||||
},
|
||||
clearCache() {
|
||||
uni.showModal({
|
||||
title: '清理缓存',
|
||||
content: '确定要清理缓存吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({ title: '清理中...' })
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '缓存已清理',
|
||||
icon: 'success'
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 50%, #A7F3D0 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
|
||||
border: 2rpx solid rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.menu-icon-text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.menu-name {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #065F46;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.arrow-text {
|
||||
font-size: 36rpx;
|
||||
color: #6EE7B7;
|
||||
font-weight: 300;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user