jjx-web/pages/store/components/oldModal.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="quoteList">
        <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._add_time_str }}</text>
          <text class="flex-1">{{ item.user.mobile }}</text>
          <text class="flex-1">{{ item.totalPrice }}元</text>
          <text class="flex-1">{{ item.remark }}</text>
          <text class="flex-1">{{ item.supplierExt ? item.supplierExt : '无' }}</text>
          <view class="flex-1">
            <view class="flex-1">
              <view class="mt-15 mr-15" v-for="(file, fileIndex) in item.files" :key="fileIndex">
                <file-type :item="file" @click.native="previewFile(file)"/>
              </view>
            </view>
          </view>
          <text class="flex-1">
            <el-button type="primary" @click.native="createContract(item._id)" v-if="status === 0">选择</el-button>
          </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 {FileExcel, FilePdfOne, FileWord} from "@icon-park/vue";
import FileType from "../../../components/file-type/file-type.vue";

export default {
  name: "oldModal",
  components: {FileType, FilePdfOne, FileExcel, FileWord},
  data() {
    return {
      provinceData: provinces,
      cityData: citys,
      areaData: areas,
      id: null,
      dialogVisible: false,
      quoteList: [],
      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: '',
      signMethod: 0
    }
  },
  methods: {
    open(id, status, quoteList, signMethod) {
      this.id = id
      this.status = status
      this.quoteList = quoteList
      this.signMethod = signMethod
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    toQuote() {
      vk.navigateTo(`/pages/process/quote?sheetId=${this.id}`)
    },
    async createContract(quoteId) {
      await vk.callFunction({
        url: 'client/old/kh/confirmQuote',
        title: '请求中...',
        data: {
          quoteId,
        }
      });
      this.dialogVisible = false
      this.$message({
        message: "选择成功",
        type: 'success'
      })
      if (this.signMethod === 0) vk.navigateTo('/pages/contract/index?tab=1')
      else {
        if (this.signMethod === 1) vk.navigateTo('/pages/store/store?menuIndex=2')
        else vk.navigateTo('/pages/contract/index?tab=0&tradeMethod=0')
      }
    },
    getOldInfo() {
      vk.callFunction({
        url: 'client/old/pub/getDetail',
        title: '请求中...',
        data: {
          id: this.id,
        }
      }).then(res => {
        this.info = res.data
      })
    },
    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")
    },
    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>