style:发单表单整页样式调整

pages/orderForm/index.vue

@@ -7,76 +7,73 @@
 		<view class="form_wrap">
 			<u--form labelPosition="top" labelWidth="100" :model="form" :rules="rules" ref="form" class="form_wrap"
 				:errorType="'toast'">
-				<u-form-item label="物品品牌" prop="brand">
+				<u-form-item label="品牌" prop="brand" class="brand_wrap">
 					<ld-select :list="brandDict" label-key="dictLabel" value-key="dictValue" placeholder="请选择物品品牌"
-						v-model="form.brand" :border="false"></ld-select>
+						v-model="form.brand" :border="false" border></ld-select>
 					<u-icon slot="right" name="arrow-right"></u-icon>
 				</u-form-item>
 
-				<u-row justify="space-between">
-					<u-form-item label="型号" prop="model">
-						<u-col span="6">
-							<u--input v-model="form.model" placeholder="请输入型号" border="none"></u--input>
-
-						</u-col>
-					</u-form-item>
-
-					<u-form-item label="实价" prop="price">
-						<u-col span="6">
-							<u--input v-model="form.price" placeholder="请输入实价" border="none"></u--input>
-						</u-col>
+				<u-row gutter="5" justify="space-between">
+					<u-col span="6">
+						<u-form-item label="型号" prop="model">
+							<u--input v-model="form.model" placeholder="例如:CF小号" border="surround"></u--input>
+						</u-form-item>
+					</u-col>
+					 <u-col span="6">
+                        <u-form-item label="实价" prop="price">
+							<u--input v-model="form.price" placeholder="0.00" border="surround"></u--input>
 					</u-form-item>
+                    </u-col>
 				</u-row>
 
-				<u-row justify="space-between">
-					<u-form-item label="客户电话" prop="phone">
-						<u-col span="6">
-							<u--input v-model="form.phone" placeholder="请输入客户电话" border="none"></u--input>
-
-						</u-col>
-					</u-form-item>
-
-					<u-form-item label="客户微信" prop="wechat">
-						<u-col span="6">
-							<u--input v-model="form.wechat" placeholder="请输入客户微信" border="none"></u--input>
-						</u-col>
-					</u-form-item>
+				<u-row gutter="5" justify="space-between">
+					<u-col span="6">
+						<u-form-item label="客户电话" prop="phone">
+							<u--input v-model="form.phone" placeholder="电话号" border="surround"></u--input>
+						</u-form-item>
+					</u-col>
+					 <u-col span="6">
+						<u-form-item label="客户微信" prop="wechat">
+							<u--input v-model="form.wechat" placeholder="微信号" border="surround"></u--input>
+						</u-form-item>
+					</u-col>
 				</u-row>
-
-				<u-form-item label="省市区">
-					<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion">
-						<view class="region-picker">
-							<template v-if="form.province">
-								<u--input :value="form.province + '/' + form.city + '/' + form.area" placeholder="点击选择"
-									readonly suffixIcon="arrow-right" suffixIconStyle="color : #c0c4cc"></u--input>
-							</template>
-							<template v-else>
-								<u--input placeholder="点击选择" readonly suffixIcon="arrow-right"
-									suffixIconStyle="color : #c0c4cc"></u--input>
-							</template>
-						</view>
-					</pick-regions>
-				</u-form-item>
-
-				<u-form-item label="详细地址" prop="address" class='form_card'>
-					<u--textarea v-model="form.address" placeholder="请输入详细地址" count confirmType="done"></u--textarea>
-				</u-form-item>
-
-				<u-form-item label="上门时间" prop="visitTime">
+				<view class="address_wrap">
+					<view class="address_title">
+						<u-icon name="map" color="#3b82f6" size="16"></u-icon>
+						<view>地址信息</view>
+					</view>
+					<u-form-item label="详细地址" prop="address" class='form_card'>
+						<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion" clearable class="region-picker">
+							<view>
+								<template v-if="form.province">
+									<u--input :value="form.province + '/' + form.city + '/' + form.area" placeholder="点击选择"
+										readonly suffixIcon="arrow-right" suffixIconStyle="color : #c0c4cc"></u--input>
+								</template>
+								<template v-else>
+									<u--input placeholder="点击选择" readonly suffixIcon="arrow-right"
+										suffixIconStyle="color : #c0c4cc"></u--input>
+								</template>
+							</view>
+						</pick-regions>
+					</u-form-item>
+					<u--textarea v-model="form.address" placeholder="粘贴地址自动识别(例如：浙江省杭州市...)" confirmType="done" @blur="handleAddressBlur"></u--textarea>
+				</view>
+				<u-form-item label="上门时间" prop="visitTime" class="visit_time_wrap">
 					<date-time-picker v-model="form.visitTime" :value-format="'YYYY-MM-DD HH:mm:ss'" :type="'datetime'">
 					</date-time-picker>
 				</u-form-item>
 
-				<u-form-item label="类型" prop="category">
-					<ld-select :list="categoryDict" label-key="dictLabel" value-key="dictValue" placeholder="请选择类型"
-						v-model="form.category" :border="false"></ld-select>
-					<u-icon slot="right" name="arrow-right"></u-icon>
+				<u-form-item label="类型" prop="category" class="category_wrap">
+					<view class="category_select_wrap">
+						<ld-select :list="categoryDict" label-key="dictLabel" value-key="dictValue" placeholder="请选择类型"
+							v-model="form.category" :border="false"></ld-select>
+						<u-icon slot="right" name="arrow-right"></u-icon>
+					</view>
 				</u-form-item>
 
-
-
 				<u-form-item label="价格范围" prop="priceRange">
-					<u--input v-model="form.priceRange" placeholder="请输入价格范围" border="none"></u--input>
+					<u--input v-model="form.priceRange" placeholder="请输入价格范围" border="surround"></u--input>
 				</u-form-item>
 
 				<u-form-item label="战术选择" prop="tactic">
@@ -88,8 +85,8 @@
 					</view>
 				</u-form-item>
 
-				<u-form-item label="备注消息" prop="remarks">
-					<u--textarea v-model="form.remarks" placeholder="请输入备注消息" count confirmType="done"></u--textarea>
+				<u-form-item label="备注信息" prop="remarks" class="remarks_wrap">
+					<u--textarea v-model="form.remarks" placeholder="填写线索来源、客户特殊要求等..." count confirmType="done"></u--textarea>
 				</u-form-item>
 
 			</u--form>
@@ -263,12 +260,31 @@ export default {
 			this.form.province = provinceData.name;
 			this.form.city = cityData.name;
 			this.form.area = areaData.name;
-			// 只在详细地址为空时自动填充省市区
-			if (!this.form.address || this.form.address.trim() === '') {
-				this.form.address = this.form.province + this.form.city + this.form.area;
+			
+			// 构建完整的地区信息
+			const regionText = this.form.province + this.form.city + this.form.area;
+			
+			// 检查当前地址内容是否为纯地区信息（没有具体街道等）
+			const isPureRegion = !this.form.address || 
+								this.form.address.trim() === '' ||
+								this.form.address.trim().includes(this.form.province) ||
+								this.form.address.trim().includes(this.form.city) ||
+								this.form.address.trim().includes(this.form.area);
+			
+			// 如果是纯地区信息或者是空地址，则更新为选择的地区
+			if (isPureRegion) {
+				this.form.address = regionText;
+			} else {
+				// 如果有具体地址信息，保留原有地址，但更新地区部分
+				// 这里可以保持原有地址不变，让用户自己选择是否更新
+				// 或者可以选择性地更新地区信息
 			}
 		},
 
+		// 地址失焦时自动解析地址信息
+		handleAddressBlur() {
+		},
+
 		// 更新各类附件
 		updateChatFiles(fileList) {
 			this.form.chatAttachmentList = fileList;
@@ -385,21 +401,16 @@ export default {
 
 <style lang="scss" scoped>
 .oder_form_wrap {
-	background-color: #f5f5f5;
+	background-color: #f8f9fa;
 	min-height: 100vh;
-	padding-bottom: 100rpx;
+	padding-bottom: 10rpx;
 	padding-top: 10px;
 	padding-left: 20rpx;
 	padding-right: 20rpx;
 }
 
-.form_wrap {
-	/* 移除整体背景和边框，让每个form-item成为独立卡片 */
-}
-
 .upload_area {
-	padding: 0 0rpx;
-	margin: 20rpx 0;
+	padding: 0 10rpx;
 }
 
 .bottom_btn {
@@ -412,9 +423,7 @@ export default {
 	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
 }
 
-.region-picker {
-	width: 100%;
-}
+
 
 ::v-deep .u-form-item {
 	/* 移除底部边框 */
@@ -422,19 +431,96 @@ export default {
 	/* 添加卡片样式 */
 	// background-color: #fff;
 	border-radius: 16rpx;
-	/* 添加阴影效果 */
-	/* 添加外边距 */
-	margin-bottom: 20rpx;
 	/* 添加内边距 */
-	padding: 20rpx;
+	padding: 10rpx;
 	/* 确保内容不会溢出 */
 	overflow: hidden;
+	.u-input--square{
+		border-radius: 20rpx;
+	}
+	.u-input--square:focus-within,
+	.u-input--square.u-input--focus {
+		border: 2rpx solid #2563eb !important;
+		background-color: #fff !important;
+	}
 }
-
-.form_card {
+.brand_wrap{
+	::v-deep .u-form-item__body__right__content{
+		border:1px solid #dadbde;
+		padding:10rpx;
+		border-radius: 20rpx;
+		.inputWrap{
+			border:none;
+		}
+	}
+}
+.address_wrap {
+	border-radius: 20rpx;
+	padding:24rpx;
+	display: flex;
+	flex-direction: column;
 	background-color: #fff;
 	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+	margin: 0 10rpx;
+	.address_title {
+		display: flex;
+		align-items: center;
+		background-color: #fff;
+		padding-bottom: 12rpx;
+		gap:16rpx;
+		font-size:26rpx;
+		color: #6b7280;
+		font-weight: 600;
+	}
+	::v-deep .u-form-item{
+		margin-bottom:0 !important;
+		padding:0;
+		.u-input--square{
+			background-color: #f9fafb;
+		}
+	}
+	::v-deep .u-textarea--radius{
+		border-radius: 20rpx;
+	}
+	.region-picker {
+		width: 100%;
+	}
+	::v-deep .u-textarea{
+		background-color: #f9fafb;
+	}
+}
 
+.visit_time_wrap{
+	::v-deep .uni-date-x{
+		border-radius: 10px;
+		padding: 8rpx 10rpx;
+		border:1px solid #dadbde;
+		background-color: #f8f9fa;
+	}
+}
+.category_wrap{
+	.category_select_wrap{
+		border-radius: 20rpx;
+		border:1px solid #dadbde;
+		padding:6rpx;
+		width:100%;
+		::v-deep .ldSelectInput{
+			font-size: 28rpx !important;
+		}
+	}
+	.category_select_wrap:focus-within,
+	.category_select_wrap:focus {
+		border: 2rpx solid #2563eb !important;
+		background-color: #fff !important;
+	}
+}
+.remarks_wrap{
+	.u-textarea{
+		background-color: #fff;
+	}
+	::v-deep .u-textarea--radius{
+		border-radius: 20rpx;
+	}
 }
 
 ::v-deep .u-form-item__body {
@@ -444,20 +530,17 @@ export default {
 
 ::v-deep .u-form-item__body__left__content__label {
 	color: rgb(107 114 128 / 1) !important;
-	font-size: 0.75rem;
-	line-height: 1rem;
+	font-size: 28rpx;
 	font-weight: 700;
 }
 
-
 .u-button {
 	border-radius: 40rpx;
-	background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
-	--tw-text-opacity: 1;
-	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+	background-color:#2563eb;
+	border:none;
+	color:#fff;
 	font-weight: 700;
-	font-size: 1rem;
-	line-height: 1.5rem;
+	font-size: 40rpx;
 	height: 100rpx;
 }
 
@@ -478,7 +561,7 @@ export default {
 	line-height: 80rpx;
 	text-align: center;
 	border-radius: 30rpx;
-	background-color: #f5f5f5;
+	background-color: #f9fafb;
 	color: rgb(107 114 128 / 1);
 	font-size: 28rpx;
 	transition: all 0.3s ease;
@@ -486,8 +569,9 @@ export default {
 }
 
 .tactic-button.active {
-	border-color: rgb(29 78 216 / 1);
-	color: rgb(29 78 216 / 1);
+	border-color: #3b82f6;
+	color: #3b82f6;
+	background-color: #eff6ff;
 }
 
 .tactic-button::after {
@@ -503,7 +587,7 @@ export default {
 	width: 25rpx;
 	height: 25rpx;
 	border-radius: 50%;
-	background-color: rgb(29 78 216 / 1);
+	background-color: #3b82f6;
 	opacity: 0;
 	transition: all 0.3s ease;
 }