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

consumer模块完成度95%，实现数据库多端注册登录，优化安卓端小程序bug

Browse Source
This commit is contained in:
cyh666666
2026-03-10 17:08:20 +08:00
parent 2262d1bfd9
commit 5517c93666
1010 changed files with 1688 additions and 4919 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
pages/mall/consumer/shop-detail.uvue
View File

@@ -207,6 +207,10 @@ const loadShopProducts = async (id: string) => {
const rawList = res.data
if (rawList != null && Array.isArray(rawList) && rawList.length > 0) {
// 过滤掉已经在列表中的重复商品 (防止分页计算错误导致的重复)
const newItems: ProductType[] = []
const existingIds = products.value.map(p => p.id)
const list = rawList.map((item: any): ProductType => {
// 解析图片数组
let images: string[] = []
@@ -267,11 +271,20 @@ const loadShopProducts = async (id: string) => {
} as ProductType
})
// 只有在 currentPage > 1 时才需要过滤，currentPage = 1 时直接替换
if (currentPage.value === 1) {
products.value = list
} else {
products.value.push(...list)
for (let i = 0; i < list.length; i++) {
if (existingIds.indexOf(list[i].id) === -1) {
newItems.push(list[i])
}
}
if (newItems.length > 0) {
products.value.push(...newItems)
}
}
currentPage.value++
hasMore.value = list.length >= pageSize.value
} else {
@@ -514,11 +527,15 @@ const goToProduct = (id: string) => {
background-color: #fff;
padding-bottom: 20px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
align-items: center; /* 使 PC 端内容居中 */
}
.shop-banner {
width: 100%;
height: 150px;
max-width: 1200px;
height: 200px; /* PC 端稍微加高一点 */
background-color: #eee;
}
@@ -527,32 +544,35 @@ const goToProduct = (id: string) => {
flex-direction: row;
align-items: center;
padding: 0 15px;
margin-top: -30px; /* Logo 向上重叠 banner */
margin-top: -30px;
position: relative;
z-index: 1;
width: 100%;
max-width: 1200px;
box-sizing: border-box;
}
.shop-logo {
width: 60px;
height: 60px;
width: 80px; /* PC 端稍微加大 */
height: 80px;
border-radius: 8px;
border: 2px solid #fff;
background-color: #fff;
margin-right: 12px;
margin-right: 15px;
}
.shop-basic-info {
flex: 1;
display: flex;
flex-direction: column;
padding-top: 30px; /* 给 logo 上浮留空间 */
padding-top: 30px;
}
.shop-name {
font-size: 18px;
font-size: 22px; /* PC 端字体加大 */
font-weight: bold;
color: #333;
margin-bottom: 4px;
margin-bottom: 8px;
}
.shop-stats {
@@ -561,11 +581,11 @@ const goToProduct = (id: string) => {
}
.stat-item {
font-size: 12px;
font-size: 14px;
color: #666;
margin-right: 12px;
margin-right: 15px;
background-color: #f0f0f0;
padding: 2px 6px;
padding: 4px 10px;
border-radius: 4px;
}
@@ -577,14 +597,14 @@ const goToProduct = (id: string) => {
}
.action-btn {
/* Common Button Styles */
border-radius: 20px;
margin-left: 10px;
margin-left: 15px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 6px 16px;
padding: 8px 24px; /* PC 端按钮加大 */
cursor: pointer;
}
.action-text {
@@ -614,39 +634,45 @@ const goToProduct = (id: string) => {
}
.shop-desc {
color: #666;
padding: 10px 15px 0;
line-height: 1.4;
padding: 15px 15px 0;
line-height: 1.6;
width: 100%;
max-width: 1200px;
box-sizing: border-box;
}
/* Coupon Styles */
.shop-coupons {
margin-top: 15px;
margin-top: 20px;
padding: 0 15px;
width: 100%;
max-width: 1200px;
box-sizing: border-box;
}
.coupon-scroll {
width: 100%;
white-space: nowrap;
flex-direction: row; /* Ensure flex direction for scroll view */
flex-direction: row;
}
.coupon-wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap; /* Prevent wrapping */
flex-wrap: nowrap;
align-items: center;
}
.coupon-card {
display: flex; /* Changed from inline-flex to flex */
display: flex;
flex-direction: row;
background-color: #fff5f5;
border: 1px solid #ffccc7;
border-radius: 4px;
margin-right: 10px;
width: 150px; /* Slight increase */
height: 64px;
margin-right: 15px;
width: 180px; /* PC 端优惠券加宽 */
height: 70px;
overflow: hidden;
flex-shrink: 0; /* Critical for horizontal scroll */
flex-shrink: 0;
cursor: pointer;
}
.coupon-left {
flex: 1;
@@ -655,44 +681,47 @@ const goToProduct = (id: string) => {
justify-content: center;
align-items: center;
border-right: 1px dashed #ffccc7;
padding: 0 5px;
padding: 0 10px;
}
.coupon-amount {
color: #ff5000;
font-weight: bold;
font-size: 18px;
font-size: 20px;
}
.coupon-cond {
color: #999;
font-size: 10px;
font-size: 12px;
}
.coupon-right {
width: 40px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ff5000;
flex-direction: column;
}
.coupon-btn-label {
color: #fff;
font-size: 12px;
width: 14px; /* Force vertical flow by width constraint if needed, or just let it stack naturally if char by char */
text-align: center;
line-height: 1.2;
}
flex-direction: column;
}
.coupon-btn-label {
color: #fff;
font-size: 14px;
text-align: center;
line-height: 1.2;
}
.product-section {
padding: 15px;
padding: 20px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
.section-title {
font-size: 16px;
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
padding-left: 8px;
border-left: 4px solid #ff5000;
margin-bottom: 20px;
padding-left: 10px;
border-left: 5px solid #ff5000;
}
.product-grid {
@@ -700,7 +729,6 @@ const goToProduct = (id: string) => {
flex-direction: row;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
}
.product-item {
@@ -709,27 +737,38 @@ const goToProduct = (id: string) => {
background: #fff;
border-radius: 8px;
overflow: hidden;
width: 48%;
margin-bottom: 12px;
width: calc(50% - 10px); /* 默认两列 */
margin-right: 20px;
margin-bottom: 20px;
cursor: pointer;
transition: transform 0.2s;
}
.product-item:nth-child(2n) {
margin-right: 0;
}
.product-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.product-image {
width: 100%;
height: 170px;
border-radius: 8px;
margin-bottom: 8px;
height: 200px;
background: #f5f5f5;
object-fit: cover;
}
.product-name {
font-size: 13px;
font-size: 14px;
color: #333;
margin-bottom: 5px;
margin: 10px 0;
line-height: 1.4;
height: 36px;
height: 40px;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 8px;
padding: 0 10px;
}
.product-bottom {
@@ -737,20 +776,20 @@ const goToProduct = (id: string) => {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 8px 8px;
padding: 0 10px 12px;
}
.product-price {
font-size: 15px;
font-size: 18px;
color: #ff5000;
font-weight: bold;
}
.product-add-btn {
width: 24px;
height: 24px;
width: 28px;
height: 28px;
background-color: #ff5000;
border-radius: 12px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
@@ -758,27 +797,49 @@ const goToProduct = (id: string) => {
.add-icon {
color: #fff;
font-size: 16px;
font-size: 18px;
font-weight: bold;
}
/* PC/Tablet Responsive */
@media (min-width: 768px) {
.product-item {
width: 32% !important;
width: calc(33.33% - 14px) !important;
}
.product-item:nth-child(2n) {
margin-right: 20px !important;
}
.product-item:nth-child(3n) {
margin-right: 0 !important;
}
}
@media (min-width: 1024px) {
.product-item {
width: 16% !important; /* PC: 6 items */
width: calc(20% - 16px) !important; /* 五列 */
}
.product-item:nth-child(3n) {
margin-right: 20px !important;
}
.product-item:nth-child(5n) {
margin-right: 0 !important;
}
.shop-info-card, .shop-header, .product-section {
/* Limit max width on PC to avoid overly stretched content */
max-width: 1200px;
margin-left: auto;
margin-right: auto;
.shop-banner {
height: 300px; /* 大屏加宽 Banner */
border-radius: 0 0 20px 20px;
}
}
@media (min-width: 1440px) {
.product-item {
width: calc(16.66% - 17px) !important; /* 六列 */
}
.product-item:nth-child(5n) {
margin-right: 20px !important;
}
.product-item:nth-child(6n) {
margin-right: 0 !important;
}
}
</style>