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

<template>
    <el-dialog
        title="报价列表"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
        <view slot="title" class="text-main text-40 m-30 flex justify-between items-center">
            <text>收到的报价</text>
            <el-button type="primary" @click.native="dialogVisible = false">关闭</el-button>
        </view>
        <view class="mt-15">
            <view class="request-header">
                <text class="flex-1">供应商</text>
                <text class="flex-1">联系方式</text>
                <text class="flex-1">报价</text>
                <text class="flex-1">详情</text>
                <text class="flex-1">供应商合同补充条款</text>
                <text class="flex-1">报价时间</text>
                <text class="flex-1">附件</text>
                <text class="flex-1">操作</text>
            </view>
            <view class="quote" v-for="(item, index) in quoteList" :key="index">
                <text class="flex-1">{{ item.subjectName }}</text>
                <text class="flex-1">{{ item.subjectMobile }}</text>
                <text class="flex-1">{{ item.totalPrice }}元</text>
                <text class="flex-1">{{ item.remark ? item.remark : '无' }}</text>
                <text class="flex-1">{{ item.supplierExt ? item.supplierExt : '无' }}</text>
                <text class="flex-1">{{ item._add_time_str }}</text>
                <text class="flex-1">
                    <template v-if="item.files && item.files.length > 0">
                        <file-type v-for="(file, fileIndex) in item.files" :key="fileIndex" :item="file"
                                   @click.native="previewFile(file)"/>
                    </template>
                    <text v-else>无</text>
                </text>
                <text class="flex-1">
                    <el-button type="primary" v-if="item.status === 0" @click.native="confirm(item)">选择</el-button>
                </text>
            </view>
        </view>
        <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: "enquiryModal",
    components: {FileType},
    data() {
        return {
            provinceData: provinces,
            cityData: citys,
            areaData: areas,
            id: null,
            dialogVisible: false,
            showImagePreview: false,
            previewImageUrl: '',
            quoteList: [],
            info: null
        }
    },
    methods: {
        open(info) {
            this.info = info
            this.quoteList = info.quoteList
            this.dialogVisible = true
        },
        handleClose() {
            this.dialogVisible = false
        },
        toRelease() {
            uni.navigateTo({
                url: '/pages/enquiry/release'
            })
        },
        confirm(item) {
            vk.callFunction({
                url: 'client/enquiry/quote/kh/confirmQuote',
                title: '请求中...',
                data: {
                    quoteId: item._id,
                },
                success: (data) => {
                    this.dialogVisible = false
                    this.$message({
                        type: 'success',
                        message: '报价确认成功'
                    })
                    setTimeout(() => {
                        if (this.info.signMethod === 0) vk.navigateTo('/pages/contract/index?tab=1')
                        else {
                            if (this.info.signMethod === 1) vk.navigateTo('/pages/store/buyer')
                            else vk.navigateTo('/pages/contract/index?tab=0')
                        }
                    }, 500)
                }
            });
        },
        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>