angelo
/
web-store-retail-h5
forked from angelo/web-retail-h5
3
0
Fork 0
Code Pull Requests Activity

feat(specialArea): 会员专区布局样式处理

This commit is contained in:
woody 2025-04-27 10:59:43 +08:00
parent 8582e0c9b3
commit efec6f264a
3 changed files with 80 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
components/area-product-list/index.vue
View File

@ -4,19 +4,20 @@
<view class="header-bg"></view> <view class="header-bg"></view>
<text class="area-title">{{ title }}</text> <text class="area-title">{{ title }}</text>
<u-button <u-button
v-if="list.length > 0"
type="primary" type="primary"
size="mini" size="mini"
shape="circle" shape="circle"
:custom-style="{ :custom-style="{
background: '#ffffff', background: '#ffffff',
border: 'none', border: 'none',
position: 'relative', position: 'relative',
zIndex: 1, zIndex: 1,
height: '46rpx', height: '46rpx',
lineHeight: '46rpx', lineHeight: '46rpx',
width: 'fit-content', width: 'fit-content',
padding: '0 24rpx', padding: '0 12rpx',
margin: '0' margin: '0',
}" }"
@click="goToMore" @click="goToMore"
> >
@ -27,7 +28,12 @@
</u-button> </u-button>
</view> </view>
<view class="product-container"> <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" /> <image :src="item.cover1" class="product-image" mode="aspectFill" />
<view class="product-info"> <view class="product-info">
<view class="product-name">{{ item.waresCode }}</view> <view class="product-name">{{ item.waresCode }}</view>
@ -39,14 +45,14 @@
type="primary" type="primary"
size="mini" size="mini"
shape="circle" shape="circle"
:custom-style="{ :custom-style="{
background: '#005bac', background: '#005bac',
padding: 0, margin: '0px',
width: '48rpx', width: '48rpx',
height: '48rpx', height: '48rpx',
minWidth: '48rpx' minWidth: '48rpx',
}" }"
@click.stop="handleAddToCart(item)" @click.native.stop="handleAddToCart(item)"
> >
<u-icon name="plus" color="#ffffff" size="12"></u-icon> <u-icon name="plus" color="#ffffff" size="12"></u-icon>
</u-button> </u-button>
@ -59,88 +65,108 @@
<script> <script>
import { numberToCurrencyNo, isLocal, isLocaled } from '@/util/numberToCurrency' import { numberToCurrencyNo, isLocal, isLocaled } from '@/util/numberToCurrency'
import { addShopping } from '@/config/goods'
export default { export default {
props: { props: {
title: { title: {
type: String, type: String,
default: '热销专区' default: '热销专区',
}, },
list: { list: {
type: Array, type: Array,
default: () => [ default: () => [
{ {
pkWares: 17024, pkWares: 17024,
cover1: "https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg", cover1:
waresCode: "HZSLXSJ2", 'https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg',
waresPrice: "6000.0000", waresCode: 'HZSLXSJ2',
waresPrice: '6000.0000',
specialArea: 25, specialArea: 25,
isSale: 0, isSale: 0,
preSaleStatus: 0 preSaleStatus: 0,
}, },
{ {
pkWares: 17041, pkWares: 17041,
cover1: "https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg", cover1:
waresCode: "HZSLXSJ1", 'https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg',
waresPrice: "2000.0000", waresCode: 'HZSLXSJ1',
waresPrice: '2000.0000',
specialArea: 25, specialArea: 25,
isSale: 0, isSale: 0,
preSaleStatus: 0 preSaleStatus: 0,
}, },
{ {
pkWares: 17042, pkWares: 17042,
cover1: "https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg", cover1:
waresCode: "HZSLXSJ3", 'https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg',
waresPrice: "3999.0000", waresCode: 'HZSLXSJ3',
waresPrice: '3999.0000',
specialArea: 25, specialArea: 25,
isSale: 0, isSale: 0,
preSaleStatus: 0 preSaleStatus: 0,
} },
] ],
}, },
specialAreaId: { specialAreaId: {
type: [Number, String], type: [Number, String],
default: '25' default: '25',
} },
}, },
methods: { methods: {
isLocaled, isLocaled,
formatPrice(price) { formatPrice(price) {
// 使用numberToCurrencyNo和isLocal函数来格式化价格 // 使用numberToCurrencyNo和isLocal函数来格式化价格
return isLocal(numberToCurrencyNo(price)); return isLocal(numberToCurrencyNo(price))
}, },
goToMore() { goToMore() {
// 跳转到专区详情页面 // 跳转到专区详情页面
uni.navigateTo({ uni.navigateTo({
url: `/pages/specialArea/index?id=${this.specialAreaId}` url: `/pages/specialArea/index?id=${this.specialAreaId}`,
}); })
}, },
handleProductClick(item) { handleProductClick(item) {
// 商品点击事件，可根据需求实现跳转或其他逻辑 // 商品点击事件，可根据需求实现跳转或其他逻辑
this.$emit('product-click', item); this.$emit('product-click', item)
}, },
handleAddToCart(item) { handleAddToCart(item) {
// 添加到购物车事件 const params = {
this.$emit('add-cart', item); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.area-product-list { .area-product-list {
background-color: #ffffff; background-color: #ffffff;
padding: 30rpx; padding: 20rpx;
padding-top: 0; padding-top: 0;
border-radius: 8px; border-radius: 16rpx;
margin-bottom: 15px; margin-bottom: 24rpx;
position: relative;
} }
.area-header { .area-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 24rpx;
position: relative; position: relative;
padding: 20rpx 0; padding: 20rpx 0;
height: 46rpx; height: 46rpx;
@ -149,10 +175,10 @@ export default {
.header-bg { .header-bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: -30rpx; left: -20rpx;
right: -30rpx; right: -20rpx;
height: 100%; height: 100%;
background: linear-gradient(to bottom, #ADD8E6, #ffffff); background: linear-gradient(to bottom, #add8e6, #ffffff);
z-index: 0; z-index: 0;
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
@ -184,14 +210,12 @@ export default {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -10rpx; margin: 0 -10rpx;
padding-top: 15rpx;
} }
.product-item { .product-item {
width: 33.33%; width: 33.33%;
padding: 0 10rpx; padding: 0 10rpx;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 30rpx;
} }
.product-image { .product-image {
@ -219,11 +243,10 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} .product-price {
font-size: 24rpx;
.product-price { font-weight: bold;
font-size: 32rpx; color: #005bac;
font-weight: bold; }
color: #005bac;
} }
</style> </style>

2
pages/shoppingCar/index.vue
View File

@ -428,6 +428,7 @@ export default {
} else { } else {
this.getCarList(); this.getCarList();
} }
this.$store.dispatch("getCarLength");
}); });
}, },
checkArea() { checkArea() {
@ -537,7 +538,6 @@ export default {
ctem.waresItemsParamList.push(stem.waresItemsParamsList[0]); ctem.waresItemsParamList.push(stem.waresItemsParamsList[0]);
} }
}); });
} else {
} }
}); });
}); });

15
pages/specialArea/index.vue
View File

@ -15,9 +15,7 @@
:key="item.pkWares" :key="item.pkWares"
> >
<view class="bg-color"></view> <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> <area-product-list v-if="item.waresList!=false" :list="item.waresList" :title="item.specialAreaName"></area-product-list>
</view> </view>
</view> </view>
@ -400,15 +398,10 @@ export default {
.goods-sort { .goods-sort {
padding-bottom: 130rpx; padding-bottom: 130rpx;
.goods-flexs { .goods-flexs {
// display: flex; padding: 30rpx 20rpx 20rpx;
padding: 30rpx 30rpx 20rpx 35rpx;
position: relative; position: relative;
// flex-wrap: wrap;
margin-left: -25rpx;
.bg-color { .bg-color {
// width: 335rpx;
width: 100%; width: 100%;
// height: 72rpx;
background: linear-gradient( background: linear-gradient(
-180deg, -180deg,
rgba(255, 226, 226, 0.85) 0%, rgba(255, 226, 226, 0.85) 0%,
@ -421,12 +414,8 @@ export default {
} }
.goods-view { .goods-view {
position: relative; position: relative;
// width: 295rpx;
// height: 180rpx;
margin-left: 20rpx;
background: #ffffff; background: #ffffff;
border-radius: 15rpx; border-radius: 15rpx;
// padding: 20rpx 20rpx 10rpx 20rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
.goods-top { .goods-top {
z-index: 1; z-index: 1;