batch sale version

src/App.vue

@@ -97,13 +97,13 @@ export default {
 
       this.$utils.Socket = new WebSocket(`${this.$utils.ServerPrefix}/${device}`);
       this.$utils.Socket.onclose = () => this.$utils.Socket = null;
-      this.$utils.SockEventMap["_ERROR_"] = msg => alert(msg);
-      this.$utils.SockEventMap["locationResult"] = data => this._onLocationResult(data);
-      this.$utils.SockEventMap["wineResult"] = data => this._onWineResult(data);
-      this.$utils.SockEventMap["advResult"] = data => this._onAdvResult(data);
-      this.$utils.SockEventMap["runParamResult"] = data => this._onRunParamResult(data);
-      this.$utils.SockEventMap["initFinish"] = () => this._onInitFinish();
-      this.$utils.SockEventMap["openGate"] = data => this._onOpenGateCommand(data);
+      this.$utils.SockEventMap["_ERROR_"] = alert;
+      this.$utils.SockEventMap["locationResult"] = this._onLocationResult;
+      this.$utils.SockEventMap["wineResult"] = this._onWineResult;
+      this.$utils.SockEventMap["advResult"] = this._onAdvResult;
+      this.$utils.SockEventMap["runParamResult"] = this._onRunParamResult;
+      this.$utils.SockEventMap["initFinish"] = this._onInitFinish;
+      this.$utils.SockEventMap["openGate"] = this._onOpenGateCommand;
 
       this.$utils.Socket.onmessage = event => {
         let body = JSON.parse(event.data);
@@ -138,12 +138,8 @@ export default {
       data.close && this.pos_cancel();
     },
     _onOpenGateCommand(data) {
-      if (this.$refs.ListPage) {
-        this.$refs.ListPage.clear_adv_timer();
-      } else {
-        this.pageState = this.State.Show;
-        this.$refs.ListPage.clear_adv_timer();
-      }
+      if (this.pageState === this.State.Play) this.pageState = this.State.Show;
+      if (this.pageState === this.State.Show) this.$refs.ListPage.clear_adv_timer();
       this.wid = data.worker;
       this.pageState = data.kind;
     },
@@ -188,32 +184,12 @@ export default {
       };
       this.$utils.Socket.send(JSON.stringify(message));
     },
-    open_result(res) {
-      if (this.$utils.Socket === null) return alert("network error");
-      const message = {
-        event: "openResult",
-        data: {
-          wid: this.wid,
-          result: res
-        }
-      };
-      this.$utils.Socket.send(JSON.stringify(message));
-    },
-    work_finish(name) {
-      if (this.$utils.Socket === null) return alert("network error");
-      const message = {
-        event: name,
-        data: this.wid
-      };
-      this.$utils.Socket.send(JSON.stringify(message));
-      this.show_wine();
-    }
   },
   mounted() {
-    // this.$utils.Register("startApp", this._start);
-    // this.$utils.Android("onWebMounted");
+    this.$utils.Register("startApp", this._start);
+    this.$utils.Android("onWebMounted");
     // below for pure vue:
-    this._start("e396b72a1c80741b", "v2023.10.26");
+    // this._start("e396b72a1c80741b", "v2023.11.01");
   }
 }
 </script>

src/components/AuthFixedLayer.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="auth">
+    <div class="result">
+      <div class="tip">请输入授权码</div>
+      <div class="code-box">
+        <div v-for="i in 6" :class="{code: true, active: is_act(i)}" :key="i">{{ codeList[i - 1] }}</div>
+      </div>
+    </div>
+    <NumberKeyboard @press="press" @cancel="cancel" @delete="delete_back"/>
+  </div>
+</template>
+
+<script>
+import NumberKeyboard from "@/components/NumberKeyboard";
+
+export default {
+  name: "AuthFixedLayer",
+  components: {NumberKeyboard},
+  data() {
+    return {
+      codeIndex: -1,
+      codeList: new Array(6).fill("")
+    }
+  },
+  methods: {
+    reset() {
+      this.codeList = new Array(6).fill("");
+      this.codeIndex = -1;
+    },
+    is_act(index) {
+      return this.codeIndex === index - 2;
+    },
+    press(num) {
+      if (this.codeIndex >= 5) return;
+      this.codeList[++this.codeIndex] = num;
+      if (this.codeIndex === 5) {
+        this.$emit("finish", this.codeList.join(""));
+      }
+    },
+    cancel() {
+      this.$emit("cancel");
+    },
+    delete_back() {
+      if (this.codeIndex < 0) return;
+      this.codeList[this.codeIndex--] = "";
+    },
+  }
+}
+</script>
+
+<style scoped>
+.auth {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: whitesmoke;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.result {
+  width: 400px;
+  height: 180px;
+  border: 1px solid gray;
+  background-color: white;
+  border-radius: 4px;
+  box-sizing: border-box;
+  padding: 30px 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-top: 100px;
+}
+
+.tip {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.code-box {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.code {
+  width: 45px;
+  height: 45px;
+  font-size: 1.5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid lightgray;
+  border-radius: 2px;
+  box-shadow: 0 0 2px dimgray;
+}
+
+.active {
+  box-shadow: 0 0 2px skyblue !important;
+}
+</style>

src/components/NumberKeyboard.vue

@@ -30,8 +30,6 @@ export default {
 <style scoped>
 .keyboard {
   width: 100%;
-  box-sizing: border-box;
-  padding: 10px 0;
   background-color: rgba(67, 67, 67, 0.2);
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
@@ -40,18 +38,19 @@ export default {
 }
 
 .keys {
-  width: 260px;
+  width: 400px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 4px;
   background-color: white;
+  box-sizing: border-box;
+  padding: 4px 8px 0;
 }
 
 .key {
-  width: 80px;
-  height: 80px;
+  width: 120px;
+  height: 75px;
   display: flex;
   cursor: pointer;
   margin-bottom: 4px;
@@ -65,7 +64,7 @@ export default {
 }
 
 .cancel {
-  color: black;
+  color: #007BFF;
 }
 
 .delete {

src/pages/DeviceFixPage.vue

@@ -1,26 +1,16 @@
 <template>
   <div class="background">
     <h1>设备维修中</h1>
-    <div class="finish" @click="finish">维 修 完 成</div>
-    <div class="auth" v-if="!authed">
-      <div class="result">
-        <div class="tip">请输入授权码</div>
-        <div class="code-box">
-          <div v-for="i in 6" :class="{code: true, active: is_act(i)}" :key="i">{{ codeList[i - 1] }}</div>
-        </div>
-      </div>
-      <NumberKeyboard @press="press" @cancel="cancel" @delete="delete_back"/>
-    </div>
+    <div class="finish" @click="finish">维修完成</div>
+    <AuthFixedLayer v-if="!authed" ref="auth" @finish="try_code" @cancel="cancel"/>
   </div>
 </template>
 
 <script>
-import NumberKeyboard from "@/components/NumberKeyboard";
-
-let codeIndex = -1;
+import AuthFixedLayer from "@/components/AuthFixedLayer";
 export default {
   name: "DeviceFixPage",
-  components: {NumberKeyboard},
+  components: {AuthFixedLayer},
   props: {
     wid: {
       type: String,
@@ -30,8 +20,7 @@ export default {
   data() {
     return {
       authed: false,
-      detail: [],
-      codeList: new Array(6).fill("")
+      detail: []
     }
   },
   methods: {
@@ -47,51 +36,45 @@ export default {
       this.$utils.Socket.send(JSON.stringify(message));
       this.$emit("to_wine");
     },
-    is_act(index) {
-      return codeIndex === index - 2;
-    },
-    press(num) {
-      if (codeIndex === 5) return;
-      this.codeList[++codeIndex] = num;
-      if (codeIndex === 5) {
-        let code = this.codeList.join("");
-        if (this.$utils.Socket === null) return alert("network error");
-        const message = {
-          event: "checkAuthCode",
-          data: {
-            type: "Fixing",
-            wid: this.wid,
-            code: code
-          }
-        };
-        this.$utils.Socket.send(JSON.stringify(message));
-      }
+    try_code(code) {
+      if (this.$utils.Socket === null) return alert("network error");
+      const message = {
+        event: "checkAuthCode",
+        data: {
+          type: "Fixing",
+          wid: this.wid,
+          code: code
+        }
+      };
+      this.$utils.Socket.send(JSON.stringify(message));
     },
     cancel() {
       this.$emit("to_wine");
     },
-    delete_back() {
-      if (codeIndex < 0) return;
-      this.codeList[codeIndex--] = "";
-    },
-    _onFixAuthed() {
-      setTimeout(() => {
-        if (this.$utils.Socket === null) return alert("network error");
-        const message = {
-          event: "openResult",
-          data: {
-            type: "Fixing",
-            wid: this.wid,
-            result: true
-          }
-        };
-        this.$utils.Socket.send(JSON.stringify(message));
-        this.authed = true;
-      }, 1000);
+    _onAuthCodeResult(data) {
+      if (!data.ok) {
+        alert("auth failed");
+        this.$refs.auth.reset();
+      } else {
+        alert("认证成功，正在开门 ...");
+        setTimeout(() => {
+          if (this.$utils.Socket === null) return alert("network error");
+          const message = {
+            event: "openResult",
+            data: {
+              type: "Fixing",
+              wid: this.wid,
+              result: true
+            }
+          };
+          this.$utils.Socket.send(JSON.stringify(message));
+          this.authed = true;
+        }, 1000);
+      }
     }
   },
   mounted() {
-    this.$utils.SockEventMap["fixAuthed"] = this._onFixAuthed;
+    this.$utils.SockEventMap["authCodeResult"] = this._onAuthCodeResult;
   }
 }
 </script>
@@ -99,69 +82,20 @@ export default {
 <style scoped>
 .background {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
 .finish {
-  width: 7em;
-  height: 1.5em;
   display: flex;
+  border-radius: 4px;
   justify-content: center;
   align-items: center;
   border: 1px solid deepskyblue;
   color: deepskyblue;
-  font-weight: bold;
+  font-size: 1.1em;
   cursor: pointer;
-}
-
-.auth {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: rgba(55, 55, 55, 0.25);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.result {
-  width: 300px;
-  height: 200px;
-  border: 1px solid gray;
-  background-color: white;
-  border-radius: 4px;
-  box-sizing: border-box;
-  padding: 10px 20px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.tip {
-  font-size: 1.2em;
-  font-weight: bold;
-}
-
-.code-box {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.code {
-  width: 30px;
-  height: 30px;
-  font-size: 1.5em;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid lightgray;
-  border-radius: 2px;
-  box-shadow: 0 0 2px dimgray;
+  padding: 4px 16px;
 }
 </style>

src/pages/WineChangePage.vue

@@ -1,52 +1,39 @@
 <template>
   <div class="background">
+    <div class="title">
+      <div class="title-text">换酒详情</div>
+      <div class="finish" @click="finish">完 成 换 酒</div>
+    </div>
     <table>
-      <caption>
-        <span>换酒详情</span>
-        <div class="finish" @click="finish">完 成 换 酒</div>
-      </caption>
       <thead>
       <tr>
         <th class="col-1">仓号</th>
-        <th class="col-2">当前信息 [ID/名称/余量(ML)]</th>
-        <th class="col-3">换酒目标 [ID/名称/余量(ML)]</th>
+        <th class="col-2" colspan="2">当前信息</th>
+        <th class="col-3" colspan="2">换酒目标</th>
       </tr>
       </thead>
       <tbody>
-      <tr v-for="(info, index) in detail" :key="index">
-        <td>{{ info.cell }}</td>
-        <td class="info-box">
-          <span>{{ info.old.id }}</span>
-          <span>{{ info.old.name }}</span>
-          <span>{{ info.old.remain }}</span>
-        </td>
-        <td class="info-box">
-          <span>{{ info.new.id }}</span>
-          <span>{{ info.new.name }}</span>
-          <span>{{ info.new.remain }}</span>
+      <tr v-for="r in detail.length * 3" :key="r" class="row">
+        <td v-if="r % 3 === 1" rowspan="3" class="cell">
+          {{ detail[Math.floor((r - 1) / 3)].cell }}
         </td>
+        <td class="key">{{ name_of(r) }}</td>
+        <td class="value">{{ old_of(r) }}</td>
+        <td class="key">⇒</td>
+        <td class="value">{{ new_of(r) }}</td>
       </tr>
       </tbody>
     </table>
-    <div class="auth" v-if="!authed">
-      <div class="result">
-        <div class="tip">请输入授权码</div>
-        <div class="code-box">
-          <div v-for="i in 6" :class="{code: true, active: is_act(i)}" :key="i">{{ codeList[i - 1] }}</div>
-        </div>
-      </div>
-      <NumberKeyboard @press="press" @cancel="cancel" @delete="delete_back"/>
-    </div>
+    <AuthFixedLayer v-if="!authed" ref="auth" @finish="try_code" @cancel="cancel"/>
   </div>
 </template>
 
 <script>
-import NumberKeyboard from "@/components/NumberKeyboard";
+import AuthFixedLayer from "@/components/AuthFixedLayer";
 
-let codeIndex = -1;
 export default {
   name: "WineChangePage",
-  components: {NumberKeyboard},
+  components: {AuthFixedLayer},
   props: {
     wid: {
       type: String,
@@ -61,6 +48,19 @@ export default {
     }
   },
   methods: {
+    name_of(r) {
+      if (r % 3 === 1) return "ID";
+      if (r % 3 === 2) return "名称";
+      return "余量";
+    },
+    old_of(r) {
+      let index = Math.floor((r - 1) / 3), left = r % 3, key = left === 1 ? "id" : (left === 2 ? "name" : "remain");
+      return this.detail[index].old[key];
+    },
+    new_of(r) {
+      let index = Math.floor((r - 1) / 3), left = r % 3, key = left === 1 ? "id" : (left === 2 ? "name" : "remain");
+      return this.detail[index].new[key];
+    },
     finish() {
       if (this.$utils.Socket === null) return alert("network error");
       const message = {
@@ -73,51 +73,46 @@ export default {
       this.$utils.Socket.send(JSON.stringify(message));
       this.$emit("to_wine");
     },
-    is_act(index) {
-      return codeIndex === index - 2;
-    },
-    press(num) {
-      if (codeIndex === 5) return;
-      this.codeList[++codeIndex] = num;
-      if (codeIndex === 5) {
-        let code = this.codeList.join("");
-        if (this.$utils.Socket === null) return alert("network error");
-        const message = {
-          event: "checkAuthCode",
-          data: {
-            type: "Changing",
-            wid: this.wid,
-            code: code
-          }
-        };
-        this.$utils.Socket.send(JSON.stringify(message));
-      }
+    try_code(code) {
+      if (this.$utils.Socket === null) return alert("network error");
+      const message = {
+        event: "checkAuthCode",
+        data: {
+          type: "Changing",
+          wid: this.wid,
+          code: code
+        }
+      };
+      this.$utils.Socket.send(JSON.stringify(message));
     },
     cancel() {
       this.$emit("to_wine");
     },
-    delete_back() {
-      if (codeIndex < 0) return;
-      this.codeList[codeIndex--] = "";
-    },
-    _onChangeAuthed() {
-      setTimeout(() => {
-        if (this.$utils.Socket === null) return alert("network error");
-        const message = {
-          event: "openResult",
-          data: {
-            type: "Changing",
-            wid: this.wid,
-            result: true
-          }
-        };
-        this.$utils.Socket.send(JSON.stringify(message));
-        this.authed = true;
-      }, 1000);
+    _onAuthCodeResult(data) {
+      if (!data.ok) {
+        alert("auth failed");
+        this.$refs.auth.reset();
+      } else {
+        alert("认证成功，正在开门 ...");
+        this.detail = data.work;
+        setTimeout(() => {
+          if (this.$utils.Socket === null) return alert("network error");
+          const message = {
+            event: "openResult",
+            data: {
+              type: "Changing",
+              wid: this.wid,
+              result: true
+            }
+          };
+          this.$utils.Socket.send(JSON.stringify(message));
+          this.authed = true;
+        }, 1000);
+      }
     }
   },
   mounted() {
-    this.$utils.SockEventMap["changeAuthed"] = this._onChangeAuthed;
+    this.$utils.SockEventMap["authCodeResult"] = this._onAuthCodeResult;
   }
 }
 </script>
@@ -125,105 +120,70 @@ export default {
 <style scoped>
 .background {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
-table {
+.title {
   width: 80%;
-  border: none;
-  background-color: aqua;
-}
-
-th, td {
-  background-color: white;
-}
-
-caption {
-  width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 10px;
 }
 
-caption > span {
+.title-text {
   font-size: 1.2em;
   font-weight: bold;
 }
 
 .finish {
-  width: 7em;
-  height: 1.5em;
   display: flex;
+  border-radius: 4px;
   justify-content: center;
   align-items: center;
   border: 1px solid deepskyblue;
   color: deepskyblue;
-  font-weight: bold;
+  font-size: 1.1em;
   cursor: pointer;
+  padding: 4px 16px;
 }
 
-.col-1 {
-  width: 2em;
+table {
+  width: 80%;
+  border: none;
+  background-color: aqua;
 }
 
-.col-2, .col-3 {
-  width: calc((100% - 2em) / 2);
+th, td {
+  background-color: white;
+  text-align: center;
 }
 
-.info-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.col-1 {
+  width: 4em;
 }
 
-.auth {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: rgba(55, 55, 55, 0.25);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
+.col-2, .col-3 {
+  width: calc((100% - 4em) / 2);
 }
 
-.result {
-  width: 300px;
-  height: 200px;
-  border: 1px solid gray;
-  background-color: white;
-  border-radius: 4px;
-  box-sizing: border-box;
-  padding: 10px 20px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+.row {
+  height: 2em;
 }
 
-.tip {
-  font-size: 1.2em;
+.cell {
   font-weight: bold;
 }
 
-.code-box {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.key {
+  width: 6em;
+  font-weight: bold;
 }
 
-.code {
-  width: 30px;
-  height: 30px;
-  font-size: 1.5em;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid lightgray;
-  border-radius: 2px;
-  box-shadow: 0 0 2px dimgray;
+.value {
+  text-align: left;
+  text-indent: 2em;
 }
 </style>

src/pages/WineListPage.vue

@@ -14,9 +14,9 @@
         <div class="wine-card-line">
           <div :style="`color: ${color_of_total(index)};`">{{ total_in_string(index) }}</div>
           <div class="sub-add-indicator">
-            <img v-if="order[index][0] > 0" src="/icon/sub.svg" class="sub-add-button" @click="try_sub(index)" alt=".">
+            <img v-if="order[index][0] > 0" :src="get_icon('sub')" class="sub-add-button" @click="try_sub(index)" alt=".">
             <div v-if="order[index][0] > 0" class="sub-add-result">{{ order[index][0] }}</div>
-            <img src="/icon/add.svg" class="sub-add-button" @click="try_add(index)" alt=".">
+            <img :src="get_icon('add')" class="sub-add-button" @click="try_add(index)" alt=".">
           </div>
         </div>
       </div>
@@ -34,18 +34,18 @@
             共计：<span class="green">{{ (order[index_of(wine.id)][1] / 100).toFixed(2) }}</span> 元
           </div>
           <div class="right">
-            <img @click="remove_one(index_of(wine.id))" class="delete" src="/icon/delete.svg" alt="delete">
+            <img @click="remove_one(index_of(wine.id))" class="delete" :src="get_icon('delete')" alt="delete">
             <div class="sub-add-indicator">
-              <img src="/icon/sub.svg" class="sub-add-button" @click="try_sub(index_of(wine.id))" alt="sub">
+              <img :src="get_icon('sub')" class="sub-add-button" @click="try_sub(index_of(wine.id))" alt="sub">
               <div class="sub-add-result">{{ order[index_of(wine.id)][0] }}</div>
-              <img src="/icon/add.svg" class="sub-add-button" @click="try_add(index_of(wine.id))" alt="add">
+              <img :src="get_icon('add')" class="sub-add-button" @click="try_add(index_of(wine.id))" alt="add">
             </div>
           </div>
         </div>
       </div>
       <div class="bar">
         <div class="cart">
-          <img :class="cls_of_icon" @click="toggle_cart" src="/icon/cart.svg" alt="cart">
+          <img :class="cls_of_icon" @click="toggle_cart" :src="get_icon('cart')" alt="cart">
           <div v-if="count_of_chosen === 0" class="cart-text gray">请 选 购</div>
           <div v-else class="cart-text">
             已选：<span class="green">{{ count_of_chosen }}</span> 件
@@ -82,6 +82,9 @@ export default {
     }
   },
   methods: {
+    get_icon(name) {
+      return `${process.env.BASE_URL}icon/${name}.svg`;
+    },
     Enter() {
       if (!this.$utils.IsStatusKept()) this.order = Matrix(4, 2);
       this.reset_timer();

src/pages/WineOutPage.vue

@@ -75,6 +75,9 @@ export default {
     }
   },
   methods: {
+    get_icon(name) {
+      return `${process.env.BASE_URL}icon/${name}.svg`;
+    },
     Enter() {
       this.index = -1;
       this.volume = 0;
@@ -83,7 +86,7 @@ export default {
         title: "温馨提示",
         subtitle: "请将容器静置于出酒口正下方",
         color: "red",
-        icon: "/icon/cup.svg",
+        icon: this.get_icon("cup"),
         btn: {need: false, text: "", handler: null}
       }
       this.$utils.Android("isCupProperlyPlaced");
@@ -104,7 +107,7 @@ export default {
         title: "发生故障",
         subtitle: reason,
         color: "red",
-        icon: "/icon/error.svg",
+        icon: this.get_icon("error"),
         btn: {
           need: true, text: "确 认", handler: () => {
             this.mask.show = false;
@@ -170,7 +173,7 @@ export default {
         title: "温馨提示",
         subtitle: "所有酒品已全部取出，请拿好您的酒品",
         color: "deepskyblue",
-        icon: "/icon/finish.svg",
+        icon: this.get_icon("finish"),
         btn: {need: true, text: `${text} (${sec}s)`, handler: toList}
       }
     },
@@ -180,7 +183,7 @@ export default {
         title: "温馨提示",
         subtitle: `第 [${this.index + 1}/${this.order.length}] 款酒品已取完，请及时更换容器`,
         color: "red",
-        icon: "icon/change.svg",
+        icon: this.get_icon("change"),
         btn: {need: false, text: "", handler: null}
       }
       this.$utils.Android("isCupProperlyPlaced");

src/pages/WinePayPage.vue

@@ -3,13 +3,13 @@
     <div class="box">
       <div class="header">
         <div class="back" @click="to_list">
-          <img src="/icon/back.svg" alt="">
+          <img :src="get_icon('back')" alt="">
           <span>返 回</span>
         </div>
         <div class="time">{{ timeLeft }}</div>
       </div>
-      <QrcodeLoading class="qr-loading" v-if="loading" :size="230" @click="to_out"/>
-      <img v-else class="qrcode" :src="qrcode" alt="qrcode">
+      <QrcodeLoading class="qr-loading" v-if="loading" :size="230"/>
+      <img v-else class="qrcode" :src="qrcode" @click="to_out" alt="qrcode">
       <div class="tip">{{ tipMsg }}</div>
     </div>
   </div>
@@ -36,6 +36,9 @@ export default {
     }
   },
   methods: {
+    get_icon(name) {
+      return `${process.env.BASE_URL}icon/${name}.svg`;
+    },
     Enter(order) {
       this.time = this.$utils.TimeOfPay;
       this.loading = true;
@@ -82,9 +85,9 @@ export default {
     }
   },
   mounted() {
-    this.$utils.SockEventMap["qrcodeOkayed"] = data => this._onQrcodeOkayed(data);
-    this.$utils.SockEventMap["qrcodeScanned"] = data => this._onQrcodeScanned(data);
-    this.$utils.SockEventMap["orderPayed"] = data => this._onOrderPayed(data);
+    this.$utils.SockEventMap["qrcodeOkayed"] = this._onQrcodeOkayed;
+    this.$utils.SockEventMap["qrcodeScanned"] = this._onQrcodeScanned;
+    this.$utils.SockEventMap["orderPayed"] = this._onOrderPayed;
   },
   computed: {
     timeLeft() {

src/utils/lib.js

@@ -1,8 +1,8 @@
 import JSEncrypt from "jsencrypt";
 
 let EncryptHandler = new JSEncrypt(), TimeOfList = 6, TimeOfPay = 300, Socket = null, SockEventMap = {},
-    ThresholdOfWarn = 3000, ThresholdOfDanger = 1000, WaitCountDown = 3;
-const KeepStatusKey = "StatusKeepNeed", ServerPrefix = "ws://192.168.1.6:3080/seller/socket";
+    ThresholdOfWarn = 3000, ThresholdOfDanger = 1000, WaitCountDown = 3, PathPrefix = "/";
+const KeepStatusKey = "StatusKeepNeed", ServerPrefix = "wss://wine.ifarmcloud.com/api/seller/socket";
 export const Android = (func, ...args) => {
         let handler = window.android;
         if (handler === undefined) return console.warn("no android handler");
@@ -17,7 +17,7 @@ export const Android = (func, ...args) => {
     Volume2Weight = (v, d) => Math.floor(v * d / 50), Weight2Volume = (w, d) => (50 * w / d).toFixed(2);
 
 export default {
-    EncryptHandler, TimeOfList, TimeOfPay, ThresholdOfWarn, ThresholdOfDanger, WaitCountDown,
+    EncryptHandler, TimeOfList, TimeOfPay, ThresholdOfWarn, ThresholdOfDanger, WaitCountDown, PathPrefix,
     ServerPrefix, Socket, SockEventMap,
     Android, Register, Matrix,
     StatusNeedKeep, StatusDontKeep, IsStatusKept, Volume2Weight, Weight2Volume

vue.config.js

@@ -1,5 +1,6 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
+  publicPath: process.env.NODE_ENV === "production" ? "/seller/" : "/",
   transpileDependencies: true,
   devServer: {
     port: 3060