Skip to content

H
haoban-3
Commit 9799818d by huaying
Options

fix: 活码下载，搜索下拉框修改

parent 09c5dc0e
Showing with 110 additions and 23 deletions
src/components/common/links.vue
......@@ -10,9 +10,10 @@
<div class="link__divider"></div>
<div class="links__qr">
<div style="text-align:center">
<vue-qr id="qrImg" :text="src" :size="102" :margin="5"></vue-qr>
<vue-qr v-if="sourceType" id="qrImg" :text="src" :size="102" :margin="5"></vue-qr>
<img v-else :src="src" class="imgs" />
</div>
<el-button class="links__qr--btn" v-show="src" type="text" icon="iconfont icon-icon_yunxiazai fz14 mr4" @click="downloadImg">二维码下载</el-button>
<el-button class="links__qr--btn" v-show="src" type="text" icon="iconfont icon-icon_yunxiazai fz14 mr4" @click="download">二维码下载</el-button>
</div>
</div>
</el-dialog>
......@@ -37,6 +38,10 @@ export default {
imageName: {
type: String,
default: ''
},
sourceType: {
type: Boolean,
default: true
}
},
data() {
......@@ -60,7 +65,13 @@ export default {
close() {
this.$emit('update:show', false);
},
download() {
if (this.sourceType) {
this.downloadImg();
} else {
this.downloadCodeImg(this.src);
}
},
downloadImg() {
const qrcode = document.getElementById('qrImg');
let img = qrcode.getElementsByTagName('img')[0];
......@@ -69,6 +80,35 @@ export default {
link.setAttribute('href', url);
link.setAttribute('download', `${this.imageName}.png`);
link.click();
},
downloadCodeImg(url) {
let image = new Image(); //创建图片对象
image.setAttribute('crossOrigin', 'anonymous'); //设置允许跨域
image.src = url; //赋值src
image.onload = () => {
//等待图片加载完成创建canvas
let canvas = document.createElement('canvas');
//将图片绘制到canvas画布上
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, image.width, image.height);
//获取图片文件格式 jpg/jpeg/png
let ext = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase();
//导出画布快照 此时已越过跨域限制成功取到图片数据
let dataURL = canvas.toDataURL('image/' + ext);
//创建a标签
const a = document.createElement('a');
// 赋值a标签download属性值，标明该a标签提供下载功能，同时该属性指定了下载时的文件名称
a.download = this.imageName;
//赋值a标签下载地址，即canvas导出的画布快照 base64格式的图片地址
a.href = dataURL;
//添加a标签到dom中
document.body.appendChild(a);
//触发a标签点击事件 触发下载
a.click();
//下载完成 删除多余的a标签 保持页面原有元素不动
};
}
}
};
......@@ -121,4 +161,8 @@ export default {
margin-right: 8px;
}
}
.imgs {
width: 102px;
height: 105px;
}
</style>
src/views/salesleads/actCodeManage/staffActCode/views/act-code-table.vue
......@@ -11,11 +11,23 @@
<el-option label="成员所属门店" :value="1"></el-option>
<el-option label="关联导购" :value="2"></el-option>
</el-select>
<el-select v-model="inFields.storeSelect" v-if="storeSelect == 1" filterable remote placeholder="请输入门店名称/code" :remote-method="remoteMethods" :loading="selectLoading" v-loadmore="onLoadmoreStore" @change="searchList" style="margin-left: -4px; width:196px;" clearable>
<!-- <el-select v-model="inFields.storeSelect" v-if="storeSelect == 1" filterable remote placeholder="请输入门店名称/code" :remote-method="remoteMethods" :loading="selectLoading" v-loadmore="onLoadmoreStore" @change="searchList" style="margin-left: -4px; width:196px;" clearable>
<el-option v-for="item in shopList" :key="item.storeId" :label="item.storeName" :value="item.storeId"> </el-option>
</el-select>
<el-select v-model="inFields.clerkSelect" v-if="storeSelect == 2" filterable remote placeholder="请输入成员名称/code" :loading="selectLoading" @change="searchList" style="margin-left: -4px; width:196px;" clearable>
<el-option v-for="item in memberList" :key="item.clerkId" :label="item.clerkName" :value="item.clerkId"> </el-option>
</el-select> -->
<el-select v-model="inFields.storeSelect" v-if="storeSelect == 1" filterable remote placeholder="请输入门店名称/code" :remote-method="remoteMethods" :loading="selectLoading" @change="searchList" style="margin-left: -4px; width:196px;" clearable @keyup.native="toInput" v-loadmore="onLoadmoreStore" popper-class="s-select" @clear="searchListShop">
<el-option v-for="item in shopList" :key="item.storeId" :label="item.storeName" :value="item.storeId">
<p class="sname">{{ item.storeName }}</p>
<p class="scode">{{ item.storeCode }}</p>
</el-option>
</el-select>
<el-select v-model="inFields.clerkSelect" v-if="storeSelect == 2" filterable remote placeholder="请输入成员名称/code" :remote-method="remoteMethodShop" :loading="selectLoading" @change="searchList" style="margin-left: -4px; width:196px;" clearable @keyup.native="toInputs" popper-class="s-select">
<el-option v-for="item in memberList" :key="item.clerkId" :label="item.clerkName" :value="item.clerkId">
<p class="sname">{{ item.clerkName }}</p>
<p class="scode">{{ item.clerkCode }}</p>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
......@@ -150,13 +162,14 @@
<el-button type="primary" @click="batchOK">确 定</el-button>
</div>
</el-dialog>
<links :src="wxQrcode" :show.sync="show" :imageName="imageName" />
<links :src="wxQrcode" :show.sync="show" :imageName="imageName" :sourceType="false" />
</section>
</template>
<script>
import { actCodeListApi } from '@/api/actCode.js';
import links from '@/components/common/links';
import { _debounce } from '@/common/js/public';
import { deleteRequest, getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
name: 'actCodeTable',
......@@ -168,7 +181,7 @@ export default {
inserted(el, binding) {
const SELECTDOWN_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
SELECTDOWN_DOM.addEventListener('scroll', function() {
const CONDITION = this.scrollHeight + this.scrollTop >= this.clientHeight;
const CONDITION = this.clientHeight + this.scrollTop >= this.scrollHeight;
if (CONDITION) {
binding.value();
}
......@@ -248,7 +261,6 @@ export default {
text: '编辑',
visible: row => {
if (!this.$getButtonLimit(this.$buttonCode.editActCode) || row.statusFlag == 2) {
// if (row.statusFlag == 2) {
return false;
} else {
return true;
......@@ -265,7 +277,6 @@ export default {
text: '下载活码',
visible: row => {
if (!this.$getButtonLimit(this.$buttonCode.downActCode) || row.hmType == 1 || row.statusFlag != 1) {
// if (row.hmType == 1 || row.statusFlag != 1) {
return false;
} else {
return true;
......@@ -276,7 +287,7 @@ export default {
},
handler: row => {
this.wxQrcode = row.wxQrcode;
this.imageName = `${row.hmId}_${row.name}`;
this.imageName = `${row.hmId}_${row.hmName}`;
this.show = true;
}
},
......@@ -284,7 +295,6 @@ export default {
text: '作废',
visible: row => {
if (this.$getButtonLimit(this.$buttonCode.delActCode) && row.statusFlag != 2 && row.hmType == 2 && row.clerkCode == '') {
// if (row.statusFlag != 2) {
return true;
}
},
......@@ -333,7 +343,8 @@ export default {
pageSize: 20,
total: 1
},
name: '1',
name: '',
// 门店
storeParam: {
searchParam: '',
pageSize: 20,
......@@ -347,10 +358,7 @@ export default {
};
},
created() {
// this.getTableList();
this.searchGroup();
this.getStraff();
this.getStore();
},
activated() {
if (this.$route.meta.refresh) {
......@@ -373,11 +381,19 @@ export default {
this.getTableList();
},
methods: {
toInput: _debounce(function(e, value) {
this.getStore();
}, 500),
toInputs: _debounce(function(e, value) {
this.getStraff();
}, 500),
storeMemberSe(e) {
if (e == 1) {
this.inFields.clerkSelect = '';
this.memberList = [];
} else if (e == 2) {
this.inFields.storeSelect = '';
this.shopList = [];
}
},
onLoadmoreStore() {
......@@ -406,6 +422,16 @@ export default {
this.shopList = [];
}
},
// 导购
remoteMethodShop(query) {
if (query !== '') {
this.name = query;
this.memberList = [];
this.getStraff();
} else {
this.memberList = [];
}
},
// 获取导购列表数据
async getStraff() {
await postRequest(`/api-plug/search-clerk?type=2`, { name: this.name }).then(res => {
......@@ -497,6 +523,9 @@ export default {
this.inFields.orderByField = `${this.sortColumn} ${this.sortType}`;
this.getTableList();
},
searchListShop() {
this.shopList = [];
},
searchList() {
this.pageParam.pageNo = 1;
this.getTableList();
......@@ -649,4 +678,19 @@ export default {
// }
}
}
.s-select {
.el-select-dropdown__item {
height: 57px;
padding-top: 9px;
.sname {
margin-bottom: 3px;
line-height: 20px;
font-size: 14px;
}
.scode {
line-height: 17px;
font-size: 12px;
}
}
}
</style>
src/views/salesleads/components/welcomesItem.vue
......@@ -56,9 +56,9 @@
</div>
</el-form-item>
</div>
<div v-if="welcomeType == 1 && welcomeContent != ''">
<div v-if="welcomeType == 1 && welcomeContent != ''" class="phone">
<p class="welcomeTitle">欢迎语预览</p>
<previewWelcome :welcomeContent="welcomeContent" :mediaList="welcomeMediaList" class="phone"></previewWelcome>
<previewWelcome :welcomeContent="welcomeContent" :mediaList="welcomeMediaList"></previewWelcome>
</div>
</div>
</template>
......@@ -112,7 +112,6 @@ export default {
};
},
mounted() {
console.log(this.welcomeType, 'welcomeType');
this.getWelcomeTable();
document.addEventListener('visibilitychange', () => {
if (document.visibilityState == 'visible') {
......@@ -233,7 +232,7 @@ export default {
}
.welcomeTitle {
// text-align: center;
margin-left: 197px;
margin-left: 118px;
margin-bottom: 26px;
margin-top: 6px;
font-weight: 500;
......@@ -241,11 +240,6 @@ export default {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
}
.phone {
.iphone {
margin-left: 60px !important;
}
}
.welcomeTable {
width: 720px;
height: 429px;
......@@ -291,4 +285,9 @@ export default {
.flexBox + .flexBox {
margin-top: 10px;
}
.phone {
.iphone {
margin-left: 40px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment