eduepos_ui_store/pages/activity/coupon-item-info.vue

<template>
    <view class="special-item-info-page">
        <scroll-view scroll-y class="scroll-content">
			<view class="cell-wrap">
				<view class="item">
					<view class="label">活动状态</view>
					<view class="value between">
						<view class="curr-status" :class="{ ing: form.status === 1 }">{{ form.status === 1 ? '进行中' : '停止' }}</view>
						<view class="update-status" @click="handUpdateStatus">修改状态</view>
					</view>
				</view>
				<view class="item">
					<view class="label">优惠券标题</view>
					<view class="value">
						{{form.couponName}}
					</view>
				</view>
				<view class="item">
					<view class="label">子标题</view>
					<view class="value">
						{{form.couponTitle}}
					</view>
				</view>
				<view class="item">
					<view class="label">优惠券图片</view>
					<view class="value">
						<view class="cover">
							<image class="img" :src="item.pictureUrl"/>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="label">优惠类型</view>
					<view class="value">
						<uni-data-select
							v-model="form.discountType"
							:localdata="discountTypeList"
							@change="changeDiscountType"
							:border="false"
							:clear="false"
							:disabled="true"
						></uni-data-select>
					</view>
				</view>
				<view class="item" v-if="form.discountType === 1">
					<view class="label">满减标准金额</view>
					<view class="value">
						{{form.couponFullPrice}}
					</view>
				</view>
				<view class="item" v-if="form.discountType !== 3 && form.discountType !== 4">
					<view class="label">面额</view>
					<view class="value">
						{{form.price}}
					</view>
				</view>
				<view class="item" v-if="form.discountType === 3">
					<view class="label">折扣(%)</view>
					<view class="value">
						{{form.couponDiscount}}				    
					</view>
				</view>
				<view class="item">
					<view class="label">可领取人群</view>
					
					<view class="value">
						<uni-data-select
							v-model="form.useScopeMember"
							:localdata="useScopeMemberList"
							@change="changeUseScopeMember"
							:border="false"
							:clear="false"
							:disabled="true"
						></uni-data-select>
					</view>
				</view>
				<view class="item">
					<view class="label">活动时间</view>
					<view class="value">
						{{ form.startDate|formatDate('MM.dd') }} ~ {{ form.endDate|formatDate('MM.dd') }}
					</view>
				</view>
				<view class="item">
					<view class="label">优惠券状态</view>
					<view class="value">
						{{form.status}}
					</view>
				</view>
				<view class="item">
					<view class="label">发行数量</view>
					<view class="value">
						{{form.publishNum}}
					</view>
				</view>
				<view class="item">
						<view class="label">说明</view>
						<view class="value">
							{{form.remark || ''}}				    
						</view>
					</view>
				
				
				<view class="goods-wrap" v-if="form.discountType === 4">
					<view class="title">参与的商品(不支持多规格商品)</view>
					<view class="goods" v-for="item in goodsList" :key="item.goodsId">
						<view class="cover">
							<image class="img" :src="item.pictureUrl"/>
						</view>
						<view class="cont">
							<view class="name">{{item.goodsName}}</view>
						</view>
					</view>
				</view>
			</view>
        </scroll-view>
        
        <view class="update-events">
            <view class="btn" @click="deleteActivity">删除</view>
            <view class="btn" @click="updateCouponItem">调整优惠券</view>
        </view>

    </view>
</template>
<script>
import {mapState} from 'vuex';
export default {
    data () {
        return {
            getStoreCouponByIdUrl: '/coupon/getStoreCouponByIdForStore',
            updateStoreCouponStatusUrl: '/coupon/changeCouponStatusForStore',
            deleteStoreCouponUrl: '/coupon/deleteCouponByIdForStore',
            form: {
                couponId: '',
                couponName: '',
                couponTitle: '',
                discountType: '',
                couponType: 2,
                couponDiscount: '',
                couponFullPrice: '',
                imgUrl: '',
                storeId: '',
                goodsId: '',
                useScopeMember: '',
                startDate: '',
                endDate: '',
                status: 0,
                price: '',
                publishNum: '',
                receivedNum: '',
                usedNum: '',
                remark: '',
				goodsName: '',
				pictureUrl: ''
            },
            goodsList: [],
			discountTypeList: [
				{ value: 1, text: "满减券" },
				{ value: 2, text: "抵扣券" },
				{ value: 3, text: "折扣券" },
				{ value: 4, text: "兑换券" },
			],
			useScopeMemberList: [
				{value: 1, text: '周期内限领'},
				{value: 2, text: '注册周期内累计消费'},
				{value: 3, text: '注册周期'},
				{value: 4, text: '新用户'}
			],
        }
    },
    computed: {
        ...mapState(['storeInfo'])
    },
    methods: {
        loadData() {
			uni.showLoading({
				title: '加载中'
			});
            var dateStr = (new Date()).getTime();
            var sign = this.getSign('' + this.storeInfo.storeId + dateStr);
            this.requst({
            	url: this.getStoreCouponByIdUrl,
            	data: {
            		timestamp: dateStr,
            		sign: sign,
            		storeId: this.storeInfo.storeId,
                    id: this.form.couponId
            	},
            	success: res => {
					this.goodsList = []
                    this.form = res.data.obj;
					if (this.form.goodsId) {
						let goods = {
							goodsId: this.form.goodsId,
							goodsName: this.form.goodsName,
							pictureUrl: this.form.pictureUrl
						}
						this.goodsList.push(goods)
					}
					console.log(this.goodsList)
					uni.hideLoading();
            	},
            	fail: (e) => {
            		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
            	},
            })
        },
        deleteActivity() {
            if (this.form.status == 1) {
                this.$api.msg("进行中的活动不能删除，请先停止活动后再进行删除");
                return;
            }
            let that = this;
            uni.showModal({
            	title: '提示',
            	content: '确定删除这个优惠券吗？',
            	success: function(res) {
            		if (res.confirm) {
						uni.showLoading({
							title: '删除中'
						});
            			var dateStr = (new Date()).getTime();
            			var sign = that.getSign('' + that.storeInfo.storeId + dateStr);
            			that.requst({
            				url: that.deleteStoreCouponUrl,
            				data: {
            					timestamp: dateStr,
            					sign: sign,
            					storeId: that.storeInfo.storeId,
            			        id: that.form.couponId
            				},
            				success: res => {
            			        if (res.data.rtnBean.rtnCode == 0) {
            			            uni.showToast({
            			            	title: "删除成功",
            			            	duration: 3000,
            			            	icon: 'none',
            			            });
            			            // uni.redirectTo({
            			            //     url: '/pages/activity/special-item'
            			            // })
                                    let pages = getCurrentPages();
                                    let prevpage = pages[pages.length - 2];
                                    prevpage.$vm.getStoreCouponList();
                                    uni.navigateBack();
            			        } else {
            			            that.$api.msg(res.data.rtnBean.rtnMsg);
            			        }
								uni.hideLoading();
            				},
            				fail: (e) => {
            					console.log("接口调用失败:" + JSON.stringify(e));
								uni.hideLoading();
            				},
            			})
            		}
            	}
            });
        },
        handUpdateStatus() {
            if (this.form.status == 1) {
                if(new Date(this.form.endDate) < new Date()){
					this.$api.msg('优惠券结束时间小于当前时间，无法上架，请先修改时间');
					return
				}
            }
            this.updateStatus();
        },
        updateStatus () {
			uni.showLoading({
				title: '更新中'
			});
            this.updateStatusVisible = false;
            var dateStr = (new Date()).getTime();
            var sign = this.getSign('' + this.storeInfo.storeId + dateStr);
            this.requst({
            	url: this.updateStoreCouponStatusUrl,
            	data: {
            		timestamp: dateStr,
            		sign: sign,
            		storeId: this.storeInfo.storeId,
                    id: this.form.couponId,
                    status: this.form.status == 1 ? 0 : 1
            	},
            	success: res => {
                    if (res.data.rtnBean.rtnCode == 0) {
                        this.$api.msg("更新成功");
                    } else {
                        this.$api.msg(res.data.rtnBean.rtnMsg);
                    }
                    this.loadData();
					uni.hideLoading();
            	},
            	fail: (e) => {
            		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
            	},
            })
        },
        updateCouponItem () {
            if (this.form.status == 1) {
                this.$api.msg("进行中的活动不能编辑，请先停止活动后再进行编辑");
                return;
            }
            uni.navigateTo({
                url: `/pages/activity/coupon-item-edit?id=${this.form.couponId}`
            });
        }
    },
    onLoad (options) {
        if (options && options.id) {
        	this.form.couponId = options.id;
        	this.loadData();
        }
    }
}
</script>
<style lang="scss" scoped>
.special-item-info-page {
    background-color: #f5f5f5;
    border-top: 2rpx solid #f5f5f5;
    width: 100vw;
    height: 100vh;
}
.scroll-content {
    height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
    height: calc(100vh - 120rpx - constant(safe-area-inset-bottom));
}
.cell-wrap {
    width: 100vw;
    padding: 0 40rpx;
    box-sizing: border-box;
    background-color: #fff;
}
.item:first-child {
    padding-top: 40rpx;
}
.item {
    @include flexStart;
    background-color: #fff;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    font-size: $font-base;
    .label {
        width: 240rpx;
        color: $desc-color;
    }
    .value {
        width: calc(100% - 240rpx);
        @include between;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // word-break: break-all;
        // white-space: nowrap;
    }
    .left {
        @include flexStart;
    }
    .curr-status {
        color: $theme-color;
    }
    .curr-status.ing {
        color: $uni-color-button;
    }
    .update-status {
        height: 54rpx;
        width: 160rpx;
        background-color: $theme-color;
        color: #fff;
        @include flexCenter;
        border-radius: 27rpx;
    }
}

.goods-wrap {
    .title {
        height: 80rpx;
        @include flexStart;
        padding-left: 40rpx;
        box-sizing: border-box;
        font-size: $font-base;
        color: $text-color;
    }
}
.img {
	width: 200rpx;
	height: 200rpx;
}
.goods {
    background-color: #fff;
    @include flexStart;
    padding: 20rpx;
    box-sizing: border-box;
    .cover {
        width: 166rpx;
        height: 166rpx;
        border-radius: 10rpx;
        margin-right: 24rpx;
        .img {
            width: 166rpx;
            height: 166rpx;
        }
    }
    .cont {
        width: calc(100% - 200rpx);
        font-size: $font-base;
        height: 166rpx;
        overflow: hidden;
    }
    .name {
        width: 100%;
        text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
    }
    .tools {
        @include flexStart;
    }
    .price {
        margin-right: 40rpx;
        color: $uni-color-button;
    }
    .origin-price {
        color: $desc-color;
        text-decoration:line-through;
    }
    .desc {
        color: $desc-color; 
    }
}
.container {
    font-size: $font-base;
}
.update-events {
    width: 100vw;
    @include flexCenter;
    margin-top: 40rpx;
    .btn {
        width: 80vw;
        height: 80rpx;
        border-radius: 40rpx;
        background-color: $theme-color;
        color: #fff;
        @include flexCenter;
        margin-left: 20rpx;
        margin-right: 20rpx;
    }
}
</style>