| 提交 | 用户 | age | ||
| f353bc | 1 | <template> |
| S | 2 | <div :class="prefixCls"> |
| 3 | <Row :class="`${prefixCls}-top`"> | |
| 4 | <Col :span="4" :class="`${prefixCls}-col`"> | |
| 5 | <div :class="`${prefixCls}-top__avatar`"> | |
| 6 | <img width="50" :src="avatar" /> | |
| 7 | </div> | |
| 8 | </Col> | |
| 9 | <Col :span="20" :class="`${prefixCls}-col`"> | |
| 10 | <div class="mb-10px"> | |
| 11 | <div class="mb-5px"> | |
| 12 | Vben | |
| 13 | <Icon | |
| 14 | icon="majesticons:open" | |
| 15 | class="mr-15px cursor-pointer" | |
| 16 | @click="" | |
| 17 | :style="{ color: 'hotpink' }" | |
| 18 | :size="16" | |
| 19 | /> | |
| 20 | </div> | |
| 21 | <div>海纳百川，有容乃大</div> | |
| 22 | </div> | |
| 23 | <div class="mb-10px flex"> | |
| 24 | <div> | |
| 25 | <span>跟进人：</span> | |
| 26 | <span>111</span> | |
| 27 | </div> | |
| 28 | <div class="ml-10px flex"> | |
| 29 | <span>客户评分<BasicHelp :text="['评分规则：1，评分=各维度分数（所打分数*该维度权重）的总和；', '2，如只有首次评分，则以首次评分为准；如有两次评分，则取两次评分的平均值。']"/>：</span> | |
| 30 | <span>10</span> | |
| 31 | </div> | |
| 32 | </div> | |
| 33 | <div class=""> | |
| 34 | <template v-for="tag in tags" :key="tag"> | |
| 35 | <Tag class="mb-2"> | |
| 36 | {{ tag }} | |
| 37 | </Tag> | |
| 38 | </template> | |
| 39 | <TagSelector class="pb-10px inline-block mt-10px"></TagSelector> | |
| 40 | </div> | |
| 41 | ||
| 42 | </Col> | |
| 43 | <!-- <Col :span="8" :class="`${prefixCls}-col`">--> | |
| 44 | <!-- <CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpand="false">--> | |
| 45 | <!-- <div v-for="(team, index) in teams" :key="index" :class="`${prefixCls}-top__team-item`">--> | |
| 46 | <!-- <Icon :icon="team.icon" :color="team.color" />--> | |
| 47 | <!-- <span>{{ team.title }}</span>--> | |
| 48 | <!-- </div>--> | |
| 49 | <!-- </CollapseContainer>--> | |
| 50 | <!-- </Col>--> | |
| 51 | </Row> | |
| 52 | <div :class="`${prefixCls}-bottom`"> | |
| 53 | <Tabs> | |
| 54 | <template v-for="item in achieveList" :key="item.key"> | |
| 55 | <TabPane :tab="item.name"> | |
| 56 | ||
| 57 | <ScrollContainer class="scroll-wrap"> | |
| 58 | <component :is="tabs[item.component]" /> | |
| 59 | </ScrollContainer> | |
| 60 | ||
| 61 | </TabPane> | |
| 62 | </template> | |
| 63 | </Tabs> | |
| 64 | </div> | |
| 65 | </div> | |
| 66 | </template> | |
| 67 | ||
| 68 | <script lang="ts" setup> | |
| 69 | import Icon from '@/components/Icon/Icon.vue'; | |
| 70 | import { Col, Row, Tabs, Tag } from 'ant-design-vue'; | |
| 71 | import { computed } from 'vue'; | |
| 72 | import Dynamic from './Dynamic.vue'; | |
| 73 | import Detail from './Detail.vue'; | |
| 74 | import Business from './Business.vue'; | |
| 75 | import Tips from './Tips.vue'; | |
| 76 | import Document from './Document.vue'; | |
| 77 | ||
| 78 | import headerImg from '@/assets/images/header.jpg'; | |
| 79 | import { useUserStore } from '@/store/modules/user'; | |
| 80 | import { achieveList, tags } from './data'; | |
| 81 | import {BasicHelp} from "@/components/Basic"; | |
| 82 | import ScrollContainer from "@/components/Container/src/ScrollContainer.vue"; | |
| 83 | import {TagSelector} from "@/components/TagSelector"; | |
| 84 | ||
| 85 | const userStore = useUserStore(); | |
| 86 | const TabPane = Tabs.TabPane; | |
| 87 | const tabs = { | |
| 88 | Detail, | |
| 89 | Dynamic, | |
| 90 | Business, | |
| 91 | Tips, | |
| 92 | Document, | |
| 93 | }; | |
| 94 | const prefixCls = 'customer-drawer'; | |
| 95 | const avatar = computed(() => userStore.getUserInfo.avatar || headerImg); | |
| 96 | </script> | |
| 97 | <style lang="less" scoped> | |
| 98 | .customer-drawer { | |
| 99 | &-col:not(:last-child) { | |
| 100 | padding: 0 10px; | |
| 101 | ||
| 102 | //&:not(:last-child) { | |
| 103 | // border-right: 1px dashed rgb(206 206 206 / 50%); | |
| 104 | //} | |
| 105 | } | |
| 106 | ||
| 107 | &-top { | |
| 108 | //margin: 16px 16px 12px; | |
| 109 | //padding: 10px; | |
| 110 | border-radius: 3px; | |
| 111 | background-color: @component-background; | |
| 112 | ||
| 113 | &__avatar { | |
| 114 | text-align: center; | |
| 115 | ||
| 116 | img { | |
| 117 | margin: auto; | |
| 118 | border-radius: 50%; | |
| 119 | } | |
| 120 | ||
| 121 | span { | |
| 122 | display: block; | |
| 123 | font-size: 20px; | |
| 124 | font-weight: 500; | |
| 125 | } | |
| 126 | ||
| 127 | div { | |
| 128 | margin-top: 3px; | |
| 129 | font-size: 12px; | |
| 130 | } | |
| 131 | } | |
| 132 | ||
| 133 | &__detail { | |
| 134 | margin-top: 15px; | |
| 135 | padding-left: 20px; | |
| 136 | } | |
| 137 | ||
| 138 | &__team { | |
| 139 | &-item { | |
| 140 | display: inline-block; | |
| 141 | padding: 4px 24px; | |
| 142 | } | |
| 143 | ||
| 144 | span { | |
| 145 | margin-left: 3px; | |
| 146 | } | |
| 147 | } | |
| 148 | } | |
| 149 | ||
| 150 | &-bottom { | |
| 151 | //margin: 0 16px 16px; | |
| 152 | //padding: 10px; | |
| 153 | border-radius: 3px; | |
| 154 | background-color: @component-background; | |
| 155 | } | |
| 156 | .scroll-wrap{ | |
| cb1651 | 157 | height: calc(100vh - 310px); |
| S | 158 | } |
| 159 | :deep(.scrollbar__wrap) { | |
| 160 | padding: 5px !important; | |
| f353bc | 161 | } |
| S | 162 | } |
| 163 | </style> | |
