BCMM/components/nav/nav.vue

<template>
	<view class="navBox">
		<view class="flex nav background-linear-gradient">
			<view class="navLeft flex">
				<image class="navLeftImg" src="../../static/img/nav01.png" mode="scaleToFill"></image>
				<view>BCMM</view>
			</view>
			<view class="navRight flex">
				<view class="tabLange">
					<picker :range="langList" range-key='label' @change="selectLang">
						<view class="langType">{{label}}</view>
					</picker>
				</view>
				
				<view class="userInfo flex border-linear-gradient" @click="copyAddress">
					<image class="rightImg" src="../../static/img/nav02.png" mode="scaleToFill"></image>
					<view class="userInfoName">
						{{userInfo.address|hideCenter}}
					</view>
				</view>
				<view class="level text-linear-gradient margin-l-10" v-if="userInfo.level>0">
					{{userInfo.level_info.name}}
				</view>
			</view>
		</view>
		<navigator :url="url" open-type='redirect' v-if="showTitle">
			<view class="flex titleBox position-relative">
				<view class="leftBackIcon">
					<image class="icon" src="../../static/img/mininext.png" mode="scaleToFill"></image>
				</view>
				<view class="pageTitle flex-center">
					<view>
					{{title}}
					</view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {}
		},
		filters: {
			hideCenter: function(value) {
				const st = value.slice(7, value.length - 7);
				const sr = value.replace(st, '...')
				return sr;
			},
		},
		props: {
			title: {
				type: String,
				default: ""
			},
			showTitle:{
				type:Boolean,
				default: false
			},
			url:{
				type: String,
				default: "/pages/index/index"
			},
		},
		computed: {
			...mapState({
				langList: "langList",
				lang: "lang",
			}),
			...mapState("user", ['userInfo']),
			label() {
				let label = ''
				try {
					label = this.langList.find((item) => {
						return item.value == this.lang
					}).value;
				} catch (e) {
					label = 'TW'
				}
				return label
			},
		},
		methods: {
			...mapActions({
				setLang: "setLang",
			}),
			// 复制地址
			copyAddress() {
				const that = this;
				uni.setClipboardData({
					data: this.userInfo.address,
					showToast: false,
					success: function() {
						uni.showToast({
							title: that.$t('home.成功')
						})
						//调用方法成功
						console.log("success");
					},
				});
			},
			//切换语言
			selectLang(value) {
				this.setLang(this.langList[value.detail.value].value);
			},
		},
	}
</script>

<style lang="scss">
	.titleBox {
		padding: 30rpx;
		color: #FFF;

		.leftBackIcon {
			transform: rotate(0.5turn);

			.icon {
				width: 21rpx;
				height: 36rpx;
			}
		}

		.pageTitle {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;
			flex-grow: 1;
			font-weight: 500;
			font-size: 34rpx;
			
		}
	}

	.nav {
		padding: 25rpx;

		.navLeft {
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;

			.navLeftImg {
				width: 58rpx;
				height: 58rpx;
				margin-right: 10rpx;
			}
		}

		.navRight {
			color: #FFF;
			.level{
				font-weight: bold;
			}
			.tabLange {
				border: 1px solid #FFF;
				padding: 6rpx 10rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				font-size: 20rpx;
				font-weight: bold;
				line-height: 28rpx;
			}

			.userInfo {
				border-radius: 15rpx;
				padding: 6rpx 10rpx;
				line-height: 1;

				.rightImg {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}

				.userInfoName {
					font-size: 25rpx;
				}
			}
		}
	}
</style>