lh-mobile/pages/wallet/wallet.vue

<template>
	<view>
		<cu-custom bgColor="bg-luohu" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的钱包</block>
		</cu-custom>
		<view>
			<view class="card-wrap">
				<view class="card">
					<view class="card-title">
						<view class="left">我的余额</view>
						<view class="right">
							<u-icon name="/static/icon/qrcode.png" size="40"></u-icon>
						</view>
					</view>
					<view class="amount-wrap">
						<view class="amount">
							<u-count-to :start-val="0" :end-val="monkey" :decimals="2" color="#FFFFFF"></u-count-to>
							<!-- {{monkey}} -->
							<text class="unit">元</text>
						</view>
						<!-- <view class="fewAmount">=￥34,087.8452</view> -->
					</view>
					<view class="buttom">最近刷新时间：{{time}}</view>
				</view>
			</view>
		</view>
		<view>
			<view class="list-wrap">
				<view class="list-top">
					<view class="topBox1" :class="showIndex == 0 ? 'show' : ''" @click="showClick(0)">充值</view>
					<view class="topBox2" :class="showIndex == 1 ? 'show' : ''" @click="showClick(1)">扣除</view>
				</view>
				<scroll-view :scroll-y="true" class="scroll">
					<view class="csrBox" v-for="(item,index) in monkeyList" :key="index">
						<view class="img">
							<image src="../../static/chong.png" v-if="showIndex == 0"></image>
							<image src="../../static/kou.png" v-if="showIndex == 1"></image>
						</view>
						<view class="content">
							<view class="left">
								<view v-if="showIndex == 0">
									<view>支付方式：{{item.chong_zhi_fang_sh || '其他'}}</view>
									<view class="time">充值时间：{{setTime(item.create_time_)}}</view>
								</view>
								<view v-if="showIndex == 1">
									<view>委托单：{{item.wei_tuo_dan_hao_}}</view>
									<view class="time">扣除时间：{{setTime(item.create_time_)}}</view>
								</view>
							</view>
							<view class="right">
								<view v-if="showIndex == 0">+{{item.chong_zhi_jin_e_}}</view>
								<view v-if="showIndex == 1">-{{item.kou_fei_jin_e_}}</view>
							</view>
						</view>
					</view>

				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO
	} from "@/common/util/constants" // 拉取登录token,userName,userInfo
	import http from '@/common/service/http.js'
	import md5 from "@/common/util/md5.js"
	export default {
		data() {
			return {
				showIndex: 0,
				time: '',
				monkey: '0.00',
				monkeyList: []
			}
		},
		filters: {

		},
		created() {
			this.getInit()
			this.getYuE()
			this.getChong()
		},
		methods: {
			getInit() {
				var nowDate = new Date((new Date).getTime() + 8 * 60 * 60 * 1000)
				var time = nowDate.toJSON().split('T').join(' ').substr(0, 16);
				this.time = time
			},
			setTime(value) {
				let time = this.$dayjs(value).format('YYYY-MM-DD HH:mm:ss')
				return time
			},
			//充值和扣除切换
			showClick(index) {
				this.showIndex = index
				this.monkeyList = []
				if (index == 0) {
					this.getChong()
				} else {
					this.getKou()
				}
			},
			getYuE() {
				let info = uni.getStorageSync(USER_INFO);
				let useId = info.user.id

				let sql =
					`select * from t_khqb where xuan_ze_ke_hu_ = '${useId}' order by create_time_ desc limit 1`
				let requestData = this.$sig(sql)
				this.$http.post("/ibps/business/v3/sys/universal/inputSqlSelectData", requestData).then(res => {
					if (res.data.state == 200) {
						const datas = res.data.variables.data
						if (datas.length > 0) {
							this.monkey = (parseFloat(datas[0].zhang_hu_yu_e_ || 0)).toFixed(2) || '0.00'
						} else {
							this.monkey = '0.00'
						}
					}
				})
			},
			getChong() {
				let info = uni.getStorageSync(USER_INFO);
				let useId = info.user.id

				let sql =
					`select tc.* from t_czjl tc left join  t_khqb tk on tc.parent_id_ = tk.id_ where tk.xuan_ze_ke_hu_ = '${useId}' order by tc.create_time_ desc`
				let requestData = this.$sig(sql)
				this.$http.post("/ibps/business/v3/sys/universal/inputSqlSelectData", requestData).then(res => {
					if (res.data.state == 200) {
						const datas = res.data.variables.data
						if (datas.length > 0) {
							this.monkeyList = datas
						}
					}
				})
			},
			getKou() {
				let info = uni.getStorageSync(USER_INFO);
				let useId = info.user.id

				let sql =
					`select tc.* from t_kfjl tc left join  t_khqb tk on tc.parent_id_ = tk.id_ where tk.xuan_ze_ke_hu_ = '${useId}' order by tc.create_time_ desc`
				let requestData = this.$sig(sql)
				this.$http.post("/ibps/business/v3/sys/universal/inputSqlSelectData", requestData).then(res => {
					if (res.data.state == 200) {
						const datas = res.data.variables.data
						if (datas.length > 0) {
							this.monkeyList = datas
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-wrap {
		display: flex;
		justify-content: center;

		.card {
			// width: 650rpx;
			width: 100%;
			height: 350rpx;
			margin: 20rpx;
			background: linear-gradient(to right, #4c9fff, #2f72ff);
			// background-color: $uni-bg-assist;
			border-radius: 18rpx;
			// box-shadow: 0 2px 12px 0 rgba(56, 130, 255, 0.6);
			color: #ffffff;
			padding: 40rpx;

			.card-title {
				display: flex;
				justify-content: space-between;
			}

			.amount-wrap {
				margin-top: 20rpx;

				.amount {
					font-size: 52rpx;
					display: flex;

					.unit {
						font-size: 28rpx;
						margin-top: 10rpx;
						margin-left: 20rpx;
					}
				}

				.fewAmount {
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}

			.buttom {
				margin-top: 100rpx;
				font-size: 28rpx;
				color: #ffffff;
			}
		}
	}

	.list-wrap {
		width: calc(100% - 40rpx);
		background: #ffffff;
		border-radius: 18rpx 18rpx 0 0;
		position: fixed;
		bottom: 0rpx;
		top: 480rpx;
		left: 20rpx;
		right: 20rpx;

		.list-top {
			border-radius: 18rpx 18rpx 0 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.topBox1 {
				text-align: center;
				width: 100%;
				background-color: #4c9fff;
				border-radius: 18rpx 0 0 0;
				padding: 20rpx 0;
				color: #ffffff;
			}

			.topBox2 {
				text-align: center;
				width: 100%;
				background-color: #4c9fff;
				border-radius: 0 18rpx 0 0;
				padding: 20rpx 0;
				color: #ffffff;
			}
		}

		.scroll {
			height: calc(100% - 80rpx);

			.csrBox {
				display: flex;
				align-items: center;
				padding: 15rpx 0 15rpx 15rpx;

				.img {
					margin-right: 15rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.content {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx #F5F5F5 solid;

					.left {
						font-weight: 500;
						font-size: 28rpx;
						line-height: 40rpx;

						.time {
							line-height: 45rpx;
							font-size: 24rpx;
							color: #C0C0C0;
						}
					}

					.right {
						font-weight: 500;
						margin-right: 15rpx;
					}
				}
			}
		}
	}

	.show {
		background-color: #ffffff !important;
		color: #2f72ff !important;
	}
</style>