pages/sub_basic/question.vue

<template>
	<view>
		<view class="setQuestion" v-if="show_question && !show_pwd">
			<view class="setQuestion-container">
				<view class="setQuestion-item" v-for="(v,i) in list_select" :key='i'>
					<u-field :disabled="true" :label="v.q_title" :field-style="field_style" v-model="v.q_value" input-align='right'
					 @click="choose_list(i,'confirm'+i)"></u-field>
					<u-field :label="v.a_title" :field-style="field_style" v-model="v.a_value" input-align='right' placeholder="请输入您的答案"
					 maxlength="20"></u-field>
					 <!-- #ifdef APP-PLUS -->
					 <u-picker mode="selector" v-model="v.isShow" :default-selector="[i]" :range="list" range-key="question" @confirm="v.func"></u-picker>
					 <!-- #endif -->
					<!-- <u-picker mode="selector" v-model="v.isShow" :default-selector="[i]" :range="list" range-key="question" @confirm="v.func"></u-picker> -->
					<!-- #ifdef MP-WEIXIN -->
					<u-picker mode="selector" v-model="list_select[0].isShow" :default-selector="[i]" :range="list" range-key="question" @confirm="confirm0"></u-picker>
					<u-picker mode="selector" v-model="list_select[1].isShow" :default-selector="[i]" :range="list" range-key="question" @confirm="confirm1"></u-picker>
					<u-picker mode="selector" v-model="list_select[2].isShow" :default-selector="[i]" :range="list" range-key="question" @confirm="confirm2"></u-picker>
					<!-- #endif -->
				</view>
			</view>
			<u-button @click="submit" :custom-style="submit_btn">验证密保</u-button>
		</view>
		<view class="setQuestion" v-if="!show_question && !show_pwd">
			<view class="setQuestion-container">
				<u-field label="手机号" :field-style="field_style" v-model="phone" input-align='right' placeholder="请输入您设置密保时关联的手机号"></u-field>
			</view>
			<u-button @click="check_phone" :custom-style="submit_btn">确认手机号</u-button>
		</view>
		<view class="setQuestion" v-if="show_pwd">
			<view class="setQuestion-container">
				<u-field label="新密码" :field-style="field_style" v-model="pwd" input-align='right' placeholder="请输入您的新密码" password></u-field>
			</view>
			<view class="setQuestion-container">
				<u-field label="确认密码" :field-style="field_style" v-model="repwd" input-align='right' placeholder="请确认您的新密码"
				 password></u-field>
			</view>
			<u-button @click="change_pwd" :custom-style="submit_btn">修改密码</u-button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				field_style: {
					'font-size': '30rpx',
					'color': '#6a6a6a'
				},
				submit_btn: {
					width: '600rpx',
					backgroundColor: '#2FA8E1',
					color: '#FFFFFF',
					fontFamily: "PingFang-SC-Medium",
					fontSize: '30rpx',
					marginTop: '100rpx',
					padding: '50rpx 0'
				},
				show_question: false,
				show_pwd: false,
				list: [],
				list_select: [{
						q_title: 'Q1:',
						q_value: '请选择您的密保问题',
						a_value: '',
						a_title: 'A1:',
						isShow: false,
						func: function(){}
					},
					{
						q_title: 'Q2:',
						q_value: '请选择您的密保问题',
						a_value: '',
						a_title: 'A2:',
						isShow: false,
						func: function(){}
					},
					{
						q_title: 'Q3:',
						q_value: '请选择您的密保问题',
						a_value: '',
						a_title: 'A3:',
						isShow: false,
						func: function(){}
					},
				],
				answers: [{
						"ssid": "",
						"answer": ""
					},
					{
						"ssid": "",
						"answer": ""
					},
					{
						"ssid": "",
						"answer": ""
					}
				],
				pass: false,
				pwd: '',
				repwd: ''
			}
		},
		onLoad(optins) {
			// this.get_list()
		},
		methods: {
			choose_list(e, fun_name) {
				// console.log(e,fun_name)
				this.list_select[e].isShow = true
				this.list_select[e].func = this[fun_name]
			},
			check_phone() {
				let that = this
				let phone = that.phone
				that.$u.get('/i/security/list?phone=' + phone).then(res => {
					let list = res.data
					if (list.length == 0) {
						uni.showModal({
							title: '提示',
							content: '您还未设置过密保',
						})
						return
					}
					uni.setStorageSync("phone", phone)
					that.list = list
					that.show_question = true
				})
			},
			confirm0(e) {
				this.list_select[0].q_value = this.list[e[0]].question
				this.list_select[0].ssid = this.list[e[0]].ssid
			},
			confirm1(e) {
				this.list_select[1].q_value = this.list[e[0]].question
				this.list_select[1].ssid = this.list[e[0]].ssid
			},
			confirm2(e) {
				this.list_select[2].q_value = this.list[e[0]].question
				this.list_select[2].ssid = this.list[e[0]].ssid
			},
			submit() {
				let that = this
				let list = that.list_select
				let answer = that.answers
				list.map((item, index, arr) => {
					let ssid = item.ssid
					let length = item.a_value.length
					answer[index].ssid = ssid
					answer[index].answer = item.a_value
				})
				let str = ''
				answer.forEach(item => {
					str = str + item.ssid
				})
				for (let i = 0; i < answer.length; i++) {
					let item = answer[i]
					let ssid = item.ssid
					if (!ssid) {
						uni.showModal({
							title: '提示',
							content: '请选择密保问题',
						})
						that.pass = false
						break;
					} else {
						that.pass = true
					}
					let reg = new RegExp(item.ssid, "g")
					let length = str.match(reg).length
					if (length >= 2) {
						uni.showModal({
							title: '提示',
							content: '请选择不同的密保问题',
						})
						that.pass = false
						break;
					} else {
						that.pass = true
					}

					let value_length = item.answer.length
					if (value_length < 2) {
						uni.showModal({
							title: '提示',
							content: '未填写问题或问题答案长度小于2个字符',
						})
						that.pass = false
						break;
					} else {
						that.pass = true
					}
				}
				if (!that.pass) return
				let phone = that.phone
				let param = {
					answers: answer,
					phone
				}
				that.$u.post('/i/security/check', param).then(res => {
					//console.log(res)
					if (res.error == null) {
						that.show_question = false
						that.show_pwd = true
					} else {
						uni.showModal({
							title: '提示',
							content: '密保错误，请确认后重新验证'
						})
					}

				})
			},
			change_pwd() {
				let that = this
				let pwd = that.pwd
				let repwd = that.repwd
				if (!!!pwd || !!!repwd) {
					uni.showModal({
						title: '提示',
						content: '请输入密码'
					})
					return
				}
				if (pwd != repwd) {
					uni.showModal({
						title: '提示',
						content: '两次密码不一致,请确认后重新输入'
					})
					return
				}
				let answers = that.answers
				let phone = that.phone
				//console.log(answers)
				let params = {
					pwd,
					repwd,
					answers,
					phone
				}
				that.$u.post('/i/security/pwdset', params).then(res => {
					uni.showToast({
						title: "密码修改成功",
						icon: "none",
						duration: 800,
						complete(res) {
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/sub_basic/login"
								})
							}, 1500)
						}
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.setQuestion {
		margin-top: 30rpx;

		&-container {
			background-color: #FFFFFF;
		}

		&-item {
			margin-bottom: 30rpx;
		}
	}
</style>