feature_0521
parent
47c489a32e
commit
acf1e77b92
@ -1,9 +1,194 @@
|
||||
<template> </template>
|
||||
<template>
|
||||
<div class="activity_code">
|
||||
<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}}">
|
||||
<Button class="router-btn"> 查看导购码</Button>
|
||||
</router-link>
|
||||
</Table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ActivityManager from "../../services/ActivityManager/ActivityManager";
|
||||
import http from '../../services/store/IncreaseStoreManager';
|
||||
import doHttp from '../../services/CommonHttp'
|
||||
export default {
|
||||
name: "GuideCode",
|
||||
data () {
|
||||
let _this = this;
|
||||
return {
|
||||
loading: false,
|
||||
totalSize: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
data: [],
|
||||
instanceId: 0,
|
||||
isShow: false,
|
||||
showStoreName: "",
|
||||
qrCodeImage: "",
|
||||
companyList: [],
|
||||
rowData: {},
|
||||
storeId: null,
|
||||
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["staffer"]["name"]);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "工号",
|
||||
key: "organizational.name",
|
||||
render (h, params) {
|
||||
return h("span", params.row["staffer"]["stafferNo"]);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "手机号",
|
||||
key: "organizational.code",
|
||||
render (h, params) {
|
||||
return h("span", params.row["staffer"]["mobile"]);
|
||||
},
|
||||
},
|
||||
{
|
||||
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["staffer"]["roleName"]);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "活动码",
|
||||
slot: 'qrCodeAction',
|
||||
className: 'table-width-80',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created () {
|
||||
this.instanceId = this.$route.query.instanceId;
|
||||
this.storeId = this.$route.query.storeId;
|
||||
this.load();
|
||||
},
|
||||
methods: {
|
||||
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.storeId = this.storeId;
|
||||
params.instanceId = this.instanceId;
|
||||
ActivityManager.guideCodeList(params, (res) => {
|
||||
_this.data = res.data.results || [];
|
||||
_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></style>
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue