Compare commits
36 Commits
master
...
zq-0828-ne
| Author | SHA1 | Date |
|---|---|---|
zq
|
80b695817e | 1 week ago |
|
zq
|
3c18c1b359 | 1 week ago |
|
zq
|
5c68a5655e | 1 week ago |
|
zq
|
1cd6cde3c1 | 1 week ago |
|
zq
|
df53038f31 | 2 weeks ago |
|
zq
|
41708a4c74 | 2 weeks ago |
 pengda
|
87b9abd84c | 2 weeks ago |
|
pengda
|
74067f4327 | 4 weeks ago |
|
pengda
|
b4bb7faa00 | 4 weeks ago |
|
pengda
|
3e87a16cbd | 4 weeks ago |
|
pengda
|
f95fddc2ff | 4 weeks ago |
|
pengda
|
03484623e7 | 4 weeks ago |
|
pengda
|
5b8030ce86 | 4 weeks ago |
|
pengda
|
c54fe01954 | 4 weeks ago |
|
pengda
|
17cc7a861c | 1 month ago |
|
pengda
|
54397eb34b | 1 month ago |
|
pengda
|
aed2202f60 | 1 month ago |
|
zq
|
61acea2ff7 | 1 month ago |
|
pengda
|
6b15ba303f | 4 weeks ago |
|
pengda
|
744ea6edc0 | 4 weeks ago |
|
pengda
|
24db323963 | 4 weeks ago |
|
pengda
|
acd8d10338 | 4 weeks ago |
|
pengda
|
e69e2d4c36 | 4 weeks ago |
|
pengda
|
52bf7b9565 | 1 month ago |
|
pengda
|
f7175e0fb7 | 1 month ago |
|
pengda
|
1f0dfd0b00 | 1 month ago |
|
zq
|
d67a87dc9a | 1 month ago |
|
pengda
|
93ecb3df68 | 4 weeks ago |
|
pengda
|
42c93d4c8a | 1 month ago |
|
pengda
|
27e25fd1b5 | 1 month ago |
|
pengda
|
1100c5245d | 1 month ago |
|
pengda
|
48fb904728 | 1 month ago |
|
zq
|
4c8330eb97 | 1 month ago |
|
pengda
|
4a3a89f781 | 1 month ago |
|
pengda
|
adf83c54c4 | 1 month ago |
|
zq
|
f4950a7b9a | 1 month ago |
17 changed files with 2083 additions and 11 deletions
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 424 B |
|
After Width: | Height: | Size: 5.2 KiB |
@ -0,0 +1,405 @@ |
|||
<template> |
|||
<div class="main-content12 expense-wrap"> |
|||
<div class="flex-common"> |
|||
<div class="flex-between mb24"> |
|||
<div class=" flex gap12"> |
|||
<b>{{ name }} 月详情</b> |
|||
<div class="flex gap12" v-if="id"> |
|||
<span @click="sort(index)" :class="sortIndex === index ? ['ver-anchor-point','ver-anchor-point-active'] : ['ver-anchor-point']" v-for="(item, index) in serviceRanking" :key="item">{{ item }}</span> |
|||
</div> |
|||
</div> |
|||
<CustomDropdown ref="dropdownRef" :placeholder="date" width="280px"> |
|||
<DateSelect slot="normal" view="month" v-model="date" :onlyMonth="true" @change="handleDateChange"/> |
|||
</CustomDropdown> |
|||
</div> |
|||
<el-form> |
|||
<!-- show-summary --> |
|||
<GuipTable :tableData="monthList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1" |
|||
:show-summary="true" :summary-method="getSummaries" @sort-change="sortChange"> |
|||
<el-table-column prop="date" label="日期" v-if="!id"></el-table-column> |
|||
|
|||
<template v-else> |
|||
<el-table-column type="index" label="排行" width="80px"></el-table-column> |
|||
|
|||
<el-table-column prop="date2" label="服务排行" v-if="rankFlag === 'chktype'"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ nameList[scope.row.id] }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="date1" label="站点排行" v-else> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ nameList[scope.row.id] }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
|
|||
<el-table-column prop="1" label="利润" :sortable="sortIndex === '1' ? 'custom' : false"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.profit ? scope.row.profit : '-' }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="2" label="收入" :sortable="sortIndex === '2' ? 'custom' : false"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.income ? scope.row.income : '-' }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="3" label="支出" :sortable="sortIndex === '3' ? 'custom' : false"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.cost ? scope.row.cost : '-' }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="4" label="单量" :sortable="sortIndex === '4' ? 'custom' : false"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.check_num ? scope.row.check_num : '-' }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column v-for="(col, index) in payList" :key="index" :label="col.name+'收/支/单量'"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex" v-if="scope.row.pay_type[col.id]"> |
|||
{{ scope.row.pay_type[col.id].income }}/ |
|||
{{ scope.row.pay_type[col.id].cost }}/ |
|||
{{ scope.row.pay_type[col.id].check_num }} |
|||
</div> |
|||
<div v-else>-</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</GuipTable> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import GuipTable from '@/components/GuipTable.vue'; |
|||
import DateSelect from "@/components/super/DateSelect.vue"; |
|||
import CustomDropdown from "@/components/CustomDropdown.vue"; |
|||
|
|||
export default { |
|||
components: { |
|||
CustomDropdown, DateSelect, |
|||
GuipTable, |
|||
}, |
|||
props: { |
|||
rankFlag: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
date:'', |
|||
uid:0, |
|||
chktype:0, |
|||
|
|||
id: 0, |
|||
|
|||
name:'', |
|||
monthList:[], |
|||
monthTotal:[], |
|||
payList:[], |
|||
nameList:[], |
|||
|
|||
tableLoading:false, |
|||
tableKey: '', |
|||
|
|||
sortIndex:'1', |
|||
sortOrder:'asc', |
|||
serviceRanking:{ |
|||
'1':'利润排行', |
|||
'2':'收入排行', |
|||
'3':'支出排行', |
|||
'4':'检测量排行', |
|||
}, |
|||
sortField: { |
|||
'1':'profit', |
|||
'2':'income', |
|||
'3':'cost', |
|||
'4':'check_num', |
|||
}, |
|||
} |
|||
}, |
|||
mounted() { |
|||
if(!this.$route.query.date) { |
|||
this.$message.error('非法请求'); |
|||
this.$router.push('/agent/expenseStatistics') |
|||
} |
|||
this.date = this.$route.query.date |
|||
|
|||
if(this.$route.query.id) this.id = this.$route.query.id |
|||
if(this.$route.query.uid) this.uid = this.$route.query.uid |
|||
if(this.$route.query.chktype) this.chktype = this.$route.query.chktype |
|||
|
|||
this.getStats() |
|||
}, |
|||
methods: { |
|||
getDate(dateStr) { |
|||
const date = new Date(dateStr); |
|||
const year = date.getFullYear(); // 2025 |
|||
const month = date.getMonth() + 1; // 3 (表示3月) |
|||
|
|||
return `${year}-${month}` |
|||
}, |
|||
handleDateChange(date) { |
|||
this.date = this.getDate(date) |
|||
localStorage.setItem('date', JSON.stringify(date)) |
|||
|
|||
this.$refs.dropdownRef.closeDropdown(); |
|||
this.getStats() |
|||
}, |
|||
sort(index){ |
|||
this.sortIndex = index |
|||
this.sortList() |
|||
}, |
|||
sortChange({prop, order}){ |
|||
this.sortIndex = prop |
|||
this.sortOrder = 'asc' |
|||
if (order === 'descending') this.sortOrder = 'desc' |
|||
this.sortList() |
|||
}, |
|||
sortList(){ |
|||
const field = this.sortField[this.sortIndex] |
|||
return this.monthList.sort((a, b) => { |
|||
const valA = a[field]; |
|||
const valB = b[field]; |
|||
|
|||
// 处理字符串和数字类型的比较 |
|||
if (typeof valA === 'string') { |
|||
return this.sortOrder === 'asc' |
|||
? valA.localeCompare(valB) |
|||
: valB.localeCompare(valA); |
|||
} else { |
|||
return this.sortOrder === 'asc' |
|||
? valA - valB |
|||
: valB - valA; |
|||
} |
|||
}); |
|||
}, |
|||
getStats(){ |
|||
this.monthList=[] |
|||
this.monthTotal=[] |
|||
this.payList=[] |
|||
this.nameList=[] |
|||
this.tableKey = Math.random(); |
|||
if(this.id){ |
|||
if(this.rankFlag == 'chktype') { |
|||
this.getChktypeStatsRank() |
|||
return true |
|||
} |
|||
this.getSiteStatsRank() |
|||
return true |
|||
} |
|||
|
|||
this.getDayStats(); |
|||
}, |
|||
getSummaries() { |
|||
const sums = []; |
|||
|
|||
let index = -1 |
|||
if(this.id) sums[++index] = '-' |
|||
sums[++index] = `小计` |
|||
sums[++index] = this.monthTotal.profit |
|||
sums[++index] = this.monthTotal.income |
|||
sums[++index] = this.monthTotal.cost |
|||
sums[++index] = this.monthTotal.check_num |
|||
this.payList.forEach(column =>{ |
|||
sums[++index] = this.monthTotal.pay_type[column.id].income + '/' + this.monthTotal.pay_type[column.id].cost + '/' + this.monthTotal.pay_type[column.id].check_num |
|||
}) |
|||
return sums; |
|||
}, |
|||
getDayStats() { |
|||
this.tableLoading = true |
|||
try { |
|||
this.$http('POST', '/agentnew/ajax_get_day_stats', { |
|||
date: this.date, |
|||
uid: this.uid, |
|||
type: this.chktype, |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
this.name = response.data.name |
|||
this.monthList = response.data.list |
|||
this.payList = response.data.pay_list |
|||
this.monthTotal = response.data.total |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
} finally { |
|||
this.tableLoading = false |
|||
} |
|||
}, |
|||
getSiteStatsRank() { |
|||
this.tableLoading = true |
|||
try { |
|||
this.$http('POST', '/agentnew/ajax_get_site_stats_rank', { |
|||
date: this.date, |
|||
type: this.id, |
|||
}).then(response => { |
|||
this.tableLoading = false |
|||
this.$nextTick(() => { |
|||
this.name = response.data.name |
|||
this.monthList = response.data.list |
|||
this.monthTotal = response.data.total |
|||
this.nameList = response.data.name_list |
|||
this.sortList() |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
} finally { |
|||
this.tableLoading = false |
|||
} |
|||
}, |
|||
getChktypeStatsRank() { |
|||
this.tableLoading = true |
|||
try { |
|||
this.$http('POST', '/agentnew/ajax_get_chktype_stats_rank', { |
|||
date: this.date, |
|||
uid: this.id, |
|||
}).then(response => { |
|||
this.tableLoading = false |
|||
this.$nextTick(() => { |
|||
this.name = response.data.name |
|||
this.monthList = response.data.list |
|||
this.monthTotal = response.data.total |
|||
this.nameList = response.data.name_list |
|||
this.sortList() |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
} finally { |
|||
this.tableLoading = false |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
<style lang="scss" scoped> |
|||
::v-deep .el-table__footer-wrapper tbody td.el-table__cell { |
|||
background-color: #E8F0FE; /* 背景色 */ |
|||
color: #006AFF; /* 文字颜色 */ |
|||
font-weight: 600; |
|||
} |
|||
.el-form-item{ |
|||
margin-bottom: 0 !important; |
|||
} |
|||
.expense-wrap{ |
|||
|
|||
.ver-anchor-point { |
|||
height: 28px; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 4px 12px; |
|||
white-space: nowrap; |
|||
transition: all .3s; |
|||
border-radius: 14px; |
|||
background: #FFFFFF; |
|||
box-sizing: border-box; |
|||
border: 1px solid #DFE2E6; |
|||
letter-spacing: 0.08em; |
|||
color: #8A9099; |
|||
cursor: pointer; |
|||
} |
|||
.ver-anchor-point:hover { |
|||
border-color: transparent; |
|||
transition: all .3s; |
|||
color: #006AFF; |
|||
background: #F2F3F5; |
|||
} |
|||
.ver-anchor-point-active{ |
|||
color: #006AFF; |
|||
} |
|||
.pagetitle { |
|||
text-align: left; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
margin-top: 8px; |
|||
} |
|||
.monthTotal-wrap{ |
|||
display: grid; |
|||
grid-gap: 12px; |
|||
grid-template-columns: repeat(auto-fit, 287px); |
|||
} |
|||
|
|||
.loss-tip{ |
|||
width: 50px; |
|||
height: 24px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
border-radius: 4px; |
|||
background: #FFF1F0; |
|||
box-sizing: border-box; |
|||
border: 1px solid #FFA39E; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: 20px; |
|||
text-align: center; |
|||
letter-spacing: 0.08em; |
|||
color: #FF4D4F; |
|||
} |
|||
.total-item{ |
|||
padding: 14px 16px; |
|||
font-size: 12px; |
|||
letter-spacing: 0.03em; |
|||
color: #23242B; |
|||
box-sizing: border-box; |
|||
border-radius: 4px; |
|||
background: #F2F7FF; |
|||
.price{ |
|||
text-align: left; |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: 15px; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
margin: 14px 0; |
|||
b{ |
|||
font-size: 22px; |
|||
line-height: 20px; |
|||
letter-spacing: normal; |
|||
} |
|||
} |
|||
.total-bottom{ |
|||
align-items: flex-start; |
|||
} |
|||
} |
|||
.loss{ |
|||
background: #FFF1F0; |
|||
.top-left b{ |
|||
color: #FF4D4F; |
|||
} |
|||
} |
|||
.gain{ |
|||
background: #EFFFE0; |
|||
.top-left b{ |
|||
color: #00C261; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,505 @@ |
|||
<template> |
|||
<div class="main-content12 expense-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 v-if="siteNum>1" label="各站点统计列表" name="2"></el-tab-pane> |
|||
<el-tab-pane label="各服务统计列表" name="3"></el-tab-pane> |
|||
</el-tabs> |
|||
<div class="flex"> |
|||
<!-- <GuipSelect label="服务类型" v-if="totalType == '3'" :options="[{label:'asd',value:'9'}]"></GuipSelect>--> |
|||
<!-- <GuipSelect label="时间" :options="[{label:'asd',value:'9'}]"></GuipSelect>--> |
|||
<CustomDropdown ref="dropdownRef" :placeholder="date" width="280px"> |
|||
<DateSelect slot="normal" view="month" :onlyMonth="true" @change="handleDateChange"/> |
|||
</CustomDropdown> |
|||
</div> |
|||
</div> |
|||
<div v-if="totalType == '1' && Object.keys(monthTotal).length>0" class="mt24 monthTotal-wrap flex"> |
|||
<div class="total-item" :class="monthTotal.profit<0?'loss':'gain'"> |
|||
<div class="flex-between total-top"> |
|||
<div class="top-left flex"> |
|||
<img v-if="monthTotal.profit<0" src="@/assets/mon-profit.svg" alt=""> |
|||
<img v-else src="@/assets/mon-loss.svg" alt=""> |
|||
<b>月利润</b> |
|||
</div> |
|||
<span v-if="monthTotal.profit<0" class="loss-tip">亏损</span> |
|||
<span v-else class="gain-tip">盈利</span> |
|||
</div> |
|||
<div class="price"> |
|||
<b>{{monthTotal.profit}}</b>元 |
|||
</div> |
|||
<div class="gap24 flex-between total-bottom"> |
|||
<div class="left column gap8"> |
|||
<template v-for="(col, index) in payList"> |
|||
<span v-if="index % 2 === 1" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].profit }}元</span> |
|||
</template> |
|||
</div> |
|||
<div class="right column gap8"> |
|||
<template v-for="(col, index) in payList"> |
|||
<span v-if="index % 2 === 0" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].profit }}元</span> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="total-item"> |
|||
<div class="flex-between total-top"> |
|||
<div class="top-left flex"> |
|||
<img src="@/assets/mon-income.svg" alt=""> |
|||
<b>月收入</b> |
|||
</div> |
|||
<span class="loss-tip-empty"></span> |
|||
</div> |
|||
<div class="price"> |
|||
<b>{{this.monthTotal.income}}</b>元 |
|||
</div> |
|||
<div class="gap24 flex-between total-bottom"> |
|||
<div class="left column gap8"> |
|||
<template v-for="(col, index) in payList"> |
|||
<span v-if="index % 2 === 1" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].income }}元</span> |
|||
</template> |
|||
</div> |
|||
<div class="right column gap8"> |
|||
<template v-for="(col, index) in payList"> |
|||
<span v-if="index % 2 === 0" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].income }}元</span> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="total-item"> |
|||
<div class="flex-between total-top"> |
|||
<div class="top-left flex"> |
|||
<img src="@/assets/mon-expend.svg" alt=""> |
|||
<b>月支出</b> |
|||
</div> |
|||
<span class="loss-tip-empty"></span> |
|||
</div> |
|||
<div class="price"> |
|||
<b>{{this.monthTotal.cost}}</b>元 |
|||
</div> |
|||
<div class="gap24 flex-between total-bottom"> |
|||
<div class="left column gap8"> |
|||
<template v-for="(col, index) in payList"> |
|||
<span v-if="index % 2 === 1" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].cost }}元</span> |
|||
</template> |
|||
</div> |
|||
<div class="right column gap8"> |
|||
<template v-for="(col, index) in payList"> |
|||
<span v-if="index % 2 === 0" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].cost }}元</span> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="total-item"> |
|||
<div class="flex-between total-top"> |
|||
<div class="top-left flex"> |
|||
<img src="@/assets/mon-order-volume.svg" alt=""> |
|||
<b>月单量</b> |
|||
</div> |
|||
<span class="loss-tip-empty"></span> |
|||
</div> |
|||
<div class="price"> |
|||
<b>{{this.monthTotal.check_num}}</b>元 |
|||
</div> |
|||
<div class="gap24 flex-between total-bottom"> |
|||
<div class="left column gap8"> |
|||
<template v-for="(col, index) in payList"> |
|||
<span v-if="index % 2 === 1" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].check_num }}单</span> |
|||
</template> |
|||
</div> |
|||
<div class="right column gap8"> |
|||
<template v-for="(col, index) in payList"> |
|||
<span v-if="index % 2 === 0" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].check_num }}单</span> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<el-form class="mt24"> |
|||
<GuipTable :tableData="monthList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1" |
|||
:show-summary="totalType === '1'" |
|||
:summary-method="totalType === '1' ? getSummaries : null"> |
|||
<el-table-column prop="date" label="日期" min-width="130px" v-if="totalType == '1'"></el-table-column> |
|||
<el-table-column prop="date1" label="站点名称" min-width="130px" v-if="totalType == '2'"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ nameList[scope.row.id] }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="date2" label="服务名称" min-width="130px" v-if="totalType == '3'"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ nameList[scope.row.id] }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="profit" label="利润" min-width="110px"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex" :class="scope.row.profit<0?'red':''"> |
|||
{{ scope.row.profit ? scope.row.profit : '-' }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="income" label="收入" min-width="110px"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.income ? scope.row.income : '-' }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="expenditure" label="支出" min-width="110px"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.cost ? scope.row.cost : '-' }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="orderVolume" label="单量" min-width="110px"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.check_num ? scope.row.check_num : '-' }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column v-for="(col, index) in payList" :key="index" :label="col.name+'收/支/单量'" min-width="160px"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex" v-if="scope.row.pay_type[col.id]"> |
|||
{{ scope.row.pay_type[col.id].income }}/ |
|||
{{ scope.row.pay_type[col.id].cost }}/ |
|||
{{ scope.row.pay_type[col.id].check_num }} |
|||
</div> |
|||
<div v-else>-</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column v-if="totalType == '3'" |
|||
key="top1" prop="top1" label="站点排行（利润）" width="250"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="topList[scope.row.id]" slot="reference" class="flex"> |
|||
NO.1 {{topList[scope.row.id]}} |
|||
<svg-icon :size="14" @click="handleClicksiteRank(scope.row.id)" |
|||
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'" |
|||
:hoverColor="'#006AFF'" /> |
|||
</span> |
|||
<span v-else slot="reference">暂无排行</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column v-if="totalType == '2'" |
|||
key="top2" prop="top2" label="服务排行（利润）" width="250"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="topList[scope.row.id]" slot="reference" class="flex"> |
|||
NO.1 {{topList[scope.row.id]}} |
|||
<svg-icon :size="14" @click="handleClickserviceRank(scope.row.id)" |
|||
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'" |
|||
:hoverColor="'#006AFF'" /> |
|||
</span> |
|||
<span v-else slot="reference">暂无排行</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="操作" fixed="right" v-if="totalType != '1'"> |
|||
<template slot-scope="scope"> |
|||
<GuipButton type="text" class="mr-16" @click="handleClickDetail(scope.row.id)">详情</GuipButton> |
|||
</template> |
|||
</el-table-column> |
|||
</GuipTable> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import GuipButton from '@/components/GuipButton.vue'; |
|||
// import GuipSelect from '@/components/GuipSelect.vue'; |
|||
import GuipTable from '@/components/GuipTable.vue'; |
|||
import SvgIcon from '@/components/SvgIcon.vue'; |
|||
import DateSelect from "@/components/super/DateSelect.vue"; |
|||
import CustomDropdown from "@/components/CustomDropdown.vue"; |
|||
|
|||
export default { |
|||
components: { |
|||
CustomDropdown, DateSelect, |
|||
GuipTable, |
|||
GuipButton, |
|||
// GuipSelect, |
|||
SvgIcon |
|||
}, |
|||
data() { |
|||
return { |
|||
totalType:'1', |
|||
date: this.getNow(), |
|||
tableLoading:false, |
|||
siteNum: 1, |
|||
tableKey: '', |
|||
monthList:[], |
|||
monthTotal:[], |
|||
payList:[], |
|||
nameList:[], |
|||
topList:[], |
|||
} |
|||
}, |
|||
mounted() { |
|||
const {total_type, date} = this.$route.query |
|||
this.$nextTick(()=>{ |
|||
if(total_type)this.totalType = total_type; |
|||
if(date) this.date = date; |
|||
|
|||
this.getSiteNum() |
|||
this.handleClick() |
|||
}) |
|||
}, |
|||
methods: { |
|||
getNow() { |
|||
const now = new Date(); |
|||
const year = now.getFullYear(); |
|||
const month = now.getMonth() + 1; |
|||
return `${year}-${month}` |
|||
}, |
|||
getDate(dateStr) { |
|||
const date = new Date(dateStr); |
|||
const year = date.getFullYear(); // 2025 |
|||
const month = date.getMonth() + 1; // 3 (表示3月) |
|||
|
|||
return `${year}-${month}` |
|||
}, |
|||
handleDateChange(date) { |
|||
this.date = this.getDate(date) |
|||
localStorage.setItem('date', JSON.stringify(date)) |
|||
|
|||
this.$refs.dropdownRef.closeDropdown(); |
|||
this.handleClick() |
|||
}, |
|||
handleClickDetail(id){ |
|||
if(this.totalType == 2) this.$router.push(`/agent/expenseDetails?uid=${id}&total_type=${this.totalType}&date=${this.date}`) |
|||
if(this.totalType == 3) this.$router.push(`/agent/expenseDetails?chktype=${id}&total_type=${this.totalType}&date=${this.date}`) |
|||
}, |
|||
handleClicksiteRank(id){ |
|||
this.$router.push(`/agent/siteRank?id=${id}&total_type=${this.totalType}&date=`+this.date) |
|||
}, |
|||
handleClickserviceRank(id){ |
|||
this.$router.push(`/agent/serviceRank?id=${id}&total_type=${this.totalType}&date=`+this.date) |
|||
}, |
|||
handleClick(){ |
|||
this.monthList = [] |
|||
this.payList = [] |
|||
this.monthTotal = [] |
|||
this.nameList = [] |
|||
this.topList = [] |
|||
this.tableKey = Math.random(); |
|||
if(this.totalType == 1) this.getDayStats() |
|||
if(this.totalType == 2) this.getSiteStats() |
|||
if(this.totalType == 3) this.getChktypeStats() |
|||
}, |
|||
getSummaries() { |
|||
if(this.totalType != '1') return [] |
|||
const sums = []; |
|||
|
|||
let index = 0 |
|||
sums[index] = `小计` |
|||
sums[++index] = this.monthTotal.profit |
|||
sums[++index] = this.monthTotal.income |
|||
sums[++index] = this.monthTotal.cost |
|||
sums[++index] = this.monthTotal.check_num |
|||
this.payList.forEach(column =>{ |
|||
sums[++index] = this.monthTotal.pay_type[column.id].income + '/' + this.monthTotal.pay_type[column.id].cost + '/' + this.monthTotal.pay_type[column.id].check_num |
|||
}) |
|||
|
|||
return sums; |
|||
}, |
|||
getSiteNum() { |
|||
try { |
|||
this.$http('POST', '/agentnew/ajax_get_agent_sitenum', {date: this.date}).then(response => { |
|||
this.$nextTick(() => { |
|||
this.siteNum = response.data |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
} |
|||
}, |
|||
getDayStats() { |
|||
this.tableLoading = true |
|||
try { |
|||
this.$http('POST', '/agentnew/ajax_get_day_stats', {date: this.date}).then(response => { |
|||
this.$nextTick(() => { |
|||
this.monthList = response.data.list |
|||
this.payList = response.data.pay_list |
|||
this.monthTotal = response.data.total |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
} finally { |
|||
this.tableLoading = false |
|||
} |
|||
}, |
|||
getSiteStats() { |
|||
this.tableLoading = true |
|||
try { |
|||
this.$http('POST', '/agentnew/ajax_get_site_stats', {date: this.date}).then(response => { |
|||
this.tableLoading = false |
|||
this.$nextTick(() => { |
|||
this.monthList = response.data.list |
|||
this.payList = response.data.pay_list |
|||
this.monthTotal = response.data.total |
|||
this.nameList = response.data.name_list |
|||
this.topList = response.data.top_list |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
} finally { |
|||
this.tableLoading = false |
|||
} |
|||
}, |
|||
getChktypeStats() { |
|||
this.tableLoading = true |
|||
try { |
|||
this.$http('POST', '/agentnew/ajax_get_chktype_stats', {date: this.date}).then(response => { |
|||
this.tableLoading = false |
|||
this.$nextTick(() => { |
|||
this.monthList = response.data.list |
|||
this.payList = response.data.pay_list |
|||
this.monthTotal = response.data.total |
|||
this.nameList = response.data.name_list |
|||
this.topList = response.data.top_list |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
} finally { |
|||
this.tableLoading = false |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
<style lang="scss" scoped> |
|||
::v-deep .el-table__footer-wrapper tbody td.el-table__cell { |
|||
background-color: #E8F0FE; /* 背景色 */ |
|||
color: #006AFF; /* 文字颜色 */ |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.loss-profit{ |
|||
color: #FF4D4F; |
|||
} |
|||
.red{ |
|||
color: #FF4D4F; |
|||
} |
|||
|
|||
.expense-wrap{ |
|||
::v-deep .el-tabs__header{ |
|||
margin: 0; |
|||
} |
|||
.pagetitle { |
|||
text-align: left; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
margin-top: 8px; |
|||
} |
|||
.monthTotal-wrap{ |
|||
display: flex; |
|||
gap: 12px; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.loss-tip,.gain-tip{ |
|||
width: 50px; |
|||
height: 24px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
border-radius: 4px; |
|||
background: #FFF1F0; |
|||
box-sizing: border-box; |
|||
border: 1px solid #FFA39E; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: 20px; |
|||
text-align: center; |
|||
letter-spacing: 0.08em; |
|||
color: #FF4D4F; |
|||
} |
|||
.gain-tip{ |
|||
color: #0DAF49; |
|||
background: rgba(239, 255, 224, 0.5); |
|||
border: 1px solid rgba(0, 194, 97, 0.6); |
|||
} |
|||
.loss-tip-empty{ |
|||
width: 50px; |
|||
height: 24px; |
|||
display: flex; |
|||
} |
|||
.total-item{ |
|||
padding: 14px 16px; |
|||
font-size: 12px; |
|||
letter-spacing: 0.03em; |
|||
color: #23242B; |
|||
box-sizing: border-box; |
|||
border-radius: 4px; |
|||
background: #F2F7FF; |
|||
min-height: 153px; |
|||
flex-grow: 1; |
|||
min-width: 0; |
|||
.price{ |
|||
text-align: left; |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: 15px; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
margin: 14px 0; |
|||
display: flex; |
|||
gap: 2px; |
|||
align-items: end; |
|||
b{ |
|||
font-size: 22px; |
|||
line-height: 20px; |
|||
letter-spacing: normal; |
|||
} |
|||
} |
|||
.total-bottom{ |
|||
align-items: flex-start; |
|||
} |
|||
} |
|||
.loss{ |
|||
background: #FFF1F0; |
|||
.top-left b{ |
|||
color: #FF4D4F; |
|||
} |
|||
} |
|||
.gain{ |
|||
background: #EFFFE0; |
|||
.top-left b{ |
|||
color: #00C261; |
|||
} |
|||
} |
|||
.top-left{ |
|||
gap: 6px; |
|||
color:#006AFF; |
|||
font-size: 14px; |
|||
letter-spacing: 0.08em; |
|||
img{ |
|||
width: 20px; |
|||
height: 20.78px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,391 @@ |
|||
<template> |
|||
<div class="main-content12 payoff-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 payoff-set" v-if="totalType == '1'"> |
|||
<el-form> |
|||
<div class="flex gap12 mb24"> |
|||
<img src="@/assets/pay/pay_3.svg" alt=""> |
|||
<span>支付宝收款</span> |
|||
<GuipSwitch float="right" :active-value="1" :inactive-value="0" activeText="开启" inactiveText="关闭" @change="onSwitchChange"></GuipSwitch> |
|||
</div> |
|||
<div class="payoff-area flex-between" v-if="payoffInfo"> |
|||
<div class="payoff-info"> |
|||
<div class="payoff-acc">收款支付宝账号：{{payoffInfo.openid}}</div> |
|||
<div class="payoff-name">收款人真实姓名：{{payoffInfo.realname}}</div> |
|||
</div> |
|||
<div class="flex gap12"> |
|||
<span class="payoff-has">已配置</span> |
|||
<GuipButton type="system" @click="handlePayoffInfo()" :btnstyle="{'color':'#006AFF','background':'#FFFFFF','broder':'none',width:'126px'}">修改账号</GuipButton> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="payoff-area flex-between" v-else> |
|||
<div class="payoff-info"> |
|||
<div class="payoff-acc">设置收款账号，开启平台代收款，平台收取5%服务费</div> |
|||
</div> |
|||
<div class="flex gap12"> |
|||
<span class="payoff-no">未设置</span> |
|||
<GuipButton type="danger" @click="handlePayoffInfo()" :btnstyle="{'color':'#fff','background':'#FF4D4F','broder':'none',width:'126px'}">立即设置</GuipButton> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
<div class="mt24" v-if="totalType == '2'"> |
|||
<el-form> |
|||
<PromptText text="温馨提示：满200元自动结算，次日凌晨打款；通过微信收到的货款，有7天账期（例如：周一的收入，下周一才能结算提现）。" :type="1" class="mb32"/> |
|||
<GuipTable :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1"> |
|||
<el-table-column fixed="left" prop="tid" label="订单号" min-width="200px"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.tid">{{scope.row.tid}}</span> |
|||
<span v-else>-</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="pay_tid" label="第三方支付订单号" min-width="300px"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.pay_tid">{{scope.row.pay_tid}}</span> |
|||
<span v-else>-</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="payment" label="结算金额（元）" min-width="150px"></el-table-column> |
|||
<el-table-column prop="actual_payment" label="实际支付金额（元）" min-width="200px"></el-table-column> |
|||
<el-table-column prop="service_charge" label="服务费（%）" min-width="150px"></el-table-column> |
|||
<el-table-column prop="date_range_str" label="结算起止日期" min-width="150px"> |
|||
<template slot-scope="scope"> |
|||
<GuipToolTip :content="scope.row.date_range"> |
|||
<span>{{scope.row.date_range_str}}</span> |
|||
</GuipToolTip> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="pay_time" label="结算时间" min-width="150px"></el-table-column> |
|||
<el-table-column prop="status" label="状态" min-width="120px"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex gap8"> |
|||
<div :class="payoffStatusClass(scope.row.status)">{{scope.row.status}}</div> |
|||
<GuipToolTip placement="top" v-if="scope.row.status == '异常' && scope.row.remark" :manual="false" effect="light"> |
|||
<img style="width: 16px;height: 16px;" src="@/assets/site/more_setIcon.png" alt=""> |
|||
<template #content> |
|||
<div class="flex toolFilled"> |
|||
<img src="@/assets/site/info_filled.svg" alt=""> |
|||
<p>{{ scope.row.remark }}</p> |
|||
</div> |
|||
</template> |
|||
</GuipToolTip> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</GuipTable> |
|||
</el-form> |
|||
</div> |
|||
<div class="mt24" v-if="totalType == '3'"> |
|||
<el-form> |
|||
<PromptText text="每天凌晨出具前一天已完成的订单账单" :type="1" class="mb32"/> |
|||
<GuipTable :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1"> |
|||
<el-table-column prop="short_name" label="站点"></el-table-column> |
|||
<el-table-column prop="bill_date" label="账单日期"></el-table-column> |
|||
<el-table-column prop="pay_type" label="支付类型"> |
|||
<template slot-scope="scope"> |
|||
<img style="width: 20px;height: 20px;" :src="require('@/assets/pay/pay_'+scope.row.pay_type+'.svg')" alt=""> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="money" label="收入金额（元）"></el-table-column> |
|||
<el-table-column prop="unpay_money" label="未核算金额（元）"></el-table-column> |
|||
<el-table-column prop="ctime" label="账单生成时间"></el-table-column> |
|||
<el-table-column prop="status" label="核算状态"> |
|||
<template slot-scope="scope"> |
|||
<div :class="billStatusClass(scope.row.status)">{{scope.row.status}}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="money" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<GuipButton type="text" @click="handleShowInfo(scope.row.id,scope.row.uid,scope.row.pay_type)">查看</GuipButton> |
|||
</template> |
|||
</el-table-column> |
|||
</GuipTable> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
<GuipDialog :dialogVisible="dialogVisible" title="修改支付宝收款方式" :show-close-button="false" :show-cancel-button="true" @confirm="handleSavePayoffInfo()" @cancel="handleHidePayoffInfo()"> |
|||
<el-form :model="formData" :rules="formRules" ref="formRef" class="payoff-form"> |
|||
<PromptText text="须知" :type="1"> |
|||
<template #desc> |
|||
<div class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</div> |
|||
<div class="mt12">使用平台“支付宝支付”，真实姓名必须和支付宝账号实名认证姓名统一</div> |
|||
</template> |
|||
</PromptText> |
|||
<GuipInput label="1. 收款人姓名" class="column" ref="GuipInput" prop="realname" |
|||
desc="请输入支付宝绑定的银行卡的持卡人姓名" :rules="formRules.realname" v-model="formData.realname"/> |
|||
|
|||
<GuipInput label="2. 收款支付宝账号" class="column" ref="GuipInput" prop="openid" |
|||
desc="请输入有效账号" :rules="formRules.openid" v-model="formData.openid"/> |
|||
</el-form> |
|||
</GuipDialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
import GuipButton from "@/components/GuipButton.vue"; |
|||
import GuipTable from "@/components/GuipTable.vue"; |
|||
import GuipToolTip from "@/components/GuipToolTip.vue"; |
|||
import PromptText from "@/components/PromptText.vue"; |
|||
import GuipSwitch from "@/components/GuipSwitch.vue"; |
|||
import GuipDialog from "@/components/GuipDialog.vue"; |
|||
import GuipInput from "@/components/GuipInput.vue"; |
|||
|
|||
export default { |
|||
components: { |
|||
GuipInput, |
|||
GuipDialog, |
|||
GuipSwitch, |
|||
PromptText, |
|||
GuipToolTip, |
|||
GuipTable, |
|||
GuipButton, |
|||
}, |
|||
data() { |
|||
return { |
|||
totalType:'1', |
|||
tableLoading:false, |
|||
|
|||
payoffInfo:[], |
|||
dialogVisible: false, |
|||
formData: { |
|||
openid: '', |
|||
realname: '', |
|||
}, |
|||
formRules: { |
|||
openid: [ |
|||
{ required: true, message: '请输入收款人姓名', trigger: 'blur' } |
|||
], |
|||
realname: [ |
|||
{ required: true, message: '请输入收款支付宝账号', trigger: 'blur' } |
|||
], |
|||
}, |
|||
|
|||
tableKey: '', |
|||
tableList:[], |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(()=>{ |
|||
if(this.$route.query.total_type)this.totalType = this.$route.query.total_type; |
|||
this.handleClick() |
|||
}) |
|||
}, |
|||
methods: { |
|||
onSwitchChange(){ |
|||
|
|||
}, |
|||
handlePayoffInfo(){ |
|||
this.dialogVisible = true |
|||
this.formData.openid = this.payoffInfo.openid |
|||
this.formData.realname = this.payoffInfo.realname |
|||
}, |
|||
handleSavePayoffInfo(){ |
|||
this.dialogVisible = false |
|||
this.$refs.formRef.validate((valid) => { |
|||
if(valid){ |
|||
try { |
|||
this.$http('POST', '/agentnew/ajax_set_payoff_info', { |
|||
pay_type: this.payoffInfo.pay_type, |
|||
zfb_acct: this.formData.openid, |
|||
realname: this.formData.realname |
|||
}).then(response => { |
|||
if (response.status) { |
|||
this.$message.success('设置成功'); |
|||
this.payoffInfo.openid = this.formData.openid |
|||
this.payoffInfo.realname = this.formData.realname |
|||
return true; |
|||
} |
|||
this.$message.error(response.info); |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
handleHidePayoffInfo(){ |
|||
this.dialogVisible = false |
|||
}, |
|||
payoffStatusClass(status){ |
|||
if(status == '异常') return 'status-info warning'; |
|||
if(status == '成功') return 'status-info success'; |
|||
return 'status-info default' |
|||
}, |
|||
billStatusClass(status){ |
|||
if(status == '已核算') return 'status-info success'; |
|||
return 'status-info default' |
|||
}, |
|||
handleClick(){ |
|||
this.tableList = [] |
|||
if(this.totalType == 1) this.getPayoffData() |
|||
if(this.totalType == 2) this.getPayoffList() |
|||
if(this.totalType == 3) this.getBillList() |
|||
}, |
|||
getPayoffData() { |
|||
try { |
|||
this.$http('POST', '/agentnew/ajax_get_payoff_info', {date: this.date}).then(response => { |
|||
this.$nextTick(() => { |
|||
this.payoffInfo = response.data |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
} |
|||
}, |
|||
getPayoffList() { |
|||
this.tableLoading = true |
|||
try { |
|||
this.$http('POST', '/agentnew/ajax_get_payoff_list', {}).then(response => { |
|||
this.tableLoading = false |
|||
this.$nextTick(() => { |
|||
this.tableList = response.data.list |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
} finally { |
|||
this.tableLoading = false |
|||
} |
|||
}, |
|||
getBillList() { |
|||
this.tableLoading = true |
|||
try { |
|||
this.$http('POST', '/agentnew/ajax_get_bill_list', {}).then(response => { |
|||
this.tableLoading = false |
|||
this.$nextTick(() => { |
|||
this.tableList = response.data.list |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
} finally { |
|||
this.tableLoading = false |
|||
} |
|||
}, |
|||
handleShowInfo(id,uid,pay_type){ |
|||
this.$router.push(`/agent/payoffDetails?id=${id}&uid=${uid}&pay_type=${pay_type}&total_type=${this.totalType}`) |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.payoff-form{ |
|||
::v-deep .prompt-text{ |
|||
padding: 20px 14px; |
|||
} |
|||
::v-deep .prompt-desc{ |
|||
font-weight: bold; |
|||
} |
|||
.column{ |
|||
margin-bottom: 0; |
|||
margin-top: 24px; |
|||
} |
|||
} |
|||
.payoff-wrap{ |
|||
::v-deep .el-tabs__header{ |
|||
margin: 0; |
|||
} |
|||
::v-deep .el-form-item { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.pagetitle { |
|||
text-align: left; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
margin-top: 8px; |
|||
} |
|||
.w16{ |
|||
width: 16px; |
|||
} |
|||
.payoff-set{ |
|||
background: #FAFAFA; |
|||
padding: 24px 14px; |
|||
} |
|||
.payoff-area{ |
|||
padding: 24px 16px; |
|||
border-radius: 8px; |
|||
background: #FFFFFF; |
|||
letter-spacing: 0.08em; |
|||
font-size: 14px; |
|||
text-align: left; |
|||
.payoff-info{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10px; |
|||
.payoff-acc{ |
|||
color: #1E2226; |
|||
} |
|||
.payoff-name{ |
|||
color: #6B7280; |
|||
letter-spacing: normal; |
|||
} |
|||
} |
|||
|
|||
.payoff-has{ |
|||
color: #00C261; |
|||
} |
|||
.payoff-no{ |
|||
color: #FF4D4F; |
|||
} |
|||
} |
|||
|
|||
.status-info{ |
|||
display: inline-block; |
|||
padding: 2px 10px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.default{ |
|||
color: #626573; |
|||
background: #F6F7FA; |
|||
border: 1px solid #DFE2E6; |
|||
} |
|||
.success{ |
|||
color: #0DAF49; |
|||
background: rgba(239, 255, 224, 0.5); |
|||
border: 1px solid rgba(0, 194, 97, 0.6); |
|||
} |
|||
.warning{ |
|||
color: #FF4D4F; |
|||
background: #FFF1F0; |
|||
border: 1px solid #FFA39E; |
|||
} |
|||
} |
|||
.toolFilled{ |
|||
max-width: 457px; |
|||
padding: 12px 16px; |
|||
box-sizing: border-box; |
|||
color: #1E2226; |
|||
letter-spacing: 0.08em; |
|||
gap: 8px; |
|||
line-height: 20px; |
|||
img{ |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,92 @@ |
|||
<template> |
|||
<div class="main-content12 expense-wrap"> |
|||
<div class="flex-common"> |
|||
<div class="flex-between mb24"> |
|||
<div class=" flex gap12"> |
|||
<b>核算订单记录</b> |
|||
</div> |
|||
</div> |
|||
<div class="flex mb24 gap12" style="gap:30px" v-if="Object.keys(info).length>0"> |
|||
<div class="flex"><span>检测站点：</span>{{info.short_name}}</div> |
|||
<div class="flex"><span>支付方式：</span><img width="16px" :src="require('@/assets/pay/pay_'+info.pay_type+'.svg')" alt=""></div> |
|||
<div class="flex"><span>核算金额：</span>{{info.money}}</div> |
|||
<div class="flex"><span>账单生成时间：</span>{{info.ctime}}</div> |
|||
</div> |
|||
<el-form> |
|||
<GuipTable :tableData="tableList" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1"> |
|||
<el-table-column prop="id" label="ID" min-width="120px"></el-table-column> |
|||
<el-table-column prop="pro_desc" label="检测类型" min-width="180px"></el-table-column> |
|||
<el-table-column prop="tid" label="订单编号" min-width="180px"></el-table-column> |
|||
<el-table-column prop="sale_date" label="订单生成时间" min-width="180px"></el-table-column> |
|||
<el-table-column prop="report_date" label="检测完成时间" min-width="180px"></el-table-column> |
|||
<el-table-column prop="wordnum" label="字数" min-width="120px"></el-table-column> |
|||
<el-table-column prop="payment" label="实际收入（元）" min-width="180px"></el-table-column> |
|||
<el-table-column prop="cost" label="订单成本（元）" min-width="180px"></el-table-column> |
|||
<el-table-column prop="status" label="状态"></el-table-column> |
|||
</GuipTable> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
import GuipTable from "@/components/GuipTable.vue"; |
|||
|
|||
export default { |
|||
components: { |
|||
GuipTable |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
id: 0, |
|||
uid: 0, |
|||
pay_type: 0, |
|||
|
|||
tableLoading:false, |
|||
tableList:[], |
|||
info:[], |
|||
} |
|||
}, |
|||
mounted() { |
|||
const {id, uid, pay_type} = this.$route.query |
|||
if(!id || !uid || !pay_type) { |
|||
this.$message.error('非法请求'); |
|||
this.$router.push('/agent/payoff') |
|||
} |
|||
this.id = id |
|||
this.uid = uid |
|||
this.pay_type = pay_type |
|||
this.getBillInfo() |
|||
}, |
|||
methods: { |
|||
getBillInfo() { |
|||
this.tableLoading = true |
|||
try { |
|||
this.$http('POST', '/agentnew/ajax_get_bill_info', { |
|||
id: this.id, |
|||
uid: this.uid, |
|||
pay_type: this.pay_type, |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
this.info = response.data.info |
|||
this.tableList = response.data.list |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
} finally { |
|||
this.tableLoading = false |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.el-form-item{ |
|||
margin-bottom: 0 !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,605 @@ |
|||
<template> |
|||
<div class="main-content12 recharge-wrap"> |
|||
<h3 class="pagetitle">余额管理</h3> |
|||
<div class="flex-common"> |
|||
<div class="flex-between"> |
|||
<el-tabs v-model="totalType" v-if="totalType" class="custom-tabs" @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 style="width: 20px;height: 20px;" :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 style="width: 20px;" 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> |
|||
<GuipDialog :dialogVisible="dialogVisible1" confirmText="确认收货" width="457px" title="确认收货" :show-close-button="true" :show-cancel-button="false" @confirm="handleHideInfo()" @close="handleHideInfo()"> |
|||
<p class="paySuccessText"> |
|||
充值暂未成功<br/> |
|||
请到淘宝确认收货后，再点击下面的已确认收货按钮 |
|||
</p> |
|||
</GuipDialog> |
|||
<GuipDialog :dialogVisible="dialogVisible2" width="457px" title="订单号已使用" :show-close-button="true" :showFooterButton="false" @close="handleHideInfo()"> |
|||
<p>若充值未到账，可能是未成功确认收货。</p> |
|||
<div class="flex mt12" style="color:#006AFF"> |
|||
<p>前往充值列表查看</p> |
|||
<img src="@/assets/input_ex_ic_high.svg" alt=""> |
|||
</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 |
|||
|
|||
}, |
|||
options: { styleIsolation: "shared" }, |
|||
data() { |
|||
return { |
|||
totalType:null, |
|||
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', |
|||
}, |
|||
dialogVisible1: false, |
|||
dialogVisible2: false, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(()=>{ |
|||
this.totalType = '1'; |
|||
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; |
|||
this.dialogVisible1 = false; |
|||
this.dialogVisible2 = false; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
<style lang="scss" scoped> |
|||
::v-deep .el-tabs__active-bar { |
|||
display: block !important; |
|||
} |
|||
.paySuccessText{ |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
margin-top: 20px; |
|||
} |
|||
.recharge-wrap{ |
|||
::v-deep .el-tabs__header{ |
|||
margin: 0; |
|||
} |
|||
.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; |
|||
display: flex; |
|||
align-items: baseline; |
|||
} |
|||
.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> |
|||
Loading…
Reference in new issue