|
@@ -9,12 +9,13 @@ import {
|
|
|
toRef
|
|
|
} from 'vue'
|
|
|
import { ajaxGetReportBtnStatus, ajaxReportEquityDeduct } from '@/api/modules'
|
|
|
+import { debounce } from '@/utils/'
|
|
|
|
|
|
const that = getCurrentInstance().proxy
|
|
|
|
|
|
const props = defineProps({
|
|
|
// 来源 ent: 企业画像;unit: 采购单位画像;article: 标讯详情 detail: 项目详情
|
|
|
- source: {
|
|
|
+ from: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
},
|
|
@@ -96,9 +97,8 @@ const buyerReportId = ref('')
|
|
|
const competitorReportId = ref({})
|
|
|
const discountMsg = ref('')
|
|
|
const reportBtnList = ref([])
|
|
|
-const bubbleLeft = ref('10px')
|
|
|
const bubbleTimer = ref(null)
|
|
|
-const bubbleText = ref('')
|
|
|
+const currentBubbleIndex = ref(0)
|
|
|
const packageInfo = toRef({})
|
|
|
|
|
|
const entNameList = computed(() => {
|
|
@@ -114,6 +114,31 @@ const isPackage = computed(() => {
|
|
|
return packageInfo.value?.zmStatus && packageInfo.value?.zmStatus > 0
|
|
|
})
|
|
|
|
|
|
+const discountText = computed(() => {
|
|
|
+ const packageType = packageInfo.value?.zmStatus
|
|
|
+ const expiredDay = packageInfo.value?.expiredDay
|
|
|
+ const balance = packageInfo.value?.zmNumber
|
|
|
+ // const total = packageInfo.value?.zmAllNumber
|
|
|
+ const price = packageInfo.value?.comboOne
|
|
|
+
|
|
|
+ if (packageType > 0) {
|
|
|
+ if (balance > 0) {
|
|
|
+ return `<div class="gray-text">本月剩余报告下载额度:<em class="highlight-text">${balance}</em>份</div>`
|
|
|
+ } else {
|
|
|
+ return `<div class="gray-text">本月免费额度已用完,可享权益特价:<span class="highlight-text">${price}/份</span></div>`
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // packageType < 0:套餐过期天数
|
|
|
+ // 其他:首购优惠等
|
|
|
+ if (packageType < 0 && expiredDay) {
|
|
|
+ return `<div class="highlight-text">您的权益已过期${expiredDay}天,开通权益享特惠</div>`
|
|
|
+ } else {
|
|
|
+ return `<div class="highlight-text">${discountMsg.value}</div>`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+})
|
|
|
+
|
|
|
const getReportId = (type, entName) => {
|
|
|
let reportId = ''
|
|
|
switch (type) {
|
|
@@ -148,7 +173,7 @@ const getReportMold = (type) => {
|
|
|
return mold
|
|
|
}
|
|
|
|
|
|
-const handleDownload = (item) => {
|
|
|
+const handleDownload = debounce((item) => {
|
|
|
if (item.type === 'competitor' && entNameList.value.length > 1) {
|
|
|
item.showPopover = !item.showPopover
|
|
|
that.$forceUpdate()
|
|
@@ -166,9 +191,7 @@ const handleDownload = (item) => {
|
|
|
} else {
|
|
|
// 买过套餐权益则抵扣次数
|
|
|
deductPackage(item, (code, data) => {
|
|
|
- console.log(code, data)
|
|
|
- debugger
|
|
|
- if (code === 0 && data?.id) {
|
|
|
+ if (code === 0 && data) {
|
|
|
// 抵扣成功 生成报告id
|
|
|
window.open(
|
|
|
`/swordfish/page_big_pc/report/analysis/detail?id=${data}`
|
|
@@ -184,10 +207,12 @@ const handleDownload = (item) => {
|
|
|
window.open(`${item.url}?name=${item.name}&id=${props.bId}`)
|
|
|
}
|
|
|
}
|
|
|
+ // 重新获取报告按钮状态(查询使用次数)
|
|
|
+ getReportBtnStatus()
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
+}, 300)
|
|
|
const onClickCompetitor = (ent, parent) => {
|
|
|
if (!entCrnMap.value[ent]) return
|
|
|
parent.showPopover = false
|
|
@@ -205,18 +230,23 @@ const onClickCompetitor = (ent, parent) => {
|
|
|
deductPackage(item, (code, data) => {
|
|
|
if (code === 0 && data) {
|
|
|
window.open(`/swordfish/page_big_pc/report/analysis/detail?id=${data}`)
|
|
|
- // 重新获取报告按钮状态
|
|
|
- getReportBtnStatus()
|
|
|
} else {
|
|
|
// 没购买过||抵扣失败跳到购买页
|
|
|
window.open(`${parent.url}?name=${ent}&id=${props.bId}`)
|
|
|
}
|
|
|
+ // 重新获取报告按钮状态(查询使用次数)
|
|
|
+ getReportBtnStatus()
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
// 获取报告入口按钮状态
|
|
|
const getReportBtnStatus = async () => {
|
|
|
if (!props.bId && !props.buyerName && !props.winnerName) return
|
|
|
+ /**
|
|
|
+ * 项目分析报告需要bidding_id和采购单位名称,同时不是招标类型调接口时则不会传bidding_id,为了区分采购单位画像只需传采购单位的场景(采购单位分析报告),
|
|
|
+ * 如果是项目详情页面且不是招标类型的跳出 不再调用接口
|
|
|
+ */
|
|
|
+ if (props.from === 'detail' && props.topType !== '招标') return
|
|
|
const { error_code: code, data } = await ajaxGetReportBtnStatus({
|
|
|
bidding_id: props.topType === '招标' ? props.bId : '',
|
|
|
buyer: props.buyerName,
|
|
@@ -271,23 +301,12 @@ const startBubbleAnimation = () => {
|
|
|
const btnLen = reportBtnList.value.length
|
|
|
if (btnLen === 0) return
|
|
|
nextTick(() => {
|
|
|
- const btnRefs = that.$refs.reportBtn
|
|
|
- let currentIndex = 0
|
|
|
if (bubbleTimer.value) clearInterval(bubbleTimer.value)
|
|
|
- if (btnLen === 1) {
|
|
|
- bubbleLeft.value = '10px'
|
|
|
- bubbleText.value = reportBtnList.value[0].marketText
|
|
|
+ if (btnLen.length === 1) {
|
|
|
+ currentBubbleIndex.value = 0
|
|
|
} else {
|
|
|
- bubbleText.value = reportBtnList.value[0].marketText
|
|
|
bubbleTimer.value = setInterval(() => {
|
|
|
- currentIndex = (currentIndex + 1) % btnLen
|
|
|
- const btn = btnRefs[currentIndex]
|
|
|
- if (btn) {
|
|
|
- bubbleLeft.value = btn?.offsetLeft - 10 + 'px'
|
|
|
- setTimeout(() => {
|
|
|
- bubbleText.value = reportBtnList.value[currentIndex].marketText
|
|
|
- }, 300)
|
|
|
- }
|
|
|
+ currentBubbleIndex.value = (currentBubbleIndex.value + 1) % btnLen
|
|
|
}, 2500)
|
|
|
}
|
|
|
})
|
|
@@ -295,6 +314,12 @@ const startBubbleAnimation = () => {
|
|
|
|
|
|
// 套餐扣除
|
|
|
const deductPackage = async (item, callback) => {
|
|
|
+ const loading = that.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: 'Loading',
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ customClass: 'custom-toast-loading'
|
|
|
+ })
|
|
|
const { type, name } = item
|
|
|
const params = {
|
|
|
ent_name: type === 'competitor' ? name : '',
|
|
@@ -303,8 +328,14 @@ const deductPackage = async (item, callback) => {
|
|
|
project_name: type === 'project' ? props.projectName : '',
|
|
|
bidding_id: props.topType === '招标' ? props.bId : ''
|
|
|
}
|
|
|
- const { error_code: code, data } = await ajaxReportEquityDeduct(params)
|
|
|
- callback && callback(code, data)
|
|
|
+ try {
|
|
|
+ const { error_code: code, data } = await ajaxReportEquityDeduct(params)
|
|
|
+ loading.close()
|
|
|
+ callback && callback(code, data)
|
|
|
+ } catch (error) {
|
|
|
+ loading.close()
|
|
|
+ callback && callback()
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
@@ -335,8 +366,8 @@ onUnmounted(() => {
|
|
|
>{{ statusMap[packageInfo.zmStatus].text }}</span
|
|
|
>
|
|
|
</div>
|
|
|
- <div v-if="discountMsg" class="discount-container">
|
|
|
- <span :class="{ 'gray-text': isPackage }" v-html="discountMsg"></span>
|
|
|
+ <div v-if="discountText" class="discount-container">
|
|
|
+ <span v-html="discountText"></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
@@ -365,21 +396,25 @@ onUnmounted(() => {
|
|
|
<span>{{ ent }}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <button
|
|
|
- class="flex flex-items-center report-btn"
|
|
|
- slot="reference"
|
|
|
- @click="handleDownload(item, index)"
|
|
|
- :ref="'reportBtn'"
|
|
|
- >
|
|
|
- <span>{{ item.text }}</span>
|
|
|
- <i class="j-icon j-icon-base icon-img-download"></i>
|
|
|
- <i class="j-icon j-icon-base icon-img-download-white"></i>
|
|
|
- </button>
|
|
|
+ <div class="btn-container" slot="reference">
|
|
|
+ <button
|
|
|
+ class="flex flex-items-center report-btn"
|
|
|
+ @click="handleDownload(item, index)"
|
|
|
+ :ref="'reportBtn'"
|
|
|
+ >
|
|
|
+ <span>{{ item.text }}</span>
|
|
|
+ <i class="j-icon j-icon-base icon-img-download"></i>
|
|
|
+ <i class="j-icon j-icon-base icon-img-download-white"></i>
|
|
|
+ </button>
|
|
|
+ <div
|
|
|
+ class="bubble-box"
|
|
|
+ :class="{ visible: currentBubbleIndex === index }"
|
|
|
+ >
|
|
|
+ {{ item.marketText }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-popover>
|
|
|
</div>
|
|
|
- <div v-show="bubbleText" class="bubble" :style="{ left: bubbleLeft }">
|
|
|
- {{ bubbleText }}
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -407,9 +442,6 @@ onUnmounted(() => {
|
|
|
font-size: 12px;
|
|
|
line-height: 18px;
|
|
|
color: $color_main;
|
|
|
- .gray-text {
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
}
|
|
|
.member-status {
|
|
|
padding: 2px 8px;
|
|
@@ -433,6 +465,27 @@ onUnmounted(() => {
|
|
|
.banner-right {
|
|
|
position: relative;
|
|
|
}
|
|
|
+ .btn-container {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .bubble-box {
|
|
|
+ position: absolute;
|
|
|
+ top: -14px;
|
|
|
+ left: 10px;
|
|
|
+ background: linear-gradient(101.8deg, #2abed1 0%, #0a6cff 100%);
|
|
|
+ padding: 1px 8px;
|
|
|
+ border-radius: 8px 2px 8px 2px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #fff;
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(10px);
|
|
|
+ transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
|
+ &.visible {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
.report-btn {
|
|
|
margin-left: 20px;
|
|
|
padding: 3px 20px;
|
|
@@ -516,6 +569,9 @@ onUnmounted(() => {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+ .gray-text {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|