2021.7.29

src/components/QrCode/index.vue

@@ -3,7 +3,7 @@
     <div style="color: #97a8be; font-size: 12px; text-align: center">
       点击图片进行下载
     </div>
-    <div @click="downloadImg()" style="text-align: center" id="qrDiv">
+    <div @click="downloadImg()" style="text-align: center" id="qrDiv_QrCode">
       <vue-qr :text="text" :margin="0" :size="400" class="d-block mx-auto" />
       <slot></slot>
     </div>
@@ -85,7 +85,11 @@ export default {
   methods: {
     downloadImg() {
       try {
-        html2canvas(document.getElementById("qrDiv"), {
+        window.pageYoffset = 0;
+        document.documentElement.scrollTop = 0;
+        document.body.scrollTop = 0;
+
+        html2canvas(document.getElementById("qrDiv_QrCode"), {
           allowTaint: false,
         }).then((canvas) => {
           const a = document.createElement("a");

src/views/label/Label_AddLabel.vue

@@ -23,7 +23,7 @@
       </div>
       <div style="color: red; font-size: 12px">
         <span style="display: inline-block; width: 20px"> </span>
-        3、标签码用于给用户扫码使用，从而让用户执行该标签码对应标签的优惠，实现灵活处理。您还可以配置用户扫码后是否强制拉入对应的标签，这样就可以实现用户长期留在此标签，用户下次不必扫标签码即可享受标签优惠。
+        3、标签码用于给用户扫码使用，从而让用户享受对应的标签优惠，实现灵活处理，方便快捷。您还可以配置是否强制拉用户进入标签，实现用户长期留在此标签。
       </div>
     </div>
 
@@ -122,7 +122,7 @@
     </el-form>
 
     <el-dialog
-      :visible.sync="exportQrDialog"
+      :visible.sync="selectQrDialog"
       width="700px"
       append-to-body
       title="选择导出标签"
@@ -139,49 +139,79 @@
           active-value="1"
           inactive-value="0"
           @change="handleStatusChange"
-        ></el-switch><br/>
-        当前设置：{{exportLabelQr.isAddLabel == '1' ? "支付后强拉至此标签，下次扫员工码和站点码都可以实现此标签优惠~":"支付后不强拉到此标签，下次想再享受此标签优惠需要再次扫此标签码~"}}
-        <hr />
-        <h5>总标签码</h5>
-        <div>
-          用户可以先扫描<span style="color: red; font-weight: bold"
-            > 总标签码</span
-          >，再让用户扫描
-          <span style="color: red; font-weight: bold"
-            >{{ personnelList.length == 1 ? '站点码': '员工码' }}</span
-          >
-          ，即可实现标签优惠。
-        </div>
-        <div>
-          此码<b>适用所有的加油员</b>，不过需要<b>用户扫码两次</b>~
-        </div>
-        <div class="btn btn-success mt-3">导出【总标签码】</div>
+        ></el-switch
+        ><br />
+        当前设置：{{
+          exportLabelQr.isAddLabel == "1"
+            ? "支付后强拉至此标签，下次扫员工码和站点码都可以实现此标签优惠~"
+            : "支付后不强拉到此标签，下次想再享受此标签优惠需要再次扫此标签码~"
+        }}
         <hr />
-        <h5>员工标签码</h5>
-        <div>
-          用户可以一次性扫描<span style="color: red; font-weight: bold"
-            > 员工标签码</span
-          >，实现标签优惠。
+        <div v-if="personnelList.length != 1">
+          <h5>总标签码</h5>
+          <div>
+            用户可以先扫描<span style="color: red; font-weight: bold">
+              总标签码</span
+            >，再让用户扫描
+            <span style="color: red; font-weight: bold">{{
+              personnelList.length == 1 ? "站点码" : "员工码"
+            }}</span>
+            ，即可实现标签优惠。
+          </div>
+          <div>此码<b>适用所有的加油员</b>，不过需要<b>用户扫码两次</b>~</div>
+          <div class="btn btn-success mt-3" @click="exportSumLabel">导出【总标签码】</div>
+          <hr />
         </div>
         <div>
-          此码是<b>一个加油员一个标签码</b>，用户只需要<b>扫码一次</b>。
-        </div>
-        <div v-if="personnelList.length==1">
-          <h5 style="color: red">您的站点<b>只有一个加油员</b>，请优先使用此码~</h5>
-        </div>
-        <div v-for="emp in personnelList" :key="emp.personnelId">
-          <div class="btn btn-primary mt-3" >导出{{emp.personnelName}}的【员工标签码】</div>
+          <h5>员工标签码</h5>
+          <div>
+            用户可以一次性扫描<span style="color: red; font-weight: bold">
+              员工标签码</span
+            >，实现标签优惠。
+          </div>
+          <div>
+            此码是<b>一个加油员一个标签码</b>，用户只需要<b>扫码一次</b>。
+          </div>
+          <div v-if="personnelList.length == 1">
+            <h5 style="color: red">
+              您的站点目前<b>仅有一个加油员</b>，请优先使用此码~
+            </h5>
+          </div>
+          <div v-for="emp in personnelList" :key="emp.personnelId">
+            <div class="btn btn-primary mt-3" @click="exportEmployeeLabel(emp)">
+              导出{{ emp.personnelName }}的【员工标签码】
+            </div>
+          </div>
+          <br />
         </div>
-        <br />
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="exportQrDialog"
+      width="600px"
+      append-to-body
+      title="导出标签"
+    >
+      <div>
+        <qr :text="currentExport.text" @downloadImg="downloadImg" :name="currentExport.type==1 ? '员工标签码':'总标签码'">
+          <div v-if="currentExport.type==1">员工标签码：{{this.$store.state.user.deptName}}-{{currentExport.name}}-{{ currentExport.labelName }}</div>
+          <div v-if="currentExport.type==0">总标签码：{{this.$store.state.user.deptName}}-{{ currentExport.labelName }}</div>
+        </qr>
       </div>
     </el-dialog>
   </div>
 </template>
 <script>
-import { sysDeptDemoList, addlabel, selectLabel, updateLabelRule } from "@/api/label/label";
-import vueQr from "vue-qr";
-import html2canvas from "html2canvas";
-import {listPersonnel} from "@/api/station/personnel";
+import {
+  sysDeptDemoList,
+  addlabel,
+  selectLabel,
+  updateLabelRule,
+} from "@/api/label/label";
+import qr from "@/components/QrCode";
+import { listPersonnel } from "@/api/station/personnel";
+import Base64 from "@/utils/base64";
 
 export default {
   name: "Label_AddLabel",
@@ -200,38 +230,49 @@ export default {
       editable: true,
       tempForm: undefined,
       pageStatus: 0,
+      selectQrDialog: false,
       exportQrDialog: false,
-      exportLabelQr:{},
-      exportEmployeeQr:{},
-      personnelList:[],
+      exportLabelQr: {},
+      exportEmployeeQr: {},
+      personnelList: [],
+      currentExport:{
+        name:'李哈哈',
+        type:1, // 0 总标签码 1 员工标签码
+        text:'',
+        labelName:'',
+        labelId:'',
+      },
+      base:null
     };
   },
-  components: {
-    vueQr,
-  },
   created() {
     this.init();
   },
+  components: {
+    qr,
+  },
   methods: {
     init() {
       this.setPageStatus();
       this.getList();
       this.getEmployeeList();
+      this.base = new Base64();
     },
     getEmployeeList() {
       listPersonnel({
         pageNum: 1,
-        pageSize: 1000
-      }).then((res) => {
-        if(res.code == 200){
-          this.personnelList = res.rows;
-          console.log('personnelList',this.personnelList)
-        }else{
-          throw new Error("");
-        }
-      }).catch((err)=>{
-        this.msgError("加载员工列表出错了~")
-      });
+        pageSize: 1000,
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            this.personnelList = res.rows;
+          } else {
+            throw new Error("");
+          }
+        })
+        .catch((err) => {
+          this.msgError("加载员工列表出错了~");
+        });
     },
     setPageStatus() {
       this.queryPageStatus([2]).then((res) => {
@@ -324,16 +365,15 @@ export default {
     },
     exportPayCode(label) {
       this.exportLabelQr = label;
-      console.log(this.exportLabelQr);
-      this.exportQrDialog = true;
-      
+      this.currentExport.labelName = label.labelName;
+      this.currentExport.labelId = label.id;
+      this.selectQrDialog = true;
     },
     downloadImg() {
       html2canvas(document.getElementById("qrDiv"), { allowTaint: true }).then(
         (canvas) => {
           const a = document.createElement("a");
           const event = new MouseEvent("click");
-          console.log();
           a.download = "标签支付码";
           a.href = canvas.toDataURL();
           a.dispatchEvent(event);
@@ -349,21 +389,44 @@ export default {
       // a.dispatchEvent(event)
     },
     handleStatusChange(e) {
-      const old = this.exportLabelQr.isAddLabel
+      const old = this.exportLabelQr.isAddLabel;
       updateLabelRule({
-        id:this.exportLabelQr.id,
-        isAddLabel:e
-      }).then((res)=>{
-        if(res.code == 200){
-          this.msgSuccess("恭喜你，修改成功了~")
-        }else{
-          throw new Error("");
-        }
-      }).catch((err)=>{
-          this.exportLabelQr.isAddLabel =  old
-          this.msgError("抱歉，修改失败了，请刷新网页重试~")
+        id: this.exportLabelQr.id,
+        isAddLabel: e,
       })
+        .then((res) => {
+          if (res.code == 200) {
+            this.msgSuccess("恭喜你，修改成功了~");
+          } else {
+            throw new Error("");
+          }
+        })
+        .catch((err) => {
+          this.exportLabelQr.isAddLabel = old;
+          this.msgError("抱歉，修改失败了，请刷新网页重试~");
+        });
+    },
+    downloadImg(){
+      this.msgSuccess("亲，导出成功了~")
     },
+    exportEmployeeLabel(emp){
+      this.currentExport.name = emp.personnelName;
+      this.currentExport.type = 1;
+
+      const encodeStr = "e" + emp.personnelId + "/l" + this.currentExport.labelId + "/";
+      const encodedStr = this.base.encode(encodeStr);
+      const trimEqualStr = encodedStr.replace(/={1,}$/g, "");
+      this.currentExport.text = "https://goto.huijy.net/" + this.deptId + "/" + trimEqualStr;
+      this.exportQrDialog = true;
+    },
+    exportSumLabel(){
+      const encodeStr =  "l" + this.currentExport.labelId + "/";
+      const encodedStr = this.base.encode(encodeStr);
+      const trimEqualStr = encodedStr.replace(/={1,}$/g, "");
+      this.currentExport.text = "https://goto.huijy.net/" + this.deptId + "/" + trimEqualStr;
+      this.currentExport.type = 0
+      this.exportQrDialog = true;
+    }
   },
 };
 </script>

src/views/station/Station_Employee.vue

@@ -181,7 +181,7 @@
         </div>
 
         <div class="mt-2 text-secondary">
-          如果您对上面的内容不够了解，请联系上级代理来辅助设置。
+          如果您对上面的内容不够了解，请联系运营人员来辅助设置。
         </div>
       </div>
       <div class="m-2" v-else-if="personnelList.length == 2">
@@ -200,7 +200,7 @@
         </div>
 
         <div class="mt-2 text-secondary">
-          如果您对上面的内容不够了解，请联系上级代理来辅助设置。
+          如果您对上面的内容不够了解，请联系运营人员来辅助设置。
         </div>
       </div>
 
@@ -260,7 +260,6 @@ import {
 import { stationinfo, listGun } from "@/api/station/gun";
 import { getDept } from "@/api/system/dept";
 import Base64 from "@/utils/base64";
-import vueQr from "vue-qr";
 import qr from "@/components/QrCode";
 
 export default {
@@ -312,7 +311,6 @@ export default {
     };
   },
   components: {
-    vueQr,
     qr,
   },
   created() {
@@ -493,7 +491,6 @@ export default {
       const encodeStr = "e" + row.personnelId + "/";
       const encodedStr = base.encode(encodeStr);
       const trimEqualStr = encodedStr.replace(/={1,}$/g, "");
-      console.log(base.decode(trimEqualStr));
       this.qrStr = "https://goto.huijy.net/" + this.deptId + "/" + trimEqualStr;
       this.exportQrDialog = true;
     },