hemall.terabimsoft.com.cn/plugins/electricity-bill-pro/views/backend/set/basic.blade.php

@extends('layouts.base')
@section('title', '基础设置')
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/electricity-bill-pro/views/backend/index.css')}}">
    <style>
        .panel {
            margin-bottom: 10px !important;
            padding-left: 20px;
            border-radius: 10px;
        }

        .panel .active a {
            background-color: #29ba9c !important;
            border-radius: 18px !important;
            color: #fff;
        }

        .panel a {
            border: none !important;
            background-color: #fff !important;
        }

        .content {
            background: #eff3f6;
            padding: 10px !important;
        }

        .con {
            padding-bottom: 20px;
            position: relative;
            border-radius: 8px;
            min-height: 100vh;
            background-color: #fff;
        }

        .con .setting .block {
            padding: 10px;
            background-color: #fff;
            border-radius: 8px;
        }

        .con .setting .block .title {
            font-size: 18px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .confirm-btn {
            width: calc(100% - 266px);
            position: fixed;
            bottom: 0;
            right: 0;
            margin-right: 10px;
            line-height: 63px;
            background-color: #ffffff;
            box-shadow: 0px 8px 23px 1px rgba(51, 51, 51, 0.3);
            background-color: #fff;
            text-align: center;
        }

        b {
            font-size: 14px;
        }


        .setting .block .channel-set .channel-set{
            font-size: 16px;
        }
        .setting .block .channel-set .el-radio__inner {
            width: 18px;
            height: 18px;
        }
    </style>
    <div id='app'>
        <div class="con">
            <div class="setting">
                <el-form ref="form" :model="form" label-width="15%">
                    <div class="block">
                        <div class="title"><span
                                    style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>基础设置</b>
                        </div>
                        <el-form-item label="电费充值">
                            <template>
                                <el-switch v-model="form.is_open" :active-value="1" :inactive-value="0">
                                </el-switch>
                            </template>
                        </el-form-item>

                        <!-- <el-form-item label="通道设置">
                            <template>
                                <el-tabs v-model="activeName" type="card" v-if="!(form.channel_list instanceof Array)">
                                    <el-tab-pane v-for="(item,index) in form.channel_list" :label="item.name" :name="index">
                                        <el-form label-width="80px">
                                            <el-form-item label="是否启用">
                                                <template>
                                                    <el-switch v-model="item.is_open" :active-value="1" :inactive-value="0">
                                                    </el-switch>
                                                </template>
                                            </el-form-item>
                                        </el-form>
                                    </el-tab-pane>
                                </el-tabs>
                                <el-tabs v-model="activeName" v-else>
                                    <el-tab-pane label="无" name="aggregation-cps">
                                        <el-form label-width="80px">
                                            无通道
                                        </el-form>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                        </el-form-item> -->



                        <el-form-item label="通道设置" class="channel-set" v-if="form.channel_list">
                            <el-radio-group v-model="channel_type" @change="changeChannel">
                                <el-radio v-for="(item,index) in form.channel_list" :label="index">[[item.name]]</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="充值失败不退款">
                            <template>
                                <el-switch
                                        v-model="form.is_no_refund"
                                        :active-value="1"
                                        :inactive-value="0"
                                >
                                </el-switch>
                            </template>
                        </el-form-item>

                        <el-form-item label="默认下单地址">
                            <template>
                                <el-switch
                                        v-model="form.is_default_address"
                                        :active-value="1"
                                        :inactive-value="0"
                                >
                                </el-switch>
                            </template>
                        </el-form-item>

                        <el-form-item label="">
                            <el-input v-model="form.username" placeholder="默认下单用户姓名" style="width:70%;"></el-input>
                        </el-form-item>

                        <el-form-item label="">
                            <el-input v-model="form.mobile" placeholder="默认下单用户手机号" style="width:70%;"></el-input>
                        </el-form-item>

                        <el-form-item label="">
                            <el-select v-model="form.province_id" placeholder="省" clearable @change="changeProvince"
                                       style="width:15%">
                                <el-option v-for="item in province_list" :key="item.id" :label="item.areaname"
                                           :value="item.id"></el-option>
                            </el-select>
                            <el-select v-model="form.city_id" placeholder="市" clearable @change="changeCity"
                                       style="width:15%">
                                <el-option v-for="item in city_list" :key="item.id" :label="item.areaname"
                                           :value="item.id"></el-option>
                            </el-select>
                            <el-select v-model="form.district_id" placeholder="区" clearable @change="changeDistrict"
                                       style="width:15%">
                                <el-option v-for="item in district_list" :key="item.id" :label="item.areaname"
                                           :value="item.id"></el-option>
                            </el-select>
                            <el-select v-model="form.street_id" placeholder="街道" clearable style="width:15%">
                                <el-option v-for="item in street_list" :key="item.id" :label="item.areaname"
                                           :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="">
                            <el-input v-model="form.address" placeholder="详细地址" style="width:70%;"></el-input>
                        </el-form-item>

                        <el-form-item label="限制区域">
                            <template>
                                <el-button @click="dialogFormVisible=true">选择省份</el-button>
                                <div>
                                    <el-tag 
                                        v-for="(tag, index) in authList" :key="index"
                                        closable @close="deleteAuth(index)"
                                        style="margin: 0 10px 10px 0"
                                    >
                                        [[tag]]
                                    </el-tag>
                                </div>
                            </template>
                        </el-form-item>

                        <div class="confirm-btn">
                            <el-button type="primary" @click="submitForm('form')">提交</el-button>
                        </div>
                    </div>
                </el-form>

                <el-dialog title="选择地区" :visible.sync="dialogFormVisible">
                <el-checkbox-group v-model="authList">
                    <el-checkbox v-for="item in province_list" :key="item.id" :label="item.areaname"></el-checkbox>
                </el-checkbox-group>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmDialog">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {
                    form: {
                        is_open: 0,
                        province_id: '',
                        city_id: '',
                        district_id: '',
                        street_id: '',
                        channel_list: {},
                        limit_area: []
                    },
                    submit_url: '',
                    channel_type: '',
                    showVisible: false,
                    loading: false,
                    province_list: [],
                    city_list: [],
                    district_list: [],
                    street_list: [],
                    rules: {},
                    activeName:'aggregation-cps',

                    dialogFormVisible: false,
                    authList: [],
                }
            },
            created() {

            },
            mounted() {
                this.initProvince();
                this.getData();
            },
            methods: {
                getData() {
                    let loading = this.$loading({
                        target: document.querySelector(".content"),
                        background: 'rgba(0, 0, 0, 0)'
                    });
                    this.$http.post('{!! yzWebFullUrl('plugin.electricity-bill-pro.backend.set.basic-info') !!}').then(function (response) {
                        if (response.data.result) {
                            this.form = response.data.data.set;
                            this.form.province_id = this.form.province_id ? this.form.province_id : '';
                            this.form.city_id = this.form.city_id ? this.form.city_id : '';
                            this.form.district_id = this.form.district_id ? this.form.district_id : '';
                            this.form.street_id = this.form.street_id ? this.form.street_id : '';
                            this.authList =  this.form.limit_area ? this.form.limit_area : [];
                            if (this.form.province_id > 0) {
                                this.initCity(this.form.province_id);
                            }
                            if (this.form.city_id > 0) {
                                this.initDistrict(this.form.city_id);
                            }
                            if (this.form.district_id > 0) {
                                this.initStreet(this.form.district_id);
                            }
                            if (this.form.channel_list) {
                                let channelList = this.form.channel_list;
                                let check = Object.keys(channelList).find(item => channelList[item].is_open == 1);
                                this.channel_type = check;
                            }
                            loading.close();
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                        loading.close();
                    }, function (response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                        loading.close();
                    });
                },
                submitForm(formName) {
                    let that = this;
                    let json = this.form;
                    json.limit_area = this.authList;
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let loading = this.$loading({
                                target: document.querySelector(".content"),
                                background: 'rgba(0, 0, 0, 0)'
                            });
                            this.$http.post('{!! yzWebFullUrl('plugin.electricity-bill-pro.backend.set.basic-save') !!}', {set: json}).then(response => {
                                if (response.data.result) {
                                    this.$message({message: response.data.msg, type: 'success'});
                                } else {
                                    this.$message({message: response.data.msg, type: 'error'});
                                }
                                loading.close();
                            }, response => {
                                loading.close();
                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                goBack() {
                    history.go(-1)
                },
                changeChannel(checkName) {
                    let channelList = this.form.channel_list
                    Object.keys(channelList).forEach(item => {
                        channelList[item].is_open = (item == checkName) ? 1 : 0;
                    });
                },
                initProvince(val) {
                    this.areaLoading = true;
                    this.$http.get("{!! yzWebUrl('area.list.init', ['area_ids'=>'']) !!}" + val).then(response => {
                        this.province_list = response.data.data;
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                initCity(val) {
                    console.log(val);
                    this.areaLoading = true;
                    this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=>'']) !!}" + val).then(response => {
                        this.city_list = response.data.data;
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                initDistrict(val) {
                    console.log(val);
                    this.areaLoading = true;
                    this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=>'']) !!}" + val).then(response => {
                        this.district_list = response.data.data;
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                initStreet(val) {
                    console.log(val);
                    this.areaLoading = true;
                    this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=>'']) !!}" + val).then(response => {
                        this.street_list = response.data.data;
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                changeProvince(val) {
                    this.city_list = [];
                    this.district_list = [];
                    this.street_list = [];
                    this.form.city_id = "";
                    this.form.district_id = "";
                    this.form.street_id = "";
                    this.areaLoading = true;
                    let url = "<?php echo yzWebUrl('area.list', ['parent_id' => '']); ?>" + val;
                    this.$http.get(url).then(response => {
                        if (response.data.data.length) {
                            this.city_list = response.data.data;
                        } else {
                            this.city_list = null;
                        }
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                // 市改变
                changeCity(val) {
                    this.district_list = [];
                    this.street_list = [];
                    this.form.district_id = "";
                    this.form.street_id = "";
                    this.areaLoading = true;
                    let url = "<?php echo yzWebUrl('area.list', ['parent_id' => '']); ?>" + val;
                    this.$http.get(url).then(response => {
                        if (response.data.data.length) {
                            this.district_list = response.data.data;
                        } else {
                            this.district_list = null;
                        }
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                // 区改变
                changeDistrict(val) {
                    console.log(val)
                    this.street_list = [];
                    this.form.street_id = "";
                    this.areaLoading = true;
                    let url = "<?php echo yzWebUrl('area.list', ['parent_id' => '']); ?>" + val;
                    this.$http.get(url).then(response => {
                        if (response.data.data.length) {
                            this.street_list = response.data.data;
                        } else {
                            this.street_list = null;
                        }
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },

                confirmDialog () {
                    this.dialogFormVisible = false;
                },
                deleteAuth (index) {
                    this.authList.splice(index, 1);
                }
            },
        })

    </script>
@endsection