JP-ChargeTeam51/pages/user/setting.vue

<template>
	<view>
		<u-navbar title="设置"></u-navbar>
		<u-cell-group>
			<u-cell-item title="修改手机号" :title-style="checked ? titleStyle : {}" v-model="userPhone" @click="gotoUrl('pages/user/phone')"
				:value-style="checked ? {fontSize:'16px'} : {}">
			</u-cell-item>
			<u-cell-item title="注销账号" :title-style="checked ? titleStyle : {}" value="注销后无法恢复，请谨慎操作" 
				:value-style="checked ? {color:'#ff3300',fontSize:'16px'} : valueStyle" @click="gotoUrl('pages/user/logout')">
			</u-cell-item>
		</u-cell-group>
		<view class="switcher-mode">
			<view class="oldTextjp2" oldstyle="font-weight:bold;font-size:18px">
				长辈模式
				<text class="oldTextjp2" oldstyle="font-weight:normal;font-size:16px;">字体更大更清晰</text>
			</view>
			<view class="switch-box" >
				<u-switch v-model="checked" class="switch" active-color="#00E266" @change="checkedChange"></u-switch>
			</view>
		</view>
		
		<view class="logout-btn oldTextjp" oldstyle="font-size:18px" @click="signOut">
			退出帐号
		</view>
		
		<view>
			<u-modal v-model="show" @confirm="confirm":show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" :content="content"></u-modal>
		</view>
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	
	export default {
		data() {
			return {
				show: false,
				title: '退出账号',
				content: '是否退出当前账号?',
				userId: '',
				userPhone: '',
				checked:false,
				valueStyle: {
					color:'#ff3300',
				},
				titleStyle: {
					fontWeight: 'bold',
					fontSize: '18px',
				}
			}
		},
		onReady() {
			if(this.carhelp.getPersonInfo()) {
				this.userId = this.carhelp.getPersonInfo().id;
				
				var phone = this.carhelp.getPersonInfo().phone;
				var phone1 = phone.slice(0,3);
				var phone2 = phone.slice(-4);
				this.userPhone = phone1 + '****' + phone2;
				
				if(this.carhelp.get("getElderModeClass") == "长辈模式") {
					this.checked = true;
				} else {
					this.checked = false;
				}
			}
		},
		methods: {
			checkedChange() {
				if(this.checked) {
					this.carhelp.set("getElderModeClass", "长辈模式");
				} else {
					this.carhelp.set("getElderModeClass", "标准模式");
				}
			},
			signOut() {
				this.show = true;
			},
			confirm() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.logout().then((res) => {
					uni.hideLoading();
					this.show = false;
					this.carhelp.logoff()
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logout-btn{
		background-color: #fff;
		padding: 12px 0;
		text-align: center;
		margin-top: 12px;
	}
	.switcher-mode{
		background-color: #fff;
		height: 44px;
		line-height: 44px;
		display: flex;
		justify-content: space-between;
		padding: 0 14px;
		text{
			font-size: 12px;
			color: rgba(119, 119, 119, 100);
			margin-left: 8px;
			}
			.switch-box{
				padding-top: 8px;
			}
			.switch{
				width: 40px;
				height: 22px;
				
			}
			/deep/.u-switch__node{
				width: 20px !important;
				height: 20px !important;
			}
	}
</style>