FXB/pages/index/new_file.vue

<template>
	<view class="container">
		<view class="flex topBox">
			<view class="flex_item">
				<image src="/static/img/img01.png" style="width: 82rpx;height: 82rpx;"></image>
				<view style="color: #fff;font-size: 36rpx;padding-left: 15rpx;">NICE</view>
			</view>
			<view class="flex_item topTpl">
				<view class="addr" v-if="userInfo.addresss">{{userInfo.addresss}}</view>
				<view class="flex_item tplInfo">
					<image src="/static/img/img14.png" style="width: 32rpx;height: 32rpx;margin: 0rpx 15rpx;"></image>
					<picker :range="langList" range-key='label' @change="selectLang">
						<view>{{langLabel}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="infoBox">
			<view class="navBack" @click="navTo('/pages/index/index')">
				<u-icon name="arrow-left" size="25" color="#fff" style="position: absolute;left: 0;top: 0;font-weight: bold;"></u-icon>
				<view class="title">我的邀请</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getUserInfo
	} from '@/api/login.js';
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex";
	export default {
		data () {
			return {}
		},
		onLoad () {},
		onShow () {
			
		},
		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",
			}),
			//切换语言
			selectLang (value) {
				this.setLang(this.langList[value.detail.value].value);
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100vh;
		.container {
			width: 100%;
			min-height: 100vh;
		}
	}
	.topBox {
		color: #FFE0BD;
		padding: 25rpx 27rpx;
		background: #1A1A17;
		.topTpl {
			.addr {
				padding: 6rpx 25rpx;
				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;
			}
		}
	}
	.infoBox{
		padding: 0rpx 25rpx;
	}
	.navBack{
		position: relative;
		color: #fff;
		text-align: center;
		margin: 47rpx 0rpx;
		.title{
			font-weight: bold;
			font-size: 34rpx;
		}
	}
</style>