forked from angelo/web-retail-h5
feat(index): 专区列表替换为组件， 专区列表组件添加size
This commit is contained in:
woody
parent
94cab75c5d
commit
90c154f8ea
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="area-product-list">
|
||||
<view class="area-product-list" :class="sizeClass">
|
||||
<view class="area-header">
|
||||
<view class="header-bg"></view>
|
||||
<text class="area-title">{{ title }}</text>
|
||||
|
|
@ -71,46 +71,26 @@ export default {
|
|||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '热销专区',
|
||||
default: '',
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{
|
||||
pkWares: 17024,
|
||||
cover1:
|
||||
'https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg',
|
||||
waresCode: 'HZSLXSJ2',
|
||||
waresPrice: '6000.0000',
|
||||
specialArea: 25,
|
||||
isSale: 0,
|
||||
preSaleStatus: 0,
|
||||
},
|
||||
{
|
||||
pkWares: 17041,
|
||||
cover1:
|
||||
'https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg',
|
||||
waresCode: 'HZSLXSJ1',
|
||||
waresPrice: '2000.0000',
|
||||
specialArea: 25,
|
||||
isSale: 0,
|
||||
preSaleStatus: 0,
|
||||
},
|
||||
{
|
||||
pkWares: 17042,
|
||||
cover1:
|
||||
'https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg',
|
||||
waresCode: 'HZSLXSJ3',
|
||||
waresPrice: '3999.0000',
|
||||
specialArea: 25,
|
||||
isSale: 0,
|
||||
preSaleStatus: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
specialAreaId: {
|
||||
type: [Number, String],
|
||||
default: '25',
|
||||
default: '',
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal', // 'normal' or 'small'
|
||||
validator: (value) => ['normal', 'small'].includes(value),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
sizeClass() {
|
||||
return this.size === 'small' ? 'area-product-list--small' : ''
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -161,6 +141,74 @@ export default {
|
|||
border-radius: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
transition: all 0.3s ease; // Add transition for smoother size changes
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); // 添加阴影效果
|
||||
|
||||
&--small {
|
||||
padding: 16rpx;
|
||||
padding-top: 0;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.area-header {
|
||||
margin-bottom: 20rpx;
|
||||
padding: 16rpx 0;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
left: -16rpx;
|
||||
right: -16rpx;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
||||
.area-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.more-btn-content {
|
||||
// Adjust button style directly as u-button size='mini' might not be flexible enough
|
||||
:deep(.u-button) {
|
||||
height: 40rpx !important;
|
||||
line-height: 40rpx !important;
|
||||
padding: 0 10rpx !important;
|
||||
}
|
||||
.more-text {
|
||||
font-size: 20rpx;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
:deep(.u-icon) {
|
||||
font-size: 12px !important; // u-icon size might need !important
|
||||
}
|
||||
}
|
||||
|
||||
.product-container {
|
||||
margin: 0 -8rpx;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 160rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.product-price-row .product-price {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.area-header {
|
||||
|
|
|
|||
|
|
@ -50,10 +50,14 @@
|
|||
<view
|
||||
class="goods-view"
|
||||
@click="navTap(item)"
|
||||
v-if="item.waresList != false && (index < 8 || moreFlag == true)"
|
||||
v-if="item.waresList && (index < 8 || moreFlag == true)"
|
||||
>
|
||||
<view :class="userInfo.skin ? 'bg-color1' : 'bg-color'"></view>
|
||||
<view class="goods-top">
|
||||
<area-product-list
|
||||
:list="item.waresList"
|
||||
:title="item.specialAreaName"
|
||||
size="small"
|
||||
></area-product-list>
|
||||
<!-- <view class="goods-top">
|
||||
<view class="title">{{ item.specialAreaName }}</view>
|
||||
</view>
|
||||
<template v-if="item.waresList">
|
||||
|
|
@ -70,7 +74,7 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</template> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -173,19 +177,20 @@
|
|||
import * as api from "@/config/login.js";
|
||||
import * as apis from "@/config/index.js";
|
||||
import * as ban from "@/config/balance.js";
|
||||
import { getAreaGoods } from '@/config/special-area'
|
||||
import clTabbar from "@/components/cl-tabbar.vue";
|
||||
import noticePopup from "@/components/noticePopup.vue";
|
||||
import getTree from "@/components/getTree.vue";
|
||||
import znNewsPopup from "@/components/znNewsPopup.vue";
|
||||
import { getAreaGoods } from '@/config/special-area'
|
||||
// import directrankPopup from "@/components/directrankPopup.vue";
|
||||
import areaProductList from '@/components/area-product-list/index.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
noticePopup,
|
||||
znNewsPopup,
|
||||
"cl-tabbar": clTabbar,
|
||||
getTree,
|
||||
// directrankPopup,
|
||||
areaProductList
|
||||
},
|
||||
filters: {
|
||||
seles(value) {
|
||||
|
|
@ -861,38 +866,17 @@ header {
|
|||
}
|
||||
|
||||
.goods-flexs {
|
||||
// display: flex;
|
||||
padding: 20rpx 20rpx 10rpx 0;
|
||||
position: relative;
|
||||
flex-wrap: wrap; // margin-left: -25rpx;
|
||||
|
||||
.bg-color {
|
||||
// width: 343rpx;
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
background: linear-gradient(to bottom, #add8e6, #ffffff);
|
||||
border-radius: 15rpx 15rpx 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0rpx;
|
||||
}
|
||||
.bg-color1 {
|
||||
width: 343rpx;
|
||||
height: 72rpx;
|
||||
background: #acfbd5;
|
||||
border-radius: 15rpx 15rpx 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.goods-view {
|
||||
position: relative;
|
||||
// width: 302rpx; // height: 180rpx;
|
||||
margin-left: 20rpx;
|
||||
background: #ffffff;
|
||||
// margin-left: 20rpx;
|
||||
// background: #ffffff;
|
||||
border-radius: 15rpx;
|
||||
padding: 20rpx 20rpx 10rpx 20rpx;
|
||||
padding: 0 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.goods-top {
|
||||
|
|
|
|||
Loading…
Reference in New Issue