nherp-shop/pages/commponent/home/goodList.vue

<template>
	<view class="goodList">

		<view v-for="(item, index) in list" :key="index" class="goods">
			<view  class="top" @tap="jumpDetails(item)">
				<image class="cover" lazy-load="true" :src="item.url" mode="scaleToFill"></image>
			</view>
			<view  class="bottom padding-lr-sm"  >
				<!-- <view v-if="item.goodsName" class="text-xs good_skuSubTitle" style="color: #009125;">
					{{item.goodsName}}
				</view> -->
				<view class="goods_name text-df">
					{{item.goodsName}}
				</view>
				<!-- <view v-if="item.goodsName" class="text-sm good_skuSubTitle padding-bottom-xs" style="color: #D5A94D;">
					{{item.goodsName}}
				</view> -->
				<view>
					<!-- <text class="tag1" v-if="item.skuItem.v2Tags&&item.skuItem.v2Tags[0].styleText&&item.skuItem.v2Tags[0].tagType==0">
						{{item.skuItem.v2Tags[0].styleText.text}}
					</text>
					<view class="" style="width: 82rpx; height: 30rpx;" v-else-if="item.skuItem.v2Tags&&item.skuItem.v2Tags[0].image&&item.skuItem.v2Tags[0].tagType==1">
						<image  :src="item.skuItem.v2Tags[0].image.url" class="w-100 h-100" mode="aspectFit"></image>
					</view> -->
				</view>
				<view class="goumai margin-top-xs flex justify-between align-center">
					<view class="g_left price">
						<text v-if="item.price" class="text1  text-bold text-sm"> {{item.price}} </text>
						<text style="color: #222">/{{ item.unit}}</text>
						<!-- <text v-if="item.skuItem.dashPrice" class="text2 text-xs"> {{item.skuItem.dashPrice.text}}</text> -->

					</view>
					<!-- <view class="g_right" @tap="addCart(item)">
						<image src="/static/images/new/jiagou.png" style=" width: 28px;height: 28px;" mode="aspectFill"></image>
					</view> -->
				</view>
			</view>

			<!-- <view v-if="item.type==4" class="cboardVO padding-xs"  :style="{backgroundImage:'url('+item.cboardVO.cboardBackGroundPic.url+')'}">
				<view class="padding-left-sm w-100" style="height: 20%;">
					<image :src="item.cboardVO.cboardNamePic.url" style="width: 75%;height:50%;"  mode="aspectFit"></image>
					<view class="text-white text-sm" style="height: 40%;">{{item.cboardVO.cboardDesc.text}}</view>
				</view>
				<view class="bg-white w-100 flex flex-direction justify-around padding-sm "  style="height: 80%;border-radius: 4%;" >
					<view class="flex" style="height: 30%;position: relative;" v-for="(good_item ,index) in item.cboardVO.cboardTabVO.skuItems">
						<view class="h-100" style="width: 50%;">
							<image :src="good_item.picUrl" style="width: 100%;" class="h-100" mode="aspectFit"></image>
							<image :src="'/static/images/new/tag'+index+'.png'" class="cboardVO_tag" mode="aspectFit"></image>
						</view>
						<view class="h-100 flex flex-wrap flex-direction justify-center" style="width: 50%;"> 
							<view class="w-100 priceColor">{{good_item.sellPrice.text}}</view>
							<view class="w-100 text-gray text-sm padding-top-xs">日售{{good_item.dailySales}}</view>
						</view>
					</view>
				</view>
				
			</view> -->

		</view>
		<view class="place">
		</view>
	</view>
</template>

<script>
	import { setTabBarBadge } from '@/utils/util.js'
	import {getCart, setCart ,resetCart, getCartNumber,setGoodsData, setGoodsHistory, setCartDetails, setGoodsDetails,getToken} from '@/utils/auth.js'
	export default {
		data() {
			return {
				good_data:{
					number: 1,
					imgList:[],
					selectSku:{},
					sku: [{
						sku_id: 1,
						skuname: '规格',
						child: [{
								tagname: '测试规格1',
								id: 2011,
								imgs: '',
								money: ''
							},
							{
								tagname: '测试规格2',
								id: 2012,
								imgs: '',
								money: ''
							}
						]
					}],
					skuArr: [{
							goods_sku_arr: ['2011'],
							goods_sku_text: '醇黑巧克力【20枚】',
							img: 'http://img10.360buyimg.com/n1/jfs/t1/86401/35/12206/357766/5e43b59cE5a7aa4dd/0753be765166c195.jpg',
							money: '175.78',
							stock: 345
						},
						{
							goods_sku_arr: ['2012'],
							goods_sku_text: '草莓味【8枚】',
							img: 'http://img11.360buyimg.com/n1/jfs/t1/74434/3/6892/331750/5d512febE54e891c4/0096ad20c3c20d23.jpg',
							money: '35.90',
							stock: 255
						},
					]
				},
				list: [],
			}
		},
		props:{
		
			propsList:{
				type:Array
			}
		},
		created() {
			// if(this.propsList){
			// 	this.list = this.propsList
			// }
		},
		watch: {
		    propsList: function(newVal,oldVal){
				console.log('newVal', newVal)
		        this.list = newVal;  //newVal即是chartData
		    }
		 },
		methods: {
			jumpDetails(item) {
			
				setGoodsHistory(item)
				setGoodsDetails(item)
				
				uni.navigateTo({
					url: '/pages/views/goods/goodsDetails?id=' + item.id
				});
			},
			addCart(e) {
				console.log(e)
				
				// 此处应该判断是否登录 如果没登录 跳转到登录页
				if(!getToken()){
						uni.navigateTo({ //登录
							url:'/pages/login/index1'
						})
						return
				}
				setCartDetails(e.skuItem)
				
				setGoodsDetails(e.skuItem)
				var data = this.good_data
				data.status= 0;
				data.img =  e.skuItem.picUrl;
				data.title =  e.skuItem.skuTitle.text;
				data.money = parseFloat(e.skuItem.sellPrice.text.substr(1));
				
				data.imgList.push(e.skuItem.picUrl);
				data.imgList.push(e.skuItem.detailPagePic);
				data.xiaoliang = e.skuItem.skuId;
				data.goods_id = e.skuItem.skuId;
				
				
				
				if(data.skuArr){
					let sku = data.skuArr
				
					for(let i=0;i<sku.length;i++){
						sku[i].img = data.img
						sku[i].goods_sku_text = data.title+"测试规格"+i;
						sku[i].money = data.money 
						
					}

				}
				if(data.sku){
					let sku = data.sku[0].child
				
					for(let i=0;i<sku.length;i++){
						sku[i].imgs = data.img
						sku[i].tagname = data.title+"测试规格"+i;
						sku[i].money = data.money 
						
					}
				
				}
				data.selectSku.goods_sku_text = data.skuArr[0].goods_sku_text
				data.selectSku.img = data.skuArr[0].img
				data.selectSku.money = data.skuArr[0].money
				
				
				let colCart = getCart();
				if(colCart.length){
					const hasItem = colCart.some(v => v.goods_id === data.goods_id)
					if (!hasItem) {
						colCart.push(data)
					} else {
						for(let y = 0;y < colCart.length; y++){
							const item = colCart[y]
							if (data.goods_id === item.goods_id) {
								item.number ++
								break
							}
						}
					}
				} else {
					colCart = [data]
				}
				resetCart(colCart)
				/**
				 * 模拟获取购物车的数量 getCart
				 */
				// let cartNum = getCart()
				setTabBarBadge(colCart.length)
				
				
				// 存储商品数据
				uni.showToast({
				  title: '加入购物车成功 !',
				  icon: 'none'
				});
				
			},
		},
	}
</script>

<style scoped lang="scss">
	.good_skuSubTitle {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	.goodList {
		padding: 20rpx;
		column-count: 2;
		/*分为两列  用于瀑布流*/
		column-gap: 20rpx;

		background: #F8F8F8;
		overflow: hidden;
	}
	.tag1 {
		font-size: 20rpx;
		border: 1px solid #FF5560;
		color: #FF5560;
		border-radius: 15%;
		padding: 0 4rpx;
	}
	.cboardVO{
		height: 65vw;
		background-size: 100% 100%;
	}

	.cboardVO_tag{
		width: 50rpx;height: 50rpx;position: absolute;
		left: 0;top: 0;
	}
	
	
	
	
	
	

	.loading {
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #ccc;
		font-size: 24upx;
		width: 100%;
		margin-bottom: 20upx;
	}

	.goods {
		height: 100%;
		overflow: auto;
		margin-bottom: 20upx;
		break-inside: avoid;
		/*用于瀑布流*/
		border-radius: 10upx;
		box-sizing: content-box;

		&:first-child {
			margin-top: 0;
		}
	}

	.goods .top {
	    width: 100%;
	    height: 0;
	    padding-bottom: 100%;
	    position: relative;
		overflow: hidden;
		background-color: #ffffff;
	}

	.top .cover {
		width: 100%;
		 height: 100%;
		position: absolute;
		display: flex;
		align-items: center;
	}

	.top .tags {
		width: 65upx;
		height: 65upx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.bottom {
		background-color: #ffffff;
		overflow: hidden;
	}

	.goods_name {
		/* height: 66upx; */
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-weight: bold;
		line-height: 48rpx;
	}


	.bottom .price .text1 {
		font-size: 36upx;
		font-weight: bold;
		color: $mycolor;
	}

	.bottom .price .text2 {
		font-size: 22upx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 15upx;
	}

	.g_left {
		font-size: 24upx;
		align-items: center;
	}

	.g_left text {
		display: inline-block;
		height: 35upx;
		line-height: 35upx;
		border-radius: 10upx;
		color: $mycolor;
	}

	.g_right {
		font-size: 28upx;
		color: $mycolor;
	}
</style>