detail.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. <template>
  2. <div>
  3. <div class="container normal-panel normal-margin flex-between" v-if="list.ispaid == '0'">
  4. <el-button class="inline-24" type="primary" size="small" @click="onPay" v-if="tool.checkAuth($route.name,'update')">继续付费</el-button>
  5. <payment ref="payment" v-if="tool.checkAuth($route.name,'update')"></payment>
  6. </div>
  7. <div class="container normal-panel">
  8. <el-row :gutter="20">
  9. <el-col :sapn="24">
  10. <span class="title-style">订单详情</span>
  11. </el-col>
  12. <el-col :span="6" class="span-top">
  13. <span>付费订单号:{{list.orderno || '--'}}</span>
  14. </el-col>
  15. <el-col :span="6" class="span-top">
  16. <span >付费状态:
  17. <span v-if="list.ispaid == '0'" style="color: red">未付费</span>
  18. <span v-else-if="list.ispaid == '3'" style="color: #afb0be">已取消</span>
  19. <span v-else style="color: green">已付费</span>
  20. </span>
  21. </el-col>
  22. <el-col :span="6" class="span-top">
  23. <span >付费金额(元):
  24. <span style="color: red">{{tool.formatAmount(list.amount,2) || '--'}}</span>
  25. </span>
  26. </el-col>
  27. <el-col :span="6" class="span-top">
  28. <span>付费类型:{{list.sys_payincidence == '1'?'按账号付费':'按主体付费'}}</span>
  29. </el-col>
  30. <el-col :span="6" class="span-top">
  31. <span>付费时间:{{list.paytime || '--'}}</span>
  32. </el-col>
  33. <el-col :span="6" class="span-top">
  34. <span>付费人:{{list.createby || '--'}}</span>
  35. </el-col>
  36. <el-col :span="6" class="span-top">
  37. <span>付款渠道:{{list.paymode || '--'}}</span>
  38. </el-col>
  39. <el-col :span="6" class="span-top">
  40. <span>备注:{{list.remarks || '--'}}</span>
  41. </el-col>
  42. </el-row>
  43. </div>
  44. <div class="container normal-panel" style="margin-top: 20px">
  45. <el-row :gutter="20">
  46. <el-col :sapn="24">
  47. <span class="title-style">付费订单列表</span>
  48. </el-col>
  49. <el-col :span="24" v-if="list.sys_payincidence == '1'">
  50. <el-table
  51. class="table-style"
  52. :data="accountList"
  53. style="width: 100%;margin-top: 20px" border
  54. :height="height ? height : accountList.length <= 4?'260px':accountList.length <= 20?'calc(100vh - 420px)':'calc(100vh - 220px)'"
  55. :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}"
  56. :header-cell-style="{height:'40px',color:'#333',fontWeight:'400',fontSize:'14px',background:'#EEEEEE'}">
  57. <el-table-column
  58. prop="name"
  59. label="账号名称"
  60. >
  61. </el-table-column>
  62. <el-table-column
  63. prop="accountno"
  64. label="账号"
  65. >
  66. </el-table-column>
  67. <el-table-column
  68. prop="partitionname"
  69. label="付费版本"
  70. >
  71. </el-table-column>
  72. <el-table-column
  73. prop="price"
  74. label="单价"
  75. >
  76. <template slot-scope="scope">
  77. <span style="color: red">
  78. {{tool.formatAmount(scope.row.price,2)}}
  79. </span>
  80. </template>
  81. </el-table-column>
  82. <el-table-column
  83. prop="begdate"
  84. label="生效时间"
  85. >
  86. </el-table-column>
  87. <el-table-column
  88. prop="enddate"
  89. label="到期时间"
  90. >
  91. </el-table-column>
  92. </el-table>
  93. <div class="container normal-panel" style="text-align:right">
  94. <el-pagination
  95. background
  96. @size-change="handleSizeChange"
  97. @current-change="handleCurrentChange"
  98. :current-page="currentPage"
  99. :page-sizes="[20, 50, 100, 200]"
  100. :page-size="20"
  101. layout="total,sizes, prev, pager, next, jumper"
  102. :total="total">
  103. </el-pagination>
  104. </div>
  105. </el-col>
  106. <el-col :span="24" v-else>
  107. <el-table
  108. class="table-style"
  109. :data="accountList"
  110. style="width: 100%;margin-top: 20px" border
  111. :height="height ? height : accountList.length <= 4?'260px':accountList.length <= 20?'calc(100vh - 420px)':'calc(100vh - 220px)'"
  112. :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}"
  113. :header-cell-style="{height:'40px',color:'#333',fontWeight:'400',fontSize:'14px',background:'#EEEEEE'}">
  114. <el-table-column
  115. prop="agentname"
  116. label="付费主体"
  117. >
  118. </el-table-column>
  119. <el-table-column
  120. prop="partitionname"
  121. label="付费版本"
  122. >
  123. </el-table-column>
  124. <el-table-column
  125. prop="price"
  126. label="单价"
  127. >
  128. </el-table-column>
  129. <el-table-column
  130. prop="begdate"
  131. label="生效时间"
  132. >
  133. </el-table-column>
  134. <el-table-column
  135. prop="enddate"
  136. label="到期时间"
  137. >
  138. </el-table-column>
  139. </el-table>
  140. <div class="container normal-panel" style="text-align:right">
  141. <el-pagination
  142. background
  143. @size-change="handleSizeChange"
  144. @current-change="handleCurrentChange"
  145. :current-page="currentPage"
  146. :page-sizes="[20, 50, 100, 200]"
  147. :page-size="20"
  148. layout="total,sizes, prev, pager, next, jumper"
  149. :total="total">
  150. </el-pagination>
  151. </div>
  152. </el-col>
  153. </el-row>
  154. </div>
  155. </div>
  156. </template>
  157. <script>
  158. import payment from './payment.vue'
  159. import {log} from "@antv/g2plot/lib/utils";
  160. export default {
  161. name: "detail",
  162. components:{payment},
  163. data() {
  164. return {
  165. onPayment:true,
  166. list:{},
  167. accountList:[],
  168. height:'',
  169. total:0,
  170. currentPage:0,
  171. auth_data:'',
  172. param:{
  173. "classname": "system.payorder.payorder",
  174. "method": "detail_userlist",
  175. "content": {
  176. "sys_payorderid": this.$route.query.id,
  177. "pageNumber": 1,
  178. "pageSize": 20,
  179. "where": {
  180. "nocache":true,
  181. "condition": ""
  182. }
  183. }
  184. }
  185. }
  186. },
  187. methods:{
  188. /*获取订单详情*/
  189. async queryData(){
  190. const res = await this.$api.requested({
  191. "classname": "system.payorder.payorder",
  192. "method": "detail",
  193. "content": {
  194. "nocache":true,
  195. "sys_payorderid": this.$route.query.id
  196. },
  197. })
  198. console.log(res,'订单详情')
  199. this.list = res.data
  200. },
  201. /*获取账号列表*/
  202. async queryAccount(){
  203. const res = await this.$api.requested(this.param)
  204. console.log(res,'账号列表')
  205. this.accountList = res.data
  206. this.total = res.total
  207. this.currentPage = res.pageNumber
  208. },
  209. handleSizeChange(val) {
  210. // console.log(`每页 ${val} 条`);
  211. this.param.content.pageSize = val
  212. this.queryAccount()
  213. },
  214. handleCurrentChange(val) {
  215. // console.log(`当前页: ${val}`);
  216. this.param.content.pageNumber = val
  217. this.queryAccount()
  218. },
  219. onPay(){
  220. let that = this
  221. that.$refs.payment.dialogVisible = true
  222. this.$refs.payment.queryAccount()
  223. this.$refs.payment.queryData()
  224. this.$refs.payment.queryCode(this.list.orderno)
  225. console.log(this)
  226. this.payChangeFun(function(a) {
  227. console.log(a)
  228. a.result = () => {
  229. that.$refs.payment.dialogVisible = false
  230. /*this.$router.push('/main')*/
  231. that.queryAuth()
  232. that.queryData()
  233. }
  234. })
  235. },
  236. async queryAuth(){
  237. const res = await this.$api.requested({
  238. "classname": "system.payorder.payorder",
  239. "method": "query_userauth",
  240. "content": {
  241. "nocache":true
  242. }
  243. })
  244. this.auth_data = res.data
  245. console.log(this.auth_data)
  246. sessionStorage.setItem('module_info', JSON.stringify(this.auth_data))
  247. }
  248. },
  249. mounted() {
  250. this.queryData()
  251. this.queryAccount()
  252. }
  253. }
  254. </script>
  255. <style scoped>
  256. .title-style{
  257. font-weight: bold;
  258. font-size: 15px;
  259. }
  260. .span-top{
  261. margin-top: 20px;
  262. font-size: 15px;
  263. }
  264. </style>