fix: 修复product/list.vue模板语法错误
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -18,20 +18,10 @@
|
|||||||
<view class="content-wrapper">
|
<view class="content-wrapper">
|
||||||
<!-- 左侧分类 -->
|
<!-- 左侧分类 -->
|
||||||
<scroll-view scroll-y class="category-sidebar">
|
<scroll-view scroll-y class="category-sidebar">
|
||||||
<view
|
<view class="category-item" :class="{ active: !categoryId }" @click="selectCategory('')">
|
||||||
class="category-item"
|
|
||||||
:class="{ active: !categoryId }"
|
|
||||||
@click="selectCategory('')"
|
|
||||||
>
|
|
||||||
全部
|
全部
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view v-for="cat in categories" :key="cat.categoryId" class="category-item" :class="{ active: categoryId === cat.categoryId }" @click="selectCategory(cat.categoryId)">
|
||||||
v-for="cat in categories"
|
|
||||||
:key="cat.categoryId"
|
|
||||||
class="category-item"
|
|
||||||
:class="{ active: categoryId === cat.categoryId }"
|
|
||||||
@click="selectCategory(cat.categoryId)"
|
|
||||||
>
|
|
||||||
{{ cat.name }}
|
{{ cat.name }}
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
@@ -39,12 +29,7 @@
|
|||||||
<!-- 右侧商品列表 -->
|
<!-- 右侧商品列表 -->
|
||||||
<scroll-view scroll-y class="product-scroll">
|
<scroll-view scroll-y class="product-scroll">
|
||||||
<view class="product-list">
|
<view class="product-list">
|
||||||
<view
|
<view v-for="item in products" :key="item.productId" class="product-card" @click="viewDetail(item)">
|
||||||
v-for="item in products"
|
|
||||||
:key="item.productId"
|
|
||||||
class="product-card"
|
|
||||||
@click="viewDetail(item)"
|
|
||||||
>
|
|
||||||
<view class="product-image">
|
<view class="product-image">
|
||||||
<Icon name="product" :size="60" color="#fff" />
|
<Icon name="product" :size="60" color="#fff" />
|
||||||
</view>
|
</view>
|
||||||
@@ -64,14 +49,11 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 空状态 -->
|
|
||||||
<view v-if="products.length === 0" class="empty">
|
<view v-if="products.length === 0" class="empty">
|
||||||
<Icon name="product" :size="80" color="#ccc" />
|
<Icon name="product" :size="80" color="#ccc" />
|
||||||
<text class="empty-text">暂无商品</text>
|
<text class="empty-text">暂无商品</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 加载更多 -->
|
|
||||||
<view v-if="products.length > 0" class="load-more">
|
<view v-if="products.length > 0" class="load-more">
|
||||||
<text>{{ loading ? '加载中...' : (hasMore ? '上拉加载更多' : '没有更多了') }}</text>
|
<text>{{ loading ? '加载中...' : (hasMore ? '上拉加载更多' : '没有更多了') }}</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -119,7 +101,6 @@ export default {
|
|||||||
async loadProducts() {
|
async loadProducts() {
|
||||||
if (this.loading) return
|
if (this.loading) return
|
||||||
this.loading = true
|
this.loading = true
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await productApi.getProducts({
|
const res = await productApi.getProducts({
|
||||||
categoryId: this.categoryId,
|
categoryId: this.categoryId,
|
||||||
@@ -127,7 +108,6 @@ export default {
|
|||||||
page: this.page,
|
page: this.page,
|
||||||
pageSize: this.pageSize
|
pageSize: this.pageSize
|
||||||
})
|
})
|
||||||
|
|
||||||
const list = res.records || []
|
const list = res.records || []
|
||||||
if (this.page === 1) {
|
if (this.page === 1) {
|
||||||
this.products = list
|
this.products = list
|
||||||
@@ -166,7 +146,6 @@ export default {
|
|||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 搜索区域 */
|
|
||||||
.search-section {
|
.search-section {
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
padding: 30rpx 30rpx 10rpx;
|
padding: 30rpx 30rpx 10rpx;
|
||||||
@@ -192,13 +171,11 @@ export default {
|
|||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 左侧分类 + 右侧商品布局 */
|
|
||||||
.content-wrapper {
|
.content-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: calc(100vh - 130rpx);
|
height: calc(100vh - 130rpx);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 左侧分类侧边栏 */
|
|
||||||
.category-sidebar {
|
.category-sidebar {
|
||||||
width: 180rpx;
|
width: 180rpx;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
@@ -211,7 +188,6 @@ export default {
|
|||||||
color: #666;
|
color: #666;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-left: 6rpx solid transparent;
|
border-left: 6rpx solid transparent;
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-item.active {
|
.category-item.active {
|
||||||
@@ -221,13 +197,11 @@ export default {
|
|||||||
border-left-color: #667eea;
|
border-left-color: #667eea;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 右侧商品列表 */
|
|
||||||
.product-scroll {
|
.product-scroll {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 商品列表 */
|
|
||||||
.product-list {
|
.product-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -241,17 +215,12 @@ export default {
|
|||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-card:nth-child(odd) {
|
.product-card:nth-child(odd) {
|
||||||
margin-right: 4%;
|
margin-right: 4%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-card:active {
|
|
||||||
transform: scale(0.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-image {
|
.product-image {
|
||||||
height: 200rpx;
|
height: 200rpx;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
@@ -325,7 +294,6 @@ export default {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 空状态 */
|
|
||||||
.empty {
|
.empty {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 100rpx 0;
|
padding: 100rpx 0;
|
||||||
@@ -340,7 +308,6 @@ export default {
|
|||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 加载更多 */
|
|
||||||
.load-more {
|
.load-more {
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user