sifa-mp/legalOrgCheckSuggest/pages/detail.vue

<template>
  <view class="min-height bg-main-light">
    <HeaderItem title="常见问题解答"/>
    <view class="bg-white p-20 text-25 flex justify-center items-center">
      <text class="tag selected-tag">{{ title }}</text>
    </view>
    <view class="pos-r" v-if="configList && configList.length">
      <view class="circle-bottom-bg"></view>
      <view class="tips-card-wrap">
        <view class="tips-card">
          <view class="text-28 font-bold text-center p-30">【{{ typeLabel }}】</view>
          <u-line color="#1DBCBC" dashed></u-line>
          <view class="text-25 p-20">{{ configList[activeIndex].title }}</view>
          <view class="p-20 flex justify-start items-center" @click="selectItem(item, index)"
                v-for="(item, index) in JSON.parse(configList[activeIndex].answer)" :key="index">
            <template v-if="configList[activeIndex].type === 'single'">
              <u-icon
                :name="configList[activeIndex].selected.includes(item) ? '/legalOrgCheckSuggest/static/radio-selected.png' : '/legalOrgCheckSuggest/static/radio.png'"/>
              <text class="text-25 ml-10">{{ item }}</text>
            </template>
            <template v-else-if="configList[activeIndex].type === 'multi'">
              <u-icon
                :name="configList[activeIndex].selected.includes(item) ? '/legalOrgCheckSuggest/static/checkbox-selected.png' : '/legalOrgCheckSuggest/static/checkbox.png'"/>
              <text class="text-25 ml-10">{{ item }}</text>
            </template>
          </view>
          <u-gap height="100rpx"/>
        </view>
        <view class="flex justify-center items-center">
          <view class="mx-15">
            <u-button shape="circle" @click="toLastItem" v-if="activeIndex > 0"
                      :customStyle="{background: 'linear-gradient(91.28deg, rgba(14,146,252,1) 27.63%,rgba(29,188,188,1) 80.08%)',
               border: 0, width: '200rpx',
               color: 'white'}">
              查看上一题
            </u-button>
          </view>
          <view class="mx-15">
            <u-button shape="circle" @click="toNextItem"
                      v-if="activeIndex > 0 && configList[activeIndex].type === 'multi'"
                      :customStyle="{background: 'linear-gradient(91.28deg, rgba(14,146,252,1) 27.63%,rgba(29,188,188,1) 80.08%)',
               border: 0, width: '200rpx',
               color: 'white'}">
              确认
            </u-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import HeaderItem from "@/components/HeaderItem.vue";
import {listLegalOrgCheckSuggestConfigReq} from "@/api/legalOrgCheckSuggest";

export default {
  name: "detail",
  components: {HeaderItem},
  data() {
    return {
      id: 0,
      title: '',
      configList: [],
      typeList: [{value: 'single', label: '单选'}, {value: 'multi', label: '多选'}, {value: 'fill', label: '填空'}],
      activeIndex: 0,
      typeLabel: ''
    }
  },
  methods: {
    async getList() {
      const {data} = await listLegalOrgCheckSuggestConfigReq({
        typeId: this.id
      })
      this.configList = data
      this.typeLabel = this.typeList.find(item => item.value === data[0].type).label
      this.configList.map(item => {
        item.selected = []
        return item
      })
    },
    selectItem(item, index) {
      // console.log(index, this.configList[index], this.configList.length - 1)
      if (this.configList[this.activeIndex].type === 'single') {
        this.configList[this.activeIndex].selected = [item]
        if (this.activeIndex === this.configList.length - 1) {
          this.toEnd()
        } else {
          this.activeIndex += 1
          this.typeLabel = this.typeList.find(item => item.value === this.configList[this.activeIndex].type).label
        }
      } else if (this.configList[this.activeIndex].type === 'multi') {
        const hasCheckIndex = this.configList[this.activeIndex].selected.findIndex(i => i === item)
        console.log(hasCheckIndex)
        if (hasCheckIndex > -1) {
          this.configList[this.activeIndex].selected.splice(hasCheckIndex, 1)
        } else {
          this.configList[this.activeIndex].selected.push(item)
        }
      }
      this.$forceUpdate()
    },
    toNextItem() {
      if (!this.configList[this.activeIndex].selected.length) {
        return this.$toast('请选择选项')
      }
      if (this.activeIndex === this.configList.length - 1) {
        this.toEnd()
      } else {
        this.activeIndex += 1
        this.typeLabel = this.typeList.find(item => item.value === this.configList[this.activeIndex].type).label
      }
    },
    toLastItem() {
      this.activeIndex -= 1
    },
    toEnd() {
      let content = []
      this.configList.map(item => {
        content.push({
          quest: item.title,
          answer: item.selected.join('、')
        })
      })
      uni.navigateTo({
        url: `/legalOrgCheckSuggest/pages/result?title=${this.title}&typeId=${this.id}`,
        success: res => {
          res.eventChannel.emit('content', content)
        }
      })
    }
  },
  onLoad({id, title}) {
    this.id = id
    this.title = title
    this.getList()
  }
}
</script>

<style scoped lang="scss">
.tag {
  padding: 10rpx 25rpx;
  margin-right: 25rpx;
  flex-shrink: 0;
}

.selected-tag {
  background-color: #FFCA68;
  border-radius: 100rpx;
}


.circle-bottom-bg {
  background-color: #1DBCBC;
  width: 100vw;
  height: 200rpx;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 0 0 100vw 100vw;
}

.tips-card-wrap {
  position: absolute;
  left: 0;
  top: 70rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .tips-card {
    width: 80%;
    line-height: 30rpx;
    border-radius: 50rpx;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    box-shadow: 0 2px 6px 0 rgba(202, 247, 247, 1);
    margin-bottom: 50rpx;
  }
}
</style>