eduepos_ui_store/pages/activity/advertising.vue

<template>
    <view class="advertising-page">
        <view class="cell-group">
            <view class="cell" v-if="form.carousel">
                <view class="label">轮播图</view>
                <view class="cont">
                    <image class="banner" :src="form.carousel.imgUrl || ''" />
                </view>
                <view class="setting" @click="handSetting(1)">设置</view>
            </view>
            <view class="cell" v-if="form.specialFoodOne && form.specialFoodOne.specialFoodId">
                <view class="label">特价菜1</view>
                <view class="cont">
                    <image class="cover" :src="form.specialFoodOne.pictureUrl" />
                    <view class="name">{{form.specialFoodOne.goodsName || ''}}</view>
                    <view class="price" v-if="form.specialFoodOne.costPrice">￥{{moneyConverter(form.specialFoodOne.costPrice)}}</view>
                    <!-- <view class="price">￥{{moneyConverter(form.specialFoodOne.costPrice)}}</view> -->
                </view>
                <view class="setting" @click="handSetting(2)">设置</view>
            </view>
            <view class="cell" v-if="form.specialFoodTwo && form.specialFoodTwo.specialFoodId">
                <view class="label">特价菜2</view>
                <view class="cont">
                    <image class="cover" :src="form.specialFoodTwo.pictureUrl" />
                    <view class="name">{{form.specialFoodTwo.goodsName || ''}}</view>
                    <view class="price" v-if="form.specialFoodTwo.costPrice">￥{{moneyConverter(form.specialFoodTwo.costPrice)}}</view>
                    <!-- <view class="price">￥{{moneyConverter(form.specialFoodTwo.costPrice)}}</view> -->
                </view>
                <view class="setting" @click="handSetting(3)">设置</view>
            </view>

            <view class="cell dubble" v-if="form.indexStore != null ">
                <view class="label">优选店铺</view>
                <view class="cont cont-dubble">
                    <view class="row">
                        <image class="cover" :src="form.goodsList[0].pictureUrl" />
                        <view class="name">{{form.goodsList[0].goodsName || ''}}</view>
                        <!-- <view class="price">￥{{moneyConverter(form.goodsList[0].costPrice)}}</view> -->
						 <view class="price" v-if="form.goodsList[0] && form.goodsList[0].costPrice">¥{{ moneyConverter(form.goodsList[0].costPrice)}}</view>
                    </view>
                    <view class="row">
                        <image class="cover" :src="form.goodsList[1].pictureUrl" />
                        <view class="name">{{form.goodsList[1].goodsName || ''}}</view>
                        <view class="price" v-if="form.goodsList[1] && form.goodsList[1].costPrice">¥{{ moneyConverter(form.goodsList[1].costPrice)}}</view>
                    </view>
                </view>
                <view class="setting" @click="handSetting(4)">设置</view>
            </view>
        </view>
        <u-modal
            :show="visible"
            title="轮播店铺图选择"
            closeOnClickOverlay
            showCancelButton
            @confirm="confirm"
            @cancel="visible = false"
            @close="visible = false">
            <view class="container">
                <view class="item">
                    <view class="label">轮播图片</view>
                    <u-upload
						:fileList="fileList"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						:previewFullImage="true"
						:maxCount="1"
					></u-upload>
                </view>
            </view>
        </u-modal>
        <u-popup
            mode="right"
            closeable
            :zIndex="99"
            :overlay="false"
            :customStyle="{ width: '100vw', height: '100vh' }"
            :show="popupVisible"
            @close="popupClose"
            @open="popupOpen">
            <view class="popup-container" v-if="active == 2">
                <view class="title">特价菜品选择</view>
                <view class="item">
                    <view class="label" v-if="!form.specialFoodOne.goodsId">选择商品</view>
                    <view class="label" v-else>{{form.specialFoodOne.goodsName}}</view>
                    <view class="value" @click="chooseGoods">
                        <view class="name"></view>
                        <u-icon name="arrow-right" size="18" color="#6c6c6c"></u-icon>
                    </view>
                </view>
                <view class="item">
                    <view class="label">商品图片</view>
                    <view class="value">
                        <image class="cover" :src="form.specialFoodOne.pictureUrl"></image>
                    </view>
                </view>
            </view>
			<view class="popup-container" v-if="active == 3">
                <view class="title">特价菜品选择</view>
                <view class="item">
                    <view class="label" v-if="!form.specialFoodTwo.goodsId">选择商品</view>
                    <view class="label" v-else>{{form.specialFoodTwo.goodsName}}</view>
                    <view class="value" @click="chooseGoods">
                        <view class="name"></view>
                        <u-icon name="arrow-right" size="18" color="#6c6c6c"></u-icon>
                    </view>
                </view>
                <view class="item">
                    <view class="label">商品图片</view>
                    <view class="value">
                        <image class="cover" :src="form.specialFoodTwo.pictureUrl"></image>
                    </view>
                </view>
            </view>
            <view class="popup-container" v-if="active == 4">
                <view class="title">优选店铺商品选择</view>
                <view class="item">
                    <!-- <view class="label">选择商品</view> -->
					<view class="label" v-if="!form.goodsList[0].goodsId">选择商品</view>
					<view class="label" v-else>{{form.goodsList[0].goodsName}}</view>
                    <view class="value" @click="chooseIndexGoods(1)">
                        <view class="name"></view>
                        <u-icon name="arrow-right" size="18" color="#6c6c6c"></u-icon>
                    </view>
                </view>
                <view class="item">
                    <view class="label">商品1图片</view>
                    <view class="value">
                        <image class="cover" :src="form.goodsList[0].pictureUrl"></image>
                    </view>
                </view>
                <view class="item">
                   <view class="label" v-if="!form.goodsList[1].goodsId">选择商品</view>
                   <view class="label" v-else>{{form.goodsList[1].goodsName}}</view>
                    <view class="value" @click="chooseIndexGoods(2)">
                        <view class="name"></view>
                        <u-icon name="arrow-right" size="18" color="#6c6c6c"></u-icon>
                    </view>
                </view>
                <view class="item">
                    <view class="label">商品2图片</view>
                    <view class="value">
                        <image class="cover" :src="form.goodsList[1].pictureUrl"></image>
                    </view>
                </view>
            </view>
		</u-popup>
        <u-popup
            mode="bottom"
            :zIndex="10076"
            :show="popupGoodsVisible"
            @close="popupGoodsClose"
            @open="popupGoodsOpen">
            <view class="modal-container">
                <view class="search-wrap">
                    <view class="input-wrap">
                        <u-input border="none" fontSize="14" v-model="searchValue" placeholder="商品名称"></u-input>
                    </view>
                    <view class="btn" @click="getGoods()">搜索</view>
                </view>
                <scroll-view scroll-y 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}}, 价格: ¥{{item.costPrice ? moneyConverter(item.costPrice) : ''}}
                            </view>
                         </view>
                    </view>
                </scroll-view>
            </view>
		</u-popup>
    </view>
</template>
<script>
import { mapState } from 'vuex';
export default {
    data () {
        return {
			infoUrl: '/storeAdvertisingManageApi/getAdvertisingInfo',
			uploadUrl: '/storeAdvertisingManageApi/upload',
			specialUrl: '/storeAdvertisingManageApi/getSpecialGoodsListByStoreIdForStore',
			updateSpecialUrl: '/storeAdvertisingManageApi/chooseFood',
			updateStoreUrl: '/storeAdvertisingManageApi/chooseIndexStoreGoods',
			getAllGoodslUrl: '/storeAdvertisingManageApi/getAllGoodsListByStoreIdForStore',
            popupGoodsVisible: false,
            popupVisible: false,
            bannerCount: 1,
            visible: false,
            modalTitle: '',
            active: 1,
            form: {},
			fileList: [],
            goodsList: [],
			indexV: 0,
			searchValue: '',
			imgUrl: ''
        }
    },
	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.infoUrl,
				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 && this.form.carousel && this.form.imgUrl){
							let picUrl = this.form.carousel.imgUrl;
							this.fileList.push({
								url: picUrl
							})
						}
						uni.stopPullDownRefresh()
						uni.hideLoading()
					}
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading()
				}
			})
		},
		getGoods () {
			if(this.active == 2 || this.active == 3){
				this.getGoodsList(this.searchValue)
			} else if (this.active == 4) {
				this.getAllGoodsList(this.searchValue)
			}
		},
		getGoodsList(name) {
			uni.showLoading({
				title: '加载中'
			});
		    var dateStr = (new Date()).getTime();
		    var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
		    this.requst({
		    	url: this.specialUrl,
		    	data: {
		    		timestamp: dateStr,
		    		sign: sign,
		    		storeId: this.storeInfo.storeId,
		    		storeUserId: this.storeInfo.storeUserId,
					goodsName: name || ''
		    	},
		    	success: res => {
		            this.goodsList = res.data.list;
					uni.hideLoading();
		    	},
		    	fail: (e) => {
		    		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
		    	},
		    })
		},
		getAllGoodsList(name) {
			uni.showLoading({
				title: '加载中'
			});
		    var dateStr = (new Date()).getTime();
		    var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
		    this.requst({
		    	url: this.getAllGoodslUrl,
		    	data: {
		    		timestamp: dateStr,
		    		sign: sign,
		    		storeId: this.storeInfo.storeId,
		    		storeUserId: this.storeInfo.storeUserId,
					goodsName: name || ''
		    	},
		    	success: res => {
		            this.goodsList = res.data.list;
					uni.hideLoading();
		    	},
		    	fail: (e) => {
		    		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
		    	},
		    })
		},
		// 删除图片
		deletePic(event) {
			this.fileList.splice(event.index, 1)
			this.imgUrl = ''
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let file = event.file
			let fileListLen = this.fileList.length
			// lists.map((item) => {
			this.fileList.push({
				...file,
				status: 'success',
				// message: '上传中'
			})
			this.imgUrl = file.url
		},

        handSetting (v) {
            this.active = v
            if (v == 1) {
				this.visible = true
			} 
            else {
				
				this.popupVisible = true
			}
        },
        addBanner (e) {
        },
        removeBanner (e) {
        },
        confirm (e) {
			uni.showLoading({
				title: '保存中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.storeInfo.code + this.uploadUrl,
					filePath: this.imgUrl,
					name: 'file',
					formData: {
						timestamp: dateStr,
						sign: sign,
						storeId: this.storeInfo.storeId,
						storeUserId: this.storeInfo.storeUserId,
						carouselId: this.form.carousel.carouselId
					},
					success: (res) => {
						let data = JSON.parse(res.data)
						if (data.rtnBean.rtnCode == 0) {
							uni.hideLoading();
							uni.showToast({
								title: "提交成功",
								duration: 3000,
								icon: 'none',
							});
							this.loadData()
							this.visible = false
						} else {
							uni.hideLoading();
							if (data.rtnBean.rtnMsg != '') {
								this.$api.msg(data.rtnBean.rtnMsg);
							}
						}
					},
					fail: (res) => {
						uni.hideLoading();
					}
				});
			})
        },
        popupClose () {
            this.popupVisible = false
			this.loadData()
        },
        popupOpen () {
        },
        popupGoodsClose () {
            this.popupGoodsVisible = false
			this.searchValue = ''
        },
        popupGoodsOpen () {
			if (this.active == 2 || this.active == 3){
				this.getGoodsList()
			}
			if (this.active == 4) {
				this.getAllGoodsList()
			}
            
        },
        chooseGoods () {
            this.popupGoodsVisible = true
        },
		chooseIndexGoods (index) {
			this.indexV = index
			this.popupGoodsVisible = true
			
		},
        handItem (item) {
			// 特价菜一
			if(this.active == 2) {
				this.updateSpecial(item.goodsId,this.form.specialFoodOne.specialFoodId);
				this.form.specialFoodOne.goodsName = item.goodsName;
				this.form.specialFoodOne.pictureUrl = item.pictureUrl;
				this.form.specialFoodOne.goodsId = item.goodsId;
			}
			// 特价菜二
			if (this.active == 3) {
				this.updateSpecial(item.goodsId,this.form.specialFoodTwo.specialFoodId);
				this.form.specialFoodTwo.goodsName = item.goodsName;
				this.form.specialFoodTwo.pictureUrl = item.pictureUrl;
				this.form.specialFoodTwo.goodsId = item.goodsId;
			}
	
			// 优选店铺
			if (this.active == 4) {
				if (this.indexV == 1){
					if(this.form.goodsList[0]) {
						this.form.goodsList[0].goodsName = item.goodsName;
						this.form.goodsList[0].pictureUrl = item.pictureUrl;
						this.form.goodsList[0].goodsId = item.goodsId;
					} else {
						this.form.goodsList.push({
							goodsName: item.goodsName,
							pictureUrl: item.pictureUrl,
							goodsId: item.goodsId
						})
					}
					
				}
				if (this.indexV == 2) {
					if(this.form.goodsList[1]) {
						this.form.goodsList[1].goodsName = item.goodsName;
						this.form.goodsList[1].pictureUrl = item.pictureUrl;
						this.form.goodsList[1].goodsId = item.goodsId;
					} else {
						this.form.goodsList.push({
							goodsName: item.goodsName,
							pictureUrl: item.pictureUrl,
							goodsId: item.goodsId
						})
					}
				}
				
				this.updateStore(item.goodsId);
			}
			this.popupGoodsVisible = false
        },
		updateSpecial (goodsId,sepicalFoodId) {
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.updateSpecialUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					goodsId: goodsId,
					id: sepicalFoodId
				},
				success: res => {
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
				},
			})
		},
		updateStore (goodsId) {
			let id = ''
			if (this.indexV == 1) {
				if (this.form.goodsList[0]) {
					id = this.form.goodsList[0].indexStoreGoodsId || ''
				}
			}
			if (this.indexV == 2) {
				if (this.form.goodsList[1]) {
					id = this.form.goodsList[1].indexStoreGoodsId || ''
				}
			}
			
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.updateStoreUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					goodsId: goodsId,
					indexStoreGoodsId: id
				},
				success: res => {
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
				},
			})
		},
		onPullDownRefresh() {
			this.loadData();
		}
    },
    onLoad () {
		this.loadData();
	}
}
</script>
<style lang="scss" scoped>
.advertising-page {
    width: 100vw;
    min-height: 100vh;
    background-color: #f5f5f5;
}
.cell-group {
    border-top: 2rpx solid #f5f5f5;
    .cell {
        width: 100%;
        margin: 10rpx 0;
        background-color: #fff;
        height: 180rpx;
        @include flexStart;
        padding: 0 20rpx;
        box-sizing: border-box;
        font-size: $font-base;
    }
    .label {
        width: 160rpx;
        color: $text-color;
    }
    .cont {
        @include between;
        width: calc(100% - 160rpx - 160rpx);
    }
    .dubble {
        height: 360rpx;
    }
    .banner {
        width: 328rpx;
        height: 128rpx;
    }
    .cover {
        width: 128rpx;
        height: 128rpx;
    }
    .cont-dubble {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .row {
        width: 100%;
        @include between;
    }
    .row:first-child {
        margin-bottom: 20rpx;
    }
    .setting {
        width: 100rpx;
        margin-left: 60rpx;
        padding: 6rpx 0;
        background-color: $theme-color;
        color: #fff;
        @include flexCenter;
        border-radius: 10rpx;
    }
    .name, .price {
        color: $title-color;
    }
}
.container {
    .item {
        @include flexCenter;
        .label {
            margin-right: 40rpx;
        }
    }
}
.popup-container {
    text-align: center;
    font-weight: bold;
    padding-top: 30rpx;
    .title {
        margin-bottom: 40rpx;
    }
    .item {
        @include between;
        padding: 20rpx;
        box-sizing: border-box;
        border-bottom: 2rpx solid #ececec;
        .label {
            margin-right: 40rpx;
        }
        .cover {
            width: 120rpx;
            height: 120rpx;
        }
        .value {
            flex: 1;
            @include flexEnd;
        }
    }
}
.modal-container {
    padding: 40rpx 40rpx 0;
    box-sizing: border-box;
    .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: 50vh;
        margin-top: 20rpx;
        .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>