返乡登记

src/components/AiCheckbox.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="AiCheckbox">
+    <div
+      class="AiCheckbox-item"
+      v-for="(item, index) in options"
+      @click="onChange(item.value)"
+      :class="[choosed.indexOf(item.value) > -1 ? 'active' : '']"
+      :key="index">
+      {{ item.label }}
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'AiCheckbox',
+
+    model: {
+      event: 'input',
+      prop: 'value'
+    },
+
+    props: {
+      value: Array,
+      placeholder: {
+        default: '请选择'
+      },
+      list: {
+        default: () => []
+      },
+      dict: String,
+      disabled: Boolean
+    },
+
+    data () {
+      return {
+        dictKey: '',
+        choosed: []
+      }
+    },
+
+    computed: {
+      options () {
+        return this.dictKey ? this.$dict.getDict(this.dict).map(e => ({
+          value: e.dictValue,
+          label: e.dictName
+        })) : this.list
+      }
+    },
+
+    mounted () {
+      this.$dict.load(this.dict).then(() => {
+        this.dictKey = this.dict
+      })
+    },
+
+    methods: {
+      onChange (value) {
+        if (this.choosed.indexOf(value) > -1) {
+          this.choosed.splice(this.choosed.indexOf(value), 1)
+        } else {
+          this.choosed.push(value)
+        }
+
+        this.$emit('input', this.choosed)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AiCheckbox {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .AiCheckbox-item {
+      width: 100%;
+      line-height: 1.3;
+      padding: 20px 32px;
+      margin-bottom: 16px;
+      text-align: center;
+      background: #FFFFFF;
+      box-sizing: border-box;
+      border-radius: 16px;
+      color: #333333;
+      font-size: 28px;
+      border: 1px solid #CCCCCC;
+
+      &.active {
+        background: #4181FF;
+        color: #fff;
+        border-color: #4181FF;
+      }
+    }
+  }
+</style>

src/components/AiRadio.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="AiRadio" :class="[isLine ? 'AiRadio-line' : '']">
+    <div
+      class="AiRadio-item"
+      v-for="(item, index) in options"
+      @click="onChange(index)"
+      :class="[currIndex === index ? 'active' : '']"
+      :key="index">
+      {{ item.label }}
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'AiRadio',
+
+    model: {
+      event: 'input',
+      prop: 'value'
+    },
+
+    props: {
+      value: String,
+      placeholder: {
+        default: '请选择'
+      },
+      list: {
+        default: () => []
+      },
+      isLine: Boolean,
+      dict: String,
+      disabled: Boolean
+    },
+
+    data () {
+      return {
+        currIndex: -1,
+        dictKey: ''
+      }
+    },
+
+    computed: {
+      options () {
+        return this.dictKey ? this.$dict.getDict(this.dict).map(e => ({
+          value: e.dictValue,
+          label: e.dictName
+        })) : this.list
+      }
+    },
+
+    mounted () {
+      this.$dict.load(this.dict).then(() => {
+        this.dictKey = this.dict
+
+        if (this.value) {
+          console.log(this.value)
+          this.$dict.getDict(this.dict).forEach((e, i) => {
+            console.log(e)
+            if (e.dictValue === this.value) {
+              this.currIndex = i
+            }
+          })
+        }
+      })
+    },
+
+    methods: {
+      onChange (index) {
+        this.currIndex = index
+        const choosed = this.options[index]
+        this.$emit('name', choosed.label)
+        this.$emit('input', choosed.value)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AiRadio {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .AiRadio-item {
+      width: 212px;
+      line-height: 1.3;
+      padding: 20px 32px;
+      margin-bottom: 16px;
+      margin-right: 16px;
+      padding: 20px 32px;
+      text-align: center;
+      background: #FFFFFF;
+      border-radius: 16px;
+      color: #333333;
+      font-size: 28px;
+      border: 1px solid #CCCCCC;
+      box-sizing: border-box;
+
+      &:nth-of-type(3n) {
+        margin-right: 0;
+      }
+
+      &.active {
+        background: #4181FF;
+        color: #fff;
+        border-color: #4181FF;
+      }
+    }
+
+    &.AiRadio-line {
+      width: 100%;
+
+      .AiRadio-item {
+        width: 100%;
+        margin-right: 0;
+      }
+    }
+  }
+</style>