Merge branch 'dev_new' into dev

src/api/http.js

@@ -115,6 +115,19 @@ export function postJson(url, data = {}) {
     },
     data: data
   };
-  sendObject.data = qs.parse(qs.stringify(data));
+  sendObject.data = qs.parse(qs.stringify(data), { arrayFormat: 'brackets' });
+  return service(sendObject)
+}
+//上传图片
+export function uploadImg(url, data = {}) {
+  //默认配置
+  let sendObject = {
+    url: requestUrl + url,
+    method: "post",
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    data: data
+  };
   return service(sendObject)
 }

src/api/setting.js

@@ -1,4 +1,4 @@
-import { get, post, postJson } from './http.js';
+import { get, post, postJson, uploadImg } from './http.js';
 
 export const getSoundMsg = (params) => {
   return get('app/message/getSoundMsg', params)
@@ -54,3 +54,22 @@ export const defaultAddress = (params) => {
 export const syncFoodImg = (params) => {
   return get('app/waimai/syncFoodImg', params)
 }
+
+// 客服电话
+export const getCustomerPhone = (params) => {
+  return get('app/customerService/deliveryList', params)
+}
+
+//上传图片
+export const uploadFeedbackImg = (params) => {
+  return uploadImg('app/common/upload', params)
+}
+
+// 提交反馈
+export const saveFeedback = (params) => {
+  return post('app/feedback/save', params)
+}
+// 反馈列表 app/feedback/list
+export const getFeedbackList = (params) => {
+  return get('app/feedback/list', params)
+}

src/api/shop.js

@@ -4,9 +4,16 @@ export const getShopList = (params) => {
   return get('app/shop/list', params)
 }
 
+export const shopListNew = (params) => {
+  return get('app/shop/listSelect', params)
+}
+
 export const getShopDetail = (params) => {
   return get('app/shop/detail', params)
 }
+export const printTest = (params) => {
+  return get('app/order/print/test/waimai', params)
+}
 
 export const shopAdd = (params) => {
   return post('app/shop/add', params)
@@ -198,4 +205,22 @@ export const bindTakeOutNew = (params) => {
 // 外卖平台绑定门店更换
 export const bindChangeShop = (params) => {
   return post('app/waimai/changeShop', params)
+}
+
+// 获取平台账号
+export const getAccountList = (params) => {
+  return get('app/shop/user/list', params)
+}
+
+// 删除平台账号
+export const deletePlatformAccount = (params) => {
+  return post('app/shop/user/delete', params)
+}
+// 新增平台账号
+export const addPlatformAccount = (params) => {
+  return post('app/shop/user/add', params)
+}
+// 修改平台账号
+export const modifyPlatformAccount = (params) => {
+  return post('app/shop/user/modify', params)
 }

src/common/sider.vue

@@ -1,15 +1,14 @@
 <template>
-  <el-aside style="width: 254px;">
+  <el-aside>
     <div class="sidebar">
       <div class="side-logo">
         <img @click="$router.push({path:'/'})" src="../../static/image/logo.png" class="logo" />
       </div>
-      <el-menu class="sidebar-el-menu" :default-active="$route.path" :collapse="collapse" background-color="#00152A" text-color="#bfcbd9" active-text-color="#20a0ff" router>
+      <el-menu class="sidebar-el-menu" :default-active="$route.path" :collapse="collapse" background-color="#00152A" text-color="#FFFFFF" active-text-color="#FC7200" router>
         <template v-for="item in items">
           <template v-if="item.children">
             <el-submenu :index="item.path" :key="item.path">
               <template slot="title">
-                <!-- <i :class="[item.icon,'aliFamily']"></i> -->
                 <img v-if="item.icon" class="side-bar-icon" :src="item.icon" />
                 <span slot="title">{{ item.title }}</span>
               </template>
@@ -25,7 +24,6 @@
           </template>
           <template v-else>
             <el-menu-item :index="item.path" :key="item.path">
-              <!-- <i :class="[item.icon,'aliFamily']"></i> -->
               <img :src="item.icon" class="side-bar-icon" v-if="item.icon" />
               <span slot="title">{{ item.title }}</span>
             </el-menu-item>
@@ -40,14 +38,13 @@
 import bus from "../common/bus";
 import router from "../router/index.js";
 export default {
-  data () {
+  data() {
     return {
       collapse: false,
       memberType: this.$store.state.userInfo.memberType,
       items: [
         {
           path: "/",
-          name: "home",
           title: "一键发单",
           icon: require("../../static/image/order-icon.png"),
           children: [
@@ -70,75 +67,121 @@ export default {
         },
         {
           path: "/shopInfo",
-          name: "shopInfo",
           title: "商户信息",
           icon: require("../../static/image/shop-icon.png"),
           children: [
             {
-              path: "/shopInfo/shopInfos",
-              name: "shopInfos",
-              title: "门店管理",
+              path: "/shop/shopList",
+              name: "shopList",
+              title: "我的店铺",
             },
             {
-              path: "/shopInfo/shopAccount",
-              name: "shopInfos",
-              title: "我的账户",
+              path: "/platformAccount/index",
+              name: "platformAccount",
+              title: "账号管理",
             },
           ],
         },
         {
-          path: "/setUp",
-          name: "setUp",
-          title: "设置",
-          icon: require("../../static/image/setting-icon.png"),
+          path: "/account",
+          title: "我的账户",
+          icon: require("../../static/image/account-icon.png"),
           children: [
             {
-              path: "/setUp/set",
-              name: "set",
-              title: "外卖设置",
+              path: "/account/wallet",
+              name: "wallet",
+              title: "我的钱包",
             },
             {
-              path: "/setUp/addressManagement",
-              name: "addressManagement",
-              title: "常用地址",
+              path: "/account/walletDetail",
+              name: "walletDetail",
+              title: "收支明细",
             },
             {
-              path: "/setUp/pictureManagement",
-              name: "pictureManagement",
-              title: "同步设置",
+              path: "/account/coupon",
+              name: "coupon",
+              title: "优惠券",
             },
           ],
         },
         {
-          path: "/help",
-          name: "help",
-          title: "帮助中心",
-          icon: require("../../static/image/help-icon.png"),
+          path: "/platform",
+          title: "平台管理",
+          icon: require("../../static/image/platform-icon.png"),
+          children: [
+            {
+              path: "/platform/bindTakeOut",
+              name: "bindTakeOut",
+              title: "绑定外卖平台",
+            },
+            {
+              path: "/platform/bindDelivery",
+              name: "bindDelivery",
+              title: "绑定配送平台",
+            },
+          ],
         },
         {
-          path: "/download",
-          name: "download",
-          title: "下载中心",
-          icon: require("../../static/image/download-icon.png"),
+          path: "/set",
+          title: "设置中心",
+          icon: require("../../static/image/setting-icon.png"),
+          children: [
+            {
+              path: "/set/waimai",
+              name: "waimai",
+              title: "外卖设置",
+            },
+            // {
+            //   path: "/set/system",
+            //   name: "system",
+            //   title: "系统设置",
+            // }
+          ],
         },
         {
-          path: "/about",
-          name: "about",
-          title: "关于我们",
-          icon: require("../../static/image/about-icon.png"),
+          path: "/help",
+          title: "帮助中心",
+          icon: require("../../static/image/help-icon.png"),
+          children: [
+            {
+              path: "/help/commonProblem",
+              name: "commonProblem",
+              title: "常见问题",
+            },
+            {
+              path: "/help/customerService",
+              name: "customerService",
+              title: "客服中心",
+            },
+            {
+              path: "/help/download",
+              name: "download",
+              title: "下载中心",
+            },
+            {
+              path: "/help/feedback",
+              name: "feedback",
+              title: "意见反馈",
+            },
+            {
+              path: "/help/about",
+              name: "about",
+              title: "关于我们",
+            },
+          ],
         },
       ],
     };
   },
   watch: {
     "$store.state.userInfo": {
-      handler (newVal, oldVal) {
+      handler(newVal, oldVal) {
         this.memberType = newVal.memberType;
       },
       deep: true,
     },
   },
-  created () {
+  created() {
     // console.log(router.options.routes);
     //this.items = [...router.options.routes];
     // 通过 Event Bus 进行组件间通信，来折叠侧边栏
@@ -148,7 +191,7 @@ export default {
     });
   },
   methods: {
-    showTitle (name) {
+    showTitle(name) {
       if (name === "c") {
         if (this.memberType === 1) {
           return false;
@@ -165,9 +208,11 @@ export default {
   padding-left: 76px !important;
 }
 /deep/ .el-menu-item.is-active {
-  color: #fff !important;
   background-color: #0c2b47 !important;
-  border-right: 6px solid #009cff;
+  border-right: 4px solid #fc7200;
+}
+/deep/ .el-submenu .el-submenu__title {
+  font-size: 15px !important;
 }
 .sidebar {
   display: block;

src/components/Home.vue

@@ -18,26 +18,16 @@
               <el-option v-for="i in shopList" :key="i.id" :label="i.name" :value="i.id"></el-option>
             </el-select>
           </div>
-          <!-- <div class="inp-content">
-            <span>订单来源</span>
-            <el-select size="small" v-model="form.searchKeyType" slot="prepend" placeholder="请选择关键字">
-              <el-option label="流水号" value="1"></el-option>
-            </el-select>
-          </div> -->
-
           <el-input size="small" class="inp input-with-select" v-model="params.searchKey" placeholder="请输入关键字" @keydown.enter.native="seachEnterFun" clearable>
             <el-select v-model="params.searchKeyType" slot="prepend" placeholder="请选择关键字">
               <el-option label="流水号" value="1"></el-option>
               <el-option label="手机号" value="2"></el-option>
               <el-option label="姓名" value="3"></el-option>
               <el-option label="地址" value="4"></el-option>
-              <!-- <el-option label="订单号" value="5"></el-option> -->
               <el-option label="外卖订单号" value="6"></el-option>
             </el-select>
           </el-input>
           <el-button size="small" style="background: #0D1E40;color:#fff" type="info" @click.stop="search" slot="append" icon="el-icon-search"></el-button>
-          <!-- 1.0.0版本暂不开发该功能 -->
-          <!-- <el-button class="btn" size='small' @click="$router.push({path:'/manualCreate'})">手动发单</el-button> -->
         </div>
       </el-col>
     </el-row>
@@ -62,15 +52,11 @@
 import bus from "../common/bus.js";
 import sendOrderPopup from "./orderComponents/sendOrderPopup.vue";
 import OrderList from "./orderComponents/orderList.vue";
-import {
-  getOrderList,
-  getOrderMarker,
-  getRefreshOrder,
-} from "../api/order.js";
+import { getOrderList, getOrderMarker, getRefreshOrder } from "../api/order.js";
 import { getShopList } from "../api/shop";
 export default {
   name: "HomeIndex",
-  data () {
+  data() {
     return {
       isLoading: false,
       total: 0,
@@ -142,7 +128,7 @@ export default {
   },
   watch: {
     "$store.state.userInfo": {
-      handler (newVal, oldVal) {
+      handler(newVal, oldVal) {
         if (newVal.memberType !== 1) {
           this.getShopList();
         }
@@ -151,7 +137,7 @@ export default {
       immediate: true,
     },
   },
-  created () {
+  created() {
     if (this.$route.params.tabNum === 2) {
       this.changeTab(2, 1);
     }
@@ -169,18 +155,17 @@ export default {
       }
     }, 5000);
   },
-  mounted () { },
-  beforeDestroy () {
+  mounted() {},
+  beforeDestroy() {
     clearInterval(this.timer);
     this.timer = null;
   },
-  destroyed () {
+  destroyed() {
     bus.$off("pullData");
     bus.$off("refreshData");
   },
   methods: {
-
-    changeShopIds () {
+    changeShopIds() {
       this.params.searchShopIdStr = String(this.searchShopIdStr);
       localStorage.setItem("searchShopIdStr", this.params.searchShopIdStr);
       this.params.pageNum = 1;
@@ -188,7 +173,7 @@ export default {
       this.getOrder();
       this.getMarker();
     },
-    getShopList () {
+    getShopList() {
       getShopList().then((res) => {
         if (res.code === 200) {
           this.shopList = res.data;
@@ -200,7 +185,7 @@ export default {
         }
       });
     },
-    init () {
+    init() {
       bus.$on("pullData", (index) => {
         this.tabNum = index;
         this.params.status = this.tabList[index].status;
@@ -215,20 +200,13 @@ export default {
         Promise.all([this.getOrder(), this.getMarker()]);
       });
     },
-    seachEnterFun (e) {
+    seachEnterFun(e) {
       var keyCode = window.event ? e.keyCode : e.which;
       if (keyCode == 13) {
         this.search();
       }
     },
-    search () {
-      // this.$router.push({
-      //   path: "/orderSearch",
-      //   query: {
-      //     searchKey: this.searchKey,
-      //   },
-      // });
-      //
+    search() {
       if (!this.params.searchKey) {
         this.params.pageNum = 1;
         this.orderList = [];
@@ -237,18 +215,18 @@ export default {
         this.changeTab(7, 94);
       }
     },
-    handleSizeChange (val) {
+    handleSizeChange(val) {
       this.params.pageNum = 1;
       this.params.pageSize = val;
       this.orderList = [];
       this.getOrder();
     },
-    handleCurrentChange (val) {
+    handleCurrentChange(val) {
       this.params.pageNum = val;
       this.orderList = [];
       this.getOrder();
     },
-    getMarker () {
+    getMarker() {
       getOrderMarker({ searchShopIdStr: this.params.searchShopIdStr }).then(
         (res) => {
           if (res.code === 200) {
@@ -269,10 +247,10 @@ export default {
         }
       );
     },
-    sendOrder () {
+    sendOrder() {
       this.$refs.sendOrderPopup.init();
     },
-    changeTab (i, status) {
+    changeTab(i, status) {
       // 切换状态不是近三天，搜索输入框清空
       if (i !== 7) {
         this.params.searchKey = "";
@@ -283,7 +261,7 @@ export default {
       this.params.pageNum = 1;
       this.getOrder();
     },
-    getOrder () {
+    getOrder() {
       let _this = this;
       var minute = 1000 * 60;
       var hour = minute * 60;
@@ -318,8 +296,8 @@ export default {
         }
       });
     },
-    getRefreshOrder () {
-      let noRefresh = [93,94]
+    getRefreshOrder() {
+      let noRefresh = [93, 94];
       if (noRefresh.includes(this.params.status)) {
         return;
       }

src/components/accountCompoents/consumption.vue

@@ -64,20 +64,25 @@
 import { getAccountFlow } from "../../api/amount.js";
 import { getShopList } from "../../api/shop.js";
 export default {
-  data () {
+  name: "coupon",
+  data() {
     return {
       flowList: [],
       shopList: [],
-      consumptionList: [{
-        consumptionId: '0',
-        name: '全部'
-      }, {
-        consumptionId: '1',
-        name: '收入'
-      }, {
-        consumptionId: '2',
-        name: '支出'
-      }],
+      consumptionList: [
+        {
+          consumptionId: "0",
+          name: "全部",
+        },
+        {
+          consumptionId: "1",
+          name: "收入",
+        },
+        {
+          consumptionId: "2",
+          name: "支出",
+        },
+      ],
       params: {
         source: 2,
         pageNum: 1,
@@ -93,7 +98,7 @@ export default {
         shortcuts: [
           {
             text: "最近一周",
-            onClick (picker) {
+            onClick(picker) {
               const end = new Date();
               const start = new Date();
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
@@ -102,7 +107,7 @@ export default {
           },
           {
             text: "最近一个月",
-            onClick (picker) {
+            onClick(picker) {
               const end = new Date();
               const start = new Date();
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
@@ -111,7 +116,7 @@ export default {
           },
           {
             text: "最近三个月",
-            onClick (picker) {
+            onClick(picker) {
               const end = new Date();
               const start = new Date();
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
@@ -124,13 +129,13 @@ export default {
   },
   watch: {
     "$store.state.userInfo": {
-      handler (newVal, oldVal) {
+      handler(newVal, oldVal) {
         this.memberType = newVal.memberType;
       },
       deep: true,
     },
   },
-  created () {
+  created() {
     this.init();
     this.search();
     if (this.memberType !== 1) {
@@ -138,13 +143,13 @@ export default {
     }
   },
   methods: {
-    init () {
+    init() {
       const start = new Date().getTime() - 3600 * 1000 * 24 * 7;
       this.params.startTime = start;
       this.params.endTime = new Date();
       this.value1 = [this.params.startTime, this.params.endTime];
     },
-    search () {
+    search() {
       if (this.value1 && this.value1.length) {
         this.params.startTime = this.$tool.getFormatDate(
           this.value1[0],
@@ -162,7 +167,7 @@ export default {
       this.flowList = [];
       this.getAccountFlow();
     },
-    getShopList () {
+    getShopList() {
       getShopList().then((res) => {
         if (res.code === 200) {
           this.shopList = res.data.map((v) => {
@@ -177,18 +182,18 @@ export default {
         }
       });
     },
-    handleSizeChange (val) {
+    handleSizeChange(val) {
       this.params.pageNum = 1;
       this.params.pageSize = val;
       this.flowList = [];
       this.getAccountFlow();
     },
-    handleCurrentChange (val) {
+    handleCurrentChange(val) {
       this.params.pageNum = val;
       this.flowList = [];
       this.getAccountFlow();
     },
-    getAccountFlow () {
+    getAccountFlow() {
       getAccountFlow(this.params).then((res) => {
         if (res.code == 200) {
           this.flowList = res.data.data || [];
@@ -201,45 +206,45 @@ export default {
         }
       });
     },
-    showType (type) {
+    showType(type) {
       let name;
       switch (type) {
         case 1:
-          name = "美团"
+          name = "美团";
           break;
         case 2:
-          name = "饿了么"
+          name = "饿了么";
           break;
         case 3:
-          name = "饿百"
+          name = "饿百";
           break;
         case 99:
-          name = "手动发单"
+          name = "手动发单";
           break;
 
         default:
-          name = '--'
+          name = "--";
           break;
       }
-      return name
+      return name;
     },
-    showPayMent (type) {
+    showPayMent(type) {
       let name;
       switch (type) {
         case 1:
-          name = '支付宝支付'
+          name = "支付宝支付";
           break;
         case 2:
-          name = '微信支付'
+          name = "微信支付";
           break;
         case 3:
-          name = '银联支付'
+          name = "银联支付";
           break;
         case 4:
-          name = '余额支付'
+          name = "余额支付";
           break;
         case 5:
-          name = '三方运力支付'
+          name = "三方运力支付";
           break;
 
         default:

src/components/accountCompoents/coupon.vue

@@ -1,225 +1,127 @@
 <template>
-  <div class="coupon">
-    <div class="recharge_coupon_bottom">
-      <div class="recharge_coupon_bottom_item" v-for="(item,index) in couponList" :key="index">
-        <div class="recharge_coupon_bottom_left">
-          <div class="recharge_coupon_bottom_left_num">
-            <span v-if="item.type == 1 || item.type == 3">¥</span>
-            <span class="num" v-if="item.type == 1 || item.type == 3">{{item.money}}</span>
-            <span class="num" v-if="item.type == 2">{{item.discount}}</span>
-            <span v-if="item.type == 2">折</span>
-          </div>
-          <div class="recharge_coupon_bottom_sub">
-            <span v-if="item.type == 2">最高减{{ item.maxDiscount }}元</span>
-            <span v-if="item.type == 1">满{{ item.limitFee }}元可用</span>
-          </div>
-        </div>
-        <div class="recharge_coupon_bottom_middle">
-          <div></div>
-        </div>
-        <div class="recharge_coupon_bottom_right">
-          <div class="recharge_coupon_bottom_date">
-            <div>{{item.name}}</div>
-            <div>有效期：{{item.validStartTime}} - {{item.validEndTime}}</div>
-          </div>
-          <div class="recharge_coupon_bottom_number">
-            <span>x{{item.num}}张</span>
+  <div class="shopInfo">
+    <el-row class="order_tab">
+      <el-col :span="24">
+        <div class="tabList">
+          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
+            <span class="item" :class="tabNum==i?'active-item':''" v-if="!item.children">{{item.name}}</span>
+            <el-dropdown v-else @command="chooseCoupon">
+              <span class="el-dropdown-link item" :class="tabNum==i?'active-item':''">
+                {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <div class="tab_line"></div>
           </div>
         </div>
-      </div>
-    </div>
-    <div style="text-align: center;margin-top: 20px;">
-      <el-pagination :current-page.sync="params.pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
-      </el-pagination>
-    </div>
+      </el-col>
+    </el-row>
+    <el-row class="content">
+      <component v-if="renderComponent" :is="activeName"></component>
+    </el-row>
   </div>
 </template>
 
 <script>
-import { getCouponList, getCouponExplain } from "../../api/amount.js";
-import tool from "../../api/tool.js";
+import couponIndex from "./couponIndex.vue";
+import invalidCoupon from "./invalidCoupon.vue";
+
 export default {
+  name: "coupon",
+  components: {
+    couponIndex,
+    invalidCoupon,
+  },
   data() {
     return {
-      couponList: [],
-      params: {
-        pageNum: 1,
-        pageSize: 10,
-      },
-      total: 0,
+      activeName: "couponIndex",
+      tabList: [
+        { name: "我的优惠券", index: 0, activeName: "couponIndex" },
+        { name: "已过期", index: 1, activeName: "invalidCoupon" },
+      ],
+      tabNum: 0,
+      renderComponent: true,
     };
   },
   created() {
-    this.getCouponList();
+    this.changeTabs(0);
   },
   methods: {
-    showType(type) {
-      let name = "";
-      // v.type === 1 ? '满减劵' : '折扣券'
-      switch (type) {
-        case 1:
-          name = "满减劵";
-          break;
-        case 2:
-          name = "折扣券";
-          break;
-        case 3:
-          name = "立减劵";
-          break;
-        default:
-          break;
-      }
-      return name;
-    },
-    handleSizeChange(val) {
-      this.params.pageNum = 1;
-      this.params.pageSize = val;
-      this.couponList = [];
-      this.getCouponList();
-    },
-    handleCurrentChange(val) {
-      this.params.pageNum = val;
-      this.couponList = [];
-      this.getCouponList();
-    },
-    getCouponList() {
-      getCouponList({ status: 0, isNew: 1 }).then((res) => {
-        if (res.code === 200) {
-          this.couponList = res.data.data.map((v) => {
-            v.validStartTime = tool.getFormatDate(
-              new Date(v.validStartTime),
-              "yyyy.MM.dd"
-            );
-            v.validEndTime = tool.getFormatDate(
-              new Date(v.validEndTime),
-              "yyyy.MM.dd"
-            );
-            return v;
-          });
-          this.total = res.data.totalNums || 0;
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
+    forceRerender() {
+      // 从 DOM 中删除 my-component 组件
+      this.renderComponent = false;
+      this.$nextTick(() => {
+        // 在 DOM 中添加 my-component 组件
+        this.renderComponent = true;
       });
     },
+    changeTabs(i) {
+      if (i === this.tabNum) {
+        this.forceRerender();
+        return;
+      }
+      this.tabNum = i;
+      this.activeName = this.tabList[i].activeName;
+    },
   },
 };
 </script>
 
-<style lang="scss" scoped>
-.coupon {
-  height: calc(100vh - 274px);
-  background-color: #fff;
-  .recharge_coupon_bottom {
-    margin: 15px 17px;
-    display: flex;
-    flex-wrap: wrap;
-    .recharge_coupon_bottom_item {
-      width: 410px;
-      height: 72px;
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.shopInfo {
+  .order_tab {
+    width: 100%;
+    height: 74px;
+    background: #fff;
+
+    .tabList {
+      width: 100%;
+      height: 74px;
+      padding-top: 20px;
+      padding-left: 36px;
+      box-sizing: border-box;
       display: flex;
-      justify-content: flex-start;
-      margin-bottom: 10px;
-      margin-right: 24px;
-      .recharge_coupon_bottom_left {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        width: 110px;
-        margin-top: 10px auto;
-        text-align: center;
-        border-radius: 8px;
-        background-color: #fff;
-        padding: 10px 0;
-        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-        .recharge_coupon_bottom_left_num {
-          span {
-            font-size: 14px;
-            font-family: PingFang SC;
-            font-weight: 400;
-            line-height: 20px;
-            margin-left: 2px;
-            color: #ec1414;
-          }
-          .num {
-            font-size: 26px;
-            font-family: PingFang SC;
-            font-weight: bold;
-            color: #ec1414;
-          }
-        }
 
-        .recharge_coupon_bottom_sub {
-          font-size: 14px;
-          font-family: PingFang SC;
-          font-weight: 400;
-          line-height: 20px;
-          color: #666666;
+      .tab_item {
+        min-width: 58px;
+        margin-right: 56px;
+        .item {
+          font-size: 16px;
+          font-weight: 500;
+          color: #b1b1b1;
+          position: relative;
+          text-align: center;
+          cursor: pointer;
         }
-      }
-      .recharge_coupon_bottom_middle {
-        display: flex;
-        align-items: center;
-        div {
-          height: 100%;
-          padding: 10px 0;
-          height: 55px;
-          border-right: 1px dashed #ec1414;
-          box-sizing: border-box;
+        .active-item {
+          color: #fc7200;
         }
-      }
-      .recharge_coupon_bottom_right {
-        border-radius: 8px;
-        background-color: #fff;
-        flex: 1;
-        position: relative;
-        padding: 10px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-        .recharge_coupon_bottom_date {
-          font-size: 18px;
-          font-family: PingFang SC;
-          font-weight: bold;
-          line-height: 25px;
-          color: #333333;
-          div:last-child {
-            height: 20px;
-            font-size: 12px;
-            font-family: PingFang SC;
-            font-weight: 400;
-            line-height: 20px;
-            color: #999999;
-          }
+        .tab_line {
+          width: 58px;
+          height: 6px;
+          background: #fff;
+          border-radius: 3px;
+          margin: 15px auto 0;
         }
-        .recharge_coupon_bottom_number {
-          display: flex;
-          align-items: center;
-          span {
-            width: 63px;
-            height: 22px;
-            line-height: 22px;
-            border: 1px solid #ec1414;
-            border-radius: 18px;
-            text-align: center;
-            font-size: 12px;
-            font-family: PingFang SC;
-            font-weight: 500;
-            color: #ec1414;
-            cursor: pointer;
-            &:hover {
-              background-color: #ec1414;
-              color: #ffffff;
-            }
-          }
+      }
+
+      .tab_item_ac {
+        color: #fc7200;
+
+        .tab_line {
+          background: #fc7200;
         }
       }
     }
   }
+
+  .content {
+    width: 100%;
+    margin-top: 10px;
+    box-sizing: border-box;
+  }
 }
 </style>

src/components/accountCompoents/couponIndex.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="coupon">
+    <div class="recharge_coupon_bottom">
+      <div class="recharge_coupon_bottom_item" v-for="(item,index) in couponList" :key="index">
+        <div class="recharge_coupon_bottom_left">
+          <div class="recharge_coupon_bottom_left_num">
+            <span v-if="item.type == 1 || item.type == 3">¥</span>
+            <span class="num" v-if="item.type == 1 || item.type == 3">{{item.money}}</span>
+            <span class="num" v-if="item.type == 2">{{item.discount}}</span>
+            <span v-if="item.type == 2">折</span>
+          </div>
+          <div class="recharge_coupon_bottom_sub">
+            <span v-if="item.type == 2">最高减{{ item.maxDiscount }}元</span>
+            <span v-if="item.type == 1">满{{ item.limitFee }}元可用</span>
+          </div>
+        </div>
+        <div class="recharge_coupon_bottom_middle">
+          <div></div>
+        </div>
+        <div class="recharge_coupon_bottom_right">
+          <div class="recharge_coupon_bottom_date">
+            <div>{{item.name}}</div>
+            <div>有效期：{{item.validStartTime}} - {{item.validEndTime}}</div>
+          </div>
+          <div class="recharge_coupon_bottom_number">
+            <span>x{{item.num}}张</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div style="text-align: center;margin-top: 20px;">
+      <el-pagination :current-page.sync="params.pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
+      </el-pagination>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import { getCouponList, getCouponExplain } from "../../api/amount.js";
+import tool from "../../api/tool.js";
+export default {
+  name: 'couponIndex',
+  data() {
+    return {
+      couponList: [],
+      params: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+    };
+  },
+  created() {
+    this.getCouponList();
+  },
+  methods: {
+    showType(type) {
+      let name = "";
+      // v.type === 1 ? '满减劵' : '折扣券'
+      switch (type) {
+        case 1:
+          name = "满减劵";
+          break;
+        case 2:
+          name = "折扣券";
+          break;
+        case 3:
+          name = "立减劵";
+          break;
+        default:
+          break;
+      }
+      return name;
+    },
+    handleSizeChange(val) {
+      this.params.pageNum = 1;
+      this.params.pageSize = val;
+      this.couponList = [];
+      this.getCouponList();
+    },
+    handleCurrentChange(val) {
+      this.params.pageNum = val;
+      this.couponList = [];
+      this.getCouponList();
+    },
+    getCouponList() {
+      getCouponList({ status: 0, isNew: 1 }).then((res) => {
+        if (res.code === 200) {
+          this.couponList = res.data.data.map((v) => {
+            v.validStartTime = tool.getFormatDate(
+              new Date(v.validStartTime),
+              "yyyy.MM.dd"
+            );
+            v.validEndTime = tool.getFormatDate(
+              new Date(v.validEndTime),
+              "yyyy.MM.dd"
+            );
+            return v;
+          });
+          this.total = res.data.totalNums || 0;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.coupon {
+  height: calc(100vh - 274px);
+  background-color: #fff;
+  .recharge_coupon_bottom {
+    margin: 15px 17px;
+    display: flex;
+    flex-wrap: wrap;
+    .recharge_coupon_bottom_item {
+      width: 410px;
+      height: 72px;
+      display: flex;
+      justify-content: flex-start;
+      margin-bottom: 10px;
+      margin-right: 24px;
+      .recharge_coupon_bottom_left {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 110px;
+        margin-top: 10px auto;
+        text-align: center;
+        border-radius: 8px;
+        background-color: #fff;
+        padding: 10px 0;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        .recharge_coupon_bottom_left_num {
+          span {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            line-height: 20px;
+            margin-left: 2px;
+            color: #ec1414;
+          }
+          .num {
+            font-size: 26px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            color: #ec1414;
+          }
+        }
+
+        .recharge_coupon_bottom_sub {
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          line-height: 20px;
+          color: #666666;
+        }
+      }
+      .recharge_coupon_bottom_middle {
+        display: flex;
+        align-items: center;
+        div {
+          height: 100%;
+          padding: 10px 0;
+          height: 55px;
+          border-right: 1px dashed #ec1414;
+          box-sizing: border-box;
+        }
+      }
+      .recharge_coupon_bottom_right {
+        border-radius: 8px;
+        background-color: #fff;
+        flex: 1;
+        position: relative;
+        padding: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        .recharge_coupon_bottom_date {
+          font-size: 18px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          line-height: 25px;
+          color: #333333;
+          div:last-child {
+            height: 20px;
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            line-height: 20px;
+            color: #999999;
+          }
+        }
+        .recharge_coupon_bottom_number {
+          display: flex;
+          align-items: center;
+          span {
+            width: 63px;
+            height: 22px;
+            line-height: 22px;
+            border: 1px solid #ec1414;
+            border-radius: 18px;
+            text-align: center;
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #ec1414;
+            cursor: pointer;
+            &:hover {
+              background-color: #ec1414;
+              color: #ffffff;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/accountCompoents/invalidCoupon.vue

@@ -29,10 +29,10 @@
         <img class="img" src="../../../static/image/invalid-coupon.png" alt="">
       </div>
     </div>
-    <div style="text-align: center;margin-top: 20px;">
+    <!-- <div style="text-align: center;margin-top: 20px;">
       <el-pagination :current-page.sync="params.pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
       </el-pagination>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -40,6 +40,7 @@
 import { getCouponList, getCouponExplain } from "../../api/amount.js";
 import tool from "../../api/tool.js";
 export default {
+  name: "invalidCoupon",
   data() {
     return {
       couponList: [],
@@ -145,13 +146,13 @@ export default {
             font-weight: 400;
             line-height: 20px;
             margin-left: 2px;
-            color: #CCCCCC;
+            color: #cccccc;
           }
           .num {
             font-size: 26px;
             font-family: PingFang SC;
             font-weight: bold;
-            color: #CCCCCC;
+            color: #cccccc;
           }
         }
 
@@ -160,7 +161,7 @@ export default {
           font-family: PingFang SC;
           font-weight: 400;
           line-height: 20px;
-          color: #CCCCCC;
+          color: #cccccc;
         }
       }
       .recharge_coupon_bottom_middle {
@@ -170,7 +171,7 @@ export default {
           height: 100%;
           padding: 10px 0;
           height: 55px;
-          border-right: 1px dashed #CCCCCC;
+          border-right: 1px dashed #cccccc;
           box-sizing: border-box;
         }
       }
@@ -189,14 +190,14 @@ export default {
           font-family: PingFang SC;
           font-weight: bold;
           line-height: 25px;
-          color: #CCCCCC;
+          color: #cccccc;
           div:last-child {
             height: 20px;
             font-size: 12px;
             font-family: PingFang SC;
             font-weight: 400;
             line-height: 20px;
-            color: #CCCCCC;
+            color: #cccccc;
           }
         }
         .recharge_coupon_bottom_number {
@@ -206,16 +207,16 @@ export default {
             width: 63px;
             height: 22px;
             line-height: 22px;
-            border: 1px solid #CCCCCC;
+            border: 1px solid #cccccc;
             border-radius: 18px;
             text-align: center;
             font-size: 12px;
             font-family: PingFang SC;
             font-weight: 500;
-            color: #CCCCCC;
+            color: #cccccc;
             cursor: pointer;
             &:hover {
-              background-color: #CCCCCC;
+              background-color: #cccccc;
               color: #ffffff;
             }
           }

src/components/accountCompoents/recharge.vue

@@ -30,6 +30,7 @@
 <script>
 import { balanceLogs } from "../../api/amount.js";
 export default {
+  name: 'recharge',
   data() {
     return {
       rechargeList: [],

src/components/shopAccount.vue

@@ -1,147 +1,132 @@
-<template>
-  <div class="shopInfo">
-    <el-row class="order_tab">
-      <el-col :span="15">
-        <div class="tabList">
-          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
-            <span class="item" v-if="!item.children">{{item.name}}</span>
-            <el-dropdown v-else @command="chooseCoupon">
-              <span class="el-dropdown-link item">
-                {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-            <div class="tab_line"></div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row class="content">
-      <component v-if="renderComponent" :is="activeName"></component>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import merchantAdd from "./merchantAdd.vue";
-import wallet from "./accountCompoents/wallet.vue";
-import coupon from "./accountCompoents/coupon.vue";
-import invalidCoupon from "./accountCompoents/invalidCoupon.vue";
-import recharge from "./accountCompoents/recharge.vue";
-import consumption from "./accountCompoents/consumption.vue";
-export default {
-  name: "HelloWorld",
-  components: {
-    wallet,
-    coupon,
-    invalidCoupon,
-    recharge,
-    consumption,
-  },
-
-  data() {
-    return {
-      activeName: "wallet",
-      tabList: [
-        { name: "我的钱包", index: 0, activeName: "wallet" },
-        {
-          name: "优惠券",
-          index: 1,
-          activeName: "coupon",
-          children: [
-            { name: "优惠券", command: "coupon" },
-            { name: "已失效优惠券", command: "invalidCoupon" },
-          ],
-        },
-        { name: "充值明细", index: 2, activeName: "recharge" },
-        { name: "消费明细", index: 3, activeName: "consumption" },
-      ],
-      tabNum: 0,
-      renderComponent: true,
-    };
-  },
-  created() {
-    this.changeTabs(0);
-  },
-  methods: {
-    chooseCoupon(e){
-      this.tabNum = 1;
-      this.activeName = e;
-    },
-    forceRerender() {
-      // 从 DOM 中删除 my-component 组件
-      this.renderComponent = false;
-      this.$nextTick(() => {
-        // 在 DOM 中添加 my-component 组件
-        this.renderComponent = true;
-      });
-    },
-    changeTabs(i) {
-      if (i === this.tabNum) {
-        this.forceRerender();
-        return;
-      }
-      this.tabNum = i;
-      this.activeName = this.tabList[i].activeName;
-    },
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.shopInfo {
-  .order_tab {
-    width: 100%;
-    height: 74px;
-    background: #fff;
-
-    .tabList {
-      width: 100%;
-      height: 74px;
-      padding-top: 20px;
-      padding-left: 36px;
-      box-sizing: border-box;
-      display: flex;
-
-      .tab_item {
-        min-width: 58px;
-        margin-right: 56px;
-        .item {
-          font-size: 16px;
-          font-weight: 500;
-          color: #b1b1b1;
-          position: relative;
-          text-align: center;
-          cursor: pointer;
-        }
-        .tab_line {
-          width: 58px;
-          height: 6px;
-          background: #fff;
-          border-radius: 3px;
-          margin: 15px auto 0;
-        }
-      }
-
-      .tab_item_ac {
-        color: #fc7200;
-
-        .tab_line {
-          background: #fc7200;
-        }
-      }
-    }
-  }
-
-  .content {
-    width: 100%;
-    margin-top: 10px;
-    padding: 20px;
-    box-sizing: border-box;
-    background: #fff;
-  }
-}
-</style>
+<template>
+  <div class="shopInfo">
+    <el-row class="order_tab">
+      <el-col :span="15">
+        <div class="tabList">
+          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
+            <span class="item" :class="tabNum==i?'active-item':''" v-if="!item.children">{{item.name}}</span>
+            <el-dropdown v-else @command="chooseCoupon">
+              <span class="el-dropdown-link item" :class="tabNum==i?'active-item':''">
+                {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <div class="tab_line"></div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row class="content">
+      <component v-if="renderComponent" :is="activeName"></component>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import recharge from "./recharge.vue";
+import consumption from "./consumption.vue";
+export default {
+  name: "walletDetail",
+  components: {
+    recharge,
+    consumption,
+  },
+  data() {
+    return {
+      activeName: "recharge",
+      tabList: [
+        { name: "充值明细", index: 0, activeName: "recharge" },
+        { name: "消费明细", index: 1, activeName: "consumption" },
+      ],
+      tabNum: 0,
+      renderComponent: true,
+    };
+  },
+  created() {
+    this.changeTabs(0);
+  },
+  methods: {
+    chooseCoupon(e) {
+      this.tabNum = 1;
+      this.activeName = e;
+    },
+    forceRerender() {
+      // 从 DOM 中删除 my-component 组件
+      this.renderComponent = false;
+      this.$nextTick(() => {
+        // 在 DOM 中添加 my-component 组件
+        this.renderComponent = true;
+      });
+    },
+    changeTabs(i) {
+      if (i === this.tabNum) {
+        this.forceRerender();
+        return;
+      }
+      this.tabNum = i;
+      this.activeName = this.tabList[i].activeName;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.shopInfo {
+  .order_tab {
+    width: 100%;
+    height: 74px;
+    background: #fff;
+
+    .tabList {
+      width: 100%;
+      height: 74px;
+      padding-top: 20px;
+      padding-left: 36px;
+      box-sizing: border-box;
+      display: flex;
+
+      .tab_item {
+        min-width: 58px;
+        margin-right: 56px;
+        .item {
+          font-size: 16px;
+          font-weight: 500;
+          color: #b1b1b1;
+          position: relative;
+          text-align: center;
+          cursor: pointer;
+        }
+        .active-item {
+          color: #fc7200;
+        }
+        .tab_line {
+          width: 58px;
+          height: 6px;
+          background: #fff;
+          border-radius: 3px;
+          margin: 15px auto 0;
+        }
+      }
+
+      .tab_item_ac {
+        color: #fc7200;
+
+        .tab_line {
+          background: #fc7200;
+        }
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    margin-top: 10px;
+    padding: 20px;
+    box-sizing: border-box;
+    background: #fff;
+  }
+}
+</style>

src/components/accountCompoents/wallet.vue

@@ -1,23 +1,31 @@
 <template>
   <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 class="head-account">
+        <div class="balance">
+          <div class="balance_name">账户余额（元）</div>
+          <div class="balance_price">{{amount}}</div>
+          <div class="balance_sign"><img src="../../../static/image/1.png" alt="" srcset=""> 为了您能高效发单，请保持账户资金充足</div>
+        </div>
+        <div class="balance coupon" @click="goCoupon">
+          <div class="balance_name">优惠券（张）</div>
+          <div class="balance_price">{{$store.state.userInfo.couponNum}}</div>
+          <div class="balance_sign">优惠券（张）</div>
+        </div>
       </div>
     </el-col>
-    <el-col :span="18" v-if="memberType !==3">
+    <el-col class="wallet-content" :span="20" v-if="memberType !==3">
       <div class="recharge_title">充值金额</div>
       <div class="recharge_list recharge_list_m">
-        <div @click="chooseMoney(v,i)" :class="curIdx === i ? 'item item_ac' : 'item'" v-for="(v,i) in moneyList" :key="i"><span v-if="v.couponList" class="item_tips">充值有礼</span>{{v.value}}元</div>
+        <div @click="chooseMoney(v,i)" :class="curIdx === i ? 'item item_ac' : 'item'" v-for="(v,i) in moneyList" :key="i"><span v-if="v.couponList || v.giveValue" class="item_tips">充值有礼</span>{{v.value}}元</div>
         <el-input type='num' @focus="open" v-model="value" clearable :class="curIdx === -1 ? 'item item_ac' : 'item'" placeholder="其他金额" />
       </div>
-      <div class="recharge_coupon" v-if="couponList.length">
+      <div class="recharge_coupon" v-if="couponList.length || giveValue">
         <div class="recharge_coupon_top">
           <img src="../../../static/image/recharge_coupon.png" alt="" srcset="">
-          <div class="recharge_coupon_top_left">充{{moneyList[curIdx].value}}元，赠送{{moneyList[curIdx].giveValue}}元优惠券</div>
+          <div class="recharge_coupon_top_left">充{{moneyList[curIdx].value}}元，
+            赠送<span v-if="giveValue">{{giveValue}}元</span><span v-if="moneyList[curIdx].giveCouponAmount">{{giveValue&&moneyList[curIdx].giveCouponAmount ? '和' : ''}}{{moneyList[curIdx].giveCouponAmount}}元优惠券</span>
+          </div>
           <div class="recharge_coupon_top_right ">
             <div v-for="(v,i) in couponList" :key="i">{{`${v.couponName} x${v.memberReciveNum}张  `}}</div>
           </div>
@@ -53,14 +61,13 @@
       </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 @click="paymentType = 1" :class="paymentType === 1 ? 'item item_ac' : 'item'"><img class="img" src="../../../static/image/alipay.png" alt="" srcset=""> 支付宝支付<img class="choose" v-if="paymentType === 1" src="../../../static/image/icon_choose.png" alt=""></div>
+        <div @click="paymentType = 2" :class="paymentType === 2 ? 'item item_ac' : 'item'"><img class="img" src="../../../static/image/we-chat.png" alt="" srcset="">微信支付<img class="choose" v-if="paymentType === 2" src="../../../static/image/icon_choose.png" alt=""></div>
       </div>
       <div>
-        <el-checkbox v-model="checked">我已阅读并同意 <span @click="getExplain" class="agreement">《充值协议》</span> </el-checkbox>
+        <el-checkbox v-model="checked">充值即同意 <span @click="getExplain" class="agreement">《充值协议》</span> </el-checkbox>
       </div>
       <el-button @click="recharge" class="recharge_color">去充值</el-button>
-      <!-- <div class="agreement">充值即同意 <span @click="getExplain">《充值协议》</span> </div> -->
     </el-col>
     <!-- 支付二维码 -->
     <qr-code v-if="showCode" @paySuccess="paySuccess" @refreshCode="recharge" @closeCode="showCode = false" ref="code" :payAmount="payAmount" :link="link" :paymentType="paymentType" :orderSn="orderSn"></qr-code>
@@ -76,11 +83,11 @@ import {
   getWallet,
   getRechargeList,
   recharge,
-  getPayResult,
   getExplain,
 } from "../../api/amount.js";
 import qrCode from "../../common/qrCode.vue";
 export default {
+  name: "wallet",
   props: {
     products: {
       type: Array,
@@ -108,6 +115,7 @@ export default {
       checked: false,
       memberType: this.$store.state.userInfo.memberType,
       couponList: [],
+      giveValue: 0,
     };
   },
   watch: {
@@ -126,8 +134,12 @@ export default {
     this.getRechargeList();
   },
   methods: {
+    goCoupon() {
+      this.$router.push({ name: "coupon" });
+    },
     paySuccess() {
       this.showCode = false;
+      this.$store.dispatch("getUserInfo");
       this.getWallet();
     },
     getExplain() {
@@ -148,6 +160,8 @@ export default {
       getRechargeList().then((res) => {
         if (res.code === 200) {
           this.moneyList = res.data;
+          this.couponList = this.moneyList[this.curIdx].couponList;
+          this.giveValue = this.moneyList[this.curIdx].giveValue;
           this.money = this.moneyList[this.curIdx].value;
           this.id = this.moneyList[this.curIdx].id;
         } else {
@@ -176,6 +190,7 @@ export default {
       this.money = v.value;
       this.id = v.id;
       this.couponList = this.moneyList[i].couponList || [];
+      this.giveValue = this.moneyList[i].giveValue ?? 0;
     },
     open() {
       this.curIdx = -1;
@@ -216,9 +231,6 @@ export default {
           this.orderSn = res.data.orderSn;
           this.payAmount = res.data.amount;
           this.showCode = true;
-          setInterval(() => {
-            // this.getPayResult();
-          }, 2000);
         } else {
           this.$message({
             type: "info",
@@ -227,69 +239,60 @@ export default {
         }
       });
     },
-    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>
 
 <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;
+.head-account {
+  display: flex;
+  .balance {
+    border-radius: 5px;
+    background-image: url(../../../static/image/wallet1.png);
+    background-size: 100% 100%;
+    width: 618px;
+    height: 168px;
+    padding-left: 25px;
+    box-sizing: border-box;
+    margin-bottom: 42px;
+    cursor: pointer;
+    .balance_name {
+      font-size: 14px;
+      line-height: 22px;
+      font-weight: 400;
+      color: #ffffff;
+      padding-top: 24px;
+    }
+    .balance_price {
+      font-size: 42px;
+      line-height: 59px;
+      font-weight: bold;
+      color: #ffffff;
+      margin: 8px 0;
+    }
+    .balance_sign {
+      font-size: 12px;
+      font-weight: 400;
+      color: #ffffff;
+      opacity: 0.8;
+      line-height: 17px;
+      display: flex;
+      align-items: center;
+      img {
+        width: 12px;
+        height: 12px;
+        margin-right: 4px;
+      }
     }
   }
+  .coupon {
+    width: 298px;
+    height: 168px;
+    background-image: url(../../../static/image/wallet2.png);
+  }
+}
+.wallet-content {
+  padding-left: 15px;
 }
 .recharge_title {
   font-size: 16px;
@@ -297,6 +300,7 @@ export default {
   color: #333333;
 }
 .recharge_color {
+  width: 160px;
   background: #fc7200;
   color: #fff;
 }
@@ -323,23 +327,31 @@ export default {
   margin-top: 24px;
   margin-bottom: 10px;
   .item {
-    width: 210px;
-    height: 67px;
-    border: 1px solid #e3e3e3;
-    color: #222222;
-    font-size: 14px;
-    font-weight: 600;
+    position: relative;
+    width: 200px;
+    height: 40px;
+    border: 1px solid #e6e6e6;
+    color: #333333;
+    font-size: 16px;
+    font-weight: 500;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 3px;
     margin: 0 15px 15px 0;
     cursor: pointer;
-    img {
+    .img {
       width: 24px;
       height: 24px;
       margin-right: 6px;
     }
+    .choose {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 16px;
+      height: 16px;
+    }
   }
   .item_ac {
     border-color: #fc7200;
@@ -396,11 +408,9 @@ export default {
       flex-wrap: wrap;
       align-items: flex-end;
       font-size: 12px;
-      font-family: PingFang SC;
       font-weight: 400;
-      line-height: 17px;
       color: #fc7200;
-      padding-bottom: 2px;
+      padding-top: 2px;
       div {
         margin-right: 10px;
       }

src/components/about.vue

@@ -3,10 +3,10 @@
     <div class="about-bg">
       <div class="name">猎豹AI</div>
       <div class="des">智能聚合运力平台</div>
-      <img class="download" src="../../static/image/download.png" alt="">
+      <img class="download" src="../../../static/image/download.png" alt="">
       <div class="scan">扫码下载APP</div>
       <div class="version">
-        <img class="pc" src="../../static/image/pc-icon.png" alt="">
+        <img class="pc" src="../../../static/image/pc-icon.png" alt="">
         <div class="versoin-num">猎豹AI聚合配送PC版版本V{{version}}</div>
       </div>
     </div>
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import config from "../../package.json";
+import config from "../../../package.json";
 export default {
   name: "about",
   data() {
@@ -45,7 +45,7 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: url("../../static/image/about-bg.png");
+    background: url("../../../static/image/about-bg.png");
     background-size: 100% 100%;
     width: 372px;
     height: 268px;

src/components/help/customerService.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="customer-service">
+    <div class="phone-list">
+      <div class="item" v-for="(v,i) in phoneList" :key="i">
+        <img class="img" :src="v.logo" alt="">
+        <div class="name">{{v.name}}</div>
+        <div class="shop-name">{{v.customerPhone}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCustomerPhone } from "../../api/setting.js";
+export default {
+  name: "customerService",
+  data() {
+    return {
+      phoneList: [],
+    };
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    getCustomerPhone() {
+      getCustomerPhone().then((res) => {
+        if (res.code === 200) {
+          this.phoneList = res.data;
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getCustomerPhone();
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  // 生命周期 - 创建之前
+  beforeCreate() {},
+  // 生命周期 - 挂载之前
+  beforeMount() {},
+  // 生命周期 - 更新之前
+  beforeUpdate() {},
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+
+<style lang="scss" scoped  type="text/css">
+.phone-list {
+  display: flex;
+  flex-wrap: wrap;
+  .item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 280px;
+    height: 120px;
+    background: #ffffff;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    margin: 10px 20px 0 0;
+    cursor: pointer;
+    .img {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+    }
+    .name {
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 20px;
+      color: #333333;
+      margin: 10px 0;
+    }
+    .shop-name {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #999999;
+    }
+  }
+}
+</style>

src/components/downloadCenter.vue

@@ -52,7 +52,7 @@
     </div>
     <div class="lb-list">
       <div class="lb-app">
-        <img class="img" src="../../static/image/xiangrikui.png" alt="">
+        <img class="img" src="../../../static/image/xiangrikui.png" alt="">
         <div class="name">向日葵</div>
         <div class="tips">远程桌面控制软件，便于更好的排查解决问题，提供更优质的服务</div>
         <div @click="download('https://sunlogin.oray.com/download')" class="download">下载</div>
@@ -62,28 +62,28 @@
 </template>
 
 <script>
-import {name ,version} from '../../package.json'
+import {name ,version} from '../../../package.json'
 export default {
   name: "downloadCenter",
   data() {
     return {
       lbApp: [
         {
-          img: require("../../static/image/download.png"),
+          img: require("../../../static/image/download.png"),
           name: "Android手机版",
           tips: "适合大部分安卓手机使用",
           download: false,
           src: "",
         },
         {
-          img: require("../../static/image/download.png"),
+          img: require("../../../static/image/download.png"),
           name: "Iphone手机版",
           tips: "应用市场搜索[AI聚合配送]",
           download: false,
           src: "",
         },
         {
-          img: require("../../static/image/juhe-icon.png"),
+          img: require("../../../static/image/juhe-icon.png"),
           name: "Windows",
           tips: "客户端、支持Windows系统",
           download: true,

src/components/help/feedback.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="shopInfo">
+    <el-row class="order_tab">
+      <el-col :span="24">
+        <div class="tabList">
+          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
+            <span class="item" :class="tabNum==i?'active-item':''" v-if="!item.children">{{item.name}}</span>
+            <el-dropdown v-else @command="chooseCoupon">
+              <span class="el-dropdown-link item" :class="tabNum==i?'active-item':''">
+                {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <div class="tab_line"></div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row class="content">
+      <component v-if="renderComponent" :is="activeName"></component>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import feedbackInfo from "./feedbackInfo.vue";
+import myFeedback from "./myFeedback.vue";
+export default {
+  name: "feedback",
+  components: {
+    feedbackInfo,
+    myFeedback,
+  },
+  data() {
+    return {
+      activeName: "feedbackInfo",
+      tabList: [
+        { name: "意见反馈", index: 0, activeName: "feedbackInfo" },
+        { name: "我的反馈", index: 1, activeName: "myFeedback" },
+      ],
+      tabNum: 0,
+      renderComponent: true,
+    };
+  },
+  created() {
+    this.changeTabs(0);
+    this.$bus.$on("goFeedbackList", (index) => {
+      this.changeTabs(index);
+    });
+  },
+  methods: {
+    chooseCoupon(e) {
+      this.tabNum = 2;
+      this.activeName = e;
+    },
+    forceRerender() {
+      // 从 DOM 中删除 my-component 组件
+      this.renderComponent = false;
+      this.$nextTick(() => {
+        // 在 DOM 中添加 my-component 组件
+        this.renderComponent = true;
+      });
+    },
+    changeTabs(i) {
+      if (i === this.tabNum) {
+        this.forceRerender();
+        return;
+      }
+      this.tabNum = i;
+      this.activeName = this.tabList[i].activeName;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.shopInfo {
+  .order_tab {
+    width: 100%;
+    height: 74px;
+    background: #fff;
+
+    .tabList {
+      width: 100%;
+      height: 74px;
+      padding-top: 20px;
+      padding-left: 36px;
+      box-sizing: border-box;
+      display: flex;
+
+      .tab_item {
+        min-width: 58px;
+        margin-right: 56px;
+        .item {
+          font-size: 16px;
+          font-weight: 500;
+          color: #b1b1b1;
+          position: relative;
+          text-align: center;
+          cursor: pointer;
+        }
+        .active-item {
+          color: #fc7200;
+        }
+        .tab_line {
+          width: 58px;
+          height: 6px;
+          background: #fff;
+          border-radius: 3px;
+          margin: 15px auto 0;
+        }
+      }
+
+      .tab_item_ac {
+        color: #fc7200;
+
+        .tab_line {
+          background: #fc7200;
+        }
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    margin-top: 10px;
+    box-sizing: border-box;
+    background: #ffffff;
+    padding: 0 20px;
+  }
+}
+</style>

src/components/help/feedbackInfo.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="feedback-info">
+    <div class="cell">
+      <div class="title">选择反馈类型</div>
+      <div class="type-list">
+        <div :class="params.type === v.type ? 'type active': 'type'" v-for="v in typeList" :key="v.type" @click="params.type = v.type">{{v.name}}</div>
+      </div>
+    </div>
+    <div class="cell">
+      <div class="title">问题描述</div>
+      <el-input class="descripe" clearable type="textarea" maxlength="200" show-word-limit placeholder="请详细描述您的问题，我们会尽快解决" v-model="params.content">
+      </el-input>
+    </div>
+    <div class="cell">
+      <div class="title">提交截图（最多3张）</div>
+      <el-upload action="" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="removeImg" :http-request="submitUpload">
+        <i class="el-icon-plus"></i>
+      </el-upload>
+    </div>
+    <el-button type="primary" :loading="loading" @click="submit">提交</el-button>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { uploadFeedbackImg, saveFeedback } from "../../api/setting.js";
+export default {
+  name: "feedbackInfo",
+  data() {
+    return {
+      typeList: [
+        {
+          name: "账号问题",
+          type: 1,
+        },
+        {
+          name: "功能问题",
+          type: 2,
+        },
+        {
+          name: "优化建议",
+          type: 3,
+        },
+        {
+          name: "其他问题",
+          type: 4,
+        },
+      ],
+      params: {
+        type: 1,
+        content: "",
+        pictures: [],
+      },
+      pictures: [],
+      baseUrl: process.env.VUE_APP_BASE_URL,
+      dialogImageUrl: "",
+      dialogVisible: false,
+      fileList: [],
+      loading: false,
+    };
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    submit() {
+      if (!this.params.content.trim()) {
+        return this.$message.warning("请描述你的问题");
+      }
+      this.params.pictures = this.pictures.map((v) => v.url);
+      console.log(this.params);
+      this.loading = true;
+      saveFeedback(this.params).then((res) => {
+        this.loading = false;
+        if (res.code === 200) {
+          this.$message.success("反馈成功");
+          this.params = {
+            type: 1,
+            content: "",
+            pictures: [],
+          };
+          this.pictures = [];
+          this.$bus.$emit('goFeedbackList',1)
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+    removeImg(file) {
+      console.log(file, fileList);
+      this.pictures = this.pictures.filter((v) => {
+        return v.fileName !== file.name;
+      });
+    },
+    submitUpload(params) {
+      let file = new FormData();
+      file.append("file", params.file);
+      uploadFeedbackImg(file).then((res) => {
+        if (res.code === 200) {
+          this.pictures.push(res.data);
+        } else {
+          this.$message.error(res.msg);
+        }
+        console.log(res);
+      });
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  // 生命周期 - 创建之前
+  beforeCreate() {},
+  // 生命周期 - 挂载之前
+  beforeMount() {},
+  // 生命周期 - 更新之前
+  beforeUpdate() {},
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+
+<style lang="scss" scoped  type="text/css">
+.cell {
+  margin: 40px 0;
+  .title {
+    position: relative;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 22px;
+    color: #333333;
+    padding-left: 10px;
+    margin: 24px 0 13px;
+  }
+  .title::before {
+    width: 3px;
+    height: 16px;
+    background: rgba(252, 114, 0, 0.39);
+    border-radius: 2px;
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 0;
+  }
+  .type-list {
+    display: flex;
+    .type {
+      width: 90px;
+      height: 36px;
+      line-height: 36px;
+      text-align: center;
+      border-radius: 2px 2px 2px 2px;
+      border: 1px solid #e6e6e6;
+      font-size: 14px;
+      font-weight: 500;
+      color: #333333;
+      margin-right: 24px;
+    }
+    .active {
+      border-color: #fc7200;
+      color: #fc7200;
+    }
+  }
+  .descripe {
+    width: 800px;
+    height: 200px;
+    border-radius: 8px 8px 8px 8px;
+    background: #f5f5f5;
+    /deep/ .el-textarea__inner {
+      border: none !important;
+      background: #f5f5f5 !important;
+      height: 200px !important;
+    }
+  }
+}
+</style>

src/components/help.vue

@@ -26,9 +26,9 @@
 </template>
 
 <script>
-import { helpList, helpDetail } from "../api/help.js";
+import { helpList, helpDetail } from "../../api/help.js";
 export default {
-  name: "help",
+  name: "commonProblem",
   data() {
     return {
       helpList: [],

src/components/help/myFeedback.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="my-feedback">
+    <div class="cell" v-for="(v,i) in feedbackList" :key="i">
+      <div class="cell-top">
+        <div class="title">{{showType(v.type)}}</div>
+        <div class="time">{{v.createTime}}</div>
+        <div class="status" :class="v.status === 2 ? 'active-status' : ''">{{v.status === 1 ? '待回复' : '已回复'}}</div>
+      </div>
+      <div class="content">{{v.content}}</div>
+      <div class="img-list">
+        <!-- <img v-for="(pic,idx) in v.pictures" :key="idx" :src="pic" alt=""> -->
+        <el-image class="img" v-for="(pic,idx) in v.pictures" :key="idx" :src="pic" :preview-src-list="v.pictures">
+        </el-image>
+      </div>
+      <div v-if="v.status === 2" class="cell-top cell-bot">
+        <div class="title1">平台回复</div>
+        <div class="time">{{v.updateTime}}</div>
+      </div>
+      <div v-if="v.answer" class="content">{{v.answer}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFeedbackList } from "../../api/setting.js";
+export default {
+  name: "myFeedback",
+  data() {
+    return {
+      feedbackList: [],
+    };
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    showType(type) {
+      let name = "";
+      switch (type) {
+        case 1:
+          name = "账号问题";
+          break;
+        case 2:
+          name = "功能问题";
+          break;
+        case 3:
+          name = "优化建议";
+          break;
+        case 4:
+          name = "其他问题";
+          break;
+
+        default:
+          break;
+      }
+      return name;
+    },
+    getFeedbackList() {
+      getFeedbackList().then((res) => {
+        if (res.code === 200) {
+          this.feedbackList = res.data.data;
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getFeedbackList();
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  // 生命周期 - 创建之前
+  beforeCreate() {},
+  // 生命周期 - 挂载之前
+  beforeMount() {},
+  // 生命周期 - 更新之前
+  beforeUpdate() {},
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+
+<style lang="scss" scoped  type="text/css">
+.cell {
+  background: #f7f7f7;
+  margin-top: 20px;
+  padding: 20px;
+  border-radius: 8px;
+  .cell-top {
+    display: flex;
+    align-items: center;
+    .title {
+      position: relative;
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 22px;
+      color: #333333;
+      padding-left: 10px;
+    }
+    .title::before {
+      width: 3px;
+      height: 16px;
+      background: rgba(252, 114, 0, 0.39);
+      border-radius: 2px;
+      content: "";
+      position: absolute;
+      top: 2px;
+      left: 0;
+    }
+    .time {
+      font-size: 14px;
+      font-weight: 400;
+      color: #999999;
+      margin: 0 5px;
+    }
+    .status {
+      font-size: 14px;
+      font-weight: 400;
+      color: #e70012;
+      border: 1px solid #e70012;
+      padding: 0 5px;
+      border-radius: 2px;
+    }
+    .active-status {
+      color: #007aff;
+      border-color: #007aff;
+    }
+  }
+  .cell-bot {
+    margin-top: 40px;
+    .title1 {
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #333333;
+    }
+  }
+  .content {
+    font-size: 14px;
+    font-weight: 400;
+    color: #333333;
+    line-height: 20px;
+    margin-top: 10px;
+  }
+  .img-list {
+    display: flex;
+    margin-top: 10px;
+    .img {
+      width: 120px;
+      height: 120px;
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/components/manualCreate.vue

@@ -155,7 +155,7 @@
 </template>
 <script>
 import orderMap from "./orderComponents/orderAMap.vue";
-import addressManagement from "./addressManagement.vue";
+import addressManagement from "./waimaiComponents/addressManagement.vue";
 import { getProductList } from "../api/shop.js";
 import { getConfig } from "../api/setting.js";
 import {

src/components/orderComponents/orderList.vue

@@ -84,17 +84,14 @@
     <el-row class="list-info">
       <el-col :span="17">
         <div v-loading="isLoading" element-loading-text="正在计算中...">
-          <div :class="
-              curIdx === i ? 'order_item active-order-item' : 'order_item'
-            " @click="chooseOrder(item, i)" v-for="(item, i) in list" :key="i">
+          <div class="order_item" @click="chooseOrder(item, i)" v-for="(item, i) in list" :key="i">
             <div class="order_item_header">
               <div class="order_item_header_l">
-                <div v-if="item.daySeq" class="Serial_number">
+                <div v-if="item.daySeq" class="Serial_number" :style="daySeqColor(item.orderType)">
                   #{{ item.daySeq }}
                 </div>
                 <img :src="item.logo || item.waimaiLogo" class="logo" />
                 <span class="name">{{ item.shopName }}</span>
-                <!-- <span class="name">{{item.sendAddress}}</span> -->
                 <div class="sign_time" v-if="item.waimaiOrderId && [1,2].includes(item.takeType)">
                   {{ item.exceptTime.slice(5,16) }}前送达
                 </div>
@@ -109,13 +106,11 @@
               </div>
               <!-- 新订单 -->
               <div class="order_item_header_r" v-if="item.buttonStatus === 0">
-                <!-- <span class="header_r">已发单1分钟</span> -->
                 <el-tag v-if="[-1,7].includes(tabNum)" class="header_r">新订单</el-tag>
                 <el-button size="small" class="btn" @click.stop="sendNow(item)">发起配送</el-button>
               </div>
               <!-- 预约单 -->
               <div class="order_item_header_r" v-if="item.buttonStatus === 10">
-                <!-- <span class="header_r">已发单1分钟</span> -->
                 <el-tag v-if="[-1,7].includes(tabNum)" class="header_r">预约单</el-tag>
                 <!-- <el-button size='small' @click.stop="iGnoreOrder(item.id)">忽略订单</el-button> -->
                 <!-- <el-button size='small' @click.stop="itemAddRemark(item.id, item)">添加备注</el-button> -->
@@ -172,20 +167,17 @@
                 <el-button size="small" class="btn" @click.stop="againOrder(item)">再来一单</el-button>
               </div>
             </div>
-            <div class="order_item_cont">
-              <div class="content">
-                {{ item.receiptContactName
-                }}<span>{{ item.receiptPhone }}{{item.receiptExtension ? "_" + item.receiptExtension : ""}}</span>
-              </div>
+            <div class="order_item_cont" :class="curIdx === i ?  'active_order_item_cont' : ''">
               <div class="address">
-                <!-- {{ item.receiptProvinceName }}
-                {{ item.receiptCityName }} -->
-                <!-- {{ item.receiptDistrictName }} -->
                 {{ item.receiptAddress }}
-                <span class="distance" @click.stop="checkMap(item)">
-                  <i class="el-icon-location"></i>
-                  <span>查看地图</span>
-                </span>
+                <div class="distance" @click.stop="checkMap(item)">
+                  <img class="img" src="../../../static/image/show-map-icon.png" alt="">
+                  <span class="show-map">查看地图</span>
+                </div>
+              </div>
+              <div class="content">
+                {{ item.receiptContactName
+                }}<span>{{ item.receiptPhone }}{{item.receiptExtension ? "," + item.receiptExtension : ""}}</span>
               </div>
               <div v-if="item.caution" class="itme_r">
                 备注：{{ item.caution }}
@@ -408,6 +400,37 @@ export default {
     ...mapState(["userInfo"]),
   },
   methods: {
+    daySeqColor(type) {
+      let bgColor = "";
+      switch (type) {
+        case 1:
+          bgColor = "#FDC502";
+          break;
+        case 2:
+          bgColor = "#2491FF";
+          break;
+        case 3:
+          bgColor = "#2491FF";
+          break;
+        case 5:
+          bgColor = "#FDC502";
+          break;
+        case 6:
+          bgColor = "#00A82D";
+          break;
+        case 7:
+          bgColor = "#2788FE";
+          break;
+        case 8:
+          bgColor = "#EE0000";
+          break;
+
+        default:
+          bgColor = "#fc7200";
+          break;
+      }
+      return { background: bgColor };
+    },
     // 再来一单
     againOrder(order) {
       if ([97, 98].includes(order.buttonStatus)) {
@@ -676,12 +699,6 @@ export default {
     },
     // 一键发单备注
     commitRemark(orderId, item) {
-      // if(!this.remark.trim()){
-      //   return this.$message({
-      //       message: '请输入发单备注再确认！',
-      //       type: "error",
-      //     });
-      // }
       let params = {
         orderId,
         remark: this.remark.trim(),
@@ -695,14 +712,6 @@ export default {
           });
           bus.$emit("refreshData");
           bus.$emit("refreshData2");
-          // this.$set(
-          //   this.list.find((v) => {
-          //     return item.id == v.id;
-          //   }),
-          //   "takeRemark",
-          //   this.remark
-          // );
-          // this.$forceUpdate();
         } else {
           this.$message({
             message: res.msg,
@@ -908,14 +917,10 @@ export default {
       if (item.deliveryStatus === -1) {
         return (name = "已取消");
       }
-      // if (item.deliveryStatus === -2) {
-      //   return this.showCancelType(item.cancelType);
-      // }
     },
   },
 };
 </script>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped="scoped">
 .el-row {
   position: absolute !important;
@@ -1110,17 +1115,14 @@ export default {
   border: none !important;
   background-color: #fc7200;
 }
-.active-order-item {
-  border: 2px solid #fc7200;
-  height: 136px !important;
-  width: calc(100% - 4px) !important;
-}
 .order_item {
   width: 100%;
   height: 140px;
   background: #fff;
   margin-bottom: 10px;
   border-radius: 5px;
+  overflow: hidden;
+  cursor: pointer;
 
   .order_item_header {
     width: 100%;
@@ -1134,6 +1136,7 @@ export default {
     justify-content: space-between;
     padding-right: 10px;
     box-sizing: border-box;
+    background: rgba(254, 241, 233, 0.39);
 
     .order_item_header_l,
     .order_item_header_r {
@@ -1144,7 +1147,6 @@ export default {
     .Serial_number {
       width: 60px;
       height: 26px;
-      background: #fc7200;
       border-radius: 0 30px 30px 0;
       font-size: 10px;
       font-weight: 500;
@@ -1239,29 +1241,55 @@ export default {
       //  right: 10px;
     }
   }
+  .active_order_item_cont {
+    border-color: #fc7200 !important;
+  }
   .order_item_cont {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
-    padding: 5px 20px;
-    height: 80px;
-  }
-  .address {
-    .distance {
-      margin-left: 10px;
-      color: #409eff;
-      cursor: pointer;
+    padding: 0 20px;
+    height: calc(100% - 52px);
+    border-bottom: 2px solid #ffffff;
+    .address {
+      display: flex;
+      align-items: center;
       font-size: 16px;
+      font-weight: bold;
+      .distance {
+        display: flex;
+        align-items: center;
+        margin-left: 10px;
+        color: #fc7200;
+        cursor: pointer;
+        .img {
+          width: 15px;
+          height: 20px;
+          margin-right: 5px;
+        }
+        .show-map {
+          font-size: 12px;
+          font-weight: bold;
+          font-weight: 500;
+          color: #fc7200;
+        }
+      }
+    }
+    .content {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #999999;
+    }
+    .itme_r {
+      font-size: 15px;
+      font-weight: 400;
+      color: #333333;
+      word-wrap: break-word;
     }
   }
 }
 
-.itme_r {
-  font-size: 14px;
-  font-weight: 400;
-  color: #b1b1b1;
-  word-wrap: break-word;
-}
 .order_detail {
   position: relative;
   width: 100%;

src/components/orderComponents/sendOrderPopup.vue

@@ -6,7 +6,7 @@
           <div class="left-content">
             <div class="juhe-icon">
               <!-- <img src="../../../static/image/juhe-icon.png" /> -->
-              <img  style="width:40px;height:40px;" src="../../../static/image/juhe-icon.png" alt="">
+              <img style="width:40px;height:40px;" src="../../../static/image/juhe-icon.png" alt="">
             </div>
             <div>
               <div class="juhe-title">聚合配送</div>
@@ -409,6 +409,7 @@ export default {
       this.showCode = false;
       this.dialogTableVisible = false;
       this.loading = false;
+      this.$store.dispatch("getUserInfo");
       if (this.tabNum === -1) {
         bus.$emit("refreshData2");
         return;
@@ -451,19 +452,6 @@ export default {
       sendOrder(params).then((res) => {
         if (res.code == 200) {
           if (this.payId == 4) {
-            // this.dialogTableVisible = false;
-            // this.loading = false;
-            // if (this.tabNum === -1) {
-            //   bus.$emit("refreshData2");
-            //   return;
-            // }
-            // bus.$emit("pullData", 2);
-            // if (this.$route.name === "manualCreate") {
-            //   this.$route.push({
-            //     name: "HomeIndex",
-            //     params:{tabNum:2}
-            //   });
-            // }
             this.paySuccess();
           } else if (
             (this.payId == 1 || this.payId == 2) &&

src/components/orderSearch.vue

@@ -27,7 +27,7 @@
           <div class="sel_item">
             <span class="name">订单来源：</span>
             <el-select size="small" class="item1" v-model="params.orderType" placeholder="请选择订单来源">
-              <el-option v-for="(v,i) in originList" :key="i" :label="v.name" :value="v.status"></el-option>
+              <el-option v-for="(v,i) in originList" :key="i" :label="v.name" :value="v.type"></el-option>
             </el-select>
           </div>
           <div class="sel_item">
@@ -68,7 +68,7 @@ import bus from "../common/bus.js";
 import sendOrderPopup from "./orderComponents/sendOrderPopup.vue";
 import OrderList from "./orderComponents/orderList.vue";
 import { getOrderList } from "../api/order.js";
-import { getShopList } from "../api/shop.js";
+import { getShopList, getTakeOutList } from "../api/shop.js";
 export default {
   data() {
     return {
@@ -87,28 +87,7 @@ export default {
         pageSize: 10,
       },
       shopList: [],
-      originList: [
-        {
-          name: "全部",
-          status: 0,
-        },
-        {
-          name: "美团",
-          status: 1,
-        },
-        {
-          name: "饿了么",
-          status: 2,
-        },
-        {
-          name: "饿百",
-          status: 3,
-        },
-        {
-          name: "手动发单",
-          status: 99,
-        },
-      ],
+      originList: [],
       tabList: [
         {
           name: "全部",
@@ -190,6 +169,7 @@ export default {
     },
   },
   created() {
+    this.getTakeOutList();
     let searchKey = this.$route.query.searchKey;
     if (searchKey) {
       this.params.searchKey = searchKey;
@@ -206,6 +186,17 @@ export default {
     bus.$off("refreshData2");
   },
   methods: {
+    getTakeOutList() {
+      getTakeOutList().then((res) => {
+        if (res.code === 200) {
+          this.originList = res.data;
+          this.originList.push({ type: 99, name: "手动发单" });
+          this.originList.unshift({ type: 0, name: "全部" });
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
     seachEnterFun(e) {
       var keyCode = window.event ? e.keyCode : e.which;
       if (keyCode == 13) {

src/components/platformAccount/index.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="platform-account">
+    <div class="address-list">
+      <div class="item" v-for="(v,i) in accountList" :key="i">
+        <div class="name">{{v.name}} {{v.mobile}}</div>
+        <!-- <div class="name">{{v.mobile}}</div> -->
+        <div class="shop-name">{{v.shopName}}</div>
+        <div class="btns">
+          <img @click.stop="showAccount(1,v)" src="../../../static/image/edit-icon.png" alt="">
+          <img @click.stop="deleteAccount(v)" src="../../../static/image/delete-icon.png" alt="">
+        </div>
+      </div>
+      <div class="item1" @click.stop="showAccount(0)">
+        <img class="img" src="../../../static/image/icon-add.png" alt="">
+        <div class="shop-name">添加账号</div>
+      </div>
+    </div>
+    <!-- /新增编辑账号 -->
+    <el-dialog :title="isEdit ? '编辑账号': '新增账号'" :visible.sync="centerDialogVisible" width="600px" center append-to-body>
+      <el-form ref="form" :model="form" label-width="100px" label-position="left" size="small">
+        <el-form-item label="所属门店">
+          <el-select v-model="form.shopId" placeholder="请选择关联门店">
+            <el-option v-for="v in shopList" :key="v.id" :label="v.name" :value="v.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="员工称呼" required>
+          <el-input clearable v-model="form.name" placeholder="请填写员工称呼"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号" required>
+          <el-input clearable v-model="form.mobile" placeholder="请填写手机号"></el-input>
+        </el-form-item>
+        <el-form-item label="登录密码">
+          <el-input clearable v-model="password" :placeholder="passwordTips"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="centerDialogVisible=false">取 消</el-button>
+        <el-button size="small" type="primary" @click="addAccount">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getAccountList,
+  deletePlatformAccount,
+  addPlatformAccount,
+  modifyPlatformAccount,
+  shopListNew,
+} from "../../api/shop.js";
+export default {
+  name: "platformAccount",
+  data() {
+    return {
+      isEdit: 0,
+      centerDialogVisible: false,
+      accountList: [],
+      shopList: [],
+      form: {},
+      password: "",
+      passwordTips: "",
+    };
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    addAccount() {
+      if (this.isEdit) {
+        if (this.password) {
+          this.form.password = this.password;
+        }
+        modifyPlatformAccount(this.form).then((res) => {
+          if (res.code === 200) {
+            this.getAccountList();
+            this.$message.success("账号修改成功");
+            this.centerDialogVisible = false;
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+      } else {
+        this.form.password = this.password || "123456";
+        addPlatformAccount(this.form).then((res) => {
+          if (res.code === 200) {
+            this.getAccountList();
+            this.$message.success("账号添加成功");
+            this.centerDialogVisible = false;
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+      }
+    },
+    showAccount(flag, form) {
+      this.isEdit = flag;
+      if (flag) {
+        this.form = form;
+        this.password = form.password;
+        if (!this.form.password) {
+          delete this.form.password;
+        }
+        this.passwordTips = !this.password ? "为空时则不修改密码" : "";
+      } else {
+        this.form = {};
+        this.password = "";
+        this.passwordTips = "默认密码：123456";
+      }
+      this.centerDialogVisible = true;
+    },
+    deleteAccount(v) {
+      this.$confirm("此操作将删除该账号, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        center: true,
+        type: "warning",
+      }).then(() => {
+        deletePlatformAccount({ id: v.id }).then((res) => {
+          if (res.code === 200) {
+            this.$message({
+              type: "success",
+              message: "删除成功!",
+            });
+            this.getAccountList();
+          } else {
+            this.$message({
+              type: "error",
+              message: res.msg,
+            });
+          }
+        });
+      });
+    },
+    getAccountList() {
+      getAccountList().then((res) => {
+        if (res.code === 200) {
+          this.accountList = res.data.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    getShopList() {
+      shopListNew().then((res) => {
+        if (res.code === 200) {
+          this.shopList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getAccountList();
+    this.getShopList();
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  // 生命周期 - 创建之前
+  beforeCreate() {},
+  // 生命周期 - 挂载之前
+  beforeMount() {},
+  // 生命周期 - 更新之前
+  beforeUpdate() {},
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+
+<style lang="scss" scoped  type="text/css">
+.address-list {
+  display: flex;
+  flex-wrap: wrap;
+  .item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 280px;
+    height: 120px;
+    background: #ffffff;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    margin: 10px 20px 0 0;
+    padding: 35px 20px 0;
+    cursor: pointer;
+    .img {
+      width: 80px;
+      height: 80px;
+    }
+    .name {
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 20px;
+      color: #333333;
+      margin-bottom: 10px;
+    }
+    .shop-name {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #999999;
+    }
+    .btns {
+      position: absolute;
+      top: 10px;
+      right: 0;
+      img {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+      }
+    }
+  }
+  .item1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #ffffff;
+    width: 320px;
+    height: 155px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    margin: 10px 20px 0 0;
+    cursor: pointer;
+    .shop-name {
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 22px;
+      color: #333333;
+    }
+  }
+}
+</style>

src/components/settingComponents/deliverySetting.vue

@@ -1,206 +0,0 @@
-<template>
-  <div class="delivery-content">
-    <div>
-      <!-- <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>
-      </div>
-      <div class="delivery-list">
-        <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>
-    <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>
-</template>
-
-<script>
-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();
-    },
-    getDeliveryFloorList() {
-      getDeliveryFloorList().then((res) => {
-        if (res.code === 200) {
-          // 电脑端暂时不支持货拉拉
-          this.list = res.data.filter((v) => {
-            return v.type !== 12;
-          });
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-    getConfig() {
-      getConfig().then((res) => {
-        if (res.code === 200) {
-          this.billDeliveryIds = res.data.billDeliveryIds
-            ? res.data.billDeliveryIds.split(",")
-            : [];
-          this.shieldDeliveryIds = res.data.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;
-      });
-    },
-    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: "修改成功！",
-          });
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-        this.getConfig();
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.delivery-content {
-  .recommend {
-    background-color: #fff;
-    margin-top: 10px;
-    .title {
-      font-size: 16px;
-      font-family: PingFang SC;
-      font-weight: 600;
-      color: #333333;
-      height: 55px;
-      line-height: 55px;
-      box-sizing: border-box;
-      padding: 0 18px;
-      border-bottom: 1px solid #eee;
-      span:nth-child(2) {
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        color: #b1b1b1;
-      }
-    }
-    .delivery-list {
-      display: flex;
-      flex-wrap: wrap;
-      padding: 30px 18px 0;
-      .item {
-        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: 129px;
-          height: 40px;
-        }
-      }
-    }
-  }
-}
-</style>

src/components/settingComponents/voiceSetting.vue

@@ -1,437 +0,0 @@
-<template>
-  <div class="voice">
-    <template v-if="memberType !== 1">
-      <div class="top-set">
-        <div class="t-left">
-          自动接单
-        </div>
-        <div class="t-right">
-          <el-switch @change="updateConfig" v-model="openAutoorder" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
-        </div>
-      </div>
-      <div class="top-set">
-        <div class="t-left">
-          自动打印
-          <span style="color: #999;">(开启后将为您自动打印小票)</span>
-        </div>
-        <div class="t-right">
-          <el-switch @change="updateConfig" v-model="openPrintSwitch" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
-        </div>
-      </div>
-      <div class="voice-content">
-        <div class="top-set" style="border-bottom: 1px solid #eee;">
-          <div class="t-left">
-            自动发单设置
-          </div>
-        </div>
-        <div class="voice-list">
-          <el-row>
-            <el-col :span="24" v-for="(v,i) in list1" :key="i">
-              <div class="item">
-                <div class="left">
-                  <span class="name">{{v.name}}</span>
-                  <span class="time" @click="openSetTime(v,i)">[时长设置]</span>
-                </div>
-                <div class="right">
-                  <span @click="openSetTime(v)" v-if="!i">顾客下单{{autodeliveryOrderTime}}分钟后</span>
-                  <span @click="openSetTime(v)" v-if="i===1">期望送达前{{bookingAutodeliveryOrderTime}}分钟</span>
-                  <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
-                </div>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-      <div class="voice-content">
-        <div class="top-set" style="border-bottom: 1px solid #eee;">
-          <div class="t-left">
-            同步设置
-          </div>
-        </div>
-        <div class="voice-list">
-          <el-row>
-            <el-col :span="24" v-for="(v,i) in list" :key="i">
-              <div class="item">
-                <div class="left">
-                  <span class="name">{{v.name}}</span>
-                </div>
-                <div class="right">
-                  <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
-                </div>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-    </template>
-    <div class="voice-content">
-      <div class="top-set" style="border-bottom: 1px solid #eee;">
-        <div class="t-left">
-          语音播报
-        </div>
-        <div class="t-right">
-          <span>一键开启</span>
-          <el-switch @change="changeMessageStatus" v-model="msasterSwitch" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
-        </div>
-      </div>
-      <div class="voice-list">
-        <el-row>
-          <el-col :span="8" v-for="(item, index) in voiceList" :key="index">
-            <div class="item">
-              <div class="left">
-                <img @click="play(index)" src="../../../static/image/voice-icon.png" class="voice-icon" />
-                <span>{{ item.name }}</span>
-              </div>
-              <div class="right">
-                <el-switch @change="updateSavePushMessageStatus" v-model="item.msasterSwitch" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
-              </div>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
-    </div>
-    <el-dialog :title="!curIndex ? '即时单自动发单时间设置' : '预定单自动发单时间设置'" @close="getConfig" :visible.sync="centerDialogVisible" width="800px" center>
-      <el-form label-width="120px">
-        <el-form-item :label="!curIndex ? '顾客下单' : '期望送达前'">
-          <el-input size="small" class="auto-time" v-model="time" clearable>
-            <template slot="append">分钟{{curIndex ? '' : '后'}}</template>
-          </el-input>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button size="medium" @click="getConfig">取 消</el-button>
-        <el-button size='medium' type="primary" @click="confirm">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import {
-  getConfig,
-  updateConfig,
-  queryPushMessageStatus,
-  updateSavePushMessageStatus,
-} from "../../api/setting.js";
-// import { floorListDelivery } from "../../api/shop.js";
-export default {
-  data() {
-    return {
-      voiceList: [],
-      openAutoorder: 0,
-      openPrintSwitch: 0,
-      autodeliveryOrderTime: 0,
-      bookingAutodeliveryOrderTime: 0,
-      time: 0,
-      msasterSwitch: 1,
-      centerDialogVisible: false,
-      memberType: this.$store.state.userInfo.memberType,
-      list: [
-        {
-          name: "同步订单商品给骑手",
-          value: 1,
-          field: "syncGoodsDetailToDelivery",
-        },
-        {
-          name: "同步打印客户联商品明细",
-          value: 1,
-          field: "customerLinkPrintGoodsDetail",
-        },
-        {
-          name: "同步打印客户联商品价格",
-          value: 1,
-          field: "customerLinkPrintGoodsPrice",
-        },
-      ],
-      curIndex: 0,
-      list1: [
-        {
-          name: "即时单自动发单",
-          value: 1,
-          field: "openAutodelivery",
-        },
-        {
-          name: "预定单自动发单",
-          value: 1,
-          field: "openBookingAutodelivery",
-        },
-      ],
-    };
-  },
-  watch: {
-    "$store.state.userInfo": {
-      handler(newVal, oldVal) {
-        this.memberType = newVal.memberType;
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.getConfig();
-    this.queryPushMessageStatus();
-  },
-  methods: {
-    change(e) {
-      console.log(e);
-      updateConfig({
-        [e.field]: e.value,
-      }).then((res) => {
-        if (res.code === 200) {
-          this.getConfig();
-        } else {
-          e.value = !e.value;
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-    openSetTime(v, i) {
-      if (!v.value) {
-        return this.$message({
-          type: "info",
-          message: "请先开启自动配送再设置时长！",
-        });
-      }
-      this.curIndex = i;
-      if (!i) {
-        this.time = this.autodeliveryOrderTime;
-      } else if (i === 1) {
-        this.time = this.bookingAutodeliveryOrderTime;
-      }
-      this.centerDialogVisible = true;
-    },
-    play(index) {
-      let src = "https://pc.liebaoai.cn/audio/alone.mp3";
-      switch (index) {
-        case 0:
-          src = "https://pc.liebaoai.cn/audio/new-order.mp3";
-          break;
-        case 1:
-          src = "https://pc.liebaoai.cn/audio/order-received.mp3";
-          break;
-        case 2:
-          src = "https://pc.liebaoai.cn/audio/missed-orders.mp3";
-          break;
-        case 3:
-          src = "https://pc.liebaoai.cn/audio/rider-cancel.mp3";
-          break;
-        case 4:
-          src = "https://pc.liebaoai.cn/audio/user-go-cancel.mp3";
-          break;
-        case 5:
-          src = "https://pc.liebaoai.cn/audio/not-enough.mp3";
-          break;
-        case 6:
-          src = "https://pc.liebaoai.cn/audio/lower-than.mp3";
-          break;
-        case 7:
-          src = "https://pc.liebaoai.cn/audio/over-time.mp3";
-          break;
-        case 8:
-          src = "https://pc.liebaoai.cn/audio/rider-go-cancel.mp3";
-          break;
-
-        default:
-          break;
-      }
-      let mp3 = new Audio(src);
-      mp3.play(); //播放 mp3这个音频对象
-    },
-    confirm() {
-      this.centerDialogVisible = true;
-      let data = {};
-      if (!this.curIndex) {
-        data = { autodeliveryOrderTime: this.time * 60 };
-      } else if (this.curIndex === 1) {
-        data = { bookingAutodeliveryOrderTime: this.time * 60 };
-      }
-      this.updateConfig(data);
-    },
-    changeMessageStatus() {
-      this.voiceList = this.voiceList.map((v) => {
-        v.msasterSwitch = this.msasterSwitch;
-        return v;
-      });
-      this.updateSavePushMessageStatus();
-    },
-    getConfig() {
-      this.centerDialogVisible = false;
-      getConfig().then((res) => {
-        if (res.code === 200) {
-          this.autodeliveryOrderTime = res.data.autodeliveryOrderTime / 60;
-          this.bookingAutodeliveryOrderTime =
-            res.data.bookingAutodeliveryOrderTime / 60;
-          this.openAutoorder = res.data.openAutoorder;
-          this.openPrintSwitch = res.data.openPrintSwitch;
-          this.list = this.list.map((v) => {
-            v.value = res.data[v.field];
-            return v;
-          });
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-    queryPushMessageStatus() {
-      queryPushMessageStatus().then((res) => {
-        if (res.code === 200) {
-          this.voiceList = res.data;
-        } 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(data) {
-      updateConfig(data).then((res) => {
-        if (res.code === 200) {
-          this.getConfig();
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.voice {
-  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
-  /deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-    background-color: #fc7200;
-    border-color: #fc7200;
-  }
-  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
-    color: #fc7200;
-  }
-  /deep/ .el-button--primary {
-    color: #fff;
-    background-color: #fc7200;
-    border-color: #fc7200;
-  }
-  .top-set {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
-    background-color: #fff;
-    .t-left {
-      font-size: 16px;
-      font-family: PingFang SC;
-      font-weight: bold;
-      color: #333333;
-      span {
-        cursor: pointer;
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        color: #175199;
-      }
-    }
-    .t-right {
-      font-size: 14px;
-      font-family: PingFang SC;
-      font-weight: 400;
-      color: #b1b1b1;
-    }
-  }
-  .voice-content {
-    margin-top: 10px;
-    .voice-list {
-      background-color: #fff;
-      .item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 17px 22px 19px 18px;
-        .left {
-          display: flex;
-          align-items: center;
-          .name {
-            font-size: 14px;
-            // font-weight: bold;
-          }
-          .time {
-            margin-left: 10px;
-            font-size: 12px;
-            color: #175199;
-            cursor: pointer;
-          }
-          .voice-icon {
-            width: 15px;
-            height: 12px;
-            margin-right: 4px;
-            margin-top: 2px;
-            cursor: pointer;
-          }
-          span {
-            font-size: 14px;
-            font-family: PingFang SC;
-            font-weight: 400;
-            color: #333333;
-          }
-        }
-        .right {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          color: #999999;
-        }
-      }
-    }
-  }
-  .delivery-list {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 20px;
-    .delivery {
-      margin: 0 20px 20px 0;
-      width: 100px;
-      height: 30px;
-      line-height: 30px;
-      text-align: center;
-      border-radius: 25px;
-      border: 1px solid #999;
-      color: #999999;
-      cursor: pointer;
-    }
-    .active {
-      border: 1px solid #fc7200;
-      color: #fff;
-      background: #fc7200;
-    }
-  }
-  .auto-time {
-    width: 150px;
-  }
-}
-</style>

src/components/shopCompoents/bindDelivery.vue

@@ -128,6 +128,7 @@ import {
   unBindAptNew,
 } from "../../api/shop";
 export default {
+  name: 'bindDelivery',
   data() {
     return {
       deliveryList: [],

src/components/shopCompoents/bindPrinter.vue

@@ -1,404 +0,0 @@
-<template>
-  <div class="bind-printer" 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 shopList" :key="index">{{ item.name }}</div>
-    </div>
-    <div class="header" v-if="shopList.length">
-      <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>
-    <template v-if="printerList.length">
-      <div class="take-out-list" v-for="(v,i) in printerList" :key="i">
-        <div class="item">
-          <div class="item-top">
-            <div class="name">{{v.name}}</div>
-          </div>
-          <div class="item-bottom">
-            <div class="left">
-              <div class="l-l">
-                <img :src="v.img" class="l-l-img" />
-              </div>
-              <div class="take-out-name">
-                <div class="take-out-name-bot">
-                  <span :class="['status'+v.onlineStatus,'status']"> 打印机{{v.onlineStatus === 1 ? '在线' : v.onlineStatus === 2 ? '异常' : '离线'}}</span>
-                </div>
-                <div>打印机名称：{{v.deviceName}}</div>
-                <div>打印机编号：{{v.deviceSn}}</div>
-                <div class="take-out-name-bot">打印机KEY：{{v.deviceSecret}}</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">
-              <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>
-    </template>
-    <el-empty v-if="!shopList.length && !loading" description="暂无绑定打印机！"></el-empty>
-    <!-- <div class="empty-img" v-else>
-      <img src="../../../static/image/printer.png" />
-    </div> -->
-    <printer-add @shopDeviceList="shopDeviceList(curIdx)" ref="printerAdd" :devices="deviceList"></printer-add>
-  </div>
-</template>
-
-<script>
-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: false,
-      printerList: [],
-      showVisible: false,
-      title: "添加打印机",
-      deviceList: [],
-      memberType: this.$store.state.userInfo.memberType,
-    };
-  },
-  watch: {
-    curIdx(newVal, oldVal) {
-      this.shopDeviceList(newVal);
-    },
-    "$store.state.userInfo": {
-      handler(newVal, oldVal) {
-        this.memberType = newVal.memberType;
-      },
-      deep: true,
-    },
-  },
-  created() {
-    if (this.memberType !== 1) {
-      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() {
-      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;
-      });
-    },
-    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;
-    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;
-    -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;
-  }
-  .take-out-list {
-    margin-bottom: 10px;
-    .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;
-        .name {
-          font-size: 16px;
-          font-family: PingFang SC;
-          font-weight: bold;
-          color: #333333;
-        }
-        .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: 10px 18px;
-        align-items: center;
-        .left {
-          display: flex;
-          align-items: center;
-          .l-l {
-            width: 155px;
-            height: 80px;
-            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: 26px;
-            margin-left: 30px;
-            .take-out-name-bot {
-              // margin-bottom: 10px;
-              .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;
-                &:before {
-                  background: #f74141;
-                }
-              }
-              .status1 {
-                color: #18b71c;
-                &:before {
-                  background: #18b71c;
-                }
-              }
-            }
-            .print-num {
-              display: flex;
-              div {
-                margin-right: 20px;
-              }
-            }
-          }
-        }
-        .right {
-          .right-btn {
-            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

@@ -105,6 +105,7 @@ import {
   bindChangeShop,
 } from "../../api/shop";
 export default {
+  name: "bindTakeOut",
   data() {
     return {
       curIndex: 0,

src/components/shopCompoents/bindUsbPrint.vue

@@ -19,7 +19,7 @@
       <el-empty style="width:100%;" v-if="!printerList.length" description="无法获取系统打印机列表，请先安装下载中心USB打印相关插件！"></el-empty>
     </div>
     <!-- 打印机新增、编辑 -->
-    <el-dialog width="40%" :title="title" destroy-on-close center :visible.sync="showVisible">
+    <el-dialog width="600px" :title="title" destroy-on-close center :visible.sync="showVisible">
       <el-form :model="form" ref="form" label-width="130px">
         <el-form-item label="打印机系统名称" prop="deviceName">
           <span>{{form.deviceName}}</span>

src/components/shopCompoents/shopList.vue

@@ -1,38 +1,33 @@
 <template>
   <div class="shopList" v-loading="loading" element-loading-text="数据加载中">
-    <div class="header" v-if="shopList.length">
-      <div class="left">
-        <div class="line">
-          <div class="b_line"></div>
-          <div class="triangle"></div>
+   <div class="shop-list">
+      <div class="item" v-for="(v,i) in shopList" :key=i>
+        <div class="shop-top">
+          <div class="code">门店编号：{{v.code}}</div>
+          <div class="edit" @click.stop="addShop(2, v)">编辑</div>
+        </div>
+        <div class="cell">
+          <img class="img" src="../../../static/image/shop-name.png" alt="">
+          <div class="con">{{v.name}}</div>
+        </div>
+        <div class="cell">
+          <img class="img" src="../../../static/image/shop-address.png" alt="">
+          <div class="con1">{{v.poiAddress}}{{v.address}}</div>
+        </div>
+        <div class="cell">
+          <img class="img" src="../../../static/image/shop-contact.png" alt="">
+          <div class="con1">{{v.contactName}} {{v.mobile}}</div>
+        </div>
+        <div class="delivery">
+          <div class="name">配送运力：</div>
+          <img class="img" :src="d.logo" v-for="(d,idx) in v.deliveries" :key="idx" alt="">
         </div>
-        <div class="label">门店管理</div>
       </div>
-      <div class="right">
-        <el-button class="btn" v-if="$store.state.userInfo.memberType === 2" @click.stop="addShop(1)">新增门店</el-button>
+      <div class="item1" @click.stop="addShop(1)">
+        <img class="img" src="../../../static/image/icon-add.png" alt="">
+        <div class="shop-name">添加门店</div>
       </div>
     </div>
-    <el-table v-if="shopList.length" :data="shopList" stripe header-row-class-name="table_h" style="width: 100%; margin-top: 10px">
-      <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>
-      <el-table-column prop="contactName" label="联系人" width="164" align="center"></el-table-column>
-      <el-table-column prop="mobile" label="联系电话" width="176" align="center"></el-table-column>
-      <el-table-column label="已获运力" align="center" width="450">
-        <template slot-scope="scope">
-          <div class="imgs">
-            <img class="img" :src="item.logo" v-for="(item, i) in scope.row.deliveries" :key="i" alt="">
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column fixed="right" label="操作" width="100" align="center">
-        <template slot-scope="scope">
-          <el-button class="btn" size="mini" @click.stop="addShop(2, scope.row)">修改</el-button>
-          <!-- <el-button type="danger" size="mini" @click.stop="deleteItem(scope.row)">删除</el-button> -->
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-empty v-if="!shopList.length && !loading" description="暂无门店数据！"></el-empty>
     <shop-add @getData="getData" ref="shopAdd" :products="productList"></shop-add>
   </div>
 </template>
@@ -41,6 +36,7 @@
 import shopAdd from "./shopAdd";
 import { getShopList, getProductList, shopDelete } from "../../api/shop";
 export default {
+  name: "shopList",
   components: {
     shopAdd,
   },
@@ -52,7 +48,7 @@ export default {
       memberType: this.$store.state.userInfo.memberType,
     };
   },
-  watch:{
+  watch: {
     "$store.state.userInfo": {
       handler(newVal, oldVal) {
         this.memberType = newVal.memberType;
@@ -81,7 +77,16 @@ export default {
       this.loading = true;
       getShopList().then((res) => {
         if (res.code === 200) {
-          this.shopList = res.data;
+          this.shopList = res.data.map((v) => {
+            if (
+              v.poiAddress === "null" ||
+              v.poiAddress === "undefined" ||
+              !v.poiAddress
+            ) {
+              v.poiAddress = "";
+            }
+            return v;
+          });
         } else {
           this.$message({
             type: "error",
@@ -135,87 +140,108 @@ export default {
 
 <style lang="scss">
 .shopList {
-  width: 100%;
-  background: #ffffff;
-  min-height: calc(100vh - 184px);
-  padding: 20px;
-  box-sizing: border-box;
-
-  .header {
+  .shop-list {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .left {
+    flex-wrap: wrap;
+    .item {
+      position: relative;
       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;
+      flex-direction: column;
+      width: 290px;
+      height: 150px;
+      background: rgba(255, 255, 255, 0.39);
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+      margin: 10px 20px 0 0;
+      padding: 16px;
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      .shop-top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-bottom: 8px;
+        border-bottom: 1px solid #ebebeb;
+        .code {
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          color: #999999;
         }
-
-        .triangle {
-          width: 0;
-          height: 0;
-          border-top: 100px solid #462bf7;
-          border-left: 100px solid transparent;
+        .edit {
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 20px;
+          color: #fc7200;
         }
       }
-
-      .label {
+      .cell {
+        display: flex;
+        align-items: center;
+        margin-top: 8px;
+        .img {
+          width: 12px;
+          height: 12px;
+          margin-right: 5px;
+        }
+        .con {
+          font-size: 16px;
+          font-weight: bold;
+          line-height: 20px;
+          color: #333333;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+        .con1 {
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          color: #333333;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+      }
+      .delivery {
+        display: flex;
+        align-items: center;
+        border-top: 1px solid #ebebeb;
+        margin-top: 8px;
+        padding-top: 8px;
+        .name {
+          flex-shrink: 0;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          color: #333333;
+        }
+        .img {
+          width: 16px;
+          height: 16px;
+          margin-left: 10px;
+        }
+      }
+    }
+    .item1 {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background: #ffffff;
+      width: 322px;
+      height: 182px;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      margin: 10px 20px 0 0;
+      cursor: pointer;
+      .shop-name {
         font-size: 16px;
         font-weight: 500;
-        color: #0d1e40;
+        line-height: 22px;
+        color: #333333;
       }
     }
   }
-
-  .btn {
-    background: #fc7200;
-    border-color: #fc7200;
-    color: #fff;
-
-    &.black {
-      background: #0d1e40;
-      border-color: #0d1e40;
-    }
-  }
-
-  .el-table th.el-table__cell {
-    height: 38px;
-    background: #fafafa;
-    padding: 0;
-    font-size: 12px;
-    color: #666666;
-  }
-
-  .el-table .el-table__cell {
-    font-size: 14px;
-    color: #222222;
-  }
-
-  .imgs {
-    display: flex;
-    align-items: center;
-    padding-left: 36px;
-
-    .img {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      margin-right: 10px;
-    }
-  }
 }
 </style>

src/components/shopInfo.vue

@@ -1,221 +0,0 @@
-<template>
-  <div class="shopInfo">
-    <el-row class="order_tab">
-      <el-col :span="24">
-        <div class="tabList">
-          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
-            <span class="item" v-if="!item.children">{{item.name}}</span>
-            <el-dropdown v-else @command="choosePrint">
-              <span class="el-dropdown-link item">
-                {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-            <div class="tab_line"></div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-
-    <el-row class="content">
-      <el-col style="height: 100%;" :span="24">
-        <component v-if="renderComponent" :is="activeName"></component>
-      </el-col>
-    </el-row>
-    <merchant-add ref="merchantAdd" :products="productList"></merchant-add>
-  </div>
-</template>
-
-<script>
-import merchantAdd from "./merchantAdd.vue";
-import shopList from "./shopCompoents/shopList";
-import storeList from "./shopCompoents/bindTakeOut.vue";
-import deliveryList from "./shopCompoents/bindDelivery.vue";
-import printerList from "./shopCompoents/bindPrinter.vue";
-import usbPrinter from "./shopCompoents/bindUsbPrint.vue";
-import bus from "../common/bus.js";
-import { getProductList } from "../api/shop.js";
-export default {
-  name: "HelloWorld",
-  components: {
-    merchantAdd,
-    shopList,
-    storeList,
-    deliveryList,
-    printerList,
-    usbPrinter,
-  },
-
-  data() {
-    return {
-      activeName: "shopList",
-      tabList: [
-        { name: "门店列表", activeName: "shopList" },
-        { name: "绑定外卖平台", activeName: "storeList" },
-        { name: "绑定配送平台", activeName: "deliveryList" },
-        {
-          name: "绑定打印机",
-          activeName: "printerList",
-          children: [
-            { name: "云打印机", command: "printerList" },
-            { name: "USB打印机", command: "usbPrinter" },
-          ],
-        },
-      ],
-      tabNum: 0,
-      renderComponent: true,
-      productList: [],
-      memberType: this.$store.state.userInfo.memberType,
-    };
-  },
-  watch: {
-    "$store.state.userInfo": {
-      handler(newVal, oldVal) {
-        this.memberType = newVal.memberType;
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.getProductList();
-    bus.$on("goPrinter", () => {
-      this.changeTabs(3);
-    });
-    let i = this.$route.params.tabNum;
-    if (i) {
-      this.changeTabs(Number(i));
-    }
-  },
-  beforeRouteEnter(to, from, next) {
-    next((vm) => {
-      if (from.name) {
-        vm.$nextTick(() => {
-          vm.changeTabs(0);
-        });
-      }
-    });
-  },
-  mounted() {},
-  methods: {
-    choosePrint(e) {
-      console.log("object", e);
-      if (this.memberType === 1) {
-        this.$confirm("您当前还不是商户，请先申请成为商户！", "提示", {
-          confirmButtonText: "成为商户",
-          cancelButtonText: "取消",
-          type: "warning",
-          center: true,
-        })
-          .then(() => {
-            this.$refs.merchantAdd.init(0);
-          })
-          .catch(() => {});
-      }
-      if (this.tabNum === 3) {
-        this.activeName = e;
-        this.forceRerender();
-        return;
-      }
-      this.tabNum = 3;
-      this.activeName = e;
-    },
-    forceRerender() {
-      // 从 DOM 中删除 my-component 组件
-      this.renderComponent = false;
-      this.$nextTick(() => {
-        // 在 DOM 中添加 my-component 组件
-        this.renderComponent = true;
-      });
-    },
-    changeTabs(i) {
-      if (this.memberType === 1) {
-        this.$confirm("您当前还不是商户，请先申请成为商户！", "提示", {
-          confirmButtonText: "成为商户",
-          cancelButtonText: "取消",
-          type: "warning",
-          center: true,
-        })
-          .then(() => {
-            this.$refs.merchantAdd.init(0);
-          })
-          .catch(() => {});
-      }
-      if (i === this.tabNum) {
-        this.forceRerender();
-        return;
-      }
-      this.tabNum = i;
-      this.activeName = this.tabList[i].activeName;
-    },
-    getProductList() {
-      getProductList().then((res) => {
-        if (res.code === 200) {
-          this.productList = res.data;
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.shopInfo {
-  height: 100%;
-  .order_tab {
-    width: 100%;
-    height: 74px;
-    background: #fff;
-
-    .tabList {
-      width: 100%;
-      height: 74px;
-      padding-top: 20px;
-      padding-left: 36px;
-      box-sizing: border-box;
-      display: flex;
-
-      .tab_item {
-        min-width: 58px;
-        margin-right: 56px;
-        .item {
-          font-size: 16px;
-          font-weight: 500;
-          color: #b1b1b1;
-          position: relative;
-          text-align: center;
-          cursor: pointer;
-        }
-        .tab_line {
-          width: 58px;
-          height: 6px;
-          background: #fff;
-          border-radius: 3px;
-          margin: 15px auto 0;
-        }
-      }
-
-      .tab_item_ac {
-        color: #fc7200;
-
-        .tab_line {
-          background: #fc7200;
-        }
-      }
-    }
-  }
-
-  .content {
-    width: 100%;
-    height: calc(100% - 84px);
-    margin-top: 10px;
-  }
-}
-</style>

src/components/system.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>这是系统设置</div>
+</template>
+
+<script>
+export default {
+  name: "system",
+  data() {
+    return {};
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  // 生命周期 - 创建之前
+  beforeCreate() {},
+  // 生命周期 - 挂载之前
+  beforeMount() {},
+  // 生命周期 - 更新之前
+  beforeUpdate() {},
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+
+<style lang="scss" scoped  type="text/css">
+</style>

src/components/waimai.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="shopInfo">
+    <el-row class="order_tab">
+      <el-col :span="24">
+        <div class="tabList">
+          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
+            <span class="item" :class="tabNum==i?'active-item':''" v-if="!item.children">{{item.name}}</span>
+            <el-dropdown v-else @command="chooseCoupon">
+              <span class="el-dropdown-link item" :class="tabNum==i?'active-item':''">
+                {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <div class="tab_line"></div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row class="content">
+      <component v-if="renderComponent" :is="activeName"></component>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import printerList from "./waimaiComponents/printerList.vue";
+import usbPrinter from "./shopCompoents/bindUsbPrint.vue";
+import pictureManagement from "./waimaiComponents/pictureManagement.vue";
+import addressManagement from "./waimaiComponents/addressManagement.vue";
+import deliverySetting from "./waimaiComponents/deliverySetting.vue";
+import voiceSetting from "./waimaiComponents/voiceSetting.vue";
+export default {
+  name: "waimai",
+  components: {
+    printerList,
+    usbPrinter,
+    pictureManagement,
+    addressManagement,
+    deliverySetting,
+    voiceSetting,
+  },
+  data() {
+    return {
+      activeName: "deliverySetting",
+      tabList: [
+        { name: "配送设置", index: 0, activeName: "deliverySetting" },
+        { name: "语音设置", index: 1, activeName: "voiceSetting" },
+        {
+          name: "打印机管理",
+          index: 2,
+          activeName: "printerList",
+          children: [
+            { name: "云打印机", command: "printerList" },
+            { name: "USB打印机", command: "usbPrinter" },
+          ],
+        },
+        { name: "商品管理", index: 3, activeName: "pictureManagement" },
+        { name: "常用地址", index: 4, activeName: "addressManagement" },
+      ],
+      tabNum: 0,
+      renderComponent: true,
+    };
+  },
+  created() {
+    let index = this.$route.params.tabNum ?? 0;
+    console.log(this.$route);
+    this.changeTabs(index);
+  },
+  methods: {
+    chooseCoupon(e) {
+      this.tabNum = 2;
+      this.activeName = e;
+    },
+    forceRerender() {
+      // 从 DOM 中删除 my-component 组件
+      this.renderComponent = false;
+      this.$nextTick(() => {
+        // 在 DOM 中添加 my-component 组件
+        this.renderComponent = true;
+      });
+    },
+    changeTabs(i) {
+      if (i === this.tabNum) {
+        this.forceRerender();
+        return;
+      }
+      this.tabNum = i;
+      this.activeName = this.tabList[i].activeName;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.shopInfo {
+  .order_tab {
+    width: 100%;
+    height: 74px;
+    background: #fff;
+
+    .tabList {
+      width: 100%;
+      height: 74px;
+      padding-top: 20px;
+      padding-left: 36px;
+      box-sizing: border-box;
+      display: flex;
+
+      .tab_item {
+        min-width: 58px;
+        margin-right: 56px;
+        .item {
+          font-size: 16px;
+          font-weight: 500;
+          color: #b1b1b1;
+          position: relative;
+          text-align: center;
+          cursor: pointer;
+        }
+        .active-item {
+          color: #fc7200;
+        }
+        .tab_line {
+          width: 58px;
+          height: 6px;
+          background: #fff;
+          border-radius: 3px;
+          margin: 15px auto 0;
+        }
+      }
+
+      .tab_item_ac {
+        color: #fc7200;
+
+        .tab_line {
+          background: #fc7200;
+        }
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    margin-top: 10px;
+    box-sizing: border-box;
+  }
+}
+</style>

src/components/addressManagement.vue

@@ -1,30 +1,25 @@
 <template>
   <div class="address-management">
-    <div class="header">
-      <div class="num">已保存<span>{{addressList.length}}</span>/100条,最多还可以添加<span>{{100-addressList.length}}</span>条</div>
-      <el-button class="btn" round @click="showAddress(false)" size="mini" type="primary" plain>添加+</el-button>
+    <div class="printer-list">
+      <div class="item" v-for="(v,i) in addressList" :key="i">
+        <div class="name">{{v.contact}} {{v.phone}}</div>
+        <div class="shop-name">{{v.address}}</div>
+        <div class="btns">
+          <img @click.stop="showAddress(1,v)" src="../../../static/image/edit-icon.png" alt="">
+          <img @click.stop="deleteAddress(v)" src="../../../static/image/delete-icon.png" alt="">
+        </div>
+      </div>
+      <div class="item1" @click.stop="showAddress(0,v)">
+        <img class="img" src="../../../static/image/icon-add.png" alt="">
+        <div class="shop-name">添加常用地址</div>
+      </div>
     </div>
-    <el-table @cell-click="editAddress" :data="addressList" stripe style="width: 100%">
-      <el-table-column prop="contact" label="姓名" width="300">
-      </el-table-column>
-      <el-table-column prop="phone" label="电话" width="300">
-      </el-table-column>
-      <el-table-column prop="address" label="地址">
-      </el-table-column>
-      <el-table-column label="删除" width="100">
-        <template slot-scope="scope">
-          <i @click="deleteAddress(scope.row)" class="el-icon-delete"></i>
-          <!-- <el-button type="text" size="small" @click="showAddress(true,scope.row)">编辑</el-button>
-          <el-button @click="deleteAddress(scope.row)" type="text" size="small">删除</el-button> -->
-        </template>
-      </el-table-column>
-    </el-table>
     <!-- //新增编辑地址 -->
     <el-dialog :title="isEdit ? '编辑地址': '新增地址'" :visible.sync="centerDialogVisible" width="600px" center append-to-body>
       <el-form ref="form" :model="form" label-width="100px" label-position="left" size="small">
         <el-form-item label="位置" required>
           <el-input v-model="form.address" placeholder="请选择位置！" disabled>
-            <img @click="showMap" slot="append" class="map" src="../../static/image/icon_map.png" />
+            <img @click="showMap" slot="append" class="map" src="../../../static/image/icon_map.png" />
           </el-input>
         </el-form-item>
         <el-form-item label="门牌号">
@@ -51,7 +46,7 @@
 </template>
 
 <script>
-import orderMap from "./orderComponents/orderAMap.vue";
+import orderMap from "../orderComponents/orderAMap.vue";
 import {
   getAddressList,
   deleteAddress,
@@ -59,7 +54,7 @@ import {
   updateAddress,
   getAddressDetail,
   defaultAddress,
-} from "../api/setting.js";
+} from "../../api/setting.js";
 export default {
   name: "addressManagement",
   data() {
@@ -97,11 +92,6 @@ export default {
   mounted() {},
   // 方法集合
   methods: {
-    editAddress(){
-      console.log('arguments:',arguments);
-      if(arguments[2].cellIndex === 3)return
-      this.showAddress(true,arguments[0])
-    },
     cancel() {
       this.centerDialogVisible = false;
       this.getAddressList();
@@ -256,30 +246,75 @@ export default {
   color: #fff;
   border: #fc7200;
 }
-/deep/ .el-button--text {
-  color: #fc7200;
-}
+
 .map {
   width: 20px;
   height: 20px;
   cursor: pointer;
 }
 .address-management {
-  .header {
+  .printer-list {
     display: flex;
-    // justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-    .num {
-      font-size: 14px;
-      margin-right: 20px;
-      span {
-        color: #fc7200;
+    flex-wrap: wrap;
+    .item {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      width: 280px;
+      height: 120px;
+      background: #ffffff;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      margin: 10px 20px 0 0;
+      padding: 35px 20px 0;
+      cursor: pointer;
+      .img {
+        width: 80px;
+        height: 80px;
+      }
+      .name {
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 20px;
+        color: #333333;
+      }
+      .shop-name {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #999999;
+        margin-top: 16px;
+      }
+      .btns {
+        position: absolute;
+        top: 10px;
+        right: 0;
+        img {
+          width: 20px;
+          height: 20px;
+          margin-right: 10px;
+        }
+      }
+    }
+    .item1 {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background: #ffffff;
+      width: 320px;
+      height: 155px;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      margin: 10px 20px 0 0;
+      cursor: pointer;
+      .shop-name {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 22px;
+        color: #333333;
       }
     }
-  }
-  .el-icon-delete {
-    cursor: pointer;
   }
 }
 </style>

src/components/waimaiComponents/deliverySetting.vue

@@ -0,0 +1,361 @@
+<template>
+  <div class="delivery-setting">
+    <div class="model">
+      <div class="title">自动发单设置</div>
+      <div class="list">
+        <div class="item" v-for="(v,i) in list" :key=i>
+          <div class="left">
+            <div class="left-top">
+              <div class="name">{{v.name}}</div>
+              <div @click="setTime(v,i)" class="set">{{v.setContent}}</div>
+            </div>
+            <div class="left-bot">{{v.tips}}</div>
+          </div>
+          <div class="right">
+            <div v-if="!i" :class="['time', v.value ? '' : 'time1']">顾客下单{{v.time}}分钟后</div>
+            <div v-else :class="['time', v.value ? '' : 'time1']">期望送达前{{v.time}}分钟</div>
+            <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="model">
+      <div class="title">同步设置</div>
+      <div class="list">
+        <div class="item" v-for="(v,i) in list2" :key=i>
+          <div class="left">
+            <div class="left-top">
+              <div class="name">{{v.name}}</div>
+            </div>
+            <div class="left-bot">{{v.tips}}</div>
+          </div>
+          <div class="right">
+            <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="model">
+      <div class="title">运力设置<span class="tips">(推荐的运力在聚合发单时会置顶展示，屏蔽的运力在发单时将不进行计价）</span></div>
+      <div class="list">
+        <div class="item" v-for="(v,i) in deliveryList" :key=i>
+          <div class="left">
+            <div class="left-top">
+              <div class="name">{{v.name}}</div>
+            </div>
+            <div class="left-bot">{{v.tips}}</div>
+          </div>
+          <div class="right">
+            <div class="con con1" @click="changeDelivery(v,3)" v-if="billDeliveryIds.includes(String(v.deliveryId))">取消推荐</div>
+            <div class="con" @click="changeDelivery(v,2)" v-if="billDeliveryIds.includes(String(v.deliveryId)) || !shieldDeliveryIds.includes(String(v.deliveryId))">屏蔽</div>
+            <div class="con con1" @click="changeDelivery(v,3)" v-if="shieldDeliveryIds.includes(String(v.deliveryId))">取消屏蔽</div>
+            <div class="con" @click="changeDelivery(v,1)" v-if="shieldDeliveryIds.includes(String(v.deliveryId)) || !billDeliveryIds.includes(String(v.deliveryId))">推荐</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog :title="!curIndex ? '即时单自动发单时间设置' : '预定单自动发单时间设置'" @close="centerDialogVisible=false" :visible.sync="centerDialogVisible" width="400px" center>
+      <el-form label-width="120px">
+        <el-form-item :label="!curIndex ? '顾客下单' : '期望送达前'">
+          <el-input size="small" class="auto-time" v-model="time" clearable>
+            <template slot="append">分钟{{curIndex ? '' : '后'}}</template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="medium" @click="centerDialogVisible=false">取 消</el-button>
+        <el-button size='medium' type="primary" @click="confirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getDeliveryFloorList,
+  getConfig,
+  updateConfig,
+} from "../../api/setting.js";
+export default {
+  name: "deliverySetting",
+  data() {
+    return {
+      list: [
+        {
+          name: "自动发单",
+          setContent: "设置时长",
+          value: 1,
+          field: "openAutodelivery",
+          tips: "无冲突绑定模式，不支持自动发单",
+          time: 0,
+        },
+        {
+          name: "预约单自动发单",
+          setContent: "设置时长",
+          value: 1,
+          field: "openBookingAutodelivery",
+          tips: "设置的时长为预约单期望送达前多长时间自动呼叫配送",
+          time: 0,
+        },
+      ],
+      list2: [
+        {
+          name: "同步订单商品给骑手",
+          value: 1,
+          field: "syncGoodsDetailToDelivery",
+          tips: "关闭后骑手将看不到商品详情",
+        },
+        {
+          name: "同步打印客户联商品明细",
+          value: 1,
+          field: "customerLinkPrintGoodsDetail",
+          tips: "关闭后打印的客户联小票将看不到商品明细",
+        },
+        {
+          name: "同步打印客户联商品价格",
+          value: 1,
+          field: "customerLinkPrintGoodsPrice",
+          tips: "关闭后打印的客户联小票将看不到商品价格",
+        },
+      ],
+      billDeliveryIds: [], // 推荐运力
+      shieldDeliveryIds: [], // 屏蔽运力
+      deliveryList: [],
+      centerDialogVisible: false,
+      curIndex: 0,
+      time: 0,
+    };
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    changeDelivery(v, type) {
+      let id = v.deliveryId;
+      // 推荐该运力
+      if (type === 1) {
+        this.shieldDeliveryIds = this.shieldDeliveryIds.filter((v) => {
+          return v !== String(id);
+        });
+        this.billDeliveryIds.push(String(id));
+        this.billDeliveryIds = [...new Set(this.billDeliveryIds)];
+      }
+      // 屏蔽该运力
+      if (type === 2) {
+        this.billDeliveryIds = this.billDeliveryIds.filter((v) => {
+          return v !== String(id);
+        });
+        this.shieldDeliveryIds.push(String(id));
+        this.shieldDeliveryIds = [...new Set(this.shieldDeliveryIds)];
+      }
+      // 恢复为普通运力
+      if (type === 3) {
+        this.billDeliveryIds = this.billDeliveryIds.filter((v) => {
+          return v !== String(id);
+        });
+        this.shieldDeliveryIds = this.shieldDeliveryIds.filter((v) => {
+          return v !== String(id);
+        });
+      }
+      let data = {
+        billDeliveryIds: String(this.billDeliveryIds),
+        shieldDeliveryIds: String(this.shieldDeliveryIds),
+      };
+      this.updateConfig(data);
+    },
+    confirm() {
+      let data = {};
+      if (!this.curIndex) {
+        data = { autodeliveryOrderTime: this.time * 60 };
+      } else {
+        data = { bookingAutodeliveryOrderTime: this.time * 60 };
+      }
+      this.updateConfig(data);
+    },
+    setTime(v, i) {
+      if (!v.value) {
+        return this.$message({
+          message: "请开启后再设置时间！",
+          type: "warning",
+        });
+      }
+      this.curIndex = i;
+      this.time = v.time;
+      this.centerDialogVisible = true;
+    },
+    change(e) {
+      let data = { [e.field]: e.value };
+      this.updateConfig(data);
+    },
+    getDelivery() {
+      getDeliveryFloorList().then((res) => {
+        console.log("返回的运力：", res);
+        if (res.code === 200) {
+          // 电脑端暂时不支持货拉拉
+          this.deliveryList = res.data.filter((v) => {
+            return v.type !== 12;
+          });
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    getConfig() {
+      getConfig().then((res) => {
+        if (res.code === 200) {
+          this.billDeliveryIds = res.data.billDeliveryIds
+            ? res.data.billDeliveryIds.split(",")
+            : [];
+          this.shieldDeliveryIds = res.data.shieldDeliveryIds
+            ? res.data.shieldDeliveryIds.split(",")
+            : [];
+          this.list[0].time = res.data.autodeliveryOrderTime / 60;
+          this.list[1].time = res.data.bookingAutodeliveryOrderTime / 60;
+          this.list = this.list.map((v) => {
+            v.value = res.data[v.field];
+            return v;
+          });
+          this.list2 = this.list2.map((v) => {
+            v.value = res.data[v.field];
+            return v;
+          });
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+        this.centerDialogVisible = false;
+      });
+    },
+    updateConfig(data) {
+      updateConfig(data).then((res) => {
+        if (res.code !== 200) {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+        this.getConfig();
+      });
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getDelivery();
+    this.getConfig();
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  // 生命周期 - 创建之前
+  beforeCreate() {},
+  // 生命周期 - 挂载之前
+  beforeMount() {},
+  // 生命周期 - 更新之前
+  beforeUpdate() {},
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+
+<style lang="scss" scoped  type="text/css">
+.model {
+  .title {
+    position: relative;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 22px;
+    color: #333333;
+    padding-left: 10px;
+    margin-top: 24px;
+    .tips {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      color: #999999;
+    }
+  }
+  .title::before {
+    width: 3px;
+    height: 16px;
+    background: rgba(252, 114, 0, 0.39);
+    border-radius: 2px;
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 0;
+  }
+  .list {
+    .item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: #ffffff;
+      margin-top: 10px;
+      padding: 16px 20px;
+      .left {
+        display: flex;
+        flex-direction: column;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 20px;
+        color: #000000;
+        .left-top {
+          display: flex;
+          align-items: center;
+          .set {
+            font-weight: 400;
+            color: #fc7200;
+            margin-left: 10px;
+            cursor: pointer;
+          }
+        }
+        .left-bot {
+          margin-top: 2px;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 17px;
+          color: #999999;
+        }
+      }
+      .right {
+        display: flex;
+        align-items: center;
+        .time {
+          font-size: 12px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          line-height: 17px;
+          color: #333333;
+          margin-right: 20px;
+        }
+        .time1 {
+          color: #999999;
+        }
+        .con {
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          color: #fc7200;
+          padding-left: 20px;
+          cursor: pointer;
+        }
+        .con1 {
+          color: #999999;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/pictureManagement.vue

@@ -5,7 +5,7 @@
         <div class="name">同步商品图片</div>
         <div class="tips">(同步后显示最新的商品图片)</div>
       </div>
-      <img @click="syncFoodImg" class="img" src="../../static/image/update.png" alt="">
+      <img @click="syncFoodImg" class="img" src="../../../static/image/update.png" alt="">
     </div>
     <div class="set">
       <div class="title">
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getConfig, updateConfig, syncFoodImg } from "../api/setting.js";
+import { getConfig, updateConfig, syncFoodImg } from "../../api/setting.js";
 export default {
   name: "pictureManagement",
   data() {

src/components/shopCompoents/printerAdd.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="shopAdd">
     <!-- 打印机新增、编辑 -->
-    <el-dialog width="40%" :title="title" destroy-on-close center :visible.sync="showVisible">
+    <el-dialog width="600px" :title="title" :destroy-on-close="true" center :visible.sync="showVisible">
       <el-form :model="form" ref="form" label-width="120px">
         <el-form-item label="选择打印机" prop="deviceType">
           <div class="category_box">
@@ -10,16 +10,21 @@
             </div>
           </div>
         </el-form-item>
+        <el-form-item label="关联门店">
+          <el-select v-model="form.shopId" placeholder="请选择关联门店">
+            <el-option v-for="v in shopList" :key="v.id" :label="v.name" :value="v.id"></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="打印机名称" prop="name">
-          <el-input v-model="form.name" placeholder="给这台打印机取个名字吧" autocomplete="off" style="width: 100%">
+          <el-input clearable 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 clearable 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-form-item label="打印机KEY" prop="deviceSecret" v-if="form.deviceType!==25">
+          <el-input clearable v-model="form.deviceSecret" placeholder="查看打印机底部标签" autocomplete="off" style="width: 100%">
           </el-input>
         </el-form-item>
         <el-form-item label="自动打印接单" prop="deviceSecret">
@@ -66,12 +71,24 @@ export default {
         return [];
       },
     },
+    shopList: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
   },
   data() {
     return {
       title: "添加打印机",
       showVisible: false,
-      form: {},
+      form: {
+        openOrderPrint: 1,
+        openOrderCancelPrint: 1,
+        printCustomerCount: 1,
+        printMerchantCount: 1,
+        printKitchenCount: 1,
+      },
       revieweds: [],
       loading: false,
       isEdit: false,
@@ -84,9 +101,10 @@ export default {
         return;
       }
       this.$set(this.form, "deviceType", v.type);
+      this.$set(this.form, "name", v.name);
       this.form.deviceId = v.id;
     },
-    init(e, shopId) {
+    init(e) {
       if (e) {
         this.isEdit = true;
         this.title = "编辑打印机";
@@ -95,14 +113,16 @@ export default {
         this.isEdit = false;
         this.title = "添加打印机";
         this.form = {
+          openOrderPrint: 1,
+          openOrderCancelPrint: 1,
+          printCustomerCount: 1,
+          printMerchantCount: 1,
+          printKitchenCount: 1,
+          deviceType: "",
           name: "",
-          deviceSn: "",
-          deviceSecret: "",
           deviceId: "",
-          printCustomerCount: 0,
-          printMerchantCount: 0,
-          printKitchenCount: 0,
-          shopId,
+          shopId: "",
+          deviceSn: "",
         };
       }
       this.showVisible = true;
@@ -126,7 +146,7 @@ export default {
           message: "请填写打印机编号！",
         });
       }
-      if (!this.form.deviceSecret.trim()) {
+      if (this.form.deviceType !== 25 && !this.form.deviceSecret.trim()) {
         return this.$message({
           type: "error",
           message: "请填写打印机Key！",

src/components/waimaiComponents/printerList.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="printer-list">
+    <div class="model">
+      <div class="title">
+        <div class="name">云打印</div>
+        <div class="status-list">
+          <div class="status">
+            <div class="bg1"></div>
+            <div class="con">在线{{pinter.onlineNum}}</div>
+          </div>
+          <div class="status">
+            <div class="bg1 bg2"></div>
+            <div class="con">离线{{pinter.offlineNum}}</div>
+          </div>
+          <div class="status">
+            <div class="bg1 bg3"></div>
+            <div class="con">异常{{pinter.abnormalNum}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="printer-list">
+        <div class="item" v-for="(v,i) in printerList" :key="i">
+          <img class="img" :src="require(`../../../static/image/printer-online-${v.onlineStatus}.png`)" alt="">
+          <div class="name">{{v.name}}</div>
+          <div class="shop-name">{{v.shopName}}</div>
+          <div class="btns">
+            <img @click.stop="printTest(v)" src="../../../static/image/print-icon.png" alt="">
+            <img @click.stop="addPrinter(v)" src="../../../static/image/edit-icon.png" alt="">
+            <img @click.stop="deletePrinter(v)" src="../../../static/image/delete-icon.png" alt="">
+          </div>
+        </div>
+        <div class="item" @click.stop="addPrinter('')">
+          <img class="img" src="../../../static/image/icon-add.png" alt="">
+          <div class="name">添加打印机</div>
+          <div class="shop-name"> </div>
+        </div>
+      </div>
+    </div>
+    <printer-add :shopList="shopList" @shopDeviceList="refreshData" ref="printerAdd" :devices="deviceList"></printer-add>
+  </div>
+</template>
+
+<script>
+import printerAdd from "./printerAdd";
+import {
+  getShopList,
+  shopDeviceList,
+  deviceDetail,
+  deviceList,
+  deviceAdd,
+  deviceDelete,
+  deviceStatus,
+  printTest,
+  shopListNew,
+} from "../../api/shop";
+export default {
+  name: "printerList",
+  components: {
+    printerAdd,
+  },
+  data() {
+    return {
+      pinter: {},
+      printerList: [],
+      deviceList: [],
+      shopList: [],
+    };
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    printTest(v) {
+      printTest({ deviceSn: v.deviceSn }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: "操作成功！",
+          });
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    deletePrinter(v) {
+      this.$confirm("此操作将删除打印机, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        center: true,
+      })
+        .then(() => {
+          deviceDelete({ id: v.id }).then((res) => {
+            if (res.code === 200) {
+              this.$message({
+                type: "error",
+                message: "删除成功！",
+              });
+              this.refreshData();
+            } else {
+              this.$message({
+                type: "error",
+                message: res.msg,
+              });
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    refreshData() {
+      this.getPrinterNum();
+      this.getPrinterList();
+    },
+    addPrinter(e) {
+      console.log(e);
+      if (!e) {
+        this.$refs.printerAdd.init();
+      } else {
+        this.$refs.printerAdd.init(JSON.parse(JSON.stringify(e)));
+      }
+    },
+    getPrinterList() {
+      shopDeviceList({ deviceType: 2 }).then((res) => {
+        if (res.code === 200) {
+          this.printerList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    getPrinterNum() {
+      deviceStatus().then((res) => {
+        if (res.code === 200) {
+          this.pinter = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    getDeviceList() {
+      deviceList({ type: 2 }).then((res) => {
+        if (res.code === 200) {
+          this.deviceList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    getShopList() {
+      shopListNew().then((res) => {
+        if (res.code === 200) {
+          this.shopList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getPrinterNum();
+    this.getPrinterList();
+    this.getDeviceList();
+    this.getShopList();
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  // 生命周期 - 创建之前
+  beforeCreate() {},
+  // 生命周期 - 挂载之前
+  beforeMount() {},
+  // 生命周期 - 更新之前
+  beforeUpdate() {},
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+
+<style lang="scss" scoped  type="text/css">
+.model {
+  .title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 22px;
+    color: #333333;
+    padding-left: 10px;
+    margin-top: 24px;
+    .status-list {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      color: #999999;
+      .status {
+        display: flex;
+        align-items: center;
+        margin-left: 30px;
+        .con {
+          margin-left: 5px;
+        }
+        .bg1 {
+          width: 40px;
+          height: 10px;
+          border-radius: 2px;
+          background: linear-gradient(180deg, #64c47c 0%, #1aaa3d 100%);
+        }
+        .bg2 {
+          background: rgba(204, 204, 204, 0.39);
+        }
+        .bg3 {
+          background: linear-gradient(180deg, #ff8a8a 0%, #e60000 100%);
+        }
+      }
+    }
+  }
+  .title::before {
+    width: 3px;
+    height: 16px;
+    background: rgba(252, 114, 0, 0.39);
+    border-radius: 2px;
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 0;
+  }
+  .printer-list {
+    display: flex;
+    flex-wrap: wrap;
+    .item {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 320px;
+      height: 182px;
+      background: #ffffff;
+      border-radius: 8px;
+      margin: 10px 20px 0 0;
+      cursor: pointer;
+      .img {
+        width: 80px;
+        height: 80px;
+      }
+      .name {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        color: #333333;
+      }
+      .shop-name {
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #999999;
+      }
+      .btns {
+        position: absolute;
+        top: 10px;
+        right: 0;
+        img {
+          width: 20px;
+          height: 20px;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/waimaiComponents/voiceSetting.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="voice">
+    <div class="model">
+      <div class="title">通知设置</div>
+      <div class="list">
+        <div class="item">
+          <div class="left">
+            <div class="left-top">
+              <div class="name">语音开启</div>
+            </div>
+          </div>
+          <div class="right">
+            <el-switch @change="changeMessageStatus" v-model="open" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="model">
+      <div class="title">播报类型选择</div>
+      <div class="list">
+        <div class="item" v-for="(v,i) in voiceList" :key=i>
+          <div class="left">
+            <div class="left-top">
+              <img @click="play(i)" src="../../../static/image/voice-icon.png" class="voice-icon" />
+              <div class="name">{{v.name}}</div>
+            </div>
+          </div>
+          <div class="right">
+            <el-switch @change="updateSavePushMessageStatus" v-model="v.open" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  queryPushMessageStatus,
+  updateSavePushMessageStatus,
+} from "../../api/setting.js";
+export default {
+  name: "voiceSetting",
+  data() {
+    return {
+      voiceList: [],
+      open: 1,
+    };
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    changeMessageStatus() {
+      this.voiceList = this.voiceList.map((v) => {
+        v.open = this.open;
+        return v;
+      });
+      this.updateSavePushMessageStatus();
+    },
+    play(index) {
+      let src = "https://pc.liebaoai.cn/audio/alone.mp3";
+      switch (index) {
+        case 0:
+          src = "https://pc.liebaoai.cn/audio/new-order.mp3";
+          break;
+        case 1:
+          src = "https://pc.liebaoai.cn/audio/order-received.mp3";
+          break;
+        case 2:
+          src = "https://pc.liebaoai.cn/audio/missed-orders.mp3";
+          break;
+        case 3:
+          src = "https://pc.liebaoai.cn/audio/rider-cancel.mp3";
+          break;
+        case 4:
+          src = "https://pc.liebaoai.cn/audio/user-go-cancel.mp3";
+          break;
+        case 5:
+          src = "https://pc.liebaoai.cn/audio/not-enough.mp3";
+          break;
+        case 6:
+          src = "https://pc.liebaoai.cn/audio/lower-than.mp3";
+          break;
+        case 7:
+          src = "https://pc.liebaoai.cn/audio/over-time.mp3";
+          break;
+        case 8:
+          src = "https://pc.liebaoai.cn/audio/rider-go-cancel.mp3";
+          break;
+
+        default:
+          break;
+      }
+      let mp3 = new Audio(src);
+      mp3.play(); //播放 mp3这个音频对象
+    },
+    queryPushMessageStatus() {
+      queryPushMessageStatus().then((res) => {
+        if (res.code === 200) {
+          this.voiceList = res.data;
+        } 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,
+            });
+          }
+        }
+      );
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.queryPushMessageStatus();
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  // 生命周期 - 创建之前
+  beforeCreate() {},
+  // 生命周期 - 挂载之前
+  beforeMount() {},
+  // 生命周期 - 更新之前
+  beforeUpdate() {},
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+
+<style lang="scss" scoped  type="text/css">
+.model {
+  .title {
+    position: relative;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 22px;
+    color: #333333;
+    padding-left: 10px;
+    margin-top: 24px;
+    .tips {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      color: #999999;
+    }
+  }
+  .title::before {
+    width: 3px;
+    height: 16px;
+    background: rgba(252, 114, 0, 0.39);
+    border-radius: 2px;
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 0;
+  }
+  .list {
+    .item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: #ffffff;
+      margin-top: 10px;
+      padding: 16px 20px;
+      .left {
+        display: flex;
+        flex-direction: column;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 20px;
+        color: #000000;
+        .left-top {
+          display: flex;
+          align-items: center;
+          .voice-icon {
+            width: 15px;
+            height: 12px;
+            margin-right: 10px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/main.js

@@ -17,6 +17,7 @@ Vue.config.productionTip = false
 Vue.prototype.$get = get;
 Vue.prototype.$post = post;
 Vue.prototype.$postJson = postJson;
+Vue.prototype.$bus = new Vue();
 
 AmapVue.config.key = '5ae8644771ef9abf9cfb3ea23b1df6ca';
 Vue.use(AmapVue);

src/router/index.js

@@ -32,60 +32,114 @@ const router = new Router({
           component: () => import('../components/orderSearch.vue')
         },
         {
-          path: '/setUp/set',
-          name: 'set',
-          title: '外卖设置',
-          component: () => import('../components/set.vue')
+          path: '/manualCreate',
+          name: 'manualCreate',
+          title: '手动发单',
+          component: () => import('../components/manualCreate.vue')
         },
+        // {
+        //   path: '/setUp/set',
+        //   name: 'set',
+        //   title: '外卖设置',
+        //   component: () => import('../components/set.vue')
+        // },
+        // {
+        //   path: '/setUp/addressManagement',
+        //   name: 'addressManagement',
+        //   title: '常用地址',
+        //   component: () => import('../components/addressManagement.vue')
+        // },
+        // {
+        //   path: '/setUp/pictureManagement',
+        //   name: 'pictureManagement',
+        //   title: '图片管理',
+        //   component: () => import('../components/pictureManagement.vue')
+        // },
         {
-          path: '/setUp/addressManagement',
-          name: 'addressManagement',
-          title: '常用地址',
-          component: () => import('../components/addressManagement.vue')
+          path: '/shop/shopList',
+          name: 'shopList',
+          title: '我的店铺',
+          component: () => import('../components/shopCompoents/shopList.vue')
         },
         {
-          path: '/setUp/pictureManagement',
-          name: 'pictureManagement',
-          title: '图片管理',
-          component: () => import('../components/pictureManagement.vue')
+          path: '/platformAccount/index',
+          name: 'platformAccount',
+          title: '账号管理',
+          component: () => import('../components/platformAccount/index')
         },
         {
-          path: '/shopInfo/shopInfos',
-          name: 'shopInfos',
-          title: '门店管理',
-          component: () => import('../components/shopInfo.vue')
+          path: '/account/wallet',
+          name: 'wallet',
+          title: '我的钱包',
+          component: () => import('../components/accountCompoents/wallet.vue')
         },
         {
-          path: '/shopInfo/shopAccount',
-          name: 'shopAccount',
-          title: '我的账户',
-          component: () => import('../components/shopAccount.vue')
+          path: '/account/walletDetail',
+          name: 'walletDetail',
+          title: '收支明细',
+          component: () => import('../components/accountCompoents/shopAccount.vue')
         },
         {
-          path: '/manualCreate',
-          name: 'manualCreate',
-          title: '手动发单',
-          component: () => import('../components/manualCreate.vue')
+          path: '/account/coupon',
+          name: 'coupon',
+          title: '优惠券',
+          component: () => import('../components/accountCompoents/coupon.vue')
+        },
+
+        {
+          path: '/platform/bindTakeOut',
+          name: 'bindTakeOut',
+          title: '绑定外卖平台',
+          component: () => import('../components/shopCompoents/bindTakeOut.vue')
         },
         {
-          path: '/help',
-          name: 'help',
-          title: '帮助中心',
-          component: () => import('../components/help.vue')
+          path: '/platform/bindDelivery',
+          name: 'bindDelivery',
+          title: '绑定配送平台',
+          component: () => import('../components/shopCompoents/bindDelivery.vue')
         },
         {
-          path: '/download',
+          path: '/set/waimai',
+          name: 'waimai',
+          title: '外卖设置',
+          component: () => import('../components/waimai.vue')
+        },
+        {
+          path: '/set/system',
+          name: 'system',
+          title: '系统设置',
+          component: () => import('../components/system.vue')
+        },
+        {
+          path: '/help/commonProblem',
+          name: 'commonProblem',
+          title: '常见问题',
+          component: () => import('../components/help/help.vue')
+        },
+        {
+          path: '/help/customerService',
+          name: 'customerService',
+          title: '客服中心',
+          component: () => import('../components/help/customerService.vue')
+        },
+        {
+          path: '/help/download',
           name: 'download',
           title: '下载中心',
-          component: () => import('../components/downloadCenter.vue')
+          component: () => import('../components/help/downloadCenter.vue')
         },
         {
-          path: '/about',
+          path: '/help/feedback',
+          name: 'feedback',
+          title: '意见反馈',
+          component: () => import('../components/help/feedback.vue')
+        },
+        {
+          path: '/help/about',
           name: 'about',
           title: '关于我们',
-          component: () => import('../components/about.vue')
+          component: () => import('../components/help/about.vue')
         },
-
       ]
     },
     {

src/views/home.vue

@@ -2,12 +2,16 @@
   <el-container>
     <sidebar></sidebar>
     <el-container>
-      <el-header style="text-align: right;height: 80px;line-height: 80px;">
+      <el-header>
         <span @click="showMerchant" v-if="$store.state.userInfo.memberType === 1" class="header-button">成为商户</span>
-        <span @click="$router.push({
-          path: '/shopInfo/shopAccount'
-        })" class="header-button">充值中心</span>
-        <span @click="goPrinter" class="header-button">打印设置</span>
+        <div class="account" @click="goAccount">
+          <img src="../../static/image/head-account.png" alt="">
+          <div class="num">￥{{$store.state.userInfo.amount}}</div>
+        </div>
+        <div class="print" @click="goPrinter">
+          <img src="../../static/image/head-print.png" alt="">
+          <div class="num con">打印设置</div>
+        </div>
         <el-dropdown trigger="click">
           <span class="el-dropdown-link">
             <span style="cursor: pointer;">{{ userInfo.nickname }}</span>
@@ -65,6 +69,11 @@ export default {
   },
 
   methods: {
+    goAccount() {
+      this.$router.push({
+        name: "wallet",
+      });
+    },
     showMerchant() {
       this.$refs.merchantAdd.init(0);
     },
@@ -82,14 +91,11 @@ export default {
     },
     goPrinter() {
       this.$router.push({
-        path: "/shopInfo/shopInfos",
+        name: "waimai",
         params: {
-          tabNum: 3,
+          tabNum: 2,
         },
       });
-      if (this.$route.name === "shopInfos") {
-        bus.$emit("goPrinter");
-      }
     },
     loginOut() {
       this.$confirm("此操作将退出当前登录用户, 是否继续?", "提示", {
@@ -110,7 +116,10 @@ export default {
 </script>
 
 <style lang="scss" scoped="scoped">
-.el-header {
+/deep/.el-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   position: relative;
   width: 100%;
   height: 80px;
@@ -137,15 +146,27 @@ export default {
   margin-right: 40px;
 }
 
-.header-button {
-  font-size: 16px;
-  font-family: PingFang SC;
-  font-weight: 400;
-  color: #777777;
+.account,
+.print {
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
   cursor: pointer;
-  margin-right: 40px;
+  img {
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+  }
+  .num {
+    line-height: 25px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fc7200;
+  }
+  .con {
+    color: #333333;
+  }
 }
-
 .home-content {
   display: flex;