提交订单

components/me-icon/me-icon.css

@@ -1,3 +1,6 @@
+.icon-upload-cloud-fill:before {
+  content: "\e90b";
+}
 .icon-arrow-right:before {
   content: "\e90a";
 }

pages.json

@@ -38,6 +38,13 @@
 			{
 				"navigationBarTitleText" : "工单详情"
 			}
+		},
+		{
+			"path" : "pages/order/order-submit",
+			"style" : 
+			{
+				"navigationBarTitleText" : "提交"
+			}
 		}
 	],
 	"globalStyle": {

pages/order/order-info.vue

@@ -49,7 +49,7 @@
     <view class="bottom">
       <me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="686rpx" text-color="var(--titleColor)"></me-button>
 
-      <me-button @click="" text="确认接单" width="686rpx" icon-type="icon-flashlight" margin-top="32rpx"></me-button>
+      <me-button @click="submit()" text="确认接单" width="686rpx" icon-type="icon-flashlight" margin-top="32rpx"></me-button>
     </view>
 	</view>
 </template>
@@ -59,6 +59,11 @@
 import MeIcon from "../../components/me-icon/me-icon.vue";
 import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
 import MeButton from "../../components/me-button/me-button.vue";
+import helpers from "../../utils/helpers";
+
+const submit = () => {
+  helpers.jumpToPage('order-submit')
+}
 </script>
 
 <style lang="scss" scoped>

pages/order/order-submit.vue

@@ -0,0 +1,210 @@
+<template>
+  <view class="ctr">
+    <view class="group">
+      <view class="group-name flex-l line-after">
+        <me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
+        <text class="text">沟通后请提交信息</text>
+      </view>
+      <view class="item time">
+        <view class="item-row flex-sb">
+          <view class="title flex-l">上门时间</view>
+          <uni-datetime-picker type="datetime" :hide-second="true">
+            <view class="value flex-r">2025年03月22日21:42</view>
+          </uni-datetime-picker>
+        </view>
+        <view class="desc flex-l">点击时间可更改，请确认和客户沟通的上门时间</view>
+      </view>
+    </view>
+    <view class="group">
+      <view class="group-name flex-l line-after">
+        <me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
+        <text class="text">服务完成后请提交信息</text>
+      </view>
+      <view class="item upload flex-sb">
+        <view class="left">
+          <view class="title flex-l">拍照打卡</view>
+          <view class="desc flex-l">请上传完成图片，留存记录</view>
+        </view>
+        <view class="right flex-c">
+          <view class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4" hover-start-time="0" hover-stay-time="50">
+            <me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
+            <view class="up flex-c">点击上传</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="group">
+      <view class="group-name flex-l line-after">
+        <me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
+        <text class="text">提交收款信息</text>
+      </view>
+      <view class="item input flex-sb line-after">
+        <view class="title flex-l">收款金额</view>
+        <view class="input-ctr">
+          <input type="digit" class="uni-input" placeholder-class="placeholder-class" placeholder="请输入收款金额"/>
+        </view>
+      </view>
+      <view class="item input flex-sb line-after">
+        <view class="title flex-l">优惠信息</view>
+        <view class="uni-input flex-r">30.00元抵扣50.00元</view>
+      </view>
+      <view class="item upload flex-sb">
+        <view class="left">
+          <view class="title flex-l">收款信息</view>
+          <view class="desc flex-l">请上传收款成功图片</view>
+        </view>
+        <view class="right flex-c">
+          <view class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4" hover-start-time="0" hover-stay-time="50">
+            <me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
+            <view class="up flex-c">点击上传</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <me-empty-space height="376"></me-empty-space>
+    <view class="bottom">
+      <me-button @click="submit()" text="确认上门时间" width="686rpx" icon-type="icon-arrow-right-circle" margin-top="32rpx"></me-button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+
+import MeIcon from "../../components/me-icon/me-icon.vue";
+import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
+import MeButton from "../../components/me-button/me-button.vue";
+import helpers from "../../utils/helpers";
+
+</script>
+
+<style lang="scss" scoped>
+.ctr {
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  height: 100vh;
+  .group {
+    width: 100%;
+    background: var(--containerBgColor);
+    border-radius: 16rpx;
+    padding: 20rpx;
+    box-sizing: border-box;
+    margin-top: 32rpx;
+    .group-name {
+      width: 100%;
+      height: 80rpx;
+      position: relative;
+      .text {
+        font-size: 30rpx;
+        color: #E18F00;
+        margin-left: 8rpx;
+      }
+    }
+    .item {
+      width: 100%;
+    }
+    .time {
+      .item-row {
+        width: 100%;
+        height: 100rpx;
+        .title {
+          width: 200rpx;
+          height: 100rpx;
+          font-size: 30rpx;
+          color: var(--titleColor);
+        }
+        .value {
+          width: 446rpx;
+          height: 100rpx;
+          font-size: 30rpx;
+          color: var(--titleColor);
+        }
+      }
+      .desc {
+        width: 100%;
+        min-height: 50rpx;
+        font-size: 28rpx;
+        color: var(--descriptionColor);
+        line-height: 48rpx;
+      }
+    }
+    .upload {
+      .left {
+        width: 516rpx;
+        height: 130rpx;
+        .title {
+          width: 100%;
+          height: 80rpx;
+          font-size: 30rpx;
+          color: var(--titleColor);
+        }
+        .desc {
+          width: 100%;
+          height: 50rpx;
+          font-size: 28rpx;
+          color: var(--descriptionColor);
+        }
+      }
+      .right {
+        width: 130rpx;
+        height: 130rpx;
+        .up-ctr {
+          width: 100rpx;
+          height: 100rpx;
+          background: var(--contentBgColor);
+          border-radius: 8rpx;
+          .up {
+            width: 100%;
+            height: 36rpx;
+            font-size: 20rpx;
+            color: var(--summaryColor);
+          }
+        }
+      }
+    }
+    .input {
+      width: 100%;
+      height: 100rpx;
+      position: relative;
+      .title {
+        width: 200rpx;
+        height: 100rpx;
+        font-size: 30rpx;
+        color: var(--titleColor);
+      }
+      .input-ctr {
+        width: 446rpx;
+        height: 100rpx;
+      }
+      .uni-input {
+        text-align: right;
+        width: 100%;
+        height: 100%;
+        font-size: 30rpx;
+        color: var(--titleColor);
+      }
+    }
+  }
+  .bottom {
+    width: 100%;
+    padding-top: 20rpx;
+    padding-bottom: 68rpx;
+    background: var(--pageBgColor);
+    box-sizing: border-box;
+    position: fixed;
+    bottom: 0;
+  }
+}
+</style>
+
+
+
+
+
+
+
+
+
+
+
+
+

theme/theme.scss

@@ -10,6 +10,7 @@
     --containerBgColor: #FFFFFF; // 内容块背景
     --importantColor: #E6521F; // 重要色
     --themeColor: #2772F0; // 主题色
+    --themeColor30: rgba(39, 114, 240, 0.3);//主题色30%
     --navbarBgColor: #FFFFFF; // 导航背景
 
     --defaultUserAvatar: url("/static/img/default-user.png") no-repeat center / 100%;
@@ -28,6 +29,7 @@
     --containerBgColor: #1E1E1E;
     --importantColor: #E6521F;
     --themeColor: #2772F0;
+    --themeColor30: rgba(39, 114, 240, 0.3);//主题色30%
     --navbarBgColor: #1D1D1D;
 
     --defaultUserAvatar: url("/static/img/default-user-dark.png") no-repeat center / 100%;

uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue

@@ -76,7 +76,7 @@
 		font-size: 14px;
 		// font-family: Lato-Bold, Lato;
 		font-weight: bold;
-		color: var(--contentColor90);
+		color: var(--titleColor);
 	}
 
 	.uni-calendar-item__weeks-box-item {
@@ -102,7 +102,7 @@
 		width: 8px;
 		height: 8px;
 		border-radius: 8px;
-		background-color: var(--remindColor);
+		background-color: var(--importantColor);
 
 	}
 
@@ -111,21 +111,21 @@
 	}
 
 	.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
-		color: var(--contentColor30);
+		color: var(--contentBgColor);
 	}
 
 	.uni-calendar-item--today {
 		position: absolute;
 		top: 10px;
 		right: 17%;
-		background-color: var(--remindColor);
+		background-color: var(--importantColor);
 		width:6px;
 		height: 6px;
 		border-radius: 50%;
 	}
 
 	.uni-calendar-item--extra {
-		color: var(--remindColor);
+		color: var(--importantColor);
 		opacity: 0.8;
 	}
 
@@ -160,7 +160,7 @@
 
 	.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
 	.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
-		color: var(--contentColor90)
+		color: var(--titleColor)
 	}
 
 	.uni-calendar-item--before-checked-x {

uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue

@@ -686,7 +686,7 @@
 	}
 
 	.uni-calendar__content {
-    background-color: var(--blockBgColor);
+    background-color: var(--containerBgColor);
 	}
 
 	.uni-calendar__content-mobile {
@@ -748,7 +748,7 @@
 		text-align: center;
 		width: 100px;
 		font-size: 15px;
-		color: var(--contentColor50);
+		color: var(--summaryColor);
 	}
 
 	.uni-calendar__button-text {
@@ -775,10 +775,10 @@
 	.uni-calendar__header-btn {
 		width: 9px;
 		height: 9px;
-		border-left-color: var(--contentColor50);
+		border-left-color: var(--summaryColor);
 		border-left-style: solid;
 		border-left-width: 1px;
-		border-top-color: var(--contentColor50);
+		border-top-color: var(--summaryColor);
 		border-top-style: solid;
 		border-top-width: 1px;
 	}
@@ -820,7 +820,7 @@
 
 	.uni-calendar__weeks-day-text {
 		font-size: 12px;
-		color: var(--contentColor50);
+		color: var(--summaryColor);
 	}
 
 	.uni-calendar__box {
@@ -884,7 +884,7 @@
 	}
 
 	.uni-date-changed--time-date {
-		color: var(--contentColor50);
+		color: var(--summaryColor);
 		line-height: 50px;
 		/* #ifdef MP-TOUTIAO */
 		font-size: 16px;

uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue

@@ -14,12 +14,12 @@
 		<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
 		<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
 			:style="fixNvueBug">
-			<view class="uni-title" style="color: var(--contentColor50);">
+			<view class="uni-title" style="color: var(--summaryColor);">
 				<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
 			</view>
-			<view v-if="dateShow" class="uni-datetime-picker__container-box" style="color: var(--contentColor90)">
+			<view v-if="dateShow" class="uni-datetime-picker__container-box" style="color: var(--summaryColor)">
 				<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
-					@change="bindDateChange" mask-style="background-color: var(--contentColor10)">
+					@change="bindDateChange" mask-style="background-color: var(--contentBgColor)">
 					<picker-view-column>
 						<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
 							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
@@ -40,7 +40,7 @@
 				<text class="uni-datetime-picker-sign sign-left">-</text>
 				<text class="uni-datetime-picker-sign sign-right">-</text>
 			</view>
-			<view v-if="timeShow" class="uni-datetime-picker__container-box" style="color: var(--contentColor90);">
+			<view v-if="timeShow" class="uni-datetime-picker__container-box" style="color: var(--titleColor);">
 				<picker-view class="uni-datetime-picker-view" mask-style="background-color: rgba(255, 255, 255, 0.1)" :class="[hideSecond ? 'time-hide-second' : '']"
 					:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
 					<picker-view-column>
@@ -851,7 +851,7 @@
 		/* #ifdef APP-NVUE */
 		width: 330px;
 		/* #endif */
-		background-color: var(--blockBgColor);
+		background-color: var(--containerBgColor);
 		position: fixed;
 		top: 50%;
 		left: 50%;
@@ -867,7 +867,7 @@
 	}
 
 	.uni-datetime-picker-time {
-		color: var(--contentColor50);
+		color: var(--summaryColor);
 	}
 
 	.uni-datetime-picker-column {
@@ -889,7 +889,7 @@
 		/* #ifndef APP-NVUE */
 		cursor: pointer;
 		/* #endif */
-    color: var(--contentColor90);
+    color: var(--titleColor);
 	}
 
 

utils/helpers.js

@@ -17,6 +17,8 @@ class helpers {
 			'login': '/pages/user/login',
 			//订单详情
 			'order-info': '/pages/order/order-info',
+			//提交订单
+			'order-submit': '/pages/order/order-submit',
 		}
 
 		url = paths[pathName]