diancan_uni/pages/shopRole/usedcoupons/index.vue

<template>
    <view>
        <!-- index.wxml -->
        <view class="wrap">
            <view class="item">
                <view class="item_r flex">
                    <view class="time" @tap="beginTimeFun">{{ begin_at }}</view>
                    <view class="line"></view>
                    <view class="time" @tap="endTimeFun">{{ end_at }}</view>
                </view>
                <view class="item_search" @tap="bindSearch">查询</view>
            </view>
            <view class="item flex-start">优惠券总数量：{{ couponsNum }}</view>
            <view class="item flex-start">优惠券总金额：{{ couponsTotalPrice }}</view>
        </view>
        <!-- loading -->
        <van-overlay :show="loading" :z-index="100">
            <van-loading custom-class="custom_loading" />
        </van-overlay>
        <!-- 开始时间 -->
        <van-popup :show="showBegin" position="bottom">
            <van-datetime-picker type="date" title="选择开始时间" :value="currentBegin" @confirm="confirmBeginTime" @cancel="closeBeginTimePop" />
        </van-popup>
        <!-- 选择结束时间 -->
        <van-popup :show="showEnd" position="bottom">
            <van-datetime-picker type="date" title="选择结束时间" :value="currentEnd" @confirm="confirmEndTime" @cancel="closeEndTimePop" />
        </van-popup>
    </view>
</template>

<script>
// index.js
let myPro = require('../../../utils/wxRequest.js');

let util = require('../../../utils/util.js');

export default {
    data() {
        return {
            begin_at: '',
            end_at: '',
            showBegin: false,
            showEnd: false,
            currentBegin: new Date().getTime(),
            currentEnd: new Date().getTime(),
            couponsNum: 0,
            couponsTotalPrice: 0,
            loading: false // 全局loading
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
    },
    onShow: function () {
        // Do something when page show.
        let that = this;
        that.setData({
            begin_at: util.formatTime(new Date(), 1),
            end_at: util.formatTime(new Date(), 1)
        });
        that.bindSearch();
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {
        // Do something when pull down.
    },
    onReachBottom: function () {
        // Do something when page reach bottom.
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 开始时间
        beginTimeFun() {
            let that = this;
            that.setData({
                showBegin: true
            });
        },

        // 选择开始时间
        confirmBeginTime(event) {
            console.log('开始时间', event);
            let that = this;
            let selectTime = new Date(event.detail);
            let begin_at = util.formatTime(selectTime, 1);
            that.setData({
                begin_at: begin_at,
                currentBegin: event.detail,
                showBegin: false
            });
        },

        // 关闭开始时间
        closeBeginTimePop() {
            let that = this;
            that.setData({
                showBegin: false
            });
        },

        // 结束时间
        endTimeFun() {
            let that = this;
            that.setData({
                showEnd: true
            });
        },

        // 确认结束时间
        confirmEndTime(event) {
            // console.log('结束时间',event)
            let that = this;
            let selectTime = new Date(event.detail);
            let end_at = util.formatTime(selectTime, 1); // 检查结束时间

            if (event.detail < that.currentBegin) {
                uni.showToast({
                    title: '结束时间不可小于开始时间',
                    icon: 'none'
                });
                return;
            }

            that.setData({
                end_at: end_at,
                currentEnd: event.detail,
                showEnd: false
            });
        },

        // 关闭结束时间
        closeEndTimePop() {
            let that = this;
            that.setData({
                showEnd: false
            });
        },

        // 查询
        bindSearch() {
            let that = this;

            if (!that.begin_at) {
                uni.showToast({
                    title: '请选择开始时间',
                    icon: 'none'
                });
                return;
            }

            if (!that.end_at) {
                uni.showToast({
                    title: '请选择结束时间',
                    icon: 'none'
                });
                return;
            }

            if (that.currentEnd < that.currentBegin) {
                uni.showToast({
                    title: '结束时间不可小于开始时间',
                    icon: 'none'
                });
                return;
            }

            that.setData({
                loading: true
            }); // 开始时间和结束时间比较

            let params = {
                begin_at: that.begin_at,
                end_at: that.end_at
            };
            myPro
                .wxRequest('store/tx/coupon', 'GET', params)
                .then((res) => {
                    that.setData({
                        loading: false,
                        couponsNum: res.result.couponCount ? res.result.couponCount : 0,
                        couponsTotalPrice: res.result.coupon_price_count ? res.result.coupon_price_count : 0
                    });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    that.setData({
                        loading: false
                    });
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap {
    width: 690rpx;
    /* background:rgba(255,255,255,1);
	box-shadow:0rpx 0rpx 21rpx 0rpx rgba(0, 0, 0, 0.09); */
    border-radius: 10rpx;
    margin: 0 auto;
}
.item {
    width: 690rpx;
    /* height:100rpx; */
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    position: relative;
}
.item .item_l {
    padding-right: 20rpx;
    display: flex;
}
.item .title {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.87);
}
.item .item_r {
    padding-right: 20rpx;
}
.item .item_r.flex {
    display: flex;
    align-items: center;
}
.time {
    width: 240rpx;
    height: 50rpx;
    background: rgba(255, 255, 255, 1);
    border: 1rpx solid rgba(0, 0, 0, 0.12);
    border-radius: 10rpx;
    text-align: center;
    color: rgba(89, 89, 89, 1);
}
.line {
    width: 18rpx;
    height: 2rpx;
    background: rgba(0, 0, 0, 0.12);
    margin: 0 12rpx;
}
/* 查询 */
.item_search {
    width: 100rpx;
    height: 50rpx;
    margin-left: 20rpx;
    background: #d54c43;
    border-radius: 45rpx;
    font-size: 24rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>