designer-hub/packages/merchant/src/pages/designer/index.vue

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "全部设计师",
    "navigationBarBackgroundColor": "#fff"
  }
}
</route>

<script setup lang="ts">
import Card from '@/components/card.vue'
import DataForm from '@/components/data-form.vue'
import PageHelperEvo from '@/components/page-helper-evo.vue'
import { focusOrCancel, getDesigners, updateFollowUp } from '../../core/libs/agent-requests'
import { vipIcon, rightArrowIcon, filterIcon } from '@designer-hub/assets/src/svgs'
import { toHomePage } from '../../core/libs/actions'
import { Designer, FollowUp } from '@designer-hub/app/src/core/libs/models'
import { requestToast } from '@designer-hub/app/src/core/utils/common'
import { ComponentExposed } from 'vue-component-type-helpers'
import { pick } from 'radash'
import { useFollowUp } from '../../composables/followUp'
import SectionHeading from '@designer-hub/app/src/components/section-heading.vue'
import { useMemberLevelsStore } from '../../store/member-levles'
import { storeToRefs } from 'pinia'
import { useUserStore } from '../../store'

const userStore = useUserStore()
const { userInfo, isAgent, isMerchant } = storeToRefs(userStore)
const searchText = ref('')
const publishState = ref(false)
const filterState = ref(false)
const pageHelperRef = ref<ComponentExposed<typeof PageHelperEvo>>()
const { schema, rules } = useFollowUp()
const memberLevelsStore = useMemberLevelsStore()
const { memberLevels } = storeToRefs(memberLevelsStore)
const filterQuery = ref<{
  tags: any[]
  levels: any[]
  minPoints?: string
  maxPoints?: string
  brokerId?: string
}>({
  tags: [],
  levels: [],
  brokerId: userInfo.value.userId.toString(),
})
const query = ref({})
const searchFocus = () => {
  console.log('focus')
}
const searchBlur = () => {
  console.log('focus')
}
const search = () => {
  console.log('search')
}
const cancelSearch = () => {
  console.log('cancel')
}
const searchChange = (e: any) => {
  console.log(e)
}
const toDetail = async (designer: any) => {
  await uni.navigateTo({ url: '/pages/designer/detail' + '?id=' + designer.id })
}
const callPhone = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber,
  })
}
const filterData = () => {
  filterState.value = true
}
const handleImportant = async (designer: Designer) => {
  const { code } = await requestToast(
    () =>
      focusOrCancel({
        brokerId: userInfo.value.userId,
        userId: Number(designer.id),
      }),
    {
      success: true,
      successTitle: '操作成功',
    },
  )
  if (code === 0) {
    await pageHelperRef.value?.refresh()
  }
}
const handleSubmit = () => {
  query.value = {
    ...filterQuery.value,
    tags: filterQuery.value.tags.join(','),
    levels: filterQuery.value.levels.join(','),
  }
  filterState.value = false
}
const handleReset = () => {
  filterQuery.value = { tags: [], levels: [], brokerId: userInfo.value.userId.toString() }
  query.value = {}
}
</script>

<template>
  <view class="flex-grow">
    <PageHelperEvo ref="pageHelperRef" :request="getDesigners" :query="query">
      <template #top>
        <div class="flex items-center justify-between bg-white pr-3.5">
          <div class="flex-1">
            <wd-search
              v-model="searchText"
              @focus="searchFocus"
              @blur="searchBlur"
              @search="search"
              @cancel="cancelSearch"
              @change="searchChange"
              hide-cancel
            />
          </div>
          <wd-img :src="filterIcon" width="22px" height="22px" @click="filterData"></wd-img>
        </div>
      </template>
      <template #default="{ source }">
        <div class="p-3.5 gap-3.5 flex flex-col">
          <template v-for="(it, i) in source.list" :key="i">
            <Card>
              <div class="items-center" @click="toDetail(it)">
                <div class="">
                  <div class="flex items-center">
                    <div
                      class="w-[55px] h-[55px] bg-neutral-100 rounded-full mr-2 flex items-center justify-center"
                    >
                      <wd-img width="100%" height="100%" round :src="it.avatar"></wd-img>
                    </div>
                    <div class="flex flex-col flex-1">
                      <div class="flex-row flex items-center justify-between w-full">
                        <div class="flex-row flex items-center">
                          <div class="text-black/90 text-base font-normal font-['PingFang_SC']">
                            <!-- 苏小萌 -->
                            {{ it.name }}
                          </div>

                          <div
                            class="h-4 bg-neutral-100 rounded-[20px] justify-start items-center inline-flex flex-row ml-[9px]"
                          >
                            <wd-img width="17" height="17" :src="vipIcon"></wd-img>

                            <div
                              class="text-black/40 text-[10px] font-normal font-['PingFang_SC'] px-[7px] leading-none"
                            >
                              <!-- 白银会员 -->
                              {{ it.levelName }}
                            </div>
                          </div>
                        </div>
                        <div
                          class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-snug flex items-center"
                          @click.stop="toHomePage(it.id)"
                        >
                          <div>个人主页</div>
                          <wd-img width="13" height="13" :src="rightArrowIcon"></wd-img>
                        </div>
                      </div>
                      <div class="flex items-center gap-2 mt-[18px]">
                        <div
                          class="text-black/30 text-xs font-normal font-['PingFang_SC'] leading-none"
                        >
                          2天前访问
                        </div>
                        <div class="bg-[#eeeeee] w-[2px] h-[10px]"></div>
                        <div
                          class="text-black/30 text-xs font-normal font-['PingFang_SC'] leading-none"
                        >
                          积分：{{ it.points || 0 }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row-start-2 col-start-2 col-end-4">
                  <div class="flex items-center justify-between w-full mt-[20px]">
                    <div v-if="!it.followUp30Days" class="flex items-center">
                      <div class="w-2 h-2 bg-[#89f4e2] rounded-full mr-[7px]"></div>
                      <div
                        class="text-black/90 text-xs font-normal font-['PingFang_SC'] leading-snug"
                      >
                        30天未跟进
                      </div>
                    </div>
                    <div class="flex items-center">
                      <div class="w-2 h-2 bg-[#ffb96a] rounded-full mr-[7px]"></div>
                      <div
                        class="text-black/90 text-xs font-normal font-['PingFang_SC'] leading-snug"
                      >
                        60天未产生积分
                      </div>
                    </div>
                    <div class="flex items-center">
                      <div class="w-2 h-2 bg-[#c493ff] rounded-full mr-[7px]"></div>
                      <div
                        class="text-black/90 text-xs font-normal font-['PingFang_SC'] leading-snug"
                      >
                        60天未消耗积分
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="row-start-5 col-start-2 col-end-4 flex items-center mt-[26px] justify-around"
                >
                  <div
                    v-if="!it.focus"
                    class="px-3 py-1.5 rounded-[30px] border border-solid border-[#ff2d2d] justify-center items-center gap-1 flex"
                    @click.stop="handleImportant(it)"
                  >
                    <!-- <span style="color: #ff2d2d" class="flex items-center">+</span> -->
                    <wd-icon name="add" color="#ff2d2d" size="10"></wd-icon>
                    <div
                      class="text-[#ff2d2d] text-xs font-normal font-['PingFang_SC'] leading-none"
                    >
                      重点跟进
                    </div>
                  </div>
                  <div
                    v-else
                    class="px-3 py-1.5 rounded-[30px] border border-solid border-[#dcdcdc] justify-center items-center gap-1 inline-flex"
                    @click.stop="handleImportant(it)"
                  >
                    <!-- 对号图标 -->
                    <wd-icon name="check-bold" color="#8b8b8b" size="14"></wd-icon>
                    <div
                      class="text-[#8b8b8b] text-xs font-normal font-['PingFang_SC'] leading-none"
                    >
                      已重点跟进
                    </div>
                  </div>
                  <div
                    class="px-5 py-1 bg-[#e1ecff] rounded-[30px] border border-[#2357e9] justify-center items-center gap-1 inline-flex"
                    @click.stop="callPhone(it.mobile)"
                  >
                    <div
                      class="text-center text-[#2357e9] text-sm font-normal font-['PingFang_SC'] leading-normal"
                    >
                      打电话
                    </div>
                  </div>
                  <div
                    class="px-5 py-1 bg-[#0052d9] rounded-[30px] justify-center items-center gap-1 inline-flex"
                  >
                    <div
                      class="text-center text-white text-sm font-normal font-['PingFang_SC'] leading-normal"
                      @click.stop="publishState = true"
                    >
                      写跟进
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </template>
        </div>
      </template>
    </PageHelperEvo>
  </view>
  <wd-action-sheet v-model="publishState" title="创建跟进" @close="publishState = false">
    <view class="flex flex-col p-4">
      <div><DataForm :schema="schema" :rules="rules" direction="horizontal"></DataForm></div>
      <div><wd-button block :round="false">提交</wd-button></div>
    </view>
  </wd-action-sheet>
  <!-- 筛选action-sheet -->
  <wd-action-sheet v-model="filterState" title="筛选" @close="filterState = false">
    <view class="flex flex-col p-4">
      <SectionHeading title="标签"></SectionHeading>
      <wd-checkbox-group shape="button" v-model="filterQuery.tags">
        <template
          v-for="(tag, index) in [
            // { label: '全部', value: '' },
            { label: '重点跟进', value: '1' },
            { label: '本月新增', value: '2' },
            { label: '超过30天未跟进', value: '3' },
            { label: '超过60天未产生积分', value: '4' },
            { label: '超过60天未消耗积分', value: '5' },
            { label: '未成交过', value: '6' },
          ]"
          :key="index"
        >
          <wd-checkbox custom-class="w-50%!" :model-value="tag.value">
            {{ tag.label }}
          </wd-checkbox>
        </template>
      </wd-checkbox-group>
      <SectionHeading title="会员等级"></SectionHeading>
      <wd-checkbox-group shape="button" v-model="filterQuery.levels">
        <template
          v-for="(tag, index) in memberLevels.map((it) => ({
            label: it.memberLevelName,
            value: it.id,
          }))"
          :key="index"
        >
          <wd-checkbox custom-class="w-50%!" :model-value="tag.value">{{ tag.label }}</wd-checkbox>
        </template>
      </wd-checkbox-group>
      <!-- <div class="flex items-center justify-between py-4">
        <template>
          <div class="w-[168px] h-10 bg-[#f5f7f9] rounded-lg flex items-center justify-center">
            <div class="w-7 text-black/90 text-sm font-normal font-['PingFang_SC'] leading-none">
              全部
            </div>
          </div>
        </template>
      </div> -->

      <SectionHeading title="积分区间"></SectionHeading>
      <div class="flex items-center justify-between py-4">
        <wd-input
          v-model="filterQuery.minPoints"
          custom-class="h-10 bg-[#f5f7f9]!"
          no-border
        ></wd-input>
        <div class="w-4 h-.25 bg-black/35"></div>
        <wd-input
          v-model="filterQuery.maxPoints"
          custom-class="h-10 bg-[#f5f7f9]!"
          no-border
        ></wd-input>
      </div>
      <div class="flex gap-4">
        <div class="flex-1">
          <wd-button block :round="false" @click="handleReset">重置</wd-button>
        </div>
        <div class="flex-1">
          <wd-button block :round="false" @click="handleSubmit">提交</wd-button>
        </div>
      </div>
    </view>
  </wd-action-sheet>
</template>

<style scoped lang="scss">
.filter-item {
  @apply w-[168px] h-10 bg-[#f5f7f9] rounded-lg flex items-center justify-center;
  &-text {
    @apply text-black/90 text-sm font-normal font-['PingFang_SC'] leading-none;
  }
}
</style>