新增接单中心顶部修改信息功能

pages/orderDetailNew/components/CustomModal.vue

@@ -0,0 +1,122 @@
+<template>
+    <u-modal :show="visible" :show-cancel-button="false" :show-confirm-button="false">
+        <view class="modal-content">
+            <view class="modal-header">
+                <text class="modal-title">{{ title }}</text>
+            </view>
+            <view class="modal-body">
+                <u-input v-model="localValue" :placeholder="placeholder" class="modal-input"></u-input>
+            </view>
+            <view class="modal-footer">
+                <text @click="handleCancel" class="btn cancel-btn">取消</text>
+                <text @click="handleConfirm" class="btn confirm-btn">确定</text>
+            </view>
+        </view>
+    </u-modal>
+</template>
+
+<script>
+export default {
+    name: 'CustomModal',
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+        value: {
+            type: String,
+            default: ''
+        },
+        placeholder: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            localValue: this.value
+        }
+    },
+    watch: {
+        value(newVal) {
+            this.localValue = newVal
+        },
+        visible(newVal) {
+            if (newVal) {
+                this.localValue = this.value
+            }
+        }
+    },
+    methods: {
+
+        handleCancel() {
+            this.$emit('cancel')
+        },
+        handleConfirm() {
+            this.$emit('confirm', this.localValue)
+        }
+    }
+}
+</script>
+
+<style scoped>
+.modal-content {
+    display: flex;
+    flex-direction: column;
+    gap: 30rpx;
+    padding: 20rpx;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: center;
+    padding: 10rpx 0;
+}
+
+.modal-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+}
+
+.modal-body {
+    padding: 10rpx 0;
+}
+
+.modal-input {
+    border: 2rpx solid #e0e0e0;
+    border-radius: 10rpx;
+    padding: 20rpx;
+    font-size: 28rpx;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: space-between;
+    gap: 20rpx;
+    padding: 10rpx 0;
+}
+
+.btn {
+    flex: 1;
+    text-align: center;
+    padding: 20rpx;
+    border-radius: 10rpx;
+    font-size: 28rpx;
+    font-weight: 500;
+}
+
+.cancel-btn {
+    background-color: #f5f5f5;
+    color: #666;
+}
+
+.confirm-btn {
+    background-color: blueviolet;
+    color: white;
+}
+</style>

pages/orderDetailNew/components/pageFour.vue

@@ -2,7 +2,7 @@
     <view class="page-container">
         <!-- 入库信息卡片 -->
         <view class="card_wrap">
-            <view class="address-section">
+            <u--form labelPosition="top" :model="warehouseInfo" :rules="rules" ref="form" class="address-section">
                 <view class="address-header">
                     <u-icon name="car-fill" size="36rpx" color="#108cff" class="location-icon"></u-icon>
                     <text class="address-title">入库信息</text>
@@ -10,70 +10,79 @@
                 <!-- 编码和快递单号同一行 -->
                 <u-row class="info-row" justify="space-between">
                     <u-col span="4.5">
-                        <view class="info-label">编码</view>
-                        <u--input v-model="warehouseInfo.accountHolder" placeholder="请输入编码" class="info-input" />
+                        <u-form-item label="编码" prop="accountHolder">
+                            <u--input v-model="warehouseInfo.accountHolder" placeholder="请输入编码" class="info-input" />
+                        </u-form-item>
                     </u-col>
                     <u-col span="4.5">
-                        <view class="info-label">快递单号</view>
-                        <u--input v-model="warehouseInfo.bankName" placeholder="请输入快递单号" class="info-input" />
+                        <u-form-item label="快递单号" prop="bankName">
+                            <u--input v-model="warehouseInfo.bankName" placeholder="请输入快递单号" class="info-input" />
+                        </u-form-item>
                     </u-col>
                     <u-col span="2">
-                        <view class="info-label">物流图片</view>
-                        <view class="image-uploader" @click="selectImage">
-                            <u-icon v-if="!warehouseInfo.uploadedImage" name="camera-fill" size="48rpx" color="#909399"
-                                class="camera-icon"></u-icon>
-                            <image v-else :src="warehouseInfo.uploadedImage" mode="aspectFill" class="image-preview">
-                            </image>
-                        </view>
+                        <u-form-item label="物流图片" prop="uploadedImage">
+                            <view class="image-uploader" @click="selectImage">
+                                <u-icon v-if="!warehouseInfo.uploadedImage" name="camera-fill" size="48rpx"
+                                    color="#909399" class="camera-icon"></u-icon>
+                                <image v-else :src="warehouseInfo.uploadedImage" mode="aspectFill"
+                                    class="image-preview">
+                                </image>
+                            </view>
+                        </u-form-item>
                     </u-col>
                 </u-row>
 
                 <!-- 单独一行的收单物品 -->
                 <u-row class="info-row">
                     <u-col span="12">
-                        <view class="info-label">收单物品</view>
-                        <u--input v-model="warehouseInfo.item" placeholder="请输入收单物品" class="info-input" />
+                        <u-form-item label="收单物品" prop="item">
+                            <u--input v-model="warehouseInfo.item" placeholder="请输入收单物品" class="info-input" />
+                        </u-form-item>
                     </u-col>
                 </u-row>
 
                 <!-- 查码费和表款同一行 -->
                 <u-row class="info-row" justify="space-between">
                     <u-col span="5.8">
-                        <view class="info-label">查码费</view>
-                        <u--input v-model="warehouseInfo.checkCodeFee" placeholder="请输入查码费" class="info-input"
-                            type="number" />
+                        <u-form-item label="查码费">
+                            <u--input v-model="warehouseInfo.checkCodeFee" placeholder="请输入查码费" class="info-input"
+                                type="number" />
+                        </u-form-item>
                     </u-col>
                     <u-col span="5.8">
-                        <view class="info-label">表款</view>
-                        <u--input v-model="warehouseInfo.tableFee" placeholder="请输入表款" class="info-input"
-                            type="number" />
+                        <u-form-item label="表款">
+                            <u--input v-model="warehouseInfo.tableFee" placeholder="请输入表款" class="info-input"
+                                type="number" />
+                        </u-form-item>
                     </u-col>
                 </u-row>
 
                 <!-- 维修金额和毛业绩同一行 -->
                 <u-row class="info-row" justify="space-between">
                     <u-col span="5.8">
-                        <view class="info-label">维修金额</view>
-                        <u--input v-model="warehouseInfo.repairAmount" placeholder="请输入维修金额" class="info-input"
-                            type="number" />
+                        <u-form-item label="维修金额">
+                            <u--input v-model="warehouseInfo.repairAmount" placeholder="请输入维修金额" class="info-input"
+                                type="number" />
+                        </u-form-item>
                     </u-col>
                     <u-col span="5.8">
-                        <view class="info-label">毛业绩</view>
-                        <u--input v-model="warehouseInfo.grossPerformance" placeholder="请输入毛业绩" class="info-input"
-                            type="number" />
+                        <u-form-item label="毛业绩">
+                            <u--input v-model="warehouseInfo.grossPerformance" placeholder="请输入毛业绩" class="info-input"
+                                type="number" />
+                        </u-form-item>
                     </u-col>
                 </u-row>
 
                 <!-- 收单备注 -->
                 <u-row class="info-row">
                     <u-col span="12">
-                        <view class="info-label">收单备注</view>
-                        <u--textarea v-model="warehouseInfo.remarks" placeholder="请输入收单备注" class="info-input"
-                            confirmType="done" rows="4" />
-
+                        <u-form-item label="收单备注">
+                            <u--textarea v-model="warehouseInfo.remarks" placeholder="请输入收单备注" class="info-input"
+                                confirmType="done" rows="4" />
+                        </u-form-item>
                     </u-col>
                 </u-row>
-            </view>
+            </u--form>
         </view>
 
         <!-- 新添加的卡片 -->
@@ -87,85 +96,94 @@
                         <text>添加</text>
                     </u-button>
                 </view>
-            </view>
-            <!-- 分成信息表格 -->
-            <view class="split-table">
-                <u-row class="split-table-header">
-                    <u-col span="2">
-                        <text class="header-text">关联</text>
-                    </u-col>
-                    <u-col span="2">
-                        <text class="header-text">账户类型</text>
-                    </u-col>
-                    <u-col span="2">
-                        <text class="header-text">分成人</text>
-                    </u-col>
-                    <u-col span="2">
-                        <text class="header-text">比例(%)</text>
-                    </u-col>
-                    <u-col span="2">
-                        <text class="header-text">归属公司</text>
-                    </u-col>
-                    <u-col span="2" class="action-column">
-                        <text class="header-text">操作</text>
-                    </u-col>
-                </u-row>
-                <u-row v-for="(item, index) in profitSharingList" :key="item.id" class="split-table-row">
-                    <u-col span="2">
-                        <view class="table-cell">
-                            <select v-model="item.association" class="custom-select">
-                                <option value="">无</option>
-                                <option v-for="option in associationOptions" :key="option" :value="option">
-                                    {{ option }}
-                                </option>
-                            </select>
-                        </view>
-                    </u-col>
-                    <u-col span="2">
-                        <view class="table-cell">
-                            <view :class="['account-type', item.accountType === 'frontend' ? 'frontend' : 'backend']"
-                                @click="toggleAccountType(item)" style="cursor: pointer;">
-                                {{ item.accountType === 'frontend' ? '前' : '后' }}
+                <!-- 分成信息表格 -->
+                <view class="split-table">
+                    <u-row class="split-table-header">
+                        <u-col span="2">
+                            <text class="header-text">关联</text>
+                        </u-col>
+                        <u-col span="2">
+                            <text class="header-text">账户类型</text>
+                        </u-col>
+                        <u-col span="2">
+                            <text class="header-text">分成人</text>
+                        </u-col>
+                        <u-col span="2">
+                            <text class="header-text">比例(%)</text>
+                        </u-col>
+                        <u-col span="2">
+                            <text class="header-text">归属公司</text>
+                        </u-col>
+                        <u-col span="2" class="action-column">
+                            <text class="header-text">操作</text>
+                        </u-col>
+                    </u-row>
+                    <u-row v-for="(item, index) in profitSharingList" :key="item.id" class="split-table-row">
+                        <u-col span="2">
+                            <view class="table-cell">
+                                <select v-model="item.association" class="custom-select">
+                                    <option value="">无</option>
+                                    <option v-for="option in associationOptions" :key="option" :value="option">
+                                        {{ option }}
+                                    </option>
+                                </select>
                             </view>
-                        </view>
-                    </u-col>
-                    <u-col span="2">
-                        <view class="table-cell">
-                            <select v-model="item.person" class="custom-select">
-                                <option value="">无</option>
-                                <option v-for="person in personOptions" :key="person" :value="person">
-                                    {{ person }}
-                                </option>
-                            </select>
-                        </view>
-                    </u-col>
-                    <u-col span="2">
-                        <view class="table-cell">
-                            <u--input v-model="item.percentage" type="number" class="percentage-input"
-                                @input="handlePercentageInput(item)" min="0" max="100" precision="0" />
-                        </view>
-                    </u-col>
-                    <u-col span="2">
-                        <view class="table-cell">
-                            <view class="radio-wrapper" @click="toggleBelongToCompany(item)">
-                                <view :class="['radio-circle', item.belongToCompany ? 'active' : '']">
-                                    <u-icon v-if="item.belongToCompany" name="checkmark" size="20rpx"
-                                        color="#fff"></u-icon>
+                        </u-col>
+                        <u-col span="2">
+                            <view class="table-cell">
+                                <view
+                                    :class="['account-type', item.accountType === 'frontend' ? 'frontend' : 'backend']"
+                                    @click="toggleAccountType(item)" style="cursor: pointer;">
+                                    {{ item.accountType === 'frontend' ? '前' : '后' }}
                                 </view>
                             </view>
-                        </view>
-                    </u-col>
-                    <u-col span="2" class="action-column">
-                        <view class="table-cell">
-                            <u-button type="error" plain shape="circle" size="mini" @click="deleteSplit(index)"
-                                :disabled="profitSharingList.length <= 1">
-                                <u-icon name="trash" size="20rpx" color="#ff6b6b"></u-icon>
-                            </u-button>
-                        </view>
-                    </u-col>
-                </u-row>
+                        </u-col>
+                        <u-col span="2">
+                            <view class="table-cell">
+                                <select v-model="item.person" class="custom-select">
+                                    <option value="">无</option>
+                                    <option v-for="person in personOptions" :key="person" :value="person">
+                                        {{ person }}
+                                    </option>
+                                </select>
+                            </view>
+                        </u-col>
+                        <u-col span="2">
+                            <view class="table-cell">
+                                <u--input v-model="item.percentage" type="number" class="percentage-input"
+                                    @input="handlePercentageInput(item)" min="0" max="100" precision="0" />
+                            </view>
+                        </u-col>
+                        <u-col span="2">
+                            <view class="table-cell">
+                                <view class="radio-wrapper" @click="toggleBelongToCompany(item)">
+                                    <view :class="['radio-circle', item.belongToCompany ? 'active' : '']">
+                                        <u-icon v-if="item.belongToCompany" name="checkmark" size="20rpx"
+                                            color="#fff"></u-icon>
+                                    </view>
+                                </view>
+                            </view>
+                        </u-col>
+                        <u-col span="2" class="action-column">
+                            <view class="table-cell">
+                                <u-button type="error" plain shape="circle" size="mini" @click="deleteSplit(index)"
+                                    :disabled="profitSharingList.length <= 1">
+                                    <u-icon name="trash" size="20rpx" color="#ff6b6b"></u-icon>
+                                </u-button>
+                            </view>
+                        </u-col>
+                    </u-row>
+                </view>
             </view>
         </view>
+
+        <!-- 确认入库按钮 -->
+        <div class="confirm-button-container">
+            <u-button type="success" @click="confirmWarehouseEntry" style="border-radius: 11px;">
+                <u-icon name="checkmark-circle-fill" size="28rpx" color="#fff"></u-icon>
+                <text style="margin-left: 8rpx;">确认入库</text>
+            </u-button>
+        </div>
     </view>
 </template>
 
@@ -199,7 +217,34 @@ export default {
             // 关联选项列表
             associationOptions: ['选项1', '选项2', '选项3'],
             // 分成人选项列表
-            personOptions: ['人员A', '人员B', '人员C']
+            personOptions: ['人员A', '人员B', '人员C'],
+            // 表单验证规则
+            rules: {
+                accountHolder: {
+                    type: 'string',
+                    required: true,
+                    message: '请输入编码',
+                    trigger: []
+                },
+                bankName: {
+                    type: 'string',
+                    required: true,
+                    message: '请输入快递单号',
+                    trigger: []
+                },
+                item: {
+                    type: 'string',
+                    required: true,
+                    message: '请输入收单物品',
+                    trigger: []
+                },
+                uploadedImage: {
+                    type: 'string',
+                    required: true,
+                    message: '请上传物流图片',
+                    trigger: []
+                }
+            }
         };
     },
     methods: {
@@ -277,9 +322,55 @@ export default {
         // 切换归属公司状态
         toggleBelongToCompany(item) {
             item.belongToCompany = !item.belongToCompany;
+        },
+        // 确认入库方法
+        confirmWarehouseEntry() {
+            // 表单校验
+            this.$refs.form.validate().then(() => {
+                // 表单验证通过后，进行分成信息的自定义验证
+                if (this.validateProfitSharing()) {
+                    console.log(this.warehouseInfo, this.profitSharingList);
+                }
+            }).catch(() => {
+                // 表单验证失败，不执行后续操作
+            });
+        },
+        // 分成信息校验方法
+        validateProfitSharing() {
+            // 校验分成信息
+            for (let i = 0; i < this.profitSharingList.length; i++) {
+                const item = this.profitSharingList[i];
+                if (!item.person.trim()) {
+                    uni.showToast({
+                        title: `第${i + 1}行请选择分成人`,
+                        icon: 'none'
+                    });
+                    return false;
+                }
+
+                if (item.percentage <= 0 || item.percentage > 100) {
+                    uni.showToast({
+                        title: `第${i + 1}行分成比例必须在1-100之间`,
+                        icon: 'none'
+                    });
+                    return false;
+                }
+            }
+
+            // 校验分成比例总和,总和必须是100%
+            // const totalPercentage = this.profitSharingList.reduce((sum, item) => sum + Number(item.percentage), 0);
+            // if (totalPercentage !== 100) {
+            //     uni.showToast({
+            //         title: '分成比例总和必须为100%',
+            //         icon: 'none'
+            //     });
+            //     return false;
+            // }
+
+            return true;
         }
     }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -346,6 +437,13 @@ export default {
     }
 }
 
+// 防止表单label换行
+::v-deep .u-form-item__body__left__content__label {
+    white-space: nowrap;
+}
+
+
+
 // 图片上传样式
 .image-uploader {
     width: 100%;
@@ -495,7 +593,7 @@ export default {
     height: 50rpx;
     border-radius: 0;
     border: 1rpx solid #e5e7eb;
-    padding: 0 25rpx 0 12rpx;
+    text-align: center;
     /* 增加右侧内边距，为自定义箭头留出空间 */
     @include font-styles($size: tiny, $weight: regular, $color: secondary);
     background-color: #fff;
@@ -506,7 +604,6 @@ export default {
     -o-appearance: none !important;
     cursor: pointer;
     /* 使用自定义SVG箭头 */
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23909399' d='M6 8l-4-4h8z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 8rpx center;
     background-size: 12rpx 12rpx;
@@ -552,6 +649,8 @@ export default {
     text-align: center;
     background-color: #f9f9f9;
     color: #606266;
+    text-align: center;
+    padding: 0rpx !important;
 }
 
 /* 账户类型标签样式 */
@@ -618,6 +717,15 @@ export default {
     background-color: #67c23a;
 }
 
+/* 确认入库按钮样式 */
+.confirm-button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 40rpx 0;
+    margin-top: 20rpx;
+}
+
 /* 响应式布局调整 */
 @media screen and (max-width: 750rpx) {
     .split-table {

pages/orderDetailNew/index.vue

@@ -4,11 +4,11 @@
         <u-navbar :autoBack="true" :placeholder="true" v-hideNav>
             <template v-slot:center>
                 <view class="slot-wrap">
-                    <text @click="handleBrandClick" class="brand">Hermes</text>
+                    <text @click="handleBrandClick" class="brand">{{ topInfo.brand }}</text>
                     <text class="divider">|</text>
-                    <text @click="handleModelClick" class="model">Birkin 30</text>
+                    <text @click="handleModelClick" class="model">{{ topInfo.model }}</text>
                     <text class="divider">|</text>
-                    <text @click="handlePriceClick" class="price">¥125,000</text>
+                    <text @click="handlePriceClick" class="price">¥{{ topInfo.price }}</text>
                 </view>
             </template>
             <template v-slot:right>
@@ -21,25 +21,70 @@
 
         <orderDetailNewView />
 
+        <!-- 通用模态窗 -->
+        <custom-modal :visible="modalVisible" :title="modalConfig.title" :value="modalConfig.value"
+            :placeholder="modalConfig.placeholder" @cancel="handleModalCancel" @confirm="handleModalConfirm" />
     </view>
 </template>
 
 <script>
 import orderDetailNewView from './components/orderDetailNewView.vue'
+import CustomModal from './components/CustomModal.vue'
 export default {
     name: 'CustomNavbar',
     components: {
-        orderDetailNewView
+        orderDetailNewView,
+        CustomModal
+    },
+    data() {
+        return {
+            topInfo: {
+                brand: 'Hermes',
+                model: 'Birkin 30',
+                price: '125,000'
+            },
+            modalVisible: false,
+            currentEditField: '',
+            modalConfig: {
+                title: '',
+                value: '',
+                placeholder: ''
+            }
+        }
     },
     methods: {
         handleBrandClick() {
-            console.log('点击了品牌')
+            this.openModal('brand', '请输入品牌', this.topInfo.brand, '请输入品牌')
         },
         handleModelClick() {
-            console.log('点击了型号')
+            this.openModal('model', '请输入型号', this.topInfo.model, '请输入型号')
         },
         handlePriceClick() {
-            console.log('点击了价格')
+            this.openModal('price', '请输入价格', this.topInfo.price, '请输入价格')
+        },
+        openModal(field, title, value, placeholder) {
+            this.currentEditField = field
+            this.modalConfig = {
+                title,
+                value,
+                placeholder
+            }
+            this.modalVisible = true
+        },
+        handleModalInput(value) {
+            this.modalConfig.value = value
+        },
+        handleModalCancel() {
+            this.modalVisible = false
+            this.currentEditField = ''
+        },
+        handleModalConfirm(newValue) {
+            if (this.currentEditField) {
+                this.topInfo[this.currentEditField] = newValue
+            }
+
+            this.modalVisible = false
+            this.currentEditField = ''
         }
     }
 }