crm-app-vue3/pages/orderDetailNew/index.vue

<template>
    <view>
        <!-- 正确使用 u-navbar 的具名插槽 -->
        <u-navbar :autoBack="true" :placeholder="true" v-hideNav>
            <template v-slot:center>
                <view class="slot-wrap">
                    <text @click="handleBrandClick" class="brand">{{ topInfo.brand }}</text>
                    <text class="divider">|</text>
                    <text @click="handleModelClick" class="model">{{ topInfo.model }}</text>
                    <text class="divider">|</text>
                    <text @click="handlePriceClick" class="price">¥{{ topInfo.price }}</text>
                </view>
            </template>
            <template v-slot:right>
                <view class="slot-right">
                    <image src="/static/icons/plus.png" mode="scaleToFill" />
                    <text>加一单</text>
                </view>
            </template>
        </u-navbar>

        <orderDetailNewView />

        <!-- 通用模态窗 -->
        <custom-modal :visible="modalVisible" :title="modalConfig.title" :value="modalConfig.value"
            :placeholder="modalConfig.placeholder" @cancel="handleModalCancel" @confirm="handleModalConfirm" />
    </view>
</template>

<script>
import orderDetailNewView from './components/orderDetailNewView.vue'
import CustomModal from './components/CustomModal.vue'
export default {
    name: 'CustomNavbar',
    components: {
        orderDetailNewView,
        CustomModal
    },
    data() {
        return {
            topInfo: {
                brand: 'Hermes',
                model: 'Birkin 30',
                price: '125,000'
            },
            modalVisible: false,
            currentEditField: '',
            modalConfig: {
                title: '',
                value: '',
                placeholder: ''
            }
        }
    },
    methods: {
        handleBrandClick() {
            this.openModal('brand', '请输入品牌', this.topInfo.brand, '请输入品牌')
        },
        handleModelClick() {
            this.openModal('model', '请输入型号', this.topInfo.model, '请输入型号')
        },
        handlePriceClick() {
            this.openModal('price', '请输入价格', this.topInfo.price, '请输入价格')
        },
        openModal(field, title, value, placeholder) {
            this.currentEditField = field
            this.modalConfig = {
                title,
                value,
                placeholder
            }
            this.modalVisible = true
        },
        handleModalInput(value) {
            this.modalConfig.value = value
        },
        handleModalCancel() {
            this.modalVisible = false
            this.currentEditField = ''
        },
        handleModalConfirm(newValue) {
            if (this.currentEditField) {
                this.topInfo[this.currentEditField] = newValue
            }

            this.modalVisible = false
            this.currentEditField = ''
        }
    }
}
</script>

<style scoped>
.slot-wrap {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 40rpx;
    padding: 10rpx 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.brand {
    font-weight: bold;
    color: #333;
    font-size: 28rpx;
}

.divider {
    margin: 0 15rpx;
    color: #ddd;
    font-size: 28rpx;
}

.model {
    color: #666;
    font-size: 26rpx;
}

.price {
    color: blueviolet;
    font-weight: bold;
    font-size: 28rpx;
}

.slot-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20rpx;
    color: blueviolet;

    image {
        width: 30rpx;
        height: 30rpx;
    }
}
</style>