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

<template>
  <div>
    <div class="container normal-panel normal-margin  flex-between" v-if="list.ispaid == '0'">
      <el-button class="inline-24" type="primary" size="small" @click="onPay" v-if="tool.checkAuth($route.name,'update')">继续付费</el-button>
      <payment ref="payment" v-if="tool.checkAuth($route.name,'update')"></payment>
    </div>
    <div class="container normal-panel">
      <el-row :gutter="20">
        <el-col :sapn="24">
          <span class="title-style">订单详情</span>
        </el-col>
        <el-col :span="6" class="span-top">
          <span>付费订单号：{{list.orderno || '--'}}</span>
        </el-col>
        <el-col :span="6" class="span-top">
          <span >付费状态：
             <span v-if="list.ispaid == '0'" style="color: red">未付费</span>
            <span v-else-if="list.ispaid == '3'" style="color: #afb0be">已取消</span>
              <span v-else style="color: green">已付费</span>
          </span>

        </el-col>
        <el-col :span="6" class="span-top">
          <span >付费金额(元)：
            <span style="color: red">{{tool.formatAmount(list.amount,2) || '--'}}</span>
          </span>
        </el-col>
        <el-col :span="6" class="span-top">
          <span>付费类型：{{list.sys_payincidence == '1'?'按账号付费':'按主体付费'}}</span>
        </el-col>
        <el-col :span="6" class="span-top">
          <span>付费时间：{{list.paytime || '--'}}</span>
        </el-col>
        <el-col :span="6" class="span-top">
          <span>付费人：{{list.createby || '--'}}</span>
        </el-col>
        <el-col :span="6" class="span-top">
          <span>付款渠道：{{list.paymode || '--'}}</span>
        </el-col>
        <el-col :span="6" class="span-top">
          <span>备注：{{list.remarks || '--'}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="container normal-panel" style="margin-top: 20px">
      <el-row :gutter="20">
        <el-col :sapn="24">
          <span class="title-style">付费订单列表</span>
        </el-col>
        <el-col :span="24" v-if="list.sys_payincidence == '1'">
          <el-table
              class="table-style"
              :data="accountList"
              style="width: 100%;margin-top: 20px" border
              :height="height ? height : accountList.length <= 4?'260px':accountList.length <= 20?'calc(100vh - 420px)':'calc(100vh - 220px)'"
              :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}"
              :header-cell-style="{height:'40px',color:'#333',fontWeight:'400',fontSize:'14px',background:'#EEEEEE'}">
            <el-table-column
                prop="name"
                label="账号名称"
            >
            </el-table-column>
            <el-table-column
                prop="accountno"
                label="账号"
            >
            </el-table-column>
            <el-table-column
                prop="partitionname"
                label="付费版本"
            >
            </el-table-column>
            <el-table-column
                prop="price"
                label="单价"
            >
              <template slot-scope="scope">
                <span style="color: red">
                  {{tool.formatAmount(scope.row.price,2)}}
                </span>

              </template>
            </el-table-column>
            <el-table-column
                prop="begdate"
                label="生效时间"
            >
            </el-table-column>
            <el-table-column
                prop="enddate"
                label="到期时间"
            >
            </el-table-column>
          </el-table>
          <div  class="container normal-panel" style="text-align:right">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="20"
                layout="total,sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
        </el-col>
        <el-col :span="24" v-else>
          <el-table
              class="table-style"
              :data="accountList"
              style="width: 100%;margin-top: 20px" border
              :height="height ? height : accountList.length <= 4?'260px':accountList.length <= 20?'calc(100vh - 420px)':'calc(100vh - 220px)'"
              :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}"
              :header-cell-style="{height:'40px',color:'#333',fontWeight:'400',fontSize:'14px',background:'#EEEEEE'}">
            <el-table-column
                prop="agentname"
                label="付费主体"
            >
            </el-table-column>
            <el-table-column
                prop="partitionname"
                label="付费版本"
            >
            </el-table-column>
            <el-table-column
                prop="price"
                label="单价"
            >
            </el-table-column>
            <el-table-column
                prop="begdate"
                label="生效时间"
            >
            </el-table-column>
            <el-table-column
                prop="enddate"
                label="到期时间"
            >
            </el-table-column>
          </el-table>
          <div  class="container normal-panel" style="text-align:right">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="20"
                layout="total,sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import payment from './payment.vue'
import {log} from "@antv/g2plot/lib/utils";

export default {
  name: "detail",
  components:{payment},
  data() {
    return {
      onPayment:true,
      list:{},
      accountList:[],
      height:'',
      total:0,
      currentPage:0,
      auth_data:'',
      param:{
        "classname": "system.payorder.payorder",
        "method": "detail_userlist",
        "content": {
          "sys_payorderid": this.$route.query.id,
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "nocache":true,
            "condition": ""
          }
        }
      }
    }
  },
  methods:{
    /*获取订单详情*/
    async queryData(){
      const res = await this.$api.requested({
        "classname": "system.payorder.payorder",
        "method": "detail",
        "content": {
          "nocache":true,
          "sys_payorderid": this.$route.query.id
        },
      })
      console.log(res,'订单详情')
      this.list = res.data
    },
    /*获取账号列表*/
    async queryAccount(){
      const res = await this.$api.requested(this.param)
      console.log(res,'账号列表')
      this.accountList = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.queryAccount()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.queryAccount()
    },
    onPay(){
      let that = this
      that.$refs.payment.dialogVisible = true
      this.$refs.payment.queryAccount()
      this.$refs.payment.queryData()
      this.$refs.payment.queryCode(this.list.orderno)
      console.log(this)
      this.payChangeFun(function(a) {
        console.log(a)
        a.result  =  () => {
          that.$refs.payment.dialogVisible = false

          /*this.$router.push('/main')*/
          that.queryAuth()
          that.queryData()
        }
      })
    },
    async queryAuth(){
      const res = await this.$api.requested({
        "classname": "system.payorder.payorder",
        "method": "query_userauth",
        "content": {
          "nocache":true
        }
      })
      this.auth_data = res.data
      console.log(this.auth_data)
      sessionStorage.setItem('module_info', JSON.stringify(this.auth_data))
    }
  },
  mounted() {
    this.queryData()
    this.queryAccount()
  }
}
</script>

<style scoped>
  .title-style{
    font-weight: bold;
    font-size: 15px;
  }
  .span-top{
    margin-top: 20px;
    font-size: 15px;
  }

</style>