FXB/pages/components/topView.vue

<template>
	<view class="flex topBox" :style="{background:backg}">
		<view class="flex_item">
			<image src="/static/img/img01.png" style="width: 56rpx;height: 49rpx;"></image>
			<view style="color: #fff;font-size: 36rpx;padding-left: 15rpx;">NICE</view>
		</view>
		<view class="flex_item topTpl">
			<view class="addr" style="margin-right: 15rpx;">L{{userInfo.level}}</view>
			<view class="addr" v-if="userInfo.addresss">{{userInfo.addresss}}</view>
			<view class="flex_item tplInfo">
				<image src="/static/img/img14.png" style="width: 28rpx;height: 28rpx;margin: 0rpx 15rpx;"></image>
				<picker :range="langList" range-key='label' @change="selectLang">
					<view style="font-size: 22rpx;">{{langLabel}}</view>
				</picker>
			</view>
		</view>
	</view>
</template>
<script>
	import { getUserInfo } from '@/api/login.js';
	import {mapState,mapActions,mapMutations} from "vuex";
	export default {
		props:{
			backg: {
				type: String,
				default: '#15130E'
			},
		},
		data() {
			return{

			};
		},
		mounted() {
			this.getInfo();
		},
		computed: {
			...mapState({
				langList: "langList",
				lang: "lang",
			}),
			...mapState('user', ['userInfo']),
			langLabel () {
				const langLabel = this.langList.find((item) => {
					return item.value == this.lang
				}).label;
				return langLabel
			}
		
		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			...mapActions({
				setLang: "setLang",
			}),
			getInfo(){
				const obj = this
				getUserInfo({}).then(({
					data
				}) => {
					data.addresss = data.address.slice(0, 4) + "****" + data.address.slice(data.address.length - 4);
					obj.setUserInfo(data);
				}).catch(e => {
					console.log(e.msg);
				});
			},
			//切换语言
			selectLang (value) {
				this.setLang(this.langList[value.detail.value].value);
				this.$router.go(0)
			},
		},
	};
</script>
<style lang="scss" scoped>
	.topBox {
		color: #FFE0BD;
		padding: 25rpx 25rpx 25rpx 25rpx;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		.topTpl {
			.addr {
				padding: 4rpx 15rpx;
				background: linear-gradient(-74deg, #CE9C6D, #FFECD6);
				box-shadow: 3rpx 4rpx 5rpx 0rpx rgba(151, 118, 74, 0.5);
				border-radius: 21rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #986629;
			}
		}
	}
</style>