webapp / GreenwayWeb

  <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="操作" fixed="right" min-width="150">

                <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">

  			  <div>共{{total}}条</div>

              <el-pagination :current-page="currentPage" background small :page-sizes="[10, 20, 50, 100]" :page-size="10"

                layout=" 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;"> -->
  		  <el-image 
  		      style=" height:330px"
  		      :src="qfUrl" 
  		      :preview-src-list="srcList">
  		    </el-image>

          </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: [],

  		 srcList: [
  		        
  		        ],

          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

        },
        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.srcList.push(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: space-between;

      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;
    }
  

    ::v-deep .buttonHover:hover {
      color: #3f9b6a !important;
      border-color: #c5e1d2 !important;
      background-color: #ecf5f0 !important;
      outline: none;
    }

  </style>