eduepos_ui_store/pages/activity/coupon-item.vue

<template>
    <view class="special-item-page">
        <scroll-view class="list-wrap" scroll-y>
            <view class="item" v-for="item in couponList" :key="item.couponId" @click="handItem(item)">
                <view class="cover">
                    <image class="icon" :src="item.imgUrl"/>
                </view>
                <view class="cont">
                    <view class="row">
                        <view class="name">{{item.couponName}}</view>
                        <view class="date">{{item.startDate|formatDate('MM.dd')}} ~ {{item.endDate|formatDate('MM.dd')}}</view>
                    </view>
                    <view class="row">
                        <view class="desc">
                            {{item.rmk || ''}}
                        </view>
                        <view v-if="item.status==1" class="status">进行中</view>
                        <view v-else class="status-unused">停止</view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="add-coupon-item">
            <view class="add" @click="addSpecialItem">添加优惠券</view>
        </view>
    </view>
</template>
<script>
import {mapState} from 'vuex';
export default {
    data () {
        return {
			getStoreCouponListUrl: '/coupon/getStoreCouponList',
            couponList: []
        }
    },
    computed: {
        ...mapState(['storeInfo'])
    },
    methods: {
        handItem(item) {
            uni.navigateTo({
                url: '/pages/activity/coupon-item-info?id=' + item.couponId
            });
        },
        addSpecialItem () {
			uni.navigateTo({
				url: '/pages/activity/coupon-item-edit'
			});
            
        },
        getStoreCouponList() {
			uni.showLoading({
				title: '加载中'
			});
            var dateStr = (new Date()).getTime();
            var sign = this.getSign('' + this.storeInfo.storeId + dateStr);
            this.requst({
            	url: this.getStoreCouponListUrl,
            	data: {
            		timestamp: dateStr,
            		sign: sign,
            		storeId: this.storeInfo.storeId,
					couponType: 2,
            	},
            	success: res => {
                    this.couponList = res.data.list;
					uni.hideLoading();
            	},
            	fail: (e) => {
            		console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
            	},
            })
        }
    },
    onShow () {
        this.getStoreCouponList();
    }
}
</script>
<style lang="scss" scoped>
.special-item-page {
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
    overflow: hidden;
}
.list-wrap {
    height: calc(100vh - 140rpx - env(safe-area-inset-bottom));
    height: calc(100vh - 140rpx - constant(safe-area-inset-bottom));
    margin-top: 20rpx;
    .item {
        margin-bottom: 20rpx;
        background-color: #fff;
        padding: 40rpx;
        box-sizing: border-box;
        @include flexStart;
    }
    .cover {
        min-width: 60rpx;
        width: 60rpx;
        height: 60rpx;
        margin-right: 40rpx;
        border-radius: 50%;
        overflow: hidden;
        @include flexCenter;
        box-shadow: 0 0 10rpx pink;
    }
    .icon {
        width: 42rpx;
        height: 42rpx;
    }
    .cont {
        width: calc(100% - 100rpx);
        font-size: $font-base;
    }
    .row {
        width: 100%;
        @include between;
        margin-bottom: 10rpx;
    }
    .name {
        color: $text-color;
        width: calc(100% - 240rpx);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
    }
    .date {
        width: 240rpx;
        text-align: right;
    }
    .desc {
        color: $desc-color;
    }
    .status {
        width: 240rpx;
        text-align: right;
        color: $uni-color-button;
    }
    .status-unused {
        width: 240rpx;
        text-align: right;
        color: $theme-color;
    }
}
.add-coupon-item {
    width: 100vw;
    @include flexCenter;
    margin-top: 40rpx;
    .add {
        width: 80vw;
        height: 80rpx;
        border-radius: 40rpx;
        background-color: $theme-color;
        color: #fff;
        @include flexCenter;
    }
}
</style>