meishidaYH/msdYongHu/pages/shanpinxungou/shangjia/shangjia.vue

<template>
	<view class="contentV">
		<customNav :shownav="true" :title="$t('index.mendianliebiao')" titledetl=""></customNav>
		<view class="contentColumnC" style="margin-top: 16rpx;">
			<view class="item_content" v-for="(item,index) in mendianList" @click="gotoDetail(item.id)">
				<view class="contentInRowS">
					<netImage width="130" height="130" :mysrc="item.logo" mymode="scaleToFill"></netImage>
					<view class="contentColumn" style="width:520rpx ;">
						<text class="text2row" style="font-size: 30rpx;">{{item.posName}}</text>
						<view class="contentInRowS">
							<text style="font-size: 26rpx;color: brown;">{{item.pingf}}分</text>
							<text style="font-size: 26rpx;color: green;">月售{{item.ddsl}}+</text>
						</view>
						<view class="contentInRowS">
							<text style="font-size: 26rpx;color:dimgrey;">{{item.posPrice}}起送</text>
							<text style="font-size: 26rpx;">距离{{item.juli}}Km</text>
						</view>
						<view class="contentInRowL">
							<text class="notTextA" style="font-size: 28rpx;">新客优惠</text>
							<text class="notTextA" style="font-size: 28rpx;">超好吃</text>
						</view>
					</view>
				</view>
				<view class="">
					<scroll-view scroll-view  scroll-x="true" >
						<view class="item_list">
							<view v-for="(item1, index) in item.foodList">
								<view class="itemA_content">
									<netImage width="130" height="130" :mysrc="item1.image" mymode="scaleToFill"></netImage>
									<view class="contentColumnC title">
										<text class="text2row" >{{item1.name}}</text>
										<text>{{item1.price}}</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	import api from "@/pages/api/api.js";
	export default {
		components: {},
		data() {
			return {
				// 数据表名
				//collection: 'opendb-mall-goods',
				// 查询字段，多个字段用 , 分割
				//field: 'goods_thumb,name,goods_tip,tag,goods_price,comment_count,month_sell_count,shop_name',
				formData: {
					status: 'loading', // 加载状态
				},
				tipShow: false ,// 是否显示顶部提示框
				data:'',
				mendianList:[],
				status:'more',
				loading:true,
				latitude:0,
				longitude:0,
				typeID:'',
				serverType:'',
				clickable:true,
				page:1,
				juli:0
			};
		},
		onLoad(option) {
			console.log('option',option);
			var tempjuli=uni.getStorageSync('FuWujuli');
			if(''==tempjuli||null==tempjuli||undefined==tempjuli){
				this.juli=10;
			}
			else{
				this.juli=tempjuli;
			}
			
			this.typeID=option.id;
			this.serverType=option.serverType;
			this.latitude = option.latitude;
			this.longitude = option.longitude;
			if(null==this.serverType||undefined==this.serverType||''==this.serverType){
				this.getmendianlist(1);
				this.status = 'more';
			}
			else{
				this.getserverlist(1);
				this.status = 'more';
			}
			this.formData.status = 'loading'
		},
		methods: {
			/*
			load(data, ended) {
				if (ended) {
					this.formData.status = 'noMore'
				}
			},
			*/
			gotoDetail(e){
				console.log(e);
				uni.navigateTo({
					url:'/pages/shanpinxungou/shangjia/merchantdetail?id='+e
				})
			},
			getmendianlist(page){
				this.tipShow = true;
				var data;
				var language='zh-TW';
				if(null==this.typeID||undefined==this.typeID||''==this.typeID){
					data= {
						longitude:this.longitude,
						latitude:this.latitude,
						page:page,
						flId:0,
						language:language
					}
				}
				else{
					data= {
						longitude:this.longitude,
						latitude:this.latitude,
						page:page,
						flId:this.typeID,
						language:language
					}
				}
				//console.log(data)
				api('getStoreList',data,
				r=>{
					console.log(r.data.data);
					if(this.page==1){
						this.mendianList=r.data.data.records;
					}
					else{
						if(r.data.data&&r.data.data.records.length>0){
							this.mendianList=this.mendianList.concat(r.data.data.records)
						}
						else{
							this.status = 'noMore';
						}
					}
					//console.log(this.mendianList)
					uni.stopPullDownRefresh()
					this.tipShow = false
				},failc=>{
					console.log(failc)
					uni.stopPullDownRefresh()
					this.tipShow = false
				})
			},
			getserverlist(page){
				this.formData.status = 'more';
				this.tipShow = true;
				var data= {
					longitude:this.longitude,
					latitude:this.latitude,
					page:page,
					area:'',
					serverType:this.serverType,
					juli:this.juli
				};
				console.log('getserverlist',data);
				
				api('getaddressList',data,
				r=>{
					console.log(r.data.data);
					if(this.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{
							this.status = 'noMore';
						}
					}
					uni.stopPullDownRefresh()
					this.tipShow = false
				},failc=>{
					uni.stopPullDownRefresh()
					this.tipShow = false
				})
			},
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.getmendianlist(1);
			this.status = 'more';
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.page = this.page+1;
			this.getmendianlist(this.page);
		},
	};
</script>

<style lang="scss">
	

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
.item_content{
  	background: white;
  	width: 660rpx;
	margin-bottom: 30rpx;
	padding: 16rpx;
	border-radius: 16rpx;
  }
  .item_list{
  	padding-left: 40rpx;
  	display: flex;
  	flex-direction: row;
  	justify-content: flex-start;
  }
  
  .itemA_content{
  	width: 150rpx;
  	height: 220rpx;
  	margin: 16rpx 0;
  	padding: 14rpx;
  	box-sizing: border-box;
  	image{
  		width: 130rpx;
  		height:130rpx;
  		background-color:whitesmoke;
  		display: block;
  	}
  	
  	.title{
  		width: 100%;
  		text-align: center;
  		font-size: 24rpx;
  		line-height: 30rpx;
  		padding-top: 4rpx;
  	}
  }	
  
</style>