map

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "govservice-vue",
+  "name": "furniture-vue",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -1024,6 +1024,12 @@
       "integrity": "sha1-95cgtHVaoZfC4V6YLi9Dj1dI40g=",
       "dev": true
     },
+    "@types/js-md5": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npm.taobao.org/@types/js-md5/download/@types/js-md5-0.4.2.tgz",
+      "integrity": "sha1-lbOZEeIIG/KRVDbmHMNF4SRZ5bs=",
+      "dev": true
+    },
     "@types/json-schema": {
       "version": "7.0.3",
       "resolved": "https://registry.npm.taobao.org/@types/json-schema/download/@types/json-schema-7.0.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fjson-schema%2Fdownload%2F%40types%2Fjson-schema-7.0.3.tgz",
@@ -1944,7 +1950,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npm.taobao.org/argparse/download/argparse-1.0.10.tgz",
       "integrity": "sha1-vNZ5HqWuCXJeF+WtmIE0zUCz2RE=",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -2390,6 +2395,34 @@
       "integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=",
       "dev": true
     },
+    "bmaplib.curveline": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/bmaplib.curveline/download/bmaplib.curveline-1.0.0.tgz",
+      "integrity": "sha1-gm6wvxxZ+tGyMUK+Zvw2DPAJrqI="
+    },
+    "bmaplib.heatmap": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npm.taobao.org/bmaplib.heatmap/download/bmaplib.heatmap-1.0.4.tgz",
+      "integrity": "sha1-MBYSYncf54rzVwX/kkV3Jd5dmFA="
+    },
+    "bmaplib.lushu": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npm.taobao.org/bmaplib.lushu/download/bmaplib.lushu-1.0.7.tgz",
+      "integrity": "sha1-d8F9z3FI0wxG6EMMf/hrIOQYuLg="
+    },
+    "bmaplib.markerclusterer": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npm.taobao.org/bmaplib.markerclusterer/download/bmaplib.markerclusterer-1.0.13.tgz",
+      "integrity": "sha1-RC1xpsQIRO5H0B9tshZrVFMLW9E=",
+      "requires": {
+        "bmaplib.texticonoverlay": "^1.0.2"
+      }
+    },
+    "bmaplib.texticonoverlay": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/bmaplib.texticonoverlay/download/bmaplib.texticonoverlay-1.0.2.tgz",
+      "integrity": "sha1-14VG6g8DbZ/pZJg3ljFbbBEqBb8="
+    },
     "bn.js": {
       "version": "4.11.8",
       "resolved": "https://registry.npm.taobao.org/bn.js/download/bn.js-4.11.8.tgz",
@@ -4236,14 +4269,6 @@
         "safer-buffer": "^2.1.0"
       }
     },
-    "echarts": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.6.0.tgz",
-      "integrity": "sha512-xKkcr6v9UVOSF+PMuj7Ngt3bnzLwN1sSXWCvpvX+jYb3mePYsZnABq7wGkPac/m0nV653uGHXoHK8DCKCprdNg==",
-      "requires": {
-        "zrender": "4.2.0"
-      }
-    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -6982,6 +7007,14 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
+    "linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npm.taobao.org/linkify-it/download/linkify-it-2.2.0.tgz",
+      "integrity": "sha1-47VGl+eL+RXHCjis14/QngBYsc8=",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "loader-fs-cache": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/loader-fs-cache/download/loader-fs-cache-1.0.2.tgz",
@@ -7198,6 +7231,25 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-it": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npm.taobao.org/markdown-it/download/markdown-it-8.4.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmarkdown-it%2Fdownload%2Fmarkdown-it-8.4.2.tgz",
+      "integrity": "sha1-OG+YmY3BWjdyKqdyIIT0Agvdm1Q=",
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~1.1.1",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npm.taobao.org/entities/download/entities-1.1.2.tgz",
+          "integrity": "sha1-vfpzUplmTfr9NFKe1PhSKidf6lY="
+        }
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",
@@ -7215,6 +7267,11 @@
       "integrity": "sha1-aZs8OKxvHXKAkaZGULZdOIUC/Vs=",
       "dev": true
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/mdurl/download/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npm.taobao.org/media-typer/download/media-typer-0.3.0.tgz",
@@ -10092,8 +10149,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sshpk": {
       "version": "1.16.1",
@@ -10825,6 +10881,11 @@
       "integrity": "sha1-yDD2V/k/HqhGgZ6SkJL1/lmD6Xc=",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npm.taobao.org/uc.micro/download/uc.micro-1.0.6.tgz",
+      "integrity": "sha1-nEEagCpAmpH8bPdAgbq6NLJEmaw="
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npm.taobao.org/uglify-js/download/uglify-js-3.4.10.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuglify-js%2Fdownload%2Fuglify-js-3.4.10.tgz",
@@ -11144,6 +11205,18 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.10.tgz",
       "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
     },
+    "vue-baidu-map": {
+      "version": "0.21.22",
+      "resolved": "https://registry.npm.taobao.org/vue-baidu-map/download/vue-baidu-map-0.21.22.tgz",
+      "integrity": "sha1-a3apHvNPGKeC1zKrD1QaGjqgaeA=",
+      "requires": {
+        "bmaplib.curveline": "^1.0.0",
+        "bmaplib.heatmap": "^1.0.4",
+        "bmaplib.lushu": "^1.0.7",
+        "bmaplib.markerclusterer": "^1.0.13",
+        "markdown-it": "^8.4.0"
+      }
+    },
     "vue-class-component": {
       "version": "7.1.0",
       "resolved": "https://registry.npm.taobao.org/vue-class-component/download/vue-class-component-7.1.0.tgz",
@@ -11182,6 +11255,11 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "8.15.3",
+      "resolved": "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-8.15.3.tgz",
+      "integrity": "sha1-n5R4Atm3NPy5LiznJNplTy+fwPQ="
+    },
     "vue-loader": {
       "version": "15.7.2",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.7.2.tgz",
@@ -11903,11 +11981,6 @@
           "dev": true
         }
       }
-    },
-    "zrender": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.2.0.tgz",
-      "integrity": "sha512-YJ9hxt5uFincYYU3KK31+Ce+B6PJmYYK0Q9fQ6jOUAoC/VHbe4kCKAPkxKeT7jGTxrK5wYu18R0TLGqj2zbEOA=="
     }
   }
 }

package.json

@@ -14,6 +14,7 @@
     "js-cookie": "^2.2.1",
     "js-md5": "^0.7.3",
     "vue": "^2.6.10",
+    "vue-baidu-map": "^0.21.22",
     "vue-class-component": "^7.0.2",
     "vue-i18n": "^8.15.3",
     "vue-property-decorator": "^8.3.0",

src/main.ts

@@ -7,6 +7,12 @@ import "./styles/index.scss";
 import request from "./utils/request";
 import message from "./utils/message";
 import i18n from "@/lang";
+import BaiduMap from "vue-baidu-map";
+
+Vue.use(BaiduMap, {
+  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
+  ak: "QIDnjG9kDzzqrpSPfxhBxqauADXpMsX9"
+});
 Vue.use(elementUI, {
   i18n: (key: string, value: string) => i18n.t(key, value)
 });

src/styles/index.scss

@@ -46,10 +46,12 @@ html {
       float: right;
     }
 
-    .bg-F5{
-      background: #F5F5F5;
+    .bg-F5 {
+      background: #f5f5f5;
+    }
+    .relative {
+      position: relative;
     }
-
     a {
       text-decoration: none;
       color: #333;
@@ -67,45 +69,45 @@ html {
     }
   }
 }
-.el-pagination.is-background .el-pager li:not(.disabled).active{
+.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{
+.searchDiv {
   .el-select .el-input {
     color: #fd5522;
-    .el-input__inner{
+    .el-input__inner {
       border: 0;
       color: #fd5522;
     }
   }
-  .input-with-select{
-    .el-input__inner{
+  .input-with-select {
+    .el-input__inner {
       border: 0;
     }
   }
 }
-.bannerDiv{
-  .bannerD{
-    .el-carousel__container{
-      height:100%;
+.bannerDiv {
+  .bannerD {
+    .el-carousel__container {
+      height: 100%;
     }
   }
-  .el-carousel__button{
+  .el-carousel__button {
     background-color: #fd5522;
   }
 }
-.qyrzgs th{
-  background:#fd5522;
-  color: #FFF;
+.qyrzgs th {
+  background: #fd5522;
+  color: #fff;
   padding: 0.6rem 0;
 }
-.qyrzg tr.el-table__row--striped td{
-  background: #FFF6F4;
+.qyrzg tr.el-table__row--striped td {
+  background: #fff6f4;
 }
-.formPanel{
+.formPanel {
   .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
@@ -114,6 +116,6 @@ html {
     overflow: hidden;
   }
   .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
+    border-color: #409eff;
   }
-}
+}

src/views/shops/enter/add.vue

@@ -1,10 +1,238 @@
 <template>
-  <div>
-    申请商家入住表单
+  <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>
+        </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>
+
+        <el-form-item label="详细地址:">
+          <el-input v-model="form.username"></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> -->
+        </el-form-item>
+      </el-form>
+    </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 {}
+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
+          )
+      }
+    ]
+  };
+  async submit() {
+    console.log("submit");
+    const x = await (this.$refs.registerForm as ElForm)
+      .validate()
+      .catch(x => x);
+    console.log(x);
+  }
+}
 </script>
+<style lang="scss" scoped>
+.container {
+  color: #333;
+  > h3 {
+    margin: 10px;
+  }
+  .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;
+        }
+      }
+    }
+  }
+  .map {
+    width: 300px;
+    height: 300px;
+    position: absolute;
+    top: 40px;
+    right: 0;
+    z-index: 1;
+    display: none;
+    &.show {
+      display: block;
+    }
+  }
+}
+</style>