yanshouban/src/views/online/QRCode/index.vue

<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>交易联机</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">商户静态二维码</span></div>
      </div>
      <div>
        <!-- 表格 -->
        <div class="tableBox">
          <el-table ref="multipleTable" :data="tableData"
            :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
            tooltip-effect="dark">
            <el-table-column label="店铺名称" min-width="220">
              <template slot-scope="scope">{{ scope.row.shopName }}</template>
            </el-table-column>
            <el-table-column prop="shopCode" label="店铺编码" min-width="200" />
            <el-table-column prop="chargePersonName" label="负责人" min-width="200" />
            <el-table-column prop="chargePersonPhone" label="联系电话" min-width="200" />
            <el-table-column label="合同状态" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.contractState === 0">无效</span>
                <span v-if="scope.row.contractState === 1">有效</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" min-width="200" />
            <el-table-column label="操作" show-overflow-tooltip min-width="250">
              <template slot-scope="scope">
                <div class="tableBtn greens" @click="seeMore(scope.row)">
                  商户静态二维码
                </div>
                <!--  <a href="http://116.169.61.30:32019/2023-zfjr/20241101/1730452040529-merchantQrCode.png" class="tableBtn greens" target="_blank">商户静态二维码</a> -->
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination :current-page="currentPage" background small :page-sizes="[10, 20, 50, 100]" :page-size="10"
              layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="showQF" custom-class='tongyong_css' style="padding: 0;" width="45%" center
      :close-on-click-modal="false" :show-close="false">
      <div style="padding:20px;">
        <div style="font-size: 14px;padding-bottom: 20px;color: #000;">商户静态二维码</div>
        <div style="padding:20px;">
          <!-- <img :src="qfUrl" alt="" style="height:330px;width:50%"> -->
          <img src="../../../assets/images/Code.png" alt="" style="height:330px;width:50%">
        </div>
        <!-- <div>
          <el-tabs v-model="xiangTabs">
            <el-tab-pane label="微信" name="first">
              <div style="width: 100%">
              <img src="" alt="">
              </div>
            </el-tab-pane>
            <el-tab-pane label="支付宝" name="second">
              <div style="width: 100%">
<img src="" alt="">
              </div>
            </el-tab-pane>
            <el-tab-pane label="聚合" name="there">
              <div style="width: 100%">
<img src="" alt="">
              </div>
            </el-tab-pane>
            <el-tab-pane label="其他" name="four">
              <div style="width: 100%">
<img src="" alt="">
              </div>
            </el-tab-pane>
          </el-tabs>
        </div> -->
        <div style="padding-top:20px;display:flex;justify-content: flex-end;">
          <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
            @click="showQF =false">返回</el-button>
   <!--       <el-button style="background-color: #3F9B6A;color: #fff;" @click="down">下载</el-button>
          <el-button style="background-color: #3F9B6A;color: #fff;" @click="down">导出</el-button>
          <el-button style="background-color: #3F9B6A;color: #fff;" @click="down">保存</el-button> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    businessListGetAll,
    businessListSave,
    businessListGetById,
    businessListUpdate,
    businessListStart,
    delBusinessById
  } from '@/api/business'
  import {
    MerchantQRcode
  } from '../../../api/online.js'
  export default {
    name: 'atmosphereGl',
    data() {
      return {
        rules: {},
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        ggXin: false,
        index: 1,
        tableData: [],
        formInline: {
          shopName: '', // 店铺名称
          shopCode: '', // 店铺编码
          chargePersonName: '', // 店铺负责人
          contractState: '', // 合同状态 1-有效 0-无效
          page: '1', // 当前页
          pageSize: '10' // 每页记录数
        },
        showQF: false,
        xiangTabs: 'first',
        qfUrl: ''
      }
    },
    computed: {},
    mounted() {
      this.getAll(this.formInline)
      // this.privacyTime = localStorage.getItem('privacyTime')
      // console.log(this.privacyTime)
      // this.getZiyuan()
    },
    methods: {
      async getAll(formInline) {
        const res = await businessListGetAll(formInline)
        this.total = res.data.total
        this.tableData = res.data.list
        this.tableData.map(res => {
          res.shopPhone = this.$decrypt(res.shopPhone)
          res.shopPassword = this.$decrypt(res.shopPassword)
          res.idCardNum = this.$decrypt(res.idCardNum)
          res.emailAddress = this.$decrypt(res.emailAddress)
          res.shopAdress = this.$decrypt(res.shopAdress)
          res.legalRepresentative = this.$decrypt(res.legalRepresentative)
          res.chargePersonPhone = this.$decrypt(res.chargePersonPhone)
        })
      },
      onSubmit() {
      },
      handleSizeChange() {
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.formInline.page = val
        this.getAll(this.formInline)
      },
      seeMore(item) {
        MerchantQRcode({
          appCode: 'ACDWL20240528003',
          id: '9E602E5977EC48DEA06D42C67F4C93F0'
        }).then(res => {
          this.qfUrl = res.data
        })
        this.showQF = true
      },
      down() {
        this.downloadImage(this.qfUrl, '二维码')
      },
      async downloadImage(imageUrl, filename) {
          const response = await fetch(imageUrl);
          if (!response.ok) {
            throw new Error(`图片未找到: ${response.statusText}`);
          }
          const blob = await response.blob();
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = filename;
          document.body.appendChild(a);
          a.click();
          a.remove();
          window.URL.revokeObjectURL(url);
      },
      // downloadImage(src, name) {
      //   // 参数src为图片地址，name为下载时图片的名称
      //   var image = new Image()
      //   // 解决跨域 Canvas 污染问题
      //   image.setAttribute("crossOrigin", "anonymous")
      //   image.onload = function() {
      //     var canvas = document.createElement("canvas")
      //     canvas.width = image.width
      //     canvas.height = image.height
      //     var context = canvas.getContext("2d")
      //     context.drawImage(image, 0, 0, image.width, image.height)
      //     var url = canvas.toDataURL("image/png")
      //     // 生成一个a元素
      //     var a = document.createElement("a")
      //     // 创建一个单击事件
      //     var event = new MouseEvent("click")
      //     // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
      //     a.download = name || "图片"
      //     // 将生成的URL设置为a.href属性
      //     a.href = url
      //     // 触发a的单击事件
      //     a.dispatchEvent(event)
      //   }
      //   image.src = src
      // },
    }
  }
</script>
<style scoped>
  .zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;
    position: relative;
  }
  /deep/ .el-form-item__content {
    line-height: 0;
  }
  .tableBtn {
    display: inline-block;
    margin-right: 10px;
  }
  ::v-deep .formSearch {
    position: relative;
    margin-bottom: 20px;
    display: flex;
    width: 100%;
    height: 30px;
    font-size: 14px;
    justify-content: space-between;
    .el-form-item__label {
      line-height: 28px;
      font-size: 14px;
      color: #000;
      font-weight: 100;
    }
  }
  .greens {
    color: #3F9B6A;
  }
  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    position: relative;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3F9B6A;
  }
  .el-row {
    margin-bottom: 20px;
  }
  :last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  /deep/ .bg-purple[data-v-0e3fe4ec] {
    background: #fff;
    height: 50px;
  }
  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }
  .demo-input-suffix {
    display: flex;
    margin-right: 20px;
  }
  .pagination {
    text-align: right;
    line-height: 20px;
  }
  /deep/ .el-pagination__total {
    margin-top: 4px;
  }
  /deep/ .btn-prev {
    position: absolute;
    top: 4px;
    right: 266px;
  }
  /deep/ .el-pager {
    position: absolute;
    top: 4px;
    right: 40px;
  }
  /deep/ .btn-next {
    position: absolute;
    top: 4px;
    right: 10px;
  }
  ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
</style>