增加接单中心page3page4页面

pages/orderDetailNew/components/pageFour.vue

@@ -1,5 +1,642 @@
 <template>
-    <view>
-        4
+    <view class="page-container">
+        <!-- 入库信息卡片 -->
+        <view class="card_wrap">
+            <view 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>
+                </view>
+                <!-- 编码和快递单号同一行 -->
+                <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-col>
+                    <u-col span="4.5">
+                        <view class="info-label">快递单号</view>
+                        <u--input v-model="warehouseInfo.bankName" placeholder="请输入快递单号" class="info-input" />
+                    </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-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-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-col>
+                    <u-col span="5.8">
+                        <view class="info-label">表款</view>
+                        <u--input v-model="warehouseInfo.tableFee" placeholder="请输入表款" class="info-input"
+                            type="number" />
+                    </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-col>
+                    <u-col span="5.8">
+                        <view class="info-label">毛业绩</view>
+                        <u--input v-model="warehouseInfo.grossPerformance" placeholder="请输入毛业绩" class="info-input"
+                            type="number" />
+                    </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-col>
+                </u-row>
+            </view>
+        </view>
+
+        <!-- 新添加的卡片 -->
+        <view class="card_wrap">
+            <view class="address-section">
+                <view class="address-header">
+                    <u-icon name="list" size="36rpx" color="#108cff" class="location-icon"></u-icon>
+                    <text class="address-title">分成信息</text>
+                    <u-button type="primary" plain shape="circle" size="mini" class="add-button" @click="addSplit">
+                        <u-icon name="plus" size="24rpx" color="#108cff"></u-icon>
+                        <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>
+                        </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>
+                                </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>
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            // 入库信息相关的数据
+            warehouseInfo: {
+                accountHolder: '',
+                bankName: '',
+                item: '',
+                checkCodeFee: '',
+                tableFee: '',
+                repairAmount: '',
+                grossPerformance: '',
+                remarks: '',
+                uploadedImage: ''
+            },
+            // 分成信息相关的数据
+            profitSharingList: [
+                {
+                    id: Date.now() + '_1', // 唯一ID
+                    association: '', // 关联
+                    accountType: 'frontend', // 账户类型：frontend(前端)/backend(后端)
+                    person: '', // 分成人
+                    percentage: 100, // 分成比例
+                    belongToCompany: false // 归属公司
+                }
+            ],
+            // 关联选项列表
+            associationOptions: ['选项1', '选项2', '选项3'],
+            // 分成人选项列表
+            personOptions: ['人员A', '人员B', '人员C']
+        };
+    },
+    methods: {
+        // 选择图片
+        selectImage() {
+            uni.chooseImage({
+                count: 1,
+                sizeType: ['original', 'compressed'],
+                sourceType: ['album', 'camera'],
+                success: (res) => {
+                    const tempFilePath = res.tempFilePaths[0];
+                    this.warehouseInfo.uploadedImage = tempFilePath;
+                }
+            });
+        },
+        // 添加分成行
+        addSplit() {
+            // 生成唯一ID
+            const newId = Date.now() + '_' + (this.profitSharingList.length + 1);
+            // 添加新行
+            this.profitSharingList.push({
+                id: newId,
+                association: '',
+                accountType: 'frontend',
+                person: '',
+                percentage: 0,
+                belongToCompany: false
+            });
+            // 重新计算所有行的比例
+            this.recalculatePercentage();
+        },
+        // 删除分成行
+        deleteSplit(index) {
+            if (this.profitSharingList.length <= 1) {
+                return; // 至少保留一行
+            }
+            // 删除对应行
+            this.profitSharingList.splice(index, 1);
+            // 重新计算所有行的比例
+            this.recalculatePercentage();
+        },
+        // 重新计算分成比例
+        recalculatePercentage() {
+            const totalRows = this.profitSharingList.length;
+            if (totalRows > 0) {
+                // 计算平均比例（向下取整）
+                const avgPercentage = Math.floor(100 / totalRows);
+                // 设置所有行的比例
+                this.profitSharingList.forEach(item => {
+                    item.percentage = avgPercentage;
+                });
+            }
+        },
+        // 切换账户类型
+        toggleAccountType(item) {
+            item.accountType = item.accountType === 'frontend' ? 'backend' : 'frontend';
+        },
+        // 处理百分比输入
+        handlePercentageInput(item) {
+            // 确保输入是数字
+            let value = Number(item.percentage);
+
+            // 验证输入值是否在有效范围内（0-100）
+            if (isNaN(value)) {
+                item.percentage = 0;
+            } else if (value < 0) {
+                item.percentage = 0;
+            } else if (value > 100) {
+                item.percentage = 100;
+            } else {
+                // 确保是整数
+                item.percentage = Math.floor(value);
+            }
+        },
+        // 切换归属公司状态
+        toggleBelongToCompany(item) {
+            item.belongToCompany = !item.belongToCompany;
+        }
+    }
+}
+</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);
+}
+
+.address-section {
+    padding: map-get($sizes, padding-sm) map-get($sizes, padding);
+
+    .u-col {
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    .u-col:first-child {
+        padding-right: 15rpx;
+    }
+
+    .u-col:last-child {
+        padding-left: 15rpx;
+    }
+}
+
+// 表单行样式
+.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 {
+    height: 65rpx;
+    border-radius: 8rpx;
+    border: 1rpx solid #e5e7eb;
+    padding: 20rpx 16rpx;
+    width: 100%;
+    box-sizing: border-box;
+    @include font-styles($size: small, $weight: regular, $color: secondary);
+
+    // textarea特殊样式
+    &[type="textarea"] {
+        min-height: 160rpx;
+        resize: vertical;
+        padding-top: 20rpx;
+        padding-bottom: 20rpx;
+    }
+}
+
+// 图片上传样式
+.image-uploader {
+    width: 100%;
+    height: 65rpx;
+    border: 2rpx dashed #409eff;
+    border-radius: 8rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background-color: #ecf5ff;
+    box-sizing: border-box;
+    overflow: hidden;
+    transition: all 0.3s ease;
+
+    &:hover {
+        border-color: #66b1ff;
+        background-color: #f0f9ff;
+        transform: scale(1.02);
+    }
+}
+
+.camera-icon {
+    margin: 0;
+    font-size: 32rpx;
+    color: #409eff;
+    transition: all 0.3s ease;
+}
+
+.image-uploader:hover .camera-icon {
+    color: #66b1ff;
+    transform: scale(1.1);
+}
+
+.image-preview {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 10rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+
+.image-uploader:hover .image-preview {
+    transform: scale(1.02);
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
+}
+
+.hidden-input {
+    display: none;
+}
+
+// 分成信息卡片样式
+.address-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20rpx;
+
+    .address-title {
+        @include font-styles($size: small, $weight: medium, $color: primary);
+        margin-left: 10rpx;
+    }
+}
+
+.split-content {
+    padding: 10rpx 0;
+}
+
+.split-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15rpx 0;
+    border-bottom: 1rpx solid map-get($colors, border);
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.split-label {
+    @include font-styles($size: tiny, $weight: regular, $color: tertiary);
+}
+
+.split-value {
+    @include font-styles($size: small, $weight: regular, $color: secondary);
+}
+
+.add-button {
+    padding: 0;
+    width: 50rpx;
+    height: 50rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 分成信息表格样式 */
+.split-table {
+    width: 100%;
+    margin-top: 20rpx;
+    background-color: #fff;
+    border-radius: 8rpx;
+    overflow: hidden;
+}
+
+.split-table-header {
+    background-color: #f5f7fa;
+    padding: 15rpx 0;
+    border-bottom: 1rpx solid #e4e7ed;
+}
+
+.split-table-row {
+    padding: 15rpx 0;
+    border-bottom: 1rpx solid #e4e7ed;
+    align-items: center;
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.header-text {
+    @include font-styles($size: tiny, $weight: regular, $color: tertiary);
+    text-align: center;
+    display: block;
+}
+
+.table-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 10rpx;
+    box-sizing: border-box;
+}
+
+.action-column {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 自定义下拉框样式 - 隐藏原生箭头 */
+.custom-select {
+    width: 100%;
+    height: 50rpx;
+    border-radius: 0;
+    border: 1rpx solid #e5e7eb;
+    padding: 0 25rpx 0 12rpx;
+    /* 增加右侧内边距，为自定义箭头留出空间 */
+    @include font-styles($size: tiny, $weight: regular, $color: secondary);
+    background-color: #fff;
+    /* 确保隐藏所有浏览器的原生箭头 */
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+    -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;
+    box-sizing: border-box;
+    position: relative;
+
+    /* 防止箭头在焦点状态下显示 */
+    &:focus {
+        outline: none;
+        border-color: #409eff;
+        box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
+    }
+
+    /* 针对IE/Edge浏览器的特殊处理 */
+    &::-ms-expand {
+        display: none !important;
+    }
+
+    /* 针对某些旧版浏览器的额外处理 */
+    &::-webkit-select-arrow {
+        display: none !important;
+    }
+
+    /* 添加伪元素覆盖可能残留的箭头 */
+    &::after {
+        content: '';
+        position: absolute;
+        right: 8rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 12rpx;
+        height: 12rpx;
+        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-size: 100% 100%;
+        pointer-events: none;
+        z-index: 1;
+    }
+}
+
+/* 百分比输入框样式 */
+.percentage-input {
+    text-align: center;
+    background-color: #f9f9f9;
+    color: #606266;
+}
+
+/* 账户类型标签样式 */
+.account-type {
+    padding: 4rpx 16rpx;
+    border-radius: 12rpx;
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #fff;
+    text-align: center;
+}
+
+.account-type.frontend {
+    background-color: #409eff;
+}
+
+.account-type.backend {
+    background-color: #909399;
+}
+
+/* 调整表格布局，使其更紧凑 */
+.split-table {
+    width: 100%;
+    margin-top: 10rpx;
+}
+
+.split-table-header,
+.split-table-row {
+    padding: 10rpx 0;
+}
+
+.table-cell {
+    padding: 0 5rpx;
+}
+
+/* 调整输入框样式 */
+.percentage-input {
+    width: 80%;
+    height: 50rpx;
+    font-size: 28rpx;
+}
+
+/* 归属公司单选框样式 */
+.radio-wrapper {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.radio-circle {
+    width: 32rpx;
+    height: 32rpx;
+    border-radius: 50%;
+    border: 2rpx solid #dcdfe6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.radio-circle.active {
+    border-color: #67c23a;
+    background-color: #67c23a;
+}
+
+/* 响应式布局调整 */
+@media screen and (max-width: 750rpx) {
+    .split-table {
+        overflow-x: auto;
+    }
+
+    .custom-select {
+        width: 100%;
+    }
+
+    .account-type {
+        padding: 2rpx 10rpx;
+        font-size: 22rpx;
+    }
+}
+
+@media screen and (min-width: 751rpx) {
+    .table-cell {
+        padding: 0 10rpx;
+    }
+}
+</style>

pages/orderDetailNew/components/pageThree.vue

@@ -78,6 +78,49 @@
                 </view>
             </view>
         </view>
+        <u-button @click="handleNextClick" type="primary" size="middle" style="border-radius: 20rpx;">下一步</u-button>
+
+        <u-modal :show="unpaidModelShow" :title="'未收评级'" :showConfirmButton="false">
+            <view class="modal-content">
+                <u-rate v-model="unpaidRating" :count="5" :size="50" active-color="#ff9500"></u-rate>
+                <u-button type="primary" size="large" @click="confirmUnpaid" style="margin-top: 40rpx;">确认未收</u-button>
+            </view>
+        </u-modal>
+
+        <u-modal :show="followUpModelShow" :title="'填写跟进细节'" :showConfirmButton="false">
+            <view class="modal-content">
+                <u--textarea v-model="followUpNotes" placeholder="请输入情况" confirm-type="done"
+                    style="width: 100%; margin-bottom: 30rpx;"></u--textarea>
+                <u-button type="primary" size="large" @click="confirmFollowUp">确认</u-button>
+            </view>
+        </u-modal>
+
+        <u-modal :show="payNowModelShow" :title="'确认支付信息'" :showConfirmButton="false">
+            <view class="modal-content">
+                <!-- 支付金额显示 -->
+                <view class="payment-amount-display">￥0.00</view>
+
+                <!-- 支付信息区域 -->
+                <view class="payment-info-section">
+                    <view class="info-item">
+                        <text class="info-label">收款姓名：</text>
+                        <text class="info-value">{{ paymentInfo.accountHolder || '未填写' }}</text>
+                    </view>
+                    <view class="info-item">
+                        <text class="info-label">开户银行：</text>
+                        <text class="info-value">{{ paymentInfo.bankName || '未填写' }}</text>
+                    </view>
+                    <view class="info-item">
+                        <text class="info-label">银行卡号：</text>
+                        <text class="info-value">{{ paymentInfo.bankAccount || '未填写' }}</text>
+                    </view>
+                </view>
+
+                <!-- 确认转账按钮 -->
+                <u-button type="primary" size="large" @click="confirmTransfer"
+                    style="margin-top: 40rpx;">确认转账</u-button>
+            </view>
+        </u-modal>
     </view>
 </template>
 
@@ -96,6 +139,12 @@ export default {
     },
     data() {
         return {
+            unpaidModelShow: false,
+            followUpModelShow: false,
+            payNowModelShow: false,
+            unpaidRating: 0, // 未收评级
+            followUpNotes: '', // 跟进细节
+
             // 支付信息
             paymentInfo: {
                 accountHolder: '', // 开户人
@@ -227,11 +276,12 @@ export default {
 
         // 下一步按钮点击事件
         handleNextClick() {
+            console.log('page3点击了下一步按钮');
             this.$emit('handleNextClick', {
                 nowPage: 'formThree',
                 form: {
-                    detailImages: this.localDetailImages,
-                    paymentInfo: this.paymentInfo
+                    // detailImages: this.localDetailImages,
+                    // paymentInfo: this.paymentInfo
                 }
             });
         },
@@ -239,16 +289,40 @@ export default {
         // 未收按钮点击事件
         handleUnpaidClick() {
             console.log('点击了未收按钮');
+            this.unpaidModelShow = true;
         },
 
         // 待跟进按钮点击事件
         handleFollowUpClick() {
             console.log('点击了待跟进按钮');
+            this.followUpModelShow = true;
         },
 
         // 立即支付按钮点击事件
         handlePayNowClick() {
             console.log('点击了立即支付按钮');
+            this.payNowModelShow = true;
+        },
+
+        // 确认未收按钮点击事件
+        confirmUnpaid() {
+            console.log('确认未收，评分：', this.unpaidRating);
+            this.unpaidModelShow = false;
+            // 可以在这里添加提交评分的逻辑
+        },
+
+        // 确认跟进细节按钮点击事件
+        confirmFollowUp() {
+            console.log('确认跟进细节：', this.followUpNotes);
+            this.followUpModelShow = false;
+            // 可以在这里添加提交跟进细节的逻辑
+        },
+
+        // 确认转账按钮点击事件
+        confirmTransfer() {
+            console.log('确认转账');
+            this.payNowModelShow = false;
+            // 可以在这里添加转账确认的逻辑
         }
     }
 }
@@ -520,4 +594,57 @@ export default {
     font-weight: 500;
     color: inherit;
 }
+
+/* 模态框内容样式 */
+.modal-content {
+    width: 100%;
+    padding: 40rpx 20rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* 支付金额显示样式 */
+.payment-amount-display {
+    font-size: 64rpx;
+    font-weight: bold;
+    color: #108cff;
+    text-align: center;
+    margin-bottom: 40rpx;
+    width: 100%;
+}
+
+/* 支付信息区域样式 */
+.payment-info-section {
+    width: 100%;
+    background-color: #f5f7fa;
+    border: 2rpx solid #e5e7eb;
+    border-radius: 12rpx;
+    padding: 30rpx 20rpx;
+    margin-bottom: 40rpx;
+}
+
+/* 信息项样式 */
+.info-item {
+    display: flex;
+    margin-bottom: 20rpx;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.info-item:last-child {
+    margin-bottom: 0;
+}
+
+.info-label {
+    font-size: 28rpx;
+    color: #666;
+    width: 200rpx;
+}
+
+.info-value {
+    font-size: 28rpx;
+    color: #333;
+
+}
 </style>