会员等级

hdApp/src/admin/member/level.vue

@@ -13,10 +13,13 @@
 				<t-table :headerBackgroundColor="'#f0f9f0'">
 					<view>
 						<t-tr header>
-							<t-th>
-								<view class="table-header">会员等级</view>
+							<t-th width="20%">
+								<view class="table-header">图标</view>
 							</t-th>
-							<t-th>
+							<t-th width="30%">
+								<view class="table-header">等级</view>
+							</t-th>
+							<t-th width="50%">
 								<view class="table-header">消费金额 (元)</view>
 							</t-th>
 						</t-tr>
@@ -24,10 +27,19 @@
 					<view>
 						<view v-for="(item, inIndex) in map" :key="inIndex">
 							<t-tr>
-								<t-td align="center" color="info">
+								<t-td align="center" color="info" width="20%">
+									<view class="member-icon">
+										<image v-if="item.member == 1" class="member-badge-icon" style="width:54upx;height:54upx;" src="@/static/member-icons/member-1.svg" mode="aspectFit"></image>
+										<image v-else-if="item.member == 2" class="member-badge-icon" style="width:52upx;height:52upx;" src="@/static/member-icons/member-2.svg" mode="aspectFit"></image>
+										<image v-else-if="item.member == 3" class="member-badge-icon" style="width:51upx;height:51upx;" src="@/static/member-icons/member-3.svg" mode="aspectFit"></image>
+										<image v-else-if="item.member == 4" class="member-badge-icon" style="width:57upx;height:57upx;" src="@/static/member-icons/member-4.svg" mode="aspectFit"></image>
+										<image v-else-if="item.member == 5" class="member-badge-icon" style="width:54upx;height:54upx;" src="@/static/member-icons/member-5.svg" mode="aspectFit"></image>
+									</view>
+								</t-td>
+								<t-td align="center" color="info" width="30%">
 									<view class="level-name">{{ item.name }}</view>
 								</t-td>
-								<t-td align="center" color="info">
+								<t-td align="center" color="info" width="50%">
 									<view class="input-wrapper">
 										<input
 											v-model="item.amount"
@@ -82,6 +94,12 @@ export default {
 			getLevelInitData().then(res => {
 				if (res.code === 1) {
 					this.map = res.data.member || [];
+					// 为每个等级添加member字段用于显示对应图标
+					this.map.forEach((item, index) => {
+						if (!item.member) {
+							item.member = index + 1; // 等级1-5对应member值1-5
+						}
+					});
 					this.reduceDay = res.data.reduceDay || 30;
 				}
 			}).catch(err => {
@@ -233,7 +251,7 @@ export default {
 		}
 		
 		.t-th, .t-td {
-			padding: 24rpx 20rpx;
+			padding: 24rpx 12rpx;
 			border-right: 1rpx solid #e8f5e8;
 			
 			&:last-child {
@@ -241,6 +259,14 @@ export default {
 			}
 		}
 		
+		.t-th:first-child, .t-td:first-child {
+			padding: 24rpx 8rpx; /* 图标列更紧凑 */
+		}
+		
+		.t-th:last-child, .t-td:last-child {
+			padding: 24rpx 16rpx; /* 消费金额列稍微宽松一些 */
+		}
+		
 		.t-th {
 			background: #f0f9f0 !important;
 		}
@@ -253,6 +279,18 @@ export default {
 	font-weight: 600;
 }
 
+.member-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.member-badge-icon {
+	flex-shrink: 0;
+	filter: drop-shadow(0 2rpx 6rpx rgba(0,0,0,0.3));
+}
+
 .level-name {
 	color: #fff;
 	font-weight: 600;