crm-app-vue3/pages/wareHouse/detail.vue

<template>
    <view class="detail" @click="handleClickOutside">
        <u-navbar class="nav-bar" title="商品详情档案" :autoBack="true" :placeholder="true" rightIcon="more-dot-fill" v-hideNav></u-navbar>
        <u-swiper :list="imgs" keyName="url" indicator indicatorMode="line" circular>
            <!-- <template v-slot:item="{ item, index }">
                <view style="width: 100%; height: 600rpx;">
                    <image :src="item.url" mode="aspectFill" style="width: 100%; height: 100%; object-fit: cover;"></image>
                </view>
            </template> -->
        </u-swiper>
        
        <!-- 立即下架按钮 -->
        <view class="immediate-off-shelf">
            <u-button type="error" shape="circle" size="large" @click="handleOffShelf">
                <u-icon name="download" size="38rpx" color="#ffffff"></u-icon>
                <text>立即下架</text>
            </u-button>
        </view>
        
        <!-- 轮播图下方操作按钮 -->
        <view class="swiper-actions">
            <view class="action-item">
                <u-icon name="download" size="44rpx" color="#606266"></u-icon>
                <text class="action-text">下载图文</text>
            </view>
            <view class="action-item">
                <u-icon name="share" size="44rpx" color="#606266"></u-icon>
                <text class="action-text">分享</text>
            </view>
            <view class="action-item">
                <u-icon name="camera" size="44rpx" color="#606266"></u-icon>
                <text class="action-text">切换单图</text>
            </view>
            <view class="action-item">
                <u-icon name="cut" size="44rpx" color="#606266"></u-icon>
                <text class="action-text">智能抠图</text>
            </view>
        </view>
        
        <!-- 核心信息区域 -->
        <view class="core-info">
            <view class="section-title">核心信息</view>
            <view class="info-row">
                <view class="info-label">品牌</view>
                <view class="info-value" @click.stop="toggleEditField('brand', coreInfo.brand)">
                    <u-input v-if="editMode.brand" v-model="tempValues.brand" @blur="saveEditField('brand', tempValues.brand, 'core', 'brand')" :autoFocus="true" />
                    <span v-else>{{ coreInfo.brand }}</span>
                </view>
            </view>
            <view class="info-row">
                <view class="info-label">型号</view>
                <view class="info-value" @click.stop="toggleEditField('model', coreInfo.model)">
                    <u-input v-if="editMode.model" v-model="tempValues.model" @blur="saveEditField('model', tempValues.model, 'core', 'model')" :autoFocus="true" />
                    <span v-else>{{ coreInfo.model }}</span>
                </view>
            </view>
            <view class="info-row">
                <view class="info-label">独立编码</view>
                <view class="info-value code" @click.stop="toggleEditField('code', coreInfo.code)">
                    <u-input v-if="editMode.code" v-model="tempValues.code" @blur="saveEditField('code', tempValues.code, 'core', 'code')" :autoFocus="true" />
                    <span v-else>{{ coreInfo.code }}</span>
                </view>
            </view>
            <view class="info-row">
                <view class="info-label">入库日期</view>
                <view class="info-value">{{ coreInfo.warehouseDate }}</view>
            </view>
            <view class="info-row">
                <view class="info-label">付款方式</view>
                <view class="info-value">{{ coreInfo.paymentMethod }}</view>
            </view>
            <view class="info-row col">
                <view class="info-label">备注信息</view>
                <view class="info-value note" @click.stop="toggleEditField('note', coreInfo.note)">
                    <textarea v-if="editMode.note" v-model="tempValues.note" @blur="saveEditField('note', tempValues.note, 'core', 'note')" :autoFocus="true" rows="3" />
                    <span v-else>{{ coreInfo.note }}</span>
                </view>
            </view>
        </view>
        
        <!-- 财务与价格区域 -->
        <view class="finance-price">
            <view class="section-title">财务与价格</view>
            <view class="price-group">
                <view class="price-item">
                    <view class="price-label">原始成本</view>
                    <view class="price-value original" @click.stop="toggleEditField('originalCost', financePrice.originalCost)">
                        <u-input v-if="editMode.originalCost" v-model="tempValues.originalCost" @blur="saveEditField('originalCost', tempValues.originalCost, 'finance', 'originalCost')" :autoFocus="true" />
                        <span v-else>￥{{ financePrice.originalCost }}</span>
                    </view>
                </view>
                <view class="price-item">
                    <view class="price-label">附加成本</view>
                    <view class="price-value additional" @click.stop="toggleEditField('additionalCost', financePrice.additionalCost)">
                        <u-input v-if="editMode.additionalCost" v-model="tempValues.additionalCost" @blur="saveEditField('additionalCost', tempValues.additionalCost, 'finance', 'additionalCost')" :autoFocus="true" />
                        <span v-else>￥{{ financePrice.additionalCost }}</span>
                    </view>
                </view>
            </view>
            <view class="price-group">
                <view class="price-item">
                    <view class="price-label">代理价格</view>
                    <view class="price-value agent" @click.stop="toggleEditField('agentPrice', financePrice.agentPrice)">
                        <u-input v-if="editMode.agentPrice" v-model="tempValues.agentPrice" @blur="saveEditField('agentPrice', tempValues.agentPrice, 'finance', 'agentPrice')" :autoFocus="true" />
                        <span v-else>￥{{ financePrice.agentPrice }}</span>
                    </view>
                </view>
                <view class="price-item">
                    <view class="price-label">建议售价</view>
                    <view class="price-value suggested" @click.stop="toggleEditField('suggestedPrice', financePrice.suggestedPrice)">
                        <u-input v-if="editMode.suggestedPrice" v-model="tempValues.suggestedPrice" @blur="saveEditField('suggestedPrice', tempValues.suggestedPrice, 'finance', 'suggestedPrice')" :autoFocus="true" />
                        <span v-else>￥{{ financePrice.suggestedPrice }}</span>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 溯源与位置区域 -->
        <view class="traceability-location">
            <view class="section-title">溯源与位置</view>
            <view class="info-row">
                <view class="info-label">商品位置</view>
                <view class="info-value" @click.stop="toggleEditField('location', traceability.location)">
                    <u-input v-if="editMode.location" v-model="tempValues.location" @blur="saveEditField('location', tempValues.location, 'trace', 'location')" :autoFocus="true" />
                    <span v-else>{{ traceability.location }}</span>
                </view>
            </view>
            <view class="info-row">
                <view class="info-label">回收人员</view>
                <view class="info-value" @click.stop="toggleEditField('recoveryPerson', traceability.recoveryPerson)">
                    <u-input v-if="editMode.recoveryPerson" v-model="tempValues.recoveryPerson" @blur="saveEditField('recoveryPerson', tempValues.recoveryPerson, 'trace', 'recoveryPerson')" :autoFocus="true" />
                    <span v-else>{{ traceability.recoveryPerson }}</span>
                </view>
            </view>
            <view class="info-row">
                <view class="info-label">鉴定人员</view>
                <view class="info-value" @click.stop="toggleEditField('authenticationPerson', traceability.authenticationPerson)">
                    <u-input v-if="editMode.authenticationPerson" v-model="tempValues.authenticationPerson" @blur="saveEditField('authenticationPerson', tempValues.authenticationPerson, 'trace', 'authenticationPerson')" :autoFocus="true" />
                    <span v-else>{{ traceability.authenticationPerson }}</span>
                </view>
            </view>
            <view class="action-button">
                <u-button type="primary" plain size="mini" @click="viewLog">查看操作日志(12条)</u-button>
            </view>
        </view>
        
        <!-- 底部功能按钮栏 -->
        <view class="bottom-bar">
            <view class="bar-item" @click.stop="enterGlobalEdit">
                <u-icon name="edit-pen" size="46rpx" color="#9ca3af"></u-icon>
                <text class="bar-text">编辑</text>
            </view>
            <view class="bar-item">
                <u-icon name="lock" size="46rpx" color="#9ca3af"></u-icon>
                <text class="bar-text">锁单</text>
            </view>
            <view class="bar-item">
                <i class="iconfont icon-crm-dayin" style="font-size:46rpx;color: #9ca3af;"></i>
                <text class="bar-text">打印</text>
            </view>
            <view class="bar-item">
                <view class="primary">
                    <u-icon name="bag" size="44rpx" color="#fff"></u-icon>
                    <text class="bar-text">开单</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                imgs: [
                    {
                        url: 'https://img2.baidu.com/it/u=2737617573,3814711807&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'
                    },
                    {
                        url: 'https://img2.baidu.com/it/u=3621921167,4010012360&fm=253&fmt=auto?w=760&h=760'
                    },
                    {
                        url: 'https://img2.baidu.com/it/u=1250952949,1454201719&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067'
                    }
                ],
                // 核心信息模拟数据
                coreInfo: {
                    brand: 'Rolex',
                    model: 'Submariner Date 126610LN',
                    code: 'AUTO_1002391',
                    warehouseDate: '2025-12-14 10:00',
                    paymentMethod: '线上转账',
                    note: '单包 附件齐全 成色极好'
                },
                // 财务与价格模拟数据
                financePrice: {
                    originalCost: '82,000',
                    additionalCost: '500',
                    agentPrice: '85,500',
                    suggestedPrice: '89,000'
                },
                // 溯源与位置模拟数据
                traceability: {
                    location: '上海A仓',
                    recoveryPerson: 'IT秦',
                    authenticationPerson: '中检-刘师傅'
                },
                // 编辑状态管理
                editMode: {
                    // 核心信息编辑状态
                    brand: false,
                    model: false,
                    code: false,
                    note: false,
                    // 财务与价格编辑状态
                    originalCost: false,
                    additionalCost: false,
                    agentPrice: false,
                    suggestedPrice: false,
                    // 溯源与位置编辑状态
                    location: false,
                    recoveryPerson: false,
                    authenticationPerson: false
                },
                // 全局编辑模式
                globalEditMode: false,
                // 临时存储编辑值
                tempValues: {}
            }
        },
        methods: {
            // 查看操作日志的方法
            viewLog() {
                // 查看操作日志的方法
                console.log('查看操作日志');
            },
            
            // 立即下架按钮处理方法
            handleOffShelf() {
                // 处理下架逻辑
                uni.showModal({
                    title: '确认下架',
                    content: '确定要将此商品下架吗？',
                    success: (res) => {
                        if (res.confirm) {
                            console.log('商品已下架');
                            uni.showToast({
                                title: '已下架',
                                icon: 'success'
                            });
                        }
                    }
                });
            },
            // 切换单个字段的编辑状态
            toggleEditField(field, value) {
                // 如果不是全局编辑模式
                if (!this.globalEditMode) {
                    // 重置所有编辑状态
                    this.resetEditMode();
                    // 设置当前字段为编辑状态
                    this.editMode[field] = true;
                    // 保存临时值
                    this.tempValues[field] = value;
                }
            },
            // 保存单个字段的编辑值
            saveEditField(field, newValue, type, fieldName) {
                // 更新对应的数据
                if (type === 'core') {
                    this.coreInfo[fieldName] = newValue;
                } else if (type === 'finance') {
                    this.financePrice[fieldName] = newValue;
                } else if (type === 'trace') {
                    this.traceability[fieldName] = newValue;
                }
                // 退出编辑状态
                this.editMode[field] = false;
                // 清空临时值
                delete this.tempValues[field];
                // 模拟保存操作
                console.log(`保存${field}字段值: ${newValue}`);
            },
            // 进入全局编辑模式
            enterGlobalEdit() {
                this.globalEditMode = true;
                // 设置所有可编辑字段为编辑状态
                this.editMode = {
                    brand: true,
                    model: true,
                    code: true,
                    note: true,
                    originalCost: true,
                    additionalCost: true,
                    agentPrice: true,
                    suggestedPrice: true,
                    location: true,
                    recoveryPerson: true,
                    authenticationPerson: true
                };
                // 保存所有字段的临时值
                this.tempValues = {
                    brand: this.coreInfo.brand,
                    model: this.coreInfo.model,
                    code: this.coreInfo.code,
                    note: this.coreInfo.note,
                    originalCost: this.financePrice.originalCost,
                    additionalCost: this.financePrice.additionalCost,
                    agentPrice: this.financePrice.agentPrice,
                    suggestedPrice: this.financePrice.suggestedPrice,
                    location: this.traceability.location,
                    recoveryPerson: this.traceability.recoveryPerson,
                    authenticationPerson: this.traceability.authenticationPerson
                };
            },
            // 保存全局编辑模式下的所有修改
            saveGlobalEdit() {
                // 保存所有临时值到原始数据
                // 核心信息
                if (this.tempValues.brand !== undefined) this.coreInfo.brand = this.tempValues.brand;
                if (this.tempValues.model !== undefined) this.coreInfo.model = this.tempValues.model;
                if (this.tempValues.code !== undefined) this.coreInfo.code = this.tempValues.code;
                if (this.tempValues.note !== undefined) this.coreInfo.note = this.tempValues.note;
                
                // 财务与价格
                if (this.tempValues.originalCost !== undefined) this.financePrice.originalCost = this.tempValues.originalCost;
                if (this.tempValues.additionalCost !== undefined) this.financePrice.additionalCost = this.tempValues.additionalCost;
                if (this.tempValues.agentPrice !== undefined) this.financePrice.agentPrice = this.tempValues.agentPrice;
                if (this.tempValues.suggestedPrice !== undefined) this.financePrice.suggestedPrice = this.tempValues.suggestedPrice;
                
                // 溯源与位置
                if (this.tempValues.location !== undefined) this.traceability.location = this.tempValues.location;
                if (this.tempValues.recoveryPerson !== undefined) this.traceability.recoveryPerson = this.tempValues.recoveryPerson;
                if (this.tempValues.authenticationPerson !== undefined) this.traceability.authenticationPerson = this.tempValues.authenticationPerson;
                
                this.globalEditMode = false;
                // 退出所有编辑状态
                this.resetEditMode();
                // 清空临时值
                this.tempValues = {};
                // 模拟保存操作
                console.log('保存所有字段值');
            },
            // 重置所有编辑状态
            resetEditMode() {
                Object.keys(this.editMode).forEach(key => {
                    this.editMode[key] = false;
                });
            },
            // 点击页面其他地方保存所有编辑
            handleClickOutside() {
                if (this.globalEditMode) {
                    this.saveGlobalEdit();
                } else {
                    // 保存当前正在编辑的字段
                    Object.keys(this.editMode).forEach(key => {
                        if (this.editMode[key]) {
                            // 根据字段名确定类型和字段名
                            if (['brand', 'model', 'code', 'note'].includes(key)) {
                                this.saveEditField(key, this.tempValues[key], 'core', key);
                            } else if (['originalCost', 'additionalCost', 'agentPrice', 'suggestedPrice'].includes(key)) {
                                this.saveEditField(key, this.tempValues[key], 'finance', key);
                            } else if (['location', 'recoveryPerson', 'authenticationPerson'].includes(key)) {
                                this.saveEditField(key, this.tempValues[key], 'trace', key);
                            }
                        }
                    });
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
@import "./styles/detail.scss";
</style>