yos_meida/src/SManagement/user/pay-orders/modules/payment.vue

<template>
  <div>
    <el-dialog
        title="待付费订单"
        :visible.sync="dialogVisible"
        width="900px"
        @close="onClose">
      <el-row :gutter="20" style="margin-top: -20px">
        <el-col :span="24" >
          <span class="span_title">订单信息</span>
        </el-col>
        <el-col :span="24">
          <div class="div_border">
            <el-col :span="6" class="div_span_top">
              <span>付费订单号：{{list.orderno}}</span>
            </el-col>
            <el-col :span="6" class="div_span_top">
              <span>付费状态：
                <span v-if="list.ispaid == '0' || list.ispaid == '2'" style="color: red">未付费</span>
                <span v-else>已付费</span>
              </span>
            </el-col>
            <el-col :span="6" class="div_span_top">
              <span>付费金额(元)：
                <span style="color: red"> {{tool.formatAmount(list.amount,2)}}</span>
              </span>
            </el-col>
            <el-col :span="6" class="div_span_top">
              <span>付费版本：{{list.partitionname}}</span>
            </el-col>
            <el-col :span="6" class="div_span_top">
              <span>付费类型：{{list.sys_payincidence == '1'?'按账号付费':'按主体付费'}}</span>
            </el-col>
            <el-col :span="12" class="div_span_top">
              <span>备注：{{list.remarks}}</span>
            </el-col>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="24" >
          <span class="span_title">付费版本：
            <span style="color: #4f7bfd;font-weight: bold;font-size: 17px">{{list.partitionname}}</span>
          </span>
        </el-col>
        <el-col :span="24" class="div_span_top">
          <tableLayout :layout="tablecolsModule" :data="moduleList" :opwidth="200" :custom="true"  :height="200 + 'px'" >
            <template v-slot:customcol="scope">
              <p >{{scope.column.data[scope.column.columnname] || '--'}}</p>
            </template>
          </tableLayout>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="24" >
          <span class="span_title">付费账号：
          </span>
        </el-col>
        <el-col :span="24" class="div_span_top" v-if="list.sys_payincidence == '1'">
          <tableLayout :layout="tablecolsAccount" :data="accountList" :opwidth="200" :custom="true"  :height="200 + 'px'">
            <template v-slot:customcol="scope">
              <p >{{scope.column.data[scope.column.columnname] || '--'}}</p>
            </template>
          </tableLayout>
        </el-col>
        <el-col :span="24" class="div_span_top" v-else>
          <tableLayout :layout="tablecolsMain" :data="accountList" :opwidth="200" :custom="true" :height="200 + 'px'" >
            <template v-slot:customcol="scope">
              <p >{{scope.column.data[scope.column.columnname] || '--'}}</p>
            </template>
          </tableLayout>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="24" >
          <span class="span_title">付费二维码
          </span>
        </el-col>
        <el-col :span="24">
            <vue-qr style="margin-left: 35%" :text="code_url" :size="200"></vue-qr>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer ">
        <el-button style="margin-right: 45% !important;" @click="onClose" size="small" class="normal-btn-width">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableLayout from '@/components/table/index2.vue'
import vueQr from 'vue-qr'
export default {
  name: "payment",
  props:['data'],
  components:{tableLayout,vueQr},
  data() {
    return {
      dialogVisible:false,
      list:{},
      accountList:[],
      param:{
        "classname": "system.payorder.payorder",
        "method": "detail_userlist",
        "content": {
          "sys_payorderid": '',
          "pageNumber": 1,
          "pageSize": 99,
          "where": {
            "condition": ""
          }
        }
      },
      tablecolsModule:[],
      moduleList:[],
      tablecolsAccount:[],
      tablecolsMain:[],
      code_url:''
    }
  },
  methods:{
    /*获取订单详情*/
    async queryData(id){
      const res = await this.$api.requested({
        "classname": "system.payorder.payorder",
        "method": "detail",
        "content": {
          "sys_payorderid": this.$route.query.id || id
        },
      })
      console.log(res,'订单详情付款')
      this.list = res.data
      this.moduleList = res.data.systemapp
    },
    /*获取账号列表*/
    async queryAccount(id){
      this.param.content.sys_payorderid = this.$route.query.id || id
      const res = await this.$api.requested(this.param)
      console.log(res,'账号列表付款')
      this.accountList = res.data
    },
    /*获取付费二维码*/
    async queryCode(orderno){
      const res = await this.$api.requested({
        "classname": "system.payment.wechatpay",
        "method": "createNativeWechatOrder",
        "content": {
          "orderno": orderno
        },
      })
      console.log(res,'付费二维码')
      this.code_url = res.data.code_url
    },

    onClose(){
      this.dialogVisible = false
      this.$emit('closeSuccess')
    }

  },
  mounted() {

  },
  created() {
    this.tablecolsModule = this.tool.tabelCol(this.$route.name).moduleTable.tablecols
    this.tablecolsAccount = this.tool.tabelCol(this.$route.name).payAccountTable.tablecols
    this.tablecolsMain = this.tool.tabelCol(this.$route.name).payMainbodyTable.tablecols
  }

}
</script>

<style scoped>
  /deep/ .el-dialog__title {
    line-height: 24px;
    font-size: 15px;
    color: #303133;
    font-weight: bold;
  }
  .span_title{
    font-weight: bold;
    color: #303133;
  }
  .div_border{
    margin-top: 20px;
    border: 2px dashed #c9c3c3;
    width: 100%;
    height: 100px;
    border-radius: 5px;
  }
  .div_span_top{
    margin-top: 20px;
  }
</style>