tongli_WeChat/subPackages/food/foodList.vue

<template>
	<view class="bg">
		<span class="iconfont topLeft" @click="goBack">&#xe660;</span>
		<img :src="showImg(headImg)" class="topImg" />
		<view  class="item" v-for="item in list" :key="item.id" @click="viewDetail(item)">
			<image class="img" :src="showImg(item.image)" mode=""></image>
			<view class="content">
				<view class="title text-overflowRows">
					{{item.title}}
				</view>
				<!-- <view style="display: flex;" v-if="item.goods_new_tag">
					<view class="tagItem1" v-for="(tagItem,tagIndex) in item.goods_new_tag.split(',').slice(0,2)" :key="tagIndex">{{tagItem}}</view>
				</view> -->
				<view>
					<view class="distance text-overflow" v-if="item.open_description">
						<text >营业时间:{{ item.open_description }}</text>
					</view>
					<view class="distance text-overflow" style="padding-top: 12rpx;" v-if="item.distance">
						<text >距您约{{ item.distance/1000 }}km</text>
					</view>
				</view>
				
				<view class="bottom">
					<view class="distance">
						
					</view>
					<view class="price">
						<!-- {{item.low_money/100}} -->
						{{item.money/100}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headImg: '',
				list:[], //列表
				finished: false,
			}
		},
		onReady() {
			this.getHeadImg('food').then(res => {
				this.headImg = res
			})
			this.getList()
		},
		methods: {
			// 根据产品分类获取产品列表
			getList(){
				this.Post({
					type_id: 16,
					offset: this.list.length,
					limit: 10,
					lon: uni.getStorageSync('location').lon || '',
					lat: uni.getStorageSync('location').lat || '',
				},'/api/goods/getGoodsByType').then(res => {
					this.list = [...this.list, ...res.data];
					if (res.data.length < 10) {
						this.finished = true
					}
				})
			},

			viewDetail (item) {
				this.goOtherDetail(item)
				if(!item.link_type) {
					uni.navigateTo({
						url: '/subPackages/food/foodDetail?id=' + item.id
					});
				}
			}
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.finished) this.getList()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		background: #FFFFFF;
		min-height: 100vh;
		padding-bottom: 26rpx;
	}
	
	.topLeft {
		position: absolute;
		left: 26rpx;
		top: 101rpx;
		font-size: 40rpx;
		z-index: 2;
		color: white;
		background: rgba(0,0,0,0.5);
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		box-sizing: border-box;
		padding-right: 5rpx;
	}
	
	.topImg {
		width: 750rpx;
		height: 440rpx;
	}
	
	.item {
		width: 696rpx;
		// height: 213rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(153,153,153,0.38);
		border-radius: 13rpx;
		margin: 27.33rpx auto 0;
		padding: 12.67rpx 19.33rpx 14rpx 13.33rpx;
		display: flex;
	}
	
	.img {
		width: 187rpx;
		height: 187rpx;
		background: #87CD93;
		border-radius: 13rpx;
		margin-right: 22.67rpx;
		flex-shrink: 0;
	}
	
	.content {
		padding:0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.title {
		padding-left: 2.67rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 31rpx;
		color: #000000;
		width: 427rpx;
	}
	
	.tagItem1 {
		width: 128rpx;
		height: 41rpx;
		background: rgba(205,233,209, .3);
		border-radius: 7rpx 5rpx 5rpx 7rpx;
		border: 2rpx solid #87CD93;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 25rpx;
		color: #3C6943;
		text-align: center;
		line-height: 37rpx;
		margin-right: 12rpx;
	}
	
	.bottom {
		width: 452rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.distance {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 27rpx;
		color: #999999;
	}
	
	.price {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 33.33rpx;
		color: #C3282E;
		display: flex;
		align-items: baseline;
	}
	.price::before{
		content: '￥';
		font-size: 24rpx;
	}
	.price::after{
		content: '/人';
		font-size: 24rpx;
	}

</style>