308 lines
6.8 KiB
Vue
308 lines
6.8 KiB
Vue
<template>
|
|
<view class="user-box" :style="`background-size: contain;background-image: url(${clerk.avatar});`">
|
|
<view class="info-box" :style="{ paddingTop: paddingTop + 20 + 'px'}">
|
|
<view class="avatar-box">
|
|
<view class="avatar-span">
|
|
<u-image width="100%" height="100%" shape="circle" :src="clerk.avatar"></u-image>
|
|
<!-- <view class="fans-btn" @click="fans(clerk)">
|
|
<u-icon v-if="clerk.isFans" color="var(--ui-BG-Main)" name="checkmark-circle-fill" size="46"></u-icon>
|
|
<u-icon v-else color="var(--ui-BG-Main)" name="plus-circle-fill" size="46"></u-icon>
|
|
</view> -->
|
|
</view>
|
|
<view class="right-box">
|
|
<view class="nickname-box">
|
|
<view class="nickname">{{clerk.nickname}}</view>
|
|
<view class="icon">
|
|
<u-icon name="wode_duanwei" size="36" custom-prefix="iconfont"></u-icon>
|
|
<text>L1</text>
|
|
</view>
|
|
</view>
|
|
<view class="badge-box">
|
|
<view v-if="clerk.hasQrcode" class="weixin-btn" @click="getWeixin(clerk)">
|
|
<u-icon name="weixin-fill" size="28" color="#fff"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="sex-box">
|
|
<view class="span" v-if="clerk.sex == 2">
|
|
<u-icon name="ziyuan2" color="#f898c5" size="34" custom-prefix="iconfont"></u-icon>
|
|
</view>
|
|
<view class="span" v-if="clerk.sex == 1">
|
|
<u-icon name="ziyuan3" color="#0081ff" size="34" custom-prefix="iconfont"></u-icon>
|
|
</view>
|
|
<view class="span">{{clerk.age}}</view>
|
|
<view class="span">{{clerk.city}}</view>
|
|
</view>
|
|
<view class="sign-box">{{clerk.intro}}</view>
|
|
<view class="voice-box">
|
|
<!-- <view class="voice-span">
|
|
<voice-play :sec="clerk.soundTime" :src="clerk.sound"></voice-play>
|
|
</view> -->
|
|
<view class="span">已注册{{clerk.day}}天</view>
|
|
<span class="span" v-if="clerk.hasQrcode">可交换名片</span>
|
|
</view>
|
|
<view class="tag-list">
|
|
<view class="tag-box">
|
|
<span class="tag" v-for="(categoryName,index) in clerk.categoryNameList">{{categoryName}}</span>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="tags-box">
|
|
<view class="span">搞笑</view>
|
|
<view class="span">风骚走位</view>
|
|
<view class="span">乖巧懂事🍑 极致体验</view>
|
|
</view> -->
|
|
|
|
<photo-box v-if="clerk.photo" :dataList="clerk.photo.split(',')"></photo-box>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import PhotoBox from '@/pages/user/detail/components/photoBox.vue';
|
|
import sheep from '@/sheep';
|
|
import UserApi from '@/sheep/api/member/user';
|
|
import TrendApi from '@/sheep/api/worker/trend';
|
|
export default {
|
|
components: {
|
|
PhotoBox,
|
|
},
|
|
props: {
|
|
paddingTop: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
clerk: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
photo: 'http://cos.duopei.feiniaowangluo.com/34/clerk/1707236152609pJKyvtedS9.jpg,http://cos.duopei.feiniaowangluo.com/34/clerk/1720278125689P34fP9MU1c.jpg?imageView2/1/w/200/h/200',
|
|
}
|
|
},
|
|
methods: {
|
|
fans(e) {
|
|
TrendApi.createClerkFans({
|
|
workerClerkId: e.id,
|
|
}).then((res) => {
|
|
if(res){
|
|
if(e.isFans){
|
|
sheep.$helper.toast('取消关注');
|
|
e.isFans = false;
|
|
}else{
|
|
sheep.$helper.toast('关注成功');
|
|
e.isFans = true;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getWeixin(e) {
|
|
var that = this;
|
|
uni.showModal({
|
|
title: '交换名片',
|
|
content: '确认交换名片吗？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
that.queryWeixin(e);
|
|
}
|
|
},
|
|
});
|
|
|
|
},
|
|
queryWeixin(e) {
|
|
UserApi.getQrcodeByUserId(e.id).then(res => {
|
|
if(res.data){
|
|
uni.previewImage({
|
|
current: 0, //预览图片的下标
|
|
urls: [res.data], //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
|
|
indicator: 'number',
|
|
loop: true
|
|
});
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.info-box {
|
|
backdrop-filter: blur(10px);
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
padding: 15px;
|
|
|
|
.avatar-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.avatar-span {
|
|
border-radius: 100%;
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border: 2px solid #fff;
|
|
position: relative;
|
|
|
|
.fans-btn {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.right-box {
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
align-items: center;
|
|
margin-left: 10px;
|
|
|
|
.nickname {
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
max-width: 320rpx;
|
|
}
|
|
|
|
.icon {
|
|
background-color: #ff5ebd;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 40px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
font-size: 22rpx;
|
|
line-height: 22rpx;
|
|
padding: 5px 5px;
|
|
margin-top: 10px;
|
|
width: 110rpx;
|
|
}
|
|
|
|
.online {
|
|
border-bottom: 1px solid #fff;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sex-box {
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 30px;
|
|
|
|
.span {
|
|
margin-right: 5px;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.sign-box {
|
|
color: #cfcfcf;
|
|
font-size: 28rpx;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.voice-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
|
|
.voice-span {
|
|
margin-bottom: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.span {
|
|
padding: 10rpx 20rpx;
|
|
background-color: rgba(132, 167, 164, .81);
|
|
border-radius: 20px;
|
|
font-size: 24rpx;
|
|
margin-bottom: 10px;
|
|
margin-right: 10px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.tags-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin: 5px 0;
|
|
|
|
.span {
|
|
font-size: 20rpx;
|
|
color: #fff;
|
|
background-color: #000000;
|
|
border-radius: 999px;
|
|
padding: 3px 10px;
|
|
margin: 0 10px 10px 0;
|
|
}
|
|
}
|
|
|
|
.tag-list {
|
|
display: flex;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.tag-box {
|
|
display: inline-block;
|
|
align-items: center;
|
|
margin-bottom: 5px;
|
|
background-color: #eef2f26e;
|
|
border-radius: 3px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
padding: 5px 0;
|
|
|
|
.tag {
|
|
white-space: nowrap;
|
|
padding: 5px 5px;
|
|
position: relative;
|
|
}
|
|
|
|
.tag:after {
|
|
content: ' ';
|
|
border-left: 1px solid #fff;
|
|
display: inline-block;
|
|
height: 10px;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 0;
|
|
}
|
|
|
|
.tag:last-child:after{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.weixin-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #19be6b;
|
|
justify-content: center;
|
|
border-radius: 40px;
|
|
color: #fff;
|
|
font-size: 22rpx;
|
|
padding: 5px;
|
|
|
|
.text {
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
</style> |