spark-sale/pages/index/index.vue

<template>
	<view class="content">
		<view class="swiper-item" style="padding: 0 15px;" v-show="current == 0">
			<view class="chart-box">
				<canvas canvas-id="chartBox" id="chartBox" class="chart-canvas" force-use-old-canvas="true"></canvas>
			</view>
			<u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="goToTodayEnroll()">查看详情</u-button>
			<view class="section-title" style="margin-top: 40px;">
				<u-image width="20px" height="10px" :src="sectionIcon"></u-image>
				<u-section title="场馆推荐" sub-title="查看更多" font-size="32" :show-line="false" @click="goToVenueList()"></u-section>
			</view>
			<u-card :show-head="false" :show-foot="false" :border="false" margin="0px">
				<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 class="swiper-item" v-show="current == 1">
			<view class="enroll-fix-box">
				<view class="enroll-button" @click="goToAddForm('enrolledForm')">
					<view class="enroll-img">
						<u-image :src="enrolledIcon" mode="aspectFit" width="34px" height="34px"></u-image>
					</view>
					<view class="enroll-text">已报名</view>
				</view>
				<view class="enroll-button" @click="goToAddForm('intentionForm')">
					<view class="enroll-img">
						<u-image :src="intentionIcon" mode="aspectFit" width="34px" height="34px"></u-image>
					</view>
					<view class="enroll-text">有意向</view>
				</view>
			</view>
		</view>
		<view class="swiper-item" v-show="current == 2">
			<view class="user-info">
				<view class="user-data">
					<view class="user-name">{{userData.nickName}}</view>
					<view class="user-phone">{{userData.phone}}</view>
				</view>
				<view class="user-img">
					<u-avatar :src="userData.headImage" size="160"></u-avatar>
				</view>
			</view>
			<view class="user-handle" v-for="(item, index) in handleList" :key="index" @click="goToHandle(item)">
				<view class="handle-icon">
					<u-image :src="item.icon" mode="aspectFit" width="28px" height="28px"></u-image>
				</view>
				<view class="handle-label">{{item.label}}</view>
				<view class="handle-arrow">
					<u-icon name="arrow-right" color="#cccccc" size="32"></u-icon>
				</view>
			</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';
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	var _self;
	let chartBox = null;
	export default {
		computed: {
			...mapGetters([
				'mainColor',
				'customStyle',
			])
		},
		data() {
			return {
				cWidth: '',
				longitude: '',
				latitude: '',
				sectionIcon: API.getServerImg + 'biaoti.png',
				enrolledIcon: API.getServerImg + 'yibaoming.png ',
				intentionIcon: API.getServerImg + 'yixiangkehu.png',
				videoList: [],
				current: 0,
				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: '',
				},
				handleList: [{
						label: '全部客户',
						path: 'customerList',
						icon: API.getServerImg + 'kehu.png'
					},
					{
						label: '营销业绩排行',
						path: 'marketRankList',
						icon: API.getServerImg + 'paihang.png'
					},
					{
						label: '续费提醒',
						path: 'renewList',
						icon: API.getServerImg + 'xufeitixing.png'
					},
					{
						label: '消息通知',
						path: 'messageList',
						icon: API.getServerImg + 'xiaoxi.png'
					},
					{
						label: '数据统计',
						path: 'dataCensus',
						icon: API.getServerImg + 'shujutongji.png'
					},
					{
						label: '我的二维码',
						path: 'shareInfo',
						icon: API.getServerImg + 'erweima.png'
					},
				]
			}
		},
		onLoad() {
			// _self = this; // 浏览器调试时需要打开，微信调试时需关闭
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/login/index'
				});
			}
		},
		onReady() {
			this.cWidth = uni.upx2px(750) - 30;
		},
		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: {
			//  获取初始化数据
			initialize() {
				NET.request(API.getCensusChart, {}, 'POST').then(res => {
					let option = {
						$this: _self,
						canvasId: "chartBox",
						type: 'column',
						width: this.cWidth,
						height: 200,
						padding: [20, 10, 10, 10],
						pixelRatio: 1,
						animation: true,
						background: '#FFFFFF',
						fontSize: 11,
						xAxis: {
							type: 'grid',
							gridType: 'dash',
							disableGrid: true,
							itemCount: 10,
						},
						yAxis: {},
						categories: res.data.customerCreateListRes.map(site => {
							return site.week
						}),
						legend: {
							show: false
						},
						series: [{
							name: "",
							color: "#fcbd71",
							data: res.data.customerCreateListRes.map(site => {
								return site.newCount
							})
						}],
					}
					chartBox = new uCharts(option)
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
				NET.request(API.getNearVenueList, uni.getStorageSync('locationData'), 'POST').then(res => {
					this.videoList = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			},
			//  跳转今日新增
			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
				});
			},
			//  跳转我的各列表界面
			goToHandle(site) {
				uni.navigateTo({
					url: '/pagesMain/' + site.path
				});
			}
		},
	}
</script>

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

	.content {
		width: 100%;
		float: left;

		.swiper-item {
			width: 100%;
			height: calc(100vh - 50px);
			position: relative;
		}

		.chart-box {
			width: 100%;
			height: 240px;
			float: left;
			padding: 20px 0;
			display: flex;

			.chart-canvas {
				width: 100% !important;
				height: 200px !important;
				float: left;
			}
		}

		.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>