assess-app/page_subpack/system_setting/system_setting.vue

<template>
	<view class="total-page page-box">
		<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="password" class="m-l30" placeholder="请输入新密码"
							v-model="passData.password"></en-input>
					</view>
					<view class="p-tb30 row-c">
						<text class="size-28 sys-weight-400 input-text">确认密码</text>
						<en-input type="password" class="m-l30" placeholder="请确认密码"
							v-model="passData.pass_two"></en-input>
					</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,
        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;
	}
</style>