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 //#ifdef DEV_SERVER
console.log('DEV_SERVER') console.log('DEV_SERVER')
config.baseURL = 'http://192.168.2.86:8080' config.baseURL = 'http://192.168.2.105:8080/'
//#endif //#endif
//#ifdef QA_SERVER //#ifdef QA_SERVER

2
pages.json
View File

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

2
pages/architecture/architecture.vue
View File

@ -30,7 +30,7 @@ export default {
isShow: false, isShow: false,
}, },
{ {
name: '方案二', name: '阶段列表',
url: '../../static/images/my_icon14.png', url: '../../static/images/my_icon14.png',
path: '/pages/architecture/resettleArchite/resettle2', path: '/pages/architecture/resettleArchite/resettle2',
value: 'incomeDetail', 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> <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
</view> </view>
</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> <u-icon name="list" size="28rpx" color="#005bac"></u-icon>
<text>筛选</text> <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>
</view> </view>
@ -29,86 +45,48 @@
<text class="member-code">{{ <text class="member-code">{{
`${currentUser.memberCode}-${item.childNode}` `${currentUser.memberCode}-${item.childNode}`
}}</text> }}</text>
<view </view>
class="status-badge" <!-- 点位展示区域 -->
:class="item.stageStatus === 0 ? 'completed' : 'pending'" <view class="points-container">
> <!-- 第一层 (1-1, 1-2) -->
{{ item.stageStatusLabel }} <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>
<view class="stage-info">
<text class="stage">{{ item.stageLabel }}</text>
<!-- <text class="date">{{ formatDate(item.stageDate) }}</text> -->
</view>
</view>
<!-- 点位展示区域 --> <!-- 第二层 (2-1, 2-2, 2-3, 2-4) -->
<view class="points-container"> <view class="layer-wrapper">
<!-- 第一层 (1-1, 1-2) --> <view class="points-row">
<view class="layer-wrapper" v-if="hasLayerPoints(item, 1)"> <view
<view class="layer-title">第一层</view> v-for="pos in 4"
<view class="points-row"> :key="`2-${pos}`"
<view class="point-slot"
v-for="pos in 2" :class="getPointClass(item[`pointMember2${pos}`])"
:key="`1-${pos}`" >
class="point-slot" </view>
:class="getPointClass(item[`pointMember1${pos}`])" </view>
@click=" </view>
handlePointClick(item, 1, pos, item[`pointMember1${pos}`])
" <!-- 第三层 (3-1 到 3-8) -->
> <view class="layer-wrapper">
<view class="point-content"> <view class="points-row multi-row">
<text class="point-label">1-{{ pos }}</text> <view
v-for="pos in 8"
:key="`3-${pos}`"
class="point-slot small"
:class="getPointClass(item[`pointMember3${pos}`])"
>
</view> </view>
</view> </view>
</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> </view>
</view> </view>
@ -207,14 +185,6 @@
<text class="close-btn" @click="showFilter = false">返回</text> <text class="close-btn" @click="showFilter = false">返回</text>
</view> </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"> <view class="filter-actions">
<u-button type="info" @click="clearFilter">清空筛选条件</u-button> <u-button type="info" @click="clearFilter">清空筛选条件</u-button>
<u-button type="primary" @click="confirmFilter">确定</u-button> <u-button type="primary" @click="confirmFilter">确定</u-button>
@ -273,6 +243,7 @@ export default {
], ],
statusOptions: [ statusOptions: [
[ [
{ value: '', label: '全部' },
{ value: 0, label: '已完成' }, { value: 0, label: '已完成' },
{ value: 1, label: '未完成' }, { value: 1, label: '未完成' },
], ],
@ -287,7 +258,8 @@ export default {
// 选中的值 // 选中的值
stageName: '阶段一', stageName: '阶段一',
statusName: '', statusName: '全部',
selectedStatusValue: '', // 当前选中的状态值
// 点位详情 // 点位详情
selectedPoint: {}, selectedPoint: {},
@ -317,6 +289,10 @@ export default {
init() { init() {
this.stageName = this.stageOptions[0][0].label this.stageName = this.stageOptions[0][0].label
this.queryParams.stage = this.stageOptions[0][0].value 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() this.loadPointList()
}, },
@ -479,9 +455,18 @@ export default {
onStatusConfirm(e) { onStatusConfirm(e) {
this.queryParams.stageStatus = e.value[0].value this.queryParams.stageStatus = e.value[0].value
this.statusName = e.value[0].label this.statusName = e.value[0].label
this.selectedStatusValue = e.value[0].value
this.statusListVisible = false this.statusListVisible = false
}, },
// 状态按钮点击处理
onStatusButtonClick(item) {
this.selectedStatusValue = item.value
this.statusName = item.label
this.queryParams.stageStatus = item.value
this.refreshData()
},
// 应用筛选 // 应用筛选
applyFilter() { applyFilter() {
this.refreshData() this.refreshData()
@ -497,7 +482,8 @@ export default {
// 清空筛选 // 清空筛选
clearFilter() { clearFilter() {
this.queryParams.stageStatus = null this.queryParams.stageStatus = null
this.statusName = '' this.statusName = '全部'
this.selectedStatusValue = ''
this.refreshData() this.refreshData()
this.showFilter = false 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 { .point-list-content {
padding: 20rpx 24rpx; padding: 20rpx 16rpx;
} }
.list-wrapper { .list-wrapper {
.point-item { .point-item {
background: #fff; background: #fff;
border-radius: 20rpx; border-radius: 20rpx;
padding: 30rpx; padding: 20rpx 20rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
@ -589,19 +630,17 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
margin-bottom: 10rpx;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #f5f6f8;
.member-info { .member-info {
display: flex; display: flex;
align-items: center; align-items: center;
width: 36%;
.member-code { .member-code {
font-size: 32rpx; font-size: 24rpx;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
margin-right: 20rpx; flex-shrink: 0;
margin-right: 30rpx;
} }
.status-badge { .status-badge {
@ -663,89 +702,40 @@ export default {
/* 点位展示区域 - 紧凑布局 */ /* 点位展示区域 - 紧凑布局 */
.points-container { .points-container {
display: flex;
gap: 20rpx;
.layer-wrapper { .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 { .points-row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8rpx; gap: 4rpx;
&.multi-row {
.point-slot {
width: calc((100% - 24rpx) / 4);
}
}
.point-slot { .point-slot {
flex: 1; flex: 1;
min-height: 70rpx; width: 26rpx !important;
border-radius: 12rpx; height: 26rpx !important;
border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
transition: all 0.2s ease; transition: all 0.2s ease;
&.small {
min-height: 60rpx;
}
&.occupied { &.occupied {
background: linear-gradient(135deg, #005bac 0%, #0066cc 100%); background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
color: #fff; color: #fff;
box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.25); box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.25);
&:active {
transform: scale(0.95);
}
} }
&.empty { &.empty {
background: #fafbfc; background: #fafbfc;
border: 1rpx dashed #d9d9d9; border: 1rpx solid #000;
color: #999; color: #000;
&:active { &:active {
background: #f0f0f0; 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-details">
<view class="user-name-and-level"> <view class="user-name-and-level">
<text class="user-name">{{ userInfo.memberCode }}</text> <text class="user-name">{{ userInfo.memberCode }}</text>
<view class="svip-badge"> <view
<text class="svip-text">{{ userInfo.pkGradeVal || '-' }}</text> v-show="userInfo.pkAwardsVal !== '无' && userInfo.pkAwardsVal"
class="svip-badge"
>
<text class="svip-text">{{ userInfo.pkAwardsVal }}</text>
</view> </view>
</view> </view>
<view class="awards-container"> <view class="awards-container">
<view style="display: flex; gap: 10rpx"> <view style="display: flex; gap: 10rpx">
<view class="award-tag"> <view class="award-tag">
<!-- <u-icon name="star-fill" color="#FAD65A" size="14"></u-icon> --> <!-- <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">{{ <text class="award-value">{{
userInfo.pkAwardsVal || '无' personalPointInfo.repPvBalance || 0
}}</text> }}</text>
</view> </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> </view>
</view> </view>
@ -46,32 +45,6 @@
<u-icon color="#ffffff" size="22" name="setting-fill"></u-icon> <u-icon color="#ffffff" size="22" name="setting-fill"></u-icon>
</view> </view>
</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_order">
<view class="my_title"> <view class="my_title">
<text class="thetitle">{{ '市场动态' }}</text> <text class="thetitle">{{ '市场动态' }}</text>
@ -109,6 +82,62 @@
</view> </view>
</view> </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_order">
<view class="my_title"> <view class="my_title">
<text class="thetitle">{{ '我的订单' }}</text> <text class="thetitle">{{ '我的订单' }}</text>
@ -291,13 +320,13 @@ export default {
menuKey: 'bankInfo', menuKey: 'bankInfo',
ifshow: true, ifshow: true,
}, },
{ // {
url: '/pages/architecture/architecture', // url: '/pages/architecture/architecture',
name: '架构管理', // name: '阶段列表',
imgurl: '../../static/images/my_icon14.png', // imgurl: '../../static/images/my_icon14.png',
menuKey: 'recommend', // menuKey: 'recommend',
ifshow: false, // ifshow: false,
}, // },
], ],
drShow: false, drShow: false,
actMenu: false, actMenu: false,
@ -1177,6 +1206,9 @@ export default {
.stat-block.secondary { .stat-block.secondary {
background: linear-gradient(135deg, #4682b4, #87ceeb); background: linear-gradient(135deg, #4682b4, #87ceeb);
box-shadow: 0 6rpx 12rpx rgba(70, 130, 180, 0.3); box-shadow: 0 6rpx 12rpx rgba(70, 130, 180, 0.3);
.stat-label {
margin-bottom: 6rpx;
}
} }
.stat-content { .stat-content {
@ -1255,55 +1287,63 @@ export default {
.region-select-action { .region-select-action {
padding: 30rpx 20rpx; padding: 30rpx 20rpx;
} }
.more-btn {
font-size: 24rpx;
color: #005bac;
text-align: right;
margin-right: 20rpx;
display: flex;
align-items: center;
}
/* 会员点位信息样式 */ /* 会员点位信息样式 */
.member-point-info { // .member-point-info {
background-color: #ffffff; // background-color: #ffffff;
box-shadow: 0px 4px 20px 0px rgba(204, 204, 204, 0.4); // box-shadow: 0px 4px 20px 0px rgba(204, 204, 204, 0.4);
border-radius: 20rpx; // border-radius: 20rpx;
padding: 0 20rpx; // padding: 0 20rpx;
margin-top: 20rpx; // margin-top: 20rpx;
} // }
.point-info-grid { // .point-info-grid {
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: space-around; // justify-content: space-around;
padding: 30rpx 0; // padding: 30rpx 0;
} // }
.point-info-item { // .point-info-item {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
flex: 1; // flex: 1;
text-align: center; // text-align: center;
} // }
.point-info-value { // .point-info-value {
font-size: 40rpx; // font-size: 40rpx;
font-weight: 600; // font-weight: 600;
color: #005bac; // color: #005bac;
line-height: 1.2; // line-height: 1.2;
} // }
.point-info-label { // .point-info-label {
font-size: 24rpx; // font-size: 24rpx;
color: #666666; // color: #666666;
font-weight: 500; // font-weight: 500;
margin-top: 8rpx; // margin-top: 8rpx;
} // }
.point-info-divider { // .point-info-divider {
width: 2rpx; // width: 2rpx;
height: 60rpx; // height: 60rpx;
background: linear-gradient( // background: linear-gradient(
to bottom, // to bottom,
rgba(0, 91, 172, 0.1), // rgba(0, 91, 172, 0.1),
rgba(0, 91, 172, 0.3), // rgba(0, 91, 172, 0.3),
rgba(0, 91, 172, 0.1) // rgba(0, 91, 172, 0.1)
); // );
margin: 0 20rpx; // margin: 0 20rpx;
} // }
</style> </style>