eduepos_ui_store/pages/activity/coupon-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"><span class="required">*</span>优惠券标题</view>
                    <view class="value">
                        <input border="none" inputAlign="right" maxlength="15" fontSize="14" v-model="form.couponName" placeholder="请填写"></input>
                    </view>
                </view>
                <view class="item">
                    <view class="label"><span class="required">*</span>子标题</view>
                    <view class="value">
                        <input border="none" inputAlign="right" maxlength="15" fontSize="14" v-model="form.couponTitle" placeholder="请填写"></input>
                    </view>
                </view>
				<view class="item dubble">
					<view class="row">
						<view class="label">优惠券图片</view>
						<view class="value">
							<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1"
								:previewFullImage="true" :maxCount="1"></u-upload>
						</view>
					</view>
				</view>
				<view class="item">
				    <view class="label"><span class="required">*</span>优惠类型</view>
					<view class="value">
						<uni-data-select
							v-model="form.discountType"
							:localdata="discountTypeList"
							@change="changeDiscountType"
							:border="false"
						></uni-data-select>
					</view>
				</view>
				<view class="item" v-if="form.discountType === 1">
				    <view class="label"><span class="required">*</span>满减标准金额</view>
				    <view class="value">
				        <input border="none" inputAlign="right" maxlength="15" fontSize="14" v-model="form.couponFullPrice" placeholder="请填写"></input>
				    </view>
				</view>
				<view class="item" v-if="form.discountType !== 3 && form.discountType !== 4">
				    <view class="label"><span class="required">*</span>面额</view>
				    <view class="value">
				        <input border="none" inputAlign="right" maxlength="15" fontSize="14" v-model="form.price" placeholder="请填写"></input>
				    </view>
				</view>
				<view class="item" v-if="form.discountType === 3">
				    <view class="label"><span class="required">*</span>折扣(%)</view>
				    <view class="value">
				        <input border="none" inputAlign="right" maxlength="15" fontSize="14" v-model="form.couponDiscount" placeholder="请填写"></input>
				    </view>
				</view>
				<view class="item">
				    <view class="label"><span class="required">*</span>可领取人群</view>
					
				    <view class="value">
						<uni-data-select
							v-model="form.useScopeMember"
							:localdata="useScopeMemberList"
							@change="changeUseScopeMember"
							:border="false"
						></uni-data-select>
				    </view>
				</view>
                <view class="item">
                    <view class="label"><span class="required">*</span>活动时间</view>
                    <view class="value" @click="selectDate">
                        {{ form.startDate }} ~ {{ form.endDate }}
                    </view>
                </view>
				<view class="item">
				    <view class="label"><span class="required">*</span>优惠券状态</view>
				    <view class="value">
						<switch :checked="form.status" @change="changeStatus"  size="22" class="switch" style="transform:scale(0.7)"></switch>
				    </view>
				</view>
				<view class="item">
				    <view class="label"><span class="required">*</span>发行数量</view>
				    <view class="value">
				        <input border="none" inputAlign="right" maxlength="15" fontSize="14" v-model="form.publishNum" 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.remark" placeholder="请填写"></input>
				    </view>
				</view>
			</view>
            <view class="activities-title" v-if="form.discountType === 4"><span class="required">*</span>
                参与的商品(不支持多规格商品)
            </view>
            <view class="goods-list" v-if="form.discountType === 4">
                <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>
								<view >
								    <!-- <view class="desc">每单限购{{item.maxNum}}份，活动库存{{item.activityNum}}份</view> -->
								    <u-icon style="margin-right: 10rpx;" name="edit-pen" size="28" color="#6c6c6c" @click="handEditGoods(item, index)"></u-icon>
								</view>
                        </view>
                    </uni-swipe-action-item>
                </uni-swipe-action>
                <view class="add-goods" v-if="form.discountType === 4 && addFlag && goodsList.length < 1" @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 {
            getStoreCouponByIdForStore: '/coupon/getStoreCouponByIdForStore',
            saveUrl: '/coupon/updateCouponByStore',
            updateStatusVisible: false,
            form: {
                couponId: '',
				couponName: '',
				couponTitle: '',
				discountType: '',
				couponType: 2,
				couponDiscount: '',
				couponFullPrice: '',
				imgUrl: '',
				storeId: '',
				goodsId: '',
				useScopeMember: '',
				startDate: '',
				endDate: '',
				status: 0,
				price: '',
				publishNum: '',
				receivedNum: '',
				usedNum: '',
				remark: ''
            },
            goodsList: [],
			fileList: [],
            options: [
                {
                    text: '删除',
            		style: {
                        fontSize: '28rpx',
            			backgroundColor: '#FF0000',
						marginBottom: '20rpx'
                    }
                }
            ],
            options1:[],
            addFlag: true,
			file: {},
			event: {},
			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.getStoreCouponByIdForStore,
            	data: {
            		timestamp: dateStr,
            		sign: sign,
            		storeId: this.storeInfo.storeId,
                    id: this.form.couponId
            	},
            	success: res => {
                    this.form = res.data.obj;
					if (this.form.couponFullPrice) {
						this.form.couponFullPrice = this.moneyConverter(this.form.couponFullPrice)
					}
					if (this.form.price) {
						this.form.price = this.moneyConverter(this.form.price)
					}
					if (this.form.startDate) {
						this.form.startDate = this.formatDate(this.form.startDate,'yyyy-M-d')
					}
					if (this.form.endDate) {
						this.form.endDate = this.formatDate(this.form.endDate,'yyyy-M-d')
					}
                    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();
            	},
            })
        },
		handCheckGoodsType () {
			this.$refs.popupPickerView.show()
		},
        pushGoods() {
            this.updateStatusVisible = false
        },
        handEditGoods (goods, index) {
            const params = encodeURIComponent(JSON.stringify(goods)); 
            uni.navigateTo({
                url: `/pages/activity/add-coupon-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-coupon-goods?idsStr=${params}`
				})
			} else {
				uni.navigateTo({
					url: `/pages/activity/add-coupon-goods`
				})
			}
        },
		// 新增图片
		async afterRead(event) {
			this.event = event
			this.file = event.file
			let file1 = event.file
			let fileListLen = this.fileList.length
			// lists.map((item) => {
			this.fileList.push({
				...file1,
				status: 'success',
				// message: '上传中'
			})
			this.form.imgUrl = this.file.url
		
		},
		// 删除图片
		deletePic(event) {
			this.fileList.splice(event.index, 1)
			this.form.imgUrl = ''
		},
        selectDate() {
            this.$refs.calendar.open();
        },
		changeDiscountType(e) {
		    console.log("e:", e);
			this.form.discountType = e
		},
		changeUseScopeMember(e) {
			console.log("e:", e);
			this.form.useScopeMember = e
		},
		changeStatus (e) {
			if (e.detail.value){
				this.form.status = 1
			} else {
				this.form.status = 0
			}
		},
        confirm(e) {
            this.form.startDate = e.range.before;
            this.form.endDate = e.range.after;
        },
        save () {
			if (this.form.discountType === 1) {
			    this.form.couponDiscount = ''
			}
			if (this.form.discountType !== 1) {
			    this.form.couponFullPrice = ''
			}
            
			if (this.form.discountType !== 3){
				this.form.couponDiscount = '';
			}
			if (this.form.discountType === 3 || this.form.discountType === 4){
				this.form.price = '';
			}
			if (this.form.couponFullPrice === null){
				this.form.couponFullPrice = '';
			}
			if (this.form.couponName === '' || !this.form.couponName) {
				this.$api.msg('请输入优惠券标题');
				return;
			}
			if (this.form.couponTitle === '' || !this.form.couponTitle) {
				this.$api.msg('请输入优惠券子标题');
				return;
			}
			if (this.form.discountType === '' || !this.form.discountType) {
				this.$api.msg('请选择优惠类型');
				return;
			}
			if (this.form.discountType === 3) {
				if (this.form.couponDiscount === '' && !this.form.couponDiscount) {
					this.$api.msg('请输入折扣');
					return;
				}
			}       
			if (this.form.discountType === 1) {
				if (this.form.couponFullPrice === '' && !this.form.couponFullPrice) {
					this.$api.msg('请输入满减标准金额');
					return;
				}
			}
			if (this.form.discountType !== 3 && this.form.discountType !== 4){
				if (this.form.price === '' || !this.form.price) {
					this.$api.msg('请输入面额');
					return;
				}
			}
			if (this.form.useScopeMember === '' || !this.form.useScopeMember) {
				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)
			let startDates = this.formatDate(this.form.startDate,'yyyy-M-d H:m:s')
			let endDates = this.formatDate(this.form.endDate,'yyyy-M-d H:m:s')
			if (start > end) {
			    this.$api.msg("开始时间不能大于结束时间");
			    return;
			}
			if (end < new Date() && this.form.status === 1) {
			  this.$api.msg('优惠券结束时间小于当前时间，无法上架，请先修改时间');
			  return;
			}
			if (this.form.publishNum === '' || !this.form.publishNum) {
				this.$api.msg('请输入发行数量');
				return;
			}
			if (this.form.couponType === 2) {
				if (this.form.discountType === 4) {
					if (this.goodsList.length == 0) {
						this.$api.msg('请请选择商品');
						return;
					} else {
						this.form.goodsId = this.goodsList[0].goodsId
					}
				}
			}

			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: '保存中'
			});
			let that = this
			var dateStr = (new Date()).getTime();
			var sign = that.getSign('' + that.storeInfo.storeId + dateStr);
			if (that.event.file) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.storeInfo.code + this.saveUrl,
						filePath: that.form.imgUrl,
						name: 'file',
						formData: {
							timestamp: dateStr,
							sign: sign,
							storeId: that.storeInfo.storeId,
							storeUserId: that.storeInfo.storeUserId,
							couponId: that.form.couponId,
							couponName: that.form.couponName,
							couponTitle: that.form.couponTitle,
							couponType: that.form.couponType,
							discountType: that.form.discountType,
							couponFullPrice: that.form.couponFullPrice ? this.form.couponFullPrice * 100 : this.form.couponFullPrice,
							imgUrl: that.form.imgUrl,
							goodsId: that.form.goodsId,
							useScopeMember: that.form.useScopeMember,
							startDate: startDates,
							endDate: endDates,
							goodsId: that.form.goodsId,
							publishNum: that.form.publishNum,
							status: that.form.status,
							price: that.form.price ? this.form.price * 100 : this.form.price,
							rmk: that.form.remark || '',
						},
						header: {
							'content-type': 'multipart/form-data'
						}, // header 值
						success: (res) => {
							if(res.data) {
								let data = JSON.parse(res.data)
								if (data.rtnBean.rtnCode == 0) {
									uni.hideLoading();
									uni.showToast({
										title: "保存成功",
										duration: 3000,
										icon: 'none',
									});
								
									var pages = getCurrentPages();
									var prevPage = pages[pages.length - 2]; //上一个页面
									prevPage.$vm.loadData()
									uni.navigateBack();
									// return;
								} else {
									uni.hideLoading();
									if (data.rtnBean.rtnMsg != '') {
										that.$api.msg(data.rtnBean.rtnMsg);
									}
								}
							} else {
								uni.hideLoading();
								that.$api.msg('优惠券更新失败，请稍后重试');
							}
							
						},
						fail: (res) => {
							uni.hideLoading();
						}
					});
				})
			} else {
				that.requst({
					url: that.saveUrl,
					data: {
						timestamp: dateStr,
						sign: sign,
						storeId: that.storeInfo.storeId,
						storeUserId: that.storeInfo.storeUserId,
						couponId: that.form.couponId,
						couponName: that.form.couponName,
						couponTitle: that.form.couponTitle,
						couponType: that.form.couponType,
						discountType: that.form.discountType,
						couponFullPrice: that.form.couponFullPrice ? this.form.couponFullPrice * 100 : this.form.couponFullPrice,
						imgUrl: that.form.imgUrl,
						goodsId: that.form.goodsId,
						useScopeMember: that.form.useScopeMember,
						startDate: startDates,
						endDate: endDates,
						goodsId: that.form.goodsId,
						publishNum: that.form.publishNum,
						status: that.form.status,
						price: that.form.price ? this.form.price * 100 : this.form.price,
						rmk: that.form.remark || ''
					},
					success: res => {
						if (res.data.rtnBean.rtnCode == 0) {
							uni.hideLoading();
							uni.showToast({
								title: "保存成功",
								duration: 3000,
								icon: 'none',
							});
			
							var pages = getCurrentPages();
							var prevPage = pages[pages.length - 2]; //上一个页面
							prevPage.$vm.loadData()
							uni.navigateBack();
							// return;
						} else {
							uni.hideLoading();
							if (res.data.rtnBean.rtnMsg != '') {
								that.$api.msg(res.data.rtnBean.rtnMsg);
							}
						}
						
					},
					fail: (e) => {
						that.isDisable = false;
						console.log("接口调用失败:" + JSON.stringify(e));
						uni.hideLoading();
					},
				});
			}
			
            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);
        			}
        		}
        	});
        },
		formatDate(value,args) {
		    var dt = new Date(value);
		    if(args == 'yyyy-M-d') {
		        let year = dt.getFullYear();
		        let month = dt.getMonth() + 1;
		        let date = dt.getDate();
		        return `${year}-${month}-${date}`;
		    } else if(args == 'yyyy-M-d H:m:s'){
		        let year = dt.getFullYear();
		        let month = dt.getMonth() + 1;
		        let date = dt.getDate();
		        let hour = dt.getHours();
		        let minute = dt.getMinutes();
		        let second = dt.getSeconds();
		        return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
		    } else if(args == 'MM.dd') {
		        let month = (dt.getMonth() + 1).toString().padStart(2,'0');
		        let date = dt.getDate().toString().padStart(2,'0');
		        return `${month}.${date}`;
		    } else {// yyyy-MM-dd HH:mm:ss
		        let year = dt.getFullYear();
		        let month = (dt.getMonth() + 1).toString().padStart(2,'0');
		        let date = dt.getDate().toString().padStart(2,'0');
		        let hour = dt.getHours().toString().padStart(2,'0');
		        let minute = dt.getMinutes().toString().padStart(2,'0');
		        let second = dt.getSeconds().toString().padStart(2,'0');
		        return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
		    }
		}
    },
    onShow () {
    },
    onLoad (options) {
        if (options && options.id) {
            uni.setNavigationBarTitle({
                title:'编辑优惠券'
            });
            this.form.couponId = options.id;
            this.loadData();
            this.addFlag = false;
        } else {
            uni.setNavigationBarTitle({
                title:'新增优惠券'
            })
            this.addFlag = true;
        }
    }
}
</script>
<style lang="scss" scoped>
.required {
	color: red;
	margin-left: 5px;
}
.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;
    }
}
.item.dubble {
	height: 200rpx;
}
.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: 40rpx;
    }
}

.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>