8
This commit is contained in:
cansnow
@@ -1,94 +1,84 @@
|
|||||||
<template>
|
<template>
|
||||||
<u-avatar
|
<u-avatar @longpress="longpress" @click="click" @onError="errorHandle" :src="getAvatarUrl" :text="avatarText"
|
||||||
@longpress="longpress"
|
bgColor="#0089FF" :defaultUrl="getDdefaultUrl" :shape="shape" :size="size" mode="aspectFill" font-size="14">
|
||||||
@click="click"
|
</u-avatar>
|
||||||
@onError="errorHandle"
|
|
||||||
:src="getAvatarUrl"
|
|
||||||
:text="avatarText"
|
|
||||||
bgColor="#0089FF"
|
|
||||||
:defaultUrl="getDdefaultUrl"
|
|
||||||
:shape="shape"
|
|
||||||
:size="size"
|
|
||||||
mode="aspectFill"
|
|
||||||
font-size="14"
|
|
||||||
>
|
|
||||||
</u-avatar>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import defaultGroupIcon from "static/images/contact_my_group.png";
|
import defaultGroupIcon from "static/images/contact_my_group.png";
|
||||||
import defaultNotifyIcon from "static/images/default_notify_icon.png";
|
import defaultNotifyIcon from "static/images/default_notify_icon.png";
|
||||||
export default {
|
import util from "@/util";
|
||||||
name: "MyAvatar",
|
export default {
|
||||||
props: {
|
name: "MyAvatar",
|
||||||
src: String,
|
props: {
|
||||||
shape: {
|
src: String,
|
||||||
type: String,
|
shape: {
|
||||||
default: "square",
|
type: String,
|
||||||
},
|
default: "square",
|
||||||
size: {
|
},
|
||||||
type: String,
|
size: {
|
||||||
default: "40",
|
type: String,
|
||||||
},
|
default: "40",
|
||||||
isGroup: {
|
},
|
||||||
type: Boolean,
|
isGroup: {
|
||||||
default: false,
|
type: Boolean,
|
||||||
},
|
default: false,
|
||||||
isNotify: {
|
},
|
||||||
type: Boolean,
|
isNotify: {
|
||||||
default: false,
|
type: Boolean,
|
||||||
},
|
default: false,
|
||||||
|
},
|
||||||
|
|
||||||
desc: String,
|
desc: String,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
avatarText: undefined,
|
avatarText: undefined,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
getAvatarUrl() {
|
getAvatarUrl() {
|
||||||
if (this.src) {
|
if (this.src) {
|
||||||
return this.src;
|
return util.cdn(this.src);
|
||||||
}
|
}
|
||||||
if (this.isGroup) {
|
if (this.isGroup) {
|
||||||
return defaultGroupIcon;
|
return defaultGroupIcon;
|
||||||
}
|
}
|
||||||
if (this.isNotify) {
|
if (this.isNotify) {
|
||||||
return defaultNotifyIcon;
|
return defaultNotifyIcon;
|
||||||
}
|
}
|
||||||
this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
|
this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
|
||||||
return "";
|
return "";
|
||||||
},
|
},
|
||||||
getDdefaultUrl() {
|
getDdefaultUrl() {
|
||||||
return this.isGroup ? defaultGroupIcon : undefined;
|
return this.isGroup ? defaultGroupIcon : undefined;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
errorHandle() {
|
errorHandle() {
|
||||||
this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
|
this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
|
||||||
},
|
},
|
||||||
redirectShow() {
|
redirectShow() {
|
||||||
if (this.avatarText) {
|
if (this.avatarText) {
|
||||||
this.avatarText = undefined;
|
this.avatarText = undefined;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
click() {
|
click() {
|
||||||
this.$emit("click");
|
this.$emit("click");
|
||||||
},
|
},
|
||||||
longpress() {
|
longpress() {
|
||||||
this.$emit("longpress");
|
this.$emit("longpress");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
src() {
|
src() {
|
||||||
this.redirectShow();
|
this.redirectShow();
|
||||||
},
|
},
|
||||||
desc() {
|
desc() {
|
||||||
this.redirectShow();
|
this.redirectShow();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style></style>
|
<style></style>
|
||||||
+120
-131
@@ -1,149 +1,138 @@
|
|||||||
<template>
|
<template>
|
||||||
<view @click="clickItem" class="user_item">
|
<view @click="clickItem" class="user_item">
|
||||||
<view
|
<view v-if="checkVisible" class="check_wrap"
|
||||||
v-if="checkVisible"
|
:class="{ check_wrap_active: checked, check_wrap_disabled: disabled }">
|
||||||
class="check_wrap"
|
<u-icon v-show="checked" name="checkbox-mark" size="12" color="#fff" />
|
||||||
:class="{ check_wrap_active: checked, check_wrap_disabled: disabled }"
|
</view>
|
||||||
>
|
|
||||||
<u-icon v-show="checked" name="checkbox-mark" size="12" color="#fff" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<my-avatar
|
<my-avatar :src="item.faceURL" :desc="item.remark || item.nickname || item.showName"
|
||||||
:src="item.faceURL"
|
:isGroup="item.groupName !== undefined || isGroupConversation" size="42" />
|
||||||
:desc="item.remark || item.nickname || item.showName"
|
<view class="user_item_details">
|
||||||
:isGroup="item.groupName !== undefined || isGroupConversation"
|
<text class="user_name">{{item.remark || item.nickname || item.groupName || item.showName}}</text>
|
||||||
size="42"
|
<text v-if="item.roleLevel === 100" class="user_role">群主</text>
|
||||||
/>
|
<text v-if="item.roleLevel === 60" class="user_role admin_role">管理员</text>
|
||||||
<view class="user_item_details">
|
<!-- <view class="bottom_line" /> -->
|
||||||
<text class="user_name">{{
|
</view>
|
||||||
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>
|
<slot name="action"></slot>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||||
import { SessionType } from "openim-uniapp-polyfill";
|
import {SessionType} from "openim-uniapp-polyfill";
|
||||||
export default {
|
export default {
|
||||||
name: "UserItem",
|
name: "UserItem",
|
||||||
components: {
|
components: {
|
||||||
MyAvatar,
|
MyAvatar,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
checkVisible: {
|
checkVisible: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
checked: {
|
checked: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
item: Object,
|
item: Object,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
isGroupConversation() {
|
isGroupConversation() {
|
||||||
return this.item.conversationType === SessionType.WorkingGroup;
|
return this.item.conversationType === SessionType.WorkingGroup;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
clickItem() {
|
clickItem() {
|
||||||
if (!this.disabled) {
|
if (!this.disabled) {
|
||||||
this.$emit(this.checkVisible ? "updateCheck" : "itemClick", this.item);
|
this.$emit(this.checkVisible ? "updateCheck" : "itemClick", this.item);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.user_item {
|
.user_item {
|
||||||
@include vCenterBox();
|
@include vCenterBox();
|
||||||
padding: 24rpx 44rpx;
|
padding: 24rpx 44rpx;
|
||||||
color: $uni-text-color;
|
color: $uni-text-color;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.check_wrap {
|
.check_wrap {
|
||||||
@include centerBox();
|
@include centerBox();
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 40rpx;
|
width: 40rpx;
|
||||||
min-width: 40rpx;
|
min-width: 40rpx;
|
||||||
height: 40rpx;
|
height: 40rpx;
|
||||||
min-height: 40rpx;
|
min-height: 40rpx;
|
||||||
border: 2px solid #979797;
|
border: 2px solid #979797;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-top: 16rpx;
|
margin-top: 16rpx;
|
||||||
margin-right: 24rpx;
|
margin-right: 24rpx;
|
||||||
|
|
||||||
&_active {
|
&_active {
|
||||||
background-color: #1d6bed;
|
background-color: #1d6bed;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&_disabled {
|
&_disabled {
|
||||||
background-color: #c8c9cc;
|
background-color: #c8c9cc;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&_details {
|
&_details {
|
||||||
@include vCenterBox();
|
@include vCenterBox();
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-left: 24rpx;
|
margin-left: 24rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.bottom_line {
|
.bottom_line {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -44rpx;
|
bottom: -44rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user_name {
|
.user_name {
|
||||||
@include nomalEllipsis();
|
@include nomalEllipsis();
|
||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
color: $uni-text-color;
|
color: $uni-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user_role {
|
.user_role {
|
||||||
font-size: 34rpx;
|
font-size: 34rpx;
|
||||||
// background-color: #f4da9a;
|
// background-color: #f4da9a;
|
||||||
// color: #FF8C00;
|
// color: #FF8C00;
|
||||||
padding: 8rpx 24rpx;
|
padding: 8rpx 24rpx;
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
margin-left: 24rpx;
|
margin-left: 24rpx;
|
||||||
color: $u-tips-color;
|
color: $u-tips-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin_role {
|
.admin_role {
|
||||||
color: $u-tips-color;
|
color: $u-tips-color;
|
||||||
// background-color: #A2C9F8;
|
// background-color: #A2C9F8;
|
||||||
// color: #2691ED;
|
// color: #2691ED;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-list-item:last-child {
|
.u-list-item:last-child {
|
||||||
.bottom_line {
|
.bottom_line {
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
||||||
@@ -38,6 +38,9 @@
|
|||||||
default: () => {},
|
default: () => {},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
console.log(this.source)
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
latestMessage() {
|
latestMessage() {
|
||||||
if (this.source.latestMsg === "") return "";
|
if (this.source.latestMsg === "") return "";
|
||||||
@@ -65,7 +68,7 @@
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
clickConversationItem() {
|
clickConversationItem() {
|
||||||
console.log(this.source);
|
//console.log(this.source);
|
||||||
prepareConversationState(this.source);
|
prepareConversationState(this.source);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -128,7 +131,7 @@
|
|||||||
.lastest_msg_wrap {
|
.lastest_msg_wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
margin-top: 10rpx;
|
margin: 10rpx 0;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
|
||||||
.lastest_msg_prefix {
|
.lastest_msg_prefix {
|
||||||
|
|||||||
@@ -1,171 +1,165 @@
|
|||||||
<template>
|
<template>
|
||||||
<view @click="toMemberList" class="member_row">
|
<view @click="toMemberList" class="member_row">
|
||||||
<!-- <view class="member_title">
|
<!-- <view class="member_title">
|
||||||
<text>群成员</text>
|
<text>群成员</text>
|
||||||
<view class="member_desc">
|
<view class="member_desc">
|
||||||
<text>{{ `${memberCount}人` }}</text>
|
<text>{{ `${memberCount}人` }}</text>
|
||||||
<u-icon name="arrow-right" color="#999" size="16" />
|
<u-icon name="arrow-right" color="#999" size="16" />
|
||||||
</view>
|
</view>
|
||||||
</view> -->
|
</view> -->
|
||||||
<view class="member_list">
|
<view class="member_list">
|
||||||
<view class="member_item" v-for="(member, index) in groupMemberList">
|
<view class="member_item" v-for="(member, index) in groupMemberList">
|
||||||
<my-avatar
|
<my-avatar :src="member.faceURL" :desc="member.nickname" :key="member.userID" size="48" />
|
||||||
:src="member.faceURL"
|
<view class="ower" v-if="member.roleLevel === 100">群主</view>
|
||||||
:desc="member.nickname"
|
<text class="member_item_name">{{ member.nickname }}</text>
|
||||||
:key="member.userID"
|
</view>
|
||||||
size="48"
|
<view class="member_item">
|
||||||
/>
|
<image style="width: 48px; height: 48px; min-width: 48px" @click.stop="inviteMember"
|
||||||
<view class="ower" v-if="member.roleLevel === 100">群主</view>
|
src="@/static/images/group_setting_invite.png" alt="" />
|
||||||
<text class="member_item_name">{{ member.nickname }}</text>
|
<text class="member_item_name">增加</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="member_item">
|
<view class="member_item" v-if="isAdmin || isOwner">
|
||||||
<image
|
<image style="width: 48px; height: 48px; min-width: 48px" @click.stop="kickMember"
|
||||||
style="width: 48px; height: 48px; min-width: 48px"
|
src="@/static/images/group_setting_remove.png" alt="" />
|
||||||
@click.stop="inviteMember"
|
<text class="member_item_name">移出</text>
|
||||||
src="@/static/images/group_setting_invite.png"
|
</view>
|
||||||
alt=""
|
</view>
|
||||||
/>
|
<view @click="toMemberList" class="more">
|
||||||
<text class="member_item_name">增加</text>
|
<text>查看全部群成员({{ memberCount }})</text>
|
||||||
</view>
|
<view class="more_right">
|
||||||
<view class="member_item" v-if="isAdmin || isOwner">
|
<u-icon name="arrow-right" color="#999" size="18" />
|
||||||
<image
|
</view>
|
||||||
style="width: 48px; height: 48px; min-width: 48px"
|
</view>
|
||||||
@click.stop="kickMember"
|
</view>
|
||||||
src="@/static/images/group_setting_remove.png"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<text class="member_item_name">移出</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view @click="toMemberList" class="more">
|
|
||||||
<text>查看全部群成员({{ memberCount }})</text>
|
|
||||||
<view class="more_right">
|
|
||||||
<u-icon name="arrow-right" color="#999" size="18" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters } from "vuex";
|
import {
|
||||||
import IMSDK, { GroupMemberRole } from "openim-uniapp-polyfill";
|
mapGetters
|
||||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
} from "vuex";
|
||||||
import SettingItem from "@/components/SettingItem/index.vue";
|
import IMSDK, {
|
||||||
import { ContactChooseTypes, GroupMemberListTypes } from "@/constant";
|
GroupMemberRole
|
||||||
export default {
|
} from "openim-uniapp-polyfill";
|
||||||
name: "",
|
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||||
components: {
|
import SettingItem from "@/components/SettingItem/index.vue";
|
||||||
MyAvatar,
|
import {
|
||||||
SettingItem,
|
ContactChooseTypes,
|
||||||
},
|
GroupMemberListTypes
|
||||||
props: {
|
} from "@/constant";
|
||||||
isNomal: Boolean,
|
export default {
|
||||||
memberCount: Number,
|
name: "",
|
||||||
groupID: String,
|
components: {
|
||||||
groupMemberList: Array,
|
MyAvatar,
|
||||||
},
|
SettingItem,
|
||||||
data() {
|
},
|
||||||
return {};
|
props: {
|
||||||
},
|
isNomal: Boolean,
|
||||||
computed: {
|
memberCount: Number,
|
||||||
...mapGetters([
|
groupID: String,
|
||||||
"storeCurrentConversation",
|
groupMemberList: Array,
|
||||||
"storeCurrentMemberInGroup",
|
},
|
||||||
"storeCurrentGroup",
|
data() {
|
||||||
]),
|
return {};
|
||||||
isOwner() {
|
},
|
||||||
return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Owner;
|
computed: {
|
||||||
},
|
...mapGetters([
|
||||||
isAdmin() {
|
"storeCurrentConversation",
|
||||||
return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Admin;
|
"storeCurrentMemberInGroup",
|
||||||
},
|
"storeCurrentGroup",
|
||||||
},
|
]),
|
||||||
methods: {
|
isOwner() {
|
||||||
toMemberList() {
|
return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Owner;
|
||||||
uni.navigateTo({
|
},
|
||||||
url: `/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Preview}&groupID=${this.groupID}`,
|
isAdmin() {
|
||||||
});
|
return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Admin;
|
||||||
},
|
},
|
||||||
inviteMember() {
|
},
|
||||||
uni.navigateTo({
|
methods: {
|
||||||
url: `/pages/common/contactChoose/index?type=${ContactChooseTypes.Invite}&groupID=${this.groupID}`,
|
toMemberList() {
|
||||||
});
|
uni.navigateTo({
|
||||||
},
|
url: `/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Preview}&groupID=${this.groupID}`,
|
||||||
kickMember() {
|
});
|
||||||
uni.navigateTo({
|
},
|
||||||
url: `/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Kickout}&groupID=${this.groupID}`,
|
inviteMember() {
|
||||||
});
|
uni.navigateTo({
|
||||||
},
|
url: `/pages/common/contactChoose/index?type=${ContactChooseTypes.Invite}&groupID=${this.groupID}`,
|
||||||
},
|
});
|
||||||
};
|
},
|
||||||
|
kickMember() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Kickout}&groupID=${this.groupID}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.member_row {
|
.member_row {
|
||||||
@include colBox(false);
|
@include colBox(false);
|
||||||
padding: 36rpx 36rpx 0;
|
padding: 36rpx 36rpx 0;
|
||||||
margin: 24rpx;
|
margin: 24rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: $uni-text-color;
|
color: $uni-text-color;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.member_title {
|
.member_title {
|
||||||
@include btwBox();
|
@include btwBox();
|
||||||
|
|
||||||
.member_desc {
|
.member_desc {
|
||||||
@include vCenterBox();
|
@include vCenterBox();
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.member_list {
|
.member_list {
|
||||||
@include vCenterBox();
|
@include vCenterBox();
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
.member_item {
|
.member_item {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 8rpx 14rpx;
|
margin: 8rpx 14rpx;
|
||||||
|
|
||||||
&_name {
|
&_name {
|
||||||
margin-top: 8rpx;
|
margin-top: 8rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #8e9ab0;
|
color: #8e9ab0;
|
||||||
max-width: 48px;
|
max-width: 48px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ower{
|
.ower {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
bottom: 34rpx;
|
bottom: 34rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: #0089FF;
|
color: #0089FF;
|
||||||
background: #E8EAEF;
|
background: #E8EAEF;
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more {
|
.more {
|
||||||
@include btwBox();
|
@include btwBox();
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
padding: 20rpx 0rpx 20rpx;
|
padding: 20rpx 0rpx 20rpx;
|
||||||
border-top: 1px solid rgba(153, 153, 153, 0.2);
|
border-top: 1px solid rgba(153, 153, 153, 0.2);
|
||||||
|
|
||||||
.more_right {
|
.more_right {
|
||||||
@include vCenterBox();
|
@include vCenterBox();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -18,11 +18,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="group_info">
|
<view class="group_info">
|
||||||
<view class="group_info_name">
|
<view class="group_info_name">
|
||||||
<text class="group_name"
|
<text class="group_name">{{ storeCurrentConversation.showName }}({{storeCurrentGroup.memberCount}})</text>
|
||||||
>{{ storeCurrentConversation.showName }}({{
|
|
||||||
storeCurrentGroup.memberCount
|
|
||||||
}})</text
|
|
||||||
>
|
|
||||||
<image
|
<image
|
||||||
v-if="isOwner || isAdmin"
|
v-if="isOwner || isAdmin"
|
||||||
@click="toUpdateGroupName"
|
@click="toUpdateGroupName"
|
||||||
|
|||||||
+45
-104
@@ -1,34 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="page_container">
|
<view class="page_container">
|
||||||
<view class="self_info_row"></view>
|
<view class="uni-white-bg">
|
||||||
|
<view class="self_info_row"></view>
|
||||||
|
|
||||||
<view class="info_card">
|
<view class="info_card">
|
||||||
<my-avatar :src="selfInfo.faceURL" :desc="selfInfo.nickname" size="46" />
|
<my-avatar :src="selfInfo.faceURL" :desc="selfInfo.nickname" size="64" />
|
||||||
|
|
||||||
<view class="id_row">
|
<view class="id_row">
|
||||||
<text class="nickname">{{ selfInfo.nickname }}</text>
|
<text class="nickname">{{ selfInfo.nickname }}</text>
|
||||||
<view class="id_row_copy" @click="copy">
|
<view class="id_row_copy" @click="copy">
|
||||||
<text class="id">{{ selfInfo.userID }}</text>
|
<text class="id">{{ selfInfo.userID }}</text>
|
||||||
<image style="width: 32rpx; height: 32rpx" src="@/static/images/id_copy.png" mode="" />
|
<image style="width: 32rpx; height: 32rpx" src="@/static/images/id_copy.png" mode="" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="qr" @click="toSelfQr">
|
||||||
|
<img src="static/images/self_info_qr.png" alt="" />
|
||||||
|
<img src="static/images/common_right.png" alt="" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="qr" @click="toSelfQr">
|
|
||||||
<img src="static/images/self_info_qr.png" alt="" />
|
|
||||||
<img src="static/images/common_right.png" alt="" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="action_box">
|
|
||||||
<view @click="profileMenuClick(item)" class="profile_menu_item" v-for="item in profileMenus"
|
|
||||||
:key="item.idx">
|
|
||||||
<view class="menu_left">
|
|
||||||
<image style="width: 48rpx; height: 48rpx" :src="item.icon" mode="" />
|
|
||||||
<text>{{ item.title }}</text>
|
|
||||||
</view>
|
|
||||||
<u-icon name="arrow-right" size="16" color="#999"></u-icon>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
<uni-list style="margin: 20rpx auto;width: 100%;">
|
||||||
|
<uni-list-item title="我的信息" thumb="/static/images/profile_menu_info.png" to="/pages/profile/selfInfo/index" clickable showArrow ></uni-list-item>
|
||||||
|
<uni-list-item title="账号设置" thumb="/static/images/profile_menu_account.png" to="/pages/profile/messageNotification/index" clickable showArrow ></uni-list-item>
|
||||||
|
<uni-list-item title="关于我们" thumb="/static/images/profile_menu_about.png" to="/pages/profile/accountSetting/index" clickable showArrow ></uni-list-item>
|
||||||
|
</uni-list>
|
||||||
|
<uni-list>
|
||||||
|
<uni-list-item title="退出登录" thumb="/static/images/profile_menu_logout.png" @click="logout" clickable showArrow ></uni-list-item>
|
||||||
|
</uni-list>
|
||||||
|
|
||||||
<u-toast ref="uToast"></u-toast>
|
<u-toast ref="uToast"></u-toast>
|
||||||
</view>
|
</view>
|
||||||
@@ -37,27 +36,14 @@
|
|||||||
<script>
|
<script>
|
||||||
import IMSDK from "openim-uniapp-polyfill";
|
import IMSDK from "openim-uniapp-polyfill";
|
||||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||||
|
import util from "@/util";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
MyAvatar,
|
MyAvatar,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
profileMenus: [{
|
profileMenus: [
|
||||||
idx: 0,
|
|
||||||
title: "我的信息",
|
|
||||||
icon: require("static/images/profile_menu_info.png"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
idx: 2,
|
|
||||||
title: "账号设置",
|
|
||||||
icon: require("static/images/profile_menu_account.png"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
idx: 3,
|
|
||||||
title: "关于我们",
|
|
||||||
icon: require("static/images/profile_menu_about.png"),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
idx: 4,
|
idx: 4,
|
||||||
title: "退出登录",
|
title: "退出登录",
|
||||||
@@ -72,6 +58,7 @@
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
...util,
|
||||||
copy() {
|
copy() {
|
||||||
console.log(this.selfInfo)
|
console.log(this.selfInfo)
|
||||||
uni.setClipboardData({
|
uni.setClipboardData({
|
||||||
@@ -86,9 +73,7 @@
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
logoutConfirm() {
|
logoutConfirm() {
|
||||||
console.log(1)
|
|
||||||
IMSDK.asyncApi(IMSDK.IMMethods.Logout, IMSDK.uuid()).then(() => {
|
IMSDK.asyncApi(IMSDK.IMMethods.Logout, IMSDK.uuid()).then(() => {
|
||||||
console.log(2)
|
|
||||||
uni.removeStorage({
|
uni.removeStorage({
|
||||||
key: "IMToken",
|
key: "IMToken",
|
||||||
});
|
});
|
||||||
@@ -96,55 +81,29 @@
|
|||||||
key: "BusinessToken",
|
key: "BusinessToken",
|
||||||
});
|
});
|
||||||
}).catch((err) => {
|
}).catch((err) => {
|
||||||
console.log(3)
|
|
||||||
console.log(err)
|
console.log(err)
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
console.log(4)
|
|
||||||
uni.$u.route("/pages/login/index");
|
uni.$u.route("/pages/login/index");
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
profileMenuClick({idx}) {
|
|
||||||
switch (idx) {
|
logout(){
|
||||||
case 0:
|
|
||||||
uni.navigateTo({
|
uni.showModal({
|
||||||
url: "/pages/profile/selfInfo/index",
|
title: "提示",
|
||||||
});
|
content: "确定要退出当前账号吗？",
|
||||||
break;
|
confirmText: "确认",
|
||||||
case 1:
|
cancelText: "取消",
|
||||||
uni.navigateTo({
|
success: (res) => {
|
||||||
url: "/pages/profile/messageNotification/index",
|
if (res.confirm) {
|
||||||
});
|
this.logoutConfirm();
|
||||||
break;
|
}
|
||||||
case 2:
|
},
|
||||||
uni.navigateTo({
|
});
|
||||||
url: "/pages/profile/accountSetting/index",
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
uni.navigateTo({
|
|
||||||
url: "/pages/profile/about/index",
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 4:
|
|
||||||
uni.showModal({
|
|
||||||
title: "提示",
|
|
||||||
content: "确定要退出当前账号吗？",
|
|
||||||
confirmText: "确认",
|
|
||||||
cancelText: "取消",
|
|
||||||
success: (res) => {
|
|
||||||
if (res.confirm) {
|
|
||||||
this.logoutConfirm();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
toSelfQr() {
|
toSelfQr() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/common/userOrGroupQrCode/index`,
|
url: `/pages/common/userOrGroupQrCode`,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -152,8 +111,9 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import '@/uni_modules/uni-scss/index.scss';
|
||||||
.page_container {
|
.page_container {
|
||||||
background-color: #f8f9fa;
|
background-color: #ececec;
|
||||||
|
|
||||||
.self_info_row {
|
.self_info_row {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -162,7 +122,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 276rpx;
|
height: 276rpx;
|
||||||
background-image: url("@/static/images/profile_top_bg.png");
|
//background-image: url("@/static/images/profile_top_bg.png");
|
||||||
background-repeat: round;
|
background-repeat: round;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -180,7 +140,7 @@
|
|||||||
.id_row {
|
.id_row {
|
||||||
@include vCenterBox();
|
@include vCenterBox();
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 46px;
|
//height: 46px;
|
||||||
margin-left: 16rpx;
|
margin-left: 16rpx;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@@ -210,24 +170,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.action_box {
|
|
||||||
margin: 24rpx 24rpx 0 24rpx;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile_menu_item {
|
|
||||||
@include btwBox();
|
|
||||||
padding: 24rpx 36rpx;
|
|
||||||
|
|
||||||
.menu_left {
|
|
||||||
@include vCenterBox();
|
|
||||||
color: $uni-text-color;
|
|
||||||
|
|
||||||
image {
|
|
||||||
margin-right: 24rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,22 +1,986 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="content" id="content">
|
||||||
|
<u-navbar bgColor="transparent" title="朋友圈" title-size="36" leftIconColor="#fff"
|
||||||
|
:titleStyle ="{color:'#fff'}" :title-bold="true" :border-bottom="false">
|
||||||
|
<view slot="right" class="u-margin-right-20" @click="showTypeSheet"
|
||||||
|
@longpress="linkToRelease({releaseType:0})">
|
||||||
|
<u-icon name="camera" color="#fff" size="32"></u-icon>
|
||||||
|
</view>
|
||||||
|
</u-navbar>
|
||||||
|
<scroll-view :scroll-x="false" :scroll-y="true" v-show="showInput==false" class="scrollView"
|
||||||
|
:scroll-with-animation="scrollWithAnimation" :scroll-top="scrollTop" @scroll="scrolling"
|
||||||
|
@scrolltolower="loadMore"
|
||||||
|
:style="'height:'+scrollViewHeight+'px'">
|
||||||
|
<!-- 我的朋友圈基本信息 -->
|
||||||
|
<view class="content-imgbox">
|
||||||
|
<!--circleBgImg是vuex变量，不在本页面定义 -->
|
||||||
|
<image class="bgimg" v-if="circleBgImg" :src="circleBgImg" mode="scaleToFill" @tap="showSheet"></image>
|
||||||
|
<view class="bgimg" v-else @tap="showSheet"></view>
|
||||||
|
|
||||||
|
<MyAvatar class="headimg" :src="selfInfo.faceURL" :desc="selfInfo.nickname || selfInfo.remark"
|
||||||
|
:isGroup="Boolean(selfInfo.groupID)" size="66" @tap="linkToBusinessCard(selfInfo.userID)" />
|
||||||
|
<text class="nickname">{{ selfInfo.nickname || self.remark }}</text>
|
||||||
|
</view>
|
||||||
|
<!-- 个性签名 -->
|
||||||
|
<view class="signature">
|
||||||
|
<view class="">{{ selfInfo.bio }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="u-m-t-20 u-m-b-30 u-flex u-row-center u-col-center" v-if="vuex_friendCircleUnreadCount>0">
|
||||||
|
<view class="u-flex u-row-left u-col-center" @click="clearUnReadCount()"
|
||||||
|
style="width: 300rpx;height:70rpx;background-color: #333333;color: #ffffff;border-radius:10rpx;">
|
||||||
|
<view style="width:80rpx;padding:0 10rpx;">
|
||||||
|
<MyAvatar class="headimg" :src="selfInfo.faceURL" :desc="selfInfo.nickname || selfInfo.remark"
|
||||||
|
:isGroup="Boolean(selfInfo.groupID)" size="66"/>
|
||||||
|
</view>
|
||||||
|
<view style="width:220rpx;text-align: center;">
|
||||||
|
<text>{{vuex_friendCircleUnreadCount}}条新信息</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 朋友圈列表 -->
|
||||||
|
<view class="content-circle">
|
||||||
|
<!-- circleData是vuex变量，不在本页面定义 -->
|
||||||
|
<template v-if="circleData!=null&&circleData.length>0">
|
||||||
|
<view class="content-circle-box" v-for="(item, index) in circleData" :key="index" :index="index">
|
||||||
|
<view @tap="linkToBusinessCard(item.user_id)">
|
||||||
|
<MyAvatar :src="item.user.avatar" :desc="item.user.nickname || item.user.id" :isGroup="false" size="66"></MyAvatar>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
<view class="content-name" @tap="linkToBusinessCard(item.user_id)">{{ item.user.nickname || item.user.remark }}</view>
|
||||||
|
<view class="content-desc">{{ item.body }}</view>
|
||||||
|
<!-- 图片,视频 -->
|
||||||
|
<view class="content-img" v-if="item.files!=null&&item.files.length>0">
|
||||||
|
<!-- //只有一张图时候 -->
|
||||||
|
<view v-if="item.files.length==1&&item.releaseType==1" class="u-flex u-row-left u-col-center"
|
||||||
|
style="width:100%;min-height: 200rpx;">
|
||||||
|
<u-image width="280rpx" :src="cdn(item.files[0])" mode="widthFix"
|
||||||
|
@tap="previewImg(0, item)">
|
||||||
|
<u-loading slot="loading"></u-loading>
|
||||||
|
<view slot="error" class="u-flex u-row-left u-col-center"
|
||||||
|
style="font-size: 24rpx;width: 200rpx;height: 100rpx;margin-top: -50rpx;">
|
||||||
|
<u-icon name="photo" size="100" label="加载失败" label-pos="bottom"></u-icon>
|
||||||
|
</view>
|
||||||
|
</u-image>
|
||||||
|
</view>
|
||||||
|
<!-- 有多张图的时候 -->
|
||||||
|
<view v-if="item.files.length > 1&&item.releaseType==1">
|
||||||
|
<view class="content-img-more u-m-b-20">
|
||||||
|
<u-grid :col="3" :border="false" hover-class="none">
|
||||||
|
<u-grid-item v-for="(src, index) in item.files" :index="index" :custom-style="girdItemCustomStyle">
|
||||||
|
<view @tap="previewImg(index, item)" class="slot-btn">
|
||||||
|
<u-image :src="cdn(src)" width="180rpx" height="180rpx" mode="aspectFill" border-radius="10"></u-image>
|
||||||
|
</view>
|
||||||
|
</u-grid-item>
|
||||||
|
</u-grid>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 视频 -->
|
||||||
|
<view class="u-m-b-30 u-m-t-30 u-flex u-row-left u-col-center"
|
||||||
|
v-if="item.fileList.length > 0&&item.releaseType==2" @tap="previewImg(0, item)">
|
||||||
|
<view v-if="vuex_OSPlat=='ios'">
|
||||||
|
<u-image width="280rpx" :src="getVideoPoster(item.fileList[0])" mode="widthFix">
|
||||||
|
<u-loading slot="loading"></u-loading>
|
||||||
|
</u-image>
|
||||||
|
</view>
|
||||||
|
<view v-else class="u-flex u-row-center u-col-center"
|
||||||
|
style="border: 1rpx solid #36648b;width:280rpx;height:120rpx;border-radius: 16rpx;">
|
||||||
|
<u-icon name="play-circle" size="48" color="#36648b"
|
||||||
|
label="点击查看视频" label-pos="bottom"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 地点 -->
|
||||||
|
<view v-if="(item.address&&item.address.chooseFlag)==true" class="u-line-2 u-m-t-10 u-m-b-10" style="font-size: 30rpx;color: #36648b;">
|
||||||
|
<u-icon name="map" color="#36648b" size="30" :custom-style="{marginLeft:'-4rpx'}"></u-icon>
|
||||||
|
<text> {{ item.address.name}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 相对时间 点赞按钮等 -->
|
||||||
|
<view class="relavivetime" :id="`comment-${'null'}-${index}`">
|
||||||
|
<view class="time u-flex u-col-center">
|
||||||
|
<view>{{ item.created_at }}</view>
|
||||||
|
<view @click="deleteCircle(item,index)" style="color:#36648b;margin-left: 20rpx;" v-if="item.user_id==selfInfo.userID">删除</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="icon-box u-flex u-row-between u-col-center">
|
||||||
|
<view @tap="clickThumb(item,index)" class="u-m-r-6 u-p-t-4">
|
||||||
|
<u-icon v-if="item.isPraise==false" size="38" name="heart" color="#36648b"></u-icon>
|
||||||
|
<u-icon v-if="item.isPraise==true" size="38" name="heart-fill" color="#36648b"></u-icon>
|
||||||
|
</view>
|
||||||
|
<view @tap="handleComment(item.id, null, index)" class="u-m-l-6 u-p-t-2">
|
||||||
|
<u-icon size="40" name="chat" color="#36648b"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 点赞人 评论 -->
|
||||||
|
<view class="msg-box">
|
||||||
|
<view class="thumbinfo u-border-bottom" v-if="item.praise!=null&&item.praise.length">
|
||||||
|
<uni-icons size="30" type="heart" color="#36648b" class="u-m-r-10"></uni-icons>
|
||||||
|
<text class="thumbinfo-name" v-for="(userInfo, pindex) in item.praise" :index="pindex"
|
||||||
|
:key="pindex" @tap="linkToBusinessCard(userInfo.userId)">
|
||||||
|
{{ userInfo.nickame }}{{ pindex != item.praise.length - 1 ? '，' : '' }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="comment" v-if="item.comments!=null&&item.comments.length">
|
||||||
|
<view class="comment-box" v-for="(comment, commentIndex) in item.comments" :index="commentIndex"
|
||||||
|
:key="commentIndex" hover-class="comment-hover-class"
|
||||||
|
:id="`comment-${item.id}-${index}`"
|
||||||
|
@tap="handleComment(item.id, comment, index)">
|
||||||
|
<text class="comment-box-name" v-if="!comment.reply_user_id">{{ comment.replyUser.nickname }}：</text>
|
||||||
|
<text class="comment-box-name" v-if="comment.reply_user_id">
|
||||||
|
{{ comment.replyUser.nickname }}
|
||||||
|
<text class="callback u-m-l-4 u-m-r-4">回复</text>
|
||||||
|
</text>
|
||||||
|
<text v-if="comment.reply_user_id" class="comment-box-name">{{ comment.replyUser.nickname }}：</text>
|
||||||
|
<text class="comment-box-content">{{ comment.content }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<view style="margin-top: 30%;">
|
||||||
|
<u-empty text="暂无动态,发一条试试吧~"></u-empty>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- 为了实现模拟键盘随着内容的选择而固定位置 -->
|
||||||
|
<template v-if="showInput==true">
|
||||||
|
<scroll-view :scroll-x="false" :scroll-y="true" :scroll-top="currentTop" @touchstart="closeInputModel"
|
||||||
|
:style="'width:100%;height:'+scrollViewHeight+'px;'">
|
||||||
|
<view @click="closeInputModel" class="content-circle-box">
|
||||||
|
<view>
|
||||||
|
<MyAvatar :src="currentItem.avatar" :isGroup="false" size="66"></MyAvatar>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
<view class="content-name">{{ currentItem.nickname }}</view>
|
||||||
|
<view class="content-desc">{{ currentItem.content }}</view>
|
||||||
|
<view class="content-img" v-if="currentItem.files!=null&¤tItem.files.length>0">
|
||||||
|
<view v-if="currentItem.files.length==1&¤tItem.releaseType==1"
|
||||||
|
class="u-flex u-row-left u-col-center" style="width:100%;min-height: 200rpx;">
|
||||||
|
<u-image width="280rpx" :src="currentItem.files[0]" mode="widthFix">
|
||||||
|
<u-loading slot="loading"></u-loading>
|
||||||
|
<view slot="error" class="u-flex u-row-left u-col-center"
|
||||||
|
style="font-size: 24rpx;width: 200rpx;height: 100rpx;margin-top: -50rpx;">
|
||||||
|
<u-icon name="photo" size="100" label="加载失败" label-pos="bottom"></u-icon>
|
||||||
|
</view>
|
||||||
|
</u-image>
|
||||||
|
</view>
|
||||||
|
<!-- 有多张图的时候 -->
|
||||||
|
<view v-if="currentItem.files.length > 1&¤tItem.releaseType==1">
|
||||||
|
<view class="content-img-more u-m-b-20">
|
||||||
|
<u-grid :col="3" :border="false" hover-class="none">
|
||||||
|
<u-grid-item v-for="(src, index) in currentItem.files" :index="index" :custom-style="girdItemCustomStyle">
|
||||||
|
<view class="slot-btn">
|
||||||
|
<u-image :src="src" width="180rpx" height="180rpx" mode="aspectFill" border-radius="10"></u-image>
|
||||||
|
</view>
|
||||||
|
</u-grid-item>
|
||||||
|
</u-grid>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view v-if="currentItem.releaseType==2" class="u-m-b-20 u-m-t-20 u-flex u-row-left u-col-center">
|
||||||
|
<view class="u-flex u-row-left u-col-center" style="height: 120rpx;border-radius: 16rpx;">
|
||||||
|
<u-icon name="play-circle" size="48" color="#36648b"
|
||||||
|
label="此处不支持观看视频" label-pos="bottom" :margin-left="20" :margin-right="20"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 地点 -->
|
||||||
|
<view v-if="(currentItem.address&¤tItem.address.chooseFlag)==true" class="u-line-2 u-m-t-10 u-m-b-10"
|
||||||
|
style="font-size: 30rpx;color: #36648b;">
|
||||||
|
<u-icon name="map" color="#36648b" size="30" :custom-style="{marginLeft:'-4rpx'}"></u-icon>
|
||||||
|
<text> {{ currentItem.address.name}}</text>
|
||||||
|
</view>
|
||||||
|
<!-- 点赞人 评论 -->
|
||||||
|
<view class="msg-box">
|
||||||
|
<view class="thumbinfo" v-if="currentItem.praise!=null&¤tItem.praise.length>0">
|
||||||
|
<uni-icons type="heart" class="thumbinfo-icon"></uni-icons>
|
||||||
|
<text class="thumbinfo-name" v-for="(userInfo, pindex) in currentItem.praise"
|
||||||
|
:key="pindex">
|
||||||
|
{{ userInfo.nickname }}{{ pindex != currentItem.praise.length - 1 ? '，' : '' }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="comment" v-if="currentItem.comments!=null&¤tItem.comments.length>0">
|
||||||
|
<view class="comment-box" v-for="(comment, cindex) in currentItem.comments" :key="cindex" :index="cindex"
|
||||||
|
hover-class="comment-hover-class">
|
||||||
|
<text class="comment-box-name" v-if="!comment.reply_user_id">{{ comment.replyUser.nickname }}：</text>
|
||||||
|
<text class="comment-box-name" v-if="comment.reply_user_id">
|
||||||
|
{{ comment.replyUser.nickname }}<text class="callback u-m-l-4 u-m-r-4">回复</text>
|
||||||
|
</text>
|
||||||
|
<text v-if="comment.reply_user_id" class="comment-box-name">{{ comment.replyUser.nickname }}：</text>
|
||||||
|
<text class="comment-box-content">{{ comment.body }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="input-box" v-show="showInput" style="height: 100rpx;">
|
||||||
|
<view class="input-box-flex">
|
||||||
|
<view class="input-box-flex-grow">
|
||||||
|
<input :adjust-position="false" type="text" class="content" id="input" v-model="content"
|
||||||
|
:confirm-type="'send'" :confirm-hold="true" placeholder-style="color:#DDD;" :cursor-spacing="6"
|
||||||
|
:placeholder="placeholder" :focus="showInput" @blur="blurInput" @confirm="sendMsg" />
|
||||||
|
</view>
|
||||||
|
<button class="btn" type="primary" size="mini" @touchend.prevent="sendMsg">发送</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 视频预览 -->
|
||||||
|
<view v-if="previewVideoFlag==true">
|
||||||
|
<videoPlayer :previewVideoFlag="previewVideoFlag" :previewVideoSrc="previewVideoSrc" @quitPlay="previewVideoFlag=false"></videoPlayer>
|
||||||
|
</view>
|
||||||
|
<!-- 删除朋友圈确认框 -->
|
||||||
|
<view v-if="delCircleObj.delCircleModelFlag==true">
|
||||||
|
<u-modal v-model="delCircleObj.delCircleModelFlag" :show-title="false"
|
||||||
|
:show-confirm-button="true" confirm-text="删除" confirm-color="#fa3534"
|
||||||
|
:show-cancel-button="true" cancel-text="取消" cancel-color="#000000"
|
||||||
|
content="删除该朋友圈?" :content-style="{color:'#000000',fontSize:'32rpx',fontWeight:'bold'}"
|
||||||
|
@confirm="confirmDelCircle()" @cancel="cancelDelCircle()">
|
||||||
|
</u-modal>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import videoPlayer from '@/components/videoPlayer.vue';
|
||||||
|
import {getFriendCircle} from "@/api/login.js"
|
||||||
|
import UserBase from "@/components/User.vue"
|
||||||
|
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||||
|
import util from "@/util/index.js"
|
||||||
export default {
|
export default {
|
||||||
|
name: 'firendCircle',
|
||||||
|
mixins:[UserBase],
|
||||||
|
components:{videoPlayer ,MyAvatar},
|
||||||
|
computed: {
|
||||||
|
selfInfo() {
|
||||||
|
return this.$store.getters.storeSelfInfo;
|
||||||
|
},
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
circleData:[],
|
||||||
|
circleBgImg:"",
|
||||||
|
vuex_friendCircleUnreadCount:0,
|
||||||
|
loadMoreFlag:true,//可以分页加载吗
|
||||||
|
platFrom:'',
|
||||||
|
girdItemCustomStyle:{
|
||||||
|
padding: '0',
|
||||||
|
margin:'0',
|
||||||
|
border:'1rpx solid #f2f6fc'
|
||||||
|
},
|
||||||
|
scrollViewHeight: 0,
|
||||||
|
scrollTop: 0,
|
||||||
|
currentTop: 0,
|
||||||
|
currentScroll: 0,
|
||||||
|
scrollWithAnimation: false,
|
||||||
|
content: '',
|
||||||
|
placeholder: '',
|
||||||
|
showInput: false,
|
||||||
|
focus: false,
|
||||||
|
id: '', //某一条朋友圈id
|
||||||
|
commentInfo: {},
|
||||||
|
currentItem: {},
|
||||||
|
previewVideoFlag:false,
|
||||||
|
previewVideoSrc:'',
|
||||||
|
videoContext:null,
|
||||||
|
page:1,
|
||||||
|
limit:5,
|
||||||
|
//删除对象参数
|
||||||
|
delCircleObj:{
|
||||||
|
delCircleModelFlag:false,
|
||||||
|
tempDelCircleId:'',
|
||||||
|
tempDelIndex:"",
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//vuex变量
|
||||||
|
watch:{
|
||||||
|
circleData:function(val){
|
||||||
|
console.log("监听到朋友圈内容有变动",val.length);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onReady() {
|
||||||
|
console.log(this.selfInfo);
|
||||||
|
let that = this;
|
||||||
|
uni.onKeyboardHeightChange(res => {
|
||||||
|
if (res.height == 0) {
|
||||||
|
let windowHeight = this.$u.sys().windowHeight;
|
||||||
|
this.scrollViewHeight = windowHeight - 90;
|
||||||
|
this.showInput = false;
|
||||||
|
this.currentTop = 0;
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
this.currentTop = 999;
|
||||||
|
let windowHeight = this.$u.sys().windowHeight;
|
||||||
|
this.scrollViewHeight = (windowHeight - res.height) - 120;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onShow: function(option) {
|
||||||
|
let windowHeight = this.$u.sys().windowHeight;
|
||||||
|
this.scrollViewHeight = windowHeight - 90;
|
||||||
|
console.log("onshow",this.page);
|
||||||
|
},
|
||||||
|
onLoad:function(){
|
||||||
|
let that=this;
|
||||||
|
this.platFrom= this.$u.os();
|
||||||
|
console.log("onload",this.platFrom);
|
||||||
|
let param={
|
||||||
|
page:1,
|
||||||
|
limit:this.limit,
|
||||||
|
moreFlag:false
|
||||||
|
};
|
||||||
|
this.getCircleDataList(param);
|
||||||
|
uni.$on("handleFriendCircle", function(friendCircleMessage) {
|
||||||
|
console.log("监听到朋友圈动态有更新",friendCircleMessage);
|
||||||
|
let id= friendCircleMessage.content.id;
|
||||||
|
let newPraise= friendCircleMessage.content.praise;
|
||||||
|
const index = that.circleData.findIndex(i => i.id ==id);
|
||||||
|
that.circleData[index].praise=JSON.parse(newPraise);
|
||||||
|
let unreadCount=that.vuex_friendCircleUnreadCount?that.vuex_friendCircleUnreadCount:0;
|
||||||
|
if(friendCircleMessage.content.isPraise&&friendCircleMessage.userId!=that.selfInfo.userID){
|
||||||
|
that.$u.vuex("vuex_friendCircleUnreadCount",unreadCount+1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
//下拉刷新
|
||||||
|
async onPullDownRefresh() {
|
||||||
|
let that=this;
|
||||||
|
that.page=1;
|
||||||
|
that.limit=5;
|
||||||
|
that.loadMoreFlag=true;//可以分页加载
|
||||||
|
let param={
|
||||||
|
page:1,
|
||||||
|
limit:this.limit,
|
||||||
|
moreFlag:false
|
||||||
|
};
|
||||||
|
await this.getCircleDataList(param);
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
clearUnReadCount(){
|
||||||
|
this.$u.vuex("vuex_friendCircleUnreadCount",0);
|
||||||
|
this.localGroupApi.setTabBarBadge(2,"0");
|
||||||
|
},
|
||||||
|
//初始化朋友圈
|
||||||
|
getCircleDataList:function(param){
|
||||||
|
let that=this;
|
||||||
|
getFriendCircle(param).then(res => {
|
||||||
|
//console.log("朋友圈列表",res);
|
||||||
|
let circleDataList=res.data;
|
||||||
|
//console.log("朋友圈列表",circleDataList);
|
||||||
|
if(circleDataList.length>0){
|
||||||
|
that.loadMoreFlag=true;
|
||||||
|
for (var i = 0; i < circleDataList.length; i++) {
|
||||||
|
let item= circleDataList[i];
|
||||||
|
if(item.userId==this.selfInfo.userID){
|
||||||
|
item.userName="我";
|
||||||
|
}
|
||||||
|
if(item.address!=null&&item.address.length>0){
|
||||||
|
item.address=JSON.parse(item.address);
|
||||||
|
}
|
||||||
|
if(item.fileList!=null&&item.fileList.length>0){
|
||||||
|
item.fileList=JSON.parse(item.fileList);
|
||||||
|
if(item.releaseType==2){
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(item.praise!=null){
|
||||||
|
item.praise=JSON.parse(item.praise);
|
||||||
|
}else{
|
||||||
|
item.praise=[];
|
||||||
|
}
|
||||||
|
if(item.comment!=null&&item.comment.length>0){
|
||||||
|
item.comment=JSON.parse(item.comment);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
item.comment=[];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
if(param.moreFlag==true){
|
||||||
|
that.loadMoreFlag=false;
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//初始化列表
|
||||||
|
if(param.moreFlag==false){
|
||||||
|
console.log("初始化朋友圈列表",circleDataList.length);
|
||||||
|
that.circleData = circleDataList;
|
||||||
|
//that.$u.vuex('circleData', circleDataList);
|
||||||
|
}
|
||||||
|
//加载更多
|
||||||
|
else{
|
||||||
|
let oldList=that.circleData;
|
||||||
|
let newList=oldList.concat(circleDataList);
|
||||||
|
that.circleData = circleDataList;
|
||||||
|
//that.$u.vuex('circleData', newList);
|
||||||
|
console.log("加载更多朋友圈列表",newList);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
//滚动事件
|
||||||
|
scrolling: function(event) {
|
||||||
|
//console.log("event",event);
|
||||||
|
let that = this;
|
||||||
|
if (that.showInput == true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let scrollTop = event.detail.scrollTop;
|
||||||
|
setTimeout(function() {
|
||||||
|
that.currentScroll = scrollTop;
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
//加载更多
|
||||||
|
loadMore:function(){
|
||||||
|
let that=this;
|
||||||
|
if(that.loadMoreFlag==false){
|
||||||
|
if(that.page>1){
|
||||||
|
//that.page;
|
||||||
|
console.log("暂无更多",that.page);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
that.page++;
|
||||||
|
let param={
|
||||||
|
page:that.page,
|
||||||
|
limit:that.limit,
|
||||||
|
moreFlag:true
|
||||||
|
}
|
||||||
|
console.log("page",param.page);
|
||||||
|
that.getCircleDataList(param);
|
||||||
|
},
|
||||||
|
|
||||||
|
//打开底部更换相册封面弹窗
|
||||||
|
showSheet() {
|
||||||
|
const _this = this;
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList:['更换相册封面'],
|
||||||
|
success: function (res) {
|
||||||
|
if(res.tapIndex == 0){
|
||||||
|
_this.goto('/pages/workbench/friend-circle/chooseCircleBgImg');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: function (res) {
|
||||||
|
console.log(res.errMsg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showTypeSheet() {
|
||||||
|
const _this = this;
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList:['选择照片','选择视频'],
|
||||||
|
success: function (res) {
|
||||||
|
//toChooseRelease
|
||||||
|
if(res.tapIndex<2){
|
||||||
|
_this.toChooseRelease(res.tapIndex);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: function (res) {
|
||||||
|
console.log(res.errMsg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
//点赞
|
||||||
|
clickThumb(item,index) {
|
||||||
|
let that=this;
|
||||||
|
let flag=true;
|
||||||
|
item.isPraise = !item.isPraise;
|
||||||
|
if (item.isPraise) {
|
||||||
|
item.praise.push({
|
||||||
|
userId: this.selfInfo.userID,
|
||||||
|
userName: this.selfInfo.nickname
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const index = item.praise.findIndex(i => i.userId == this.selfInfo.userID);
|
||||||
|
item.praise.splice(index, 1);
|
||||||
|
flag=false;
|
||||||
|
}
|
||||||
|
console.log("当前动态下标",index);
|
||||||
|
console.log("点赞列表",item);
|
||||||
|
let param={
|
||||||
|
id:item.id,
|
||||||
|
praise:JSON.stringify(item.praise),
|
||||||
|
isPraise:flag
|
||||||
|
};
|
||||||
|
friendCircleZan(param).then(res => {
|
||||||
|
if(res.code==200){
|
||||||
|
console.log("点赞更新成功",res.data);
|
||||||
|
item.praise=JSON.parse(res.data.praise);
|
||||||
|
that.circleData[index]=item;
|
||||||
|
}else{
|
||||||
|
item.isPraise = !item.isPraise;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//跳转到名片
|
||||||
|
linkToBusinessCard(userId) {
|
||||||
|
if(userId==this.selfInfo.userID){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.goto('/pages/common/userCard?sourceID='+userId);
|
||||||
|
},
|
||||||
|
//删除朋友圈
|
||||||
|
deleteCircle:function(item,index){
|
||||||
|
let that=this;
|
||||||
|
that.delCircleObj.tempDelCircleId=item.id;
|
||||||
|
that.delCircleObj.tempDelIndex=index;
|
||||||
|
that.delCircleObj.delCircleModelFlag=true;
|
||||||
|
},
|
||||||
|
confirmDelCircle:function(){
|
||||||
|
let that=this;
|
||||||
|
let delCircleId=that.delCircleObj.tempDelCircleId;
|
||||||
|
let delIndex=that.delCircleObj.tempDelIndex;
|
||||||
|
let param={
|
||||||
|
id:delCircleId
|
||||||
|
};
|
||||||
|
deleteCircle(param).then(res => {
|
||||||
|
if(res.code==200){
|
||||||
|
that.delCircleObj.delCircleModelFlag=false;
|
||||||
|
that.delCircleObj.tempDelCircleId="";
|
||||||
|
that.delCircleObj.tempDelIndex="";
|
||||||
|
let tempData=that.circleData;
|
||||||
|
tempData.splice(delIndex,1);
|
||||||
|
this.$u.vuex('circleData', tempData);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
cancelDelCircle:function(){
|
||||||
|
let that=this;
|
||||||
|
that.delCircleObj.delCircleModelFlag=false;
|
||||||
|
that.delCircleObj.tempDelCircleId="";
|
||||||
|
that.delCircleObj.tempDelIndex="";
|
||||||
|
},
|
||||||
|
|
||||||
|
//点击评论 唤出输入框和键盘
|
||||||
|
handleComment(id, comment, index) {
|
||||||
|
let that = this;
|
||||||
|
this.content = '';
|
||||||
|
that.currentItem = that.circleData[index];
|
||||||
|
that.currentTop = 0;
|
||||||
|
this.id = id;
|
||||||
|
this.commentInfo = comment || {};
|
||||||
|
this.placeholder = '评论：';
|
||||||
|
if (comment) {
|
||||||
|
//console.log("评论内容",comment);
|
||||||
|
if (comment.comment.user_id == this.selfInfo.userID) {
|
||||||
|
//如果是回复自己
|
||||||
|
this.placeholder = `评论：`;
|
||||||
|
} else {
|
||||||
|
// xxx评论...
|
||||||
|
this.placeholder = `回复${comment.replyUser.nickname}:`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.showInput = true;
|
||||||
|
},
|
||||||
|
//提交评论消息
|
||||||
|
sendMsg() {
|
||||||
|
let that=this;
|
||||||
|
if (!that.$u.trim(that.content)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let param={
|
||||||
|
reply_user_id:that.selfInfo.userID,
|
||||||
|
body:that.content,
|
||||||
|
friendCircleId:that.id
|
||||||
|
};
|
||||||
|
//如果被回复的动态发表人不是自己本人
|
||||||
|
if(that.commentInfo.reply_user_id!=that.selfInfo.userID){
|
||||||
|
param.reply_user_id=that.commentInfo.reply_user_id;
|
||||||
|
param.replyUserName=that.commentInfo.replyUser.nickname;
|
||||||
|
}
|
||||||
|
console.log("新增动态的评论",param);
|
||||||
|
this.circleData.forEach(item => {
|
||||||
|
if (item.id == that.id) {
|
||||||
|
if(item.comment!=null&&item.comment.length>0){
|
||||||
|
item.comment.push(param);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
item.comment=[param];
|
||||||
|
}
|
||||||
|
that.$u.api.friendCircle.handleComment(param).then(res => {
|
||||||
|
if(res.code==200){
|
||||||
|
console.log("评论更新成功");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
that.closeInputModel();
|
||||||
|
},
|
||||||
|
|
||||||
|
//查看大图或者预览视频
|
||||||
|
previewImg(current, data) {
|
||||||
|
let that=this;
|
||||||
|
let releaseType= data.releaseType;
|
||||||
|
let fileList=data.fileList;
|
||||||
|
if(releaseType==2){
|
||||||
|
that.previewVideoSrc=fileList[0];
|
||||||
|
that.previewVideoFlag=true;
|
||||||
|
}else{
|
||||||
|
uni.previewImage({
|
||||||
|
current:current,
|
||||||
|
urls: fileList,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//关闭键盘 关闭输入框
|
||||||
|
closeInputModel() {
|
||||||
|
this.showInput = false;
|
||||||
|
this.currentTop = 0;
|
||||||
|
this.content = '';
|
||||||
|
this.id = '';
|
||||||
|
this.commentInfo = {};
|
||||||
|
uni.hideKeyboard();
|
||||||
|
},
|
||||||
|
//失去焦点触发
|
||||||
|
blurInput() {
|
||||||
|
this.closeInputModel();
|
||||||
|
},
|
||||||
|
|
||||||
}
|
|
||||||
}
|
//选择发表朋友圈的方式
|
||||||
|
toChooseRelease: function(index) {
|
||||||
|
let that = this;
|
||||||
|
let tempFilePaths = [];
|
||||||
|
//拍照
|
||||||
|
if (index == 0) {
|
||||||
|
uni.chooseImage({
|
||||||
|
count: 9, //默认9
|
||||||
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||||
|
sourceType: ['camera','album'], //从相册选择
|
||||||
|
success: function(res) {
|
||||||
|
tempFilePaths = res.tempFilePaths;
|
||||||
|
let param = {
|
||||||
|
releaseType: 1,
|
||||||
|
tempFilePaths: JSON.stringify(tempFilePaths)
|
||||||
|
}
|
||||||
|
that.linkToRelease(param);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//选择视频
|
||||||
|
if (index == 1) {
|
||||||
|
uni.chooseVideo({
|
||||||
|
sourceType: ['camera', 'album'],
|
||||||
|
maxDuration: 60,
|
||||||
|
success: function(res) {
|
||||||
|
//console.log("视频",res);
|
||||||
|
let filePath = res.tempFilePath;
|
||||||
|
tempFilePaths.push(filePath);
|
||||||
|
let param = {
|
||||||
|
releaseType: 2,
|
||||||
|
tempFilePaths: JSON.stringify(tempFilePaths)
|
||||||
|
}
|
||||||
|
that.linkToRelease(param);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
//点击自定义组件相机按钮
|
||||||
|
linkToRelease(params) {
|
||||||
|
uni.$u.route({
|
||||||
|
url: '/pages/workbench/friend-circle/releaseFriendCircle',
|
||||||
|
params: params
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getVideoPoster(videoSrc){
|
||||||
|
console.log("video",videoSrc);
|
||||||
|
return "http://192.168.31.125:9090/we-chat/images/friendCircle/1715421601709.mp4";
|
||||||
|
//return videoSrc;
|
||||||
|
},
|
||||||
|
cdn:util.cdn
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
.comment-hover-class {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
.scrollView{
|
||||||
|
::-webkit-scrollbar{
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-imgbox {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.bgimg {
|
||||||
|
width: 100%;
|
||||||
|
height: 560rpx;
|
||||||
|
background-color: #474747;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headimg {
|
||||||
|
//width: 110rpx;
|
||||||
|
//height: 110rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
position: absolute;
|
||||||
|
right: 30rpx;
|
||||||
|
bottom: -20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nickname {
|
||||||
|
color: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
right: 170rpx;
|
||||||
|
bottom: 20rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-circle {
|
||||||
|
&-box {
|
||||||
|
padding: 18rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f2eeee;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.headimg {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
padding-left: 18rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
|
||||||
|
&-name {
|
||||||
|
color: #36648b;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-desc {
|
||||||
|
color: #000000;
|
||||||
|
padding-top: 4rpx;
|
||||||
|
//line-height: 36rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-img {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
|
||||||
|
.img-1 {
|
||||||
|
will-change: transform;
|
||||||
|
width: 280rpx;
|
||||||
|
height: auto;
|
||||||
|
max-height: 400rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-more {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.img-more {
|
||||||
|
display: block;
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
margin: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-3 {
|
||||||
|
margin: 4rpx 4rpx 4rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-box {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #FFF;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
|
||||||
|
.thumbinfo {
|
||||||
|
// border-bottom: 1rpx solid gray;
|
||||||
|
padding: 6rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
&-icon {
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
line-height: 28rpx;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #36648b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment {
|
||||||
|
padding: 6rpx 8rpx;
|
||||||
|
color: $uni-text-color;
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
&-box {
|
||||||
|
padding: 4rpx 0;
|
||||||
|
|
||||||
|
&-name {
|
||||||
|
color: #36648b;
|
||||||
|
|
||||||
|
.callback {
|
||||||
|
color: $uni-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.relavivetime {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
|
||||||
|
.time {
|
||||||
|
color: $uni-text-color-grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
//background-color: #F8F8F8;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
|
||||||
|
&.thumb {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 34rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-box {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: content-box;
|
||||||
|
z-index: 999;
|
||||||
|
background-color: #eaeaea;
|
||||||
|
|
||||||
|
// margin-bottom: 0rpx;
|
||||||
|
// margin-bottom: constant(safe-area-inset-bottom);
|
||||||
|
// margin-bottom: env(safe-area-inset-bottom);
|
||||||
|
&-flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
|
||||||
|
&-grow {
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
background-color: #fff;
|
||||||
|
height: 60rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
caret-color: $uni-color-success;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin-left: 20rpx;
|
||||||
|
//background-color: $u-type-success;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.signature {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: gray;
|
||||||
|
padding: 35rpx 30rpx 35rpx 100rpx;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slot-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slot-btn {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgb(244, 245, 246);
|
||||||
|
border-radius: 10rpx;
|
||||||
|
border:1rpx solid $u-border-color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,518 @@
|
|||||||
|
<template>
|
||||||
|
<view class="releaseContainer">
|
||||||
|
<u-navbar bgColor="transparent" @leftClick="goBack" placeholder fixed :title="navbarTitle" :is-back="false" :border-bottom="false">
|
||||||
|
<view slot="right">
|
||||||
|
<u-button
|
||||||
|
:custom-style="customBtnStyle"
|
||||||
|
size="mini"
|
||||||
|
:loading="btnLoading"
|
||||||
|
:disabled="submitFlag"
|
||||||
|
:type="submitFlag?'info ':'success'"
|
||||||
|
@click="releaseFriendCircle()">
|
||||||
|
发表
|
||||||
|
</u-button>
|
||||||
|
</view>
|
||||||
|
</u-navbar>
|
||||||
|
<view class="content">
|
||||||
|
<!-- 文字输入内容区 -->
|
||||||
|
<scroll-view @scroll="hiddenInput" class="input-box" :scroll-top="inputScrollTop" :scroll-with-animation="inputAnimation"
|
||||||
|
:style="'max-height:'+300+'rpx;width:'+(winWidth-30)+'px'"
|
||||||
|
:scroll-x="false" :scroll-y="true">
|
||||||
|
<textarea class="input" :auto-height="true" placeholder-style="color:#DDDDDD;" placeholder="这一刻的想法..."
|
||||||
|
:adjust-position="true" :auto-blur="true" @linechange="inputLineChange" @input="inputing"
|
||||||
|
:confirm-hold="true" :show-confirm-bar="false"
|
||||||
|
:focus="inputFocusFlag" :disable-default-padding="true"
|
||||||
|
v-model="content" :cursor="content.length" :maxlength="-1" />
|
||||||
|
</scroll-view>
|
||||||
|
<!-- 文件选择区 -->
|
||||||
|
<view v-if="releaseType!=0" class="uploadBox">
|
||||||
|
<u-grid :col="3" :border="false" hover-class="none">
|
||||||
|
<template v-if="tempFilePaths.length>0">
|
||||||
|
<u-grid-item v-for="(item,index) in tempFilePaths" :index="index" :custom-style="girdItemCustomStyle">
|
||||||
|
<view @click="delTempFile(index)"
|
||||||
|
style="width: 200rpx; display: flex; flex-direction: row;align-items: flex-start;justify-content: flex-end;position: relative;left: 32rpx;top:32rpx; z-index: 999;">
|
||||||
|
<u-icon name="close-circle" size="32" color="#fa3534"></u-icon>
|
||||||
|
</view>
|
||||||
|
<view @click="previewFile(index)" class="slot-btn" hover-class="slot-btn__hover">
|
||||||
|
<u-image :src="cdn(item)" width="198rpx" height="198rpx" mode="aspectFill" border-radius="10"></u-image>
|
||||||
|
</view>
|
||||||
|
</u-grid-item>
|
||||||
|
</template>
|
||||||
|
<template v-if="(tempFilePaths.length<9&&releaseType==1)||(tempFilePaths.length<1&&releaseType==2)">
|
||||||
|
<u-grid-item @click="chooseFile()" :custom-style="girdItemCustomStyle2">
|
||||||
|
<view class="slot-btn" hover-class="slot-btn__hover">
|
||||||
|
<u-icon name="plus" size="80" :color="$u.color['lightColor']"></u-icon>
|
||||||
|
</view>
|
||||||
|
</u-grid-item>
|
||||||
|
</template>
|
||||||
|
</u-grid>
|
||||||
|
</view>
|
||||||
|
<!-- 选项 -->
|
||||||
|
<view class="tips">
|
||||||
|
<u-cell-group>
|
||||||
|
<!-- :value="address.name" :value-style="customValueStyle" :label="address.address" -->
|
||||||
|
<u-cell bg-color="#ffffff"
|
||||||
|
:title="address.chooseFlag?(address.name):'所在位置'" :title-style="customTitleStyle"
|
||||||
|
:label="address.chooseFlag?(address.address):'请选择'"
|
||||||
|
@click="toChooseLocation()">
|
||||||
|
<view slot="icon" class="u-flex u-row-center u-col-center">
|
||||||
|
<u-icon name="map" size="32" :color="address.chooseFlag?'#19be6b':'#606266'"></u-icon>
|
||||||
|
</view>
|
||||||
|
</u-cell>
|
||||||
|
<u-cell bg-color="#ffffff" title="提醒谁看" :title-style="customTitleStyle" @click="toRemind()">
|
||||||
|
<view slot="icon" class="u-flex u-row-center u-col-center">
|
||||||
|
<u-icon name="/static/images/friendCircle/at.png" width="32" height="32" color="#606266"></u-icon>
|
||||||
|
</view>
|
||||||
|
</u-cell>
|
||||||
|
<u-cell bg-color="#ffffff" @click="toSetPromission()"
|
||||||
|
title="谁可以看" :title-style="customTitleStyle"
|
||||||
|
:value="'公开'" :value-style="customValueStyle">
|
||||||
|
<view slot="icon" class="u-flex u-row-center u-col-center">
|
||||||
|
<u-icon name="account" size="32" color="#606266"></u-icon>
|
||||||
|
</view>
|
||||||
|
</u-cell>
|
||||||
|
</u-cell-group>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 播放视频 -->
|
||||||
|
<view v-if="previewVideoFlag==true">
|
||||||
|
<videoPlayer :previewVideoFlag="previewVideoFlag" :previewVideoSrc="previewVideoSrc" @quitPlay="previewVideoFlag=false"></videoPlayer>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import videoPlayer from '@/components/videoPlayer.vue';
|
||||||
|
import {upload} from "@/api/login.js"
|
||||||
|
import util from "@/util/index.js"
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
videoPlayer
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
winWidth:0,
|
||||||
|
scrollViewHeight:0,
|
||||||
|
inputScrollTop:0,
|
||||||
|
inputAnimation:false,
|
||||||
|
releaseType: 1, //0 纯文字 1 图片或视频
|
||||||
|
navbarTitle: '',
|
||||||
|
customBtnStyle: {
|
||||||
|
fontSize: '32rpx',
|
||||||
|
padding: '0 28rpx',
|
||||||
|
height:'60rpx',
|
||||||
|
lineHeight:'60rpx',
|
||||||
|
},
|
||||||
|
girdItemCustomStyle:{
|
||||||
|
padding: '0',
|
||||||
|
margin:'0',
|
||||||
|
width:'220rpx',
|
||||||
|
height:'220rpx',
|
||||||
|
//border:'1rpx solid #f2f6fc'
|
||||||
|
},
|
||||||
|
girdItemCustomStyle2:{
|
||||||
|
padding: '0',
|
||||||
|
marginTop:'32rpx',
|
||||||
|
width:'200rpx',
|
||||||
|
height:'200rpx',
|
||||||
|
//border:'1rpx solid #f2f6fc'
|
||||||
|
},
|
||||||
|
customTitleStyle:{
|
||||||
|
fontSize:'28rpx',
|
||||||
|
color:'#666',
|
||||||
|
marginLeft:'30rpx'
|
||||||
|
},
|
||||||
|
customValueStyle:{
|
||||||
|
fontSize:'32rpx',
|
||||||
|
color:'#2c2d2f',
|
||||||
|
},
|
||||||
|
inputFocusFlag:false,
|
||||||
|
tempFilePaths: [],
|
||||||
|
tempUploadFilePath:[],
|
||||||
|
content: '', //文字
|
||||||
|
address:{
|
||||||
|
chooseFlag:false,
|
||||||
|
},
|
||||||
|
btnLoading: false ,//防止重复点击
|
||||||
|
submitFlag:true,
|
||||||
|
previewVideoFlag:false,
|
||||||
|
previewVideoSrc:'',
|
||||||
|
customMaskStyle:{
|
||||||
|
display:"flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
paddingTop:'100rpx',
|
||||||
|
//border:'1px solid red'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created: function() {
|
||||||
|
this.winWidth= this.$u.sys().winWidth;
|
||||||
|
let scrollViewHeight = this.$u.sys().windowHeight - 120;
|
||||||
|
this.scrollViewHeight = scrollViewHeight;
|
||||||
|
},
|
||||||
|
|
||||||
|
onPageScroll:function(){
|
||||||
|
uni.hideKeyboard();
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad: function(option) {
|
||||||
|
if (option.releaseType != null && option.releaseType != undefined) {
|
||||||
|
this.releaseType = option.releaseType;
|
||||||
|
}
|
||||||
|
if (this.releaseType == 0) {
|
||||||
|
this.navbarTitle = "发表文字";
|
||||||
|
this.inputFocusFlag=true;
|
||||||
|
this.submitFlag=true;
|
||||||
|
}
|
||||||
|
if (this.releaseType == 1) {
|
||||||
|
this.navbarTitle = "发表图文";
|
||||||
|
}
|
||||||
|
if (this.releaseType == 2) {
|
||||||
|
this.navbarTitle = "发表视频";
|
||||||
|
}
|
||||||
|
if (option.tempFilePaths != null && option.tempFilePaths != undefined && option.tempFilePaths.length > 0) {
|
||||||
|
this.tempFilePaths = JSON.parse(option.tempFilePaths);
|
||||||
|
if(this.releaseType!=0){
|
||||||
|
//console.log("不是纯文字")
|
||||||
|
this.submitFlag=false; //可以直接发布
|
||||||
|
}
|
||||||
|
for (var i = 0; i < this.tempFilePaths.length; i++) {
|
||||||
|
let url= this.tempFilePaths[i];
|
||||||
|
this.tempUploadFilePath.push({url:url});
|
||||||
|
}
|
||||||
|
//console.log("准备发朋友圈的临时文件", this.tempUploadFilePath);
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
//监听信息滚动
|
||||||
|
onReady() {
|
||||||
|
let that=this;
|
||||||
|
uni.onKeyboardHeightChange(res => {
|
||||||
|
//如果键盘弹起
|
||||||
|
if (res.height != 0) {
|
||||||
|
this.scrollViewHeight = this.$u.sys().windowHeight - res.height - 90;
|
||||||
|
}
|
||||||
|
//键盘收起
|
||||||
|
else {
|
||||||
|
this.scrollViewHeight = this.$u.sys().windowHeight - 120;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
cdn:util.cdn,
|
||||||
|
//隐藏输入
|
||||||
|
hiddenInput:function(e){
|
||||||
|
let that=this;
|
||||||
|
that.inputFocusFlag=false;
|
||||||
|
uni.hideKeyboard();
|
||||||
|
},
|
||||||
|
//监听输入
|
||||||
|
inputing:function(e){
|
||||||
|
let content=e.detail.value.trim();
|
||||||
|
//console.log("content",content);
|
||||||
|
if(content.length>0){
|
||||||
|
this.submitFlag=false;
|
||||||
|
}else{
|
||||||
|
//如果是纯文字,不能提交
|
||||||
|
if(this.releaseType==0){
|
||||||
|
this.submitFlag=true;
|
||||||
|
}
|
||||||
|
//如果不是纯文字
|
||||||
|
else{
|
||||||
|
//附件列表没有
|
||||||
|
if(this.tempFilePaths.length<1){
|
||||||
|
this.submitFlag=true;
|
||||||
|
}else{
|
||||||
|
this.submitFlag=false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//复制文本到输入框文字太多,焦点保证落在末尾去
|
||||||
|
inputLineChange:function(e){
|
||||||
|
this.inputAnimation=true;
|
||||||
|
this.inputScrollTop=e.detail.height;
|
||||||
|
if(e.detail.lineCount>0&&this.content.length>0){
|
||||||
|
this.submitFlag=false;
|
||||||
|
}else{
|
||||||
|
//如果是纯文字,不能提交
|
||||||
|
if(this.releaseType==0){
|
||||||
|
this.submitFlag=true;
|
||||||
|
}
|
||||||
|
//如果不是纯文字
|
||||||
|
else{
|
||||||
|
//附件列表没有
|
||||||
|
if(this.tempFilePaths.length<1){
|
||||||
|
this.submitFlag=true;
|
||||||
|
}else{
|
||||||
|
this.submitFlag=false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack: function() {
|
||||||
|
uni.navigateBack();
|
||||||
|
},
|
||||||
|
//去选择所在位置
|
||||||
|
toChooseLocation:function(){
|
||||||
|
let that=this;
|
||||||
|
uni.chooseLocation({
|
||||||
|
success: function (res) {
|
||||||
|
// console.log('位置名称：' + res.name);
|
||||||
|
// console.log('详细地址：' + res.address);
|
||||||
|
// console.log('纬度：' + res.latitude);
|
||||||
|
//console.log('经度：' + res.longitude);
|
||||||
|
that.address=res;
|
||||||
|
that.address.chooseFlag=true;
|
||||||
|
//console.log("that.address",that.address);
|
||||||
|
},
|
||||||
|
fail:function(){
|
||||||
|
that.address={};
|
||||||
|
that.address.chooseFlag=false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//设置发布朋友圈的查看权限
|
||||||
|
toSetPromission:function(){
|
||||||
|
let that=this;
|
||||||
|
uni.showToast({
|
||||||
|
icon:"none",
|
||||||
|
title:"功能暂未开放!"
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
//设置提醒谁去看
|
||||||
|
toRemind:function(){
|
||||||
|
let that=this;
|
||||||
|
uni.showToast({
|
||||||
|
icon:"none",
|
||||||
|
title:"功能暂未开放!"
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//删除临时文件
|
||||||
|
delTempFile:function(index){
|
||||||
|
let that=this;
|
||||||
|
that.tempFilePaths.splice(index,1);
|
||||||
|
that.tempUploadFilePath.splice(index,1);
|
||||||
|
},
|
||||||
|
//预览图片或者视频
|
||||||
|
previewFile:function(index){
|
||||||
|
let that=this;
|
||||||
|
//照片
|
||||||
|
if(that.releaseType==1){
|
||||||
|
uni.previewImage({
|
||||||
|
urls:that.tempFilePaths,
|
||||||
|
current:index,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//视频
|
||||||
|
else{
|
||||||
|
that.previewVideoSrc=that.tempFilePaths[0];
|
||||||
|
that.previewVideoFlag=true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//选择文件
|
||||||
|
chooseFile:function(){
|
||||||
|
let that = this;
|
||||||
|
//视频
|
||||||
|
if (that.releaseType == 2) {
|
||||||
|
uni.chooseVideo({
|
||||||
|
sourceType: ['camera', 'album'],
|
||||||
|
maxDuration: 60,
|
||||||
|
success: function(res) {
|
||||||
|
console.log("视频",res);
|
||||||
|
let filePath = res.tempFilePath;
|
||||||
|
that.tempFilePaths.push(filePath);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//选择照片
|
||||||
|
else {
|
||||||
|
let count=9-(that.tempFilePaths.length);
|
||||||
|
console.log("可以选择的照片的数量",count);
|
||||||
|
uni.chooseImage({
|
||||||
|
count: count, //默认9
|
||||||
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||||
|
sourceType: ['camera','album'], //从相册选择
|
||||||
|
success: function(res) {
|
||||||
|
console.log("选择照片",res);
|
||||||
|
let filePaths = res.tempFilePaths;
|
||||||
|
that.tempFilePaths=that.tempFilePaths.concat(filePaths);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//发布朋友圈
|
||||||
|
releaseFriendCircle() {
|
||||||
|
let that=this;
|
||||||
|
that.btnLoading = true;
|
||||||
|
let param={
|
||||||
|
content: this.content,
|
||||||
|
releaseType:that.releaseType,
|
||||||
|
address:JSON.stringify(that.address),
|
||||||
|
};
|
||||||
|
uni.showLoading({
|
||||||
|
title:"正在发布..."
|
||||||
|
});
|
||||||
|
//没有文件
|
||||||
|
if(that.tempFilePaths.length<1){
|
||||||
|
that.submitPublish(param);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//有文件
|
||||||
|
else{
|
||||||
|
that.uploadMuchFile(0,[],param);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//发布图文/视频+图文的朋友圈
|
||||||
|
uploadMuchFile(index=0,files,params) {
|
||||||
|
let that=this;
|
||||||
|
let size= that.tempFilePaths.length;
|
||||||
|
if(index==size){
|
||||||
|
console.log("文件全部上传完成",files);
|
||||||
|
params.fileList=JSON.stringify(files);
|
||||||
|
that.submitPublish(params);
|
||||||
|
uni.hideLoading();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let filePath=that.tempFilePaths[index];
|
||||||
|
let obj = {
|
||||||
|
filePath:filePath,
|
||||||
|
savePath: "friendCircle" //文件存放目录
|
||||||
|
}
|
||||||
|
|
||||||
|
upload(filePath).then(res1=>{
|
||||||
|
if(res1.code === 0 ){
|
||||||
|
console.log("第"+(index+1)+"个文件上传完成",res1);
|
||||||
|
let fileUrl= res1.data[0].file_name;
|
||||||
|
files.push(fileUrl);
|
||||||
|
index++;
|
||||||
|
that.uploadMuchFile(index,files,params);
|
||||||
|
}else{
|
||||||
|
console.log(res1);
|
||||||
|
}
|
||||||
|
}).catch(res1=>{
|
||||||
|
console.log("第"+(index+1)+"个文件上传失败",res1);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
submitPublish(param){
|
||||||
|
let that=this;
|
||||||
|
console.error('submitPublish');
|
||||||
|
uni.$u.http.post('/friendcircle/create',param).then(res => {
|
||||||
|
let newCircle=res;
|
||||||
|
if(newCircle.address!=null&&newCircle.address.length>0){
|
||||||
|
newCircle.address=JSON.parse(newCircle.address);
|
||||||
|
}else{
|
||||||
|
newCircle.address={"chooseFlag":false};
|
||||||
|
}
|
||||||
|
if(newCircle.fileList!=null&&newCircle.fileList.length>0){
|
||||||
|
newCircle.fileList=JSON.parse(newCircle.fileList);
|
||||||
|
}else{
|
||||||
|
newCircle.fileList=[];
|
||||||
|
}
|
||||||
|
if(newCircle.praise!=null){
|
||||||
|
newCircle.praise=JSON.parse(newCircle.praise);
|
||||||
|
}else{
|
||||||
|
newCircle.praise=[];
|
||||||
|
}
|
||||||
|
if(newCircle.comment!=null){
|
||||||
|
newCircle.comment=JSON.parse(newCircle.comment);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
newCircle.comment=[];
|
||||||
|
}
|
||||||
|
let circleDataList=this.circleData;
|
||||||
|
circleDataList.unshift(newCircle);
|
||||||
|
that.$u.vuex('circleData', circleDataList);
|
||||||
|
that.btnLoading = false;
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.navigateBack();
|
||||||
|
}).catch(e=>{
|
||||||
|
console.error(e);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onUnload() {
|
||||||
|
uni.hideLoading();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.releaseContainer{
|
||||||
|
.content {
|
||||||
|
padding: 20rpx;
|
||||||
|
.input-box{
|
||||||
|
::-webkit-scrollbar{
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
//border: 1px solid red;
|
||||||
|
padding: 20rpx 0rpx;
|
||||||
|
|
||||||
|
.input {
|
||||||
|
//border: 1px solid black;
|
||||||
|
caret-color: $uni-color-success;
|
||||||
|
//height: 200rpx;
|
||||||
|
padding: 15rpx;
|
||||||
|
width: initial;
|
||||||
|
//text-indent:5rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploadBox{
|
||||||
|
margin-top: 50rpx;
|
||||||
|
.slot-btn {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgb(244, 245, 246);
|
||||||
|
border-radius: 10rpx;
|
||||||
|
border:1rpx solid $u-border-color
|
||||||
|
}
|
||||||
|
|
||||||
|
.slot-btn__hover {
|
||||||
|
background-color: rgb(235, 236, 238);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
margin-top: 120rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.content {
|
||||||
|
.upload {
|
||||||
|
::v-deep.u-list-item,
|
||||||
|
.u-add-wrap {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
height: 180rpx !important;
|
||||||
|
width: 180rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.slot-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user