156 lines
4.7 KiB
Vue
156 lines
4.7 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { onShow, onReachBottom } from '@dcloudio/uni-app'
|
|
import { listClue, listMyClue } from '@/api/crm'
|
|
import { labelOf, dash } from '@/utils/crmLabels'
|
|
import { PAGE_PATHS } from '@/config/api'
|
|
|
|
const tabs = [
|
|
{ key: 'all', label: '全部' },
|
|
{ key: 'mine', label: '我的' },
|
|
{ key: 'new', label: '新线索', status: 'new' },
|
|
{ key: 'follow', label: '跟进中', status: 'follow' },
|
|
{ key: 'converted', label: '已转化', status: 'converted' }
|
|
]
|
|
|
|
const activeTab = ref('all')
|
|
const keyword = ref('')
|
|
const list = ref([])
|
|
const page = ref(1)
|
|
const total = ref(0)
|
|
const loading = ref(false)
|
|
const finished = ref(false)
|
|
const pageSize = 20
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack({
|
|
fail: () => uni.switchTab({ url: PAGE_PATHS.workbench })
|
|
})
|
|
}
|
|
|
|
const goForm = () => {
|
|
uni.navigateTo({ url: PAGE_PATHS.crmClueForm })
|
|
}
|
|
|
|
const goDetail = (row) => {
|
|
uni.navigateTo({ url: `${PAGE_PATHS.crmClueDetail}?id=${row.id}` })
|
|
}
|
|
|
|
const statusLabel = (status) => labelOf('clueStatus', status)
|
|
|
|
const loadList = async (reset = false) => {
|
|
if (loading.value) return
|
|
if (reset) {
|
|
page.value = 1
|
|
finished.value = false
|
|
list.value = []
|
|
}
|
|
if (finished.value) return
|
|
loading.value = true
|
|
try {
|
|
const tab = tabs.find((t) => t.key === activeTab.value)
|
|
const query = {
|
|
pageNum: page.value,
|
|
pageSize,
|
|
keyword: keyword.value.trim() || undefined
|
|
}
|
|
if (tab?.status) query.status = tab.status
|
|
if (activeTab.value === 'converted') query.viewType = 'converted'
|
|
const res = activeTab.value === 'mine' ? await listMyClue(query) : await listClue(query)
|
|
const rows = res.rows || []
|
|
list.value = reset ? rows : list.value.concat(rows)
|
|
total.value = res.total || 0
|
|
if (list.value.length >= total.value || rows.length < pageSize) {
|
|
finished.value = true
|
|
} else {
|
|
page.value += 1
|
|
}
|
|
} catch (e) {
|
|
uni.showToast({ title: e.message || '加载失败', icon: 'none' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const switchTab = (key) => {
|
|
if (activeTab.value === key) return
|
|
activeTab.value = key
|
|
loadList(true)
|
|
}
|
|
|
|
const onSearch = () => loadList(true)
|
|
|
|
onShow(() => loadList(true))
|
|
onReachBottom(() => loadList(false))
|
|
</script>
|
|
|
|
<template>
|
|
<view class="mp-page mp-page--sub">
|
|
<view class="mp-header">
|
|
<view class="mp-header__row">
|
|
<text class="mp-subpage-back" @click="goBack">← 工作台</text>
|
|
<view class="mp-header__action" @click="goForm">新增</view>
|
|
</view>
|
|
<text class="mp-header__title" style="margin-top: 16rpx">线索管理</text>
|
|
<view class="mp-header__search">
|
|
<view class="mp-header__search-dot" />
|
|
<input
|
|
v-model="keyword"
|
|
class="mp-header__search-input"
|
|
placeholder="搜索姓名 / 公司 / 手机"
|
|
confirm-type="search"
|
|
@confirm="onSearch"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mp-section" style="padding-bottom: 0">
|
|
<scroll-view scroll-x class="mp-tabs">
|
|
<view
|
|
v-for="t in tabs"
|
|
:key="t.key"
|
|
class="mp-tab"
|
|
:class="{ 'mp-tab--active': activeTab === t.key }"
|
|
@click="switchTab(t.key)"
|
|
>
|
|
{{ t.label }}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="mp-section">
|
|
<view v-if="!list.length && !loading" class="mp-empty">
|
|
<view class="mp-empty__icon" />
|
|
<text class="mp-empty__text">暂无线索</text>
|
|
</view>
|
|
<view v-else class="mp-list">
|
|
<view v-for="row in list" :key="row.id" class="mp-card" @click="goDetail(row)">
|
|
<view class="mp-card__head">
|
|
<view>
|
|
<text class="mp-card__title">{{ dash(row.clueName) }}</text>
|
|
<text class="mp-card__sub">{{ dash(row.company) }}</text>
|
|
</view>
|
|
<text class="mp-tag" :class="'mp-tag--' + statusLabel(row.status).tag">
|
|
{{ statusLabel(row.status).text }}
|
|
</text>
|
|
</view>
|
|
<view class="mp-card__row">
|
|
<text>手机</text>
|
|
<text class="mp-card__row-val">{{ dash(row.mobile) }}</text>
|
|
</view>
|
|
<view class="mp-card__row">
|
|
<text>负责人</text>
|
|
<text class="mp-card__row-val">{{ dash(row.ownerUserName) }}</text>
|
|
</view>
|
|
<view class="mp-card__row">
|
|
<text>来源</text>
|
|
<text class="mp-card__row-val">{{ dash(row.source) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="loading" class="mp-list-loading">加载中…</view>
|
|
<view v-else-if="finished && list.length" class="mp-list-end">已加载全部</view>
|
|
</view>
|
|
</view>
|
|
</template>
|