huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页细节调整

Browse Source
This commit is contained in:
huangzhenbao
2026-02-06 16:18:04 +08:00
parent d00f0b7412
commit 57846534bc
86 changed files with 2751 additions and 3074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
pages/mall/admin/distribution/level/index.uvue
View File

@@ -1,43 +1,37 @@
<template>
<template>
<view class="admin-page">
<view class="filter-card">
<view class="filter-row">
<view class="filter-item">
<text class="label">鏄惁鏄剧ず锛?/text>
<view class="select-mock">
<text>鍏ㄩ儴</text>
<text class="arrow">鈻?/text>
</view>
<text class="label">是否显示：</text>
<view class="select-mock"><text>全部</text><text class="arrow">▼</text></view>
</view>
<view class="filter-item">
<text class="label">绛夌骇鍚嶇О锛?/text>
<input class="filter-input" placeholder="璇疯緭鍏ョ瓑绾у悕绉? />
<text class="label">等级名称：</text>
<input class="filter-input" placeholder="请输入等级名称" />
</view>
<view class="filter-btns">
<button class="btn primary" @click="onSearch">鏌ヨ</button>
<button class="btn primary" @click="onSearch">查询</button>
</view>
</view>
</view>
<view class="content-card">
<view class="action-bar">
<button class="btn primary small" @click="onAdd">娣诲姞绛夌骇</button>
<button class="btn primary small" @click="onAdd">添加等级</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-name"><text>鍚嶇О</text></view>
<view class="col col-level"><text>绛夌骇</text></view>
<view class="col col-percent"><text>涓€绾у垎浣ｆ瘮渚?/text></view>
<view class="col col-percent"><text>浜岀骇鍒嗕剑姣斾緥</text></view>
<view class="col col-stat"><text>浠诲姟鎬绘暟</text></view>
<view class="col col-stat"><text>闇€瀹屾垚鏁伴噺</text></view>
<view class="col col-status"><text>鏄惁鏄剧ず</text></view>
<view class="col col-ops"><text>鎿嶄綔</text></view>
<view class="col col-img"><text>商品图片</text></view>
<view class="col col-name"><text>名称</text></view>
<view class="col col-level"><text>等级</text></view>
<view class="col col-percent"><text>一级分佣比例</text></view>
<view class="col col-percent"><text>二级分佣比例</text></view>
<view class="col col-stat"><text>任务总数</text></view>
<view class="col col-stat"><text>需完成数量</text></view>
<view class="col col-status"><text>是否显示</text></view>
<view class="col col-ops"><text>操作</text></view>
</view>
<view class="table-body">
<view v-for="item in levelList" :key="item.id" class="table-row">
<view class="col col-id"><text>{{ item.id }}</text></view>
@@ -54,205 +48,48 @@
<switch :checked="item.show" color="#1890ff" scale="0.8" />
</view>
<view class="col col-ops">
<text class="op-link">绛夌骇浠诲姟</text>
<text class="op-link">等级任务</text>
<text class="op-divider">|</text>
<text class="op-link">缂栬緫</text>
<text class="op-link">编辑</text>
<text class="op-divider">|</text>
<text class="op-link">鍒犻櫎</text>
<text class="op-link">删除</text>
</view>
</view>
</view>
</view>
<view class="pagination">
<text class="page-info">鍏?{{ levelList.length }} 鏉?/text>
<text class="page-info">共 {{ levelList.length }} 条</text>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
const levelList = ref([
{ id: '1', name: '涓€绾у垎閿€鍛?, level: 1, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
{ id: '2', name: '浜岀骇鍒嗛攢鍛?, level: 2, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
{ id: '3', name: '涓夌骇鍒嗛攢鍛?, level: 3, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
{ id: '4', name: '鍥涚骇鍒嗛攢鍛?, level: 4, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
{ id: '5', name: '浜旂骇鍒嗛攢鍛?, level: 5, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true }
{ id: '1', name: '一级分销员', level: 1, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
])
function onSearch() {
uni.showToast({ title: '鏌ヨ涓?..', icon: 'none' })
}
function onAdd() {
uni.showToast({ title: '寮€濮嬫坊鍔?, icon: 'none' })
}
function onSearch() { uni.showToast({ title: '查询中...', icon: 'none' }) }
function onAdd() { uni.showToast({ title: '添加中...', 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;
}
.select-mock {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid #d9d9d9;
border-radius: 2px;
height: 32px;
width: 160px;
padding: 0 12px;
background: #fff;
text { font-size: 14px; color: #666; }
.arrow { font-size: 10px; color: #bfbfbf; }
}
.filter-input {
border: 1px solid #d9d9d9;
border-radius: 2px;
height: 32px;
width: 220px;
padding: 0 12px;
font-size: 14px;
}
.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: #1890ff;
border-color: #1890ff;
color: #fff;
}
.btn.small {
height: 32px;
padding: 0 12px;
}
.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: 50px; }
.col-img { width: 80px; justify-content: center; }
.col-name { width: 120px; }
.col-level { width: 80px; justify-content: center; }
.col-percent { width: 120px; justify-content: center; }
.col-stat { width: 100px; justify-content: center; }
.col-status { width: 100px; justify-content: center; }
.col-ops {
flex: 1;
justify-content: flex-end;
padding-right: 16px;
}
.table-img {
width: 32px;
height: 32px;
border-radius: 2px;
}
.op-link {
color: #1890ff;
cursor: pointer;
font-size: 14px;
}
.op-divider {
color: #e8e8e8;
margin: 0 8px;
}
.pagination {
padding: 16px 24px;
border-top: 1px solid #f0f0f0;
}
.page-info {
font-size: 14px;
color: #999;
}
</style>
.admin-page { padding: 0; }
.filter-card { background: #fff; padding: 24px; margin-bottom: 16px; border-radius: 4px; }
.filter-row { display: flex; flex-direction: row; align-items: center; gap: 24px; }
.label { font-size: 14px; color: #333; }
.select-mock { display: flex; flex-direction: row; align-items: center; justify-content: space-between; border: 1px solid #d9d9d9; border-radius: 2px; height: 32px; width: 160px; padding: 0 12px; background: #fff; text { font-size: 14px; color: #666; } .arrow { font-size: 10px; color: #bfbfbf; } }
.filter-input { border: 1px solid #d9d9d9; height: 32px; width: 220px; padding: 0 12px; font-size: 14px; }
.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; }
.btn.primary { background: #1890ff; border-color: #1890ff; color: #fff; }
.content-card { background: #fff; border-radius: 4px; }
.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: 50px; } .col-img { width: 80px; justify-content: center; } .col-name { width: 120px; } .col-level { width: 80px; justify-content: center; } .col-percent { width: 120px; justify-content: center; } .col-stat { width: 100px; justify-content: center; } .col-status { width: 100px; justify-content: center; } .col-ops { flex: 1; justify-content: flex-end; padding-right: 16px; }
.table-img { width: 32px; height: 32px; border-radius: 2px; }
.op-link { color: #1890ff; cursor: pointer; }
.op-divider { color: #e8e8e8; margin: 0 8px; }
.pagination { padding: 16px 24px; border-top: 1px solid #f0f0f0; }
.page-info { font-size: 14px; color: #999; }
</style>