eduepos_ui_store/pages/activity/update-full-discounts.vue

<template>
    <view class="update-coupon-page">
        <scroll-view scroll-y class="scroll-content">
            <view class="note">
                <view class="label">满减介绍</view>
                <view class="text">用户下单金额达到满减活动设置的门槛金额，总支付金额即可减去对应的优惠金额。</view>
            </view>

            <view class="list-wrap">
                <view class="row" v-for="item in list" :key="item.sort">
                    <text class="m">满</text>
                    <view class="input-wrap">
                        <u-input
                            border="none"
                            inputAlign="center"
                            fontSize="12"
                            v-model="item.conditionFee"
                            placeholder="门槛金额">
                        </u-input>
                    </view>
                    <text class="y">元</text>
                    <text class="j">减</text>
                    <view class="input-wrap">
                        <u-input
                            border="none"
                            inputAlign="center"
                            fontSize="12"
                            v-model="item.discountsFee"
                            placeholder="力度金额">
                        </u-input>
                    </view>
                    <text class="y">元</text>
                    <u-icon name="minus-circle-fill" size="20" color="red" @click="handRemove(item)"></u-icon>
                </view>
                <view class="line"></view>
                <view class="add-item" v-if="list.length < 5" @click="pushItem">+ 加一级满减，最多5级</view>
            </view>
            
            <view class="choose-date">
                <view class="label">选择活动执行期间</view>
                <view class="value" @click="selectDate" v-if="form.fullDiscountsStartDate != null && form.fullDiscountsStartDate != ''">
                    {{ form.fullDiscountsStartDate|formatDate('yyyy-M-d') }} ~ {{ form.fullDiscountsEndDate|formatDate('yyyy-M-d') }}
                </view>
                <view class="value" @click="selectDate" v-else>
                    请选择活动时间
                </view>
                <!-- :formatter="formatter" -->
            </view>
        </scroll-view>

        <uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :insert="false" :range="true" @confirm="confirm" />

        <view class="update-events">
            <view class="btn" @click="submit">保存</view>
        </view>
    </view>
</template>
<script>
import { mapState } from 'vuex';
export default {
    data () {
        return {
			fullDiscountsUrl: '/storeFullDiscountsManageApi/getDiscountsInfo',
			updateUrl: '/storeFullDiscountsManageApi/updateFullDiscounts',
            chooseDateVisible: false,
            form: {
				fullDiscountsStartDate: '',
				fullDiscountsEndDate: ''
			},
			list: [
				{
					fullDiscountsRoleId: '',
					conditionFee: '',
					discountsFee: '',
					sort: 1,
				}
			]
        }
    },
	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.form = res.data.obj;
						if (this.form.roleList.length > 0){
							this.list = this.form.roleList
						}
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
		},
        formatter(day) {
            const d = new Date()
            let month = d.getMonth() + 1
            const date = d.getDate()
            if(day.month == month && day.day == date + 3)
            {
                day.bottomInfo = '有优惠'
                day.dot = true
            }
            return day
        },
		selectDate() {
		    this.$refs.calendar.open();
		},
        handRemove (item) {
			if (this.list.length == 1) {
				return;
			}
            const idx = this.list.findIndex(i => i.sort === item.sort)
            this.list.splice(idx, 1)
        },
        pushItem () {
            if (this.list.length >= 5) {
                return
            }
            this.list.push({ sort: this.list[this.list.length - 1].sort + 1 })
        },
        confirm(e) {
			
			if (e.range.before > e.range.after){
				this.$api.msg("开始时间不能大于结束时间");
				return;
			}
			if (e.range.before != '' && e.range.before != undefined && e.range.before != null){
				this.form.fullDiscountsStartDate = e.range.before;
			} 
			if (e.range.after != '' && e.range.after != undefined && e.range.after != null){
				this.form.fullDiscountsEndDate = e.range.after;
			}
        },
        submit () {
			if (this.list.length > 0) {
				for (var i = 0; i < this.list.length; i++) {
					if (this.list[i].conditionFee == '' || this.list[i].conditionFee == undefined ||
					 this.list[i].conditionFee == null || this.list[i].discountsFee == '' 
					 || this.list[i].discountsFee == undefined || this.list[i].discountsFee == null) {
						this.$api.msg("门槛金额,力度金额不能为空");
						return;
					}
					if (Number(this.list[i].conditionFee) <= Number(this.list[i].discountsFee)) {
						this.$api.msg("门槛金额必须大于力度金额");
						return;
					}
					
					if (i > 0 ) {
						if (Number(this.list[i].conditionFee) == Number(this.list[i-1].conditionFee)) {
							this.$api.msg("门槛金额不能相同");
							return;
						}
					}
				}
			}
			if (this.form.fullDiscountsStartDate == null || this.form.fullDiscountsStartDate == undefined || this.form.fullDiscountsStartDate == ""){
				this.$api.msg("请选择开始时间");
				return;
			}
			if (this.form.fullDiscountsEndDate == null || this.form.fullDiscountsEndDate == undefined || this.form.fullDiscountsEndDate == ""){
				this.$api.msg("请选择结束时间");
				return;
			}
			uni.showLoading({
				title: '保存中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.updateUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					fullDiscountsStartDate: this.form.fullDiscountsStartDate,
					fullDiscountsEndDate: this.form.fullDiscountsEndDate,
					roleListStr: JSON.stringify(this.list)
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						uni.showToast({
							title: "保存成功",
							duration: 3000,
							icon: 'none',
						});
						
						var pages = getCurrentPages();
						var prevPage = pages[pages.length - 2]; //上一个页面
						prevPage.$vm.loadData()
						uni.navigateBack();
					} else {
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
					uni.hideLoading();
				},
				fail: (e) => {
					this.isDisable = false;
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			});
        }
    },
    onShow () {},
	onLoad() {
		this.loadData();
	}
}
</script>
<style lang="scss" scoped>
.update-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;
    }
}

.scroll-content {
    height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
    height: calc(100vh - 120rpx - constant(safe-area-inset-bottom));
}

.note {
    width: calc(100% - 40rpx);
    height: 148rpx;
    border-radius: 10rpx;
    background-color: $theme-color;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    @include flexStart;
    margin: 20rpx;
    .label {
        min-width: 100rpx;
        font-weight: bold;
        color: #FFF5A7;
        font-size: 36rpx;
    }
    .text {
        font-size: $font-base;
        color: #fff;
    }
}

.list-wrap {
    background-color: #fff;
    margin: 20rpx 0;
    padding: 20rpx 0;
    .row {
        @include between;
        padding: 0 40rpx;
        box-sizing: border-box;
        margin-bottom: 30rpx;
    }
    .input-wrap {
        background-color: #f5f5f5;
        width: 160rpx;
    }
    .y {
        margin-right: 30rpx;
    }
    .line {
        width: 100%;
        height: 2rpx;
        background-color: #f5f5f5;
        margin: 30rpx 0;
    }
    .add-item {
        font-size: $font-base;
        color: $theme-color;
        text-decoration: underline;
        text-align: center;
    }
}
.choose-date {
    @include between;
    height: 120rpx;
    background-color: #fff;
    padding: 0 40rpx;
    box-sizing: border-box;
    font-size: $font-base;
    .label {
        color: $text-color;
    }
    .value {
        color: $title-color;
        background-color: #f5f5f5;
        padding: 10rpx 20rpx;
        box-sizing: border-box;
    }
}
</style>