feat: 黄精粉前端功能集成 + 个人中心/资产/公排页面优化 + 去除admin copyright
主要改动: - 个人中心: 去除HjfMemberBadge徽章, 会员等级改显示vip_name, "我的资产"/"公排查询"导航项改为与member-points一致风格 - 我的资产页面: 去除HjfMemberBadge, 美化卡片圆角和阴影 - 公排查询页面: 美化顶部渐变和订单卡片样式 - Admin登录页和后台布局: 彻底删除footer copyright信息 - 新增黄精粉业务页面/组件/API/Mock数据(Phase 1) - 新增PHP环境配置文档和启动脚本 Made-with: Cursor
This commit is contained in:
apple
376
pro_v3.5.1/view/uniapp/pages/assets/points_detail.vue
Normal file
376
pro_v3.5.1/view/uniapp/pages/assets/points_detail.vue
Normal file
@@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<!-- P17 积分明细页 -->
|
||||
<view class="hjf-points-detail-page">
|
||||
|
||||
<!-- Tab 筛选栏 -->
|
||||
<view class="tab-nav acea-row">
|
||||
<view
|
||||
v-for="(tab, idx) in tabs"
|
||||
:key="idx"
|
||||
class="tab-nav__item"
|
||||
:class="{ on: activeTab === idx }"
|
||||
@tap="changeTab(idx)"
|
||||
>{{ tab.label }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 积分流水列表（按日期分组） -->
|
||||
<view class="points-list">
|
||||
<view
|
||||
v-for="(group, gIdx) in list"
|
||||
:key="gIdx"
|
||||
class="points-list__group"
|
||||
>
|
||||
<!-- 日期分组标题 -->
|
||||
<view class="points-list__date">{{ group.date }}</view>
|
||||
|
||||
<!-- 分组内条目 -->
|
||||
<view class="points-list__card">
|
||||
<view
|
||||
v-for="(item, iIdx) in group.children"
|
||||
:key="iIdx"
|
||||
class="points-list__item acea-row row-between-wrapper"
|
||||
>
|
||||
<!-- 左侧：标题 + 时间 -->
|
||||
<view class="points-list__info">
|
||||
<view class="points-list__title line1">{{ item.title }}</view>
|
||||
<view class="points-list__meta acea-row">
|
||||
<view class="points-list__time">{{ item.add_time }}</view>
|
||||
<view
|
||||
class="points-list__tag"
|
||||
:class="item.status === 'frozen' ? 'tag--frozen' : 'tag--released'"
|
||||
>{{ item.status === 'frozen' ? '待释放' : '已释放' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：积分增减 -->
|
||||
<view
|
||||
class="points-list__points"
|
||||
:class="item.pm === 1 ? 'points--add' : 'points--sub'"
|
||||
>
|
||||
{{ item.pm === 1 ? '+' : '-' }}{{ item.points }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多提示 -->
|
||||
<view v-if="list.length > 0" class="loadingicon acea-row row-center-wrapper">
|
||||
<text
|
||||
v-if="loading"
|
||||
class="loading iconfont icon-jiazai"
|
||||
></text>
|
||||
<text class="load-title">{{ loadTitle }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-if="!loading && list.length === 0" class="empty-wrap">
|
||||
<emptyPage title="暂无积分记录～" src="/statics/images/noOrder.gif"></emptyPage>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPointsDetail } from '@/api/hjfAssets.js';
|
||||
import emptyPage from '@/components/emptyPage.vue';
|
||||
import colors from '@/mixins/color';
|
||||
|
||||
/**
|
||||
* P17 积分明细页
|
||||
*
|
||||
* 展示当前用户的积分流水，支持按类型 Tab 筛选（全部/待释放/已释放），
|
||||
* 并以日期分组方式分页渲染列表，上拉触底自动加载下一页。
|
||||
*
|
||||
* @module pages/assets/points_detail
|
||||
*/
|
||||
export default {
|
||||
name: 'PointsDetail',
|
||||
|
||||
components: { emptyPage },
|
||||
|
||||
mixins: [colors],
|
||||
|
||||
data() {
|
||||
return {
|
||||
/**
|
||||
* Tab 配置：label 展示文案，type 对应 API 参数（'' 表示全部）
|
||||
* @type {Array<{ label: string, type: string }>}
|
||||
*/
|
||||
tabs: [
|
||||
{ label: '全部', type: '' },
|
||||
{ label: '待释放', type: 'frozen' },
|
||||
{ label: '已释放', type: 'released' },
|
||||
],
|
||||
|
||||
/** 当前选中 Tab 索引，0=全部 1=待释放 2=已释放 @type {number} */
|
||||
activeTab: 0,
|
||||
|
||||
/**
|
||||
* 按日期分组后的列表，每项形如 { date: string, children: Array }
|
||||
* @type {Array<{ date: string, children: Array<Object> }>}
|
||||
*/
|
||||
list: [],
|
||||
|
||||
/** 已记录的日期键，用于去重分组 @type {string[]} */
|
||||
dateKeys: [],
|
||||
|
||||
/** 当前请求页码 @type {number} */
|
||||
page: 1,
|
||||
|
||||
/** 每页条数 @type {number} */
|
||||
limit: 15,
|
||||
|
||||
/** 是否正在加载（防重入锁） @type {boolean} */
|
||||
loading: false,
|
||||
|
||||
/** 是否已加载全部数据 @type {boolean} */
|
||||
finished: false,
|
||||
|
||||
/** 底部加载提示文案 @type {string} */
|
||||
loadTitle: '加载更多',
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面加载：支持从资产总览通过 type 参数直接定位 Tab。
|
||||
* @param {Object} options - 页面跳转参数
|
||||
* @param {string} [options.type] - 可选，'frozen' | 'released'
|
||||
*/
|
||||
onLoad(options) {
|
||||
if (options && options.type) {
|
||||
const idx = this.tabs.findIndex(t => t.type === options.type);
|
||||
if (idx > -1) this.activeTab = idx;
|
||||
}
|
||||
this.loadList();
|
||||
},
|
||||
|
||||
/**
|
||||
* 上拉触底：加载下一页数据。
|
||||
*/
|
||||
onReachBottom() {
|
||||
this.loadList();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 切换 Tab 筛选，重置分页后重新加载列表。
|
||||
* @param {number} idx - 点击的 Tab 索引
|
||||
*/
|
||||
changeTab(idx) {
|
||||
if (idx === this.activeTab) return;
|
||||
this.activeTab = idx;
|
||||
this.resetAndLoad();
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置所有分页/列表状态，然后发起首页请求。
|
||||
*/
|
||||
resetAndLoad() {
|
||||
this.page = 1;
|
||||
this.finished = false;
|
||||
this.loading = false;
|
||||
this.loadTitle = '加载更多';
|
||||
this.dateKeys = [];
|
||||
this.$set(this, 'list', []);
|
||||
this.loadList();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载积分明细数据（分页追加），通过 `getPointsDetail` 获取。
|
||||
* 按 `add_time` 日期前缀分组追加到 `list`。
|
||||
* 防重入：loading 为 true 或 finished 时直接返回。
|
||||
*/
|
||||
loadList() {
|
||||
if (this.loading || this.finished) return;
|
||||
this.loading = true;
|
||||
this.loadTitle = '';
|
||||
|
||||
const currentType = this.tabs[this.activeTab].type;
|
||||
|
||||
const params = {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
};
|
||||
if (currentType) params.type = currentType;
|
||||
|
||||
getPointsDetail(params).then(res => {
|
||||
const items = (res.data && res.data.list) ? res.data.list : [];
|
||||
|
||||
items.forEach(item => {
|
||||
// 取 add_time 的日期部分作为分组 key（格式 "YYYY-MM-DD"）
|
||||
const dateKey = (item.add_time || '').split(' ')[0] || '未知日期';
|
||||
if (!this.dateKeys.includes(dateKey)) {
|
||||
this.dateKeys.push(dateKey);
|
||||
this.list.push({ date: dateKey, children: [] });
|
||||
}
|
||||
const group = this.list.find(g => g.date === dateKey);
|
||||
if (group) group.children.push(item);
|
||||
});
|
||||
|
||||
const loadend = items.length < this.limit;
|
||||
this.finished = loadend;
|
||||
this.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
|
||||
if (!loadend) this.page += 1;
|
||||
this.loading = false;
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
this.loadTitle = '加载更多';
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.hjf-points-detail-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* -------- Tab 导航 -------- */
|
||||
.tab-nav {
|
||||
background-color: #fff;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&__item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
transition: color 0.2s;
|
||||
|
||||
&.on {
|
||||
color: var(--view-theme);
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 48rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 10rpx;
|
||||
background: var(--view-theme);
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -------- 积分列表 -------- */
|
||||
.points-list {
|
||||
padding: 20rpx 24rpx;
|
||||
|
||||
&__group {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
&__date {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding: 12rpx 0 10rpx;
|
||||
}
|
||||
|
||||
&__card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: 28rpx 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
&__time {
|
||||
font-size: 22rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
&__tag {
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
&.tag--frozen {
|
||||
color: #ff8c00;
|
||||
background: rgba(255, 140, 0, 0.1);
|
||||
}
|
||||
|
||||
&.tag--released {
|
||||
color: #52c41a;
|
||||
background: rgba(82, 196, 26, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__points {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
|
||||
&.points--add {
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
&.points--sub {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -------- 加载更多 & 空状态 -------- */
|
||||
.loadingicon {
|
||||
padding: 24rpx 0;
|
||||
font-size: 24rpx;
|
||||
color: #aaa;
|
||||
|
||||
.loading {
|
||||
margin-right: 8rpx;
|
||||
animation: rotating 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.load-title {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.empty-wrap {
|
||||
padding: 60rpx 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user