LocalLivingServicesUniapp/pages/coupon/couponDetail.vue

<template>
    <view class="creat">
        <!-- <view class="handle">
            <view class="head_left">
                <span class="cuIcon-back" @click="back"></span>
            </view>
            <span class="center">{{ currentTab == 0 ? '代金券详情' : currentTab == 1 ? '满减券详情' : '折扣券详情' }}</span>
        </view> -->
        <cu-custom bgColor="bg-fff" :isBack="true">
            <block slot="content">{{ currentTab == 0 ? '代金券详情' : currentTab == 1 ? '满减券详情' : '折扣券详情' }}</block>
        </cu-custom>
        <view class="top"></view>
        <!-- 代金券列表 -->
        <view class="content">
            <view class="coupon-card" style="padding-bottom: 2rpx;">
                <!-- 顶部标题栏 -->
                <view class="card-header"
                    :style="currentTab == 0 ? 'background: #EFFFFE' : currentTab == 1 ? 'background: #F4FAFF ' : 'background: #FFF7F3'">
                    <image style=" vertical-align: top"
                        :src="`../../static/coupon/titlebg${Number(currentTab) +1}.png`" mode=""> </image>
                    <view class="status" v-if="couponList.delFlag == '1'"
                        :style="currentTab == 0 ? 'color: #2DAC9F' : currentTab == 1 ? 'color: #4183BC' : 'color: #DB6332'">
                        销售中
                    </view>
                    <view class="status" v-else>{{ couponList.delFlag == '0' ? '待上架' : couponList.delFlag == '2' ? '已失效'
                        :
                        '' }}</view>
                </view>
                <view class="flex" style="padding: 14rpx 18rpx;">
                    <!-- 优惠券金额 -->
                    <view class="amount-section">
                        <text class="amount" v-if="currentTab == 0">{{ couponList.parValue }}</text>
                        <text class="amount" v-else :style="currentTab == 1 ? 'color: #278BE5' : 'color: #FB5308'">{{
                            couponList.contentInfo }}</text>
                        <text class="unit" v-if="currentTab == 2">折</text>
                        <text class="unit" v-else>元</text>
                        <view class="use-condition" v-if="currentTab == 0 && couponList.voucherWay == '1'">售价{{
                            couponList.voucherWayInfo
                            }}元</view>
                        <view class="use-condition" v-if="currentTab == 1 && couponList.contentConditions !== '0'">满{{
                            couponList.contentConditions }}元可抵扣</view>
                        <view class="use-condition" v-if="currentTab == 2 && couponList.contentConditions !== '0'">满{{
                            couponList.contentConditions }}元可使用</view>
                        <view class="use-condition" v-if="currentTab !== 0 && couponList.contentConditions == '0'">无条件使用
                        </view>
                    </view>

                    <!-- 优惠券信息 -->
                    <view class="info-section">
                        <view class="info-item">
                            <text class="dot">•</text>
                            <text class="label" v-if="currentTab == 0">获取方式：</text>
                            <text class="label" v-else>领取限制：</text>
                            <text class="value" v-if="currentTab == 0">{{ couponList.voucherWay == '1' ? '购买' : '消费满' +
                                couponList.voucherWayInfo + '元可领取' }}</text>
                            <text class="value" v-else>{{ couponList.couponWay == '1' ? '所有人可领取' : '本店消费可领' }}</text>
                        </view>
                        <view class="info-item">
                            <text class="dot">•</text>
                            <text class="label" v-if="currentTab == 0">使用条件：</text>
                            <text class="label" v-else>适用范围：</text>
                            <text class="value" v-if="currentTab == 0">{{ couponList.conditions == '0' ? '不限制' : '最低消费'
                                +
                                couponList.conditions + '元' }}</text>
                            <text class="value" v-else>{{
                                couponList.couponRange == '1' ? '本店可用' : couponList.couponRange == '2'
                                    ? '部分分类商品可用' : '部分分类商品不可用' }}</text>
                        </view>
                        <view class="info-item">
                            <text class="dot">•</text>
                            <text class="label">有效期：</text>
                            <text class="value">{{ couponList.beginTime + '/' + couponList.endTime }}</text>
                        </view>
                    </view>
                </view>

                <!-- 数量统计 -->
                <view class="stats-section flex"
                    :class="currentTab == 0 ? 'backg-color1' : currentTab == 1 ? 'backg-color2' : 'backg-color3'">
                    <text class="stat-item" v-if="currentTab == 0">已购买：{{ couponList.payNumber }}</text>
                    <text class="stat-item" v-else>已领取：{{ couponList.receivedCount }}</text>
                    <text class="stat-item">已使用：{{ couponList.useNumber }}</text>
                    <text class="stat-item">总库存：{{ couponList.number }}</text>
                </view>
            </view>
            <view class="coupon-card" style="padding: 20rpx;">
                <view class="detail-title">详细信息</view>
                <view class="detail-group flex justify-between">
                    <text class="label">{{ currentTab == 0 ? '代金券名称' : currentTab == 1 ? '满减券名称' : '折扣券名称' }}</text>
                    <text class="value">{{ currentTab == 0 ? couponList.voucherName : couponList.couponName }}</text>
                </view>
                <view class="detail-group flex justify-between">
                    <text class="label" v-if="currentTab == 0">获取方式</text>
                    <text class="label" v-else>领取限制</text>
                    <text class="value" v-if="currentTab == 0">{{ couponList.voucherWay == '1' ? '购买' : '消费满' +
                        couponList.voucherWayInfo + '元可领取' }}</text>
                    <text class="value" v-else>{{ couponList.couponWay == '1' ? '所有人可领取' : '本店消费可领' }}</text>
                </view>
                <view class="detail-group flex justify-between" v-if="currentTab == 0">
                    <text class="label">使用条件</text>
                    <text class="value">{{ couponList.conditions == '0' ? '不限制' : '最低消费' + couponList.conditions + '元'
                        }}</text>
                </view>
                <view class="detail-group flex justify-between">
                    <text class="label">适用范围</text>
                    <text class="value" v-if="currentTab == 0 ">{{
                        couponList.voucherRange == 1 ? '本店可用' : couponList.voucherRange == 2 ? '部分分类商品可用' :
                        '部分分类商品不可用'
                        }}</text>
                    <text class="value" v-else>{{
                    couponList.couponRange == 1 ? '本店可用' : couponList.couponRange == 2 ? '部分分类商品可用' :
                    '部分分类商品不可用'
                    }}</text>
                </view>
                <view class="detail-group flex justify-between">
                    <text class="label">有效期</text>
                    <text class="value">{{ couponList.beginTime + '/' + couponList.endTime }}</text>
                </view>
                <view class="detail-group flex justify-between">
                    <text class="label">创建时间</text>
                    <text class="value">{{ couponList.createTime }}</text>
                </view>
                <view class="detail-group flex justify-between" v-if="couponList.upperTime">
                    <text class="label">上架时间</text>
                    <text class="value">{{ couponList.upperTime }}</text>
                </view>
            </view>
            <view class="coupon-card" style="padding: 20rpx;"
                v-if="couponList.couponDescription !== null || couponList.couponPhoto !== null || couponList.voucherDescription !== null || couponList.voucherPhoto !== null">
                <text class="detail-title">{{ currentTab == 0 ? '代金券描述' : currentTab == 1 ? '满减券描述' : '折扣券描述' }}</text>
                <view class="detail-group ">
                    <text class="value" v-if="currentTab == 0 ">{{ couponList.voucherDescription }}</text>
                    <text class="value" v-else>{{ couponList.couponDescription }}</text>
                </view>
                <view v-for="val in couponList.couponPhoto" :key="val">
                    <image :src="val" mode=""></image>
                </view>
            </view>
        </view>
        <view class="btn">
            <view class="delete" v-if="couponList.delFlag !== 1" @click="deleteFun">删除</view>
            <view class="submit" @click="submit">用户</view>
        </view>
    </view>
</template>

<script>

export default {
    data() {
        return {
            currentTab: 0,
            activeItemStyle: {
                backgroundColor: 'rgba(41, 121, 255, 0.1)',
                borderRadius: '32rpx',
                transition: 'all 0.3s'
            },
            couponList: {},
            reductionList: [],
            discountList: [],
            productId: ''
        }
    },
    methods: {
        getForm() {
            let upDown = ['/merchant/localVoucherInfo/queryById', '/merchant/localCouponInfo/queryById', '/merchant/localCouponInfo/queryById']
            this.$http.get(upDown[this.currentTab], { params: { id: this.productId } }).then(res => {
                if (res.data.success) {
                    if (this.currentTab == 0) {
                        res.data.result.couponPhoto = res.data.result.voucherPhoto && res.data.result.voucherPhoto !== null ? res.data.result.voucherPhoto.split(',').filter(id => id) : []
                    }
                    else {
                        res.data.result.couponPhoto = res.data.result.couponPhoto && res.data.result.couponPhoto !== null ? res.data.result.couponPhoto.split(',').filter(id => id) : []
                    }
                    this.couponList = res.data.result
                }
                else {
                    this.$tip.error(res.data.message);
                }
            })
        },
        //返回
        back() {
            uni.navigateBack({
                delta: 1
            });
        },
        goCouponList() {
            const listTab = Number(this.currentTab) > 0 ? Number(this.currentTab) - 1 : 0
            setTimeout(() => {
                const pages = getCurrentPages()
                if (pages.length > 1) {
                    uni.navigateBack()
                } else {
                    uni.redirectTo({
                        url: `/pages/coupon/coupon?tab=${listTab}`
                    })
                }
            }, 500)
        },
        deleteFun() {
            uni.showModal({
                title: '删除优惠券',
                content: '当前优惠券确定删除？',
                success: (res) => {
                    if (res.confirm) {
                        if (this.currentTab == 0) {
                            this.$http.get('/merchant/localVoucherInfo/delete?id=' + this.productId).then(res => {
                                if (res.data.success) {
                                    uni.showToast({
                                        title: res.data.message || '删除成功',
                                        icon: 'none'
                                    })
                                    this.goCouponList()
                                }
                                else {
                                    this.$tip.error(res.data.message);
                                }
                            })
                        }
                        else {
                            this.$http.delete(`/merchant/localCouponInfo/delete?id=${this.productId}&type=${this.currentTab}`).then(res => {
                                if (res.data.success) {
                                    uni.showToast({
                                        title: res.data.message || '删除成功',
                                        icon: 'none'
                                    })
                                    this.goCouponList()
                                }
                                else {
                                    this.$tip.error(res.data.message);
                                }
                            })
                        }
                    }
                }
            })

        },

        submit() {
            let name=this.currentTab==0?this.couponList.voucherName:this.couponList.couponName
            uni.navigateTo({
                url: `/pages/coupon/usersList?id=${this.couponList.id}&tab=${this.currentTab}&name=${name}`
            })
        }
    },
    onLoad(options) {
        if (options) {
            this.productId = options.id
            this.currentTab = Number(options.tab) || 0
        }
    },
    onShow() {
        if (this.productId) {
            this.getForm()
        }
    }
}
</script>

<style lang="scss" scoped>
.coupon-card {
    // background: linear-gradient(to right, #ffffff, #f8fbff);
    background: #fff;
    border-radius: 12rpx;
    // padding: 30rpx;
    margin: 26rpx 32rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin-bottom: 20rpx;
        padding: 10rpx 18rpx;

        image {
            width: 230rpx;
            height: 50rpx;
        }

        .status {
            font-size: 26rpx;
            color: #999;
        }
    }

    .amount-section {
        width: 40%;
        text-align: center;

        .amount {
            font-size: 80rpx;
            font-weight: bold;
            color: #02C1AB
        }

        .unit {
            font-size: 22rpx;
            color: #999999;
            margin-left: 4rpx;
        }

        .use-condition {
            margin-top: 10rpx;
            font-size: 22rpx;
            color: #888888;
        }
    }

    .info-section {
        .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 16rpx;
            font-size: 26rpx;
            color: #666;

            .dot {
                color: #999;
                margin-right: 8rpx;
            }

            .label {
                color: #999;
            }

            .value {
                color: #333;
            }
        }
    }

    .backg-color1 {
        color: #2BC0AE;
        background: linear-gradient(90deg, #EFFFFE 0%, #F8FFFF 100%);
    }

    .backg-color2 {
        color: #5399D6;
        background: linear-gradient(90deg, #F4FAFF 0%, #FAFDFF 100%);
    }

    .backg-color3 {
        color: #E97C4F;
        background: linear-gradient(90deg, #FFF7F3 0%, #FFFBF8 100%);
    }

    .stats-section {
        display: flex;
        margin: 0 16rpx 13rpx 16rpx;
        padding: 13rpx 0;
        font-size: 24rpx;


        .stat-item {
            // margin-right: 40rpx;
            width: 33.33%;
            border-right: 1px solid #D4ECEA;
            text-align: center;

            &:last-child {
                margin-right: 0;
            }
        }

        .stat-item:last-child {
            border-right: none;
        }
    }

}

.handle {
    height: 112rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 24rpx;
    position: relative;
    background: #fff;
    // background: linear-gradient(90deg, #D8EAFF 4%, #E6F8F8 67%, #DDF1FA 100%), linear-gradient(#FFFFFF 0%, rgba(247, 248, 252, 0) 100%);

    .head_left {
        font-size: 40rpx;
    }

    .center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 36rpx;
        font-weight: 600;
    }

    .head_right {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            width: 40rpx;
            height: 40rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .manage {
            // width: 150rpx;
            margin-left: 28rpx;
        }
    }
}

.detail-title {
    font-weight: 500;
    font-size: 34rpx;
    color: #333333;
}

.detail-group {
    margin-top: 22rpx;

    .label {
        color: #666666;
        font-size: 28rpx;
    }

    .value {
        font-size: 30rpx;
        color: #333333;
    }

}

.btn {
    width: 100%;
    height: 112rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 16rpx 24rpx;

    .delete {
        width: 45%;
        height: 76rpx;
        border: 1px solid #CCCCCC;
        border-radius: 75rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: #999999;
    }

    .submit {
        width: 45%;
        height: 76rpx;
        background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
        border-radius: 75rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: #FFFFFF;
    }
}

.creat {
    width: 100vw;
    height: 100vh;
    background: #F7F8FC;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /*#ifdef APP-PLUS*/
    .top {
        width: 100%;
        height: var(--status-bar-height);
        background-color: #fff;
    }
		 /*  #endif  */
}

.content {
    width: 100%;
    flex: 1;
    overflow-y: auto;
}
</style>