CTEQishou/pages/user/Shezhixiugai.vue

<template>
	<view>
		<customNav :shownav="true" :title="title"  tinColor="#006AFF" jiantou="0"></customNav>
		<view class="contentV">
			<view v-if="state==0">
				<view class="yzmctV">
					<view class="xialakuangct" @click="popgjm">
						<text>{{guojiadaima}}</text>
						<image style="width: 36rpx;height: 36rpx;padding-right: 16rpx;" src="/static/imags/xiala@3x.png" mode="scaleToFill"></image>
					</view>
					<input class="noinputV" type="number" :placeholder="$t('user.qsrshouihao')" @input="phoneinput">
				</view>
				<view class="yzmctV noinputVcode">
					<input class="" type="text" :placeholder="$t('user.yanzhengma')"  @input="smsCodeinput">
					<label class="yzmbt" @click="getSMScode">{{yanzmnote}}</label>
				</view>
				
			</view>
			<view v-if="state==1">
				<view class="yzmctV">
					<input class="noinputVcode" password type="text" :placeholder="$t('user.qingshuydlmm')" :password="true"  @input="inputA">
				</view>
				<view class="yzmctV">
					<input class="noinputVcode"  password type="text" :placeholder="$t('user.qingshezmim')" :password="true"  @input="inputB">
				</view>
				<view class="yzmctV">
					<input class="noinputVcode"  password type="text" :placeholder="$t('user.qingzaisryc')" :password="true"  @input="inputC">
				</view>
			</view>
			<view v-if="state==2">
				<view class="yzmctV">
					<input class="noinputVcode"  type="safe-password" :placeholder="$t('user.qingshuyzfmm')" :password="true"  @input="inputA">
				</view>
				<view class="yzmctV">
					<input class="noinputVcode"  type="safe-password" :placeholder="$t('user.qingshezfmm')" :password="true"  @input="inputB">
				</view>
				<view class="yzmctV">
					<input class="noinputVcode"  type="safe-password" :placeholder="$t('user.qingzaisryc')" :password="true"  @input="inputC">
				</view>
			</view>
			
			<view class="yzmctV">
				<label class="querenBt" @click="tijiaoAC">{{$t('index.tijiao')}}</label>
			</view>
		</view>
		<popViewGG :tips="$t('index.gjqhxz')" :show="showpop" :maskClosable="true" :isCancel="true" @chooseCancel="chooseCancel">
			<picker-view :indicator-style="indicatorStyle" :value="pvalue" @change="bindChange" class="picker-view">
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in range" :key="index">{{item}}</view>
			    </picker-view-column>
			</picker-view>
		</popViewGG>
	</view>
</template>

<script>
	import {
		smsCode,
		loginBySmsCode,
		setpassword,
		Bindingphone
	} from '@/pages/api/login';
	import { encrypt,decrypt } from '@/common/jsencrypt.js'
	export default {
		data() {
			return {
				pvalue: [0],
				indicatorStyle: `height: 50px;`,
				range: ["+86","+84","+886"],
				showpop:false,
				yanzmnote:this.$t('user.huoquyanzhegm'),
				timer:'',
				timeCall:0,
				telPhone:'',
				smsCode:'',
				guojiadaima:'86',
				title:'',
				state:-1,
				mimaA:'',
				mimaB:'',
				mimaC:''
			}
		},
		onLoad(option) {
			this.state = option.state;
			if(this.state==0){
				this.title = this.$t('user.bangdingsj')
			}
			if(this.state==1){
				this.title = this.$t('user.denglumima')
			}
			if(this.state==2){
				this.title = this.$t('user.zhifumima')
			}
		},
		methods: {
			tijiaoAC(){
				if(this.state==0){
					if(this.telPhone.length<1){
						uni.showToast({
						    title: this.$t('user.qsrshouihao'),
						    icon: 'none',
						    duration: 3500
						})
						return;
					}
					if(this.smsCode.length==0){
						uni.showToast({
						    title: this.$t('user.yanzhengma'),
						    icon: 'none',
						    duration: 3500
						})
						return;
					}
					this.Bindingphone();
				}
				if(this.state==1){
					if(this.mimaA.length==0){
						uni.showToast({
						    title: this.$t('user.qingshuydlmm'),
						    icon: 'none',
						    duration: 3500
						})
						return;
					}
					if(this.mimaB.length==0){
						uni.showToast({
						    title: this.$t('user.qingshezmim'),
						    icon: 'none',
						    duration: 3500
						})
						return;
					}
					if(this.mimaB!=this.mimaC){
						uni.showToast({
						    title: 'Mật khẩu mới nhập hai lần không phù hợp',
						    icon: 'none',
						    duration: 3500
						})
						return;
					}
					this.setpassword();
				}
				if(this.state==2){
					uni.showToast({
					    title: '待完善',
					    icon: 'none',
					    duration: 3500
					})
				}
			},
			inputA(event){
				this.mimaA = event.target.value;
			},
			inputB(event){
				this.mimaB = event.target.value;
			},
			inputC(event){
				this.mimaC = event.target.value;
			},
			bindChange (e) {
				var val = e.detail.value[0];
				this.guojiadaima=this.range[val];
			},
			popgjm(){
				this.showpop=true;
			},
			chooseCancel(){
				this.showpop=false;
			},
			
			phoneinput(event){
				this.telPhone = event.target.value;
			},
			smsCodeinput(event){
				this.smsCode = event.target.value;
			},
			getSMScode(){
				if(this.telPhone.length<1){
					uni.showToast({
					    title: this.$t('user.qsrshouihao'),
					    icon: 'none',
					    duration: 3500
					})
					return;
				}
				if(this.timeCall==0){
					this.getSMScodeact();
					this.timeCall=60;
				}
				else{
					return;
				}
				var that = this;
				this.timer = setInterval(() => {
							that.timeCall=that.timeCall-1;
							if(that.timeCall==0){
								clearInterval(that.timer);
								that.yanzmnote = that.$t('user.huoquyanzhegm');
							}
							else{
								that.yanzmnote =that.$t('user.chongxinhq')+'('+that.timeCall+')';
							}
				}, 1000);
			},
			async getSMScodeact(){
				console.log("getSMScodeact");
				await this.$http.get(`${smsCode}`, {
						phone:this.guojiadaima+this.telPhone
					},false)
				.then(async r => {
					console.log(r)
					})
				.catch(err => {
					console.log(err)
					})
			},
			async setpassword(){
				var that = this;
				console.log(this.mimaA,this.mimaB)
				await this.$http.post(`${setpassword}`, {
						"password": encrypt(this.mimaA), //原密码
						"newpassword": encrypt(this.mimaB) //新密码
				},true)
				.then(async r => {
					console.log(r)
					if(r.data.code!=200){
						uni.showToast({
						    title: r.data.msg,
						    icon: 'none',
						    duration: 3500
						})
						return;
					}
					uni.showToast({
					    title: that.$t('user.shezhichengg'),
					    icon: 'none',
					    duration: 2000
					})
					setTimeout(() => {
						uni.setStorageSync('userInfo','');
						uni.setStorageSync('token','');
						uni.redirectTo({
							url:'/pages/user/LoginView'
						})
					}, 2000);
				})
				.catch(err => {
					console.log(err)
					uni.showToast({
					    title: that.$t('user.shezhishibai'),
					    icon: 'none',
					    duration: 3500
					})
				})
			},
			async Bindingphone(){
				var that = this;
				console.log("Bindingphone");
				await this.$http.post(`${Bindingphone}`, {
						"telPhone": this.guojiadaima+this.telPhone, 
						"code": this.smsCode 
				},true)
				.then(async r => {
					console.log(r);
					uni.showToast({
					    title: that.$t('user.shezhichengg'),
					    icon: 'none',
					    duration: 3500
					})
				})
				.catch(err => {
					console.log(err)
					uni.showToast({
					    title: that.$t('user.shezhishibai'),
					    icon: 'none',
					    duration: 3500
					})
				})
			},
			
			
		},
	}
</script>

<style lang="scss">
	@import '@/common/common.scss';
	page{
		background-color: white;
	}
	
	.contentV{
		display: flex;
		width: 92%;
		margin-left: 4%;
		flex-direction: column;
		justify-content: flex-start;
	}
	.yzmctV{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content:flex-start;
		margin-top: 30rpx;
		width: 100%;
	}
	.xialakuangct{
		
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content:space-between;
		
		padding-left: 16rpx;
		margin-right: 20rpx;
		width: 140rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		border: 2rpx solid #F2F3F7;
		background-color: #F2F3F7;
	}
	.noinputV{
		width: 73%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		border: 2rpx solid #F2F3F7;
		background-color: #F2F3F7;
	}
	.yzmbt{
		color: white;
		font-size: 26rpx;
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin-left: auto;
		margin-right: 10rpx;
		border-radius: 2rpx;
		background-color:#60BA63;
	}
	.noinputVcode{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		border: 2rpx solid #F2F3F7;
		background-color: #F2F3F7;
	}
	.querenBt{
		margin-top: 30rpx;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		text-align: center;
		justify-content: center;
		background-color: #006AFF;
		color: white;
		box-shadow: 0px 0rpx 10rpx 0rpx #006AFF;
	}
	.picker-view {
		width: 750rpx;
		height: 300rpx;
		margin-top: 10rpx;
	}
	.item {
		line-height: 100rpx;
		text-align: center;
	}

</style>