diancan_uni/pages/shopRole/businesstime/list/index.vue

<template>
    <!-- index.wxml -->
    <view class="wrap">
        <view class="wrap_nr">
            <view class="time_list">
                <view class="time_item" v-for="(item, index) in dataList" :key="index">
                    <view class="item_t">
                        <view class="col_text">开始时间：{{ item.begin_at }}</view>
                        <view class="col_text">结束时间：{{ item.end_at }}</view>
                        <view class="col_text">可用状态：{{ item.status ? '可用' : '禁用' }}</view>
                    </view>

                    <view class="item_b">
                        <view class="ac_btn" @tap="toAddDetail" :data-id="item.id">编辑</view>
                        <view class="ac_btn del" @tap="toDelItem" :data-id="item.id">删除</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="actions_wrap">
            <view class="btn" @tap="toAddDetail">添加</view>
        </view>
    </view>
    <!-- loading -->
    <!-- <van-overlay show="{{ loading }}" z-index="100">
	<van-loading custom-class="custom_loading" />
</van-overlay> -->
</template>

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

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

export default {
    data() {
        return {
            dataList: []
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this;
    },
    onShow: function () {
        // Do something when page show.
        let that = this;
        that.getBusinessTime();
    },
    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.
    },
    onShareAppMessage: function () {
        // return custom share data when user share.
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 列表
        getBusinessTime() {
            let that = this;
            myPro
                .wxRequest('store/businessHours/list', 'GET', {})
                .then((res) => {
                    that.setData({
                        dataList: res.result
                    });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 添加
        toAddDetail(event) {
            let that = this;
            let id = event.currentTarget.dataset.id;
            let url = id ? '/pages/shopRole/businesstime/detail/index?id=' + id : '/pages/shopRole/businesstime/detail/index';
            uni.navigateTo({
                url: url
            });
        },

        // 删除
        toDelItem(event) {
            let that = this;
            let id = event.currentTarget.dataset.id;
            let params = {
                id: id
            };
            myPro
                .wxRequest('store/businessHours/remove', 'POST', params)
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    that.getBusinessTime();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    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); */
    margin: 0 auto;
}
.time_item {
    margin-top: 30rpx;
    font-size: 30rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(0, 0, 0, 0.09);
    border-radius: 10rpx;
    padding: 20rpx 30rpx;
}
.time_item .item_t {
    padding-bottom: 20rpx;
}
.time_item .item_b {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 20rpx;
}
.time_item .ac_btn {
    width: 100rpx;
    height: 40rpx;
    background: #49c265;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20rpx;
    color: #ffffff;
}
.time_item .ac_btn:not(:first-child) {
    margin-left: 10rpx;
}
.time_item .ac_btn.del {
    background: #d54c43;
}
.actions_wrap {
    margin-top: 40rpx;
}
.actions_wrap .btn {
    width: 320rpx;
    height: 80rpx;
    margin: 0 auto;
    color: #fff;
    background: #295c56;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
}
</style>