|
@@ -0,0 +1,234 @@
|
|
|
+<template>
|
|
|
+ <div class="DetailsCoupon">
|
|
|
+ <!-- 数据字典 -->
|
|
|
+ <v-select v-show="false" ref="couponType" placeholder="优惠券类型" code="COUPON_TYPE"></v-select>
|
|
|
+ <a-modal
|
|
|
+ class="DetailsCouponModal"
|
|
|
+ title="查看详情"
|
|
|
+ width="60%"
|
|
|
+ :footer="null"
|
|
|
+ :destroyOnClose="true"
|
|
|
+ @cancel="isShow=false"
|
|
|
+ v-model="isShow">
|
|
|
+ <a-row :gutter="20" v-if="couponInfo">
|
|
|
+ <a-col :span="24">
|
|
|
+ <div class="c-title frist-t">
|
|
|
+ 基本信息
|
|
|
+ <a-divider type="vertical" class="bold-divider" />
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">优惠券名称:</p>
|
|
|
+ <p class="item-main">{{ couponInfo.title }}</p>
|
|
|
+ </a-col>
|
|
|
+ <!-- 优惠券类型分为:FULLSUB 满减券、DISCOUNT 折扣券、VOUCHER 代金券和 SUB 实价券 -->
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">优惠券类型:</p>
|
|
|
+ <div class="item-main">
|
|
|
+ <strong>{{ couponInfo.couponTypeName }}</strong>
|
|
|
+ <p class="sub-con" v-if="couponInfo.couponType == 'FULLSUB'">
|
|
|
+ 满<strong>{{ couponInfo.limitAmount }}</strong>减<strong>{{ couponInfo.subAmount }}</strong>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont" v-if="couponInfo.couponType == 'VOUCHER'">
|
|
|
+ <p class="item-label">优惠券面额:</p>
|
|
|
+ <p class="item-main"><strong>{{ couponInfo.subAmount }}</strong>元</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont" v-if="couponInfo.couponType == 'VOUCHER'">
|
|
|
+ <p class="item-label">是否限额使用:</p>
|
|
|
+ <p class="item-main">{{ couponInfo.limitAmount > 0 ? '是' : '否' }}</p>
|
|
|
+ <p class="item-main" v-if="couponInfo.limitAmount > 0">满<strong>{{ couponInfo.limitAmount }}</strong>元使用</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">发放总量:</p>
|
|
|
+ <p class="item-main" v-if="couponInfo.quotaLimit == '0'">不限</p>
|
|
|
+ <p class="item-main" v-if="couponInfo.quotaLimit == '1'"><strong>{{ couponInfo.quota }}</strong>份</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">优惠券说明:</p>
|
|
|
+ <div class="item-main">{{ couponInfo.ruleDesc }}</div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <div class="c-title">
|
|
|
+ 领用规则
|
|
|
+ <a-divider type="vertical" class="bold-divider" />
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">持卡会员:</p>
|
|
|
+ <p class="item-main" v-if="couponInfo.cardholderCouponLimit.isLimit == '0'">不限</p>
|
|
|
+ <p class="item-main" v-if="couponInfo.cardholderCouponLimit.isLimit == '1'">
|
|
|
+ 每<strong>{{ couponInfo.cardholderCouponLimit.limitCondition == 'monthly' ? '自然月' : '' }}</strong>限制领取
|
|
|
+ <strong>{{ couponInfo.cardholderCouponLimit.limitCount }}</strong>份
|
|
|
+ </p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">未持卡会员:</p>
|
|
|
+ <p class="item-main" v-if="couponInfo.normalCouponLimit.isLimit == '0'">不限</p>
|
|
|
+ <p class="item-main" v-if="couponInfo.normalCouponLimit.isLimit == '1'">
|
|
|
+ 每<strong>{{ couponInfo.normalCouponLimit.limitCondition == 'monthly' ? '自然月' : '' }}</strong>限制领取
|
|
|
+ <strong>{{ couponInfo.normalCouponLimit.limitCount }}</strong>份
|
|
|
+ </p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">有效期:</p>
|
|
|
+ <!-- 有效期类型:ABSOLUTE绝对时效(时间区间)/RELATIVE相对时效(领取后多少天内有效)/NONE不限制 -->
|
|
|
+ <p class="item-main" v-if="couponInfo.validType == 'NONE'">不限</p>
|
|
|
+ <p class="item-main" v-if="couponInfo.validType == 'ABSOLUTE'">
|
|
|
+ <strong>{{ couponInfo.startTimeGmt8Ymd }}</strong> ~
|
|
|
+ <strong>{{ couponInfo.endTimeGmt8Ymd }}</strong>
|
|
|
+ </p>
|
|
|
+ <p class="item-main" v-if="couponInfo.validType == 'RELATIVE'">{{ couponInfo.validDateStr }}</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">适用洗车类型:</p>
|
|
|
+ <p class="item-main">
|
|
|
+ <a-tag color="blue" v-for="(item, index) in couponInfo.couponScopeList" :key="index">{{ item.scopeName }}</a-tag>
|
|
|
+ </p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <div class="item-label">
|
|
|
+ <a-tooltip
|
|
|
+ placement="right"
|
|
|
+ arrow-point-at-center
|
|
|
+ title="已设置的适用洗车网点再次修改(尤其是减少使用网点)后,在【优惠券统计】中会保留原适用洗车网点的统计数据。"
|
|
|
+ >
|
|
|
+ <span style="display: inline-block;">适用洗车网点</span>
|
|
|
+ <a-icon :style="{ fontSize: '17px', color: '#1890ff', verticalAlign: 'sub', display: 'inlineBlock', margin: '0 3px' }" type="question-circle" />
|
|
|
+ <span style="display: inline-block;">:</span>
|
|
|
+ </a-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="item-main flex-sp">
|
|
|
+ <strong>{{ couponInfo.isStoreLimit == '1' ? '部分' : '全部' }}</strong>
|
|
|
+ <p v-if="couponInfo.isStoreLimit == '1'">
|
|
|
+ 已选<strong>{{ couponInfo.couponStoreList.length }}</strong>个
|
|
|
+ </p>
|
|
|
+ <a-button type="primary" size="small" @click="openDetailsDraw = true" v-if="couponInfo.isStoreLimit == '1'">查看</a-button>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" class="btn-cont">
|
|
|
+ <a-button @click="isShow=false">返回列表</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
+ <!-- 查看详细 -->
|
|
|
+ <view-detailed
|
|
|
+ ref="viewDetailed"
|
|
|
+ :checkedList="couponInfo ? couponInfo.couponStoreList : []"
|
|
|
+ :openDetailsDraw="openDetailsDraw"
|
|
|
+ @close="openDetailsDraw = false">
|
|
|
+ </view-detailed>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { VSelect } from '@/components'
|
|
|
+import { couponFind } from '@/api/coupons'
|
|
|
+import ViewDetailed from './ViewDetailed.vue'
|
|
|
+export default {
|
|
|
+ name: 'DetailsCouponModal',
|
|
|
+ components: { VSelect, ViewDetailed },
|
|
|
+ props: {
|
|
|
+ openModal: { // 弹框是否展示
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ couponId: { // 优惠券id
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ isShow: this.openModal, // 弹框是否展示
|
|
|
+ labelList: [], // 网点标签
|
|
|
+ couponInfo: null, // 优惠券信息
|
|
|
+ serviceType: [], // 服务类型
|
|
|
+ storeItemPriceDTOList: [], // 时段价格
|
|
|
+ itemQueryList: [], // 服务类型 列表数据
|
|
|
+ openDetailsDraw: false // 查看 适用网店详情
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 优惠券详情
|
|
|
+ getCouponInfo (id) {
|
|
|
+ couponFind({ id: id }).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.couponInfo = res.data
|
|
|
+ this.couponInfo.couponTypeName = this.$refs.couponType.getNameByCode(res.data.couponType)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 父页面传过来的弹框状态
|
|
|
+ openModal (newValue, oldValue) {
|
|
|
+ this.isShow = newValue
|
|
|
+ },
|
|
|
+ // 重定义的弹框状态
|
|
|
+ isShow (val) {
|
|
|
+ if (!val) {
|
|
|
+ this.$emit('close')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ couponId (newValue, oldValue) {
|
|
|
+ if (newValue && this.isShow) {
|
|
|
+ this.getCouponInfo(newValue)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .DetailsCouponModal{
|
|
|
+ p{
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .c-title {
|
|
|
+ padding: 0 0 10px;
|
|
|
+ margin-top: 40px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
+ .bold-divider {
|
|
|
+ width: 3px;
|
|
|
+ background-color: #1890ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .frist-t{
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .item-cont{
|
|
|
+ margin-bottom: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .item-label{
|
|
|
+ width: 121px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .item-main{
|
|
|
+ flex-grow: 1;
|
|
|
+ .sub-con{
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 40px;
|
|
|
+ }
|
|
|
+ strong{
|
|
|
+ margin: 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flex-sp{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-cont{
|
|
|
+ text-align: center;
|
|
|
+ margin: 30px 0 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|