xingmingyi_applet/pages/user/set/set.vue

<template>
	<view class="home">
		<view v-if="show" class="putWarp dffd">
			<block v-if="type == 1">
				<view class="putin bb dffs"><input @confirm="clickHandle" type="number" v-model="phone" placeholder="请输入手机号" /></view>
				<view class="putin bb dffs">
					<input type="text" v-model="code" placeholder="请输入短信验证码" />
					<verif :phone="phone"></verif>
				</view>
			</block>
			<block v-if="type == 2">
				<view class="putin dffs"><input @confirm="clickHandle" type="text" v-model="name" placeholder="请输入昵称" /></view>
			</block>
			<block v-if="type == 3">
				<view class="putin dffs"><input @confirm="clickHandle" type="text" v-model="school" placeholder="填写学校信息" /></view>
			</block>
			<block v-if="type == 4">
				<view class="putin spec bb dfsb">
					<text class="fontmid flex1">支付密码</text>
					<input @confirm="clickHandle" type="password" v-model="oldpass" placeholder="设置支付密码" />
				</view>
			</block>
			<block v-if="type == 6">
				<view class="putin spec bb dfsb">
					<text class="fontmid flex1">支付密码</text>
					<text class="fontmid textgrey">已设置</text>
				</view>
			</block>
			<block v-if="type == 5">
				<view class="putin bb dffs"><input @confirm="clickHandle" disabled="true" type="number" v-model="userInfo.userInfo.phone" placeholder="请输入手机号" /></view>
				<view class="putin bb dffs">
					<input type="text" v-model="code" placeholder="请输入短信验证码" />
					<verif :phone="userInfo.userInfo.phone"></verif>
				</view>
				<view class="putin spec bb dfsb">
					<text class="fontmid flex1">新密码</text>
					<input @confirm="clickHandle" type="password" v-model="newpass" placeholder="请输入新密码" />
				</view>
				<view class="putin spec bb dfsb">
					<text class="fontmid flex1">确认新密码</text>
					<input @confirm="clickHandle" type="password" v-model="two_pay_pass" placeholder="请输入确认新密码" />
				</view>
			</block>
		</view>
		<u-button color="#ED742F" iconColor="#fff" v-if="type != 6" @click="clickHandle" throttleTime="2000" shape="circle" class="custom-style" text="确定修改"></u-button>
		<u-button color="#ED742F" iconColor="#fff" v-if="type == 6" @click="type = 5" throttleTime="2000" shape="circle" class="custom-style" text="修改支付密码"></u-button>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import verif from '@/components/y-verif/verif.vue';
export default {
	data() {
		return {
			show: false,
			type: '1', //1.手机号 2.昵称 3.学校信息 4.支付密码
			phone: '',
			code: '',
			name: '',
			school: '',
			oldpass: '',
			newpass: '',
			two_pay_pass:'',
			customStyle: {
				color: '#fff'
			}
		};
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo })
	},
	onLoad(opt) {
		this.type = opt.type || '1'; //1.手机号 2.昵称 3.学校信息 4.支付密码
		if (this.type == 1) {
			uni.setNavigationBarTitle({
				title: '更换手机号'
			});
		} else if (this.type == 2) {
			uni.setNavigationBarTitle({
				title: '修改昵称'
			});
		} else if (this.type == 3) {
			uni.setNavigationBarTitle({
				title: '学校信息'
			});
		} else if (this.type == 4) {
			uni.setNavigationBarTitle({
				title: '支付密码'
			});
		} else {
		}
		setTimeout(res => {
			this.show = true;
		}, 800);
	},
	onShow() {},
	methods: {
		clickHandle() {
			let url = '';
			let data = {};
			if (this.type == 1) {
				let phoneReg = /^(1[3-9])\d{9}$/;
				if (!phoneReg.test(this.phone)) {
					return this.$api.toast('手机号码不合法！');
				}
				if (!this.phone) {
					return this.$api.toast('请输入手机号', 1000);
				}
				if (!this.code) {
					return this.$api.toast('请输入短信验证码');
				}
				url = 'user/setPhone';
				data = {
					phone: this.phone,
					code: this.code
				};
			} else if (this.type == 2) {
				if (!this.name) {
					return this.$api.toast('请输入昵称');
				}
				url = 'user/changeNickname';
				data = {
					nickname: this.name
				};
			} else if (this.type == 3) {
				if (!this.school) {
					return this.$api.toast('请输入学校信息');
				}
				(url = 'user/changeSchool'),
					(data = {
						school: this.school
					});
			} else if (this.type == 4) {
				if (!this.oldpass) {
					return this.$api.toast('请输入密码');
				}
				url = 'user/setPayPass';
				data = {
					pass: this.oldpass
				};
			} else if (this.type == 5) {
				if (!this.userInfo.userInfo.phone) {
					return this.$api.toast('请输入手机号');
				}
				if (!this.code) {
					return this.$api.toast('请输入验证码');
				}
				if (!this.newpass) {
					return this.$api.toast('请输入新密码');
				}
				if (!this.two_pay_pass) {
					return this.$api.toast('请确认新密码');
				}if (this.newpass != this.two_pay_pass) {
					return this.$api.toast(' 新密码不一致');
				}
				url = 'user/newSetPassd';
				data = {
					phone: this.userInfo.userInfo.phone,
					code: this.code,
					pay_pass: this.newpass,
					two_pay_pass:this.two_pay_pass,
				};
			}
			this.$api
				.request(url, data)
				.then(data => {
					if (data.code == '200') {
						this.$api.toast(data.msg);
						setTimeout(res => {
							this.$store.dispatch('getUserInfo');
							uni.navigateBack({
								delta: 1
							});
						}, 300);
					} else {
						this.$api.toast(data.msg);
					}
				})
				.catch(function(error) {
					this.$api.toast(error);
				});
		}
	},
	components: {
		verif
	}
};
</script>

<style lang="scss">
.home {
	padding: 20rpx 0rpx 0;

	//yanzhengma
	.u-hairline-border[data-v-3bf2dba7]:after {
		border: 0;
	}
	.tips {
		padding: 0;
		color: $promain;
		font-size: 28rpx;
		line-height: 40rpx;
		height: 40rpx;
	}
	.putWarp {
		background-color: #fff;
		padding: 0rpx 32rpx;
		align-items: center;
		.putin {
			width: 100%;
			padding: 30rpx 0;
			&:nth-last-of-type(1) {
				border-bottom: 0px;
			}
			input {
				flex: 1;
				font-size: 28rpx;
			}
			.promain {
				border-left: 1px solid #dbdbdb;
				padding-left: 30rpx;
			}
		}
		.spec {
			input {
				text-align: right;
			}
		}
	}
	.custom-style {
		background-color: #0bb291;
		width: 690rpx;
		margin-top: 200rpx;
		text {
			color: #fff;
		}
	}
}
</style>