shopEnterAdd

public/index.html

@@ -6,10 +6,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
   <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-  <script
-      type="text/javascript"
-      src="http://api.map.baidu.com/api?v=2.0&ak=tRYGyu9yuGOVk2HNdf5fBxcjV3TmtDMA"
-    ></script>
+  <script defer="true" src="http://ikefu.dgtis.com:80/im/0dMc4l.html"></script>
+  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tRYGyu9yuGOVk2HNdf5fBxcjV3TmtDMA"></script>
   <title>中国钢制家具产业聚集网</title>
 </head>
 

src/api/area.ts

@@ -1,4 +1,4 @@
-export default [
+const arr = [
   {
     value: "110000",
     label: "北京市",
@@ -15716,3 +15716,19 @@ export default [
     ]
   }
 ];
+
+export const provinces = arr.map(({ label }) => label);
+export const getCity = (province: string) => {
+  if (!province) return [];
+  const x = arr.find(({ label }) => label === province);
+  if (!x) return [];
+  return x.children.map(({ label }) => label);
+};
+export const getArea = (province: string, city: string) => {
+  if (!province || !city) return [];
+  const p = arr.find(({ label }) => label === province);
+  if (!p) return [];
+  const c = p.children.find(({ label }) => label === city);
+  if (!c) return [];
+  return c.children.map(({ label }) => label);
+};

src/api/dict.ts

@@ -10,5 +10,5 @@ export const getDict = (dictType: string) => {
     })) as IDict[];
     dict.add({ k: dictType, v });
   });
-  return [] as IDict[];
+  return [{ key: "请选择", value: "" }] as IDict[];
 };

src/components/category.vue

@@ -52,7 +52,11 @@ export default class extends Vue {
 <style lang="scss" scoped>
 .menuDiv {
   width: 100%;
+  height: 39rem;
+  // overflow: hidden;
   position: relative;
+  display: flex; //因为菜单项不固定 但总高度固定 所以不得不采用flex布局
+  flex-flow: column nowrap;
   h3 {
     background: #fd5522;
     color: #fff;
@@ -64,10 +68,13 @@ export default class extends Vue {
     list-style: none;
     width: 100%;
     background: #fff;
-
+    flex-grow: 1;
+    display: flex;
+    flex-flow: column nowrap;
     li.menuli {
-      height: 5.6rem;
-      line-height: 5.6rem;
+      flex-grow: 1;
+      // height: 5.6rem;
+      // line-height: 5.6rem;
       font-size: 1.4rem;
       color: #333;
       border-bottom: 0.1rem solid #e5e5e5;
@@ -80,6 +87,10 @@ export default class extends Vue {
         }
       }
       .dalei {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 100%;
         cursor: pointer;
         padding-right: 1.6rem;
         &.curr,
@@ -95,12 +106,12 @@ export default class extends Vue {
           height: 1.4rem;
           width: 0.2rem;
           background: #fff;
-          margin-right: 1.6rem;
-        }
-        i {
-          float: right;
-          margin-top: 2rem;
+          // margin-right: 1.6rem;
         }
+        // i {
+        //   float: right;
+        //   margin-top: 2rem;
+        // }
       }
     }
   }

src/layout/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="layout">
     <y-header />
-    <keep-alive>
+    <keep-alive exclude="shopEnterAdd">
       <router-view class="main" />
     </keep-alive>
     <y-footer />

src/router/index.ts

@@ -111,7 +111,7 @@ const router = new VueRouter({
         {
           path: "/shopEnter/add",
           component: () => import("../views/shops/enter/add.vue"),
-          meta: { title: "shopEnterAdd", auth: true }
+          meta: { title: "shopEnterAdd" }
         },
         {
           path: "/info/buy/:id",

src/types/global.d.ts

@@ -5,7 +5,12 @@ declare module "*.vue" {
 declare module "element-ui/lib/locale/lang/*" {
   export const elementLocale: any;
 }
-
+declare module "BMap" {
+  const x: any;
+  export default x;
+}
+declare var BMAP_NORMAL_MAP: any;
+declare var BMAP_HYBRID_MAP: any;
 interface IAny {
   [index: string]: any;
 }
@@ -44,5 +49,5 @@ interface IMenu {
 }
 interface IDict {
   key: string;
-  value: number;
+  value: string;
 }

src/views/home/index.vue

@@ -79,7 +79,9 @@
         </div>
       </div>
       <!-- 广告位 -->
-      <div class="ggzw bg-84 mt2rem">办公系列广告占位</div>
+      <div class="mt2rem">
+        <img src="@assets/home_ggw1.png" alt />
+      </div>
       <div class="partTitle">
         <span class="orangeLine"></span>热门商品
         <router-link to="/mall">
@@ -155,7 +157,9 @@
         </el-col>
       </el-row>
       <!-- 广告位 -->
-      <div class="ggzw bg-88 mt2rem">智能家具保险柜广告占位</div>
+      <div class=" mt2rem">
+        <img src="@assets/home_ggw2.png" alt />
+      </div>
       <el-row :gutter="20">
         <el-col
           :span="12"
@@ -326,14 +330,7 @@ export default class extends Vue {
     }
   }
 }
-.ggzw {
-  height: 13rem;
-  line-height: 13rem;
-  font-size: 2.6rem;
-  font-weight: bold;
-  color: #fff;
-  text-align: center;
-}
+
 .rmsp {
   width: 100%;
   overflow: hidden;

src/views/mall/index.vue

@@ -44,26 +44,32 @@
       </div>
       <div class="filter">
         <div
-          :class="`sort fl ${params.orderByColumn === 'zhpx' ? 'curr' : ''}`"
-          @click="() => paramsChange({ orderByColumn: 'zhpx' })"
+          :class="`sort fl ${params.orderByColumn === '' ? 'curr' : ''}`"
+          @click="() => paramsChange({ orderByColumn: '' })"
         >
           <span> 综合排序</span>
         </div>
         <div
-          :class="`sort fl ${params.orderByColumn === 'xp' ? 'curr' : ''}`"
-          @click="() => paramsChange({ orderByColumn: 'xp' })"
+          :class="
+            `sort fl ${params.orderByColumn === 'createTime' ? 'curr' : ''}`
+          "
+          @click="
+            () => paramsChange({ orderByColumn: 'createTime', isAsc: 'asc' })
+          "
         >
           <span> 新品</span>
         </div>
-        <div :class="`sort fl ${params.orderByColumn === 'jg' ? 'curr' : ''}`">
+        <div
+          :class="`sort fl ${params.orderByColumn === 'price' ? 'curr' : ''}`"
+        >
           <span
             :class="`price ${params.isAsc}`"
             @click="
               () =>
                 paramsChange({
-                  orderByColumn: `jg`,
+                  orderByColumn: `price`,
                   isAsc:
-                    params.orderByColumn === `jg` && params.isAsc === `asc`
+                    params.orderByColumn === `price` && params.isAsc === `asc`
                       ? `desc`
                       : `asc`
                 })
@@ -119,7 +125,7 @@ export default class extends Vue {
   @Prop(String) private kw!: string;
   @Watch("kw", { immediate: true })
   kwChange() {
-    this.params = { name: this.kw };
+    this.params = { name: this.kw, orderByColumn: "", isAsc: "asc" };
   }
   get items() {
     return [{ id: 0, title: "全部" }, ...menu.pList];

src/views/shops/details/product.vue

@@ -123,6 +123,7 @@ export default class extends Vue {
         width: 92px;
         height: 92px;
         margin-right: 10px;
+        cursor: pointer;
         &:nth-child(1) {
           width: 400px;
           height: 400px;

src/views/shops/enter/add.vue

@@ -2,310 +2,390 @@
   <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">
+      <el-form
+        class="formPanel"
+        ref="form"
+        :model="form"
+        :rules="rules"
+        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 class="formItem" label="用户名" prop="loginName">
+          <el-input v-model="form.loginName"></el-input>
         </el-form-item>
-        <el-form-item class="formItem" label="请设置密码">
-          <el-input v-model="form.password"></el-input>
+        <el-form-item class="formItem" label="请设置密码" prop="password">
+          <el-input show-password 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 class="formItem" label="请确认密码" prop="surepassword">
+          <el-input show-password 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 class="formItem" label="企业名称" prop="companyName">
+          <el-input v-model="form.companyName"></el-input>
         </el-form-item>
-        <el-form-item class="formItem" label="企业类型">
-          <el-select v-model="form.qytype" placeholder="请选择">
+        <el-form-item class="formItem" label="企业类型" prop="companyType">
+          <el-select v-model="form.companyType" placeholder="请选择">
             <el-option
-              v-for="item in qyTypeArr"
-              :key="item.dictValue"
-              :label="item.dictLabel"
-              :value="item.dictValue"
+              v-for="{ key, value } in companyType"
+              :key="`companyType${value}`"
+              :label="key"
+              :value="value"
             >
             </el-option>
           </el-select>
         </el-form-item>
+        <el-form-item class="formItem" label="主营业务" prop="primaryBusiness">
+          <el-input v-model="form.primaryBusiness"></el-input>
+        </el-form-item>
+
         <el-form-item class="formItem" label="企业所在地">
           <el-select
             class="quyuSel"
-            v-model="form.sheng"
-            placeholder="请选择省"
-            @change="provinceChange"
+            v-model="province"
+            placeholder="请选择省份"
           >
-            <el-option value="" label="请选择省份"></el-option>
-            <el-option
-              :value="item"
-              :label="item.label"
-              v-for="(item, index) in city"
-              :key="index"
-            ></el-option>
+            <el-option v-for="x in provinces" :key="x" :label="x" :value="x" />
           </el-select>
-          <el-select
-            class="quyuSel"
-            v-model="form.shi"
-            placeholder="请选择城市"
-            @change="cityChange"
-          >
-            <el-option value="" label="请选择城市"></el-option>
-            <el-option
-              :value="item"
-              :label="item.label"
-              v-for="(item, index) in cityList"
-              :key="index"
-            ></el-option>
+          <el-select class="quyuSel" v-model="city" placeholder="请选择城市">
+            <el-option v-for="x in citys" :key="x" :label="x" :value="x" />
           </el-select>
-          <el-select
-            class="quyuSel"
-            v-model="form.qu"
-            placeholder="请选择区县"
-            @change="countyChange"
-          >
-            <el-option value="" label="请选择区县"></el-option>
-            <el-option
-              :value="item"
-              :label="item.label"
-              v-for="(item, index) in areaList"
-              :key="index"
-            ></el-option>
+          <el-select class="quyuSel" v-model="area" placeholder="请选择区县">
+            <el-option v-for="x in areas" :key="x" :label="x" :value="x" />
           </el-select>
         </el-form-item>
-        <el-form-item class="formItem" label="详细地址">
-          <el-input v-model="form.address"></el-input>
+        <el-form-item class="formItem" label="详细地址" prop="detailAddress">
+          <el-input v-model="address"></el-input>
         </el-form-item>
-        <el-form-item class="formItem" label="经纬度选择">
+        <el-form-item class="formItem" label="经纬度选择" prop="jwd">
           <div class="longLatDiv">
             <span>经度</span>
-            <el-input class="input" v-model="form.lng"></el-input>
+            <el-input class="input" v-model="form.longitude"></el-input>
           </div>
           <div class="longLatDiv">
             <span>纬度</span>
-            <el-input class="input" v-model="form.lat"></el-input>
+            <el-input class="input" v-model="form.latitude"></el-input>
           </div>
-          <el-button class="submitBtn" @click="mapAddress">{{
+          <el-button class="submitBtn" @click="toggerMap">{{
             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 class="formItem" label="企业法人" prop="legalPerson">
+          <el-input v-model="form.legalPerson"></el-input>
         </el-form-item>
-        <el-form-item class="formItem" label="联系电话">
-          <el-input v-model="form.qytype"></el-input>
+        <el-form-item class="formItem" label="联系电话" prop="contactNumber">
+          <el-input v-model="form.contactNumber"></el-input>
         </el-form-item>
-        <el-form-item class="formItem" label="成立日期">
-          <el-input v-model="form.qytype"></el-input>
+        <el-form-item class="formItem" label="成立日期" prop="establishDate">
+          <el-date-picker
+            v-model="form.establishDate"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="选择成立日期"
+          />
         </el-form-item>
-        <el-form-item class="formItem" label="统一社会信用代码">
-          <el-input v-model="form.qytype"></el-input>
+        <el-form-item
+          class="formItem"
+          label="统一社会信用代码"
+          prop="unifiedSocialCreditCode"
+        >
+          <el-input v-model="form.unifiedSocialCreditCode"></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-form-item class="formItem" label="企业介绍" prop="surepassword">
+          <el-input type="textarea" v-model="form.companyIntroduce"></el-input>
+        </el-form-item>
+        <el-form-item
+          class="formItem"
+          label="营业执照"
+          prop="businessLicenseUrl"
+        >
+          <el-upload
+            list-type="picture-card"
+            :action="`${$basePath}/common/upload`"
+            :on-preview="preview"
+            :on-remove="remove"
+            :on-success="
+              ({ data: { fileName } }, { uid }) =>
+                success('businessLicenseUrl', fileName, uid)
+            "
+          >
+            <i class="el-icon-plus"></i>
           </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-form-item
+          class="formItem"
+          label="企业默认图片"
+          prop="defaultImgUrl"
+        >
+          <el-upload
+            list-type="picture-card"
+            :action="`${$basePath}/common/upload`"
+            :on-preview="preview"
+            :on-remove="remove"
+            :on-success="
+              ({ data: { fileName } }, { uid }) =>
+                success('defaultImgUrl', fileName, uid)
+            "
+          >
+            <i class="el-icon-plus"></i>
           </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-form-item class="formItem" label="企业宣传图片" prop="imgs">
+          <el-upload
+            list-type="picture-card"
+            :action="`${$basePath}/common/upload`"
+            :on-preview="preview"
+            :on-remove="remove"
+            :on-success="
+              ({ data: { fileName } }, { uid }) =>
+                success('propagandaImgUrl', fileName, uid)
+            "
+          >
+            <i class="el-icon-plus"></i>
           </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-button class="submitBtn" @click="validate">提交</el-button>
         </el-form-item>
       </el-form>
     </div>
+    <el-dialog :visible.sync="showImg">
+      <img width="100%" :src="showImgSrc" alt="" />
+    </el-dialog>
   </div>
 </template>
-<script>
-import { Component, Vue } from "vue-property-decorator";
-import areadata from "@/api/area";
+<script lang="ts">
+interface IFile {
+  type: string;
+  url: string;
+  uid: number;
+}
+import { Component, Vue, Watch } from "vue-property-decorator";
+import dict from "@/store/modules/dict";
+import { provinces, getCity, getArea } from "@/api/area";
 import BMap from "BMap";
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      city: areadata,
-      cityList: [],
-      areaList: [],
-      form: {
-        name: "",
-        password: "",
-        surepassword: "",
-        qyname: "",
-        qytype: "",
-        sheng: "",
-        shi: "",
-        qu: "",
-        address: "",
-        imageUrl: "",
-        lng: "",
-        lat: ""
-      },
-      qyTypeArr: [],
-      mapVisible: false,
-      local: null
-    };
-  },
-  methods: {
-    qyTypeData() {
-      var that = this;
-      that
-        .$post("/common/dict", { dictType: "company_type" })
-        .then(function(res) {
-          console.log(res);
-          if (!res[0]) {
-            that.qyTypeArr = res[1].list;
-          }
-        });
-    },
-    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(event) {
-      console.log(event);
-      console.log(this.form.sheng);
-      var that = this;
-      if (event) {
-        that.cityList = event.children;
-      } else {
-        that.cityList = [];
+import { RegAccount } from "@/utils";
+import { ElForm } from "element-ui/types/form";
+@Component({ name: "shopEnterAdd" })
+export default class extends Vue {
+  private form: IAny = {
+    longitude: "",
+    latitude: ""
+  };
+  private province = "";
+  private city = "";
+  private area = "";
+  private address = "";
+  private map: any = null;
+  private local: any = null;
+  private mapVisible = false;
+  private showImg = false;
+  private showImgSrc = "";
+  private fileList: IFile[] = [];
+  private rules = {
+    loginName: [
+      { required: true, message: "请输入用户名", trigger: "blur" },
+      {
+        validator: (rule: any, value: string, callback: any) =>
+          callback(
+            RegAccount.test(value)
+              ? undefined
+              : new Error("用户名必须为8到12位由数字字母组合")
+          ),
+        trigger: "blur"
       }
-      that.areaList = [];
-      that.$emit("getLawyerListInfo", [event.label, "province"]);
-      var map = that.createMap();
-      map.centerAndZoom(that.form.sheng.label, 11);
-    },
-    cityChange(event) {
-      var that = this;
-      console.log(event);
-      console.log(this.form.shi);
-      if (event) {
-        that.areaList = event.children;
-      } else {
-        that.areaList = [];
+    ],
+    password: [
+      { required: true, message: "请输入密码", trigger: "blur" },
+      {
+        validator: (rule: any, value: string, callback: any) =>
+          callback(
+            RegAccount.test(value)
+              ? undefined
+              : new Error("密码必须为8到12位由数字字母组合")
+          ),
+        trigger: "blur"
       }
-      this.$emit("getLawyerListInfo", [event.label, "city"]);
-      var map = that.createMap();
-      map.centerAndZoom(that.form.shi.label, 13);
-    },
-    countyChange(event) {
-      var that = this;
-      console.log(event);
-      console.log(this.form.qu);
-      this.$emit("getLawyerListInfo", [event.label, "area"]);
-      var map = that.createMap();
-      var myGeo = new BMap.Geocoder();
-      map.centerAndZoom(that.form.qu.label, 15);
-      myGeo.getPoint(
-        that.form.shi.label + that.form.qu.label,
-        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;
+    ],
+    surepassword: [
+      { required: true, message: "请再次输入密码", trigger: "blur" },
+      {
+        validator: (rule: any, value: string, callback: any) => {
+          if (value === "") {
+            callback(new Error("请再次输入密码"));
+          } else if (value !== this.form.password) {
+            callback(new Error("两次输入密码不一致!"));
           } else {
-            that.$message(
-              "无法解析地址,请完善详细地址信息或者手动点击地图选择"
-            );
+            callback();
           }
         },
-        that.form.sheng.label
-      );
-    },
-    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("无法解析地址,请完善详细地址信息或者手动点击地图选择");
+        trigger: "blur"
       }
-    },
-    mapAddress() {
-      var that = this;
-      if (that.form.sheng == "" || that.form.shi == "" || that.form.qu == "") {
-        that.$message("请选择区域！");
-        return;
+    ],
+    companyName: [
+      { required: true, message: "请输入企业名称", trigger: "blur" }
+    ],
+    companyType: [
+      { required: true, message: "请选择企业类型", trigger: "blur" }
+    ],
+    primaryBusiness: [
+      { required: true, message: "请输入企业类型", trigger: "blur" }
+    ],
+
+    detailAddress: [
+      { required: true, message: "请输入详细地址", trigger: "blur" }
+    ],
+    jwd: [
+      {
+        validator: (rule: any, value: any, callback: any) => {
+          if (!this.form.longitude) return callback(new Error("请输入经度"));
+          if (!this.form.latitude) return callback(new Error("请输入纬度"));
+
+          callback();
+        }
       }
-      if (that.form.address == "") {
-        that.$message("输入详细地址后定位！");
-        return;
+    ],
+    legalPerson: [
+      { required: true, message: "请输入企业法人", trigger: "blur" }
+    ],
+    contactNumber: [
+      { required: true, message: "请输入联系电话", trigger: "blur" }
+    ],
+    establishDate: [
+      { required: true, message: "请输入成立日期", trigger: "blur" }
+    ],
+    unifiedSocialCreditCode: [
+      { required: true, message: "请输入统一社会信用代码", trigger: "blur" }
+    ],
+    companyIntroduce: [
+      { required: true, message: "请输入企业介绍", trigger: "blur" }
+    ],
+
+    imgs: [
+      {
+        validator: (rule: string, value: any, callback: any) => {
+          // businessLicenseUrl defaultImgUrl propagandaImgUrl
+          console.log(rule);
+          if (!this.form.businessLicenseUrl)
+            return callback(new Error("请上传营业执照"));
+          if (!this.form.defaultImgUrl)
+            return callback(new Error("请上传企业默认图片"));
+          if (!this.form.propagandaImgUrl)
+            return callback(new Error("请上传企业宣传图片"));
+          callback();
+        }
       }
-      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);
-    }
-  },
+    ]
+  };
+
+  get provinces() {
+    return provinces;
+  }
+  get citys() {
+    this.city = "";
+    return getCity(this.province);
+  }
+  get areas() {
+    this.area = "";
+    return getArea(this.province, this.city);
+  }
+  get companyType() {
+    return dict.companyType;
+  }
+  get detailAddress() {
+    return `${this.province} ${this.city} ${this.area} ${this.address}`;
+  }
+  get DomForm() {
+    return this.$refs.form as ElForm;
+  }
+  @Watch("detailAddress")
+  detailAddressChange() {
+    this.mapVisible && this.local.search(this.detailAddress);
+    this.form.detailAddress = this.detailAddress;
+  }
+  @Watch("fileList")
+  fileListChange() {
+    let obj: IAny = {};
+    this.fileList.forEach(({ type, url }) => {
+      obj[type] = `${obj[type] ? `${obj[type]},` : ""}${url}`;
+    });
+    Object.assign(this.form, obj);
+    this.DomForm.validateField("imgs");
+  }
+
+  @Watch("form.longitude")
+  @Watch("form.latitude")
+  jwdChange() {
+    this.DomForm.validateField("jwd");
+  }
   mounted() {
-    var that = this;
-    this.createMap();
-    that.qyTypeData();
+    this.map = new BMap.Map("map", { minZoom: 8, maxZoom: 16 });
+    const point = new BMap.Point(116.341603, 39.957202);
+    this.map.centerAndZoom(point, 13);
+    this.map.addControl(
+      new BMap.MapTypeControl({
+        mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
+      })
+    );
+    this.map.enableScrollWheelZoom(true);
+    this.map.addEventListener("click", (e: any) => {
+      this.map.clearOverlays();
+      const pt = e.point;
+      this.map.addOverlay(new BMap.Marker(pt));
+      this.form.longitude = pt.lng;
+      this.form.latitude = pt.lat;
+    });
+    this.local = new BMap.LocalSearch(this.map, {
+      onSearchComplete: () => {
+        if (this.local.getResults().getPoi(0)) {
+          const pp = this.local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
+          this.map.centerAndZoom(pp, 18);
+          this.map.addOverlay(new BMap.Marker(pp)); //添加标注
+          this.form.longitude = pp.lng;
+          this.form.latitude = pp.lat;
+        } else {
+          this.$message("无法解析地址,请完善详细地址信息或者手动点击地图选择");
+        }
+      }
+    });
+  }
+
+  toggerMap() {
+    if (this.mapVisible) return (this.mapVisible = false);
+    this.mapVisible = true;
+    this.local.search(this.detailAddress);
+  }
+  validate() {
+    this.DomForm.validate(x => x && this.submit());
   }
-};
+  async submit() {
+    const [err] = await this.$post("/company/enter", this.form);
+    if (err) return;
+    this.DomForm.resetFields();
+    this.$message.success("信息提交成功");
+    this.$router.push("/");
+  }
+  success(type: string, url: string, uid: number) {
+    this.fileList.push({ type, url, uid });
+  }
+  remove({ uid }: any) {
+    this.fileList = this.fileList.filter(x => uid !== x.uid);
+  }
+  preview({ url }: any) {
+    this.showImgSrc = url;
+    this.showImg = true;
+  }
+}
 </script>
 <style scoped lang="scss">
 .partTitle {

src/views/shops/enter/index.vue

@@ -86,8 +86,8 @@ export default class extends Vue {
   get statusList() {
     return dict.examineStatus;
   }
-  getStatusText(status: number) {
-    const dict = this.statusList.find(({ value }) => value === status);
+  getStatusText(status: string) {
+    const dict = this.statusList.find(({ value }) => value == status);
     return dict && dict.key;
   }
   search() {