8
This commit is contained in:
cansnow
@@ -1,24 +1,14 @@
|
||||
<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 @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 {
|
||||
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,
|
||||
@@ -49,7 +39,7 @@ export default {
|
||||
computed: {
|
||||
getAvatarUrl() {
|
||||
if (this.src) {
|
||||
return this.src;
|
||||
return util.cdn(this.src);
|
||||
}
|
||||
if (this.isGroup) {
|
||||
return defaultGroupIcon;
|
||||
@@ -88,7 +78,7 @@ export default {
|
||||
this.redirectShow();
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -1,27 +1,16 @@
|
||||
<template>
|
||||
<view @click="clickItem" class="user_item">
|
||||
<view
|
||||
v-if="checkVisible"
|
||||
class="check_wrap"
|
||||
:class="{ check_wrap_active: checked, check_wrap_disabled: disabled }"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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 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
|
||||
>
|
||||
<text v-if="item.roleLevel === 60" class="user_role admin_role">管理员</text>
|
||||
<!-- <view class="bottom_line" /> -->
|
||||
</view>
|
||||
|
||||
@@ -30,9 +19,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import { SessionType } from "openim-uniapp-polyfill";
|
||||
export default {
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import {SessionType} from "openim-uniapp-polyfill";
|
||||
export default {
|
||||
name: "UserItem",
|
||||
components: {
|
||||
MyAvatar,
|
||||
@@ -67,11 +56,11 @@ export default {
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user_item {
|
||||
.user_item {
|
||||
@include vCenterBox();
|
||||
padding: 24rpx 44rpx;
|
||||
color: $uni-text-color;
|
||||
@@ -139,11 +128,11 @@ export default {
|
||||
// color: #2691ED;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-list-item:last-child {
|
||||
.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>
|
||||
@@ -38,6 +38,9 @@
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
console.log(this.source)
|
||||
},
|
||||
computed: {
|
||||
latestMessage() {
|
||||
if (this.source.latestMsg === "") return "";
|
||||
@@ -65,7 +68,7 @@
|
||||
},
|
||||
methods: {
|
||||
clickConversationItem() {
|
||||
console.log(this.source);
|
||||
//console.log(this.source);
|
||||
prepareConversationState(this.source);
|
||||
},
|
||||
},
|
||||
@@ -128,7 +131,7 @@
|
||||
.lastest_msg_wrap {
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
margin: 10rpx 0;
|
||||
color: #666;
|
||||
|
||||
.lastest_msg_prefix {
|
||||
|
||||
@@ -9,31 +9,18 @@
|
||||
</view> -->
|
||||
<view class="member_list">
|
||||
<view class="member_item" v-for="(member, index) in groupMemberList">
|
||||
<my-avatar
|
||||
:src="member.faceURL"
|
||||
:desc="member.nickname"
|
||||
:key="member.userID"
|
||||
size="48"
|
||||
/>
|
||||
<my-avatar :src="member.faceURL" :desc="member.nickname" :key="member.userID" size="48" />
|
||||
<view class="ower" v-if="member.roleLevel === 100">群主</view>
|
||||
<text class="member_item_name">{{ member.nickname }}</text>
|
||||
</view>
|
||||
<view class="member_item">
|
||||
<image
|
||||
style="width: 48px; height: 48px; min-width: 48px"
|
||||
@click.stop="inviteMember"
|
||||
src="@/static/images/group_setting_invite.png"
|
||||
alt=""
|
||||
/>
|
||||
<image style="width: 48px; height: 48px; min-width: 48px" @click.stop="inviteMember"
|
||||
src="@/static/images/group_setting_invite.png" alt="" />
|
||||
<text class="member_item_name">增加</text>
|
||||
</view>
|
||||
<view class="member_item" v-if="isAdmin || isOwner">
|
||||
<image
|
||||
style="width: 48px; height: 48px; min-width: 48px"
|
||||
@click.stop="kickMember"
|
||||
src="@/static/images/group_setting_remove.png"
|
||||
alt=""
|
||||
/>
|
||||
<image style="width: 48px; height: 48px; min-width: 48px" @click.stop="kickMember"
|
||||
src="@/static/images/group_setting_remove.png" alt="" />
|
||||
<text class="member_item_name">移出</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -47,12 +34,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import IMSDK, { GroupMemberRole } from "openim-uniapp-polyfill";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import SettingItem from "@/components/SettingItem/index.vue";
|
||||
import { ContactChooseTypes, GroupMemberListTypes } from "@/constant";
|
||||
export default {
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import IMSDK, {
|
||||
GroupMemberRole
|
||||
} from "openim-uniapp-polyfill";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import SettingItem from "@/components/SettingItem/index.vue";
|
||||
import {
|
||||
ContactChooseTypes,
|
||||
GroupMemberListTypes
|
||||
} from "@/constant";
|
||||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
MyAvatar,
|
||||
@@ -97,11 +91,11 @@ export default {
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.member_row {
|
||||
.member_row {
|
||||
@include colBox(false);
|
||||
padding: 36rpx 36rpx 0;
|
||||
margin: 24rpx;
|
||||
@@ -144,7 +138,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.ower{
|
||||
.ower {
|
||||
width: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -167,5 +161,5 @@ export default {
|
||||
@include vCenterBox();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -18,11 +18,7 @@
|
||||
</view>
|
||||
<view class="group_info">
|
||||
<view class="group_info_name">
|
||||
<text class="group_name"
|
||||
>{{ storeCurrentConversation.showName }}({{
|
||||
storeCurrentGroup.memberCount
|
||||
}})</text
|
||||
>
|
||||
<text class="group_name">{{ storeCurrentConversation.showName }}({{storeCurrentGroup.memberCount}})</text>
|
||||
<image
|
||||
v-if="isOwner || isAdmin"
|
||||
@click="toUpdateGroupName"
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<view class="page_container">
|
||||
<view class="uni-white-bg">
|
||||
<view class="self_info_row"></view>
|
||||
|
||||
<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">
|
||||
<text class="nickname">{{ selfInfo.nickname }}</text>
|
||||
@@ -18,17 +19,15 @@
|
||||
<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>
|
||||
<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>
|
||||
</view>
|
||||
@@ -37,27 +36,14 @@
|
||||
<script>
|
||||
import IMSDK from "openim-uniapp-polyfill";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import util from "@/util";
|
||||
export default {
|
||||
components: {
|
||||
MyAvatar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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"),
|
||||
},
|
||||
profileMenus: [
|
||||
{
|
||||
idx: 4,
|
||||
title: "退出登录",
|
||||
@@ -72,6 +58,7 @@
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...util,
|
||||
copy() {
|
||||
console.log(this.selfInfo)
|
||||
uni.setClipboardData({
|
||||
@@ -86,9 +73,7 @@
|
||||
});
|
||||
},
|
||||
logoutConfirm() {
|
||||
console.log(1)
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.Logout, IMSDK.uuid()).then(() => {
|
||||
console.log(2)
|
||||
uni.removeStorage({
|
||||
key: "IMToken",
|
||||
});
|
||||
@@ -96,36 +81,14 @@
|
||||
key: "BusinessToken",
|
||||
});
|
||||
}).catch((err) => {
|
||||
console.log(3)
|
||||
console.log(err)
|
||||
}).finally(() => {
|
||||
console.log(4)
|
||||
uni.$u.route("/pages/login/index");
|
||||
});
|
||||
},
|
||||
profileMenuClick({idx}) {
|
||||
switch (idx) {
|
||||
case 0:
|
||||
uni.navigateTo({
|
||||
url: "/pages/profile/selfInfo/index",
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
uni.navigateTo({
|
||||
url: "/pages/profile/messageNotification/index",
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
uni.navigateTo({
|
||||
url: "/pages/profile/accountSetting/index",
|
||||
});
|
||||
break;
|
||||
case 3:
|
||||
uni.navigateTo({
|
||||
url: "/pages/profile/about/index",
|
||||
});
|
||||
break;
|
||||
case 4:
|
||||
|
||||
logout(){
|
||||
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定要退出当前账号吗？",
|
||||
@@ -137,14 +100,10 @@
|
||||
}
|
||||
},
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
toSelfQr() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/userOrGroupQrCode/index`,
|
||||
url: `/pages/common/userOrGroupQrCode`,
|
||||
});
|
||||
},
|
||||
},
|
||||
@@ -152,8 +111,9 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uni-scss/index.scss';
|
||||
.page_container {
|
||||
background-color: #f8f9fa;
|
||||
background-color: #ececec;
|
||||
|
||||
.self_info_row {
|
||||
display: flex;
|
||||
@@ -162,7 +122,7 @@
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 276rpx;
|
||||
background-image: url("@/static/images/profile_top_bg.png");
|
||||
//background-image: url("@/static/images/profile_top_bg.png");
|
||||
background-repeat: round;
|
||||
}
|
||||
|
||||
@@ -180,7 +140,7 @@
|
||||
.id_row {
|
||||
@include vCenterBox();
|
||||
display: flex;
|
||||
height: 46px;
|
||||
//height: 46px;
|
||||
margin-left: 16rpx;
|
||||
flex-direction: column;
|
||||
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>
|
||||
@@ -1,22 +1,986 @@
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
name: 'firendCircle',
|
||||
mixins:[UserBase],
|
||||
components:{videoPlayer ,MyAvatar},
|
||||
computed: {
|
||||
selfInfo() {
|
||||
return this.$store.getters.storeSelfInfo;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
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: {
|
||||
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>
|
||||
|
||||
<style>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.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