feat: 芝麻分析报告套餐抵扣功能

apps/bigmember_pc/src/components/zhima/report-guide-banner.vue

@@ -1,13 +1,14 @@
 <script setup>
 import {
   ref,
-  watch,
   computed,
   nextTick,
   getCurrentInstance,
-  onMounted
+  onMounted,
+  onUnmounted,
+  toRef
 } from 'vue'
-import { ajaxGetReportBtnStatus } from '@/api/modules'
+import { ajaxGetReportBtnStatus, ajaxReportEquityDeduct } from '@/api/modules'
 
 const that = getCurrentInstance().proxy
 
@@ -17,10 +18,6 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  status: {
-    type: String,
-    default: '' // month: 月卡 season: 季卡 year: 年卡
-  },
   // 采购单位名称
   buyerName: {
     type: String,
@@ -55,7 +52,8 @@ const btnList = [
     icon: 'icon-img-download',
     url: '/swordfish/page_big_pc/order/analysis-report/unit',
     visible: false,
-    showPopover: false
+    showPopover: false,
+    mold: 3
   },
   {
     type: 'competitor',
@@ -63,7 +61,8 @@ const btnList = [
     icon: 'icon-img-download-white',
     url: '/swordfish/page_big_pc/order/analysis-report/competitor',
     visible: false,
-    showPopover: false
+    showPopover: false,
+    mold: 2
   },
   {
     type: 'project',
@@ -71,20 +70,21 @@ const btnList = [
     icon: 'icon-img-download',
     url: '/swordfish/page_big_pc/order/analysis-report/project',
     visible: false,
-    showPopover: false
+    showPopover: false,
+    mold: 1
   }
 ]
 
 const statusMap = {
-  month: {
+  1: {
     text: '月卡VIP',
     bg: 'bg-member-month'
   },
-  season: {
+  2: {
     text: '季卡VIP',
     bg: 'bg-member-season'
   },
-  year: {
+  3: {
     text: '年卡VIP',
     bg: 'bg-member-year'
   }
@@ -96,6 +96,10 @@ const buyerReportId = ref('')
 const competitorReportId = ref({})
 const discountMsg = ref('')
 const reportBtnList = ref([])
+const bubbleLeft = ref('10px')
+const bubbleTimer = ref(null)
+const bubbleText = ref('')
+const packageInfo = toRef({})
 
 const entNameList = computed(() => {
   return props.winnerName.split(',') || []
@@ -106,6 +110,10 @@ const showBanner = computed(() => {
   return reportBtnList.value.length > 0
 })
 
+const isPackage = computed(() => {
+  return packageInfo.value?.zmStatus && packageInfo.value?.zmStatus > 0
+})
+
 const getReportId = (type, entName) => {
   let reportId = ''
   switch (type) {
@@ -123,6 +131,23 @@ const getReportId = (type, entName) => {
   }
   return reportId
 }
+
+const getReportMold = (type) => {
+  let mold = 0
+  switch (type) {
+    case 'project':
+      mold = 1
+      break
+    case 'competitor':
+      mold = 2
+      break
+    case 'buyer':
+      mold = 3
+      break
+  }
+  return mold
+}
+
 const handleDownload = (item) => {
   if (item.type === 'competitor' && entNameList.value.length > 1) {
     item.showPopover = !item.showPopover
@@ -139,15 +164,27 @@ const handleDownload = (item) => {
         `/swordfish/page_big_pc/report/analysis/detail?id=${reportId}`
       )
     } else {
-      // 没购买过跳到购买页
-      if (item.type === 'project') {
-        // 项目分析报告 name: 项目名称（下单展示用），buyer：采购单位名称（下单接口参数用）
-        window.open(
-          `${item.url}?name=${item.name}&id=${props.bId}&buyer=${props.buyerName}`
-        )
-      } else {
-        window.open(`${item.url}?name=${item.name}&id=${props.bId}`)
-      }
+      // 买过套餐权益则抵扣次数
+      deductPackage(item, (code, data) => {
+        console.log(code, data)
+        debugger
+        if (code === 0 && data?.id) {
+          // 抵扣成功 生成报告id
+          window.open(
+            `/swordfish/page_big_pc/report/analysis/detail?id=${data}`
+          )
+        } else {
+          // 没购买过跳到购买页
+          if (item.type === 'project') {
+            // 项目分析报告 name: 项目名称（下单展示用），buyer：采购单位名称（下单接口参数用）
+            window.open(
+              `${item.url}?name=${item.name}&id=${props.bId}&buyer=${props.buyerName}`
+            )
+          } else {
+            window.open(`${item.url}?name=${item.name}&id=${props.bId}`)
+          }
+        }
+      })
     }
   }
 }
@@ -160,8 +197,21 @@ const onClickCompetitor = (ent, parent) => {
     // 有报告id即为已购买过该报告，跳转到报告预览页面
     window.open(`/swordfish/page_big_pc/report/analysis/detail?id=${reportId}`)
   } else {
-    // 没购买过跳到购买页
-    window.open(`${parent.url}?name=${ent}&id=${props.bId}`)
+    const item = {
+      type: 'competitor',
+      name: ent
+    }
+    // 套餐抵扣次数
+    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}`)
+      }
+    })
   }
 }
 // 获取报告入口按钮状态
@@ -181,27 +231,34 @@ const getReportBtnStatus = async () => {
       buyer_report_id,
       ent_report_ids = {},
       project_report_id,
-      ent_crn
+      ent_crn,
+      guidingCopy,
+      zmAnalysis
     } = data
     entCrnMap.value = ent_crn
     projectReportId.value = project_report_id
     buyerReportId.value = buyer_report_id
     competitorReportId.value = ent_report_ids
     discountMsg.value = discount_msg
+    packageInfo.value = zmAnalysis
     const list = btnList.map((item) => {
       if (item.type === 'buyer') {
         item.visible = buyer_report_button
         item.name = props.buyerName
+        item.marketText = guidingCopy?.buyer
       } else if (item.type === 'competitor') {
         item.visible = ent_report_button
         item.name = props.winnerName
+        item.marketText = guidingCopy?.ent
       } else if (item.type === 'project') {
         item.visible = project_report_button
         item.name = props.projectName
+        item.marketText = guidingCopy?.project
       }
       return item
     })
     reportBtnList.value = list.filter((v) => v.visible)
+    startBubbleAnimation()
   }
 }
 const onClickOutSide = () => {
@@ -209,9 +266,54 @@ const onClickOutSide = () => {
     v.showPopover = false
   })
 }
+
+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
+    } 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)
+        }
+      }, 2500)
+    }
+  })
+}
+
+// 套餐扣除
+const deductPackage = async (item, callback) => {
+  const { type, name } = item
+  const params = {
+    ent_name: type === 'competitor' ? name : '',
+    buyer: type !== 'competitor' ? props.buyerName : '',
+    report_mold: getReportMold(type),
+    project_name: type === 'project' ? props.projectName : '',
+    bidding_id: props.topType === '招标' ? props.bId : ''
+  }
+  const { error_code: code, data } = await ajaxReportEquityDeduct(params)
+  callback && callback(code, data)
+}
+
 onMounted(() => {
   getReportBtnStatus()
 })
+
+onUnmounted(() => {
+  if (bubbleTimer.value) clearInterval(bubbleTimer.value)
+})
 </script>
 <template>
   <div
@@ -227,14 +329,14 @@ onMounted(() => {
         />
         <img class="zhima-logo" src="@/assets/images/logo/zhima-logo.png" />
         <span
-          v-if="status"
+          v-if="isPackage"
           class="member-status"
-          :class="statusMap[status].bg"
-          >{{ statusMap[status].text }}</span
+          :class="statusMap[packageInfo.zmStatus].bg"
+          >{{ statusMap[packageInfo.zmStatus].text }}</span
         >
       </div>
       <div v-if="discountMsg" class="discount-container">
-        <span>{{ discountMsg }}</span>
+        <span :class="{ 'gray-text': isPackage }" v-html="discountMsg"></span>
       </div>
     </div>
     <div
@@ -267,6 +369,7 @@ onMounted(() => {
             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>
@@ -274,6 +377,9 @@ onMounted(() => {
           </button>
         </el-popover>
       </div>
+      <div v-show="bubbleText" class="bubble" :style="{ left: bubbleLeft }">
+        {{ bubbleText }}
+      </div>
     </div>
   </div>
 </template>
@@ -301,6 +407,9 @@ onMounted(() => {
     font-size: 12px;
     line-height: 18px;
     color: $color_main;
+    .gray-text {
+      color: #999999;
+    }
   }
   .member-status {
     padding: 2px 8px;
@@ -385,6 +494,18 @@ onMounted(() => {
       }
     }
   }
+  .bubble {
+    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;
+    transition: left 0.5s ease-in-out;
+  }
   ::v-deep {
     .report-btn-popover {
       padding: 0 !important;