Merge branch 'dev_fy924' into dev

src/api/order.js

@@ -83,3 +83,13 @@ export const getRefreshOrder = ( params ) => {
 export const getMapData = ( params ) => {
   return get('app/order/showMap', params);
 }
+
+// 地点输入提示API服务
+export const getInputPrompt = ( params ) => {
+  return get('app/map/getInputPrompt', params);
+}
+
+// 地理编码信息
+export const getGeoCode = ( params ) => {
+  return get('app/map/getGeoCode', params);
+}

src/api/setting.js

@@ -2,4 +2,27 @@ import { get, post, postJson } from './http.js';
 
 export const getSoundMsg = (params) => {
   return get('app/message/getSoundMsg', params)
+}
+
+// 获取配置
+export const getConfig = (params) => {
+  return get('app/member/detail', params)
+}
+
+// 修改配置
+export const updateConfig = (params) => {
+  return post('app/member/config', params)
+}
+
+// 消息推送语音提示查询
+export const queryPushMessageStatus = (params) => {
+  return get('app/message/queryPushMessageStatus', params)
+}
+// 消息推送语音提示修改
+export const updateSavePushMessageStatus = (params) => {
+  return postJson('app/message/updateSavePushMessageStatus', params)
+}
+// 获取运力推荐、屏蔽
+export const getDeliveryFloorList = (params) => {
+  return get('app/delivery/floor/list', params)
 }

src/api/shop.js

@@ -118,11 +118,11 @@ export const deviceList = (params) => {
 }
 // 设备新增、编辑
 export const deviceAdd = (params) => {
-  return get('app/shop/device/add', params)
+  return post('app/shop/device/add', params)
 }
 // 设备删除
 export const deviceDelete = (params) => {
-  return get('app/shop/device/delete', params)
+  return post('app/shop/device/delete', params)
 }
 // 设备状态
 export const deviceStatus = (params) => {

src/components/orderComponents/orderAMap.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-dialog width="80%" :show-close="false" destroy-on-close :visible.sync="dialogTableVisible">
-    <el-form ref="ruleForm" class="demo-form-inline" :inline="true">
+  <el-dialog width="80%" destroy-on-close :visible.sync="dialogTableVisible">
+    <el-form v-if="showSearch" ref="ruleForm" class="demo-form-inline" :inline="true">
       <el-form-item class="search-box">
         <el-input v-model="searchKey" type="search" id="search" style="width: 219px" placeholder="请输入关键字进行搜索" />
       </el-form-item>
@@ -9,14 +9,20 @@
       </el-form-item>
       <div class="tip-box" id="searchTip"></div>
       <el-form-item label="经度" prop="lng">
-        <el-input maxlength="11" v-model="lng" style="width: 219px" disabled></el-input>
+        <el-input maxlength="11" v-model="lng" style="width: 140px" disabled></el-input>
       </el-form-item>
-      <el-form-item label="维度：" prop="lat">
-        <el-input maxlength="10" v-model="lat" style="width: 219px" disabled></el-input>
+      <el-form-item label="纬度：" prop="lat">
+        <el-input maxlength="10" v-model="lat" style="width: 140px" disabled></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" class="map-btn" @click="clickSureMap">确定</el-button>
       </el-form-item>
+      <div v-show="showAddressList" class="address-list">
+        <div class="address" @click="getGeoCode(v)" v-for="(v,i) in promptList" :key="i">
+          <span class="name">{{v.name}}</span>
+          <span class="district">{{v.district}}{{v.address}}</span>
+        </div>
+      </div>
     </el-form>
     <el-amap vid="container" :zoom="zoom" :center="center" style="height: 600px;" class="amap-demo">
       <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" :icon="marker.icon"></el-amap-marker>
@@ -28,6 +34,7 @@
 </template>
 
 <script>
+import { getInputPrompt, getGeoCode } from "../../api/order.js";
 export default {
   data() {
     return {
@@ -35,52 +42,61 @@ export default {
       dialogTableVisible: false,
       order: {},
       markers: [],
-      srcList: [],
-      window: "",
-      geocoder: "",
       defaultCity: "苏州",
       zoom: 18,
       center: [121.329402, 31.228667],
+      promptList: [],
       address: "",
-      province: "",
-      city: "",
-      district: "",
+      addressDetail: {},
       lng: "",
       lat: "",
-      addArr: {
-        addr: {},
-      },
+      showAddressList: false,
+      showSearch: false,
     };
   },
-  created() {
-    this.searchKey = this.defaultCity
-    this.searchMap()
-  },
+  created() {},
   methods: {
+    getGeoCode(v) {
+      this.showAddressList = false;
+      let address = v.district + v.address + v.name;
+      getGeoCode({ address }).then((res) => {
+        if (res.code === 200) {
+          console.log("object", res.data);
+          this.addressDetail = res.data[0];
+          let splitPoint = this.addressDetail.location.indexOf(",");
+          console.log("splitPoint", splitPoint);
+          this.lng = this.addressDetail.location.slice(0, splitPoint);
+          this.lat = this.addressDetail.location.slice(splitPoint + 1);
+          this.center = [this.lng, this.lat];
+          this.markers = [
+            {
+              id: 1,
+              position: this.center,
+              icon: "/static/image/map_current.png",
+            },
+          ];
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
     searchMap() {
-      fetch(
-        `https://restapi.amap.com/v3/assistant/inputtips?key=5ae8644771ef9abf9cfb3ea23b1df6ca&keywords=${this.searchKey}&city=0512&offset=20&types=keywords`,
-        {
-          methods: "GET",
+      getInputPrompt({ keywords: this.searchKey }).then((res) => {
+        if (res.code === 200) {
+          if (res.data.length) {
+            this.promptList = res.data;
+            this.showAddressList = true;
+          }
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
         }
-      )
-        .then((res) => {
-          return res.json();
-        })
-        .then((result) => {
-          fetch(
-            `https://restapi.amap.com/v3/geocode/geo?key=4940f0a9fdc717ab27dd37fa0497c771&address=${result.tips[0].district}${result.tips[0].address}${result.tips[0].name}`,
-            {
-              methods: "GET",
-            }
-          )
-            .then((res1) => {
-              return res1.json()
-            })
-            .then((rp) => {
-              console.log('rp',rp);
-            });
-        });
+      });
     },
     setDialogStatus(data, mapData) {
       let sendM = {
@@ -101,17 +117,21 @@ export default {
       // marker标记
       this.markers = [sendM, receiptM];
       // 绘制折线
-      this.polyline.path = [
-        new AMap.LngLat(mapData.receiptLng, mapData.receiptLat),
-        new AMap.LngLat(mapData.sendLng, mapData.sendLat),
-        new AMap.LngLat(mapData.shipperLng, mapData.shipperLat),
-      ];
+      // this.polyline.path = [
+      //   new AMap.LngLat(mapData.receiptLng, mapData.receiptLat),
+      //   new AMap.LngLat(mapData.sendLng, mapData.sendLat),
+      //   new AMap.LngLat(mapData.shipperLng, mapData.shipperLat),
+      // ];
       this.dialogTableVisible = true;
     },
     chooseLocation() {
       this.dialogTableVisible = true;
+      this.showSearch = true;
+    },
+    clickSureMap() {
+      this.$emit("getAddressDetail", this.addressDetail, this.lng, this.lat);
+      this.dialogTableVisible = false;
     },
-    clickSureMap() {},
   },
 };
 </script>
@@ -122,8 +142,29 @@ export default {
   border: none;
 }
 .demo-form-inline {
+  position: relative;
   display: flex;
   align-items: center;
+  .address-list {
+    position: absolute;
+    left: 0;
+    top: 45px;
+    border: 2px solid #3333;
+    background: #fff;
+    padding: 0 10px;
+    z-index: 2;
+    .address {
+      line-height: 30px;
+      cursor: pointer;
+      .name {
+        color: #333333;
+      }
+      .district {
+        color: #999999;
+        margin-left: 10px;
+      }
+    }
+  }
 }
 /* 图标大小修改 */
 /deep/ .el-dialog__header {

src/components/orderComponents/orderDetail.vue

@@ -43,13 +43,13 @@
           <div class="title">姓名：</div>
           <div class="cont">{{orderDetail.receiptContactName}}</div>
         </div>
-        <div class="info2 info4" v-if="orderDetail.receiptPrivacyPhone">
+        <div class="info2 info4" v-if="orderDetail.receiptPhone">
           <div class="title">隐私号：</div>
-          <div class="cont">{{orderDetail.receiptPrivacyPhone}}</div>
+          <div class="cont">{{orderDetail.receiptPhone}}</div>
         </div>
-        <div class="info2 info4" v-if="orderDetail.receiptPhone">
+        <div class="info2 info4" v-if="orderDetail.receiptPrivacyPhone">
           <div class="title">手机号：</div>
-          <div class="cont">{{orderDetail.receiptPhone}}</div>
+          <div class="cont">{{orderDetail.receiptPrivacyPhone}}</div>
         </div>
       </template>
       <div class="detail_ine"></div>

src/components/orderComponents/orderList.vue

@@ -43,7 +43,7 @@
               </div>
               <!-- 取货中 -->
               <div class="order_item_header_r" v-if="tabNum === 3">
-                <span class="header_r">预计{{item.takeTimeTxt}}取件</span>
+                <span v-show="Number(item.riderArriveMinute)" class="header_r">预计{{Number(item.riderArriveMinute)}}分钟取件</span>
                 <el-button size='small' @click.stop="cancelOrder(item.id)">取消订单</el-button>
                 <el-button size='small' class="btn" @click.stop="orderPrinter(item.waimaiOrderId)">补打发票</el-button>
               </div>

src/components/settingComponents/deliverySetting.vue

@@ -1,94 +1,152 @@
 <template>
   <div class="delivery-content">
     <div>
-      <el-button type="primary">保存操作</el-button>
+      <!-- <el-button type="primary">保存操作</el-button> -->
     </div>
     <div class="recommend">
       <div class="title">
         <!-- <el-button type="primary" @click.stop="toPay">发起支付</el-button> -->
-        <span>推荐运力</span>
+        <span>推荐/屏蔽运力</span>
         <span>用户选择非聚合配送发单时，优先选中的运力置顶显示，提高您的下单效率</span>
       </div>
       <div class="delivery-list">
-        <div class="item" v-for="count in 12" :key="count">
-          <img src="../../../static/image/delivery-icon.png" class="icon" />
+        <div @click="changeStatus(v.deliveryId)" class="item" v-for="(v,i) in list" :key="i">
+          <img :src="v.pcLogo" class="icon" />
+          <div v-if="shieldDeliveryIds.includes(String(v.deliveryId))" class="mask mantle">
+            {{v.name}}已屏蔽
+          </div>
+          <div v-if="billDeliveryIds.includes(String(v.deliveryId))" class="mask recommend-delivery">
+            {{v.name}}已推荐
+          </div>
         </div>
       </div>
     </div>
-    <div class="recommend">
+    <el-dialog title="请选择对当前运力的操作！" :visible.sync="centerDialogVisible" width="600px" center>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="success" @click="changeDelivery(1)">推荐该运力</el-button>
+        <el-button type="danger" @click="changeDelivery(2)">屏蔽该运力</el-button>
+        <el-button type="primary" @click="changeDelivery(3)">恢复普通运力</el-button>
+      </span>
+    </el-dialog>
+    <!-- <div class="recommend">
       <div class="title">
-        <!-- <el-button type="primary" @click.stop="toPay">发起支付</el-button> -->
         <span>屏蔽运力</span>
         <span>用户选择非聚合配送发单时，优先选中的运力置顶显示，提高您的下单效率</span>
       </div>
       <div class="delivery-list">
-        <div class="item item-opcity" v-for="count in 12" :key="count">
-          <img src="../../../static/image/delivery-icon.png" class="icon" />
+        <div class="item item-opcity" v-for="v in list" :key="v">
+          <img :src="v.pcLogo" class="icon" />
         </div>
       </div>
-    </div>
-    <!-- <div id="qrcode"></div> -->
+    </div> -->
   </div>
 </template>
 
 <script>
-  import QRCode from "qrcodejs2"
-  export default {
-    data() {
-      return {
-        form: '',
-        link: 'https://qr.alipay.com/bax06037qiyd8v6h0q7f0009'
+import {
+  getDeliveryFloorList,
+  getConfig,
+  updateConfig,
+} from "../../api/setting.js";
+export default {
+  data() {
+    return {
+      form: "",
+      list: [],
+      billDeliveryIds: "", // 推荐运力ID
+      shieldDeliveryIds: "", // 屏蔽运力ID
+      centerDialogVisible: false,
+    };
+  },
+  created() {
+    this.getDeliveryFloorList();
+    this.getConfig();
+  },
+  mounted() {},
+  methods: {
+    changeStatus(id) {
+      this.id = id;
+      this.centerDialogVisible = true;
+    },
+    changeDelivery(type) {
+      console.log(2222);
+      // 推荐该运力
+      if (type === 1) {
+        this.shieldDeliveryIds = this.shieldDeliveryIds.filter((v) => {
+          return v !== String(this.id);
+        });
+        this.billDeliveryIds.push(String(this.id));
+        this.billDeliveryIds = [...new Set(this.billDeliveryIds)];
+      }
+      // 屏蔽该运力
+      if (type === 2) {
+        this.billDeliveryIds = this.billDeliveryIds.filter((v) => {
+          return v !== String(this.id);
+        });
+        this.shieldDeliveryIds.push(String(this.id));
+        this.shieldDeliveryIds = [...new Set(this.shieldDeliveryIds)];
       }
+      // 恢复为普通运力
+      if (type === 3) {
+        this.billDeliveryIds = this.billDeliveryIds.filter((v) => {
+          return v !== String(this.id);
+        });
+        this.shieldDeliveryIds = this.shieldDeliveryIds.filter((v) => {
+          return v !== String(this.id);
+        });
+      }
+      this.updateConfig();
     },
-    mounted() {
-      // this.$nextTick(()=>{
-      //   this.qrcode();
-      // })
+    getDeliveryFloorList() {
+      getDeliveryFloorList().then((res) => {
+        if (res.code === 200) {
+          this.list = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
     },
-    components: {
-      QRCode
+    getConfig() {
+      getConfig().then((res) => {
+        if (res.code === 200) {
+          this.billDeliveryIds = res.data.billDeliveryIds.split(",");
+          this.shieldDeliveryIds = res.data.shieldDeliveryIds.split(",");
+          let a = new Set(this.shieldDeliveryIds);
+          let b = new Set(this.billDeliveryIds);
+          let difference = new Set([...a].filter((x) => !b.has(x)));
+          this.shieldDeliveryIds = [...difference];
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+        this.centerDialogVisible = false
+      });
     },
-    methods: {
-      //  生成二维码
-      qrcode() {
-        let that = this;
-        let qrcode = new QRCode('qrcode', {
-          width: 124,
-          height: 124, // 高度
-          text: this.link, // 二维码内容
-          // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
-          // background: '#f0f',   // 背景色
-          // foreground: '#ff0'    // 前景色
-        })
-      },
-      toPay() {
-        fetch(
-          'http://121.4.100.145:8082/app/pay/getPayCode?amount=10.89&body=测试下单&orderNo=210915133735016908&token=cedebb6e872f539bef8c3f919874e9d7', {
-            methods: 'GET'
-          }).then(res => {
-          return res.json()
-        }).then(result => {
-          console.log(result);
-          if (result.code == 200) {
-            let divForm = document.getElementsByTagName('divform')
-            if (divForm.length) {
-              document.body.removeChild(divForm[0])
-            }
-            const div = document.createElement('divform')
-            div.innerHTML = result.data // res.data就是sb支付宝返回给你的form
-            document.body.appendChild(div)
-            // document.forms[0].setAttribute('target', '_blank') // 加了_blank可能出问题所以我注释了
-            document.forms[0].submit()
-          } else {
-            return this.$message({
-              message: result.msg,
-              type: 'error'
-            })
-          }
-        })
-      }
-    }
-  }
+    updateConfig() {
+      let billDeliveryIds = this.billDeliveryIds.toString();
+      let shieldDeliveryIds = this.shieldDeliveryIds.toString();
+      updateConfig({ billDeliveryIds, shieldDeliveryIds }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: "修改成功！",
+          });
+          this.getConfig();
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -110,7 +168,7 @@
         font-size: 14px;
         font-family: PingFang SC;
         font-weight: 400;
-        color: #B1B1B1;
+        color: #b1b1b1;
       }
     }
     .delivery-list {
@@ -118,21 +176,34 @@
       flex-wrap: wrap;
       padding: 30px 18px 0;
       .item {
-        font-size: 0;
-        width: 166px;
-        height: 50px;
-        border-radius: 25px;
-        overflow: hidden;
-        margin-right: 50px;
-        margin-bottom: 30px;
+        position: relative;
+        cursor: pointer;
+        margin: 0 30px 30px 0;
+        .mask {
+          position: absolute;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          top: 0;
+          left: 0;
+          width: 129px;
+          height: 40px;
+          background: #999;
+          font-size: 14px;
+          border-radius: 25px;
+          opacity: 0.8;
+        }
+        .mantle {
+          color: #fff;
+        }
+        .recommend-delivery {
+          color: red;
+        }
         .icon {
-          width: 100%;
-          height: 100%;
+          width: 129px;
+          height: 40px;
         }
       }
-      .item-opcity {
-        opacity: 0.4;
-      }
     }
   }
 }

src/components/settingComponents/voiceSetting.vue

@@ -3,11 +3,28 @@
     <div class="top-set">
       <div class="t-left">
         自动接单
-        <span>[时长设置]</span>
       </div>
       <div class="t-right">
-        <span>默认下单5分钟后</span>
-        <el-switch />
+        <el-switch @change="updateConfig" v-model="openAutoorder" :active-value="1" :inactive-value="0" />
+      </div>
+    </div>
+    <div class="top-set">
+      <div class="t-left">
+        自动配送(暂不支持预约单)
+        <span @click="open">[时长设置]</span>
+      </div>
+      <div class="t-right">
+        <span>默认下单{{autodeliveryOrderTime}}分钟后</span>
+        <el-switch @change="updateConfig" v-model="openAutodelivery" :active-value="1" :inactive-value="0" />
+      </div>
+    </div>
+    <div class="top-set">
+      <div class="t-left">
+        自动打印
+        <span>(开启后将为您自动打印小票)</span>
+      </div>
+      <div class="t-right">
+        <el-switch @change="updateConfig" v-model="openPrintSwitch" :active-value="1" :inactive-value="0" />
       </div>
     </div>
     <div class="voice-content">
@@ -17,7 +34,7 @@
         </div>
         <div class="t-right">
           <span>一键开启</span>
-          <el-switch />
+          <el-switch @change="changeMessageStatus" v-model="msasterSwitch" :active-value="1" :inactive-value="0" />
         </div>
       </div>
       <div class="voice-list">
@@ -29,7 +46,7 @@
                 <span>{{ item.name }}</span>
               </div>
               <div class="right">
-                <el-switch />
+                <el-switch @change="updateSavePushMessageStatus" v-model="item.msasterSwitch" :active-value="1" :inactive-value="0" />
               </div>
             </div>
           </el-col>
@@ -40,26 +57,135 @@
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        voiceList: [
-          { id: 1, name: '新订单提醒', url: '' },
-          { id: 2, name: '配送5分钟无人接单提醒', url: '' },
-          { id: 3, name: '骑手接单提醒', url: '' },
-          { id: 4, name: '骑手取消配送提醒', url: '' },
-          { id: 5, name: '配送超时自动取消提醒', url: '' },
-          { id: 6, name: '配送取消提醒', url: '' },
-          { id: 7, name: '顾客取消订单提醒', url: '' },
-          { id: 8, name: '账户余额不足100元提醒', url: '' },
-          { id: 9, name: '账户余额不足50元提醒', url: '' }
-        ]
+import {
+  getConfig,
+  updateConfig,
+  queryPushMessageStatus,
+  updateSavePushMessageStatus,
+} from "../../api/setting.js";
+export default {
+  data() {
+    return {
+      voiceList: [],
+      openAutodelivery: 0,
+      openAutoorder: 0,
+      openPrintSwitch: 0,
+      autodeliveryOrderTime: 0,
+      msasterSwitch: 0,
+    };
+  },
+  created() {
+    this.getConfig();
+    this.queryPushMessageStatus();
+  },
+  methods: {
+    changeMessageStatus() {
+      this.voiceList = this.voiceList.map((v) => {
+        v.msasterSwitch = this.msasterSwitch;
+        return v;
+      });
+      this.updateSavePushMessageStatus();
+    },
+    getConfig() {
+      getConfig().then((res) => {
+        if (res.code === 200) {
+          this.autodeliveryOrderTime = res.data.autodeliveryOrderTime / 60;
+          this.openAutodelivery = res.data.openAutodelivery;
+          this.openAutoorder = res.data.openAutoorder;
+          this.openPrintSwitch = res.data.openPrintSwitch;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    queryPushMessageStatus() {
+      queryPushMessageStatus().then((res) => {
+        if (res.code === 200) {
+          this.voiceList = res.data;
+          let msasterSwitchList = res.data.map((v) => {
+            return v.msasterSwitch;
+          });
+          let msasterSwitch = [...new Set(msasterSwitchList)];
+          this.msasterSwitch =
+            msasterSwitch.length === 1 && msasterSwitch[0] === 1 ? 1 : 0;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    updateSavePushMessageStatus() {
+      updateSavePushMessageStatus({ orderPushMessages: this.voiceList }).then(
+        (res) => {
+          if (res.code === 200) {
+            this.$message({
+              type: "success",
+              message: "修改成功！",
+            });
+            this.queryPushMessageStatus();
+          } else {
+            this.$message({
+              type: "error",
+              message: res.msg,
+            });
+          }
+        }
+      );
+    },
+    updateConfig(time) {
+      let params = {};
+      if (time) {
+        params = {
+          autodeliveryOrderTime: time * 60,
+          openAutodelivery: this.openAutodelivery,
+          openAutoorder: this.openAutoorder,
+          openPrintSwitch: this.openPrintSwitch,
+        };
+      } else {
+        params = {
+          openAutodelivery: this.openAutodelivery,
+          openAutoorder: this.openAutoorder,
+          openPrintSwitch: this.openPrintSwitch,
+        };
       }
+      updateConfig(params).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: "修改成功！",
+          });
+          this.getConfig();
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
     },
-    methods: {
-
-    }
-  }
+    open() {
+      this.$prompt("请设置时长（分钟）", "开启自动配送", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputValue: this.autodeliveryOrderTime,
+      })
+        .then(({ value }) => {
+          this.updateConfig(value);
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消输入",
+          });
+        });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -87,7 +213,7 @@
       font-size: 14px;
       font-family: PingFang SC;
       font-weight: 400;
-      color: #B1B1B1;
+      color: #b1b1b1;
     }
   }
   .voice-content {

src/components/shopCompoents/bindPrinter.vue

@@ -1,95 +1,174 @@
 <template>
-  <div>
+  <div class="bind-printer" v-loading="loading" element-loading-text="数据加载中">
     <div class="store-list">
-      <div class="store-list-item" :class=" index == 0 ? 'active' : '' " v-for="(item, index) in storeList" :key="index">{{ item.name }}</div>
+      <div class="store-list-item" :class=" index == 0 ? 'active' : '' " v-for="(item, index) in shopList" :key="index">{{ item.name }}</div>
     </div>
-     <div class="take-out-list">
-      <div class="item">
-        <div class="item-top">
-          <div class="name">美团外卖</div>
-          <div class="top-right">
-            <span>开启后自动接单</span>
-            <el-switch />
-          </div>
-        </div>
-        <div class="item-bottom">
-          <div class="left">
-            <div class="l-l">
-              <img src="../../../static/image/alipay.png" class="l-l-img" />
-            </div>
-            <div class="take-out-name">
-              <div class="take-out-name-bot">
-                <span class="status1">· 打印机离线</span>
-                <span class="status2">· 打印机离线</span>
-                <span class="status3">· 打印机离线</span>
-              </div>
-              <div>打印机名称：飞鹅打印机</div>
-              <div>打印机编号：VXN2020080765184</div>
-              <div class="take-out-name-bot">打印机KEY：1234</div>
-              <div>客户联：X1</div>
-              <div>商家联：X1</div>
-              <div>厨房联：X1</div>
-            </div>
-          </div>
-          <div class="right">
-            <el-button size="small">编&nbsp;辑</el-button>
-          </div>
+    <div class="header">
+      <div class="left">
+        <div class="line">
+          <div class="b_line"></div>
+          <div class="triangle"></div>
         </div>
+        <div class="label">打印机管理</div>
+      </div>
+      <div class="right">
+        <el-button class="btn" @click.stop="addPrinter(1)">添加打印机</el-button>
       </div>
     </div>
-
-    <div class="take-out-list">
+    <div class="take-out-list" v-for="(v,i) in printerList" :key="i">
       <div class="item">
         <div class="item-top">
-          <div class="name">添加打印机</div>
+          <div class="name">{{v.name}}</div>
         </div>
         <div class="item-bottom">
           <div class="left">
             <div class="l-l">
-              <img src="../../../static/image/printer.png" class="l-l-img" />
+              <img :src="v.img" class="l-l-img" />
             </div>
             <div class="take-out-name">
               <div class="take-out-name-bot">
-                <span class="status1">请添加打印机</span>
+                <span :class="['status'+v.onlineStatus,'status']"> 打印机{{v.onlineStatus === 1 ? '在线' : v.onlineStatus === 2 ? '异常' : '离线'}}</span>
               </div>
-              <div>打印机名称：-</div>
-              <div>打印机编号：-</div>
-              <div class="take-out-name-bot">打印机KEY：-</div>
-              <div>客户联：-</div>
-              <div>商家联：-</div>
-              <div>厨房联：-</div>
+              <div>打印机名称：{{v.deviceName}}</div>
+              <div>打印机编号：{{v.deviceSn}}</div>
+              <div class="take-out-name-bot">打印机KEY：{{v.deviceSecret}}</div>
+              <div>客户联：X{{v.printCustomerCount}}</div>
+              <div>商家联：X{{v.printMerchantCount}}</div>
+              <div>厨房联：X{{v.printKitchenCount}}</div>
             </div>
           </div>
           <div class="right">
-            <el-button type="primary" size="small" class="right-btn">添加打印机</el-button>
+            <el-button @click="addPrinter(2,v)" size="small">编&nbsp;辑</el-button>
+            <el-button type="danger" @click="deletePrinter(v)" size="small">删&nbsp;除</el-button>
           </div>
         </div>
       </div>
     </div>
-
-
+    <printer-add @shopDeviceList="shopDeviceList(curIdx)" ref="printerAdd" :devices="deviceList"></printer-add>
   </div>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        storeList: [
-          { id: 1, name: '门店名称-1' },
-          { id: 2, name: '门店名称-2' },
-          { id: 3, name: '门店名称-3' },
-          { id: 4, name: '门店名称-4' },
-          { id: 5, name: '门店名称-5' },
-          { id: 6, name: '门店名称-6' },
-          { id: 7, name: '门店名称-7' }
-        ]
+import printerAdd from "./printerAdd";
+import {
+  getShopList,
+  shopDeviceList,
+  deviceDetail,
+  deviceList,
+  deviceAdd,
+  deviceDelete,
+  deviceStatus,
+} from "../../api/shop";
+export default {
+  components: {
+    printerAdd,
+  },
+  data() {
+    return {
+      shopList: [],
+      curIdx: -1,
+      loading: true,
+      printerList: [],
+      showVisible: false,
+      title: "添加打印机",
+      deviceList: [],
+    };
+  },
+  watch: {
+    curIdx(newVal, oldVal) {
+      this.shopDeviceList(newVal);
+    },
+  },
+  created() {
+    this.getShopList();
+    this.getDeviceList();
+  },
+  methods: {
+    deletePrinter(v) {
+      this.$confirm("此操作将删除打印机, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deviceDelete({ id: v.id }).then((res) => {
+            if (res.code === 200) {
+              this.$message({
+                type: "error",
+                message: "删除成功！",
+              });
+              this.shopDeviceList(this.curIdx);
+            } else {
+              this.$message({
+                type: "error",
+                message: res.msg,
+              });
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    getDeviceList() {
+      deviceList({ type: 2 }).then((res) => {
+        if (res.code === 200) {
+          this.deviceList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    getShopList() {
+      getShopList().then((res) => {
+        this.loading = true;
+        if (res.code === 200) {
+          this.shopList = res.data;
+          this.curIdx = 0;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+        this.loading = false;
+      });
+    },
+    addPrinter(val, e) {
+      if (val === 1) {
+        let shopId = this.shopList[this.curIdx].id;
+        this.$refs.printerAdd.init("", shopId);
+      } else {
+        this.$refs.printerAdd.init(JSON.parse(JSON.stringify(e)));
       }
-    }
-  }
+    },
+    shopDeviceList(index) {
+      shopDeviceList({ deviceType: 2, shopId: this.shopList[index].id }).then(
+        (res) => {
+          if (res.code === 200) {
+            this.printerList = res.data;
+          } else {
+            this.$message({
+              type: "error",
+              message: res.msg,
+            });
+          }
+        }
+      );
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.bind-printer {
+  min-height: 200px;
   .store-list {
     display: flex;
     flex-wrap: nowrap;
@@ -103,14 +182,14 @@
       font-size: 14px;
       font-family: PingFang SC;
       font-weight: 400;
-      color: #B1B1B1;
+      color: #b1b1b1;
       box-sizing: border-box;
       border: 1px solid #eee;
       border-radius: 17px;
       cursor: pointer;
       margin-right: 10px;
       &.active {
-        color: #017E61;
+        color: #fc7200;
       }
     }
   }
@@ -153,7 +232,7 @@
             font-size: 14px;
             font-family: PingFang SC;
             font-weight: 400;
-            color: #B1B1B1;
+            color: #b1b1b1;
             margin-right: 12px;
           }
         }
@@ -168,8 +247,8 @@
           display: flex;
           align-items: center;
           .l-l {
-            width: 220px;
-            height: 220px;
+            width: 155px;
+            height: 80px;
             font-size: 0;
             .l-l-img {
               width: 100%;
@@ -183,27 +262,120 @@
             color: #333333;
             line-height: 26px;
             margin-left: 30px;
-            .take-out-name-bot{
+            .take-out-name-bot {
               margin-bottom: 10px;
-              .status1{
-                color: #B1B1B1;
+              .status {
+                display: flex;
+                align-items: center;
+                &:before {
+                  content: "";
+                  display: block;
+                  width: 8px;
+                  height: 8px;
+                  border-radius: 50%;
+                  margin-right: 5px;
+                }
+              }
+              .status0 {
+                color: #b1b1b1;
+                &:before {
+                  background: #b1b1b1;
+                }
               }
-              .status2{
-                color: #F74141;
+              .status2 {
+                color: #f74141;
+                &:before {
+                  background: #f74141;
+                }
               }
-              .status3{
-                color: #18B71C;
+              .status1 {
+                color: #18b71c;
+                &:before {
+                  background: #18b71c;
+                }
               }
             }
           }
         }
         .right {
           .right-btn {
-            background-color: #FC7200;
+            background-color: #fc7200;
             border: none;
           }
         }
       }
     }
   }
+  .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;
+      }
+    }
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 10px;
+    .left {
+      display: flex;
+      align-items: center;
+
+      .line {
+        position: relative;
+        width: 4px;
+        height: 15px;
+        background: #fc7200;
+        border-radius: 4px;
+        overflow: hidden;
+        margin-right: 10px;
+
+        .b_line {
+          width: 100px;
+          height: 6px;
+          background: #462bf7;
+        }
+
+        .triangle {
+          width: 0;
+          height: 0;
+          border-top: 100px solid #462bf7;
+          border-left: 100px solid transparent;
+        }
+      }
+
+      .label {
+        font-size: 16px;
+        font-weight: 500;
+        color: #0d1e40;
+      }
+    }
+  }
+  .btn {
+    background: #fc7200;
+    border-color: #fc7200;
+    color: #fff;
+    &.black {
+      background: #0d1e40;
+      border-color: #0d1e40;
+    }
+  }
+}
 </style>

src/components/shopCompoents/bindTakeOut.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="take-out" v-loading="loading" element-loading-text="数据加载中">
     <div class="store-list">
-      <div class="store-list-item" @click="curIdx = index" :class=" index === curIdx ? 'active' : '' " v-for="(item, index) in storeList" :key="index">{{ item.name }}</div>
+      <div class="store-list-item" @click="curIdx = index" :class=" index === curIdx ? 'active' : '' " v-for="(item, index) in shopList" :key="index">{{ item.name }}</div>
     </div>
     <div class="take-out-list">
       <div class="item" v-for="(v,index) in takeOutList" :key="index">
@@ -49,11 +49,12 @@ import {
 export default {
   data() {
     return {
-      storeList: [],
+      shopList: [],
       takeOutList: [],
       curIdx: -1,
-      jumpUrl: '',
+      jumpUrl: "",
       fullscreenLoading: false,
+      loading: true,
     };
   },
   watch: {
@@ -83,24 +84,49 @@ export default {
   },
   created() {
     getShopList().then((res) => {
-      this.storeList = res.data;
-      this.curIdx = 0;
+      this.loading = true;
+      getShopList().then((res) => {
+        if (res.code === 200) {
+          this.shopList = res.data;
+          this.curIdx = 0;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+        this.loading = false;
+      });
     });
   },
   methods: {
     getBindTakeOutList(index) {
-      getBindTakeOutList({ shopId: this.storeList[index].id }).then((res) => {
-        this.takeOutList = res.data;
+      getBindTakeOutList({ shopId: this.shopList[index].id }).then((res) => {
+        if (res.code === 200) {
+          this.takeOutList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
       });
     },
     goBind(v) {
       let params = {
-        shopId: this.storeList[this.curIdx].id,
+        shopId: this.shopList[this.curIdx].id,
         waimaiId: v.waimaiId,
         isNew: 1,
       };
       bindTakeOut(params).then((res) => {
-        this.jumpUrl = res.data;
+        if (res.code === 200) {
+          this.jumpUrl = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
       });
     },
     release(v) {
@@ -141,114 +167,117 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.store-list {
-  display: flex;
-  flex-wrap: nowrap;
-  width: 100%;
-  white-space: nowrap;
-  overflow-x: auto;
-  padding-bottom: 10px;
-  &-item {
-    padding: 8px 27px;
-    background-color: #fff;
-    font-size: 14px;
-    font-family: PingFang SC;
-    font-weight: 400;
-    color: #b1b1b1;
-    box-sizing: border-box;
-    border: 1px solid #eee;
-    border-radius: 17px;
-    cursor: pointer;
-    margin-right: 10px;
-    &.active {
-      color: #017e61;
+.take-out {
+  min-height: 200px;
+  .store-list {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    white-space: nowrap;
+    overflow-x: auto;
+    padding-bottom: 10px;
+    &-item {
+      padding: 8px 27px;
+      background-color: #fff;
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #b1b1b1;
+      box-sizing: border-box;
+      border: 1px solid #eee;
+      border-radius: 17px;
+      cursor: pointer;
+      margin-right: 10px;
+      &.active {
+        color: #fc7200;
+      }
     }
   }
-}
-.store-list::-webkit-scrollbar {
-  height: 6px;
-}
-.store-list::-webkit-scrollbar-track {
-  background-color: #eee;
-  /*border-radius: 5px;
+  .store-list::-webkit-scrollbar {
+    height: 6px;
+  }
+  .store-list::-webkit-scrollbar-track {
+    background-color: #eee;
+    /*border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;*/
-}
-.store-list::-webkit-scrollbar-thumb {
-  background-color: #999;
-  border-radius: 6px;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-}
+  }
+  .store-list::-webkit-scrollbar-thumb {
+    background-color: #999;
+    border-radius: 6px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+  }
 
-.take-out-list {
-  .item {
-    background-color: #fff;
-    .item-top {
-      display: flex;
-      justify-content: space-between;
-      box-sizing: border-box;
-      padding: 20px 18px;
-      align-items: center;
-      border-bottom: 1px solid #eee;
-      .top-left {
+  .take-out-list {
+    .item {
+      background-color: #fff;
+      .item-top {
         display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 20px 18px;
         align-items: center;
-        .top-left-img {
-          width: 30px;
-          height: 30px;
-          margin-right: 10px;
-        }
-        .name {
-          font-size: 16px;
-          font-family: PingFang SC;
-          font-weight: bold;
-          color: #ffa608;
+        border-bottom: 1px solid #eee;
+        .top-left {
+          display: flex;
+          align-items: center;
+          .top-left-img {
+            width: 30px;
+            height: 30px;
+            margin-right: 10px;
+          }
+          .name {
+            font-size: 16px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            color: #ffa608;
+          }
         }
-      }
-      .top-right {
-        display: flex;
-        align-items: center;
-        span {
-          font-size: 14px;
-          font-family: PingFang SC;
-          font-weight: 400;
-          color: #b1b1b1;
-          margin-right: 12px;
+        .top-right {
+          display: flex;
+          align-items: center;
+          span {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #b1b1b1;
+            margin-right: 12px;
+          }
         }
       }
-    }
-    .item-bottom {
-      display: flex;
-      justify-content: space-between;
-      box-sizing: border-box;
-      padding: 25px 18px;
-      align-items: center;
-      .left {
+      .item-bottom {
         display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 25px 18px;
         align-items: center;
-        .l-l {
-          width: 160px;
-          height: 50px;
-          font-size: 0;
-          .l-l-img {
-            width: 100%;
-            height: 100%;
+        .left {
+          display: flex;
+          align-items: center;
+          .l-l {
+            width: 160px;
+            height: 50px;
+            font-size: 0;
+            .l-l-img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .take-out-name {
+            font-size: 13px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 20px;
+            margin-left: 30px;
           }
         }
-        .take-out-name {
-          font-size: 13px;
-          font-family: PingFang SC;
-          font-weight: 400;
-          color: #333333;
-          line-height: 20px;
-          margin-left: 30px;
-        }
-      }
-      .right {
-        .right-btn {
-          background-color: #fc7200;
-          border: #fc7200;
+        .right {
+          .right-btn {
+            background-color: #fc7200;
+            border: #fc7200;
+          }
         }
       }
     }

src/components/shopCompoents/printerAdd.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="shopAdd">
+    <!-- 打印机新增、编辑 -->
+    <el-dialog width="40%" :title="title" destroy-on-close center :visible.sync="showVisible">
+      <el-form :model="form" ref="form" label-width="120px">
+        <el-form-item label="选择打印机"  prop="deviceType">
+          <div class="category_box">
+            <div class="item" :class="form.deviceType == item.type ? 'active':''" v-for="(item,i) in devices" :key="i" @click="changeType(item)">
+              {{item.name}}
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="打印机名称"  prop="name">
+          <el-input v-model="form.name" placeholder="给这台打印机取个名字吧" autocomplete="off" style="width: 100%">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="打印机编号"  prop="deviceSn">
+          <el-input v-model="form.deviceSn" placeholder="查看打印机底部标签" autocomplete="off" style="width: 100%">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="打印机KEY"  prop="deviceSecret">
+          <el-input v-model="form.deviceSecret" placeholder="查看打印机底部标签" autocomplete="off" style="width: 100%">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="自动打印接单"  prop="deviceSecret">
+          <el-switch v-model="form.openOrderPrint" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item label="自动打印取消单"  prop="deviceSecret">
+          <el-switch v-model="form.openOrderCancelPrint" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item label="打印份数" >
+          <div class="printer-num">
+            <img @click="reduce(1)" src="../../../static/image/icon_reduce.png" class="reduce" alt="" srcset="">
+            <div class="num">{{form.printCustomerCount}} 份</div>
+            <img @click="add(1)" src="../../../static/image/icon_add.png" class="add" alt="" srcset="">
+            <div class="name">客户联</div>
+          </div>
+          <div class="printer-num">
+            <img @click="reduce(2)" src="../../../static/image/icon_reduce.png" class="reduce" alt="" srcset="">
+            <div class="num">{{form.printMerchantCount}} 份</div>
+            <img @click="add(2)" src="../../../static/image/icon_add.png" class="add" alt="" srcset="">
+            <div class="name">商家联</div>
+          </div>
+          <div class="printer-num">
+            <img @click="reduce(3)" src="../../../static/image/icon_reduce.png" class="reduce" alt="" srcset="">
+            <div class="num">{{form.printKitchenCount}} 份</div>
+            <img @click="add(3)" src="../../../static/image/icon_add.png" class="add" alt="" srcset="">
+            <div class="name">厨房联</div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="medium" class="btn" @click="save">保存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { deviceAdd } from "../../api/shop.js";
+export default {
+  props: {
+    devices: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      title: "添加打印机",
+      showVisible: false,
+      form: {},
+      revieweds: [],
+    };
+  },
+  methods: {
+    changeType(v){
+      this.$set(this.form,'deviceType',v.type)
+      this.form.deviceId = v.id
+    },
+    init(e,shopId) {
+      if (e) {
+        console.log(e);
+        this.title = "编辑打印机";
+        this.form = e;
+      } else {
+        this.title = "添加打印机";
+        this.form = {
+          printCustomerCount: 0,
+          printMerchantCount: 0,
+          printKitchenCount: 0,
+          shopId
+        };
+      }
+      this.showVisible = true;
+    },
+    save() {
+      deviceAdd(this.form).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: `${this.form.id ? "保存" : "新增"}成功！`,
+          });
+          this.$emit("shopDeviceList");
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    add(type) {
+      switch (type) {
+        case 1:
+          this.form.printCustomerCount = ++this.form.printCustomerCount;
+          break;
+        case 2:
+          this.form.printMerchantCount = ++this.form.printMerchantCount;
+          break;
+        case 3:
+          this.form.printKitchenCount = ++this.form.printKitchenCount;
+          break;
+
+        default:
+          break;
+      }
+    },
+    reduce(type) {
+      switch (type) {
+        case 1:
+          this.form.printCustomerCount = this.form.printCustomerCount
+            ? --this.form.printCustomerCount
+            : this.form.printCustomerCount;
+          break;
+        case 2:
+          this.form.printMerchantCount = this.form.printMerchantCount
+            ? --this.form.printMerchantCount
+            : this.form.printMerchantCount;
+          break;
+        case 3:
+          this.form.printKitchenCount = this.form.printKitchenCount
+            ? --this.form.printKitchenCount
+            : this.form.printKitchenCount;
+          break;
+
+        default:
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.shopAdd {
+  .printer-num {
+    display: flex;
+    align-items: center;
+    .reduce {
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+    }
+    .num {
+      margin: 0 10px;
+    }
+    .add {
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+    }
+    .name {
+      margin-left: 20px;
+    }
+  }
+  .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;
+    }
+  }
+
+  .reviewed {
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+
+      .left {
+        display: flex;
+        align-items: center;
+        line-height: 0;
+
+        .logo {
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+
+        .label {
+          font-size: 14px;
+          color: #000000;
+        }
+      }
+
+      .tip {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 60px;
+        height: 22px;
+        border-radius: 22px;
+        background: #f74141;
+        font-size: 12px;
+        color: #ffffff;
+      }
+    }
+  }
+
+  .btn {
+    background: #fc7200;
+    color: #ffffff;
+    width: 220px;
+  }
+}
+</style>

src/components/shopCompoents/shopAdd.vue

@@ -7,7 +7,7 @@
         </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="form.categoryId = item.id">
+            <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>
@@ -52,7 +52,7 @@
       </div>
     </el-dialog>
     <!-- 通过地图选择地理位置 -->
-    <order-map ref="orderMap"></order-map>
+    <order-map @getAddressDetail="getAddressDetail" ref="orderMap"></order-map>
   </div>
 </template>
 
@@ -99,6 +99,15 @@ export default {
     showMap() {
       this.$refs.orderMap.chooseLocation();
     },
+    getAddressDetail(v, lng, lat) {
+      this.form.address = v.formattedAddress;
+      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() {
       shopAdd(this.form).then((res) => {
         if (res.code === 200) {
@@ -106,6 +115,7 @@ export default {
             type: "success",
             message: `${this.form.id ? "保存" : "新增"}成功！`,
           });
+          this.$emit("getData");
         } else {
           this.$message({
             type: "error",

src/components/shopCompoents/shopList.vue

@@ -12,7 +12,13 @@
         <el-button class="btn" @click.stop="addShop(1)">新增门店</el-button>
       </div>
     </div>
-    <el-table v-loading="loading" element-loading-text="数据加载中" :data="data" stripe header-row-class-name="table_h" style="width: 100%; margin-top: 10px">
+    <el-table v-loading="loading" element-loading-text="数据加载中" :data="shopList" stripe header-row-class-name="table_h" style="width: 100%; margin-top: 10px">
+      <el-table-column label="操作" width="200" align="center">
+        <template slot-scope="scope">
+          <el-button size="mini" @click.stop="addShop(2, scope.row)">修改</el-button>
+          <!-- <el-button class="btn black" size="mini" @click.stop="deleteItem(scope.row)">删除门店</el-button> -->
+        </template>
+      </el-table-column>
       <el-table-column prop="code" label="门店编号" width="170"></el-table-column>
       <el-table-column prop="name" label="门店名称" width="172" align="center"></el-table-column>
       <el-table-column prop="address" label="门店地址" width="321" align="center"></el-table-column>
@@ -25,21 +31,14 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="200" align="center">
-        <template slot-scope="scope">
-          <el-button size="mini" @click.stop="addShop(2, scope.row)">修改</el-button>
-          <!-- <el-button class="btn black" size="mini" @click.stop="deleteItem(scope.row)">删除门店</el-button> -->
-        </template>
-      </el-table-column>
     </el-table>
-    <shop-add ref="shopAdd" :products="productList"></shop-add>
+    <shop-add @getData="getData" ref="shopAdd" :products="productList"></shop-add>
   </div>
 </template>
 
 <script>
 import shopAdd from "./shopAdd";
 import { getShopList, getProductList, shopDelete } from "../../api/shop";
-
 export default {
   components: {
     shopAdd,
@@ -47,7 +46,7 @@ export default {
   data() {
     return {
       loading: false,
-      data: [],
+      shopList: [],
       productList: [],
     };
   },
@@ -55,6 +54,7 @@ export default {
   mounted() {
     this.getData();
     this.getProductList();
+    // this.$refs.map.setDialogStatus()
   },
 
   methods: {
@@ -62,7 +62,7 @@ export default {
       if (val == 1) {
         this.$refs.shopAdd.init();
       } else {
-        this.$refs.shopAdd.init(e);
+        this.$refs.shopAdd.init(JSON.parse(JSON.stringify(e)));
       }
     },
 
@@ -70,7 +70,7 @@ export default {
       this.loading = true;
       getShopList().then((res) => {
         if (res.code === 200) {
-          this.data = res.data;
+          this.shopList = res.data;
         } else {
           this.$message({
             type: "error",