117 lines
4.1 KiB
Plaintext
117 lines
4.1 KiB
Plaintext
<!--pages/customer/index.wxml-->
|
|
<view class="customer-page">
|
|
|
|
<!-- 搜索区域 -->
|
|
<view class="search-section">
|
|
<view class="search-bar">
|
|
<t-icon name="search" size="32rpx" color="#9ca3af" />
|
|
<input
|
|
class="search-input"
|
|
type="text"
|
|
placeholder="搜索客户姓名或手机号"
|
|
value="{{searchKey}}"
|
|
bindinput="onSearchInput"
|
|
confirm-type="search"
|
|
bindconfirm="onSearch"
|
|
/>
|
|
<view class="search-clear" wx:if="{{searchKey}}" bindtap="onClearSearch">
|
|
<t-icon name="close-circle" size="32rpx" color="#9ca3af" />
|
|
</view>
|
|
</view>
|
|
<view class="search-btn" bindtap="onSearch">搜索</view>
|
|
</view>
|
|
|
|
<!-- 统计卡片 -->
|
|
<view class="stats-section" wx:if="{{!isLoading && customerList.length > 0}}">
|
|
<view class="stats-card">
|
|
<view class="stats-item">
|
|
<text class="stats-value">{{stats.total}}</text>
|
|
<text class="stats-label">客户总数</text>
|
|
</view>
|
|
<view class="stats-divider"></view>
|
|
<view class="stats-item">
|
|
<text class="stats-value male">{{stats.male}}</text>
|
|
<text class="stats-label">男</text>
|
|
</view>
|
|
<view class="stats-divider"></view>
|
|
<view class="stats-item">
|
|
<text class="stats-value female">{{stats.female}}</text>
|
|
<text class="stats-label">女</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 客户列表 -->
|
|
<view class="customer-list">
|
|
<scroll-view
|
|
scroll-y
|
|
class="customer-scroll"
|
|
refresher-enabled
|
|
refresher-triggered="{{isRefreshing}}"
|
|
bindrefresherrefresh="onPullDownRefresh"
|
|
bindscrolltolower="onReachBottom"
|
|
>
|
|
<!-- 加载中 -->
|
|
<view class="loading-container" wx:if="{{isLoading && customerList.length === 0}}">
|
|
<t-loading theme="spinner" size="40rpx" text="加载中..." t-class-text="loading-text" />
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-container" wx:elif="{{!isLoading && customerList.length === 0}}">
|
|
<t-empty icon="user" description="暂无客户数据" t-class-description="empty-text">
|
|
<view slot="action">
|
|
<view class="empty-action" bindtap="refreshData">刷新试试</view>
|
|
</view>
|
|
</t-empty>
|
|
</view>
|
|
|
|
<!-- 客户卡片列表 -->
|
|
<view class="customer-cards" wx:else>
|
|
<view
|
|
class="customer-card"
|
|
wx:for="{{customerList}}"
|
|
wx:key="_id"
|
|
data-id="{{item._id}}"
|
|
bindtap="onCustomerDetail"
|
|
>
|
|
<!-- 头像 -->
|
|
<view class="customer-avatar">
|
|
<image wx:if="{{item.avatar}}" class="avatar-img" src="{{item.avatar}}" mode="aspectFill" />
|
|
<view wx:else class="avatar-placeholder {{item.sex}}">
|
|
<text class="avatar-text">{{item.avatarText}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 客户信息 -->
|
|
<view class="customer-info">
|
|
<view class="info-row">
|
|
<text class="customer-name">{{item.name}}</text>
|
|
<view class="gender-tag {{item.sex}}" wx:if="{{item.sex}}">
|
|
<text>{{item.sexLabel}}</text>
|
|
</view>
|
|
<text class="customer-date" wx:if="{{item.createdAt}}">{{item.createdAt}}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="customer-phone">{{item.mobile}}</text>
|
|
<text class="customer-location" wx:if="{{item.locationText}}">{{item.locationText}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="customer-action">
|
|
<view class="action-btn call" data-phone="{{item.mobile}}" catchtap="onCallPhone">
|
|
<t-icon name="call" size="32rpx" color="#4c6ef5" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载更多 -->
|
|
<view class="load-more">
|
|
<t-loading wx:if="{{isLoadingMore}}" theme="spinner" size="32rpx" text="加载中..." t-class-text="loading-text" />
|
|
<text class="no-more" wx:elif="{{!hasMore}}">没有更多了</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|