|
@@ -1,17 +1,19 @@
|
|
|
<template>
|
|
|
- <view class="goods-item" @click="toDetail">
|
|
|
- <view class="goods-imgs">
|
|
|
- <view v-if="data.status == 1" class="goods-staus">已售罄</view>
|
|
|
- <u-lazy-load img-mode="scaleToFill" :height="imgHeight" :image="data.src" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
|
|
|
- </view>
|
|
|
- <view class="name ellipsis-two">{{data.name}}</view>
|
|
|
- <view class="price">
|
|
|
- <view>
|
|
|
- <text>{{data.price}}</text>
|
|
|
- <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
|
|
|
+ <view class="goods-list">
|
|
|
+ <view class="goods-item" v-for="item in list" :key="item.id" @click="toDetail">
|
|
|
+ <view class="goods-imgs">
|
|
|
+ <view v-if="item.status == 1" class="goods-staus">已售罄</view>
|
|
|
+ <u-lazy-load img-mode="scaleToFill" :height="imgHeight" :image="item.src" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
|
|
|
</view>
|
|
|
- <view @click.stop="addCart">
|
|
|
- <u-image mode="scaleToFill" width="45rpx" height="45rpx" src="/static/addCart.png"></u-image>
|
|
|
+ <view class="name ellipsis-two">{{item.name}}</view>
|
|
|
+ <view class="price">
|
|
|
+ <view>
|
|
|
+ <text>{{item.price}}</text>
|
|
|
+ <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
|
|
|
+ </view>
|
|
|
+ <view @click.stop="addCart">
|
|
|
+ <u-image mode="scaleToFill" width="45rpx" height="45rpx" src="/static/addCart.png"></u-image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -24,10 +26,10 @@
|
|
|
type: Number,
|
|
|
default: 250
|
|
|
},
|
|
|
- data:{
|
|
|
- type: Object,
|
|
|
+ list:{
|
|
|
+ type: Array,
|
|
|
default: function(){
|
|
|
- return {}
|
|
|
+ return []
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -44,62 +46,77 @@
|
|
|
this.$store.state.vuex_cartNums = Number(this.$store.state.vuex_cartNums) + 1
|
|
|
},
|
|
|
// 商品详情
|
|
|
- toDetail(){
|
|
|
+ toDetail(item){
|
|
|
uni.navigateTo({
|
|
|
- url:"/pages/goods/goodsDetail?id="+this.data.id
|
|
|
+ url:"/pages/goods/goodsDetail?id="+item.id
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
-.goods-item{
|
|
|
- background: #FFFFFF;
|
|
|
- width: 48%;
|
|
|
- margin-bottom: 5upx;
|
|
|
- .goods-imgs{
|
|
|
- position: relative;
|
|
|
- border-radius: 28upx 28upx 0 0;
|
|
|
- overflow: hidden;
|
|
|
- .goods-staus{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- z-index: 10000;
|
|
|
- border-radius: 15rpx 15rpx 0 0;
|
|
|
- background: rgba($color: #000000, $alpha: 0.4);
|
|
|
- text-align: center;
|
|
|
- line-height: 250rpx;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- color: #eee;
|
|
|
- font-size: 30upx;
|
|
|
- font-weight: bold;
|
|
|
+<style lang="scss" scoped>
|
|
|
+.goods-list{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: 20upx;
|
|
|
+ .goods-item{
|
|
|
+ background: #FFFFFF;
|
|
|
+ width: 48%;
|
|
|
+ margin-bottom: 5upx;
|
|
|
+ &:active{
|
|
|
+ opacity: 0.5;
|
|
|
}
|
|
|
- }
|
|
|
- .name{
|
|
|
- padding: 10upx 20upx 0;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .price{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 15upx 20upx;
|
|
|
- text{
|
|
|
- color: #d42a26;
|
|
|
- font-size: 36upx;
|
|
|
- margin-right: 6upx;
|
|
|
+ .goods-imgs{
|
|
|
+ position: relative;
|
|
|
+ border-radius: 28upx 28upx 0 0;
|
|
|
+ overflow: hidden;
|
|
|
+ .goods-staus{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10000;
|
|
|
+ border-radius: 15rpx 15rpx 0 0;
|
|
|
+ background: rgba($color: #000000, $alpha: 0.4);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 250rpx;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ color: #eee;
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .name{
|
|
|
+ padding: 10upx 20upx 0;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
- >view{
|
|
|
- &:first-child{
|
|
|
- font-size: 22upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .price{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 15upx 20upx;
|
|
|
+ text{
|
|
|
+ color: #d42a26;
|
|
|
+ font-size: 36upx;
|
|
|
+ margin-right: 6upx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ >view{
|
|
|
+ &:first-child{
|
|
|
+ font-size: 22upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ &:active{
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
</style>
|