diyici

components/orderItem/index.scss

@@ -0,0 +1,40 @@
+.orderItem {
+	font-family: PingFang SC-Medium, PingFang SC;
+	width: 691rpx;
+	min-height: 183rpx;
+	background: #ffffff;
+	border-radius: 10rpx 10rpx 10rpx 10rpx;
+	opacity: 1;
+	margin: 0 auto;
+	margin-top: 28rpx;
+	box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.08);
+	box-sizing: border-box;
+	padding: 30rpx 24rpx;
+	.orderItem_header {
+		border-bottom: 1rpx solid #f1f2f7;
+		padding-bottom: 19rpx;
+		margin-bottom: 19rpx;
+		.orderItem_header_number {
+			font-size: 22rpx;
+			color: #666666;
+		}
+		.orderItem_header_type {
+			color: #36658d;
+			font-size: 28rpx;
+		}
+	}
+	.orderItem_bottom {
+		.orderItem_bottom_time {
+			color: #666666;
+			font-size: 24rpx;
+		}
+		.orderItem_bottom_price {
+			font-size: 38rpx;
+			color: #ea0000;
+		}
+		.orderItem_bottom_name {
+			color: #000000;
+			font-size: 30rpx;
+		}
+	}
+} 

components/orderItem/orderItem.vue

@@ -0,0 +1,70 @@
+<template>
+	<view v-if="orderData" @click="goDetails" :class="orderData.orderStatus==2? 'orderItem charging ': 'orderItem '">
+		<view class="orderItem_header flex">
+			<view class="orderItem_header_number  oneflex">{{orderData.id}}</view>
+			<view class="orderItem_header_type"> {{ orderData.orderStatus|orderStatus}} </view>
+		</view>
+		<view class="orderItem_bottom">
+			<view class=" flex ac">
+				<view class=" orderItem_bottom_name oneflex">{{orderData.stationName}}</view>
+				<view class="orderItem_bottom_price"> ￥{{ orderData.orderStatus==4? tool.getnum(orderData.payMoneyAcc,3)  : tool.getnum(orderData.payMoneyPre,3) }} </view>
+			</view>
+			<view class="orderItem_bottom_time">{{orderData.startTime}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "orderItem",
+		props:{
+			orderData:{
+				type:Object,
+				default:()=>null
+			},
+			listIndex:{
+				type:Number,
+				default:0
+			}
+		},
+		data() {
+			return {
+
+			};
+		},
+		filters:{
+			orderStatus(e){ 
+				switch(Number(e)){
+					case 1:
+					return '启动中'
+					case 2:
+					return '充电中'
+					case 3:
+					return '停止中'
+					case 4:
+					return '已结束'
+					default:
+					return '数据错误'
+				}
+			}
+		},
+		methods:{
+			goDetails(){
+				if(this.orderData.orderStatus==2 || this.orderData.orderStatus==3){
+					uni.navigateTo({
+						url:`/Order/pages/charging/index?id=${this.orderData.id}`
+					})
+				}else{
+					uni.navigateTo({
+						url:`/Order/pages/index/index?id=${this.orderData.id}`
+					})
+				}
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import 'index.scss';
+</style>