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"
                    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 form.truePic" :key="'truePic-' + index">
                        <pic-comp :src="item"></pic-comp>
                        <view class="delete-btn" @click="deleteImage('truePic', index)">×</view>
                    </view>
                    <view class="upload-btn" @click="uploadImage('truePic')">
                        <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 form.chatRecords" :key="'chatRecords-' + index">
                        <pic-comp :src="item"></pic-comp>
                        <view class="delete-btn" @click="deleteImage('chatRecords', index)">×</view>
                    </view>
                    <view class="upload-btn" @click="uploadImage('chatRecords')">
                        <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">张三</view>
                </u-col>
                <u-col span="6">
                    <view class="info-label">型号</view>
                    <view class="info-value">iPhone 15 Pro</view>
                </u-col>
            </u-row>
            <u-row class="info-row">
                <u-col span="6">
                    <view class="info-label">上门时间</view>
                    <view class="info-value">2025-12-20 14:30</view>
                </u-col>
                <u-col span="6">
                    <view class="info-label">地址</view>
                    <view class="info-value">北京市朝阳区建国路88号</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="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="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'

export default {
    components: {
        picComp
    },
    data() {
        return {
            form: {
                truePic: [],
                chatRecords: [],
            },
            phone: '13800138000',
            wechat: 'wechat123456',
            // 控制小红点显示的变量
        }
    },
    methods: {
        // 上传图片
        uploadImage(type) {
            uni.chooseImage({
                count: 9 - this.form[type].length, // 最多选择9张
                sizeType: ['compressed'], // 压缩图片
                sourceType: ['album', 'camera'], // 从相册选择或拍照
                success: (res) => {
                    const tempFilePaths = res.tempFilePaths
                    // 将图片路径添加到对应的数组中
                    this.form[type] = [...this.form[type], ...tempFilePaths]
                    // 这里可以添加上传到服务器的逻辑
                    // this.uploadToServer(tempFilePaths, type)
                },
                fail: (err) => {
                    console.error('选择图片失败:', err)
                }
            })
        },
        // 删除图片
        deleteImage(type, index) {
            uni.showModal({
                title: '提示',
                content: '确定要删除这张图片吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.form[type].splice(index, 1)
                    }
                }
            })
        },
        // 上传到服务器（示例）
        uploadToServer(filePaths, type) {
            filePaths.forEach((filePath, index) => {
                uni.uploadFile({
                    url: 'your-upload-api-url', // 替换为实际的上传接口
                    filePath: filePath,
                    name: 'file',
                    formData: {
                        type: type
                    },
                    success: (uploadRes) => {
                        const data = JSON.parse(uploadRes.data)
                        // 上传成功后，将临时路径替换为服务器返回的路径
                        const tempIndex = this.form[type].indexOf(filePath)
                        if (tempIndex !== -1) {
                            this.form[type][tempIndex] = data.url // 假设服务器返回data.url
                        }
                    },
                    fail: (err) => {
                        console.error('上传图片失败:', err)
                    }
                })
            })
        },
        // 电话卡片点击事件
        handlePhoneClick() {
            console.log('电话卡片被点击', '电话号码:', this.phone)
            // 这里可以添加拨打电话的逻辑，例如调用uni.makePhoneCall
        },
        // 微信卡片点击事件
        handleWechatClick() {
            console.log('微信卡片被点击', '微信号:', this.wechat)
            // 这里可以添加打开微信的逻辑
        },
        // 下一步
        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,
            })
        }
    }
}
</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: 16rpx;
    height: 16rpx;
    background-color: #ff4d4f;
    border-radius: 50%;
    box-shadow: 0 0 4rpx rgba(255, 77, 79, 0.3);
}
</style>