feat: #1 首页, 热门钢材, 公告文章

pages.json

@@ -1,6 +1,12 @@
 {
     "pages" : [
         //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+        {
+            "path" : "pages/home/home",
+            "style" : {
+                "navigationBarTitleText" : "钢材信息-首页"
+            }
+        },
         {
             "path" : "pages/index/index",
             "style" : {
@@ -16,7 +22,13 @@
         {
             "path" : "pages/search/search",
             "style" : {
-				"navigationBarTitleText" : "钢材信息-搜索"
+                "navigationBarTitleText" : "钢材信息-搜索"
+            }
+        },
+        {
+            "path" : "pages/details/details",
+            "style" : {
+				"navigationBarTitleText" : "钢材信息-钢材详情"
 			}
         }
     ],
@@ -39,16 +51,22 @@
         "backgroundColor" : "#fff",
         "list" : [
             {
-                "pagePath" : "pages/index/index",
-                "iconPath" : "static/search.png",
-                "selectedIconPath" : "static/search-active.png",
-                "text" : "搜索"
+                "pagePath" : "pages/home/home",
+                "iconPath" : "static/home.png",
+                "selectedIconPath" : "static/home-active.png",
+                "text" : "首页"
             },
             {
                 "pagePath" : "pages/iron/iron",
                 "iconPath" : "static/iron.png",
                 "selectedIconPath" : "static/iron-active.png",
                 "text" : "钢材"
+            },
+            {
+                "pagePath" : "pages/index/index",
+                "iconPath" : "static/search.png",
+                "selectedIconPath" : "static/search-active.png",
+                "text" : "搜索"
             }
         ]
     }

pages/details/details.vue

@@ -0,0 +1,236 @@
+<template>
+	<view>
+		<view class="chart">
+			<mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleChart" ref="echarts" />
+		</view>
+		<view class="details-card" v-for="(ironObj, i) in infoArr" :key="i">
+			<image class="card-header" :src="ironObj.photo !== ''&&ironObj.photo !== null ? ironObj.photo : 'https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/Ocean.jpg'"></image>
+			<view class="card-body">
+				<view class="card-name">
+					<view>{{ironObj.name}}</view>
+					<view class="new-price">{{ironObj.new_price}}元/吨</view>
+				</view>
+				<view class="card-intro">
+					<view>{{ironObj.intro}}</view>
+				</view>
+				<view class="card-footer">
+					{{ironObj.updatedAt}}
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import * as echarts from 'echarts'
+	import mpvueEcharts from 'mpvue-echarts'
+	export default {
+		data() {
+			return {
+				echarts,
+				xaxis: null,
+				dataArr: [],
+				chartName: '',
+				ironName: '',
+				ironObj: {},
+				infoArr: []
+			}
+		},
+		components:{
+			mpvueEcharts
+		},
+		onLoad: function (option) {
+			console.log(option.ironName);
+			this.ironName = option.ironName
+			this.getIronData()
+		},
+		computed: {
+			theSeries: function() {
+				return this.dataArr.map(v => {
+					return {
+						name: v.name,
+						data: v.data,
+						type: 'line',
+						symbol:'circle',
+						areaStyle: {
+						}
+					}
+				})
+			}
+		},
+		onShareAppMessage() {
+			return {
+				title: '钢材信息详情',
+				path: '/pages/details/details'
+			}
+		},
+		methods: {
+			chartInit(){
+				this.options = {
+					grid: {
+						left: 60
+					},
+					dataZoom: [{
+						type: 'slider'
+					}],
+					dataZoom: [{ 
+						"show": true,
+						fillerColor: 'rgba(94, 225, 198, .5)',
+						"realtime": true, "start": 30, "end": 100, "xAxisIndex": [0], "bottom": "0"},
+					],
+					color: [ '#5ee1c6','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
+					legend: {
+						show: true,
+						top: 20
+					},
+					tooltip : {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'cross',
+							animation: false,
+							label: {
+								backgroundColor: '#505765'
+							}
+						},
+						formatter: '时间: {b0} \n 名称: {a} \n 价格:{c0}元/吨'
+					},
+					xAxis: {
+						type: 'category',
+						data: this.xaxis
+					},
+					yAxis: {
+						type: 'value'
+					},
+					series: this.theSeries
+				};
+				console.log(this.$refs)
+				this.$refs.echarts.init()
+			},
+			handleChart(canvas, width, height) {
+				const chart = echarts.init(canvas, null, {
+					width: width,
+					height: height
+				})
+				canvas.setChart(chart)	
+				chart.setOption(this.options)
+				return chart
+			},
+			getIronData() {
+				uni.request({
+					url: `${this.$store.state.rootUrl}/weapp/iron?name=${this.ironName}`,
+					success: (res) => {
+						if(res.data.code === 500) {
+							uni.showToast({
+								title: res.data.data,
+								duration: 2000,
+								icon: 'none'
+							});
+						} else {
+							let result = res.data.data
+							this.dataArr = []
+							this.infoArr = result.map(v => {
+								let obj = {
+									name: '',
+									data: []
+								}
+								obj.name = v.name
+								v.old_price.map(d => {
+									obj.data.push(d.price)
+								})
+								this.dataArr.push(obj)
+								return v
+							})
+							let x = result[0].old_price.map(v => {
+								let date = new Date(v.createdAt)
+								let myDate = (date.getMonth() + 1) + '-' + date.getDate() 
+								return myDate
+							})
+							this.chartName = result[0].name
+							this.xaxis = x
+
+							this.chartInit()
+						}
+						
+					},
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+.chart {
+	height: 500upx;
+	display: flex;
+	flex: 1;
+}
+.details-card {
+      margin: 62upx 89upx;
+      border-radius: 1px;
+      box-shadow: 0 1px 2px rgba(0,0,0,.3);
+      background: #fff;
+      color: #333;
+    }
+    .card-header {
+		background-size: cover;
+		background-position: 50%;
+		height:368upx;
+		width:100%;
+		color: #f2f2f2;
+    }
+    .card-body {
+      /* padding: 35upx 90upx; */
+      line-height: 1.6;
+    }
+	.card-body .card-name {
+		border-bottom: 1upx solid #eee;
+		padding:15upx 40upx;
+		display: flex;
+		justify-content: space-between;
+	}
+	.card-body .card-intro {
+		padding:15upx 40upx;
+		min-height: 120upx;
+	}
+	.card-body .card-footer {
+		padding:15upx 40upx;
+		text-align: right;
+		font-size: 24upx;
+		color: #999;
+	}
+	.details {
+		display: flex;
+		justify-content: center;
+		border:1upx solid #dfdfdf;
+		border-radius:20upx;
+		padding:10upx;
+		margin:0 20upx;
+		margin-bottom: 20upx;
+	}
+	.details-infos .iron-photo {
+		width: 300upx;
+		height: 300upx;
+		margin-left: 15upx;
+	}
+	.details .details-text {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		line-height: 2;
+	}
+	.details-info {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+	}
+	.new-price {
+		color: #007AFF;
+	}
+	.details-title {
+		padding:8rpx 0;
+		text-align:center;
+		background:#dfdfdf;
+		color:#323232;
+		margin:20rpx 0;
+	}
+</style>