1

pages/share/cp/fl-calendar.vue

+<template>
+	 <!-- 使用方法 -->
+	 <!-- 
+	 1.传入参数startDate为开始时间
+	 2.传入参数endDate为结束时间
+	 3.传入limit为需要渲染的月份数
+	 4.点击确认导出选择的日期参数{startDate,endDate,dayNum}
+	  -->
+	  
+	
+	<!-- 布局构思 -->
+	<!-- 考虑能通过自适应应对高度需求 -->
+	<!-- 使用方法：在页面限制使用容器作为节点挂载该组件，并对节点设置heigth，以达到想要的高度，头部80rpx，底部按钮112rpx安全区域，若是要自定义样式请自行修改dateView的定位值 -->
+
+		<view class="container" :animation="animationData" :style="{height:height+'px'}">
+			<view class="navTop">
+				<view class="cancel" @tap="cancel()">取消</view>
+				<view class="title">日期选择器</view>
+			</view>
+			<!-- 周一至周日 -->
+			<view class="week">
+				<view v-for="(item,index) in weekList" :class="{sunDay:index==0}" :key="index">{{item.title}}</view>
+			</view>
+			<!-- 日期的显示容器 -->
+			<view class="dateView">
+				<view class="date" v-for="(item,index) in dateList" :key="index">
+					<view class="yearAndMonth">{{item.year}}年{{item.month}}月</view>
+					<view class="dayList">
+						<view v-for="(day,No) in item.dayArray" @click="chooseDate(item.year,item.month,day)" :class="['day',dealClassStyle(item.year,item.month,day)]" :key="No">
+							<view class="today" v-if="dealTimeString(`${item.year}-${item.month}-${day}`)==dealTimeString(today)">
+								<view>今天</view>
+							</view>
+							<view class="star" v-if="dealTimeString(`${item.year}-${item.month}-${day}`)==startTimeString">
+								<view>开始</view>
+							</view>
+							<view class="end" :class="{same:endTimeString==startTimeString}" v-if="dealTimeString(`${item.year}-${item.month}-${day}`)==endTimeString">
+								<view>结束</view>
+							</view>
+							<view>{{day}}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 底部按钮 -->
+			<view class="btnGroup">
+				<view class="reset" @click="reset()">重置</view>
+				<view class="confirm" @click="confirmChoose()">确认</view>
+			</view>
+		</view>
+
+</template>
+<script>
+
+	// js构思
+	// 1.获取当日 的 日期 ， 编写function处理出渲染数据
+	// 2.编写function，可通过传入的年 月 获取当月的天数 （涉及处理闰年 闰月 大月 小月 ） 注：获取每月1号是周几，在获取的天数数组前推进对应上月天数空白项
+	// 3.编写function，可通过开始日期以及limit限制获取需要渲染的月份日历格式为{year:"xxxx-xx-xx",month:"xx",dateArray:"[1,2,3,4,5,6...]" }
+	// 4.编写function，可通过传入的年月日通过处理出的时间戳来给日期动态添加样式类名
+	// 5.编写function，选择时间时传入年月日，并处理出时间戳，替换默认开始与结束时间时间戳达到替换样式效果
+	
+	export default {
+		props: {
+			// 开始日期
+			startDate: {
+				type: String,
+				default: ''
+			},
+			// 结束日期
+			endDate: {
+				type: String,
+				default: ''
+			},
+			// 限制显示的月份
+			limit: {
+				type: String | Number,
+				default: 6
+			},
+			height:{
+				type: String |Number,
+				default: 600
+			}
+		},
+		data() {
+			return {
+				year: '',			//当年
+				month: '',			//当月
+				week: '',			//当天是周几
+				day: '',			//当天的号数
+				today: '',			//当天
+				todayTimeString: '', //当日时间戳
+				startTimeString: '', //开始的时间戳，重要，用于多个地方的判断
+				endTimeString: '',   //结束的时间戳，重要，用于多个地方的判断
+				timeArr:[],			//选择事件时的开始/结束时间戳数组
+				dateList: [],		//用于渲染的日历数据合集
+				weekList: [{		//周的抬头
+					title: '日',
+					index: 0
+				}, {
+					title: '一',
+					index: 1
+				}, {
+					title: '二',
+					index: 2
+				}, {
+					title: '三',
+					index: 3
+				}, {
+					title: '四',
+					index: 4
+				}, {
+					title: '五',
+					index: 5
+				}, {
+					title: '六',
+					index: 6
+				}],
+				animationData:{},
+				animation:{},
+				speck:300
+				// animationMask:{},
+				// animationDataMask:{}
+			}
+			
+		},
+		mounted() {
+			this.init()
+			var animation = uni.createAnimation({
+				duration:this.speck,
+				timingFunction: 'ease'
+			})
+			this.animation =animation
+			this.showCalendar()
+		},
+		methods: {
+			// 初始化
+			init(){
+				this.ajaxDate()					//先处理当天的日期
+				this.dealStarAndEndDay()		//处理传入参数
+				this.dealDateList()				//处理出最终渲染数据
+			},
+			hideCalendar(){
+				this.animation.bottom(-this.height).step()
+				this.animationData = this.animation.export()
+			},
+			showCalendar(){
+				this.animation.bottom(0).step()
+				this.animationData = this.animation.export()
+			},
+			// 取消事件，未定义，请自行编写取消时的方法
+			cancel(){
+				console.log('隐藏')
+				this.hideCalendar()
+				setTimeout(()=>{
+					this.$emit('cancel')
+				},this.speck)
+				
+			},
+			// 重置选择
+			reset(){
+				this.timeArr = new Array() 											//清空数组
+				this.startTimeString = ''											//清空开始时间的时间戳
+				this.endTimeString = ''												//清空结束时间的时间戳
+				// this.init()															//重新计算日期并赋予样式类名
+			},
+			// 确认选择时间
+			confirmChoose(){
+			let reg = /\S/;															//非空正则
+			if(reg.test(this.startTimeString)&&reg.test(this.endTimeString)){		//判断开始与结束时间不为空方能导出时间并调取selectDate传参事件
+				let startDate = this.dealDate(this.startTimeString)
+				let endDate = this.dealDate(this.endTimeString)
+				let dayNum = ((this.endTimeString - this.startTimeString)/1000/3600/24)+1
+				
+			
+				// 此处调用传参 
+				this.$emit('selectDate',{startDate:startDate,endDate:endDate,dayNum:dayNum})
+				setTimeout(()=>{													//隐藏
+					this.$emit('cancel')
+				},this.speck)										
+				this.hideCalendar()
+			}else{
+				uni.showModal({
+					title:'提示',
+					content:`尚未选择时间`
+				})
+			}
+				
+			},
+			// 选择开始结束日期
+			chooseDate(year,month,day){
+				let time = `${year}-${month}-${day}`
+				let timeString = new Date(time).getTime()
+				// if(timeString>=this.todayTimeString){						//选择的时间必须大于等于今天，过期时间不给选择
+					if(this.timeArr.length>=2){								//如果数据量大于等于2证明已是多次选择，需做判断
+						this.timeArr.shift(0,1)								//删掉第一条时间
+						this.timeArr.push(timeString)						//并推入新选择时间
+						if(this.timeArr[0]<this.timeArr[1]){				//若是[0]小于[1]
+							this.startTimeString = this.timeArr[0]			//则[0]为开始时间
+							this.endTimeString = this.timeArr[1]			//[1]为结束时间
+						}else if(this.timeArr[0]>this.timeArr[1]){			//若是[0]大于[1]
+							this.startTimeString = this.timeArr[1]			//则[1]为开始时间
+							this.endTimeString = this.timeArr[0]			//[0]为结束时间
+						}else if(this.timeArr[0]==this.timeArr[1]){			
+							this.startTimeString = this.timeArr[0]
+							this.endTimeString = this.timeArr[1]
+						}
+					
+					}else if(this.timeArr.length===1){						//若是数据量为1，亦需做判断
+						this.timeArr.push(timeString)
+						this.startTimeString = this.timeArr[0]
+						if(this.timeArr[0]<this.timeArr[1]){				//若是[0]小于[1]
+							this.startTimeString = this.timeArr[0]			//则[0]为开始时间
+							this.endTimeString = this.timeArr[1]			//[1]为结束时间
+						}else if(this.timeArr[0]>this.timeArr[1]){			//若是[0]大于[1]
+							this.startTimeString = this.timeArr[1]			//则[1]为开始时间
+							this.endTimeString = this.timeArr[0]			//[0]为结束时间
+						}else if(this.timeArr[0]==this.timeArr[1]){			
+							this.startTimeString = this.timeArr[0]
+							this.endTimeString = this.timeArr[1]
+						}
+						
+					}else{													//若是数据量为1，证明是第二次选择，正常将数据推入数组即可
+						this.timeArr.push(timeString)
+						this.startTimeString = this.timeArr[0]
+						
+					}
+					console.log('timeArr',this.timeArr)
+				// }else{
+				// 	uni.showToast({
+				// 		title:"选择日期不能小于当天！",
+				// 		icon:'none'
+				// 	})
+				// }
+			},
+			// 处理返回事件戳 用于数据对比，展示开始 结束 标签
+			dealTimeString(time){
+				return new Date(time).getTime()
+			},
+			// 处理出dateList用于最终渲染
+			dealDateList() {
+				let start;							
+				if (this.startDate) {									//如果开始时间不为空则以开始时间为开始月份的基准
+					start= this.startDate.replace('/','-')
+				} else {												//否则以当日时间为开始月份的基准
+					start = this.today
+				}
+				let year = new Date(start).getFullYear();
+				let month = new Date(start).getMonth()+2;
+				for (let i = 0; i < this.limit; i++) {					//limit默认为渲染6个月
+					month--
+					if (month < 1) {									//若是月份大于12，年份+1
+						month = month + 12								//月份减12
+						year = year - 1
+					}
+					month=month<10?'0'+month:month,
+					this.dateList.push({
+						year: year,										//年
+						month: month,									//月
+						dayArray: this.dealDateArray(year, month)		//日数组
+					})
+				}
+				console.log('列表', this.dateList)
+			},
+			// 获取传参日期后处理出当天时间戳（重要）
+			dealStarAndEndDay() {
+				let startTimeString;
+				let endTimeString;
+				// console.log('开始结束',this.startDate,this.endDate)
+				if (this.startDate) {								//若有传开始时间，则处理出开始时间的时间戳，
+					startTimeString = new Date(this.startDate.replace('/','-')).getTime()
+				} else {
+					startTimeString = false
+				}
+				if (this.endDate) {									//若有传结束时间，则处理出结束时间的时间戳，
+					endTimeString = new Date(this.endDate.replace('/','-')).getTime()
+				} else {
+					endTimeString = false
+				}
+				this.startTimeString = startTimeString;
+				this.endTimeString = endTimeString;
+			},
+			// 获取当日的 年-月-日
+			ajaxDate() {
+				let date = new Date()
+				let year = date.getFullYear()
+				let month = date.getMonth() + 1
+				let week = date.getDay()
+				let day = date.getDate()
+				this.year = year
+				this.month = month
+				this.week = week
+				this.day = day
+				
+				month = month < 10 ? '0' + month : month,
+					day = day < 10 ? '0' + day : day,
+					this.today = `${year}-${month}-${day}`
+				this.todayTimeString = new Date(`${year}-${month}-${day}`).getTime()
+
+			},
+			// 传入年份月份返回当月天数
+			dealDateArray(year, month) {
+				let big = ['01', '03', '05', '07', '08', 10,12 ]; //每年的大月数组 自己处理 加了0的是字符串 其他为数组
+				let type; //0为闰年 1为平年
+				let dayNum; //当月天数
+				let dayArray = new Array() //处理返回的当月天数数组
+				if ((year % 100 != 0 && year % 4 == 0 && year % 4 != 0) || (year % 100 == 0 && year % 400 == 0)) { //非世纪年能被4整除且不能被100整除为闰年，世纪年能被400整除为闰年
+					// console.log('闰年')
+					type = 0
+				} else {
+					type = 1
+					// console.log('平年')
+				}
+				if (big.includes(month)) { 										//属于大月数组为大月，31天
+					dayNum = 31
+					// console.log('大月', dayNum)
+				} else {
+					if (month == 2) { 											//闰年2月29天
+						if (type == 0) {
+							dayNum = 29
+							// console.log('闰月', dayNum)
+						} else { //平年2月28天
+							dayNum = 28
+							// console.log('平月', dayNum)
+						}
+					} else { 													//其余小月30天
+						dayNum = 30
+						// console.log('小月', dayNum)
+					}
+				}
+
+				let No = new Date(`${year}-${month}`).getDay() 					// 获取每月的1号是星期几
+				for (let i = 0; i < No; i++) { 				   					// 补全日历空白区域，将1号对齐至周几
+					dayArray.unshift('')					   					// 在数组的前面插进空字符串
+				}
+
+				for (let i = 1; i <= dayNum; i++) {
+					i = i < 10 ? '0' + i : i
+					dayArray.push(i)
+				}
+				return dayArray
+			},
+			// 通过对比处理日期的时间戳返回样式的类名
+			dealClassStyle(year,month,day) {
+				if(day){														//day必须存在，为空字符串不处理
+					let time = `${year}-${month}-${day}`			
+					let timeString = new Date(time).getTime()
+					let todayTimeString = this.todayTimeString
+					if (timeString == this.startTimeString) {					//时间戳等于开始时间时间戳
+						return 'startDate'
+					} else if (timeString == this.endTimeString) {				//时间戳等于结束时间时间戳
+						return 'endDate'
+					} else
+					if (timeString > this.startTimeString && timeString < this.endTimeString) {  //大于开始时间时间戳并小于结束时间时间戳的范围
+						return 'scope'
+					} else if (timeString == todayTimeString) {									//今天
+						return 'toDay'
+					} 
+				}
+			},
+			// 处理出时间的方法
+			dealDate(time=''){
+				let date = new Date(time)
+				let year = date.getFullYear();
+				let month = date.getMonth()+1;
+				let day = date.getDate();
+				month = month<10?'0'+month:month;
+				day = day<10?'0'+day:day;
+				return `${year}-${month}-${day}`
+			},
+		}
+	}
+</script>
+<style lang="less" scoped>
+	
+	// 整个容器
+	
+	.container {
+		position:fixed;
+		background-color: #fff;
+		border-radius: 16rpx 16rpx 0 0;
+		bottom:-100%;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 0 62rpx;
+		// 头部操作区域
+		.navTop {
+			position: relative;
+			display: flex;
+			align-items: center;
+			height: 80rpx;
+			margin-bottom: 30rpx;
+
+			// 取消按钮
+			.cancel {
+				font-size: 28rpx;
+				z-index: 10;
+			}
+
+			// 标题
+			.title {
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				font-size: 32rpx;
+				line-height: 80rpx;
+				text-align: center;
+
+			}
+		}
+
+		// 周容器  周日-周六
+		.week {
+
+			display: flex;
+			align-items: center;
+			border-bottom: 1rpx solid #ededed;
+			padding-bottom: 20rpx;
+			margin-bottom: 30rpx;
+
+			view {
+				width: 14.2857%;
+				text-align: center;
+			}
+		}
+
+		// 年份以及月份
+		.yearAndMonth {
+			text-align: center;
+			margin-bottom: 30rpx;
+		}
+
+		// 日期视口容器
+		.dateView {
+			position: absolute; //绝对定位
+			top: 220rpx; //头部操作区域以及想要的margin-bottomm
+			bottom: 112rpx; //底部操作区域高度
+			left: 62rpx;
+			right: 62rpx;
+			flex: 1;
+			overflow: auto;
+
+			.date {
+				margin-bottom: 60rpx;
+			}
+
+			.dayList {
+				display: flex;
+				flex-wrap: wrap;
+
+				.day {
+					position: relative;
+					width: 14.2857%;
+					text-align: center;
+					color: #666;
+					padding: 30rpx 0;
+				}
+
+				.startDate,.endDate{
+					color: #fff;
+					background: linear-gradient(90deg, #FF5F32 0%, #F10E31 100%);
+					border-radius: 8rpx;
+				}
+				.star,.end{
+					position: absolute;
+					top:2rpx;
+					left: 0;
+					right: 0;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					color: #fff;
+					font-size: 20rpx;
+				}
+				
+				.same{
+					bottom:-63%;
+				}
+
+				// 今天
+				.today {
+					position: absolute;
+					top:10rpx;
+					left: 0;
+					right: 0;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					height: fit-content;
+					color: #F10E31;
+					font-size: 20rpx;
+					view{
+						line-height: 24rpx;
+						border-bottom: 2rpx solid #F10E31;
+					}
+				}
+
+				// 今天以前 过期
+				.overdue {
+					color: #cecece;
+				}
+
+				// 选择范围
+				.scope {
+					background-color: #FDDCDB;
+				}
+			}
+
+		}
+
+		// scrollbar隐藏
+		.dateView::-webkit-scrollbar {
+			width: 0;
+			height: 0;
+			color: transparent;
+			background-color: transparent;
+			display: none;
+		}
+
+	}
+
+
+
+
+
+
+	/* 周日红色 */
+	.sunDay {
+		color: #fe3c3c;
+	}
+
+
+
+	// 底部按钮区域
+	.btnGroup {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 12rpx 32rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background-color: #fff;
+		z-index: 1;
+		border-top: 1rpx #ededed solid;
+
+		view {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 88rpx;
+			font-size: 32rpx;
+			box-sizing: border-box;
+			border-radius: 50rpx;
+			width: 328rpx;
+		}
+
+		:first-child {
+			color: #333;
+			border: #ededed 1rpx solid;
+		}
+
+		:last-child {
+			color: #fff;
+			background: linear-gradient(90deg, #FF5F32 0%, #F10E31 100%);
+
+		}
+	}
+</style>

pages/share/salesvolume.vue

+<style>
+	.salesvolume .disc{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.salesvolume .zongxiaos{
+		width: 100%;
+		margin-top: 70rpx;
+	}
+	.salesvolume .distext{
+		font-size: 12px;
+		color: #7FBFFF;
+	}
+	.salesvolume .dised{
+		display: flex;
+		align-items: flex-end;
+		font-size: 70rpx;
+		margin-top: 7px;
+		color: #FFF;
+	}
+	.salesvolume .top-b{
+		margin-top: 50rpx;
+		width: 100%;
+		display: flex;
+		align-items: center;
+	}
+	.salesvolume .top-b-item{
+		width:calc((100vw - 2px)/2) ;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.salesvolume .zongjie{
+		width: calc(100vw - 50px);
+		height: 148rpx;
+		margin-left: 25px;
+		margin-top: 30px;
+		border-radius: 10px;
+		box-shadow: 0px 0px 8px 0px rgba(116, 116, 116, 0.35);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 30px;
+	}
+	.salesvolume .zongjie-item{
+		width: calc((100vw - 50px - 2px)/2);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-size: 12px;
+		color: #6A6A6A;
+		
+	}
+</style>
 <template>
-	<view class="salesvolume">
+	<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh;">
+		<view class="salesvolume">
+
+			<view class="headStatus" v-if="scrollTop > 50" :style="[
+				headStyle,
+				{
+				  zIndex: scrollTop < 10 ? 'unset' : 2,
+				  opacity: scrollTop < 10 ? '100' : scrollTop,
+				},]">
+				<view class="arrow" @click="redirectPrev">
+					<u-icon name="arrow-left" size="48" color="#000"></u-icon>
+				</view>
+				<view class="title" v-if="scrollTop > 50">{{pageTitle}}</view>
+			</view>
+			<view style="width: 100%;height: 100%;">
+				<view class="sharebox_top">
+					<view class="sharebox_top_nav" :style="{paddingTop:nav+'px'}">
+						<view class="arrow" @click="redirectPrev">
+							<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
+						</view>
+						<view class="title" style="color: #FFFFFF;font-size: 16px;">{{pageTitle}}</view>
+						<view style="width: 24px;height: 24px;"></view>
+					</view>
+					<view class="disc zongxiaos" >
+						<text class="distext">总销售额</text>
+						<view class="dised" style="margin-top: 12px;">{{data.Total?data.Total.toFixed(2):0}} <text style="font-size: 15px;margin-bottom: 16rpx;">(元)</text>  </view>
+					</view>
+					<view class="top-b">
+						<view class="top-b-item">
+							<text class="distext">我的总销售额</text>
+							<view class="dised" style="font-size: 17px;">{{data.MySellMoney?data.MySellMoney.toFixed(2):0}} <text style="font-size: 10px;margin-bottom: 6rpx;">(元)</text>  </view>
+						</view>
+						<view style="width: 1px;height: 30px;background: #FFF;"></view>
+						<view class="top-b-item">
+							<text class="distext">线下总销售额</text>
+							<view class="dised" style="font-size: 17px;">{{data.ReSellMoney?data.ReSellMoney.toFixed(2):0}} <text style="font-size: 10px;margin-bottom: 6rpx;">(元)</text>  </view>
+						</view>
+					</view>
+				</view>
+				<view style="width: 100%;padding:0 15px;display: flex;align-items: center;justify-content: space-between;height: 50px;">
+					<text style="font-size: 17px;color: #000000;font-weight: bold;">我的销售额</text>
+					
+				</view>
+				<view style="width: 100%;display: flex;align-items: center;justify-content: center;">
+					<view style="display: flex;align-items: center;"  @click="show=true">
+						<text style="font-size: 14px;color: #000000;">{{msg.StartTime}} ~ {{msg.EndTime}}</text>
+						<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/salesxiala.png" style="width: 17px;height: 17px;margin-left: 7px;"></image>
+					</view>
+				</view>
+				<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" disable-scroll=true
+					@touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn">
+				</canvas>
+				<view class="zongjie">
+					<view class="zongjie-item">
+						<text>我的销售额</text>
+						<text style="font-size: 22px;color: #000000;">{{timeMySale.toFixed(2)}}</text>
+					</view>
+					<view style="width: 1px;height: 30px;background: #D2D2D2;"></view>
+					<view class="zongjie-item">
+						<text>线下销售额</text>
+						<text style="font-size: 22px;color: #000000;">{{timeReSale.toFixed(2)}}</text>
+					</view>
+				</view>
 
+			</view>
+            <calendar ref="calendar" v-if="show" 
+			@cancel="show=false" 
+			:startDate="msg.StartTime"
+			 :height="height"
+			  :endDate="msg.EndTime"
+			   @selectDate="selectDate"
+				:limit="limit" />
 
-	</view>
+		</view>
+	</scroll-view>
 </template>
 
 <script>
+	import uCharts from './cp/u-charts.js';
+	import calendar from './cp/fl-calendar.vue'
+
+	var canvaColumn = null;
+	var _self;
 	export default {
 		components: {
-
-		},
+			calendar
+		},
+		
 		data() {
-			return {
+			return {
+				show:false,
 				pageTitle: "销售额",
-
+				contentHeight: 0,
+				mainColor: '',
+				secondary: '',
+				headStyle: {},
+				scrollTop: 0,
+				params: {
+					year: true,
+					month: true,
+					day: true,
+					hour: false,
+					minute: false,
+					second: false
+				},
 				msg: {
 					UserId: 0,
 					StartTime: '',
 					EndTime: '',
-				},
-				mainColor: "",
-				secondary: '',
-				pricecolor: '',
-
-			};
+				},
+				 height:500,                 //日历容器高度
+				 limit:36,
+				data:{},
+				nav: 0,
+				
+				cWidth:'',
+				cHeight:'',
+				pixelRatio:1,
+				textarea:''	,
+				timeMySale:0,//时间段的最近销售额
+				timeReSale:0,//时间段的下线的销售额
+			}
 		},
 		created() {
-
+			this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
 			this.mainColor = this.$uiConfig.mainColor;
 			this.secondary = this.$uiConfig.secondary;
-			this.pricecolor = this.$uiConfig.pricecolor;
+			this.nav = uni.getMenuButtonBoundingClientRect().top;
+			this.headStyle.paddingTop = this.nav + 'px';
 
 
 		},
 		mounted() {
+
 			uni.setNavigationBarTitle({
 				title: this.pageTitle,
 			});
 		},
-		onLoad(options) {
+		onLoad(options) {
+			_self = this;
 			if (options && options.UserId) {
 				this.msg.UserId = options.UserId;
 				this.getTime()
-				
 			}
 		},
-		methods: {
-			getTime() {
-				var myDate = new Date();
-				this.msg.EndTime = myDate.getFullYear() + '-' + (myDate.getMonth()+1) + '-' + myDate.getDate()
-				var startDate = new Date(myDate.setDate(myDate.getDate() - 7))//计算当前时间的前7天的时间
-				this.msg.StartTime = startDate.getFullYear() + '-' + (startDate.getMonth()+1) + '-' + startDate.getDate()
-				this.init()
+		methods: {
+			 // 获取传参
+			selectDate(data) {
+				if(data.dayNum>30){
+					uni.showToast({
+					    title: '时间不能超过30天',
+						icon:'none',
+					    duration: 2000
+					});
+				}else{
+					this.msg.StartTime = data.startDate
+					this.msg.EndTime = data.endDate
+					this.init()
+				}
 			},
-			init() {
-
-				this.request2({
-						url: '/api/AppletUser/GetSellMoneyStatistics',
-						data: this.msg
-					},
-					res => {
-						if (res.resultCode == 1) {
-							
-						}
-					}
-				);
+			getTime() {
+				var myDate = new Date();
+				this.msg.EndTime = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate()
+				var startDate = new Date(myDate.setDate(myDate.getDate() - 7)) //计算当前时间的前7天的时间
+				this.msg.StartTime = startDate.getFullYear() + '-' + (startDate.getMonth() + 1) + '-' + startDate.getDate()
+				this.cWidth=uni.upx2px(750);
+				this.cHeight=uni.upx2px(500);
+				this.init();
+			},
+			init() {
+			
+				this.request2({
+						url: '/api/AppletUser/GetSellMoneyStatistics',
+						data: this.msg
+					},
+					res => {
+						if (res.resultCode == 1) {
+							this.data = res.data
+							// this.data.DayList = [{Day: "2020-04-10",MySale: 80,ReSale: 70},
+							// 	{Day: "2020-04-11",MySale: 100,ReSale: 40},
+							// 	{Day: "2020-04-12",MySale: 20,ReSale: 30},
+							// 	{Day: "2020-04-13",MySale: 30,ReSale: 120},
+							// 	{Day: "2020-04-14",MySale: 58,ReSale: 67},
+							// 	{Day: "2020-04-15",MySale: 90,ReSale: 100},
+							// 	{Day: "2020-04-16",MySale: 23,ReSale: 400},
+							// ]
+							
+							let Column = {
+								categories: [],
+								series: []
+							};
+							let MySale={
+								name:'自己销售额',
+								data:[],
+								color: "#7E85EE",
+								index: 0,
+								legendShape: "rect",
+								pointShape: "circle",
+								show: true,
+								type: "group",
+						
+							};
+							let ReSale={
+								name:'线下销售额',
+								data:[],
+								color: "#2fc25b",
+								index: 0,
+								legendShape: "rect",
+								pointShape: "circle",
+								show: true,
+								type: "meter"
+							};
+							this.timeMySale=0;
+							this.timeReSale=0;
+							this.data.DayList.map((x)=>{
+								this.timeMySale = this.timeMySale+x.MySale;//计算时间段的自己销售额
+								this.timeReSale = this.timeReSale+x.ReSale;//时间段的下线的销售额
+								let day = x.Day.split(' ')[0].split('-')[1]+'-'+x.Day.split(' ')[0].split('-')[2]
+								Column.categories.push(day)
+								MySale.data.push(x.MySale)
+								ReSale.data.push(x.ReSale)
+							})
+							Column.series = [MySale,ReSale]
+							console.log(Column)
+							_self.showColumn("canvasColumn",Column);
+						}
+					}
+				);
+			},
+		
+			showColumn(canvasId,chartData){
+				canvaColumn=new uCharts({	
+					$this:_self,
+					canvasId: canvasId,
+					type: 'column',
+					fontSize:11,
+					padding:[5,15,15,15],
+					legend:{
+						show:true,
+						position:'top',
+						float:'center',
+						itemGap:30,
+						padding:5,
+						margin:5,
+						//backgroundColor:'rgba(41,198,90,0.2)',
+						//borderColor :'rgba(41,198,90,0.5)',
+						borderWidth :1
+					},
+					dataLabel:true,
+					dataPointShape:true,
+					background:'#FFFFFF',
+					pixelRatio:_self.pixelRatio,
+					categories: chartData.categories,
+					series: chartData.series,
+					animation: true,
+					enableScroll: true,
+					xAxis: {
+						disableGrid:false,
+						type:'grid',
+						gridType:'dash',
+						itemCount:4,
+						scrollShow:true,
+						scrollAlign:'left',
+					},
+					yAxis: {
+						//disabled:true
+						gridType:'dash',
+						splitNumber:4,
+						min:10,
+						max:180,
+						format:(val)=>{return val.toFixed(0)+'元'}//如不写此方法，Y轴刻度默认保留两位小数
+					},
+					width: _self.cWidth*_self.pixelRatio,
+					height: _self.cHeight*_self.pixelRatio,
+					extra: {
+						column: {
+							type:'group',
+							width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
+						}
+					},
+				});
+				
+			},
+			touchColumn(e){
+				canvaColumn.scrollStart(e);
+			},
+			moveColumn(e) {
+				canvaColumn.scroll(e);
+			},
+			touchEndColumn(e) {
+				canvaColumn.scrollEnd(e);
+				canvaColumn.touchLegend(e, {
+					animation:true,
+				});
+				canvaColumn.showToolTip(e, {
+					format: function (item, category) {
+						return category + ' ' + item.name + ':' + item.data+'元' 
+					}
+				});
 			},
-		},	
-	};
+			
+			redirectPrev() {
+
+				uni.navigateBack({
+					delta: 1,
+				});
+
+			},
+			scrollHandler(e) {
+				this.scrollTop = e.detail.scrollTop;
+			},
+			scrollTopHandler() {
+				this.scrollTop = 0;
+			},
+			btnStart(val){
+				console.log(val)
+			}
+		}
+	}
 </script>
+
 <style>
 	.salesvolume {
+		background: #FFF;
+		font-family: aa;
+	}
+
+	image {
+		will-change: transform
+	}
+	.charts {
+		width: 750upx;
+		height: 500upx;
+		background-color: #FFFFFF;
+	}
+
+	.salesvolume .shareadd {
 		width: 100%;
 		height: 100vh;
-		background: #FFF;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding-top: 50px;
+	}
+
+	.salesvolume .shareadd .shareadd_b {
+		width: 60%;
+		height: 45px;
+		border-radius: 22.5px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #fff;
+		margin-top: 20px;
+	}
+
+	.salesvolume .sharebox_top {
+		width: 100%;
+		height: 474rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		background-image: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/salesvolume-top.png);
+	}
+
+	.salesvolume .sharebox_top .sharebox_top_nav {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		height: 44px;
+		padding: 0 10px;
+	}
+
+	.salesvolume .headStatus {
+		overflow: hidden;
+		position: relative;
+		width: 140vw;
+		padding-right: 40vw;
+		padding-bottom: 10px;
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		display: flex;
+		background: #FFFFFF;
+	}
+
+	.salesvolume .headStatus .arrow {
+		height: 24px;
+		margin: 5px 10px;
+		width: 24px;
+	}
+
+	.salesvolume .headStatus .title {
+		font-size: 16px;
+		color: #000;
+		flex: 1;
+		width: 1px;
+		margin-left: 10px;
+		line-height: 34px;
 	}
 </style>