eduepos_ui_store/pages/store/distribution.vue

<template>
    <view class="distribution-page">
        <view  class="scroll-content">
            <view class="title">自取设置</view>
            <view class="form-item pb0">
                <view class="label flex-center">是否开启自取</view>
                <view class="value flex-start">
                    <switch :checked="form.pickupStatus" disabled="true" size="22" class="switch" style="transform:scale(0.7)"></switch>
                    <text class="desc">若需修改请联系运营方</text>
                </view>
            </view>
			<view class="form-item pb0">
			    <view class="label flex-center">是否开启堂食</view>
			    <view class="value flex-start">
			        <switch :checked="form.dineStatus" disabled="true" size="22" class="switch" style="transform:scale(0.7)"></switch>
			        <text class="desc">若需修改请联系运营方</text>
			    </view>
			</view>
            <view class="title">外卖设置</view>
            <view class="form-item pb0">
                <view class="label flex-center">是否开启外卖</view>
                <view class="value flex-start">
                    <switch :checked="form.takeoutStatus" disabled="true" @change="changeTakeoutStatus"  size="22" class="switch" style="transform:scale(0.7)"></switch>
					<text class="desc">若需修改请联系运营方</text>
				</view>
            </view>
            <view class="form-item flex-center mr10-0" v-if="form.takeoutStatus == 1">
                <view class="label">配送方式</view>
                <view class="value">
                    <view style="font-size: 26rpx;">
						{{form.deliveryType == 0 ? "自配送" : "平台配送"}}
					</view>
					<!-- <u-radio-group v-model="form.deliveryType" activeColor="#04be02" disabled="true" placement="row">
                        <u-radio label="平台配送" :name="1"></u-radio>
                        <u-radio label="自配送" :name="0"></u-radio>
                    </u-radio-group> -->
                </view>
            </view>
            <view class="form-item flex-center mt10" v-if="form.deliveryType == 0">
                <view class="label">专属配送员</view>
                <view class="value">
                    <view class="btn" @click="handSettingClerk">配置专属配送员</view>
                </view>
            </view>
        </view>
        <!-- <view class="footer-btn">
            <view class="save" @click="handSave">保存</view>
        </view> -->
    </view>
</template>
<script>
import { mapState } from 'vuex';
export default {
    data () {
        return {
			deliveryUrl: '/storeDeliveryManageApi/getDeliveryInfo',
			updateUrl: '/storeDeliveryManageApi/update',
            form: {
                pickupStatus: '',
                takeoutStatus: '',
                deliveryType: 1,
                riderId: '',
                riderName: '',
                telNo: '',
            }
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {

		loadData () {		
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.deliveryUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.form = res.data.obj;
						console.log('this.form :>> ', this.form);
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
		},
        handSettingClerk () {
            uni.navigateTo({
                url: `/pages/store/deliveryman`
            });
        },
        deleteDeliveryman () {
            this.form.deliverymanName = ''
            this.form.deliverymanPhone = ''
            this.form.deliverymanId = ''
        },
		changeTakeoutStatus (e) {
			this.form.takeoutStatus = e.detail.value
		},
        handSave () {
            console.log('save', this.form);
			
			if (this.form.takeoutStatus == null || this.form.takeoutStatus == undefined) {
				uni.showToast({
					title: '请选择是否开启外卖',
					icon: 'none'
				})
				return
			}
			if (this.form.pickupStatus == 0 && this.form.takeoutStatus == 0 ) {
				uni.showToast({
					title: '外卖和自取不可以同时关闭',
					icon: 'none'
				})
				return
			}
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.updateUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					takeoutStatus: this.form.takeoutStatus ? 1 : 0,
					deliveryType: this.form.deliveryType
				},
				success: res => {
					uni.hideLoading();
					if (res.data.rtnBean.rtnCode == 0) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						this.form = {
							pickupStatus: '',
							takeoutStatus: '',
							deliveryType: '',
							riderId: '',
							riderName: '',
							telNo: ''
						}
						this.loadData()
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
        },
		takeawayTimeInput (e,val){
			// 只能输入数字
			const inputType = /[^\d]/g
			this.$nextTick(function () {
				this.form.takeawayTime = e.replace(inputType,'');
			})
		},
		pickupTimeInput (e,val) {
			// 只能输入数字
			const inputType = /[^\d]/g
			this.$nextTick(function () {
				this.form.pickupTime = e.replace(inputType,'');
			})
		}
    },
    onShow () {
    },
    onLoad () {
		this.loadData()
	}
}
</script>
<style lang="scss" scoped>
.distribution-page {
    height: 95vh;
    background-color: #f5f5f5;
}

.scroll-content {
    height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
    height: calc(100vh - 120rpx - constant(safe-area-inset-bottom));
}
.title {
    font-size: 36rpx;
    color: $title-color;
    margin: 24rpx 0 16rpx;
    padding: 0 20rpx;
}
.form-item {
    background-color: #fff;
    @include flexStart(flex-start);
    padding: 20rpx 60rpx;
    box-sizing: border-box;
    .label {
        margin-right: 20rpx;
        margin-top: 20rpx;
        font-size: $font-base;
        color: $text-color;
        width: 180rpx;
    }
    .label.flex-center {
        margin-top: 6rpx;
    }
    .desc {
        font-size: $font-sm;
        color: $uni-color-button;
    }
    .flex-start {
        @include flexStart;
        .desc {
            margin-left: 20rpx;
            color: $text-color;
        }
    }
}
.form-item.pb0 {
    padding-bottom: 0;
}
.form-item.flex-center {
    @include flexStart(center);
    .label {
        margin-top: 0;
    }
    .btn {
        font-size: $font-base;
        color: #fff;
        background-color: $theme-color;
        @include flexCenter;
        padding: 6rpx 20rpx;
        border-radius: 10rpx;
    }
    .deliveryman {
        height: 52rpx;
        @include flexStart;
        font-size: $font-base;
        color: $text-color;
    }
    .del {
        color: $uni-color-button;
        margin-left: 20rpx;
    }
}
/deep/ .u-radio {
    margin-right: 50rpx;
}
.footer-btn {
    width: 100vw;
    margin-top: 40rpx;
    .save {
        margin: 0 10vw;
        width: 80vw;
        height: 80rpx;
        border-radius: 40rpx;
        background-color: $theme-color;
        color: #fff;
        @include flexCenter;
    }
}
</style>