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

<template>
    <view>

        <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" v-if="cooperateList">
                <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>
                </view>
                <view class="quote" v-for="(item, index) in cooperateList" :key="index">
                    <text class="flex-1">{{ item.user.company.companyName }}</text>
                    <text class="flex-1">{{ item.name }}</text>
                    <text class="flex-1"> {{ item.mobile }}</text>
                    <text class="flex-1">{{ item.remark }}</text>
                    <view class="flex-1">
                        <file-type v-for="(file, fileIndex) in item.files" :key="fileIndex" :item="file"
                                   @click.native="previewFile(file)"/>
                    </view>
                    <text class="flex-1">{{ item._add_time_str }}</text>
                </view>
            </view>
        </el-dialog>
        <vk-data-dialog
            v-model="showInfo"
            title="申请详情"
            width="600px"
            top="14vh"
            center
            :close-on-click-modal="true"
        >
            <vk-data-detail-table
                :data="info"
                :columns="infoColumns"
                size="medium"
                label-width="150px"
            ></vk-data-detail-table>
            <template v-slot:footer>
                <el-button @click="showInfo = false">关闭</el-button>
            </template>
        </vk-data-dialog>
        <el-dialog title="图片预览" :visible.sync="showImagePreview" width="80%" append-to-body>
            <img v-if="previewImageUrl" class="preview-image" :src="previewImageUrl" alt="附件预览"/>
        </el-dialog>
    </view>
</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: "spotModal",
    components: {FileType},
    data() {
        return {
            provinceData: provinces,
            cityData: citys,
            areaData: areas,
            id: null,
            dialogVisible: false,
            cooperateList: [],
            status: 0,
            infoColumns: [
                {key: "company.companyName", title: "申请人", type: "text"},
                {key: "company.mobile", title: "联系方式", type: "text"},
                {key: "manager.personName", title: "代理人", type: "text"},
                {key: "manager.mobile", title: "代理人联系方式", type: "text"},
            ],
            info: null,
            showInfo: false,
            showImagePreview: false,
            previewImageUrl: '',
        }
    },
    methods: {
        open(status, cooperateList) {
            this.cooperateList = cooperateList
            this.dialogVisible = true
        },
        handleClose() {
            this.dialogVisible = false
        },
        toQuote() {
            vk.navigateTo(`/pages/process/quote?sheetId=${this.id}`)
        },
        createContract({totalPrice, uid, _id}) {
            vk.callFunction({
                url: 'client/contract/kh/add',
                data: {
                    type: 'process',
                    productTitle: this.info.title,
                    transactionId: vk.pubfn.createOrderNo("P", 20),
                    sheetId: this.id,
                    quoteId: _id,
                    buyer: vk.getVuex('$user.userInfo._id'),
                    seller: uid,
                    amount: totalPrice,
                    partyCount: 2,
                    signCount: 0,
                }
            }).then((res) => {
                this.$message({
                    message: '选择成功',
                    type: 'success'
                })
                setTimeout(() => {
                    vk.navigateTo('/pages/contract/index')
                }, 1500)
            })
        },
        doShowInfo(info) {
            this.info = info
            this.showInfo = true
        },
        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")
        }
    }
}
</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>