scott
/
crm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
							{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%;
        }
    }
    #add-company-shop {
        width: 400px;
    }
    #add-company-shop .layui-form-label {
        width: 80px;
    }

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

    #add-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="add-company-shop">
        <form class="layui-form" id="add-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;">
                </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;">
                </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;">
                </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" 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}}</div>
                        <img class="arrimg" :src="img" />
                    </div>
                    <input type="hidden" id="addressEle" name="province_city" value="">
                    <input type="hidden" id="addressCode" name="province_city_code" value="">
                    <input type="hidden" id="provinceEl" name="province" value="">
                    <input type="hidden" id="cityElement" name="city" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">店面品牌</label>
                <div class="layui-input-inline">
                    <select name="company_brand" id="add-shop-branch">
                        <option value="">请选择品牌</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">到期时间</label>
                <div class="layui-input-inline">
                    <input type="text" id="shop_end_dates" name="end_date" 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">
					<select name="mini">
						{volist name="miniprogram" id="mini"}
							<option value="{$mini.id}">{$mini.type}</option>
						{/volist}
					</select>
				</div>
			</div>
            <div class="layui-form-item">
                <input type="hidden" name="company_group" value="{$company_id}" />
                <input style="margin-left: 110px;" type="button" class="layui-btn" 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: "#add-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: '/adminall'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload', 'layedit', 'laydate'], function () {
        var form = layui.form,
            layedit = layui.layedit,
            laydate = layui.laydate,
            $ = layui.jquery;

        laydate.render({
            elem: '#shop_end_dates'
            , type: 'date'
        });

        form.render();
        // 店面管理
        function companyBrandList(id, domid, def = 0) {
            $.get('{:url("company/brand")}?id=' + id, function (res) {
                if (res.code > 0) layer.msg(res.msg, {
                    anim: 0
                    , time: 2000
                });
                else {
                    let selectDom = $(domid);
                    selectDom.html('<option value="">请选择品牌</option>');
                    res.data.forEach(element => {
                        if (element.id == def)
                            selectDom.append("<option value='" + element.id + "' selected>" + element.brand_name + "</option>");
                        else
                            selectDom.append("<option value='" + element.id + "'>" + element.brand_name + "</option>");
                    });
                    form.render('select');
                }
            });
        }
        companyBrandList("{$company_id}", '#add-shop-branch');
        /* 监听提交 */
        // 添加店铺 add-shop-submit
		form.on('submit(add-shop-submit)', function (obj) {
            var index = parent.layer.getFrameIndex(window.name);
			let load = layer.load(0, { shade: 0.3 });
			let url = '{:url("company/addShop")}';
			$.post(url, obj.field, function (res) {
				if (res.code === 0) {
					layer.msg(res.msg, {
						anim: 0
						, time: 2000
					}, function () {
						parent.layer.close(index);
						layer.close(load);
					});
				} else {
					layer.msg(res.msg, {
						anim: 6
						, time: 2000
					});
					layer.close(load);
				}
			});
			return false;
		});

        //日期
        laydate.render({
            elem: '#end_date'
        });

    });
</script>
{/block}