更新页面样式，增加退菜数量选择以及退款原因

src/views/table/table_list.vue

@@ -38,7 +38,12 @@
         >
           下载台桌码
         </el-button>
-        <el-button type="primary" icon="el-icon-download">下载店铺码</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-download"
+          @click="downloadShopCode"
+          >下载店铺码</el-button
+        >
       </div>
     </div>
     <div class="u-flex u-p-b-15 u-font-14">
@@ -233,7 +238,7 @@ import {
   tbShopTable,
 } from "@/api/table";
 import dayjs from "dayjs";
-
+import { downloadFile } from "@/utils/index";
 
 export default {
   components: {
@@ -255,12 +260,12 @@ export default {
       selTable: "", //当前选中的桌台
       areaMap: {},
       shopInfo: {},
-      timer:null
+      timer: null,
     };
   },
   beforeDestroy() {
     this.clearTimer();
-    console.log('beforeDestroy')
+    console.log("beforeDestroy");
   },
   mounted() {
     this.clearTimer();
@@ -270,7 +275,7 @@ export default {
   },
   filters: {
     formatTime(milliseconds) {
-      console.log(milliseconds)
+      console.log(milliseconds);
       if (!milliseconds) {
         return "";
       }
@@ -281,21 +286,37 @@ export default {
       const minutes = Math.floor(
         (milliseconds % (1000 * 60 * 60)) / (1000 * 60)
       );
-      return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${minutes + "分"
+      return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${
+        minutes + "分"
       }`;
     },
   },
   methods: {
-    clearTimer(){
-      console.log('clearTimer')
-      clearInterval(this.timer);
-      this.timer=null;
+    async downloadShopCode() {
+      try {
+        const link = document.createElement("a");
+        link.href = this.shopInfo.smallQrcode;
+        const fileName = this.shopInfo.shopName +"店铺码"+ ".png";
+        console.log(fileName)
+        link.setAttribute("download", fileName);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        this.$message.success("下载成功");
+      } catch (error) {
+        console.log(error);
+      }
     },
-    setTimter(time=60){
-      this.timer=setInterval(() => {
-        const showloading=false
-        this.tbShopTableGet(showloading)
-      }, time*1000);
+    clearTimer() {
+      console.log("clearTimer");
+      clearInterval(this.timer);
+      this.timer = null;
+    },
+    setTimter(time = 60) {
+      this.timer = setInterval(() => {
+        const showloading = false;
+        this.tbShopTableGet(showloading);
+      }, time * 1000);
     },
     //获取店铺信息
     async getShopInfo() {
@@ -372,9 +393,9 @@ export default {
           table_name: this.selTable.name,
           tableId: this.selTable.tableId,
           useType: this.selTable.useType,
-          maxCapacity:this.selTable.maxCapacity,
-          masterId:this.selTable.masterId,
-          orderId:this.selTable.orderId,
+          maxCapacity: this.selTable.maxCapacity,
+          masterId: this.selTable.masterId,
+          orderId: this.selTable.orderId,
           ...query,
         },
       });
@@ -406,7 +427,7 @@ export default {
       }
     },
     // 台桌列表
-    async tbShopTableGet(showloading=true) {
+    async tbShopTableGet(showloading = true) {
       this.loading = showloading;
       try {
         const { content, total } = await tbShopTableGet({