记录一个小组件(vue)

组件效果图 --------> 手动输入

vue代码如下

<!--  -->
<template>
  <el-dialog
    title="发放优惠券"
    :visible.sync="isShow"
    class="send-coupon"
    width="30%"
    top="20vh"
    @update:visible="(val) => $emit('update:visible', val)"
    :close-on-press-escape="false"
  >
    <el-form :model="formInfo" ref="sendcoupon">
      <el-form-item class="select-coupon" label="选择优惠券面额">
        <el-select
          multiple
          v-model="formInfo.selectCouponArr"
          placeholder="选择优惠券"
        >
          <el-option
            v-for="(item, index) in details"
            :key="index"
            :label="item.label"
            :value="item.index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="select-user" label="选择发放人群">
        <div class="group">
          <el-checkbox v-model="formInfo.groupChecked">分组选择</el-checkbox>
          <el-select
            multiple
            v-model="formInfo.activeGroup"
            placeholder="请选择分组"
            @change="activeGroupChange"
          >
            <el-option
              v-for="item in usersGroup"
              :key="item.id"
              :value="item.id"
              :label="`已选：${item.name}（${item.count}人）`"
            ></el-option>
          </el-select>
        </div>
        <div class="more-user">
          <el-checkbox v-model="formInfo.inputChecked">手动输入</el-checkbox>
          <div class="add-nick">
            <div class="nicks">
              <template v-for="(nick, index) in nicks">
                <div class="one-nick" :key="index" @click="delNick(index)">
                  {{ nick }}
                  <div class="close"></div>
                </div>
              </template>
            </div>

            <el-input
              ref="pasteLinks"
              type="textarea"
              class="nick-area"
              @change="addnick"
              @keyup.native.enter="addnick"
              :rows="{ minRows: 1, maxRows: 5 }"
              v-model="nickEditing"
              resize="none"
              debounce="100"
            ></el-input>
          </div>
        </div>
      </el-form-item>
      <el-form-item class="send-notice">
        <template slot="label">
          发放短信通知
          <bbt-icon
            class="icon bbt-icon-bangzhu"
            icon="bbt-icon-bangzhu"
            size="12"
          ></bbt-icon>
        </template>
        <el-checkbox v-model="formInfo.groupChecked">
          短信通知发放优惠券的会员，剩余
          <span>{{ user.msgNum }}</span>
          条短信。
        </el-checkbox>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <span style="margin-right: 18px">共发放 {{ nickTotal }} 个旺旺ID</span>
      <el-button type="primary" @click="submit">发放</el-button>
      <el-button @click="() => $emit('update:visible', false)">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'sendCoupon',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: Number,
    type: Number,
    details: Array
  },
  data() {
    return {
      isShow: false,
      usersGroup: [],
      nickEditing: '',
      nicks: [],
      nickTotal: 0,
      formInfo: {
        groupChecked: true,
        inputChecked: true,
        selectCouponArr: [],
        activeGroup: []
      }
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {
    visible: {
      handler(val) {
        this.isShow = val
        if (this.isShow) {
          this.initForm()
          this.initDetails()
        }
      },
      immediate: true
    }
  },
  created() {
    this.getUsersGroup()
  },
  mounted() {},
  methods: {
    initForm() {
      this.nicks = []
      this.nickEditing = ''
      this.nickTotal = 0
      this.formInfo = {
        groupChecked: true,
        inputChecked: true,
        selectCouponArr: [],
        activeGroup: []
      }
    },

    initDetails() {
      this.details.forEach((item, index) => {
        item.index = index
        // 优惠层级一：面额10元，满100元使用
        let num =
          index == 0
            ? '一'
            : index == 1
            ? '二'
            : index == 2
            ? '三'
            : index == 3
            ? '四'
            : ''
        // 22打折 23包邮 24代金
        let valueTemp =
          this.type == 22
            ? `面额${item.value}`
            : this.type == 23
            ? `包邮`
            : this.type == 24
            ? `面额${item.value}`
            : ''
        item.label = `优惠层级${num}：${valueTemp}元，${item.conditionStr}使用`
        this.$set(item, 'checked', false)
      })
    },
    //手动添加nick
    addnick() {
      if (this.nickEditing.slice(-1) == '\n') {
        this.nickEditing = this.nickEditing.slice(0, -1)
      }
      this.nicks.push(this.nickEditing)
      this.nickEditing = ''
      this.activeGroupChange()
    },
    delNick(index) {
      this.nicks.splice(index, 1)
      this.activeGroupChange()
    },
    //计算发送人群总数
    activeGroupChange() {
      let num = 0
      this.formInfo.activeGroup.forEach((item) => {
        this.usersGroup.some((group) => {
          if (group.id == item) {
            num += group.count
            return true
          }
        })
      })
      this.nickTotal = num + this.nicks.length
    },

    getUsersGroup() {
      axios
        .get('/common/userGroups.get')
        .then((res) => {
          if (res.data.status === 1) {
            this.usersGroup = res.data.data.items
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    sendCoupon() {
      /**
       * TODO
       * 等待接口
       */
      this.$message.warning('等待接口')
    },
    submit() {
      this.sendCoupon()
    }
  }
}
</script>
<style lang="scss">
.send-coupon {
  .el-form {
    .el-form-item {
      margin-bottom: 8px;
    }
    .el-form-item__label {
      width: 100%;
      font-weight: 600 !important;
    }
    .el-form-item__content {
      margin-left: 0px;
    }
    .select-coupon {
      .el-select--medium {
        width: 100%;
      }
    }
    .select-user {
      .el-checkbox__label {
        color: #333333;
      }
      .group {
        .el-checkbox {
          width: 20%;
        }
      }
      .el-select {
        width: 80%;
      }
      .more-user {
        margin-top: 18px;
        .el-checkbox {
          position: absolute;
          width: 20%;
        }
        .add-nick {
          width: 75%;
          margin-left: 20%;
          box-sizing: content-box;
          padding: 2%;
          display: inline-block;
          border: 1px solid #dcdfe6;
          .nicks {
            width: 100%;
            .one-nick {
              display: inline-block;
              color: #3d7fff;
              background: #ebf3ff;
              border-radius: 3px;
              padding-left: 8px;
              padding-right: 16px;
              margin-right: 12px;
              margin-bottom: 3px;
              position: relative;
              .close {
                position: absolute;
                display: inline-block;
                width: 10px;
                height: 10px;
                top: 4px;
                right: 4px;
              }
              .close::before,
              .close::after {
                position: absolute;
                content: ' ';
                background: #cccccc;
                left: 4px;
                width: 1px;
                height: 10px;
              }
              .close::before {
                transform: rotate(45deg);
              }
              .close::after {
                transform: rotate(-45deg);
              }
            }
          }
          .nick-area {
            textarea {
              border: none;
            }
          }
        }
      }
    }
    .send-notice {
      .el-form-item__content {
        .el-checkbox__label {
          color: #333333;
          span {
            color: #1677ff;
          }
        }
      }
      .bbt-icon-bangzhu {
        color: #999;
      }
    }
  }
}
</style>