update

mobile-code/package.json

@@ -30,6 +30,7 @@
     "@dcloudio/uni-mp-baidu": "0.0.853",
     "@dcloudio/uni-mp-toutiao": "0.0.347",
     "@dcloudio/uni-mp-weixin": "0.0.969",
+    "echarts": "4.2.1",
     "flyio": "^0.6.2",
     "js-base64": "^2.5.1",
     "jweixin-module": "^1.4.1",

mobile-code/src/admin/home/components/echart-circle.vue

@@ -0,0 +1,102 @@
+<template>
+	<div :class="className" :style="{height:height,width:width}"></div>
+</template>
+<script>
+import echarts from 'echarts'
+// require('echarts/theme/macarons') // echarts theme
+
+export default {
+	props: {
+		className: {
+			type: String,
+			default: 'chart'
+		},
+		width: {
+			type: String,
+			default: '100%'
+		},
+		height: {
+			type: String,
+			default: '240px'
+		},
+		chartData: {
+			type: Object
+		}
+		// autoResize: {
+		//     type: Boolean,
+		//     default: true
+		// }
+	},
+	data() {
+		return {
+			chart: null
+		}
+	},
+	watch: {
+		chartData: {
+			deep: true,
+			handler: function(val) {
+				if (!this.chart) {
+					return false
+				}
+				let chartData = JSON.parse(JSON.stringify(val))
+				this.setOptions(chartData)
+			}
+		}
+	},
+	mounted() {
+		// this.initChart()
+	},
+	methods: {
+		initChart() {
+			let data = {
+				date: ['6.15', '6.16', '6.17', '6.18', '6.19', '6.20', '6.21'],
+				// accessNum: [10, 332, 301, 50, 390, 80, 320],
+				guestNum: [10, 332, 301, 50, 390, 80, 320]
+			}
+
+			// this.chart = echarts.init(this.$el, 'macarons')
+			this.chart = echarts.init(this.$el)
+			let chartData = JSON.parse(JSON.stringify(this.chartData))
+			// this.setOptions(chartData)
+			this.setOptions(data)
+		},
+		setOptions(chartData) {
+			this.chart.setOption({
+				// title: {
+				// 	text: '某站点用户访问来源',
+				// 	subtext: '纯属虚构',
+				// 	left: 'center'
+				// },
+				tooltip: {
+					trigger: 'item',
+					formatter: '{a} <br/>{b} : {c} ({d}%)'
+				},
+				legend: {
+					orient: 'vertical',
+					left: 'left',
+					data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+				},
+				series: [
+					{
+						name: '访问来源',
+						type: 'pie',
+						radius: '55%',
+						center: ['50%', '60%'],
+						data: [{ value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' }],
+						emphasis: {
+							itemStyle: {
+								shadowBlur: 10,
+								shadowOffsetX: 0,
+								shadowColor: 'rgba(0, 0, 0, 0.5)'
+							}
+						}
+					}
+				]
+			})
+		}
+	},
+
+	filters: {}
+}
+</script>

mobile-code/src/admin/home/components/echart-trend.vue

@@ -0,0 +1,255 @@
+<template>
+    <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+<script>
+import echarts from 'echarts'
+// require('echarts/theme/macarons') // echarts theme
+
+export default {
+	props: {
+		className: {
+			type: String,
+			default: 'chart'
+		},
+		width: {
+			type: String,
+			default: '100%'
+		},
+		height: {
+			type: String,
+			default: '240px'
+		},
+		chartData: {
+			type: Object
+		}
+		// autoResize: {
+		//     type: Boolean,
+		//     default: true
+		// }
+	},
+	data() {
+		return {
+			chart: null
+		}
+	},
+	watch: {
+		chartData: {
+			deep: true,
+			handler: function(val) {
+				if (!this.chart) {
+					return false
+				}
+				let chartData = JSON.parse(JSON.stringify(val))
+				this.setOptions(chartData)
+			}
+		}
+	},
+	mounted() {
+		// this.initChart()
+	},
+	methods: {
+		initChart() {
+			let data = {
+				date: ['6.15', '6.16', '6.17', '6.18', '6.19', '6.20', '6.21'],
+				// accessNum: [10, 332, 301, 50, 390, 80, 320],
+				guestNum: [10, 332, 301, 50, 390, 80, 320]
+			}
+
+			// this.chart = echarts.init(this.$el, 'macarons')
+			this.chart = echarts.init(this.$el)
+			let chartData = JSON.parse(JSON.stringify(this.chartData))
+			// this.setOptions(chartData)
+			this.setOptions(data)
+		},
+		setOptions(chartData) {
+			this.chart.setOption({
+				// title: {
+				//     text: '堆叠区域图'
+				// },
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'cross',
+						label: {
+							backgroundColor: '#6a7985'
+						}
+					}
+				},
+				legend: {
+					x: 'right',
+					y: 'top',
+					data: ['获客数'],
+					textStyle: {
+						color: '#999'
+					}
+				},
+				grid: {
+					left: '3%',
+					right: '3%',
+					top: '30',
+					bottom: '0',
+					containLabel: true
+				},
+				xAxis: [
+					{
+						type: 'category',
+						boundaryGap: false,
+						axisLabel: {
+							show: true,
+							textStyle: {
+								color: 'rgba(153,153,153,1)' // 这里用参数代替了
+							}
+						},
+						axisLine: {
+							lineStyle: {
+								color: '#999' // 这里用参数代替了
+							}
+						},
+						axisTick: {
+							show: false
+						},
+						// 网格线
+						splitLine: {
+							show: true
+						},
+						data: chartData.date
+					}
+				],
+				yAxis: [
+					{
+						name: '金额(¥)',
+						type: 'value',
+						axisLabel: {
+							show: true,
+							textStyle: {
+								color: '#999' // 这里用参数代替了
+							}
+						},
+						axisLine: {
+							lineStyle: {
+								color: '#999' // 这里用参数代替了
+							}
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							show: true
+						}
+					}
+					// {
+					// 	name: '访问',
+					// 	type: 'value',
+					// 	axisLabel: {
+					// 		show: true,
+					// 		textStyle: {
+					// 			color: '#999' // 这里用参数代替了
+					// 		}
+					// 	},
+					// 	axisLine: {
+					// 		lineStyle: {
+					// 			color: '#999' // 这里用参数代替了
+					// 		}
+					// 	},
+					// 	axisTick: {
+					// 		show: false
+					// 	},
+					// 	splitLine: {
+					// 		show: false
+					// 	}
+					// }
+				],
+				series: [
+					// 获客数
+					{
+						name: '获客数',
+						type: 'line',
+						smooth: true,
+						// stack: '总量',
+						yAxisIndex: 0,
+						itemStyle: {
+							normal: {
+								color: 'rgba(51, 133, 255, 1)' // 线颜色
+							}
+						},
+						lineStyle: {
+							normal: {
+								width: 2,
+								// color: {
+								// 	type: 'linear',
+
+								// 	colorStops: [
+								// 		{
+								// 			offset: 0,
+								// 			color: '#A9F387'
+								// 		},
+								// 		{
+								// 			offset: 1,
+								// 			color: '#48D8BF'
+								// 		}
+								// 	],
+								// 	globalCoord: false
+								// },
+								shadowColor: 'rgba(0, 0, 0, 0.3)',
+								shadowBlur: 4,
+								shadowOffsetY: 4						}
+						},
+						// areaStyle: {
+						// 	normal: {
+						// 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						// 			{
+						// 				// 折线图颜色渐变
+						// 				offset: 0,
+						// 				color: 'rgba(76,116,229,0.6)'
+						// 			},
+						// 			{
+						// 				offset: 1,
+						// 				color: 'rgba(76,116,229,0.01)'
+						// 			}
+						// 		])
+						// 	}
+						// },
+						data: chartData.guestNum
+					}
+					// 访问量
+					// {
+					// 	name: '访问量',
+					// 	type: 'line',
+					// 	// stack: '总量',
+					// 	yAxisIndex: 1,
+					// 	// label: {
+					// 	//     normal: {
+					// 	//         show: true,
+					// 	//         position: 'top'
+					// 	//     }
+					// 	// },
+					// 	itemStyle: {
+					// 		normal: {
+					// 			color: 'rgba(255,105,0,1)' // 线颜色
+					// 		}
+					// 	},
+					// 	areaStyle: {
+					// 		normal: {
+					// 			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					// 				{
+					// 					// 折线图颜色渐变
+					// 					offset: 0,
+					// 					color: 'rgba(255,105,0,0.6)'
+					// 				},
+					// 				{
+					// 					offset: 1,
+					// 					color: 'rgba(255,105,0,0.01)'
+					// 				}
+					// 			])
+					// 		}
+					// 	},
+					// 	data: chartData.accessNum
+					// }
+				]
+			})
+		}
+	},
+
+	filters: {}
+}
+</script>

mobile-code/src/admin/statistics/index.vue

@@ -1,12 +1,65 @@
 <template>
-	<div class="app-content"></div>
+	<div class="app-content">
+        <!-- sel -wrap -->
+        <div class="sel-wrap"></div>
+        <!-- 收入统计 -->
+		<div class="module-com">
+			<div class="module-tit"></div>
+			<div class="module-det">
+				<echart-trend ref="echartTrend" :chartData="echartTrend"></echart-trend>
+			</div>
+		</div>
+		<!-- 访问统计 -->
+		<!-- 客户数统计 -->
+		<!-- 收入来源统计 -->
+		<div class="module-com">
+			<div class="module-tit">收入来源统计</div>
+			<div class="module-det">
+				<echart-circle ref="echartTrend" :chartData="echartTrend"></echart-circle>
+			</div>
+		</div>
+		<!-- 分类统计 -->
+		<!-- 用途统计 -->
+	</div>
 </template>
 
 <script>
+import EchartTrend from '@/admin/home/components/echart-trend'
+import EchartCircle from '@/admin/home/components/echart-circle'
 export default {
-	name: 'statistics'
+	name: 'statistics',
+	components: {
+		EchartTrend,
+		EchartCircle
+	},
+	data() {
+		return {
+			echartTrend: {}
+		}
+	},
+	onLoad() {},
+	mounted() {
+		setTimeout(() => {
+			this.init()
+		}, 1000)
+	},
+	methods: {
+		init() {
+			this.$refs.echartTrend.initChart()
+		}
+	}
 }
 </script>
 
 <style lang="scss" scoped>
+.module-com {
+	background-color: #fff;
+	padding: 20px 16px 20px 14px;
+	margin-bottom: 20px;
+	.module-tit {
+		font-size: 28px;
+		margin-bottom: 26px;
+		padding-left: 16px;
+	}
+}
 </style>

mobile-code/src/components/app-uploader.vue

@@ -221,9 +221,19 @@ export default {
 				.then(async blob => {
 					let reader = new FileReader()
 					reader.readAsDataURL(blob)
+					// return await new Promise((res, reg) => {
+					// 	reader.onloadend = function() {
+					// 		const data = reader.result
+					// 		res(data)
+					// 	}
+					// })
 					return await new Promise((res, reg) => {
 						reader.onloadend = function() {
-							const data = reader.result
+							let data = reader.result
+							let str = data.substring(0, 30)
+							if (str.indexOf(':image/jpeg;') == -1) {
+								data = data.replace('data:;', 'data:image/jpeg;')
+							}
 							res(data)
 						}
 					})