机构注册~

src/main/resources/static/css/account/register.css

@@ -35,6 +35,10 @@ footer .footTop{display:none;}
 .formLine .formLine-file .file-biss{background: url("/img/account/icon-bisse.png") no-repeat;}
 .formLine .formLine-file .file-door{background: url("/img/account/icon-door.png") no-repeat;}
 .formLine .formLine-file .file-zizhi{background: url("/img/account/icon-zizhi.png") no-repeat;}
+.formLine .form-upload-image{width: 128px;height: 90px;position: relative;}
+.formLine .form-upload-image .upload-img{width: 128px;height: 90px;display: block;}
+.formLine .form-upload-image .icon{width: 20px;height: 20px;display: block;position: absolute;left: 0;top: 0;cursor: pointer;}
+.formLine .form-upload-image .icon:before{width: 20px;height: 20px;background-position: -116px -140px;}
 
 .signAccount{width:498px;margin:0 auto;min-height: 900px;}
 .signAccount .title{height:42px;line-height:42px;font-weight:bold;font-size:32px;color:#22272e;text-align:center;padding:30px}
@@ -77,6 +81,8 @@ footer{display:none}
 .selectAccount .cont{margin-top:10vw;}
 .selectAccount .cont span{display:inline-block;width:24.8vw;margin:0 6.7vw;line-height:4.6vw;color:#3b77ff;font-size:3.4vw;cursor:pointer}
 .selectAccount .cont img{display:inline-block;width:24.8vw;height:24.8vw;background-color:#c2d8fa;border-radius:12.4vw}
+.signAccount .title-tips{margin-bottom: 3.2vm;width: 100%;height:9.6vw;background-image: linear-gradient(270deg,rgba(255,255,255,0.1) 0%,rgba(255,86,11,0.1) 51%,rgba(255,255,255,0.1) 100%);}
+.signAccount .title-tips p{width: 100%;height:9.6vw;font-family: Microsoft YaHei;font-size:3.1vw;font-weight: normal;font-stretch: normal;line-height: 9.6vw;letter-spacing:0;color: #e15616;text-align: center;}
 .signAccount{width:100%;min-height:90vh;font-size:3.4vw;color:#627386;}
 .signAccount .advisory>.duv{float: right;line-height: 5.6vw;padding-right: 4vw;}
 .signAccount .advisory>.duv span{display: inline-block;float: left;}
@@ -94,9 +100,11 @@ footer{display:none}
 .supplierConfirm .btnLine p{color:#000;}
 .supplierConfirm .btnLine input{margin-right:1vw;}
 .supplierConfirm .btnLine button{display:block;font-size:3.4vw;margin:5vw auto;width:93.4vw;height:11.2vw;line-height:11.2vw;background:#E15616;color:#fff;}
-.formLine .business {position: relative;}
-.formLine .business input[type="text"]{width:69.4vw;display:block}
-.formLine .business a{position:absolute;right:0;bottom:0;width:21.4vw;height:11.2vw;line-height:11.2vw;color:#e15616;background-color:#ffe6dc;border-radius:2px;border:solid 1px #e15616;text-align:center}
+.formLine { width: 100%;position: relative;font-size: 3.4vw;float: left;}
+.formLine .business{height:auto;position:relative}
+.formLine .business input[type="text"] {width:66vw;display: block;float: left;margin-right: 3vw;}
+.formLine .business a {display: block;float: left; width:21.4vw;height: 10.5vw;line-height: 10.5vw;font-size:3.4vw;color: #e15616;background-color: #ffe6dc;border-radius: 2px;border: solid 1px #e15616;text-align: center;}
+
 .advisory .mask{display: none;width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,.5);z-index: 99;}
 .advisory .mask.active{display: block;}
 .advisoryInfo.active{display: block;}
@@ -109,6 +117,10 @@ footer{display:none}
 .advisoryInfo .btn{display:block;width:46vw;height:9.8vw;line-height:9.8vw;margin:3vw auto 0;font-size:3.4vw;background-color:#ffe6dc;border-radius:2px;border:solid 1px #e15616;color:#e15616;text-align:center}
 .formLine .form-upload{width: 36vw;height: auto;float: left;margin-right: 4vw;}
 .formLine .formLine-file{width: 36vw;height: 25.3vw;position: relative;}
+.formLine .form-upload-image{width: 36vw;height: 25.3vw;position: relative;}
+.formLine .form-upload-image .upload-img{width: 36vw;height: 25.3vw;display: block;}
+.formLine .form-upload-image .mIcon{width: 4vw;height:4vw;;display: block;position: absolute;left: 0;top: 0;cursor: pointer;}
+.formLine .form-upload-image .mIcon:before{width: 4vw;height: 4vw;background-position: -91vw -8.5vw;}
 .formLine .form-upload-tips{width: 4.8vw;height: 25.3vw;float: left;position: relative;}
 .formLine .form-upload-tips .mIcon{width: 4.8vw;height: 4.8vw;float: left;display: block;margin-top: 10vw;}
 .formLine .form-upload-tips .mIcon:before{width: 4.8vw;height: 4.8vw;background-position:-76.6vw -1.2vw;}

src/main/resources/static/css/base/form.css

@@ -57,8 +57,8 @@
 */
 @media screen and (max-width:768px){
 .formLine{width:100%;position:relative;font-size:3.4vw;}
-.formLine input,.formLine select{box-sizing:border-box;width:100%;height:11.2vw;line-height:6vw;padding: 2.6vw 0;text-indent:1.2em;font-size:3.4vw;text-align:left;background-color:#ffffff;border-radius:2px;border:solid 1px #b8bfca;}
-.formLine textarea{display:inline-block;width:100%;height:42.4vw;box-sizing:border-box;border:solid 1px #b8bfca;padding:3vw;line-height:5vw;margin-top:2.7vw;}
+.formLine input,.formLine select{outline:none;box-sizing:border-box;width:100%;height:11.2vw;line-height:6vw;padding: 2.6vw 0;text-indent:1.2em;font-size:3.4vw;text-align:left;background-color:#ffffff;border-radius:2px;border:solid 1px #b8bfca;}
+.formLine textarea{display:inline-block;width:100%;height:42.4vw;box-sizing:border-box;border:solid 1px #b8bfca;padding:3vw;line-height:5vw;margin-top:2.7vw;resize: none;}
 .formLine select {width: 29.5vw;}
 .formLine.error input{border-color:#f94b4b}
 .formLine input:focus{border-color:#ffe6dc;}
@@ -84,7 +84,7 @@
 .subLine .icon-gouxuan{background-position: -210px 0;}
 
 .formLine .address{text-align:justify;line-height:0}
-.formLine .diyBox{width:34vw;height:11.2vw;line-height:11.2vw;margin-right: 1.5vw;box-sizing:border-box;text-align:center;display:inline-block}
+.formLine .diyBox{width:34vw;height:11.2vw;line-height:11.2vw;margin-right: 2.5vw;margin-bottom: 2.5vw;box-sizing:border-box;text-align:center;display:inline-block;float: left;}
 .formLine .diyBox.second{width:20vw;}
 .formLine .diyBox input{display:none}
 .formLine .diyBox i:before{position:absolute;right:0;bottom:0;display:none;width:6vw;height:6vw;background-position:-75vw -7.8vw;}

src/main/resources/static/js/account/register-club.js

@@ -1,7 +1,7 @@
 var registerPage = new Vue({
     el: "#registerPage",
     data: {
-        showTabContentIndex:2,
+        showTabContentIndex:1,
         showSupplierConfirm:true,
         advisoryStatus: false,
         showClass:'',
@@ -24,29 +24,20 @@ var registerPage = new Vue({
             name:'',
             phone:'',
             code:'',
-            address:'',
             mainPros:[],
             businessLicenseImage:'',
+            uploadMentuzImage:'',
+            uploadMedicalImage:'',
             businessLicense:'',
             secondShopType:'',
             firstShopType:'',
-            department:5
-        },
-        supplierUser: {
-            phone:'',
-            code:'',
-            password:'',
-            password2:'',
-            shopName:'',
-            name:'',
-            email:'',
-            shopAbbr:'',
-            firstShopType:'2',
-            secondShopType: '',
-            mainPros: [],
-            businessLicense:'',
-            businessLicenseImage:''
+            department:5,
+            provinceID :'',
+            cityID : '',
+            townID : '',
+            address :'',
         },
+        formData:new FormData(),
         isAgreed:0,
         isAgree:false,
         isShowAgree:false,
@@ -61,12 +52,20 @@ var registerPage = new Vue({
             {name:'美发'},
             {name:'皮肤管理'},
             {name:'光电'},
-            {value:'6',name:'综合类'},
-            {value:'7',name:'中医养生'},
-            {value:'8',name:'spa'},
+            {name:'综合类'},
+            {name:'中医养生'},
+            {name:'spa'},
         ],
         mainPros: ['产品','仪器','服务','整形'],
         mainProEdit: '',
+        ProvinceList:[],
+        cityArray:[],
+        townArray:[],
+        addressfrom: {
+            province: '',//省id
+            city: '',
+            town: ''
+        },
         rule:{
             name: '^[a-zA-Z\\u4e00-\\u9fa5]{2,}$',
             phone: '^\\d{6,12}$',
@@ -82,18 +81,34 @@ var registerPage = new Vue({
     methods: {
         mainProAdd: function(){
             var _self = this;
-
             if (_self.mainProEdit.length>0) {
                 if (_self.mainPros.indexOf(_self.mainProEdit)<0){
+                    var obj = {name:_self.mainProEdit};
                     if(_self.clubUpgradeUser.firstShopType == 1){
-                        _self.mentuzCampNullList.push(_self.mainProEdit);
+                        if(_self.checkedArray(_self.mainProEdit,_self.mentuzCampNullList)){
+                            CAIMEI.dialog('主营内容已存在!',false);
+                        }else {
+                            _self.mentuzCampNullList.push(obj);
+                        }
                     }else{
-                        _self.medicaCampNullList.push(_self.mainProEdit);
+                        if(_self.checkedArray(_self.mainProEdit,_this.medicaCampNullList)){
+                            CAIMEI.dialog('主营内容已存在!',false);
+                        }else {
+                            _self.medicaCampNullList.push(obj);
+                        }
                     }
                 }
             }
         },
-        showPassword: function(event) {
+        checkedArray:function(content,arr){//判断主营内容是否已存在
+            for(var i in arr){
+                if(arr[i].name == content){
+                    return true;
+                }
+            }
+            return false;
+        },
+        showPassword: function(event) {//密码
             var el = event.currentTarget;
             var pwdEle = $(el).siblings('input');
             if(pwdEle.attr('type') === 'password') {
@@ -104,8 +119,7 @@ var registerPage = new Vue({
                 pwdEle.attr('type','password');
             }
         },
-        // 失去焦点校验
-        blurHandle: function(event) {
+        blurHandle: function(event) { // 失去焦点校验
             var el = event.currentTarget;
             verifyHandle(el);
         },
@@ -131,6 +145,45 @@ var registerPage = new Vue({
                 });
             });
         },
+        uploadBusinessLicenseImageFn: function(event){//上传营业执照
+            var _this = this;
+            var inputDOM = _this.$refs.businessLicenseImage;
+            var file = inputDOM.files;
+            _this.formData.append('file', file[0]);
+            PublicApi.uploadimg(_this.formData,function(response){
+                _this.clubUpgradeUser.businessLicenseImage = response.data;
+                event.target.value = '';
+            });
+        },
+        uploadMentuzImageFn: function(event){//上传营业执照
+            var _this = this;
+            var inputDOM = _this.$refs.businessMentuImage;
+            var file = inputDOM.files;
+            _this.formData.append('file', file[0]);
+            PublicApi.uploadimg(_this.formData,function(response){
+                _this.clubUpgradeUser.uploadMentuzImage = response.data;
+                event.target.value = '';
+            });
+        },
+        uploadMedicaImageFn: function(event){//上传资质证书
+            var _this = this;
+            var inputDOM = _this.$refs.businessMedicaImage;
+            var file = inputDOM.files;
+            _this.formData.append('file', file[0]);
+            PublicApi.uploadimg(_this.formData,function(response){
+                _this.clubUpgradeUser.uploadMedicalImage = response.data;
+                event.target.value = '';
+            });
+        },
+        deleteBusinessImage:function(){//清楚营业执照图片
+            this.clubUpgradeUser.businessLicenseImage = '';
+        },
+        deleteMentuzImage:function(){//清楚门头照图片
+            this.clubUpgradeUser.uploadMentuzImage = '';
+        },
+        deleteMedicalImage:function(){//清楚资质照图片
+            this.clubUpgradeUser.uploadMedicalImage = '';
+        },
         clubRegister: function(){ //机构注册提交
             var _self = this;
             var pass = verifyForm();
@@ -151,11 +204,11 @@ var registerPage = new Vue({
                 };
                 UserApi.ClubRegister(params,function (response) {
                     if(response.code === 0){
-                        dialog('注册成功！',function () {
-
+                        CAIMEI.dialog('注册成功！',true,function () {
+                            _self.showTabContentIndex = 2;
                         });
                     } else {
-                        alertInfo(response.msg);
+                        CAIMEI.Alert(response.msg,'确定',false);
                     }
                 });
             });
@@ -174,7 +227,7 @@ var registerPage = new Vue({
                 _self.isMobileDisabled = true;
                 UserApi.getRegisterMobileCode(params,function (response) {
                     if(response.code == 0){
-                        alertInfo('验证短信已发送');
+                        CAIMEI.dialog('验证短信已发送',false,function () {});
                         var TIME_COUNT = 60;
                         if (!_self.mobilTime) {
                             _self.mobilCount = TIME_COUNT;
@@ -185,14 +238,14 @@ var registerPage = new Vue({
                                 _self.mobileCodeText = _self.mobilCount +'s重新发送';
                             } else {
                                 _self.isMobileDisabled = false;
-                                clearInterval(this.mobilTime);
+                                clearInterval(_self.mobilTime);
                                 _self.mobilTime = null;
                                 _self.mobileCodeText = '获取验证码'
                             }
                         },1000)
                         }
                     }else{
-                        alertInfo(response.msg);
+                        CAIMEI.Alert(response.msg,'确定',false);
                         _self.isMobileDisabled = false;
                     }
                 })
@@ -216,13 +269,73 @@ var registerPage = new Vue({
                 _self.isShowAgree = true;
                 _self.isAgreed = 0;
             }
-        }
-
+        },
+        GetProvinceFn: function(){//获取全部省份
+            var _this = this;
+            PublicApi.GetProvince({},function(response){
+                if(response.code == 0){
+                    _this.ProvinceList =response.data;
+                }else{
+                    CAIMEI.Alert(response.msg,'确定',false);
+                }
+            })
+        },
+        ChangeProvince:function () {//选择省份
+            var _this = this;
+            _this.addressfrom.province = event.target.value;
+            _this.clubUpgradeUser.provinceID = event.target.value;
+            if(_this.addressfrom.province==''){//省为请选择时市区初始化
+                _this.cityArray=[];
+                _this.townArray=[];
+                _this.clubUpgradeUser.townID=''
+            }else {
+                _this.ChangeGetcity();
+            }
+        },
+        ChangeGetcity:function(event){//加载市
+            var _this = this;
+            PublicApi.GetCity({ provinceId: _this.addressfrom.province },function(response){
+                if(response.code == 0 ){
+                    _this.cityArray = response.data;
+                    _this.addressfrom.city = event.target.value;
+                    _this.clubUpgradeUser.cityID = event.target.value;
+                    if(_this.addressfrom.city==''){
+                        _this.townArray=[];
+                    }else {
+                        _this.ChangeGetcTown();
+                    }
+                }else{
+                    CAIMEI.Alert(response.msg,'确定',false);
+                }
+            })
+        },
+        ChangeGetcTown:function(event){//选择地区
+            var _this = this;
+            PublicApi.GetTown({ cityId: _this.addressfrom.city },function(response){
+                if(response.code == 0 ){
+                    _this.townArray = response.data;
+                    _this.clubUpgradeUser.townID = event.target.value;
+                    console.log(_this.clubUpgradeUser.townID)
+                }else{
+                    CAIMEI.Alert(response.msg,'确定',false);
+                }
+            })
+        },
+        showViewerImageFn:function(){//预览营业执照图片
+            var viewer = new Viewer(document.getElementById('businessLicenseImage'));
+        },
+        showViewerImageFn1:function(){//预览门头照图片
+            var viewer = new Viewer(document.getElementById('uploadMentuzImage'));
+        },
+        showViewerImageFn2:function(){//预览资质图片
+            var viewer = new Viewer(document.getElementById('uploadMedicalImage'));
+        },
     },
     created: function () {
 
     },
     mounted: function () {
         var _self = this;
+        _self.GetProvinceFn();
     }
 });

src/main/resources/static/js/common/serviceapi/utils.service.js

@@ -4,6 +4,9 @@
  * auther ZHJY
  */
 var PublicApi = {
+        uploadimg: function (params, callback) {//供应商添加物流上传图片
+            Http.uploadImage({ url:'/formData/MultiPictareaddData',data:params},callback)
+        },
         GetProvince:function(params,callback){ //获取省份信息
             Http.AjaxService({ url:'/club/province', type:'get', data:params, json:false, mask:false,replace:false})
                 .then(function(res){

src/main/resources/static/js/utils.js

@@ -125,10 +125,11 @@ CAIMEI.Modal = function(content,cancelText,confitmText,callback){
 /*单个确定提示弹窗
  * @param content 提示文字信息
  * @param confitmText 自定义按钮文字内容
+ * @param flg 判断是否需要回调函数
  * @param callback 回调函数
  * @auth zhjy
  */
-CAIMEI.Alert = function(content,confitmText,callback){
+CAIMEI.Alert = function(content,confitmText,flg,callback){
     $.confirm({
         boxWidth: (isPC?'300px':'70%'),
         title:'',
@@ -143,7 +144,9 @@ CAIMEI.Alert = function(content,confitmText,callback){
                 text: confitmText,
                 btnClass: 'btn-confirm',
                 action:function () {
-                    callback();
+                    if(flg){
+                        callback();
+                    }
                 }
             }
         }
@@ -151,10 +154,11 @@ CAIMEI.Alert = function(content,confitmText,callback){
 };
 /*封装的吐司提示
  * @param content 提示文字信息
+ * @param flg 判断是否需要执行回调函数
  * @param callback 回调函数
  * @auth zhjy
  */
-CAIMEI.dialog = function(content,callback){
+CAIMEI.dialog = function(content,flg,callback){
     $.confirm({
         title: false,
         content: content,
@@ -165,7 +169,9 @@ CAIMEI.dialog = function(content,callback){
             close:{
                 isHidden: true,
                 action: function () {
-                    callback()
+                    if(flg){
+                        callback()
+                    }
                 }
             }
         }
@@ -205,4 +211,26 @@ CAIMEI.isMoney = function(m){
 CAIMEI.isEmail = function(m){
     var reg =  /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;//邮箱正则
     return reg.test(m)
-};
+};
+CAIMEI.returnedTarget = function(){//对象合并 IE 兼容方法
+    if (typeof Object.assign != 'function') {
+        Object.assign = function(target) {
+            'use strict';
+            if (target == null) {
+                throw new TypeError('Cannot convert undefined or null to object');
+            }
+            target = Object(target);
+            for (var index = 1; index < arguments.length; index++) {
+                var source = arguments[index];
+                if (source != null) {
+                    for (var key in source) {
+                        if (Object.prototype.hasOwnProperty.call(source, key)) {
+                            target[key] = source[key];
+                        }
+                    }
+                }
+            }
+            return target;
+        };
+    }
+}

src/main/resources/templates/account/register-club.html

@@ -111,10 +111,19 @@
                 <div class="formLine">
                     <p><em>*</em>联系地址：</p>
                     <div class="address">
-                        <select><option value="">请选择</option></select>
-                        <select><option value="">请选择</option></select>
-                        <select><option value="">请选择</option></select>
-                        <textarea placeholder="建议您如实填写详细收货地址，例如：街道名称，门牌号码，楼层和房间号等信息"></textarea>
+                        <select name="provinceID" id="cProvince" @change="ChangeProvince">
+                            <option value="" >请选择</option>
+                            <option v-for="(item ,index) in ProvinceList" :key="index" :value='item.provinceID' >{{item.name}}</option>
+                        </select>
+                        <select name="cityID" id="cCity" @change="ChangeGetcity($event)" >
+                            <option value="" >请选择</option>
+                            <option v-for="(item ,index) in cityArray" :key="index" :value="item.cityID" >{{item.name}}</option>
+                        </select>
+                        <select name="townID" id="cTown" @change="ChangeGetcTown($event)">
+                            <option value="" >请选择</option>
+                            <option v-for="(item ,index) in townArray" :key="index" :value="item.townID"  >{{item.name}}</option>
+                        </select>
+                        <textarea placeholder="建议您如实填写详细地址，例如：街道名称，门牌号码，楼层和房间号等信息" v-model="clubUpgradeUser.address"></textarea>
                     </div>
                     <i class="checked icon mIcon"></i>
                     <span class="errTips icon mIcon" tips="请输入正确的联系地址"></span>
@@ -128,11 +137,12 @@
                 <div class="formLine clear">
                     <div class="form-upload">
                         <p><em>*</em>营业执照图片：</p>
-                        <div v-if="clubUpgradeUser.businessLicenseImage!=''">
-                            <img :src="clubUpgradeUser.businessLicenseImage" alt="">
+                        <div class="form-upload-image" v-if="clubUpgradeUser.businessLicenseImage!=''">
+                            <img class="upload-img" :src="clubUpgradeUser.businessLicenseImage" alt="" id="businessLicenseImage" @click="showViewerImageFn()">
+                            <i class="icon mIcon" @click="deleteBusinessImage()"></i>
                         </div>
                         <div class="formLine-file" v-else>
-                            <input class="file" type="file" v-model="clubUpgradeUser.businessLicenseImage">
+                            <input ref="businessLicenseImage" class="file" type="file" accept="image/png,image/jpeg,image/gif,image/jpg"  @change="uploadBusinessLicenseImageFn">
                             <i class="icon mIcon file-biss"></i>
                         </div>
                         <span class="errTips icon mIcon"></span>
@@ -145,11 +155,12 @@
                 <div class="formLine clear">
                     <div class="form-upload">
                         <p>门头照：</p>
-                        <div v-if="clubUpgradeUser.businessLicenseImage!=''">
-                            <img :src="clubUpgradeUser.businessLicenseImage" alt="">
+                        <div class="form-upload-image" v-if="clubUpgradeUser.uploadMentuzImage!=''">
+                            <img class="upload-img" :src="clubUpgradeUser.uploadMentuzImage" alt="" id="uploadMentuzImage" @click="showViewerImageFn1()">
+                            <i class="icon mIcon" @click="deleteMentuzImage()"></i>
                         </div>
                         <div class="formLine-file" v-else>
-                            <input class="file" type="file" v-model="clubUpgradeUser.businessLicenseImage">
+                            <input ref="businessMentuImage" class="file" type="file" accept="image/png,image/jpeg,image/gif,image/jpg"  @change="uploadMentuzImageFn">
                             <i class="icon mIcon file-door"></i>
                         </div>
                     </div>
@@ -169,11 +180,12 @@
                 <div v-show="clubUpgradeUser.firstShopType == 1" class="formLine">
                     <div class="form-upload">
                         <p>资质：</p>
-                        <div v-if="clubUpgradeUser.businessLicenseImage!=''">
-                            <img :src="clubUpgradeUser.businessLicenseImage" alt="">
+                        <div class="form-upload-image" v-if="clubUpgradeUser.uploadMedicalImage!=''">
+                            <img class="upload-img" :src="clubUpgradeUser.uploadMedicalImage" alt="" id="uploadMedicalImage" @click="showViewerImageFn2()">
+                            <i class="icon mIcon" @click="deleteMedicalImage()"></i>
                         </div>
                         <div class="formLine-file" v-else>
-                            <input class="file" type="file" v-model="clubUpgradeUser.businessLicenseImage">
+                            <input ref="businessMedicaImage" class="file" type="file"  accept="image/png,image/jpeg,image/gif,image/jpg" @change="uploadMedicaImageFn">
                             <i class="icon mIcon file-zizhi"></i>
                         </div>
                         <span class="errTips icon mIcon"></span>
@@ -189,11 +201,13 @@
                 </div>
                 <div class="formLine clear" v-if="clubUpgradeUser.firstShopType == 1">
                     <p><em>*</em>主营内容：</p>
-                    <p class="business">
+                    <p class="business clear">
                         <label v-for="pro in mentuzCampNullList" class="diyBox second" >
                             <input type="checkbox" name="secondShopType" v-model="clubUpgradeUser.mainPros" :value="pro.name" >
                             <i class="icon mIcon">{{pro.name}}</i>
                         </label>
+                    </p>
+                    <p class="business">
                         <input type="text" placeholder="请输入其他自定义品项目" v-model.trim="mainProEdit">
                         <a href="javascript:void(0);" @click="mainProAdd()">确认添加</a>
                     </p>
@@ -201,11 +215,13 @@
                 </div>
                 <div class="formLine clear" v-if="clubUpgradeUser.firstShopType == 2">
                     <p><em>*</em>主营内容：</p>
-                    <p class="business">
+                    <p class="business clear">
                         <label v-for="pro in medicaCampNullList" class="diyBox second">
                             <input type="checkbox" name="secondShopType" v-model="clubUpgradeUser.mainPros" :value="pro.name" >
                             <i class="icon mIcon">{{pro.name}}</i>
                         </label>
+                    </p>
+                    <p class="business">
                         <input type="text" placeholder="请输入其他自定义品项目" v-model.trim="mainProEdit">
                         <a href="javascript:void(0);" @click="mainProAdd()">确认添加</a>
                     </p>

src/main/resources/templates/components/foot-link.html

@@ -1,9 +1,10 @@
 <script charset="utf-8" type="text/javascript" src="/lib/jquery-3.5.1.min.js"></script>
 <script charset="utf-8" type="text/javascript" src="/lib/jquery.slide-2.1.3.js"></script>
 <script charset="utf-8" type="text/javascript" src="/lib/swiper.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/viewer.min.js"></script>
 <script charset="utf-8" type="text/javascript" src="/lib/jquery-confirm.min.js"></script>
 <script charset="utf-8" type="text/javascript" src="/lib/vue2.6.11.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/layer/layer.min.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/utils.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/base.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/utils.js(v=${version})}"></script>

src/main/resources/templates/components/head-link.html

@@ -9,6 +9,7 @@
     <link rel="bookmark" th:href="@{/favicon.png}" type="image/x-icon"/>
     <link href="/lib/swiper.min.css" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
     <link href="/lib/jquery-confirm.min.css" rel="stylesheet" type="text/css">
+    <link href="/lib/css/viewer.min.css" rel="stylesheet" type="text/css">
     <link th:href="@{/css/base/init.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/base/base.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
     <link th:href="@{/css/base/base.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">