crm-app-vue3/pages/wareHouse/components/moreInfo.vue

<template>
    <view class="more-info-wrapper">
        <u-modal :show="show" @confirm="closeModal">
            <div class="more-info">
                <view class="modal-item">
                    <text>品牌：</text>
                    <text>{{ moreOptions.dictLabel || '-' }}</text>
                </view>
                <view class="modal-item">
                    <text>来源：</text>
                    <text>{{ moreOptions.origin || '-' }}</text>
                </view>
                <view class="modal-item">
                    <text>实价：</text>
                    <text>¥{{ moreOptions.costPrice || '-' }}</text>
                </view>
                <view class="modal-item">
                    <text>型号：</text>
                    <text>{{ moreOptions.model || '-' }}</text>
                </view>
                <view class="modal-item">
                    <text>编码：</text>
                    <text>{{ moreOptions.indentifyCode || '-' }}</text>
                </view>
                <view class="modal-item">
                    <text>日期：</text>
                    <text>{{ recycleTimeFormatter(moreOptions.recycleTime) || '-' }}</text>
                </view>
                <view class="modal-item">
                    <text>备注：</text>
                    <text>{{ moreOptions.productDesc || '-' }}</text>
                </view>
            </div>
        </u-modal>
    </view>
</template>

<script>
export default {
    name: 'MoreInfo',
    props: {
        moreOptions: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            show: false,
        }
    },
    methods: {
        showMoreInfo() {
            this.show = true;
        },
        closeModal() {
            this.show = false;
        },
        recycleTimeFormatter(val) {
            if (val) {
                return this.$dayjs(val).format('YYYY-MM-DD HH:mm:ss')
            }
            return '-'
        }
    }
}
</script>

<style lang="scss" scoped>
.more-info-wrapper {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
</style>