202 lines
3.9 KiB
Vue
202 lines
3.9 KiB
Vue
<template>
|
|
<view class="settings-page">
|
|
<uni-nav-bar
|
|
title="设置"
|
|
left-icon="left"
|
|
color="#333"
|
|
backgroundColor="#FFFFFF"
|
|
:border="false"
|
|
:statusBar="true"
|
|
:fixed="true"
|
|
@clickLeft="goBack"
|
|
></uni-nav-bar>
|
|
|
|
<view class="settings-card">
|
|
<!-- 用户协议 -->
|
|
<view class="settings-item" @click="handleUserAgreement">
|
|
<view class="item-left">
|
|
<image class="item-icon" :src="$img1('ms/s8.png')" mode=""></image>
|
|
<text class="item-title">用户协议</text>
|
|
</view>
|
|
<view class="item-right">
|
|
<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="divider-line"></view>
|
|
|
|
<!-- 隐私政策 -->
|
|
<view class="settings-item" @click="handlePrivacyPolicy">
|
|
<view class="item-left">
|
|
<image class="item-icon" :src="$img1('ms/s7.png')" mode=""></image>
|
|
<text class="item-title">隐私政策</text>
|
|
</view>
|
|
<view class="item-right">
|
|
<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 退出登录 -->
|
|
<view v-if="isLoggedIn" class="divider-line"></view>
|
|
<view v-if="isLoggedIn" class="settings-item" @click="handleLogout">
|
|
<view class="item-left">
|
|
<image class="item-icon" :src="$img1('ms/s10.png')" mode=""></image>
|
|
<text class="item-title">退出登录</text>
|
|
</view>
|
|
<view class="item-right">
|
|
<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 注销账号 -->
|
|
<view v-if="isLoggedIn" class="divider-line"></view>
|
|
<view v-if="isLoggedIn" class="settings-item" @click="handleCancelAccount">
|
|
<view class="item-left">
|
|
<image class="item-icon" :src="$img1('ms/s12.png')" mode=""></image>
|
|
<text class="item-title">注销账号</text>
|
|
</view>
|
|
<view class="item-right">
|
|
<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLoggedIn: false
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.checkLoginStatus();
|
|
},
|
|
onShow() {
|
|
this.checkLoginStatus();
|
|
},
|
|
methods: {
|
|
/**
|
|
* 返回上一页
|
|
*/
|
|
goBack() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 检查登录状态
|
|
*/
|
|
checkLoginStatus() {
|
|
const token = uni.getStorageSync('token');
|
|
this.isLoggedIn = token != null && token != "";
|
|
},
|
|
|
|
/**
|
|
* 用户协议
|
|
*/
|
|
handleUserAgreement() {
|
|
this.$platform.getUserAgreement();
|
|
},
|
|
|
|
/**
|
|
* 隐私政策
|
|
*/
|
|
handlePrivacyPolicy() {
|
|
this.$platform.getPrivacyAgreement();
|
|
},
|
|
|
|
/**
|
|
* 退出登录
|
|
*/
|
|
handleLogout() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要退出登录吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.$platform.handleLogout();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 注销账号
|
|
*/
|
|
handleCancelAccount() {
|
|
this.$c.to({ url: '/pages/user/cancel-account-page' });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.settings-page {
|
|
min-height: 100vh;
|
|
background-color: #F5F5F5;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
background-image: url('/static/main_bg.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.nav-placeholder {
|
|
height: 88rpx;
|
|
}
|
|
|
|
.settings-card {
|
|
margin: 30rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.settings-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 28rpx 32rpx;
|
|
background-color: #FFFFFF;
|
|
|
|
.item-left {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.item-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #464646;
|
|
}
|
|
}
|
|
|
|
.item-right {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.divider-line {
|
|
height: 1rpx;
|
|
background-color: #E0E0E0;
|
|
margin: 0 32rpx;
|
|
}
|
|
</style>
|