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.
597 lines
13 KiB
597 lines
13 KiB
<template>
|
|
<view class="wallet">
|
|
<view>
|
|
<u-navbar title="我的钱包" :background="background" title-color="#fff"></u-navbar>
|
|
</view>
|
|
<image src="../../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="/static/news1/eye.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="walletHandle">
|
|
<text>22.00</text>
|
|
<view class="chongzhiBtn">
|
|
充值
|
|
</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">
|
|
¥ 16.66
|
|
</view>
|
|
</view>
|
|
<view class="handleBtn" @click="cashOut">
|
|
立即提现
|
|
</view>
|
|
</view>
|
|
<view class="accountItem">
|
|
<view class="itemTop">
|
|
<view class="itemTitle">
|
|
<text>不可提现</text>
|
|
</view>
|
|
<view class="num">
|
|
¥ 0.00
|
|
</view>
|
|
</view>
|
|
<view class="recordBtn" @click="cashOutList">
|
|
提现记录
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="getData">
|
|
<view class="order-tab">
|
|
<view class="tab" :class="{'action':OrderType==0}" @click="onOrderTab(0)">
|
|
<text>全部</text>
|
|
<text class="line"></text>
|
|
</view>
|
|
<view class="tab" :class="{'action':OrderType==1}" @click="onOrderTab(1)">
|
|
<text>充值</text>
|
|
<text class="line"></text>
|
|
</view>
|
|
<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(2)">
|
|
<text>提现</text>
|
|
<text class="line"></text>
|
|
</view>
|
|
<view class="tab" :class="{'action':OrderType==3}" @click="onOrderTab(3)">
|
|
<text>佣金</text>
|
|
<text class="line"></text>
|
|
</view>
|
|
<view class="tab" :class="{'action':OrderType==4}" @click="onOrderTab(4)">
|
|
<text>退款</text>
|
|
<text class="line"></text>
|
|
</view>
|
|
<!-- <view class="tab" @click="openDrawer">
|
|
<text>筛选</text>
|
|
|
|
</view> -->
|
|
|
|
</view>
|
|
<u-picker mode="time" v-model="timeShow" :params="timeParams"></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="form.startTime" type="select" @click="timeShow = true" />
|
|
<text style="margin:0 20rpx;">-</text>
|
|
<u-input border v-model="form.endTime" type="select" @click="timeShow = true" />
|
|
|
|
</view>
|
|
</view>
|
|
<view class="slotItem">
|
|
<view class="title">分类</view>
|
|
<view class="itemBtn">
|
|
<view @click="setActive(index)" :class="active==index?'active btnText':'btnText'"
|
|
v-for="(item,index) in btnList" :key="index">{{item}}</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="btnGroup">
|
|
<button class="btn resetBtn">重置</button>
|
|
<button class="btn confirmBtn" style="margin-left:20rpx;">确定</button>
|
|
</view>
|
|
</view>
|
|
</u-dropdown-item>
|
|
</u-dropdown>
|
|
</view>
|
|
<view class="dataList">
|
|
<view class="empty">
|
|
<image src="/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,
|
|
hour: false,
|
|
minute: false,
|
|
second: false
|
|
},
|
|
form: {
|
|
startTime: '',
|
|
endTime: ''
|
|
},
|
|
btnList: ['充值', '提现', '退款', '付款'],
|
|
active: -1,
|
|
introShow: false,
|
|
infor:'',
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.getUserInfor()
|
|
},
|
|
|
|
methods: {
|
|
getUserInfor() {
|
|
let that = this;
|
|
wallet.info()
|
|
.then(res => {
|
|
that.infor = res.data
|
|
})
|
|
.finally()
|
|
},
|
|
setActive(index) {
|
|
this.active = index;
|
|
},
|
|
onOrderTab(type) {
|
|
this.OrderType = type;
|
|
|
|
},
|
|
cashOut() {
|
|
// 立即提现
|
|
uni.navigateTo({
|
|
url: '/pages/news/user/withdrawal'
|
|
})
|
|
},
|
|
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(/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;
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|