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