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

<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" @click="copyAllImages"
                    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 trueUploadList" :key="'truePic-' + index">
                        <pic-comp :src="item.fileUrl"></pic-comp>
                        <view class="delete-btn" @click="deleteImage(item)">×</view>
                    </view>
                    <view class="upload-btn" @click="uploadImage('truePic', currentReceipt.id)">
                        <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 chatRecordsUploadList"
                        :key="'chatRecords-' + index">
                        <pic-comp :src="item.fileUrl"></pic-comp>
                        <view class="delete-btn" @click="deleteImage(item)">×</view>
                    </view>
                    <view class="upload-btn" @click="uploadImage('chatRecords', currentReceipt.id)">
                        <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">{{ orderDetail.createNickName || '未填写' }}</view>
                </u-col>
                <u-col span="6">
                    <view class="info-label">型号</view>
                    <view class="info-value">{{ orderDetail.model || '未填写' }}</view>
                </u-col>
            </u-row>
            <u-row class="info-row">
                <u-col span="6">
                    <view class="info-label">上门时间</view>
                    <view class="info-value">{{ orderDetail.visitTime || '未填写' }}</view>
                </u-col>
                <u-col span="6">
                    <view class="info-label">地址</view>
                    <view class="info-value">{{ orderDetail.address || '未填写' }}</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="orderDetail.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="orderDetail.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'
import imgUploadAndDownLoad from '../mixin/imgUploadAndDownLoad.js'
export default {
    mixins: [imgUploadAndDownLoad],
    props: {
        orderDetail: {
            type: Object,
            default: () => { },
        },
        orderId: {
            type: String,
            default: '',
        },
        currentReceipt: {
            type: Object,
            default: () => { },
        },
    },
    components: {
        picComp
    },
    data() {
        return {
            //展示的图片列表
            trueUploadList: [],
            chatRecordsUploadList: [],
            // 待绑定的图片列表
            bindList: [],
        }
    },
    watch: {
        // 监听 props 变化，触发请求
        orderDetail: {
            handler(newVal) {
                if (newVal) {
                    console.log('orderDetail 变化了', newVal);
                }
            }
        },
        currentReceipt: {
            handler(newVal) {
                console.log('currentReceipt 变化了', newVal);
                if (newVal) {
                    //刷新图片列表
                    setTimeout(() => {
                        this.getList('2', '1', newVal.id, this.orderDetail.itemBrand);
                        this.getList('2', '2', newVal.id, this.orderDetail.itemBrand);
                    }, 100)

                }
            }
        },
    },
    methods: {

        // 电话卡片点击事件
        handlePhoneClick() {
            console.log('电话卡片被点击', '电话号码:', this.orderDetail.phone)
            if (this.orderDetail.phone) {
                //拨打电话
                // uni.makePhoneCall({
                //     phoneNumber: this.orderDetail.phone,
                //     success: () => {
                //         this.$store.commit("call/SET_FORM", {
                //             clueId: this.orderDetail.clueId,
                //             type: "3",
                //             callee: this.orderDetail.phone,
                //         });
                //     },
                // });
                //先暂时复制电话号码
                uni.setClipboardData({
                    data: this.orderDetail.phone,
                    success: () => {
                        uni.showToast({
                            title: '电话号码已复制',
                            icon: 'none'
                        })
                    }
                })
            } else {
                uni.showToast({
                    title: '该订单暂时没有电话号码',
                    icon: 'none'
                })
            }
        },
        // 微信卡片点击事件
        handleWechatClick() {
            console.log('微信卡片被点击', '微信号:', this.orderDetail.wechat)
            if (this.orderDetail.wechat) {
                //复制微信号
                uni.setClipboardData({
                    data: this.orderDetail.wechat,
                    success: () => {
                        uni.showToast({
                            title: '微信号已复制',
                            icon: 'none'
                        })
                    }
                })
            } else {
                uni.showToast({
                    title: '该订单暂时没有微信号',
                    icon: 'none'
                })
            }
        },
        // 下一步
        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,
            })
        },

        //一键复制
        copyAllImages() {
            // 合并所有图片
            const allImages = [...this.trueUploadList, ...this.chatRecordsUploadList];
            //取出所有图的url
            const allUrls = allImages.map(item => item.fileUrl);
            console.log('所有图片:', allUrls)
            console.log('合并后的图片列表:', allUrls)
            if (allUrls.length > 0) {
                // 复制到剪贴板
                uni.setClipboardData({
                    data: JSON.stringify(allUrls),
                    success: () => {
                        uni.showToast({
                            title: '所有图片已复制',
                            icon: 'none'
                        })
                    }
                })
            } else {
                uni.showToast({
                    title: '没有图片可复制',
                    icon: 'none'
                })
            }
        },

    },

}
</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: 25rpx;
    height: 25rpx;
    background-color: #ff4d4f;
    border-radius: 50%;
    box-shadow: 0 0 4rpx rgba(255, 77, 79, 0.3);
}
</style>