qingyuan/pagesA/lifeServices/lifeServices.vue

<template>
	<view style="min-height: 100vh;background-color: #f8f8f8;box-sizing: border-box;">
		<view style="padding: 0px 30upx;">
			<tabs-c :cc_id="cc_id" pageType="" @changeChildType="changeChildType" @search="search" :searchNeed="true"></tabs-c>
		</view>
		<view class="content_wrapper">
			<view v-for="(item,index) in dataList" :key="index" class="list-item" @click="toDetail(item.url)">
				<view class="img-box">
					<image :src="item.logo" mode="aspectFill"></image>
					<view class="text3">
						<!-- <text>{{item.city}}/{{item.address}}</text> -->
						<text style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">{{item.store_address}}</text>
						<text style="margin: 0px 3px;">|</text>
						<view style="">
							<text class="iconfont icon-daohang1"></text>
							<!-- <image style="width: 20upx;height: 20upx;padding-right: 4upx;" :src="imgfixUrls + 'merchant/where.svg'" /> -->
							{{item.distance}}
						</view>
					</view>
				</view>
				<view class="text-box">
					<view class="text1">{{item.goods_name}}</view>
					<view class="text2">
						<text style="color: #D3101E;font-size: 12px;margin-left: -2px;">￥{{item.price}}</text>
						<text style="color: #999999;font-size: 12px;margin: 0px 4px;text-decoration: line-through;">￥{{item.oldprice}}</text>
						<text style="color: #999999;font-size: 12px;flex:1;text-align: right;">已售{{item.buy_num}}</text>
					</view>
				</view>
			</view>
			<view v-if="dataList.length==0" style="width: 100%;">
				<loadmore :isMore="true" v-if="dataList.length=='0'" />
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import loadmore from '@/components/template/loadmore.vue'
	import tabsC from '@/components/template/tabs/tabs-copy.vue';
	export default {
		data() {
			return {
				page: 1,
				dataList: [],
				cc_id: "51",//生活服务大类
				cc_cc_id: '',//当前选中的子类
				keyword: "",
				lat: "",
				lng: ""
			}
		},
		components: {
			loadmore,
			tabsC
		},
		created() {
			let _this = this;
			uni.getLocation({
				success: function(res) {
					console.log(res, 11111)
					_this.lat = res.latitude;
					_this.lng = res.longitude;
				},
				fail(err) {
					console.log(err, 222222)
				}
			});
		},
		onLoad(e){
			console.log(e, '-----');
			if(e.cc_id){
				this.cc_id = e.cc_id;
			};
		},
		onShow() {
			this.page = 1;
			this.getList();
		},
		methods: {
			getList(type){
				let _this = this;
				let data = {
					cate_id: "0",
					is_total: "1",
					// cc_child_id: this.cc_cc_id,
					cc_id: this.cc_id,
					page: this.page,
					sort: 3,
					lng: this.lng,
					lat: this.lat
				}
				if(type=='search'){
					data.title = this.keyword;
				}
				if(this.cc_cc_id==54){//54是推荐
					data.recommend = 1;
				}else{
					data.cc_child_id = this.cc_cc_id;
				}
				console.log(data, 'p------');
				App._post_form('&p=rush&do=homeList', data, res => {
					if(_this.page===1){
						if(res.data.list.length>0){
							_this.setData({
								dataList: res.data.list
							})
						}else{
							_this.setData({
								dataList: []
							})
						}
					}else{
						if(res.data.list.length>0){
							let dataList = _this.dataList.concat(res.data.list);
							_this.setData({
								dataList
							})
						}
					}
				}, false, err=>{
					
				});
			},
			toDetail(url){
				let isHttpUrl = url.indexOf('https') !== -1;
				if (isHttpUrl) {
					//#ifdef H5
					location.href = url;
					//#endif
					//#ifdef MP-WEIXIN
					App.navigationTo({
						url
					});
					//#endif
				} else {
					App.navigationTo({
						url
					});
				}
			},
			changeChildType(e){
				console.log(e);
				this.page = 1;
				this.cc_cc_id = e;
				this.keyword = '';
				if(this.lng){
					this.getList();
				}else{
					setTimeout(()=>{
						this.changeChildType(e)
					},200)
				}
				
			},
			search(e){
				this.keyword = e;
				this.page = 1;
				this.getList('search');
			}
		},
		onReachBottom(){
			this.page++;
			if(this.keyword){
				this.getList('search');
				return;
			}
			this.getList();
		}
	}
</script>

<style lang="scss">
.dis-flex{
	display: flex;
	align-items: center;
}
.content_wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0px 12px 20px 12px;
	
	.list-item{
		width: 340upx;
		// display: flex;
		// padding: 15px 0px;
		background-color: #FFF;
		// border-bottom: 1px solid #efefef;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
		margin-bottom: 11px;
		position: relative;
	}
	.img-box{
		width: 340upx;
		height: 252upx;
		position: relative;
		margin-bottom: 5px;
		
		image{
			width: 100%;
			height: 100%;
			border-radius: 5px 5px 0px 0px;
		}
		.text3{
			width: 100%;
			padding: 4px 8px;
			box-sizing: border-box;
			position: absolute;
			bottom: 0px;
			left: 0px;
			color: #fff;
			background: rgba(0,0,0,0.2);
			font-size: 12px;
			display: flex;
			justify-content: space-between;
			
			.iconfont{
				font-size: 13px;
				padding-right: 2px;
			}
		}
	}
	
	.text-box{
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0px 10px 10px;
	}
	.text1{
		height: 44px;
		font-size: 14px;line-height: 22px;
		display: -webkit-box;//将盒子转换为弹性盒子
		-webkit-box-orient: vertical;//文本显示方式，默认水平
		-webkit-line-clamp: 2;//设置显示多少行
		overflow: hidden;
		color: #444;
	}
	.text2{
		display: flex;
		align-items: center;
	}
	.label{
		position: absolute;
		top: 0px;
		font-size: 10px;
		padding: 3px 5px;
		color: #666;
		background: rgba(255,255,255,0.5);
	}
}
</style>