【需求描述】

最近的项目要求做一个调查问卷，单页多题的，第一个想到的就是循环渲染（题目数据由后端返回，也就是说题目数量不定，题目类型分为单选）

思路:

1、把每一道题单独封装成模块，循环渲染

2、统一拿到所有题目的数据，拆分数据，通过题目类型控制

3、选择答案后，监听判断是否答完

4、做完问卷后提交，拿到所有题目数据，组装成后端需要的数据结构提交答案即可

【成品展示】

【准备工作】

在uni项目中引入uView使用组件u-radio-group（单选）
↓↓↓↓
引入方法传送门

【代码实现】

<template>
  <view class="fillInfor">
    <img src="../../static/home-ui/gh/banner.png" alt="banner" class="fillInfor-banner" />
    <view class="fillInfor-head">
      <uni-card margin="0 15px" padding="0">
        <u-cell-group>
          <u-cell>
            <view slot="title" class="u-slot-title"> 姓名 </view>
            <view slot="value" class="u-slot-value"> 张益达 </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title"> 身份证号 </view>
            <view slot="value" class="u-slot-value"> 320987876564467754 </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title"> 手机号 </view>
            <view slot="value" class="u-slot-value"> 16528769876 </view>
          </u-cell>
        </u-cell-group>
      </uni-card>
    </view>

    <view class="fillInfor-contents">
      <uni-card margin="0 15px 20px" padding="0" v-for="(c, indexs) in 3" :key="indexs">
        <u-cell>
          <view slot="title" class="u-slot-title">
            <text style="color: #ed0000">*</text>
            流行病史{{ c }}
          </view>
        </u-cell>
        <u-radio-group
          v-model="radiovalue1[c]"
          placement="column"
          iconPlacement="right"
          @change="groupChange"
        >
          <u-radio
            activeColor="#FF6C9C"
            :customStyle="{ margin: '15px' }"
            v-for="(item, index) in radiolist1"
            :key="index"
            :label="item.name"
            :name="item.id"
          ></u-radio>
        </u-radio-group>
      </uni-card>

      <view class="text-group_1 flex-col justify-between">
        <span class="text_22">特殊提醒：</span>
        <span class="text_23"
          >根据xxxxx规定，如果傻很傻很合适的哈好。的中华人名工很好等法律规定，如果傻很傻很合适的哈好的，酱吃个蛋相应xx责任。</span
        >
      </view>
    </view>

    <view class="fillInfor-font">
      <u-button
        text="重置"
        shape="circle"
        :plain="true"
        iconColor="#FF6D9C"
        @click="reset"
      ></u-button>
      <u-button
        :disabled="disabled"
        text="提交"
        shape="circle"
        color="linear-gradient(to right, rgb(255, 167, 170), rgb(255, 108, 157))"
        @click="goFill"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list1: [
        {
          name: "挂号须知",
        },
      ],
      value: "",
      value1: "",
      value2: "",
      radiolist1: [
        {
          name: "有境外及中高风险地区旅居史（10天内）",
          id: "0",
          disabled: false,
        },
        {
          name: "或与境外及中高风险地区人员接触史（10天）",
          id: "1",
          disabled: false,
        },
        {
          name: "以上均无",
          id: "2",
          disabled: false,
        },
      ],
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      radiovalue1: [],
      disabled: true,
    };
  },
  methods: {
    goFill() {
      //   uni.$u.route("/pagesMy/FillInfor/FillInfor");
    },
    reset() {
      this.radiovalue1 = [];
      this.disabled = true;
    },
    isEmpty(obj) {
      const q = Array.from(obj);
      for (var key in q) {
        if (q[key] === undefined) return true;
      }
      return false;
    },
    groupChange(n) {
      // 有空值||最大长度不相等
      if (
        this.isEmpty(this.radiovalue1) ||
        this.radiovalue1.length !== this.radiolist1.length
      ) {
        const radiovalue1 = this.radiovalue1.filter((d) => d);
        const n = this.radiolist1.length - radiovalue1.length;
        console.log("没答完，还有", n, "道");
      } else {
        console.log("答完了");
        this.disabled = false;
      }
    },
  },
};
</script>

<style lang="scss">
$w-margin: 0 20px;
$w-padding: 15px;

.fillInfor {
  background: #fafafa;
  margin-bottom: 50rpx;
  /deep/ .u-button--normal.data-v-3bf2dba7 {
    margin: 0 15px;
  }
  /deep/ .u-button--plain.u-button--info.data-v-3bf2dba7 {
    color: #ff6d9c;
    border-color: #ff6d9c;
    background-color: #fafafa;
  }
  .u-slot-title {
    font-weight: 600;
  }
  .u-slot-value {
    color: #999999;
  }
  &-banner {
    width: 100%;
    height: 70px;
  }
  &-head {
    position: relative;
    top: -20px;
  }
  &-contents {
    .text-group_1 {
      margin: 15px;
      .text_22 {
        color: #ff0a0a;
        white-space: nowrap;
        line-height: 40px;
        display: block;
      }
      .text_23 {
        color: #999;
        line-height: 25px;
        font-size: 15px;
      }
    }
  }
  &-font {
    display: flex;
    margin: 0 15px;
  }
}
</style>

【代码分析】

对应监听方法：

完结，撒花，欢迎留言~