add 支付独立成公共组件

src/api/amount.js

@@ -0,0 +1,22 @@
+import { get, post, postJson } from './http.js';
+// 获取钱包
+export const getWallet = ( params ) => {
+  return get( 'app/member/wallet', params )
+}
+// 获取充值列表
+export const getRechargeList = ( params ) => {
+  return get( 'app/recharge/list', params )
+}
+// 充值
+export const recharge = ( params ) => {
+  return post( 'app/pay/order', params )
+}
+// 充值
+export const getPayResult = ( params ) => {
+  return get( 'app/pay/tradeQuery', params )
+}
+
+// 充值协议接口
+export const getExplain = ( params ) => {
+  return get( 'app/common/explain', params )
+}

src/common/qrCode.vue

@@ -0,0 +1,216 @@
+<template>
+  <!-- 支付二维码弹出层 -->
+  <el-dialog width="1000px" class="pay-dialog" :visible.sync="innerVisible" destroy-on-close append-to-body>
+    <img @click="closeCode" class="close" src="../../static/image/icon_close.png" alt="">
+    <div class="pay-modal">
+      <div class="pay-top">{{ paymentType == 1 ? '支付宝' : '微信' }}支付</div>
+    </div>
+    <div class="code-content">
+      <div class="code-top">
+        <div class="code-left">
+          <div class="l-title">支付金额</div>
+        </div>
+        <div class="code-right">￥{{ payAmount }}</div>
+      </div>
+      <div class="code-bottom">
+        <div id="qrcode" ref="qrcode" class="code-img"></div>
+        <div class="des">请使用手机打开{{ paymentType == 1 ? '支付宝' : '微信' }}扫描二维码完成支付</div>
+        <div class="guo-qi">
+          <span @click.stop="refreshCode()">点击刷新</span>
+          重新获取二维码
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import QRCode from "qrcodejs2";
+import { getPayResult } from "../api/amount.js";
+export default {
+  data() {
+    return {
+      innerVisible: true,
+      timer: null,
+    };
+  },
+  props: {
+    paymentType: Number,
+    link: String,
+    payAmount: Number,
+    orderSn: String,
+  },
+  watch: {
+    link() {
+      this.crateQrcode();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.crateQrcode();
+    });
+  },
+  methods: {
+    //  生成二维码
+    crateQrcode() {
+      console.log("link", this.link);
+      this.$refs.qrcode.innerHTML = "";
+      let _this = this;
+      let qrcode = new QRCode("qrcode", {
+        width: 260,
+        height: 260, // 高度
+        text: _this.link, // 二维码内容
+      });
+      setInterval(() => {
+        this.getPayResult();
+      }, 4000);
+    },
+    showCode() {
+      this.payModal = true;
+    },
+    // 关闭弹框,清除已经生成的二维码
+    closeCode() {
+      clearInterval(this.timer);
+      this.timer = null;
+      this.$emit("closeCode");
+    },
+    refreshCode() {
+      clearInterval(this.timer);
+      this.timer = null;
+      this.$emit("refreshCode");
+    },
+    getPayResult() {
+      let params = {
+        orderSn: this.orderSn,
+        payType: this.paymentType,
+      };
+      getPayResult(params).then((res) => {
+        if (res.code === 200) {
+          let data = res.data;
+          if (data.status === 0) {
+            this.closeCode();
+            this.$message({
+              type: data.status ? "sucess" : "error",
+              message: data.msg,
+            });
+          }
+          if (data.status === 1) {
+            clearInterval(this.timer);
+            this.timer = null;
+            this.$emit("paySuccess");
+          }
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pay-dialog {
+  /deep/ .el-dialog__header {
+    padding: 0;
+  }
+
+  /deep/ .el-dialog__body {
+    padding: 0px !important;
+  }
+}
+.close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+}
+.pay-modal {
+  // border-radius: 16px;
+  overflow: hidden;
+
+  .pay-top {
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+    font-size: 22px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #ffffff;
+    background: url(../../static/image/pay-bg.png) no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+.code-content {
+  width: 640px;
+  margin: 40px auto 0;
+  padding-bottom: 100px;
+  box-sizing: border-box;
+
+  .code-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 14px 20px;
+
+    .code-left {
+      .l-title {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #0d1e40;
+      }
+
+      .l-price {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #9ea7b7;
+      }
+    }
+
+    .code-right {
+      font-size: 24px;
+      font-family: PingFang SC;
+      font-weight: 600;
+      color: #f74141;
+    }
+  }
+
+  .code-bottom {
+    text-align: center;
+    padding-top: 30px;
+
+    .code-img {
+      width: 260px;
+      height: 260px;
+      margin: 0 auto;
+    }
+
+    .des {
+      margin: 10px 0;
+      font-size: 13px;
+      color: #fc7200;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    .guo-qi {
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #9ea7b7;
+
+      span {
+        color: #175199;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/components/accountCompoents/wallet.vue

@@ -1,145 +1,266 @@
 <template>
-    <div>
-        <el-col :span="24">
-            <div class="balance">
-                <div class="balance_name">账户余额（元）</div>
-                <div class="balance_price">0.00</div>
-                <div class="balance_line"></div>
-                <div class="balance_sign"><img src="../../../static/image/1.png" alt="" srcset=""> 为了您能高效发单，请保持账户资金充足</div>
-            </div>
-        </el-col>
-        <el-col :span="18">
-            <div class="recharge_title">充值金额</div>
-            <div class="recharge_list">
-                <div class="item item_ac">5000元</div>
-                <div class="item">5000元</div>
-                <div class="item">5000元</div>
-                <div class="item">5000元</div>
-                <div class="item">5000元</div>
-                <div class="item">5000元</div>
-                <div class="item">5000元</div>
-                <div class="item">5000元</div>
-                <div class="item">其他金额</div>
-            </div>
-            <div class="recharge_title">支付方式</div>
-            <div class="recharge_list">
-                <div class="item"><img src="../../../static/image/alipay.png" alt="" srcset=""> 支付宝支付</div>
-                <div class="item"><img src="../../../static/image/we-chat.png" alt="" srcset="">微信支付</div>
-            </div>
-            <el-button class="recharge_color">去充值</el-button>
-            <div class="agreement">充值即同意 <span>《充值协议》</span> </div>
-        </el-col>
-    </div>
+  <div>
+    <el-col :span="24">
+      <div class="balance">
+        <div class="balance_name">账户余额（元）</div>
+        <div class="balance_price">{{amount}}</div>
+        <div class="balance_line"></div>
+        <div class="balance_sign"><img src="../../../static/image/1.png" alt="" srcset=""> 为了您能高效发单，请保持账户资金充足</div>
+      </div>
+    </el-col>
+    <el-col :span="18">
+      <div class="recharge_title">充值金额</div>
+      <div class="recharge_list">
+        <div @click="chooseMoney(v,i)" :class="curIdx === i ? 'item item_ac' : 'item'" v-for="(v,i) in moneyList" :key="i">{{v.value}}元</div>
+        <div @click="open()" :class="curIdx === -1 ? 'item item_ac' : 'item'">其他金额{{curIdx === -1 && money ? `(${money})` : ''}}</div>
+      </div>
+      <div class="recharge_title">支付方式</div>
+      <div class="recharge_list">
+        <div @click="paymentType = 1" :class="paymentType === 1 ? 'item item_ac' : 'item'"><img src="../../../static/image/alipay.png" alt="" srcset=""> 支付宝支付</div>
+        <div @click="paymentType = 2" :class="paymentType === 2 ? 'item item_ac' : 'item'"><img src="../../../static/image/we-chat.png" alt="" srcset="">微信支付</div>
+      </div>
+      <el-button @click="recharge" class="recharge_color">去充值</el-button>
+      <div class="agreement">充值即同意 <span>《充值协议》</span> </div>
+    </el-col>
+    <qr-code v-if="showCode" @refreshCode="recharge" @closeCode="showCode = false" ref="code" :payAmount="payAmount" :link="link" :paymentType="paymentType" :orderSn="orderSn"></qr-code>
+  </div>
 </template>
 
 <script>
-  export default {
-    props: {
-      products: {
-        type: Array,
-        default: function () {
-          return []
+import {
+  getWallet,
+  getRechargeList,
+  recharge,
+  getPayResult,
+} from "../../api/amount.js";
+import qrCode from "../../common/qrCode.vue";
+export default {
+  props: {
+    products: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      amount: 0,
+      moneyList: [],
+      curIdx: 0,
+      paymentType: 1,
+      money: 0,
+      id: "",
+      link: "",
+      timer: null,
+      orderSn: "",
+      showCode: false,
+      payAmount: 0,
+    };
+  },
+  components: {
+    qrCode,
+  },
+  created() {
+    this.getWallet();
+    this.getRechargeList();
+  },
+  methods: {
+    getRechargeList() {
+      getRechargeList().then((res) => {
+        if (res.code === 200) {
+          this.moneyList = res.data;
+          this.money = this.moneyList[this.curIdx].value;
+          this.id = this.moneyList[this.curIdx].id;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
         }
-      }
+      });
+    },
+    getWallet() {
+      getWallet().then((res) => {
+        if (res.code === 200) {
+          this.amount = res.data.amount;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
     },
-    data() {
-      return {
-        
+    chooseMoney(v, i) {
+      this.curIdx = i;
+      this.money = v.value;
+      this.id = v.id;
+    },
+    open() {
+      this.curIdx = -1;
+      this.$prompt("请输入充值金额(正整数)", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputPattern: /^[1-9]\d*$/,
+        inputErrorMessage: "输入金额格式不正确",
+      })
+        .then(({ value }) => {
+          this.money = Number(value);
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消输入",
+          });
+        });
+    },
+    recharge() {
+      if (!this.paymentType) {
+        return this.$message({
+          type: "info",
+          message: "请先选择支付方式再充值！",
+        });
+      }
+      if (!this.money) {
+        return this.$message({
+          type: "info",
+          message: "请先输入充值金额再充值！",
+        });
       }
+      let params = {
+        money: this.money,
+        paymentType: this.paymentType,
+        createType: 1,
+        id: this.id,
+      };
+      recharge(params).then((res) => {
+        if (res.code === 200) {
+          this.link = res.data.data;
+          this.orderSn = res.data.orderSn;
+          this.payAmount = res.data.amount;
+          this.showCode = true;
+          setInterval(() => {
+            // this.getPayResult();
+          }, 2000);
+        } else {
+          this.$message({
+            type: "info",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    getPayResult() {
+      let params = {
+        orderSn: this.orderSn,
+        payType: this.paymentType === 1 ? this.paymentType : 0,
+      };
+      getPayResult(params).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: res.data === "success" ? "success" : "error",
+            message: res.data === "success" ? "支付成功！" : "支付失败！",
+          });
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
     },
+  },
+};
+</script>
 
-    methods: {
-      
+<style lang="scss" scoped>
+.balance {
+  width: 100%;
+  height: 200px;
+  border-radius: 5px;
+  background: linear-gradient(to right, #5664e2, #13b2c1);
+  padding-left: 42px;
+  box-sizing: border-box;
+  margin-bottom: 42px;
+  .balance_name {
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    padding-top: 36px;
+  }
+  .balance_price {
+    font-size: 60px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .balance_line {
+    width: 100%;
+    height: 1px;
+    background: rgba($color: #ffffff, $alpha: 0.1);
+    margin-top: 10px;
+  }
+  .balance_sign {
+    font-size: 12px;
+    font-weight: 400;
+    color: #ffffff;
+    opacity: 0.6;
+    line-height: 60px;
+    display: flex;
+    align-items: center;
+    img {
+      width: 13px;
+      height: 13px;
+      margin-right: 4px;
     }
   }
-</script>
-
-<style lang="scss">
-  .balance{
-          width: 100%;
-          height: 200px;
-          border-radius: 5px;
-          background: linear-gradient(to right,#5664E2,#13B2C1);
-          padding-left: 42px;
-          box-sizing: border-box;
-          margin-bottom: 42px;
-          .balance_name{
-            font-size: 14px;
-            font-weight: 400;
-            color: #FFFFFF;
-            padding-top: 36px;
-          }
-          .balance_price{
-            font-size: 60px;
-            font-weight: bold;
-            color: #FFFFFF;
-          }
-          .balance_line{
-              width: 100%;
-              height: 1px;
-              background: rgba($color: #FFFFFF, $alpha: 0.1);
-              margin-top: 10px;
-          }
-          .balance_sign{
-            font-size: 12px;
-            font-weight: 400;
-            color: #FFFFFF;
-            opacity: 0.6;
-            line-height: 60px;
-            display: flex;
-            align-items: center;
-            img{
-                width: 13px;
-                height: 13px;
-                margin-right: 4px;
-            }
-          }
-      }
-        .recharge_title{
-            font-size: 16px;
-            font-weight: 500;
-            color: #333333;
-        }
-        .recharge_color{
-            background: #FC7200;
-            color: #FFF;
-        }
-        .agreement{
-            font-size: 12px;
-            font-weight: 400;
-            color: #808080;
-            span{
-                color: #3662A1;
-            }
-        }
-        .recharge_list{
-            width: 100%;
-            display: flex;
-            flex-wrap: wrap;
-            margin-top: 24px;
-            margin-bottom: 40px;
-            .item{
-                width: 210px;
-                height: 67px;
-                border: 1px solid #E3E3E3;
-                color: #222222;
-                font-size: 14px;
-                font-weight: 600;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border-radius: 3px;
-                margin-right: 15px;
-                margin-bottom: 15px;
-                img{
-                    width: 24px;
-                    height: 24px;
-                    margin-right: 6px;
-                }
-            }
-            .item_ac{
-                border-color: #FC7200;
-                color: #FC7200;
-            }
-        }
+}
+.recharge_title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333333;
+}
+.recharge_color {
+  background: #fc7200;
+  color: #fff;
+}
+.agreement {
+  font-size: 12px;
+  font-weight: 400;
+  color: #808080;
+  margin-top: 10px;
+  span {
+    color: #3662a1;
+  }
+}
+.recharge_list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 24px;
+  margin-bottom: 40px;
+  .item {
+    width: 210px;
+    height: 67px;
+    border: 1px solid #e3e3e3;
+    color: #222222;
+    font-size: 14px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
+    margin: 0 15px 15px 0;
+    cursor: pointer;
+    img {
+      width: 24px;
+      height: 24px;
+      margin-right: 6px;
+    }
+  }
+  .item_ac {
+    border-color: #fc7200;
+    color: #fc7200;
+  }
+}
 </style>

src/components/orderComponents/orderList.vue

@@ -229,7 +229,7 @@
             <span>支付方式</span>
           </div>
           <div class="pay-list">
-            <div class="pay-item" @click.stop="payId = item.id" :class="payId == item.id ? 'pay-active' : '' " v-for="(item, index) in payList" :key="index">
+            <div class="pay-item" @click.stop="paymentType = item.id" :class="paymentType == item.id ? 'pay-active' : '' " v-for="(item, index) in payList" :key="index">
               <img :src="item.icon" class="pay-icon" />
               <span>{{ item.name }}</span>
             </div>
@@ -242,41 +242,19 @@
       </div>
     </el-dialog>
     <!-- 支付二维码弹出层 -->
-    <el-dialog width="1000px" class="pay-dialog" :show-close="false" destroy-on-close :visible.sync="payModal">
-      <div class="pay-modal">
-        <div class="pay-top">{{ payId == 1 ? '支付宝' : '微信' }}支付</div>
-      </div>
-      <div class="code-content">
-        <div class="code-top">
-          <div class="code-left">
-            <div class="l-title">支付金额</div>
-            <!-- <div class="l-price">预估￥8.80，优惠券抵扣￥2.00</div> -->
-          </div>
-          <div class="code-right">￥{{ payAmount }}</div>
-        </div>
-        <div class="code-bottom">
-          <!-- <img src="../../../static/image/alipay.png" class="code-img" /> -->
-          <div id="qrcode" class="code-img"></div>
-          <div class="des">请使用手机打开{{ payId == 1 ? '支付宝' : '微信' }}扫描二维码完成支付</div>
-          <div class="guo-qi" v-if="false">
-            <span>点击刷新</span>
-            重新获取二维码
-          </div>
-        </div>
-      </div>
-    </el-dialog>
+    <qr-code v-if="showCode" @paySuccess="paySuccess" @refreshCode="recharge" @closeCode="showCode = false" ref="code" :payAmount="payAmount" :link="link" :paymentType="paymentType" :orderSn="orderSn"></qr-code>
   </div>
 </template>
 
 <script>
 import moment from "moment";
 import bus from "../../common/bus.js";
-import QRCode from "qrcodejs2";
 import orderMap from "./orderAMap.vue";
 import OrderDetail from "./orderDetail.vue";
 import orderTrack from "./orderTrack.vue";
 import { mapState } from "vuex";
 import sendOrderPopup from "./sendOrderPopup.vue";
+import qrCode from "../../common/qrCode.vue";
 import {
   sendValuation,
   waimaiprinter,
@@ -297,8 +275,7 @@ export default {
   data() {
     return {
       payAmount: 0,
-      payModal: false, // 二维码弹出层
-      payId: 1,
+      paymentType: 1, // 1 支付宝 0 微信
       payList: [
         {
           id: 1,
@@ -353,6 +330,8 @@ export default {
       orderDetail: {},
       showDetail: false,
       showTrack: false,
+      showCode: false,
+      link: "",
     };
   },
   props: {
@@ -364,6 +343,7 @@ export default {
     orderMap,
     OrderDetail,
     orderTrack,
+    qrCode,
   },
   watch: {
     tabNum(newVal, oldVal) {
@@ -395,37 +375,10 @@ export default {
     ...mapState(["userInfo"]),
   },
   methods: {
-    getPayInfo(orderSn) {
-      const _ = this;
-      let params = {
-        orderSn,
-        payType: this.payId,
-      };
-      _.addTipTimer = setTimeout(() => {
-        getPayResult(params).then((res) => {
-          console.log(res, "查询支付结果");
-          if (res.data === "success") {
-            clearTimeout(_.addTipTimer);
-            _.payModal = false;
-            _.addTipStatus = false;
-            bus.$emit("refreshData");
-          } else {
-            _.getPayInfo(orderSn);
-          }
-        });
-      }, 3000);
-    },
-    //  生成二维码
-    qrcode(link) {
-      let that = this;
-      let qrcode = new QRCode("qrcode", {
-        width: 260,
-        height: 260, // 高度
-        text: link, // 二维码内容
-        // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
-        // background: '#f0f',   // 背景色
-        // foreground: '#ff0'    // 前景色
-      });
+    paySuccess() {
+      this.showCode = false;
+      this.addTipStatus = false;
+      bus.$emit("refreshData");
     },
     richMoney() {
       let reg = /(^[1-9]\d*$)/g;
@@ -437,20 +390,16 @@ export default {
           });
         }
       }
-      var idObject = document.getElementById("qrcode");
-      if (idObject != null) {
-        idObject.innerHTML = "";
-      }
       let params = {
         orderId: this.orderId,
         tipAmount:
           this.tipActive == -1 ? this.tipAmount : this.tipList[this.tipActive],
-        paymentType: this.payId,
+        paymentType: this.paymentType,
         createType: 1,
       };
       tips(params).then((res) => {
         if (res.code == 200) {
-          if (this.payId == 4) {
+          if (this.paymentType == 4) {
             // 余额支付
             this.$message({
               message: "小费添加成功",
@@ -459,18 +408,14 @@ export default {
             bus.$emit("refreshData");
             this.addTipStatus = false;
             this.tipAmount = "";
-            this.payModal = false;
             clearTimeout(this.addTipTimer);
             this.addTipTimer = null;
-          } else if (this.payId == 1 || this.payId == 2) {
+          } else if (this.paymentType == 1 || this.paymentType == 2) {
             // 支付宝、微信支付
             this.payAmount = res.data.amount || 0;
             this.orderSn = res.data.orderSn;
-            this.payModal = true;
-            this.$nextTick(() => {
-              this.qrcode(res.data.data);
-            });
-            this.getPayInfo(res.data.orderSn);
+            this.link = res.data.data;
+            this.showCode = true;
           }
         } else {
           this.$message({
@@ -860,99 +805,6 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped="scoped">
-.pay-dialog {
-  /deep/ .el-dialog__header {
-    padding: 0;
-  }
-
-  /deep/ .el-dialog__body {
-    padding: 0px !important;
-  }
-}
-.pay-modal {
-  // border-radius: 16px;
-  overflow: hidden;
-
-  .pay-top {
-    height: 80px;
-    line-height: 80px;
-    text-align: center;
-    font-size: 22px;
-    font-family: PingFang SC;
-    font-weight: bold;
-    color: #ffffff;
-    background: url(../../../static/image/pay-bg.png) no-repeat;
-    background-size: 100% 100%;
-  }
-}
-
-.code-content {
-  width: 640px;
-  margin: 40px auto 0;
-  padding-bottom: 100px;
-  box-sizing: border-box;
-
-  .code-top {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 14px 20px;
-
-    .code-left {
-      .l-title {
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: bold;
-        color: #0d1e40;
-      }
-
-      .l-price {
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        color: #9ea7b7;
-      }
-    }
-
-    .code-right {
-      font-size: 24px;
-      font-family: PingFang SC;
-      font-weight: 600;
-      color: #f74141;
-    }
-  }
-
-  .code-bottom {
-    text-align: center;
-    padding-top: 30px;
-
-    .code-img {
-      width: 260px;
-      height: 260px;
-      margin: 0 auto;
-    }
-
-    .des {
-      font-size: 14px;
-      font-family: PingFang SC;
-      font-weight: 400;
-      color: #0d1e40;
-      margin: 10px 0 20px 0;
-    }
-
-    .guo-qi {
-      font-size: 14px;
-      font-family: PingFang SC;
-      font-weight: 400;
-      color: #9ea7b7;
-
-      span {
-        color: #175199;
-        cursor: pointer;
-      }
-    }
-  }
-}
 .choose-self {
   padding-top: 25px;
   border-bottom: 1px solid #eee;

src/components/settingComponents/deliverySetting.vue

@@ -28,17 +28,6 @@
         <el-button type="primary" @click="changeDelivery(3)">恢复普通运力</el-button>
       </span>
     </el-dialog>
-    <!-- <div class="recommend">
-      <div class="title">
-        <span>屏蔽运力</span>
-        <span>用户选择非聚合配送发单时，优先选中的运力置顶显示，提高您的下单效率</span>
-      </div>
-      <div class="delivery-list">
-        <div class="item item-opcity" v-for="v in list" :key="v">
-          <img :src="v.pcLogo" class="icon" />
-        </div>
-      </div>
-    </div> -->
   </div>
 </template>
 

src/components/shopCompoents/bindPrinter.vue

@@ -32,9 +32,11 @@
               <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 class="print-num">
+                <div>客户联：X{{v.printCustomerCount}}</div>
+                <div>商家联：X{{v.printMerchantCount}}</div>
+                <div>厨房联：X{{v.printKitchenCount}}</div>
+              </div>
             </div>
           </div>
           <div class="right">
@@ -241,7 +243,7 @@ export default {
         display: flex;
         justify-content: space-between;
         box-sizing: border-box;
-        padding: 25px 18px;
+        padding: 10px 18px;
         align-items: center;
         .left {
           display: flex;
@@ -263,7 +265,7 @@ export default {
             line-height: 26px;
             margin-left: 30px;
             .take-out-name-bot {
-              margin-bottom: 10px;
+              // margin-bottom: 10px;
               .status {
                 display: flex;
                 align-items: center;
@@ -295,6 +297,12 @@ export default {
                 }
               }
             }
+            .print-num {
+              display: flex;
+              div {
+                margin-right: 20px;
+              }
+            }
           }
         }
         .right {