306 lines
8.1 KiB
Plaintext
306 lines
8.1 KiB
Plaintext
<template>
|
|
<view class="admin-page">
|
|
<!-- 绛涢€夐潰鏉?-->
|
|
<view class="filter-card">
|
|
<view class="filter-row">
|
|
<view class="filter-item">
|
|
<text class="label">鏃堕棿閫夋嫨锛?/text>
|
|
<view class="date-picker-mock">
|
|
<text class="placeholder">寮€濮嬫棩鏈?- 缁撴潫鏃ユ湡</text>
|
|
<text class="icon-calendar">馃搮</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="filter-item">
|
|
<text class="label">鎼滅储锛?/text>
|
|
<input class="filter-input" placeholder="璇疯緭鍏ュ鍚嶃€佺數璇濄€乁ID" />
|
|
</view>
|
|
|
|
<view class="filter-btns">
|
|
<button class="btn primary" @click="onSearch">鏌ヨ</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 鍐呭鍗＄墖 -->
|
|
<view class="content-card">
|
|
<view class="action-bar">
|
|
<button class="btn ghost small" @click="onExport">瀵煎嚭</button>
|
|
</view>
|
|
|
|
<view class="table-container">
|
|
<!-- 琛ㄥご -->
|
|
<view class="table-header">
|
|
<view class="col col-id"><text>ID</text></view>
|
|
<view class="col col-img"><text>鍟嗗搧鍥剧墖</text></view>
|
|
<view class="col col-info"><text>鐢ㄦ埛淇℃伅</text></view>
|
|
<view class="col col-level"><text>鍒嗛攢绛夌骇</text></view>
|
|
<view class="col col-stat"><text>鎺ㄥ箍鐢ㄦ埛鏁伴噺</text></view>
|
|
<view class="col col-stat"><text>鎺ㄥ箍璁㈠崟鏁伴噺</text></view>
|
|
<view class="col col-stat"><text>鎺ㄥ箍璁㈠崟閲戦</text></view>
|
|
<view class="col col-stat"><text>浣ｉ噾鎬婚噾棰?/text></view>
|
|
<view class="col col-stat"><text>宸叉彁鐜伴噾棰?/text></view>
|
|
<view class="col col-stat"><text>鎻愮幇娆℃暟</text></view>
|
|
<view class="col col-stat"><text>鏈彁鐜伴噾棰?/text></view>
|
|
<view class="col col-ops"><text>鎿嶄綔</text></view>
|
|
</view>
|
|
|
|
<!-- 琛ㄦ牸鍐呭 -->
|
|
<view class="table-body">
|
|
<view v-for="item in promoterList" :key="item.id" class="table-row">
|
|
<view class="col col-id"><text>{{ item.id }}</text></view>
|
|
<view class="col col-img">
|
|
<image class="table-img" src="/static/logo.png" mode="aspectFill" />
|
|
</view>
|
|
<view class="col col-info">
|
|
<view class="user-info-box">
|
|
<text class="info-text">鏄电О:{{ item.nickname }}</text>
|
|
<text class="info-text">濮撳悕:{{ item.name }}</text>
|
|
<text class="info-text">鐢佃瘽:{{ item.phone }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="col col-level"><text>{{ item.level }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.userCount }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.orderCount }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.orderAmount }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.commissionTotal }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.withdrawnAmount }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.withdrawCount }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.unwithdrawnAmount }}</text></view>
|
|
<view class="col col-ops">
|
|
<text class="op-link" @click="onPromoter(item)">鎺ㄥ箍浜?/text>
|
|
<text class="op-divider">|</text>
|
|
<text class="op-link" @click="onMore(item)">鏇村</text>
|
|
<text class="arrow-down">鈻?/text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 鍒嗛〉 (妯℃嫙) -->
|
|
<view class="pagination">
|
|
<text class="page-info">鍏?{{ promoterList.length }} 鏉?/text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
|
|
const promoterList = ref([
|
|
{ id: '82764', nickname: '183****5762', name: '-', phone: '183****5762', level: '--', userCount: 0, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 },
|
|
{ id: '82763', nickname: '1', name: '-', phone: '185****4518', level: '--', userCount: 0, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 },
|
|
{ id: '82762', nickname: 'Ronnie', name: '-', phone: '153****0391', level: '--', userCount: 0, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 },
|
|
{ id: '82761', nickname: 'Charon', name: '-', phone: '181****6248', level: '--', userCount: 0, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 },
|
|
{ id: '82760', nickname: '11', name: '-', phone: '177****0265', level: '--', userCount: 0, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 }
|
|
])
|
|
|
|
function onSearch() {
|
|
uni.showToast({ title: '鏌ヨ涓?..', icon: 'none' })
|
|
}
|
|
|
|
function onExport() {
|
|
uni.showToast({ title: '寮€濮嬪鍑?, icon: 'none' })
|
|
}
|
|
|
|
function onPromoter(item: any) {
|
|
uni.showToast({ title: '鏌ョ湅鎺ㄥ箍浜? ' + item.id, icon: 'none' })
|
|
}
|
|
|
|
function onMore(item: any) {
|
|
uni.showToast({ title: '鏇村鎿嶄綔: ' + item.id, icon: 'none' })
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.admin-page {
|
|
/* padding removed */
|
|
|
|
|
|
}
|
|
|
|
.filter-card {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
padding: 24px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.filter-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.label {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.date-picker-mock {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 2px;
|
|
height: 32px;
|
|
width: 260px;
|
|
padding: 0 12px;
|
|
background: #fff;
|
|
.placeholder { font-size: 14px; color: #bfbfbf; }
|
|
.icon-calendar { font-size: 14px; color: #bfbfbf; }
|
|
}
|
|
|
|
.filter-input {
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 2px;
|
|
height: 32px;
|
|
width: 220px;
|
|
padding: 0 12px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.filter-btns {
|
|
display: flex;
|
|
}
|
|
|
|
.btn {
|
|
height: 32px;
|
|
padding: 0 16px;
|
|
font-size: 14px;
|
|
border-radius: 2px;
|
|
border: 1px solid #d9d9d9;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
}
|
|
|
|
.btn.primary {
|
|
background: #2f54eb;
|
|
border-color: #2f54eb;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn.ghost {
|
|
color: #666;
|
|
background: #fff;
|
|
}
|
|
|
|
.btn.small {
|
|
height: 28px;
|
|
padding: 0 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.content-card {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
padding: 0;
|
|
}
|
|
|
|
.action-bar {
|
|
padding: 16px 24px;
|
|
}
|
|
|
|
.table-container {
|
|
padding: 0 24px 24px;
|
|
}
|
|
|
|
.table-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background: #f8faff;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
padding: 12px 0;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
background: #fafafa;
|
|
}
|
|
}
|
|
|
|
.col {
|
|
padding: 0 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.col-id { width: 60px; }
|
|
.col-img { width: 80px; justify-content: center; }
|
|
.col-info { width: 180px; }
|
|
.col-level { width: 100px; justify-content: center; }
|
|
.col-stat { width: 110px; justify-content: center; }
|
|
.col-ops {
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.table-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.user-info-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.info-text {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.op-link {
|
|
color: #1890ff;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.op-divider {
|
|
color: #e8e8e8;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.arrow-down {
|
|
font-size: 10px;
|
|
color: #1890ff;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.pagination {
|
|
padding: 16px 24px;
|
|
border-top: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.page-info {
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
</style>
|
|
|
|
|