feat(product-list): 专区商品列表组件开发
This commit is contained in:
woody
parent
e1d88137ae
commit
8582e0c9b3
|
|
@ -0,0 +1,229 @@
|
||||||
|
<template>
|
||||||
|
<view class="area-product-list">
|
||||||
|
<view class="area-header">
|
||||||
|
<view class="header-bg"></view>
|
||||||
|
<text class="area-title">{{ title }}</text>
|
||||||
|
<u-button
|
||||||
|
type="primary"
|
||||||
|
size="mini"
|
||||||
|
shape="circle"
|
||||||
|
:custom-style="{
|
||||||
|
background: '#ffffff',
|
||||||
|
border: 'none',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 1,
|
||||||
|
height: '46rpx',
|
||||||
|
lineHeight: '46rpx',
|
||||||
|
width: 'fit-content',
|
||||||
|
padding: '0 24rpx',
|
||||||
|
margin: '0'
|
||||||
|
}"
|
||||||
|
@click="goToMore"
|
||||||
|
>
|
||||||
|
<view class="more-btn-content">
|
||||||
|
<text class="more-text">更多</text>
|
||||||
|
<u-icon name="arrow-right" color="#005bac" size="14"></u-icon>
|
||||||
|
</view>
|
||||||
|
</u-button>
|
||||||
|
</view>
|
||||||
|
<view class="product-container">
|
||||||
|
<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>
|
||||||
|
<view class="product-price-row">
|
||||||
|
<view class="product-price">
|
||||||
|
{{ formatPrice(item.waresPrice) }}
|
||||||
|
</view>
|
||||||
|
<u-button
|
||||||
|
type="primary"
|
||||||
|
size="mini"
|
||||||
|
shape="circle"
|
||||||
|
:custom-style="{
|
||||||
|
background: '#005bac',
|
||||||
|
padding: 0,
|
||||||
|
width: '48rpx',
|
||||||
|
height: '48rpx',
|
||||||
|
minWidth: '48rpx'
|
||||||
|
}"
|
||||||
|
@click.stop="handleAddToCart(item)"
|
||||||
|
>
|
||||||
|
<u-icon name="plus" color="#ffffff" size="12"></u-icon>
|
||||||
|
</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { numberToCurrencyNo, isLocal, isLocaled } from '@/util/numberToCurrency'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isLocaled,
|
||||||
|
formatPrice(price) {
|
||||||
|
// 使用numberToCurrencyNo和isLocal函数来格式化价格
|
||||||
|
return isLocal(numberToCurrencyNo(price));
|
||||||
|
},
|
||||||
|
goToMore() {
|
||||||
|
// 跳转到专区详情页面
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/specialArea/index?id=${this.specialAreaId}`
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleProductClick(item) {
|
||||||
|
// 商品点击事件，可根据需求实现跳转或其他逻辑
|
||||||
|
this.$emit('product-click', item);
|
||||||
|
},
|
||||||
|
handleAddToCart(item) {
|
||||||
|
// 添加到购物车事件
|
||||||
|
this.$emit('add-cart', item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.area-product-list {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx;
|
||||||
|
padding-top: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
position: relative;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
height: 46rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -30rpx;
|
||||||
|
right: -30rpx;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(to bottom, #ADD8E6, #ffffff);
|
||||||
|
z-index: 0;
|
||||||
|
border-top-left-radius: 8px;
|
||||||
|
border-top-right-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-btn-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #005bac;
|
||||||
|
margin-right: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-container {
|
||||||
|
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 {
|
||||||
|
width: 100%;
|
||||||
|
height: 200rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-info {
|
||||||
|
margin-top: 12rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-price-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-price {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #005bac;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -275,7 +275,7 @@ export default {
|
||||||
name: '数据查询',
|
name: '数据查询',
|
||||||
imgurl: "../../static/images/mark1.png",
|
imgurl: "../../static/images/mark1.png",
|
||||||
menuKey: "marketDynamics",
|
menuKey: "marketDynamics",
|
||||||
ifshow: false,
|
ifshow: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: "/pages/bonus/index",
|
url: "/pages/bonus/index",
|
||||||
|
|
|
||||||
|
|
@ -6,44 +6,19 @@
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<!-- <view class="kuang">
|
|
||||||
<view class="kuang_i"
|
|
||||||
v-for="(item, index) in zoneList"
|
|
||||||
:key="index"
|
|
||||||
@tap="goGoodList(item)"
|
|
||||||
v-show="item.isShow">
|
|
||||||
<view>{{ item.label }}</view>
|
|
||||||
<img :src="item.img"
|
|
||||||
alt="">
|
|
||||||
</view>
|
|
||||||
</view> -->
|
|
||||||
<view class="goods-sort">
|
<view class="goods-sort">
|
||||||
<view class="goods-flexs">
|
<view class="goods-flexs">
|
||||||
<view class="goods-view"
|
<view
|
||||||
|
class="goods-view"
|
||||||
@click="navTap(item)"
|
@click="navTap(item)"
|
||||||
v-for="item in goodsList.recommendSpecialAreaList "
|
v-for="item in goodsList.recommendSpecialAreaList "
|
||||||
v-if="item.waresList!=false">
|
:key="item.pkWares"
|
||||||
|
>
|
||||||
<view class="bg-color"></view>
|
<view class="bg-color"></view>
|
||||||
<view class="goods-top">
|
<!-- <view class="goods-top">
|
||||||
<view class="title">{{item.specialAreaName}}</view>
|
<view class="title">{{item.specialAreaName}}</view>
|
||||||
<!-- <view class="lables">限时抢</view> -->
|
|
||||||
</view>
|
|
||||||
<template v-if="item.waresList">
|
|
||||||
<view class="goods-cen">
|
|
||||||
<view class="goods-list"
|
|
||||||
v-for="(items,indexs) in item.waresList"
|
|
||||||
v-if="indexs<2">
|
|
||||||
<view class="goods-content">
|
|
||||||
<view class="goods">
|
|
||||||
<image :src="items.cover1"></image>
|
|
||||||
</view>
|
|
||||||
<!-- <view class="price">
|
|
||||||
{{items.waresPrice | numberToCurrency | isLocal}}
|
|
||||||
</view> -->
|
</view> -->
|
||||||
</view>
|
<area-product-list v-if="item.waresList!=false" :list="item.waresList" :title="item.specialAreaName"></area-product-list>
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -56,10 +31,11 @@ import * as api from '@/config/goods'
|
||||||
import * as apis from '@/config/index.js'
|
import * as apis from '@/config/index.js'
|
||||||
import clTabbar from '@/components/cl-tabbar.vue'
|
import clTabbar from '@/components/cl-tabbar.vue'
|
||||||
import * as ban from '@/config/balance.js'
|
import * as ban from '@/config/balance.js'
|
||||||
|
import areaProductList from '@/components/area-product-list/index.vue'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
'cl-tabbar': clTabbar,
|
'cl-tabbar': clTabbar,
|
||||||
|
'area-product-list': areaProductList,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -424,14 +400,15 @@ export default {
|
||||||
.goods-sort {
|
.goods-sort {
|
||||||
padding-bottom: 130rpx;
|
padding-bottom: 130rpx;
|
||||||
.goods-flexs {
|
.goods-flexs {
|
||||||
display: flex;
|
// display: flex;
|
||||||
padding: 30rpx 30rpx 20rpx 35rpx;
|
padding: 30rpx 30rpx 20rpx 35rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-wrap: wrap;
|
// flex-wrap: wrap;
|
||||||
margin-left: -25rpx;
|
margin-left: -25rpx;
|
||||||
.bg-color {
|
.bg-color {
|
||||||
width: 335rpx;
|
// width: 335rpx;
|
||||||
height: 72rpx;
|
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%,
|
||||||
|
|
@ -444,12 +421,12 @@ export default {
|
||||||
}
|
}
|
||||||
.goods-view {
|
.goods-view {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 295rpx;
|
// width: 295rpx;
|
||||||
// height: 180rpx;
|
// height: 180rpx;
|
||||||
margin-left: 20rpx;
|
margin-left: 20rpx;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: 15rpx;
|
border-radius: 15rpx;
|
||||||
padding: 20rpx 20rpx 10rpx 20rpx;
|
// padding: 20rpx 20rpx 10rpx 20rpx;
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
.goods-top {
|
.goods-top {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue