oil-station/fuintAdmin/src/views/staff/storeInfo/index.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>