assess-app/page_subpack/system_setting/system_setting.vue

<template>
	<view class="total-page page-box task-bg">
		<Nav :type="1" :genre="2" :title="title" :is_fixed="true">
			<view class="sys-background-fff m-30 r-30 p-lr30">
				<view class="from-animation animate__animated animate__fadeIn" v-if="id === 2">
					<view class="p-tb30 bor-bottom-1 row-c" :class="{'apply-shake':phoneShake}">
						<text class="size-28 sys-weight-400 input-text">原密码</text>
						<en-input focus type="password" class="m-l30" placeholder="请输入原密码"
							v-model="passData.old_password" maxlength="11"></en-input>
					</view>
					<view class="p-tb30 row-c">
						<text class="size-28 sys-weight-400 input-text">新密码</text>
						<en-input :type="is_password?'text':'password'" class="m-l30" placeholder="请输入新密码"
							v-model="passData.password"></en-input>
						<image class="eye-class wh-45" :src="`https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/login/${is_password?'eye-filled':'eye'}.png`"
							mode="aspectFill" @click="is_password = !is_password"></image>
					</view>
					<view class="p-tb30 row-c">
						<text class="size-28 sys-weight-400 input-text">确认密码</text>
						<en-input :type="is_pass_two?'text':'password'" class="m-l30" placeholder="请确认密码"
							v-model="passData.pass_two"></en-input>
						<image class="eye-class wh-45" :src="`https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/login/${is_pass_two?'eye-filled':'eye'}.png`"
							mode="aspectFill" @click="is_pass_two = !is_pass_two"></image>
					</view>
				</view>
				<view class="from-animation animate__animated animate__fadeIn" v-if="id === 3">
					<view class="p-tb30 bor-bottom-1 row-c" :class="{'apply-shake':phoneShake}">
						<text class="size-28 sys-weight-400">手机号</text>
						<en-input focus type="number" class="m-l30" placeholder="请输入手机号" v-model="memberData.phone"
							maxlength="11"></en-input>
					</view>
					<view class="p-tb30 row-c">
						<text class="size-28 sys-weight-400 p-r30">验证码</text>
						<en-input type="password" class="flex" placeholder="验证码" v-model="memberData.code"></en-input>
						<view class="text-color-dominant sys-size-28 sys-weight-400" @click="getVerifiedCode"
							v-if="timeNum<=0">发送验证码
						</view>
						<view class="login-send text-color-dominant sys-size-28 sys-weight-400" v-else>{{timeNum}} s
						</view>
					</view>
				</view>
				<view class="p-tb30 row-c" :class="{'apply-shake':phoneShake}" v-if="id === 4">
					<text class="size-28 sys-weight-400">昵称</text>
					<en-input focus class="m-l30" placeholder="请输入昵称" v-model="memberData.nickname"
						maxlength="11"></en-input>
				</view>
				<view class="p-tb30 row-c" :class="{'apply-shake':phoneShake}" v-if="id === 5">
					<text class="size-28 sys-weight-400">姓名</text>
					<en-input focus class="m-l30" placeholder="请输入姓名" v-model="memberData.name"
						maxlength="11"></en-input>
				</view>
			</view>
			<EnButton :text="'保存'" :is_fixed="false" @onSubmit="onSubmit"></EnButton>
		</Nav>
	</view>
</template>

<script>
	import EnInput from "@/components/en-from/en-input/index.vue";
	import {
		getMemberInfo,
		setPassword,
		updateMemberInfo,
		updatePhone
	} from "@/api/user";
	import tools from "@/service/tools";
	import {
		commonSend
	} from "@/api/common";

	export default {
		components: {
			EnInput
		},
		data() {
			return {
				id: 0,
				timeNum: 0,
				title: '',
				placeholder: '',
				phoneShake: false,
				is_password: false,
				is_pass_two: false,
				memberData: {
					'head_img': "",
					'name': "",
					'nickname': "",
					'phone': "",
					'position_name': "",
					code: '',
				},
				passData: {
					old_password: '',
					password: '',
					pass_two: '',
				},
			}
		},
		onLoad(options) {
			this.id = options.id * 1
			this.title = options.title
			this.getMemberInfo()
		},
		methods: {
			getMemberInfo() {
				getMemberInfo({
					'type': 2
				}).then((res) => {
					if (res.code === 1) {
						this.memberData = res.data;
					}
				})
			},
			updateMemberInfo() {

				updateMemberInfo(this.memberData).then((res) => {
					if (res.code === 1) {
						tools.success('设置成功')
						uni.$emit('updateMemberInfo')
						setTimeout(() => {
							tools.leftClick()
						}, 1500)
					} else {
						tools.error(res.msg)
					}
				})
			},
			onSubmit() {
				// this.phoneShake = true
				// setTimeout(() => {
				// 	this.phoneShake = false
				// 	this.passwordShake = false
				// 	this.codedShake = false
				// }, 500)
				if (this.id >= 4) {
					this.updateMemberInfo()
				} else if (this.id === 3) {
					this.updatePhone()
				} else {
					this.setPassword()
				}
			},
			setPassword() {
				if (this.passData.password !== this.passData.pass_two) {
					tools.error('两次密码不一致')
					return
				}
				setPassword(this.passData).then((res) => {
					if (res.code === 1) {
						tools.success(res.msg)
						setTimeout(() => {
							this.leftClick();
						}, 1500)
					} else {
						tools.error(res.msg)
					}
				})
			},
			updatePhone() {
				updatePhone(this.memberData).then((res) => {
					if (res.code === 1) {
						tools.success(res.msg)
						uni.$emit('updateMemberInfo')
						setTimeout(() => {
							this.leftClick();
						}, 1500)
					} else {
						tools.error(res.msg)
					}
				})
			},
			getVerifiedCode() {
				if (this.timeNum > 0) {
					return;
				}
				if (this.memberData.phone === '') {
					tools.error("请输入手机号码")
					return;
				}
				let regPhone = /^(?:(?:\+|00)86)?1\d{10}$/;
				if (!regPhone.test(this.memberData.phone)) {
					tools.error("手机号码格式错误")
					return;
				}
				commonSend({
					'phone': this.memberData.phone,
					'send_type': 'retrieve'
				}).then((res) => {
					if (res.code === 1) {
						tools.success(res.msg);
						this.timeNum = 60;
						this.timer = setInterval(() => {
							this.timeNum--;
							if (this.timeNum <= 0) {
								clearInterval(this.timer);
							}
						}, 1000);
					} else {
						tools.error(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-text {
		display: block;
		width: 120rpx;
		text-align: right;
	}

	.input-item {
		height: 96rpx;
		padding: 28rpx 40rpx;
		box-sizing: border-box;

		.login-input {
			width: 100%;
		}
	}

	.input-item:last-child {
		margin-top: 30rpx;
	}

	.input-send {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.login-input {
			width: calc(100% - 140rpx);
		}

		.login-send {
			width: 140rpx;
			text-align: center;
		}
	}

	.input-but {
		margin-top: 40rpx;
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
	}

	.eye-class {}
</style>