eduepos_ui_store/pages/activity/special-item-edit.vue

<template>
    <view class="special-item-edit-page">
       <scroll-view scroll-y class="scroll-content">
            <view class="cell-wrap">
                <view class="item">
                    <view class="label">活动主题</view>
                    <view class="value">
                        <input border="none" inputAlign="right" maxlength="15" fontSize="14" v-model="form.activityName" placeholder="请填写"></input>
                    </view>
                </view>
                <view class="item">
                    <view class="label">活动描述</view>
                    <view class="value">
                        <input border="none" inputAlign="right" maxlength="15" fontSize="14" v-model="form.activityComment" placeholder="请填写"></input>
                    </view>
                </view>
                <view class="item">
                    <view class="label">活动时间</view>
                    <view class="value" @click="selectDate">
                        {{ form.startDate }} ~ {{ form.endDate }}
                    </view>
                </view>
        </view>
            <view class="activities-title">
                参与的活动(不支持多规格商品)
            </view>
            <view class="goods-list">
                <uni-swipe-action>
                    <uni-swipe-action-item :right-options="addFlag ? options : options1" :index="index" v-for="(item, index) in goodsList"
                        @click="deleteGoods(index,item)" :key="item.goodsId">
                        <view class="goods">
                            <view class="cover">
                                <image class="img" :src="item.pictureUrl"/>
                            </view>
                            <view class="cont">
                                <view class="name">{{item.goodsName}}</view>
                                <view class="tools">
                                    <view class="price">¥{{moneyConverter(item.activityPrice)}}</view>
                                    <view class="origin-price">¥{{moneyConverter(item.costPrice)}}</view>
                                </view>
                                <view class="desc between">
                                    <view class="desc">每单限购{{item.maxNum}}份，活动库存{{item.activityNum}}份</view>
                                    <u-icon name="edit-pen" size="28" color="#6c6c6c" @click="handEditGoods(item, index)"></u-icon>
                                </view>
                            </view>
                        </view>
                    </uni-swipe-action-item>
                </uni-swipe-action>
                <view class="add-goods" v-if="addFlag" @click="handAddGoods">添加商品</view>
            </view>
       </scroll-view>


        <u-modal
            :show="updateStatusVisible"
            title="注意"
            closeOnClickOverlay
            showCancelButton
            @confirm="pushGoods"
            @close="updateStatusVisible = false"
            @cancel="updateStatusVisible = false">
            <view class="container">
                活动中的商品如果参加首页推荐，活动状态改变后将会在首页、店铺同步下架，您是否确定改变？
            </view>
        </u-modal>

        <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="save">保存</view>
        </view>
    </view>
</template>
<script>
import {mapState} from 'vuex';
import { computed } from "vue";
export default {
    data () {
        return {
            getStoreSpecialActivityByIdUrl: '/storeSpecialActivityApi/getStoreSpecialActivityByIdForStore',
            saveStoreSpecialActivityUrl: '/storeSpecialActivityApi/saveStoreSpecialActivityForStore',
            updateStatusVisible: false,
            form: {
                storeSpecialActivityId: '',
                activityName: '',
                activityComment: '',
                startDate: '',
                endDate: '',
                status: ''
            },
            goodsList: [],
            options: [
                {
                    text: '删除',
            		style: {
                        fontSize: '28rpx',
            			backgroundColor: '#FF0000',
						marginBottom: '20rpx'
                    }
                }
            ],
            options1:[],
            addFlag: true
        }
    },
    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.getStoreSpecialActivityByIdUrl,
            	data: {
            		timestamp: dateStr,
            		sign: sign,
            		storeId: this.storeInfo.storeId,
                    id: this.form.storeSpecialActivityId
            	},
            	success: res => {
                    this.form = res.data.obj;
                    this.goodsList = res.data.list;
					uni.hideLoading();
            	},
            	fail: (e) => {
            		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
            	},
            })
        },
        pushGoods() {
            this.updateStatusVisible = false
        },
        handEditGoods (goods, index) {
            const params = encodeURIComponent(JSON.stringify(goods)); 
            uni.navigateTo({
                url: `/pages/activity/add-goods?goods=${params}&index=${index}`
            })
        },
        handAddGoods() {
			if (this.goodsList.length > 0) {
				const ids = this.goodsList.map(item => item.goodsId);
				
				const idsStr = ids.join(',');
				const params = encodeURIComponent(JSON.stringify(idsStr)); 
				uni.navigateTo({
					url: `/pages/activity/add-goods?idsStr=${params}`
				})
			} else {
				uni.navigateTo({
					url: `/pages/activity/add-goods`
				})
			}
        },
        selectDate() {
            this.$refs.calendar.open();
        },
        confirm(e) {
            this.form.startDate = e.range.before;
            this.form.endDate = e.range.after;
        },
        save () {
			
            if (!this.form.activityName) {
                this.$api.msg("请输入活动主题");
                return;
            }
            if (!this.form.activityComment) {
                this.$api.msg("请输入活动描述");
                return;
            }
            if (!this.form.startDate || !this.form.endDate) {
                this.$api.msg("请选择活动时间范围");
                return;
            }
			let start = new Date(this.form.startDate)
			let end = new Date(this.form.endDate)
			if (start > end) {
                this.$api.msg("开始时间不能大于结束时间");
                return;
            }
            if (!this.goodsList || this.goodsList.length == 0) {
                this.$api.msg("请选择特价菜商品列表");
                return;
            }
			
			let find = false
			let name = ''
			for (var i = 0; i < this.goodsList.length; i++) {
				for (var j = i + 1; j < this.goodsList.length; j++) {
					if (this.goodsList[i].goodsId == this.goodsList[j].goodsId && this.goodsList[i].goodsName==this.goodsList[j].goodsName) { 
						find = true; 
						name = this.goodsList[i].goodsName;
						break;
					}
				}
				if (find) break;
			}
			
			if (find) {
			    this.$api.msg('商品:'+ name + "已存在请勿重复添加");
			    return;
			}
			
			
			uni.showLoading({
				title: '保存中'
			});
            var dateStr = (new Date()).getTime();
            var sign = this.getSign('' + this.storeInfo.storeId + dateStr);
            this.requst({
            	url: this.saveStoreSpecialActivityUrl,
            	data: {
            		timestamp: dateStr,
            		sign: sign,
                    storeId: this.storeInfo.storeId,
                    storeSpecialActivityId: this.form.storeSpecialActivityId,
            		activityName: this.form.activityName,
            		activityComment: this.form.activityComment,
            		startDate: this.form.startDate,
            		endDate: this.form.endDate,
                    goodsListStr: JSON.stringify(this.goodsList)
            	},
            	success: res => {
                    if (res.data.rtnBean.rtnCode == 0) {
						 uni.hideLoading();
                        uni.showToast({
                        	title: "保存成功",
                        	duration: 3000,
                        	icon: 'none',
                        });
                        
                        if (this.addFlag) {
                            uni.redirectTo({
                                url: '/pages/activity/special-item-info?id=' + res.data.obj
                            })
                        } else {
                            let pages = getCurrentPages();
                            let prevpage = pages[pages.length - 2];
                            prevpage.$vm.loadData();
                            uni.navigateBack();
                        }
                    } else {
						 uni.hideLoading();
                        this.$api.msg(res.data.rtnBean.rtnMsg);
                    }
                   
            	},
            	fail: (e) => {
            		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
            	},
            })
        },
        deleteGoods(index, item) {
            let that = this
        	uni.showModal({
        		title: '提示',
        		content: '确定移除该商品吗？',
        		success: function(res) {
        			if (res.confirm) {
        				that.goodsList.splice(index, 1);
        			}
        		}
        	});
        },
    },
    onShow () {
    },
    onLoad (options) {
        if (options && options.id) {
            uni.setNavigationBarTitle({
                title:'编辑特价菜活动'
            });
            this.form.storeSpecialActivityId = options.id;
            this.loadData();
            this.addFlag = false;
        } else {
            uni.setNavigationBarTitle({
                title:'新增特价菜活动'
            })
            this.addFlag = true;
        }
    }
}
</script>
<style lang="scss" scoped>
.special-item-edit-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));
}
.between {
    @include between;
}
.cell-wrap {
    width: 100vw;
    padding: 0 40rpx;
    box-sizing: border-box;
    background-color: #fff;
}
.item {
    @include between;
    height: 100rpx;
    background-color: #fff;
    border-bottom: 2rpx solid #ececec;
    font-size: $font-base;
    .label {
        width: 200rpx;
        color: $title-color;
    }
    .value {
        width: calc(100% - 200rpx);
        color: $desc-color;
        text-align: right;
    }
}
.activities-title {
    height: 80rpx;
    @include flexStart;
    padding: 20rpx 40rpx 0;
    box-sizing: border-box;
    font-size: $font-base;
    color: $title-color;
}
.goods-list {
    .goods {
        background-color: #fff;
        @include flexStart;
        padding: 20rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        width: 100%;
        .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;
        }
        .desc {
            color: $desc-color; 
        }
    }
    .add-goods {
        margin-top: 40rpx;
        width: 180rpx;
        height: 60rpx;
        border: 2rpx solid $theme-color;
        color: $theme-color;
        @include flexCenter;
        margin-left: 20rpx;
    }
}

.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;
    }
}
</style>