eduepos_ui_store/pages/activity/overlord-meal-detail.vue

<template>
    <view class="overlord-meal-detail-page" @touchmove.stop.prevent="moveHandle">
		<view class="scroll-content">
			<image class="banner" :src="form.imgUrl"></image>
			<view class="item">
				<view class="label">活动状态</view>
				<view class="value" :class="{ing: form.status == 1}">{{ form.status == 1 ? '进行中' : (form.status == 0 ? '未开始' : '已失效')}}</view>
			</view>
			<view class="item">
				<view class="label">活动主题</view>
				<view class="value">{{form.title}}</view>
			</view>
			<view class="item">
				<view class="label">活动时间</view>
				<view class="value">{{form.startDate}} ~ {{form.endDate}}</view>
			</view>
			<view class="item">
				<view class="label">最低单价</view>
				<view class="value">¥{{moneyConverter(form.price)}}</view>
			</view>
			<view class="item">
				<view class="label">最低总价</view>
				<view class="value">¥{{moneyConverter(form.activityPrice)}}</view>
			</view>
			<view class="item">
				<view class="label">活动达标金额</view>
				<view class="value">¥{{moneyConverter(form.reachPrice)}}</view>
			</view>
			<view v-if="doflg" class="cy-goods">参与的商品</view>
			<view v-if="doflg" class="goods">
				<view class="cover">
					<image class="img" :src="form.pictureUrl"/>
				</view>
				<view class="cont">
					<view class="name">{{form.goodsName}}</view>
					<view class="tools">
						<view class="price">¥{{moneyConverter(form.salePrice)}}</view>
						<view class="origin-price" v-if="form.salePrice < form.costPrice">¥{{moneyConverter(form.costPrice)}}</view>
					</view>
					<view class="desc">
						未兑换数量{{form.residueNum}}份，参加活动数量{{form.total}}份
					</view>
				</view>
			</view>
		</view>	
		<view class="footer-btn" @touchmove.stop.prevent="moveHandle">
		    <view class="logout" @click="signUp" v-if="joinBtnVisible">
		        报名
		    </view>
		</view>
		<u-modal
			:show="joinActivityVisible"
			title="报名活动"
			showCancelButton
			@confirm="joinActivity"
			@cancel="joinActivityVisible = false"
			@close="joinActivityVisible = false">
			<view class="container">
				<view class="item">
					<view class="label">{{goods.goodsName ? goods.goodsName : '选择商品'}}</view>
					<view class="value" @click="chooseGoods">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="label">价格</view>
					<view class="value">
						¥{{moneyConverter(goods.activityPrice)}}
					</view>
				</view>
				<view class="item">
					<view class="label">参加活动数量</view>
					<view class="value">
						<u-input border="none" inputAlign="right" fontSize="14" v-model="goods.activityNum" placeholder="数量"></u-input>
						<text class="text">份</text>
					</view>
				</view>
			</view>
		</u-modal>
		<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>
				<scroll-view scroll-y class="goods-list">
					<view class="goods-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.activityPrice)}}
							</view>
						 </view>
					</view>
				</scroll-view>
			</view>
		</u-modal>
        <!-- <view class="sign-up">
            <view class="btn" @click="signUp" v-if="joinBtnVisible">报名</view>
        </view> -->
		
    </view>
</template>
<script>
import {mapState} from 'vuex';
export default {
    data () {
        return {
            getStoreSingleGoodsForStoreUrl: '/storeGoodsManageApi/getStoreSingleGoodsForStore',
            getStoreDineAndDashInfoForStoreUrl: '/dineAndDashActivityApi/getStoreDineAndDashInfoForStore',
            joinDineAndDashInfoForStoreUrl: '/dineAndDashActivityApi/joinDineAndDashInfoForStore',
            getJoinedActivityStoreCountForStoreUrl: '/dineAndDashActivityApi/getJoinedActivityStoreCountForStore',
            dineAndDashId: '',
            joinedActivityStoreCount: 0,
            form: {
                dineAndDashId : '', 
                title : '',
                imgUrl : '',
                activityPrice : '',
                startDate : '',
                endDate : '',
                status : '',
                price : '',
                reachPrice : '',
                maxNum : '',
                storeId : '',
                storeName	 : '',
                goodsId : '',
                goodsName : '',
                residueNum : '',
                total : '',
                costPrice : '',
                salePrice : '',
                pictureUrl : '',
            },
            goods: {
                goodsId: '',
                goodsName: '',
                costPrice: '',
                modelId: '',
                pictureUrl: '',
                activityPrice: '',
                activityNum: ''
            },
            doflg: false,
            joinBtnVisible: false,
            joinActivityVisible: false,
            chooseGoodsVisible: false,
            goodsList: [],
        }
    },
    computed: {
        ...mapState(['storeInfo'])
    },
    methods: {
		moveHandle() {
			return false
		},
        signUp () {
			uni.showLoading({
				title: '加载中'
			});
            var dateStr = (new Date()).getTime();
            var sign = this.getSign('' + this.dineAndDashId + dateStr);
            this.requst({
            	url: this.getJoinedActivityStoreCountForStoreUrl,
            	data: {
            		timestamp: dateStr,
            		sign: sign,
            		dineAndDashId: this.dineAndDashId
            	},
            	success: res => {
                    if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading();
                        this.joinedActivityStoreCount = res.data.obj;
                        if (Number(this.form.maxNum) > Number(this.joinedActivityStoreCount)) {
                            this.joinActivityVisible = true;
                        } else {
                            this.$api.msg("报名商家已达到上限，请以后再参加，感谢您的配合！");
                        }
                    } else {
						uni.hideLoading();
					}
					
            	},
            	fail: (e) => {
            		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
            	},
            })
            
        },
        handItem (item) {
            if (Number(item.activityPrice) < Number(this.form.price)) {
                this.$api.msg("参加活动的商品价格不能低于" + this.moneyConverter(this.form.price) + "元,请重新选择！");
                return;
            }
            this.goods.goodsId = item.goodsId
            this.goods.goodsName = item.goodsName;
            this.goods.costPrice = item.costPrice;
            this.goods.activityPrice = item.activityPrice;
            this.goods.modelId = item.modelId;
            this.goods.pictureUrl = item.pictureUrl;
            
            this.chooseGoodsVisible = false
        },
        chooseGoods() {
            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
            	},
            	success: res => {
                    this.goodsList = res.data.list;
					uni.hideLoading();
            	},
            	fail: (e) => {
            		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
            	},
            })
        },
        getData() {
			uni.showLoading({
				title: '加载中'
			});
            var dateStr = (new Date()).getTime();
            var sign = this.getSign('' + this.storeInfo.storeId + dateStr);
            this.requst({
            	url: this.getStoreDineAndDashInfoForStoreUrl,
            	data: {
            		timestamp: dateStr,
            		sign: sign,
            		dineAndDashStoreId: this.dineAndDashId,
                    storeId: this.storeInfo.storeId
            	},
            	success: res => {
                    if (res.data.rtnBean.rtnCode == 0) {
                        this.form = res.data.obj;
                        if (this.form.storeId) {
                            this.doflg = true;
                        }
                        if (!this.doflg && this.form.status == 0) {
                            this.joinBtnVisible = true;
                        } else {
                            this.joinBtnVisible = false;
                        }
                    } else {
                        this.$api.msg(res.data.rtnBean.rtnMsg);
                        uni.navigateBack();
                    }
					uni.hideLoading();
            	},
            	fail: (e) => {
            		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
            	},
            })
        },
        joinActivity() {
            if (!this.goods.goodsId) {
                this.$api.msg("请选择参加活动的商品");
                return;
            }
            
            if (!this.goods.activityNum) {
                this.$api.msg("请输入参加活动的商品数量");
                return;
            }
            if (Number(this.goods.activityPrice * this.goods.activityNum) < Number(this.form.activityPrice)) {
                this.$api.msg("参加活动的商品总价值不能低于" + this.moneyConverter(this.form.activityPrice) + "元,请增加参加活动的商品数量！");
                return;
            }
			uni.showLoading({
				title: '加载中'
			});
            var dateStr = (new Date()).getTime();
            var sign = this.getSign('' + this.storeInfo.storeId + dateStr);
            this.requst({
            	url: this.joinDineAndDashInfoForStoreUrl,
            	data: {
            		timestamp: dateStr,
            		sign: sign,
                    storeId: this.storeInfo.storeId,
                    dineAndDashId: this.dineAndDashId,
                    goodsId: this.goods.goodsId,
                    total: this.goods.activityNum
            	},
            	success: res => {
                    if (res.data.rtnBean.rtnCode == 0) {
                        this.$api.msg("报名成功")
                        this.getData();
                    } else {
                        this.$api.msg(res.data.rtnBean.rtnMsg);
                    }
                    this.joinActivityVisible = false;
					uni.hideLoading();
            	},
            	fail: (e) => {
            		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
            	},
            })
        }
    },
    onLoad (opt) {
        this.dineAndDashId = opt.id;
        this.getData();
    }
}
</script>
<style lang="scss" scoped>
.overlord-meal-detail-page {
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
}
.scroll-content {
    height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
    height: calc(100vh - 120rpx - constant(safe-area-inset-bottom));
}
.banner {
    width: 100vw;
    height: 212rpx;
    margin-bottom: 20rpx;
}
.item {
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    @include flexStart;
    font-size: $font-base;
    .label {
        width: 200rpx;
        color: $desc-color;
    }
    .value {
        width: calc(100% - 200rpx);
    }
}
.cy-goods {
    height: 80rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
    font-size: $font-base;
    background-color: #f5f5f5;
    @include flexStart; 
}
.goods {
    background-color: #fff;
    @include flexStart;
    padding: 20rpx;
    box-sizing: border-box;
    .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; 
    }
}
.sign-up {
    width: 100vw;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    @include flexCenter;
    .btn {
        width: 80vw;
        height: 80rpx;
        border-radius: 40rpx;
        background-color: $theme-color;
        color: #fff;
        @include flexCenter;
        margin: 20rpx 0 calc(20rpx + env(safe-area-inset-bottom));
        margin: 20rpx 0 calc(20rpx + constant(safe-area-inset-bottom));
    }
}
/deep/ .u-modal__content {
    padding: 30rpx!important;
    box-sizing: border-box;
}
.container {
    width: 100%;
    padding: 40rpx 20rpx;
    box-sizing: border-box;
    .item {
        width: 100%;
        height: 80rpx;
        @include between;
        border-bottom: 2rpx solid #f5f5f5;
    }
    .value {
        @include flexEnd;
        flex: 1;
    }
    .text {
        margin-left: 20rpx;
    }
}
.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;
        .goods-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;
            }
        }
    }
}
.footer-btn {
    width: 100vw;
	margin-top: 40rpx;
    @include flexCenter;
    .logout {
        width: 80%;
        height: 80rpx;
        border-radius: 40rpx;
        background-color: $theme-color;
        color: #fff;
        @include flexCenter;
    }
}
</style>