|
|
@@ -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>
|
Joe