high-mini/pages/classify/goods-list/goods-list.vue

<template>
	<view style="height: 100%;">
		<!-- <scroll-view  :scroll-y="true" class="ht-auto goods-list" :scroll-top="scroll_top" @scroll="scroll_event" @scrolltolower="scroll_lower"  @scrolltoupper="scroll_upper"  lower-threshold="30"> -->
		   
		<data-list v-if="typeList=='classify'" :page="pageData.pageStart" :size="pageData.pageNum" :selectObject="selectObject" class="ht-auto goods-list" ref="list" @load="handleLoad"  @refresherrefresh="refresherrefresh">
			<view class="right-content-actual pr bs" :style="'padding-bottom:'+paddBottom+'px;'">
				<view v-if="(propData || null) != null && propData.length > 0" class="oh">
					 
					 <view v-for="(item, index) in propData" :key="index" >
						<view :data-value="112233" @click="goGoodsDetail" class="goods-item bs">
						    <image :src="item.images" mode="widthFix" class="goods-img"></image>
						    <view class="goods-detail">
						        <view class="goods-title">
						            <view class="goods-text">{{item.title}}</view>
						            <!-- <view v-if="(item.simple_desc || null) != null" class="goods-desc">{{item.simple_desc}}</view> -->
									<view  class="goods-desc">商品的详细信息</view>
								</view>
								<view class="goods-item-bottom">
									<view class="goods-price">
									    <view class="new-price">&yen;256</view>
										<view class="old-price">&yen;511</view>
									</view>
									<view class="goods-num">
									    <view class="icon cart cart-class" @click.stop="cartIconChoose">
										</view>
									</view>
								</view>
						        
						    </view>
						</view> 
					 </view>
					 				
				</view>
 
		    </view>
			
			
			
		</data-list>	
		
		<scroll-view  :scroll-y="true" class="ht-auto goods-list"   @scrolltolower="scroll_lower"  lower-threshold="30">	
			<view class="right-content-actual pr bs" :style="'padding-bottom:'+paddBottom+'px;'">
				<view v-if="(propData || null) != null && propData.length > 0" class="oh">
					 
					 <view v-for="(item, index) in propData" :key="index" >
						<view :data-value="112233" @click="goGoodsDetail" class="goods-item bs">
						    <image :src="item.images" mode="widthFix" class="goods-img"></image>
						    <view class="goods-detail">
						        <view class="goods-title">
						            <view class="goods-text">{{item.title}}</view>
						            <!-- <view v-if="(item.simple_desc || null) != null" class="goods-desc">{{item.simple_desc}}</view> -->
									<view  class="goods-desc">商品的详细信息</view>
								</view>
								<view class="goods-item-bottom">
									<view class="goods-price">
									    <view class="new-price">&yen;256</view>
										<view class="old-price">&yen;511</view>
									</view>
									<view class="goods-num">
									    <view class="icon cart cart-class" @click.stop="cartIconChoose">
										</view>
									</view>
								</view>
						        
						    </view>
						</view> 
					 </view>
					 	<noMore></noMore>			
				</view>
			 
			 
			</view>
			
		</scroll-view>
		<!-- 选择类别 -->
		<wybPopup ref="popup" type="bottom" width="500" scrollY="true" radius="6" :showCloseIcon="true">
		
			<cart-choose :dataList="goodsPramList" @close="close"></cart-choose>
		</wybPopup>
	</view>
	
</template>

<script>
	import noMore from '@/pages/classify/no-more/no-more.vue'
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	import cartChoose from '@/pages/classify/cart-choose/cart-choose.vue'
	import dataList from '@/components/dataList/dataList.vue'
	import uniloadmore from '@/components/uni-load-more/components/uni-load-more/uni-load-more.vue'
	
	
	let listData=require("../cart-choose/data.json")
	

	export default {
		data(){		
			return{
				
				 
				 goodsPramList:listData.images,//商品的选择参数
			}
			
		},
		created(){
			
			
		},
		props: {
			propData: {
				type: Array,
				default: null
			},
			paddBottom:{
				type:Number,
				default:0,
			},
			pageData:{
				type:Object,
				default:{
					pageStart:1,
					pageNum:0,
					allData:0
				}
			},
			isFinish:{
				type:Boolean,
				default:false,
			},
			selectObject:{
				type:Object,
				default:{
					selectIndex:0,
					length:0
				}
			},
			typeList:{
				type:String,
				default:"classify"
			}
			
		},

		onShow(){
			this.get_goods_list();
		},
		components:{
			
			wybPopup,
			cartChoose,
			// uniloadmore,
			noMore,
			dataList
		},
		methods:{
			
			
			// 下拉触底刷新,滑到底部时触发的方法
			handleLoad(data, callback) {
				this.$emit("loadData",callback)
			},
			
			// prev,next子组件弹射方法
			refresherrefresh(type){
				this.$emit("switchCategory",type)
			},
			
			//查看商品详情
			goGoodsDetail(e) {
				uni.navigateTo({
					 url: '../../classify/goodsDetail/goodsDetail?category_id=' + e.currentTarget.dataset.value
			
				})
			},
			// 购物车图标点击
			cartIconChoose(){
				this.$refs.popup.show();
			},
			//popup关闭选择方法
			close(){
				this.$refs.popup.hide();
			},
			
			
			
			scroll_lower(){
				this.$emit("loadData")
			}
			
		}
		
	}
</script>

<style  scoped>
.br {
    border: 1px solid #ffffff ;
}
.bs {
    box-sizing: border-box;
}
.goods-list .goods-item{
	
	display: flex;
	align-items: center;
	 width: 100%;
	height: 240rpx;
	/* margin-bottom: 20rpx; */
	color: #333333;
	padding:  0 20rpx 10rpx;
	border-bottom: 1px solid #F6F6F6;
	
}

.goods-list{
	background-color: #ffffff;
}

.goods-list .goods-img {
    /* width: 190rpx; */
    height: 190rpx !important;
	width: 190rpx;
}

.goods-list .goods-detail {
	width: calc(100% - 190rpx);
	height: 100%;
	
}

.goods-title {
	width: 100%;
	padding: 0 10rpx 0 0;
	height: 140rpx;
	
}
.goods-title .goods-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	height: 50rpx;
	line-height: 50rpx;
	font-size: 30rpx;
	padding: 20rpx 0 10rpx;
}
.goods-title .goods-desc {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	height: 40rpx;
	line-height: 40rpx;
	font-size: 24rpx;
	color: #999999;
}

.goods-item-bottom{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.goods-item-bottom .goods-price{
	font-family: Arial;
	padding-left: 20rpx;
}
.goods-item-bottom .new-price{
	color: #3DA7E7;
	font-weight: bold;
}

.goods-item-bottom .old-price{
	font-size: 24rpx;
	color: #D6D6D6;
	font-weight: bold;
	text-decoration:line-through;
}
.goods-item-bottom .goods-num{
	height: 80rpx;
}
.goods-item-bottom .cart-class{
	width: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	color: #3DA7E7;
	text-align: center;
	font-size: 40rpx;
	
}
</style>