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.
bsdgy-front/src/pages/activity/ActivityCode.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>