【招生小程序】 优化# 主账号：个人界面

src/components/widgets/admin/personally/components/position-tabs.vue

@@ -1,15 +1,57 @@
 <template>
     <view>
-        <text></text>
+        <view
+            v-for="item in positionList"
+            :key="item.id"
+            class="cell p-[24rpx] border-b border-solid border-[#f1f1f1]"
+            :class="{ active: postId == item.id }"
+            @click="handleCellClick(item)"
+        >
+            <text>{{ item.label }}</text>
+            <template v-if="postId == item.id">
+                <TIcon name="icon-check" color="#0E66FB" />
+            </template>
+        </view>
+        <dropdownFooter @reset="handleReset" @confirm="handleConfirm" />
     </view>
 </template>
 
 <script setup lang="ts">
+import { usePositions } from '@/hooks/useCommon'
+import dropdownFooter from '../../dropdown-footer.vue'
+
 defineProps({
-    tabs: {
+    modelValue: {
-        type: Array,
+        type: Number,
-        default: () => []
+        default: 0
     }
 })
+const emit = defineEmits(['update:modelValue', 'reset', 'confirm'])
+
+const { positionList, postId, fetchPositions } = usePositions()
+fetchPositions()
+
+const handleCellClick = (item: any) => {
+    const { id } = item
+    postId.value = id
+    emit('update:modelValue', id)
+}
+const handleReset = () => {
+    postId.value = 0
+    emit('update:modelValue', 0)
+    emit('reset')
+}
+const handleConfirm = () => {
+    emit('confirm', postId.value)
+}
 </script>
-<style scoped></style>
+<style scoped lang="scss">
+.cell {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &.active {
+        color: $blue-1;
+    }
+}
+</style>

src/components/widgets/admin/personally/components/telesale-card.vue

@@ -9,12 +9,12 @@
                 </view>
                 <view class="flex-1 flex flex-col gap-[12rpx]">
                     <text>张三</text>
-                    <text class="text-muted">湛江团队-A组 . 电销老师</text>
+                    <text class="text-muted">湛江团队-A组 . {{ parsePostionText }}</text>
                 </view>
             </view>
-            <view class="flex gap-[12rpx]">
+            <view class="flex gap-[12rpx] flex-wrap" v-if="!containPostIds">
                 <view
-                    class="flex-1 flex justify-center items-center flex-col gap-[12rpx]"
+                    class="w-[30%] flex justify-center items-center flex-col gap-[12rpx]"
                     v-for="(item, index) in data"
                     :key="`unique_${index}`"
                 >
@@ -22,12 +22,34 @@
                     <text class="font-bold text-[40rpx]">{{ item.value }}</text>
                 </view>
             </view>
+            <view v-else class="flex gap-[12rpx] flex-wrap">
+                <view
+                    class="w-full flex flex-col gap-[24rpx] mb-[24rpx]"
+                    v-for="(value, key) in cardMap"
+                    :key="key"
+                >
+                    <view class="flex justify-between items-center px-[24rpx]">
+                        <text>{{ parseText(key) }}数据</text>
+                        <text class="text-primary" @click="handleMore(key)">查看</text>
+                    </view>
+                    <view class="flex gap-[12rpx] flex-wrap bg-[#f1f1f1] mx-[24rpx] py-[24rpx]">
+                        <view
+                            class="w-[30%] flex justify-center items-center flex-col gap-[12rpx]"
+                            v-for="(item, indey) in value"
+                            :key="`unique_${indey}`"
+                        >
+                            <text class="text-muted">{{ item.label }}</text>
+                            <text class="font-bold text-[40rpx]">{{ item.value }}</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
         </view>
     </card>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed } from 'vue'
 import card from '../../card.vue'
 
 const props = defineProps({
@@ -36,17 +58,58 @@ const props = defineProps({
         default: () => {}
     }
 })
-
 const emit = defineEmits(['handleCardClick'])
 
-const data = ref([
+const parsePostionText = computed(() => {
+    const { postId } = props.item
+    const ids = postId.split(',')
+    const positionsList = [
+        { name: '电销老师', id: 5 },
+        { name: '招生老师', id: 6 }
+    ]
+    const findItems = positionsList.filter(item => ids.includes(String(item.id)))
+    return findItems.map(item => item.name).join('/')
+})
+
+const cardMap: Record<number, Array<{ label: string; value: number }>> = {
+    5: [
+        { label: '新增跟进', value: 368 },
         { label: '未领取', value: 368 },
         { label: '已领取', value: 100 },
         { label: '异常待处理', value: 368 }
-])
+    ],
+    6: [
+        { label: '转化中', value: 368 },
+        { label: '已添加', value: 100 },
+        { label: '异常待处理', value: 368 },
+        { label: '成交客户', value: 368 },
+        { label: '战败客户', value: 368 }
+    ]
+}
+const parseText = computed(() => (key: number) => key == 5 ? '电销' : '招生')
+const data = computed(() => {
+    const { postId } = props.item
+    return cardMap[postId]
+})
+const parsePostIds = computed(() => {
+    const { postId } = props.item
+    return postId.split(',').map(Number)
+})
+const containPostIds = computed(() => {
+    return parsePostIds.value.includes(5) && parsePostIds.value.includes(6)
+})
 
 const handleCardClick = () => {
-    emit('handleCardClick', 'telesale', props.item)
+    if (containPostIds.value) return
+    const type =
+        parsePostIds.value.length == 1 && parsePostIds.value.includes(5)
+            ? 'telesale'
+            : 'recruitsale'
+    emit('handleCardClick', type, props.item)
+}
+const handleMore = (key: number) => {
+    const type = key == 5 ? 'telesale' : 'recruitsale'
+    emit('handleCardClick', type, props.item)
 }
 </script>
 <style scoped></style>

src/components/widgets/admin/personally/index.vue

@@ -1,46 +1,36 @@
 <template>
     <view class="flex-1 h-full flex flex-col">
+        <view class="bg-white">
             <u-dropdown ref="uDropdownRef" menu-icon="arrow-down-fill">
                 <u-dropdown-item title="岗位">
                     <view class="bg-white">
-                    <view>
+                        <position-tabs
-                        <view
+                            v-model="postId"
-                            v-for="item in positionList"
+                            @reset="handleReset('position')"
-                            :key="item.id"
+                            @confirm="handleConfirm('position', value)"
-                            class="cell p-[24rpx] border-b border-solid border-[#f1f1f1]"
+                        />
-                            :class="{ active: postId == item.id }"
-                            @click="handleCellClick(item)"
-                        >
-                            <text>{{ item.label }}</text>
-                            <template v-if="postId == item.id">
-                                <TIcon name="icon-check" color="#0E66FB" />
-                            </template>
-                        </view>
-                    </view>
-                    <view class="flex justify-between p-[32rpx] gap-[32rpx]">
-                        <view class="flex-1">
-                            <u-button class="btn" type="primary" plain text="重置"></u-button>
-                        </view>
-                        <view class="flex-1">
-                            <u-button class="btn" type="primary" text="确定"></u-button>
-                        </view>
-                    </view>
                     </view>
                 </u-dropdown-item>
                 <u-dropdown-item title="组织">
                     <view class="bg-white">
-                    <DropdownPicker :dropdownItem="dropdownMenuList" />
+                        <DropdownPicker
-                    <view class="flex justify-between p-[32rpx] gap-[32rpx]">
+                            :dropdownItem="dropdownMenuList"
-                        <view class="flex-1">
+                            @reset="() => handleReset('organization')"
-                            <u-button class="btn" type="primary" plain text="重置"></u-button>
+                            @confirm="value => handleConfirm('organization', value)"
-                        </view>
+                        />
-                        <view class="flex-1">
-                            <u-button class="btn" type="primary" text="确定"></u-button>
-                        </view>
                     </view>
+                </u-dropdown-item>
+                <u-dropdown-item title="日期">
+                    <view class="bg-white p-[20rpx]">
+                        <dateDropdownPicker
+                            :dropdownItem="dropdownMenuList2"
+                            @reset="() => handleReset('date')"
+                            @confirm="value => handleConfirm('date', value)"
+                        />
                     </view>
                 </u-dropdown-item>
             </u-dropdown>
+        </view>
         <view class="flex-1 mt-3 px-[32rpx] overflow-auto bg-[#FAFAFE]">
             <z-paging
                 ref="paging"
@@ -50,50 +40,31 @@
                 height="100%"
             >
                 <template v-for="(item, index) in dataList" :key="`unique_${index}`">
-                    <telesale-card
+                    <telesale-card :item="item" @handleCardClick="handleCardClick" />
-                        v-if="postId == 5"
-                        :item="item"
-                        @handleCardClick="handleCardClick"
-                    />
-                    <recruitsale-card
-                        v-if="postId == 6"
-                        :item="item"
-                        @handleCardClick="handleCardClick"
-                    />
                 </template>
             </z-paging>
         </view>
-        <!-- <DropdownPicker :dropdownItem="dropdownMenuList" /> -->
     </view>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import positionTabs from './components/position-tabs.vue'
-import DaDropdown from '@/components/da-dropdown/index.vue'
 import DropdownPicker from '../orga-picker.vue'
 import telesaleCard from './components/telesale-card.vue'
-import recruitsaleCard from './components/recruitsale-card.vue'
+import dateDropdownPicker from '@/components/date-dropdown/daterange.vue'
 import { useZPaging } from '@/hooks/useZPaging'
 import { apiTeleClueList } from '@/api/clue'
 
-const positionList = [
+const dropdownMenuList2 = {
-    {
+    showQuick: true,
-        label: '电销老师',
+    title: '日期范围',
-        id: 5,
+    type: 'daterange',
-        value: 5
+    prop: 'god6'
-    },
+    // 默认选中 2022-01-01到2022-02-01
-    {
+    // value: { start: '2022-01-01', end: '2022-02-01' },
-        label: '招生老师',
-        id: 6,
-        value: 6
 }
-]
 const postId = ref()
-const handleCellClick = (item: any) => {
-    const { id } = item
-    postId.value = id
-}
 const dropdownMenuList = [
     {
         label: '级联X1',
@@ -142,20 +113,33 @@ const handleCardClick = (type: string, item: any) => {
             break
     }
 }
+const handleConfirm = (type: string, item) => {
+    switch (type) {
+        case 'organization':
+            console.log(item)
+            break
+        case 'date':
+            console.log(item)
+
+            break
+        case 'position':
+            break
+        default:
+            break
+    }
+}
+const handleReset = (type: string) => {
+    switch (type) {
+        case 'organization':
+            break
+        case 'date':
+            break
+        case 'position':
+            break
+        default:
+            break
+    }
+}
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.cell {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    &.active {
-        color: $blue-1;
-    }
-}
-:deep(.btn) {
-    button {
-        @apply h-[72rpx] rounded-[12rpx];
-    }
-}
-</style>

src/hooks/useCommon.ts

@@ -114,3 +114,32 @@ export function useRank({ width }: { width: number }) {
         handleChangeTab
     }
 }
+
+// 岗位
+export function usePositions() {
+    const positionList = ref()
+    const postId = ref()
+    const fetchPositions = () => {
+        try {
+            positionList.value = [
+                {
+                    label: '电销老师',
+                    id: 5,
+                    value: 5
+                },
+                {
+                    label: '招生老师',
+                    id: 6,
+                    value: 6
+                }
+            ]
+            if (positionList.value.length > 0) postId.value = positionList.value
+        } catch (error) {}
+    }
+
+    return {
+        positionList,
+        postId,
+        fetchPositions
+    }
+}