meishidaYH/msdYongHu/pages/component/listitemB/listitemB.vue

<template>
	<view style="background-color: white;">
		<!-- <view class="titleview">{{$t('index.toplanmuT')}}</view> -->
		<view class="contentInRowS titleview">
			<text>美食分类</text>
			<text style="color:#40AE36;"> </text>
		</view>
		<scroll-view scroll-view  scroll-x="true" >
			<view class="">
				<view class="item_list">
					<view v-for="(item, index) in fenleiLst">
						<view class="item_content"  @click="fenleixuanz(item.id)">
							<netImage width="130" height="130" :mysrc="item.image" mymode="scaleToFill"></netImage>
							<!-- <image   :src="item.image=='/static/logo.png'?item.image:baseUrl+item.image" mode="widthFix" @error="imageError(index)"></image> -->
							<view class="title">
								<text v-if="lgstate=='zh-Hant'">{{item.nameTw}}</text>
								<text v-if="lgstate=='zh-Hans'">{{item.name}}</text>
								<text v-if="lgstate=='yuenan'">{{item.nameVi}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>	  
	import api from "@/pages/api/api.js";
	//import mendianfenleiData from '@/common/mendianfenlei.js';
	
	export default {
		data() {
			return {
				toptitle:"",
				baseUrl:this.$baseImagurl,
				fenleiLst:[],
				lgstate:''
			};
		},
		created() {
			this.getmendianfenlei();
			this.getMeishifenlei();
		},
		
		methods:{
			fenleixuanz(e){
				this.$emit('Efenleixuanze',e);
			},
			imageError(index){
				this.fenleiLst[index]['image'] = '/static/logo.png';//默认图片 
			},
			
			getMeishifenlei(){
				this.lgstate = uni.getStorageSync('language');
				var that = this;
				
				api('listByTag',{
					tag:'food'
				},res=>{
					console.log('listByTag',res)
					if(res.data.code==200){
						that.fenleiLst=res.data.data;
						//console.log('1---------------',that.fenleiLst)
					}
				},failc=>{
					uni.showToast({
					    title: that.$t('api.wangluoshibai'),
					    icon: 'none',
					    duration: 2500
					})
				})
			},
			
			getmendianfenlei(){
				this.lgstate = uni.getStorageSync('language');
				var that = this;
				
				api('getmendianfenlei',{
					pageSize:40
				},res=>{
					//console.log(res)
					if(res.data.code==200){
						that.fenleiLst=res.data.rows;
						//console.log('1---------------',that.fenleiLst)
					}
				},failc=>{
					uni.showToast({
					    title: that.$t('api.wangluoshibai'),
					    icon: 'none',
					    duration: 2500
					})
				})
			},
		}
		
	}
</script>

<style lang="scss">

@font-face {
	font-family: zrht;
	src: url('/uni_modules/font/zrht.otf');
}

	.item_list{
		padding-left: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	
	.item_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;
		}
	}	
	.titleview{
		margin-left: 5%;
		width: 90%;
		padding-top: 22rpx;
		font-size: 30rpx;
		line-height: 46rpx;
	}
		
</style>