|
@@ -0,0 +1,374 @@
|
|
|
+<template>
|
|
|
+ <Layout class="business-detail-page">
|
|
|
+ <div class="business-header">
|
|
|
+ <div class="name">
|
|
|
+ {{ info.title }}
|
|
|
+ </div>
|
|
|
+ <div class="business-sub-row">
|
|
|
+ <div class="d-m-time common-time">
|
|
|
+ {{ dateFromNow(new Date(publishtime).getTime()) }}
|
|
|
+ </div>
|
|
|
+ <div class="business_option">
|
|
|
+ <div class="potential-col">
|
|
|
+ 提前介入,把握商机,戳我查看
|
|
|
+ <em class="handle-em" @click="goPotentialPage">潜在项目预测</em
|
|
|
+ ><i class="icon_right"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <section class="collect-info-tip" v-if="needComplete">
|
|
|
+ 【商机情报】想获得更精准商机情报?立即<em
|
|
|
+ class="handle-em"
|
|
|
+ @click="completeInfo"
|
|
|
+ >完善信息</em
|
|
|
+ >。您也可以<em class="handle-em" @click="openCustomer">联系客服</em
|
|
|
+ >进行相关咨询。
|
|
|
+ </section>
|
|
|
+ <div class="business-content">
|
|
|
+ <section class="poten-box">
|
|
|
+ <div class="box-title">
|
|
|
+ <span class="left-line"></span>
|
|
|
+ <span>预测项目</span>
|
|
|
+ </div>
|
|
|
+ <div class="box-con">
|
|
|
+ <div class="list_name">
|
|
|
+ <span class="pur_company">采购单位</span>
|
|
|
+ <span class="list_pur_name">{{ info.buyer }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="list_poten">
|
|
|
+ <div class="poten_unit">
|
|
|
+ <span class="poten_label"
|
|
|
+ ><span class="point"></span>预测线索</span
|
|
|
+ >
|
|
|
+ <span class="poten_name">{{
|
|
|
+ info.title && info.title.indexOf('】')
|
|
|
+ ? info.title.substring(info.title.indexOf('】') + 1)
|
|
|
+ : info.title
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="poten_unit mt8">
|
|
|
+ <span class="poten_label"
|
|
|
+ ><span class="point"></span>预测采购内容</span
|
|
|
+ >
|
|
|
+ <span class="poten_name">
|
|
|
+ <span>{{ info.purchasing }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="poten_unit mt8">
|
|
|
+ <span class="poten_label">
|
|
|
+ <span class="point"></span>预测采购时间:
|
|
|
+ <span style="color: #1d1d1d">{{
|
|
|
+ dateFormatter(yuceendtime, 'yyyy-MM-dd')
|
|
|
+ }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="similar-box mt8" v-if="similarProject">
|
|
|
+ <div class="box-title">
|
|
|
+ <span class="left-line"></span>
|
|
|
+ <span>同类项目</span>
|
|
|
+ </div>
|
|
|
+ <div class="box-con">
|
|
|
+ <div class="pur_unit">
|
|
|
+ <span class="unit_label">同类项目:</span>
|
|
|
+ <span
|
|
|
+ class="unit_name handle-em"
|
|
|
+ @click="goViewDetail(similarProject.p_id)"
|
|
|
+ >{{ similarProject.p_orther }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="pur_unit mt8">
|
|
|
+ <span class="unit_label">联系人:</span>
|
|
|
+ <span class="unit_name">{{ similarProject.p_person }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="pur_unit mt8">
|
|
|
+ <span class="unit_label">联系电话:</span>
|
|
|
+ <span class="unit_name">{{ similarProject.p_phone }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ <!-- 留资弹窗 -->
|
|
|
+ <CollectInfo ref="collectRef"></CollectInfo>
|
|
|
+ </Layout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Layout from '@/components/common/ContentLayout.vue'
|
|
|
+import CollectInfo from '@/components/collect-info/CollectInfo.vue'
|
|
|
+import { dateFromNow, dateFormatter } from '@/utils/'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import tdk from '@/utils/mixins/set-tdk.js'
|
|
|
+import { getBusinessDetails, isNeedCompleteInfo } from '@/api/modules/'
|
|
|
+export default {
|
|
|
+ name: 'business-opp-detail',
|
|
|
+ mixins: [tdk],
|
|
|
+ components: {
|
|
|
+ Layout,
|
|
|
+ CollectInfo
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ info: {},
|
|
|
+ needComplete: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters('user', [
|
|
|
+ 'bigmember' // 是否大会员
|
|
|
+ ]),
|
|
|
+ publishtime() {
|
|
|
+ return this.info.publishtime ? this.info.publishtime * 1000 : 0
|
|
|
+ },
|
|
|
+ yuceendtime() {
|
|
|
+ return this.info.yuceendtime ? this.info.yuceendtime * 1000 : 0
|
|
|
+ },
|
|
|
+ similarProject() {
|
|
|
+ return this.info.results && this.info.results[0]
|
|
|
+ ? this.info.results[0]
|
|
|
+ : {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.isNeedComplete()
|
|
|
+ this.getDetailInfo()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ window.openCustomer = this.openCustomer
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ dateFromNow,
|
|
|
+ dateFormatter,
|
|
|
+ setTdkInfo() {
|
|
|
+ const name = this.info.title
|
|
|
+ this.setPageTdkToView({
|
|
|
+ title: `${name}招标采购_中标信息 - 剑鱼标讯`,
|
|
|
+ keywords: `${name} ,${name} 招投标,${name} 招标采购,${name}中标信息,${name}通讯录,剑鱼标讯`,
|
|
|
+ description: `剑鱼标讯为您提供${name}相关的工商企业信息及招投标、中标信息服务,涵盖工商企业信息、企业通讯录、公司中标信息、项目动态、年度项目统计、月度中标金额统计、市场区域及客户分布等一系列相关信息服务,全面了解${name},就上剑鱼标讯官网。`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 是否需要完善信息
|
|
|
+ async isNeedComplete() {
|
|
|
+ const { error_code: code, data } = await isNeedCompleteInfo()
|
|
|
+ if (code === 0) {
|
|
|
+ this.needComplete = !!data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取信息详情
|
|
|
+ async getDetailInfo() {
|
|
|
+ const id = this.$route.params?.id || ''
|
|
|
+ const { error_code: code, data = {} } = await getBusinessDetails({ id })
|
|
|
+ if (code === 0 && data) {
|
|
|
+ this.info = data
|
|
|
+ this.setTdkInfo()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goViewDetail(id) {
|
|
|
+ const routeUrl = this.$router.resolve({
|
|
|
+ path: '/pro_follow_detail?sid=' + id
|
|
|
+ })
|
|
|
+ return window.open(routeUrl.href, '_blank')
|
|
|
+ },
|
|
|
+ // 完善信息
|
|
|
+ completeInfo() {
|
|
|
+ window.location.href =
|
|
|
+ '/swordfish/frontPage/user/sess/set_favorite?source=pc_project_businessDetails_improve'
|
|
|
+ },
|
|
|
+ // 联系客服
|
|
|
+ openCustomer() {
|
|
|
+ this.contactCustomer(this)
|
|
|
+ },
|
|
|
+ // 跳转潜在项目预测(无权限用户引导大会员留资,大会员引导跳转到潜在项目预测页面。)
|
|
|
+ goPotentialPage() {
|
|
|
+ if (this.bigmember) {
|
|
|
+ window.open('/swordfish/page_big_pc/forecast_list')
|
|
|
+ } else {
|
|
|
+ this.$refs.collectRef.isNeedSubmit('pc_project_businessDetails')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.business-detail-page {
|
|
|
+ > .content-right.ad-container {
|
|
|
+ width: 200px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.business-detail-page {
|
|
|
+ margin: 32px auto;
|
|
|
+ .business-header {
|
|
|
+ position: relative;
|
|
|
+ padding: 24px 40px;
|
|
|
+ background: #fff;
|
|
|
+ line-height: 36px;
|
|
|
+ border-radius: 8px;
|
|
|
+ .name {
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 36px;
|
|
|
+ color: #252627;
|
|
|
+ }
|
|
|
+ .business-sub-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+ .common-time {
|
|
|
+ margin-left: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ .business_option {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .potential-col {
|
|
|
+ padding: 4px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #87dfea;
|
|
|
+ background: #eaf8fa;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ .icon_right {
|
|
|
+ display: inline-block;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background: url('~@/assets/images/icon/icon_right2.png') no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .collect-info-tip {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1d1d1d;
|
|
|
+ line-height: 24px;
|
|
|
+ padding: 16px 0 16px 40px;
|
|
|
+ background: #fff url('~@/assets/images/business/tip-bg.png') no-repeat
|
|
|
+ center right;
|
|
|
+ background-size: contain;
|
|
|
+ margin-top: 16px;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ .business-content {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 32px 40px 32px 0;
|
|
|
+ margin-top: 16px;
|
|
|
+
|
|
|
+ .poten-box {
|
|
|
+ .list_name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12px;
|
|
|
+
|
|
|
+ .pur_company {
|
|
|
+ margin-right: 8px;
|
|
|
+ padding: 2px 8px;
|
|
|
+ width: 68px;
|
|
|
+ height: 24px;
|
|
|
+ background: rgba(245, 101, 0, 0.1);
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ color: #f56500;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_pur_name {
|
|
|
+ color: #171826;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_poten {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .poten_unit {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .poten_label {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 22px;
|
|
|
+
|
|
|
+ .point {
|
|
|
+ display: flex;
|
|
|
+ margin-right: 9px;
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ background: #ececec;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .poten_name {
|
|
|
+ margin-left: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1d1d1d;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .similar-box {
|
|
|
+ .pur_unit {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ .unit_label {
|
|
|
+ display: inline-block;
|
|
|
+ color: #999;
|
|
|
+ width: 70px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .unit_name {
|
|
|
+ color: #1d1d1d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #1d1d1d;
|
|
|
+
|
|
|
+ .left-line {
|
|
|
+ display: inline-block;
|
|
|
+ background: #2abed1;
|
|
|
+ width: 3px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 0 2px 2px 0;
|
|
|
+ margin-right: 37px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-con {
|
|
|
+ padding: 8px 40px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ .mt8 {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .handle-em {
|
|
|
+ color: #2abed1 !important;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|