JP-ChargeTeam51/pages/user/dataSet.vue

<template>
	<view>
		<ujp-navbar title="个人资料"></ujp-navbar>

		<!-- 个人信息 -->
		<view class="userCell">
			<view class="title oldTextjp2" oldstyle="font-size: 20px;">
				个人信息
			</view>
			<!-- 头像 -->
			<view class="userCell-item">
				<view class="userCell-title">
					<text class="user"><img style="visibility: middle;;" src="../../assets/img/account-circle-fill.svg"
							alt=""></text>
					<p class="oldTextjp" oldstyle="font-size: 18px;">头像</p>
				</view>
				<view class="userCell-content oldTextjp2" oldstyle="font-size: 18px;" @click="uploadPhoto">
					<view class="value">

						<view class="box">
							<u-avatar v-if="form.headImg != null" class="avatar" :src="form.headImg+'?x-oss-process=image/resize,m_fill,w_256,h_256'" size="80">
								<img src="" alt="">
							</u-avatar>
							<img v-else class="camera" src="../../assets/img/camera-fill.svg" alt="">
						</view>
						
					</view>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
				</view>
			</view>
			<!-- 昵称 -->
			<view class="userCell-item">
				<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
					<text class="user"><img style="visibility: middle;;" src="../../assets/img/edit-box-fill.svg"
							alt=""></text>
					<p class="oldTextjp" oldstyle="font-size: 18px;">昵称</p>
				</view>
				<view class="userCell-content oldTextjp2" oldstyle="font-size: 18px;" @click="maskShow1">
					<view class="value black">
						{{form.nickName}}
					</view>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
				</view>
			</view>
			<!-- 真实姓名 -->
			<view class="userCell-item">
				<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
					<text class="user"><img style="visibility: middle;;" src="../../assets/img/edit-box-fill.svg"
							alt=""></text>
					<p class="oldTextjp" oldstyle="font-size: 18px;">姓名</p>
				</view>
				<view class="userCell-content oldTextjp2" oldstyle="font-size: 18px;" @click="maskShow2">
					<view class="value black" v-if="form.realName != null">
						{{form.realName}}
					</view>
					<view class="value" v-else>
						请填写真实姓名
					</view>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
				</view>
			</view>
			<!-- 生日 -->
			<view class="userCell-item">
				<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
					<text class="user"><img style="visibility: middle;;" src="../../assets/img/cake-2-fill.svg"
							alt=""></text>
					<p class="oldTextjp" oldstyle="font-size: 18px;">生日</p>
				</view>
				<u-picker mode="time" v-model="timeShow" :params="params" @confirm="confirmTime" @cancel="cancelTime"></u-picker>
				<view class="userCell-content oldTextjp2" oldstyle="font-size: 18px;" @click="timeShowClick">
					<view class="value black" v-if="birthday != null">
						{{birthday}}
					</view>
					<view class="value" v-else>
						请选择
					</view>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
				</view>
			</view>

		</view>
		<u-line color="#F2F2F2 100%" length="87.2%" margin="8px auto 0" />
		<!-- 账户与安全 -->
		<view class="userCell">
			<view class="title oldTextjp2" oldstyle="font-size: 20px;">
				账户与安全
			</view>
			<!-- 更换手机号 -->
			<view class="userCell-item">
				<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
					<text class="user"><img style="visibility: middle;;" src="../../assets/img/smartphone-fill.svg"
							alt=""></text>
					<p class="oldTextjp" oldstyle="font-size: 18px;">更换手机号</p>
				</view>
				<view class="userCell-content oldTextjp2" oldstyle="font-size: 18px;" @click="gotoUrl('pages/user/phone')">
					<view class="value black">
						{{userPhone}}
					</view>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
				</view>
			</view>
			<!-- 实名认证 -->
			<!-- <view class="userCell-item">
				<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
					<text class="user"><img style="visibility: middle;;" src="../../assets/img/shield-user-fill.svg"
							alt=""></text>
					<p class="oldTextjp" oldstyle="font-size: 18px;">实名认证</p>
				</view>
				<view class="userCell-content oldTextjp2" oldstyle="font-size: 18px;">
					<view class="value">
						未实名
					</view>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
				</view>
			</view> -->
		</view>
		<u-line color="#F2F2F2 100%" length="87.2%" margin="8px auto 0" />
		<!-- 更多操作 -->
		<view class="userCell">
			<view class="title oldTextjp2" oldstyle="font-size: 20px;">
				更多操作
			</view>
			<!-- 车辆信息 -->
			<view class="userCell-item">
				<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
					<text class="user"><img style="visibility: middle;;" src="../../assets/img/car-fill (1).svg"
							alt=""></text>
					<p class="oldTextjp" oldstyle="font-size: 18px;">车辆信息</p>
				</view>
				<view class="userCell-content oldTextjp2" oldstyle="font-size: 18px;" @click="carClick">
					<view class="value black" v-if="carList.carNum != null">
						{{carList.carNum}}
					</view>
					<view class="value" v-else>
						未绑定
					</view>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
				</view>
			</view>
			<!-- 长辈模式 -->
			<view class="userCell-item">
				<view class="userCell-title">
					<text class="user"><img style="visibility: middle;;" src="../../assets/img/zoom-in-fill.svg"
							alt=""></text>
					<p class="oldTextjp" oldstyle="font-size: 18px;">长辈模式</p>
				</view>
				<view class="userCell-content oldTextjp2" oldstyle="font-size: 18px;">
					<view class="value">

						<view class="text black">
							字体更大 看得清
						</view>

						<u-switch v-model="checked" active-color="#00E266" @change="checkedChange"></u-switch>
					</view>
					<!-- <u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon> -->
				</view>
			</view>
			<!-- 注销账号 -->
			<view class="userCell-item" @click="gotoUrl('pages/user/logout')">
				<view class="userCell-title">
					<text class="user"><img style="visibility: middle;;" src="../../assets/img/spam-3-fill.svg"
							alt=""></text>
					<p class="oldTextjp" oldstyle="font-size: 18px;">注销账号</p>
				</view>
				<view class="userCell-content">
					<view class="value black" :style="elderStatus ? 'font-size: 16px;' : 'font-size: 14px;'">
						注销后无法恢复，请谨慎操作
					</view>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
				</view>
			</view>
		</view>

		<view class="exit oldTextjp2" oldstyle="font-size: 18px;" @click="signOut">
			退出账号
		</view>
		<view>
			<u-modal v-model="exitShow" @confirm="confirm" confirm-color="#FF3D00" :show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" 
				:content="content" :content-style="{color: '#333333'}"></u-modal>
		</view>

		<!-- 昵称遮罩层 -->
		<u-mask :show="show1" @click="show1 = false" :zoom='false'>
			<view class="warp">
				<view class="rect" @tap.stop>
					<p>修改昵称</p>

					<textarea name="" id="" cols="30" rows="10" v-model="name1"></textarea>
					<img class="canc" src="../../assets/img/md-cancel Copy@3x.png" alt="" @click="nickNameReset">
					<u-button type="success" @click="nickNameSubmit">保存</u-button>
				</view>
			</view>
		</u-mask>
		
		<!-- 真实姓名遮罩层 -->
		<u-mask :show="show2" @click="show2 = false" :zoom='false'>
			<view class="warp">
				<view class="rect" @tap.stop>
					<p>请填写真实姓名</p>
		
					<textarea name="" id="" cols="30" rows="10" v-model="name2"></textarea>
					<img class="canc" src="../../assets/img/md-cancel Copy@3x.png" alt="" @click="realNameReset">
					<u-button type="success" @click="realNameSubmit">保存</u-button>
				</view>
			</view>
		</u-mask>
		
	</view>

</template>

<script>
	import * as API from '@/apis/index.js'
	import * as userApi from '@/apis/user.js'
	import * as loginApi from '@/apis/login.js'

	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				timeShow: false,
				exitShow: false,
				title: '退出账号',
				content: '是否退出当前账号?',
				checked: false,
				src: '',
				show1: false,
				show2: false,
				fontMode: '',
				userId: '',
				userPhone: '',
				name1: '',
				name2: '',
				form: {
					nickName: '',
					headImg: '',
					realName: '',
				},
				birthday: '',
				carList: {
					carNum: null,
				},
				elderStatus: false,
			}
		},
		onShow() {
			if (this.carhelp.get("getElderModeClass") == "长辈模式") {
				this.checked = true;
				this.elderStatus = true;
			} else {
				this.checked = false;
				this.elderStatus = false;
			}

			this.getUserInfo();
			this.getCarList();
		},
		methods: {
			carClick() {
				if(this.carList.carNum != null) {
					uni.navigateTo({
						url: '/pages/user/car/carAdd?id=' + this.carList.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/car/carDet'
					})
				}
			},
			getCarList() {
				this.carList.carNum = null;
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.regUserCarList().then((res) => {
					uni.hideLoading();
					if(res.data.length != 0) {
						this.carList = res.data[0];
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			timeShowClick() {
				if(this.birthday == null) {
					this.timeShow = true;
				}
			},
			confirmTime(params) {
				this.birthday = params.year + '-' + params.month + '-' + params.day;
				console.log(this.birthday)
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.changeBirthday({birthday: this.birthday}).then((res) => {
					uni.hideLoading();
					this.timeShow = false;
				
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			cancelTime() {
				this.timeShow = false;
			},
			signOut() {
				this.exitShow = true;
			},
			confirm() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.logout().then((res) => {
					uni.hideLoading();
					this.exitShow = false;
					this.carhelp.logoff()
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			submit() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.updatePersonInformation(this.form).then((res) => {
					uni.hideLoading();
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			nickNameSubmit() {
				this.form.nickName = this.name1;
				this.submit();
				this.show1 = false;
			},
			maskShow1() {
				this.show1 = true;
				this.name1 = this.form.nickName;
			},
			nickNameReset() {
				this.name1 = '';
			},
			realNameSubmit() {
				this.form.realName = this.name2;
				this.submit();
				this.show2 = false;
			},
			maskShow2() {
				this.show2 = true;
				this.name2 = this.form.realName;
			},
			realNameReset() {
				this.name2 = '';
			},
			checkedChange() {
				if (this.checked) {
					this.carhelp.set("getElderModeClass", "长辈模式");
					this.fontMode = '1';
					this.elderStatus = true;
				} else {
					this.carhelp.set("getElderModeClass", "标准模式");
					this.fontMode = '0';
					this.elderStatus = false;
				}

				API.changeFont({
					fontMode: this.fontMode
				}).then((res) => {

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getUserInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((res) => {
					uni.hideLoading();
					this.form.nickName = res.data.regUser.nickName;
					this.form.headImg = res.data.regUser.headImg;
					this.form.realName = res.data.regUser.realName;
					this.birthday = res.data.regUser.birthday;
					
					var phone = res.data.regUser.phone;
					var phone1 = phone.slice(0,3);
					var phone2 = phone.slice(-4);
					this.userPhone = phone1 + '****' + phone2;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			uploadPhoto() {
				let _self = this;
				
				const crop = {
					quality: 100,
					width: 600,
					height: 600,
					resize: true
				};
				
				// 上传图片
				uni.chooseImage({
					count: 1,
					crop,
					success: async (res) => {
						//(res);
						let tempFile = res.tempFiles[0],
							avatar_file = {
								// #ifdef H5
								extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
								// #endif
								// #ifndef H5
								extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
								// #endif
							},
							filePath = res.tempFilePaths[0]
							
						// #ifndef APP-PLUS
						//(`filePath=${filePath}`)
						
						//非app端用前端组件剪裁头像，app端用内置的原生裁剪
						let fileData = await new Promise((callback) => {
							uni.navigateTo({
								url: '/pages/user/cropImage?path=' + filePath +
									`&options=${JSON.stringify(crop)}`,
								animationType: "fade-in",
								events: {
									success: url => {
										callback(url)
									}
								}
							});
						})
						// #endif
						
						//返回 base64 图片
						//(fileData);
						
						var token = _self.carhelp.getToken()
						
						uni.showLoading({
							title: '上传中'
						});
						
						uni.request({
						    url: process.car.BASE_URL + "uploadBase64",
							method: 'POST',
						    data: {
						        photoBase64Data: fileData
						    },
						    header: {
						        'Authorization': token,
								'content-type': 'application/x-www-form-urlencoded'
						    },
						    success: (res) => {
								let jsonData = res.data;
						        _self.form.headImg = jsonData.data;
										_self.submit();
								uni.hideLoading();
						    }
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		padding-bottom: 20px;
	}

	.userCell {
		.user {

			img {
				vertical-align: middle;
			}
		}

		.title {
			padding: 24px 20px 8px 20px;
			font-size: 18px;
			color: rgba(16, 16, 16, 100);
		}


		.userCell-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 11px 20px;

			.userCell-title {
				font-size: 16px;
				display: flex;

				p {
					margin-left: 8px;
					font-size: 16px;
					line-height: 28px;
					color: #333333;
				}
			}

			.userCell-content {
				display: flex;
				color: rgba(153, 153, 153, 100);
				font-size: 16px;
				line-height: 20px;

			}

			.value {
				display: flex;

				.text {
					line-height: 28px;
				}

				.circle {
					width: 40px;
					height: 40px;
				}

				.u-avatar {
					position: absolute;
				}

				.camera {
					width: 20px;
					height: 20px;

					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					z-index: 9999;

				}

				.box {
					border-radius: 999px;
					height: 40px;
					width: 40px;
					position: relative;
					background: url(@/assets/img/circle.png);
					background-repeat: no-repeat;
					background-position: 30% 10%;
					background-size: cover;
				}

			}

			.u-switch {
				width: 48px;
				height: 24px;
				vertical-align: middle;
				margin-left: 8px;
			}

			/deep/.u-switch__node {
				width: 24px !important;
				height: 24px !important;
			}

			span {
				color: #999;

			}

			.add {
				color: #999;
			}

			.black {
				color: #666666;
			}
		}
	}

	.exit {
		color: rgba(238, 49, 56, 100);
		font-size: 16px;
		text-align: center;
		margin-top: 10px;
	}

	.warp {

		position: fixed;
		left: 0;
		bottom: 0;

		width: 100%;
	}

	.rect {
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding: 24px 0;

		p {
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
			line-height: 24px;
			padding: 0 24px;
		}

		textarea {
			width: 87.2%;
			border-radius: 8px;
			background-color: rgba(229, 231, 234, 100);
			margin: 12px auto 0;
			height: 44px;
			line-height: 44px !important;
			padding: 0 8px;
			position: relative;
		}

		.canc {
			width: 20px;
			height: 20px;
			position: absolute;
			top: 70px;
			right: 7vw;
		}

		.u-btn {
			width: 89.2%;
			color: rgba(255, 255, 255, 100);
			font-size: 18px;
			border-radius: 8px;
			margin-top: 24px;
			z-index: 99999;
		}
	}
</style>