8
This commit is contained in:
cansnow
@@ -1,94 +1,84 @@
|
||||
<template>
|
||||
<u-avatar
|
||||
@longpress="longpress"
|
||||
@click="click"
|
||||
@onError="errorHandle"
|
||||
:src="getAvatarUrl"
|
||||
:text="avatarText"
|
||||
bgColor="#0089FF"
|
||||
:defaultUrl="getDdefaultUrl"
|
||||
:shape="shape"
|
||||
:size="size"
|
||||
mode="aspectFill"
|
||||
font-size="14"
|
||||
>
|
||||
</u-avatar>
|
||||
<u-avatar @longpress="longpress" @click="click" @onError="errorHandle" :src="getAvatarUrl" :text="avatarText"
|
||||
bgColor="#0089FF" :defaultUrl="getDdefaultUrl" :shape="shape" :size="size" mode="aspectFill" font-size="14">
|
||||
</u-avatar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import defaultGroupIcon from "static/images/contact_my_group.png";
|
||||
import defaultNotifyIcon from "static/images/default_notify_icon.png";
|
||||
export default {
|
||||
name: "MyAvatar",
|
||||
props: {
|
||||
src: String,
|
||||
shape: {
|
||||
type: String,
|
||||
default: "square",
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "40",
|
||||
},
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isNotify: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
import defaultGroupIcon from "static/images/contact_my_group.png";
|
||||
import defaultNotifyIcon from "static/images/default_notify_icon.png";
|
||||
import util from "@/util";
|
||||
export default {
|
||||
name: "MyAvatar",
|
||||
props: {
|
||||
src: String,
|
||||
shape: {
|
||||
type: String,
|
||||
default: "square",
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "40",
|
||||
},
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isNotify: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
desc: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
avatarText: undefined,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getAvatarUrl() {
|
||||
if (this.src) {
|
||||
return this.src;
|
||||
}
|
||||
if (this.isGroup) {
|
||||
return defaultGroupIcon;
|
||||
}
|
||||
if (this.isNotify) {
|
||||
return defaultNotifyIcon;
|
||||
}
|
||||
this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
|
||||
return "";
|
||||
},
|
||||
getDdefaultUrl() {
|
||||
return this.isGroup ? defaultGroupIcon : undefined;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
errorHandle() {
|
||||
this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
|
||||
},
|
||||
redirectShow() {
|
||||
if (this.avatarText) {
|
||||
this.avatarText = undefined;
|
||||
}
|
||||
},
|
||||
click() {
|
||||
this.$emit("click");
|
||||
},
|
||||
longpress() {
|
||||
this.$emit("longpress");
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
src() {
|
||||
this.redirectShow();
|
||||
},
|
||||
desc() {
|
||||
this.redirectShow();
|
||||
},
|
||||
},
|
||||
};
|
||||
desc: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
avatarText: undefined,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getAvatarUrl() {
|
||||
if (this.src) {
|
||||
return util.cdn(this.src);
|
||||
}
|
||||
if (this.isGroup) {
|
||||
return defaultGroupIcon;
|
||||
}
|
||||
if (this.isNotify) {
|
||||
return defaultNotifyIcon;
|
||||
}
|
||||
this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
|
||||
return "";
|
||||
},
|
||||
getDdefaultUrl() {
|
||||
return this.isGroup ? defaultGroupIcon : undefined;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
errorHandle() {
|
||||
this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
|
||||
},
|
||||
redirectShow() {
|
||||
if (this.avatarText) {
|
||||
this.avatarText = undefined;
|
||||
}
|
||||
},
|
||||
click() {
|
||||
this.$emit("click");
|
||||
},
|
||||
longpress() {
|
||||
this.$emit("longpress");
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
src() {
|
||||
this.redirectShow();
|
||||
},
|
||||
desc() {
|
||||
this.redirectShow();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style></style>
|
||||
+120
-131
@@ -1,149 +1,138 @@
|
||||
<template>
|
||||
<view @click="clickItem" class="user_item">
|
||||
<view
|
||||
v-if="checkVisible"
|
||||
class="check_wrap"
|
||||
:class="{ check_wrap_active: checked, check_wrap_disabled: disabled }"
|
||||
>
|
||||
<u-icon v-show="checked" name="checkbox-mark" size="12" color="#fff" />
|
||||
</view>
|
||||
<view @click="clickItem" class="user_item">
|
||||
<view v-if="checkVisible" class="check_wrap"
|
||||
:class="{ check_wrap_active: checked, check_wrap_disabled: disabled }">
|
||||
<u-icon v-show="checked" name="checkbox-mark" size="12" color="#fff" />
|
||||
</view>
|
||||
|
||||
<my-avatar
|
||||
:src="item.faceURL"
|
||||
:desc="item.remark || item.nickname || item.showName"
|
||||
:isGroup="item.groupName !== undefined || isGroupConversation"
|
||||
size="42"
|
||||
/>
|
||||
<view class="user_item_details">
|
||||
<text class="user_name">{{
|
||||
item.remark || item.nickname || item.groupName || item.showName
|
||||
}}</text>
|
||||
<text v-if="item.roleLevel === 100" class="user_role">群主</text>
|
||||
<text v-if="item.roleLevel === 60" class="user_role admin_role"
|
||||
>管理员</text
|
||||
>
|
||||
<!-- <view class="bottom_line" /> -->
|
||||
</view>
|
||||
<my-avatar :src="item.faceURL" :desc="item.remark || item.nickname || item.showName"
|
||||
:isGroup="item.groupName !== undefined || isGroupConversation" size="42" />
|
||||
<view class="user_item_details">
|
||||
<text class="user_name">{{item.remark || item.nickname || item.groupName || item.showName}}</text>
|
||||
<text v-if="item.roleLevel === 100" class="user_role">群主</text>
|
||||
<text v-if="item.roleLevel === 60" class="user_role admin_role">管理员</text>
|
||||
<!-- <view class="bottom_line" /> -->
|
||||
</view>
|
||||
|
||||
<slot name="action"></slot>
|
||||
</view>
|
||||
<slot name="action"></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import { SessionType } from "openim-uniapp-polyfill";
|
||||
export default {
|
||||
name: "UserItem",
|
||||
components: {
|
||||
MyAvatar,
|
||||
},
|
||||
props: {
|
||||
checkVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
item: Object,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
isGroupConversation() {
|
||||
return this.item.conversationType === SessionType.WorkingGroup;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickItem() {
|
||||
if (!this.disabled) {
|
||||
this.$emit(this.checkVisible ? "updateCheck" : "itemClick", this.item);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import {SessionType} from "openim-uniapp-polyfill";
|
||||
export default {
|
||||
name: "UserItem",
|
||||
components: {
|
||||
MyAvatar,
|
||||
},
|
||||
props: {
|
||||
checkVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
item: Object,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
isGroupConversation() {
|
||||
return this.item.conversationType === SessionType.WorkingGroup;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickItem() {
|
||||
if (!this.disabled) {
|
||||
this.$emit(this.checkVisible ? "updateCheck" : "itemClick", this.item);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user_item {
|
||||
@include vCenterBox();
|
||||
padding: 24rpx 44rpx;
|
||||
color: $uni-text-color;
|
||||
position: relative;
|
||||
.user_item {
|
||||
@include vCenterBox();
|
||||
padding: 24rpx 44rpx;
|
||||
color: $uni-text-color;
|
||||
position: relative;
|
||||
|
||||
.check_wrap {
|
||||
@include centerBox();
|
||||
box-sizing: border-box;
|
||||
width: 40rpx;
|
||||
min-width: 40rpx;
|
||||
height: 40rpx;
|
||||
min-height: 40rpx;
|
||||
border: 2px solid #979797;
|
||||
border-radius: 50%;
|
||||
margin-top: 16rpx;
|
||||
margin-right: 24rpx;
|
||||
.check_wrap {
|
||||
@include centerBox();
|
||||
box-sizing: border-box;
|
||||
width: 40rpx;
|
||||
min-width: 40rpx;
|
||||
height: 40rpx;
|
||||
min-height: 40rpx;
|
||||
border: 2px solid #979797;
|
||||
border-radius: 50%;
|
||||
margin-top: 16rpx;
|
||||
margin-right: 24rpx;
|
||||
|
||||
&_active {
|
||||
background-color: #1d6bed;
|
||||
border: none;
|
||||
}
|
||||
&_active {
|
||||
background-color: #1d6bed;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&_disabled {
|
||||
background-color: #c8c9cc;
|
||||
}
|
||||
}
|
||||
&_disabled {
|
||||
background-color: #c8c9cc;
|
||||
}
|
||||
}
|
||||
|
||||
&_details {
|
||||
@include vCenterBox();
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 24rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
&_details {
|
||||
@include vCenterBox();
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 24rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.bottom_line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #f0f0f0;
|
||||
position: absolute;
|
||||
bottom: -44rpx;
|
||||
}
|
||||
.bottom_line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #f0f0f0;
|
||||
position: absolute;
|
||||
bottom: -44rpx;
|
||||
}
|
||||
|
||||
.user_name {
|
||||
@include nomalEllipsis();
|
||||
max-width: 60%;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
.user_name {
|
||||
@include nomalEllipsis();
|
||||
max-width: 60%;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.user_role {
|
||||
font-size: 34rpx;
|
||||
// background-color: #f4da9a;
|
||||
// color: #FF8C00;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-left: 24rpx;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
.user_role {
|
||||
font-size: 34rpx;
|
||||
// background-color: #f4da9a;
|
||||
// color: #FF8C00;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-left: 24rpx;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
|
||||
.admin_role {
|
||||
color: $u-tips-color;
|
||||
// background-color: #A2C9F8;
|
||||
// color: #2691ED;
|
||||
}
|
||||
}
|
||||
}
|
||||
.admin_role {
|
||||
color: $u-tips-color;
|
||||
// background-color: #A2C9F8;
|
||||
// color: #2691ED;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-list-item:last-child {
|
||||
.bottom_line {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.u-list-item:last-child {
|
||||
.bottom_line {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-mask :show="previewVideoFlag" :custom-style="customMaskStyle">
|
||||
<view @tap.stop class="playBox" :style="'height:'+(winHeight/10*9)+'px;width:'+(winWidth-20)+'px;'">
|
||||
<video :style="'height:'+(winHeight/10*8)+'px;width:'+(winWidth-20)+'px'"
|
||||
:controls="true" :show-fullscreen-btn="false" :autoplay="true"
|
||||
:src="previewVideoSrc" @ended="quitPlay()">
|
||||
<u-button hover-class="none" @click="quitPlay()">关闭</u-button>
|
||||
</video>
|
||||
<view class="quitBox">
|
||||
<u-button hover-class="none" @click="quitPlay()">关闭</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-mask>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"videoPlayer",
|
||||
props:{
|
||||
previewVideoFlag:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
required:true
|
||||
},
|
||||
previewVideoSrc:{
|
||||
type:String,
|
||||
default:"",
|
||||
required:true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
customMaskStyle:{
|
||||
display:"flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
//paddingTop:'100rpx',
|
||||
border:'1px solid red',
|
||||
width:"100%",
|
||||
height:"100%",
|
||||
},
|
||||
winHeight:0,
|
||||
winWidth:0
|
||||
};
|
||||
},
|
||||
created:function(){
|
||||
this.winHeight=this.$u.sys().windowHeight;
|
||||
this.winWidth=this.$u.sys().windowWidth;
|
||||
},
|
||||
methods:{
|
||||
quitPlay:function(){
|
||||
this.$emit("quitPlay");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.playBox{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.quitBox{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user