mp_exhibitor_miniprog/pages/components/index.vue

<template>
	<view>
		<nav-bar>
		</nav-bar>
		<van-collapse :value="activeNames" @change="onCollapseChange">
			<van-collapse-item title="轮播图" name="1">
				<u-swiper :items="images"/>
			</van-collapse-item>	
		  <van-collapse-item title="分类下拉组件" name="2">
				<u-dropdown-select v-model="categoryId" placeholder="产品分类" :options="categories" /> 
				<view>选中的ID：{{ categoryId }}</view>
				<view>事件：change</view>
				<view>动态数据：data-api（Function 请求方法），data-params（Object 请求参数）</view>
		  </van-collapse-item>
			<van-collapse-item title="导航组件" name="3">
				<nav-bar />
			</van-collapse-item>	 
		  <van-collapse-item title="环境变量" name="4">
				 <view>通过 process.env.*，获取</view>
				 <view>接口服务器：{{ apiUrl }}</view>
		  </van-collapse-item>
		  <van-collapse-item title="国际化" name="5">
				<view>通过 $t(key（国际化key）, msg（默认消息）, params（替换参数）)</view>
				<view>当前语言：{{ locale }}</view>
				<view>国际化内容：{{ $t('common.close', '关闭') }}</view>
				<van-button type="primary" @click="selectLanguage('zh-cn')">中文</van-button>
				<van-button type="warning" @click="selectLanguage('en-us')">英文</van-button>
		  </van-collapse-item>
		</van-collapse>
		<!-- <u-dropdown-select v-model="categoryId" placeholder="产品分类" :options="categories" /> {{ categoryId }} -->
	</view>
</template>

<script>
	import { getLocale, setLocale } from '../../locales/i18n'
	import UDropdownSelect from '@/components/common/u-dropdown-select/index.vue'
	import USwiper from '@/components/common/u-swiper/index.vue'
	import NavBar from '@/components/layout/nav-bar.vue'

	export default {
		components: {
			UDropdownSelect,
			USwiper,
			NavBar
		},
		data() {
			return {
				locale: '',
				activeNames: ['1'],
				apiUrl: '',
				images: [{
					src: 'https://matchexpo.obs.cn-north-1.myhuaweicloud.com/common/2023/1123/655ebb47a7b70.jpg?x-image-process=image/resize,m_lfit,h_214,w_380'
				}, {
					src: 'https://matchexpo.obs.cn-north-1.myhuaweicloud.com/common/2023/1123/655ec5b54c527.jpg?x-image-process=image/resize,m_lfit,h_214,w_380'
				}, {
					src: 'https://matchexpo.obs.cn-north-1.myhuaweicloud.com/common/2023/1123/655ec1b9d558f.jpg?x-image-process=image/resize,m_lfit,h_214,w_380'
				}],
				categoryId: 11,
				categories: [{
					label: '表面贴装',
					value: 1,
					children: [{
						label: '表面贴装技术',
						value: 11
					}, {
						label: 'PCB焊接和连接技术',
						value: 12
					}, {
						label: '测试测量和质量保证',
						value: 13
					}, {
						label: '电子组装自动化',
						value: 14
					}, {
						label: '生产物流和物流技术',
						value: 15
					}, {
						label: '清洗技术',
						value: 16
					}]
				}, {
					label: '线束加工',
					value: 2
				}, {
					label: '工厂自动化',
					value: 3
				}, {
					label: '点胶注胶',
					value: 4
				}, {
					label: '电子制造服务',
					value: 5
				}, {
					label: '未来服务',
					value: 6
				}]
			}
		},
		created() {
			this.locale = getLocale()
			this.apiUrl = process.env.BASE_API
			console.log('当前环境的API URL: ', this.apiUrl)
		},
		methods: {
			onChange(e) {
				this.active = e.detail
			},
			selectLanguage(language) {
				setLocale(language)
			},
			onCollapseChange(e) {
				console.log('onCollapseChange')
				console.log(e.detail)
				this.activeNames = e.detail
			},
			selectLanguage(language) {
				setLocale(language)
				this.locale = language
			}
		}
	}
</script>

<style lang="scss">
	page{
		font-size: 24rpx;
	}
	.tab-class{
		background-color: red!important;
	}
</style>