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="操作"
              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="25%" 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:80%">
        </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>
        </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
    },
    onSubmit(){

    },
    handleSizeChange(){

    },
    handleCurrentChange(){

    },
    seeMore(item){
      MerchantQRcode({appCode:'ACDWL20240528003',id:'9E602E5977EC48DEA06D42C67F4C93F0'}).then(res=>{
        this.qfUrl = res.data
      })
    this.showQF = true
    },
  }
}
</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;
}



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