shop-uniapp-240426/pages/balance/balance.vue

<template>
	<view class="balance">
		<u-navbar
			:title="$t('page.balance.balance-detail')"
			:safeAreaInsetTop="false"
			placeholder
			@leftClick="leftClick"
			>
				<!-- <view
				slot="right"
				>
					<img src="/static/payOrder/46664.png" alt="" />
				</view> -->
		</u-navbar>
		<view class="price-box">
			<view class="img">
				<img src="/static/balance/1.png" alt="" />
			</view>
			<view class="price">
				<text class="text">{{ balance.money || 0 }}</text>
			</view>
		</view>
		<view class="line">
			<u-cell class="ceil"
			:title="$t('page.balance.wallet-recharge')"
			@click="toRecharge"
			isLink>
				<img style="width: 25px;" 
				src="/static/usercenter/purse 1024@3x.png" alt="" 
				slot="icon"/>
			</u-cell>
			<u-cell class="ceil"
			@click="toBankCardWithdrawal"
			:title="$t('page.balance.bank-card-withdrawal')"
			isLink>
				<img style="width: 25px;" src="/static/usercenter/card@3x.png" alt="" slot="icon"/>
			</u-cell>
		</view>
		<view class="line balance-info">
			<u-list
			@scrolltolower="scrolltolower"
			>
				<view class="title">
					{{ $t('page.balance.transaction-record') }}
				</view>
				<u-list-item
				v-for="(item, index) in list"
				:key="index"
				>
					<view class="item">
						<view class="left">
							<view class="info">
								<view class="">
									<!-- {{item.type == 0 ? $t('page.balance.top-up') : $t('page.balance.withdraw')}} -->
									{{ type[item.type].info }}
								</view>
								<!-- <u-tag 
								v-if="type[item.type].tag"
								:text="$t(item.status == 0 ? 'page.balance.completed' : 'page.balance.under-review')"
								size="mini"
								style="margin-left: 10px;"
								:type="item.status == 0 ? 'success' : 'warning'"></u-tag> -->
							</view>
							<view class="bank" v-if="item.bank">
								{{ $t('page.bankCart.title') }} ：{{ item.bank.no }}
							</view>
							<!-- <view class="date">
								{{ item.createTime }}
								
							</view> -->
						</view>
						<view class="right" :style="{color : type[item.type].color}">
							{{ type[item.type].no }}{{ item.money }}
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	import UniDateformat from '@/uni_modules/uni-dateformat/components/uni-dateformat/date-format.js'
	export default {
		components : {
			UniDateformat
		},
		data() {
			return {
				balance : {},
				list : [],
				type : [//0充值1提现2购买3回购
					{
						no : '+',
						color : '#5EA649',
						info : this.$t('page.balance.top-up'),
						tag : true
					},
					{
						no : '-',
						color : '#E45338',
						info : this.$t('page.balance.withdraw'),
						tag : true
					},
					{
						no : '-',
						color : '#E45338',
						info : this.$t('page.cart.buy')
					},
					{
						no : '+',
						color : '#5EA649',
						info : this.$t('page.repurchase.repurchase'),
						tag : true
					},
				]
			};
		},
		onShow() {
			this.getData()
			this.getInfo()
		},
		methods : {
			getInfo(){
				this.request('getInfo')
				.then(res => {
					if(res.code == 200){
						this.balance = res.result
						localStorage.setItem('uid', res.result.id)
						localStorage.setItem('money', res.result.money  || 0)
						localStorage.setItem('account', res.result.account)
					}
				})
			},
			getData(){
				this.request('waterList', {}, {
					"pageSize":999,
					"currentPage": 0
				}).then(res => {
					if(res.code == 200){
						this.list = res.result.records
					}
				})
			},
			leftClick(){
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			scrolltolower(){
				console.log('到底了');
			},
			toRecharge(){
				uni.navigateTo({
					url : '/pages/user/walletRecharge/walletRecharge'
				})
			},
			toBankCardWithdrawal(){
				uni.navigateTo({
					url : '/pages/user/bankCardWithdrawal/bankCardWithdrawal'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.balance{
	.price-box{
		background-color: #E45338;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30px 20px;
		.price{
			color: #fff;
			margin-top: 20px;
			.text{
				font-size: 50rpx;
			}
		}
	}
	.line{
		background-color: #fff;
		.ceil{
			margin: 10px 0;
		}
	}
	.balance-info{
		padding: 10px;
		.title{
			border-left: 3px solid #E3392F;
			margin: 10px;
			padding: 0 5px;
			display: flex;
			align-items: center;
			color: #E3392F;
			font-size: 28rpx;
			margin-bottom: 10px;
		}
		.item{
			display: flex;
			border-top: 1px solid #00000033;
			margin: 10px 0;
			padding-top: 10px;
			.left{
				color: #666;
				flex: 4;
				.info{
					font-size: 28rpx;
					display: flex;
				}
				.bank{
					font-size: 13px;
					margin-top: 5px;
				}
				.date{
					color: #777;
					font-size: 25rpx;
					margin-top: 10px;
				}
			}
			.right{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
			}
		}
	}
}
</style>