解决样式消失问题

pages/orderDetailNew/components/orderDetailNewView.vue

@@ -5,8 +5,7 @@
             <pageOne @handleNextClick="handleNextClick" :orderDetail="detail" :orderId="orderId" />
         </view>
         <view class="page-item" v-show="activeIndex === 1">
-            <pageTwo @handleNextClick="handleNextClick" :orderDetail="detail" :orderId="orderId"
-                :followUpList="followUpList" />
+            <pageTwo @handleNextClick="handleNextClick" :orderDetail="detail" :orderId="orderId" :followUpList="followUpList" />
         </view>
         <view class="page-item" v-show="activeIndex === 2">
             <pageThree @handleNextClick="handleNextClick" :orderDetail="detail" @handleNeedSave="handleNeedSave"
@@ -68,7 +67,7 @@ export default {
             //订单细节
             orderDetail: {},
             // 跟进记录
-            followUpList: {},
+            followUpList: [],
         }
     },
     name: 'OrderDetailNewView',
@@ -253,8 +252,17 @@ export default {
         async getFollowUpList() {
             try {
                 const res = await uni.$u.api.getDuplicateOrderFollowListByClueId({ clueId: this.orderDetail.clueId });
-                console.log('这里是跟进记录', res)
-                this.followUpList = res.data || [];
+                const data = res.data || {};
+
+                const followUpList = [];
+                for (const key in data) {
+                    const element = data[key];
+                    followUpList.push(...element)
+                }
+                this.followUpList = followUpList;
+
+
+
             } catch (error) {
                 console.error("获取跟进记录失败:", error);
                 uni.$u.toast("获取跟进记录失败");

pages/orderDetailNew/components/pageTwo.vue

@@ -32,7 +32,7 @@
                             type="textarea" placeholder="请输入拍图技巧" rows="3" class="checklist-textarea" />
                         <!-- 上传图片按钮 -->
                         <view v-if="selectedCheckbox.includes('photo技巧')" class="upload-btn-container">
-                            <div class="upload-btn" @click="getImageUrl('')">
+                            <div class="upload-btn" @click="handleUpload('photoTips')">
                                 <u-icon name="camera" size="32rpx" color="#108cff"></u-icon>
                                 <text class="upload-btn-text">上传图片</text>
                             </div>
@@ -55,7 +55,7 @@
                             type="textarea" placeholder="请输入备注信息" rows="3" class="checklist-textarea" />
                         <!-- 上传图片按钮 -->
                         <view v-if="selectedCheckbox.includes('face2face')" class="upload-btn-container">
-                            <div class="upload-btn" @click="getImageUrl('')">
+                            <div class="upload-btn" @click="handleUpload('face2faceNotes')">
                                 <u-icon name="camera" size="32rpx" color="#108cff"></u-icon>
                                 <text class="upload-btn-text">上传图片</text>
                             </div>
@@ -143,9 +143,10 @@ export default {
             default: '',
         },
         followUpList: {
-            type: Object,
-            default: () => { },
-        }
+            type: Array,
+            default: () => [],
+        },
+
     },
     watch: {
         orderDetail: {
@@ -157,12 +158,22 @@ export default {
             },
             deep: true,
         },
+        followUpList: {
+            handler(newVal) {
+                if (newVal) {
+                    this.followUpListInner = newVal.map(item => (item.content || ''));
 
+                    //判断内容是否含有上面的三个选择
+                    this.checkFollowUpContent();
+                }
+            },
+            deep: true,
+        },
     },
-
     components: {
         picComp
     },
+
     data() {
         return {
             selectedCheckbox: [],
@@ -185,12 +196,10 @@ export default {
             detailImages: [],// 高清细节图数组
             // 绑定订单相关
             bindList: [],// 待绑定的图片列表,
+            followUpListInner: [],// 跟进记录数组
         };
     },
     methods: {
-
-
-
         // 价格输入回调
         onPriceInput(e) {
             // 确保价格是数字且不小于0
@@ -249,6 +258,63 @@ export default {
                 form: result,
             })
         },
+        checkFollowUpContent() {
+            // 检查跟进记录是否包含上面的三个选择
+            this.followUpListInner.forEach(item => {
+                console.log('这里是跟进记录', item)
+                // 判断内容是否含有联系师傅，师傅拍图技巧，到达客户面对面，如果包含的话就上面对应的box就打上对勾
+                if (item.includes('联系师傅')) {
+                    this.selectedCheckbox.push('contact师傅');
+                    // 联系师傅的手机号，已：为分割，取后面的内容
+                    const phone = item.split('联系师傅：')[1] || '';
+                    this.formData.contactPhone = phone;
+                }
+                if (item.includes('师傅拍图技巧')) {
+                    this.selectedCheckbox.push('photo技巧');
+                    // 师傅拍图技巧的内容，已：为分割，取后面的内容
+                    const photoTips = item.split('师傅拍图技巧：')[1] || '';
+                    this.formData.photoTips = photoTips;
+                }
+                if (item.includes('到达客户面对面')) {
+                    this.selectedCheckbox.push('face2face');
+                    // 到达客户面对面的内容，已：为分割，取后面的内容
+                    const face2faceNotes = item.split('到达客户面对面：')[1] || '';
+                    this.formData.face2faceNotes = face2faceNotes;
+                }
+            })
+        },
+
+        // 处理上传图片,上传图片的话就赋值给对应的数组
+        async handleUpload(field) {
+            uni.chooseImage({
+                count: 9, // 最多选择1张
+                sizeType: ['compressed'], // 压缩图片
+                sourceType: ['album', 'camera'], // 从相册选择或拍照
+                success: async (res) => {
+                    const tempFilePath = res.tempFilePaths
+                    console.log('上传的图片路径:', tempFilePath)
+                    // 把blob数组上传到服务器，然后返回路径
+                    try {
+                        const res = await Promise.all(tempFilePath.map(filePath => uni.$u.api.uploadFile(filePath)));
+                        console.log('上传的图片路径数组是:', res.map(item => item.data.fileUrl))
+                        // 把返回的路径赋值给对应的数组
+                        if (field == 'photoTips') {
+                            this.photoTipsImages = [...this.photoTipsImages, ...res.map(item => item.data.fileUrl)];
+                        } else if (field == 'face2face') {
+                            this.face2faceImages = [...this.face2faceImages, ...res.map(item => item.data.fileUrl)];
+                        } 
+                    } catch (error) {
+                        console.error('上传失败:', error);
+                        uni.$u.toast('上传失败');
+                    }
+                },
+                fail: (err) => {
+                    console.error('选择图片失败:', err)
+                }
+            })
+        },
+
+
 
 
 

pages/orderDetailNew/mixin/imgUploadAndDownLoad.js

@@ -138,29 +138,29 @@ export default {
             this.bindList = [];
         },
         //选择图图片》上传》返回路径,适用于page2选项里面的上传图片
-        // getImageUrl() {
-        //     uni.chooseImage({
-        //         count: 9, // 最多选择1张
-        //         sizeType: ['compressed'], // 压缩图片
-        //         sourceType: ['album', 'camera'], // 从相册选择或拍照
-        //         success: async (res) => {
-        //             const tempFilePath = res.tempFilePaths
-        //             console.log('上传的图片路径:', tempFilePath)
-        //             // 把blob数组上传到服务器，然后返回路径
-        //             try {
-        //                 const res = await Promise.all(tempFilePath.map(filePath => uni.$u.api.uploadFile(filePath)));
-        //                 console.log('上传的图片路径数组是:', res.map(item => item.data.fileUrl))
-        //                 // 把数组返回给调用者
-        //                 return res.map(item => item.data.fileUrl)
-        //             } catch (error) {
-        //                 console.error('上传失败:', error);
-        //                 uni.$u.toast('上传失败');
-        //             }
-        //         },
-        //         fail: (err) => {
-        //             console.error('选择图片失败:', err)
-        //         }
-        //     })
-        // }
+        getImageUrl() {
+            uni.chooseImage({
+                count: 9, // 最多选择1张
+                sizeType: ['compressed'], // 压缩图片
+                sourceType: ['album', 'camera'], // 从相册选择或拍照
+                success: async (res) => {
+                    const tempFilePath = res.tempFilePaths
+                    console.log('上传的图片路径:', tempFilePath)
+                    // 把blob数组上传到服务器，然后返回路径
+                    try {
+                        const res = await Promise.all(tempFilePath.map(filePath => uni.$u.api.uploadFile(filePath)));
+                        console.log('上传的图片路径数组是:', res.map(item => item.data.fileUrl))
+                        // 把数组返回给调用者
+                        return res.map(item => item.data.fileUrl)
+                    } catch (error) {
+                        console.error('上传失败:', error);
+                        uni.$u.toast('上传失败');
+                    }
+                },
+                fail: (err) => {
+                    console.error('选择图片失败:', err)
+                }
+            })
+        }
     }
 }

pages/pagereceivecenter/pagereceivecenter.vue

@@ -1,9 +1,9 @@
 <script>
-import orderCard from "./compounts/orderCard.vue";
+// import orderCard from "./compounts/orderCard.vue";
 
 export default {
     components: {
-        orderCard,
+        // orderCard,
     },
     data() {
         return {
@@ -18,9 +18,9 @@ export default {
     onLoad() {
         //初始调用
         this.getOrderList();
-        uni.navigateTo({
-            url: `/pages/orderDetailNew/index?orderId=5464&item=测试发单&type=undefined&clueId=1973381744953516033`,
-        })
+        // uni.navigateTo({
+        //     url: `/pages/orderDetailNew/index?orderId=5464&item=测试发单&type=undefined&clueId=1973381744953516033`,
+        // })
     },
     methods: {
         //获取列表数据
@@ -83,12 +83,13 @@ export default {
             }
         },
 
+        
         //滑动加载
         scrolltolower() {
             console.log('到底了');
-            if (this.orderList.length >= this.page.total) {
-                return uni.$u.toast('没有更多了');
-            }
+            // if (this.orderList.length >= this.page.total) {
+            //     return uni.$u.toast('没有更多了');
+            // }
             this.page.pageNum++;
             this.getOrderList();
         },
@@ -104,12 +105,64 @@ export default {
         <view class="scrollViewContainer">
             <scroll-view class="scrollView" scroll-y @scrolltolower="scrolltolower">
                 <transition-group name="order-move" tag="div">
-                    <orderCard v-for="item in orderList" :key="item.receiptId + item.id" :order="item"
+                    <!-- <orderCard v-for="item in orderList" :key="item.receiptId + item.id" :order="item"
                         @handleBtnClick="handleBtnClick">
-                    </orderCard>
+                    </orderCard> -->
+                    <view class="orderCard" v-for="item in orderList"  :key="item.receiptId + item.id">
+                        <view class="bandAndPrice">
+                            <view class="bandName">{{ item.itemBrand || '暂无品牌' }}</view>
+                            <view class="price">￥{{ item.priceRange }}</view>
+                        </view>
+
+                        <view class="mainLind">
+                            <view class="mainLindImg">
+                                <image :src="'/static/acceptOrder/orderCardPic.jpg'" alt="" />
+                            </view>
+                            <view class="mainLindInfo">
+                                <view class="itemName">{{ item.item || '暂无项目' }}</view>
+                                <view>发单人:{{ item.createNickName || '未知' }}</view>
+                                <view>{{ item.sendDate || '暂无时间' }}</view>
+                            </view>
+                        </view>
+
+                        <view class="tags">
+                            <view class="tag" v-for="(tag, index) in item.tags" :key="index"
+                                :style="{ backgroundColor: tag.color, opacity: 0.8 }">
+                                {{ tag.name }}</view>
+
+                        </view>
+
+                        <view class="Btns">
+
+                            <view class="btnGroup"
+                                v-if="item && (item.status == '1' || item.status == null || item.status === undefined)">
+                                <view class="card-button" @click="handleBtnClick('acceptOrder', item)">立即接单</view>
+                                <view class=" card-button isBusy" @click="handleBtnClick('isBusy', item)">在忙</view>
+                            </view>
+
+                            <view class="btnGroup"
+                                v-if="item && (item.status == '2' || item.status == null || item.status === undefined)">
+                                <view class="card-button willFollow" @click="handleBtnClick('willFollow', item)">待跟进
+                                </view>
+                                <view class="card-button isBusy" @click="handleBtnClick('tag', item)">打标签</view>
+                            </view>
+
+                            <view class="btnGroup"
+                                v-if="item && (item.status == '3' || item.status == null || item.status === undefined)">
+                                <view class="card-button share" @click="handleBtnClick('share', item)">一键分享</view>
+                            </view>
+
+                            <view class="btnGroup"
+                                v-if="item && (item.status == '4' || item.status == null || item.status === undefined)">
+                                <view class="card-button oneFollow" @click="handleBtnClick('oneFollow', item)">待跟进
+                                </view>
+                            </view>
+
+                        </view>
+                    </view>
                 </transition-group>
                 <view class="hasMore">
-                    {{ orderList.length >= page.total ? '没有更多了~' : '向下滑动加载更多~' }}
+                    <!-- {{ orderList.length >= page.total ? '没有更多了~' : '向下滑动加载更多~' }} -->
                 </view>
             </scroll-view>
         </view>
@@ -152,4 +205,150 @@ export default {
 .order-move-move {
     transition: transform 0.5s ease;
 }
+
+
+
+
+
+
+
+
+
+
+/* 订单卡片主容器 */
+.orderCard {
+    box-sizing: border-box;
+    width: 95%;
+    background-color: #fff;
+    margin: 20rpx auto;
+    border-radius: 20rpx;
+    padding: 20rpx;
+}
+
+/* 品牌和价格区域 */
+.orderCard .bandAndPrice {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* 品牌名称 */
+.orderCard .bandAndPrice .bandName {
+    font-size: 20rpx;
+    font-weight: 700;
+    border: 2px solid #2563EB;
+    padding: 6rpx 12rpx;
+    border-radius: 15rpx;
+    background-color: #EFF6FF;
+    color: #2563EB;
+}
+
+/* 价格 */
+.orderCard .bandAndPrice .price {
+    font-size: 30rpx;
+    font-weight: 700;
+}
+
+/* 主要内容行 */
+.orderCard .mainLind {
+    margin-top: 10rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20rpx;
+}
+
+/* 主要内容行图片容器 */
+.orderCard .mainLind .mainLindImg image {
+    width: 150rpx;
+    height: 150rpx;
+    border-radius: 20rpx;
+}
+
+/* 主要内容行信息容器 */
+.orderCard .mainLind .mainLindInfo {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10rpx;
+    font-size: 24rpx;
+    color: #6b7280;
+}
+
+/* 商品名称 */
+.orderCard .mainLind .mainLindInfo .itemName {
+    font-size: 30rpx;
+    font-weight: 700;
+    color: #374751;
+}
+
+/* 标签区域 */
+.orderCard .tags {
+    display: flex;
+    gap: 10rpx;
+}
+
+/* 单个标签 */
+.orderCard .tags .tag {
+    font-size: 20rpx;
+    font-weight: 700;
+    padding: 6rpx 12rpx;
+    border-radius: 15rpx;
+    background-color: #EFF6FF;
+    color: #fff;
+}
+
+/* 按钮区域 */
+.orderCard .Btns {
+    margin-top: 10rpx;
+}
+
+/* 按钮组 */
+.orderCard .Btns .btnGroup {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20rpx;
+}
+
+/* 卡片按钮基础样式 */
+.orderCard .Btns .btnGroup .card-button {
+    font-size: 24rpx;
+    font-weight: 700;
+    border: 2rpx solid #2563EB;
+    padding: 6rpx 12rpx;
+    border-radius: 15rpx;
+    background-color: #2563EB;
+    color: #fff;
+    width: 45%;
+    text-align: center;
+    cursor: pointer;
+    height: 60rpx;
+    line-height: 60rpx;
+}
+
+/* 忙碌状态按钮 */
+.orderCard .Btns .btnGroup .card-button.isBusy {
+    background-color: #fff;
+    color: #6B7280;
+    border-color: #6B7280;
+}
+
+/* 待跟进状态按钮 */
+.orderCard .Btns .btnGroup .card-button.willFollow {
+    background-color: #EFF6FF;
+    color: #2563EB;
+}
+
+/* 分享按钮 */
+.orderCard .Btns .btnGroup .card-button.share {
+    width: 100%;
+}
+
+/* 单独跟进按钮 */
+.orderCard .Btns .btnGroup .card-button.oneFollow {
+    width: 100%;
+    background-color: #EFF6FF;
+    color: #2563EB;
+}
 </style>