meishidaYH/msdYongHu/pages/component/listItemC/listItemC.vue

<template>
	<view style="background-color: white;">
		<view class="titleview ztextfontB1">{{$t('index.toplanmuT')}}</view>
		<view class="item_list" style="width: 90%;">
			<view class="item_content"  v-for="(item, index) in fenleiLst" @click="fenleixuanz(item.id)">
				<!--<myImage  :mysrc="item.image" mymode="widthFix"></myImage>-->
				<image  :src="item.image=='/static/logo.png'?item.image:baseUrl+item.image" mode="scaleToFill" @error="imageError(index)"></image>
				<view class="title textfontB5">
					<text v-if="lgstate=='zh-Hans'">{{item.name}}</text>
					<text v-if="lgstate=='yuenan'">{{item.nameVi}}</text>
					<text v-if="lgstate=='zh-Hant'">{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/pages/api/api.js"

	export default {
		data() {
			return {
				toptitle:"",
				baseUrl:this.$baseImagurl,
				fenleiLst:[],
				lgstate:''
			};
		},
		created() {
			var yszche=uni.getStorageSync('yszche');
			if(1!=yszche){
			}
			else{
				this.getmendianfenlei();
			}
			
		},
		
		methods:{
			fenleixuanz(e){
				this.$emit('Efenleixuanze',e);
			},
			imageError(index){
				this.fenleiLst[index]['image'] = '/static/logo.png';//默认图片 
			},
			getmendianfenlei(){
				this.lgstate = uni.getStorageSync('language');
				var that = this;
				api('getmendianfenlei',{
					pageSize:40
				},res=>{
					if(res.data.code==200){
						that.fenleiLst=res.data.rows;
						//console.log('1---------------',that.fenleiLst)
					}
				},failc=>{
					//console.log('2---------------',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: 0 15rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.item_content{
			width: 20%;
			height: 200rpx;
			margin: 20rpx 0;
			padding: 14rpx;
			box-sizing: border-box;
			image{
				width: 120rpx;
				height: 120rpx;
				display: block;
				background-color:floralwhite;
				border: 1rpx solid lightgray;
			}
			
			.title{
				width: 100%;
				text-align: center;
				height: 60rpx;
				//line-height: 40rpx;
				padding-bottom: 10rpx;
				padding-top: 4rpx;
			}
		}
	}
			
	.titleview{
		padding-left: 40rpx;
		padding-top: 22rpx;
		line-height: 46rpx;
	}
		
</style>