H5-ThreeDoorder/pages/pages-recharge/diamondSubgiftList/index.vue

<template>
	<view class="diamondSubgiftList_content">
		<u-tabs :list="tabs" @click="click" :lineColor='lineColor' :activeStyle="activeStyle"
			:inactiveStyle="inactiveStyle"></u-tabs>
		<mescroll-uni @init="mescrollInit" @up="upCallback"   @down="downFu">
			<view class="subgift_list_total" v-show="list.length">
				<view v-for="(item,index) in list" :key="index" class="subgift_list_item">
					<view><text>转赠时间：</text><text>{{item.c_time}}</text></view>
					<view><text>转赠钻石数量：</text><text>{{item.num}}个</text></view>
					<view><text>{{item.type==2?"接收人":"转赠人"}}邀请码：</text><text>{{item.invite_code}}</text></view>
					<view><text>钻石到账时间：</text><text>{{item.get_time}}</text></view>
					<view><text>钻石状态：</text><text
							:class="[item.type==2?'isEffective':'isloseEfficacy']">{{ item.type==2?'转出':"转入" }}</text></view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		fenCardShareList,
	} from "@/request/recharge/index.js";
	import {
		union
	} from "lodash";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				type: 0,
				tabs: [{
						name: '全部',
						key: 0
					},
					{
						name: '转入',
						key: 1
					},
					{
						name: '转出',
						key: 2
					},

				],
				lineColor: '#FF7700',
				activeStyle: {
					color: '#FF7700',
					fontSize: ' 28Rpx',
					fontfamily: 'PingFangSC-Semibold, PingFang SC',
					fontWeight: 600,
					color: '#FF7700',
				},
				inactiveStyle: {
					color: '#999999',
					fontSize: ' 28Rpx',
					fontfamily: 'PingFangSC-Semibold, PingFang SC',
					fontWeight: 400,
				},
				down:{
					isLock:true
				}
			}
		},
		methods: {
			upCallback(mescroll) {
				this.getShareList(mescroll)
			},
			//获取列表
			getShareList(mescroll) {
				const params = {
					limit: mescroll.size,
					page: mescroll.num,
					type: this.type
				}
				fenCardShareList({
					...params
				}).then((res) => {
					if (res) {
						const {
							code,
							data
						} = res
						if (code == 200) {

							const curPageData = data?.data || [] // 当前页数据
							if (mescroll.num == 1) this.list = [];
							this.list = this.list.concat(curPageData); //追加新数据
							mescroll.endSuccess(curPageData.length);
						}
					}
				}).catch((error) => {
					mescroll.endErr(); //
				})
			},

			click(e) {
				this.type = e.key
				this.list = [];
				this.mescroll.resetUpScroll()
			},
			downFu(){
				this.mescroll.resetUpScroll()
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f5f5f5;
	}

	.diamondSubgiftList_content {
		/deep/.u-tabs__wrapper__nav {
			padding: 8rpx;
			// height: 2rpx;
			border-bottom: 2rpx solid #EDEDED;
		}

		/deep/ .u-tabs__wrapper__nav__line {
			bottom: 0px
		}

		/deep/ .mescroll-uni {
			margin-top: 140rpx;
		}

		.subgift_list_total {
			margin-left: 24rpx;
			margin-right: 24rpx;

			.subgift_list_item {
				border-radius: 20rpx;
				background: #fff;
				margin-bottom: 24rpx;
				padding: 24rpx;

				view {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					font-family: SourceHanSansCN-Bold, SourceHanSansCN;
					color: #333333;
					line-height: 26px;
				}

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;

				}

				text:nth-child(1) {
					font-weight: 400;
					color: #999999;
				}

				text:nth-child(2) {
					font-weight: 600;

				}

				.isloseEfficacy {

					color: #39C969;
				}

				.isEffective {
					color: #E22929;
				}

				.subgift_user {
					display: flex;

					view:nth-child(1) {
						margin-right: 40rpx;
					}
				}
			}
		}
	}
</style>