方案相关静态页画写

pages.json

@@ -17,6 +17,13 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/plan/details",
+			"style": {
+				"navigationBarTitleText": "案例",
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/consult/index",
 			"style": {

pages/plan/data.js

@@ -0,0 +1,35 @@
+// 案例数据集
+export const data = {
+	'智能仓储':[
+		{
+			id:1,
+			parent:'智能仓储',
+			img:'../../static/imgs/al_zncc_img1.png',
+			name:'智能化仓储- 电子通讯企业',
+			details:{
+				img:'../../static/imgs/al_zncc_img2.png',
+				title:'智能化仓储管理',
+				client:'电子通讯企业',
+				intro:'客户仓储物流部的管理系统使用ERP记账加手工记账两种方式进行，需要有专人执行账务工作，仓库一线人员作业模式为纯手工记录进出，经常出错;不同的物料需要专人管理，对人员经验要求较高;仓库现场物料管理不严格导致经常需要在库内翻找物料大大降低了拣货效率;库存报表依靠手工经常出现账实不一致。',
+				effect:'引入移动终端，实时记录每一次物料进出'
+			}
+		},
+		{
+			id:2,
+			parent:'智能仓储',
+			img:'../../static/imgs/al_zncc_img1.png',
+			name:'智能化仓储- 电子通讯企业',
+			details:{
+				img:'../../static/imgs/al_zncc_img2.png',
+				title:'智能化仓储管理',
+				client:'电子通讯企业',
+				intro:'客户仓储物流部的管理系统使用ERP记账加手工记账两种方式进行，需要有专人执行账务工作，仓库一线人员作业模式为纯手工记录进出，经常出错;不同的物料需要专人管理，对人员经验要求较高;仓库现场物料管理不严格导致经常需要在库内翻找物料大大降低了拣货效率;库存报表依靠手工经常出现账实不一致。',
+				effect:'引入移动终端，实时记录每一次物料进出'
+			}
+		}
+	]
+}
+
+export default {
+	data
+}

pages/plan/details.vue

@@ -0,0 +1,102 @@
+<template>
+	<view class="content">
+		<block v-if="detail">
+			<image class="top" :src="detail.img" mode="widthFix"></image>
+			<view class="box">
+				<view class="title">{{detail.title}}</view>
+				<view class="client">客户:<span>{{detail.client}}</span></view>
+				<view class="intro">{{detail.intro}}</view>
+				<view class="title t2">效果</view>
+				<view class="intro">{{detail.effect}}</view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	import { data } from '../plan/data.js'
+	export default {
+		data(){
+			return {
+				detail:null
+			}
+		},
+		created() {
+			uni.setNavigationBarTitle({
+				title:'案例'
+			})
+		},
+		onLoad(option) {
+			if(option.id&&option.key){
+				this.getDetails(option.id,option.key);
+			}
+		},
+		methods:{
+			getDetails(id,key){
+				let temp = data[key];
+				if(temp.length){ 
+					this.detail = temp.find(t=>t.id == id).details || null;
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	.content{
+		.top{
+			width: 100%;
+		}
+		
+		.box{
+			width: 100%;
+			padding: 0 30rpx 30rpx;
+			box-sizing: border-box;
+			
+			.title{
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #111111;
+				line-height: 45rpx;
+				margin-top: 36rpx;
+				&.t2{
+					margin-top: 48rpx;
+				}
+			}
+			
+			.client{
+				font-family: PingFangSC, PingFang SC;
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #333333;
+				line-height: 45rpx;
+				margin-top: 21rpx;
+				span{
+					font-size: 30rpx;
+					line-height: 42rpx;
+					color: #134F99;
+				}
+			}
+			
+			.intro{
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #666666;
+				line-height: 48rpx;
+				letter-spacing: 2rpx;
+				margin-top: 21rpx;
+			}
+			
+			.effect{
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #666666;
+				line-height: 40rpx;
+				margin-top: 6rpx;
+			}
+		}
+	}
+</style>

pages/plan/index.vue

@@ -2,19 +2,21 @@
 	<view class="page" :style="{'height':h+'px'}">
 		<view class="left">
 			<view class="item" :class="[(index===nIndex)?'active':'',index===(nIndex+1)?'rtb':'']" 
-			v-for="(item,index) in navList" :key="index" @click="changeType(index)">
+			v-for="(item,index) in navList" :key="index" @click="changeType(index,item.name)">
 				{{item.name}}
 			</view>
 		</view>
 		<view class="right">
 			<block v-if="solutionList.length">
 				<u-list class="ulist" @scrolltolower="scrolltolower">
-					<u-list-item class="item" v-for="(item, index) in solutionList" :key="index" @click="toDetails(item)">
-						<view class="top">
-							<image :src="item.img"></image>
-						</view>
-						<view class="text">
-							{{item.name}}
+					<u-list-item class="item" :class="index===0?'item1':''" v-for="(item, index) in solutionList" :key="index">
+						<view @click="toDetails(item)">
+							<view class="top">
+								<image :src="item.img"></image>
+							</view>
+							<view class="text">
+								{{item.name}}
+							</view>
 						</view>
 					</u-list-item>
 				</u-list>
@@ -25,13 +27,14 @@
 	</view>
 </template>
 
-<script>
+<script>
+	import { data } from '../plan/data.js'
 	export default {
 		data(){
 			return {
 				navList:[
 					{name:'全部'},
-					{name:'智慧楼宇'},
+					{name:'智能仓储'},
 					{name:'总部园区'},
 					{name:'产业园区'},
 					{name:'工业园区'},
@@ -59,51 +62,31 @@
 			}
 		},
 		onLoad() {
-			this.getList();
+			this.getList('全部');
 		},
 		methods:{
-			changeType(index){
+			changeType(index,key){
 				this.nIndex = index;
+				this.getList(key);
 			},
 			scrolltolower() {
 				if (this.isOver) return;
-				this.getList();
+				this.getList(this.nIndex);
 			},
-			getList(){
-				this.solutionList = [
-					{
-						img:'../../static/imgs/home_default.png',
-						name:'智慧园商业解决方案'
-					},
-					{
-						img:'../../static/imgs/home_default.png',
-						name:'智慧园商业解决方案'
-					},
-					{
-						img:'../../static/imgs/home_default.png',
-						name:'智慧园商业解决方案'
-					},
-					{
-						img:'../../static/imgs/home_default.png',
-						name:'智慧园商业解决方案'
-					},
-					{
-						img:'../../static/imgs/home_default.png',
-						name:'智慧园商业解决方案'
-					},
-					{
-						img:'../../static/imgs/home_default.png',
-						name:'智慧园商业解决方案'
-					},
-					{
-						img:'../../static/imgs/home_default.png',
-						name:'智慧园商业解决方案'
-					},
-					{
-						img:'../../static/imgs/home_default.png',
-						name:'智慧园商业解决方案'
-					}
-				];
+			getList(key){
+				if(key=='全部'){
+					this.solutionList = [];
+					for (let d in data) {
+						this.solutionList = [...this.solutionList,...data[d]];
+					};
+				}else{
+					this.solutionList = data[key] || [];
+				}
+			},
+			toDetails(item){
+				uni.navigateTo({
+					url:`/pages/plan/details?id=${item.id}&key=${item.parent}`
+				})
 			}
 		}
 	}
@@ -147,25 +130,24 @@
 		
 		.right{
 			width: calc(100% - 168rpx);
-			padding: 0 24rpx 20rpx;
+			padding: 0 30rpx 20rpx;
 			box-sizing: border-box;
 			
 			.ulist{
 				height: 100% !important;
-				::v-deep .uni-scroll-view-content>uni-view{
-					display: flex;
-					flex-direction: row;
-					justify-content: space-between;
-					flex-wrap: wrap;
-				}
 				.item{
-					width: calc(50% - 13rpx);
-					margin-top: 20rpx;
+					width: 100%;
+					margin-top: 44rpx;
 					border-radius: 12rpx 12rpx 0rpx 0rpx;
 					background: #FFFFFF;
+					
+					&.item1{
+						margin-top: 20rpx;
+					}
+					
 					.top{
 						width: 100%;
-						height: 186rpx;
+						height: 262rpx;
 						background: #D8D8D8;
 						border-radius: 12rpx 12rpx 0rpx 0rpx;
 						image{
@@ -175,17 +157,16 @@
 						}
 					}
 					.text{
-						width: 100%;
-						padding: 16rpx 10rpx;
 						box-sizing: border-box;
 						overflow: hidden;
 						text-overflow: ellipsis;
 						white-space: nowrap;
 						font-family: PingFang-SC, PingFang-SC;
 						font-weight: bold;
-						font-size: 24rpx;
+						font-size: 28rpx;
 						color: #111111;
-						line-height: 24rpx;
+						line-height: 28rpx;
+						margin-top: 20rpx;
 					}
 				}
 			}