web/apps/bigmember_pc/src/components/dialog/GiftSubmitDialog.vue

<template>
  <CustomDialog
    width="600px"
    top="18vh"
    :title="title"
    class="gift-submit-dialog"
    :visible="visible"
  >
    <div class="gift-submit-header">
      <div class="gift-submit-header__item">
        <span>订阅区域：</span>
        <span>{{ subduration.areacount }}个省</span>
      </div>
      <div class="gift-submit-header__item">
        <span>可赠送时长（取整）：</span>
        <span>{{ subduration.gifted }}个月</span>
      </div>
    </div>
    <div class="gift-submit-body">
      <div class="gift-person-list-button">
        <span>人员列表</span>
        <span class="gift-person-list-button__icon" @click="addPerson">+</span>
      </div>
      <div class="gift-person-tip">
        说明：如手机号尚未注册剑鱼，赠送其超级订阅后，平台会自动帮其按照对应手机号注册。
      </div>
      <div class="gift-person-list">
        <div v-for="(item, index) in personList" :key="index" class="gift-person-list__item">
          <el-form :ref="`form${index}`" :model="item" :rules="rules" class="gift-person-info-wrapper">
            <el-form-item label="朋友手机号" prop="phone" class="gift-person-info">
              <el-input
                v-model="item.phone"
                maxlength="11"
                class="custom-long-input"
                placeholder="请输入手机号"
                @blur="validateSingleForm(index, item, 'phone')"
              />
            </el-form-item>
            <el-form-item label="赠予时长" prop="monthnum" class="gift-person-info time">
              <el-input
                v-model="item.monthnum"
                type="number"
                class="custom-long-input"
                placeholder="请输入整数"
                @blur="validateSingleForm(index, item, 'monthnum')"
              />
              <span class="unit">个月</span>
            </el-form-item>
          </el-form>
          <div v-show="index !== 0" class="delete-person" @click="deletePerson(index)">
            <span class="icon-delete-button" />
          </div>
          <div v-if="item.status === -1" class="phone-no-register-tip">
            {{ statusMessages[item.status] }}
          </div>
          <div v-else class="info-error-tip">
            {{ statusMessages[item.status] }}
          </div>
        </div>
      </div>
      <div v-if="monthNumTotal > 0" class="gift-total-tip">
        共赠送<span> {{ personList.length }} </span>人，赠送时长<span> {{ monthNumTotal }} </span>个月，剩余<span> {{ getGifted }} </span>个月可赠送
      </div>
      <div class="gift-read-agree">
        <el-checkbox v-model="checked">
          阅读并同意<a href="javascript:;">《“送好友超级订阅”产品须知》</a>
        </el-checkbox>
      </div>
    </div>
    <span slot="footer" class="dialog-footer-wrapper">
      <button
        class="action-button confirm"
        :disabled="!isFormValid"
        @click="onClickConfirm"
      >
        提交
      </button>
      <button class="action-button cancel" @click="$emit('close')">
        取消
      </button>
    </span>
  </CustomDialog>
</template>

<script>
import CustomDialog from '@/components/dialog/Dialog.vue'
import { getInfoByPhone, getSubDuration, setTransferSubDuration } from '@/api/modules/'

export default {
  name: 'GiftSubmitDialog',
  components: {
    CustomDialog
  },
  props: {
    visible: Boolean,
    title: {
      type: String,
      default: '送给朋友'
    },
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      }
      else if (!/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error('手机号码格式不正确'))
      }
      else {
        callback()
      }
    }
    const validateMonthnum = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入赠予时长'))
      }
      else if (value <= 0) {
        callback(new Error('赠予时长应大于0'))
      }
      else {
        callback()
      }
    }
    return {
      checked: false,
      personList: [
        {
          phone: '',
          monthnum: '',
          status: '',
          error: '',
          phoneValid: false,
          monthnumValid: false
        }
      ],
      rules: {
        phone: [
          { validator: validatePhone, trigger: 'blur' }
        ],
        monthnum: [
          { validator: validateMonthnum, trigger: 'blur' },
        ]
      },
      statusMessages: {
        '1': '',
        '-1': '提示：手机号尚未注册剑鱼，赠送其超级订阅后，平台会自动帮其按照对应手机号注册。',
        '-2': '手机号已是超级订阅会员，且购买省份与当前省份不一致，不可赠送。',
        '-3': '不能将超级订阅赠送给自己，请更换手机号。该提示展示在对应手机号下方'
      },
      subduration: {}
    }
  },
  computed: {
    isFormValid() {
      return this.personList.every(item => item.phoneValid && item.monthnumValid)
    },
    monthNumTotal() {
      return this.personList.reduce((total, item) => {
        return total + Number(item.monthnum) || 0
      }, 0)
    },
    // 剩余可赠送时长
    getGifted() {
      return Number(this.subduration.gifted) - this.monthNumTotal || 0
    }
  },
  created() {
    this.getSubDurationEvent()
  },
  methods: {
    async getSubDurationEvent() {
      const { error_code: code, data } = await getSubDuration()
      if (code === 0) {
        this.subduration = data
      }
    },
    /**
     * 验证单个表单
     *
     * @param {number} index - 表单的索引
     */
    validateSingleForm(index, item, fieldname) {
      if (this.$refs[`form${index}`]) {
        this.$refs[`form${index}`][0].validateField(fieldname, (error) => {
          if (fieldname === 'phone') {
            if (!error) {
              // 需要只调用一次接口，避免多次请求
              if (item.status !== 1) {
                this.getInfoByPhoneEvent(index, item)
              }
            }
            else {
              item.phoneValid = false
            }
          }
          else if (fieldname === 'monthnum') {
            item.monthnumValid = !error
          }
        })
      }
    },
    async getInfoByPhoneEvent(index, item) {
      // 此处可以调用接口验证手机号是否已经注册剑鱼
      try {
        const { error_code: code, data } = await getInfoByPhone({
          phone: item.phone
        })
        if (code === 0) {
          item.status = data.status
          item.error = this.statusMessages[data.status]
          if (data.status === 1 || data.status === -1) {
            item.phoneValid = true
          }
          else {
            item.phoneValid = false
          }
          // 当data.status不等于1时，移除同组的赠予时长输入框校验结果
          // if (data.status !== '1') {
          //   this.$refs[`form${index}`][0].clearValidate('monthnum')
          // }
          // 当data.status不等于1时，检查personList中的每一项的status，如果有任何一个的status不等于1，提交按钮不能点击
          // for (let i = 0; i < this.personList.length; i++) {
          //   if (this.personList[i].status !== 1 && this.personList[i].status !== -1) {
          //     this.isFormValid = false
          //     return
          //   }
          // }
        }
      }
      catch (error) {
        console.log(error)
        item.phoneValid = true
      }
    },
    /**
     * 更新整体表单的有效性
     */
    updateFormValidity() {
      const validationPromises = this.personList.map((item, index) => {
        return new Promise((resolve) => {
          try {
            this.$refs[`form${index}`][0].validate((valid) => {
              resolve(valid)
            })
          }
          catch (e) {
            resolve(false)
          }
        })
      })

      Promise.all(validationPromises).then((results) => {
        this.isFormValid = results.every(result => result)
      })
    },
    addPerson() {
      this.personList.push({
        phone: '',
        monthnum: '',
        status: '',
        error: '',
        phoneValid: false,
        monthnumValid: false
      })
      this.updateFormValidity()
    },
    /**
     * 重置人员列表
     */
    resetPersonList() {
      this.personList = [
        {
          phone: '',
          monthnum: '',
          status: '',
          error: '',
          phoneValid: false,
          monthnumValid: false
        }
      ]
    },
    /**
     * 删除指定索引位置的人员
     *
     * @method deletePerson
     */
    deletePerson(index) {
      this.personList.splice(index, 1)
      this.updateFormValidity()
    },
    onClickConfirm() {
      if (!this.checked)
        return this.$toast('请勾选协议')
      if (this.isFormValid) {
        this.confirmGiftData()
      }
    },
    async confirmGiftData() {
      // 参数格式：{phones:{18439509554: 1,18439509555: 2}}
      const data = this.personList.reduce((acc, cur) => {
        if (cur.phone && cur.monthnum) {
          acc[cur.phone] = cur.monthnum
        }
        return acc
      }, {})
      const { error_code: code, error_msg: msg } = await setTransferSubDuration({ phones: JSON.stringify(data) })
      if (code === 0) {
        this.$toast('赠送成功')
      }
      else {
        this.$toast(msg)
      }
      this.$emit('close')
      this.resetPersonList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .gift-submit-dialog {
    ::v-deep {
      .el-dialog__header {
        text-align: left;
        .el-dialog__title {
          padding-left: 10px;
          line-height: 28px;
        }
        &::after {
          content: '';
          position: absolute;
          left: 20px;
          top: 26px;
          display: inline-block;
          width: 2px;
          height: 16px;
          background: #2ABED1;
        }
      }
      .el-dialog__body {
        padding: 0 20px 10px;
        .gift-submit-header {
          display: flex;
          align-items: center;
          padding-bottom: 10px;
          border-bottom: 1px solid #2ABED1;
          &__item {
            margin-right: 24px;
          }
        }
        .gift-submit-body {
          padding: 10px 0;
          .gift-person-list-button {
            display: flex;
            align-items: center;
            font-size: 16px;
            line-height: 24px;
            color: #1D1D1D;
          }
          .gift-person-list-button__icon {
            display: flex;
            justify-content: center;
            margin-left: 10px;
            width: 20px;
            height: 20px;
            line-height: 18px;
            border-radius: 50%;
            background-color: #2ABED1;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
          }
          .gift-person-tip {
            margin: 10px 0;
            font-size: 14px;
            line-height: 22px;
            color: #2ABED1;
          }
          .gift-person-list {
            max-height: 200px;
            padding: 10px;
            border: 1px solid #ECECEC;
            border-radius: 8px;
            overflow-y: auto;
            .gift-person-list__item {
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin-bottom: 10px;
              padding: 10px 20px;
              width: 480px;
              border-radius: 8px;
              background: linear-gradient(to bottom, #F6F6F6, #fff);
              .gift-person-info-wrapper {
                display: flex;
                align-items: center;
                .el-form-item {
                  margin-bottom: 0;
                }
                .el-form-item__label {
                  font-size: 14px;
                  line-height: 22px;
                  color: #1D1D1D;
                  &::before {
                    content: '';
                  }
                }
              }
              .delete-person {
                position: absolute;
                right: -30px;
                top: 0;
                .icon-delete-button {
                  display: inline-block;
                  width: 20px;
                  height: 20px;
                  background: url('~@/assets/images/icon-delete.png') no-repeat;
                  background-size:20px 20px ;
                  cursor: pointer;
                }
              }
            }
            .gift-person-info {
              font-size: 14px;
              color: #1D1D1D;
              &.time {
                position: relative;
                margin-left: 24px;
                width: 120px;
                .unit {
                  position: absolute;
                  top: 30px;
                  right: -40px;
                }
              }
            }
            .custom-long-input {
              margin-top: 8px;
              height: 36px;
              .el-input__inner {
                height: 36px;
                line-height: 36px;
              }
            }
            .phone-no-register-tip, .info-error-tip {
              margin-top: 10px;
              font-size: 14px;
              line-height: 22px;
              color: #2ABED1;
            }
            .info-error-tip {
              color: #FF3A20;
            }
          }
          .gift-total-tip {
            margin-top: 10px;
            font-size: 14px;
            line-height: 22px;
            color: #686868;
            span {
              color: #2ABED1;
            }
          }
          .gift-read-agree {
            margin-top: 10px;
            font-size: 14px;
            color: #686868;
            .el-checkbox.is-checked {
              .el-checkbox__label {
                color: #888888;
              }
            }
            a {
              color: #2ABED1;
              text-decoration: none;
            }
          }
        }
      }
      .dialog-footer {
        justify-content: center;
      }
    }
    .dialog-footer-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        width: 132px;
        height: 36px;
        background: #2ABED1;
        color: #fff;
        font-size: 16px;
        border: none;
        &.cancel {
          background: #fff;
          color: #1D1D1D;
          border: 1px solid #E0E0E0;
        }
      }
    }
  }
</style>