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

<template>
    <view class="page-container">
        <view class="card_wrap">
            <view class="address-section">
                <view class="address-header">
                    <u-icon name="map" size="36rpx" color="#108cff" class="location-icon"></u-icon>
                    <text class="address-title">上门地址</text>
                </view>
                <view class="address-content">
                    <text class="address-text">北京市朝阳区建国路88号SOHO现代城A座2301室</text>
                </view>
            </view>
        </view>

        <view class="card_wrap checklist-card">
            <view class="checklist-section">
                <u-checkbox-group v-model="selectedCheckbox" placement="column">
                    <view class="checklist-item">
                        <view class="checkbox-text-container">
                            <u-checkbox name="contact师傅" size="40rpx" color="#108cff" />
                            <text class="checklist-text">联系师傅</text>
                        </view>
                        <u-input v-if="selectedCheckbox.includes('contact师傅')" v-model="formData.contactPhone"
                            placeholder="请输入师傅手机号" size="default" class="checklist-input" />
                    </view>
                    <view class="checklist-item">
                        <view class="checkbox-text-container">
                            <u-checkbox name="photo技巧" size="40rpx" color="#108cff" />
                            <text class="checklist-text">师傅拍图技巧</text>
                        </view>
                        <u-input v-if="selectedCheckbox.includes('photo技巧')" v-model="formData.photoTips"
                            type="textarea" placeholder="请输入拍图技巧" rows="3" class="checklist-textarea" />
                        <!-- 上传图片按钮 -->
                        <view v-if="selectedCheckbox.includes('photo技巧')" class="upload-btn-container">
                            <div class="upload-btn" @click="chooseImage('photoTips')">
                                <u-icon name="camera" size="32rpx" color="#108cff"></u-icon>
                                <text class="upload-btn-text">上传图片</text>
                            </div>
                        </view>
                        <!-- 图片显示区域 -->
                        <view v-if="selectedCheckbox.includes('photo技巧') && photoTipsImages.length > 0"
                            class="image-list">
                            <view v-for="(image, index) in photoTipsImages" :key="index" class="image-item"
                                @click="previewImageHandler(image, 'photoTips')">
                                <image :src="image" mode="aspectFill" class="image-thumb"></image>
                            </view>
                        </view>
                    </view>
                    <view class="checklist-item">
                        <view class="checkbox-text-container">
                            <u-checkbox name="face2face" size="40rpx" color="#108cff" />
                            <text class="checklist-text">到达客户面对面</text>
                        </view>
                        <u-input v-if="selectedCheckbox.includes('face2face')" v-model="formData.face2faceNotes"
                            type="textarea" placeholder="请输入备注信息" rows="3" class="checklist-textarea" />
                        <!-- 上传图片按钮 -->
                        <view v-if="selectedCheckbox.includes('face2face')" class="upload-btn-container">
                            <div class="upload-btn" @click="chooseImage('face2face')">
                                <u-icon name="camera" size="32rpx" color="#108cff"></u-icon>
                                <text class="upload-btn-text">上传图片</text>
                            </div>
                        </view>
                        <!-- 图片显示区域 -->
                        <view v-if="selectedCheckbox.includes('face2face') && face2faceImages.length > 0"
                            class="image-list">
                            <view v-for="(image, index) in face2faceImages" :key="index" class="image-item"
                                @click="previewImageHandler(image, 'face2face')">
                                <image :src="image" mode="aspectFill" class="image-thumb"></image>
                            </view>
                        </view>
                    </view>
                </u-checkbox-group>
            </view>
        </view>

        <!-- 新添加的数字选择器卡片 -->
        <view class="card_wrap price-card">
            <view class="price-section">
                <view class="price-picker-container">
                    <!-- 上方快速操作按钮 -->
                    <view class="quick-actions top-actions">
                        <div class="quick-btn increase" @click="quickChangePrice(100)">+100</div>
                        <div class="quick-btn increase" @click="quickChangePrice(1000)">+1000</div>
                    </view>

                    <!-- 数字选择器 -->
                    <view class="number-box-container">
                        <view class="price-input-box">
                            <text class="price-label">核准价￥</text>
                            <input type="number" v-model="approvedPrice" class="price-input" placeholder="0" min="0"
                                @input="onPriceInput" />
                        </view>
                    </view>

                    <!-- 下方快速操作按钮 -->
                    <view class="quick-actions bottom-actions">
                        <div class="quick-btn decrease" @click="quickChangePrice(-100)">-100</div>
                        <div class="quick-btn decrease" @click="quickChangePrice(-1000)">-1000</div>
                    </view>
                </view>
            </view>
        </view>

        <!-- 新添加的高清细节图上传卡片 -->
        <view class="card_wrap detail-image-card">
            <view class="detail-image-section">
                <div class="detail-image-header">
                    <div class="detail-image-title">上传高清细节图（支持多选）</div>
                    <div class="copy-btn" @click="copyAllDetailImages">
                        <text>一键复制</text>
                    </div>
                </div>
                <div class="detail-image-upload-container">
                    <view class="detail-image-list">
                        <view class="detail-image-item" v-for="(item, index) in detailImages" :key="'detail-' + index">
                            <pic-comp :src="item"></pic-comp>
                            <view class="detail-delete-btn" @click="deleteDetailImage(index)">×</view>
                        </view>
                        <view class="detail-upload-btn" @click="uploadDetailImage">
                            <u-icon name="plus" size="40rpx" color="#999"></u-icon>
                        </view>
                    </view>
                </div>
            </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 {
            selectedCheckbox: [],
            formData: {
                contactPhone: '',
                photoTips: '',
                face2faceNotes: ''
            },
            // 图片相关数据
            photoTipsImages: [], // 师傅技巧图片数组
            face2faceImages: [], // 到达客户面对面图片数组
            // 全屏预览相关
            previewImage: '', // 当前预览的图片
            showPreview: false, // 是否显示全屏预览
            // 核准价格相关
            approvedPrice: 0, // 核准价格初始值
            // 高清细节图相关
            detailImages: [] // 高清细节图数组
        };
    },
    methods: {
        // 选择图片方法
        chooseImage(type) {
            uni.chooseImage({
                count: 9, // 最多选择9张图片
                sizeType: ['original', 'compressed'], // 原图或压缩图
                sourceType: ['album', 'camera'], // 从相册或相机选择
                success: (res) => {
                    const tempFilePaths = res.tempFilePaths;
                    // 根据类型将图片添加到对应的数组
                    if (type === 'photoTips') {
                        this.photoTipsImages = [...this.photoTipsImages, ...tempFilePaths];
                    } else if (type === 'face2face') {
                        this.face2faceImages = [...this.face2faceImages, ...tempFilePaths];
                    }
                },
                fail: (err) => {
                    console.error('选择图片失败:', err);
                    uni.showToast({
                        title: '选择图片失败',
                        icon: 'none'
                    });
                }
            });
        },
        // 图片预览方法
        previewImageHandler(image, type) {
            let currentIndex = 0;
            let imageList = [];

            // 根据类型获取对应的图片数组
            if (type === 'photoTips') {
                imageList = this.photoTipsImages;
                currentIndex = imageList.indexOf(image);
            } else if (type === 'face2face') {
                imageList = this.face2faceImages;
                currentIndex = imageList.indexOf(image);
            }

            // 使用uni-app的图片预览API
            uni.previewImage({
                current: currentIndex, // 当前预览图片的索引
                urls: imageList, // 需要预览的图片链接列表
                loop: true, // 是否可循环预览
                longPressActions: {
                    itemList: ['保存图片'],
                    success: function (data) {
                        // 保存图片到相册
                        uni.saveImageToPhotosAlbum({
                            filePath: imageList[data.tapIndex],
                            success: function () {
                                uni.showToast({
                                    title: '保存成功',
                                    icon: 'success'
                                });
                            },
                            fail: function (err) {
                                console.error('保存图片失败:', err);
                                uni.showToast({
                                    title: '保存失败',
                                    icon: 'none'
                                });
                            }
                        });
                    }
                }
            });
        },

        // 价格输入回调
        onPriceInput(e) {
            // 确保价格是数字且不小于0
            let value = Number(e.detail.value);
            if (isNaN(value)) value = 0;
            value = Math.max(0, value);
            this.approvedPrice = value;
        },

        // 快速调整价格
        quickChangePrice(amount) {
            let newPrice = this.approvedPrice + amount;
            // 确保价格不小于0
            newPrice = Math.max(0, newPrice);
            this.approvedPrice = newPrice;
        },

        // 上传高清细节图
        uploadDetailImage() {
            uni.chooseImage({
                count: 9 - this.detailImages.length, // 最多选择9张
                sizeType: ['compressed'], // 压缩图片
                sourceType: ['album', 'camera'], // 从相册选择或拍照
                success: (res) => {
                    const tempFilePaths = res.tempFilePaths;
                    // 将图片路径添加到数组中
                    this.detailImages = [...this.detailImages, ...tempFilePaths];
                },
                fail: (err) => {
                    console.error('选择图片失败:', err);
                    uni.showToast({
                        title: '选择图片失败',
                        icon: 'none'
                    });
                }
            });
        },

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

        // 复制所有高清细节图链接
        copyAllDetailImages() {
            if (this.detailImages.length === 0) {
                uni.showToast({
                    title: '暂无图片可复制',
                    icon: 'none'
                });
                return;
            }

            const imageUrls = this.detailImages.join('\n');
            uni.setClipboardData({
                data: imageUrls,
                success: () => {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'success'
                    });
                },
                fail: () => {
                    uni.showToast({
                        title: '复制失败',
                        icon: 'none'
                    });
                }
            });
        },

        // 下一步按钮点击事件
        handleNextClick() {
            // 创建一个只包含被勾选checkbox对应数据的对象
            const result = {};

            // 检查联系师傅
            if (this.selectedCheckbox.includes('contact师傅')) {
                result.contactPhone = this.formData.contactPhone;
            }

            // 检查师傅拍图技巧
            if (this.selectedCheckbox.includes('photo技巧')) {
                result.photoTips = this.formData.photoTips;
                result.photoTipsImages = this.photoTipsImages;
            }

            // 检查到达客户面对面
            if (this.selectedCheckbox.includes('face2face')) {
                result.face2faceNotes = this.formData.face2faceNotes;
                result.face2faceImages = this.face2faceImages;
            }

            // 添加其他非checkbox控制的字段
            result.approvedPrice = this.approvedPrice;
            result.detailImages = this.detailImages;
            // result.selectedCheckbox = this.selectedCheckbox;

            // 打印结果对象
            // console.log('当前界面的选中值：', result);

            this.$emit('handleNextClick', {
                nowPage: 'formTwo',
                form: result,
            })
        }
    }
};
</script>

<style scoped lang="scss">
// 导入公共样式
@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);
    }

    &.checklist-card,
    &.price-card,
    &.detail-image-card {
        margin-top: 20rpx;
    }
}

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

.address-header {
    @include flex-center;
    margin-bottom: map-get($sizes, margin-sm);
    padding-bottom: map-get($sizes, margin-sm);
    border-bottom: 1rpx solid map-get($colors, border);

    .location-icon {
        margin-right: map-get($sizes, margin-xs);
        background-color: map-get($colors, primary-light);
        padding: map-get($sizes, icon-padding);
        border-radius: 50%;
        flex-shrink: 0;
    }

    .address-title {
        margin-left: 16rpx;
    }
}

.address-content {
    .address-text {
        @include font-styles;
    }
}

// 复选框卡片样式
.checklist-card {
    margin-top: 20rpx;
}

.checklist-section {
    padding: map-get($sizes, padding-sm) map-get($sizes, padding);
    display: block;
    /* 明确设置为块级元素，避免任何flex影响 */
}

.checklist-item {
    display: block;
    /* 明确设置为块级元素，确保垂直排列 */
    width: 100%;
    /* 确保占满整个宽度 */
    padding: 16rpx 0;
    border-bottom: 1rpx solid map-get($colors, border);
    margin-bottom: 0;
    /* 移除任何可能的margin影响 */

    &:first-child {
        padding-top: 0;
    }

    &:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    // 复选框和文本的容器
    .checkbox-text-container {
        @include flex-center;
        display: flex;
        align-items: center;
    }
}

// u-checkbox样式调整
u-checkbox {
    margin-right: 16rpx;
    flex-shrink: 0;
    vertical-align: middle;
}

// 隐藏原生checkbox样式
.checkbox {
    display: none;
}

.checklist-text {
    @include font-styles;
    vertical-align: middle;
}

// 输入框样式
.checklist-input,
.checklist-textarea {
    margin-top: 12rpx;
    margin-left: 56rpx; // 与复选框对齐
    width: calc(100% - 72rpx); // 减去左边距和额外的16rpx边距，确保不超出边界
    max-width: calc(100% - 72rpx); // 确保最大宽度也不超出
    box-sizing: border-box; // 确保padding和border不影响总宽度
    border-radius: 8rpx;
    border: 1rpx solid #e5e7eb;
    padding: 12rpx 16rpx;
    font-size: 28rpx;
    background-color: #f9fafb;
    transition: all 0.2s ease;

    &:focus {
        border-color: map-get($colors, primary);
        background-color: #ffffff;
        box-shadow: 0 0 0 2rpx rgba(16, 140, 255, 0.1);
    }
}

.checklist-textarea {
    min-height: 160rpx;
    resize: vertical;
    vertical-align: top;
    padding-top: 16rpx;
    padding-bottom: 16rpx;
}

// 解决textarea文本和placeholder居中问题
// 直接穿透u-input组件的所有层级
:deep(.checklist-textarea) {
    & .u-input__textarea {
        display: block !important;
        height: auto !important;
        min-height: 160rpx !important;
        padding: 16rpx !important;
        text-align: left !important;
    }

    & .u-input__textarea textarea {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 128rpx !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
        vertical-align: top !important;
        line-height: 1.5 !important;
        resize: vertical !important;
    }

    // 确保输入的文本顶部对齐
    & .u-input__textarea textarea:focus {
        text-align: left !important;
        vertical-align: top !important;
    }

    // 针对不同浏览器的placeholder样式
    & .u-input__textarea textarea::-webkit-input-placeholder {
        text-align: left !important;
        vertical-align: top !important;
        line-height: 1.5 !important;
    }

    & .u-input__textarea textarea::-moz-placeholder {
        text-align: left !important;
        vertical-align: top !important;
        line-height: 1.5 !important;
    }

    & .u-input__textarea textarea:-ms-input-placeholder {
        text-align: left !important;
        vertical-align: top !important;
        line-height: 1.5 !important;
    }

    & .u-input__textarea textarea::placeholder {
        text-align: left !important;
        vertical-align: top !important;
        line-height: 1.5 !important;
    }
}

// 上传按钮容器样式
.upload-btn-container {
    margin-top: 16rpx;
    margin-left: 56rpx;
    display: inline-block;
}

// 上传按钮样式
.upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    font-size: 30rpx;
    padding: 20rpx 40rpx;
    border-radius: 8rpx;
    background-color: map-get($colors, bg);
    border: 2rpx dashed map-get($colors, primary);
    color: map-get($colors, primary);
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 200rpx;
    box-sizing: border-box;

    &:hover {
        background-color: map-get($colors, primary-light);
        border-color: darken(map-get($colors, primary), 10%);
        transform: translateY(-2rpx);
        box-shadow: 0 4rpx 16rpx rgba(16, 140, 255, 0.15);
    }

    &:active {
        transform: translateY(0);
    }
}

.upload-btn-text {
    color: map-get($colors, primary);
    @include font-styles($size: small, $weight: medium);
}

// 图片列表样式
.image-list {
    margin-top: 16rpx;
    margin-left: 56rpx;
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    padding-bottom: 8rpx;
}

// 图片项样式
.image-item {
    width: 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    overflow: hidden;
    background-color: map-get($colors, bg);
    @include shadow(1);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;

    &:hover {
        @include shadow(2);
        transform: translateY(-2rpx);
    }
}

// 图片缩略图样式
.image-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

// 价格卡片样式
.price-card {
    margin-top: 20rpx;
}

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

.detail-image-card {
    margin-top: 20rpx;
}

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

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

.copy-btn {
    border-radius: 20rpx;
    border: 1rpx solid #007AFF;
    background-color: transparent;
    color: #007AFF;
    @include font-styles($size: small, $weight: regular);
    padding: 0 24rpx;
    height: 64rpx;
    line-height: 64rpx;
    display: flex;
    align-items: center;
    gap: 8rpx;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;

    &:hover {
        background-color: rgba(0, 122, 255, 0.05);
    }

    &:active {
        transform: scale(0.98);
    }
}

.detail-image-upload-container {
    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;
}

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

.price-picker-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;
}

// 快速操作按钮样式
.quick-actions {
    display: flex;
    justify-content: center;
    gap: 16rpx;
    margin: 16rpx 0;
    width: 100%;
    max-width: 800rpx;
}

.quick-btn {
    flex: 1;
    border-radius: 12rpx;
    font-size: 36rpx;
    padding: 32rpx 0;
    min-width: 0;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.quick-btn.increase {
    background-color: #e6f7ed;
    color: #00b42a;
}

.quick-btn.decrease {
    background-color: #fff1f0;
    color: #f53f3f;
}

.quick-btn:hover {
    opacity: 0.9;
    transform: translateY(-2rpx);
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
}

// 数字选择器容器
.number-box-container {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin: 20rpx 0;
    width: 100%;
    justify-content: center;
    white-space: nowrap;
}

// 价格输入框盒子
.price-input-box {
    flex: 1;
    max-width: 800rpx;
    background-color: #f5f7fa;
    border: 2rpx solid #e5e7eb;
    border-radius: 12rpx;
    padding: 20rpx 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    min-width: 300rpx;
}

// 价格标签样式
.price-label {
    font-size: 36rpx;
    color: map-get($colors, text-primary);
    font-weight: 700;
    min-width: 120rpx;
    flex-shrink: 0;
    margin-right: 16rpx;
    letter-spacing: 1rpx;
    font-family: map-get($font, family);
}

// 价格输入框样式
.price-input {
    width: 100%;
    height: auto;
    border: none;
    outline: none;
    background-color: transparent;
    text-align: right;
    font-size: 48rpx;
    font-weight: 600;
    color: map-get($colors, text-primary);
    padding: 0 10rpx;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    /* 使用等宽字体显示带斜线的0 */
    font-family: Consolas, 'Courier New', monospace, -apple-system, BlinkMacSystemFont;
}

// 移除数字输入框的上下箭头
.price-input::-webkit-inner-spin-button,
.price-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.price-input:focus {
    background-color: transparent;
}
</style>