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 { 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'

const searchText = ref('')
const publishState = ref(false)
const pageHelperRef = ref<ComponentExposed<typeof PageHelperEvo>>()
const { schema, rules } = useFollowUp()
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 = () => {
  console.log('filter')
}
const handleImportant = async (designer: Designer) => {
  // const { code } = await requestToast(
  //   () =>
  //     updateFollowUp({
  //       ...pick(designer, ['id']),
  //       isFollowFocus: true,
  //     }),
  //   {
  //     success: true,
  //     successTitle: '重点跟进成功',
  //   },
  // )
  // if (code === 0) {
  //   await pageHelperRef.value?.refresh()
  // }
}
</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'] leading-[10.18px]"
                          >
                            <!-- 苏小萌 -->
                            {{ 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
                    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>
                    <div
                      class="text-[#ff2d2d] 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>
</template>

<style scoped lang="scss"></style>