new-88live/components/live-room/header.vue

<template>
	<view class="hl88-lr-header">
		<view class="hl88-lr-hdRight round">
			<view class="hl88-lr-hdAvWrap justify-center bg-white round align-center">
				<image class="hl88-lr-hdAvImg round" :src="displayAvatar"/>
			</view>
			<view class="hl88-lr-hdShop">
				<text class="hl88-lr-hdShopNm"> {{ formatEllipsis(displayName, 16) }} </text>
				<view class="hl88-lr-hdShopMeta">
					<text class="hl88-lr-hdShopMetaTxt">{{ numFormat(online) }} {{ headerLangTexts.watching }}</text>
				</view>
			</view>
			<view
				v-if="showFollowButton"
				class="hl88-lr-hdFollowBtn"
				:class="{ 'hl88-lr-hdFollowOn': isFollowing }"
				@tap.stop="like"
			>
				<text class="hl88-lr-hdFollowTxt" :class="{ 'hl88-lr-hdFollowTxtOn': isFollowing }">{{ isFollowing ? headerLangTexts.followed : headerLangTexts.follow }}</text>
			</view>
		</view>
		<view class="hl88-lr-hdLeft">
			<view class="hl88-lr-btn-icon" @tap="back()">
				<image class="hl88-lr-btn-icon-img" src="/static/imgs/close.png" mode="aspectFit" />
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'LiveRoomHeader',
		props: {
			online: {
				type: Number,
				default: 0
			},
			state: {
				default: 0
			},
			// 与 user 页一致：0 未关注，1 已关注（接口也可能返回布尔）
			isFollow: {
				type: [Boolean, Number],
				default: 0
			},
			shopdata: {
				type: Object,
				default: function() {
					return {};
				}
			},
			// 为 true 时点击返回不直接后退，由父组件监听 @back 先弹框确认后再退出
			confirmBeforeBack: {
				type: Boolean,
				default: false
			},
			// 主播端等场景可不展示关注按钮（默认展示，与观众端直播间一致）
			showFollowButton: {
				type: Boolean,
				default: true
			},
			/** 当前直播间 id，与 getLiveStatus /wanlshop/live/getLiveStatus 的 data.id 一致；关注时回传给父页 */
			liveId: {
				type: [String, Number],
				default: ''
			}
		},
		computed: {
			hasShopAvatar() {
				return !!(this.shopdata && this.shopdata.avatar);
			},
			displayAvatar() {
				const avatar = this.hasShopAvatar
					? this.shopdata.avatar
					: (this.$store.state.user && this.$store.state.user.avatar);
				return this.stcOss(avatar);
			},
			displayName() {
				if (this.hasShopAvatar) {
					return (this.shopdata && this.shopdata.shopname) || '';
				}
				const user = this.$store.state.user || {};
				return user.nickname || user.username || '';
			},
			/**
			 * nvue 直播间内 $t 可能不可用；与 pages/apps/find/details/live-room.nvue 中 initLanguageStrings 一致：
			 * uni.getStorageSync('language') || uni.getLocale()，再按 languageMap 取值。
			 */
			headerLangTexts() {
				const locale = uni.getLocale() || 'zh-Hans';
				const savedLanguage = uni.getStorageSync('language');
				const currentLang = savedLanguage || locale;
				const languageMap = {
					'zh-Hans': {
						follow: '关注',
						followed: '已关注',
						watching: '在看'
					},
					'zh-Hant': {
						follow: '關注',
						followed: '已關注',
						watching: '在看'
					},
					'en': {
						follow: 'Follow',
						followed: 'Followed',
						watching: 'watching'
					},
					'en-SG': {
						follow: 'Follow',
						followed: 'Followed',
						watching: 'watching'
					},
					'en-MY': {
						follow: 'Follow',
						followed: 'Followed',
						watching: 'watching'
					},
					'ja': {
						follow: 'フォロー',
						followed: 'フォロー済み',
						watching: '視聴中'
					}
				};
				return languageMap[currentLang] || languageMap['zh-Hans'];
			},
			/** 与接口一致：0 未关注，大于 0（含多种枚举值）已关注 */
			isFollowing() {
				const f = this.isFollow;
				if (f === true) return true;
				const n = Number(f);
				return !Number.isNaN(n) && n > 0;
			}
		},
		methods: {
			like() {
				// 避免与原生 change 冲突，父页使用 @followTap；携带当前直播间 id（同 getLiveStatus 的 id）
				this.$emit('followTap', this.liveId);
			},
			back() {
				if (this.confirmBeforeBack) {
					this.$emit('back');
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			stcOss(url) {
				let oss = (this.$store.state.shell && this.$store.state.shell.appUrl && this.$store.state.shell.appUrl.oss) || '';
				let image = '';
				if (url) {
					if ((/^(http|https):\/\/.+/.test(url))) {
						image = url;
					} else {
						image = oss + url;
					}
				} else {
					image = oss + '/assets/addons/wanlshop/img/common/img_default3x.png';
				}
				return image;
			},
			numFormat(num) {
				return num > 9999 ? ((num - num % 1000) / 10000 + 'W') : num
			},
			formatEllipsis(str = '', limitLen = 24) {
				let len = 0,
				reg = /[\x00-\xff]/, //半角字符的正则匹配
				strs = str.split(''),
				inx = strs.findIndex(s => {
					len += reg.test(s) ? 1 : 2
					if (len > limitLen) return true
				})
			    return inx === -1 ? str : str.substr(0, inx) + '...'
			}
		}
	}
</script>

<style>
	@import '@/static/style/wanlnvue.css';
	.hl88-lr-header {
		background-color: transparent;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		padding-top: 16rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		/* #ifdef MP */
		padding-right: 200rpx;
		/* #endif */
	}
		.hl88-lr-hdRight{
			align-items: center;
			flex-direction: row;
			background-color: rgba(0,0,0,.2);
			padding-top: 8rpx;
			padding-right: 16rpx;
			padding-bottom: 8rpx;
			padding-left: 8rpx;
		}
			.hl88-lr-hdAvWrap{
				width: 68rpx;
				height: 68rpx;
			}
			.hl88-lr-hdAvImg{
				width: 68rpx;
				height: 68rpx;
			}
			.hl88-lr-hdShop{
				padding-left: 15rpx;
			}
				.hl88-lr-hdShopNm{
					color: rgba(255, 255, 255, .8);
					font-size: 28rpx;
					line-height: 36rpx;
				}
				.hl88-lr-hdShopMetaTxt{
					color: rgba(255, 255, 255, .7);
					font-size: 20rpx;
				}
			.hl88-lr-hdFollowBtn{
				background-color: #f40;
				min-width: 86rpx;
				padding-left: 12rpx;
				padding-right: 12rpx;
				height: 50rpx;
				justify-content: center;
				align-items: center;
				border-radius: 18rpx;
				margin-left: 30rpx;
			}
			.hl88-lr-hdFollowOn {
				background-color: rgba(0, 0, 0, 0);
				border-width: 2rpx;
				border-style: solid;
				border-color: rgba(255, 255, 255, 0.85);
			}
				.hl88-lr-hdFollowTxt{
					color: #fff;
					font-size: 24rpx;
				}
				.hl88-lr-hdFollowTxtOn {
					color: rgba(255, 255, 255, 0.95);
				}
		.hl88-lr-hdLeft{
			align-items: center;
			justify-content: center;
		}
		.hl88-lr-btn-icon{
			width: 76rpx;
			height: 76rpx;
			border-radius: 38rpx;
			background-color: rgba(0, 0, 0, 0.2);
			align-items: center;
			justify-content: center;
		}
		.hl88-lr-btn-icon-img{
			width: 40rpx;
			height: 40rpx;
		}
</style>