angelo
/
web-zk-h5
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(arch): 架构样式调整

This commit is contained in:
woody 2025-09-28 17:21:23 +08:00
parent 28547d18d6
commit f95ccad164
5 changed files with 268 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/request.js
View File

@ -20,7 +20,7 @@ module.exports = vm => {
//#ifdef DEV_SERVER
console.log('DEV_SERVER')
config.baseURL = 'http://192.168.2.86:8080'
config.baseURL = 'http://192.168.2.105:8080/'
//#endif
//#ifdef QA_SERVER

2
pages.json
View File

@ -746,7 +746,7 @@
{
"path": "pages/architecture/resettleArchite/resettle2",
"style": {
"navigationBarTitleText": "方案二",
"navigationBarTitleText": "阶段列表",
"enablePullDownRefresh": false
}
},

2
pages/architecture/architecture.vue
View File

@ -30,7 +30,7 @@ export default {
isShow: false,
},
{
name: '方案二',
name: '阶段列表',
url: '../../static/images/my_icon14.png',
path: '/pages/architecture/resettleArchite/resettle2',
value: 'incomeDetail',

290
pages/architecture/resettleArchite/resettle2.vue
View File

@ -9,9 +9,25 @@
<u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
</view>
</view>
<view class="filter-btn" @click="showFilter = true">
<!-- <view class="filter-btn" @click="showFilter = true">
<u-icon name="list" size="28rpx" color="#005bac"></u-icon>
<text>筛选</text>
</view> -->
</view>
<!-- 状态筛选按钮组 -->
<view class="status-filter-bar">
<view class="filter-title">状态</view>
<view class="status-buttons">
<view
v-for="(item, index) in statusOptions[0]"
:key="index"
class="status-btn"
:class="{ active: selectedStatusValue === item.value }"
@click="onStatusButtonClick(item)"
>
<text>{{ item.label }}</text>
</view>
</view>
</view>
@ -29,86 +45,48 @@
<text class="member-code">{{
`${currentUser.memberCode}-${item.childNode}`
}}</text>
<view
class="status-badge"
:class="item.stageStatus === 0 ? 'completed' : 'pending'"
>
{{ item.stageStatusLabel }}
</view>
<!-- 点位展示区域 -->
<view class="points-container">
<!-- 第一层 (1-1, 1-2) -->
<view class="layer-wrapper">
<view class="points-row">
<view
v-for="pos in 2"
:key="`1-${pos}`"
class="point-slot"
:class="getPointClass(item[`pointMember1${pos}`])"
>
</view>
</view>
</view>
</view>
<view class="stage-info">
<text class="stage">{{ item.stageLabel }}</text>
<!-- <text class="date">{{ formatDate(item.stageDate) }}</text> -->
</view>
</view>
<!-- 点位展示区域 -->
<view class="points-container">
<!-- 第一层 (1-1, 1-2) -->
<view class="layer-wrapper" v-if="hasLayerPoints(item, 1)">
<view class="layer-title">第一层</view>
<view class="points-row">
<view
v-for="pos in 2"
:key="`1-${pos}`"
class="point-slot"
:class="getPointClass(item[`pointMember1${pos}`])"
@click="
handlePointClick(item, 1, pos, item[`pointMember1${pos}`])
"
>
<view class="point-content">
<text class="point-label">1-{{ pos }}</text>
<!-- 第二层 (2-1, 2-2, 2-3, 2-4) -->
<view class="layer-wrapper">
<view class="points-row">
<view
v-for="pos in 4"
:key="`2-${pos}`"
class="point-slot"
:class="getPointClass(item[`pointMember2${pos}`])"
>
</view>
</view>
</view>
<!-- 第三层 (3-1 到 3-8) -->
<view class="layer-wrapper">
<view class="points-row multi-row">
<view
v-for="pos in 8"
:key="`3-${pos}`"
class="point-slot small"
:class="getPointClass(item[`pointMember3${pos}`])"
>
</view>
</view>
</view>
</view>
<!-- 第二层 (2-1, 2-2, 2-3, 2-4) -->
<view class="layer-wrapper" v-if="hasLayerPoints(item, 2)">
<view class="layer-title">第二层</view>
<view class="points-row">
<view
v-for="pos in 4"
:key="`2-${pos}`"
class="point-slot"
:class="getPointClass(item[`pointMember2${pos}`])"
@click="
handlePointClick(item, 2, pos, item[`pointMember2${pos}`])
"
>
<view class="point-content">
<text class="point-label">2-{{ pos }}</text>
</view>
</view>
</view>
</view>
<!-- 第三层 (3-1 到 3-8) -->
<view class="layer-wrapper" v-if="hasLayerPoints(item, 3)">
<view class="layer-title">第三层</view>
<view class="points-row multi-row">
<view
v-for="pos in 8"
:key="`3-${pos}`"
class="point-slot small"
:class="getPointClass(item[`pointMember3${pos}`])"
@click="
handlePointClick(item, 3, pos, item[`pointMember3${pos}`])
"
>
<view class="point-content">
<text class="point-label">3-{{ pos }}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 其他信息 -->
<view class="item-footer">
<text class="point-type">{{ item.pointTypeLabel }}</text>
<text class="creation-time">创建时间：{{ item.creationTime }}</text>
</view>
</view>
</view>
@ -207,14 +185,6 @@
<text class="close-btn" @click="showFilter = false">返回</text>
</view>
<view class="filter-section">
<text class="section-title">状态</text>
<view class="select-box" @click="statusListVisible = true">
<text class="select-text">{{ statusName || '请选择状态' }}</text>
<u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
</view>
</view>
<view class="filter-actions">
<u-button type="info" @click="clearFilter">清空筛选条件</u-button>
<u-button type="primary" @click="confirmFilter">确定</u-button>
@ -273,6 +243,7 @@ export default {
],
statusOptions: [
[
{ value: '', label: '全部' },
{ value: 0, label: '已完成' },
{ value: 1, label: '未完成' },
],
@ -287,7 +258,8 @@ export default {
// 选中的值
stageName: '阶段一',
statusName: '',
statusName: '全部',
selectedStatusValue: '', // 当前选中的状态值
// 点位详情
selectedPoint: {},
@ -317,6 +289,10 @@ export default {
init() {
this.stageName = this.stageOptions[0][0].label
this.queryParams.stage = this.stageOptions[0][0].value
// 设置默认状态为"全部"
this.selectedStatusValue = this.statusOptions[0][0].value
this.statusName = this.statusOptions[0][0].label
this.queryParams.stageStatus = this.selectedStatusValue || null
this.loadPointList()
},
@ -479,9 +455,18 @@ export default {
onStatusConfirm(e) {
this.queryParams.stageStatus = e.value[0].value
this.statusName = e.value[0].label
this.selectedStatusValue = e.value[0].value
this.statusListVisible = false
},
// 状态按钮点击处理
onStatusButtonClick(item) {
this.selectedStatusValue = item.value
this.statusName = item.label
this.queryParams.stageStatus = item.value
this.refreshData()
},
// 应用筛选
applyFilter() {
this.refreshData()
@ -497,7 +482,8 @@ export default {
// 清空筛选
clearFilter() {
this.queryParams.stageStatus = null
this.statusName = ''
this.statusName = '全部'
this.selectedStatusValue = ''
this.refreshData()
this.showFilter = false
},
@ -572,16 +558,71 @@ export default {
}
}
/* 状态筛选按钮组 */
.status-filter-bar {
background: #fff;
padding: 20rpx 24rpx;
border-bottom: 2rpx solid #eee;
.filter-title {
font-size: 28rpx;
color: #333;
font-weight: bold;
margin-bottom: 20rpx;
}
.status-buttons {
display: flex;
gap: 16rpx;
.status-btn {
flex: 1;
background: #f5f6f8;
border-radius: 24rpx;
padding: 16rpx 24rpx;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
border: 2rpx solid transparent;
text {
font-size: 26rpx;
color: #666;
transition: color 0.2s ease;
}
&.active {
background: #e8f4fd;
border-color: #005bac;
text {
color: #005bac;
font-weight: bold;
}
}
&:active {
background-color: #e8e9eb;
}
&.active:active {
background-color: #d1e9f7;
}
}
}
}
/* 点位列表内容 */
.point-list-content {
padding: 20rpx 24rpx;
padding: 20rpx 16rpx;
}
.list-wrapper {
.point-item {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
padding: 20rpx 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
@ -589,19 +630,17 @@ export default {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10rpx;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #f5f6f8;
.member-info {
display: flex;
align-items: center;
width: 36%;
.member-code {
font-size: 32rpx;
font-size: 24rpx;
font-weight: bold;
color: #333;
margin-right: 20rpx;
flex-shrink: 0;
margin-right: 30rpx;
}
.status-badge {
@ -663,89 +702,40 @@ export default {
/* 点位展示区域 - 紧凑布局 */
.points-container {
display: flex;
gap: 20rpx;
.layer-wrapper {
margin-bottom: 16rpx;
.layer-title {
font-size: 24rpx;
font-weight: bold;
color: #005bac;
margin-bottom: 12rpx;
padding-left: 12rpx;
position: relative;
background: #f8fafe;
padding: 8rpx 12rpx;
border-radius: 8rpx;
display: inline-block;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4rpx;
height: 20rpx;
background: #005bac;
border-radius: 2rpx;
}
}
.points-row {
display: flex;
flex-wrap: wrap;
gap: 8rpx;
&.multi-row {
.point-slot {
width: calc((100% - 24rpx) / 4);
}
}
gap: 4rpx;
.point-slot {
flex: 1;
min-height: 70rpx;
border-radius: 12rpx;
width: 26rpx !important;
height: 26rpx !important;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.2s ease;
&.small {
min-height: 60rpx;
}
&.occupied {
background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
color: #fff;
box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.25);
&:active {
transform: scale(0.95);
}
}
&.empty {
background: #fafbfc;
border: 1rpx dashed #d9d9d9;
color: #999;
border: 1rpx solid #000;
color: #000;
&:active {
background: #f0f0f0;
}
}
.point-content {
display: flex;
flex-direction: column;
align-items: center;
.point-label {
font-size: 20rpx;
font-weight: bold;
}
}
}
}
}

210
pages/mine/index.vue
View File

@ -18,23 +18,22 @@
<view class="user-details">
<view class="user-name-and-level">
<text class="user-name">{{ userInfo.memberCode }}</text>
<view class="svip-badge">
<text class="svip-text">{{ userInfo.pkGradeVal || '-' }}</text>
<view
v-show="userInfo.pkAwardsVal !== '无' && userInfo.pkAwardsVal"
class="svip-badge"
>
<text class="svip-text">{{ userInfo.pkAwardsVal }}</text>
</view>
</view>
<view class="awards-container">
<view style="display: flex; gap: 10rpx">
<view class="award-tag">
<!-- <u-icon name="star-fill" color="#FAD65A" size="14"></u-icon> -->
<text class="award-label">荣誉奖衔:</text>
<text class="award-label">个人业绩:</text>
<text class="award-value">{{
userInfo.pkAwardsVal || '无'
personalPointInfo.repPvBalance || 0
}}</text>
</view>
<view v-if="userInfo.pkRangeAwardsVal" class="award-tag">
<text class="award-label">分红奖衔:</text>
<text class="award-value">{{ userInfo.pkRangeAwardsVal }}</text>
</view>
</view>
</view>
</view>
@ -46,32 +45,6 @@
<u-icon color="#ffffff" size="22" name="setting-fill"></u-icon>
</view>
</view>
<!-- 会员点位信息展示区域 -->
<view class="member-point-info">
<view class="point-info-grid">
<view class="point-info-item">
<view class="point-info-value">{{
personalPointInfo.pointCount || 0
}}</view>
<view class="point-info-label">子点位总数</view>
</view>
<view class="point-info-divider"></view>
<view class="point-info-item">
<view class="point-info-value">{{
personalPointInfo.waitPointCount || 0
}}</view>
<view class="point-info-label">待激活点位</view>
</view>
<view class="point-info-divider"></view>
<view class="point-info-item">
<view class="point-info-value">{{
personalPointInfo.repPvBalance || 0
}}</view>
<view class="point-info-label">复购业绩余额</view>
</view>
</view>
</view>
<view class="my_order">
<view class="my_title">
<text class="thetitle">{{ '市场动态' }}</text>
@ -109,6 +82,62 @@
</view>
</view>
</view>
<view class="my_order">
<view class="my_title">
<text class="thetitle">阶段列表</text>
<view
class="more-btn"
@click="goTo('/pages/architecture/resettleArchite/resettle2')"
>
<span>更多</span>
<u-icon name="arrow-right" color="#005bac" size="12"></u-icon>
</view>
</view>
<view class="market-stats-container">
<view class="stat-block secondary">
<view class="stat-content">
<view class="stat-item">
<text class="stat-label">一阶</text>
<view class="stat-value">
<text class="stat-value__integer">{{
personalPointInfo.firstOrderQuantity
}}</text>
</view>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<view class="stat-item">
<text class="stat-label">二阶</text>
<view class="stat-value">
<text class="stat-value__integer">{{
personalPointInfo.secondOrderQuantity
}}</text>
</view>
</view>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-label">三阶</text>
<view class="stat-value">
<text class="stat-value__integer">{{
personalPointInfo.threeOrderQuantity
}}</text>
</view>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-label">赠点</text>
<view class="stat-value">
<text class="stat-value__integer">{{
personalPointInfo.waitPointCount
}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="my_order">
<view class="my_title">
<text class="thetitle">{{ '我的订单' }}</text>
@ -291,13 +320,13 @@ export default {
menuKey: 'bankInfo',
ifshow: true,
},
{
url: '/pages/architecture/architecture',
name: '架构管理',
imgurl: '../../static/images/my_icon14.png',
menuKey: 'recommend',
ifshow: false,
},
// {
// url: '/pages/architecture/architecture',
// name: '阶段列表',
// imgurl: '../../static/images/my_icon14.png',
// menuKey: 'recommend',
// ifshow: false,
// },
],
drShow: false,
actMenu: false,
@ -1177,6 +1206,9 @@ export default {
.stat-block.secondary {
background: linear-gradient(135deg, #4682b4, #87ceeb);
box-shadow: 0 6rpx 12rpx rgba(70, 130, 180, 0.3);
.stat-label {
margin-bottom: 6rpx;
}
}
.stat-content {
@ -1255,55 +1287,63 @@ export default {
.region-select-action {
padding: 30rpx 20rpx;
}
.more-btn {
font-size: 24rpx;
color: #005bac;
text-align: right;
margin-right: 20rpx;
display: flex;
align-items: center;
}
/* 会员点位信息样式 */
.member-point-info {
background-color: #ffffff;
box-shadow: 0px 4px 20px 0px rgba(204, 204, 204, 0.4);
border-radius: 20rpx;
padding: 0 20rpx;
margin-top: 20rpx;
}
// .member-point-info {
// background-color: #ffffff;
// box-shadow: 0px 4px 20px 0px rgba(204, 204, 204, 0.4);
// border-radius: 20rpx;
// padding: 0 20rpx;
// margin-top: 20rpx;
// }
.point-info-grid {
display: flex;
align-items: center;
justify-content: space-around;
padding: 30rpx 0;
}
// .point-info-grid {
// display: flex;
// align-items: center;
// justify-content: space-around;
// padding: 30rpx 0;
// }
.point-info-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
}
// .point-info-item {
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
// flex: 1;
// text-align: center;
// }
.point-info-value {
font-size: 40rpx;
font-weight: 600;
color: #005bac;
line-height: 1.2;
}
// .point-info-value {
// font-size: 40rpx;
// font-weight: 600;
// color: #005bac;
// line-height: 1.2;
// }
.point-info-label {
font-size: 24rpx;
color: #666666;
font-weight: 500;
margin-top: 8rpx;
}
// .point-info-label {
// font-size: 24rpx;
// color: #666666;
// font-weight: 500;
// margin-top: 8rpx;
// }
.point-info-divider {
width: 2rpx;
height: 60rpx;
background: linear-gradient(
to bottom,
rgba(0, 91, 172, 0.1),
rgba(0, 91, 172, 0.3),
rgba(0, 91, 172, 0.1)
);
margin: 0 20rpx;
}
// .point-info-divider {
// width: 2rpx;
// height: 60rpx;
// background: linear-gradient(
// to bottom,
// rgba(0, 91, 172, 0.1),
// rgba(0, 91, 172, 0.3),
// rgba(0, 91, 172, 0.1)
// );
// margin: 0 20rpx;
// }
</style>