eduepos_ui_store/pages/activity/full-discounts.vue

<template>
    <view class="coupon-page">
        <scroll-view scroll-y class="form-wrap">
            <view class="cell">
                <view class="label">活动状态</view>
                <view class="value">
                    <view class="status-name" :class="{ ing: fullDiscounts.fullDiscountsStatus == 1 }" v-if=" this.fullDiscounts.roleList !=null && this.fullDiscounts.roleList.length > 0">{{ fullDiscounts.fullDiscountsStatus == 1 ? '进行中' : '已失效' }}</view>
                    <view class="status-name" v-if="this.fullDiscounts.roleList ==null || this.fullDiscounts.roleList.length == 0">暂无满减活动</view>
                    <view class="update-status" @click="changeStatus" v-if="this.fullDiscounts.roleList !=null && this.fullDiscounts.roleList.length > 0">修改状态</view>
                    <view class="add-activity" @click="updateFull" v-if="this.fullDiscounts.roleList ==null || this.fullDiscounts.roleList.length == 0">添加活动</view>
                </view>
            </view>
            <view class="cell">
                <view class="label">活动时间</view>
                <view class="value" v-if="fullDiscounts.fullDiscountsStartDateStr != null && fullDiscounts.fullDiscountsStartDateStr != undefined">
					{{ fullDiscounts.fullDiscountsStartDateStr }} ~ {{ fullDiscounts.fullDiscountsEndDateStr }}
				</view>
            </view>
            <view class="cell mb40" :style="'height:'+height+'rpx;'">
                <view class="label">满减规则</view>
                <view class="value column" >
                    <view class="rule" v-for="(item, index) in fullDiscounts.roleList" :key="fullDiscountsRoleId" >满{{ item.conditionFee}}减{{ item.discountsFee }}</view>
                    <!-- <view class="rule">满50减10</view> -->
                </view>
            </view>
            <view class="cell">
                <view class="label">创建日期</view>
                <view class="value">{{ fullDiscounts.createDateStr || '' }}</view>
            </view>
        </scroll-view>
        <view class="update-events" v-if=" this.fullDiscounts.roleList !=null && this.fullDiscounts.roleList.length > 0">
            <view class="btn" @click="updateFull">调整满减活动</view>
        </view>
    </view>
</template>
<script>
import { mapState } from 'vuex';
export default {
    data () {
        return {
			fullDiscountsUrl: '/storeFullDiscountsManageApi/getDiscountsInfo',
			changeStatusUrl: '/storeFullDiscountsManageApi/changeStatus',
            fullDiscounts: {},
			height: 40
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {
		loadData () {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.fullDiscountsUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.fullDiscounts = res.data.obj;
						if(this.fullDiscounts.roleList != null && this.fullDiscounts.roleList.length > 0){
							this.height = 40 * this.fullDiscounts.roleList.length
						}
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
		},
		changeStatus() {
			uni.showLoading({
				title: '加载中'
			});
			this.fullDiscounts.fullDiscountsStatus = this.fullDiscounts.fullDiscountsStatus == 1 ? 0 : 1
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.changeStatusUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					status: this.fullDiscounts.fullDiscountsStatus
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.loadData();
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
		},
        updateFull () {
			if(this.fullDiscounts.fullDiscountsStatus == 1 ){
				this.$api.msg("进行中的活动无法调整");
				return;
			}
            uni.navigateTo({
                url: `/pages/activity/update-full-discounts`
            });
        }
    },
    onShow () {
		
	},
	onLoad() {
		this.loadData();
	}
}
</script>
<style lang="scss" scoped>
.coupon-page {
    border-top: 2rpx solid #f5f5f5;
    height: 100vh;
    background-color: #f5f5f5;
}
.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;
    }
}
.form-wrap {
    background-color: #fff;
    padding: 40rpx;
    box-sizing: border-box;
    height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
    height: calc(100vh - 120rpx - constant(safe-area-inset-bottom));
    .cell {
        @include flexStart(flex-start);
        height: 80rpx;
        font-size: $font-base;
    }
    .label {
        color: $desc-color;
        width: 200rpx;
    }
    .status-name {
        color: $theme-color;
    }
    .status-name.ing {
        color: $uni-color-button;
    }
    .update-status {
        width: 180rpx;
        height: 52rpx;
        border-radius: 26rpx;
        @include flexCenter;
        color: #fff;
        background-color: $theme-color;
    }
	.add-activity {
        width: 180rpx;
        height: 52rpx;
        border-radius: 26rpx;
		margin-right: 10rpx;
        @include flexCenter;
		float: right;
		// display: flex;
		// justify-content: center;
		// align-items: flex-start;
        color: #fff;
        background-color: $theme-color;
    }
    .value {
        width: calc(100% - 200rpx);
        @include between(flex-start);
        color: $text-color;
		// width: calc(100% - 200rpx);
		// /* display: flex; */
		// justify-content: space-between;
		// align-items: flex-start;
		// color: $text-color;
    }
    .rule {
        margin-bottom: 10rpx;
    }
    .column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .mb40 {
        margin-bottom: 40rpx;
    }
}
</style>