xxdj1/user/pages/stored/list.vue

<template>
	<view class="master-income-record">
		<view class="mine-menu-list c-base" :style="{background:primaryColor}">
			<!-- <view class="space-lg"></view>
			<view class="space-lg"></view> -->
			<view class="flex-center" style="font-size: 36rpx;padding-top:113rpx;color:#ffffff">充值</view>
			<view class="money-info">
				<view class="money">{{balance}}</view>
				<view class="yuan">
					当前余额（元）
				</view>
			</view>
			<view class="space-md"></view>
			<view class="space-lg"></view>
		</view>
		<view class="fill-base item">
			<view @tap.stop="$util.goUrl({url:`/user/pages/stored/record`})"
				class="item-record-btn"
			>
				<image src="../../../static/m1.png" mode=""></image>
				<view class="text">充值记录</view>
			</view>
			<view @tap.stop="$util.goUrl({url:`/user/pages/stored/consume`})"
				class="item-record-btn"
			>
				<image src="../../../static/m2.png" mode=""></image>
				<view class="text">消费明细</view>
			</view>
			<view @tap.stop="$util.goUrl({url:`/user/pages/stored/commission`})"
				class="item-record-btn"
			>
				<image src="../../../static/m3.png" mode=""></image>
				<view class="text">返佣记录</view>
			</view>
			
			<!-- :style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}" -->
			
		</view>
		<view class="jineContent">
			<view class="titleText">
				充值金额
			</view>
			<view class="moneyContent">
				<view @tap="chongzhiHandle(index)" :class="index==activeIndex?'list-item activeStyle fill-base  mt-md pd-lg radius-16':'list-item fill-base  mt-md  pd-lg radius-16'"
					v-for="(item,index) in  list.data" :key="index">
					<view class="priceNum">¥{{item.price}}</view>
					<view class="name">{{item.title}}</view>
				
				</view>
			</view>
			<view @click="toPay" class="item-btn flex-center f-caption c-base radius-5" :style="{background:primaryColor}">立即充值
			</view>
		</view>
		
		

		<view class="list-item fill-base mt-md ml-lg mr-lg radius-16">
			<view class="pd-lg b-1px-b">
				<view class="pl-md f-paragraph" :style="{lineHeight: 1.1,borderLeft: `5rpx solid ${primaryColor}`}">充值说明
				</view>
			</view>
			<view class="pd-lg f-caption c-caption">
				<view>1、本金和赠送金额均不可提现、转移、转赠、退款。</view>
				<view>2、充值套餐赠送金额部分不可进行退款。</view>
				<view>3、使用范围：本平台所以项目购买，以及交通费用支付。</view>
				<view>4、套餐充值绑定理疗师有效期为6小时，过期将不可绑定。</view>
			</view>
		</view>
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				color: '#ffffff',
				balance: 0,
				param: {
					page: 1,
					limit: 10
				},
				list: {
					data: []
				},
				loading: true,
				lockTap: false,
				activeIndex:0
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
			mineInfo: state => state.user.mineInfo,
		}),
		async onLoad() {
			this.$util.showLoading()
			let {
				balance = 0
			} = this.mineInfo
			this.balance = balance
			await this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			...mapActions(['getMineInfo']),
			...mapMutations([]),
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				await this.getList()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex(true)
			},
			async getList() {
				let {
					list: oldList,
					param,
				} = this
				let newList = await this.$api.mine.cardList(param);

				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			chongzhiHandle(index){
				this.activeIndex = index
			},
			// 去支付
			async toPay() {
				let index = this.activeIndex
				let {
					id: card_id,
					true_price
				} = this.list.data[index]
				if (this.lockTap) return;
				this.lockTap = true;
				this.$util.showLoading()
				try {
					let {
						pay_list
					} = await this.$api.mine.payBalanceOrder({
						card_id
					})
					console.log(pay_list,"jjjj")
					
					this.$util.hideAll()
					if (pay_list) {
						try {
							await this.$util.pay(pay_list)
							this.lockTap = false;
							await this.getMineInfo()
							this.$util.back()
						} catch (e) {
							console.log(e,"===")
							this.lockTap = false;
							return;
						}
					}
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
		}
	}
</script>


<style lang="scss">
	.master-income-record {

		.mine-menu-list {
			height:530rpx;
			.money-info {
				font-size: 70rpx;
				text-align: center;
				margin-top:65rpx;
				.money {
					font-size: 70rpx;
				}
				.yuan{
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

		}

		.jineContent{
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(16,132,86,0.06);
			border-radius: 20rpx;
			margin:20rpx 30rpx;
			padding:30rpx;
			.titleText{
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #09090B;
			}
			.item-btn {
				height: 100rpx;
				line-height: 100rpx;
				background: #08BF77;
				border-radius: 50px;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-top:50rpx;
			}
			
		}
		.moneyContent{
			display:flex;
			justify-content: space-between;
			.list-item {
				border: 1px solid #08BF77;
				// flex:1;
				width:48%;
				text-align: center;
				
				.priceNum{
					font-size: 50rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #08BF77;
				}
				.name{
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #08BF77;
				}
			}
		}
		.activeStyle{
			background-color: #08BF77 !important;
			.priceNum{
				color: #fff !important;
			}
			.name{
				color: #fff !important;
			}
		}
	
		.item{
			
			display:flex;
			align-items: center;
			justify-content: space-around;
			padding:35rpx 0;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(16,132,86,0.06);
			border-radius: 30rpx;
			margin:-60rpx 24rpx 0 24rpx;
			.item-record-btn {
				// text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width:43rpx;
					height:42rpx;
				}
				.text{
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #333333;
					margin-top:21rpx;
				}
			}
		}



		.stored-item {
			.item-input {
				height: 90rpx;
				border-radius: 15rpx 0 0 15rpx;
			}

			.item-btn {
				width: 130rpx;
				height: 90rpx;
				border-radius: 0 15rpx 15rpx 0;
			}
		}

	}
</style>