chore：浏览
This commit is contained in:
237
pages_tool/card/views.vue
Normal file
237
pages_tool/card/views.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<view class="views-page">
|
||||
<!-- 汇总卡(2.11.4): 今日/累计 的 PV 与 UV -->
|
||||
<view class="summary">
|
||||
<view class="sum-card">
|
||||
<view class="sum-num">{{ summary.today_pv || 0 }}</view>
|
||||
<view class="sum-label">今日浏览 PV</view>
|
||||
</view>
|
||||
<view class="sum-card">
|
||||
<view class="sum-num">{{ summary.today_uv || 0 }}</view>
|
||||
<view class="sum-label">今日访客 UV</view>
|
||||
</view>
|
||||
<view class="sum-card">
|
||||
<view class="sum-num">{{ summary.total_pv || 0 }}</view>
|
||||
<view class="sum-label">累计浏览 PV</view>
|
||||
</view>
|
||||
<view class="sum-card">
|
||||
<view class="sum-num">{{ summary.total_uv || 0 }}</view>
|
||||
<view class="sum-label">累计访客 UV</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表: time / name / channel / device / ip -->
|
||||
<view class="view-list">
|
||||
<view v-for="(item, idx) in list" :key="item.id || idx" class="view-item">
|
||||
<view class="view-avatar">{{ avatarText(item) }}</view>
|
||||
<view class="view-info">
|
||||
<view class="view-name">{{ item.viewer_name || item.name || '匿名访客' }}</view>
|
||||
<view class="view-meta">
|
||||
<text class="view-channel">{{ item.channel || '未知渠道' }}</text>
|
||||
<text class="view-dot">·</text>
|
||||
<text class="view-device">{{ item.device || '' }}</text>
|
||||
<text class="view-dot" v-if="item.ip">·</text>
|
||||
<text class="view-ip">{{ item.ip || '' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="view-time">{{ item.view_time || item.time || '' }}</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>
|
||||
<view v-if="!isLoading && list.length === 0" class="views-empty">暂无访客记录</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 访客轨迹 / 谁看了我（2.11.4，建议新页面）
|
||||
* 入口: 我的名片「访客」总入口(不带 card_id，查名下全部名片)
|
||||
* 或某张名片「浏览」入口(带 card_id，查该卡访客)
|
||||
* 接口: POST /card/api/card/views { card_id?, page?, page_size?(<=50, 默认20) }
|
||||
* 响应: { list, total, page, page_size, summary: { today_pv, today_uv, total_pv, total_uv } }
|
||||
*/
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cardId: '', // 带 card_id=查该卡访客; 空=名下全部
|
||||
list: [],
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
pageCount: 1,
|
||||
isLoading: false,
|
||||
summary: {}
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.cardId = (options && options.card_id) ? String(options.card_id) : '';
|
||||
this.refresh();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.refresh(() => uni.stopPullDownRefresh());
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.isLoading) return;
|
||||
if (this.page >= this.pageCount) return;
|
||||
this.loadPage(this.page + 1);
|
||||
},
|
||||
methods: {
|
||||
avatarText(item) {
|
||||
const name = item.viewer_name || item.name || '?';
|
||||
return name.trim().charAt(0).toUpperCase();
|
||||
},
|
||||
refresh(done) {
|
||||
this.page = 1;
|
||||
this.loadPage(1, done);
|
||||
},
|
||||
loadPage(pageNo, done) {
|
||||
this.isLoading = true;
|
||||
const data = { page: pageNo, page_size: this.pageSize };
|
||||
if (this.cardId) data.card_id = this.cardId;
|
||||
this.$cardApi.cardViews({
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
const d = res.data || {};
|
||||
const rows = d.list || [];
|
||||
this.pageCount = d.page_count || 1;
|
||||
this.page = pageNo;
|
||||
this.summary = d.summary || {};
|
||||
this.list = pageNo === 1 ? rows : this.list.concat(rows);
|
||||
} else {
|
||||
this.handleApiError(res);
|
||||
}
|
||||
this.isLoading = false;
|
||||
typeof done === 'function' && done();
|
||||
},
|
||||
fail: () => {
|
||||
this.isLoading = false;
|
||||
uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
|
||||
typeof done === 'function' && done();
|
||||
}
|
||||
});
|
||||
},
|
||||
handleApiError(res) {
|
||||
const msg = (res && res.message) || '加载失败';
|
||||
uni.showToast({ title: msg, icon: 'none' });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.views-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f6f7f9;
|
||||
padding: 20rpx 24rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.sum-card {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 0;
|
||||
text-align: center;
|
||||
margin: 0 8rpx;
|
||||
|
||||
&:first-child { margin-left: 0; }
|
||||
&:last-child { margin-right: 0; }
|
||||
|
||||
.sum-num {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: var(--main-color, #0054a5);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.sum-label {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-list {
|
||||
.view-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.view-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: var(--main-color-shallow, #e8f1fb);
|
||||
color: var(--main-color, #0054a5);
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.view-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.view-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.view-meta {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.view-dot {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-time {
|
||||
flex-shrink: 0;
|
||||
margin-left: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.load-end { color: #ccc; }
|
||||
}
|
||||
|
||||
.views-empty {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user