meishidaYH/msdYongHu/pages/shanpinxungou/shangpin/shangpinList/shangpinList.vue

<template>
	<view>
		<view class="toptalbarCtv">
			<customNav :shownav="true" :title="$t('goods.meishiss')" titledetl=""></customNav>
			<view :style="{top: statusBarHeight+'rpx'}">
				<uni-search-bar class="searchbar" :placeholder="$t('goods.meishiss')" cancelButton="none" locateButton="always" v-on:confirm="searchAct"></uni-search-bar>
				<view class="contentInRowC" style="padding-top: 10rpx;padding-bottom: 10rpx;background-color: #efeff4;;">
					<text class="tipyLBt" :style="BtState==1?'background-color:white;color:black':''" @click="BtStatesl(1)">{{$t('index.goodslist')}}</text>
					<text class="tipyRBt" :style="BtState==2?'background-color:white;color:black':''" @click="BtStatesl(2)">{{$t('index.mendianliebiao')}}</text>
				</view>
			</view>
		</view>
		
		<view style="margin-top: 380rpx;">
			<view v-if="!listShow" class="keywordct">
				<text style="margin-top: 40rpx;font-weight: bold;">{{$t('goods.shousuojl')}}</text>
				<view v-if="!listShow" class="keywordLct" >
					<image style="width: 50rpx;height:50rpx; margin-right: 16rpx;" src="/static/images/time@3x.png" mode="widthFix"></image>
					<view class="keywordL" v-for="keyword in searchKeyWord">
						<label class="" @click="seachwordSl(keyword)">{{keyword}}</label>
					</view>
				</view>
			</view>
			
			
			<view v-if="!listShow" class="keywordct">
				<text style="margin-top: 40rpx;font-weight: bold;">{{$t('goods.remenss')}}</text>
				<view class="keywordLct" >
					<view class="keywordL" v-for="keyword in defKeyWord">
						<label class="" @click="seachwordSl(keyword)">{{keyword}}</label>
					</view>
				</view>
			</view>
			<view v-if="listShow&&BtState==1" style="background-color:#efeff4;">
				<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
				<view class="contentColumnC" style="width: 94%;margin-left: 3%;" v-for="(item,index) in food" :key="index">
					<view class="item_content2" >
						<view class="buyctT" @click="gotoDetail(item.id)">
							<myImage class="goodimage" :mysrc="item.image" mymode="scaleToFill"></myImage>
							<view class="msText">
								<view class="contentColumn">
									<view>
										<text class="dianpuming">{{item.name}}</text>
									</view>
									<text class="peisongsuoming">{{item.introduce}}</text>
								</view>
								
								<view class="buyBTSB">
									<text class="peisongsuoming">{{$formPr(item.price)}}{{$t('locale.huobidw')}}</text>
									<text class="peisongsuoming">{{yuexiaoliang(0)}}</text>
								</view>
							</view>
						</view>
						<view style="width: 94%;background-color:papayawhip;height: 2rpx;margin-left: 3%;"></view>
						<view class="buyct" @click="gotomendian(item.store.id)">
							
							<!-- <myImage class="sjimage" :mysrc="item.store.logo" mymode="scaleToFill"></myImage> -->
							<netImage width="120" height="120" bradius="60" :mysrc="item.store.logo" mymode="scaleToFill"></netImage>
							<view class="msText">
								<text class="dianpuming">{{item.store.posName}}</text>
								<view class="buyBT">
									<image class="xingxing" src="/static/images/xingxing@3x.png" mode="aspectFit"></image>
									<text class="pingfentext">4.9</text>
									<text class="mainyuntishi">{{$t('index.manX')}} {{$formPr(item.store.posPrice)}}{{$t('locale.huobidw')}}</text>
								</view>
								<view class="buyBT">
									<text class="shijiantishi">{{$t('mend.waisongsj')}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="listShow&&BtState==2" style="background-color:#efeff4;">
				<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
				<view class="contentColumn" style="width:700rpx;margin-left:25rpx;margin-top: 20rpx;" v-for="(item,index) in store" :key="index">
					<view class="buyct" @click="gotomendian(item.id)">
						
						<!-- <myImage class="sjimage" :mysrc="item.store.logo" mymode="scaleToFill"></myImage> -->
						<netImage width="120" height="120" bradius="60" :mysrc="item.logo" mymode="scaleToFill"></netImage>
						<view class="msText">
							<text class="dianpuming">{{item.posName}}</text>
							<view class="buyBT">
								<image class="xingxing" src="/static/images/xingxing@3x.png" mode="aspectFit"></image>
								<text class="pingfentext">4.9</text>
								<text class="mainyuntishi">{{$t('index.manX')}} {{$formPr(item.posPrice)}}{{$t('locale.huobidw')}}</text>
							</view>
							<view class="buyBT">
								<text class="shijiantishi">{{$t('mend.waisongsj')}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/pages/api/api.js"
	export default {
		components: {},
		data() {
			return {
				
				statusBarHeight:0,
				store:[],
				food:[],
				BtState:1,
				loading:false,
				searchKeyWord:[],
				defKeyWord:['卤味','鸡排','香酥鸡','粥','冰饮','铁板饭','盖浇饭','牛排','炸鸡','烤鸭'],
				listShow:false,
				
			};
		},
		onLoad() {
			var systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight=systemInfo.statusBarHeight*2+100;
			var data = uni.getStorageSync("searchKeyWord" );
			if(null==data||''==data||undefined==data){
				this.searchKeyWord=[];
			}
			else{
				this.searchKeyWord = JSON.parse(data);
			}
			var str = this.$t('goods.shousoreci');
			this.defKeyWord = str.split(',');
		},
		methods: {
			
			yuexiaoliang(sul){
				if(sul==0){
					sul = Math.floor(Math.random()*(300))+50;
				}
				var str = '';
				var language = uni.getStorageSync('language');
				if(language=='yuenan'){
					str = 'Bán '+sul+'+ mỗi tháng';
				}
				else if(language=='zh-Hans'){
					str =this.$t('comp.yuexiao')+sul+'+';
				}
				else if(language=='zh-Hant'){
					str =this.$t('comp.yuexiao')+sul+'+';
				}
				return str;
			},
			
			BtStatesl(index){
				this.BtState=index;
			},
			gotoDetail(e){
				console.log(e);
				uni.navigateTo({
					url:'/pages/shanpinxungou/shangpin/shangpinxiangqing?id='+e
				})
			},
			gotomendian(id){
				uni.navigateTo({
					url:'/pages/shanpinxungou/shangjia/merchantdetail?id='+id+'&isShangjia=0'
				})
			},
			seachwordSl(keyword){
				console.log(keyword);
				this.searchGoods(keyword);
			},
			searchAct(e){
				console.log(e)
				this.searchGoods(e.value);
				var index=-1;
				for(var i=0;i<this.searchKeyWord.length;i++){
					if(this.searchKeyWord[i]==e.value){
						index=i;
						break
					}
				}
				if(index<0){
					this.searchKeyWord.push(e.value);
					if(this.searchKeyWord.length>10){
						this.searchKeyWord.shift();
					}
				}
				else{
					this.searchKeyWord.push(e.value);
					this.searchKeyWord.splice(index, 1)
				}
				var temp = JSON.stringify(this.searchKeyWord);
				uni.setStorageSync("searchKeyWord",temp);
			},
			searchGoods(keyword){
				var language = uni.getStorageSync('language');
				var lang=0;
				if(language=='yuenan'){//0
					lang=0;
				}
				if(language=='zh-Hans'){//2
					lang=2;
				}
				if(language=='zh-Hant'){//3
					lang=3;
				}
				
				api('searchfor',{
					page:1,
					size:20,
					keyword:keyword,
					language:lang
				},res=>{
					console.log(res)
					if(res.data.code==200){
						this.store = res.data.data.store;
						this.food = res.data.data.food; 
						this.listShow=true;
					}
					
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
		},
		
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			
		}
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #efeff4;
	min-height: 100%;
	height: auto;
}

.toptalbarCtv{
	position: fixed;
	background-color:  #40AE36;
	left: 0;
	right: 0;
	top: 0;
	z-index: 999;
}
.searchbar{
	background-color:  #40AE36;
	margin-top: 20rpx;
}

.tipyLBt{
	font-size: 28rpx;
	width: 40%;
	border-radius: 6px 0px 0px 6px;
	border: 2rpx solid lightgray;
	line-height: 64rpx;
	text-align: center;
	color: darkgray;
}

.tipyRBt{
	font-size: 28rpx;
	width: 40%;
	border-radius: 0px 6px 6px 0px;
	border: 2rpx solid lightgray;
	line-height: 64rpx;
	text-align: center;
	color: darkgray;
}

.keywordct{
	display: flex;
	flex-direction: column;
	padding: 0 40rpx;
}


.keywordLct{
	display: flex;
	flex-wrap: wrap;
	justify-content:flex-start;
	align-items:center;
}

.keywordL{
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-top: 8rpx;
	padding-bottom: 8rpx;
	margin-right: 20rpx;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	text-align: center;
	box-sizing: border-box;
	border: 2rpx solid lightgray;
	border-radius: 30rpx;
}

	.item_content2{
		background:white;
		height: 356rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		border: 2rpx solid lightgray;
	}
	.item_content{
		background:white;
		height: 520rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		border: 2rpx solid lightgray;
	}
	.buyctT{
		height: 160rpx;
		padding: 14rpx;
		display: flex;
		flex-direction: row;
	}
	.buyct{
		height: 140rpx;
		padding: 14rpx;
		display: flex;
		flex-direction: row;
		background-color: snow;
	}
	.goodimage{
		width: 160rpx;
		height: 160rpx;
		background-color: whitesmoke;
	}
	.sjimage{
		width: 120rpx;
		height: 120rpx;
		background-color: whitesmoke;
	}
	.buyBTSB{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
	}
	
	.buyBT{
		display: flex;
		flex-direction: row;
		justify-content:left;
		align-items: center;
	}

	.msText{
		width: 530rpx;
		padding-left: 10rpx;
		font-size: 22rpx;
		line-height: 32rpx;
	}
	.dianpuming{
		font-size: 30rpx;
		line-height: 32rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.peisongsuoming{
		font-size: 26rpx;
		line-height: 38rpx;
		height: 38rpx;
		color: dimgray;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.xingxing{
		width: 40rpx;
		height: 40rpx;
	}
	.pingfentext{
		font-size: 26rpx;
		line-height: 40rpx;
		height: 40rpx;
		color:sandybrown;
	}
	.mainyuntishi{
		margin-left: 30rpx;
		padding-left: 8rpx;
		padding-right: 8rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		height: 40rpx;
		color: dimgray;
		background-color: burlywood;
		border-radius: 4rpx;
	}
	.shijiantishi{
		margin-left: 30rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		height: 40rpx;
		color: dimgray;
	}
	.youhuixinxi{
		margin-right: 10rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		height: 40rpx;
		color: lightcoral;
		border: 2rpx solid lightcoral;
		border-radius: 8rpx;
	}
	.title{
		padding-top: 8rpx;
		padding-left: 8rpx;
		width: 100%;
		text-align: left;
		font-weight:initial;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.Dishes{
		width: 100%;
		text-align: left;
		padding-left: 8rpx;
		color: darkgray;
	}
	
	.price{
		text-align: left;
		//line-height: 28rpx;
		color: black;
		padding-left: 8rpx;
	}
</style>