付费订单新增付费详情

src/HManagement/siteManage/paymentRules/modules/orderDetails.vue

@@ -0,0 +1,265 @@
+<template>
+  <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>
+export default {
+  name: "orderDetails",
+  props:["id"],
+  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.id,
+          "pageNumber": 1,
+          "pageSize": 20,
+          "where": {
+            "nocache":true,
+            "condition": ""
+          }
+        }
+      }
+    }
+  },
+  methods:{
+    /*获取订单详情*/
+    async queryData(){
+      console.log(this.id)
+      const res = await this.$api.requested({
+        "classname": "system.payorder.payorder",
+        "method": "detail",
+        "content": {
+          "nocache":true,
+          "sys_payorderid": this.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>

src/HManagement/siteManage/paymentRules/modules/payOrders.vue

@@ -43,6 +43,11 @@
             <span v-else-if="scope.column.columnname === 'amount'" >
                 <span style="color: red">{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
             </span>
+            <div v-else-if="scope.column.columnname === 'orderno'" >
+              <el-button type="text" @click="detailGo(scope.column.data)">
+                {{scope.column.data[scope.column.columnname]}}
+              </el-button>
+            </div>
             <p v-else>{{scope.column.data[scope.column.columnname] || '--'}}</p>
           </template>
         </tableLayout>
@@ -60,17 +65,32 @@
         </div>
       </div>
     </el-drawer>
+    <el-drawer
+        :visible.sync="drawerDetail"
+        :with-header="false"
+        direction="rtl"
+        size="90%"
+        append-to-body
+    >
+      <div class="detail__panel">
+        <orderDetails :id="orderId"></orderDetails>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
 <script>
+import orderDetails from './orderDetails'
 export default {
   name: "payOrders",
+  components:{orderDetails},
   data() {
     return {
       drawer:false,
+      drawerDetail:false,
       tablecols:[],
       list:[],
+      orderId:'',
       currentPage:0,
       total:0,
       selectDate:'',
@@ -106,6 +126,11 @@ export default {
       this.drawer = true
       this.listData()
     },
+    detailGo(val){
+      console.log(val)
+      this.orderId = val.sys_payorderid
+      this.drawerDetail = true
+    },
     async listData(){
       const res = await this.$api.requested(this.param)
       this.list = res.data