279 lines
7.1 KiB
Vue
279 lines
7.1 KiB
Vue
<template>
|
||
<view>
|
||
<view class="text">如果手机丢了，可以通过回答设置的安全问题来登录新设备</view>
|
||
<view class="safe-question">
|
||
<view class="question" @click="popup('firstList')">
|
||
<view>{{answer[0].question}}</view>
|
||
<image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="line"></view>
|
||
<input class="input" :value="answer[0].answer" maxlength="50" placeholder="请输入答案"
|
||
placeholder-class="input-placeholder" @input="changeFirstAnswer"></input>
|
||
</view>
|
||
<view class="safe-question">
|
||
<view class="question" @click="popup('secondList')">
|
||
<view>{{answer[1].question}}</view>
|
||
<image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="line"></view>
|
||
<input class="input" :value="answer[1].answer" maxlength="50" placeholder="请输入答案"
|
||
placeholder-class="input-placeholder" @input="changeSecondAnswer"></input>
|
||
</view>
|
||
<view class="safe-question">
|
||
<view class="question" @click="popup('thirdList')">
|
||
<view>{{answer[2].question}}</view>
|
||
<image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="line"></view>
|
||
<input class="input" :value="answer[2].answer" maxlength="50" placeholder="请输入答案"
|
||
placeholder-class="input-placeholder" @input="changeThirdAnswer"></input>
|
||
</view>
|
||
<view class="button" @click="updateAnswer">保存</view>
|
||
</view>
|
||
<up-popup :show="show" mode="bottom" round="16rpx" @close="close">
|
||
<view class="popup-title">选择问题</view>
|
||
<view class="line" style="height: 10rpx"></view>
|
||
<view v-for="item in currentQuestionList" :key="item.questionId" @click="selectQuestion(item)">
|
||
<view class="popup-content">{{item.question}}</view>
|
||
<view class="line"></view>
|
||
</view>
|
||
<view class="line" style="height: 10rpx"></view>
|
||
<view class="popup-title" @click="close">取消</view>
|
||
</up-popup>
|
||
</template>
|
||
|
||
<script>
|
||
import { getQuestionAnswerRequest, getQuestionListRequest, updateQuestionAnswerRequest } from '@/api/safeAnswer'
|
||
import { mapActions, mapState } from 'pinia'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { useBasicStore } from '@/stores/basic'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
questionList: {},
|
||
currentQuestionList: [],
|
||
currentIndex: 0,
|
||
answer:[{
|
||
question: '问题一',
|
||
answer: ''
|
||
}, {
|
||
question: '问题二',
|
||
answer: ''
|
||
}, {
|
||
question: '问题三',
|
||
answer: ''
|
||
}],
|
||
show: false,
|
||
pending: false,
|
||
questionAnswer: null
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(useUserStore, ['userInfo'])
|
||
},
|
||
async onLoad (data) {
|
||
this.getQuestionList()
|
||
const questionAnswer = JSON.parse(data.questionAnswer)
|
||
if (questionAnswer) {
|
||
uni.setNavigationBarTitle({
|
||
title: '安全问题设置'
|
||
})
|
||
this.questionAnswer = questionAnswer
|
||
this.answer = questionAnswer.map(item => {
|
||
return {
|
||
question: item.question,
|
||
answer: item.answer,
|
||
questionId: item.questionId
|
||
}
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
...mapActions(useUserStore, ['updateUserInfo']),
|
||
...mapActions(useBasicStore, ['backAndToast', 'getNetworkType']),
|
||
async updateAnswer() {
|
||
console.log('答案', this.answer)
|
||
for(let i = 0; i < this.answer.length; i++) {
|
||
if(!this.answer[i].questionId) {
|
||
uni.showToast({
|
||
title: '问题不能为空',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
for(let i = 0; i < this.answer.length; i++) {
|
||
if(this.answer[i].answer === '') {
|
||
uni.showToast({
|
||
title: '答案不能为空',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
const netWork = await this.getNetworkType()
|
||
if(!netWork) {
|
||
return
|
||
}
|
||
if(this.pending) {
|
||
return
|
||
}
|
||
this.pending = true
|
||
const { code, message } = await updateQuestionAnswerRequest({
|
||
questionAndAnswerList: this.answer
|
||
})
|
||
if(code === 0) {
|
||
this.updateUserInfo({
|
||
...this.userInfo,
|
||
haveSafeAnswer: 1
|
||
})
|
||
this.backAndToast('设置成功', 2)
|
||
} else {
|
||
uni.showToast({
|
||
title: message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
this.pending = false
|
||
},
|
||
changeFirstAnswer(data) {
|
||
this.answer[0].answer = data.detail.value
|
||
},
|
||
changeSecondAnswer(data) {
|
||
this.answer[1].answer = data.detail.value
|
||
},
|
||
changeThirdAnswer(data) {
|
||
this.answer[2].answer = data.detail.value
|
||
},
|
||
close() {
|
||
this.show = false
|
||
},
|
||
selectQuestion(item) {
|
||
this.answer[this.currentIndex].question = item.question
|
||
this.answer[this.currentIndex].questionId = item.questionId
|
||
this.show = false
|
||
},
|
||
popup(type) {
|
||
if(type === 'secondList') {
|
||
this.currentIndex = 1
|
||
} else if(type === 'thirdList') {
|
||
this.currentIndex = 2
|
||
} else {
|
||
this.currentIndex = 0
|
||
}
|
||
this.currentQuestionList = this.questionList[type]
|
||
this.show = true
|
||
},
|
||
async getQuestionList() {
|
||
const netWork = await this.getNetworkType()
|
||
if(!netWork) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '未获取到问题列表，请退出重试',
|
||
showCancel: false,
|
||
success: () => {
|
||
uni.navigateBack()
|
||
}
|
||
})
|
||
return
|
||
}
|
||
const { code, data, message } = await getQuestionListRequest()
|
||
if(code === 0) {
|
||
this.questionList = data
|
||
} else {
|
||
uni.showToast({
|
||
title: message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $uni-bg-color-grey;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.text {
|
||
padding-top: 20rpx;
|
||
margin-left: 20rpx;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.safe-question {
|
||
width: 710rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.question {
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 32rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.icon-arrow {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.input {
|
||
border-radius: 0 0 32rpx 32rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
background: #FFFFFF;
|
||
padding: 0 32rpx;
|
||
}
|
||
|
||
.input-placeholder {
|
||
height: 100rpx;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
line-height: 100rpx;
|
||
}
|
||
|
||
.line {
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background: #EBEBEB;
|
||
}
|
||
|
||
.popup-title {
|
||
font-size: 32rpx;
|
||
height: 100rpx;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.popup-content {
|
||
font-size: 32rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.button {
|
||
margin-top: 32rpx;
|
||
margin-left: 35rpx;
|
||
width: 680rpx;
|
||
height: 96rpx;
|
||
background: #63b8af;
|
||
border-radius: 16rpx;
|
||
line-height: 96rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
</style>
|