You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
578 lines
22 KiB
578 lines
22 KiB
<template>
|
|
<div class="main-content12 recharge-wrap">
|
|
<h3 class="pagetitle">余额管理</h3>
|
|
<div class="flex-common">
|
|
<div class="flex-between">
|
|
<el-tabs v-model="totalType" @tab-click="handleClick">
|
|
<el-tab-pane label="余额充值" name="1"></el-tab-pane>
|
|
<el-tab-pane label="充值记录" name="2"></el-tab-pane>
|
|
<el-tab-pane label="退款记录" name="3"></el-tab-pane>
|
|
</el-tabs>
|
|
<div class="flex">
|
|
</div>
|
|
</div>
|
|
<div class="mt24" v-if="totalType == '1'">
|
|
<div class="flex-between w552">
|
|
<div class="wallet-choose">充值选择</div>
|
|
<div class="wallet-desc flex" v-if="prompt" @click="jumpLink(prompt_link)">{{prompt}}<img style="width: 14px" src="@/assets/input_ex_ic.png"/></div>
|
|
</div>
|
|
|
|
<el-form class="el-row demo-ruleForm" ref="formRef">
|
|
<div class="flex gap24 mt12">
|
|
<template v-for="item in walletList">
|
|
<div :key="item.type" class="wallet-item" :class="walletType == item.type ? 'wallet-item-active' : ''" @click="walletClick(item.type)">
|
|
<img src="@/assets/site/tem-active.svg" class="tem-active" alt="" v-if="walletType == item.type">
|
|
<div class="wallet-name">{{item.name}}</div>
|
|
<div class="wallet-num">当前余额<span class="wallet-price">{{item.remain_money}}</span>元</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="buy-area">
|
|
<div class="flex-between w552 mt24">
|
|
<div class="wallet-choose">充值卡面值</div>
|
|
</div>
|
|
<div class="flex-between buy-bonus w552 mt12" v-show="Object.keys(bonus).length>0">
|
|
<img src="@/assets/site/recharge_bonus.png" alt="">
|
|
<div class="buy-bonus-info">
|
|
<div class="flex" v-for="(value, key) in bonus" :key="key">
|
|
<span>充<b>{{key}}</b>元</span><span>送<b class="red">{{value}}</b>元</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex mt12" v-if="Object.keys(buy_price_types).length>0">
|
|
<GuipRadio v-model="buy_price_type" :options="buy_price_types" @change="buyLinkClick()"/>
|
|
</div>
|
|
<div class="buy-btn flex mt12" v-if="buy_price_link" @click="jumpLink(buy_price_link)">
|
|
<img src="@/assets/site/tb_buy_btn.svg" alt="">跳转淘宝购买
|
|
</div>
|
|
<div class="buy-desc flex mt12" v-if="links_desc">{{links_desc}}</div>
|
|
|
|
<hr class="buy-hr">
|
|
|
|
<div class="buy-recharge flex gap12">
|
|
<GuipInput ref="GuipInput" v-model="ordernum" class="w443" column="column" prop="age" placeholder="请输入淘宝订单号" />
|
|
<GuipButton @click="doRecharge()">现在充值</GuipButton>
|
|
</div>
|
|
|
|
<div class="buy-info">
|
|
<p class="red">充值流程：</p>
|
|
<p>1.填写订单编号</p>
|
|
<p>2.点击【现在充值】按钮</p>
|
|
<p>3.到淘宝确认收货</p>
|
|
<p>4.点击弹层中已【确认收货】按钮</p>
|
|
</div>
|
|
</div>
|
|
|
|
</el-form>
|
|
</div>
|
|
<el-form class="mt24" v-else>
|
|
<GuipTable :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
|
|
<template v-if="totalType == '2'">
|
|
<el-table-column prop="tid" label="订单号"></el-table-column>
|
|
<el-table-column prop="money">
|
|
<template slot="header">
|
|
充值金额
|
|
<span class="money-header" v-if="total_money>0"> 总计 {{ total_money }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="pay_date" label="充值时间"></el-table-column>
|
|
<el-table-column prop="remain_money" label="充值前账号余额"></el-table-column>
|
|
<el-table-column prop="type_desc" label="类型"></el-table-column>
|
|
<el-table-column prop="opt" label="操作">
|
|
<template slot-scope="scope">
|
|
<GuipButton v-if="scope.row.confirm" type="ignore" class="mr-16" :btnstyle="confirmBtnStyle" @click="confirmRecharge(scope.row.id, scope.row.tid)">确认收货</GuipButton>
|
|
<div v-else>----</div>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
<template v-else>
|
|
<el-table-column fixed="left" prop="tid" label="订单号" min-width="200"></el-table-column>
|
|
<el-table-column prop="money" label="退回成本" min-width="200"></el-table-column>
|
|
<el-table-column prop="pay_date" label="时间" min-width="200"></el-table-column>
|
|
<el-table-column prop="remain_money" label="充值前账号余额" min-width="200"></el-table-column>
|
|
<el-table-column prop="before_status" label="检测类型" min-width="200">
|
|
<template slot-scope="scope">
|
|
<span v-if="tid2refunds[scope.row.tid]">{{tid2refunds[scope.row.tid].prod_desc}}</span>
|
|
<span v-else>---</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="before_status" label="退款前论文状态" min-width="200">
|
|
<template slot-scope="scope">
|
|
<span v-if="tid2refunds[scope.row.tid]">{{tid2refunds[scope.row.tid].before_status}}</span>
|
|
<span v-else>---</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="total_money" label="订单金额" min-width="200">
|
|
<template slot-scope="scope">
|
|
<span v-if="tid2refunds[scope.row.tid]">{{tid2refunds[scope.row.tid].total_money}}</span>
|
|
<span v-else>---</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="tid" label="退款金额" min-width="200">
|
|
<template slot-scope="scope">
|
|
<span v-if="tid2refunds[scope.row.tid]">{{tid2refunds[scope.row.tid].refund_money}}</span>
|
|
<span v-else>---</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="tid" label="退款方式" min-width="200">
|
|
<template slot-scope="scope">
|
|
<span v-if="tid2refunds[scope.row.tid]"><img :src="require('@/assets/pay/pay_'+tid2refunds[scope.row.tid].pay_type+'.svg')" alt=""></span>
|
|
<span v-else>---</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="tid" label="退款时间" min-width="200">
|
|
<template slot-scope="scope">
|
|
<span v-if="tid2refunds[scope.row.tid]">{{tid2refunds[scope.row.tid].refund_time}}</span>
|
|
<span v-else>---</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="tid" label="退款理由" min-width="200">
|
|
<template slot-scope="scope">
|
|
<GuipToolTip v-if="tid2refunds[scope.row.tid]" :content="tid2refunds[scope.row.tid].refund_reason">
|
|
<img src="@/assets/site/refund_reason.png" alt="">
|
|
</GuipToolTip>
|
|
<span v-else>---</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column fixed="right" prop="tid" label="退款详情" min-width="100">
|
|
<template slot-scope="scope">
|
|
<GuipButton type="text" v-if="tid2refunds[scope.row.tid]" @click="handleShowInfo(tid2refunds[scope.row.tid].id, scope.row.tid)">查看</GuipButton>
|
|
<span v-else>---</span>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
|
|
</GuipTable>
|
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
|
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
|
|
:total="parseInt(total)">
|
|
</el-pagination>
|
|
</el-form>
|
|
</div>
|
|
<GuipDialog :dialogVisible="dialogVisible" width="1100px" title="退款详情" :show-close-button="true" :show-cancel-button="false" @confirm="handleHideInfo()" @close="handleHideInfo()">
|
|
<div class="table-grid" v-if="refund_detail">
|
|
<div class="table-grid-cell">交易单号</div>
|
|
<div class="table-grid-cell">{{refund_detail.pay_tid}}</div>
|
|
<div class="table-grid-cell">商户单号</div>
|
|
<div class="table-grid-cell">{{refund_detail.tid}}</div>
|
|
|
|
<div class="table-grid-cell">订单金额</div>
|
|
<div class="table-grid-cell">{{refund_detail.total_money}}</div>
|
|
<div class="table-grid-cell">实收金额</div>
|
|
<div class="table-grid-cell">{{refund_detail.money}}</div>
|
|
|
|
<div class="table-grid-cell">退款金额</div>
|
|
<div class="table-grid-cell">{{refund_detail.refund_money}}</div>
|
|
<div class="table-grid-cell">退款状态</div>
|
|
<div class="table-grid-cell">{{refund_detail.refund_status}}</div>
|
|
|
|
<div class="table-grid-cell">退款方式</div>
|
|
<div class="table-grid-cell">原路返回</div>
|
|
<div class="table-grid-cell">收款账户</div>
|
|
<div class="table-grid-cell">{{refund_detail.refund_recv_account}}</div>
|
|
</div>
|
|
</GuipDialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
|
|
import GuipRadio from "@/components/GuipRadio.vue";
|
|
import GuipInput from "@/components/GuipInput.vue";
|
|
import GuipButton from "@/components/GuipButton.vue";
|
|
import GuipTable from "@/components/GuipTable.vue";
|
|
import GuipToolTip from "@/components/GuipToolTip.vue";
|
|
import GuipDialog from "@/components/GuipDialog.vue";
|
|
|
|
export default {
|
|
components: {
|
|
GuipDialog,
|
|
GuipToolTip,
|
|
GuipTable,
|
|
GuipButton,
|
|
GuipInput,
|
|
GuipRadio
|
|
|
|
},
|
|
props: {
|
|
total_type: {
|
|
type: String,
|
|
default: '1'
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
totalType:'1',
|
|
tableLoading:false,
|
|
|
|
walletType: '',
|
|
walletList:[],
|
|
|
|
prompt:'',
|
|
prompt_link:'',
|
|
bonus:[],
|
|
buy_price_type: '',
|
|
buy_price_types: {},
|
|
buy_price_link: '',
|
|
buy_price_links: {},
|
|
links_desc: '',
|
|
|
|
ordernum:'',
|
|
|
|
tableKey: '',
|
|
tableList:[],
|
|
currentPage: 1, //当前页
|
|
pageSize: 20, //每页的容量
|
|
total: 0, //列表总数
|
|
total_money: 0, //列表总数
|
|
tid2refunds: [], //列表总数
|
|
dialogVisible: false,
|
|
refund_detail: [],
|
|
|
|
confirmBtnStyle: {
|
|
'background':'#FF4D4F',
|
|
'color':'#FFFFFF',
|
|
'border':'1px solid #FF4D4F',
|
|
'border-radius':'4px',
|
|
'width': '88px',
|
|
'height': '33px',
|
|
'font-size': '12px',
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(()=>{
|
|
this.totalType = this.total_type;
|
|
this.handleClick()
|
|
})
|
|
},
|
|
methods: {
|
|
walletClick(type){
|
|
this.walletType = type
|
|
this.walletList.forEach(item => {
|
|
if(item.type === type){
|
|
this.prompt = item.prompt
|
|
this.prompt_link = item.prompt_link
|
|
this.bonus = item.bonus
|
|
|
|
item.links.forEach((v,idx) => {
|
|
this.buy_price_types[idx] = v.face_val+'元'
|
|
this.buy_price_links[idx] = v.url
|
|
})
|
|
|
|
this.buy_price_type = '0'
|
|
this.buy_price_link = this.buy_price_links[this.buy_price_type]
|
|
this.links_desc = item.links_desc
|
|
}
|
|
})
|
|
},
|
|
jumpLink(link){
|
|
window.open(link, '_blank');
|
|
},
|
|
buyLinkClick(){
|
|
this.buy_price_link = this.buy_price_links[this.buy_price_type];
|
|
},
|
|
handleClick(){
|
|
this.tableList = []
|
|
this.total = 0
|
|
this.total_money = 0
|
|
this.currentPage = 1
|
|
this.pageSize = 20
|
|
if(this.totalType == 1) this.getRechargeData()
|
|
if(this.totalType == 2) this.getRechargeList()
|
|
if(this.totalType == 3) this.getRefundList()
|
|
},
|
|
getRechargeData() {
|
|
try {
|
|
this.$http('POST', '/agentnew/ajax_get_recharge_data', {date: this.date}).then(response => {
|
|
this.$nextTick(() => {
|
|
this.walletList = response.data
|
|
if(this.walletType == '') this.walletClick(response.data[0].type)
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
} catch (error) {
|
|
console.error('数据加载失败:', error)
|
|
}
|
|
},
|
|
getRechargeList() {
|
|
this.tableLoading = true
|
|
try {
|
|
this.$http('POST', '/agentnew/ajax_get_recharge_list', {
|
|
type: this.walletType,
|
|
cur_page: this.currentPage,
|
|
page_size: this.pageSize
|
|
}).then(response => {
|
|
this.tableLoading = false
|
|
this.$nextTick(() => {
|
|
this.tableList = response.data.list
|
|
this.total = response.data.total
|
|
this.total_money = response.data.total_money
|
|
this.tableKey = Math.random();
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
} catch (error) {
|
|
console.error('数据加载失败:', error)
|
|
} finally {
|
|
this.tableLoading = false
|
|
}
|
|
},
|
|
getRefundList() {
|
|
this.tableLoading = true
|
|
try {
|
|
this.$http('POST', '/agentnew/ajax_get_cancel_check_list', {
|
|
date: this.date,
|
|
cur_page: this.currentPage,
|
|
page_size: this.pageSize
|
|
}).then(response => {
|
|
this.tableLoading = false
|
|
this.$nextTick(() => {
|
|
this.tableList = response.data.list
|
|
this.total = response.data.total
|
|
this.tid2refunds = response.data.tid2refunds
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
} catch (error) {
|
|
console.error('数据加载失败:', error)
|
|
} finally {
|
|
this.tableLoading = false
|
|
}
|
|
},
|
|
doRecharge(){
|
|
try {
|
|
this.$http('POST', '/agentnew/ajax_do_recharge', {orderId: this.ordernum,type: this.walletType}).then(response => {
|
|
if (response.status) {
|
|
this.$message.success('充值成功');
|
|
return true;
|
|
}
|
|
this.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
} catch (error) {
|
|
console.error('数据加载失败:', error)
|
|
}
|
|
},
|
|
confirmRecharge(id, tid){
|
|
try {
|
|
this.$http('POST', '/agentnew/ajax_confirm_recharge', {orderId: tid,type: this.walletType,recharge_id: id}).then(response => {
|
|
if (response.status) {
|
|
this.$message.success('充值成功');
|
|
return true;
|
|
}
|
|
this.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
} catch (error) {
|
|
console.error('数据加载失败:', error)
|
|
}
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val
|
|
if(this.totalType == 2) this.getRechargeList()
|
|
if(this.totalType == 3) this.getRefundList()
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val
|
|
if(this.totalType == 2) this.getRechargeList()
|
|
if(this.totalType == 3) this.getRefundList()
|
|
},
|
|
handleShowInfo(id, tid){
|
|
this.dialogVisible = true
|
|
try {
|
|
this.$http('POST', '/agentnew/ajax_get_cancel_check_detail', {id: id, tid: tid}).then(response => {
|
|
this.$nextTick(() => {
|
|
this.refund_detail = response.data
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
} catch (error) {
|
|
console.error('数据加载失败:', error)
|
|
}
|
|
},
|
|
handleHideInfo(){
|
|
this.dialogVisible = false
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.recharge-wrap{
|
|
.pagetitle {
|
|
text-align: left;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
line-height: normal;
|
|
letter-spacing: 0.08em;
|
|
color: #1E2226;
|
|
margin-top: 8px;
|
|
}
|
|
.w552{
|
|
width: 552px;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
.w443{
|
|
width: 443px;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
.wallet-choose{
|
|
font-size: 14px;
|
|
color: #1E2226;
|
|
}
|
|
.wallet-desc{
|
|
font-size: 12px;
|
|
color: #8A9099;
|
|
cursor: pointer;
|
|
}
|
|
.wallet-item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
text-align: left;
|
|
padding: 16px 18px;
|
|
width: 264px;
|
|
letter-spacing: 0.08em;
|
|
border-radius: 8px;
|
|
background: #F6F7FA;
|
|
box-sizing: border-box;
|
|
|
|
.wallet-name{
|
|
color: #1E2226;;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
.wallet-num{
|
|
font-size: 12px;
|
|
color: #626573;
|
|
padding: 0 2px;
|
|
}
|
|
.wallet-price{
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #626573;
|
|
}
|
|
}
|
|
|
|
.wallet-item-active{
|
|
position: relative;
|
|
background: #F2F7FF;
|
|
.tem-active{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
.wallet-name{
|
|
color: #006AFF;
|
|
}
|
|
}
|
|
|
|
.gap24 {
|
|
gap: 24px;
|
|
width: 100%;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.buy-area{
|
|
.buy-btn{
|
|
font-size: 12px;
|
|
width: 139px;
|
|
color: #006AFF;
|
|
letter-spacing: 0.08em;
|
|
padding: 9px 16px;
|
|
gap: 6px;
|
|
border-radius: 4px;
|
|
border: 1px solid #006AFF;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.buy-bonus{
|
|
position: relative;
|
|
.buy-bonus-info{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
position: absolute;
|
|
top:54px;
|
|
left: 22px;
|
|
width: 510px;
|
|
gap: 3px;
|
|
color: #626573;
|
|
div{
|
|
width: calc(50% - 15px);
|
|
gap: 7px;
|
|
b{
|
|
padding: 0 4px;
|
|
}
|
|
.red{
|
|
background: linear-gradient(180deg, #DB4CBB 0%, #EB202C 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.buy-desc{
|
|
font-size: 12px;
|
|
letter-spacing: 0.08em;
|
|
color: #006AFF;
|
|
}
|
|
|
|
.buy-hr{
|
|
border: 1px dashed #BABDC2;
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.buy-info{
|
|
width: 552px;
|
|
color: #8A9099;
|
|
font-size: 12px;
|
|
letter-spacing: 0.08em;
|
|
background: #F6F7FA;
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
margin-top: 24px;
|
|
.red{
|
|
color: #FF4D4F;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.money-header{
|
|
color: #626573;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
::v-deep .el-form-item {
|
|
margin: 0;
|
|
}
|
|
|
|
.table-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr; /* 三列 */
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.table-grid-cell {
|
|
border: 1px solid #ccc;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
</style>
|