eduepos_ui_store/pages/activity/add-goods.vue

<template>
    <view class="add-goods-page">
        <scroll-view scroll-y class="goods-form">
            <view class="item" @click="chooseGoods">
                <view class="goodsLabel">{{form.goodsName ? form.goodsName : '选择商品'}}</view>
                <view class="value">
                    <text class="goods-name"></text>
                    <u-icon v-if="!form.storeSpecialGoodsId" name="arrow-right" size="20" color="#6c6c6c"></u-icon>
                </view>
            </view>
            <view class="item no-border">
                <view class="label">缩略图</view>
                <view class="value">
                    <image class="cover" :src="form.pictureUrl" />
                </view>
            </view>
            <view class="item">
                <view class="label">原价</view>
                <view class="value price">{{moneyConverter(form.costPrice)}}元</view>
            </view>
            <view class="item">
                <view class="label">活动价</view>
                <view class="value">
                    <u-input border="none" inputAlign="right" fontSize="14" v-model="form.activityPrice" placeholder="请填写活动价格"></u-input>
                    <text class="fixx">元</text>
                </view>
            </view>
            <view class="item">
                <view class="label">每单限购</view>
                <view class="value">
                    <u-input border="none" inputAlign="right" type="number" @input="inventoryMaxNum(index,$event)" fontSize="14" v-model="form.maxNum" placeholder="限购数量"></u-input>
                    <text class="fixx">份</text>
                </view>
            </view>
            <view class="item">
                <view class="label">活动库存</view>
                <view class="value">
                    <u-input border="none" inputAlign="right" type="number" @input="inventoryInput(index,$event)" fontSize="14" v-model="form.activityNum" placeholder="999"></u-input>
                    <text class="fixx">份</text>
                </view>
            </view>
        </scroll-view>

        <u-modal
            :show="chooseGoodsVisible"
            :showConfirmButton="false"
            closeOnClickOverlay
            @close="chooseGoodsVisible = false">
            <view class="modal-container">
                <view class="search-wrap">
                    <view class="input-wrap">
                        <u-input border="none" fontSize="14" v-model="goodsName" placeholder="商品名称"></u-input>
                    </view>
                    <view class="btn" @click="getGoodsList">搜索</view>
                </view>
                <view class="goods-list">
                    <view class="item" v-for="item in goodsList" :key="item.goodsId" @click="handItem(item)">
                        <view class="cover">
                            <image class="img" :src="item.pictureUrl"/>
                        </view>
                         <view class="cont">
                            <view class="goods-name">
                               {{item.goodsName}}
                            </view>
                            <view class="desc">
                                库存: {{item.maxNum}}, 价格: ¥{{moneyConverter(item.costPrice)}}
                            </view>
                         </view>
                    </view>
                </view>
            </view>
        </u-modal>
        <view class="update-events">
            <view class="btn" @click="save">保存</view>
        </view>
    </view>
</template>
<script>
import {mapState} from 'vuex';
export default {
    data () {
        return {
            getStoreSingleGoodsForStoreUrl: '/storeGoodsManageApi/getStoreSingleGoodsForSpecialForStore',
            chooseGoodsVisible: false,
            goodsName: '',
            goodsList: [],
            form: {
                goodsId: '',
                goodsName: '',
                costPrice: '',
                modelId: '',
                pictureUrl: '',
                activityPrice: '',
                maxNum: '',
                activityNum: ''
            },
            index : '',
			idsStr: ''
        }
    },
    computed: {
        ...mapState(['storeInfo'])
    },
    methods: {
        handItem(item) {
            this.form.goodsId = item.goodsId
            this.form.goodsName = item.goodsName;
            this.form.costPrice = item.costPrice;
            this.form.modelId = item.modelId;
            this.form.pictureUrl = item.pictureUrl;
            
            this.chooseGoodsVisible = false
        },
		inventoryMaxNum(index,e){
			// 只能输入数字
			const inputType = /[^\d]/g
			this.$nextTick(function () {
				this.form.maxNum = e.replace(inputType,'');
			})
		},
		inventoryInput(index,e){
			// 只能输入数字
			const inputType = /[^\d]/g
			this.$nextTick(function () {
				this.form.activityNum = e.replace(inputType,'');
			})
		},
        chooseGoods() {
            if (this.form.storeSpecialGoodsId) {
                return;
            }
            this.goodsName = '';
            this.getGoodsList();
            this.chooseGoodsVisible = true;
        },
        getGoodsList() {
			uni.showLoading({
				title: '加载中'
			});

            var dateStr = (new Date()).getTime();
            var sign = this.getSign('' + this.storeInfo.storeId + dateStr);
            this.requst({
            	url: this.getStoreSingleGoodsForStoreUrl,
            	data: {
            		timestamp: dateStr,
            		sign: sign,
            		storeId: this.storeInfo.storeId,
                    goodsName: this.goodsName,
					ids: this.idsStr || ''
            	},
            	success: res => {
                    this.goodsList = res.data.list;
					uni.hideLoading()
            	},
            	fail: (e) => {
            		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
            	},
            })
        },
        save() {
			let regPrice = (/^[0-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/);
            if (!this.form.goodsId) {
                this.$api.msg("请选择商品");
                return;
            }
            
            if (!this.form.activityPrice) {
                this.$api.msg("请输入活动价格");
                return;
            }
			if (!regPrice.test(this.form.activityPrice)) {
				this.$api.msg("活动价格只能是整数或小数点后两位");
				return;
			} 

            if (this.form.activityPrice * 100 >= this.form.costPrice) {
                this.$api.msg("活动价必须小于原价");
                return;
            }
            
            if (!this.form.maxNum) {
                this.$api.msg("请输入每单限购");
                return;
            }
			
			if (Number(this.form.maxNum) === 0) {
			    this.$api.msg("每单限购要大于0");
			    return;
			}
            
            if (!this.form.activityNum) {
                this.$api.msg("请输入活动库存");
                return;
            }
			if (Number(this.form.maxNum) > Number(this.form.activityNum)) {
			    this.$api.msg("每单限购不能大于活动库存");
			    return;
			}
			if (Number(this.form.activityNum) > Number(9999)) {
                this.$api.msg("活动库存不能超过9999");
                return;
            }
            
            let pages = getCurrentPages();
            let prevpage = pages[pages.length - 2];
            
            let tempList = prevpage.$vm.goodsList;
            for(var i = 0; i < tempList.length; i++) {
                if (tempList[i].goodsId == this.form.goodsId && i != this.index){
                    this.$api.msg("该商品已经选择了，请更换其他商品");
                    return;
                }
            }
            
            if (this.index != '') {
                prevpage.$vm.goodsList.splice(this.index, 1)
            }
            this.form.activityPrice = this.form.activityPrice * 100;
            prevpage.$vm.goodsList.push(this.form);
            uni.navigateBack();
        }
    },
    onShow () {
        
    },
    onLoad (options) {
        if ('goods' in options) {
            this.form = JSON.parse(decodeURIComponent(options.goods));
            this.form.activityPrice = this.form.activityPrice / 100;
        }
        if ('index' in options) {
            this.index = options.index
        } 
		if ('idsStr' in options) {
			this.idsStr = JSON.parse(decodeURIComponent(options.idsStr));
		} 
    }
}
</script>
<style lang="scss" scoped>
.add-goods-page {
    border-top: 2rpx solid #f5f5f5;
    min-height: 100vh;
}
.update-events {
    width: 100vw;
    background-color: #fff;
    @include flexCenter;
    margin-top: 40rpx;
    .btn {
        width: 80vw;
        height: 80rpx;
        border-radius: 40rpx;
        background-color: $theme-color;
        color: #fff;
        @include flexCenter;
    }
}
.goods-form {
    background-color: #fff;
    padding: 0 40rpx;
    box-sizing: border-box;
    height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
    height: calc(100vh - 120rpx - constant(safe-area-inset-bottom));
    .item {
        @include between;
        height: 100rpx;
        border-bottom: 2rpx solid #ececec;
        font-size: $font-base;
    }
    .label {
        width: 200rpx;
    }
	.goodsLabel {
		width: 380rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
    .value {
        width: calc(100% - 200rpx);
        @include flexEnd;
        .cover {
            width: 100rpx;
            height: 100rpx;
        }
    }
    .no-border {
        border-bottom: none;
        height: 140rpx;
    }
    .price {
        color: $uni-color-button;
    }
    .fixx {
        margin-left: 20rpx;
    }
}
/deep/ .u-modal__content {
    padding: 30rpx!important;
    box-sizing: border-box;
}
.modal-container {
    width: 100%;
    .search-wrap {
        width: 100%;
        @include flexCenter;
        border: 2rpx solid $theme-color;
        color: $theme-color;
        font-size: $font-base;
        padding-left: 20rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        .btn {
            width: 128rpx;
            height: 60rpx;
            @include flexCenter;
            border-left: 2rpx solid $theme-color;
        }
        .input-wrap {
            flex: 1;
            /deep/ .u-input {
                width: 100%;
            }
        }
    }
    .goods-list {
        height: 500rpx;
        overflow-y: auto;
        overflow-x: hidden;
        .item {
            margin-bottom: 20rpx;
            @include flexStart;
        }
        .cover {
            width: 120rpx;
            height: 120rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            .img {
                width: 120rpx;
                height: 120rpx;
            }
        }
        .cont {
            font-size: $font-base;
            .goods-name {
                width: 100%;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                color: $text-color;
            }
            .desc {
                color: $desc-color;
            }
        }
    }
}
</style>