pages/sub_mine/setQuestion.vue

<template>
	<view class="setQuestion">
		<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 -->
				 
				 #<!-- #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>
</template>

<script>
	export default {
		data() {
			return {
				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: 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
			}
		},
		onLoad(optins) {
			this.get_list()
		},
		methods: {
			choose_list(e, fun_name) {
				this.list_select[e].isShow = true
				this.list_select[e].func = this[fun_name]
			},
			get_list() {
				let that = this
				that.$u.get('/v1/security/all').then(res => {
					let list = res.data
					that.list = list
				})
			},
			confirm0(e) {
				this.list_select[0].q_value = this.list[e[0]].question
				this.list_select[0].ssid = this.list[e[0]].ssid
				this.list_select[0].isShow = false
			},
			confirm1(e) {
				this.list_select[1].q_value = this.list[e[0]].question
				this.list_select[1].ssid = this.list[e[0]].ssid
				this.list_select[1].isShow = false
			},
			confirm2(e) {
				this.list_select[2].q_value = this.list[e[0]].question
				this.list_select[2].ssid = this.list[e[0]].ssid
				this.list_select[2].isShow = false
			},
			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 param = {
					answers: answer
				}
				that.$u.post('/v1/security/save', param).then(res => {
					uni.showToast({
						title: "保存成功",
						icon: 'none',
						complete(res) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						}
					})
				})
			}
		}
	}
</script>

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

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

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