FXB/pages/index/invite.vue

<template>
	<view class="container" style="padding-top: 100rpx;">
		<topView :backg="'#1A1A17'"></topView>
		<view class="infoBox">
			<view class="navBack" @click="navTo('/pages/index/index')">
				<u-icon name="arrow-left" size="25" color="#fff" style="position: absolute;left: 0;top: 0;font-weight: bold;"></u-icon>
				<view class="title">我的邀请</view>
			</view>
			<view class="flex numBox">
				<view class="numTpl">
					<view class="name">直推人数</view>
					<view class="num">{{info.count}}</view>
				</view>
				<view class="partition"></view>
				<view class="numTpl">
					<view class="name">团队业绩</view>
					<view class="num">{{userInfo.achievement == null ? '0' : userInfo.achievement}}</view>
				</view>
			</view>
			<view class="listBox" v-if="list.length > 0">
				<view class="listTop flex">
					<view class="tip">链接地址</view>
					<view class="tip">收益</view>
				</view>
				<view class="listTpl flex" v-if="list.length > 0" v-for="item,index in list" :key="index">
					<view class="tpl">
						<view class="addr">{{item.address}}</view>
						<view class="time">{{item.spread_time}}</view>
					</view>
					<!-- <view class="num">231.2361</view> -->
				</view>
			</view>
			<view class="noDate" v-else>暂无数据</view>
		</view>
		<pagination v-if="list.length > 0" :total="page.total" :btnText="true"
		:forceEllipses="true" @change="change"></pagination>
	</view>
</template>
<script>
	import topView from '../components/topView.vue';
	import pagination from '@/components/page-pagination/components/page-pagination/page-pagination.vue';
	import { spreadList } from '@/api/index.js';
	import {mapState,mapActions,mapMutations} from "vuex";
	import{ getTime } from '@/utils/rocessor.js';
	export default {
		components: {
			pagination,
			topView
		},
		data () {
			return {
				list:[],
				info:'',
				page: {
					total: 100,
					pageSize: 8,
					currentPage: 1
				}
			}
		},
		onShow () {
			this.loadData();
		},
		computed: {
			...mapState('user', ['userInfo']),
		},
		methods: {
			loadData () {
				let obj = this;
				spreadList({
					page: obj.page.currentPage,
					limit: obj.page.pageSize,
				}).then(({ data }) => {
					obj.page.total = data.data.count
					obj.info = data.data
					data.data.list.forEach(item => {
						item.spread_time = getTime(item.spread_time)
					})
					obj.list = data.data.list
				});
			},
			change(currentPage,type) {
				this.page.currentPage = currentPage;
				this.loadData()
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100vh;
		.container {
			width: 100%;
			min-height: 100vh;
		}
	}
	.infoBox{
		padding: 0rpx 25rpx;
		color: #fff;
		.numBox{
			background: #1A1A17;
			padding: 35rpx 0rpx;
			.numTpl{
				width: 30%;
				text-align: center;
				.name{
					font-weight: bold;
					font-size: 30rpx;
					color: #FFFFFF;
				}
				.num{
					font-weight: bold;
					font-size: 42rpx;
					color: #7760EE;
					margin-top: 15rpx;
					background: linear-gradient(258deg, #FFF0CF 0%, #CBA16B 30.0048828125%, #FCE9CF 67.67578125%, #C29963 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
			.partition{
				width: 2rpx;
				height: 119rpx;
				background: linear-gradient(0deg, rgba(255,255,255,0), #FFFFFF, rgba(255,255,255,0));
			}
		}
	}
	.listBox{
		margin-top: 25rpx;
		background: #1A1A17;
		padding: 0rpx 25rpx;
		.listTop{
			padding: 25rpx 0rpx;
			border-bottom: 1rpx solid rgba(83, 72, 72, 0.3);
		}
		.listTpl{
			padding: 25rpx 0rpx;
			border-bottom: 1rpx solid rgba(83, 72, 72, 0.3);
			.tpl{
				.addr{
					
				}
				.time{
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					opacity: 0.5;
					padding-top: 15rpx;
				}
			}
			.num{
				font-size: 30rpx;
				color: #7760EE;
				background: linear-gradient(258deg, #FFF0CF 0%, #CBA16B 30.0048828125%, #FCE9CF 67.67578125%, #C29963 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
		.listTpl:last-child{
			border-bottom: none !important;
		}
	}
	.navBack{
		position: relative;
		color: #fff;
		text-align: center;
		margin: 30rpx 0rpx 40rpx 0rpx;
		.title{
			font-weight: bold;
			font-size: 34rpx;
		}
	}
	.noDate{
		text-align: center;
		opacity: 0.3;
		padding-top: 50rpx;
	}
</style>