scott
/
crm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
							{extend name="public/layout" /} {block name="title"}编辑店面{/block} {block name="body"}
<link rel="stylesheet" href="__STATIC__/css/index.css">
<style type="text/css">
    html {
        background: #fff;
    }

    body {
        min-width: 320px;
    }

    @media screen and (max-width: 450px) {
        .layui-form-item {
            width: 100%;
        }
    }
    #edit-company-shop {
        width: 400px;
    }
    #edit-company-shop .layui-form-label {
        width: 80px;
    }

    #edit-company-shop .layui-input-inline {
        width: 230px;
    }

    #edit-company-shop .layui-form-select dl {
        max-height: 120px;
    }

    .arrimg {
        width: 12px;
    }

    .arrinput {
        width: 100%;
        height: 36px;
        border: 1px solid #d2d2d2;
        display: flex;
        align-items: center;
        border-radius: 2px;
    }

    .arrinput>div {
        width: 90%;
        box-sizing: border-box;
        padding-left: 10px;
    }
</style>

<body>
    <div id="edit-company-shop">
        <form class="layui-form" id="edit-company-shop-form" enctype="multipart/form-data" style="margin: 20px 10px;">
            <div class="layui-form-item">
                <label class="layui-form-label">店面名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="company_name" placeholder="请输入店面名称" autocomplete="off" class="layui-input"
                        style="max-width: 500px;" {notempty name="$data.company_name"}value="{$data.company_name}"{/notempty}>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">店面电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" placeholder="请输入店面电话" autocomplete="off" class="layui-input"
                        style="max-width: 500px;" {notempty name="$data.tel"}value="{$data.tel}"{/notempty}>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">负责人姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="leader_name" placeholder="请输入负责人姓名" autocomplete="off" class="layui-input"
                        style="max-width: 500px;" {notempty name="$data.leader_name"}value="{$data.leader_name}"{/notempty}>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">初始账号</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" id="phone" value="{$data.phone}" placeholder="请输入初始账号（手机号）" autocomplete="off"
                        class="layui-input" style="max-width: 500px;">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属地域</label>
                <div class="layui-input-inline">
                    <div class="arrinput" @click="toSelect">
                        <div>{{city||"{$data.province_city}"}}</div>
                        <img class="arrimg" :src="img" />
                    </div>
                    <input type="hidden" id="addressEle" name="province_city" value="{$data.province_city}">
                    <input type="hidden" id="addressCode" name="province_city_code" value="{$data.province_city_code}">
                    <input type="hidden" id="provinceEl" name="province" value="{$data.province}">
                    <input type="hidden" id="cityElement" name="city" value="{$data.city}">
                </div>
            </div>
            <input type="hidden" name="id" value="{$data.id}">
            <div class="layui-form-item ">
                <label class="layui-form-label"></label>
                <input type="button" class="layui-btn btn layui-btn-primary" lay-submit lay-filter="add-shop-submit" id="add-shop-submit" value="确认添加">
            </div>
        </form>
        <van-popup v-model="show" position="bottom" :style="{ height: '60%' }">
            <van-area :area-list="areaList" @confirm="confirmFn" @cancel="cancelFn"
                :columns-placeholder="['请选择', '请选择', '请选择']" title="标题" />
        </van-popup>
    </div>
</body>
{/block} {block name="js"}
<script src="__STATIC__/js/city_vue.js"></script>
<script src="__STATIC__/js/city_vant.min.js"></script>
<script src="__STATIC__/js/city_area.js"></script>
<script>
     new Vue({
        el: "#edit-company-shop",
        data: {
            show: false,
            msg: "",
            colNum: "3", //省市区显示列数，3-省市区，2-省市，1-省
            city: "",
            areaList: are,
            img: "https://sucai.suoluomei.cn/sucai_zs/images/20191204103033-xiala.png"
        },
        mounted() {},
        methods: {
            toSelect() {
                this.show = true;
            },
            confirmFn(are) {
                that = this
                that.show = false;
                let arr, SelectProvinceName, SelectCityName, SelectCountyName, ko;
                arr = are;
                //判断是否都选择
                if (arr[0].name == "" || arr[1].name == "" || arr[2].name == "") {
                    that.$dialog.alert({
                        title: "提示", //加上标题
                        message: "请选择完整的地址", //改变弹出框的内容
                        showCancelButton: false //展示取消按钮
                    })
                        .then(() => { //点击确认按钮后的调用
                            console.log("点击了确认按钮噢")
                        })
                } else {
                    SelectProvinceName = arr[0].name; // 省
                    SelectCityName = arr[1].name; // 市
                    SelectCountyName = arr[2].name; // 区
                    ko = " ";//空格
                    that.$emit("ProCityCountyVal", [
                        SelectProvinceName,     //选择的省
                        SelectCityName,         //选择的市
                        SelectCountyName        //选择的区
                    ]);
                    that.city = `${SelectProvinceName}/${SelectCityName}/${SelectCountyName}`;//将选择的值赋值给city以显示在页面中
                    that.addressinfo = that.city;
                    that.isActive = true;
                    that.address = arr;
                    document.querySelector('#addressEle').value = that.city;
                    document.querySelector('#addressCode').value = that.address[2].code;
                    document.querySelector('#provinceEl').value = SelectProvinceName;
                    document.querySelector('#cityElement').value = SelectCityName;
                }
            },
            cancelFn() {
                this.show = false;
                console.log("点击了取消按钮");
            }
        },
        created() {

        }
    })

    layui.config({
        base: '__LAYUI__/',
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload', 'layedit', 'laydate'], function () {
        var form = layui.form,
            layedit = layui.layedit,
            laydate = layui.laydate,
            $ = layui.jquery;

        form.render();

        // 添加店铺
		form.on('submit(add-shop-submit)', function (obj) {
            var index = parent.layer.getFrameIndex(window.name);
			$('#add-shop-submit').addClass('layui-btn-disabled');
            $('#add-shop-submit').attr('disabled', 'disabled');

			let url = '{:url("company/editshopsave")}';
			$.post(url, obj.field, function (res) {
				if (res.code === 0) {
					layer.msg(res.msg, {
						anim: 0
						, time: 2000
					}, function () {
                        parent.location.reload();
						parent.layer.close(index);
					});
				} else {
                    $('#add-shop-submit').removeClass('layui-btn-disabled');
                    $('#add-shop-submit').removeAttr('disabled');
					layer.msg(res.msg, {
						anim: 6
						, time: 2000
					});
				}
			});
			return false;
		});

    });
</script>
{/block}