lachang-view/store/src/views/marketingCenter/lookCououn.vue

<template>
  <a-card :bordered="false">
    <div class="card-title">优惠券信息</div>
    <a-spin :spinning="isLoading">
      <div class="tabs-content">
        <div class="tab-pane">
          <!-- 优惠券名称 -->
          <a-form-item label="优惠券名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <p class="itemText">{{ detail.name }}</p>
          </a-form-item>
          <!-- 副标题 -->
          <a-form-item label="副标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <p class="itemText">{{ detail.subtitle }}</p>
          </a-form-item>
          <!-- 优惠券说明 -->
          <a-form-item label="优惠券说明" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <p class="itemText">{{ detail.describe }}</p>
          </a-form-item>
          <!-- 优惠券类型 -->
          <a-form-item label="优惠券类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-radio-group
              v-model="couponType"
              v-decorator="['couponType', { initialValue: couponType, rules: [{ required: true }] }]"
            >
              <a-radio style="display: block" :value="20" v-if="couponType == 20" :disabled="true">
                <span class="radioTitle">满减券</span>
                <span class="itemTextPr">{{ detail.min_price }}</span>
                <span>元，可减</span>
                <span class="itemTextPr">{{ detail.reduce_price }}</span>
                <span>元</span>
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <!-- 关联活动 -->
          <a-form-item label="关联活动" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <p v-if="detail.activity_type == 1">裂变优惠券礼包活动</p>
            <p v-else-if="detail.activity_type == 2">拼团裂变活动</p>
            <p v-else>暂无关联活动</p>
          </a-form-item>
          <!-- 有效期 -->
          <a-form-item label="使用有效期" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-radio-group
              v-model="validTimeType"
              v-decorator="['validTimeType', { initialValue: validTimeType, rules: [{ required: true }] }]"
            >
              <a-radio
                style="display: block; margin-top: 10px"
                :value="20"
                v-if="validTimeType == 20"
                :disabled="true"
              >
                <span class="radioTitle">指定日期</span>
                <span class="itemTextPr">{{ detail.expire_time }}</span>
              </a-radio>
              <a-radio
                style="display: block; margin-top: 10px"
                :value="10"
                v-if="validTimeType == 10"
                :disabled="true"
              >
                <span class="radioTitle">顺延日期</span>
                <span>领取后</span>
                <span class="itemTextPr">{{ detail.expire_day }}</span>
                <span>天有效</span>
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <!-- 发券数量限制 -->
          <a-form-item label="发券数量限制" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-radio-group
              v-model="couponNumberType"
              v-decorator="['couponNumberType', { initialValue: couponNumberType, rules: [{ required: true }] }]"
            >
              <a-radio
                style="display: block"
                :value="20"
                v-if="detail.limit_total_type == 20"
                :disabled="true"
              >
                <span class="radioTitle">不限数量</span>
              </a-radio>
              <a-radio
                style="display: block"
                :value="10"
                v-if="detail.limit_total_type == 10"
                :disabled="true"
              >
                <span class="radioTitle">总量</span>
                <span class="itemTextPr">{{ detail.total_num }}</span>
                <span>张</span>
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <!-- 是否允许叠加其他优惠 -->
          <a-form-item label="是否允许叠加其他优惠" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <p v-if="detail.overlay_discount && detail.overlay_discount.length > 0">分销员商品折扣</p>
            <p v-else>无</p>
          </a-form-item>
          <!-- 商品范围 -->
          <a-form-item label="商品范围" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <div class="setGoods">
              <p>以下商品不可使用该优惠券</p>
            </div>
            <div class="goodsBox">
              <a-table
                rowKey="goods_id"
                :columns="goodsColumns"
                :dataSource="goodsData"
                :pagination="false"
                bordered
              >
                <span slot="goods_price" slot-scope="text">
                  <p>￥{{ text }}</p>
                </span>
              </a-table>
            </div>
          </a-form-item>
          <div class="card-title">优惠券推广信息</div>
          <!-- 券领取方式 -->
          <a-form-item label="券领取方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-radio-group v-model="receive_type">
              <a-radio :value="10" :disabled="true" v-if="receive_type === 10">线上发券</a-radio>
              <a-radio :value="20" :disabled="true" v-else>使用兑换码领取</a-radio>
            </a-radio-group>
          </a-form-item>
          <!-- 领取数量限制 -->
          <a-form-item label="领取数量限制" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-radio-group
              v-model="receiveNumberType"
              v-decorator="['receiveNumberType', { initialValue: receiveNumberType, rules: [{ required: true }] }]"
            >
              <a-radio
                style="display: block"
                :value="10"
                v-if="receiveNumberType == 10"
                :disabled="true"
              >
                <span class="radioTitle">每人限领</span>
                <span class="itemTextPr">{{ detail.limit_receive_cnt }}</span>
                <span>张</span>
                <span class="radioBotTool">（注：指用户总共可领取指定数量，领完指定数量后，不可再领取）</span>
              </a-radio>
              <a-radio
                style="display: block"
                :value="20"
                v-if="receiveNumberType == 20"
                :disabled="true"
              >
                <span class="radioTitle">每人每天限领</span>
                <span class="itemTextPr">{{ detail.limit_receive_cnt }}</span>
                <span>张</span>
                <span class="radioBotTool">（注：每人每天可领取指定数量，隔天可再次领取）</span>
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="券领取时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <p class="itemTextPr">{{ detail.start_time }} 至 {{ detail.end_time }}</p>
          </a-form-item>
          <a-form-item label="领取时间段" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <p
              class="itemTextPr"
              v-if="detail.start_hour || detail.end_hour"
            >{{ detail.start_hour }}点 至 {{ detail.end_hour }}点</p>
            <p class="itemTextPr" v-else>不限时间段</p>
          </a-form-item>
          <!-- 券发放对象 -->
          <a-form-item label="券发放对象" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-radio-group
              v-model="send_type"
              v-decorator="['send_type', { initialValue: send_type, rules: [{ required: true }] }]"
            >
              <a-radio style="display: block" :value="10" v-if="send_type == 10" :disabled="true">
                <span class="radioTitle">所有用户</span>
              </a-radio>
              <a-radio style="display: block" :value="20" v-if="send_type == 20" :disabled="true">
                <span class="radioTitle">新用户</span>
                <span class="radioBotTool">（指未在公明腊肠小程序下过单的用户）</span>
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <!-- 是否公开发券 -->
          <a-form-item label="是否公开发券" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-radio-group v-model="is_show_position" :disabled="true">
              <a-radio :value="1">默认公开发券</a-radio>
              <a-radio :value="2">仅在领券中心显示</a-radio>
              <a-radio :value="3">仅在商品详情页显示</a-radio>
              <a-radio :value="4">完全不公开（定向发放，券发放对象必须为所有用户）</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item
            label="审核不通过的原因"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            v-if="source == 1 && (isSuper == 1 || role == 'coupon-zg-audit') && detail.audit_status == 0"
          >
            <a-textarea
              class="remark_textarea"
              v-model="textarea"
              placeholder="如审核不通过，需填写不通过的原因"
              :maxLength="200"
            />
          </a-form-item>
          <a-form-item
            class="mt-20"
            :wrapper-col="{ span: wrapperCol.span, offset: labelCol.span }"
            v-if="source == 1 && (isSuper == 1 || role == 'coupon-zg-audit') && detail.audit_status == 0"
          >
            <a-button
              type="primary"
              class="close"
              @click="auditAxios(10)"
              :loading="isBtnLoading"
            >审核通过</a-button>
            <a-button
              type="danger"
              class="close"
              @click="auditAxios(20)"
              :loading="isBtnLoading"
            >审核不通过</a-button>
          </a-form-item>
          <a-form-item
            class="mt-20"
            v-else
            :wrapper-col="{ span: wrapperCol.span, offset: labelCol.span }"
          >
            <a-button type="primary" class="close" @click="close" :loading="isBtnLoading">关闭</a-button>
          </a-form-item>
        </div>
      </div>
    </a-spin>
  </a-card>
</template>

<script>
import * as Api from '@/api/marketingCenter/lookCououn'
const goodsColumns = [
  {
    title: '商品ID',
    width: '80px',
    dataIndex: 'goods_id'
  },
  {
    title: '商品编码',
    width: '150px',
    dataIndex: 'goods_no'
  },
  {
    title: '商品名称',
    width: '300px',
    ellipsis: true,
    dataIndex: 'goods_name'
  },
  {
    title: '售价',
    width: '150px',
    dataIndex: 'goods_price',
    scopedSlots: { customRender: 'goods_price' }
  }
]

export default {
  data () {
    return {
      role: '',
      isSuper: 1,
      couponType: 20, // 优惠卷类型  ->10 立减券 20 满减券 30 首单券 40 新人券
      validTimeType: 20, // 有效期类型 -> 10顺延日期  20指定日期
      couponNumberType: 10, // 发券数量限制类型 -> 10总量 20不限数量
      receiveNumberType: 10, // 领取数量限制  ->10每人限领 20每人每天
      receive_type: 10, // 券领取方式 =>10 线上发券 20 使用兑换码领取
      is_show_position: 1, // 公开发券
      send_type: 10, // 券发放对象 => 10所有用户  20新用户 （指未在公明腊肠小程序下过单的用户）
      goodsData: [], // 除外商品列表
      textarea: '', // 审核不通过的原因
      detail: {}, // 卷详情
      goodsColumns,
      // 标签布局属性
      labelCol: { span: 3 },
      // 输入框布局属性
      wrapperCol: { span: 15 },
      // loading状态
      isLoading: false,
      isBtnLoading: false,
      source: null
    }
  },
  // 初始化数据
  created () {
    if (this.$store.getters.roles) {
      this.isSuper = this.$store.getters.roles.isSuper
      const permissions = this.$store.getters.roles.permissions
      permissions.forEach(item => {
        if (item.permissionId == '/marketingCenter/manage' && item.actionEntitySet && item.actionEntitySet.length > 0) {
          this.role = item.actionEntitySet[0].action
        }
      })
    }
    this.couponId = this.$route.query.id || ''
    this.getCouponDetail()
    // source?  1:审核 0/null：查看
    const source = this.$route.query.source || null
    if (source && source == 1) {
      this.source = source
      this.$route.meta.title = '审核满减券'
    }
  },
  methods: {
    // 获取优惠卷详情
    getCouponDetail () {
      this.isLoading = true
      Api.detail({ coupon_id: this.couponId })
        .then(result => {
          const { detail } = result.data || {}
          this.detail = detail
          this.textarea = detail.refuse_desc
          this.goodsData = detail.goodsExcept || []
          this.couponType = detail.coupon_type || 10
          this.validTimeType = detail.expire_type || 10
          this.receive_type = detail.receive_type || 10
          this.is_show_position = detail.is_show_position || 1 // 公开券发,
          this.send_type = detail.send_type || 10
          this.couponNumberType = detail.limit_total_type || 10
          this.receiveNumberType = detail.limit_receive_type || 10
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 提交审核、拒绝
    auditAxios (type) {
      if (this.role != 'coupon-zg-audit' && this.isSuper != 1) {
        this.$message.error('暂无权限', 1.5)
        return
      }
      const form = {
        audit_status: type // 10 同意 20拒绝
      }
      if (type == 20) {
        if (!this.textarea) {
          this.$message.error('请填写审核不通过的原因', 1.5)
          return
        }
        form.refuse_desc = this.textarea
      }
      this.isLoading = true
      this.isBtnLoading = true
      Api.audit({ form, coupon_id: this.couponId })
        .then(result => {
          // 显示提示信息
          this.$message.success(result.message, 1.5)
          // 跳转到列表页
          setTimeout(() => {
            this.$router.push('./manage')
          }, 1500)
        })
        .catch(() => {
          this.isBtnLoading = false
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 关闭
    close () {
      //  this.$router.push('./manage')
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.formItem {
  display: block;
}
.radioTitle {
  margin-right: 10px;
}
.radioBotTool {
  font-size: 13px;
  color: #666666;
  margin-left: 20px;
}
.assignClass {
  /deep/ .ant-checkbox-wrapper {
    margin-right: 15px;
    margin-bottom: 15px;
  }
}
.close {
  margin-left: 100px;
}
.itemTextPr {
  margin: 0 20px;
  color: #000 !important;
}
.itemText {
  color: #000 !important;
}
/deep/ .ant-radio-disabled + span {
  color: #000 !important;
}
.card-title {
  font-size: 14px;
  position: relative;
  width: 100%;
  padding: 12px 20px;
  border-bottom: 1px solid #eef1f5;
  margin-bottom: 20px;
}
.card-title::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 14px;
  background: #00aeff;
  top: 16px;
  left: 5px;
}
</style>