增加新接单中心页面

pages.json

@@ -216,6 +216,14 @@
 			}
 		},
 		{
+			"path": "pages/orderDetailNew/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
+			}
+		},
+		{
 			"path": "pages/receiptForm/index",
 			"style": {
 				"navigationBarTitleText": "",
@@ -232,6 +240,15 @@
 				"navigationBarBackgroundColor": "#108cff",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/acceptOrderOrder/index",
+			"style": {
+				"navigationBarTitleText": "接单中心",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#108cff",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {

pages/acceptOrderOrder/compounts/orderCard.vue

@@ -0,0 +1,232 @@
+<template>
+    <view class="order-card" :class="{ 'order-card-overTime': order.isDelay }" @click.stop="handleClick(order)">
+        <view class="order-card-header">
+            <view class="order-card-header-left">
+                <view class="order-card-header-left-band" v-for="value in order.tags" :key="value.id"
+                    :style="{ backgroundColor: value.color }">
+                    {{ value.name }}
+                </view>
+                <view class="order-card-header-left-band" v-if="order.tags.length == 0" style="backgroundColor: #999;">
+                    暂无标签
+                </view>
+            </view>
+            <view class="order-card-header-right">
+                <view class="order-card-header-right-price">
+                    ￥{{ order.priceRange ? order.priceRange : '暂无价格' }}
+                </view>
+            </view>
+        </view>
+        <view class="order-card-content">
+            <view class="order-card-content-left">
+                <image :src="order.image ? order.image : '/static/acceptOrder/orderCardPic.jpg'" mode="scaleToFill" />
+            </view>
+            <view class="order-card-content-right">
+                <view>{{ order.item }}</view>
+                <view>发单人：{{ order.createNickName }}</view>
+                <view>{{ order.sendDate }}</view>
+            </view>
+        </view>
+
+        <view class="order-card-bottom">
+            <u-row justify="between" v-if="order.status == '1' || order.status == null">
+                <u-col span="5.5">
+                    <view @click.stop="handleAcceptOrder(order)">
+                        <u-button type="primary" size="medium">立即接单</u-button>
+                    </view>
+                </u-col>
+                <u-col span="5.5">
+                    <view @click.stop="handleBusy(order)">
+                        <u-button type="primary" size="medium">在忙</u-button>
+
+                    </view>
+                </u-col>
+            </u-row>
+            <u-row justify="between" v-if="order.status == '2'">
+                <u-col span="5.5">
+                    <view @click.stop="handleWillFollow(order)">
+                        <u-button type="primary" size="medium">待跟进</u-button>
+
+                    </view>
+                </u-col>
+                <u-col span="5.5">
+                    <view @click.stop="handleTag(order)">
+
+                        <u-button type="primary" size="medium">打标签</u-button>
+                    </view>
+                </u-col>
+            </u-row>
+            <u-row justify="between" v-if="order.status == '3'">
+                <u-col span="12">
+                    <view @click.stop="handleShare(order)">
+                        <u-button type="primary" size="medium">一键分享</u-button>
+                    </view>
+                </u-col>
+            </u-row>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        order: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    computed: {
+        statue() {
+            switch (this.order.status) {
+                case 'pending':
+                    return '待接单';
+                case 'received':
+                    return '已接单';
+                case 'rejected':
+                    return '已拒绝';
+            }
+        }
+    },
+    methods: {
+        handleAcceptOrder(order) {
+            console.log('立即接单',order);
+             this.$emit('handleCardClick', order);
+        },
+        handleWillFollow(order) {
+            console.log('待跟进', order);
+        },
+        handleBusy(order) {
+            console.log('在忙', order);
+        },
+        handleTag(order) {
+            console.log('打标签', order);
+        },
+        handleShare(order) {
+            console.log('一键分享', order);
+        },
+        handleClick(order) {
+            console.log('点击了订单', order);
+            this.$emit('handleCardClick', order);
+        }
+    }
+}
+</script>
+
+<style scoped>
+/* 样式部分无修改，保持原样 */
+.order-card {
+    box-sizing: border-box;
+    margin: 20rpx;
+    padding: 16rpx;
+    border-radius: 20rpx;
+    background-color: #fff;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+    border: 1px solid #000;
+    border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
+}
+
+.order-card-overTime {
+    background-color: rgba(254, 242, 242, 1);
+}
+
+.order-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.order-card-header-left {
+    display: flex;
+}
+
+.order-card-header-left>view {
+    height: 30rpx;
+    line-height: 30rpx;
+    padding: 0 12rpx;
+    border-radius: 10rpx;
+    font-size: 20rpx;
+    font-weight: 700;
+    padding: 5rpx 12rpx;
+    margin-right: 10rpx;
+}
+
+.order-card-header-left-band {
+    --tw-text-opacity: 1;
+    --tw-border-opacity: 1;
+    --tw-bg-opacity: 1;
+    color: #fff;
+    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
+    border: 1px solid #000;
+    border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
+}
+
+.order-card-header-left-status {
+    --tw-text-opacity: 1;
+    --tw-bg-opacity: 1;
+    color: rgb(255 107 107 / var(--tw-text-opacity, 1));
+    background-color: rgb(255 241 241 / var(--tw-bg-opacity, 1));
+    border: 1px solid #000;
+    border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
+}
+
+.order-card-header-left-timeout {
+    --tw-text-opacity: 1;
+    --tw-bg-opacity: 1;
+    color: rgb(255 107 107 / var(--tw-text-opacity, 1));
+    background-color: rgb(255 241 241 / var(--tw-bg-opacity, 1));
+    border: 1px solid #000;
+    border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
+}
+
+.order-card-header-left-phone {
+    --tw-text-opacity: 1;
+    --tw-bg-opacity: 1;
+    color: rgb(255 107 107 / var(--tw-text-opacity, 1));
+    background-color: rgb(255 241 241 / var(--tw-bg-opacity, 1));
+    border: 1px solid #000;
+    border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
+}
+
+.order-card-header-right-price {
+    font-weight: 800;
+    font-size: 1.5rem;
+}
+
+.order-card-content {
+    display: flex;
+    align-items: center;
+    margin-top: 20rpx;
+}
+
+.order-card-content image {
+    width: 150rpx;
+    height: 150rpx;
+    margin-right: 20rpx;
+    border-radius: 20rpx;
+}
+
+.order-card-content .order-card-content-right {
+    flex: 1;
+    font-size: 24rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 10rpx;
+    font-size: 24rpx;
+    font-weight: 700;
+}
+
+.order-card-content .order-card-content-right>view:nth-child(1) {
+    font-size: 35rpx;
+    margin-bottom: 10rpx;
+}
+
+.order-card-bottom {
+    margin-top: 20rpx;
+}
+
+.order-card-bottom .u-button {
+    height: 70rpx;
+    border-radius: 20rpx;
+    font-size: 24rpx;
+    font-weight: 700;
+}
+</style>

pages/acceptOrderOrder/index.vue

@@ -0,0 +1,88 @@
+<template>
+	<view class="container">
+		<u-navbar title="接单中心" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
+
+		<scroll-view class="scroll_wrap" scroll-y @scrolltolower="scrolltolower">
+			<order-card v-for="order in ordersList" :key="order.id" :order="order" @handleCardClick="handleCardClick"></order-card>
+			<view class="hasMore">
+				{{ ordersList.length >= page.total ? '没有更多了~' : '向下滑动加载更多~' }}
+			</view>
+		</scroll-view>
+	</view>
+</template>
+<script>
+import orderCard from "./compounts/orderCard.vue";
+
+
+
+export default {
+	components: {
+		orderCard
+	},
+	data() {
+		return {
+			ordersList: [],
+			page: {
+				pageSize: 10,
+				pageNum: 1,
+				total: 0
+			}
+		};
+	},
+	methods: {
+		async getOrderList() {
+
+			const { rows,total } = await uni.$u.api.selectClueOrderFormList({
+				pageSize: this.page.pageSize,
+				pageNum: this.page.pageNum,
+			}
+			);
+			console.log('接单列表', rows);
+			this.ordersList.push(...rows);
+			this.page.total=total;
+		},
+		scrolltolower() {
+			if(this.ordersList.length>=this.page.total){
+				return uni.$u.toast('没有更多了');
+			}
+			this.page.pageNum++;
+			this.getOrderList();
+		},
+		reset() {
+			this.ordersList = [];
+			this.page.pageNum = 1;
+		},
+		handleCardClick(order) {
+			console.log('点击了订单', order);
+			//跳转
+			// uni.navigateTo({
+			// 		url: `/pages/orderDetail/index?orderId=${order.id}&item=${order.item}&type=${this.type}&clueId=${order.clueId}`,
+			// 	})
+
+			//跳转新的页面
+			uni.navigateTo({
+				url: `/pages/orderDetailNew/index?orderId=${order.id}&item=${order.item}&type=${this.type}&clueId=${order.clueId}`,
+			})
+		},
+
+	},
+	onLoad() {
+		this.getOrderList();
+	}
+}
+
+
+
+</script>
+
+<style scoped>
+	.scroll_wrap {
+		height: calc( 100vh - 44px );
+	}
+	.hasMore {
+		text-align: center;
+		padding: 20rpx 0;
+		font-size: 24rpx;
+		color: #999;
+	}
+</style>

pages/clue/post/index.vue

@@ -1,16 +1,17 @@
 <template>
 	<view class="post_item">
 		<view class="post_top">
-			<view class="top_left">{{item.name}}</view>
-			<view class="top_right">{{item.assignStateCode === '1' ? "已分配" : "未分配"}}</view>
+			<view class="top_left">{{ item.name }}</view>
+			<view class="top_right">{{ item.assignStateCode === '1' ? "已分配" : "未分配" }}</view>
 		</view>
 		<view class="post_info">
 			<view class="telPhone">
 				<view class="phone">
 					<text>电话: </text>
-					<show-real-text :real="item.telephone" :type='type' :style="{ color : item.repetitionOperationName ? 'red' : 'black' }"></show-real-text>
+					<show-real-text :real="item.telephone" :type='type'
+						:style="{ color: item.repetitionOperationName ? 'red' : 'black' }"></show-real-text>
 					<template v-if="item.telAddr">
-						({{item.telAddr}})
+						({{ item.telAddr }})
 					</template>
 					<text v-if="item.repetitionOperationName">( 撞 : {{ item.repetitionOperationName }})</text>
 				</view>
@@ -19,132 +20,232 @@
 			<view class="telPhone" v-if="item.weixin">
 				<text>微信: </text>
 				<view class="phone">
-					<text :style="{ color : item.repetitionOperWeixinName ? 'red' : 'black' }">{{item.weixin}}</text>
+					<text :style="{ color: item.repetitionOperWeixinName ? 'red' : 'black' }">{{ item.weixin }}</text>
 					<text v-if="item.repetitionOperWeixinName">( 撞 : {{ item.repetitionOperWeixinName }})</text>
 				</view>
 			</view>
 			<view class="info">
 				<view class="createTime">{{ item.createTime }}</view>
-				<view >{{ item.appName }}</view>
+				<view>{{ item.appName }}</view>
 			</view>
 			<view class="info">
-				<view class="owner" style="margin-right: 20px;">所属人 {{ item.clueOwnerName ? item.clueOwnerName : "-" }}</view>
-				<view class="operation">运营人 {{ item.clueOperationName ?  item.clueOperationName : "-" }}</view>
+				<view class="owner" style="margin-right: 20px;">所属人 {{ item.clueOwnerName ? item.clueOwnerName : "-" }}
+				</view>
+				<view class="operation">运营人 {{ item.clueOperationName ? item.clueOperationName : "-" }}</view>
 			</view>
 		</view>
 		<view class="clue_state_wrap">
 			<view class="clue_state">
-				<view class="state_wrap"><view class="label">线索阶段:</view>{{crm_clue_phase(item.clueState)}}</view>
+				<view class="state_wrap">
+					<view class="label">线索阶段:</view>{{ crm_clue_phase(item.clueState) }}
+				</view>
 				<view class="clueTag">
 					<view class="label">线索标签:</view>
-					<u-tag :text="tag.name" plain plainFill borderColor="#fff" size="mini" v-for="(tag) in item.clueTags" :key="tag.id" style="margin-right: 10px;" :bgColor="tag.color" color="#fff"></u-tag>
+					<u-tag :text="tag.name" plain plainFill borderColor="#fff" size="mini"
+						v-for="(tag) in item.clueTags" :key="tag.id" style="margin-right: 10px;" :bgColor="tag.color"
+						color="#fff"></u-tag>
 				</view>
 			</view>
 		</view>
+		<view class="sendOrder" @click.stop="handleSendOrder(item)">
+			<image src='/static/publicClue/littlePlane.png' mode="aspectFit" class="sendOrder_img"></image>
+			<view>发单</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	import {
-		selectDictLabel
-	} from "@/utils/util";
-	export default {
-		props: {
-			item: {
-				type: Object,
-				required: true
-			},
-			dicts : {
-				type : Object,
-				required : true
-			},
-			type : {
-				type : String | Number,
-				required : true
-			},
+import {
+	selectDictLabel
+} from "@/utils/util";
+export default {
+	props: {
+		item: {
+			type: Object,
+			required: true
 		},
-		data() {
-			return {
-				caseStatusDicts : [],
-			}
+		dicts: {
+			type: Object,
+			required: true
 		},
-		methods: {
-			// 字典翻译
-			crm_clue_phase(caseStatus){
-				return selectDictLabel(this.dicts.caseStatusDicts,caseStatus);
-			},
-			handleCopy(item){
-				uni.setClipboardData({
-					data: item.telephone,
-					success: function () {
-						uni.$u.toast("复制成功");
+		type: {
+			type: String | Number,
+			required: true
+		},
+	},
+	data() {
+		return {
+			caseStatusDicts: [],
+		}
+	},
+	methods: {
+		// 字典翻译
+		crm_clue_phase(caseStatus) {
+			return selectDictLabel(this.dicts.caseStatusDicts, caseStatus);
+		},
+		handleCopy(item) {
+			uni.setClipboardData({
+				data: item.telephone,
+				success: function () {
+					uni.$u.toast("复制成功");
+				}
+			});
+		},
+		// 主页面的发单
+		async handleSendOrder(item) {
+			console.log(item);
+			const {
+				data: count
+			} = await uni.$u.api.getClueSendFormCountByClueId({
+				clueId: item.id
+			});
+			console.log(count);
+			if (count > 0) {
+				uni.showModal({
+					title: '该线索已发单是否再次发单？',
+					success: (res) => {
+						if (res.confirm) {
+							this.toOrderForm(item)
+						}
 					}
 				});
-			},
+			} else {
+				this.toOrderForm(item)
+			}
 		},
-	}
+		toOrderForm(item) {
+			console.log(item);
+			const {
+				id,
+				ownLatestDynamicTime,
+				createTime,
+				clueOwnerId
+			} = item;
+			if (this.$store.state.user.userInfo.userId === clueOwnerId) {
+				uni.navigateTo({
+					url: `/pages/orderForm/index?clueId=${id}`
+				})
+			} else {
+				// 确定用于判断的目标时间（ownLatestDynamicTime，为null则用createTime）
+				const date = ownLatestDynamicTime || createTime
+
+				const twoDaysLater = new Date(date)
+				twoDaysLater.setDate(twoDaysLater.getDate() + 2) // 日期加2天
+
+				// 是否大于当前时间 小于可以发单
+				let isOrderForm = false
+				if (twoDaysLater) {
+					isOrderForm = twoDaysLater.getTime() <= new Date().getTime()
+				}
+				if (isOrderForm) {
+					uni.navigateTo({
+						url: `/pages/orderForm/index?clueId=${id}`
+					})
+				} else {
+					uni.$u.toast('非所属人需两天内无跟进记录才可发单')
+				}
+			}
+		},
+	},
+}
 </script>
 
 <style lang="scss" scoped>
-	.post_item {
-		background: #fff;
-		border-radius: 20px;
-		padding: 20px;
-		margin-bottom: 20px;
-		.post_top {
-			display: flex;
-			justify-content: space-between;
-			margin-bottom: 10px;
-			.top_left {
-				font-size: 18px;
-			}
+.post_item {
+	background: #fff;
+	border-radius: 20px;
+	padding: 20px;
+	margin-bottom: 20px;
+	position: relative;
 
-			.top_right {
-				color: #87bf66;
-			}
+	.post_top {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 10px;
+
+		.top_left {
+			font-size: 18px;
 		}
 
-		.post_info {
-			font-size: 14px;
-			.telPhone {
-				display: flex;
-				margin-bottom: 6px;
-				.copy_btn {
-					color: #4fa5fe;
-					margin-left: 10px;
-				}
-			}
+		.top_right {
+			color: #87bf66;
+		}
+	}
 
-			.info {
-				display: flex;
-				margin-bottom: 10px;
-				.createTime {
-					margin-right: 10px;
-				}
+	.post_info {
+		font-size: 14px;
 
-				.copy_btn {
-					display: flex;
-					flex-wrap: wrap;
-				}
+		.telPhone {
+			display: flex;
+			margin-bottom: 6px;
+
+			.copy_btn {
+				color: #4fa5fe;
+				margin-left: 10px;
 			}
 		}
 
-		.clue_state_wrap {
-			font-size: 14px;
-			background: #f8f9fb;
-			padding: 10px;
-			color: #9b9aa2;
-			overflow: hidden;
-			.state_wrap{
-				display: flex;
-				margin-bottom: 10px;
-			}
-			.label{
-				flex: 0 0 66px;
+		.info {
+			display: flex;
+			margin-bottom: 10px;
+
+			.createTime {
+				margin-right: 10px;
 			}
-			.clueTag {
+
+			.copy_btn {
 				display: flex;
+				flex-wrap: wrap;
 			}
 		}
 	}
+
+	.clue_state_wrap {
+		font-size: 14px;
+		background: #f8f9fb;
+		padding: 10px;
+		color: #9b9aa2;
+		overflow: hidden;
+
+		.state_wrap {
+			display: flex;
+			margin-bottom: 10px;
+		}
+
+		.label {
+			flex: 0 0 66px;
+		}
+
+		.clueTag {
+			display: flex;
+		}
+	}
+
+
+	.sendOrder {
+		width: 50px;
+		height: 50px;
+		background-color: rgb(36, 98, 234);
+		color: #fff;
+		border-radius: 50%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		font-size: 10px;
+		font-weight: 700;
+		font-family: "uicon";
+
+		position: absolute;
+		right: 20px;
+		bottom: 115px;
+
+
+		.sendOrder_img {
+			width: 20px;
+			height: 20px;
+		}
+	}
+}
 </style>

pages/login/index.vue

@@ -144,19 +144,26 @@
 					}
 					this.$store.dispatch("user/login", this.form).then(async (userId) => {
 						// #ifdef H5
-						if(this.firstLoginState){
-							// 有state要绑定一下用户
-						  	await uni.$u.api.firstLogin({ userId , firstLoginState : this.firstLoginState });
+						uni.switchTab({
+							url: `/pages/person/index`,
+							success: () => {
+								this.$store.dispatch("app/register");
+								uni.$u.toast("登录成功");
+							}
+						})
+						// if(this.firstLoginState){
+						// 	// 有state要绑定一下用户
+						//   	await uni.$u.api.firstLogin({ userId , firstLoginState : this.firstLoginState });
 							
-							uni.reLaunch({
-								url:"/pages/bindSuccess/index",
-								success: () => {
-									uni.$u.toast("绑定成功");
-								}
-							});
-						}else{
-							uni.$u.toast("授权失败，无法绑定");
-						}
+						// 	uni.reLaunch({
+						// 		url:"/pages/bindSuccess/index",
+						// 		success: () => {
+						// 			uni.$u.toast("绑定成功");
+						// 		}
+						// 	});
+						// }else{
+						// 	uni.$u.toast("授权失败，无法绑定");
+						// }
 						// #endif
 						
 						// #ifdef  APP-PLUS

pages/orderDetailNew/components/common.scss

@@ -0,0 +1,202 @@
+// 公共SCSS变量定义
+$colors: (
+    primary: #108cff,
+    primary-light: rgba(16, 140, 255, 0.08),
+    bg: #f9fafb,
+    card: #ffffff,
+    border: #f5f5f5,
+    text-primary: #1f2937,
+    text-secondary: #374151,
+    shadow: rgba(0, 0, 0, 0.05)
+);
+
+$sizes: (
+    radius: 16rpx,
+    padding: 32rpx,
+    padding-sm: 28rpx,
+    margin-sm: 18rpx,
+    margin-xs: 16rpx,
+    icon-padding: 14rpx,
+    font-title: 34rpx,
+    font-content: 32rpx,
+    line-height: 56rpx,
+    checkbox-size: 32rpx
+);
+
+// 字体优化
+$font: (
+    family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
+    smoothing: antialiased
+);
+
+// 字体大小变量
+$font-sizes: (
+    title: 38rpx,
+    content: 34rpx,
+    sub-content: 30rpx,
+    small: 26rpx,
+    tiny: 24rpx
+);
+
+// 字体权重变量
+$font-weights: (
+    bold: 700,
+    semi-bold: 600,
+    medium: 500,
+    regular: 450,
+    light: 400
+);
+
+// 行高变量
+$line-heights: (
+    large: 56rpx,
+    medium: 48rpx,
+    small: 40rpx
+);
+
+// 字间距变量
+$letter-spacings: (
+    large: 1rpx,
+    medium: 0.8rpx,
+    small: 0.5rpx
+);
+
+// 文本颜色变量
+$text-colors: (
+    primary: map-get($colors, text-primary),
+    secondary: map-get($colors, text-secondary),
+    tertiary: #666666,
+    placeholder: #999999
+);
+
+// 公共混合宏
+@mixin flex-center {
+    display: flex;
+    align-items: center;
+}
+
+@mixin shadow($level: 1) {
+    $shadow-levels: (
+        1: 0 2rpx 12rpx map-get($colors, shadow),
+        2: 0 4rpx 20rpx map-get($colors, shadow),
+        3: 0 8rpx 30rpx map-get($colors, shadow)
+    );
+box-shadow: map-get($shadow-levels, $level);
+transition: box-shadow 0.3s ease;
+}
+
+@mixin card {
+    width: 100%;
+    margin: 0;
+    background-color: map-get($colors, card);
+    border-radius: map-get($sizes, radius);
+    @include shadow;
+}
+
+// 字体样式混合宏
+@mixin font-styles(
+    $size: content,
+    $weight: regular,
+    $color: primary,
+    $line-height: medium,
+    $letter-spacing: medium
+) {
+    font-size: map-get($font-sizes, $size);
+    font-weight: map-get($font-weights, $weight);
+    color: map-get($text-colors, $color);
+    line-height: map-get($line-heights, $line-height);
+    letter-spacing: map-get($letter-spacings, $letter-spacing);
+    font-family: map-get($font, family);
+}
+
+// 公共页面容器样式
+.page-container {
+    box-sizing: border-box;
+    padding: 0;
+    background-color: map-get($colors, bg);
+    font-family: map-get($font, family);
+    -webkit-font-smoothing: map-get($font, smoothing);
+    font-smoothing: map-get($font, smoothing);
+}
+
+// 公共字体样式
+// 页面主标题
+.page-title {
+    @include font-styles($size: title, $weight: bold, $color: primary);
+}
+
+// 卡片标题
+.card-title {
+    @include font-styles($size: title, $weight: bold, $color: primary);
+    border-bottom: 1rpx solid map-get($colors, border);
+    padding: map-get($sizes, padding-sm) map-get($sizes, padding);
+    margin: 0;
+}
+
+// 地址标题
+.address-title {
+    @include font-styles($size: title, $weight: bold, $color: primary);
+    flex: 1;
+}
+
+// 主要内容文字
+.content-text {
+    @include font-styles;
+}
+
+// 辅助文字
+.auxiliary-text {
+    @include font-styles($size: small, $weight: regular, $color: tertiary, $line-height: small, $letter-spacing: small);
+}
+
+// 复选框/单选框文字
+.form-item-text {
+    @include font-styles;
+    vertical-align: middle;
+}
+
+// 空状态文字
+.empty-text {
+    @include font-styles;
+    text-align: center;
+}
+
+// 标签文字
+.label-text {
+    @include font-styles($size: tiny, $weight: regular, $color: tertiary);
+}
+
+// 值文字
+.value-text {
+    @include font-styles($size: small, $weight: regular, $color: secondary);
+}
+
+// 公共卡片样式
+.card_wrap {
+    @include card;
+    margin-bottom: 20rpx;
+
+    &:hover {
+        @include shadow(2);
+    }
+}
+
+// 公共地址标题样式
+.address-header {
+    @include flex-center;
+    margin-bottom: map-get($sizes, margin-sm);
+    padding-bottom: map-get($sizes, margin-sm);
+    border-bottom: 1rpx solid map-get($colors, border);
+
+    .location-icon {
+        margin-right: map-get($sizes, margin-xs);
+        background-color: map-get($colors, primary-light);
+        padding: map-get($sizes, icon-padding);
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
+    .address-title {
+        margin-left: 16rpx;
+    }
+}

pages/orderDetailNew/components/orderDetailNewView.vue

@@ -0,0 +1,102 @@
+<template>
+    <view class="orderDetailNewView">
+
+        <view class="page-item" v-show="activeIndex === 0">
+            <pageOne @handleNextClick="handleNextClick" />
+        </view>
+        <view class="page-item" v-show="activeIndex === 1">
+            <pageTwo @handleNextClick="handleNextClick" />
+        </view>
+        <view class="page-item" v-show="activeIndex === 2">
+            <pageThree @handleNextClick="handleNextClick" :detailImages="allFroms.formTwo.detailImages || []" />
+        </view>
+        <view class="page-item" v-show="activeIndex === 3">
+            <pageFour @handleNextClick="handleNextClick" />
+        </view>
+
+        <ul class="page">
+            <li v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeIndex === index }"
+                @click="activeIndex = index">{{ tab }}</li>
+        </ul>
+    </view>
+</template>
+
+<script>
+import pageOne from './pageOne.vue'
+import pageTwo from './pageTwo.vue'
+import pageThree from './pageThree.vue'
+import pageFour from './pageFour.vue'
+export default {
+    components: {
+        pageOne,
+        pageTwo,
+        pageThree,
+        pageFour
+    },
+    data() {
+        return {
+            activeIndex: 0,
+            tabs: ['一', '二', '三', '四'],
+            allFroms: {
+                formOne: {},
+                formTwo: {},
+                formThree: {},
+                formFour: {},
+            }
+        }
+    },
+    name: 'OrderDetailNewView',
+    methods: {
+        handleNextClick({ nowPage, form }) {
+            this.activeIndex++
+            this.allFroms[nowPage] = form
+            console.log("1111", this.allFroms[nowPage])
+        }
+
+    }
+}
+
+
+</script>
+
+<style scoped>
+.orderDetailNewView {
+    padding: 20rpx;
+}
+
+.page {
+    position: fixed;
+    right: 20rpx;
+    top: 40%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    list-style: none;
+    color: #000;
+    font-size: 20rpx;
+    font-weight: 800;
+
+    li {
+        opacity: 0.7;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #fff;
+        border-radius: 50%;
+        width: 70rpx;
+        height: 70rpx;
+        line-height: 80rpx;
+        text-align: center;
+        margin-bottom: 10rpx;
+        transition: all 0.3s ease-in-out;
+        font-weight: 800;
+    }
+
+    li.active {
+        color: #fff;
+        opacity: 1;
+        background-color: rgb(37 99 235 / 1);
+    }
+}
+</style>

pages/orderDetailNew/components/pageFour.vue

@@ -0,0 +1,5 @@
+<template>
+    <view>
+        4
+    </view>
+</template>

pages/orderDetailNew/components/pageOne.vue

@@ -0,0 +1,337 @@
+<template>
+    <view class="page-itemOne">
+        <u-row justify="space-between" customStyle="margin-bottom: 10px">
+            <u-col span="3">
+                <div class="page-itemOne-title">图片资料</div>
+            </u-col>
+            <u-col span="3.5">
+                <u-button size="small"
+                    style="border-radius: 20rpx;border-color: #007AFF;color: #007AFF;">复制全部图片</u-button>
+            </u-col>
+        </u-row>
+
+        <!-- 实物图卡片 -->
+        <view class="card_wrap">
+            <view class="card-title">实物图</view>
+            <view class="image-upload-container">
+                <view class="image-list">
+                    <view class="image-item" v-for="(item, index) in form.truePic" :key="'truePic-' + index">
+                        <pic-comp :src="item"></pic-comp>
+                        <view class="delete-btn" @click="deleteImage('truePic', index)">×</view>
+                    </view>
+                    <view class="upload-btn" @click="uploadImage('truePic')">
+                        <u-icon name="plus" size="40" color="#999"></u-icon>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 聊天记录卡片 -->
+        <view class="card_wrap">
+            <view class="card-title">聊天记录</view>
+            <view class="image-upload-container">
+                <view class="image-list">
+                    <view class="image-item" v-for="(item, index) in form.chatRecords" :key="'chatRecords-' + index">
+                        <pic-comp :src="item"></pic-comp>
+                        <view class="delete-btn" @click="deleteImage('chatRecords', index)">×</view>
+                    </view>
+                    <view class="upload-btn" @click="uploadImage('chatRecords')">
+                        <u-icon name="plus" size="40" color="#999"></u-icon>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 基本信息卡片 -->
+        <view class="info-card">
+            <view class="info-card-title">基本信息</view>
+            <u-row class="info-row">
+                <u-col span="6">
+                    <view class="info-label">发单人</view>
+                    <view class="info-value">张三</view>
+                </u-col>
+                <u-col span="6">
+                    <view class="info-label">型号</view>
+                    <view class="info-value">iPhone 15 Pro</view>
+                </u-col>
+            </u-row>
+            <u-row class="info-row">
+                <u-col span="6">
+                    <view class="info-label">上门时间</view>
+                    <view class="info-value">2025-12-20 14:30</view>
+                </u-col>
+                <u-col span="6">
+                    <view class="info-label">地址</view>
+                    <view class="info-value">北京市朝阳区建国路88号</view>
+                </u-col>
+            </u-row>
+        </view>
+
+        <!-- 联系方式卡片 -->
+        <view class="connect">
+            <view class="connect-card phone-card" @click="handlePhoneClick">
+                <u-icon name="phone" size="40" color="#07C160" style="margin-bottom: 10rpx;"></u-icon>
+                <view class="connect-title">电话</view>
+                <!-- 小红点 -->
+                <view v-if="phone" class="red-dot"></view>
+            </view>
+            <view class="connect-card wechat-card" @click="handleWechatClick">
+                <u-icon name="chat" size="40" color="#07C160" style="margin-bottom: 10rpx;"></u-icon>
+                <view class="connect-title">微信</view>
+                <!-- 小红点 -->
+                <view v-if="wechat" class="red-dot"></view>
+            </view>
+        </view>
+
+        <u-button @click="handleNextClick" type="primary" size="middle" style="border-radius: 20rpx;">下一步</u-button>
+
+    </view>
+</template>
+<script>
+import picComp from './picComp.vue'
+
+export default {
+    components: {
+        picComp
+    },
+    data() {
+        return {
+            form: {
+                truePic: [],
+                chatRecords: [],
+            },
+            phone: '13800138000',
+            wechat: 'wechat123456',
+            // 控制小红点显示的变量
+        }
+    },
+    methods: {
+        // 上传图片
+        uploadImage(type) {
+            uni.chooseImage({
+                count: 9 - this.form[type].length, // 最多选择9张
+                sizeType: ['compressed'], // 压缩图片
+                sourceType: ['album', 'camera'], // 从相册选择或拍照
+                success: (res) => {
+                    const tempFilePaths = res.tempFilePaths
+                    // 将图片路径添加到对应的数组中
+                    this.form[type] = [...this.form[type], ...tempFilePaths]
+                    // 这里可以添加上传到服务器的逻辑
+                    // this.uploadToServer(tempFilePaths, type)
+                },
+                fail: (err) => {
+                    console.error('选择图片失败:', err)
+                }
+            })
+        },
+        // 删除图片
+        deleteImage(type, index) {
+            uni.showModal({
+                title: '提示',
+                content: '确定要删除这张图片吗？',
+                success: (res) => {
+                    if (res.confirm) {
+                        this.form[type].splice(index, 1)
+                    }
+                }
+            })
+        },
+        // 上传到服务器（示例）
+        uploadToServer(filePaths, type) {
+            filePaths.forEach((filePath, index) => {
+                uni.uploadFile({
+                    url: 'your-upload-api-url', // 替换为实际的上传接口
+                    filePath: filePath,
+                    name: 'file',
+                    formData: {
+                        type: type
+                    },
+                    success: (uploadRes) => {
+                        const data = JSON.parse(uploadRes.data)
+                        // 上传成功后，将临时路径替换为服务器返回的路径
+                        const tempIndex = this.form[type].indexOf(filePath)
+                        if (tempIndex !== -1) {
+                            this.form[type][tempIndex] = data.url // 假设服务器返回data.url
+                        }
+                    },
+                    fail: (err) => {
+                        console.error('上传图片失败:', err)
+                    }
+                })
+            })
+        },
+        // 电话卡片点击事件
+        handlePhoneClick() {
+            console.log('电话卡片被点击', '电话号码:', this.phone)
+            // 这里可以添加拨打电话的逻辑，例如调用uni.makePhoneCall
+        },
+        // 微信卡片点击事件
+        handleWechatClick() {
+            console.log('微信卡片被点击', '微信号:', this.wechat)
+            // 这里可以添加打开微信的逻辑
+        },
+        // 下一步
+        handleNextClick() {
+            // 校验表单
+            if (!this.form.truePic.length) {
+                uni.showToast({
+                    title: '请上传实物图',
+                    icon: 'none'
+                })
+                return
+            }
+            if (!this.form.chatRecords.length) {
+                uni.showToast({
+                    title: '请上传聊天记录',
+                    icon: 'none'
+                })
+                return
+            }
+            this.$emit('handleNextClick', {
+                nowPage: 'formOne',
+                form: this.form,
+            })
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+// 导入公共样式
+@import './common.scss';
+
+// 主样式
+.page-itemOne {
+    @extend .page-container;
+}
+
+.page-itemOne-title {
+    @include font-styles($size: title, $weight: bold, $color: primary);
+}
+
+.page-itemOne-form {
+    @include font-styles($size: tiny, $weight: semi-bold, $color: secondary);
+    text-wrap: nowrap;
+}
+
+.image-upload-container {
+    padding: map-get($sizes, padding-sm) map-get($sizes, padding);
+}
+
+.image-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20rpx;
+}
+
+.image-item {
+    position: relative;
+    width: 200rpx;
+    height: 200rpx;
+    box-sizing: border-box;
+}
+
+.delete-btn {
+    position: absolute;
+    top: -10rpx;
+    right: -10rpx;
+    width: 40rpx;
+    height: 40rpx;
+    background-color: #ff4d4f;
+    color: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include font-styles($size: tiny, $weight: bold);
+    z-index: 10;
+}
+
+.upload-btn {
+    width: 200rpx;
+    height: 200rpx;
+    border: 8rpx dashed #ddd;
+    border-radius: 30rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f9f9f9;
+    box-sizing: border-box;
+}
+
+/* 基本信息卡片样式 */
+.info-card {
+    @include card;
+    margin-top: 20rpx;
+    margin-bottom: 20rpx;
+    padding: map-get($sizes, padding-sm) map-get($sizes, padding);
+
+    &:hover {
+        @include shadow(2);
+    }
+}
+
+.info-card-title {
+    @include font-styles($size: title, $weight: bold, $color: primary);
+    margin-bottom: 25rpx;
+    padding-bottom: 15rpx;
+    border-bottom: 1rpx solid map-get($colors, border);
+}
+
+.info-row {
+    margin-bottom: 20rpx;
+}
+
+.info-label {
+    @include font-styles($size: tiny, $weight: regular, $color: tertiary);
+    margin-bottom: 8rpx;
+}
+
+.info-value {
+    @include font-styles($size: small, $weight: regular, $color: secondary, $line-height: small);
+    word-break: break-all;
+}
+
+/* 联系方式卡片样式 */
+.connect {
+    display: flex;
+    justify-content: space-between;
+    margin: 20rpx 0;
+    gap: 20rpx;
+}
+
+.connect-card {
+    flex: 1;
+    @include card;
+    padding: 30rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    position: relative;
+
+    &:hover {
+        @include shadow(2);
+    }
+}
+
+.connect-title {
+    @include font-styles($size: tiny, $weight: regular, $color: tertiary);
+    margin-bottom: 8rpx;
+}
+
+.connect-value {
+    @include font-styles($size: small, $weight: medium, $color: secondary);
+}
+
+/* 小红点样式 */
+.red-dot {
+    position: absolute;
+    top: 15rpx;
+    right: 15rpx;
+    width: 16rpx;
+    height: 16rpx;
+    background-color: #ff4d4f;
+    border-radius: 50%;
+    box-shadow: 0 0 4rpx rgba(255, 77, 79, 0.3);
+}
+</style>

pages/orderDetailNew/components/pageThree.vue

@@ -0,0 +1,202 @@
+<template>
+    <view class="page-container">
+        <view class="card_wrap">
+            <view class="detail-image-section">
+                <view class="address-header">
+                    <text class="address-title">高清细节图</text>
+                </view>
+                <view class="detail-image-content">
+                    <view v-if="detailImages.length > 0" class="detail-image-list">
+                        <view class="detail-image-item" v-for="(item, index) in detailImages" :key="'detail-' + index">
+                            <pic-comp :src="item"></pic-comp>
+                        </view>
+                    </view>
+                    <view v-else class="no-images">暂无高清细节图</view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 支付信息录入卡片 -->
+        <view class="info-card">
+            <view class="info-card-title">支付信息</view>
+            <!-- 开户人和银行名称同一行 -->
+            <u-row class="info-row" justify="space-between">
+                <u-col span="5.8">
+                    <view class="info-label">开户人</view>
+                    <u-input v-model="paymentInfo.accountHolder" placeholder="请输入开户人姓名" class="info-input" />
+                </u-col>
+                <u-col span="5.8">
+                    <view class="info-label">银行名称</view>
+                    <u-input v-model="paymentInfo.bankName" placeholder="请输入银行名称" class="info-input" />
+                </u-col>
+            </u-row>
+            <!-- 银行账号单独一行 -->
+            <u-row class="info-row">
+                <u-col span="12">
+                    <view class="info-label">银行账号</view>
+                    <u-input v-model="paymentInfo.bankAccount" placeholder="请输入银行账号" class="info-input" />
+                </u-col>
+            </u-row>
+            <!-- 身份证号单独一行 -->
+            <u-row class="info-row">
+                <u-col span="12">
+                    <view class="info-label">身份证号</view>
+                    <u-input v-model="paymentInfo.idNumber" placeholder="请输入身份证号" class="info-input" />
+                </u-col>
+            </u-row>
+        </view>
+    </view>
+</template>
+
+<script>
+import picComp from './picComp.vue'
+
+export default {
+    components: {
+        picComp
+    },
+    props: {
+        detailImages: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            // 支付信息
+            paymentInfo: {
+                accountHolder: '', // 开户人
+                bankName: '', // 银行名称
+                bankAccount: '', // 银行账号
+                idNumber: '' // 身份证号
+            }
+        };
+    },
+    methods: {
+        // 下一步按钮点击事件
+        handleNextClick() {
+            this.$emit('handleNextClick', {
+                nowPage: 'formThree',
+                form: {
+                    detailImages: this.detailImages,
+                    paymentInfo: this.paymentInfo
+                }
+            });
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+// 导入公共样式
+@import './common.scss';
+
+// 主样式
+.page-container {
+    box-sizing: border-box;
+    padding: 0;
+    background-color: map-get($colors, bg);
+    font-family: map-get($font, family);
+    -webkit-font-smoothing: map-get($font, smoothing);
+    font-smoothing: map-get($font, smoothing);
+}
+
+.card_wrap {
+    @include card;
+    margin-bottom: 20rpx;
+
+    &:hover {
+        @include shadow(2);
+    }
+}
+
+.detail-image-section {
+    padding: map-get($sizes, padding-sm) map-get($sizes, padding);
+}
+
+.detail-image-content {
+
+    .detail-image-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 24rpx;
+    }
+
+    .detail-image-item {
+        width: calc((100% - 24rpx * 2) / 3);
+        aspect-ratio: 1 / 1;
+        border-radius: 12rpx;
+        overflow: hidden;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+        background-color: #f9f9f9;
+        transition: all 0.3s ease;
+
+        &:hover {
+            transform: translateY(-2rpx);
+            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
+        }
+    }
+
+    .no-images {
+        @include font-styles($size: content, $weight: regular, $color: tertiary);
+        text-align: center;
+        padding: 80rpx 0;
+        background-color: #f9f9f9;
+        border-radius: 12rpx;
+    }
+}
+
+/* 支付信息卡片样式 */
+.info-card {
+    @include card;
+    margin-top: 20rpx;
+    margin-bottom: 20rpx;
+    padding: map-get($sizes, padding-sm) map-get($sizes, padding);
+    box-sizing: border-box;
+
+    &:hover {
+        @include shadow(2);
+    }
+
+    .u-col {
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    .u-col:first-child {
+        padding-right: 15rpx;
+    }
+
+    .u-col:last-child {
+        padding-left: 15rpx;
+    }
+}
+
+.info-card-title {
+    @include font-styles($size: title, $weight: bold, $color: primary);
+    margin-bottom: 25rpx;
+    padding-bottom: 15rpx;
+    border-bottom: 1rpx solid map-get($colors, border);
+}
+
+.info-row {
+    margin-bottom: 20rpx;
+    box-sizing: border-box;
+    padding: 0;
+}
+
+.info-label {
+    @include font-styles($size: tiny, $weight: regular, $color: tertiary);
+    margin-bottom: 8rpx;
+    display: block;
+}
+
+.info-input {
+    border-radius: 8rpx;
+    border: 1rpx solid #e5e7eb;
+    padding: 12rpx 16rpx;
+    width: 100%;
+    box-sizing: border-box;
+    @include font-styles($size: small, $weight: regular, $color: secondary);
+}
+</style>

pages/orderDetailNew/components/pageTwo.vue

@@ -0,0 +1,835 @@
+<template>
+    <view class="page-container">
+        <view class="card_wrap">
+            <view class="address-section">
+                <view class="address-header">
+                    <u-icon name="map" size="36rpx" color="#108cff" class="location-icon"></u-icon>
+                    <text class="address-title">上门地址</text>
+                </view>
+                <view class="address-content">
+                    <text class="address-text">北京市朝阳区建国路88号SOHO现代城A座2301室</text>
+                </view>
+            </view>
+        </view>
+
+        <view class="card_wrap checklist-card">
+            <view class="checklist-section">
+                <u-checkbox-group v-model="selectedCheckbox" placement="column">
+                    <view class="checklist-item">
+                        <view class="checkbox-text-container">
+                            <u-checkbox name="contact师傅" size="40rpx" color="#108cff" />
+                            <text class="checklist-text">联系师傅</text>
+                        </view>
+                        <u-input v-if="selectedCheckbox.includes('contact师傅')" v-model="formData.contactPhone"
+                            placeholder="请输入师傅手机号" size="default" class="checklist-input" />
+                    </view>
+                    <view class="checklist-item">
+                        <view class="checkbox-text-container">
+                            <u-checkbox name="photo技巧" size="40rpx" color="#108cff" />
+                            <text class="checklist-text">师傅拍图技巧</text>
+                        </view>
+                        <u-input v-if="selectedCheckbox.includes('photo技巧')" v-model="formData.photoTips"
+                            type="textarea" placeholder="请输入拍图技巧" rows="3" class="checklist-textarea" />
+                        <!-- 上传图片按钮 -->
+                        <view v-if="selectedCheckbox.includes('photo技巧')" class="upload-btn-container">
+                            <div class="upload-btn" @click="chooseImage('photoTips')">
+                                <u-icon name="camera" size="32rpx" color="#108cff"></u-icon>
+                                <text class="upload-btn-text">上传图片</text>
+                            </div>
+                        </view>
+                        <!-- 图片显示区域 -->
+                        <view v-if="selectedCheckbox.includes('photo技巧') && photoTipsImages.length > 0"
+                            class="image-list">
+                            <view v-for="(image, index) in photoTipsImages" :key="index" class="image-item"
+                                @click="previewImageHandler(image, 'photoTips')">
+                                <image :src="image" mode="aspectFill" class="image-thumb"></image>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="checklist-item">
+                        <view class="checkbox-text-container">
+                            <u-checkbox name="face2face" size="40rpx" color="#108cff" />
+                            <text class="checklist-text">到达客户面对面</text>
+                        </view>
+                        <u-input v-if="selectedCheckbox.includes('face2face')" v-model="formData.face2faceNotes"
+                            type="textarea" placeholder="请输入备注信息" rows="3" class="checklist-textarea" />
+                        <!-- 上传图片按钮 -->
+                        <view v-if="selectedCheckbox.includes('face2face')" class="upload-btn-container">
+                            <div class="upload-btn" @click="chooseImage('face2face')">
+                                <u-icon name="camera" size="32rpx" color="#108cff"></u-icon>
+                                <text class="upload-btn-text">上传图片</text>
+                            </div>
+                        </view>
+                        <!-- 图片显示区域 -->
+                        <view v-if="selectedCheckbox.includes('face2face') && face2faceImages.length > 0"
+                            class="image-list">
+                            <view v-for="(image, index) in face2faceImages" :key="index" class="image-item"
+                                @click="previewImageHandler(image, 'face2face')">
+                                <image :src="image" mode="aspectFill" class="image-thumb"></image>
+                            </view>
+                        </view>
+                    </view>
+                </u-checkbox-group>
+            </view>
+        </view>
+
+        <!-- 新添加的数字选择器卡片 -->
+        <view class="card_wrap price-card">
+            <view class="price-section">
+                <view class="price-picker-container">
+                    <!-- 上方快速操作按钮 -->
+                    <view class="quick-actions top-actions">
+                        <div class="quick-btn increase" @click="quickChangePrice(100)">+100</div>
+                        <div class="quick-btn increase" @click="quickChangePrice(1000)">+1000</div>
+                    </view>
+
+                    <!-- 数字选择器 -->
+                    <view class="number-box-container">
+                        <view class="price-input-box">
+                            <text class="price-label">核准价￥</text>
+                            <input type="number" v-model="approvedPrice" class="price-input" placeholder="0" min="0"
+                                @input="onPriceInput" />
+                        </view>
+                    </view>
+
+                    <!-- 下方快速操作按钮 -->
+                    <view class="quick-actions bottom-actions">
+                        <div class="quick-btn decrease" @click="quickChangePrice(-100)">-100</div>
+                        <div class="quick-btn decrease" @click="quickChangePrice(-1000)">-1000</div>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 新添加的高清细节图上传卡片 -->
+        <view class="card_wrap detail-image-card">
+            <view class="detail-image-section">
+                <div class="detail-image-header">
+                    <div class="detail-image-title">上传高清细节图（支持多选）</div>
+                    <div class="copy-btn" @click="copyAllDetailImages">
+                        <text>一键复制</text>
+                    </div>
+                </div>
+                <div class="detail-image-upload-container">
+                    <view class="detail-image-list">
+                        <view class="detail-image-item" v-for="(item, index) in detailImages" :key="'detail-' + index">
+                            <pic-comp :src="item"></pic-comp>
+                            <view class="detail-delete-btn" @click="deleteDetailImage(index)">×</view>
+                        </view>
+                        <view class="detail-upload-btn" @click="uploadDetailImage">
+                            <u-icon name="plus" size="40rpx" color="#999"></u-icon>
+                        </view>
+                    </view>
+                </div>
+            </view>
+        </view>
+
+        <u-button @click="handleNextClick" type="primary" size="middle" style="border-radius: 20rpx;">下一步</u-button>
+    </view>
+</template>
+
+<script>
+import picComp from './picComp.vue'
+
+export default {
+    components: {
+        picComp
+    },
+    data() {
+        return {
+            selectedCheckbox: [],
+            formData: {
+                contactPhone: '',
+                photoTips: '',
+                face2faceNotes: ''
+            },
+            // 图片相关数据
+            photoTipsImages: [], // 师傅技巧图片数组
+            face2faceImages: [], // 到达客户面对面图片数组
+            // 全屏预览相关
+            previewImage: '', // 当前预览的图片
+            showPreview: false, // 是否显示全屏预览
+            // 核准价格相关
+            approvedPrice: 0, // 核准价格初始值
+            // 高清细节图相关
+            detailImages: [] // 高清细节图数组
+        };
+    },
+    methods: {
+        // 选择图片方法
+        chooseImage(type) {
+            uni.chooseImage({
+                count: 9, // 最多选择9张图片
+                sizeType: ['original', 'compressed'], // 原图或压缩图
+                sourceType: ['album', 'camera'], // 从相册或相机选择
+                success: (res) => {
+                    const tempFilePaths = res.tempFilePaths;
+                    // 根据类型将图片添加到对应的数组
+                    if (type === 'photoTips') {
+                        this.photoTipsImages = [...this.photoTipsImages, ...tempFilePaths];
+                    } else if (type === 'face2face') {
+                        this.face2faceImages = [...this.face2faceImages, ...tempFilePaths];
+                    }
+                },
+                fail: (err) => {
+                    console.error('选择图片失败:', err);
+                    uni.showToast({
+                        title: '选择图片失败',
+                        icon: 'none'
+                    });
+                }
+            });
+        },
+        // 图片预览方法
+        previewImageHandler(image, type) {
+            let currentIndex = 0;
+            let imageList = [];
+
+            // 根据类型获取对应的图片数组
+            if (type === 'photoTips') {
+                imageList = this.photoTipsImages;
+                currentIndex = imageList.indexOf(image);
+            } else if (type === 'face2face') {
+                imageList = this.face2faceImages;
+                currentIndex = imageList.indexOf(image);
+            }
+
+            // 使用uni-app的图片预览API
+            uni.previewImage({
+                current: currentIndex, // 当前预览图片的索引
+                urls: imageList, // 需要预览的图片链接列表
+                loop: true, // 是否可循环预览
+                longPressActions: {
+                    itemList: ['保存图片'],
+                    success: function (data) {
+                        // 保存图片到相册
+                        uni.saveImageToPhotosAlbum({
+                            filePath: imageList[data.tapIndex],
+                            success: function () {
+                                uni.showToast({
+                                    title: '保存成功',
+                                    icon: 'success'
+                                });
+                            },
+                            fail: function (err) {
+                                console.error('保存图片失败:', err);
+                                uni.showToast({
+                                    title: '保存失败',
+                                    icon: 'none'
+                                });
+                            }
+                        });
+                    }
+                }
+            });
+        },
+
+        // 价格输入回调
+        onPriceInput(e) {
+            // 确保价格是数字且不小于0
+            let value = Number(e.detail.value);
+            if (isNaN(value)) value = 0;
+            value = Math.max(0, value);
+            this.approvedPrice = value;
+        },
+
+        // 快速调整价格
+        quickChangePrice(amount) {
+            let newPrice = this.approvedPrice + amount;
+            // 确保价格不小于0
+            newPrice = Math.max(0, newPrice);
+            this.approvedPrice = newPrice;
+        },
+
+        // 上传高清细节图
+        uploadDetailImage() {
+            uni.chooseImage({
+                count: 9 - this.detailImages.length, // 最多选择9张
+                sizeType: ['compressed'], // 压缩图片
+                sourceType: ['album', 'camera'], // 从相册选择或拍照
+                success: (res) => {
+                    const tempFilePaths = res.tempFilePaths;
+                    // 将图片路径添加到数组中
+                    this.detailImages = [...this.detailImages, ...tempFilePaths];
+                },
+                fail: (err) => {
+                    console.error('选择图片失败:', err);
+                    uni.showToast({
+                        title: '选择图片失败',
+                        icon: 'none'
+                    });
+                }
+            });
+        },
+
+        // 删除高清细节图
+        deleteDetailImage(index) {
+            uni.showModal({
+                title: '提示',
+                content: '确定要删除这张图片吗？',
+                success: (res) => {
+                    if (res.confirm) {
+                        this.detailImages.splice(index, 1);
+                    }
+                }
+            });
+        },
+
+        // 复制所有高清细节图链接
+        copyAllDetailImages() {
+            if (this.detailImages.length === 0) {
+                uni.showToast({
+                    title: '暂无图片可复制',
+                    icon: 'none'
+                });
+                return;
+            }
+
+            const imageUrls = this.detailImages.join('\n');
+            uni.setClipboardData({
+                data: imageUrls,
+                success: () => {
+                    uni.showToast({
+                        title: '复制成功',
+                        icon: 'success'
+                    });
+                },
+                fail: () => {
+                    uni.showToast({
+                        title: '复制失败',
+                        icon: 'none'
+                    });
+                }
+            });
+        },
+
+        // 下一步按钮点击事件
+        handleNextClick() {
+            // 创建一个只包含被勾选checkbox对应数据的对象
+            const result = {};
+
+            // 检查联系师傅
+            if (this.selectedCheckbox.includes('contact师傅')) {
+                result.contactPhone = this.formData.contactPhone;
+            }
+
+            // 检查师傅拍图技巧
+            if (this.selectedCheckbox.includes('photo技巧')) {
+                result.photoTips = this.formData.photoTips;
+                result.photoTipsImages = this.photoTipsImages;
+            }
+
+            // 检查到达客户面对面
+            if (this.selectedCheckbox.includes('face2face')) {
+                result.face2faceNotes = this.formData.face2faceNotes;
+                result.face2faceImages = this.face2faceImages;
+            }
+
+            // 添加其他非checkbox控制的字段
+            result.approvedPrice = this.approvedPrice;
+            result.detailImages = this.detailImages;
+            // result.selectedCheckbox = this.selectedCheckbox;
+
+            // 打印结果对象
+            // console.log('当前界面的选中值：', result);
+
+            this.$emit('handleNextClick', {
+                nowPage: 'formTwo',
+                form: result,
+            })
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+// 导入公共样式
+@import './common.scss';
+
+// 主样式
+.page-container {
+    box-sizing: border-box;
+    padding: 0;
+    background-color: map-get($colors, bg);
+    font-family: map-get($font, family);
+    -webkit-font-smoothing: map-get($font, smoothing);
+    font-smoothing: map-get($font, smoothing);
+}
+
+.card_wrap {
+    @include card;
+    margin-bottom: 20rpx;
+
+    &:hover {
+        @include shadow(2);
+    }
+
+    &.checklist-card,
+    &.price-card,
+    &.detail-image-card {
+        margin-top: 20rpx;
+    }
+}
+
+.address-section {
+    padding: map-get($sizes, padding-sm) map-get($sizes, padding);
+}
+
+.address-header {
+    @include flex-center;
+    margin-bottom: map-get($sizes, margin-sm);
+    padding-bottom: map-get($sizes, margin-sm);
+    border-bottom: 1rpx solid map-get($colors, border);
+
+    .location-icon {
+        margin-right: map-get($sizes, margin-xs);
+        background-color: map-get($colors, primary-light);
+        padding: map-get($sizes, icon-padding);
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
+    .address-title {
+        margin-left: 16rpx;
+    }
+}
+
+.address-content {
+    .address-text {
+        @include font-styles;
+    }
+}
+
+// 复选框卡片样式
+.checklist-card {
+    margin-top: 20rpx;
+}
+
+.checklist-section {
+    padding: map-get($sizes, padding-sm) map-get($sizes, padding);
+    display: block;
+    /* 明确设置为块级元素，避免任何flex影响 */
+}
+
+.checklist-item {
+    display: block;
+    /* 明确设置为块级元素，确保垂直排列 */
+    width: 100%;
+    /* 确保占满整个宽度 */
+    padding: 16rpx 0;
+    border-bottom: 1rpx solid map-get($colors, border);
+    margin-bottom: 0;
+    /* 移除任何可能的margin影响 */
+
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+        border-bottom: none;
+    }
+
+    // 复选框和文本的容器
+    .checkbox-text-container {
+        @include flex-center;
+        display: flex;
+        align-items: center;
+    }
+}
+
+// u-checkbox样式调整
+u-checkbox {
+    margin-right: 16rpx;
+    flex-shrink: 0;
+    vertical-align: middle;
+}
+
+// 隐藏原生checkbox样式
+.checkbox {
+    display: none;
+}
+
+.checklist-text {
+    @include font-styles;
+    vertical-align: middle;
+}
+
+// 输入框样式
+.checklist-input,
+.checklist-textarea {
+    margin-top: 12rpx;
+    margin-left: 56rpx; // 与复选框对齐
+    width: calc(100% - 72rpx); // 减去左边距和额外的16rpx边距，确保不超出边界
+    max-width: calc(100% - 72rpx); // 确保最大宽度也不超出
+    box-sizing: border-box; // 确保padding和border不影响总宽度
+    border-radius: 8rpx;
+    border: 1rpx solid #e5e7eb;
+    padding: 12rpx 16rpx;
+    font-size: 28rpx;
+    background-color: #f9fafb;
+    transition: all 0.2s ease;
+
+    &:focus {
+        border-color: map-get($colors, primary);
+        background-color: #ffffff;
+        box-shadow: 0 0 0 2rpx rgba(16, 140, 255, 0.1);
+    }
+}
+
+.checklist-textarea {
+    min-height: 160rpx;
+    resize: vertical;
+    vertical-align: top;
+    padding-top: 16rpx;
+    padding-bottom: 16rpx;
+}
+
+// 解决textarea文本和placeholder居中问题
+// 直接穿透u-input组件的所有层级
+:deep(.checklist-textarea) {
+    & .u-input__textarea {
+        display: block !important;
+        height: auto !important;
+        min-height: 160rpx !important;
+        padding: 16rpx !important;
+        text-align: left !important;
+    }
+
+    & .u-input__textarea textarea {
+        display: block !important;
+        width: 100% !important;
+        height: auto !important;
+        min-height: 128rpx !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        text-align: left !important;
+        vertical-align: top !important;
+        line-height: 1.5 !important;
+        resize: vertical !important;
+    }
+
+    // 确保输入的文本顶部对齐
+    & .u-input__textarea textarea:focus {
+        text-align: left !important;
+        vertical-align: top !important;
+    }
+
+    // 针对不同浏览器的placeholder样式
+    & .u-input__textarea textarea::-webkit-input-placeholder {
+        text-align: left !important;
+        vertical-align: top !important;
+        line-height: 1.5 !important;
+    }
+
+    & .u-input__textarea textarea::-moz-placeholder {
+        text-align: left !important;
+        vertical-align: top !important;
+        line-height: 1.5 !important;
+    }
+
+    & .u-input__textarea textarea:-ms-input-placeholder {
+        text-align: left !important;
+        vertical-align: top !important;
+        line-height: 1.5 !important;
+    }
+
+    & .u-input__textarea textarea::placeholder {
+        text-align: left !important;
+        vertical-align: top !important;
+        line-height: 1.5 !important;
+    }
+}
+
+// 上传按钮容器样式
+.upload-btn-container {
+    margin-top: 16rpx;
+    margin-left: 56rpx;
+    display: inline-block;
+}
+
+// 上传按钮样式
+.upload-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12rpx;
+    font-size: 30rpx;
+    padding: 20rpx 40rpx;
+    border-radius: 8rpx;
+    background-color: map-get($colors, bg);
+    border: 2rpx dashed map-get($colors, primary);
+    color: map-get($colors, primary);
+    transition: all 0.3s ease;
+    cursor: pointer;
+    min-width: 200rpx;
+    box-sizing: border-box;
+
+    &:hover {
+        background-color: map-get($colors, primary-light);
+        border-color: darken(map-get($colors, primary), 10%);
+        transform: translateY(-2rpx);
+        box-shadow: 0 4rpx 16rpx rgba(16, 140, 255, 0.15);
+    }
+
+    &:active {
+        transform: translateY(0);
+    }
+}
+
+.upload-btn-text {
+    color: map-get($colors, primary);
+    @include font-styles($size: small, $weight: medium);
+}
+
+// 图片列表样式
+.image-list {
+    margin-top: 16rpx;
+    margin-left: 56rpx;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16rpx;
+    padding-bottom: 8rpx;
+}
+
+// 图片项样式
+.image-item {
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 8rpx;
+    overflow: hidden;
+    background-color: map-get($colors, bg);
+    @include shadow(1);
+    transition: all 0.3s ease;
+    cursor: pointer;
+    position: relative;
+
+    &:hover {
+        @include shadow(2);
+        transform: translateY(-2rpx);
+    }
+}
+
+// 图片缩略图样式
+.image-thumb {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+// 价格卡片样式
+.price-card {
+    margin-top: 20rpx;
+}
+
+.price-section {
+    padding: map-get($sizes, padding-sm) map-get($sizes, padding);
+}
+
+.detail-image-card {
+    margin-top: 20rpx;
+}
+
+.detail-image-section {
+    padding: map-get($sizes, padding-sm) map-get($sizes, padding);
+}
+
+.detail-image-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: map-get($sizes, margin-sm);
+    padding-bottom: map-get($sizes, margin-sm);
+    border-bottom: 1rpx solid map-get($colors, border);
+}
+
+.detail-image-title {
+    @include font-styles($size: content, $weight: bold, $color: primary);
+}
+
+.copy-btn {
+    border-radius: 20rpx;
+    border: 1rpx solid #007AFF;
+    background-color: transparent;
+    color: #007AFF;
+    @include font-styles($size: small, $weight: regular);
+    padding: 0 24rpx;
+    height: 64rpx;
+    line-height: 64rpx;
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.3s ease;
+
+    &:hover {
+        background-color: rgba(0, 122, 255, 0.05);
+    }
+
+    &:active {
+        transform: scale(0.98);
+    }
+}
+
+.detail-image-upload-container {
+    margin-top: 20rpx;
+}
+
+.detail-image-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20rpx;
+}
+
+.detail-image-item {
+    position: relative;
+    width: 200rpx;
+    height: 200rpx;
+    box-sizing: border-box;
+}
+
+.detail-delete-btn {
+    position: absolute;
+    top: -10rpx;
+    right: -10rpx;
+    width: 40rpx;
+    height: 40rpx;
+    background-color: #ff4d4f;
+    color: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include font-styles($size: small, $weight: bold);
+    z-index: 10;
+}
+
+.detail-upload-btn {
+    width: 200rpx;
+    height: 200rpx;
+    border: 8rpx dashed #ddd;
+    border-radius: 30rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f9f9f9;
+    box-sizing: border-box;
+}
+
+.price-picker-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20rpx 0;
+}
+
+// 快速操作按钮样式
+.quick-actions {
+    display: flex;
+    justify-content: center;
+    gap: 16rpx;
+    margin: 16rpx 0;
+    width: 100%;
+    max-width: 800rpx;
+}
+
+.quick-btn {
+    flex: 1;
+    border-radius: 12rpx;
+    font-size: 36rpx;
+    padding: 32rpx 0;
+    min-width: 0;
+    text-align: center;
+    color: #ffffff;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+}
+
+.quick-btn.increase {
+    background-color: #e6f7ed;
+    color: #00b42a;
+}
+
+.quick-btn.decrease {
+    background-color: #fff1f0;
+    color: #f53f3f;
+}
+
+.quick-btn:hover {
+    opacity: 0.9;
+    transform: translateY(-2rpx);
+    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
+}
+
+// 数字选择器容器
+.number-box-container {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    margin: 20rpx 0;
+    width: 100%;
+    justify-content: center;
+    white-space: nowrap;
+}
+
+// 价格输入框盒子
+.price-input-box {
+    flex: 1;
+    max-width: 800rpx;
+    background-color: #f5f7fa;
+    border: 2rpx solid #e5e7eb;
+    border-radius: 12rpx;
+    padding: 20rpx 24rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    white-space: nowrap;
+    min-width: 300rpx;
+}
+
+// 价格标签样式
+.price-label {
+    font-size: 36rpx;
+    color: map-get($colors, text-primary);
+    font-weight: 700;
+    min-width: 120rpx;
+    flex-shrink: 0;
+    margin-right: 16rpx;
+    letter-spacing: 1rpx;
+    font-family: map-get($font, family);
+}
+
+// 价格输入框样式
+.price-input {
+    width: 100%;
+    height: auto;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    text-align: right;
+    font-size: 48rpx;
+    font-weight: 600;
+    color: map-get($colors, text-primary);
+    padding: 0 10rpx;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: textfield;
+    /* 使用等宽字体显示带斜线的0 */
+    font-family: Consolas, 'Courier New', monospace, -apple-system, BlinkMacSystemFont;
+}
+
+// 移除数字输入框的上下箭头
+.price-input::-webkit-inner-spin-button,
+.price-input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.price-input:focus {
+    background-color: transparent;
+}
+</style>

pages/orderDetailNew/components/picComp.vue

@@ -0,0 +1,38 @@
+<template>
+    <view class="pic-comp-container">
+        <image class="picComp" :src="src" mode="aspectFill" @click="click"></image>
+    </view>
+</template>
+<script>
+export default {
+    props: {
+        src: {
+            type: String,
+            default: ''
+        }
+    },
+    methods: {
+        click() {
+            uni.previewImage({
+                urls: [this.src],
+                current: this.src
+            })
+        }
+    }
+}
+</script>
+<style scoped>
+.pic-comp-container {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-radius: 30rpx;
+}
+
+.picComp {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover;
+}
+</style>

pages/orderDetailNew/index.vue

@@ -0,0 +1,94 @@
+<template>
+    <view>
+        <!-- 正确使用 u-navbar 的具名插槽 -->
+        <u-navbar :autoBack="true" :placeholder="true" v-hideNav>
+            <template v-slot:center>
+                <view class="slot-wrap">
+                    <text @click="handleBrandClick" class="brand">Hermes</text>
+                    <text class="divider">|</text>
+                    <text @click="handleModelClick" class="model">Birkin 30</text>
+                    <text class="divider">|</text>
+                    <text @click="handlePriceClick" class="price">¥125,000</text>
+                </view>
+            </template>
+            <template v-slot:right>
+                <view class="slot-right">
+                    <image src="/static/icons/plus.png" mode="scaleToFill" />
+                    <text>加一单</text>
+                </view>
+            </template>
+        </u-navbar>
+
+        <orderDetailNewView />
+
+    </view>
+</template>
+
+<script>
+import orderDetailNewView from './components/orderDetailNewView.vue'
+export default {
+    name: 'CustomNavbar',
+    components: {
+        orderDetailNewView
+    },
+    methods: {
+        handleBrandClick() {
+            console.log('点击了品牌')
+        },
+        handleModelClick() {
+            console.log('点击了型号')
+        },
+        handlePriceClick() {
+            console.log('点击了价格')
+        }
+    }
+}
+</script>
+
+<style scoped>
+.slot-wrap {
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    border-radius: 40rpx;
+    padding: 10rpx 20rpx;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+}
+
+.brand {
+    font-weight: bold;
+    color: #333;
+    font-size: 28rpx;
+}
+
+.divider {
+    margin: 0 15rpx;
+    color: #ddd;
+    font-size: 28rpx;
+}
+
+.model {
+    color: #666;
+    font-size: 26rpx;
+}
+
+.price {
+    color: blueviolet;
+    font-weight: bold;
+    font-size: 28rpx;
+}
+
+.slot-right {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 20rpx;
+    color: blueviolet;
+
+    image {
+        width: 30rpx;
+        height: 30rpx;
+    }
+}
+</style>

pages/orderForm/index.vue

@@ -1,15 +1,49 @@
 <template>
 	<view class="oder_form_wrap">
-		<u-navbar placeholder :autoBack="true" title="发单表单" @rightClick="handleNavSaveClick">
-			<view class="u-nav-slot" slot="right">
-				保存
-			</view>
+		<u-navbar placeholder :autoBack="true" title="发单表单">
+
 		</u-navbar>
 
 		<view class="form_wrap">
-			<u--form labelPosition="left" labelWidth="100" :model="form" :rules="rules" ref="form" class="form_wrap"
+			<u--form labelPosition="top" labelWidth="100" :model="form" :rules="rules" ref="form" class="form_wrap"
 				:errorType="'toast'">
-				<u-form-item label="省市区" borderBottom>
+				<u-form-item label="物品品牌" prop="brand">
+					<ld-select :list="brandDict" label-key="dictLabel" value-key="dictValue" placeholder="请选择物品品牌"
+						v-model="form.brand" :border="false"></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-form-item>
+				</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>
+
+				<u-form-item label="省市区">
 					<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion">
 						<view class="region-picker">
 							<template v-if="form.province">
@@ -24,39 +58,38 @@
 					</pick-regions>
 				</u-form-item>
 
-				<u-form-item label="详细地址" prop="address" borderBottom>
+				<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" borderBottom>
+				<u-form-item label="上门时间" prop="visitTime">
 					<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" borderBottom>
+				<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>
 
-				<u-form-item label="物品品牌" prop="brand" borderBottom>
-					<ld-select :list="brandDict" label-key="dictLabel" value-key="dictValue" placeholder="请选择物品品牌"
-						v-model="form.brand" :border="false"></ld-select>
-					<u-icon slot="right" name="arrow-right"></u-icon>
-				</u-form-item>
 
-				<u-form-item label="价格范围" prop="priceRange" borderBottom>
+
+				<u-form-item label="价格范围" prop="priceRange">
 					<u--input v-model="form.priceRange" placeholder="请输入价格范围" border="none"></u--input>
 				</u-form-item>
 
-				<u-form-item label="战术选择" prop="tactic" borderBottom>
-					<ld-select :list="tacticDict" label-key="dictLabel" value-key="dictValue" placeholder="请选择战术"
-						v-model="form.tactic" :border="false"></ld-select>
-					<u-icon slot="right" name="arrow-right"></u-icon>
+				<u-form-item label="战术选择" prop="tactic">
+					<view class="tactic-buttons">
+						<view v-for="item in tacticDict" :key="item.dictValue" class="tactic-button"
+							:class="{ 'active': form.tactic === item.dictValue }" @click="form.tactic = item.dictValue">
+							{{ item.dictLabel }}
+						</view>
+					</view>
 				</u-form-item>
 
-				<u-form-item label="补充说明" prop="remarks" borderBottom>
-					<u--textarea v-model="form.remarks" placeholder="请输入补充说明" count confirmType="done"></u--textarea>
+				<u-form-item label="备注消息" prop="remarks">
+					<u--textarea v-model="form.remarks" placeholder="请输入备注消息" count confirmType="done"></u--textarea>
 				</u-form-item>
 
 			</u--form>
@@ -81,289 +114,406 @@
 				@update:fileList="updateOtherFiles" tip-text="上传其他相关文件"></order-file-upload>
 		</view>
 
+		<u-button @click="handleNavSaveClick" type="primary">提交订单</u-button>
+
 	</view>
 </template>
 
 <script>
-	import orderFileUpload from '@/components/order-file-upload/order-file-upload.vue'
-	import dateTimePicker from "@/components/dateTimePicker/dateTimePicker.vue"
-	import ldSelect from "@/components/ld-select/ld-select.vue"
-	export default {
-		components: {
-			orderFileUpload,
-			dateTimePicker,
-			ldSelect
-		},
-		data() {
-			return {
-				defaultRegion: ['广东省', '广州市', '番禺区'],
-				categoryDict: [],
-				tacticDict: [],
-				brandDict: [],
-				
-				sendFormId : undefined,
-
-				form: {
-					clueId: '',
-					sendDate: '',
-					website: '',
-					item: '',
-					phone: '',
-					address: '',
-					visitTime: '',
-					remarks: '',
-					category: '',
-					brand: '',
-					priceRange: '',
-					tactic: '',
-					// 地区信息
-					province: '',
-					city: '',
-					area: '',
-					// 附件列表
-					chatAttachmentList: [], // 聊天记录附件
-					quoteAttachmentList: [], // 报价附件
-					hdImageAttachmentList: [], // 高清图附件
-					otherAttachmentList: [] // 其他附件
-				},
+import orderFileUpload from '@/components/order-file-upload/order-file-upload.vue'
+import dateTimePicker from "@/components/dateTimePicker/dateTimePicker.vue"
+import ldSelect from "@/components/ld-select/ld-select.vue"
+export default {
+	components: {
+		orderFileUpload,
+		dateTimePicker,
+		ldSelect
+	},
+	data() {
+		return {
+			defaultRegion: ['广东省', '广州市', '番禺区'],
+			categoryDict: [],
+			tacticDict: [],
+			brandDict: [],
+
+			sendFormId: undefined,
+
+			form: {
+				clueId: '',
+				sendDate: '',
+				website: '',
+				item: '',
+				phone: '',
+				wechat: '',
+				address: '',
+				visitTime: '',
+				remarks: '',
+				category: '',
+				brand: '',
+				model: '',
+				price: '',
+				priceRange: '',
+				tactic: '',
+				// 地区信息
+				province: '',
+				city: '',
+				area: '',
+				// 附件列表
+				chatAttachmentList: [], // 聊天记录附件
+				quoteAttachmentList: [], // 报价附件
+				hdImageAttachmentList: [], // 高清图附件
+				otherAttachmentList: [] // 其他附件
+			},
 
-				rules: {
-					sendDate: {
-						type: 'string',
-						required: true,
-						message: '请输入发单日期',
-						trigger: ['blur', 'change']
-					},
-					website: {
-						type: 'url',
-						message: '请输入正确的网址格式',
-						trigger: ['blur', 'change']
-					},
-					item: {
-						type: 'string',
-						required: true,
-						message: '请输入物品描述',
-						trigger: ['blur', 'change']
-					},
-					phone: {
-						type: 'string',
-						required: true,
-						message: '请输入联系电话',
-						trigger: ['blur', 'change']
-					},
-					address: {
-						type: 'string',
-						required: true,
-						message: '请输入详细地址',
-						trigger: ['blur', 'change']
-					},
-					visitTime: {
-						type: 'string',
-						required: true,
-						message: '请输入上门时间',
-						trigger: ['blur', 'change']
-					},
-					category: {
-						type: 'string',
-						required: true,
-						message: '请选择类型',
-						trigger: ['blur', 'change']
-					},
-					brand: {
-						type: 'string',
-						required: true,
-						message: '请选择物品品牌',
-						trigger: ['blur', 'change']
-					},
-					tactic: {
-						type: 'string',
-						required: true,
-						message: '请选择战术',
-						trigger: ['blur', 'change']
-					}
+			rules: {
+				sendDate: {
+					type: 'string',
+					required: true,
+					message: '请输入发单日期',
+					trigger: ['blur', 'change']
+				},
+				model: {
+					type: 'string',
+					required: true,
+					message: '请输入型号',
+					trigger: ['blur', 'change']
+				},
+				price: {
+					type: 'string',
+					required: true,
+					message: '请输入实价',
+					trigger: ['blur', 'change']
+				},
+				website: {
+					type: 'url',
+					message: '请输入正确的网址格式',
+					trigger: ['blur', 'change']
+				},
+				item: {
+					type: 'string',
+					required: true,
+					message: '请输入物品描述',
+					trigger: ['blur', 'change']
+				},
+				wechat: {
+					type: 'string',
+					required: true,
+					message: '请输入客户微信',
+					trigger: ['blur', 'change']
+				},
+				phone: {
+					type: 'string',
+					required: true,
+					message: '请输入联系电话',
+					trigger: ['blur', 'change']
+				},
+				address: {
+					type: 'string',
+					required: true,
+					message: '请输入详细地址',
+					trigger: ['blur', 'change']
+				},
+				visitTime: {
+					type: 'string',
+					required: true,
+					message: '请输入上门时间',
+					trigger: ['blur', 'change']
+				},
+				category: {
+					type: 'string',
+					required: true,
+					message: '请选择类型',
+					trigger: ['blur', 'change']
+				},
+				brand: {
+					type: 'string',
+					required: true,
+					message: '请选择物品品牌',
+					trigger: ['blur', 'change']
+				},
+				tactic: {
+					type: 'string',
+					required: true,
+					message: '请选择战术',
+					trigger: ['blur', 'change']
 				}
 			}
-		},
-
-		methods: {
-			// 加载表单数据
-			async loadFormData(sendFormId) {
-				try {
-					const res = await uni.$u.api.getClueSendFormVoByOrderId({
-						id: sendFormId
-					});
-					if (res.code === 200) {
-						this.form = res.data;
-					}
-				} catch (error) {
-					console.error('加载表单数据失败:', error);
-					uni.$u.toast('加载表单数据失败');
+		}
+	},
+
+	methods: {
+		// 加载表单数据
+		async loadFormData(sendFormId) {
+			try {
+				const res = await uni.$u.api.getClueSendFormVoByOrderId({
+					id: sendFormId
+				});
+				if (res.code === 200) {
+					this.form = res.data;
 				}
-			},
+			} catch (error) {
+				console.error('加载表单数据失败:', error);
+				uni.$u.toast('加载表单数据失败');
+			}
+		},
 
-			// 获取地区选择
-			handleGetRegion(region) {
-				const [provinceData, cityData, areaData] = region;
-				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;
-				}
-			},
+		// 获取地区选择
+		handleGetRegion(region) {
+			const [provinceData, cityData, areaData] = region;
+			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;
+			}
+		},
 
-			// 更新各类附件
-			updateChatFiles(fileList) {
-				this.form.chatAttachmentList = fileList;
-			},
+		// 更新各类附件
+		updateChatFiles(fileList) {
+			this.form.chatAttachmentList = fileList;
+		},
 
-			updateQuoteFiles(fileList) {
-				this.form.quoteAttachmentList = fileList;
-			},
+		updateQuoteFiles(fileList) {
+			this.form.quoteAttachmentList = fileList;
+		},
 
-			updateHdImageFiles(fileList) {
-				this.form.hdImageAttachmentList = fileList;
-			},
+		updateHdImageFiles(fileList) {
+			this.form.hdImageAttachmentList = fileList;
+		},
 
-			updateOtherFiles(fileList) {
-				this.form.otherAttachmentList = fileList;
-			},
+		updateOtherFiles(fileList) {
+			this.form.otherAttachmentList = fileList;
+		},
 
-			// 文件变化处理
-			handleFileChange(data) {
-				console.log('文件上传变化:', data);
-			},
-			// 获取字典数据
-			async getDicts() {
-				try {
-					const [categoryRes, tacticRes, brandRes] = await Promise.all([
-						this.$getDicts('crm_form_category'),
-						this.$getDicts('crm_form_tactic'),
-						this.$getDicts('crm_form_brand')
-					]);
-
-					this.categoryDict = categoryRes;
-					this.tacticDict = tacticRes;
-					this.brandDict = brandRes;
-				} catch (error) {
-					console.error('获取字典数据失败:', error);
-				}
-			},
+		// 文件变化处理
+		handleFileChange(data) {
+			console.log('文件上传变化:', data);
+		},
+		// 获取字典数据
+		async getDicts() {
+			try {
+				const [categoryRes, tacticRes, brandRes] = await Promise.all([
+					this.$getDicts('crm_form_category'),
+					this.$getDicts('crm_form_tactic'),
+					this.$getDicts('crm_form_brand')
+				]);
+
+				this.categoryDict = categoryRes;
+				this.tacticDict = tacticRes;
+				this.brandDict = brandRes;
+			} catch (error) {
+				console.error('获取字典数据失败:', error);
+			}
+		},
 
-			// 处理保存
-			async handleNavSaveClick() {
-				try {
-					// 表单验证
-					await this.$refs.form.validate();
-
-					if (this.form.id) {
-						const updatedForm = {
-							id: this.form.id,
-							item: this.form.item,
-							phone: this.form.phone,
-							authenticateUserId: this.form.authenticateUserId,
-							category: this.form.category,
-							brand: this.form.brand,
-							idCard: this.form.idCard,
-							customName: this.form.customName,
-							bankCardNumber: this.form.bankCardNumber,
-							bankName: this.form.bankName,
-							paymentMethod: this.form.paymentMethod,
-							visitTime: this.form.visitTime,
-							remarks: this.form.remarks,
-							priceRange: this.form.priceRange,
-							tactic: this.form.tactic
-						}
-						await uni.$u.api.updateClueOrderForm(updatedForm);
-						uni.$emit('updateSendFormSuccess');
-						uni.$u.toast('发单记录更新成功');
-					} else {
-						// 合并所有附件
-						const allAttachments = [
-							...this.form.chatAttachmentList,
-							...this.form.quoteAttachmentList,
-							...this.form.hdImageAttachmentList,
-							...this.form.otherAttachmentList
-						];
-						
-						// 准备提交数据
-						const submitData = {
-							...this.form,
-							uploadList: allAttachments
-						};
-						await uni.$u.api.saveClueOrderForm(submitData);
-						uni.$u.toast('发单记录添加成功');
+		// 处理保存
+		async handleNavSaveClick() {
+			try {
+				// 表单验证
+				await this.$refs.form.validate();
+
+				if (this.form.id) {
+					const updatedForm = {
+						clueId: this.form.clueId,
+						model: this.form.model,
+						price: this.form.price,
+						wechat: this.form.wechat,
+						id: this.form.id,
+						item: this.form.item,
+						phone: this.form.phone,
+						authenticateUserId: this.form.authenticateUserId,
+						category: this.form.category,
+						brand: this.form.brand,
+						idCard: this.form.idCard,
+						customName: this.form.customName,
+						bankCardNumber: this.form.bankCardNumber,
+						bankName: this.form.bankName,
+						paymentMethod: this.form.paymentMethod,
+						visitTime: this.form.visitTime,
+						remarks: this.form.remarks,
+						priceRange: this.form.priceRange,
+						tactic: this.form.tactic
 					}
+					await uni.$u.api.updateClueOrderForm(updatedForm);
+					uni.$emit('updateSendFormSuccess');
+					uni.$u.toast('发单记录更新成功');
+				} else {
+					// 合并所有附件
+					const allAttachments = [
+						...this.form.chatAttachmentList,
+						...this.form.quoteAttachmentList,
+						...this.form.hdImageAttachmentList,
+						...this.form.otherAttachmentList
+					];
+
+					// 准备提交数据
+					const submitData = {
+						...this.form,
+						uploadList: allAttachments
+					};
+					await uni.$u.api.saveClueOrderForm(submitData);
+					uni.$u.toast('发单记录添加成功');
+				}
 
-					// 延迟返回
-					setTimeout(() => {
-						uni.navigateBack();
-					}, 1500);
+				// 延迟返回
+				setTimeout(() => {
+					uni.navigateBack();
+				}, 1500);
 
-				} catch (error) {
-					console.error('保存失败:', error);
-					if (error.message) {
-						uni.$u.toast(error.message);
-					}
+			} catch (error) {
+				console.error('保存失败:', error);
+				if (error.message) {
+					uni.$u.toast(error.message);
 				}
 			}
-		},
-
-		onLoad(option) {
-			const clueId = option.clueId;
-			this.sendFormId = option.sendFormId;
-			this.form.clueId = clueId;
-			this.getDicts();
-			if (option.sendFormId) {
-				this.loadFormData(option.sendFormId);
-			}
+		}
+	},
+
+	onLoad(option) {
+		console.log('option', option);
+		const clueId = option.clueId;
+		this.sendFormId = option.sendFormId;
+		this.form.clueId = clueId;
+		this.getDicts();
+		if (option.sendFormId) {
+			this.loadFormData(option.sendFormId);
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.oder_form_wrap {
-		background-color: #f5f5f5;
-		min-height: 100vh;
-		padding-bottom: 100rpx;
-		padding-top: 10px;
-	}
-
-	.form_wrap {
-		background-color: #fff;
-		border-radius: 16rpx;
-		overflow: hidden;
-	}
-
-	.upload_area {
-		padding: 0 20rpx;
-		margin: 20rpx 0;
-	}
+.oder_form_wrap {
+	background-color: #f5f5f5;
+	min-height: 100vh;
+	padding-bottom: 100rpx;
+	padding-top: 10px;
+	padding-left: 20rpx;
+	padding-right: 20rpx;
+}
+
+.form_wrap {
+	/* 移除整体背景和边框，让每个form-item成为独立卡片 */
+}
+
+.upload_area {
+	padding: 0 0rpx;
+	margin: 20rpx 0;
+}
+
+.bottom_btn {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 20rpx;
+	background: #fff;
+	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
+}
+
+.region-picker {
+	width: 100%;
+}
+
+::v-deep .u-form-item {
+	/* 移除底部边框 */
+	border-bottom: none;
+	/* 添加卡片样式 */
+	// background-color: #fff;
+	border-radius: 16rpx;
+	/* 添加阴影效果 */
+	/* 添加外边距 */
+	margin-bottom: 20rpx;
+	/* 添加内边距 */
+	padding: 20rpx;
+	/* 确保内容不会溢出 */
+	overflow: hidden;
+}
+
+.form_card {
+	background-color: #fff;
+	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+
+}
+
+::v-deep .u-form-item__body {
+	padding: 10rpx 0rpx;
+}
+
+
+::v-deep .u-form-item__body__left__content__label {
+	color: rgb(107 114 128 / 1) !important;
+	font-size: 0.75rem;
+	line-height: 1rem;
+	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));
+	font-weight: 700;
+	font-size: 1rem;
+	line-height: 1.5rem;
+	height: 100rpx;
+}
+
+.tactic-buttons {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 10rpx;
+	width: 100%;
+}
+
+.tactic-button {
+	position: relative;
+	border-width: 3rpx;
+	border-style: solid;
+	border-color: #e5e7eb;
+	width: 30%;
+	height: 80rpx;
+	line-height: 80rpx;
+	text-align: center;
+	border-radius: 30rpx;
+	background-color: #f5f5f5;
+	color: rgb(107 114 128 / 1);
+	font-size: 28rpx;
+	transition: all 0.3s ease;
+	font-weight: 700;
+}
+
+.tactic-button.active {
+	border-color: rgb(29 78 216 / 1);
+	color: rgb(29 78 216 / 1);
+}
+
+.tactic-button::after {
+	content: '';
+
+	position: absolute;
+	border-width: 5rpx;
+	border-style: solid;
+	border-color: #ffffff;
+	top: 4%;
+	right: -12%;
+	transform: translate(-50%, -50%);
+	width: 25rpx;
+	height: 25rpx;
+	border-radius: 50%;
+	background-color: rgb(29 78 216 / 1);
+	opacity: 0;
+	transition: all 0.3s ease;
+}
+
+.tactic-button.active::after {
+	opacity: 1;
+}
+
+.u-textarea{
+	background-color: #f5f5f5;
+}
 
-	.bottom_btn {
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		padding: 20rpx;
-		background: #fff;
-		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
-	}
-
-	.region-picker {
-		width: 100%;
-	}
-
-	::v-deep .u-form-item__body {
-		padding: 20rpx 40rpx;
-	}
-
-	::v-deep .u-form-item {
-		border-bottom: 1rpx solid #f5f5f5;
-	}
-
-	::v-deep .u-form-item:last-child {
-		border-bottom: none;
-	}
 </style>

pages/person/index.vue

@@ -14,7 +14,7 @@
 			<view class="header_wrap">
 				<view class="header_top_wrap">
 					<view class="header_info_left">
-						<u-avatar :src="$avatar(userInfo.avatar)" size="100rpx"></u-avatar>
+						<u-avatar @click="handleAvatarClick" :src="$avatar(userInfo.avatar)" size="100rpx"></u-avatar>
 						<view class="info_wrap">
 							<view class="info_top">
 								<text class="follow_name">{{userInfo.userName}}</text>
@@ -40,9 +40,9 @@
 							<image src="@/static/parson/icon-myMessage.png" mode=""></image>
 							<text>我的消息</text>
 						</navigator>
-						<navigator url='/pages/profile/index' open-type="navigate" class="menu_item" hover-class="none">
+						<navigator url='/pages/acceptOrderOrder/index' open-type="navigate" class="menu_item" hover-class="none">
 							<image src="@/static/parson/icon-mycase.png" mode=""></image>
-							<text>个人资料</text>
+							<text>接单中心</text>
 						</navigator>
 						<navigator url='/pages/privateClue/index' open-type="switchTab" class="menu_item" hover-class="none">
 							<image src="@/static/parson/clue.png" mode=""></image>
@@ -195,6 +195,12 @@
 					});
 				}
 			},
+			handleAvatarClick(){
+				//跳转个人资料
+				uni.navigateTo({
+					url: "/pages/profile/index"
+				})
+			}
 		},
 		mounted() {
 			if (this.navbarInitTop == 0) {

store/modules/user.js

@@ -28,13 +28,16 @@ export default {
 		netConfig: {
 			// http://59.42.9.166:9520/proxy
 			// http://10.0.7.100:9500
-			ip : "https://crm.nanjingshiyu.com/prod-api", // ip
+			// ip : "https://crm.nanjingshiyu.com/prod-api", // ip
+			ip : "https://crmtest.nanjingshiyu.com/prod-api", // 测试环境ip
+			// ip : "/api", // 测试环境ip
+			// ip : "http://47.113.184.101", // 测试环境ip
 			// ip: "http://172.16.7.200", // ip
 			// port: "9500", // 端口
 			isCallOff : "2", // 开关
 			folder: "", // 文件夹
 			webRtcIp : "", // 呼叫中心的ip
-			webRtcPort : "", // 呼叫中心的端口
+			webRtcPort : "", // 呼叫中心的端口s
 		},
 		systemList: [],