提交

src/views/home/merchantEntryApply.vue

@@ -1,5 +1,54 @@
 <template>
-  <div>
+  <div class="bg-F5">
+    <div class="header">
+      <div class="topDiv">
+        <div class="container">
+          <lang-select />
+          <div class="login">
+            <router-link to="/login">请登录</router-link>
+          </div>
+          <div class="register">
+            <router-link to="/register">免费注册</router-link>
+          </div>
+          <div class="rightDiv">
+            <div class="sjrz">
+              <router-link to="/merchantEntry">
+                <img src="@assets/sjrz.png" alt="" />
+                商家入驻
+              </router-link>
+            </div>
+            <div class="line"></div>
+            <div class="spfb">
+              <img src="@assets/spfb.png" alt="" />
+              商品发布
+            </div>
+            <div class="line"></div>
+            <div class="spfb">
+              个人中心
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="logoDiv container">
+        <div class="logoTitle">中国钢制家具产业聚集网</div>
+        <div class="searchDiv">
+          <el-select class="searchFl" v-model="homeSearchOption" placeholder="">
+            <el-option label="产品" value="1"></el-option>
+            <el-option label="企业" value="2"></el-option>
+          </el-select>
+          <span class="line"></span>
+          <el-input
+            placeholder="请输入内容"
+            v-model="homeSearchVal"
+            class="input-with-select"
+          >
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-input>
+          <el-button class="searchBtn">搜索</el-button>
+        </div>
+      </div>
+      <y-nav />
+    </div>
     <div class="container">
       <div class="partTitle"><span class="orangeLine"></span>商户入驻申请</div>
       <el-form class="formPanel" ref="form" :model="form" label-width="280px">
@@ -29,26 +78,29 @@
           <el-select
             class="quyuSel"
             v-model="form.sheng"
-            placeholder="请选择活动区域"
+            placeholder="请选择省"
+            @change="provinceChange"
           >
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
+            <el-option label="河南" value="河南"></el-option>
+            <el-option label="北京" value="北京"></el-option>
           </el-select>
           <el-select
             class="quyuSel"
             v-model="form.shi"
-            placeholder="请选择活动区域"
+            placeholder="请选择市"
+            @change="cityChange"
           >
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
+            <el-option label="洛阳" value="洛阳"></el-option>
+            <el-option label="郑州" value="郑州"></el-option>
           </el-select>
           <el-select
             class="quyuSel"
             v-model="form.qu"
-            placeholder="请选择活动区域"
+            placeholder="请选择区县"
+            @change="countyChange"
           >
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
+            <el-option label="洛龙" value="洛龙"></el-option>
+            <el-option label="老城" value="老城"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item class="formItem" label="详细地址">
@@ -57,13 +109,14 @@
         <el-form-item class="formItem" label="经纬度选择">
           <div class="longLatDiv">
             <span>经度</span>
-            <el-input class="input" v-model="form.long"></el-input>
+            <el-input class="input" v-model="form.lng"></el-input>
           </div>
           <div class="longLatDiv">
-            <span>经度</span>
+            <span>纬度</span>
             <el-input class="input" v-model="form.lat"></el-input>
           </div>
-          <el-button class="submitBtn" @click="chooseMap">选择</el-button>
+          <el-button class="submitBtn" @click="mapAddress">{{ mapVisible ? "关闭" : "选择" }}</el-button>
+          <div :class="{ map: true, show: mapVisible }" id="map"></div>
         </el-form-item>
         <el-form-item class="formItem" label="企业法人">
           <el-input v-model="form.qytype"></el-input>
@@ -85,6 +138,7 @@
               <div class="txt">上传图片</div>
             </div>
           </el-upload>
+          <div class="info">有效期内的企业营业执照，图片仅支持JPG,PNG格式，大小小于2M</div>
         </el-form-item>
         <el-form-item class="formItem" label="企业默认图片">
           <el-upload class="avatar-uploader" action="" :show-file-list="false">
@@ -123,11 +177,17 @@
 <script>
 import { Component, Vue } from "vue-property-decorator";
 import BMap from "BMap";
+import langSelect from "@/components/LangSelect.vue";
+import yNav from "@/layout/components/nav.vue";
 export default {
   name: "app",
-  components: {},
+  components: {
+    yNav,
+  },
   data() {
     return {
+      homeSearchVal: "",
+      homeSearchOption: "1",
       form: {
         name: "",
         password: "",
@@ -139,18 +199,17 @@ export default {
         qu: "",
         address: "",
         imageUrl: "",
-        long: "",
+        lng: "",
         lat: ""
       },
-      mapVisible: false
+      mapVisible: false,
+      local:null,
     };
   },
   methods: {
     onSubmit() {},
     chooseMap() {
-      // this.mapVisible = true;
-      document.getElementById("mapDiv").style.opacity = 1;
-      document.getElementById("mapDiv").style.zIndex = 99;
+      this.mapVisible = true;
     },
     createMap() {
       var that = this;
@@ -163,8 +222,73 @@ export default {
         })
       );
       map.enableScrollWheelZoom(true);
+      map.addEventListener("click", function(e) {
+        map.clearOverlays();
+        var pt = e.point;
+        map.addOverlay(new BMap.Marker(pt));
+        that.form.lng = pt.lng;
+        that.form.lat = pt.lat;
+      });
       return map;
-    }
+    },
+    provinceChange(val){
+      var that = this;
+      var map = that.createMap();
+      map.centerAndZoom(val,11);
+    },
+    cityChange(val){
+      var that = this;
+      var map = that.createMap();
+      map.centerAndZoom(val,13);
+    },
+    countyChange(val){
+      var that = this;
+      var map = that.createMap();
+      var myGeo = new BMap.Geocoder();
+      map.centerAndZoom(val,15);
+      myGeo.getPoint(that.form.shi + that.form.qu, function(point) {
+          if (point) {
+              map.clearOverlays();
+              map.centerAndZoom(point, 12);
+              map.addOverlay(new BMap.Marker(point));
+              that.form.lng = point.lng;
+              that.form.lat = point.lat;
+          } else {
+              that.$message('无法解析地址,请完善详细地址信息或者手动点击地图选择');
+          }
+      },that.form.sheng);
+    },
+    mapFun(){
+      var that = this;
+      var map = that.createMap();
+      if (that.local.getResults().getPoi(0)) {
+          var pp = that.local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
+          map.centerAndZoom(pp, 18);
+          map.addOverlay(new BMap.Marker(pp)); //添加标注
+          that.form.lng = pp.lng;
+          that.form.lat = pp.lat;
+      } else {
+          that.$message("无法解析地址,请完善详细地址信息或者手动点击地图选择");
+      }
+    },
+    mapAddress(){
+      var that = this;
+      if(that.form.sheng=='' || that.form.shi=='' || that.form.qu==''){
+        that.$message('请选择区域！');
+        return;
+      }
+      if(that.form.address == ''){
+        that.$message('输入详细地址后定位！');
+        return;
+      }
+      that.mapVisible = !that.mapVisible;
+      var map = that.createMap();
+      map.clearOverlays();
+      that.local = new BMap.LocalSearch(map, { //智能搜索
+          onSearchComplete: that.mapFun
+      });
+      that.local.search(that.form.shi +that.form.qu + that.form.address);
+    },
   },
   mounted() {
     var that = this;
@@ -202,6 +326,12 @@ export default {
         margin-right: 0;
       }
     }
+    .info{
+      height: 3rem;
+      line-height: 3rem;
+      font-size: 1.2rem;
+      color:#666;
+    }
   }
   .formTitle {
     font-size: 1.6rem;
@@ -259,22 +389,18 @@ export default {
     color: #333;
   }
 }
-#mapDiv{
-  // position: absolute;
-  // top: 0;
-  // bottom:0;
-  // left: 0;
-  // right: 0;
+.map{
   width: 100%;
   height: 50rem;
-  // opacity: 0;
-  z-index:0;
-}
-#map {
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  top: 5rem;
+  left: 0;
+  z-index: 1;
+  display: none;
+  &.show {
+      display: block;
+    }
 }
-
 .avatar {
   width: 178px;
   height: 178px;