chore：名片样式的名片模板第一个模板
This commit is contained in:
409
pages_tool/card/admin/manage.vue
Normal file
409
pages_tool/card/admin/manage.vue
Normal file
@@ -0,0 +1,409 @@
|
||||
<template>
|
||||
<view class="admin-manage">
|
||||
<!-- 商家端三大入口平级切换(鸿蒙安全: $util.redirectTo, 禁裸 uni.switchTab) -->
|
||||
<view class="page-switch">
|
||||
<view class="switch-item active" @tap="goSelf">名片管理</view>
|
||||
<view class="switch-item" @tap="goContacts">人脉管理</view>
|
||||
<view class="switch-item" @tap="goLeads">潜在客户</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能预告: 查重合并/批量制作/导出等依赖后台接口, 就绪后开放 -->
|
||||
<view class="notice-bar">
|
||||
<text class="notice-icon">i</text>
|
||||
<text class="notice-text">查重合并、批量制作、导出 CSV/vCard 等功能即将上线</text>
|
||||
</view>
|
||||
|
||||
<!-- 搜索区 -->
|
||||
<view class="search-bar">
|
||||
<view class="search-input-wrap">
|
||||
<input class="search-input" confirm-type="search" :value="keyword"
|
||||
placeholder="搜索姓名 / 手机 / 公司" @confirm="onSearch" @input="onKeywordInput" />
|
||||
<text v-if="keyword" class="search-clear" @tap="clearKeyword">✕</text>
|
||||
<text class="iconfont icon-sousuo3" @tap="onSearch"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 名片列表 -->
|
||||
<view class="card-list">
|
||||
<view v-for="(item, index) in list" :key="item.card_id || index" class="card-item"
|
||||
@tap="goDetail(item)">
|
||||
<view class="card-avatar">
|
||||
<image v-if="item.avatar" :src="$util.img(item.avatar)" class="avatar-img" mode="aspectFill" />
|
||||
<text v-else>{{ avatarText(item.name) }}</text>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<view class="card-name line1">{{ item.name || '未命名名片' }}</view>
|
||||
<view class="card-sub line1" v-if="item.job_title || item.company">
|
||||
{{ [item.job_title, item.company].filter(Boolean).join(' · ') }}
|
||||
</view>
|
||||
<view class="card-mobile" v-if="item.mobile">📱 {{ item.mobile }}</view>
|
||||
</view>
|
||||
<view class="card-side">
|
||||
<text v-if="sourceLabel(item)" class="source-tag">{{ sourceLabel(item) }}</text>
|
||||
<view class="card-actions" @tap.stop="">
|
||||
<text class="act-btn" @tap="goEdit(item)">编辑</text>
|
||||
<text class="act-btn primary" @tap="goDetail(item)">详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="load-more" v-if="list.length > 0">
|
||||
<text v-if="isLoading">加载中…</text>
|
||||
<text v-else-if="page < pageCount">上拉加载更多</text>
|
||||
<text v-else class="load-end">— 没有更多了 —</text>
|
||||
</view>
|
||||
|
||||
<!-- 空态 -->
|
||||
<ns-empty v-if="!isLoading && list.length === 0" :isIndex="false" :text="emptyText"></ns-empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 商家端 · 名片管理（基础版）
|
||||
*
|
||||
* 范围: 本轮仅开放现有接口可支撑的能力——搜索 / 详情 / 编辑。
|
||||
* 列表/详情/编辑复用 card/lists + 既有 /pages_tool/card/detail、edit 页
|
||||
* (路由参数 card_id, 字符串主键)。
|
||||
* 查重合并 / 批量制作 / 新建数字名片 / 导出 CSV/vCard / 标签·状态·类型·跟进·收藏
|
||||
* 筛选依赖后台未就绪接口, 后台文档(CARD_API_REFERENCE.md)到位后在本页扩展,
|
||||
* 端点届时收口进 common/js/card-api.js, 页面只改 this.$cardApi 调用。
|
||||
*/
|
||||
import { CARD_SOURCE_TYPES } from '@/common/js/card-api.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
list: [],
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
pageCount: 1,
|
||||
isLoading: false,
|
||||
emptyText: '暂无名片刻'
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.refresh();
|
||||
},
|
||||
onShow() {
|
||||
// 从编辑页返回时刷新(编辑成功后数据已变)
|
||||
if (this._loadedOnce) this.refresh();
|
||||
this._loadedOnce = true;
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.refresh(() => uni.stopPullDownRefresh());
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.isLoading) return;
|
||||
if (this.page >= this.pageCount) return;
|
||||
this.loadPage(this.page + 1);
|
||||
},
|
||||
methods: {
|
||||
avatarText(name) {
|
||||
return (name || '?').trim().charAt(0).toUpperCase();
|
||||
},
|
||||
// 来源标签: 优先后端译文(source_type_text), 缺失时按字典兜底(与后端 source_type 对齐)
|
||||
sourceLabel(item) {
|
||||
if (!item) return '';
|
||||
if (item.source_type_text) return item.source_type_text;
|
||||
const hit = CARD_SOURCE_TYPES.find(s => s.value === item.source_type);
|
||||
return hit ? hit.label : '';
|
||||
},
|
||||
onKeywordInput(e) {
|
||||
this.keyword = e.detail.value;
|
||||
},
|
||||
onSearch() {
|
||||
this.refresh();
|
||||
},
|
||||
clearKeyword() {
|
||||
this.keyword = '';
|
||||
this.refresh();
|
||||
},
|
||||
refresh(done) {
|
||||
this.page = 1;
|
||||
this.loadPage(1, done);
|
||||
},
|
||||
loadPage(pageNo, done) {
|
||||
this.isLoading = true;
|
||||
// page_size 上限 100(后端硬限制), 这里 20 足够
|
||||
this.$cardApi.cardLists({
|
||||
data: {
|
||||
page: pageNo,
|
||||
page_size: this.pageSize,
|
||||
keyword: this.keyword.trim()
|
||||
},
|
||||
success: res => {
|
||||
this.isLoading = false;
|
||||
if (res.code == 0) {
|
||||
const d = res.data || {};
|
||||
const rows = d.list || [];
|
||||
this.pageCount = d.page_count || 1;
|
||||
this.page = pageNo;
|
||||
this.list = pageNo === 1 ? rows : this.list.concat(rows);
|
||||
this.emptyText = this.keyword.trim() ? '未找到匹配的名片' : '暂无名片刻';
|
||||
} else {
|
||||
// 后端 code!=0 的 message 可直接 toast
|
||||
uni.showToast({ title: res.message || '加载失败', icon: 'none' });
|
||||
}
|
||||
typeof done === 'function' && done();
|
||||
},
|
||||
fail: () => {
|
||||
this.isLoading = false;
|
||||
uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
|
||||
typeof done === 'function' && done();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* ---------- 导航 ---------- */
|
||||
// 名片路由参数一律 card_id(字符串), encodeURIComponent 幂等
|
||||
goDetail(item) {
|
||||
if (!item || !item.card_id) return;
|
||||
uni.navigateTo({
|
||||
url: '/pages_tool/card/detail?card_id=' + encodeURIComponent(item.card_id)
|
||||
});
|
||||
},
|
||||
goEdit(item) {
|
||||
if (!item || !item.card_id) return;
|
||||
uni.navigateTo({
|
||||
url: '/pages_tool/card/edit?card_id=' + encodeURIComponent(item.card_id)
|
||||
});
|
||||
},
|
||||
// 平级入口: 鸿蒙元服务上 uni.switchTab 静默失败, 必须走 $util.redirectTo
|
||||
goContacts() {
|
||||
this.$util.redirectTo('/pages_tool/card/admin/contacts');
|
||||
},
|
||||
goLeads() {
|
||||
this.$util.redirectTo('/pages_tool/card/admin/leads');
|
||||
},
|
||||
goSelf() {
|
||||
// 当前页, 无需跳转
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.admin-manage {
|
||||
min-height: 100vh;
|
||||
background-color: #f6f7f9;
|
||||
padding-bottom: 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 顶部平级切换(三页互链) */
|
||||
.page-switch {
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
padding: 0 12rpx;
|
||||
|
||||
.switch-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 24rpx 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
color: var(--main-color, #0054a5);
|
||||
font-weight: 600;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 8rpx;
|
||||
width: 48rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 3rpx;
|
||||
background-color: var(--main-color, #0054a5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 功能预告条 */
|
||||
.notice-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20rpx 24rpx 0;
|
||||
padding: 16rpx 20rpx;
|
||||
background-color: var(--main-color-shallow, #e8f1fb);
|
||||
border-radius: 12rpx;
|
||||
|
||||
.notice-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background-color: var(--main-color, #0054a5);
|
||||
color: #ffffff;
|
||||
font-size: 22rpx;
|
||||
flex-shrink: 0;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.notice-text {
|
||||
font-size: 24rpx;
|
||||
color: var(--main-color, #0054a5);
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx 0;
|
||||
|
||||
.search-input-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
border-radius: 36rpx;
|
||||
padding: 0 24rpx;
|
||||
height: 72rpx;
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
padding: 0 12rpx;
|
||||
color: #bbb;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: #999;
|
||||
font-size: 32rpx;
|
||||
padding-left: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-list {
|
||||
padding: 20rpx 24rpx 0;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:active {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.card-avatar {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
background-color: var(--main-color-shallow, #e8f1fb);
|
||||
color: var(--main-color, #0054a5);
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-right: 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.card-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card-sub {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.card-mobile {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
flex-shrink: 0;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.source-tag {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 20rpx;
|
||||
padding: 4rpx 14rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
|
||||
.act-btn {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 28rpx;
|
||||
padding: 8rpx 22rpx;
|
||||
|
||||
& + .act-btn {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
color: var(--main-color, #0054a5);
|
||||
border-color: var(--main-color, #0054a5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.load-end {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.line1 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user