提交

src/layout/components/header.vue

@@ -15,7 +15,7 @@
         </div>
         <div class="rightDiv">
           <div class="sjrz">
-            <router-link to="/merchantEntry">
+            <router-link to="/shopEnter">
               <img src="@assets/sjrz.png" alt="" />
               商家入驻
             </router-link>
@@ -51,7 +51,7 @@
           <el-button class="searchBtn">搜索</el-button>
         </div>
       </div>
-      <div class="  navs">
+      <div class="navs navHome">
         <router-link
           class="nav"
           v-for="{ url, title } in nav"
@@ -85,7 +85,9 @@ export default class extends Vue {
 </script>
 
 <style scoped lang="scss">
+// 顶部条样式
 .header {
+  background: #fff;
   .topDiv {
     height: 4rem;
     line-height: 4rem;
@@ -93,10 +95,6 @@ export default class extends Vue {
     background: #f5f5f5;
     border: 0.1rem solid #e5e5e5;
     .container {
-      .home {
-        color: #fd5522;
-        margin-left: 2rem;
-      }
       .login {
         a {
           color: #fd5522;
@@ -140,13 +138,13 @@ export default class extends Vue {
     }
   }
   .logoDiv {
-    padding: 3rem 0;
+    padding: 3rem 0 1rem 0;
     .logoTitle {
       height: 4rem;
       line-height: 4rem;
       font-size: 2.4rem;
       margin-right: 1rem;
-      display: inline;
+      display: inline-block;
       vertical-align: middle;
     }
     .searchDiv {
@@ -162,6 +160,7 @@ export default class extends Vue {
       .searchFl {
         width: 8rem;
         color: #fd5522;
+        height: 100%;
       }
       .line {
         display: inline-block;
@@ -175,9 +174,11 @@ export default class extends Vue {
       }
       .input-with-select {
         width: 38.9rem;
+        height: 100%;
       }
       .searchBtn {
         width: 8rem;
+        height: 100%;
         font-size: 1.6rem;
         background: #fd5522;
         color: #fff;
@@ -204,3 +205,31 @@ export default class extends Vue {
   }
 }
 </style>
+<style lang="scss">
+.navHome {
+  .router-link-active {
+    border-bottom: 0.2rem solid #fd5522 !important;
+    color: #fd5522 !important;
+  }
+}
+.searchDiv {
+  .el-select .el-input {
+    color: #fd5522;
+    .el-input__inner {
+      border: 0;
+      color: #fd5522;
+    }
+  }
+  .el-select-dropdown__item.selected {
+    color: #fd5522;
+  }
+  .el-select .el-input .el-select__caret {
+    color: #fd5522;
+  }
+  .input-with-select {
+    .el-input__inner {
+      border: 0;
+    }
+  }
+}
+</style>

src/router/index.ts

@@ -49,17 +49,17 @@ const router = new VueRouter({
         {
           path: "/login",
           component: () => import("../views/account/login.vue"),
-          meta: { title: "login",NoHeader: true }
+          meta: { title: "login", NoHeader: true }
         },
         {
           path: "/register",
           component: () => import("../views/account/register.vue"),
-          meta: { title: "register",NoHeader: true }
+          meta: { title: "register", NoHeader: true }
         },
         {
           path: "/findPassword",
           component: () => import("../views/account/findPassword.vue"),
-          meta: { title: "findPassword",NoHeader: true }
+          meta: { title: "findPassword", NoHeader: true }
         },
         {
           path: "/user",
@@ -138,16 +138,6 @@ const router = new VueRouter({
           path: "/news",
           component: () => import("../views/news/index.vue"),
           meta: { title: "news" }
-        },
-        {
-          path: "/merchantEntry",
-          component: () => import("../views/home/merchantEntry.vue"),
-          meta: { title: "merchantEntry" }
-        },
-        {
-          path: "/merchantEntry/apply",
-          component: () => import("../views/home/merchantEntryApply.vue"),
-          meta: { title: "merchantEntryApply" }
         }
       ]
     },

src/styles/index.scss

@@ -51,9 +51,6 @@ html {
     .bg-F5 {
       background: #f5f5f5;
     }
-    .bg-white {
-      background: #FFF;
-    }
     .relative {
       position: relative;
     }
@@ -75,180 +72,3 @@ html {
     }
   }
 }
-// 顶部条样式
-.header {
-  background: #fff;
-  .topDiv {
-    height: 4rem;
-    line-height: 4rem;
-    font-size: 1.2rem;
-    background: #f5f5f5;
-    border: 0.1rem solid #e5e5e5;
-    .container {
-      .login {
-        a{
-          color: #fd5522; 
-        }
-        margin-right: 2rem;
-        margin-left: 2rem;
-        display: inline-block;
-      }
-      .register {
-        color: #333;
-        display: inline-block;
-      }
-      .rightDiv {
-        height: 4rem;
-        float: right;
-        color: #fd5522;
-        div {
-          margin-right: 2rem;
-          vertical-align: middle;
-        }
-        .sjrz,
-        .spfb {
-          a{
-            color: #fd5522;
-          }
-          display: inline-block;
-          img {
-            height: 1.4rem;
-            margin-right: 0.2rem;
-            vertical-align: middle;
-          }
-        }
-        .line {
-          height: 1.4rem;
-          width: 0.1rem;
-          background: #e5e5e5;
-          display: inline-block;
-          vertical-align: middle;
-        }
-      }
-    }
-  }
-  .logoDiv {
-    padding: 3rem 0 1rem 0;
-    .logoTitle {
-      height: 4rem;
-      line-height: 4rem;
-      font-size: 2.4rem;
-      margin-right: 1rem;
-      display: inline;
-      vertical-align: middle;
-    }
-    .searchDiv {
-      height: 4rem;
-      line-height: 4rem;
-      width: 55rem;
-      font-size: 1.4rem;
-      display: inline-block;
-      border-radius: 2rem;
-      border: 1px solid #fd5522;
-      overflow: hidden;
-      vertical-align: middle;
-      .searchFl {
-        width: 8rem;
-        color: #fd5522;
-        height:100%;
-      }
-      .line {
-        display: inline-block;
-        height: 1.8rem;
-        width: 0.1rem;
-        background: #fd5522;
-        vertical-align: middle;
-      }
-      .el-icon-search {
-        color: #fd5522;
-      }
-      .input-with-select {
-        width: 38.9rem;
-        height: 100%;
-      }
-      .searchBtn {
-        width: 8rem;
-        height: 100%;
-        font-size: 1.6rem;
-        background: #fd5522;
-        color: #fff;
-        border: 0;
-        border-radius: 0;
-      }
-    }
-  }
-}
-.el-pagination.is-background .el-pager li:not(.disabled).active {
-  background: #fd5522;
-}
-.el-pagination.is-background .el-pager li:not(.disabled):hover {
-  color: #fd5522;
-}
-.searchDiv {
-  .el-select .el-input {
-    color: #fd5522;
-    .el-input__inner {
-      border: 0;
-      color: #fd5522;
-    }
-  }
-  .input-with-select {
-    .el-input__inner {
-      border: 0;
-    }
-  }
-}
-.bannerDiv {
-  .bannerD {
-    .el-carousel__container {
-      height: 100%;
-    }
-  }
-  .el-carousel__button {
-    background-color: #fd5522;
-  }
-}
-.qyrzgs th {
-  background: #fd5522;
-  color: #fff;
-  padding: 0.6rem 0;
-}
-.qyrzg tr.el-table__row--striped td {
-  background: #fff6f4;
-}
-.formPanel {
-  .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409eff;
-  }
-}
-.loginDiv{
-  .el-checkbox__input.is-checked .el-checkbox__inner{
-    background-color: #FFF;
-    border-color: #e5e5e5;
-  }
-  .el-checkbox__inner::after{
-    border-color: #333;
-  }
-  .el-checkbox__inner:hover {
-    border-color: #e5e5e5;
-  }
-  .el-checkbox__input.is-checked + .el-checkbox__label{
-    color: #333;
-  }
-}
-.el-select-dropdown__item.selected{
-  color: #fd5522;
-}
-.navs{
-  .router-link-active{
-    border-bottom: 0.2rem solid #fd5522 !important;
-    color: #fd5522 !important;
-  }
-} 

src/views/account/login.vue

@@ -172,3 +172,20 @@ export default {
   padding-bottom: 3rem;
 }
 </style>
+<style lang="scss">
+.loginDiv {
+  .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: #fff;
+    border-color: #e5e5e5;
+  }
+  .el-checkbox__inner::after {
+    border-color: #333;
+  }
+  .el-checkbox__inner:hover {
+    border-color: #e5e5e5;
+  }
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: #333;
+  }
+}
+</style>

src/views/home/index.vue

@@ -401,7 +401,6 @@ export default {
     font-size: 1.6rem;
     color: #333;
     .more {
-      display: inline-block;
       line-height: 3rem;
       font-size: 1.4rem;
       color: #999;
@@ -555,7 +554,6 @@ export default {
         margin-right: 0.4rem;
       }
       .more {
-        display: inline-block;
         line-height: 3rem;
         font-size: 1.4rem;
         color: #999;
@@ -659,3 +657,15 @@ export default {
   margin-top: 2rem;
 }
 </style>
+<style lang="scss">
+.bannerDiv {
+  .bannerD {
+    .el-carousel__container {
+      height: 100%;
+    }
+  }
+  .el-carousel__button {
+    background-color: #fd5522;
+  }
+}
+</style>

src/views/home/merchantEntry.vue

@@ -1,175 +0,0 @@
-<template>
-  <div class="bg-F5">
-    <div class="bannerDiv">
-      <div class="container">
-        <router-link to="/merchantEntry/apply">商家入驻申请</router-link>
-      </div>
-    </div>
-    <div class="container">
-      <div class="partTitle"><span class="orangeLine"></span>企业认证公示</div>
-      <div class="cxtj">
-        <span>企业名称：</span>
-        <el-input
-          v-model="name"
-          clearable
-          size="small"
-          placeholder="请输入企业名称"
-          style="width:38rem;"
-        ></el-input>
-        <span class="ml2rem">审核状态：</span>
-        <el-select
-          v-model="shStatus"
-          clearable
-          size="small"
-          placeholder="请选择"
-          style="width:14rem;"
-        >
-          <el-option
-            v-for="item in statusArr"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          ></el-option>
-        </el-select>
-        <el-button class="searchBtn" size="small">查询</el-button>
-      </div>
-      <el-table class="qyrzgs" stripe :data="tableData">
-        <el-table-column type="index" label="序号" width="50"></el-table-column>
-        <el-table-column prop="name" label="市" width="180"></el-table-column>
-        <el-table-column prop="address" label="区(县)"></el-table-column>
-        <el-table-column prop="address" label="企业名称"></el-table-column>
-        <el-table-column prop="address" label="申请日期"></el-table-column>
-        <el-table-column prop="address" label="审核状态"></el-table-column>
-        <el-table-column prop="address" label="审核日期"></el-table-column>
-        <el-table-column prop="address" label="驳回理由"></el-table-column>
-        <el-table-column
-          prop="date"
-          label="审核日期"
-          width="180"
-        ></el-table-column>
-      </el-table>
-      <el-pagination
-        class="pageDiv"
-        background
-        @current-change="handleCurrentChange"
-        :page-size="pageSize"
-        :current-page="currentPage"
-        layout="prev, pager, next,total, jumper"
-        :total="total"
-      ></el-pagination>
-    </div>
-  </div>
-</template>
-<script>
-import { Component, Vue } from "vue-property-decorator";
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      name: "",
-      shStatus: "",
-      statusArr: [
-        {
-          value: "选项1",
-          label: "黄金糕"
-        },
-        {
-          value: "选项2",
-          label: "双皮奶"
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎"
-        },
-        {
-          value: "选项4",
-          label: "龙须面"
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭"
-        }
-      ],
-      tableData: [
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄"
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1517 弄"
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1519 弄"
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄"
-        }
-      ],
-      pageSize: 10,
-      currentPage: 1,
-      total: 24
-    };
-  },
-  methods: {
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.requestData();
-    }
-  }
-};
-</script>
-<style scoped lang="scss">
-.bannerDiv {
-  height: 21rem;
-}
-.partTitle {
-  padding: 3rem 0 2rem 0;
-  font-size: 1.8rem;
-  color: #333;
-  .orangeLine {
-    display: inline-block;
-    height: 1.8rem;
-    width: 0.3rem;
-    background: #fd5522;
-    vertical-align: middle;
-    border-radius: 0.15rem;
-    margin-right: 1rem;
-  }
-}
-.cxtj {
-  span {
-    display: inline-block;
-    height: 3.6rem;
-    line-height: 3.6rem;
-    font-size: 1.4rem;
-    color: #333;
-    margin-right: 1rem;
-  }
-  .searchBtn {
-    margin-left: 1rem;
-    background: #fd5522;
-    color: #fff;
-    border-color: #fd5522;
-  }
-}
-.qyrzgs {
-  width: 100%;
-  margin-top: 2rem;
-}
-.pageDiv {
-  text-align: right;
-  margin-top: 0.5rem;
-  padding: 2rem 0;
-}
-.ml2rem {
-  margin-left: 2rem;
-}
-</style>

src/views/home/merchantEntryApply.vue

@@ -1,368 +0,0 @@
-<template>
-  <div class="bg-F5">
-    <div class="container">
-      <div class="partTitle"><span class="orangeLine"></span>商户入驻申请</div>
-      <el-form class="formPanel" ref="form" :model="form" label-width="280px">
-        <div class="formTitle">
-          账户信息
-          <span class="subTitle">账号用于登录商户平台</span>
-        </div>
-        <el-form-item class="formItem" label="用户名">
-          <el-input v-model="form.name"></el-input>
-        </el-form-item>
-        <el-form-item class="formItem" label="请设置密码">
-          <el-input v-model="form.password"></el-input>
-        </el-form-item>
-        <el-form-item class="formItem" label="请确认密码">
-          <el-input v-model="form.surepassword"></el-input>
-        </el-form-item>
-
-        <div class="line"></div>
-        <div class="formTitle">企业基本信息</div>
-        <el-form-item class="formItem" label="企业名称">
-          <el-input v-model="form.qyname"></el-input>
-        </el-form-item>
-        <el-form-item class="formItem" label="企业类型">
-          <el-input v-model="form.qytype"></el-input>
-        </el-form-item>
-        <el-form-item class="formItem" label="企业所在地">
-          <el-select
-            class="quyuSel"
-            v-model="form.sheng"
-            placeholder="请选择省"
-            @change="provinceChange"
-          >
-            <el-option label="河南" value="河南"></el-option>
-            <el-option label="北京" value="北京"></el-option>
-          </el-select>
-          <el-select
-            class="quyuSel"
-            v-model="form.shi"
-            placeholder="请选择市"
-            @change="cityChange"
-          >
-            <el-option label="洛阳" value="洛阳"></el-option>
-            <el-option label="郑州" value="郑州"></el-option>
-          </el-select>
-          <el-select
-            class="quyuSel"
-            v-model="form.qu"
-            placeholder="请选择区县"
-            @change="countyChange"
-          >
-            <el-option label="洛龙" value="洛龙"></el-option>
-            <el-option label="老城" value="老城"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item class="formItem" label="详细地址">
-          <el-input v-model="form.address"></el-input>
-        </el-form-item>
-        <el-form-item class="formItem" label="经纬度选择">
-          <div class="longLatDiv">
-            <span>经度</span>
-            <el-input class="input" v-model="form.lng"></el-input>
-          </div>
-          <div class="longLatDiv">
-            <span>纬度</span>
-            <el-input class="input" v-model="form.lat"></el-input>
-          </div>
-          <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>
-        </el-form-item>
-        <el-form-item class="formItem" label="联系电话">
-          <el-input v-model="form.qytype"></el-input>
-        </el-form-item>
-        <el-form-item class="formItem" label="成立日期">
-          <el-input v-model="form.qytype"></el-input>
-        </el-form-item>
-        <el-form-item class="formItem" label="统一社会信用代码">
-          <el-input v-model="form.qytype"></el-input>
-        </el-form-item>
-        <el-form-item class="formItem" label="营业执照">
-          <el-upload class="avatar-uploader" action="" :show-file-list="false">
-            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
-            <div class="uploadIconDiv" v-else>
-              <i class="el-icon-plus avatar-uploader-icon"></i>
-              <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">
-            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
-            <div class="uploadIconDiv" v-else>
-              <i class="el-icon-plus avatar-uploader-icon"></i>
-              <div class="txt">上传图片</div>
-            </div>
-          </el-upload>
-        </el-form-item>
-        <el-form-item class="formItem" label="企业宣传图片">
-          <el-upload class="avatar-uploader" action="" :show-file-list="false">
-            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
-            <div class="uploadIconDiv" v-else>
-              <i class="el-icon-plus avatar-uploader-icon"></i>
-              <div class="txt">上传图片</div>
-            </div>
-          </el-upload>
-        </el-form-item>
-        <el-form-item class="formItem" label="企业介绍">
-          <el-input type="textarea" v-model="form.qytype"></el-input>
-        </el-form-item>
-        <div class="line"></div>
-        <el-form-item class="formItem tc">
-          <el-button class="submitBtn" @click="onSubmit"
-            >提交注册信息</el-button
-          >
-        </el-form-item>
-      </el-form>
-      <div id="mapDiv">
-        <div id="map"></div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { Component, Vue } from "vue-property-decorator";
-import BMap from "BMap";
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      form: {
-        name: "",
-        password: "",
-        surepassword: "",
-        qyname: "",
-        qytype: "",
-        sheng: "",
-        shi: "",
-        qu: "",
-        address: "",
-        imageUrl: "",
-        lng: "",
-        lat: ""
-      },
-      mapVisible: false,
-      local: null
-    };
-  },
-  methods: {
-    onSubmit() {},
-    chooseMap() {
-      this.mapVisible = true;
-    },
-    createMap() {
-      var that = this;
-      var map = new BMap.Map("map", { minZoom: 8, maxZoom: 16 });
-      var point = new BMap.Point(112.471384, 34.6251625);
-      map.centerAndZoom(point, 13);
-      map.addControl(
-        new BMap.MapTypeControl({
-          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
-        })
-      );
-      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;
-
-    this.createMap();
-  }
-};
-</script>
-<style scoped lang="scss">
-.partTitle {
-  padding: 3rem 0 2rem 0;
-  font-size: 1.8rem;
-  color: #333;
-  .orangeLine {
-    display: inline-block;
-    height: 1.8rem;
-    width: 0.3rem;
-    background: #fd5522;
-    vertical-align: middle;
-    border-radius: 0.15rem;
-    margin-right: 1rem;
-  }
-}
-.formPanel {
-  background: #fff;
-  padding: 2rem;
-  box-sizing: border-box;
-  z-index: 1;
-  .formItem {
-    width: 80%;
-    .quyuSel {
-      width: 31%;
-      margin-right: 3.5%;
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-    .info {
-      height: 3rem;
-      line-height: 3rem;
-      font-size: 1.2rem;
-      color: #666;
-    }
-  }
-  .formTitle {
-    font-size: 1.6rem;
-    color: #333;
-    padding-bottom: 4rem;
-    .subTitle {
-      color: #999;
-    }
-  }
-  .line {
-    width: 100%;
-    height: 0.1rem;
-    background: #e5e5e5;
-    margin: 3rem 0 2rem 0;
-  }
-  .submitBtn {
-    color: #fff;
-    background: #fd5522;
-    border-color: #fd5522;
-  }
-  .longLatDiv {
-    width: 40%;
-    float: left;
-    margin-right: 1rem;
-    .input {
-      width: 80%;
-      margin-left: 1rem;
-    }
-  }
-}
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-.uploadIconDiv {
-  width: 12rem;
-  height: 12rem;
-  text-align: center;
-  padding: 3.4rem 0;
-  box-sizing: border-box;
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-  }
-  .txt {
-    height: 2.4rem;
-    line-height: 2.4rem;
-    font-size: 1.4rem;
-    color: #333;
-  }
-}
-.map {
-  width: 100%;
-  height: 50rem;
-  position: absolute;
-  top: 5rem;
-  left: 0;
-  z-index: 1;
-  display: none;
-  &.show {
-    display: block;
-  }
-}
-.avatar {
-  width: 178px;
-  height: 178px;
-  display: block;
-}
-.tc {
-  text-align: center;
-}
-</style>

src/views/shops/enter/add.vue

@@ -1,238 +1,382 @@
 <template>
-  <div class="container">
-    <h3>商家入住申请</h3>
-    <div class="block">
-      <div class="title">账户信息（账号用于登录商户平台）</div>
-      <el-form
-        class="form"
-        ref="registerForm"
-        :model="form"
-        :rules="rules"
-        label-width="200px"
-      >
-        <el-form-item label="用户名:" prop="userName">
-          <el-input v-model="form.userName"></el-input>
-        </el-form-item>
-        <el-form-item label="请设置密码:" prop="passWord">
-          <el-input show-password v-model="form.passWord"></el-input>
-        </el-form-item>
-        <el-form-item label="请确认密码:" prop="checkPassWord">
-          <el-input show-password v-model="form.checkPassWord"></el-input>
+  <div class="bg-F5">
+    <div class="container">
+      <div class="partTitle"><span class="orangeLine"></span>商户入驻申请</div>
+      <el-form class="formPanel" ref="form" :model="form" label-width="280px">
+        <div class="formTitle">
+          账户信息
+          <span class="subTitle">账号用于登录商户平台</span>
+        </div>
+        <el-form-item class="formItem" label="用户名">
+          <el-input v-model="form.name"></el-input>
         </el-form-item>
-      </el-form>
-    </div>
-    <div class="block">
-      <div class="title">企业基本信息</div>
-      <el-form
-        class="form"
-        ref="infoForm"
-        :model="form"
-        :rules="rules"
-        label-width="200px"
-      >
-        <el-form-item label="企业名称:">
-          <el-input v-model="form.username"></el-input>
-        </el-form-item>
-        <el-form-item label="企业类型:">
-          <el-input v-model="form.username"></el-input>
-        </el-form-item>
-        <el-form-item label="企业所在地:">
-          <el-input v-model="form.username"></el-input>
+        <el-form-item class="formItem" label="请设置密码">
+          <el-input v-model="form.password"></el-input>
         </el-form-item>
-
-        <el-form-item label="详细地址:">
-          <el-input v-model="form.username"></el-input>
+        <el-form-item class="formItem" label="请确认密码">
+          <el-input v-model="form.surepassword"></el-input>
         </el-form-item>
 
-        <el-form-item label="经纬度选择:" class="jwd">
-          <el-row>
-            <el-col :span="10">
-              <el-col :span="8">
-                经度:
-              </el-col>
-              <el-col :span="16">
-                <el-input readonly v-model="form.jd"></el-input>
-              </el-col>
-            </el-col>
-            <el-col :span="10">
-              <el-col :span="8">
-                纬度:
-              </el-col>
-              <el-col :span="16">
-                <el-input readonly v-model="form.wd"></el-input>
-              </el-col>
-            </el-col>
-            <el-col :span="4" class="relative">
-              <el-button @click="mapShow = !mapShow">
-                {{ mapShow ? "关闭" : "打开" }}地图
-              </el-button>
-
-              <baidu-map
-                :class="{ map: true, show: mapShow }"
-                :scroll-wheel-zoom="true"
-                :center="center"
-                :zoom="15"
-                @moving="syncCenterAndZoom"
-                @moveend="syncCenterAndZoom"
-                @zoomend="syncCenterAndZoom"
-                @ready="handler"
-              >
-                <bm-marker
-                  :position="center"
-                  :dragging="true"
-                  animation="BMAP_ANIMATION_BOUNCE"
-                >
-                  <bm-label
-                    content="企业所在地"
-                    :offset="{ width: -20, height: 30 }"
-                  />
-                </bm-marker>
-                <bm-geolocation
-                  anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
-                  :showAddressBar="true"
-                  :autoLocation="true"
-                ></bm-geolocation>
-              </baidu-map>
-            </el-col>
-          </el-row>
-        </el-form-item>
-        <el-form-item label="企业法人:">
-          <el-input v-model="form.username"></el-input>
-        </el-form-item>
-        <el-form-item label="联系电话:">
-          <el-input v-model="form.username"></el-input>
-        </el-form-item>
-        <el-form-item label="成立日期:">
-          <el-input v-model="form.username"></el-input>
-        </el-form-item>
-        <el-form-item label="统一社会信用代码:">
-          <el-input v-model="form.username"></el-input>
-        </el-form-item>
-        <el-form-item label="营业执照:">
-          <el-input v-model="form.username"></el-input>
-        </el-form-item>
-        <el-form-item label="企业默认图片:">
-          <el-input v-model="form.username"></el-input>
-        </el-form-item>
-        <el-form-item label="企业宣传图片:">
-          <el-input v-model="form.username"></el-input>
-        </el-form-item>
-        <el-form-item label="企业介绍:">
-          <el-input
-            type="textarea"
-            v-model="form.desc"
-            maxlength="500"
-            show-word-limit
-            :autosize="{ minRows: 5, maxRows: 8 }"
-          ></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="submit">提交注册信息</el-button>
-          <!-- <el-button>取消</el-button> -->
+        <div class="line"></div>
+        <div class="formTitle">企业基本信息</div>
+        <el-form-item class="formItem" label="企业名称">
+          <el-input v-model="form.qyname"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="企业类型">
+          <el-input v-model="form.qytype"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="企业所在地">
+          <el-select
+            class="quyuSel"
+            v-model="form.sheng"
+            placeholder="请选择省"
+            @change="provinceChange"
+          >
+            <el-option label="河南" value="河南"></el-option>
+            <el-option label="北京" value="北京"></el-option>
+          </el-select>
+          <el-select
+            class="quyuSel"
+            v-model="form.shi"
+            placeholder="请选择市"
+            @change="cityChange"
+          >
+            <el-option label="洛阳" value="洛阳"></el-option>
+            <el-option label="郑州" value="郑州"></el-option>
+          </el-select>
+          <el-select
+            class="quyuSel"
+            v-model="form.qu"
+            placeholder="请选择区县"
+            @change="countyChange"
+          >
+            <el-option label="洛龙" value="洛龙"></el-option>
+            <el-option label="老城" value="老城"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="formItem" label="详细地址">
+          <el-input v-model="form.address"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="经纬度选择">
+          <div class="longLatDiv">
+            <span>经度</span>
+            <el-input class="input" v-model="form.lng"></el-input>
+          </div>
+          <div class="longLatDiv">
+            <span>纬度</span>
+            <el-input class="input" v-model="form.lat"></el-input>
+          </div>
+          <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>
+        </el-form-item>
+        <el-form-item class="formItem" label="联系电话">
+          <el-input v-model="form.qytype"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="成立日期">
+          <el-input v-model="form.qytype"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="统一社会信用代码">
+          <el-input v-model="form.qytype"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="营业执照">
+          <el-upload class="avatar-uploader" action="" :show-file-list="false">
+            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
+            <div class="uploadIconDiv" v-else>
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+              <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">
+            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
+            <div class="uploadIconDiv" v-else>
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+              <div class="txt">上传图片</div>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item class="formItem" label="企业宣传图片">
+          <el-upload class="avatar-uploader" action="" :show-file-list="false">
+            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
+            <div class="uploadIconDiv" v-else>
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+              <div class="txt">上传图片</div>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item class="formItem" label="企业介绍">
+          <el-input type="textarea" v-model="form.qytype"></el-input>
+        </el-form-item>
+        <div class="line"></div>
+        <el-form-item class="formItem tc">
+          <el-button class="submitBtn" @click="onSubmit"
+            >提交注册信息</el-button
+          >
         </el-form-item>
       </el-form>
+      <div id="mapDiv">
+        <div id="map"></div>
+      </div>
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-import { ElForm } from "element-ui/types/form";
-@Component
-export default class extends Vue {
-  private mapShow = false;
-  handler({ BMap, map }: any) {
-    const geolocation = new BMap.Geolocation();
-    geolocation.getCurrentPosition(({ longitude, latitude }: any) => {
-      this.form.jd = longitude;
-      this.form.wd = latitude;
-    });
-  }
-  syncCenterAndZoom(e: any) {
-    const { lng, lat } = e.target.getCenter();
-    this.form.jd = lng;
-    this.form.wd = lat;
-  }
-  get center() {
-    return { lng: this.form.jd, lat: this.form.wd };
-  }
-  private form = {
-    userName: "",
-    passWord: "",
-    qymc: "",
-    qylx: "",
-    qyszd: "",
-    xxdz: "",
-    jd: "",
-    wd: ""
-  };
-  private rules: IAny = {
-    userName: [
-      { required: true, message: "请输入用户名", trigger: "blur" },
-      { min: 6, max: 11, message: "长度在 6 到 11 个字符", trigger: "blur" }
-    ],
-    passWord: [
-      { required: true, message: "请输入密码", trigger: "blur" },
-      { min: 6, max: 11, message: "长度在 6 到 11 个字符", trigger: "blur" }
-    ],
-    checkPassWord: [
-      { required: true, message: "请再次输入密码", trigger: "blur" },
-      {
-        validator: (rule: any, value = "", next: Function) =>
-          next(
-            value !== this.form.passWord
-              ? new Error("两次输入密码不一致!")
-              : undefined
-          )
+<script>
+import { Component, Vue } from "vue-property-decorator";
+import BMap from "BMap";
+export default {
+  name: "app",
+  components: {},
+  data() {
+    return {
+      form: {
+        name: "",
+        password: "",
+        surepassword: "",
+        qyname: "",
+        qytype: "",
+        sheng: "",
+        shi: "",
+        qu: "",
+        address: "",
+        imageUrl: "",
+        lng: "",
+        lat: ""
+      },
+      mapVisible: false,
+      local: null
+    };
+  },
+  methods: {
+    onSubmit() {},
+    chooseMap() {
+      this.mapVisible = true;
+    },
+    createMap() {
+      var that = this;
+      var map = new BMap.Map("map", { minZoom: 8, maxZoom: 16 });
+      var point = new BMap.Point(112.471384, 34.6251625);
+      map.centerAndZoom(point, 13);
+      map.addControl(
+        new BMap.MapTypeControl({
+          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
+        })
+      );
+      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;
       }
-    ]
-  };
-  async submit() {
-    console.log("submit");
-    const x = await (this.$refs.registerForm as ElForm)
-      .validate()
-      .catch(x => x);
-    console.log(x);
+      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;
+
+    this.createMap();
   }
-}
+};
 </script>
-<style lang="scss" scoped>
-.container {
+<style scoped lang="scss">
+.partTitle {
+  padding: 3rem 0 2rem 0;
+  font-size: 1.8rem;
   color: #333;
-  > h3 {
-    margin: 10px;
+  .orangeLine {
+    display: inline-block;
+    height: 1.8rem;
+    width: 0.3rem;
+    background: #fd5522;
+    vertical-align: middle;
+    border-radius: 0.15rem;
+    margin-right: 1rem;
   }
-  .block {
-    margin: 20px 0;
-    background: #ccc;
-    overflow: hidden;
-    .title {
-      background: #8f949a;
-      padding: 10px;
-    }
-    .form {
-      width: 800px;
-      margin: 20px auto;
-      .jwd {
-        .el-col-8 {
-          text-align: center;
-        }
-        .el-col-4 {
-          text-align: right;
-        }
+}
+.formPanel {
+  background: #fff;
+  padding: 2rem;
+  box-sizing: border-box;
+  z-index: 1;
+  .formItem {
+    width: 80%;
+    .quyuSel {
+      width: 31%;
+      margin-right: 3.5%;
+      &:last-child {
+        margin-right: 0;
       }
     }
+    .info {
+      height: 3rem;
+      line-height: 3rem;
+      font-size: 1.2rem;
+      color: #666;
+    }
+  }
+  .formTitle {
+    font-size: 1.6rem;
+    color: #333;
+    padding-bottom: 4rem;
+    .subTitle {
+      color: #999;
+    }
+  }
+  .line {
+    width: 100%;
+    height: 0.1rem;
+    background: #e5e5e5;
+    margin: 3rem 0 2rem 0;
+  }
+  .submitBtn {
+    color: #fff;
+    background: #fd5522;
+    border-color: #fd5522;
   }
-  .map {
-    width: 300px;
-    height: 300px;
-    position: absolute;
-    top: 40px;
-    right: 0;
-    z-index: 1;
-    display: none;
-    &.show {
-      display: block;
+  .longLatDiv {
+    width: 40%;
+    float: left;
+    margin-right: 1rem;
+    .input {
+      width: 80%;
+      margin-left: 1rem;
     }
   }
 }
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.uploadIconDiv {
+  width: 12rem;
+  height: 12rem;
+  text-align: center;
+  padding: 3.4rem 0;
+  box-sizing: border-box;
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+  }
+  .txt {
+    height: 2.4rem;
+    line-height: 2.4rem;
+    font-size: 1.4rem;
+    color: #333;
+  }
+}
+.map {
+  width: 100%;
+  height: 50rem;
+  position: absolute;
+  top: 5rem;
+  left: 0;
+  z-index: 1;
+  display: none;
+  &.show {
+    display: block;
+  }
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.tc {
+  text-align: center;
+}
+</style>
+<style lang="scss">
+.formPanel {
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+}
 </style>

src/views/shops/enter/index.vue

@@ -1,10 +1,193 @@
 <template>
-  <div>
-    企业认证公示
+  <div class="bg-F5">
+    <div class="bannerDiv">
+      <div class="container">
+        <router-link to="/shopEnter/add">商家入驻申请</router-link>
+      </div>
+    </div>
+    <div class="container">
+      <div class="partTitle"><span class="orangeLine"></span>企业认证公示</div>
+      <div class="cxtj">
+        <span>企业名称：</span>
+        <el-input
+          v-model="name"
+          clearable
+          size="small"
+          placeholder="请输入企业名称"
+          style="width:38rem;"
+        ></el-input>
+        <span class="ml2rem">审核状态：</span>
+        <el-select
+          v-model="shStatus"
+          clearable
+          size="small"
+          placeholder="请选择"
+          style="width:14rem;"
+        >
+          <el-option
+            v-for="item in statusArr"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+        <el-button class="searchBtn" size="small">查询</el-button>
+      </div>
+      <el-table class="qyrzgs" stripe :data="tableData">
+        <el-table-column type="index" label="序号" width="50"></el-table-column>
+        <el-table-column prop="name" label="市" width="180"></el-table-column>
+        <el-table-column prop="address" label="区(县)"></el-table-column>
+        <el-table-column prop="address" label="企业名称"></el-table-column>
+        <el-table-column prop="address" label="申请日期"></el-table-column>
+        <el-table-column prop="address" label="审核状态"></el-table-column>
+        <el-table-column prop="address" label="审核日期"></el-table-column>
+        <el-table-column prop="address" label="驳回理由"></el-table-column>
+        <el-table-column
+          prop="date"
+          label="审核日期"
+          width="180"
+        ></el-table-column>
+      </el-table>
+      <el-pagination
+        class="pageDiv"
+        background
+        @current-change="handleCurrentChange"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        layout="prev, pager, next,total, jumper"
+        :total="total"
+      ></el-pagination>
+    </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-@Component
-export default class extends Vue {}
+<script>
+import { Component, Vue } from "vue-property-decorator";
+export default {
+  name: "app",
+  components: {},
+  data() {
+    return {
+      name: "",
+      shStatus: "",
+      statusArr: [
+        {
+          value: "选项1",
+          label: "黄金糕"
+        },
+        {
+          value: "选项2",
+          label: "双皮奶"
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎"
+        },
+        {
+          value: "选项4",
+          label: "龙须面"
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭"
+        }
+      ],
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄"
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄"
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄"
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄"
+        }
+      ],
+      pageSize: 10,
+      currentPage: 1,
+      total: 24
+    };
+  },
+  methods: {
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.requestData();
+    }
+  }
+};
 </script>
+<style scoped lang="scss">
+.bannerDiv {
+  height: 21rem;
+  line-height: 21rem;
+  text-align: center;
+}
+.partTitle {
+  padding: 3rem 0 2rem 0;
+  font-size: 1.8rem;
+  color: #333;
+  .orangeLine {
+    display: inline-block;
+    height: 1.8rem;
+    width: 0.3rem;
+    background: #fd5522;
+    vertical-align: middle;
+    border-radius: 0.15rem;
+    margin-right: 1rem;
+  }
+}
+.cxtj {
+  span {
+    display: inline-block;
+    height: 3.6rem;
+    line-height: 3.6rem;
+    font-size: 1.4rem;
+    color: #333;
+    margin-right: 1rem;
+  }
+  .searchBtn {
+    margin-left: 1rem;
+    background: #fd5522;
+    color: #fff;
+    border-color: #fd5522;
+  }
+}
+.qyrzgs {
+  width: 100%;
+  margin-top: 2rem;
+}
+.pageDiv {
+  text-align: right;
+  margin-top: 0.5rem;
+  padding: 2rem 0;
+}
+.ml2rem {
+  margin-left: 2rem;
+}
+</style>
+<style lang="scss">
+.qyrzgs th {
+  background: #fd5522;
+  color: #fff;
+  padding: 0.6rem 0;
+}
+.qyrzg tr.el-table__row--striped td {
+  background: #fff6f4;
+}
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background: #fd5522;
+}
+.el-pagination.is-background .el-pager li:not(.disabled):hover {
+  color: #fd5522;
+}
+</style>