update:订单&团队
This commit is contained in:
parent
cb2a26600c
commit
75753df0bb
6
app.json
6
app.json
@ -41,7 +41,11 @@
|
||||
"points/points",
|
||||
"cert/cert",
|
||||
"records/records",
|
||||
"auth/auth"
|
||||
"auth/auth",
|
||||
"team/team",
|
||||
"team-detail/team-detail",
|
||||
"order/order",
|
||||
"order-detail/order-detail"
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
@ -73,11 +73,11 @@ Page({
|
||||
},
|
||||
|
||||
goToOrders() {
|
||||
wx.showToast({ title: '我的订单功能开发中', icon: 'none' });
|
||||
wx.navigateTo({ url: '/subpackages/mine/order/order' });
|
||||
},
|
||||
|
||||
goToTeam() {
|
||||
wx.showToast({ title: '我的团队功能开发中', icon: 'none' });
|
||||
wx.navigateTo({ url: '/subpackages/mine/team/team' });
|
||||
},
|
||||
|
||||
onChooseAvatar() {
|
||||
|
||||
43
subpackages/mine/order-detail/order-detail.js
Normal file
43
subpackages/mine/order-detail/order-detail.js
Normal file
@ -0,0 +1,43 @@
|
||||
Page({
|
||||
data: {
|
||||
detail: {
|
||||
eventName: '2024上海市学生运动会跳绳比赛',
|
||||
statusText: '交易成功',
|
||||
statusKey: 'success',
|
||||
payMethod: '线上支付',
|
||||
actualAmount: '689',
|
||||
payTimeStr: '2025-08-05 16:26',
|
||||
refundAmount: '689',
|
||||
refundTimeStr: '2025-08-05 16:26',
|
||||
orderNo: '13123421516216512515 1',
|
||||
items: [
|
||||
{ id: 1, projectName: '30秒单摇', groupName: '少年儿童组', fee: 23 },
|
||||
{ id: 2, projectName: '交互绳', groupName: '成年组', fee: 411 },
|
||||
{ id: 3, projectName: '交互绳', groupName: '少年儿童组', fee: 32 },
|
||||
{ id: 4, projectName: '交互绳', groupName: '成年组', fee: 12 }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
const id = options && options.id;
|
||||
// TODO: 根据 id 调用接口获取订单详情
|
||||
// this.loadDetail(id);
|
||||
},
|
||||
|
||||
onBack() {
|
||||
if (getCurrentPages().length > 1) {
|
||||
wx.navigateBack();
|
||||
} else {
|
||||
wx.navigateTo({ url: '/subpackages/mine/order/order' });
|
||||
}
|
||||
},
|
||||
|
||||
onCopyOrderNo() {
|
||||
const orderNo = this.data.detail.orderNo || '';
|
||||
wx.setClipboardData({
|
||||
data: orderNo,
|
||||
success: () => wx.showToast({ title: '已复制', icon: 'success' })
|
||||
});
|
||||
}
|
||||
});
|
||||
6
subpackages/mine/order-detail/order-detail.json
Normal file
6
subpackages/mine/order-detail/order-detail.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"usingComponents": {
|
||||
"mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
79
subpackages/mine/order-detail/order-detail.wxml
Normal file
79
subpackages/mine/order-detail/order-detail.wxml
Normal file
@ -0,0 +1,79 @@
|
||||
<view class="detail-page">
|
||||
<mp-navigation-bar
|
||||
title="订单详情"
|
||||
background-color="#ffffff"
|
||||
color="#333"
|
||||
bind:click-left="onBack"
|
||||
left-arrow
|
||||
></mp-navigation-bar>
|
||||
|
||||
<scroll-view class="scroll" scroll-y>
|
||||
<!-- 顶部状态标题 -->
|
||||
<view class="status-header">
|
||||
<text class="status-title status-{{detail.statusKey}}">{{detail.statusText}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 基本信息卡 -->
|
||||
<view class="info-card">
|
||||
<!-- 赛事名 + 状态 -->
|
||||
<view class="info-row info-row--top">
|
||||
<text class="info-event-name">{{detail.eventName}}</text>
|
||||
<text class="info-status status-{{detail.statusKey}}">{{detail.statusText}}</text>
|
||||
</view>
|
||||
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="info-row">
|
||||
<text class="info-label">支付方式</text>
|
||||
<text class="info-value">{{detail.payMethod}}</text>
|
||||
</view>
|
||||
<!-- 实付金额 -->
|
||||
<view class="info-row">
|
||||
<text class="info-label">实付金额</text>
|
||||
<text class="info-value">¥{{detail.actualAmount}}</text>
|
||||
</view>
|
||||
<!-- 支付时间 -->
|
||||
<view class="info-row">
|
||||
<text class="info-label">支付时间</text>
|
||||
<text class="info-value">{{detail.payTimeStr}}</text>
|
||||
</view>
|
||||
<!-- 退款金额(有则显示) -->
|
||||
<view class="info-row" wx:if="{{detail.refundAmount}}">
|
||||
<text class="info-label">退款金额</text>
|
||||
<text class="info-value">¥{{detail.refundAmount}}</text>
|
||||
</view>
|
||||
<!-- 退款时间(有则显示) -->
|
||||
<view class="info-row" wx:if="{{detail.refundTimeStr}}">
|
||||
<text class="info-label">退款时间</text>
|
||||
<text class="info-value">{{detail.refundTimeStr}}</text>
|
||||
</view>
|
||||
<!-- 订单编号 -->
|
||||
<view class="info-row info-row--last">
|
||||
<text class="info-label">订单编号</text>
|
||||
<view class="order-no-wrap">
|
||||
<text class="info-value order-no">{{detail.orderNo}}</text>
|
||||
<view class="copy-btn" bindtap="onCopyOrderNo">
|
||||
<text class="copy-icon">⎘</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 项目列表表格 -->
|
||||
<view class="table-card" wx:if="{{detail.items && detail.items.length > 0}}">
|
||||
<view class="table-head">
|
||||
<text class="th">项目</text>
|
||||
<text class="th">组别</text>
|
||||
<text class="th th-right">费用(元)</text>
|
||||
</view>
|
||||
<view class="table-body">
|
||||
<view class="tr" wx:for="{{detail.items}}" wx:key="id">
|
||||
<text class="td">{{item.projectName}}</text>
|
||||
<text class="td">{{item.groupName}}</text>
|
||||
<text class="td td-right">{{item.fee}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
162
subpackages/mine/order-detail/order-detail.wxss
Normal file
162
subpackages/mine/order-detail/order-detail.wxss
Normal file
@ -0,0 +1,162 @@
|
||||
/* ===== 页面 ===== */
|
||||
.detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - 88rpx);
|
||||
padding: 0 32rpx 60rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== 顶部状态标题 ===== */
|
||||
.status-header {
|
||||
padding: 40rpx 8rpx 24rpx;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.status-cancelled {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
/* ===== 基本信息卡 ===== */
|
||||
.info-card {
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 40rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.info-row--top {
|
||||
align-items: flex-start;
|
||||
padding: 36rpx 0 28rpx;
|
||||
}
|
||||
|
||||
.info-row--last {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.info-event-name {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #1a1a1a;
|
||||
font-weight: 600;
|
||||
padding-right: 24rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.info-status {
|
||||
flex-shrink: 0;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 订单编号行 */
|
||||
.order-no-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.order-no {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* ===== 项目表格卡 ===== */
|
||||
.table-card {
|
||||
margin-top: 24rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #1a56db;
|
||||
padding: 28rpx 0;
|
||||
}
|
||||
|
||||
.th {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.th-right {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.td {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.td-right {
|
||||
text-align: center;
|
||||
}
|
||||
67
subpackages/mine/order/order.js
Normal file
67
subpackages/mine/order/order.js
Normal file
@ -0,0 +1,67 @@
|
||||
Page({
|
||||
data: {
|
||||
loading: false,
|
||||
noMore: false,
|
||||
orders: [
|
||||
{
|
||||
id: 1,
|
||||
eventName: '2024上海市学生运动会跳绳比赛',
|
||||
statusText: '交易成功',
|
||||
statusKey: 'success',
|
||||
payTimeStr: '2025-08-05 16:26',
|
||||
actualAmount: '859',
|
||||
refundAmount: ''
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
eventName: '2024上海市学生运动会跳绳比赛',
|
||||
statusText: '交易取消',
|
||||
statusKey: 'cancelled',
|
||||
payTimeStr: '2025-08-05 16:26',
|
||||
actualAmount: '859',
|
||||
refundAmount: '859'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
eventName: '2024上海市学生运动会跳绳比赛',
|
||||
statusText: '交易成功',
|
||||
statusKey: 'success',
|
||||
payTimeStr: '2025-08-05 16:26',
|
||||
actualAmount: '859',
|
||||
refundAmount: ''
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
eventName: '2024上海市学生运动会跳绳比赛',
|
||||
statusText: '交易成功',
|
||||
statusKey: 'success',
|
||||
payTimeStr: '2025-08-05 16:26',
|
||||
actualAmount: '859',
|
||||
refundAmount: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
onLoad() {},
|
||||
|
||||
onPullDownRefresh() {
|
||||
wx.stopPullDownRefresh();
|
||||
},
|
||||
|
||||
onBack() {
|
||||
if (getCurrentPages().length > 1) {
|
||||
wx.navigateBack();
|
||||
} else {
|
||||
wx.switchTab({ url: '/pages/mine/mine' });
|
||||
}
|
||||
},
|
||||
|
||||
onOrderTap(e) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
wx.navigateTo({ url: `/subpackages/mine/order-detail/order-detail?id=${id}` });
|
||||
},
|
||||
|
||||
onLoadMore() {
|
||||
// TODO: 分页加载
|
||||
}
|
||||
});
|
||||
7
subpackages/mine/order/order.json
Normal file
7
subpackages/mine/order/order.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": true,
|
||||
"usingComponents": {
|
||||
"mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
51
subpackages/mine/order/order.wxml
Normal file
51
subpackages/mine/order/order.wxml
Normal file
@ -0,0 +1,51 @@
|
||||
<view class="order-page">
|
||||
<mp-navigation-bar
|
||||
title="我的订单"
|
||||
background-color="#ffffff"
|
||||
color="#333"
|
||||
bind:click-left="onBack"
|
||||
left-arrow
|
||||
></mp-navigation-bar>
|
||||
|
||||
<scroll-view
|
||||
class="list"
|
||||
scroll-y
|
||||
lower-threshold="80"
|
||||
bindscrolltolower="onLoadMore"
|
||||
>
|
||||
<!-- 订单卡片列表 -->
|
||||
<view
|
||||
class="order-card"
|
||||
wx:for="{{orders}}"
|
||||
wx:key="id"
|
||||
bindtap="onOrderTap"
|
||||
data-id="{{item.id}}"
|
||||
>
|
||||
<!-- 第一行:赛事名 + 状态 -->
|
||||
<view class="card-row card-row--top">
|
||||
<text class="event-name">{{item.eventName}}</text>
|
||||
<text class="order-status status-{{item.statusKey}}">{{item.statusText}}</text>
|
||||
</view>
|
||||
<!-- 第二行:支付时间 -->
|
||||
<view class="card-row">
|
||||
<text class="pay-time">支付时间:{{item.payTimeStr}}</text>
|
||||
</view>
|
||||
<!-- 第三行:金额信息 -->
|
||||
<view class="card-row card-row--amount">
|
||||
<text class="amount-item">实付金额:<text class="amount-val">¥{{item.actualAmount}}</text></text>
|
||||
<text class="amount-item" wx:if="{{item.refundAmount}}">退款金额:<text class="amount-val">¥{{item.refundAmount}}</text></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view wx:if="{{orders.length === 0 && !loading}}" class="empty">
|
||||
<text class="empty-text">暂无订单</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<view class="list-footer" wx:if="{{orders.length > 0}}">
|
||||
<text wx:if="{{noMore}}" class="footer-text">没有更多了</text>
|
||||
<text wx:elif="{{loading}}" class="footer-text">加载中...</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
111
subpackages/mine/order/order.wxss
Normal file
111
subpackages/mine/order/order.wxss
Normal file
@ -0,0 +1,111 @@
|
||||
/* ===== 页面 ===== */
|
||||
.order-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.list {
|
||||
height: calc(100vh - 88rpx);
|
||||
padding: 24rpx 32rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== 订单卡片 ===== */
|
||||
.order-card {
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 36rpx 40rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.card-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.card-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-row--top {
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.card-row--amount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 6rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.event-name {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #1a1a1a;
|
||||
font-weight: 600;
|
||||
padding-right: 24rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 状态文字颜色 */
|
||||
.order-status {
|
||||
flex-shrink: 0;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.status-cancelled {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.pay-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.amount-item {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.amount-val {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ===== 空状态 ===== */
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 200rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
/* ===== 列表底部 ===== */
|
||||
.list-footer {
|
||||
text-align: center;
|
||||
padding: 24rpx 0 40rpx;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 24rpx;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
31
subpackages/mine/team-detail/team-detail.js
Normal file
31
subpackages/mine/team-detail/team-detail.js
Normal file
@ -0,0 +1,31 @@
|
||||
Page({
|
||||
data: {
|
||||
detail: {
|
||||
name: '队伍名称',
|
||||
memberCount: 9,
|
||||
leaderName: '此文为/1234145121',
|
||||
coachName: '此为/1234213211',
|
||||
createdTimeStr: '2025-08-05 16:26',
|
||||
members: [
|
||||
{ id: 1, name: '我121', gender: '男', age: 23 },
|
||||
{ id: 2, name: '我121', gender: '女', age: 12 },
|
||||
{ id: 3, name: '我121', gender: '女', age: 32 },
|
||||
{ id: 4, name: '我121', gender: '女', age: 12 }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
const id = options && options.id;
|
||||
// TODO: 根据 id 调用接口获取团队详情
|
||||
// this.loadDetail(id);
|
||||
},
|
||||
|
||||
onBack() {
|
||||
if (getCurrentPages().length > 1) {
|
||||
wx.navigateBack();
|
||||
} else {
|
||||
wx.navigateTo({ url: '/subpackages/mine/team/team' });
|
||||
}
|
||||
}
|
||||
});
|
||||
6
subpackages/mine/team-detail/team-detail.json
Normal file
6
subpackages/mine/team-detail/team-detail.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"usingComponents": {
|
||||
"mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
52
subpackages/mine/team-detail/team-detail.wxml
Normal file
52
subpackages/mine/team-detail/team-detail.wxml
Normal file
@ -0,0 +1,52 @@
|
||||
<view class="detail-page">
|
||||
<!-- 导航栏 -->
|
||||
<mp-navigation-bar
|
||||
title="团队详情"
|
||||
background-color="#ffffff"
|
||||
color="#333"
|
||||
bind:click-left="onBack"
|
||||
left-arrow
|
||||
></mp-navigation-bar>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<view class="info-card">
|
||||
<view class="info-row">
|
||||
<text class="info-label">队伍名称</text>
|
||||
<text class="info-value highlight">{{detail.memberCount}}人</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">领队</text>
|
||||
<text class="info-value">{{detail.leaderName || '—'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">教练</text>
|
||||
<text class="info-value">{{detail.coachName || '—'}}</text>
|
||||
</view>
|
||||
<view class="info-row last">
|
||||
<text class="info-label">创建时间</text>
|
||||
<text class="info-value">{{detail.createdTimeStr || '—'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 成员列表 -->
|
||||
<view class="member-card">
|
||||
<!-- 表头 -->
|
||||
<view class="table-head">
|
||||
<text class="th th-name">姓名</text>
|
||||
<text class="th th-gender">性别</text>
|
||||
<text class="th th-age">年龄</text>
|
||||
</view>
|
||||
<!-- 表体 -->
|
||||
<view class="table-body">
|
||||
<view class="tr" wx:for="{{detail.members}}" wx:key="id">
|
||||
<text class="td td-name">{{item.name}}</text>
|
||||
<text class="td td-gender">{{item.gender}}</text>
|
||||
<text class="td td-age">{{item.age}}</text>
|
||||
</view>
|
||||
<!-- 空状态 -->
|
||||
<view wx:if="{{!detail.members || detail.members.length === 0}}" class="table-empty">
|
||||
<text class="table-empty-text">暂无成员</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
96
subpackages/mine/team-detail/team-detail.wxss
Normal file
96
subpackages/mine/team-detail/team-detail.wxss
Normal file
@ -0,0 +1,96 @@
|
||||
/* ===== 页面 ===== */
|
||||
.detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
/* ===== 基本信息卡 ===== */
|
||||
.info-card {
|
||||
margin: 24rpx 32rpx 0;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 40rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 36rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.info-row.last {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-value.highlight {
|
||||
color: #1a56db;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ===== 成员表格卡 ===== */
|
||||
.member-card {
|
||||
margin: 24rpx 32rpx 48rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 表头 */
|
||||
.table-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #1a56db;
|
||||
padding: 28rpx 0;
|
||||
}
|
||||
|
||||
.th {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 表体行 */
|
||||
.tr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.td {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.table-empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 80rpx 0;
|
||||
}
|
||||
|
||||
.table-empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
34
subpackages/mine/team/team.js
Normal file
34
subpackages/mine/team/team.js
Normal file
@ -0,0 +1,34 @@
|
||||
Page({
|
||||
data: {
|
||||
orgName: '上海市跳绳键球协会', // 所在单位,后续接口替换
|
||||
loading: false,
|
||||
teams: [
|
||||
{ id: 1, name: '队伍名称', memberCount: 9, pendingCount: 0 },
|
||||
{ id: 2, name: '队伍名称', memberCount: 91, pendingCount: 0 },
|
||||
{ id: 3, name: '队伍名称', memberCount: 9, pendingCount: 3 }
|
||||
]
|
||||
},
|
||||
|
||||
onLoad() {},
|
||||
|
||||
onPullDownRefresh() {
|
||||
wx.stopPullDownRefresh();
|
||||
},
|
||||
|
||||
onBack() {
|
||||
if (getCurrentPages().length > 1) {
|
||||
wx.navigateBack();
|
||||
} else {
|
||||
wx.switchTab({ url: '/pages/mine/mine' });
|
||||
}
|
||||
},
|
||||
|
||||
onViewOrgPoints() {
|
||||
wx.showToast({ title: '单位积分功能开发中', icon: 'none' });
|
||||
},
|
||||
|
||||
onTeamTap(e) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
wx.navigateTo({ url: `/subpackages/mine/team-detail/team-detail?id=${id}` });
|
||||
}
|
||||
});
|
||||
7
subpackages/mine/team/team.json
Normal file
7
subpackages/mine/team/team.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": true,
|
||||
"usingComponents": {
|
||||
"mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
48
subpackages/mine/team/team.wxml
Normal file
48
subpackages/mine/team/team.wxml
Normal file
@ -0,0 +1,48 @@
|
||||
<view class="team-page">
|
||||
<!-- 导航栏 -->
|
||||
<mp-navigation-bar
|
||||
title="我的团队"
|
||||
background-color="#ffffff"
|
||||
color="#333"
|
||||
bind:click-left="onBack"
|
||||
left-arrow
|
||||
></mp-navigation-bar>
|
||||
|
||||
<!-- 所在单位卡片 -->
|
||||
<view class="org-card" wx:if="{{orgName}}">
|
||||
<view class="org-bg"></view>
|
||||
<view class="org-content">
|
||||
<view class="org-info">
|
||||
<text class="org-name">{{orgName}}</text>
|
||||
<text class="org-label">所在单位</text>
|
||||
</view>
|
||||
<view class="org-btn" bindtap="onViewOrgPoints">
|
||||
<text class="org-btn-icon">○</text>
|
||||
<text class="org-btn-text">查看单位积分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 团队列表 -->
|
||||
<view class="list-wrap">
|
||||
<view
|
||||
class="team-item"
|
||||
wx:for="{{teams}}"
|
||||
wx:key="id"
|
||||
bindtap="onTeamTap"
|
||||
data-id="{{item.id}}"
|
||||
data-item="{{item}}"
|
||||
>
|
||||
<text class="team-name">{{item.name}}</text>
|
||||
<view class="team-right">
|
||||
<text class="team-count">{{item.memberCount}}人{{item.pendingCount ? item.pendingCount : ''}}</text>
|
||||
<text class="team-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view wx:if="{{teams.length === 0 && !loading}}" class="empty">
|
||||
<text class="empty-text">暂无团队</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
148
subpackages/mine/team/team.wxss
Normal file
148
subpackages/mine/team/team.wxss
Normal file
@ -0,0 +1,148 @@
|
||||
/* ===== 页面 ===== */
|
||||
.team-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
/* ===== 单位卡片 ===== */
|
||||
.org-card {
|
||||
position: relative;
|
||||
margin: 24rpx 32rpx 0;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.org-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, #1a3a8a 0%, #1a56db 100%);
|
||||
}
|
||||
|
||||
/* 背景纹理点缀 */
|
||||
.org-bg::before,
|
||||
.org-bg::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.org-bg::before {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
top: -60rpx;
|
||||
right: 40rpx;
|
||||
}
|
||||
|
||||
.org-bg::after {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
bottom: -50rpx;
|
||||
right: 160rpx;
|
||||
}
|
||||
|
||||
.org-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 40rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.org-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.org-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.org-label {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.org-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.4);
|
||||
border-radius: 40rpx;
|
||||
padding: 12rpx 28rpx;
|
||||
}
|
||||
|
||||
.org-btn-icon {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.org-btn-text {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ===== 团队列表 ===== */
|
||||
.list-wrap {
|
||||
margin: 24rpx 32rpx 0;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.team-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 40rpx 40rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.team-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
font-size: 30rpx;
|
||||
color: #1a1a1a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.team-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.team-count {
|
||||
font-size: 28rpx;
|
||||
color: #1a56db;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.team-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #c0c4cc;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ===== 空状态 ===== */
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user