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

<template>
    <view class="more-info-wrapper">
        <u-modal :show="show" @confirm="confirmModal" :showCancelButton="showCancelButton" @cancel="closeModal" @close="closeModal">
            <view class="modal-content">
                <view class="more-info">
                    <view class="modal-item" v-if="getWarehouseFieldPermissions('dictLabel','read')">
                        <text>品牌：</text>
                        <text>{{ moreOptions.dictLabel || '-' }}</text>
                    </view>
                    <view class="modal-item" v-if="getWarehouseFieldPermissions('origin','read')">
                        <text>来源：</text>
                        <text>{{ moreOptions.origin || '-' }}</text>
                    </view>
                    <view class="modal-item" v-if="getWarehouseFieldPermissions('actualPrice','read')">
                        <text>实价：</text>
                        <text>¥{{ moreOptions.actualPrice || '-' }}</text>
                    </view>
                    <view class="modal-item" v-if="getWarehouseFieldPermissions('model','read')">
                        <text>型号：</text>
                        <text>{{ moreOptions.model || '-' }}</text>
                    </view>
                    <view class="modal-item" v-if="getWarehouseFieldPermissions('indentifyCode','read')">
                        <text>编码：</text>
                        <text>{{ moreOptions.indentifyCode || '-' }}</text>
                    </view>
                    <view class="modal-item" v-if="getWarehouseFieldPermissions('cardYear','read')">
                        <text>日期：</text>
                        <text>{{ moreOptions.cardYear || '-' }}</text>
                    </view>
                    <view class="modal-item" v-if="getWarehouseFieldPermissions('productDesc','read')">
                        <text>备注：</text>
                        <text>{{ moreOptions.productDesc || '-' }}</text>
                    </view>
                </view>
                <view v-if="isCopy">
                    <u-button type="primary" text="一键复制" size="small" @click="copy"></u-button>
                </view>
            </view>
        </u-modal>
    </view>
</template>

<script>
import { getWarehouseFieldPermissions } from '../../../utils/util.js'
export default {
    name: 'MoreInfo',
    props: {
        moreOptions: {
            type: Object,
            default: () => { }
        },
        isCopy: {
            type: Boolean,
            default: false
        },
        showCancelButton: {
            type: Boolean,
            default: false
        },
    },
    emits: ['confirm'],
    data() {
        return {
            show: false,
        }
    },
    methods: {
        getWarehouseFieldPermissions,
        showMoreInfo() {
            this.show = true;
        },
        confirmModal() {
            this.$emit('confirm', this.moreOptions);
        },
        closeModal(){
            this.show = false;
        },
        copy() {
            const { dictLabel, origin, actualPrice, model, indentifyCode, cardYear, productDesc } = this.moreOptions;
            const copyText = `品牌：${dictLabel || '-'}\n来源：${origin || '-'}\n实价：¥${actualPrice || '-'}\n型号：${model || '-'}\n编码：${indentifyCode || '-'}\n日期：${cardYear || '-'}\n备注：${productDesc || '-'}`;
            
            uni.setClipboardData({
                data: copyText,
                success: () => {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'none'
                    })
                },
                fail: () => {
                    uni.showToast({
                        title: '复制失败',
                        icon: 'none'
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.more-info-wrapper {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
::v-deep .modal-content{
    width:90%;
}
::v-deep .u-modal__content{
    padding:24rpx 0;
}
.modal-content{
    display: flex;
    justify-content: space-between;
}
</style>