teamDetail/pages/view/page2.vue

<template>
	<view class="index">
		<view class="index_top">
			<view class="image">
				<image :src="userinfo.headimgurl" mode="widthFix" style="width: 112rpx;"></image>
			</view>
			<view class="right">
				<view class="title">
					{{ userinfo.remark_name | getNickname }}
				</view>
				<view class="flex">
					<view class="level">
						{{ userinfo.level | userLevel }}
					</view>
					<text>{{ userinfo.mobile | getPhone }}</text>
				</view>
			</view>
		</view>
		<view class="index_title">
			招代理情况
		</view>
		<view style="margin-bottom: 40rpx;">
			<view class="li" :class="level != null?'flex1':'flex2'">
				<view class="item one">
					<text class="bold">{{ data.yestoday | getNum }}</text>
					<text>昨日团队新增</text>
				</view>
				<view class="item two">
					<text class="bold">{{ data.month | getNum }}</text>
					<text>本月累计新增</text>
				</view>
				<view class="item three">
					<text class="bold">{{ data.year | getNum }}</text>
					<text>{{ year }}累计新增</text>
				</view>
				<view v-show="level != null" class="item four">
					<text class="bold">{{ level | getNum }}</text>
					<text>昨日新增经理</text>
				</view>
			</view>
		</view>
		<view class="index_title">
			卖货情况
			<text>(数据来源: 大卫博士微店)</text>
		</view>
		<view class="index_box one">
			<view class="left">
				<image src="../../static/img/1.png" mode="widthFix" style="width: 54rpx;margin-right: 25rpx;"></image>
				<text class="">昨日销量</text>
			</view>
			<view class="right">
				<text class="">{{ data.yestoday_oder_num | getNum }}套，{{ data.ye_money | parseMoney }}元</text>
				<!-- <image src="../../static/img/right.png" mode="widthFix" style="width: 30rpx;margin-left: 25rpx;"></image> -->
			</view>
		</view>
		<view class="index_box two">
			<view class="left">
				<image src="../../static/img/2.png" mode="widthFix" style="width: 54rpx;margin-right: 25rpx;"></image>
				<text class="">本月销量</text>
			</view>
			<view class="right">
				<text class="">{{ data.month_order_num | getNum }}套，{{ data.mon_money | parseMoney }}元</text>
				<!-- <image src="../../static/img/right.png" mode="widthFix" style="width: 30rpx;margin-left: 25rpx;"></image> -->
			</view>
		</view>
		<view class="index_box three">
			<view class="left">
				<image src="../../static/img/4.png" mode="widthFix" style="width: 54rpx;margin-right: 25rpx;"></image>
				<text class="">本年销量</text>
			</view>
			<view class="right">
				<text class="">{{ data.year_order_num | getNum }}套，{{ data.year_money | parseMoney }}元</text>
				<!-- <image src="../../static/img/right.png" mode="widthFix" style="width: 30rpx;margin-left: 25rpx;"></image> -->
			</view>
		</view>
	</view>
</template>

<script>
	import { GetUserStoreInfo, GetLevelUp } from '../../api/index.js';
	// http://192.168.2.129:8080/#/pages/view/page2?id=7190&time=2021%2F09%2F08%2000%3A00%3A00
	export default {
		data() {
			return {
				userinfo: {},
				data: {},
				id: '',
				time: '',
				year: '',
				level: null
			}
		},
		onLoad() {
			this.id = this.$route.query.id
			this.time = this.$route.query.time
			this.getData()
			var date = new Date();
			this.year = date.getFullYear(); //获取完整的年份(4位)
		},
		filters: {
			userLevel(level) {
				if (!level) return '公司'
				let out = ''
				switch (+level) {
					case 1:
						out = '销售主管'
						break;
					case 2:
						out = '销售经理'
						break;
					case 3:
						out = '代理公司'
						break;
					default:
						out = '待定'
				}
				return out;
			},
			getPhone(value) {
				if (value) {
					// var reg = getRegExp('^(\d{3})\d{4}(\d{4})$')
					return value.substr(0, 3) + '****' + value.substr(7)
				}
			},
			getNum(value) {
				if (value) {
					return value
				} else {
					return 0
				}
			},
			getNickname(value) {
				if (value) {
					return value.length > 10 ? value.slice(0, 10) + '...' : value;
				}
			},
			parseMoney(money) {
			  const reg = /(^[1-9][0-9]{0,12}([.][0-9]{0,2})?$)|(^0?(\.[0-9]{0,2})?$)/
			  if (!money || !reg.test(money)) return '0.00'
			  money = String(money)
			  money = money.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
			  return money
			}
		},
		methods: {
			goAdd(num) {
				if (num === 0) {
					uni.navigateTo({
						url: '../query/one?num='+ '昨日新增'
					})
				} else {
					uni.navigateTo({
						url: '../query/one?num='+'本月新增'
					})
				}
			},
			goShop(num) {
				if (num === 0) {
					uni.navigateTo({
						url: '../query/two?num='+'昨日销量'
					})
				} else {
					uni.navigateTo({
						url: '../query/two?num='+'本月销量'
					})
				}
			},
			getData() {
				// id=39517
				GetUserStoreInfo({ id: this.id, time: this.time }).then(res => {
					if (res.code === 200) {
						this.userinfo =  res.data.user
						if (!this.userinfo.remark_name) {
							this.userinfo.remark_name = this.userinfo.nickname
						}
						this.data = res.data
					} else {
						uni.showToast({
							title: res.message || '获取失败',
							icon: 'none'
						})
					}
				}).catch(err => {})
				GetLevelUp({ id: this.id }).then(res => {
					if (res.code === 200) {
						if (res.data.level_up || res.data.level_up == 0) {
							this.level = res.data.level_up
						}
					} else {
						uni.showToast({
							title: res.message || '获取失败',
							icon: 'none'
						})
					}
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		color: #333;
		padding: 30rpx 24rpx;
		&_top {
			height: 112rpx;
			display: flex;
			align-items: center;
			margin-bottom: 44rpx;
			.image {
				width: 112rpx;
				height: 112rpx;
				border-radius: 8rpx;
				overflow: hidden;
			}
			.right {
				margin-left: 20rpx;
				color: #333333;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				.title {
					font-size: 40rpx;
				}
				.flex {
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					.level {
						width: 116rpx;
						height: 42rpx;
						background: #D9AE00;
						border-radius: 4rpx;
						text-align: center;
						line-height: 42rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						font-weight: 200;
					}
					text {
						font-size: 30rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
		&_title {
			font-size: 38rpx;
			font-weight: bold;
			line-height: 38rpx;
			padding-left: 20rpx;
			border-left: 8rpx #FB231F solid;
			margin: 30rpx 0;
			text {
				font-size: 30rpx;
				font-weight: 600;
				margin-left: 10rpx;
			}
		}
		.flex1 {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.item {
				width: 340rpx;
				margin-top: 20rpx;
			}
		}
		.flex2 {
			display: flex;
			justify-content: space-between;
			.item {
				width: 218rpx;
			}
		}
		.li {
			.item {
				height: 148rpx;
				border-radius: 8px;
				// padding: 14rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				color: #fff;
				font-size: 28rpx;
				font-weight: 400;
				.bold {
					font-size: 40rpx;
					font-weight: 500;
					// font-weight: bold;
					margin-bottom: 10rpx;
				}
			}
			.one {
				background: linear-gradient(90deg, #5B50FF 0%, #8D3EFF 100%);
			}
			.two {
				background: linear-gradient(93deg, #FF4646 0%, #FF893A 100%);
			}
			.three {
				background: linear-gradient(90deg, #00D59F 0%, #009AD1 100%);
			}
			.four {
				background: linear-gradient(90deg, #FB1A5D 0%, #FF41D1 100%);
			}
		}
		&_box {
			// width: 702rpx;
			height: 150rpx;
			border-radius: 8rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
			padding: 0 30rpx;
			margin-bottom: 32rpx;
			.left {
				display: flex;
				align-items: center;
			}
			.right {
				font-weight: 500;
				font-size: 36rpx;
			}
		}
		.one {
			background: linear-gradient(270deg, #FF30CD 0%, #FF0347 100%);
		}
		.two {
			background: linear-gradient(270deg, #FF3434 0%, #FF6500 100%);
		}
		.three {
			background: linear-gradient(270deg, #9821FF 0%, #FF00B2 100%);
		}
		.four {
			background: linear-gradient(270deg, #10CE9D 0%, #0098DC 100%);
		}
	}
</style>