You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
245 lines
6.6 KiB
Vue
245 lines
6.6 KiB
Vue
<template>
|
|
<div class="activity_code">
|
|
<Row class="search-row">
|
|
<i-col span="24"
|
|
class="search-col">
|
|
<Button type="primary"
|
|
@click="downloadCode(2)"
|
|
style="margin-left: 20px;">批量下载门店码</Button>
|
|
<Button type="primary"
|
|
@click="downloadCode(1)"
|
|
style="margin-left: 20px;">批量下载导购码</Button>
|
|
</i-col>
|
|
</Row>
|
|
<Table :loading="loading"
|
|
border
|
|
:columns="columns"
|
|
:data="data">
|
|
<template slot-scope="{row}"
|
|
slot="qrCodeAction">
|
|
<img :src="require('../../../static/img/qrCode-init.png')"
|
|
@click="showQrcode(row)"
|
|
class="table-img-qr-code" />
|
|
</template>
|
|
<router-link slot-scope="{row}"
|
|
slot="action"
|
|
:to="{path:'/shop/increase/manager/staff',query:{storeId:row.store.id}}">
|
|
<Button class="router-btn"> 门店导购管理</Button>
|
|
</router-link>
|
|
</Table>
|
|
<Page :total="totalSize"
|
|
:current="pageNum"
|
|
:page-size="pageSize"
|
|
show-elevator
|
|
show-total
|
|
placement="top"
|
|
@on-change="handlePage"
|
|
class-name="ks-page"></Page>
|
|
|
|
<!-- 预览二维码 -->
|
|
<Modal v-model="isShow"
|
|
:title="showStoreName"
|
|
:footer-hide="true"
|
|
width="230"
|
|
class-name="vertical-center-modal"
|
|
@on-ok="ok">
|
|
<div slot="header">
|
|
<p></p>
|
|
</div>
|
|
<p>{{this.showStoreName}}</p>
|
|
<img :src="qrCodeImage"
|
|
style="width:200px;height:200px;" />
|
|
<div style="text-align: center;">
|
|
<Button ghost
|
|
type="primary"
|
|
@click="download(rowData)">下载</Button>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { activityCodeList } from "../../services/ActivityManager/ActivityManager";
|
|
import http from '../../services/store/IncreaseStoreManager';
|
|
import doHttp from '../../services/CommonHttp'
|
|
export default {
|
|
name: "ActivityCode",
|
|
data () {
|
|
let _this = this;
|
|
return {
|
|
loading: false,
|
|
totalSize: 0,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
data: [],
|
|
instanceId: 0,
|
|
isShow: false,
|
|
showStoreName: "",
|
|
qrCodeImage: "",
|
|
rowData: {},
|
|
columns: [
|
|
{
|
|
width: 80,
|
|
align: "center",
|
|
title: "序号",
|
|
render (h, params) {
|
|
let num = parseInt(params.index) + 1;
|
|
if (_this.pageSize > 1) {
|
|
num += (_this.pageNum - 1) * _this.pageSize;
|
|
}
|
|
return h("span", num);
|
|
}
|
|
},
|
|
{
|
|
title: "所属零售公司",
|
|
key: "organizational.name",
|
|
render (h, params) {
|
|
return h("span", params.row["organizational"]["name"]);
|
|
},
|
|
},
|
|
{
|
|
title: "零售公司编号",
|
|
key: "organizational.code",
|
|
render (h, params) {
|
|
return h("span", params.row["organizational"]["code"]);
|
|
},
|
|
},
|
|
{
|
|
title: "店铺名称",
|
|
key: "store.name",
|
|
render (h, params) {
|
|
return h("span", params.row["store"]["name"]);
|
|
},
|
|
},
|
|
{
|
|
title: "店铺编号",
|
|
key: "store.code",
|
|
render (h, params) {
|
|
return h("span", params.row["store"]["code"]);
|
|
},
|
|
},
|
|
{
|
|
title: "推广码",
|
|
slot: 'qrCodeAction',
|
|
className: 'table-width-80',
|
|
// render(h, params) {
|
|
// return h(
|
|
// "div",
|
|
// {
|
|
// class: "qrcode",
|
|
// },
|
|
// [
|
|
// h(
|
|
// "Button",
|
|
// {
|
|
// props: { type: "primary", size: "small" },
|
|
// style: { marginRight: "8px" },
|
|
// on: {
|
|
// "mouseover.native": () => _this.showQrcode(params.row),
|
|
// },
|
|
// },
|
|
// "二维码"
|
|
// ),
|
|
// h(
|
|
// "div",
|
|
// {
|
|
// class: "qrcodeBox",
|
|
// style: { display: "none" },
|
|
// },
|
|
// [h("img", { attrs: { src: params.row.qrCode } })]
|
|
// ),
|
|
// ]
|
|
// );
|
|
// },
|
|
},
|
|
{
|
|
title: '操作',
|
|
slot: 'action',
|
|
// key: "action",
|
|
// width: 200,
|
|
// render(h, p) {
|
|
// return h("div", [
|
|
// h(
|
|
// "Button",
|
|
// {
|
|
// props: { type: "primary", size: "small" },
|
|
// style: { marginRight: "8px" },
|
|
// on: {
|
|
// click: () => _this.guideCode(p.row),
|
|
// },
|
|
// },
|
|
// "查看导购码"
|
|
// ),
|
|
// ]);
|
|
// },
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created () {
|
|
this.instanceId = this.$route.query.instanceId;
|
|
this.load();
|
|
},
|
|
methods: {
|
|
ok: function () {
|
|
this.isShow = false;
|
|
},
|
|
cancel: function () {
|
|
this.isShow = false;
|
|
},
|
|
handlePage (value) {
|
|
this.pageNum = value;
|
|
this.load();
|
|
},
|
|
showQrcode (row) {
|
|
console.log(row);
|
|
this.isShow = true;
|
|
this.showStoreName = row.store.name;
|
|
this.qrCodeImage = row.qrCode;
|
|
this.rowData = row;
|
|
},
|
|
download: function (row) {
|
|
let fileName = row.store.name + "-活动码";
|
|
http.downloadImg({
|
|
url: row.qrCode
|
|
}, fileName, function (/*data*/) {
|
|
|
|
})
|
|
},
|
|
load (params = {}) {
|
|
let _this = this;
|
|
this.loading = true;
|
|
params.pageSize = this.pageSize;
|
|
params.pageNum = this.pageNum;
|
|
params.instanceId = this.instanceId;
|
|
activityCodeList(params, (res) => {
|
|
_this.data = res.data.results.this.records;
|
|
_this.totalSize = res.data.results.this.total;
|
|
_this.loading = false;
|
|
});
|
|
},
|
|
downloadCode (type) {
|
|
this.loading = true;
|
|
let that = this;
|
|
doHttp
|
|
.downloadZip("/activity/instance/download?type=" + type + "&instanceId=" + this.instanceId, type == 2 ? '门店码' : "门店导购码", { type: type, instanceId: this.instanceId })
|
|
.then(res => {
|
|
that.loading = false;
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.table-width-80 {
|
|
width: 80px !important;
|
|
}
|
|
.table-img-qr-code {
|
|
margin-left: 5px;
|
|
margin-top: 5px;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
</style>
|