268 lines
7.4 KiB
Vue
268 lines
7.4 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card class="card">
|
||
<div slot="header" class="clearfix">
|
||
<span>{{ store.name }}{{store.description? "("+store.description+")":"" }}</span>
|
||
</div>
|
||
<!-- 上传图片-->
|
||
<div style="display: flex">
|
||
<span>店铺logo：</span>
|
||
<imgUpload1 v-if="flag" :imgUrl="store.logo" :limit="1" @input="getImgUrl"></imgUpload1>
|
||
</div>
|
||
<!-- 上传图片-->
|
||
<div style="display: flex">
|
||
<span>门头照：</span>
|
||
<imgUpload1 v-if="flag" :doorUrl="store.doorstepPhoto" @input="getDoorImgUrl"></imgUpload1>
|
||
</div>
|
||
|
||
<map-componment :pform="form" ref="mapRef" @pform="getForm"></map-componment>
|
||
<div style="display: flex;margin-bottom: 20px">
|
||
<span style="margin-right: 10px">店铺福利：</span>
|
||
<el-checkbox-group v-model="welfare" ref="" @change="getCheckbox">
|
||
<el-checkbox
|
||
v-for="dict in dict.type.store_welfare"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
></el-checkbox>
|
||
</el-checkbox-group>
|
||
</div>
|
||
<el-button type="primary" @click="submitStore">保存信息</el-button>
|
||
</el-card>
|
||
|
||
<el-card class="card">
|
||
<div slot="header" class="clearfix">
|
||
<span>油站二维码</span>
|
||
</div>
|
||
<img id="collection" class="qrcode" :src="collectionImg" /><br/>
|
||
<el-button class="but" type="primary"
|
||
icon="el-icon-download"
|
||
@click="handleDownloadqrCode('collection')">
|
||
下载油站二维码
|
||
</el-button>
|
||
</el-card>
|
||
|
||
<!-- <el-card class="card">-->
|
||
<!-- <div slot="header" class="clearfix">-->
|
||
<!-- <span>收款二维码</span>-->
|
||
<!-- </div>-->
|
||
<!-- <img id="payment" class="qrcode" :src="paymentImg" /><br/>-->
|
||
<!-- <el-button class="but" type="primary"-->
|
||
<!-- icon="el-icon-download"-->
|
||
<!-- @click="handleDownloadqrCode('payment')">-->
|
||
<!-- 下载收款二维码-->
|
||
<!-- </el-button>-->
|
||
<!-- </el-card>-->
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import QRCode from 'qrcode'
|
||
import html2canvas from "html2canvas";
|
||
import {listQRCode} from "@/api/staff/qrcode";
|
||
import {ljStoreInfo, updateStore} from "@/api/staff/store";
|
||
import mapComponment from "@/components/map/mapComponent.vue";
|
||
import imgUpload from "@/components/ImageUpload/index.vue"
|
||
import imgUpload1 from "@/components/map/imgUpload.vue"
|
||
|
||
export default {
|
||
components:{
|
||
mapComponment,
|
||
imgUpload,
|
||
imgUpload1,
|
||
},
|
||
name: "map-view",
|
||
dicts: ['store_welfare'],
|
||
props: {
|
||
data: {
|
||
type: Object
|
||
}
|
||
},
|
||
data(){
|
||
return{
|
||
flag:false,
|
||
// 上传文件列表
|
||
uploadFiles: [
|
||
{name:"nihao",
|
||
url:'http://localhost:8080/static/uploadImages/20231218/c4b1c4fc7cfc4dd4a4acf1e922cacc86.png'}
|
||
],
|
||
// 门店二维码
|
||
collectionImg:'',
|
||
// 收款二维码
|
||
paymentImg:'',
|
||
qrcode: {},
|
||
store:{},
|
||
// 地图实例
|
||
map: null,
|
||
polygons: [],
|
||
// 标记点
|
||
marker: "",
|
||
// 地址逆解析
|
||
geoCoder: null,
|
||
// 搜索提示
|
||
AutoComplete: null,
|
||
// 搜索关键字
|
||
keywords: "",
|
||
// 位置信息
|
||
form: {
|
||
lng: "",
|
||
lat: "",
|
||
address: "",
|
||
adcode: "", //地区编码
|
||
},
|
||
// 搜索节流阀
|
||
loading: false,
|
||
// 搜索提示信息
|
||
options: [],
|
||
welfare:[],
|
||
}
|
||
},
|
||
created() {
|
||
this.getQRCodeInfo();
|
||
this.getStore();
|
||
this.getForm()
|
||
},
|
||
methods: {
|
||
handleUploadSuccessCover(file) {
|
||
this.dataForm.coverImage = file.data.fileName;
|
||
},
|
||
// 获取图片url地址
|
||
getImgUrl(val){
|
||
let list = val.split("/static")
|
||
this.store.logo = "/static"+list[list.length-1]
|
||
},
|
||
// 获取图片url地址
|
||
getDoorImgUrl(val){
|
||
let list = val.split(",")
|
||
let doorUrl = []
|
||
list.forEach(item => {
|
||
doorUrl.push("/static"+item.split("/static")[1])
|
||
})
|
||
// console.log(list,doorUrl)
|
||
this.store.doorstepPhoto = JSON.stringify(doorUrl)
|
||
// this.store.doorstepPhoto = val
|
||
},
|
||
getForm(data){
|
||
if (data != undefined){
|
||
this.form.lat = data.lat;
|
||
this.form.lng = data.lng;
|
||
this.form.address = data.address;
|
||
}
|
||
},
|
||
// 获取门店信息
|
||
getStore() {
|
||
ljStoreInfo().then(response => {
|
||
this.store = response.data
|
||
// console.log(response.data)
|
||
this.$emit("getUrl",this.store)
|
||
this.form.lat = this.store.latitude;
|
||
this.form.lng = this.store.longitude;
|
||
this.form.address = this.store.address;
|
||
if (this.store.welfare!=null){
|
||
this.welfare = this.store.welfare.split(",")
|
||
}
|
||
this.$refs.mapRef.initAMap();
|
||
this.flag = true;
|
||
})
|
||
},
|
||
|
||
getCheckbox(){
|
||
this.store.welfare = this.welfare.toString();
|
||
},
|
||
|
||
submitStore(){
|
||
this.store.latitude = this.form.lat;
|
||
this.store.longitude = this.form.lng;
|
||
this.store.address = this.form.address;
|
||
updateStore(this.store).then(response => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.getStore();
|
||
})
|
||
},
|
||
|
||
// 获取二维码信息
|
||
getQRCodeInfo(){
|
||
listQRCode().then(response => {
|
||
this.qrcode = response.data.records;
|
||
this.getQRcode();
|
||
})
|
||
},
|
||
// 获取二维码信息
|
||
getQRCodeInfoByStoreId(){
|
||
listQRCode().then(response => {
|
||
this.qrcode = response.data.records;
|
||
this.getQRcode();
|
||
})
|
||
},
|
||
// 根据字符串获取二维码图片url地址
|
||
getQRcode(){
|
||
let opts = {
|
||
errorCorrectionLevel: "L",//容错级别
|
||
type: "image/png",//生成的二维码类型
|
||
quality: 0.3,//二维码质量
|
||
margin: 0,//二维码留白边距
|
||
width: 180,//宽
|
||
height: 180,//高
|
||
text: "http://www.xxx.com",//二维码内容
|
||
color: {
|
||
dark: "#666666",//前景色
|
||
light: "#fff"//背景色
|
||
}
|
||
};
|
||
if (this.qrcode.length > 0){
|
||
//this.QRlink 生成的二维码地址url
|
||
QRCode.toDataURL(this.qrcode[0].collection, opts , (err, url) => {
|
||
if (err) throw err
|
||
//将生成的二维码路径复制给data的QRImgUrl
|
||
this.collectionImg= url
|
||
})
|
||
QRCode.toDataURL(this.qrcode[0].payment, opts , (err, url) => {
|
||
if (err) throw err
|
||
//将生成的二维码路径复制给data的QRImgUrl
|
||
this.paymentImg= url
|
||
})
|
||
}
|
||
},
|
||
// 根据dom生成图片并下载到本地
|
||
handleDownloadqrCode(id) {
|
||
html2canvas(document.getElementById(id)).then((canvas) => {
|
||
let imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式
|
||
let a = document.createElement('a')
|
||
a.href = imgUrl;
|
||
if (id=='collection'){
|
||
a.download = "门店二维码"; //文件名
|
||
}else {
|
||
a.download = "收款二维码"; //文件名
|
||
}
|
||
document.body.appendChild(a);
|
||
a.click(); // 触发点击
|
||
document.body.removeChild(a); // 然后移除
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.app-container{
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #f6f8f9;
|
||
}
|
||
.card{
|
||
margin: 15px auto;
|
||
}
|
||
.qrcode{
|
||
width: 180px;
|
||
height: 180px;
|
||
margin-top: 15px;
|
||
}
|
||
.but{
|
||
margin-top: 15px;
|
||
width: 180px;
|
||
}
|
||
.copy{
|
||
width: 50%;
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|