|
- <template>
- <div class="page justify-around">
- <el-alert :title="`${$t('recharge.currencyValue')}:${currentValue}`" type="success" :closable="false" />
-
- <el-table :data="tableData" style="width: 100%; height: 90%" size="large" align="center" border>
- <el-table-column
- prop="productTitle"
- :label="$t('recharge.productTitle')"
- align="center"
- />
-
- <el-table-column
- prop="orderNumber"
- :label="$t('recharge.orderNumber')"
- align="center"
- />
- <el-table-column
- prop="paymentStr"
- :label="$t('recharge.payment')"
- align="center"
- />
-
- <el-table-column
- prop="createTime"
- :label="$t('recharge.createTime')"
- align="center"
- >
- <template #default="scope">
- {{ getDate(scope.row.createTime) }}
- </template>
- </el-table-column>
- <el-table-column
- fixed="right"
- :label="$t('recharge.operate')"
- align="center"
- >
- <template #default="scope">
- <el-button link type="primary" size="small" @click="detailView(scope.row)">{{ $t('recharge.view') }}</el-button>
- </template>
- </el-table-column>
- </el-table>
-
- <div class="pagination">
- <el-pagination
- v-model:current-page="pageNum"
- v-model:page-size="pageSize"
- :page-sizes="[10, 50, 100]"
- :small="false"
- :disabled="false"
- :background="true"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- />
- </div>
- <el-dialog v-model="dialogVisible" :title="`${ $t('recharge.detailTitle')}:`" width="40%" >
- <el-form :model="form" label-width="120px">
- <el-form-item :label="$t('recharge.productTitle')">
- <el-input v-model="form.productTitle" />
- </el-form-item>
- <el-form-item :label="$t('recharge.orderNumber')">
- <el-input v-model="form.orderNumber" />
- </el-form-item>
- <el-form-item :label="$t('recharge.payVendor')">
- <el-radio-group v-model="form.payVendor">
- <el-radio :label="2">{{ $t('recharge.weChat') }}</el-radio>
- <el-radio :label="4">{{$t('recharge.alipay')}}</el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item :label="$t('recharge.paymentStr')">
- <el-input v-model="form.paymentStr" />
- </el-form-item>
- <el-form-item :label="$t('recharge.orderStatus')">
- <el-input v-model="form.orderStatus" />
- </el-form-item>
- <el-form-item :label="$t('recharge.paymentTime')">
- <el-input v-model="form.paymentTime" />
- </el-form-item>
- <el-form-item>
- <el-button @click="dialogVisible = false">{{ $t('recharge.close') }}</el-button>
- </el-form-item>
- </el-form>
- </el-dialog>
- </div>
- </template>
-
- <!-- videoType==1为竖,==2为横 -->
- <script setup>
- //#region 导入
- import { rechargeListApi, getDetailApi, getUserPoinsApi, findByNumberApi } from '@/apis/my.js'
- import dayjs from "dayjs";
- import { useI18n } from "vue-i18n";
- const { locale } = useI18n();
- const lanChange = ref(locale);
-
- const tableData = ref([]);
-
- const pageNum = ref(1);
- const pageSize = ref(10);
- const total = ref(0);
-
- const getDate = (val) => {
- return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
- };
-
- const handleSizeChange = (val) => {
- pageSize.value = val;
- getListData(pageNum.value, pageSize.value);
- };
-
- const handleCurrentChange = (val) => {
- pageNum.value = val;
- getListData(pageNum.value, pageSize.value);
- };
-
- const getListData = async (PageNum, PageSize) => {
- try {
- let data = {
- projectType: 2,
- pageNum: 1,
- pageSize: 10
- }
- const res = await rechargeListApi(data);
- tableData.value = res.data.list;
- total.value = res.data.total * 1;
- } catch (error) {
- console.log(error, "err");
- }
- };
-
- // 当前币值
- const currentValue = ref('')
- function currentValFn() {
- getUserPoinsApi().then(res => {
- currentValue.value = res.data
- })
- }
-
- // 查看详情
- const dialogVisible = ref(false)
- const form = ref({
- productTitle: '',
- orderStatus:'',
- paymentTime: '',
- })
-
- function detailView(item) {
- findByNumberApi(item.id).then(res => {
- res.data.paymentTime = getDate(res.data.paymentTime)
- res.data.orderStatus = res.data.orderStatus === 3 ? lanChange.value == "zh-cn" ? '支付成功' : 'Payment successful': lanChange.value == "zh-cn" ? '支付失败' : 'Payment failed'
- form.value = res.data
- dialogVisible.value = true
- })
- }
-
- onMounted(() => {
- getListData(1, 10);
- currentValFn()
- });
- </script>
-
- <style lang="scss" scoped>
- .page {
- height: calc(100vh - 80px);
- // height: calc(100vh - 80px);
- background-color: #ffffff;
- border-radius: 30px 0 0 0;
- overflow: hidden;
- padding: 10vh;
- .addbtn {
- margin-bottom: 2vh;
- }
- .formData {
- padding: 5vh 3vh;
- }
-
- .pagination {
- position: fixed;
- left: 55%;
- bottom: 8vh;
- transform: translateX(-50%);
- border-radius: 5px;
- padding: 10px 20px;
- z-index: 99;
- transition: all 0.3s;
- cursor: pointer;
- &:hover {
- background-color: #b8b8b873;
- }
- }
- }
- </style>
|