jjx-web/pages/store/components/selfSupportQuoteModal.vue

<template>
    <el-dialog
        title="自营询价详情"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">

        <el-descriptions border size="small" :column="2">
            <el-descriptions-item label="询价区域">
                <span>{{ info.sheet.province.name }}{{ info.sheet.city.name }} </span>
            </el-descriptions-item>
            <el-descriptions-item label="联系人">
                <span>{{ info.sheet.name }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="联系方式">
                <span>{{ info.sheet.phone }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="用户名称">
                <span>{{ info.sheet.company }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="询价单附件">
                <view class="mt-15 mr-15" v-for="(file, fileIndex) in info.files" :key="fileIndex">
                    <file-type :item="file" @click.native="previewFile(file)"/>
                </view>
            </el-descriptions-item>
            <el-descriptions-item label="报价">
                <span>￥{{ info.amount }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="备注">
                <span>{{ info.remark }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="报价单附件">
                <view class="mt-15 mr-15" v-for="(file, fileIndex) in info.files" :key="fileIndex">
                    <file-type :item="file" @click.native="previewFile(file)"/>
                </view>
            </el-descriptions-item>
        </el-descriptions>
        <el-dialog title="图片预览" :visible.sync="showImagePreview" width="80%" append-to-body>
            <img v-if="previewImageUrl" class="preview-image" :src="previewImageUrl" alt="附件预览"/>
        </el-dialog>
    </el-dialog>
</template>

<script>
import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";
import areas from "@/uni_modules/vk-uview-ui/libs/address/areas.json";
import FileType from "../../../components/file-type/file-type.vue";

export default {
    name: "selfSupportQuoteModal",
    components: {FileType},
    data() {
        return {
            provinceData: provinces,
            cityData: citys,
            areaData: areas,
            id: null,
            info: null,
            dialogVisible: false,
            showImagePreview: false,
            previewImageUrl: '',
            quoteList: [],
            status: 0
        }
    },
    methods: {
        open(info) {
            this.info = info
            console.log(this.info)
            this.dialogVisible = true
        },
        handleClose() {
            this.dialogVisible = false
        },
        getFileExt(url = "") {
            const cleanUrl = String(url).split("?")[0].split("#")[0]
            const match = cleanUrl.match(/\.([a-z0-9]+)$/i)
            return match ? match[1].toLowerCase() : ""
        },
        isImageFile(url) {
            return ["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg"].includes(this.getFileExt(url))
        },
        isPdfFile(url) {
            return this.getFileExt(url) === "pdf"
        },
        isOfficeFile(url) {
            return ["doc", "docx", "xls", "xlsx", "ppt", "pptx"].includes(this.getFileExt(url))
        },
        getOfficePreviewUrl(url) {
            return `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`
        },
        previewFile(url) {
            if (!url) return
            if (this.isImageFile(url)) {
                this.previewImageUrl = url
                this.showImagePreview = true
                return
            }
            if (this.isPdfFile(url)) {
                window.open(url, "_blank")
                return
            }
            if (this.isOfficeFile(url)) {
                window.open(this.getOfficePreviewUrl(url), "_blank")
                return
            }
            window.open(url, "_blank")
        },
        openDownload(url) {
            this.previewFile(url)
        }
    }
}
</script>

<style lang="scss" scoped>

.request-header {
    border: 1px solid #EDEDED;
    background-color: #FFF8F1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    margin-top: 30px;

    text {
        text-align: center;
    }
}

.quote {
    border-left: 1px solid #EDEDED;
    border-right: 1px solid #EDEDED;
    border-bottom: 1px solid #EDEDED;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;

    text {
        text-align: center;
    }
}

.preview-image {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    margin: 0 auto;
}
</style>