静态标签码页面

src/api/label/label.js

@@ -154,4 +154,13 @@ export function getOilNameList(data) {
     method: 'get',
     params: data
   })
-}
+}
+
+// 修改标签
+export function updateLabelRule(data) {
+    return request({
+      url: '/label/rule',
+      method: 'put',
+      data: data
+    })
+  }

src/views/label/Label_AddLabel.vue

@@ -21,6 +21,10 @@
         <span style="display: inline-block; width: 20px"> </span>
         2、标签的优先级高于营销方案。所以将用户加入标签后，此用户将优先执行标签的优惠规则，不会再执行营销方案。
       </div>
+      <div style="color: red; font-size: 12px">
+        <span style="display: inline-block; width: 20px"> </span>
+        3、标签码用于给用户扫码使用，从而让用户执行该标签码对应标签的优惠，实现灵活处理。您还可以配置用户扫码后是否强制拉入对应的标签，这样就可以实现用户长期留在此标签，用户下次不必扫标签码即可享受标签优惠。
+      </div>
     </div>
 
     <el-form
@@ -93,7 +97,7 @@
             v-show="editable"
             :loading="label.loading"
             class="mt-2 ml-3"
-            >导出支付码</el-button
+            >导出标签码</el-button
           >
         </el-form-item>
       </div>
@@ -121,29 +125,63 @@
       :visible.sync="exportQrDialog"
       width="700px"
       append-to-body
-      title="导出标签"
+      title="选择导出标签"
     >
       <div
-        @click="downloadImg()"
         class="d-block mx-auto"
-        style="width: 600px;text-align: center;"
+        style="width: 600px; text-align: center"
         id="qrDiv"
       >
-        <vue-qr
-          :ref="'Qrcode'"
-          text="http://qrcode.html"
-          :margin="10"
-          :size="500"
-        />
-        <div>你好</div>
+        <h5>标签码设置</h5>
+        用户扫码支付后，是否<b>强制将用户拉入此标签</b>？
+        <el-switch
+          v-model="exportLabelQr.isAddLabel"
+          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>
+        <hr />
+        <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" >导出{{emp.personnelName}}的【员工标签码】</div>
+        </div>
+        <br />
       </div>
     </el-dialog>
   </div>
 </template>
 <script>
-import { sysDeptDemoList, addlabel, selectLabel } from "@/api/label/label";
-import vueQr from 'vue-qr'
-import html2canvas from 'html2canvas';
+import { sysDeptDemoList, addlabel, selectLabel, updateLabelRule } from "@/api/label/label";
+import vueQr from "vue-qr";
+import html2canvas from "html2canvas";
+import {listPersonnel} from "@/api/station/personnel";
 
 export default {
   name: "Label_AddLabel",
@@ -162,11 +200,14 @@ export default {
       editable: true,
       tempForm: undefined,
       pageStatus: 0,
-      exportQrDialog: false
+      exportQrDialog: false,
+      exportLabelQr:{},
+      exportEmployeeQr:{},
+      personnelList:[],
     };
   },
   components: {
-    vueQr
+    vueQr,
   },
   created() {
     this.init();
@@ -175,6 +216,22 @@ export default {
     init() {
       this.setPageStatus();
       this.getList();
+      this.getEmployeeList();
+    },
+    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("加载员工列表出错了~")
+      });
     },
     setPageStatus() {
       this.queryPageStatus([2]).then((res) => {
@@ -265,18 +322,23 @@ export default {
       }
       this.editable = !this.editable;
     },
-    exportPayCode(){
+    exportPayCode(label) {
+      this.exportLabelQr = label;
+      console.log(this.exportLabelQr);
       this.exportQrDialog = 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)
-      });
+      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);
+        }
+      );
 
       // // const iconUrl = this.$refs['Qrcode'].$el.src
       // const a = document.createElement('a')
@@ -285,7 +347,23 @@ export default {
       // a.download = '标签支付码'
       // a.href = iconUrl
       // a.dispatchEvent(event)
-    }
+    },
+    handleStatusChange(e) {
+      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("抱歉，修改失败了，请刷新网页重试~")
+      })
+    },
   },
 };
 </script>

src/views/station/Station_Employee.vue

@@ -71,7 +71,16 @@
             type="text"
             icon="el-icon-download"
             @click="exportQr(scope.row)"
-            >导出加油员码</el-button
+            v-if="personnelList.length != 1"
+            >导出员工码</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-download"
+            v-if="personnelList.length == 1"
+            @click="exportQr(scope.row)"
+            >导出油站码</el-button
           >
         </template>
       </el-table-column>
@@ -142,14 +151,14 @@
         </div>
         <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-2">
           2、当您只添加 【<b>一名加油员</b>】
-          ：小程序采取开放模式（即用户<b>可以不通过扫加油员码进入</b>），小程序会拉取该加油员所管理的油枪，用户产生的订单全部算在该加油员的名下。
+          ：小程序采取开放模式（即用户<b>可以不通过扫员工码进入</b>），小程序会拉取该加油员所管理的油枪，用户产生的订单全部算在该加油员的名下。
         </div>
         <div
           style="color: red; font-size: 12px; text-indent: 2em"
           class="mt-2 mb-3"
         >
           3、当您添加了 【<b>多名加油员</b>】
-          ：小程序采取限制模式（即<b>只能够通过扫加油员码进入</b>），小程序会拉取对应加油员码下的加油员所管理的油枪，用户扫加油员码产生的订单算在对应加油员的名下。
+          ：小程序采取限制模式（即<b>只能够通过扫员工码进入</b>），小程序会拉取对应员工码下的加油员所管理的油枪，用户扫员工码产生的订单算在对应加油员的名下。
         </div>
       </div>
       <div class="m-2" v-else-if="personnelList.length == 1">
@@ -158,10 +167,10 @@
           您正在添加第二名加油员，操作成功之后，<b>系统将发生以下变化：</b>
         </div>
         <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-4">
-          1、小程序端会限制用户进入的方式，用户只能通过<b>扫描加油员的加油员码</b>来进入小程序进行支付。其他方式进入小程序，会强制调用相机启动扫一扫功能。
+          1、小程序端会限制用户进入的方式，用户只能通过<b>扫描加油员的员工码</b>来进入小程序进行支付。其他方式进入小程序，会强制调用相机启动扫一扫功能。
         </div>
         <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-2">
-          2、用户扫描加油员码产生的订单，会自动计入到加油员码对应的加油员身上。
+          2、用户扫描员工码产生的订单，会自动计入到员工码对应的加油员身上。
         </div>
         <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-2">
           3、如果您启用了标签，可能需要导出多个<b>加油员标签码</b>~
@@ -176,7 +185,7 @@
         </div>
       </div>
       <div class="m-2" v-else-if="personnelList.length == 2">
-        <div>您目前有两名加油员，订单会根据加油员码计入加油员名下。</div>
+        <div>您目前有两名加油员，订单会根据员工码计入加油员名下。</div>
         <div>
           您正在删除一名加油员，操作成功之后，<b>系统将发生以下变化：</b>
         </div>
@@ -222,12 +231,16 @@
       title="导出标签"
     >
       <div>
-        <qr text="121111" @downloadImg="downloadImg" name="员工码">
-          <div>员工码：{{ this.currentExport.personnelName }}</div>
-          <div >负责枪号： 
-            <span v-for="ele in currentExport.checkedGunList" :key="ele">
-                {{ ele + '号枪-' + transferGunnumToOilname(ele) + "  "}}
+        <qr :text="qrStr" @downloadImg="downloadImg" :name="personnelList.length==1 ? '油站码' : '员工码'">
+          <div v-if="personnelList.length==1">油站码：{{this.$store.state.user.deptName}}-{{ this.currentExport.personnelName }}</div>
+          <div v-else>员工码：{{this.$store.state.user.deptName}}-{{ this.currentExport.personnelName }}</div>
+          <div class='mx-auto d-flex' style="width:500px;justify-content:center;align-items:center;">
+            <span>负责枪号：</span> 
+            <div class="d-inline-flex" style="max-width:350px;flex-wrap:wrap;justify-content:space-between;">
+              <span v-for="ele in currentExport.checkedGunList" :key="ele" style="width: 85px;">
+                {{ ele + '号枪-' + transferGunnumToOilname(ele) + " "}}
             </span>
+            </div>
           </div>
         </qr>
       </div>
@@ -269,8 +282,6 @@ export default {
         pageSize: 10,
         personnelName: null,
         gunNo: null,
-        stationId: null,
-        stationName: null,
         qrCode: null,
         personnelPhone: null,
       },
@@ -319,7 +330,6 @@ export default {
     /** 查询油站加油员信息列表 */
     getList() {
       listPersonnel(this.queryParams).then((response) => {
-        this.queryParams.stationId = null;
         this.personnelList = response.rows;
         this.total = response.total;
       });
@@ -479,7 +489,6 @@ export default {
       } else {
         this.currentExport.checkedGunList = [];
       }
-
       const base = new Base64();
       const encodeStr = "e" + row.personnelId + "/";
       const encodedStr = base.encode(encodeStr);