wx-starlock/pages/updateSafeQuestion/updateSafeQuestion.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="16" 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="16" 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="16" 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'

export default {
  data() {
    return {
      questionList: {},
      currentQuestionList: [],
      currentIndex: 0,
      answer:[{
        question: '问题一',
        answer: ''
      }, {
        question: '问题二',
        answer: ''
      }, {
        question: '问题三',
        answer: ''
      }],
      show: false,
      pending: false
    }
  },
  computed: {
    ...mapState(useUserStore, ['userInfo'])
  },
  onLoad() {
    this.getQuestionList()
  },
  methods: {
    ...mapActions(useUserStore, ['updateUserInfo']),
    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
        }
      }
      if(this.pending) {
        return
      }
      this.pending = true
      const { code, message } = await updateQuestionAnswerRequest({
        questionAndAnswerList: this.answer
      })
      if(code === 0) {
        this.updateUserInfo({
          ...this.userInfo,
          haveSafeAnswer: 1
        })
        uni.navigateBack({
          complete() {
            uni.showToast({
              title: '安全问题设置成功',
              icon: 'none'
            })
          }
        })
      } 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 { 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>