JP-ChargeTeam51/pages/user/setting.vue

<template>
	<view>
		<ujp-navbar title="设置"></ujp-navbar>
		<view class="group">
			<view class="userCell-item">
				<view class="userCell-title">
					<p class="oldTextjp" oldstyle="font-size: 18px;">长辈模式</p>
				</view>
				<view class="userCell-content " >
					<view class="value">
						<view class="text oldTextjp2" oldstyle="font-size: 16px;">
							字体更大 看得清
						</view>
						<u-switch v-model="checked" active-color="#00E266" @change="checkedChange"></u-switch>
					</view>
				</view>
			</view>
			<view class="userCell-item" v-if="personInfo.memberLevel==3">
				<view class="userCell-title">
					<p class="oldTextjp" oldstyle="font-size: 18px;">快捷充电</p>
				</view>
				<view class="userCell-content " >
					<view class="value">
						<view class="text oldTextjp2" oldstyle="font-size: 16px;">
							扫码即充 充满自停
						</view>
						<u-switch v-model="checked2" active-color="#00E266" @change="checkedChange2"></u-switch>
					</view>
				</view>
			</view>
			<view class="userCell-item" @click="gotoUrl('pages/user/logout')">
				<view class="userCell-title">
					<p class="oldTextjp" oldstyle="font-size: 18px;">注销账号</p>
				</view>
				<view class="userCell-content " >
					<text class="ff oldTextjp2" oldstyle="font-size: 16px;">注销后无法恢复，请谨慎操作	</text>
					<text class="iconfont">&#xe600;</text>
				</view>
			</view>
		</view>
			
		<view class="logout-btn oldTextjp" oldstyle="font-size:18px" @click="signOut">
			退出帐号
		</view>
		
		<view>
			<u-modal v-model="show" @confirm="confirm" confirm-color="#FF3D00" :show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" 
				:content="content" :content-style="{color: '#333333'}"></u-modal>
		</view>
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	import * as API from '@/apis/index.js'
	import * as loginApi from '@/apis/login.js'
	
	export default {
		data() {
			return {
				show: false,
				title: '退出账号',
				content: '是否退出当前账号?',
				userId: '',
				userPhone: '',
				checked:false,
				checked2:false,
				valueStyle: {
					color:'#ff3300',
				},
				valueStyle2: {
					color: '#777777',
					textAlign: 'left',
					marginLeft: '8px'
				},
				titleStyle: {
					fontWeight: 'bold',
					fontSize: '18px',
				},
				fontMode: '',
				personInfo:{}
			}
		},
		onReady() {
			if(this.carhelp.get("getElderModeClass") == "长辈模式") {
				this.checked = true;
			} else {
				this.checked = false;
			}
			this.personInfo = this.carhelp.getPersonInfo()
			this.$forceUpdate()
			if(this.personInfo.fontMode=="1"){
					this.checked = true;
					this.carhelp.set("getElderModeClass","长辈模式") 
			}
			if(this.personInfo.quickCharging){
				this.checked2 = true;
			}
		},
		methods: {
			getUserInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((res) => {
					uni.hideLoading();
					
					if (res.code == 200&&res.result) {
						var token = res ? res.data.token : '';	
						this.personInfo=res.data.regUser
										
						this.carhelp.setPersonInfo(res.data.regUser );
						this.carhelp.setToken(token);
						this.carhelp.setPersonInfoPlus(res.data);
						console.log("setPersonInfoPlus")
					}
				}).catch(error => {
					this.carhelp.logoff()
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			checkedChange2() {
			
				
				
				API.changeQuickCharging({qucikStatus: this.checked2?1:0}).then((res) => {
					this.getUserInfo()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			checkedChange() {
				if(this.checked) {
					this.carhelp.set("getElderModeClass", "长辈模式");
					this.fontMode = '1';
				} else {
					this.carhelp.set("getElderModeClass", "标准模式");
					this.fontMode = '0';
				}
				
				API.changeFont({fontMode: this.fontMode}).then((res) => {
					this.getUserInfo()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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;
	}
	.group{
		background-color: #fff;
		margin-top: 12px;
	}
 
  .ff{
	  color: #FF0000;
  }
	.userCell-item {
		display: flex;
		border-bottom: 1px solid rgba(241, 241, 241, 100);
		align-items: center;
		padding: 8px 16px 8px 0px;
	  margin-left: 8px;
		.userCell-title {
			
			font-size: 16px;
			display: flex;
			margin-right: 8px;
	
			p {
				margin-left: 8px;
				font-size: 16px;
				line-height: 28px;
				color: #1a1a1a;
			}
		}
	
		.userCell-content {
			display: flex;
			flex: 1;
			justify-content: space-between;
			margin-left: 40rpx;
			color: #777777;
			font-size: 12px;
			line-height: 20px;
			.iconfont{
				font-size: 24px;
				 margin: auto 0;
				color: #b3b3b3
			}
	
		}
	
		.value {
			display: flex;
			justify-content: space-between;
			flex: 1;
	
			.text {
				line-height: 28px;
				// margin-right: 20vw;
			}
	
		}
	
		.u-switch {
			float: right;
			width: 48px;
			height: 24px;
			vertical-align: middle;
			margin-left: 8px;
		}
	
		/deep/.u-switch__node {
			width: 24px !important;
			height: 24px !important;
		}
	
		
	}
	.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>