football/pages/app_admin/setting/setting.vue

<template>
	<app-layout>
		<view class="setting">
			<image class="set-image" src="../image/set-bg.png"></image>
			<view class="head">
				<image class="logo" :src="detail.setting.logo ? detail.setting.logo : '../image/logo.png'" @click="setLogo"></image>
				<view class="name">
					<view @click="() => {model = true;modelType = 0;name = detail.name}">
						<view class="name-text dir-left-wrap main-center cross-center">
							<view>{{detail.name}}</view>
							<image src="../image/edit.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="switch dir-top-nowrap" >
				<view class="switch-item dir-left-nowrap cross-center" v-if="sms">
					<image src="../image/msg.png"></image>
					<view class="border dir-left-nowrap main-between" @click="setSmsStatus">
						<view class="app-text">短信通知</view>
						<view  class=" cross-center">
							<view class="switch-view"  :class="{'app-switch-view':sms.status == 1 }">
								<view class="click" :class="{'app-switch': sms.status == 1 }"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="switch-item dir-left-nowrap cross-center"  v-if="mail">
					<image src="../image/mail.png"></image>
					<view class="dir-left-nowrap main-between" @click="setMailStatus">
						<view class="app-text">邮件通知</view>
						<view class="cross-center" >
							<view class="switch-view"  :class="{'app-switch-view':mail.status == 1 }">
								<view class="click" :class="{'app-switch':mail.status == 1 }"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="switch-time dir-top-nowrap">
				<view class="switch-time-item  dir-left-nowrap cross-center">
					<image src="../image/delete-time.png"></image>
					<view class="switch-time-content dir-left-nowrap main-between border" @click="() => {model = true;modelType = 1;over_time = detail.setting.over_time}">
						<view class="app-text-switch app-text">删除未支付订单限时</view>
						<view class="app-icon-text dir-left-nowrap cross-center" >
							<view>{{detail.setting.over_time}}分</view>
							<image class="app-icon" src="../image/arrow-right.png"></image>
						</view>
					</view>
				</view>
				<view class="switch-time-item  dir-left-nowrap cross-center">
					<image src="../image/auto.png"></image>
					<view class="switch-time-content dir-left-nowrap main-between border"  @click="() => {model = true;modelType = 2;delivery_time = detail.setting.delivery_time}">
						<view class="app-text-switch app-text">自动确认收货时间</view>
						<view class="app-icon-text dir-left-nowrap cross-center">
							<view>{{detail.setting.delivery_time}}天</view>
							<image class="app-icon" src="../image/arrow-right.png"></image>
						</view>
					</view>
				</view>
				<view class="switch-time-item dir-left-nowrap cross-center">
					<image src="../image/refund.png"></image>
					<view class="switch-time-content dir-left-nowrap main-between" @click="() => {model = true;modelType = 3;after_sale_time = detail.setting.after_sale_time}">
						<view class="app-text-switch app-text">可申请售后时间</view>
						<view class="app-icon-text dir-left-nowrap cross-center" >
							<view>{{detail.setting.after_sale_time}}天</view>
							<image class="app-icon" src="../image/arrow-right.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="online-payment">
				<view @click="() => {model = true;modelType = 4;payment_type = detail.setting.payment_type}">
					<view class="online-payment-content dir-left-nowrap cross-center">
						<image class="app-image" src="../image/pay.png"></image>
						<view class="dir-top-nowrap">
							<view class="payment-text">支付方式</view>
							<view class="payment-method-text">线上支付/货到付款/余额支付</view>
						</view>
						<image class="app-icon" src="../image/arrow-right.png"></image>
					</view>
				</view>
			</view>
			<view class="shipping-return">
				<view class="shipping-return-item dir-left-nowrap cross-center" >
					<image class="item-image" src="../image/send.png"></image>
					<view class="item-view dir-left-nowrap border main-between" @click="sendTypeHandler">
						<view class="app-text">发货方式</view>
						<view class="right dir-left-nowrap cross-center">
							<view>{{detail.setting.send_type.length > 0 ? '已选择': '未选择'}}</view>
							<image src="../image/arrow-right.png"></image>
						</view>
					</view>
				</view>
				<view class="shipping-return-item dir-left-nowrap cross-center">
					<image class="item-image" src="../image/address.png"></image>
					<view class="item-view dir-left-nowrap main-between" @click="jumpGo">
						<view class="app-text">退货地址</view>
						<view class="right dir-left-nowrap cross-center">
							<view>已填写</view>
							<image src="../image/arrow-right.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="integral">
				<view class="integral-item dir-left-nowrap cross-center">
					<image src="../image/intergral.png"></image>
					<view class="text-content dir-left-nowrap main-between" @click="model = true;modelType = 6;member_integral = detail.setting.member_integral">
						<view class="app-text">积分抵扣</view>
						<view class="right dir-left-nowrap cross-center">
							<view>{{detail.setting.member_integral}}积分抵扣1元</view>
							<image src="../image/arrow-right.png"></image>
						</view>
					</view>
				</view>
				<view class="integral-item dir-left-nowrap cross-center">
					<image src="../image/rule.png"></image>
					<view class="text-content dir-left-nowrap main-between" @click="model = true;modelType = 7;member_integral_rule = detail.setting.member_integral_rule">
						<view class="app-text">积分使用规则</view>
						<view class="right dir-left-nowrap cross-center">
							<view>{{detail.setting.member_integral_rule.length > 0 ? '已填写' : '未填写'}}</view>
							<image src="../image/arrow-right.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
        <view :class="['bottom-place', `${iphone_x? 'iphone_x':''}`]"></view>
        <view :class="['main-between','bottom-tab',`${iphone_x? 'iphone_x':''}`]">
            <view class="box-grow-1 tab-item" @click="toRedirect('/pages/app_admin/index/index')">
                <image class="tab-icon" src="./../image/index.png"></image>
                <view>首页</view>
            </view>
            <view class="box-grow-1 tab-item" @click="toRedirect('/pages/app_admin/order/order')">
                <image class="tab-icon" src="./../image/order.png"></image>
                <view>订单</view>
            </view>
            <view class="box-grow-1 tab-item" @click="toRedirect('/pages/app_admin/goods/goods')">
                <image class="tab-icon" src="./../image/goods.png"></image>
                <view>商品</view>
            </view>
            <view class="box-grow-1 tab-item active">
                <image class="tab-icon" src="./../image/setting-active.png"></image>
                <view>设置</view>
            </view>
        </view>
		<view @touchmove.stop.prevent="" class="model" v-if="model">
			<view class="content">
				<view class="title">{{modelType === 0 ? '修改商城名称' : modelType === 1 ? '删除未支付订单限时':  modelType === 2 ? '自动确认收货时间':  modelType === 3 ? '可申请售后天数':  modelType === 4 ? '支付方式': modelType === 5 ? '发货方式': modelType === 6 ? '积分抵扣':modelType === 7 ? '积分使用规则': ''}}</view>
				<view class="content-text">
					<template v-if="modelType === 0">
						<input placeholder="最多输入15个字符" type="text" class="name" maxlength="15" v-model="name">
					</template>
					<template v-if="modelType === 1">
						<view class="dir-left-nowrap main-center intergral-change">
							<view class="intergral-input">
								<input type="text" class="input" v-model="over_time">
							</view>
							<view>分钟</view>
						</view>
					</template>
					<template v-if="modelType === 2">
						<view class="dir-left-nowrap  main-center intergral-change">
							<view class="intergral-input">
								<input type="text" class="input"  v-model="delivery_time">
							</view>
							<view>天</view>
						</view>
					</template>
					<template v-if="modelType === 3">
						<view class="dir-left-nowrap main-center intergral-change">
							<view class="intergral-input">
								<input type="text" class="input"  v-model="after_sale_time">
							</view>
							<view>天</view>
						</view>
					</template>
					<template v-if="modelType === 4">
						<view class="dir-top dir-top-nowrap main-center pay-change">
							<view class="pay-view" :class="{'app-active': online_pay}" @click="setPay('online_pay')">
								<view class="left  dir-left-nowrap cross-center main-between" >
									<view class="dir-left-nowrap cross-center">
										<image src="../image/online-payment.png"></image>
										<view>线上支付</view>
									</view>
									<image v-if="online_pay"  class="active" src="../image/check.png"></image>
								</view>
							</view>
							<view class="pay-view" :class="{'app-active': balance}" @click="setPay('balance')">
								<view class="left dir-left-nowrap  cross-center main-between" >
									<view class="dir-left-nowrap cross-center">
										<image src="../image/balance.png"></image>
										<view>余额支付</view>
									</view>
									<image v-if="balance"  class="active" src="../image/check.png"></image>
								</view>
							</view>
							<view class="pay-view" :class="{'app-active': huodao}" @click="setPay('huodao')">
								<view class="left dir-left-nowrap cross-center main-between">
									<view class="dir-left-nowrap cross-center">
										<image src="../image/cash-on-delivery.png"></image>
										<view>货到付款</view>
									</view>
									<image v-if="huodao" class="active" src="../image/check.png"></image>
								</view>
							</view>
						</view>
					</template>
					<template v-if="modelType === 5">
						<view class="dir-top dir-top-nowrap main-center pay-change">
							<view class="pay-view" :class="{'app-active': express}" @click="setSend('express')">
								<view class="left  dir-left-nowrap cross-center main-between" >
									<view class="dir-left-nowrap cross-center">
										<image src="../image/express-delivery.png"></image>
										<view>快递配送</view>
									</view>
									<image v-if="express"  class="active" src="../image/check.png"></image>
								</view>
							</view>
							<view class="pay-view" :class="{'app-active': offline}" @click="setSend('offline')">
								<view class="left dir-left-nowrap  cross-center main-between" >
									<view class="dir-left-nowrap cross-center">
										<image src="../image/self-lifting.png"></image>
										<view>到店自提</view>
									</view>
									<image v-if="offline"  class="active" src="../image/check.png"></image>
								</view>
							</view>
							<view class="pay-view" :class="{'app-active': city}" @click="setSend('city')">
								<view class="left dir-left-nowrap cross-center main-between">
									<view class="dir-left-nowrap cross-center">
										<image src="../image/same-city.png"></image>
										<view>同城配送</view>
									</view>
									<image v-if="city" class="active" src="../image/check.png"></image>
								</view>
							</view>
						</view>
					</template>
					<template v-if="modelType === 6">
						<view class="i-modal-body free">
							<view class="main-center intergral-change">
								<input type="number" class="intergral-input" v-model="member_integral">
								<view >积分抵扣1元</view>
							</view>
						</view>
					</template>
					<template v-if="modelType === 7">
						<view class="main-center cross-center textarea-area">
							<textarea class="textarea" v-model="member_integral_rule"></textarea>
						</view>
					</template>
				</view>
				<view class="buttons dir-left-nowrap cross-center">
					<view class="but cancel">
						<view @click="() => {cancel();}">取消</view>
					</view>
					<view class="line"></view>
					<view class="but confirm">
						<view @click="confirm">确认</view>
					</view>
				</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appSwitch from '../../../components/basic-component/app-switch/app-switch.vue';
	
    export default {
        name: "setting",
	    data() {
            return {
                detail: {},
                mail: {},
                sms: {},
	            model: false,
	            modelType: 0,
	            name: '',
                over_time: '',
                delivery_time: '',
                after_sale_time: '',
                payment_type: [],
                online_pay: false,
                balance: false,
                huodao: false,
                send_type: [],
                express: false,
                offline: false,
                city: false,
                member_integral: '',
                member_integral_rule: '',
                iphone_x: false
            }
	    },
	    onLoad() {
	    	let that = this;
            uni.getSystemInfo({
                success: function (res) {
                    if(res.model.indexOf('iPhone X') > -1 || res.model.indexOf('iPhone 11') > -1 || res.model.indexOf('iPhone11') > -1 || res.model.indexOf('iPhone12') > -1 || res.model.indexOf('Unknown Device') > -1) {
                        that.iphone_x = true;
                    }
                }
            });
            this.$request({
	            url: this.$api.app_admin.setting
            }).then(response => {
                if (response.code === 0) {
                    this.detail = response.data.detail;
                    let { over_time, delivery_time, after_sale_time, payment_type, member_integral,member_integral_rule }  = this.detail.setting;
                    this.over_time = over_time;
                    this.delivery_time = delivery_time;
                    this.after_sale_time = after_sale_time;
                    this.payment_type = payment_type;
	                this.member_integral = member_integral;
	                this.member_integral_rule = member_integral_rule;
                    let sendType = this.detail.setting.send_type;
                    for (let i = 0; i < sendType.length; i++) {
                        if (sendType[i] === 'express') {
                            this.express = true;
                        } else if(sendType[i] === 'offline') {
                            this.offline = true;
                        } else if (sendType[i] === 'city') {
                            this.city = true;
                        }
                    }
                    this.name = this.detail.name;
                    this.mail = response.data.mail;
                    this.sms = response.data.sms;
                    for (let i = 0; i < payment_type.length; i++) {
                        if (payment_type[i] === 'online_pay') {
                            this.online_pay = true;
                        } else if (payment_type[i] === 'huodao') {
                            this.huodao = true;
                        } else if (payment_type[i] === 'balance') {
                            this.balance = true;
                        }
                    }
                }
            })
	    },
	    methods: {
            toRedirect(url) {
                uni.redirectTo({
                    url: url
                })
            },
            setLogo() {
                let _this = this;
                uni.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success(res) {
                        uni.uploadFile({
	                        url: _this.$api.upload.file,
                            filePath: res.tempFilePaths[0],
	                        name: 'file',
                            success(response) {
                                _this.detail.setting.logo = JSON.parse(response.data).data.url;
                                _this.submit();
                            },
	                        fail(response) {
	                        }
                        });
                    }
                });
            },
            setSmsStatus() {
                if (this.sms.status === 1) {
                    this.sms.status = 0;
                } else {
                    this.sms.status = 1;
                }
                this.submit();
            },
            setMailStatus() {
                if (this.mail.status === '1') {
                    this.mail.status = '0';
                } else {
                    this.mail.status = '1';
                }
                this.submit();
            },
            setPay(data) {
                this[data] = !this[data];
                if (this.balance === false && this.huodao === false) {
                    this.online_pay = true;
                }
            },
            setSend(data) {
                this[data] = !this[data];
                if (this.offline === false && this.city === false) {
                    this.express = true;
                }
            },
            sendTypeHandler() {
                this.model = true;
                this.modelType = 5;
            },
            jumpGo() {
                this.$jump({
                    open_type: 'navigate',
	                url: `/pages/address/address?manual_btn_bg=#446dfd&is_hide_default_btn=1&is_refund_address=1`,
                });
            },
		    submit() {
                let mail = this.mail ? this.mail.status : null;
                let sms = this.sms? this.sms.status : null;
                let data = {
                    name: this.detail.name,
                    setting: JSON.stringify(this.detail.setting),
                    mail: mail,
                    sms: sms,
                };
                this.$request({
	                url: this.$api.app_admin.setting,
	                method: 'post',
	                data: data,
                }).then(response => {
                    if (response.code === 0) {
                        this.model = false;
                    }
                })
		    },
            cancel() {
                this.model = false;
            },
            confirm() {
                this.detail.name = this.name;
                this.detail.setting.over_time = this.over_time;
                this.detail.setting.delivery_time = this.delivery_time;
                this.detail.setting.after_sale_time = this.after_sale_time;
                this.detail.setting.payment_type = [];
                this.detail.setting.member_integral = this.member_integral;
                this.detail.setting.member_integral_rule = this.member_integral_rule;
                if (this.online_pay === true) {
                    this.detail.setting.payment_type.push('online_pay');
                }
                if (this.huodao === true) {
                    this.detail.setting.payment_type.push('huodao');
                }
                if (this.balance === true) {
                    this.detail.setting.payment_type.push('balance');
                }
                this.detail.setting.send_type = [];
                if (this.offline === true) {
                    this.detail.setting.send_type.push('offline');
                }
                if (this.express === true) {
                    this.detail.setting.send_type.push('express');
                }
                if (this.city === true) {
                    this.detail.setting.send_type.push('city');
                }
                this.submit();
            },
	    },
	    components: {
            'app-switch': appSwitch,
	    }
    }
</script>

<style scoped lang="scss">
@import "./setting.scss";
</style>