caimei-applets-caimei/pages/user/member/member-record.vue

<template>
	<view class="container clearfix">
		<view class="cm-member-top">
			<view class="cm-member-head">
				<view class="cm-member-text" v-if="isRequest">
					<view class="cm-member-h1">
						<text v-if="userVip.vipFlag == 1">已开通采美·超级会员</text>
						<text v-if="userVip.vipFlag == -1">采美·超级会员已过期</text>
					</view>
					<view class="cm-member-p">
						<text>有效期至：{{ userVip.endTime }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="cm-member-main">
			<view class="record-list" v-for="(pay, index) in payList" :key="index">
				<view class="record-list-type">
					<view class="list-type-h1">{{ pay.packageId>0 ? '超级会员套餐' : '系统赠送' }}-{{ pay.duration }}个月 </view>
					<view class="list-type-p"> {{ pay.payTime }} </view>
				</view>
				<view class="record-list-text">
					<text v-if="pay.payWay == 4">{{ pay.userBeans }}采美豆</text> 
					<text v-else>￥{{ pay.price | NumFormat }}</text>
				</view>
			</view>
			<!--加载loadding-->
			<tui-loadmore :visible="loadding" :index="3" type="black" />
			<tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText" />
			<!--加载loadding-->
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
	components: {},
	data() {
		return {
			StaticUrl: this.$Static,
			memberType: 0,
			tabCurrent: 0,
			listQuery: {
				userId: 0,
				pageNum: 1,
				pageSize: 10
			},
			userVip: {},
			payList: [],
			payAmount: 4800,
			payBeans: 480000,
			nomoreText: '上拉显示更多',
			hasNextPage: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			isRequest: false
		}
	},
	onLoad() {
		this.initGetStotage()
	},
	filters: {
		MonthFormat(value) {
			switch (value) {
				case 1:
					return '12个月'
					break
				case 2:
					return '3个月'
					break
				case 3:
					return '1个月'
					break
			}
		},
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		}
	},
	computed: {
		
	},
	methods: {
		async initGetStotage() {
			const userInfo = await this.$api.getStorage()
			this.listQuery.userId = userInfo.userId ? userInfo.userId : 0
			this.getUserSuperCenter()
			this.getUserSuperHistory()
		},
		getUserSuperCenter() {
			// 获取会员中心数据
			this.UserService.getUserSuperCenter({ userId: this.listQuery.userId })
				.then(response => {
					let data = response.data
					this.userVip = data.vip
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		getUserSuperHistory() {
			// 获取会员购买记录列表
			this.coupinList = []
			this.listQuery.pageNum = 1
			this.UserService.getUserSuperHistory(this.listQuery)
				.then(response => {
					let data = response.data
					if (data.list && data.list.length > 0) {
						this.showEmpty = false
						this.hasNextPage = data.hasNextPage
						this.payList = data.list
						this.pullFlag = false
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							if (this.coupinList.length < 8) {
								this.pullUpOn = true
							} else {
								this.pullUpOn = false
								this.loadding = false
								this.nomoreText = '已至底部'
							}
						}
					} else {
						this.showEmpty = true
					}
					this.isRequest = true
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		getOnReachBottomData() {
			// 上滑加载分页
			this.listQuery.pageNum += 1
			this.UserService.getUserSuperHistory(this.listQuery)
				.then(response => {
					let data = response.data
					if (data.list && data.list.length > 0) {
						this.hasNextPage = data.hasNextPage
						this.payList = this.payList.concat(data.list)
						this.pullFlag = false // 防上拉暴滑
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.getUserSuperHistory()
			uni.stopPullDownRefresh()
		}, 200)
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.getOnReachBottomData()
		}
	},
	onShow() {
		
	}
}
</script>

<style lang="scss">
.container {
	width: 100%;
	height: auto;
}
.cm-member-top {
	width: 100%;
	height: 242rpx;
	box-sizing: border-box;
	padding: 0 24rpx;
	background: url(https://static.caimei365.com/app/img/icon/icon-member-bg01@2x.png) no-repeat;
	background-size: cover;
	position: relative;
	.cm-member-head {
		width: 702rpx;
		height: 132rpx;
		box-sizing: border-box;
		padding: 30rpx 32rpx 0 109rpx;
		background: url(https://static.caimei365.com/app/img/icon/icon-member-bg02@2x.png) no-repeat;
		background-size: cover;
		position: absolute;
		bottom: 0;
		left: 24rpx;
		border-radius: 16rpx 16rpx 0 0;
		.cm-member-text {
			float: left;
			.cm-member-h1 {
				line-height: 42rpx;
				font-size: $font-size-30;
				color: #55331d;
				text-align: left;
				margin-bottom: 12rpx;
				font-weight: bold;
			}
			.cm-member-p {
				line-height: 30rpx;
				font-size: $font-size-22;
				color: #55331d;
				text-align: left;
			}
		}
	}
}
.cm-member-main {
	width: 100%;
	box-sizing: border-box;
	padding: 40rpx 24rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	.record-list {
		width: 100%;
		height: 135rpx;
		border-bottom: 1px solid #f0f0f0;
		box-sizing: border-box;
		padding: 24rpx 0;
		.record-list-type {
			float: left;
			height: 100%;
			.list-type-h1 {
				line-height: 37rpx;
				font-size: $font-size-26;
				color: #333333;
				text-align: left;
				margin-bottom: 16rpx;
			}
			.list-type-p {
				line-height: 33rpx;
				font-size: $font-size-24;
				color: #999999;
				text-align: left;
			}
		}
		.record-list-text {
			float: right;
			line-height: 86rpx;
			font-size: $font-size-34;
			color: #ff2a2a;
			text-align: right;
		}
	}
}
</style>