使用者填寫問卷

HTML

<template>
  <el-form class="form-block" ref="form" :model="form" label-width="80px">
    親愛的{{userName}}您好，歡迎填寫我們的問卷
    <el-form-item label="您的生日">
      <el-date-picker v-model="form.birthday" type="date" placeholder="選擇日期"></el-date-picker>
    </el-form-item>
    <el-form-item label="收入群組">
      <el-select v-model="form.income" placeholder="請選擇收入群組">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="甜度偏好">
      <el-rate class="d-inline-block" v-model="value" :texts="texts" show-text></el-rate>
    </el-form-item>
    <el-form-item label="產品偏好">
      <el-card shadow="hover">
        <el-row :gutter="0">
          <el-col :span="24">
            <el-image src="https://i.imgur.com/aT8ZxEc.jpg" :fit="cover"></el-image>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="hover">
        <el-row :gutter="0">
          <el-col :span="24">
            <el-image src="https://i.imgur.com/BW55rd9.jpg" :fit="cover"></el-image>
          </el-col>
        </el-row>
      </el-card>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small">送出</el-button>
      <el-button size="small">取消</el-button>
    </el-form-item>
  </el-form>
</template>

Script

export default {
  name: "survey",
  data() {
    return {
      userName: "阿君",
      texts: ["不愛", "普通", "喜歡", "熱愛", "超愛"],
      form: {
        birthday: null,
        income: ""
      },
      value: 1,
      options: [
        {
          value: "1",
          label: "0~10,000"
        },
        {
          value: "2",
          label: "10,000~20,000"
        },
        {
          value: "3",
          label: "20,000~30,000"
        },
        {
          value: "4",
          label: "30,000~50,000"
        },
        {
          value: "5",
          label: "50,000以上"
        }
      ],
      value: ""
    };
  }
};