question_uniapp/pages/promotion/index.vue

<template>
	<view class="minebg">
		<uni-nav-bar title="" backgroundColor="rgba(0, 0, 0, 1);" :shadow="false" :border="false" :fixed="true" height="50rpx"></uni-nav-bar>
		<view class="v2">
			<view style="width: 160rpx; float: left;" @click="onTokenJump('/pages/mine/info')">
				<image style="width: 140rpx; height: 140rpx" :src="url" fit="cover"></image>
			</view>
			<view class="login" @click="onPageJump('/pages/mine/login')" v-if="!islogin">
				{{$t('mine.text1')}}
			</view>
			<view class="login1" v-else>
				<view style="float: left;"><span @click="onTokenJump('/pages/mine/info')" class="s">{{user.username}}</span></view>
				<button @click="onTokenJump('/pages/promotion/invite')" v-if="user.role_id > 1"
						style="background-color: #1677FF; color: #fff; font-size: 30rpx; height: 70rpx; line-height: 70rpx; 
						width: 200rpx; float: right; margin-top: 20rpx;">
					<uni-icons size="20" type="gift" style="color: #fff;"></uni-icons>{{$t('promotion.text1')}}</button>
				<span style="font-size: 28rpx; font-weight: 400; float: left;">ID：{{user.id}}</span>
				<image class="i" src="/static/images/copy.png" @click="copy(user.id)" mode="cover"></image>
			</view>
			<view style="clear: both;"></view>
		</view>
		<view class="v3">
			<view style="padding: 0rpx 20rpx;">
				<view style="font-size: 32rpx; font-weight: 600; color: #3d3d3d;">{{$t('promotion.text2')}}</view>
				<view style="font-weight: 500; padding: 20rpx 0rpx; font-size: 14px; color: #999; margin-top: 20rpx; text-align: center; background-color: #F8F8F8;">
					<view class="cell_list" style="background-color: #F8F8F8; padding: 10rpx 30rpx;">
						<view class="cell_left txt">{{$t('promotion.text3')}}</view>
						<view class="cell_right" style="font-size: 36rpx; font-weight: 500;">{{team.total_count}}</view>
					</view>
					<view class="cell_list" style="background-color: #F8F8F8; padding: 10rpx 30rpx;">
						<view class="cell_left txt">{{$t('promotion.text4')}}</view>
						<view class="cell_right" style="font-size: 36rpx; font-weight: 500;">{{team.direct_total}}</view>
					</view>
					<view class="cell_list" style="background-color: #F8F8F8; padding: 10rpx 30rpx;">
						<view class="cell_left txt">{{$t('promotion.text5')}}</view>
						<view class="cell_right" style="font-size: 36rpx; font-weight: 500;">{{parseFloat(team.resultsRegion).toFixed(4)}}</view>
					</view>
					<view class="cell_list" style="background-color: #F8F8F8; padding: 10rpx 30rpx;">
						<view class="cell_left txt">{{$t('promotion.text6')}}</view>
						<view class="cell_right" style="font-size: 36rpx; font-weight: 500;">{{parseFloat(team.resultsCell).toFixed(4)}}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 94%; margin: 0rpx auto;">
			<view class="cell_list" style="padding: 30rpx 20rpx;">
				<view style="color: #3d3d3d; font-size: 32rpx; font-weight: 600;">{{$t('promotion.text7')}}</view>
				<view class="cell_right arrow" style="color: #999;" @click="onPageJump('/pages/promotion/list')">{{$t('promotion.text8')}}</view>
			</view>
			<uni-row :gutter="10" v-for="(item, index) in list" :key="index" :style="index==0 ? '' : 'margin-top: 60rpx;'">
			  <uni-col :span="6" style="text-align: center;">
				  <image style="width: 120rpx; height: 120rpx; margin: auto;" :src="url" fit="cover"></image>
			  </uni-col>
			  <uni-col :span="18">
				  <view style="font-weight: 600; font-size: 32rpx; color: #3d3d3d;">{{item.username}}</view>
				  <view style="font-size: 24rpx; font-weight: 400; color: #999; line-height: 40rpx;">
					  ID：{{item.id}}<br>
					  {{$t('promotion.text9')}}: {{item.created_at}}<br>
					  {{$t('promotion.text10')}}: <span style="color: #333; font-weight: 500; margin-left: 6rpx;"> {{parseFloat(item.performance_large).toFixed(4)}}</span><br>
					  {{$t('promotion.text11')}}: <span style="color: #333; font-weight: 500; margin-left: 6rpx;"> {{item.total_count}}</span>
					</view>
			  </uni-col>
			</uni-row>
			
			<view style="text-align: center; padding-bottom: 160rpx;" v-if="list.length <= 0">
				<image style="width: 360rpx; height: 360rpx; margin: 50rpx auto 0rpx auto;" src="/static/images/w5.png" fit="cover"></image>
				<view style="color: #999; font-size: 28rpx; font-weight: 400;">{{$t('nodata')}}</view>
			</view>
		</view>
		<zNavigation></zNavigation>
	</view>
</template>

<script>
	import zNavigation from '@/components/module/navigation.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			zNavigation
		},
		data() {
			return {
				url:"/static/images/tx.png",
				islogin: false,
				user:{
					avatar: '/static/images/tx.png',
					username: '',
					id: '',
					role_id: 1,
				},
				team:{
					total_count: 0,
					direct_total: 0,
					resultsRegion: 0.00,
					resultsCell: 0.00
				},
				par:{
					page: 1,
					limit: 10
				},
				list: []
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		created() {
			uni.hideTabBar()
		},
		//第一次加载
		onShow(e) {
			uni.showLoading({
				title:this.$t('loading')
			})
			if(this.userInfo.token === typeof(undefined) || this.userInfo.token === undefined){
				this.islogin = false;
				uni.hideLoading();
			}else{
				this.islogin = true;
				this.user.money = parseFloat(this.userInfo.money);
				this.user.score = parseFloat(this.userInfo.score);
				this.user.username = this.userInfo.username;
				this.user.id = this.userInfo.id;
				if(this.userInfo.avatar !== '' && this.userInfo.avatar != null){
					this.user.avatar = this.userInfo.avatar;
				}
				this.$http.get('/api/role/detail?lang='+this.$i18n.locale).then(res => {
					if(res.code == 0){
						this.user.role_id =  res.data.id;
					}
				});
				this.$http.get('/api/team/index?lang='+this.$i18n.locale).then(res => {
					if(res.code == 0){
						this.team.total_count = res.data.total_count;
						this.team.direct_total = res.data.direct_total;
						this.team.resultsRegion = res.data.performance_large;
						this.team.resultsCell = res.data.performance_small;
					}
				});
				let data = {
					page: this.par.page,
					limit: this.par.limit,
					lang: this.$i18n.locale
				};
				this.$http.post('/api/team/list', data).then(res => {
					if(res.code == 0){
						this.list = res.data.data;
						uni.hideLoading();
					}
				}).catch(err => {
					uni.hideLoading();
				});
			}
			
		},
		methods: {
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
			getTeamList(){
				this.$http.get('/api/team/list?lang='+this.$i18n.locale).then(res => {
					if(res.code == 0){
						console.log(res.data);
					}
				});
			},
			copy(val = ''){
				const textArea = document.createElement('textarea');
				textArea.value = val;
				document.body.appendChild(textArea);
				textArea.select();
				try {
					document.execCommand('copy');
					uni.showToast({
						title: this.$t('copySuccess')
					});
				} catch (err) {
					console.error('Could not copy text: ', err);
				}
				document.body.removeChild(textArea);
			},
		}
	}
</script>

<style scoped>
	.page{min-height: 100vh;position: relative; background-color: #fff;}
	.minebg{
		width: 100vw;
		min-height: 100vh;
		background: url('/static/images/minebg.png') #fff;;
		background-size: 100%;
		background-repeat: repeat-x;
		font-family: Poppins, Poppins;
	}
	.cell_list .cell_right.arrow::after{
			height: 16rpx !important;
		}
	.minebg .v2 .login1{
		width: 75%; float: left; font-size: 16pt; font-weight: 700; height:160rpx; line-height: 60upx; padding-top: 20rpx;
	}
	.minebg .v2 .login1 .s{
		white-space: nowrap;      /* 禁止换行 */
		overflow: hidden;         /* 隐藏溢出内容 */
		text-overflow: ellipsis;  /* 显示省略号 */
		width: 240rpx;            /* 需设置固定宽度 */
		display: block;
	}
	.minebg .v2 .login1 .i{
		width: 24rpx; height: 24rpx; float:left; margin-top: 16rpx; margin-left: 10rpx;
	}
	.minebg .v1{
		float: right; margin-top: 10upx; padding-right: 20upx;
	}
	.minebg .v2{
		clear: both; width: 90vw; margin: auto; padding-top: 20rpx;
	}
	.minebg .v2 .login{
		float: left; font-size: 16pt; font-weight: 700; height:160rpx; line-height: 160rpx;
		white-space: nowrap; text-overflow: ellipsis; width: 75%;
	}
	.minebg .v3{
		width: 94vw;  margin: auto; border-radius: 30upx;
	}
	.item{
		margin: 30upx 20upx;
	}
</style>