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.
526 lines
12 KiB
526 lines
12 KiB
<template>
|
|
<view class="wallet">
|
|
<view style="width:100%;position: fixed;top:0;z-index:99">
|
|
<view class="navBarContent">
|
|
<u-icon name="arrow-left" style="position: absolute;top:50%;left:40upx;transform: translateY(-50%);" color="#ffffff" size="24"></u-icon>
|
|
<text>我的钱包</text>
|
|
</view>
|
|
|
|
</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">
|
|
立即提现
|
|
</view>
|
|
</view>
|
|
<view class="accountItem">
|
|
<view class="itemTop">
|
|
<view class="itemTitle">
|
|
<text>不可提现</text>
|
|
</view>
|
|
<view class="num">
|
|
¥ 0.00
|
|
</view>
|
|
</view>
|
|
<view class="recordBtn">
|
|
提现记录
|
|
</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 20upx;">-</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:20upx;">确定</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>
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
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
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
|
|
},
|
|
|
|
methods: {
|
|
setActive(index){
|
|
this.active = index;
|
|
},
|
|
onOrderTab(type){
|
|
this.OrderType = type;
|
|
|
|
},
|
|
// 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:88upx;
|
|
line-height: 88upx;
|
|
text-align: center;
|
|
position: relative;
|
|
text{
|
|
font-size: 32upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
}
|
|
.walletContainer{
|
|
margin:0upx 26upx;
|
|
padding-top:120upx;
|
|
position: relative;
|
|
|
|
z-index:10;
|
|
.section1{
|
|
padding:32upx 36upx 40upx 60upx;
|
|
background: url(/static/news1/walletBgItem.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
.yue{
|
|
font-size: 26upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9C715E;
|
|
position: absolute;
|
|
top:20upx;
|
|
right:20upx;
|
|
z-index:9;
|
|
|
|
}
|
|
.accountNum{
|
|
display: flex;
|
|
align-items: center;
|
|
text{
|
|
font-size: 26upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #652F17;
|
|
}
|
|
image{
|
|
width:28upx;
|
|
height:auto;
|
|
margin-left:16upx;
|
|
}
|
|
|
|
}
|
|
.walletHandle{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top:16upx;
|
|
text{
|
|
font-size: 50upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #652F17;
|
|
|
|
}
|
|
.chongzhiBtn{
|
|
width: 120upx;
|
|
height: 60upx;
|
|
background: linear-gradient(180deg, #EE4837 0%, #F2673D 100%);
|
|
border-radius: 29px 29px 29px 29px;
|
|
opacity: 1;
|
|
border: 1px solid #ED3F38;
|
|
font-size: 24upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 55upx;
|
|
margin-left:20upx;
|
|
}
|
|
}
|
|
}
|
|
.section2{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding:30upx 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: 26upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #909090;
|
|
|
|
}
|
|
}
|
|
.num{
|
|
font-size: 32upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #2D2D2D;
|
|
margin-top:16upx;
|
|
margin-bottom:28upx;
|
|
|
|
}
|
|
}
|
|
.handleBtn{
|
|
width: 200upx;
|
|
height: 60upx;
|
|
background: linear-gradient(180deg, #EE4837 0%, #F2673D 100%);
|
|
border-radius: 29px 29px 29px 29px;
|
|
opacity: 1;
|
|
border: 1px solid #ED3F38;
|
|
font-size: 26upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 55upx;
|
|
text-align: center;
|
|
margin:0 auto;
|
|
}
|
|
.recordBtn{
|
|
width: 200upx;
|
|
height: 60upx;
|
|
background: #FFFFFF;
|
|
border-radius: 29px 29px 29px 29px;
|
|
opacity: 1;
|
|
border: 1px solid #ED3F38;
|
|
font-size: 26upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FC3E27;
|
|
line-height: 55upx;
|
|
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:40upx;
|
|
.slotItem{
|
|
margin:36upx;
|
|
::v-deep .u-input--border{
|
|
border-radius:50upx;
|
|
}
|
|
.title{
|
|
font-size:24upx;
|
|
margin-bottom: 20upx;
|
|
}
|
|
.timecontainer{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.itemBtn{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.btnText{
|
|
flex:1;
|
|
margin:0 10upx;
|
|
background-color: #F3F4F6;
|
|
border-radius:50upx;
|
|
padding:20upx 40upx;
|
|
color:#343434;
|
|
text-align: center;
|
|
|
|
}
|
|
.active{
|
|
|
|
background: linear-gradient(180deg, #EE4837 0%, #F2673D 100%);
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.btnGroup{
|
|
display: flex;
|
|
padding:0 40upx;
|
|
margin-top:60upx;
|
|
.btn{
|
|
flex:1;
|
|
height: 100upx;
|
|
line-height: 100upx;
|
|
text-align: center;
|
|
font-size: 26upx;
|
|
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:20upx;
|
|
}
|
|
.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: 28upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #464646;
|
|
|
|
}
|
|
}
|
|
.action{
|
|
text{
|
|
font-size: 28upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #FE422B;
|
|
|
|
}
|
|
.line{
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
width: 60upx;
|
|
height: 6upx;
|
|
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:114upx;
|
|
height:auto;
|
|
margin-top:200upx;
|
|
}
|
|
text{
|
|
font-size: 28upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #464646;
|
|
margin-top:44upx;
|
|
}
|
|
}
|
|
}
|
|
.introContent{
|
|
background-color: #fff;
|
|
padding:40upx;
|
|
.introTitle{
|
|
font-size: 32upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
margin-bottom: 54upx;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
.introtext{
|
|
font-size: 28upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #727272;
|
|
margin-bottom:34upx;
|
|
}
|
|
.introBtn{
|
|
height: 72upx;
|
|
line-height: 72upx;
|
|
background: #F55349;
|
|
border-radius: 4px 4px 4px 4px;
|
|
opacity: 1;
|
|
text-align: center;
|
|
font-size: 28upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
margin-top:60upx;
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|