crm-app-vue3/pages/orderDetailNew/components/pageThree.vue

<template>
    <view class="page-container">
        <!-- 支付信息录入卡片 -->
        <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.customName" 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 class="card_wrap">
            <view class="detail-image-section">
                <view class="detail-image-header">
                    <div class="detail-image-title">高清实物图（拖拽排序）</div>
                </view>
                <view class="detail-image-content">
                    <view class="detail-image-list">
                        <!-- 占位符元素 -->
                        <view v-show="placeholderIndex !== -1" class="detail-image-placeholder"
                            :style="{ transform: placeholderStyle }">
                            <u-icon name="arrow-right" size="40rpx" color="#108cff"></u-icon>
                        </view>

                        <!-- 图片列表 -->
                        <view class="detail-image-item" v-for="(item, index) in localDetailImages"
                            :key="'detail-' + index" :class="{
                                'dragging': draggingIndex === index,
                                'can-drop': canDropIndex === index
                            }" @touchstart.stop="onTouchStart($event, index)" @touchmove.stop="onTouchMove($event)"
                            @touchend.stop="onTouchEnd" @touchcancel.stop="onTouchEnd">
                            <pic-comp :src="item.value"></pic-comp>
                            <view class="image-type-tag">{{ getImageType(index) }}</view>
                            <view class="detail-delete-btn" @click.stop="deleteImage(index)">×</view>
                        </view>

                        <!-- 上传按钮 -->
                        <view class="detail-upload-btn" @click="uploadDetailImage">
                            <u-icon name="plus" size="40rpx" color="#999"></u-icon>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 支付总额卡片 -->
        <view class="card_wrap payment-card">
            <view class="payment-section">
                <view class="payment-total-container">
                    <text class="payment-label">支付总额</text>
                    <u-input v-model="paymentAmount" placeholder="0.00" class="payment-amount" type="number" decimal="2"
                        prefix="￥" />
                </view>

                <view class="payment-buttons-row">
                    <view class="payment-button" @click="handleUnpaidClick">
                        <u-icon name="star" size="40rpx" color="#ff9500"></u-icon>
                        <text class="button-text">未收</text>
                    </view>
                    <view class="payment-button" @click="handleFollowUpClick">
                        <u-icon name="chat" size="40rpx" color="#108cff"></u-icon>
                        <text class="button-text">待跟进</text>
                    </view>
                </view>

                <view class="pay-now-button" @click="handlePayNowClick">
                    <text class="button-text">立即支付</text>
                </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">￥{{ paymentAmount }}</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>

<script>
import picComp from './picComp.vue'

export default {
    props: {
        orderDetail: {
            type: Object,
            default: () => { },
        },
        detailImages: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        orderDetail: {
            handler(newVal) {
                if (newVal) {
                    this.paymentInfo.customName = newVal.customName || ''
                    this.paymentInfo.bankName = newVal.bankName || ''
                    this.paymentInfo.bankAccount = newVal.bankCardNumber || ''
                    this.paymentInfo.idNumber = newVal.idCard || ''
                }
            },
            deep: true,
        },
        detailImages: {
            handler(newVal) {
                this.localDetailImages = newVal.map((item, index) => ({
                    value: item,
                    position: index
                }));
            },
            deep: true
        }
    },
    components: {
        picComp
    },
    data() {
        return {
            unpaidModelShow: false,
            followUpModelShow: false,
            payNowModelShow: false,
            unpaidRating: 0, // 未收评级
            followUpNotes: '', // 跟进细节
            paymentAmount: '0.00', // 支付总额

            // 支付信息
            paymentInfo: {
                accountHolder: '', // 开户人
                bankName: '', // 银行名称
                bankAccount: '', // 银行账号
                idNumber: '' // 身份证号
            },
            // Local copy of detailImages prop to avoid direct mutation
            localDetailImages: this.detailImages.map((item, index) => ({
                value: item,
                position: index
            })),
            // 拖拽相关状态
            draggingIndex: -1, // 当前正在拖拽的元素索引
            placeholderIndex: -1, // 占位符的位置
            canDropIndex: -1, // 可以放置的位置
            originalIndex: -1, // 拖拽开始时的原始位置
            startX: 0, // 触摸起始X坐标
            startY: 0, // 触摸起始Y坐标
            dragOffsetX: 0, // 拖拽元素的X偏移
            dragOffsetY: 0, // 拖拽元素的Y偏移
            placeholderStyle: '' // 占位符的样式
        };
    },

    methods: {
        // 上传高清细节图
        uploadDetailImage() {
            uni.chooseImage({
                count: 9 - this.localDetailImages.length, // 最多选择9张
                sizeType: ['compressed'], // 压缩图片
                sourceType: ['album', 'camera'], // 从相册选择或拍照
                success: (res) => {
                    const tempFilePaths = res.tempFilePaths;
                    // 将图片路径转换为对象数组并添加到本地数组
                    const newImages = tempFilePaths.map((path, index) => ({
                        value: path,
                        position: this.localDetailImages.length + index
                    }));
                    this.localDetailImages = [...this.localDetailImages, ...newImages];
                },
                fail: (err) => {
                    console.error('选择图片失败:', err);
                    uni.showToast({
                        title: '选择图片失败',
                        icon: 'none'
                    });
                }
            });
        },

        // 删除图片
        deleteImage(index) {
            uni.showModal({
                title: '提示',
                content: '确定要删除这张图片吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.localDetailImages.splice(index, 1);

                        // Update position properties after deletion
                        this.localDetailImages.forEach((item, idx) => {
                            item.position = idx + 1;
                        });
                    }
                }
            });
        },

        // 获取图片类型
        getImageType(index) {
            const types = ['正面', '反面', '侧面', '扣子', '编号'];
            return types[index] || `细节${index - 4}`;
        },

        // 触摸开始
        onTouchStart(event, index) {
            if (this.draggingIndex !== -1) return;

            this.draggingIndex = index;
            this.originalIndex = index;
            this.placeholderIndex = index;
            this.canDropIndex = -1;

            // 记录触摸起始坐标
            this.startX = event.touches[0].clientX;
            this.startY = event.touches[0].clientY;

            // 获取元素位置信息用于计算偏移
            const query = uni.createSelectorQuery().in(this);
            query.selectAll('.detail-image-item').boundingClientRect(rects => {
                if (rects[index]) {
                    this.dragOffsetX = this.startX - rects[index].left;
                    this.dragOffsetY = this.startY - rects[index].top;
                    this.placeholderStyle = `translate(${rects[index].left}px, ${rects[index].top}px)`;
                }
            }).exec();
        },

        // 触摸移动
        onTouchMove(event) {
            if (this.draggingIndex === -1) return;

            const moveX = event.touches[0].clientX;
            const moveY = event.touches[0].clientY;

            // 更新拖拽元素的位置
            this.$nextTick(() => {
                const draggingElement = uni.createSelectorQuery().in(this)
                    .selectAll('.detail-image-item')[this.draggingIndex];
                if (draggingElement) {
                    // 这里通过CSS类实现拖拽视觉效果，实际位置由数组顺序控制
                }
            });

            // 计算当前触摸位置对应的目标索引
            this.findTargetIndex(moveX, moveY);
        },

        // 触摸结束
        onTouchEnd() {
            if (this.draggingIndex === -1) return;

            // 执行元素交换
            if (this.canDropIndex !== -1 && this.canDropIndex !== this.draggingIndex) {
                // 交换元素位置
                const temp = this.localDetailImages[this.draggingIndex];
                this.localDetailImages[this.draggingIndex] = this.localDetailImages[this.canDropIndex];
                this.localDetailImages[this.canDropIndex] = temp;

                // Update position properties after swap
                this.localDetailImages.forEach((item, index) => {
                    item.position = index + 1;
                });
            }

            // 重置拖拽状态
            this.resetDragState();
        },

        // 查找触摸位置对应的目标索引
        findTargetIndex(x, y) {
            const query = uni.createSelectorQuery().in(this);
            query.selectAll('.detail-image-item').boundingClientRect(rects => {
                let targetIndex = -1;

                // 查找触摸点所在的元素
                for (let i = 0; i < rects.length; i++) {
                    if (i === this.draggingIndex) continue;

                    const rect = rects[i];
                    if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
                        targetIndex = i;
                        break;
                    }
                }

                // 更新可放置位置
                this.canDropIndex = targetIndex;

                // 如果找到了可放置位置，更新占位符位置
                if (targetIndex !== -1) {
                    this.placeholderIndex = targetIndex;
                    this.placeholderStyle = `translate(${rects[targetIndex].left}px, ${rects[targetIndex].top}px)`;
                }
            }).exec();
        },

        // 重置拖拽状态
        resetDragState() {
            this.draggingIndex = -1;
            this.placeholderIndex = -1;
            this.canDropIndex = -1;
            this.originalIndex = -1;
            this.startX = 0;
            this.startY = 0;
            this.dragOffsetX = 0;
            this.dragOffsetY = 0;
            this.placeholderStyle = '';
        },

        // 未收按钮点击事件
        handleUnpaidClick() {
            console.log('点击了未收按钮');
            this.unpaidModelShow = true;
        },

        // 待跟进按钮点击事件
        handleFollowUpClick() {
            console.log('点击了待跟进按钮');
            this.followUpModelShow = true;
        },

        // 立即支付按钮点击事件
        handlePayNowClick() {
            console.log('点击了立即支付按钮');
            this.payNowModelShow = true;

            //让父组件保存数据
            this.$emit('handleNeedSave', {
                nowPage: 'formThree',
                form: {
                    detailImages: this.localDetailImages,
                    ...this.paymentInfo,
                    paymentAmount: this.paymentAmount
                }
            });
        },

        // 确认未收按钮点击事件
        confirmUnpaid() {
            console.log('确认未收，评分：', this.unpaidRating);
            this.unpaidModelShow = false;
            // 可以在这里添加提交评分的逻辑
        },

        // 确认跟进细节按钮点击事件
        confirmFollowUp() {
            console.log('确认跟进细节：', this.followUpNotes);
            this.followUpModelShow = false;
            // 可以在这里添加提交跟进细节的逻辑
        },

        // 确认转账按钮点击事件
        confirmTransfer() {
            console.log('确认转账');
            this.payNowModelShow = false;
            // 可以在这里添加转账确认的逻辑
        },
        // 下一步按钮点击事件
        handleNextClick() {
            console.log('page3点击了下一步按钮', this.localDetailImages);
            this.$emit('handleNextClick', {
                nowPage: 'formThree',
                form: {
                    detailImages: this.localDetailImages,
                    ...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 {
    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;
        touch-action: none; // 禁止浏览器默认触摸行为
        transition: all 0.2s ease; // 所有属性过渡效果
        z-index: 1;
        cursor: move;

        &.dragging {
            opacity: 0.5;
            transform: scale(1.05);
            z-index: 100;
        }

        &.can-drop {
            border: 2rpx dashed #108cff;
            background-color: rgba(16, 140, 255, 0.1);
        }

        &:active {
            opacity: 0.7;
        }
    }

    // 占位符样式
    .detail-image-placeholder {
        position: absolute;
        width: 200rpx;
        height: 200rpx;
        border: 2rpx dashed #108cff;
        background-color: rgba(16, 140, 255, 0.1);
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 50;
        pointer-events: none;
    }

    .image-type-tag {
        position: absolute;
        top: 10rpx;
        left: 10rpx;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 5rpx 10rpx;
        border-radius: 12rpx;
        font-size: 22rpx;
        z-index: 1;
    }

    .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;
        cursor: pointer;

        &:hover {
            border-color: #108cff;
            background-color: rgba(16, 140, 255, 0.05);
        }
    }

    .no-images {
        @include font-styles($size: content, $weight: regular, $color: tertiary);
        text-align: center;
        padding: 80rpx 0;
        background-color: #f9f9f9;
        border-radius: 12rpx;
        margin-top: 20rpx;
    }
}

.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);
}

/* 支付信息卡片样式 */
.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);
}

/* 支付总额卡片样式 */
.payment-card {
    @include card;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}

.payment-section {
    padding: map-get($sizes, padding-sm) map-get($sizes, padding);
}

.payment-total-container {
    background-color: #f5f7fa;
    border: 2rpx solid #e5e7eb;
    border-radius: 12rpx;
    padding: 24rpx 30rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24rpx;
}

.payment-label {
    font-size: 36rpx;
    color: map-get($colors, text-primary);
    font-weight: 700;
    min-width: 140rpx;
}

.payment-amount {
    font-size: 48rpx;
    font-weight: 600;
    color: #f53f3f;
    font-family: Consolas, 'Courier New', monospace, -apple-system, BlinkMacSystemFont;
    width: auto;
    min-width: 150rpx;
}

.payment-amount .u-input__input {
    border: none;
    padding: 0;
    background: transparent;
    font-size: 48rpx;
    font-weight: 600;
    color: #f53f3f;
    font-family: Consolas, 'Courier New', monospace, -apple-system, BlinkMacSystemFont;
    text-align: right;
}

/* 支付按钮行样式 */
.payment-buttons-row {
    display: flex;
    gap: 20rpx;
    margin-bottom: 24rpx;
}

.payment-button {
    flex: 1;
    border-radius: 12rpx;
    padding: 24rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;
    border: 2rpx solid #e5e7eb;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 12rpx;
}

.payment-button:hover {
    background-color: #e6f7ed;
    border-color: #00b42a;
    transform: translateY(-2rpx);
    box-shadow: 0 4rpx 12rpx rgba(0, 180, 42, 0.15);
}

/* 立即支付按钮样式 */
.pay-now-button {
    width: 100%;
    border-radius: 12rpx;
    padding: 32rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #108cff;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 12rpx;
    box-shadow: 0 4rpx 12rpx rgba(16, 140, 255, 0.2);
}

.pay-now-button:hover {
    background-color: #007aff;
    transform: translateY(-2rpx);
    box-shadow: 0 6rpx 16rpx rgba(16, 140, 255, 0.25);
}

.button-text {
    font-size: 28rpx;
    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>