NN2022060801/addons/otcapp/pages/h5/header.vue

<template>
	<view :class="'header'+(type==2?' fixed-header':'')" v-if="platform">
		<view class="name">
			<image class="logo" v-if="platform.site_logo" :src="platform.site_logo" mode=""></image>
			<text class="text">{{platform.site_name? platform.site_name : 'OTC168'}}</text>
		</view>
		<view class="lang" @click="switchLang">
			<text class="text zh-cn" v-if="this.locale == 'zh_cn'">{{lang.zh_cn}}</text>
			<text class="text en" v-else>{{lang.en}}</text>
			<image class="icon locale en" v-if="this.locale == 'zh_cn'" src="/static/icons/en_light.png" mode="">
			</image>
			<image class="icon locale zh-cn" v-else src="/static/icons/zh-light.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		switchLocale
	} from '@/common/checker.js'
	export default {
		props: {
			platform: {
				type: Object
			},
			type: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {}
		},
		methods: {
			switchLang() {
				let _this = this
				let lang = switchLocale();
				let locale = uni.getStorageSync('locale')
				console.log(locale)
				this.$request.sendToken('/api/lang/switch', {
					locale: locale == 'en' ? 'en' : 'zh-cn'
				}, 'POST').then(res => {
					if (res.success == true) {
						_this.lang = this.lang
						location.reload()
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: 120rpx;
		line-height: 120rpx;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 996;
		display: flex;


		.logo {
			width: 60rpx;
			height: 60rpx;
			vertical-align: middle;
			margin-right: 10rpx;
		}

		.name {
			margin-left: 38rpx;
			color: #fff;
			font-size: 44rpx;
			font-weight: bold;
			width: calc(100% - 220rpx);

		}

		.lang {
			// width: 100rpx;
			float: right;
			text-align: center;
			margin-right: 19rpx;

			.icon {
				display: inline-block;
				width: 72rpx;
				height: 72rpx;
				vertical-align: middle;

			}

			.text {
				color: #fff;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
			}
		}
	}

	.fixed-header {
		background: linear-gradient(-6deg, rgba(53, 53, 95, 1) -5%, #f1c1ad 100%);
	}
</style>