cte-share/pages/index/fuwuleixingList.vue

<template>
	<view>
		<customNav :shownav="true" :title="title" titledetl=""></customNav>
		<view class="contentV">
			<uni-search-bar class="searchbar" :placeholder="$t('index.searchgoods')" cancelButton="none" locateButton="always" :readonly="true" v-on:searchClick="searchClick"></uni-search-bar>
			<listitemB v-on:Efenleixuanze="fenleixuanze"></listitemB>
			<text class="textfontB3" style="font-weight: bold;margin-left: 40rpx;margin-top: 20rpx;">{{$t('comp.rementj')}}</text>
			<view class="contentColumnC" style="margin-top: 16rpx;">
				<view class="item_content" v-for="(item,index) in mendianList" @click="mendianxuanze(item.id)">
					<imageconver :isremen="true" :isyouhui="false" :youhuinote="''" class="mainimage" :imagSrc="item.image"></imageconver>
					<view class="title textfontB3">
						<text>{{item.posName}}</text>
					</view>
					<view class="contentInRowS price textfontB5">
						<text>{{$t('index.manX')}} {{$formPr(item.posPrice)}}{{$t('locale.huobidw')}}</text>
						<text class="textfontB5" style="color:#00A6FF;">{{$formPr(item.juli)}}Km</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/pages/api/api.js";
	import listitemB from "@/pages/component/listitemB/listitemB.vue";
	export default {
		components:{
			listitemB,
		},
		data() {
			return {
				title:'',
				latitude:0,
				longitude:0,
				typeID:'',
				serverType:'',
				mendianList:[],
				juli:0,
				pageindex:1,
			}
		},
		onLoad(option) {
			this.serverType=option.serverType;
			this.latitude = option.latitude;
			this.longitude = option.longitude;
		},
		onShow() {
			var tempjuli=uni.getStorageSync('FuWujuli');
			if(''==tempjuli||null==tempjuli||undefined==tempjuli){
				this.juli=10;
			}
			else{
				this.juli=tempjuli;
			}
			if(this.serverType.length>0){
				this.pageindex=1;
				this.getserverlist(this.pageindex);
			}
			
		},
		methods: {
			searchClick(item){
				uni.navigateTo({
					url:'/pages/shanpinxungou/shangpin/shangpinList/shangpinList'
				})
			},
			fenleixuanze(id){
				uni.navigateTo({
					url:'/pages/shanpinxungou/shangjia/shangjia?id='+id+'&latitude='+this.latitude+'&longitude='+this.longitude
				})
				return;
			},
			mendianxuanze(id){
				uni.navigateTo({
					url:'/pages/shanpinxungou/shangjia/shangjiaView?id='+id+'&isShangjia=0'
				})
			},
			getserverlist(page){
				var data= {
					longitude:this.longitude,
					latitude:this.latitude,
					page:page,
					area:'',
					serverType:this.serverType,
					juli:this.juli
				};
				//console.log('getserverlist',data);
				api('getserverlist',data,
				r=>{
					console.log(r.data.data);
					if(page==1){
						this.mendianList=r.data.data;
					}
					else{
						if(r.data.data.length>0){
							var temp = this.mendianList;
							for(var i=0;i<r.data.data.length;i++){
								temp.push(r.data.data[i]);
							}
							this.mendianList=temp;
						}
						else{
							
						}
					}
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			this.pageindex=1;
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			console.log('onReachBottom',this.pageindex)
			this.pageindex=this.pageindex+1;
			this.getserverlist(this.pageindex);
		},
	}
</script>

<style lang="scss">
	.contentV{
		width: 100%;
	}
	.searchbar{
		background-color: #00A6FF;
		padding-top: 30rpx;
	}
	.title{
		padding-top: 8rpx;
		width: 100%;
		text-align: left;
	}
	.item_content{
		background: white;
		width: 660rpx;
		height: 510rpx;
	}
	.mainimage{
		width: 660rpx;
		height: 330rpx;
		display: block;
		border-radius: 16rpx;
		background-color:floralwhite;
		border: 1rpx solid lightgray;
	}
	.Dishes{
		width: 100%;
		text-align: left;
		color: darkgray;
		font-size: 26rpx;
	}
	.price{
		width: 100%;
		text-align: left;
		//line-height: 28rpx;
		color: black;
	}
</style>