forked from angelo/web-retail-h5
feat(specialArea): 会员专区布局样式处理
This commit is contained in:
woody
parent
8582e0c9b3
commit
efec6f264a
|
|
@ -4,19 +4,20 @@
|
|||
<view class="header-bg"></view>
|
||||
<text class="area-title">{{ title }}</text>
|
||||
<u-button
|
||||
v-if="list.length > 0"
|
||||
type="primary"
|
||||
size="mini"
|
||||
shape="circle"
|
||||
:custom-style="{
|
||||
:custom-style="{
|
||||
background: '#ffffff',
|
||||
border: 'none',
|
||||
position: 'relative',
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
height: '46rpx',
|
||||
lineHeight: '46rpx',
|
||||
width: 'fit-content',
|
||||
padding: '0 24rpx',
|
||||
margin: '0'
|
||||
padding: '0 12rpx',
|
||||
margin: '0',
|
||||
}"
|
||||
@click="goToMore"
|
||||
>
|
||||
|
|
@ -27,7 +28,12 @@
|
|||
</u-button>
|
||||
</view>
|
||||
<view class="product-container">
|
||||
<view class="product-item" v-for="item in list" :key="item.pkWares" @click="handleProductClick(item)">
|
||||
<view
|
||||
class="product-item"
|
||||
v-for="item in list"
|
||||
:key="item.pkWares"
|
||||
@click="handleProductClick(item)"
|
||||
>
|
||||
<image :src="item.cover1" class="product-image" mode="aspectFill" />
|
||||
<view class="product-info">
|
||||
<view class="product-name">{{ item.waresCode }}</view>
|
||||
|
|
@ -39,14 +45,14 @@
|
|||
type="primary"
|
||||
size="mini"
|
||||
shape="circle"
|
||||
:custom-style="{
|
||||
background: '#005bac',
|
||||
padding: 0,
|
||||
width: '48rpx',
|
||||
height: '48rpx',
|
||||
minWidth: '48rpx'
|
||||
:custom-style="{
|
||||
background: '#005bac',
|
||||
margin: '0px',
|
||||
width: '48rpx',
|
||||
height: '48rpx',
|
||||
minWidth: '48rpx',
|
||||
}"
|
||||
@click.stop="handleAddToCart(item)"
|
||||
@click.native.stop="handleAddToCart(item)"
|
||||
>
|
||||
<u-icon name="plus" color="#ffffff" size="12"></u-icon>
|
||||
</u-button>
|
||||
|
|
@ -59,88 +65,108 @@
|
|||
|
||||
<script>
|
||||
import { numberToCurrencyNo, isLocal, isLocaled } from '@/util/numberToCurrency'
|
||||
|
||||
import { addShopping } from '@/config/goods'
|
||||
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",
|
||||
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
|
||||
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",
|
||||
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
|
||||
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",
|
||||
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
|
||||
}
|
||||
]
|
||||
preSaleStatus: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
specialAreaId: {
|
||||
type: [Number, String],
|
||||
default: '25'
|
||||
}
|
||||
default: '25',
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isLocaled,
|
||||
formatPrice(price) {
|
||||
// 使用numberToCurrencyNo和isLocal函数来格式化价格
|
||||
return isLocal(numberToCurrencyNo(price));
|
||||
return isLocal(numberToCurrencyNo(price))
|
||||
},
|
||||
goToMore() {
|
||||
// 跳转到专区详情页面
|
||||
uni.navigateTo({
|
||||
url: `/pages/specialArea/index?id=${this.specialAreaId}`
|
||||
});
|
||||
url: `/pages/specialArea/index?id=${this.specialAreaId}`,
|
||||
})
|
||||
},
|
||||
handleProductClick(item) {
|
||||
// 商品点击事件，可根据需求实现跳转或其他逻辑
|
||||
this.$emit('product-click', item);
|
||||
this.$emit('product-click', item)
|
||||
},
|
||||
handleAddToCart(item) {
|
||||
// 添加到购物车事件
|
||||
this.$emit('add-cart', item);
|
||||
}
|
||||
}
|
||||
};
|
||||
const params = {
|
||||
pkCountry: this.pkCountry,
|
||||
specialArea: item.specialArea,
|
||||
number: 1,
|
||||
waresCode: item.waresCode,
|
||||
productGroup: item.productGroup,
|
||||
}
|
||||
|
||||
addShopping(params).then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: '购物车添加成功',
|
||||
icon: 'success',
|
||||
mask: true,
|
||||
})
|
||||
this.$store.dispatch("getCarLength");
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.area-product-list {
|
||||
background-color: #ffffff;
|
||||
padding: 30rpx;
|
||||
padding: 20rpx;
|
||||
padding-top: 0;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.area-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
padding: 20rpx 0;
|
||||
height: 46rpx;
|
||||
|
|
@ -149,10 +175,10 @@ export default {
|
|||
.header-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -30rpx;
|
||||
right: -30rpx;
|
||||
left: -20rpx;
|
||||
right: -20rpx;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #ADD8E6, #ffffff);
|
||||
background: linear-gradient(to bottom, #add8e6, #ffffff);
|
||||
z-index: 0;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
|
|
@ -184,14 +210,12 @@ export default {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -10rpx;
|
||||
padding-top: 15rpx;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
width: 33.33%;
|
||||
padding: 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
|
|
@ -219,11 +243,10 @@ export default {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #005bac;
|
||||
.product-price {
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #005bac;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -428,6 +428,7 @@ export default {
|
|||
} else {
|
||||
this.getCarList();
|
||||
}
|
||||
this.$store.dispatch("getCarLength");
|
||||
});
|
||||
},
|
||||
checkArea() {
|
||||
|
|
@ -537,7 +538,6 @@ export default {
|
|||
ctem.waresItemsParamList.push(stem.waresItemsParamsList[0]);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,9 +15,7 @@
|
|||
:key="item.pkWares"
|
||||
>
|
||||
<view class="bg-color"></view>
|
||||
<!-- <view class="goods-top">
|
||||
<view class="title">{{item.specialAreaName}}</view>
|
||||
</view> -->
|
||||
|
||||
<area-product-list v-if="item.waresList!=false" :list="item.waresList" :title="item.specialAreaName"></area-product-list>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -400,15 +398,10 @@ export default {
|
|||
.goods-sort {
|
||||
padding-bottom: 130rpx;
|
||||
.goods-flexs {
|
||||
// display: flex;
|
||||
padding: 30rpx 30rpx 20rpx 35rpx;
|
||||
padding: 30rpx 20rpx 20rpx;
|
||||
position: relative;
|
||||
// flex-wrap: wrap;
|
||||
margin-left: -25rpx;
|
||||
.bg-color {
|
||||
// width: 335rpx;
|
||||
width: 100%;
|
||||
// height: 72rpx;
|
||||
background: linear-gradient(
|
||||
-180deg,
|
||||
rgba(255, 226, 226, 0.85) 0%,
|
||||
|
|
@ -421,12 +414,8 @@ export default {
|
|||
}
|
||||
.goods-view {
|
||||
position: relative;
|
||||
// width: 295rpx;
|
||||
// height: 180rpx;
|
||||
margin-left: 20rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 15rpx;
|
||||
// padding: 20rpx 20rpx 10rpx 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.goods-top {
|
||||
z-index: 1;
|
||||
|
|
|
|||
Loading…
Reference in New Issue