|
|
@@ -1,225 +0,0 @@
|
|
|
-<script setup>
|
|
|
-import commonDialog from '@/components/dialog/Dialog.vue'
|
|
|
-import CollectInfo from '@/components/collect-info/CollectInfo.vue'
|
|
|
-import MonitorPopover from '@/components/common/MonitorPopover.vue'
|
|
|
-import { computed, ref, defineProps, reactive } from 'vue'
|
|
|
-import useQuickMonitor from '@jy/data-models/modules/quick-monitor/model'
|
|
|
-
|
|
|
-// 监控 + 监控成功
|
|
|
-// 未监控 + 取消监控
|
|
|
-
|
|
|
-// 留资
|
|
|
-// 非大会员、非商机管理，申请监控留资+提交成功
|
|
|
-// 大会员、商机管理，申请监控+联系客服
|
|
|
-
|
|
|
-const dialogDataMap = {
|
|
|
- 'monitor-success': {
|
|
|
- title: '监控成功',
|
|
|
- content:
|
|
|
- '您可前往“工作台-商机-业主监控”查看业主最新招标动态。为保证您能及时获取新增监控信息推送，请前往开启推送提醒。',
|
|
|
- footerActions: [
|
|
|
- {
|
|
|
- label: '暂不开启',
|
|
|
- class: 'cancel'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '去开启',
|
|
|
- class: 'confirm'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- 'max-monitor': {
|
|
|
- title: '监控业主个数已达上限',
|
|
|
- content: '您最多可监控$1个业主，可联系客服，申请监控更多业主',
|
|
|
- footerActions: [
|
|
|
- {
|
|
|
- label: '我再想想',
|
|
|
- class: 'cancel'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '联系客服',
|
|
|
- class: 'confirm'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- 'apply-monitor': {
|
|
|
- title: '申请监控更多业主',
|
|
|
- content: '您可联系客服，申请升级产品套餐，监控更多业主',
|
|
|
- footerActions: [
|
|
|
- {
|
|
|
- label: '我再想想',
|
|
|
- class: 'confirm'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '联系客服',
|
|
|
- class: 'confirm'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- 'cancel-monitor': {
|
|
|
- title: '确定不再监控？',
|
|
|
- content: '取消监控，将错过业主最新动态推送',
|
|
|
- footerActions: [
|
|
|
- {
|
|
|
- label: '确认取消',
|
|
|
- class: 'cancel'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '我再想想',
|
|
|
- class: 'confirm'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
-}
|
|
|
-const collectElement = ref(null)
|
|
|
-const follow = ref(false)
|
|
|
-const dialogShow = ref(false)
|
|
|
-const dialogConfig = computed(() => dialogDataMap['monitor-success'])
|
|
|
-
|
|
|
-// monitor-popover click emit
|
|
|
-function doClickMonitorActions(type) {
|
|
|
- switch (type) {
|
|
|
- case 'more':
|
|
|
- break
|
|
|
- case 'list':
|
|
|
- break
|
|
|
- case 'apply':
|
|
|
- break
|
|
|
- case 'cancel':
|
|
|
- break
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function doClickAction() {}
|
|
|
-function changeFollow() {}
|
|
|
-
|
|
|
-const props = defineProps({
|
|
|
- type: String,
|
|
|
- params: String,
|
|
|
- config: {
|
|
|
- type: Object,
|
|
|
- default: () => ({
|
|
|
- default: '监控',
|
|
|
- follow: '已监控'
|
|
|
- })
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-const useMonitor = reactive(
|
|
|
- useQuickMonitor({
|
|
|
- type: props.type,
|
|
|
- params: {
|
|
|
- id: props.params
|
|
|
- }
|
|
|
- })
|
|
|
-)
|
|
|
-
|
|
|
-console.log(useMonitor)
|
|
|
-const { doFetch, doChange } = useMonitor
|
|
|
-
|
|
|
-const model = computed(() => {
|
|
|
- return useMonitor.model
|
|
|
-})
|
|
|
-
|
|
|
-const monitorPopoverConfig = computed(() => {
|
|
|
- return {
|
|
|
- showTip: !model.value.follow,
|
|
|
- showMore: model.value.follow,
|
|
|
- showList: true,
|
|
|
- showCancel: model.value.follow,
|
|
|
- alreadyNum: model.value.expands.alreadyNum,
|
|
|
- remainNum: model.value.expands.remainNum,
|
|
|
- textType: props.type
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-doFetch()
|
|
|
-</script>
|
|
|
-<template>
|
|
|
- <div class="quick-monitor" v-if="model.canFollow">
|
|
|
- <!-- icon + popover -->
|
|
|
- <div class="quick-monitor-popover">
|
|
|
- <el-popover
|
|
|
- popper-class="monitor-popover"
|
|
|
- placement="bottom"
|
|
|
- :append-to-body="false"
|
|
|
- width="224"
|
|
|
- trigger="click"
|
|
|
- >
|
|
|
- <div
|
|
|
- slot="reference"
|
|
|
- class="flex-r-c center action-icon"
|
|
|
- @click.stop="changeFollow()"
|
|
|
- >
|
|
|
- <i
|
|
|
- class="icon iconfont"
|
|
|
- :class="{
|
|
|
- 'icon-yijiankong': model.follow,
|
|
|
- 'icon-jiankong': !model.follow
|
|
|
- }"
|
|
|
- ></i>
|
|
|
- <span>{{ model.follow ? config.follow : config.default }}</span>
|
|
|
- </div>
|
|
|
- <monitor-popover
|
|
|
- v-bind="monitorPopoverConfig"
|
|
|
- @click="doClickMonitorActions"
|
|
|
- ></monitor-popover>
|
|
|
- </el-popover>
|
|
|
- </div>
|
|
|
- <!-- 提示弹窗 -->
|
|
|
- <common-dialog
|
|
|
- center
|
|
|
- custom-class="monitor-class"
|
|
|
- width="380px"
|
|
|
- :visible="dialogShow"
|
|
|
- :title="dialogConfig.title"
|
|
|
- >
|
|
|
- <template #footer>
|
|
|
- <button
|
|
|
- v-for="(item, index) in dialogConfig.footerActions"
|
|
|
- :key="index"
|
|
|
- class="action-button"
|
|
|
- :class="item.class"
|
|
|
- @click="doClickAction(item)"
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </button>
|
|
|
- </template>
|
|
|
- {{ dialogConfig.content }}
|
|
|
- </common-dialog>
|
|
|
- <!-- 留资 -->
|
|
|
- <collect-info ref="collectElement"></collect-info>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.quick-monitor-popover {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.action-icon {
|
|
|
- .iconfont {
|
|
|
- font-size: 18px;
|
|
|
- color: #9b9ca3;
|
|
|
- &.icon-yijiankong {
|
|
|
- color: #ff9f40;
|
|
|
- }
|
|
|
- & + span {
|
|
|
- margin-left: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-::v-deep {
|
|
|
- .monitor-class {
|
|
|
- padding: 32px;
|
|
|
- .el-dialog__header {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- .el-dialog__body {
|
|
|
- padding: 20px 0 32px;
|
|
|
- }
|
|
|
- .el-dialog__footer {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
