yanzong_qianduan/pages/news1/wallet.vue

<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>{{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="/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(/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>