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.
704 lines
15 KiB
704 lines
15 KiB
<template>
|
|
<view class="wallet">
|
|
<view>
|
|
<u-navbar title="我的钱包" :background="background" title-color="#fff"></u-navbar>
|
|
</view>
|
|
<image :src="$picUrl+'/static/news1/walletBg.png'" class="bgImg" mode="widthFix"></image>
|
|
<view class="walletContainer">
|
|
<view class="section1">
|
|
<!-- <image src="../../static/news1/walletBgItem.png" class="topBg" mode=""></image> -->
|
|
<view class="yue" @click="introShow=true">余额说明</view>
|
|
<view class="accountNum">
|
|
<text>账户余额</text>
|
|
<image :src="$picUrl+'/static/news1/eye.png'" mode="widthFix"></image>
|
|
</view>
|
|
<view class="walletHandle">
|
|
<text>{{infor.balance}}</text>
|
|
<view class="chongzhiBtn" @click="onRecharge">
|
|
充值
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="section2">
|
|
<view class="accountItem">
|
|
<view class="itemTop">
|
|
<view class="itemTitle">
|
|
<text>可提现</text>
|
|
<u-icon name="arrow-right" color="#909090" size="22"></u-icon>
|
|
</view>
|
|
<view class="num">
|
|
¥ {{infor.pay_money}}
|
|
</view>
|
|
</view>
|
|
<view class="handleBtn" @click="cashOut">
|
|
立即提现
|
|
</view>
|
|
</view>
|
|
<view class="accountItem">
|
|
<view class="itemTop">
|
|
<view class="itemTitle">
|
|
<text>不可提现</text>
|
|
</view>
|
|
<view class="num">
|
|
¥ {{infor.expend_money}}
|
|
</view>
|
|
</view>
|
|
<view class="recordBtn" @click="cashOutList">
|
|
提现记录
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="getData">
|
|
<view class="order-tab">
|
|
<view class="tab" :class="{'action':OrderType==''}" @click="onOrderTab('')">
|
|
<text>全部</text>
|
|
<text class="line"></text>
|
|
</view>
|
|
<view class="tab" :class="{'action':OrderType==10}" @click="onOrderTab(10)">
|
|
<text>充值</text>
|
|
<text class="line"></text>
|
|
</view>
|
|
<view class="tab" :class="{'action':OrderType==50}" @click="onOrderTab(50)">
|
|
<text>提现</text>
|
|
<text class="line"></text>
|
|
</view>
|
|
<view class="tab" :class="{'action':OrderType==60}" @click="onOrderTab(60)">
|
|
<text>佣金</text>
|
|
<text class="line"></text>
|
|
</view>
|
|
<view class="tab" :class="{'action':OrderType==40}" @click="onOrderTab(40)">
|
|
<text>退款</text>
|
|
<text class="line"></text>
|
|
</view>
|
|
</view>
|
|
<u-picker mode="time" v-model="timeShow" :params="timeParams" @confirm="getTime"></u-picker>
|
|
<u-dropdown class="dropdownStyle" ref="dropdown1" height="100">
|
|
<u-dropdown-item title="属性" >
|
|
<view class="slot-content">
|
|
<view class="slotItem">
|
|
<view class="title">时间</view>
|
|
<view class="timecontainer">
|
|
<u-input border v-model="start_at" type="select" @click="onTime(1)" />
|
|
<text style="margin:0 20rpx;">-</text>
|
|
<u-input border v-model="end_at" type="select" @click="onTime(2)" />
|
|
|
|
</view>
|
|
</view>
|
|
<view class="slotItem">
|
|
<view class="title">分类</view>
|
|
<view class="itemBtn">
|
|
<view @click="setActive(item.id)" :class="active==item.id?'active btnText':'btnText'"
|
|
v-for="(item,index) in btnList" :key="index">{{item.text}}</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="btnGroup">
|
|
<button class="btn resetBtn">重置</button>
|
|
<button class="btn confirmBtn" @click="onSure" style="margin-left:20rpx;">确定</button>
|
|
</view>
|
|
</view>
|
|
</u-dropdown-item>
|
|
</u-dropdown>
|
|
</view>
|
|
<view class="dataList" style="margin: 0 30rpx;">
|
|
<view class="item" v-for="item in list" :key="i" v-if="list.length>0">
|
|
<view class="l">
|
|
<view class="a">{{item.describe}}</view>
|
|
<view class="b">{{item.create_time}}</view>
|
|
</view>
|
|
<view class="r">
|
|
<view class="a">-{{item.money}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="empty" v-else>
|
|
<image :src="$picUrl+'/static/news1/walletEmpty.png'" mode="widthFix"></image>
|
|
<text>暂无数据显示哦～</text>
|
|
</view>
|
|
</view>
|
|
<u-popup v-model="introShow" mode="center" border-radius="12">
|
|
<view class="introContent">
|
|
<view class="introTitle">余额说明</view>
|
|
<view class="introtext">1.账户余额=可提现金额+不可提现金额</view>
|
|
<view class="introtext">2.不可提现余额=近30天充值金额</view>
|
|
<view class="introtext">3.可提现余额=账户余额-不可提现金额</view>
|
|
<view class="introBtn" @click="introShow=false">我知道了</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import img from "@/static/wallet/wallet.png"
|
|
import * as wallet from '@/api/wallet'
|
|
export default {
|
|
data() {
|
|
return {
|
|
background: {
|
|
background: 'url(' + img + ') center top no-repeat',
|
|
backgroundSize: '100% auto',
|
|
},
|
|
OrderType: 0,
|
|
timeShow: false,
|
|
timeParams: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
},
|
|
btnList: [{
|
|
text: '充值',
|
|
id: 10
|
|
}, {
|
|
text: '提现',
|
|
id: 50
|
|
}, {
|
|
text: '退款',
|
|
id: 40
|
|
}, {
|
|
text: '付款',
|
|
id: 20
|
|
}],
|
|
active: -1,
|
|
introShow: false,
|
|
infor: '',
|
|
list: [],
|
|
start_at: '',
|
|
end_at: '',
|
|
paramsIndex: 0
|
|
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.getUserInfor()
|
|
this.getBalance('')
|
|
},
|
|
onShow() {
|
|
uni.$on('updateDataEvent', () => {
|
|
this.getUserInfor()
|
|
})
|
|
},
|
|
methods: {
|
|
onRecharge(){
|
|
uni.navigateTo({
|
|
url: '/pages/wallet/recharge/index'
|
|
})
|
|
},
|
|
getBalance(type) {
|
|
let that = this;
|
|
let obj = {
|
|
type: type,
|
|
start_at: that.start_at,
|
|
end_at: that.end_at,
|
|
}
|
|
wallet.balancelist(obj)
|
|
.then(res => {
|
|
that.list = []
|
|
that.list = res.data.list.data
|
|
})
|
|
.finally()
|
|
},
|
|
getUserInfor() {
|
|
let that = this;
|
|
wallet.info()
|
|
.then(res => {
|
|
that.infor = res.data.userInfo
|
|
})
|
|
.finally()
|
|
},
|
|
setActive(type) {
|
|
this.active = type;
|
|
},
|
|
onSure() {
|
|
this.getBalance(this.active)
|
|
this.timeShow = false
|
|
},
|
|
resetting() {
|
|
this.paramsIndex = 0;
|
|
this.start_at='';
|
|
this.end_at='';
|
|
this.getBalance('');
|
|
this.timeShow = false
|
|
},
|
|
onOrderTab(type) {
|
|
this.OrderType = type;
|
|
this.getBalance(type)
|
|
},
|
|
getTime(e) {
|
|
if (this.paramsIndex == 1) {
|
|
this.start_at = e.year + '-' + e.month + '-' + e.day;
|
|
}
|
|
if (this.paramsIndex == 2) {
|
|
this.end_at = e.year + '-' + e.month + '-' + e.day;
|
|
}
|
|
},
|
|
onTime(index) {
|
|
this.paramsIndex = index;
|
|
this.timeShow = true
|
|
},
|
|
cashOut() {
|
|
// 立即提现
|
|
uni.navigateTo({
|
|
url: '/pages/news/user/withdrawal?balance=' + this.infor.pay_money
|
|
})
|
|
},
|
|
cashOutList() {
|
|
// 提现记录
|
|
uni.navigateTo({
|
|
url: '/pages/news/user/rechargeList'
|
|
})
|
|
},
|
|
// openDrawer(){
|
|
// this.$refs.dropdown1.open();
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
page {
|
|
// min-height: calc(100vh);
|
|
min-height: 100%;
|
|
background-color: #fff;
|
|
|
|
.wallet {
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.bgImg {
|
|
width: 100%;
|
|
height: auto;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.navBarContent {
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
|
|
text {
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
}
|
|
|
|
.walletContainer {
|
|
margin: 0rpx 26rpx;
|
|
padding-top: 40rpx;
|
|
position: relative;
|
|
|
|
z-index: 10;
|
|
|
|
.section1 {
|
|
padding: 32rpx 36rpx 40rpx 60rpx;
|
|
background: url(https://www.royaum.com.cn/static/news1/walletBgItem.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.yue {
|
|
font-size: 26rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9C715E;
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
z-index: 9;
|
|
|
|
}
|
|
|
|
.accountNum {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #652F17;
|
|
}
|
|
|
|
image {
|
|
width: 28rpx;
|
|
height: auto;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.walletHandle {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 16rpx;
|
|
|
|
text {
|
|
font-size: 50rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #652F17;
|
|
|
|
}
|
|
|
|
.chongzhiBtn {
|
|
width: 120rpx;
|
|
height: 60rpx;
|
|
background: linear-gradient(180deg, #EE4837 0%, #F2673D 100%);
|
|
border-radius: 29px 29px 29px 29px;
|
|
opacity: 1;
|
|
border: 1px solid #ED3F38;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 55rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.section2 {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding: 30rpx 0;
|
|
box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.12);
|
|
opacity: 1;
|
|
|
|
.accountItem {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
.itemTop {
|
|
.itemTitle {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
text {
|
|
|
|
font-size: 26rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #909090;
|
|
|
|
}
|
|
}
|
|
|
|
.num {
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #2D2D2D;
|
|
margin-top: 16rpx;
|
|
margin-bottom: 28rpx;
|
|
|
|
}
|
|
}
|
|
|
|
.handleBtn {
|
|
width: 200rpx;
|
|
height: 60rpx;
|
|
background: linear-gradient(180deg, #EE4837 0%, #F2673D 100%);
|
|
border-radius: 29px 29px 29px 29px;
|
|
opacity: 1;
|
|
border: 1px solid #ED3F38;
|
|
font-size: 26rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 55rpx;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.recordBtn {
|
|
width: 200rpx;
|
|
height: 60rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 29px 29px 29px 29px;
|
|
opacity: 1;
|
|
border: 1px solid #ED3F38;
|
|
font-size: 26rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FC3E27;
|
|
line-height: 55rpx;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.getData {
|
|
position: relative;
|
|
|
|
.dropdownStyle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
|
|
.slot-content {
|
|
border: 1px solid transparent;
|
|
background-color: #fff;
|
|
padding-bottom: 40rpx;
|
|
|
|
.slotItem {
|
|
margin: 36rpx;
|
|
|
|
::v-deep .u-input--border {
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.timecontainer {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.itemBtn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.btnText {
|
|
flex: 1;
|
|
margin: 0 10rpx;
|
|
background-color: #F3F4F6;
|
|
border-radius: 50rpx;
|
|
padding: 20rpx 40rpx;
|
|
color: #343434;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.active {
|
|
|
|
background: linear-gradient(180deg, #EE4837 0%, #F2673D 100%);
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btnGroup {
|
|
display: flex;
|
|
padding: 0 40rpx;
|
|
margin-top: 60rpx;
|
|
|
|
.btn {
|
|
flex: 1;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
border: none !important;
|
|
}
|
|
|
|
.resetBtn {
|
|
background-color: #F3F4F6;
|
|
border-radius: 29px 29px 29px 29px;
|
|
opacity: 1;
|
|
// border: 1px solid #F3F4F6;
|
|
color: #222;
|
|
}
|
|
|
|
.confirmBtn {
|
|
background: linear-gradient(180deg, #EE4837 0%, #F2673D 100%);
|
|
border-radius: 29px 29px 29px 29px;
|
|
opacity: 1;
|
|
// border: 1px solid #ED3F38;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .u-dropdown__menu {
|
|
height: 100% !important;
|
|
}
|
|
|
|
::v-deep .u-dropdown__menu__item {
|
|
justify-content: flex-end;
|
|
padding-right: 20rpx;
|
|
}
|
|
|
|
.order-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
// width: 100%;
|
|
height: 100rpx;
|
|
background-color: #FFFFFF;
|
|
// width: calc(100% - 42px);
|
|
width: calc(100% - 70px);
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
.tab {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20%;
|
|
height: 80%;
|
|
|
|
text {
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #464646;
|
|
|
|
}
|
|
}
|
|
|
|
.action {
|
|
text {
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #FE422B;
|
|
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
width: 60rpx;
|
|
height: 6rpx;
|
|
background: #FE422B;
|
|
border-radius: 25px 25px 25px 25px;
|
|
background: #FE422B;
|
|
// background: linear-gradient(to right,$base,#f6f6f6);
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dataList {
|
|
.empty {
|
|
// margin:0 auto;
|
|
// text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
|
|
image {
|
|
width: 114rpx;
|
|
height: auto;
|
|
margin-top: 200rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #464646;
|
|
margin-top: 44rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.introContent {
|
|
background-color: #fff;
|
|
padding: 40rpx;
|
|
|
|
.introTitle {
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
margin-bottom: 54rpx;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.introtext {
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #727272;
|
|
margin-bottom: 34rpx;
|
|
}
|
|
|
|
.introBtn {
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
background: #F55349;
|
|
border-radius: 4px 4px 4px 4px;
|
|
opacity: 1;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
margin-top: 60rpx;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.item {
|
|
padding: 20rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-top: 1px solid #F3F3F3;
|
|
|
|
&:first-child {
|
|
border-top-color: #fff;
|
|
}
|
|
|
|
.l {
|
|
flex: 1;
|
|
|
|
.a {
|
|
padding: 20rpx 0;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #595959;
|
|
}
|
|
|
|
.b {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #A3A3A3;
|
|
}
|
|
}
|
|
|
|
.r {
|
|
flex: 1;
|
|
text-align: right;
|
|
|
|
.a {
|
|
font-size: 40rpx;
|
|
font-weight: 500;
|
|
color: #414141;
|
|
}
|
|
|
|
.b {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #A3A3A3;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|