订单

manifest.json

@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx4d2a0f297581a4d7",
+        "appid" : "wxada83a0e45d28f75",
         "setting" : {
             "urlCheck" : false,
             "minified" : true

pages.json

@@ -11,11 +11,31 @@
 			}
 		},
 		{
-			"lazyCodeLoading": "requiredComponents",
-			"path": "pages/service/index",
-			"style": {
-				"navigationStyle": "custom"
-			}
+		    "path" : "pages/index/orderUp",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "工单上报",
+		        "enablePullDownRefresh": false
+		    }
+		},
+		{
+		    "path" : "pages/index/order",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "运维工单",
+		        "enablePullDownRefresh": false
+		    }
+		},
+		{
+		    "path" : "pages/index/orderDetail",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "工单详情",
+		        "enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#9CC1FA",
+				"navigationBarTextStyle": "#FFFFFF"
+				// "navigationStyle": "custom"
+		    }
 		},
 		{
 		    "path" : "pages/public/404",
@@ -71,12 +91,7 @@
 				"selectedIconPath": "static/images/home/tab_home_on.png",
 				"text": "首页"
 			},
-			{
-				"pagePath": "pages/service/index",
-				"iconPath": "static/images/home/tab_service.png",
-				"selectedIconPath": "static/images/home/tab_service_on.png",
-				"text": "服务"
-			},
+			
 			{
 				"pagePath": "pages/ucenter/index",
 				"iconPath": "static/images/home/tab_mine.png",

pages/index/index.vue

@@ -1,18 +1,71 @@
 <template>
-	<view class="main-container" :style="{height:Authorize?'auto':'100vh'}">
-		<view class="navBarBox">
-			<!-- 状态栏占位 -->
+	<view class="main-container">
+		<!-- <view class="navBarBox">
 			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
-			<!-- 真正的导航栏内容 -->
 			<view class="navBar">
 				<view class="navBar-title">首页</view>
 			</view>
-		</view>
-		<view class="place"></view>
+		</view> -->
+		<!-- <view class="place"></view> -->
 		<image class="set-bg" src="@/static/home_bg.png"></image>
 		<view class="page-content">
 			<view class="page-home-order-container">
-				
+				<view class="page-home-order-title">
+					故障工单
+				</view>
+				<view class="page-home-order-items-container">
+					<view class="page-home-order-item" @click="gotoOrderUp">
+						<image class="page-home-order-img" src="@/static/home-order-first.png" mode=""></image>
+						<view class="page-home-order-name">
+							故障上报
+						</view>
+						<view class="page-home-order-remark">
+							设备故障单填写
+						</view>
+					</view>
+					<view class="page-home-order-item" @click="gotoOrder(0)">
+						<image class="page-home-order-img" src="@/static/home-order-second.png" mode=""></image>
+						<view class="page-home-order-name">
+							{{'待处理(' + noDeal + ')'}}
+						</view>
+						<view class="page-home-order-remark">
+							未完成的事项
+						</view>
+					</view>
+					<view class="page-home-order-item" @click="gotoOrder(2)">
+						<image class="page-home-order-img" src="@/static/home-order-third.png" mode=""></image>
+						<view class="page-home-order-name">
+							{{'已处理(' + noDeal + ')'}}
+						</view>
+						<view class="page-home-order-remark">
+							已完成可查看
+						</view>
+					</view>
+					<view class="page-home-order-item">
+						<image class="page-home-order-img" src="@/static/home-order-four.png" mode=""></image>
+						<view class="page-home-order-name">
+							处理备案
+						</view>
+						<view class="page-home-order-remark">
+							备案故障处理
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="page-home-supplier-container">
+				<view class="page-home-supplier-title">
+					换电站供应商
+				</view>
+				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
+					<view class="page-home-supplier-items" v-for="(item,index) in stationDataVoList" :key="index">
+						<view class="page-home-supplier-items-title">
+							{{item.stationName}}
+						</view>
+						<view class="page-home-supplier-number">
+							{{9}}
+						</view>
+					</view>
+				</mescroll-body>
 			</view>
 		</view>
 		
@@ -33,10 +86,6 @@
 				// longitude: 106.569374, //经度参数
 				datalist: [],
 				current: 0,
-				dotsStyles: {
-					backgroundColor: 'rgba(88, 190, 107,0.6)',
-					selectedBackgroundColor: 'rgba(88, 190, 107,0.9)',
-				},
 				params: {
 					lat: null,
 					lng: null,
@@ -74,6 +123,8 @@
 				title: null,
 				//电话号码
 				phoneNum: '18580506017',
+				noDeal: 99,
+				
 			}
 		},
 		onShow() {
@@ -96,19 +147,19 @@
 			this.screenHeight = systemInfoSync.screenHeight - 500;
 		},
 		mounted() {
-			// this.mapSelect()
+			this.mapSelect()
 		},
 		methods: {
-			//跳转服务
-			gotoService() {
-				uni.switchTab({
-					url: '/pages/service/index'
+			//跳转工单上报
+			gotoOrderUp() {
+				uni.navigateTo({
+					url: '/pages/index/orderUp',
 				})
 			},
-			//跳转个人中心
-			gotoUcenter() {
-				uni.switchTab({
-					url: '/pages/ucenter/index'
+			//跳转工单页面
+			gotoOrder(type) {
+				uni.navigateTo({
+					url: '/pages/index/order?type=' + type,
 				})
 			},
 			//重新获取定位
@@ -414,18 +465,12 @@
 	.main-container {
 		// background-color: #F2F3F5;
 		// background: linear-gradient(180deg, #FFFFFF 0%, #F2F3F5 400rpx);
-		height: 100%;
+		height: 100vh;
 		position: relative;
 		box-sizing: border-box;
 		padding-bottom: env(safe-area-inset-bottom);
 		background-color: #FFFFFF;
-		.place {
-		  height: 25%;
-		  width: 100%;
-		  background: #FFFFFF;
-		}
 		.set-bg {
-			position: fixed;
 			width: 100%;
 			height: 100%;
 			top: env(safe-area-inset-top);
@@ -434,15 +479,102 @@
 		}
 		.page-content {
 			z-index: 1;
-			position: fixed;
 			padding: 0rpx 30rpx;
 			.page-home-order-container {
-				position: fixed;
+				position: absolute;
+				top: 25%;
 				height: 430rpx;
 				background: #FFFFFF;
 				border-radius: 16rpx 16rpx 16rpx 16rpx;
 				width: calc(100% - 60rpx);
-				z-index: 10;
+				.page-home-order-title {
+					font-size: 32rpx;
+					font-family: PingFang SC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #1E2128;
+					line-height: 38rpx;
+					padding: 32rpx 26rpx;
+				}
+				.page-home-order-items-container {
+					display: flex;
+					flex-flow: wrap;
+					padding: 0 18rpx;
+					border-radius: 16rpx;
+					.page-home-order-item {
+						width: calc(50% - 44rpx);
+						height: 128rpx;
+						position: relative;
+						margin: 0 12rpx 26rpx 12rpx;
+						padding: 24rpx;
+						border: 1rpx #979797 dashed;
+						.page-home-order-img {
+							height: 100%;
+							width: 100%;
+						}
+						.page-home-order-name {
+							font-size: 28Rpx;
+							font-family: PingFang SC-Medium, PingFang SC;
+							font-weight: 500;
+							color: #1E2128;
+							line-height: 32Rpx;
+							position: absolute;
+							top: 26rpx;
+							left: 24rpx;
+						}
+						.page-home-order-remark {
+							font-size: 22rpx;
+							font-family: PingFang SC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #88909B;
+							line-height: 26rpx;
+							position: absolute;
+							top: 70rpx;
+							left: 24rpx;
+						}
+					}
+				}
+			}
+			.page-home-supplier-container {
+				position: absolute;
+				top: calc(25% + 450rpx);
+				height: auto;
+				background: #FFFFFF;
+				border-radius: 16rpx 16rpx 16rpx 16rpx;
+				width: calc(100% - 60rpx);
+				margin-top: 30rpx;
+				min-height: 200rpx;
+				padding: 0 30rpx;
+				.page-home-supplier-title {
+					font-size: 32rpx;
+					font-family: PingFang SC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #1E2128;
+					line-height: 38rpx;
+					padding: 32rpx 26rpx;
+				}
+				.page-home-supplier-items {
+					display: flex;
+					position: relative;
+					height: 100rpx;
+					border-bottom: 1rpx #EEEEEE solid;
+					.page-home-supplier-items-title {
+						font-size: 28rpx;
+						height: 100rpx;
+						font-family: PingFang SC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #1D2129;
+						line-height: 100rpx;
+					}
+					.page-home-supplier-number {
+						font-size: 28rpx;
+						font-family: PingFang SC-Regular, PingFang SC;
+						font-weight: 700;
+						color: #1D2129;
+						position: absolute;
+						line-height: 100rpx;
+						right: 10rpx;
+					}
+				}
 			}
 		}
 	}

pages/index/order.vue

@@ -0,0 +1,236 @@
+<template>
+	<view class="page-content">
+		<view class="page-search-container">
+			<u-input type="select" class="page-search-text" :select-open="show" placeholder="请选择换电站" v-model="formData.name" @click="show = true"/>
+			<u-tabs-swiper ref="tabs" :list="tabsList" :current="current" :is-scroll="false" bar-height="6" bar-width="40" active-color="#2979ff" @change="tabsChange" ></u-tabs-swiper>
+		</view>
+		<swiper class="swiper-group" :style="{height:swiperContentHeight}" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
+			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
+				<scroll-view  class="scroll-content-container" :style="{height:scrollerHeight}"  scroll-y @scrolltolower="onreachBottom" @click="gotoDetail(item)">
+					<view class="order-container" v-for="(order,i) in item.dataSet" :key="i">
+						<view class="order-title-container">
+							<view class="order-title-text">
+								充电机故障充电机故障充电机故障充电机故障
+							</view>
+							<view class="order-status">
+								待处理
+							</view>
+						</view>
+						<view class="order-time">
+							{{'2023-10-21 15:22:55'}}
+						</view>
+						<view class="order-site">
+							{{'三江换电站'}}
+						</view>
+						<view class="order-reason">
+							{{'三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站'}}
+						</view>
+					</view>
+					<view v-if="no_more" class="no-more">亲, 没有更多了
+					</view>
+					<!-- 无数据提供的页面 -->
+					<view v-if="!item.dataSet.length">
+						<view class="yoshop-notcont">
+							<text class="cont">亲，暂无订单哦</text>
+						</view>
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+		<u-select :list="siteList" v-model="show" @confirm="siteSelectCallback"> </u-select>
+	</view>
+</template>
+
+<script>
+	export default {
+	  data() {
+	    return {
+			//表头列表
+			tabsList: [{
+				name: '待处理'
+			}, {
+				name: '未处理'
+			}, {
+				name: '已办结'
+			}],
+			current: 0,
+			swiperCurrent: 0,
+			scrollerHeight: 0,
+			swiperContentHeight: 0,
+			tabs:[
+				  {name:'全部',index:0,dataSet:[]},
+				  {name:'菜单2',index:1,dataSet:[]},
+				  {name:'菜单3',index:2,dataSet:[]},
+				  {name:'菜单3',index:3,dataSet:[]}
+			],
+			formData: {
+				name: '全部站点',
+			},
+			show: false,
+			siteList: [
+				{label: '全部站点', value: ''},
+				{label: '兰州皋兰站', value: '1'},
+				{label: '河北沧州站', value: '2'}
+			]
+	    }
+	  },
+		//第一次加载
+		onLoad(e) {
+			  console.log('打印参数:',this.current)
+			  this.swiperCurrent = e.type
+			  this.current = e.type
+			  this.tabsChange(0);
+		},
+       onReady() {
+            let that = this
+            uni.getSystemInfo({
+                success: function (res) {
+                    let windowHeight= res.windowHeight;
+                    that.swiperContentHeight = (windowHeight-158) + 'px';
+                    that.scrollerHeight = (windowHeight-5) + 'px'; // 给5px的底部间距
+                }
+            });
+        },
+		//页面显示
+		onShow() {
+	
+		},
+		methods: {
+			// tabs通知swiper切换
+			tabsChange(index) {
+				console.log(index)
+				this.swiperCurrent = index;
+				let list = [
+					{name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
+					{name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
+					{name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
+					{name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
+					{name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
+					{name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
+					{name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
+					{name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
+					{name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
+					{name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
+					{name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
+					{name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
+				]
+				this.tabs[index].dataSet = this.tabs[index].dataSet.concat(list);
+			},
+			// swiper-item左右移动，通知tabs的滑块跟随移动
+			transition(e) {
+				let dx = e.detail.dx;
+				this.$refs.tabs.setDx(dx);
+			},
+			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
+			// swiper滑动结束，分别设置tabs和swiper的状态
+			animationfinish(e) {
+				let current = e.detail.current;
+				this.$refs.tabs.setFinishCurrent(current);
+				this.swiperCurrent = current;
+				this.current = current;
+			},
+			// scroll-view到底部加载更多
+			onreachBottom() {
+				this.tabsChange(this.swiperCurrent);
+			},
+			//站点选择
+			siteSelectCallback(data) {
+				uni.hideKeyboard();
+				this.formData.name = data[0].label;
+			},
+			//跳转详情页面
+			gotoDetail(item) {
+				uni.navigateTo({
+					url: '/pages/index/orderDetail?id=' + item.id
+				})
+			},
+			
+		}	
+	}
+</script>
+
+<style lang="scss" scoped>
+	.page-content {
+		height: 100vh;
+		position: relative;
+		box-sizing: border-box;
+		background: $uni-bg-color;
+		padding-bottom: env(safe-area-inset-bottom);
+		.page-search-container {
+			display: flex;
+			background: #FFFFFF;
+			.page-search-text {
+				margin-left: 30rpx;
+				width: 30%;
+			}
+		}
+		.swiper-group {
+			padding: 0 32rpx;
+			height: 100% !important;
+			.order-container {
+				height: 270rpx;
+				background: #FFFFFF;
+				border-radius: 16rpx;
+				margin-top: 10rpx;
+				padding: 32rpx;
+				.order-title-container {
+					display: flex;
+					.order-title-text {
+						height: 44rpx;
+						font-size: 32rpx;
+						font-family: PingFang SC-Medium, PingFang SC;
+						font-weight: 500;
+						color: #1D2129;
+						line-height: 44rpx;
+						width: calc(100% - 154rpx);
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+					}
+					.order-status {
+						height: 44rpx;
+						font-size: 22rpx;
+						font-family: PingFang SC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #3F8CFF;
+						line-height: 44rpx;
+						width: 80rpx;
+						text-align: center;
+						background: #e8F1FF;
+						border-radius: 16rpx;
+						margin-left: 10rpx;
+					}
+				}
+				.order-time {
+					font-size: 22rpx;
+					font-family: PingFang SC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #86909C;
+					line-height: 40rpx;
+					margin-top: 16rpx;
+				}
+				.order-site {
+					font-size: 28rpx;
+					font-family: PingFang SC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #4E5969;
+					line-height: 40rpx;
+					margin-top: 16rpx;
+				}
+				.order-reason {
+					font-size: 28rpx;
+					font-family: PingFang SC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #4E5969;
+					line-height: 40rpx;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					margin-top: 16rpx;
+				}
+			}
+		}
+		
+	}
+    
+</style>

pages/index/orderDetail.vue

@@ -0,0 +1,386 @@
+<template>
+	<view class="order-detail-container">
+		<view class="detail-top-container">
+			<view :class="currIndex == 1 ? 'detail-top-left-active' : 'detail-top-left'" @click="tabHandle(1)">
+				故障信息
+			</view>
+			<view :class="currIndex == 2 ? 'detail-top-left-active' : 'detail-top-left'" @click="tabHandle(2)">
+				处理过程
+			</view>
+		</view>
+		<view class="order-detail-content" v-if="currIndex == 1">
+			<view class="order-detail-info">
+				<view class="order-detail-title">
+					<view class="order-detail-level">
+						{{level == 1 ? '一级故障' : (level == 2 ? '二级故障' : '三级故障')}}
+					</view>
+					<view class="order-detail-name">
+						故障名称故障名称故障名称故障名称故障名称故障名称故障名称故障名称故障名称故障名称故障名称故障名称故障名称故障名称故障名称故障名称故障名称故障名称
+					</view>
+				</view>
+				<view class="order-detail-time">
+					{{'发生时间: ' + '2023-10-22 12:21:21'}}
+				</view>
+				<view class="order-detail-site">
+					<view class="order-detail-status">
+						分析中...
+					</view>
+					<view class="order-detail-site-text">
+						三江换电站
+					</view>
+				</view>
+			</view>
+			<view class="order-detail-fault-describe">
+				<view class="fault-describe-container">
+					<view class="fault-describe-title">
+						问题记录
+					</view>
+					<view class="fault-describe-remark">
+						点击图片可查看保存大图
+					</view>
+				</view>
+				<view class="order-detail-swiper">
+					<u-swiper :list="imgList" @click="imageHandle"></u-swiper>
+				</view>
+				<view class="order-problem-container">
+					<view class="problem-title">
+						<view class="problem-icon">?</view>
+						<view class="problem-title-text">
+							问题记录
+						</view>
+					</view>
+					<view class="problem-text">
+						充电机无法充电，由于温度过高当前已断电请及时处理情况很严重，目前无法自自行解决。
+					</view>
+				</view>
+			</view>
+			<view class="order-detail-basic">
+				<view class="order-detail-basic-title">
+					<view class="basic-title-text">
+						详细信息
+					</view>
+					<view class="basic-title-show" v-if="isShowMore" @click="showHandle">
+						收起
+						<u-icon name="arrow-up"></u-icon>
+					</view>
+					<view class="basic-title-show" v-if="!isShowMore" @click="showHandle">
+						展开
+						<u-icon name="arrow-down"></u-icon>
+					</view>
+				</view>
+				<view class="basic-items" v-if="isShowMore">
+					<view class="basic-item">
+						<view class="basic-item-title">
+							设备名称
+						</view>
+						<view class="basic-item-text">
+							PLC
+						</view>
+					</view>
+					<view class="basic-item">
+						<view class="basic-item-title">
+							设备编号
+						</view>
+						<view class="basic-item-text">
+							PLC
+						</view>
+					</view>
+					<view class="basic-item">
+						<view class="basic-item-title">
+							上报人
+						</view>
+						<view class="basic-item-text">
+							PLC
+						</view>
+					</view>
+					<view class="basic-item">
+						<view class="basic-item-title">
+							联系方式
+						</view>
+						<view class="basic-item-text">
+							PLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLCPLC
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="">
+				
+			</view>
+		</view>
+		<view class="order-detail-content" v-if="currIndex == 2">
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		data() {
+			return {
+				//当前选中下标
+				currIndex: 1,
+				level: 1,
+				//是否收起详细信息
+				isShowMore: true,
+				imgList: [
+					{
+						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
+					},
+					{
+						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
+						title: '身无彩凤双飞翼，心有灵犀一点通'
+					},
+					{
+						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
+						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
+					}
+				]
+			} 
+		},
+		methods: {
+			//tab选择
+			tabHandle(type) {
+				this.currIndex = type;
+			},
+			//点击图片
+			imageHandle(data) {
+				let list = [];
+				this.imgList.forEach(item => {
+					list.push(item.image)
+				})
+				uni.previewImage({
+					urls: list,
+					current: this.imgList[data].image
+				})
+			},
+			//是否收起/展开详细信息
+			showHandle() {
+				this.isShowMore = !this.isShowMore
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.order-detail-container {
+		background: linear-gradient(180deg, #9CC1FA 2%, #78B1FE 15%, #E5EEFD 76%, #F7F8FA 100%);
+		height: 100vh;
+		position: relative;
+		box-sizing: border-box;
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+		padding-top: 15rpx;
+		.detail-top-container {
+			display: flex;
+			margin: 0rpx 30rpx;
+			.detail-top-left-active {
+				height: 90rpx;
+				background: #FFFFFF;
+				line-height: 90rpx;
+				width: 50%;
+				text-align: center;
+				font-size: 36rpx;
+				font-family: PingFang SC-Medium, PingFang SC;
+				font-weight: 500;
+				color: #1D2129;
+				border-radius: 16rpx 16rpx 0rpx 0rpx;
+			}
+			.detail-top-left {
+				height: 72rpx;
+				background: #E8F3FF;
+				line-height: 72rpx;
+				width: 50%;
+				text-align: center;
+				font-size: 30rpx;
+				font-family: PingFang SC-Medium, PingFang SC;
+				font-weight: 400;
+				color: #1D2129;
+				border-radius: 16rpx 16rpx 0rpx 0rpx;
+				margin-top: 18rpx;
+			}
+		}
+		.order-detail-content {
+			.order-detail-info {
+				background: #FFFFFF;
+				padding: 30rpx;
+				margin: 0 30rpx;
+				border-radius: 0rpx 0rpx 16rpx 16rpx;
+				min-height: 220rpx;
+				.order-detail-title {
+					display: flex;
+					.order-detail-level {
+						font-size: 20rpx;
+						font-family: PingFang SC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #F53F3F;
+						line-height: 36rpx;
+						width: 96rpx;
+						height: 36rpx;
+						background: #FFECE8;
+						border-radius: 4rpx 4rpx 4rpx 4rpx;
+						text-align: center;
+					}
+					.order-detail-name {
+						font-size: 30rpx;
+						font-family: PingFang SC-Medium, PingFang SC;
+						font-weight: 500;
+						color: #1D2129;
+						line-height: 36rpx;
+						margin-left: 24rpx;
+						width: calc(100% - 120rpx);
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+					}
+				}
+				.order-detail-time {
+					font-size: 24rpx;
+					font-family: PingFang SC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #86909C;
+					line-height: 28rpx;
+					margin-top: 20rpx;
+				}
+				.order-detail-site {
+					display: flex;
+					position: relative;
+					margin-top: 20rpx;
+					.order-detail-status {
+						font-size: 30rpx;
+						font-family: PingFang SC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #3F8CFF;
+						line-height: 36rpx;
+					}
+					.order-detail-site-text {
+						font-size: 26rpx;
+						font-family: PingFang SC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #86909C;
+						line-height: 36rpx;
+						position: absolute;
+						right: 0;
+					}
+				}
+			}
+			.order-detail-fault-describe {
+				background: #FFFFFF;
+				border-radius: 16rpx;
+				padding: 30rpx;
+				margin: 30rpx;
+				.fault-describe-container {
+					display: flex;
+					.fault-describe-title {
+						font-size: 30rpx;
+						font-family: PingFang SC-Medium, PingFang SC;
+						font-weight: 500;
+						color: #1E2128;
+						line-height: 36px;
+						text-align: left;
+						flex: 1;
+					}
+					.fault-describe-remark {
+						font-size: 24rpx;
+						font-family: PingFang SC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #C9CDD4;
+						line-height: 36px;
+						flex: 1;
+						text-align: right;
+					}
+				}
+				.order-detail-swiper {
+					margin-top: 30rpx;
+				}
+				.order-problem-container {
+					margin-top: 30rpx;
+					.problem-title {
+						display: flex;
+						.problem-icon {
+							height: 36rpx;
+							width: 36rpx;
+							border: 1rpx solid #C9CDD4;
+							border-radius: 50%;
+							margin-right: 10rpx;
+							font-size: 30rpx;
+							font-family: PingFang SC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #C9CDD4;
+							line-height: 36rpx;
+							text-align: center;
+						}
+						.problem-title-text {
+							font-size: 30rpx;
+							font-family: PingFang SC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #C9CDD4;
+							line-height: 36rpx;
+						}
+					}
+					.problem-text {
+						font-size: 28rpx;
+						font-family: PingFang SC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #1D2129;
+						line-height: 40rpx;
+						margin-top: 20rpx;
+					}
+				}
+			}
+			.order-detail-basic {
+				background: #FFFFFF;
+				border-radius: 16rpx;
+				padding: 30rpx;
+				margin: 0rpx 30rpx 30rpx;
+				.order-detail-basic-title {
+					display: flex;
+					.basic-title-text {
+						font-size: 30rpx;
+						font-family: PingFang SC-Medium, PingFang SC;
+						font-weight: 500;
+						color: #1E2128;
+						line-height: 36rpx;
+						flex: 1;
+					}
+					.basic-title-show {
+						font-size: 26rpx;
+						font-family: PingFang SC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #C9CDD4;
+						line-height: 36rpx;
+						flex: 1;
+						text-align: right;
+						margin-right: 5rpx;
+					}
+				}
+				.basic-items {
+					margin-top: 30rpx;
+					.basic-item {
+						display: flex;
+						height: 100rpx;
+						.basic-item-title {
+							font-size: 30rpx;
+							font-family: PingFang SC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #86909C;
+							line-height: 100rpx;
+							width: 200rpx;
+						}
+						.basic-item-text {
+							font-size: 30rpx;
+							font-family: PingFang SC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #1D2129;
+							line-height: 100rpx;
+							flex: 1;
+							text-align: right;
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/index/orderUp.vue

@@ -0,0 +1,190 @@
+<template>
+	<view class="order-up-container">
+		<view class="order-tips">
+			<span class="order-imp">*</span>
+			工单信息填写
+		</view>
+		<u-form :model="form" ref="uform" :rules="rules" label-align='left' label-width="150">
+			<u-form-item label="换电站名" prop="name">
+				<u-input type="select" :select-open="schoolSelectShow" placeholder="请选择换电站" v-model="form.name" @click="schoolSelectShow = true"/>
+			</u-form-item>
+			
+			<u-form-item label="设备名称" prop="intro">
+				<u-input v-model="form.intro" placeholder="请输入设备名称" />
+			</u-form-item>
+			<u-form-item label="设备编号" prop="intro">
+				<u-input v-model="form.intro" placeholder="请输入设备编号" />
+			</u-form-item>
+			<u-form-item label="故障等级" prop="intro">
+				<u-input type="select" :select-open="schoolSelectShow" placeholder="请选择故障等级" v-model="form.name" @click="schoolSelectShow = true"/>
+			</u-form-item>
+			<u-form-item label="发生时间" prop="intro">
+				<u-input type="select" :select-open="show" placeholder="请选择发生时间" v-model="form.faultTime" @click="show = true"/>
+			</u-form-item>
+			<u-form-item label="处理人员" prop="intro">
+				<u-input type="select" :select-open="show" placeholder="请选择处理人员" v-model="form.faultTime" @click="show = true"/>
+			</u-form-item>
+			<u-form-item label="问题描述" prop="intro" :label-position="'top'">
+				<u-input placeholder="请输入问题描述 不超过15个字" :maxlength="15" v-model="form.faultTime" />
+			</u-form-item>
+			<u-form-item label="问题记录" prop="intro" :label-position="'top'">
+				<u-input type="textarea" placeholder="请输入问题记录 不超过200个字" :maxlength="200" v-model="form.faultTime" />
+			</u-form-item>
+			<u-form-item label="问题记录" prop="intro" :label-position="'top'">
+				<u-upload :action="action" :file-list="fileList" ></u-upload>
+			</u-form-item>
+		</u-form>
+		<u-select :list="schoolSelectList" v-model="schoolSelectShow" @confirm="schoolSelectCallback"> </u-select>
+		<u-picker v-model="show" mode="time" :params="params" end-year="2050" :defaultTime="defaultTime" @confirm="timeHandle"></u-picker>
+		<u-button type="primary" class="commit-button" @click="submiHandle">上  报</u-button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				//表单对象
+				form: {
+					name: '',
+					intro: '',
+					faultTime: '',
+				},
+				//时间picker 默认值
+				params: {
+				    year: true,
+					month: true,
+					day: true,
+					hour: true,
+					minute: true,
+					// second: true,
+					// timestamp: true
+				},
+				//图片上传url
+				action: '',
+				//图片上传列表
+				fileList: [],
+				//时间默认时间开始值
+				defaultTime: '',
+				//是否打开时间控件
+				show: false,
+				//验证规则对象
+				rules: {
+					name: [
+						{ 
+							required: true, 
+							message: '请输入姓名', 
+							// 可以单个或者同时写两个触发验证方式 
+							trigger: ['change','blur'],
+						}
+					],
+					intro: [
+						{
+							min: 5, 
+							message: '简介不能少于5个字', 
+							trigger: 'blur',
+							required: true, 
+						}
+					]
+				},
+				schoolSelectShow: false,
+				schoolSelectList: [{
+						value: 3,
+						label: '第三中学'
+					},
+					{
+						value: 6,
+						label: '第六中学'
+					},
+					{
+						value: 9,
+						label: '第九中学'
+					}
+				],
+			}
+		},
+		computed: {
+			
+		},
+		mounted() {
+		},
+		// 获取系统默认时间
+		onLoad() {
+			var date = new Date(),
+				year = date.getFullYear(),
+				month = date.getMonth() + 1,
+				day = date.getDate(),
+				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
+				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
+				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+			month >= 1 && month <= 9 ? (month = "0" + month) : "";
+			day >= 0 && day <= 9 ? (day = "0" + day) : "";
+			var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
+			this.defaultTime = timer
+		},
+		onReady() {
+		  this.$refs.uform.setRules(this.rules);
+		},
+		methods: {
+			//选择框确定按钮
+			schoolSelectCallback(e) { // 拿到选中的索引值
+				uni.hideKeyboard();
+				this.form.name = e[0].label;
+			},
+			//时间选择
+			timeHandle(data) {
+				this.form.faultTime = data.year + '-' + data.month + '-' + data.day + ' ' + data.hour + ':' + data.minute;
+			},
+			//提交
+			submiHandle() {
+				this.$refs.uform.validate(valid => {
+					if (valid) {
+					    uni.showToast({
+					    	title: '11'
+					    })
+						return
+					} else {
+						console.log("验证失败");
+						return;
+						console.log("验证通过");
+						   this.saveForm();    // 这里调用你保存数据的接口
+						   return;
+					}
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.order-up-container {
+		height: 100vh;
+		position: relative;
+		box-sizing: border-box;
+		padding: 0 30rpx;
+		padding-bottom: calc(80rpx + env(safe-area-inset-bottom));
+		background-color: $uni-bg-color;
+		overflow-y: auto;
+		.order-tips {
+			height: 80rpx;
+			line-height: 80rpx;
+			background: #EEEEEE;
+			font-size: 28rpx;
+			font-family: PingFang SC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #BFBDBD;
+			padding-left: 30rpx;
+			margin: 0 -30rpx;
+			.order-imp {
+				color: red;
+				margin-right: 5rpx;
+			}
+		}
+		.commit-button {
+			position: fixed;
+			width: calc(100% - 60rpx);
+			bottom: calc(40rpx + env(safe-area-inset-bottom));
+			z-index: 999;
+		}
+	}
+</style>