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.
327 lines
9.1 KiB
Vue
327 lines
9.1 KiB
Vue
<template>
|
|
<div class="activity_code">
|
|
<Row class="search-row"
|
|
:gutter="10">
|
|
<i-col span="22"
|
|
class="search-col">
|
|
<Form ref="formValidate"
|
|
:model="formValidate"
|
|
:label-width="80">
|
|
<Row class="row-style">
|
|
<i-col span="16"
|
|
class="search-col">
|
|
<i-input placeholder="请输入店铺名称或编码"
|
|
style="width: 200px !important"
|
|
class="search-select"
|
|
v-model="formValidate.store" />
|
|
<span class="search-span">零售公司</span>
|
|
<Select v-model="formValidate.orgId"
|
|
filterable
|
|
class="search-select"
|
|
placeholder="全部"
|
|
clearable>
|
|
<Option v-for="(item, index) in companyList"
|
|
:key="index"
|
|
:value="item.value">{{ item.label }}</Option>
|
|
</Select>
|
|
<Button type="primary"
|
|
@click="search"
|
|
class="search-btn">查询</Button></i-col>
|
|
<i-col span="8"
|
|
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>
|
|
</Form>
|
|
</i-col>
|
|
<i-col span="2"
|
|
class="search-col">
|
|
<Row class="row-style">
|
|
<i-col span="12"
|
|
style="text-align: left;padding-right: 20px;">
|
|
<Button type="primary"
|
|
@click="() => $router.back()">返回</Button>
|
|
</i-col>
|
|
</Row>
|
|
</i-col>
|
|
</Row>
|
|
<Table :loading="loading"
|
|
border
|
|
:columns="columns"
|
|
:data="data">
|
|
<template slot-scope="{row}"
|
|
slot="qrCodeAction">
|
|
<div class="qrCodeBox"
|
|
@mouseover="showQrcode(row)"
|
|
@mouseout="hideQrcode(row)">
|
|
<img :src="require('../../../static/img/qrCode-init.png')"
|
|
class="table-img-qr-code" />
|
|
<div class="toggleQrCode"
|
|
v-show="rowData.id == row.id">
|
|
<div slot="header">
|
|
<p></p>
|
|
</div>
|
|
<p>{{showStoreName}}</p>
|
|
<img :src="qrCodeImage"
|
|
style="width:200px;height:200px;" />
|
|
<div style="text-align: center;">
|
|
<Button ghost
|
|
type="primary"
|
|
@click="download(rowData)">下载</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<router-link slot-scope="{row}"
|
|
slot="action"
|
|
:to="{path:'/activity/plan/GuideCode',query:{instanceId:row.instanceId, 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>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { activityCodeList, getCompany } 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: "",
|
|
companyList: [],
|
|
rowData: {},
|
|
formValidate: {
|
|
orgId: null,
|
|
store: null,
|
|
},
|
|
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();
|
|
this.getCompanyInfo();
|
|
},
|
|
methods: {
|
|
search () {
|
|
console.log(this.formValidate)
|
|
this.load()
|
|
},
|
|
ok: function () {
|
|
this.isShow = false;
|
|
},
|
|
getCompanyInfo () {
|
|
let that = this;
|
|
let data = {
|
|
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
|
|
};
|
|
getCompany(data, function (data) {
|
|
that.companyList = [];
|
|
data.data.results.forEach(element => {
|
|
that.companyList.push({
|
|
label: element.name,
|
|
value: element.id
|
|
});
|
|
});
|
|
});
|
|
},
|
|
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;
|
|
},
|
|
hideQrcode (row) {
|
|
this.showStoreName = "";
|
|
this.qrCodeImage = "";
|
|
this.rowData = {};
|
|
},
|
|
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;
|
|
params = { ...params, ...this.formValidate }
|
|
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>
|
|
.search-btn {
|
|
margin-left: 40px;
|
|
}
|
|
.table-width-80 {
|
|
width: 80px !important;
|
|
}
|
|
.table-img-qr-code {
|
|
margin-left: 5px;
|
|
margin-top: 5px;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
.qrCodeBox {
|
|
}
|
|
.toggleQrCode {
|
|
position: absolute;
|
|
background: #fff;
|
|
z-index: 9999;
|
|
padding: 10px;
|
|
border: 1px solid #dfdfdf;
|
|
}
|
|
.ivu-table-wrapper {
|
|
overflow: inherit !important;
|
|
}
|
|
</style>
|