xkyy/xk-client-wx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 首页UI重构设计

Browse Source
This commit is contained in:
年糕崽崽
2025-12-31 10:58:22 +08:00
parent a3e94a8fc5
commit 43a87ccc87
2 changed files with 57 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
pages/home/home.vue
View File

@@ -472,14 +472,25 @@ export default {
store_id: uni.getStorageSync('store_id') || '11001',
}).then((res) => {
if (res.data.code == 0 || res.data.errcode == 0) {
this.qualifications = res.data.data || res.data.result || [];
const result = res.data.data || res.data.result || {};
// 适配新的返回格式（包含 store_name 和 list）
if (result.store_name !== undefined) {
this.qualifications = result.list || [];
} else {
// 兼容旧格式（直接返回数组）
this.qualifications = Array.isArray(result) ? result : [];
}
}
})
},
previewQualification(item) {
if (item.image) {
// 获取所有有图片的资质，支持滑动预览
const allImages = this.qualifications
.filter(q => q.image)
.map(q => q.image);
if (allImages.length > 0 && item.image) {
uni.previewImage({
urls: [item.image],
urls: allImages,
current: item.image
});
}
@@ -631,7 +642,7 @@ $card-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.04);
&::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(90deg, #FDFEFF 0%, rgba(255,255,255,0) 100%); z-index: 1; }
.nav-content { position: relative; z-index: 2; .nav-title { font-size: 36rpx; font-weight: 800; margin-bottom: 8rpx; } .nav-desc { font-size: 22rpx; color: #888; } }
.nav-icon-img { position: absolute; right: 0; bottom: 0; width: 128rpx; height: 128rpx; z-index: 1; }
.nav-icon-img-64 { position: absolute; right: 30rpx; top: 30rpx; width: 64rpx; height: 64rpx; z-index: 1; }
.nav-icon-img-64 { position: absolute; right: 30rpx; top: 30rpx; width: 84rpx; height: 84rpx; z-index: 1; }
}
}
@@ -723,11 +734,27 @@ $card-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.04);
.qualifications-section {
padding: 0 32rpx 40rpx;
.qualifications-row {
display: flex; gap: 20rpx;
display: flex;
flex-wrap: wrap;
gap: 20rpx;
.qualification-card {
background: #fff; padding: 20rpx; border-radius: 16rpx; width: 160rpx; text-align: center; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03); display: flex; flex-direction: column; align-items: center;
.qual-icon { width: 48rpx; height: 48rpx; margin-bottom: 8rpx; }
.qual-name { font-size: 20rpx; color: #666; line-height: 1.2; }
background: #fff;
padding: 24rpx;
border-radius: 16rpx;
width: calc((100% - 20rpx) / 2); /* 一行两个 */
text-align: center;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
display: flex;
flex-direction: column;
align-items: center;
.qual-icon {
width: 200rpx;
height: 140rpx;
margin-bottom: 16rpx;
border-radius: 8rpx;
background: #f8f8f8;
}
.qual-name { font-size: 24rpx; color: #333; line-height: 1.4; font-weight: 500; }
}
}
}

30
pages/index/platform-info.vue
View File

@@ -2,9 +2,9 @@
<view class="content safe-area-inset-bottom">
<!-- 资质证明 -->
<view class="section">
<view class="section-title">{{ isPlatform ? '平台资质证明' : '店铺资质证明' }}</view>
<view class="section-title">{{ storeName || (isPlatform ? '萧康云医' : '店铺') }} - 资质证明</view>
<view class="qualifications-list">
<view class="qualification-item" v-for="(item, index) in qualifications" :key="index" @click="previewImage(item.image)">
<view class="qualification-item" v-for="(item, index) in qualifications" :key="index" @click="previewImage(index)">
<view class="qualification-content">
<text class="qualification-name">{{ item.name }}</text>
<image :src="item.image || '/static/mine/avatar_1.png'" mode="aspectFit" class="qualification-img"></image>
@@ -61,6 +61,7 @@ export default {
return {
storeId: '', // 店铺ID，0表示平台
isPlatform: false, // 是否为平台资质
storeName: '', // 店铺名称
qualifications: [],
contactInfo: {
phone: '',
@@ -98,7 +99,15 @@ export default {
store_id: this.storeId,
}).then((res) => {
if (res.data.code == 0 || res.data.errcode == 0) {
this.qualifications = res.data.data || res.data.result || [];
const result = res.data.data || res.data.result || {};
// 适配新的返回格式（包含 store_name 和 list）
if (result.store_name !== undefined) {
this.storeName = result.store_name || '';
this.qualifications = result.list || [];
} else {
// 兼容旧格式（直接返回数组）
this.qualifications = Array.isArray(result) ? result : [];
}
}
}).catch(() => {
// 如果接口不存在，使用默认数据
@@ -129,12 +138,17 @@ export default {
// 接口不存在时使用空数据
})
},
// 预览资质图片
previewImage(image) {
if (image) {
// 预览资质图片，支持滑动查看所有资质
previewImage(index) {
// 获取所有有图片的资质
const allImages = this.qualifications
.filter(q => q.image)
.map(q => q.image);
if (allImages.length > 0) {
const currentImage = this.qualifications[index]?.image;
uni.previewImage({
urls: [image],
current: image
urls: allImages,
current: currentImage || allImages[0]
});
}
},