feat(uniapp_v2): 二开功能迁移与小程序主包优化
- 从 uniapp 迁移 HJF 页面、API、组件及用户/订单相关改动 - queue、assets 使用独立分包以降低主包体积 - 修复首页单根节点与支付结果页 v-if 链 - 关闭 HjfDemoPanel 全局注册；uniNoticeBar 注释 $getAppWebview 避免 __webviewId__ 报错 - 配置域名与 manifest 应用名称；cache/store 防御性处理 Made-with: Cursor
This commit is contained in:
apple
249
pro_v3.5.1/view/uniapp_v2/pages/queue/status.vue
Normal file
249
pro_v3.5.1/view/uniapp_v2/pages/queue/status.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view class="brokerage-page" :style="colorStyle">
|
||||
<!-- 顶部渐变区域 -->
|
||||
<view class="header-gradient">
|
||||
<view class="header-gradient__circle header-gradient__circle--1"></view>
|
||||
<view class="header-gradient__circle header-gradient__circle--2"></view>
|
||||
|
||||
<view class="header-card">
|
||||
<view class="header-card__label">累计佣金收入</view>
|
||||
<view class="header-card__amount">
|
||||
<text class="header-card__currency">¥</text>
|
||||
<text class="header-card__value">{{ progressData.total_brokerage || '0.00' }}</text>
|
||||
</view>
|
||||
<!-- 佣金周期进度环 -->
|
||||
<HjfQueueProgress
|
||||
:cycle-current="progressData.cycle_current || 0"
|
||||
:cycle-total="progressData.cycle_total || 3"
|
||||
:cycle-rates="progressData.cycle_rates || [20, 30, 50]"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 佣金记录列表 -->
|
||||
<view class="records-section">
|
||||
<view class="section-header">
|
||||
<view class="section-header__bar"></view>
|
||||
<text class="section-header__title">佣金记录</text>
|
||||
<text class="section-header__more" @tap="goToCommissionDetail">查看全部</text>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="loading-wrap">
|
||||
<view class="loading-dot loading-dot--1"></view>
|
||||
<view class="loading-dot loading-dot--2"></view>
|
||||
<view class="loading-dot loading-dot--3"></view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="records.length === 0" class="empty-wrap">
|
||||
<emptyPage title="暂无佣金记录" src="/statics/images/noOrder.gif" />
|
||||
</view>
|
||||
|
||||
<view v-else class="record-list">
|
||||
<view
|
||||
v-for="(item, index) in records"
|
||||
:key="item.id || index"
|
||||
class="record-item"
|
||||
>
|
||||
<view class="record-item__left">
|
||||
<view class="record-item__avatar-wrap">
|
||||
<image
|
||||
class="record-item__avatar"
|
||||
:src="item.avatar || '/statics/images/avatar.png'"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="record-item__info">
|
||||
<text class="record-item__name">{{ item.nickname || '用户' }}</text>
|
||||
<text class="record-item__time">{{ item.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-item__right">
|
||||
<text class="record-item__amount">+¥{{ item.number }}</text>
|
||||
<text class="record-item__type">{{ item.title || '推荐佣金' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 上拉加载 -->
|
||||
<view v-if="records.length > 0" class="load-more">
|
||||
<text v-if="loadingMore" class="load-more__text">加载中...</text>
|
||||
<text v-else-if="finished" class="load-more__text">—— 没有更多了 ——</text>
|
||||
</view>
|
||||
|
||||
<!-- 佣金到账通知 -->
|
||||
<HjfRefundNotice
|
||||
:visible="showNotice"
|
||||
:amount="noticeData.amount"
|
||||
:order-id="noticeData.orderId"
|
||||
@close="showNotice = false"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getBrokerageProgress } from '@/api/hjfQueue.js';
|
||||
import HjfQueueProgress from '@/components/HjfQueueProgress.vue';
|
||||
import HjfRefundNotice from '@/components/HjfRefundNotice.vue';
|
||||
import emptyPage from '@/components/emptyPage.vue';
|
||||
import colors from '@/mixins/color.js';
|
||||
import { spreadOrder } from '@/api/user.js';
|
||||
|
||||
export default {
|
||||
name: 'BrokerageStatus',
|
||||
mixins: [colors],
|
||||
components: { HjfQueueProgress, HjfRefundNotice, emptyPage },
|
||||
|
||||
data() {
|
||||
return {
|
||||
progressData: {},
|
||||
records: [],
|
||||
loading: false,
|
||||
loadingMore: false,
|
||||
finished: false,
|
||||
page: 1,
|
||||
limit: 15,
|
||||
showNotice: false,
|
||||
noticeData: { amount: 0, orderId: '' }
|
||||
};
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadProgress();
|
||||
this.loadRecords();
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (!this.loadingMore && !this.finished) this.loadRecords();
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadProgress() {
|
||||
getBrokerageProgress()
|
||||
.then(res => {
|
||||
if (res && res.data) this.progressData = res.data;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
|
||||
loadRecords() {
|
||||
if (this.loading || this.loadingMore || this.finished) return;
|
||||
const isFirst = this.page === 1;
|
||||
if (isFirst) this.loading = true; else this.loadingMore = true;
|
||||
|
||||
spreadOrder({ page: this.page, limit: this.limit, category: 'now_money', type: 'brokerage' })
|
||||
.then(res => {
|
||||
const list = (res && res.data && res.data.list) ? res.data.list : [];
|
||||
if (list.length < this.limit) this.finished = true;
|
||||
if (isFirst) this.records = list;
|
||||
else this.records = [...this.records, ...list];
|
||||
this.page++;
|
||||
})
|
||||
.catch(() => {
|
||||
if (isFirst) this.records = [];
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
this.loadingMore = false;
|
||||
});
|
||||
},
|
||||
|
||||
goToCommissionDetail() {
|
||||
uni.navigateTo({ url: '/pages/users/user_spread_money/index' });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.brokerage-page {
|
||||
min-height: 100vh;
|
||||
background: #f4f5f7;
|
||||
padding-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.header-gradient {
|
||||
background: linear-gradient(135deg, var(--view-theme, #e93323) 0%, var(--view-gradient, #f76b1c) 100%);
|
||||
padding: 40rpx 30rpx 56rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header-gradient__circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
opacity: 0.07;
|
||||
}
|
||||
.header-gradient__circle--1 { width: 400rpx; height: 400rpx; top: -150rpx; right: -80rpx; }
|
||||
.header-gradient__circle--2 { width: 240rpx; height: 240rpx; bottom: -60rpx; left: -50rpx; }
|
||||
|
||||
.header-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: rgba(255,255,255,0.14);
|
||||
border-radius: 28rpx;
|
||||
padding: 36rpx 32rpx;
|
||||
}
|
||||
.header-card__label { font-size: 26rpx; color: rgba(255,255,255,0.8); margin-bottom: 8rpx; }
|
||||
.header-card__amount { display: flex; align-items: baseline; margin-bottom: 28rpx; }
|
||||
.header-card__currency { font-size: 36rpx; color: #fff; font-weight: 600; margin-right: 4rpx; }
|
||||
.header-card__value { font-size: 72rpx; font-weight: 700; color: #fff; line-height: 1; }
|
||||
|
||||
.records-section {
|
||||
margin: -16rpx 20rpx 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 0 0 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.06);
|
||||
}
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28rpx 30rpx 20rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
.section-header__bar {
|
||||
width: 6rpx; height: 28rpx; border-radius: 3rpx;
|
||||
background: var(--view-theme, #e93323); margin-right: 14rpx;
|
||||
}
|
||||
.section-header__title { font-size: 30rpx; font-weight: 600; color: #333; flex: 1; }
|
||||
.section-header__more { font-size: 24rpx; color: var(--view-theme, #e93323); }
|
||||
|
||||
.loading-wrap {
|
||||
display: flex; justify-content: center; align-items: center; gap: 12rpx;
|
||||
padding: 60rpx 0;
|
||||
}
|
||||
.loading-dot {
|
||||
width: 14rpx; height: 14rpx; border-radius: 50%;
|
||||
background: var(--view-theme, #e93323);
|
||||
animation: dot-bounce 1.2s infinite ease-in-out;
|
||||
}
|
||||
.loading-dot--2 { animation-delay: 0.2s; }
|
||||
.loading-dot--3 { animation-delay: 0.4s; }
|
||||
@keyframes dot-bounce {
|
||||
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
|
||||
40% { opacity: 1; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
.empty-wrap { padding: 40rpx 0; }
|
||||
|
||||
.record-item {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 28rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f8f8f8;
|
||||
}
|
||||
.record-item__left { display: flex; align-items: center; gap: 20rpx; }
|
||||
.record-item__avatar-wrap { width: 76rpx; height: 76rpx; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
|
||||
.record-item__avatar { width: 100%; height: 100%; }
|
||||
.record-item__name { font-size: 28rpx; color: #333; font-weight: 500; display: block; }
|
||||
.record-item__time { font-size: 22rpx; color: #999; display: block; margin-top: 6rpx; }
|
||||
.record-item__right { text-align: right; }
|
||||
.record-item__amount { font-size: 34rpx; font-weight: 700; color: #e93323; display: block; }
|
||||
.record-item__type { font-size: 22rpx; color: #aaa; display: block; margin-top: 4rpx; }
|
||||
|
||||
.load-more { padding: 32rpx 0 20rpx; text-align: center; }
|
||||
.load-more__text { font-size: 24rpx; color: #bbb; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user