cloudroam
2024-10-28 491df5ea13a34c46cab555469fc310fa985c20e8
pages/marketing/coupon/activity/index.vue
@@ -9,7 +9,9 @@
  couponSearchForm,
  getActivityEffectiveTime,
  getActivityReceiveTime,
  getImageUrlRules,
  couponColumn,
  dateTimeRules,
} from '@/utils/coupon-form'
export default {
  data() {
@@ -39,10 +41,21 @@
          if (!isNew) {
            row.usageTypeStr = getActivityEffectiveTime(row)
            row.getStartDateStr = getActivityReceiveTime(row)
            getImageUrlRules(row, this.tableConfig.form)
          }
        },
        columns: [
          ...couponColumn(),
          {
            label: '优惠券图片',
            formatter: (row) => (
              <el-bus-image
                style="width:50px;height:50px"
                lazy={true}
                src={row.imageUrl}
              />
            ),
          },
          {
            label: '领取时间',
            formatter: getActivityReceiveTime,
@@ -57,7 +70,6 @@
          { label: '已领取总数', prop: 'getNum', minWidth: 150 },
          { label: '剩余未领取总数', prop: 'unGetNum', minWidth: 150 },
          { label: '状态', prop: 'statusName', minWidth: 120 },
          { label: '领取渠道', prop: 'getTypeName', minWidth: 120 },
          { label: '操作人', prop: 'createByName', minWidth: 120 },
        ],
        // 页面上要到分,后端要传到秒
@@ -90,7 +102,8 @@
        searchForm: [
          {
            type: 'row',
            items: [...couponSearchForm(),
            items: [
              ...couponSearchForm(),
              {
                label: '领取渠道:',
                id: 'getType',
@@ -102,7 +115,6 @@
              },
            ],
          },
        ],
        form: [
          ...couponForm(),
@@ -117,6 +129,44 @@
            str: true,
            strKey: 'getTypeName',
            rules: { required: true, message: '请选择领取渠道' },
            on: {
              change: (e, updateForm, obj) => {
                if (e[0] === 'home') {
                  // 如果是首页领取的话,则图片为必传递
                  this.updateImageUrlRules(
                    this.tableConfig.form,
                    'imageUrl',
                    true,
                    '图片为必填项目'
                  )
                } else {
                  this.updateImageUrlRules(
                    this.tableConfig.form,
                    'imageUrl',
                    false,
                    '请输入图片'
                  )
                }
              },
            },
          },
          {
            label: '优惠券图片:',
            id: 'imageUrl',
            type: 'bus-upload',
            el: {
              listType: 'picture-card',
              limit: 1,
              limitSize: 2,
              tipText: '大小不超过2M',
              valueType: 'string',
            },
            forceDisabled: true,
            rules: {
              required: true,
              message: '请上传商品图片',
              trigger: 'blur',
            },
          },
          {
            label: '领取时间:',
@@ -131,6 +181,7 @@
            commonRules: true,
            commonFormat: true,
            commonFormatProps: ['getStartDate', 'getEndDate'],
            rules: dateTimeRules(),
          },
          {
            label: '使用时间:',
@@ -167,6 +218,31 @@
            commonFormatProps: ['usageStartDate', 'usageEndDate'],
            hidden: (row, item, mode) =>
              row.usageType !== 'fixed' || mode === 'view',
            rules: (row) => {
              return [
                dateTimeRules(),
                {
                  validator: (rule, value, callback) => {
                    if (
                      Array.isArray(row.getStartDate) &&
                      row.getStartDate.filter((i) => !!i).length === 2 &&
                      Array.isArray(value) &&
                      value.filter((i) => !!i).length === 2
                    ) {
                      if (value[0] < row.getStartDate[0]) {
                        callback(new Error('使用开始时间不能小于领取开始时间'))
                      } else if (value[1] < row.getStartDate[1]) {
                        callback(new Error('使用结束时间不能小于领取结束时间'))
                      } else {
                        callback()
                      }
                    } else {
                      callback()
                    }
                  },
                },
              ]
            },
          },
          {
            label: '领取后有效时间:',
@@ -217,18 +293,47 @@
              controls: false,
            },
            unit: '张',
            rules: {
              required: true,
              message: '请输入每人限领',
              trigger: 'blur',
            },
            rules: (row) => [
              {
                required: true,
                message: '请输入每人限领',
                trigger: 'blur',
              },
              {
                validator: (rule, value, callback) => {
                  if (value > row.couponAmount) {
                    callback(new Error('每人限领不能大于发放数量'))
                  } else {
                    callback()
                  }
                },
                trigger: 'blur',
              },
            ],
          },
        ],
        extraButtons: [
          {
            text: '发布',
            show: (row) =>
              row.status === 'inactive' || row.status === 'expired',
            show: (row) => {
              // row.status === 'inactive' || row.status === 'expired'
              // const now = new Date(); // 获取当前时间
              // const startDate = new Date(row.getStartDate); // 获取开始时间
              // const endDate = new Date(row.getEndDate); // 获取结束时间
              // // 判断当前时间是否在开始时间和结束时间之间
              // const isInTimeRange = now >= startDate && now <= endDate;
              const now = new Date() // 获取当前时间
              const endDate = new Date(row.getEndDate) // 获取结束时间
              // 判断当前时间是否已经超过领取结束时间
              const isAfterEndDate = now <= endDate
              if (
                isAfterEndDate &&
                (row.status === 'inactive' || row.status === 'expired')
              ) {
                return true
              }
              return false
            },
            atClick: async (row) => {
              try {
                await this.$elBusUtil.confirm('确定要发布吗?')
@@ -271,5 +376,17 @@
      title: '活动优惠券',
    }
  },
  methods: {
    updateImageUrlRules(form, id, required, message) {
      const curField = form.find((field) => field.id === id)
      if (curField && curField.rules && required) {
        curField.rules.required = true
        curField.rules.message = message
      } else if (curField && curField.rules) {
        curField.rules.required = false
        curField.rules.message = message
      }
    },
  },
}
</script>