邃芒慧影、口播(PC) https://neuver.metavatar.cc/
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

194 linhas
5.1 KiB

  1. <template>
  2. <div class="page justify-around">
  3. <el-alert :title="`${$t('recharge.currencyValue')}:${currentValue}`" type="success" :closable="false" />
  4. <el-table :data="tableData" style="width: 100%; height: 90%" size="large" align="center" border>
  5. <el-table-column
  6. prop="productTitle"
  7. :label="$t('recharge.productTitle')"
  8. align="center"
  9. />
  10. <el-table-column
  11. prop="orderNumber"
  12. :label="$t('recharge.orderNumber')"
  13. align="center"
  14. />
  15. <el-table-column
  16. prop="paymentStr"
  17. :label="$t('recharge.payment')"
  18. align="center"
  19. />
  20. <el-table-column
  21. prop="createTime"
  22. :label="$t('recharge.createTime')"
  23. align="center"
  24. >
  25. <template #default="scope">
  26. {{ getDate(scope.row.createTime) }}
  27. </template>
  28. </el-table-column>
  29. <el-table-column
  30. fixed="right"
  31. :label="$t('recharge.operate')"
  32. align="center"
  33. >
  34. <template #default="scope">
  35. <el-button link type="primary" size="small" @click="detailView(scope.row)">{{ $t('recharge.view') }}</el-button>
  36. </template>
  37. </el-table-column>
  38. </el-table>
  39. <div class="pagination">
  40. <el-pagination
  41. v-model:current-page="pageNum"
  42. v-model:page-size="pageSize"
  43. :page-sizes="[10, 50, 100]"
  44. :small="false"
  45. :disabled="false"
  46. :background="true"
  47. layout="total, sizes, prev, pager, next, jumper"
  48. :total="total"
  49. @size-change="handleSizeChange"
  50. @current-change="handleCurrentChange"
  51. />
  52. </div>
  53. <el-dialog v-model="dialogVisible" :title="`${ $t('recharge.detailTitle')}:`" width="40%" >
  54. <el-form :model="form" label-width="120px">
  55. <el-form-item :label="$t('recharge.productTitle')">
  56. <el-input v-model="form.productTitle" />
  57. </el-form-item>
  58. <el-form-item :label="$t('recharge.orderNumber')">
  59. <el-input v-model="form.orderNumber" />
  60. </el-form-item>
  61. <el-form-item :label="$t('recharge.payVendor')">
  62. <el-radio-group v-model="form.payVendor">
  63. <el-radio :label="2">{{ $t('recharge.weChat') }}</el-radio>
  64. <el-radio :label="4">{{$t('recharge.alipay')}}</el-radio>
  65. </el-radio-group>
  66. </el-form-item>
  67. <el-form-item :label="$t('recharge.paymentStr')">
  68. <el-input v-model="form.paymentStr" />
  69. </el-form-item>
  70. <el-form-item :label="$t('recharge.orderStatus')">
  71. <el-input v-model="form.orderStatus" />
  72. </el-form-item>
  73. <el-form-item :label="$t('recharge.paymentTime')">
  74. <el-input v-model="form.paymentTime" />
  75. </el-form-item>
  76. <el-form-item>
  77. <el-button @click="dialogVisible = false">{{ $t('recharge.close') }}</el-button>
  78. </el-form-item>
  79. </el-form>
  80. </el-dialog>
  81. </div>
  82. </template>
  83. <!-- videoType==1为竖,==2为横 -->
  84. <script setup>
  85. //#region 导入
  86. import { rechargeListApi, getDetailApi, getUserPoinsApi, findByNumberApi } from '@/apis/my.js'
  87. import dayjs from "dayjs";
  88. import { useI18n } from "vue-i18n";
  89. const { locale } = useI18n();
  90. const lanChange = ref(locale);
  91. const tableData = ref([]);
  92. const pageNum = ref(1);
  93. const pageSize = ref(10);
  94. const total = ref(0);
  95. const getDate = (val) => {
  96. return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
  97. };
  98. const handleSizeChange = (val) => {
  99. pageSize.value = val;
  100. getListData(pageNum.value, pageSize.value);
  101. };
  102. const handleCurrentChange = (val) => {
  103. pageNum.value = val;
  104. getListData(pageNum.value, pageSize.value);
  105. };
  106. const getListData = async (PageNum, PageSize) => {
  107. try {
  108. let data = {
  109. projectType: 2,
  110. pageNum: 1,
  111. pageSize: 10
  112. }
  113. const res = await rechargeListApi(data);
  114. tableData.value = res.data.list;
  115. total.value = res.data.total * 1;
  116. } catch (error) {
  117. console.log(error, "err");
  118. }
  119. };
  120. // 当前币值
  121. const currentValue = ref('')
  122. function currentValFn() {
  123. getUserPoinsApi().then(res => {
  124. currentValue.value = res.data
  125. })
  126. }
  127. // 查看详情
  128. const dialogVisible = ref(false)
  129. const form = ref({
  130. productTitle: '',
  131. orderStatus:'',
  132. paymentTime: '',
  133. })
  134. function detailView(item) {
  135. findByNumberApi(item.id).then(res => {
  136. res.data.paymentTime = getDate(res.data.paymentTime)
  137. res.data.orderStatus = res.data.orderStatus === 3 ? lanChange.value == "zh-cn" ? '支付成功' : 'Payment successful': lanChange.value == "zh-cn" ? '支付失败' : 'Payment failed'
  138. form.value = res.data
  139. dialogVisible.value = true
  140. })
  141. }
  142. onMounted(() => {
  143. getListData(1, 10);
  144. currentValFn()
  145. });
  146. </script>
  147. <style lang="scss" scoped>
  148. .page {
  149. height: calc(100vh - 80px);
  150. // height: calc(100vh - 80px);
  151. background-color: #ffffff;
  152. border-radius: 30px 0 0 0;
  153. overflow: hidden;
  154. padding: 10vh;
  155. .addbtn {
  156. margin-bottom: 2vh;
  157. }
  158. .formData {
  159. padding: 5vh 3vh;
  160. }
  161. .pagination {
  162. position: fixed;
  163. left: 55%;
  164. bottom: 8vh;
  165. transform: translateX(-50%);
  166. border-radius: 5px;
  167. padding: 10px 20px;
  168. z-index: 99;
  169. transition: all 0.3s;
  170. cursor: pointer;
  171. &:hover {
  172. background-color: #b8b8b873;
  173. }
  174. }
  175. }
  176. </style>