spark-sale/pages/index/index.vue

<template>
	<view class="content">
		<view class="swiper-item" style="padding: 0 15px;">
			<view class="chart-box">
				<view class="navbar-list">
						<u-image width="220rpx" height="80rpx" v-for="(item,index) in navbarList" :key="index" :src="item.imgPath" :fade="false" @click="handleJumpPathClick(item)"></u-image>
				</view>
				<!-- 简报 -->
				<view class="bulletin-list">
					<u-tabs :list="bulletinList" :is-scroll="false" bg-color="#f5f6f8" :current="bulletinCurrent" :active-item-style="{'fontSize': '44rpx', 'color':'#000','width':'280rpx'}" font-size="36" @change="handlebulletinClick"></u-tabs>
					<!-- <u-cell-item title="本周" :arrow="true" arrow-direction="down"></u-cell-item> -->
					<u-cell-item title="本周" :arrow="false"></u-cell-item>
				</view>
				
				<!-- 简报信息 -->
				<u-card :show-head="false" :show-foot="false" :border="false" margin="20rpx 0">
					<view slot="body" class="bulletin-info">
						<view v-for="(item,index) in bulletinInfo" :key="index" class="bulletin-item">
							<view>{{ item.name }}</view>
							<view class="bulletin-num">{{ item.num }}</view>
						</view>
					</view>
				</u-card>
				
				<!-- 线索状态 -->
				<u-card :show-foot="false" :border="false" margin="0px">
					<view slot="head">
						<text style="font-size: 44rpx;font-weight: bold;">线索状态</text>
					</view>
					<view slot="body">
						<canvas canvas-id="chartBox" id="chartBox" class="chart-canvas" force-use-old-canvas="true"></canvas>
					</view>
				</u-card>
				
				<!-- 场馆推荐-->
				<u-card :show-foot="false" :border="false" margin="20rpx 0">
					<view slot="head">
						<u-section title="场馆推荐" sub-title="查看更多" font-size="44" :show-line="false" @click="goToVenueList()"></u-section>
					</view>
					<view class="class-show-box" slot="body">
						<view v-for="(item, index) in videoList" :key="index" class="class-show-card" @click="goToVenueDetail(item)">
							<u-image :src="item.url" mode="aspectFill" height="30vw" border-radius="10px"></u-image>
							<view class="class-show-name">{{item.name}}</view>
						</view>
					</view>
				</u-card>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
<!-- 		<u-tabbar v-model="current" :list="tabbarList" :mid-button="true" :active-color="mainColor" inactive-color="#cccccc"
		 icon-size="60"></u-tabbar> -->
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.min.js';
	import client from '@/static/images/client.png'
	import thread from '@/static//images/thread.png'
	import business from '@/static/images/business.png'
	import empty from '@/static/images/empty.png'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	var _self;
	var uChartsInstance = {};
	export default {
		computed: {
			...mapGetters([
				'mainColor',
				'customStyle',
			])
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				longitude: '',
				latitude: '',
				sectionIcon: API.getServerImg + 'biaoti.png',
				enrolledIcon: API.getServerImg + 'yibaoming.png ',
				intentionIcon: API.getServerImg + 'yixiangkehu.png',
				videoList: [],
				tabbarList: [{
						iconPath: "../../../static/images/icon-index.png",
						selectedIconPath: "../../../static/images/icon-index-active.png",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "plus-circle-fill",
						selectedIconPath: "close-circle-fill",
						text: '新增',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "../../../static/images/icon-mine.png",
						selectedIconPath: "../../../static/images/icon-mine-active.png",
						text: '我的',
						customIcon: false,
					},
				],
				userData: {
					headImage: '',
					userId: '',
					nickName: '',
					userName: '',
					phone: '',
				},
				navbarList: [
					{
						'title': '客户',
						'imgPath': client,
						'path': '/pagesMain/customerList'
					},
					{
						'title': '线索',
						'imgPath': thread,
						'path': '/pagesMain/threadList'
					},
					{
						'title': '公海',
						'imgPath': business,
						'path': '/pagesMain/businessList'
					},
					// {
					// 	'title': '占位',
					// 	'imgPath': empty,
					// }
				],
				// 简报
				bulletinList: [{
					name: '团队简报'
				}, {
					name: '个人简报'
				}],
				bulletinCurrent: 0,
				// 简报信息
				bulletinInfo: [
					{
						name: '新增客户',
						num: 0
					}, {
						name: '新增线索',
						num: 0
					}, {
						name: '新增商机',
						num: 0
					}
				],
				flag: true,
				// 线索状态
				threadList: [],
				threadNum: 0
			}
		},
		onLoad() {
			// _self = this; // 浏览器调试时需要打开，微信调试时需关闭
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/login/index'
				});
			}
		},
		onReady() {
			//这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(520);
			//这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(500);
		},
		onShow() {
			if (uni.getStorageSync('userData')) {
				this.userData = uni.getStorageSync('userData')
			}
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: (res) => {
					uni.setStorage({
						key: 'locationData',
						data: {
							longitude: res.longitude,
							latitude: res.latitude,
						}
					})
					this.initialize()
				}
			});
		},
		onPullDownRefresh() {
			this.initialize()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500)
		},
		methods: {
			// 跳页
			handleJumpPathClick(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			drawCharts(id,data){
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "ring",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					series: data.series,
					animation: true,
					rotate: false,
					rotateLock: false,
					background: "#FFFFFF",
					color: ["#8A2BE8","#91CB74","#FAC858","#EE6666","#1890FF"],
					padding: [0,0,0,0],
					dataLabel: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: this.threadNum,
						fontSize: 24,
						color: "#000"
					},
					subtitle: {
						name: "线索量",
						fontSize: 18,
						color: "#000"
					},
					extra: {
						ring: {
							ringWidth: 25,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
						}
					}
				})
			},
			//  获取初始化数据
			initialize() {
				this.getTeamPaper()
				this.getClueRait()
				// this.getRing()
				NET.request(API.getNearVenueList, uni.getStorageSync('locationData'), 'POST').then(res => {
					const venueData = res.data
					this.videoList = venueData.length <= 4 ? venueData : venueData.slice(0,4)
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			},
			//  获取团队简报
			async getTeamPaper() {
				let res = await NET.request(API.teamStatistics, { flag: this.flag }, 'POST')
				if(res.status == 10000) {
					const result = res.data
					this.bulletinInfo[0].num = result.nearCreateCustomer
					this.bulletinInfo[1].num = result.nearCreateClue
					this.bulletinInfo[2].num = result.nearCreateChance
				} else {
					this.$refs.uTips.show({
						title: res.message,
						type: 'warning',
					})
				}
			},
			//  获取线索状态
			async getClueRait() {
				let res =  await NET.request(API.clueRait, { flag: this.flag }, 'POST')
				if(res.status == 10000) {
					// 线索
					this.threadList = res.data.map(item => {
						return {
							'name': `${item.name}(${item.value})` ,
							'value': item.value
						}
					})
					// 线索量
					this.threadNum = res.data.reduce((sum,item) => sum += item.value, 0 )
				} else {
					this.$refs.uTips.show({
						title: res.message,
						type: 'warning',
					})
				}
				let aaa = {
						series: [
							{
								data: this.threadList
								// data: [{'name':"一班(20)","value":500},{'name':"二班","value":30},{'name':"三班","value":20},{'name':"四班","value":18}]
								// data: threadList
							}
						]
					};
				this.drawCharts('chartBox', aaa);
			},
			// 图
			// getRing() {
			// 	// console.log(threadList);
			// 	let res = {
			// 			series: [
			// 				{
			// 					// data: this.threadList
			// 					data: [{'name':"一班(20)","value":500},{'name':"二班","value":30},{'name':"三班","value":20},{'name':"四班","value":18}]
			// 					// data: threadList
			// 				}
			// 			]
			// 		};
			// 	this.drawCharts('chartBox', res);
			// },
			//  切换简报
			handlebulletinClick(index) {
				this.bulletinCurrent = index
				if(!index) {
					this.flag = true
				} else {
					this.flag = false
				}
				this.getTeamPaper()
				this.getClueRait()
			},
			//  跳转今日新增
			goToTodayEnroll() {
				uni.navigateTo({
					url: '/pagesEnroll/todayEnroll'
				});
			},
			//  跳转所有场馆
			goToVenueList() {
				uni.navigateTo({
					url: '/pagesEnroll/venueList'
				});
			},
			//  跳转场馆详情
			goToVenueDetail(item) {
				uni.navigateTo({
					url: '/pagesEnroll/venueDetail?id=' + item.id
				});
			},
			//  跳转添加信息
			goToAddForm(path) {
				uni.removeStorageSync('defaultClass');
				uni.navigateTo({
					url: '/pagesEnroll/' + path
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/themes.scss";

	.content {
		width: 100%;
		float: left;
		background-color: #f5f6f8;
		
		.swiper-item {
			width: 100%;
			height: calc(100vh - 50px);
			position: relative;
		}

		.chart-box {
			width: 100%;
			// height: 240px;
			float: left;
			padding: 10px 0;
			
			.navbar-list {
				display: flex;
				justify-content: space-between;
				width:100%;
			}
			
			.bulletin-list {
				display:flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
			}
			
			.bulletin-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.bulletin-item {
					flex:1;display: flex;
					flex-direction:column;
					justify-content: center;
					align-items: center;
					
					.bulletin-num {
						font-size: 18px;
						font-weight: bold;
						margin-top: 10rpx;
					}
				}
			}
			.chart-canvas {
				width: 100%; 
				height: 500rpx;
			}
		}

		.section-title {
			width: 100%;
			// height: 28px;
			display: flex;
			align-items: center;

			u-section {
				margin-left: 10px;
				flex: 1;
			}
		}

		.class-show-box {
			width: calc(100% + 32px);
			margin: 0 -16px;
			float: left;
			// padding-bottom: 50px;

			.class-show-card {
				width: calc(50% - 16px);
				margin: 0 8px 16px 8px;
				float: left;

				.class-show-name {
					width: 100%;
					text-align: center;
					line-height: 18px;
					font-size: 12px;
					margin-top: 5px;
				}
			}
		}

		.enroll-fix-box {
			width: 100%;
			height: 90px;
			position: absolute;
			bottom: 40px;
			left: 0;
			display: flex;
			justify-content: space-around;

			.enroll-button {
				width: 60px;
				height: 90px;

				.enroll-img {
					width: 60px;
					height: 60px;
					padding-left: 5px;
					border-radius: 50%;
					background-color: #ffffff;
					box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.enroll-text {
					width: 60px;
					height: 20px;
					margin-top: 10px;
					line-height: 20px;
					font-size: 14px;
					text-align: center;
					white-space: nowrap;
				}
			}
		}

		.user-info {
			width: 100%;
			height: 110px;
			margin-bottom: 20px;
			float: left;
			background-color: $mainColor;

			.user-data {
				width: calc(100% - 110px);
				height: 110px;
				padding: 15px 0 15px 15px;
				float: left;

				.user-name {
					width: 100%;
					float: left;
					font-size: 24px;
					color: #FFFFFF;
					line-height: 30px;
					margin: 10px 0;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.user-phone {
					width: 100%;
					color: #FFFFFF;
					line-height: 20px;
					float: left;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.user-img {
				width: 110px;
				height: 110px;
				padding: 15px;
				float: left;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.user-handle {
			width: 100vw;
			height: 40px;
			float: left;
			padding: 0 15px;
			margin-bottom: 10px;
			display: flex;
			align-items: center;

			.handle-icon {
				width: 40px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				display: flex;
				align-items: center;
			}

			.handle-label {
				height: 40px;
				flex: 1;
				margin-left: 10px;
				line-height: 40px;
				font-size: 15px;
			}

			.handle-arrow {
				line-height: 40px;
			}
		}
	}
</style>