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

<template>
    <view>
        <!-- index.wxml -->
        <view class="wrap">
            <view class="form_wrap">
                <view class="form_item">
                    <view class="item_l">开始时间</view>
                    <view class="item_r">
                        <van-field :value="begin_at" readonly placeholder="请选择开始时间" :border="false" @tap.native="beginTimeFun" />
                    </view>
                </view>
                <view class="form_item">
                    <view class="item_l">结束时间</view>
                    <view class="item_r">
                        <van-field :value="end_at" readonly placeholder="请选择结束时间" :border="false" @tap.native="endTimeFun" />
                    </view>
                </view>
                <view class="form_item">
                    <view class="item_l">可用状态</view>
                    <view class="item_r">
                        <van-switch :checked="status" size="40rpx" :active-value="1" :inactive-value="0" active-color="#295C56" inactive-color="#cccccc" @change="onChangeStatus" />
                    </view>
                </view>
            </view>
            <view class="btn_wrap">
                <view class="btn" @tap="bindTijiao">提交</view>
            </view>
        </view>
        <!-- 开店时间 -->
        <van-popup :show="showBegin" position="bottom" @close="closeBeginTimePop">
            <van-datetime-picker type="time" title="选择开店时间" :value="currentBegin" @confirm="confirmBeginTime" @cancel="closeBeginTimePop" />
        </van-popup>
        <!-- 闭店时间 -->
        <van-popup :show="showEnd" position="bottom" @close="closeEndTimePop">
            <van-datetime-picker type="time" title="选择闭店时间" :value="currentEnd" @confirm="confirmEndTime" @cancel="closeEndTimePop" />
        </van-popup>
        <!-- loading -->
        <!-- <van-overlay show="{{ loading }}" z-index="100">
	<van-loading custom-class="custom_loading" />
</van-overlay> -->
    </view>
</template>

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

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

export default {
    data() {
        return {
            begin_at: null,
            end_at: null,
            status: 1,
            // 1正常 0禁用
            showBegin: false,
            showEnd: false,
            currentBegin: null,
            currentEnd: null,
            id: null
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this;

        if (options.id) {
            that.getDetail(options.id);
            that.setData({
                id: options.id
            });
        }
    },
    onShow: function () {
        // Do something when page show.
        let that = this;
    },
    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: {
        // 详情
        getDetail(id) {
            let that = this;
            let params = {
                id: id
            };
            myPro
                .wxRequest('store/businessHours/detail', 'GET', params)
                .then((res) => {
                    that.setData({
                        begin_at: res.result.begin_at,
                        end_at: res.result.end_at,
                        status: res.result.status,
                        currentBegin: res.result.begin_at,
                        currentEnd: res.result.end_at
                    });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 开店时间
        beginTimeFun() {
            let that = this;
            that.setData({
                showBegin: true
            });
        },

        confirmBeginTime(event) {
            // console.log('开始时间',event)
            let that = this;
            that.setData({
                begin_at: 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;
            that.setData({
                end_at: event.detail,
                showEnd: false
            });
        },

        closeEndTimePop() {
            let that = this;
            that.setData({
                showEnd: false
            });
        },

        // 状态
        onChangeStatus(event) {
            let that = this;
            that.setData({
                status: event.detail
            });
        },

        // 提交
        bindTijiao() {
            let that = this;

            if (!that.begin_at || !that.end_at) {
                uni.showToast({
                    title: '请检查信息是否完整',
                    icon: 'none'
                });
                return;
            } else {
                let params = {
                    begin_at: that.begin_at,
                    end_at: that.end_at,
                    status: that.status
                }; // 编辑

                if (that.id) {
                    params.id = that.id;
                    myPro
                        .wxRequest('store/businessHours/edit', 'POST', params)
                        .then((res) => {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            });
                            uni.navigateBack();
                        })
                        .catch((err) => {
                            console.log('报错信息', err);
                            uni.showToast({
                                title: err,
                                icon: 'none'
                            });
                        });
                } else {
                    // 新增
                    myPro
                        .wxRequest('store/businessHours/create', 'POST', params)
                        .then((res) => {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            });
                            uni.navigateBack();
                        })
                        .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;
}
.form_wrap {
    padding: 0 30rpx;
}
.form_item {
    font-size: 28rpx;
    color: #333333;
    min-height: 98rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
.form_item .item_l {
    width: 150rpx;
}
.form_item .item_r {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.form_item van-field {
    width: 100%;
}
.form_item .van-cell {
    padding: 0 !important;
}
.btn_wrap {
    margin-top: 30rpx;
}
.btn_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>