xiangan/servicePages/pages/surveyInfo.vue

<template>
  <view class="content">
    <image v-if="survey.hidePhoto === 0 && survey.photo" :src="survey.photo" class="w-100p" mode="widthFix"/>
    <view class="title">{{ survey.title }}</view>
    <view class="desc">{{ survey.comments }}</view>
    <view class="question-box">
      <view class="question-item" v-for="(item,index) in survey.questions" :key="index">
        <view class="question-title">
          <text>{{ index + 1 }}.{{ item.name }}</text>
          <text v-if="item.checked" class="required">*</text>
        </view>

        <view class="question-option">
          <radio-group v-if="item.type === 'radio'" @change="radioChange($event,index)">
            <label class="option-item" v-for="(option,oIndex) in item.options" :key="oIndex">
              <radio :value="option.label" :checked="option.checked"/>
              <view>{{ option.label }}</view>
            </label>
          </radio-group>
          <checkbox-group v-if="item.type === 'checkbox'" @change="checkboxChange($event,index)">
            <label class="option-item" v-for="(option,oIndex) in item.options" :key="oIndex">
              <checkbox :value="option.label" :checked="option.checked"/>
              <view>{{ option.label }}</view>
            </label>
          </checkbox-group>
          <textarea v-if="['textarea'].includes(item.type)" v-model="survey.questions[index].answer"
                    placeholder="请输入内容"/>
          <u-input v-if="['text'].includes(item.type)" v-model="survey.questions[index].answer"
                   placeholder="请输入内容"/>
        </view>
      </view>
    </view>
    <view class="btn-box">
      <button type="primary" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
import {addFormRecord, getFormInfoReq} from "@/api/survey";

export default {
  data() {
    return {
      survey: {
        formId: null,
        title: '',
        desc: '',
        photo: '',
        hidePhoto: 1,
        questions: []
      }
    }
  },
  methods: {
    radioChange(e, index) {
      this.survey.questions[index].answer = e.detail.value
      for (let i = 0; i < this.survey.questions[index].options.length; i++) {
        const option = this.survey.questions[index].options[i]
        option.checked = option.label === e.detail.value;
      }
    },
    checkboxChange(e, index) {
      for (let i = 0; i < this.survey.questions[index].options.length; i++) {
        const option = this.survey.questions[index].options[i]
        option.checked = e.detail.value.includes(option.label)
      }
      this.survey.questions[index].answer = e.detail.value
    },
    async submit() {
      let doPost = true
      for (let i = 0; i < this.survey.questions.length; i++) {
        const item = this.survey.questions[i]
        if (item.checked) {
          if (item.type === 'text' || item.type === 'textarea') {
            console.log(item.answer)
            if (!item.answer) {
              doPost = false
              uni.showToast({
                title: '请填写内容',
                icon: 'none'
              })
              return
            }
          } else if (item.type === 'radio' || item.type === 'checkbox') {
            let hasCheck = false
            item.options.map(option => {
              console.log(option)
              if (option.checked) {
                hasCheck = true
              }
            })
            if (!hasCheck) {
              doPost = false
              uni.showToast({
                title: '请选择内容',
                icon: 'none'
              })
              return
            }
          }
        }
      }
      console.log(doPost)
      if (!doPost) return
      await addFormRecord({
        formData: JSON.stringify(this.survey.questions),
        formId: this.survey.formId
      })
      uni.showToast({
        title: '提交成功',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    },
    async getInfo(id) {
      const {data} = await getFormInfoReq(id)
      this.survey.questions = JSON.parse(data.layout).map(item => {
        item.answer = ''
        return item
      })
      this.survey.formId = data.formId
      this.survey.title = data.name
      this.survey.photo = data.photo
      this.survey.hidePhoto = data.hidePhoto
      console.log(this.survey)
    }
  },
  onLoad({id}) {
    this.getInfo(id)
  },
}
</script>

<style lang="scss">
.content {
  padding: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20rpx;
}

.desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
}

.question-box {
  .question-item {
    margin-bottom: 40rpx;

    .question-title {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      position: relative;

      .required {
        position: absolute;
        top: 0;
        right: 0;
        color: red;
      }
    }

    .question-option {
      .option-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
      }

      textarea {
        width: 100%;
        height: 200rpx;
        border: 1rpx solid #ccc;
        border-radius: 10rpx;
        padding: 10rpx;
        box-sizing: border-box;
      }
    }
  }
}

.btn-box {
  margin-top: 40rpx;
}
</style>