wx-qhb/pageA/shoptype.vue

<template>
	<view class="">
		<zhSlidingMenu ref='zhSlidingMenu' :tabbar='list' :scrollH="scrollH">
			<template #default="{scroll_list}">
				<view class="goods">
					<view class="goods_item" v-for="(item, index) in scroll_list" :key="index"
						@click="clickGoods(item)">
						<image class="goods_item_img" :src="item.image" mode=""></image>
						<view class="goods_item_name" v-if="language =='zh-CN'">
							{{item.name_cn}}
						</view>
						<view class="goods_item_name" v-if="language =='en-US'">
							{{item.name_en}}
						</view>
						<view class="goods_item_name" v-if="language =='es-ES'">
							{{item.name_es}}
						</view>
						<view class="goods_item_name" v-if="language =='it-IT'">
							{{item.name_ita}}
						</view>
					</view>
				</view>
			</template>
		</zhSlidingMenu>
	</view>
</template>

<script>
	import zhSlidingMenu from '@/components/zh-slidingMenu/zhSlidingMenu/zhSlidingMenu.vue'
	export default {
		components: {
			zhSlidingMenu
		},
		data() {
			return {
				scrollH: 0, //scroll高度
				// list: [{
				// 		name: "女装",
				// 		children: [{
				// 				name: "A字裙",
				// 				icon: "https://cdn.uviewui.com/uview/common/classify/1/1.jpg",
				// 			},
				// 			{
				// 				name: "礼服/婚纱",
				// 				icon: "https://cdn.uviewui.com/uview/common/classify/1/14.jpg",
				// 			}
				// 		]
				// 	},
				// 	{
				// 		name: "美食",
				// 		children: [{
				// 				name: "火锅",
				// 				icon: "https://cdn.uviewui.com/uview/common/classify/2/1.jpg",
				// 			},
				// 			{
				// 				name: "精品茗茶",
				// 				icon: "https://cdn.uviewui.com/uview/common/classify/2/7.jpg",
				// 			},
				// 			{
				// 				name: "休闲食品",
				// 				icon: "https://cdn.uviewui.com/uview/common/classify/2/8.jpg",
				// 			},
				// 		]
				// 	},
				// 	{
				// 		name: "美妆",
				// 		children: [{
				// 				name: "化妆刷",
				// 				icon: "https://cdn.uviewui.com/uview/common/classify/3/1.jpg",
				// 			},
				// 			{
				// 				name: "防晒品",
				// 				icon: "https://cdn.uviewui.com/uview/common/classify/3/14.jpg",
				// 			},
				// 			{
				// 				name: "美甲",
				// 				icon: "https://cdn.uviewui.com/uview/common/classify/3/15.jpg",
				// 			}

				// 		]
				// 	}
				// ],
				language: '',
				list:[]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight
				}
			});
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.i18n.classification
			})
			this.category() //商品分类
			if (uni.getStorageSync('language') != '') {
				this.language = uni.getStorageSync('language')
			}
		},
		methods: {
			clickGoods(item) { //点击商品
				console.log(item);
				if (this.language == 'en-US') {
					uni.navigateTo({
						url: '/pageA/shoplist?id=' + item.id + '&title=' + item.name_en + '&parent_id=' + item
							.parent_id
					})
				}
				if (this.language == 'es-ES') {
					uni.navigateTo({
						url: '/pageA/shoplist?id=' + item.id + '&title=' + item.name_es + '&parent_id=' + item
							.parent_id
					})
				}
				if (this.language == 'it-IT') {
					uni.navigateTo({
						url: '/pageA/shoplist?id=' + item.id + '&title=' + item.name_ita + '&parent_id=' + item
							.parent_id
					})
				}
				if (this.language == 'zh-CN') {
					uni.navigateTo({
						url: '/pageA/shoplist?id=' + item.id + '&title=' + item.name_cn + '&parent_id=' + item
							.parent_id
					})
				}
			},
			//商品分类列表
			category() {
				uni.$u.http.get('/api/goods/category', {
					params: {
						parent_id: 0
					}
				}).then((res) => {
					const categoryArr = res
					if (this.language == 'en-US') {
						categoryArr.forEach(item => {
							item.name = item.name_en
						})
					}
					if (this.language == 'es-ES') {
						categoryArr.forEach(item => {
							item.name = item.name_es
						})
					}
					if (this.language == 'it-IT') {
						categoryArr.forEach(item => {
							item.name = item.name_ita
						})
					}

					if (this.language == 'zh-CN') {
						categoryArr.forEach(item => {
							item.name = item.name_cn
						})
					}
					this.list = categoryArr
					console.log(categoryArr);
				}).catch(() => {

				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.goods {
		display: flex;
		flex-wrap: wrap;

		.goods_item {
			width: 33.3%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-top: 20rpx;

			.goods_item_img {
				width: 120rpx;
				height: 120rpx;
			}

			.goods_item_name {
				color: #333;
				font-size: 28rpx;
				font-weight: 500rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
				text-align: center;
			}
		}

	}
</style>