618 lines
16 KiB
Vue
618 lines
16 KiB
Vue
<template>
|
||
<div class="wallet">
|
||
<a-breadcrumb separator=">">
|
||
<a-breadcrumb-item>Home</a-breadcrumb-item>
|
||
<a-breadcrumb-item href=""> Application Center </a-breadcrumb-item>
|
||
<a-breadcrumb-item href=""> Application List </a-breadcrumb-item>
|
||
<a-breadcrumb-item>An Application</a-breadcrumb-item>
|
||
</a-breadcrumb>
|
||
<div class="top">
|
||
<div class="mywallet">
|
||
<div class="topinfo">
|
||
<div class="title">我的钱包</div>
|
||
|
||
<div class="topbtn" @click="navto(2)">立即提现</div>
|
||
<div class="topbtn topbtn1" @click="navto(3)">提现记录</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="accounts">
|
||
<div class="left" @click="listchange(1)">
|
||
<img src="@/static/images/account.png" alt="" class="pic" />
|
||
<div class="texts">
|
||
<div>绑定用户</div>
|
||
<div class="num">{{accountlist.length}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="linecolumn"></div>
|
||
<div class="left" @click="listchange(2)">
|
||
<img src="@/static/images/money.png" alt="" class="pic" />
|
||
<div class="texts">
|
||
<div>账户余额</div>
|
||
<div class="num">
|
||
<span class="moneyicon" v-if="ifchina">￥</span>
|
||
<span class="moneyicon" v-else> $ </span>
|
||
{{store.state.userinfo.moneyValue}}
|
||
|
||
<!-- {{store.state.userinfo.money.split('.')[0]}}
|
||
<span class="float">{{store.state.userinfo.money.split('.')[1]?'.'+store.state.userinfo.money.split('.')[1]:''}}</span> -->
|
||
|
||
<!-- <span class="float">{{'$0'.split('.')}}</span> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="add" @click="navto(1)">
|
||
<img src="@/static/images/walletadd.png" alt="" class="icon" />
|
||
<div>添加新的账户</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accountlist" v-if="ifchina && listindex==1">
|
||
<div class="accountitem" v-for="(i,j) in accountlist" :key="j">
|
||
<div class="hostinfo">
|
||
<div v-if="i.type==4">
|
||
<img src="@/static/images/bank.png" alt="" class="icon" />
|
||
<span class="accounttype">银行卡</span>
|
||
</div>
|
||
<div v-if="i.type==2">
|
||
<img
|
||
src="@/static/images/walletzfb.png"
|
||
alt=""
|
||
class="icon icon1"
|
||
/>
|
||
<span class="accounttype">支付宝</span>
|
||
</div>
|
||
<div v-if="i.type==1">
|
||
<img
|
||
src="@/static/images/walletweixin.png"
|
||
alt=""
|
||
class="icon icon1"
|
||
/>
|
||
<span class="accounttype">微信</span>
|
||
</div>
|
||
<div class="btns">
|
||
<div class="btn" @click="navto(1,i.wallectid)">修改</div>
|
||
<div class="btn1" @click="del(i.wallectid)">删除</div>
|
||
</div>
|
||
</div>
|
||
<div class="zhanghao" v-if="i.type==4">账号 <span>{{i.bankcode}}</span></div>
|
||
<div class="zhanghao" v-else>账号 <span>{{i.account}}</span></div>
|
||
</div>
|
||
|
||
<!-- <div class="accountitem">
|
||
<div class="hostinfo">
|
||
<div>
|
||
<img
|
||
src="@/static/images/walletzfb.png"
|
||
alt=""
|
||
class="icon icon1"
|
||
/>
|
||
<span class="accounttype">支付宝</span>
|
||
</div>
|
||
|
||
<div class="btns">
|
||
<div class="btn">修改</div>
|
||
<div class="btn1">删除</div>
|
||
</div>
|
||
</div>
|
||
<div class="zhanghao">账号：6217 **** **** **** 175</div>
|
||
</div> -->
|
||
|
||
<!-- <div class="accountitem">
|
||
<div class="hostinfo">
|
||
<div>
|
||
<img
|
||
src="@/static/images/walletweixin.png"
|
||
alt=""
|
||
class="icon icon1"
|
||
/>
|
||
<span class="accounttype">微信</span>
|
||
</div>
|
||
|
||
<div class="btns">
|
||
<div class="btn">修改</div>
|
||
<div class="btn1">删除</div>
|
||
</div>
|
||
</div>
|
||
<div class="zhanghao">账号：6217 **** **** **** 175</div>
|
||
</div> -->
|
||
</div>
|
||
<div class="accountlist" v-if="!ifchina && listindex==1">
|
||
<!-- <div class="accountitem">
|
||
<div class="hostinfo">
|
||
<div>
|
||
<img src="@/static/images/foreignbank.png" alt="" class="icon" />
|
||
<span class="accounttype">银行卡</span>
|
||
</div>
|
||
|
||
<div class="btns">
|
||
<div class="btn">修改</div>
|
||
<div class="btn1">删除</div>
|
||
</div>
|
||
</div>
|
||
<div class="zhanghao">账号：6217 **** **** **** 175</div>
|
||
</div> -->
|
||
|
||
<div class="accountitem" v-for="(i,j) in accountlist" :key="j">
|
||
<div class="hostinfo">
|
||
<div v-if="i.type==4">
|
||
<img src="@/static/images/foreignbank.png" alt="" class="icon" />
|
||
<span class="accounttype">银行卡</span>
|
||
</div>
|
||
|
||
<div v-else>
|
||
<img src="@/static/images/paypi.png" alt="" class="icon icon1" />
|
||
<span class="accounttype">paypal</span>
|
||
</div>
|
||
|
||
<div class="btns">
|
||
<div class="btn" @click="navto(1,i.wallectid)">修改</div>
|
||
<div class="btn1" @click="del(i.wallectid)">删除</div>
|
||
</div>
|
||
</div>
|
||
<div class="zhanghao" v-if="i.type==4">账号 <span>{{i.bankcode}}</span></div>
|
||
<div class="zhanghao" v-else>账号 <span>{{i.account}}</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="mingxilist" v-if="ifchina && listindex==2">
|
||
<div class="mingxitop">
|
||
<div class="tabs">
|
||
<span class="tabtitle">明细查询</span>
|
||
|
||
<div :class="tabindex == 0 ? 'on' : ''" @click="tabchange(0)">
|
||
全部
|
||
</div>
|
||
<div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">
|
||
收入
|
||
</div>
|
||
<div :class="tabindex == 2 ? 'on' : ''" @click="tabchange(2)">
|
||
支出
|
||
</div>
|
||
</div>
|
||
<a-range-picker @change="onChange" class="choosedate" :placeholder="['请选择开始日期', '请选择结束日期']"/>
|
||
</div>
|
||
|
||
<div>
|
||
<table class="table">
|
||
<thead>
|
||
<tr class="head">
|
||
<th>日期</th>
|
||
<th>类型</th>
|
||
<th>金额</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(i,j) in salelist.data" :key="j">
|
||
<td>{{i.created_at}}</td>
|
||
<td>{{i.typename}}</td>
|
||
<td class="moneyadd moneyreverse" v-if="i.type==2">-￥{{i.money}}</td>
|
||
<td class="moneyadd " v-else>+￥{{i.money}}</td>
|
||
<td @click="navto(4,i.accountid)">查看详情{{i.accountid}}</td>
|
||
</tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="pages">
|
||
<a-pagination v-model:current="page" :total="salelist.total" :showLessItems="true" @change="pagechange"/>
|
||
</div>
|
||
</div>
|
||
<NavBottom class="navbottom"></NavBottom>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, onMounted, ref, toRaw } from "vue";
|
||
import NavBottom from "@/components/NavBottom.vue";
|
||
import router from "@/router";
|
||
import store from '@/store';
|
||
import { deleteaccount, getwallect, saleinfo } from "@/api";
|
||
import { useRoute } from 'vue-router';
|
||
export default defineComponent({
|
||
name: "Wallet",
|
||
components: {
|
||
NavBottom,
|
||
},
|
||
setup() {
|
||
const ifchina = true;
|
||
const ifmingxi = false;
|
||
const salelist=ref<any>({})
|
||
const accountlist =ref<Array<any>>([])
|
||
const listindex=ref<number>(1)
|
||
const state=ref<number>(0)
|
||
const dates=ref<Array<string>>(["",""])
|
||
const page = ref(1);
|
||
onMounted(async () => {
|
||
console.log(useRoute().query)
|
||
listindex.value=1
|
||
if(useRoute().query.ifsale){
|
||
listindex.value=2
|
||
}else{
|
||
listindex.value=1
|
||
}
|
||
salelist.value = await saleinfo();
|
||
accountlist.value=await getwallect();
|
||
console.log(store.state.userinfo)
|
||
});
|
||
const tabindex = ref(0);
|
||
async function tabchange(e: number): Promise<void> {
|
||
tabindex.value = e;
|
||
state.value=e
|
||
salelist.value=await saleinfo({status:e,bdate:dates.value[0],edate:dates.value[1],page:page.value});
|
||
// console.log(videolist)
|
||
}
|
||
function listchange(e: number){
|
||
listindex.value=e
|
||
}
|
||
async function onChange(e: any,dateString:string){
|
||
console.log(dateString)
|
||
dates.value[0]=dateString[0]
|
||
dates.value[1]=dateString[1]
|
||
salelist.value=await saleinfo({bdate:dateString[0],edate:dateString[1],status:state.value,page:page.value});
|
||
}
|
||
async function del(e: number){
|
||
deleteaccount(e)
|
||
}
|
||
async function pagechange(e:any) {
|
||
console.log(e)
|
||
page.value=e
|
||
salelist.value=await saleinfo({status:state.value,bdate:dates.value[0],edate:dates.value[1],page:e});
|
||
}
|
||
function navto(index: number,id?:number) {
|
||
let url = "";
|
||
switch (index) {
|
||
case 1:
|
||
|
||
url = "/mine/addaccount"
|
||
console.log(url)
|
||
break;
|
||
case 2:
|
||
url = "/mine/cashout";
|
||
break;
|
||
case 3:
|
||
url = "/mine/transaction";
|
||
break;
|
||
case 4:
|
||
url="/mine/transactionxq"
|
||
}
|
||
if(id){
|
||
router.push({
|
||
path: url,
|
||
query:{id:id}
|
||
});
|
||
}else{
|
||
router.push({
|
||
path: url
|
||
});
|
||
}
|
||
|
||
}
|
||
return {
|
||
ifchina,
|
||
ifmingxi,
|
||
navto,
|
||
tabindex,
|
||
tabchange,
|
||
salelist,
|
||
accountlist,
|
||
listchange,
|
||
listindex,
|
||
onChange,
|
||
dates,
|
||
del,
|
||
store,
|
||
pagechange
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.wallet ::v-deep(.ant-breadcrumb) > span:last-child {
|
||
color: #08ae98;
|
||
}
|
||
.wallet ::v-deep(.ant-calendar-picker) {
|
||
width: 271px;
|
||
height: 25px;
|
||
}
|
||
.wallet ::v-deep(.ant-calendar-range-picker-input){
|
||
height: 25px;
|
||
font-size:9px;
|
||
}
|
||
.wallet ::v-deep(.ant-calendar-date){
|
||
font-size: 12px;
|
||
}
|
||
.wallet {
|
||
.tabs {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
font-size: 13px;
|
||
font-weight: bold;
|
||
color: #111;
|
||
padding: 11px 0;
|
||
.tabtitle {
|
||
width: 60px;
|
||
margin-right: 30px;
|
||
}
|
||
> div {
|
||
margin-right: 38px;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
width: 40px;
|
||
font-size:11px;
|
||
}
|
||
.on {
|
||
color: #08ae98;
|
||
position: relative;
|
||
&::before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
bottom: -6px;
|
||
left: 8px;
|
||
width: 25px;
|
||
height: 1px;
|
||
background-color: #08ae98;
|
||
}
|
||
}
|
||
}
|
||
.mywallet {
|
||
width: 761px;
|
||
margin-right: 18px;
|
||
background: white;
|
||
border-radius: 17px;
|
||
}
|
||
.top {
|
||
// width: 761px;
|
||
// height: 228px;
|
||
margin-top: 23px;
|
||
display: flex;
|
||
.topinfo {
|
||
display: flex;
|
||
}
|
||
.title {
|
||
color: #111111;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
padding-left: 40px;
|
||
padding-top: 40px;
|
||
margin-right: 506px;
|
||
}
|
||
.topbtn {
|
||
width: 57px;
|
||
height: 18px;
|
||
font-size: 10px;
|
||
text-align: center;
|
||
line-height: 18px;
|
||
color: #08ae98;
|
||
font-weight: 500;
|
||
border: 1px solid #08ae98;
|
||
border-radius: 3px;
|
||
margin-top: 35px;
|
||
margin-right: 12px;
|
||
}
|
||
.topbtn1 {
|
||
color: #d22c2e;
|
||
border: 1px solid #d22c2e;
|
||
}
|
||
.line {
|
||
width: 682px;
|
||
height: 1px;
|
||
background: #eeeeee;
|
||
margin: 0 auto;
|
||
margin-top: 11px;
|
||
}
|
||
.accounts {
|
||
width: 682px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
padding-bottom: 10px;
|
||
.left {
|
||
width: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
color: #111111;
|
||
font-size: 11px;
|
||
.texts {
|
||
margin: auto 0;
|
||
margin-left: 23px;
|
||
.moneyicon {
|
||
font-size: 14px;
|
||
}
|
||
.float {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
.pic {
|
||
width: 98px;
|
||
height: 100px;
|
||
margin: auto 0;
|
||
}
|
||
.num {
|
||
color: #08ae98;
|
||
font-size: 26px;
|
||
}
|
||
}
|
||
.linecolumn {
|
||
width: 1px;
|
||
height: 142px;
|
||
background: #eeeeee;
|
||
margin: auto 0;
|
||
}
|
||
}
|
||
.add {
|
||
width: 371px;
|
||
height: 228px;
|
||
|
||
background: #ffffff;
|
||
border-radius: 17px;
|
||
color: #08ae98;
|
||
font-weight: 500;
|
||
font-size: 11px;
|
||
margin-left: 18px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
text-align: center;
|
||
.icon {
|
||
width: 31px;
|
||
height: 31px;
|
||
margin: 0 auto;
|
||
margin-bottom: 11px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.accountlist {
|
||
margin-top: 17px;
|
||
display: flex;
|
||
width:1170px;
|
||
flex-wrap: wrap;
|
||
.accountitem {
|
||
width: 372px;
|
||
height: 226px;
|
||
background: white;
|
||
border-radius: 17px;
|
||
margin-left: 17px;
|
||
margin-bottom: 17px;
|
||
.hostinfo {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding-top: 38px;
|
||
.icon {
|
||
width: 47px;
|
||
height: 29px;
|
||
margin-right: 11px;
|
||
}
|
||
.icon1 {
|
||
width: 29px !important;
|
||
height: 29px !important;
|
||
}
|
||
.accounttype {
|
||
font-size: 13px;
|
||
color: #111111;
|
||
font-weight: 500;
|
||
}
|
||
.btns {
|
||
display: flex;
|
||
}
|
||
.btn {
|
||
width: 46px;
|
||
height: 23px;
|
||
border: 1px solid #febd3b;
|
||
border-radius: 3px;
|
||
color: #febd3b;
|
||
font-size: 11px;
|
||
text-align: center;
|
||
line-height: 23px;
|
||
margin-right: 11px;
|
||
}
|
||
.btn1 {
|
||
width: 46px;
|
||
height: 23px;
|
||
border: 1px solid #d12c2e;
|
||
border-radius: 3px;
|
||
font-size: 11px;
|
||
text-align: center;
|
||
line-height: 23px;
|
||
color: #d12c2e;
|
||
}
|
||
}
|
||
.zhanghao {
|
||
color: #111111;
|
||
font-size: 11px;
|
||
margin-top: 119px;
|
||
margin-left: 34px;
|
||
>span{
|
||
margin-left:15px
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.mingxilist {
|
||
width: 1150px;
|
||
// max-height: 533px;
|
||
background: white;
|
||
border-radius: 18px;
|
||
margin-top: 18px;
|
||
|
||
.mingxitop {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.choosedate{
|
||
margin:auto 0;
|
||
margin-right: 39px;
|
||
}
|
||
.tabs {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
padding-top: 35px;
|
||
padding-left: 40px;
|
||
}
|
||
.beforetab {
|
||
color: #121212;
|
||
font-size: 13px;
|
||
line-height: 35px;
|
||
font-weight: bold;
|
||
margin-right: 57px;
|
||
}
|
||
}
|
||
.table {
|
||
width: 1150px;
|
||
max-height: 365px;
|
||
text-align: center;
|
||
color: #343434;
|
||
font-size: 12px;
|
||
margin-top: 13px;
|
||
tr {
|
||
width: 1150px;
|
||
height: 40px;
|
||
// border-bottom: 1px solid red;
|
||
}
|
||
tr:nth-child(even) {
|
||
//偶数行
|
||
background: #f7fcfc;
|
||
}
|
||
.head {
|
||
width: 1150px;
|
||
height: 43px;
|
||
color: white;
|
||
background: #08ae98;
|
||
}
|
||
.moneyadd {
|
||
color: #08ae98;
|
||
}
|
||
.moneyreverse {
|
||
color: #d22d2e;
|
||
}
|
||
}
|
||
.navbottom {
|
||
margin-top: 160px;
|
||
}
|
||
.pages {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 46px;
|
||
padding-bottom: 28px;
|
||
::v-deep(.ant-pagination-next) > .ant-pagination-item-link,
|
||
::v-deep(.ant-pagination-prev) > .ant-pagination-item-link,
|
||
::v-deep(.ant-pagination-item),
|
||
::v-deep(.ant-pagination-jump-next-custom-icon),
|
||
::v-deep(.ant-pagination-jump-prev-custom-icon) {
|
||
border: 1px solid #08ae98;
|
||
}
|
||
::v-deep(.ant-pagination-item-active) a {
|
||
color: #fff;
|
||
}
|
||
::v-deep(.ant-pagination-item-active) {
|
||
background-color: #08ae98;
|
||
}
|
||
}
|
||
}
|
||
</style> |