自助工单

subpackage/after-sale/work-order/add-work-list.vue

 <template>
    <view class="content">
 	   <view class="list">
-	   	  <view>1</view>
-	   	  <view>1</view>
-	   	  <view>1</view>
+	   	  <view class="title">
+			  <view>
+				  <image src="/static/image/myx.png" mode=""></image>
+				  <text class="question">ETC使用问题</text>
+			  </view>
+			  <text class="status">待处理</text>
+		  </view>
+		  <view class="bot">
+			  <view class="details">
+				  <view><text>工单号码：</text><view>0921793812311110</view></view>
+				  <view><text>发生日期：</text><view>2025-03-05</view></view>
+				  <view><text>客户诉求：</text><view>这是客户诉求详情这是客户诉求详情，这是 客户诉求详情。</view></view>
+			  </view>
+			  <view class="time">2025.03.06 10:21:09</view>
+		  </view>
+
 	   </view>
    </view>
- 
+   <image class="add" src="/static/image/wode.png" mode=""></image>
 </template>
 
 <script setup lang="ts">
 	  border: 1px solid #FFFFFF;
 	  width: 90%;
 	  margin: 0 auto;
+	  font-weight: 400;
+	  .title{
+		  padding: 0 20rpx;
+		  display: flex;
+		  justify-content: space-between;
+		  align-items: center;
+		  height: 80rpx;
+		  image{
+			  width: 23rpx;
+			  height: 23rpx;
+			 
+		  }
+		  .question{
+			  font-size: 30rpx;
+			  color: #01243A;
+			  margin-left: 10rpx;
+		  }
+		  .status{
+			 font-size: 24rpx;
+			 color: #1458E5;
+			 background: #E3ECFF;
+			 border-radius: 6rpx;
+			 border: 1px solid #1458E5;
+			 padding: 4rpx 6rpx;
+		  }
+	  }
+	  .bot{
+		  padding: 0 20rpx;
+		  .details{
+			  font-size: 26rpx;
+			  padding: 10rpx 0 5rpx 0;
+			  view{
+				  display: flex;
+				  margin-bottom: 5rpx;
+				  text{
+					  color: #999999;
+					  width: 21%;
+				  }
+				  view{
+					  color: #002025;
+					  width: 79%;
+				  }
+			  }
+		  }
+		  .time{
+		  		  font-size: 24rpx;
+		  		  color: #999999;
+		  		  padding:20rpx 0;
+		  		  border-top: 1rpx solid #DCDCDC;
+		  }
+	  }
+	 
+  }
+  .add{
+	  position: fixed;
+	  z-index: 999;
+	  bottom: 40rpx;
+	  right: 40rpx;
+	  width: 174rpx;
+	  height: 174rpx;
   }
 </style>

subpackage/after-sale/work-order/add-work-order.vue

 <template>
 	<view class="bg">
 		<view class="title_wrap"><text class="title">基本信息</text><text class="supplement">待补充</text></view>
-		<view class="des">车牌号被上任车主办理的黔通智联发行的ETC设备占用，无法新办ETC。</view>
+		<car-number-input @numberInputResult="carNumber" :defaultStr="state.form.vehiclePlate"></car-number-input>
+		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
+			<u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
+				<u-input placeholder='请输入姓名'
+					maxlength="20" inputAlign="right"/>
+			</u-form-item>
+			<u-form-item label="姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
+				<u-input placeholder='请输入姓名' type="idcard" v-model="state.form.name"
+					 maxlength="18" inputAlign="right"/>
+			</u-form-item>
+			<u-form-item label="联系方式" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
+				<u-input placeholder='请输入联系方式' type="number" v-model="state.form.mobile"
+					 maxlength="11" inputAlign="right"/>
+			</u-form-item>
+		</u-form>
 	</view>
 	<view class="bg">
-		<view class="title"> 需要准备的材料 </view>
+		<view class="title">工单信息</view>
 	
-	</view>
-	<view class="bg">
-		<view class="title"> 办理流程 </view>
-		
 	</view>
 	<view class="action">
 		<button type="default" class="ui-btn" @click="savaHandle()">
 
 <script setup lang="ts">
 	import {navTo} from "@/utils/utils";
-
+	import {reactive} from "vue";
+	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
+const labelStyle = {
+		color: "#004576",
+		fontSize: "28rpx",
+	}
+	const leftIcon = {
+		height: '100%',
+		width: '8rpx',
+		display: 'flex',
+		'align-items': 'center',
+		'margin-right': '4rpx',
+	}
+	const state = reactive({
+		form:{
+			name:"",
+			mobile:"",
+			vehiclePlate:"",
+		}
+	})
+	//车牌号输入
+	const carNumber = (val : any) => {
+		state.form.vehiclePlate = val.trim();
+	};
 	const savaHandle = () => {
        navTo(`/subpackage/after-sale/rescind-carId/rescind-carId-select`)
 	}
 			display: flex;
 			justify-content: space-between;
 			font-weight: 400;
+			margin-bottom: 40rpx;
 			.title {
 				font-size: 30rpx;
 				color: #01243A;