feat 成为商户

src/api/user.js

@@ -1,17 +1,29 @@
 import { get, post, postJson } from './http.js';
 
-export const getPhoneCode = ( params ) => {
-  return post( 'app/login/send/sms', params )
+export const getPhoneCode = (params) => {
+  return post('app/login/send/sms', params)
 }
 
-export const loginPassword = ( params ) => {
-  return post( 'app/login/password', params )
+export const loginPassword = (params) => {
+  return post('app/login/password', params)
 }
 
-export const loginVerification = ( params ) => {
-  return post( 'app/login/verification', params )
+export const loginVerification = (params) => {
+  return post('app/login/verification', params)
 }
 
-export const forgotPassword = ( params ) => {
-  return post( 'app/login/password/change', params )
+export const forgotPassword = (params) => {
+  return post('app/login/password/change', params)
+}
+// 申请成为商家
+export const merchantAdd = (params) => {
+  return post('app/merchant/add', params)
+}
+// 商家详情
+export const merchantDetail = (params) => {
+  return get('app/merchant/detail', params)
+}
+// 商家更新
+export const merchantModify = (params) => {
+  return post('app/merchant/modify', params)
 }

src/components/merchantAdd.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="shopAdd">
+    <el-dialog width="600px" :title="title" destroy-on-close center :visible.sync="showVisible">
+      <el-form :model="form">
+        <el-form-item label="门店名称" label-width="103px">
+          <el-input v-model="form.name" placeholder="请输入店铺名称" autocomplete="off" style="width: 100%"></el-input>
+        </el-form-item>
+        <el-form-item label="主营类别" label-width="103px">
+          <div class="category_box">
+            <div class="item" :class="form.categoryId == item.id ? 'active':''" v-for="(item,i) in products" :key="i" @click="$set(form,'categoryId',item.id)">
+              {{item.name}}
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="详细地址" label-width="103px">
+          <el-input v-model="form.address" placeholder="请点击地图选择具体地址" disabled autocomplete="off" style="width: 100%">
+            <el-image @click="showMap" slot="append" class="map" src="../../../static/image/icon_map.png"></el-image>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="门牌号" label-width="103px">
+          <el-input v-model="form.street" placeholder="请填写门牌号" autocomplete="off" style="width: 100%">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="联系人姓名" label-width="103px">
+          <el-input v-model="form.contactName" placeholder="请填写姓名" autocomplete="off" style="width: 40%"></el-input>
+        </el-form-item>
+        <el-form-item label="联系人电话" label-width="103px">
+          <el-input v-model="form.mobile" placeholder="请填写手机号" autocomplete="off" style="width: 40%"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="loading" class="btn" @click="save">保存</el-button>
+      </div>
+    </el-dialog>
+    <!-- 通过地图选择地理位置 -->
+    <order-map @getAddressDetail="getAddressDetail" ref="orderMap"></order-map>
+  </div>
+</template>
+
+<script>
+import orderMap from "../components/orderComponents/orderAMap.vue";
+import { merchantAdd, merchantDetail, merchantModify } from "../api/user.js";
+export default {
+  props: {
+    products: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      title: "成为商家",
+      showVisible: false,
+      form: {
+        id: "",
+        address: "",
+        cityCode: "",
+        cityName: "",
+        contactName: "",
+        districtName: "",
+        lat: "",
+        lng: "",
+        mobile: "",
+        name: "",
+        street: "",
+        categoryId: "",
+      },
+      deliveries: [],
+      revieweds: [],
+      loading: false,
+    };
+  },
+  components: {
+    orderMap,
+  },
+  methods: {
+    init(type) {
+      if (type) {
+        this.title = "修改资料";
+        getShopDetail({ shopId: e.id }).then((res) => {
+          console.log(res);
+          if (res.code === 200) {
+            this.form = res.data;
+            this.deliveries = this.form.deliveries.filter((v) => {
+              return v.bindStatus === 1 && v.type !== 3;
+            });
+            this.revieweds = this.form.deliveries.filter((v) => {
+              return v.type === 3;
+            });
+          } else {
+            this.$message({
+              type: "error",
+              message: res.msg,
+            });
+          }
+        });
+      } else {
+        this.title = "成为商户";
+        this.form = {
+          address: "",
+          contactName: "",
+          mobile: "",
+          name: "",
+          street: "",
+          categoryId: "",
+        };
+      }
+      this.showVisible = true;
+    },
+    showMap() {
+      this.$refs.orderMap.chooseLocation();
+    },
+    getAddressDetail(v, lng, lat) {
+      this.form.address = v.address;
+      this.form.provinceName = v.province;
+      this.form.cityName = v.city;
+      this.form.cityCode = v.citycode;
+      this.form.districtName = v.district;
+      this.form.lng = lng;
+      this.form.lat = lat;
+    },
+    save() {
+      if (!this.form.name.trim()) {
+        return this.$message({
+          type: "error",
+          message: "请输入门店名称！",
+        });
+      }
+      if (!String(this.form.categoryId).trim()) {
+        return this.$message({
+          type: "error",
+          message: "请选择主营类别！",
+        });
+      }
+      if (!this.form.address.trim()) {
+        return this.$message({
+          type: "error",
+          message: "请选择详细地址！",
+        });
+      }
+      if (!this.form.street.trim()) {
+        return this.$message({
+          type: "error",
+          message: "请输入门牌号！",
+        });
+      }
+      if (!this.form.contactName.trim()) {
+        return this.$message({
+          type: "error",
+          message: "请输入联系人姓名！",
+        });
+      }
+      if (!this.form.mobile.trim()) {
+        return this.$message({
+          type: "error",
+          message: "请输入联系人电话！",
+        });
+      }
+      this.loading = true;
+      if (this.form.id) {
+        merchantModify(this.form).then((res) => {
+          if (res.code === 200) {
+            this.$message({
+              type: "success",
+              message: `保存成功！`,
+            });
+            this.$emit("getData");
+          } else {
+            this.$message({
+              type: "error",
+              message: res.msg,
+            });
+          }
+          this.showVisible = false;
+          this.loading = false;
+        });
+      } else {
+        merchantAdd(this.form).then((res) => {
+          if (res.code === 200) {
+            this.$message({
+              type: "success",
+              message: `新增成功！`,
+            });
+            this.$emit("getData");
+          } else {
+            this.$message({
+              type: "error",
+              message: res.msg,
+            });
+          }
+          this.showVisible = false;
+          this.loading = false;
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.shopAdd {
+  .map {
+    height: 25px;
+    width: 25px;
+    cursor: pointer;
+  }
+  .el-dialog {
+    border-radius: 16px;
+    overflow: hidden;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close:hover {
+    color: #909399;
+  }
+
+  .el-dialog__header {
+    /*height: 48px;*/
+    background: #f7f7f7;
+    padding: 16px 20px;
+  }
+
+  .el-dialog__title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #000000;
+  }
+
+  .el-form-item__label {
+    text-align: left;
+    color: #000000;
+  }
+
+  .el-input__inner:focus {
+    border-color: #fc7b0f;
+  }
+
+  .el-input__inner {
+    color: #222222;
+  }
+
+  .category_box {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-top: -10px;
+
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 92px;
+      height: 38px;
+      margin: 10px 10px 0 0;
+      background: #f4f4f4;
+      border-radius: 2px;
+      cursor: pointer;
+
+      &.active {
+        color: #ffffff;
+        background: #fc7200;
+      }
+    }
+  }
+
+  .line {
+    position: absolute;
+    left: -103px;
+    right: 0;
+    bottom: -12px;
+    border: 0.5px dashed #e0e0e0;
+  }
+
+  .logo_box {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    line-height: 0;
+
+    img {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+  }
+  .btn {
+    width: 220px;
+    background: #fc7200;
+    color: #ffffff;
+    border-color: #fc7200;
+  }
+}
+</style>

src/components/shopCompoents/shopAdd.vue

@@ -379,6 +379,9 @@ export default {
 
   .btn {
     width: 220px;
+    background: #fc7200;
+    color: #ffffff;
+    border-color: #fc7200;
   }
 }
 </style>

src/views/home.vue

@@ -21,7 +21,7 @@
         <router-view></router-view>
       </el-main>
     </el-container>
-    <shop-add ref="shopAdd" :products="productList"></shop-add>
+    <merchant-add ref="merchantAdd" :products="productList"></merchant-add>
   </el-container>
 </template>
 
@@ -30,7 +30,7 @@ import sidebar from "../common/sider.vue";
 import headerVue from "../common/header.vue";
 import { mapState } from "vuex";
 import bus from "../common/bus.js";
-import shopAdd from "../components/shopCompoents/shopAdd";
+import merchantAdd from "../components/merchantAdd.vue";
 import { getProductList } from "../api/shop.js";
 export default {
   data() {
@@ -45,32 +45,23 @@ export default {
   components: {
     sidebar,
     headerVue,
-    shopAdd,
+    merchantAdd,
   },
   created() {
     bus.$emit("openGetSoundMsg");
     this.getProductList();
     let memberType = this.$store.state.userInfo.memberType;
-    // if (memberType === 1) {
-    //   this.$confirm("您当前还不是商户，请先申请成为商户！", "提示", {
-    //     confirmButtonText: "成为商户",
-    //     cancelButtonText: "取消",
-    //     type: "warning",
-    //     center: true,
-    //   })
-    //     .then(() => {
-    //       this.$message({
-    //         type: "success",
-    //         message: "删除成功!",
-    //       });
-    //     })
-    //     .catch(() => {
-    //       this.$message({
-    //         type: "info",
-    //         message: "已取消删除",
-    //       });
-    //     });
-    // }
+    if (memberType === 1) {
+      this.$confirm("您当前还不是商户，请先申请成为商户！", "提示", {
+        confirmButtonText: "成为商户",
+        cancelButtonText: "取消",
+        type: "warning",
+        center: true,
+      })
+        .then(() => {
+          this.$refs.merchantAdd.init('','成为商户');
+        })
+    }
   },
 
   methods: {