|
|
@@ -1,5 +1,343 @@
|
|
|
-<script setup lang="ts"></script>
|
|
|
+<template>
|
|
|
+ <div
|
|
|
+ id="review_Email"
|
|
|
+ v-loading="pictLoading"
|
|
|
+ class="view"
|
|
|
+ :element-loading-background="'rgba(43, 48, 67, 0.65)'"
|
|
|
+ :element-loading-spinner="'el-icon-loading'"
|
|
|
+ >
|
|
|
+ <div class="crm_search">
|
|
|
+ <el-form ref="formRef" :model="search" label-width="">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" :md="24" :lg="24">
|
|
|
+ <el-form-item>
|
|
|
+ <el-select
|
|
|
+ v-model="search.tag"
|
|
|
+ class="crm_search_down crm-border-radius-no"
|
|
|
+ :placeholder="t('Placeholder.Choose')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="option in tagOptions"
|
|
|
+ :key="option.value"
|
|
|
+ :label="t(option.label)"
|
|
|
+ :value="option.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="margin-right: 10px">
|
|
|
+ <el-input
|
|
|
+ v-if="search.tag == 1"
|
|
|
+ v-model.trim="search.cId"
|
|
|
+ class="crm-border-left-no crm-border-radius-no"
|
|
|
+ clearable
|
|
|
+ :placeholder="t('Placeholder.Input')"
|
|
|
+ @keyup.enter="toSearch"
|
|
|
+ ></el-input>
|
|
|
+ <el-input
|
|
|
+ v-if="search.tag == 2"
|
|
|
+ v-model.trim="search.mobile"
|
|
|
+ class="crm-border-left-no crm-border-radius-no"
|
|
|
+ clearable
|
|
|
+ :placeholder="t('Placeholder.Input')"
|
|
|
+ @keyup.enter="toSearch"
|
|
|
+ ></el-input>
|
|
|
+ <el-input
|
|
|
+ v-if="search.tag == 3"
|
|
|
+ v-model.trim="search.email"
|
|
|
+ class="crm-border-left-no crm-border-radius-no"
|
|
|
+ clearable
|
|
|
+ :placeholder="t('Placeholder.Input')"
|
|
|
+ @keyup.enter="toSearch"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="margin-right: 10px">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="search.cardNumber"
|
|
|
+ class="crm-border-radius-no"
|
|
|
+ clearable
|
|
|
+ :placeholder="t('Placeholder.Input') + t('Ucard.Transactions.s1')"
|
|
|
+ @keyup.enter="toSearch"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select
|
|
|
+ v-model="search.type"
|
|
|
+ class="crm-border-radius-no"
|
|
|
+ clearable
|
|
|
+ :placeholder="t('Ucard.Transactions.s3')"
|
|
|
+ @change="toSearch"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(value, key) in types"
|
|
|
+ :key="key"
|
|
|
+ :label="t(value)"
|
|
|
+ :value="key"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ class="crm-border-radius-no crm-border-left-no"
|
|
|
+ :icon="Search"
|
|
|
+ @click="toSearch"
|
|
|
+ ></el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ v-if="display['R-Card-3DSTransaction-Export']?.show"
|
|
|
+ type="primary"
|
|
|
+ style="margin-left: 8px"
|
|
|
+ @click="exportAgents"
|
|
|
+ >
|
|
|
+ {{ t('Btn.Export') }}
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
|
|
|
-<template>1</template>
|
|
|
+ <div class="card-mock-demo" style="margin: 30px 0">
|
|
|
+ <el-table :data="mock_tableData" stripe style="margin-top: 20px; width: 100%">
|
|
|
+ <el-table-column prop="" align="left" :label="t('Label.CidAccount')">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span>{{ row.cId || '--' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="" align="left" :label="t('Label.Name')">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span v-if="row.firstName">
|
|
|
+ {{ row.firstName + ' ' }}
|
|
|
+ </span>
|
|
|
+ <span v-if="row.middle">{{ row.middle + ' ' }}</span>
|
|
|
+ <span v-if="row.lastName">{{ row.lastName }}</span>
|
|
|
+ <span v-if="!row.firstName && !row.lastName && !row.middle">
|
|
|
+ {{ '--' }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="" align="left" :label="t('Label.Email')">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ row.email || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="mobile" align="left" :label="t('Label.Mobile')">
|
|
|
+ <template #default="{ row }"> {{ row.areaCode }} {{ row.mobile }} </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="cardNumber" align="left" :label="t('Ucard.Transactions.item2')">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span
|
|
|
+ v-if="row.cardNumber"
|
|
|
+ class="crm-text-underline"
|
|
|
+ @click="cardOpen(row.cardNumber)"
|
|
|
+ >
|
|
|
+ {{ row.cardNumber || '--' }}
|
|
|
+ </span>
|
|
|
+ <span v-else>{{ row.cardNumber || '--' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="merchantName"
|
|
|
+ align="left"
|
|
|
+ :label="t('Ucard.3DSTransaction.item1')"
|
|
|
+ />
|
|
|
+ <el-table-column prop="currency" align="left" :label="t('Ucard.Transactions.item3')" />
|
|
|
+ <el-table-column prop="amount" align="left" :label="t('Ucard.Transactions.item4')" />
|
|
|
|
|
|
-<style scoped lang="scss"></style>
|
|
|
+ <el-table-column prop="tradeNo" align="left" :label="t('Ucard.Transactions.item8')" />
|
|
|
+ <el-table-column prop="value" align="left" :label="t('Ucard.3DSTransaction.item3')" />
|
|
|
+ <el-table-column prop="type" align="left" :label="t('Ucard.Transactions.item9')">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span>{{ t(types[row.type]) || '--' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="description" align="left" :label="t('Ucard.3DSTransaction.item2')">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span>{{ row.description || '--' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="transactionTime"
|
|
|
+ align="left"
|
|
|
+ :label="t('Ucard.3DSTransaction.item4')"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="expirationTime"
|
|
|
+ align="left"
|
|
|
+ :label="t('Ucard.3DSTransaction.item5')"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <PagePagination
|
|
|
+ :pager-info="pagerInfo"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import { ref, reactive, computed, onMounted, watch, inject } from 'vue'
|
|
|
+ import { useI18n } from 'vue-i18n'
|
|
|
+ import { useRouter } from 'vue-router'
|
|
|
+ import { ElMessage } from 'element-plus'
|
|
|
+ import { Search } from '@element-plus/icons-vue'
|
|
|
+ import Service from '@/service/ucard'
|
|
|
+ import Config from '@/config/index'
|
|
|
+ import { exportExcel } from '@/utils/export'
|
|
|
+ import PagePagination from '@/components/pagePagination/index.vue'
|
|
|
+ import { tagOptions, types } from '@/views/card/Card3DSTransaction/const'
|
|
|
+
|
|
|
+ const { t } = useI18n()
|
|
|
+ const { Code } = Config
|
|
|
+ const router = useRouter()
|
|
|
+ const Session = inject('session')
|
|
|
+ const pigeon = inject('pigeon')
|
|
|
+
|
|
|
+ // 响应式数据
|
|
|
+ const pictLoading = ref(false)
|
|
|
+ const mock_tableData = ref([])
|
|
|
+ const formRef = ref(null)
|
|
|
+
|
|
|
+ const search = reactive({
|
|
|
+ tag: 1,
|
|
|
+ mobile: '',
|
|
|
+ cId: '',
|
|
|
+ email: '',
|
|
|
+ cardNumber: '',
|
|
|
+ type: '',
|
|
|
+ })
|
|
|
+
|
|
|
+ const pagerInfo = reactive({
|
|
|
+ row: 10,
|
|
|
+ current: 1,
|
|
|
+ pageTotal: 0,
|
|
|
+ rowTotal: 0,
|
|
|
+ })
|
|
|
+
|
|
|
+ // 计算属性
|
|
|
+ const display = computed(() => {
|
|
|
+ return JSON.parse(Session.Get('display', true))
|
|
|
+ })
|
|
|
+
|
|
|
+ // 方法
|
|
|
+ // 导出
|
|
|
+ const exportAgents = async () => {
|
|
|
+ try {
|
|
|
+ await exportExcel(
|
|
|
+ pigeon,
|
|
|
+ '/wasabi/card/3ds/transaction/list/export',
|
|
|
+ { ...search },
|
|
|
+ 'Card_3DS_Transactions'
|
|
|
+ )
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error(t('Msg.ExportFail'))
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 银行卡详情
|
|
|
+ const cardOpen = (cardNumber) => {
|
|
|
+ router.push({ name: 'R-CardDetail', params: { cardNumber: cardNumber } })
|
|
|
+ }
|
|
|
+
|
|
|
+ const toSearch = () => {
|
|
|
+ pagerInfo.current = 1
|
|
|
+ searchFunc()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 列表
|
|
|
+ const searchFunc = async () => {
|
|
|
+ pictLoading.value = true
|
|
|
+ if (!display.value['R-Card-3DSTransaction-Page']?.show) {
|
|
|
+ ElMessage.warning(t('Msg.NotDisplay'))
|
|
|
+ pictLoading.value = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const res = await Service.getCard3DSTransactionPage({
|
|
|
+ ...search,
|
|
|
+ page: {
|
|
|
+ current: pagerInfo.current,
|
|
|
+ row: pagerInfo.row,
|
|
|
+ },
|
|
|
+ })
|
|
|
+
|
|
|
+ if (res.code == Code.StatusOK) {
|
|
|
+ mock_tableData.value = res.data
|
|
|
+ if (res.page != null) {
|
|
|
+ pagerInfo.rowTotal = res.page.rowTotal
|
|
|
+ pagerInfo.pageTotal = res.page.pageTotal
|
|
|
+ } else {
|
|
|
+ pagerInfo.rowTotal = 0
|
|
|
+ }
|
|
|
+
|
|
|
+ ElMessage.success(t('Msg.SearchSuccess'))
|
|
|
+ } else {
|
|
|
+ ElMessage.error(res.msg)
|
|
|
+ }
|
|
|
+ pictLoading.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleSizeChange = (val) => {
|
|
|
+ pagerInfo.row = val
|
|
|
+ searchFunc()
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleCurrentChange = (val) => {
|
|
|
+ pagerInfo.current = val
|
|
|
+ searchFunc()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 生命周期
|
|
|
+ onMounted(() => {
|
|
|
+ searchFunc()
|
|
|
+ })
|
|
|
+
|
|
|
+ // 监听器
|
|
|
+ watch(
|
|
|
+ () => search.tag,
|
|
|
+ () => {
|
|
|
+ search.mobile = ''
|
|
|
+ search.email = ''
|
|
|
+ search.cId = ''
|
|
|
+ search.cardNumber = ''
|
|
|
+ search.type = ''
|
|
|
+ }
|
|
|
+ )
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ #review_Email {
|
|
|
+ .crm_search {
|
|
|
+ .search_action_btn {
|
|
|
+ .delete {
|
|
|
+ background-color: #a1a1a1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete.active {
|
|
|
+ background-color: #368fec;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table .state {
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 80px;
|
|
|
+ max-width: 150px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 1.5;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 2px 10px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+ #review_Email {
|
|
|
+ .dialog_header_w {
|
|
|
+ .crm_search_down {
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
ljc