cte-share/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>