eduepos_ui_store/pages/activity/overlord-meal.vue

<template>
    <view class="coupon-page">
        <u-sticky bgColor="#fff" class="tabs-wrap">
            <u-tabs class="tabs" :list="tabs" :itemStyle="itemStyle" :is-scroll="false" :current="active" :activeStyle="{ color: '#1A78F6' }" @change="handTabchange">
            </u-tabs>
        </u-sticky>
        <view class="list-wrap">
            <view class="item" v-for="item in lists" :key="item.dineAndDashId" @click="activityInfo(item)">
                <view class="icon">
                    <image class="img" src="../../static/imgs/mine/tjc.png"/>
                </view>
                <view class="cont">
                    <view class="row">
                        <view class="name">{{item.title}}</view>
                        <view class="date">{{item.startDate|formatDate('MM.dd')}} - {{item.endDate|formatDate('MM.dd')}}</view>
                        <view class="status-doing" v-if="item.status == 1">进行中{{item.join == 1 ? '(已参加)' : '(未参加)'}}</view>
                        <view v-else-if="item.status==-1">已失效{{item.join == 1 ? '(已参加)' : '(未参加)'}}</view>
                        <view class="status-nostart" v-else>未开始{{item.join == 1 ? '(已参加)' : '(未参加)'}}</view>
                    </view>
                    <view class="row desc-row">
                        <view class="desc-title">活动描述</view>
                        <view class="desc-text">最低总价{{moneyConverter(item.activityPrice)}}/最低单价{{moneyConverter(item.price)}}/活动达标金额{{moneyConverter(item.reachPrice)}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import {mapState} from 'vuex';
export default {
    data () {
        return {
            getDineAndDashListForStoreUrl: '/dineAndDashActivityApi/getDineAndDashListForStore',
            modalTitle: '活动名称',
            active: 0,
            itemStyle: {
                width: '50vw',
                height: '80rpx'
            },
            tabs: [
                {
                    name: '进行中'
                },
                {
                    name: '已失效'
                }
            ],
            lists: []
        }
    },
	computed: {
	    ...mapState(['storeInfo'])
	},
    methods: {
        handTabchange(e) {
            this.active = e.index;
            this.getDataList();
        },
        getDataList() {
			uni.showLoading({
				title: '加载中'
			});
            var dateStr = (new Date()).getTime();
            var sign = this.getSign('' + this.active + dateStr);
            this.requst({
            	url: this.getDineAndDashListForStoreUrl,
            	data: {
            		timestamp: dateStr,
            		sign: sign,
            		type: this.active,
					storeId: this.storeInfo.storeId
            	},
            	success: res => {
                    this.lists = res.data.list;
					uni.hideLoading();
            	},
            	fail: (e) => {
            		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
            	},
            })
        },
        activityInfo(item) {
            uni.navigateTo({
                url: `/pages/activity/overlord-meal-detail?id=${item.dineAndDashId || ''}`
            })
        }
    },
    onLoad () {
        this.getDataList();
    }
}
</script>
<style lang="scss" scoped>
.coupon-page {
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
    border-top: 2rpx solid #f5f5f5;
}
.status-doing {
    color: red;
}
.status-nostart {
    color: #1A78F6;
}
.list-wrap {
    height: calc(100vh - 80rpx - 20rpx);
    overflow-y: auto;
    margin-top: 18rpx;
    .item {
        @include flexStart;
        padding: 40rpx 20rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        background-color: #fff;
        font-size: $font-base;
    }
    .icon {
        min-width: 52rpx;
        width: 52rpx;
        height: 52rpx;
        margin-right: 40rpx;
        .img {
            width: 52rpx;
            height: 52rpx;
        }
    }
    .cont {
        width: calc(100% - 92rpx);
    }
    .row {
        @include between;
    }
    .desc-row {
        @include between(flex-start);
        margin-top: 20rpx;
        color: $desc-color;
    }
    .desc-title {
        width: 180rpx;
    }
    .btn {
        padding: 6rpx 20rpx;
        background-color: $theme-color;
        color: #fff;
        border-radius: 10rpx;
    }
}
/deep/ .u-modal__content {
    padding: 20rpx !important;
}
.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 {
    padding: 20rpx 40rpx 0;
    box-sizing: border-box;
    .title {
        height: 60rpx;
        @include flexCenter;
    }
    .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>