boying/pages/public/nav.vue

<template>
	<view class="box">
		<view class="header-box">
			<view class="top-box">
				<view class="box-right"><wyb-drop-down :zIndex="1" class="han-box" ref="dropDown" :options="options" @select="onItemSelect"></wyb-drop-down></view>
			</view>
		</view>
	</view>
</template>

<script>
import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue';
import { mapState, mapMutations } from 'vuex';
// import { goodslist,allist,aboutlist, fllist } from '../../api/api.js';
export default {
	components: {
		wybDropDown
	},
	computed: {
		...mapState(['lang'])
	},
	watch: {
		lang(val) {
			this.$set(this.options[0], 'header', this.$t('hea.yy'));
		}
	},
	data() {
		return {
			show: false,
			options: [
				{
					header: 'Language',
					contents: ['中文', 'english']
				}
			],
			langlist: ['zh_cn', 'en'],
			// 弹窗分类样式
			itemStyle: {
				fontSize: '36rpx',
				fontWeight: 'bold'
			},
			//  弹窗标题样式
			titleStyle: {
				'font-size': '40rpx'
			},
			//弹窗当前idnex
			swIndex: 0,
			checkedIndex: 0, //设置当前选中的分类对象
			popList: [
				{
					type: 'product',
					title: '公司产品',
					list: [], //保存商品列表
					loding: false, //判断是否加载中
					more: 'loadmore' //判断是否还可以加载数据
				},
				{
					type: 'cases',
					title: '方案案例',
					list: [], //保存商品列表
					loding: false, //判断是否加载中
					more: 'loadmore' //判断是否还可以加载数据
				},
				{
					type: 'about',
					title: '关于我们',
					list: [], //保存商品列表
					loding: false, //判断是否加载中
					more: 'loadmore' //判断是否还可以加载数据
				}
			],
			// 自定义加载文本
			loadText: {
				loadmore: 'loading...',
				loading: 'loading...',
				nomore: 'ready'
			}
		};
	},
	created() {
		// this.init();
		const lang = uni.getStorageSync('lang') || 0;
		this.$store.commit('changelang', this.langlist[lang]);
	},
	methods: {
		// 下拉选择语言分类
		onItemSelect(e) {
			const lang = this.langlist[e.contentIndex];
			uni.setStorageSync('lang', e.contentIndex);
			this.$store.commit('changelang', lang);
			this.$i18n.locale = lang;
			// 保存当前选中的对象
			this.$emit('changeSelect', e);
			this.$refs.dropDown.close();
			console.log(lang);
		}
	}
};
</script>

<style lang="scss">
.alertSw {
	height: 100vh;
	.item {
		padding-top: 100rpx;
	}
}
/deep/ .collapseItemBox {
	.title {
		padding: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #101010;
	}
}
.margin-t-40 {
	margin-top: 40rpx;
}
.alertColl,
.pop-box,
.header-box {
	padding: 0 30rpx;
}
.navtoIndex {
	font-size: 41rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	padding-left: 30rpx;
}
.pop-box {
	position: relative;
	width: 700rpx;
	padding-right: 15rpx;
	.box-right {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: right;
		// margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		.item {
			padding: 30rpx;
		}
	}
	.collapse-item {
		font-weight: 500;
		.item-box {
			font-size: 28rpx;
			color: #101010;
			// margin-bottom: 15rpx;
			line-height: 50rpx;
		}
	}
}
.header-box {
	width: 750rpx;
	height: 100rpx;
	background: #000;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	position: flex;
	top: var(--status-bar-height);
	left: 0;
	z-index: 1000;
	.box-center {
		flex: 1;
		text-align: center;
		margin-left: 180rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
	}

	.box-right {
		width: 180rpx;
		text-align: right;
		position: relative;
		height: calc(100% - 1px);
		overflow: hidden;
		/deep/ .wyb-drop-down-header {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
		/deep/ .wyb-drop-down-content {
			top: 88rpx;
		}
	}
	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100rpx;
		z-index: 99999;
		.top-left {
			height: 100%;
			display: flex;
			align-items: center;
			flex-grow: 1;
			background-color: #e3e3e3;
			.logo-img {
				width: 314rpx;
				height: 43rpx;
			}
		}
		.top-right,
		.top-left {
			z-index: 99999;
			background-color: #ffffff;
		}
		.top-right {
			padding-left: 20rpx;
			height: 100%;
			display: flex;
			align-items: center;
		}
	}
}
</style>