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.
760 lines
16 KiB
760 lines
16 KiB
<template>
|
|
<view class="wallet">
|
|
<view>
|
|
<u-navbar title="我的钱包" :border-bottom="false" :background="background" title-color="#fff"
|
|
back-icon-color='#fff'></u-navbar>
|
|
</view>
|
|
<image :src="$picUrl+'/static/news1/walletBg.png'" class="bgImg" mode="widthFix"></image>
|
|
<view class="walletContainer">
|
|
<view class="section1">
|
|
<view class="yue" @click="introShow=true">余额说明</view>
|
|
<view class="accountNum">
|
|
<text>账户余额</text>
|
|
<view style="margin-left: 5px;" @click="isEye=!isEye">
|
|
<u-icon :name="isEye?'eye':'eye-off'" color="#652F17" size="34"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="walletHandle">
|
|
<text>{{isEye?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-calendar v-model="timeShow" mode="range" @change="getTime" range-color='#FF6257' range-bg-color='#FFBDBA'
|
|
active-bg-color='#FF6257'></u-calendar>
|
|
<u-dropdown class="dropdownStyle" ref="dropdown1" height="100" title-size='28' active-color="#464646"
|
|
@open="dropOpen" @close="dropClose">
|
|
<u-dropdown-item title="筛选" @update:modelValue="open()">
|
|
<view class="slot-content">
|
|
<view class="slotItem">
|
|
<view class="title">时间</view>
|
|
<view class="timecontainer">
|
|
<view class="selectTime" @click="timeShow = true">
|
|
{{start_at?start_at:'开始日期'}}
|
|
</view>
|
|
<text>-</text>
|
|
<view class="selectTime" @click="timeShow = true">
|
|
{{end_at?end_at:'结束日期'}}
|
|
</view>
|
|
</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 36rpx;" v-if="list.length>0">
|
|
<view class="item" v-for="item in list" :key="i">
|
|
<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>
|
|
<u-empty text="暂无数据显示哦～" v-else mode="list"></u-empty>
|
|
<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 * as wallet from '@/api/wallet'
|
|
export default {
|
|
data() {
|
|
return {
|
|
background: {
|
|
background: 'url(https://www.royaum.com.cn/static/wallet/wallet.png) center top no-repeat',
|
|
backgroundSize: '100% auto',
|
|
},
|
|
isEye: true,
|
|
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: '',
|
|
isDropShow: true
|
|
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.getUserInfor()
|
|
this.getBalance('')
|
|
},
|
|
onShow() {
|
|
uni.$on('updateDataEvent', () => {
|
|
this.getUserInfor()
|
|
})
|
|
},
|
|
methods: {
|
|
dropOpen() {
|
|
this.OrderType = 999
|
|
},
|
|
dropClose() {
|
|
this.OrderType = ''
|
|
this.getBalance('')
|
|
},
|
|
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.start_at = '';
|
|
this.end_at = '';
|
|
this.getBalance('');
|
|
this.timeShow = false
|
|
},
|
|
onOrderTab(type) {
|
|
this.$refs.dropdown1.close();
|
|
this.OrderType = type;
|
|
this.getBalance(type)
|
|
},
|
|
getTime(e) {
|
|
this.start_at = e.startDate;
|
|
this.end_at = e.endDate;
|
|
},
|
|
cashOut() {
|
|
// 立即提现
|
|
uni.navigateTo({
|
|
url: '/pages/news/user/withdrawal?balance=' + this.infor.pay_money
|
|
})
|
|
},
|
|
cashOutList() {
|
|
// 提现记录
|
|
uni.navigateTo({
|
|
url: '/pages/news/user/rechargeList'
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
page {
|
|
// min-height: calc(100vh);
|
|
min-height: 100%;
|
|
background: #fff !important;
|
|
|
|
.wallet {
|
|
height: 100%;
|
|
position: relative;
|
|
background-color: #fff;
|
|
|
|
.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: 32rpx;
|
|
right: 36rpx;
|
|
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;
|
|
border-radius: 0 0 6px 6px;
|
|
|
|
.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;
|
|
background-color: #fff;
|
|
|
|
.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;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.itemBtn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.btnText {
|
|
flex: 1;
|
|
margin-right: 20rpx;
|
|
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;
|
|
line-height: 85upx;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
// border: none !important;
|
|
width: 260rpx;
|
|
height: 85upx
|
|
}
|
|
|
|
.resetBtn {
|
|
background-color: #fff;
|
|
border-radius: 29px 29px 29px 29px;
|
|
border: 1px solid #DDDDDD;
|
|
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 .uni-button:after {
|
|
border: none !important;
|
|
}
|
|
|
|
::v-deep .u-dropdown__menu {
|
|
height: 100upx !important;
|
|
}
|
|
|
|
::v-deep .u-dropdown__menu__item {
|
|
justify-content: flex-end;
|
|
padding-right: 30rpx;
|
|
align-items: stretch;
|
|
}
|
|
|
|
::v-deep .u-input__right-icon {
|
|
display: none !important;
|
|
}
|
|
|
|
::v-deep .u-input {
|
|
text-align: center !important;
|
|
background-color: #F3F4F6 !important;
|
|
border-color: #F3F4F6 !important;
|
|
width: 40rpx !important;
|
|
padding: 0 70rpx !important;
|
|
}
|
|
|
|
|
|
|
|
.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 {
|
|
|
|
.a {
|
|
padding: 20rpx 0;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #595959;
|
|
margin: 0 6rpx;
|
|
}
|
|
|
|
.b {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #A3A3A3;
|
|
margin: 0 6rpx;
|
|
}
|
|
}
|
|
|
|
.r {
|
|
flex: 1;
|
|
text-align: right;
|
|
|
|
.a {
|
|
font-size: 40rpx;
|
|
font-weight: 500;
|
|
color: #414141;
|
|
margin: 0 6rpx;
|
|
}
|
|
|
|
.b {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #A3A3A3;
|
|
margin: 0 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.selectTime {
|
|
width: 288rpx;
|
|
height: 70rpx;
|
|
background: #F3F3F3;
|
|
border-radius: 44rpx;
|
|
text-align: center;
|
|
line-height: 70rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #A1A1A1;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin: 0 15rpx;
|
|
}
|
|
|
|
::v-deep .u-btn--primary {
|
|
background-color: #FF6257 !important;
|
|
border-color: #FF6257;
|
|
}
|
|
|
|
::v-deep .u-dropdown__content__mask {
|
|
background: #fff !important;
|
|
}
|
|
|
|
::v-deep .u-empty {
|
|
padding: 100rpx 0;
|
|
}
|
|
</style>
|
|
|