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

<template>
    <view class="special-item-info-page">
        <scroll-view scroll-y class="scroll-content">
            <view class="item">
                <view class="label">活动状态</view>
                <view class="value between">
                    <view class="curr-status" :class="{ ing: form.status == 1 }">{{ form.status == 1 ? '进行中' : '停止' }}</view>
                    <view class="update-status" @click="handUpdateStatus">修改状态</view>
                </view>
            </view>
            <view class="item">
                <view class="label">活动主题</view>
                <view class="value">
                    {{form.activityName}}
                </view>
            </view>
            <view class="item">
                <view class="label">活动描述</view>
                <view class="value">
                    {{form.activityComment}}
                </view>
            </view>
            <view class="item">
                <view class="label">活动时间</view>
                <view class="value">
                    {{form.startDate}} ~ {{form.endDate}}
                </view>
            </view>
            <view class="goods-wrap">
                <view class="title">参与的商品(不支持多规格商品)</view>
                <view class="goods" v-for="item in goodsList" :key="item.storeSpecialGoodsId">
                    <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">
                            每单限购{{item.maxNum}}份，活动库存{{item.activityNum}}份
							<br>
							剩余库存{{item.inventory || 0}}份
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        
        <view class="update-events">
            <view class="btn" @click="deleteActivity">删除</view>
            <view class="btn" @click="updateSpecialItem">调整活动内容</view>
        </view>

        <u-modal
            :show="updateStatusVisible"
            title="注意"
            closeOnClickOverlay
            showCancelButton
            @confirm="updateStatus"
            @close="updateStatusVisible = false"
            @cancel="updateStatusVisible = false">
            <view class="container">
                活动中的商品如果参加首页推荐，活动状态改变后将会在首页、店铺同步下架，您是否确定改变？
            </view>
        </u-modal>
    </view>
</template>
<script>
import {mapState} from 'vuex';
export default {
    data () {
        return {
            getStoreSpecialActivityByIdUrl: '/storeSpecialActivityApi/getStoreSpecialActivityByIdForStore',
            updateStoreSpecialActivityStatusUrl: '/storeSpecialActivityApi/updateStoreSpecialActivityStatusForStore',
            deleteStoreSpecialActivityUrl: '/storeSpecialActivityApi/deleteStoreSpecialActivityForStore',
            updateStatusVisible: false,
            form: {
                storeSpecialActivityId: '',
                activityName: '',
                activityComment: '',
                startDate: '',
                endDate: '',
                status: ''
            },
            goodsList: []
        }
    },
    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();
            	},
            })
        },
        deleteActivity() {
            if (this.form.status == 1) {
                this.$api.msg("进行中的活动不能删除，请先停止活动后再进行删除");
                return;
            }
            let that = this;
            uni.showModal({
            	title: '提示',
            	content: '确定删除这个特价菜活动吗？',
            	success: function(res) {
            		if (res.confirm) {
						uni.showLoading({
							title: '删除中'
						});
            			var dateStr = (new Date()).getTime();
            			var sign = that.getSign('' + that.storeInfo.storeId + dateStr);
            			that.requst({
            				url: that.deleteStoreSpecialActivityUrl,
            				data: {
            					timestamp: dateStr,
            					sign: sign,
            					storeId: that.storeInfo.storeId,
            			        id: that.form.storeSpecialActivityId
            				},
            				success: res => {
            			        if (res.data.rtnBean.rtnCode == 0) {
            			            uni.showToast({
            			            	title: "删除成功",
            			            	duration: 3000,
            			            	icon: 'none',
            			            });
            			            // uni.redirectTo({
            			            //     url: '/pages/activity/special-item'
            			            // })
                                    let pages = getCurrentPages();
                                    let prevpage = pages[pages.length - 2];
                                    prevpage.$vm.getStoreSpecialActivityList();
                                    uni.navigateBack();
            			        } else {
            			            that.$api.msg(res.data.rtnBean.rtnMsg);
            			        }
								uni.hideLoading();
            				},
            				fail: (e) => {
            					console.log("接口调用失败:" + JSON.stringify(e));
								uni.hideLoading();
            				},
            			})
            		}
            	}
            });
        },
        handUpdateStatus() {
            if (this.form.status == 1) {
                this.updateStatusVisible = true
                return;
            }
            this.updateStatus();
        },
        updateStatus () {
			uni.showLoading({
				title: '更新中'
			});
            this.updateStatusVisible = false;
            var dateStr = (new Date()).getTime();
            var sign = this.getSign('' + this.storeInfo.storeId + dateStr);
            this.requst({
            	url: this.updateStoreSpecialActivityStatusUrl,
            	data: {
            		timestamp: dateStr,
            		sign: sign,
            		storeId: this.storeInfo.storeId,
                    id: this.form.storeSpecialActivityId,
                    status: this.form.status == 1 ? 0 : 1
            	},
            	success: res => {
                    if (res.data.rtnBean.rtnCode == 0) {
                        this.$api.msg("更新成功");
                    } else {
                        this.$api.msg(res.data.rtnBean.rtnMsg);
                    }
                    this.loadData();
					uni.hideLoading();
            	},
            	fail: (e) => {
            		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
            	},
            })
        },
        updateSpecialItem () {
            if (this.form.status == 1) {
                this.$api.msg("进行中的活动不能编辑，请先停止活动后再进行编辑");
                return;
            }
            uni.navigateTo({
                url: `/pages/activity/special-item-edit?id=${this.form.storeSpecialActivityId}`
            });
        }
    },
    onLoad (options) {
        if (options && options.id) {
        	this.form.storeSpecialActivityId = options.id;
        	this.loadData();
        }
        
    }
}
</script>
<style lang="scss" scoped>
.special-item-info-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));
}
.item:first-child {
    padding-top: 40rpx;
}
.item {
    @include flexStart;
    background-color: #fff;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    font-size: $font-base;
    .label {
        width: 240rpx;
        color: $desc-color;
    }
    .value {
        width: calc(100% - 240rpx);
        @include between;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // word-break: break-all;
        // white-space: nowrap;
    }
    .left {
        @include flexStart;
    }
    .curr-status {
        color: $theme-color;
    }
    .curr-status.ing {
        color: $uni-color-button;
    }
    .update-status {
        height: 54rpx;
        width: 160rpx;
        background-color: $theme-color;
        color: #fff;
        @include flexCenter;
        border-radius: 27rpx;
    }
}
.goods-wrap {
    .title {
        height: 80rpx;
        @include flexStart;
        padding-left: 40rpx;
        box-sizing: border-box;
        font-size: $font-base;
        color: $text-color;
    }
}
.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;
        text-decoration:line-through;
    }
    .desc {
        color: $desc-color; 
    }
}
.container {
    font-size: $font-base;
}
.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;
        margin-left: 20rpx;
        margin-right: 20rpx;
    }
}
</style>