weapp-v2/pages/self/self.vue

<template>
	<view class="self">
		<custom-nav :title="pageTitle"></custom-nav>
		<view class="content">
			<view class="showInfo" v-if="userServerInfo.status === 2 || userServerInfo.status === 3 || userServerInfo.status === 5 && (innerType === 2 || userServerInfo.signuped)">
				<view class="content">
					<view class="top">
						<!-- <open-data class="user-pic" type="userAvatarUrl"></open-data> -->
						<image :src="soldInfo.avatar" class="user-pic">
						<image v-if="soldInfo.score >= 300" class="hat" src="../../static/icon/hat.png" mode="scaleToFill"></image>
						<view class="user-info">
							<view class="name-grade-level">
								<!-- <open-data type="userNickName" class="name"></open-data> -->
								<view class="name">{{ soldInfo.name }}</view>
								<view class="grade">{{ soldInfo.grade || '' }}</view>
								<view class="level">
									<image src="../../static/icon/level.png" mode="scaleToFill"></image>
									<text>{{ soldInfo.level_name || '' }}</text>
								</view>
							</view>
							<view class="progress">
								距离 {{ soldInfo.score | willDeg(userServerInfo.max_score) }} 还差 {{ soldInfo.score | lessScore(userServerInfo.max_score) }} 学分
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="chart">
						<ucharts-line v-if="soldInfo.sold_data" :chartData="soldInfo.sold_data"></ucharts-line>
					</view>
					<view class="sold-info" style="text-align: center;">
						总学分: <text style="color: #FA6342;">&nbsp;{{ soldInfo.score || 0 }}分</text>
					</view>
					<view class="sold-info">
						<view class="sold-info-left">今日学分：<text>{{ soldInfo.score_today || 0 }}分</text></view>
						<view class="sold-info-right">昨日学分：<text>{{ soldInfo.score_yes || 0 }}分</text></view>
					</view>
					<view class="sold-info">
						<view class="sold-info-left">昨日奖励学分：<text>{{ soldInfo.score_send_yes || 0 }}分</text></view>
						<view class="sold-info-right">总奖励学分：<text>{{ soldInfo.score_send || 0 }}分</text></view>
					</view>
					<view class="sold-info">
						<view class="sold-info-left">销售产品总量：<text>{{ soldInfo.sold_total || 0 }}套</text></view>
						<view class="sold-info-right">销售产品总额：<text>{{ soldInfo.sales || 0 }}元</text></view>
					</view>
					<button open-type="share" v-if="innerType === 1" class="share">
						<text class="cuIcon-forwardfill"></text>
					</button>
					<view class="tohistory" @tap="tohisrace" v-if="innerType !== 3">
						历史赛季 <text class="cuIcon-right"></text>
					</view>
				</view>
			</view>
			<image v-else class="nosignup" src="../../static/icon/nosignup.png" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	import { api_getPersonalSoldInfo } from '../../api.js'
	import uchartsLine from '../../components/ucharts-line.vue'
	export default {
		onShareAppMessage: function (res) {
			uni.showLoading({ title: '加载中', mask: true })  //显示loading
			console.log(JSON.stringify(this.soldInfo))
			if (res.from === 'button') {
				return {
					title: '我的卖货数据',
					path: `/pages/self/self?from=share&data=${JSON.stringify(this.soldInfo)}`
				}
			}
			return {
				title: '大卫博士商学院卖货争霸',
				path: '/pages/index/index'
			}
		},
		components: {
			uchartsLine
		},
		data() {
			return {
				pageTitle: '个人数据',
				soldInfo: {},  //当前页面数据
				innerType: 1,  //判断用户是从哪个页面进入的 1 表示自己从首页或数据统计进入的 2 批发商或者客服从排行榜进入的 3 表示用户是从分享的页面进入的
				userId: ''
			};
		},
		computed: {
			userServerInfo () {  //用户服务器信息
				return this.$store.state.userServerInfo
			}
		},
		methods: {
			tohisrace () {  //去历史赛季页面 带着 innerType 属性是为了区分进入历史赛季页面的用户类型
				uni.navigateTo({
					url: `../hisrace/hisrace?from=self&innerType=${this.innerType}&id=${this.userId}`
				})
			},
			getUserinfo (opt) {  //发送请求获取用户卖货数据
			// console.log(222)
			// 	let n = Date.now()
			// 	console.log(n)
			// 	let { start_time, end_time } = this.userServerInfo
			// 	if(n > start_time && n < end_time) {
			// 		console.log(333)
					uni.showLoading({ title: '加载中', mask: true })  //显示loading
					this.userId = opt.id
					this.$ajax.get(`${api_getPersonalSoldInfo}?id=${opt.id}&season=${this.userServerInfo.season}`).then(([ , { data: res }]) => {
						this.$hideLoading()  //异步操作结束，停止 loading
						res.data.sold_data.categories.push('')  //对折线图数据进行一些处理
						res.data.sold_data.categories.unshift('')  //对折线图数据进行一些处理
						res.data.sold_data.series[0].data.push(null)  //对折线图数据进行一些处理
						res.data.sold_data.series[0].data.unshift(null)  //对折线图数据进行一些处理
						this.soldInfo = res.data
					}).catch(e => {
						uni.showModal({
							content: "获取个人数据失败",
							showCancel: false
						})
					})
				// }
			}
		},
		onLoad(opt) {  //根据路由传过来的参数展示不同的内容
			if (opt.from === 'index') {  //表示自己从首页或数据统计进入的
				if (this.userServerInfo.signuped) {  //只有报名的用户才展示数据
					this.getUserinfo(opt)  //发送请求获取用户卖货数据
				}
			} else if (opt.from === 'ranking') {  //表示批发商或者客服从排行榜进入的
				this.innerType = 2
				if (opt.id) {
					this.getUserinfo(opt)  //发送请求获取用户卖货数据
					console.log(this.innerType)
				}
			} else if (opt.from === 'share') {  //表示用户是从分享的页面进入的
				this.innerType = 3
				uni.hideLoading()  //停止 loading
				this.soldInfo = JSON.parse(opt.data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.self {
		@include page();
		.content {
			.showInfo {
				height: 100%;
				background: #FE531B;
				position: relative;
				.content {
					position: absolute;
					width: 656rpx;
					height: auto;
					top: 31rpx;
					left: 47rpx;
					bottom: 67rpx;
					border-radius: 8rpx;
					background: #FFFFFF;
					box-sizing: border-box;
					padding: 42rpx 44rpx 0;
					.top {
						height: 80rpx;
						display: flex;
						align-items: center;
						position: relative;
						.user-pic {
							height: 100%;
							width: 80rpx;
							border-radius: 50%;
							overflow: hidden;
						}
						.hat {
							position: absolute;
							top: -40rpx;
							left: 0px;
							width: 80rpx;
							height: 69.873rpx;
						}
						.user-info {
							flex: 1;
							display: flex;
							flex-direction: column;
							height: 100%;
							margin-left: 16rpx;
							.progress {
								color: #FA6342;
								font-size: 26rpx;
							}
							.name-grade-level {
								height: 50%;
								width: 100%;
								display: flex;
								align-items: flex-end;
								vertical-align: bottom;
								.name {
									font-size: 30rpx;
									color: #FA6342;
									max-width: 38%;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
								.grade {
									font-size: 24rpx;
									color: #FA6342;
									margin-left: 16rpx;
									vertical-align: baseline;
								}
								.level {
									margin-left: 18rpx;
									width: 142rpx;
									height: 30rpx;
									padding-right: 12rpx;
									border-radius: 15rpx;
									font-size: 24rpx;
									background: #FA6342;
									color: #FFFFFF;
									text {
										float: right;
										line-height: 35rpx;
									}
									image {
										width: 30rpx;
										height: 30rpx;
										float: left;
									}
								}
							}
						}
					}
					.line {
						height: 1rpx;
						background: rgba(238,238,238,1);
						margin: 30rpx 0;
					}
					.chart {
						height: 600rpx;
						border-bottom: 1rpx solid rgba(238,238,238,1);
						box-sizing: border-box;
						padding-top: 52rpx;
					}
					.sold-info {
						height: 63rpx;
						line-height: 63rpx;
						border-bottom: 1rpx solid rgba(238,238,238,1);
						view {
							box-sizing: border-box;
							width: 50%;
							height: 100%;
							font-size: 24rpx;
							color: rgba(42,42,42,1);
							padding-left: 8rpx;
							float: right;
							&.sold-info-left {
								float: left;
								border-right: 1rpx solid rgba(238,238,238,1);
							}
							&.sold-info-right {
								float: right;
							}
							text {
								color: #FA6342;
							}
						}
					}
					.share {
						position: absolute;
						width: 72rpx;
						height: 72rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 50%;
						background: #FFFFFF;
						border: 8rpx solid #FE531B;
						left: 50%;
						font-size: 36rpx;
						bottom: -36rpx;
						color: #FE531B;
						transform: translateX(-50%);
						padding: 0;
					}
					.tohistory {
						position: absolute;
						right: 37rpx;
						bottom: 26rpx;
						color: #FA6342;
					}
				}
			}
			.nosignup {
				display: block;
				width: 374rpx;
				height: 374rpx;
				margin: 320rpx auto;
			}
		}
	}
</style>