You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
3.5 KiB
152 lines
3.5 KiB
3 weeks ago
|
<!--
|
||
|
|
版本声明：
|
||
|
|
* 由于 WanlLive、WanlChat、以下代码开发难度较大，已将相关代码独立申请著作权，受法律保护！！！
|
||
|
|
* 无论你购买任何版本，均不允许复制到第三方直接、间接使用，且也不能以学习为目的参考和借鉴！！
|
||
|
|
* 你仅有在 WanlShop 中使用、二次开发权利，否则我们会追究法律责任
|
||
|
|
* 深圳前海万联科技有限公司 @www.i36k.com
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<view class="wanl-live-header">
|
||
|
|
<view class="header-right round">
|
||
|
|
<view class="header-image justify-center bg-white round align-center">
|
||
|
|
<image class="header-image-img round" :src="stcOss(shopdata.avatar)"/>
|
||
|
|
</view>
|
||
|
|
<view class="header-shop">
|
||
|
|
<text class="header-shop-text"> {{ formatEllipsis(shopdata.shopname, 16) }} </text>
|
||
|
|
<view class="header-shop-info">
|
||
|
|
<text class="header-shop-info-text">{{ numFormat(online) }} 人观看</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="header-btn" v-if="!isFollow" @tap="like()">
|
||
|
|
<text class="header-btn-text">关注</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="header-left">
|
||
|
|
<view class="wanl-btn" @tap="back()">
|
||
|
|
<text class="wanl-btn-text"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "wanlLiveHeader",
|
||
|
|
props: {
|
||
|
|
online: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
state: {
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
isFollow: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
shopdata: {
|
||
|
|
type: Object,
|
||
|
|
default: function() {
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
like() {
|
||
|
|
this.$emit('change');
|
||
|
|
},
|
||
|
|
back() {
|
||
|
|
uni.navigateBack({
|
||
|
|
delta: 1
|
||
|
|
});
|
||
|
|
},
|
||
|
|
stcOss(url) {
|
||
|
|
let oss = this.$store.state.common.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 + '万') : 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';
|
||
|
|
.wanl-live-header {
|
||
|
|
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 */
|
||
|
|
}
|
||
|
|
.header-right{
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
.header-image{
|
||
|
|
width: 68rpx;
|
||
|
|
height: 68rpx;
|
||
|
|
}
|
||
|
|
.header-image-img{
|
||
|
|
width: 68rpx;
|
||
|
|
height: 68rpx;
|
||
|
|
}
|
||
|
|
.header-shop{
|
||
|
|
padding-left: 15rpx;
|
||
|
|
}
|
||
|
|
.header-shop-text{
|
||
|
|
color: rgba(255, 255, 255, .8);
|
||
|
|
font-size: 28rpx;
|
||
|
|
line-height: 36rpx;
|
||
|
|
}
|
||
|
|
.header-shop-info{
|
||
|
|
|
||
|
|
}
|
||
|
|
.header-shop-info-text{
|
||
|
|
color: rgba(255, 255, 255, .7);
|
||
|
|
font-size: 20rpx;
|
||
|
|
}
|
||
|
|
.header-btn{
|
||
|
|
background: #f40;
|
||
|
|
width: 86rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 18rpx;
|
||
|
|
margin-left: 30rpx;
|
||
|
|
}
|
||
|
|
.header-btn-text{
|
||
|
|
color: #fff;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
</style>
|