wx-starlock/pages/safeQuestion/safeQuestion.vue

<template>
  <view>
    <view class="text">如果手机丢了，可以通过回答设置的安全问题来登录新设备</view>
    <view class="safe-question" v-for="item in questionAnswer" :key="item.questionId">
      <view class="question">
        <view>{{item.question}}</view>
        <image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
      </view>
      <view class="line"></view>
      <input class="input" :value="item.answer" maxlength="16" placeholder="请输入答案"
             placeholder-class="input-placeholder" :disabled="true"></input>
    </view>
    <view class="button" @click="updateAnswer">修改</view>
  </view>
</template>

<script>
import { getQuestionAnswerRequest, getQuestionListRequest, updateQuestionAnswerRequest } from '@/api/safeAnswer'
import { mapActions } from 'pinia'
import { useBasicStore } from '@/stores/basic'

export default {
  data() {
    return {
      questionAnswer: [],
    }
  },
  onLoad() {
    this.getQuestionAnswer()
  },
  methods: {
    ...mapActions(useBasicStore, ['routeJump']),
    async getQuestionAnswer() {
      const { code, data, message } = await getQuestionAnswerRequest()
      if(code === 0) {
        this.questionAnswer = data
      } else {
        uni.showToast({
          title: message,
          icon: 'none'
        })
      }
    },
    updateAnswer() {
      this.routeJump({
        type: 'redirectTo',
        name: 'updateSafeQuestion'
      })
    }
  }
}
</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>