<template>
  <div class="p_all_20">
       <div class="pay_show">
      <image-alert :image="data.payImg" :height="'50'"></image-alert>
      <img id="alipay-img" src="@/assets/img/alipay.png">
      <div class="img_text">
          <p>当前绑定的支付宝账号：<span style="color:green;"></span>{{data.aliPayCode}}</p>
          <p>(如需更换支付宝账号，请联系EDS客服)</p>
      </div>
    </div>

    <div class="main">
      <el-tabs type="border-card" @tab-click="handleChangeBrand">
        <el-tab-pane :label="item.brandName"
        v-for="(item, index) in data.brand"
        :key="index">

          <div class="brand_main">
            <div class="code_box">
              <div class="code">
                  <img :src="tableData.edsQRcodeSmall" alt="">
              </div>
              <el-button type="primary" @click="handleShowCode" size="big">EDS扫码付（手机端入口）</el-button>
            </div>
            <div class="table">
              <div class="tit">下载尺寸</div>

              <table>
                <tbody>
                  <tr class="head">
                    <th>海报尺寸</th>
                    <th>二维码边长</th>
                    <th>建议扫描距离</th>
                    <th>下载</th>
                  </tr>
                  <tr class="body">
                    <td>6cm*9cm</td>
                    <td>3.5cm</td>
                    <td>0.2m</td>
                    <td><a :href="tableData.edsQRcodeSmall"><img src="@/assets/img/down.png" alt=""></a></td>
                  </tr>
                  <tr class="body">
                    <td>10cm*15cm</td>
                    <td>6cm</td>
                    <td>0.5m</td>
                    <td><a :href="tableData.edsQRcodeMedium"><img src="@/assets/img/down.png" alt=""></a></td>
                  </tr>
                  <tr class="body">
                    <td>14cm*21cm</td>
                    <td>8.3cm</td>
                    <td>0.8m</td>
                    <td><a :href="tableData.edsQRcodeBig"><img src="@/assets/img/down.png" alt=""></a></td>
                  </tr>

                </tbody>
              </table>

            </div>
          </div>

        </el-tab-pane>

        </el-tabs>


    </div>
  </div>
</template>

<script>
export default {
  name: 'setpwd',
  data () {
    return {
      breadcrumb:[],
        data:{},
        show:false,
        // act:0,
        tableData:{}
    }
  },
  mounted() {
    // 时间钩子
      // this.init()
  },
  methods:{
    // 执行方法
     handleShowCode(res){
      this.show = !this.show
    },
    init(){
      this.$axios.get(this.HOST + '/sys/payinfo')
      .then((res) => {
        if(res.data.code == 200){
          this.data = res.data.data
          this.tableData = this.data.brand[0]
        }

        // console.dir(this.data)
      })
      .catch((err) => {
        console.log(err)
      })
    },
    handleChangeBrand(t, event){
      // 选出表单
      for(let i = 0;i < this.data.brand.length;i++ ){
        if(i == t.index){
          this.tableData = this.data.brand[i]
        }
      }

      // console.dir(this.tableData)
    }
  },
  components:{
    // 传入组件
  // codeAlert
  }
}
</script>

<style lang="scss" scoped>

</style>
