17
This commit is contained in:
cansnow
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<u-navbar title="选择背景图" :background="{ background: '#ffffff'}"
|
||||
:border-bottom="false">
|
||||
<view class="slot-wrap" slot="right">
|
||||
<u-button :custom-style="customBtnStyle" size="mini" :disabled="submitFlag"
|
||||
:type="submitFlag?'info ':'success'" @click="handleLink()">设置</u-button>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<u-grid @click="clickGrid">
|
||||
<u-grid-item v-for="(item, index) in bgList" :key="index" :index="index" :custom-style="item.isCheck?girdItemCustomStyle:{}">
|
||||
<u-image :src="item.src" width="200rpx" height="200rpx" mode="aspectFill"></u-image>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgList:[],
|
||||
customBtnStyle: {
|
||||
fontSize: '30rpx',
|
||||
padding: '28rpx',
|
||||
width:'100rpx'
|
||||
},
|
||||
submitFlag:true,
|
||||
girdItemCustomStyle:{
|
||||
backgroundColor:'#71d5a1',
|
||||
// maring:'0rpx',
|
||||
padding:'20rpx'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clickGrid(index){
|
||||
this.bgList.forEach((item,i)=>{
|
||||
if(index == i) item.isCheck = !item.isCheck;
|
||||
else item.isCheck = false;
|
||||
})
|
||||
this.submitFlag=false;
|
||||
},
|
||||
|
||||
//处理跳转逻辑
|
||||
handleLink(){
|
||||
const item = this.bgList.find(it=>it.isCheck);
|
||||
if(item){
|
||||
this.$u.vuex('circleBgImg', item.src);
|
||||
uni.navigateBack({
|
||||
delta:2
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.bgList = JSON.parse(JSON.stringify(this.circleBgList))
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
.slot-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-cell-group>
|
||||
<u-cell-item title="选择内置背景图" :title-style="titleStyle"
|
||||
:border-bottom="false" :border-top="false"
|
||||
@click="linkToBuiltinBgImg"></u-cell-item>
|
||||
</u-cell-group>
|
||||
<u-gap :height="16" bg-color="#f4f4f5"></u-gap>
|
||||
<u-cell-group>
|
||||
<u-cell-item title="通过手机选择" :title-style="titleStyle"
|
||||
:border-bottom="false" :border-top="false"
|
||||
@click="chooseImg"></u-cell-item>
|
||||
</u-cell-group>
|
||||
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
titleStyle:{
|
||||
marginLeft:"20rpx",
|
||||
fontSize:"32rpx",
|
||||
color:"#000000"
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
chooseImg() {
|
||||
let that=this;
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['camera','album'], //从相册选择
|
||||
success: function(res) {
|
||||
console.log("res",res);
|
||||
let tempFilePaths = res.tempFilePaths;
|
||||
that.myUpload(tempFilePaths[0]);
|
||||
return;
|
||||
}
|
||||
});
|
||||
return;
|
||||
},
|
||||
|
||||
//上传返回图片
|
||||
myUpload(filePath) {
|
||||
let that=this;
|
||||
let obj = {
|
||||
filePath:filePath,
|
||||
savePath: "friendCircle" //文件存放目录
|
||||
}
|
||||
console.log("通过手机选择",obj);
|
||||
this.globalUtil.globalUpload(that,{
|
||||
param:obj,
|
||||
success: (res1) => {
|
||||
console.log("上传成功",res1);
|
||||
let avatar= res1.result.url;
|
||||
that.$u.vuex('circleBgImg',avatar);
|
||||
uni.navigateBack();
|
||||
},
|
||||
fail:(res1) => {
|
||||
console.log("上传失败",res1);
|
||||
},
|
||||
complete: (res1) => {
|
||||
console.log("上传完成",res1);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
linkToBuiltinBgImg() {
|
||||
this.$u.route('/pages/tabbar/find/friend-circle/builtinBgImg');
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<view class="locationContainer">
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.locationContainer{
|
||||
padding: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<view class="content-circle-box" :index="index">
|
||||
<view @tap="linkToBusinessCard(item.user_id)">
|
||||
<MyAvatar :src="item.user.avatar" :desc="item.user.nickname || item.user.id" :isGroup="false" size="48"></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">
|
||||
<u--text :lines="5" :text="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)">
|
||||
<u-loading-icon slot="loading"></u-loading-icon>
|
||||
<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">
|
||||
<uni-grid :column="3" showBorder borderColor="#FFF" hover-class="none" :highlight="false">
|
||||
<uni-grid-item v-for="(src, index) in item.files" :key="index" :index="index">
|
||||
<view class="slot-btn">
|
||||
<u-image @tap="previewImg(index)" :src="cdn(src)" width="180rpx" height="180rpx" mode="aspectFill" border-radius="10"></u-image>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 视频 -->
|
||||
<view class="u-m-b-30 u-m-t-30 u-flex u-row-left u-col-center"
|
||||
v-if="item.files.length > 0&&item.releaseType==2" @tap="previewImg(0, item)">
|
||||
<view v-if="vuex_OSPlat=='ios'">
|
||||
<u-image width="280rpx" :src="getVideoPoster(item.files[0])" mode="widthFix">
|
||||
<u-loading-icon slot="loading"></u-loading-icon>
|
||||
</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">
|
||||
<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.is_liked==false" size="24" name="heart" color="#36648b"></u-icon>
|
||||
<u-icon v-if="item.is_liked==true" size="24" name="heart-fill" color="#36648b"></u-icon>
|
||||
</view>
|
||||
<view @tap="handleComment(null, index)" class="u-m-l-6 u-p-t-2">
|
||||
<u-icon size="24" name="chat" color="#36648b"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 点赞人 评论 -->
|
||||
<view class="msg-box">
|
||||
<view class="thumbinfo u-border-bottom" v-if="item.likes!=null&&item.likes.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.likes" :index="pindex"
|
||||
:key="pindex" @tap="linkToBusinessCard(userInfo.userId)">
|
||||
{{ userInfo.nickame }}{{ pindex != item.likes.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="comment.id"
|
||||
:key="comment.id" hover-class="comment-hover-class"
|
||||
:id="`comment-${item.id}-${comment.id}`"
|
||||
@tap="handleComment(comment, index)">
|
||||
<text class="comment-box-name">
|
||||
{{ comment.user.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.user.nickname }}：</text>
|
||||
<text class="comment-box-content">{{ comment.body }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import videoPlayer from '@/components/videoPlayer.vue';
|
||||
import util from "@/util/index.js";
|
||||
export default{
|
||||
components:{videoPlayer ,MyAvatar},
|
||||
props:{
|
||||
index:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
item:{
|
||||
type:Object,
|
||||
default(){
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
selfInfo() {
|
||||
return this.$store.getters.storeSelfInfo;
|
||||
},
|
||||
},
|
||||
data(){
|
||||
//console.log(this.item);
|
||||
return {
|
||||
girdItemCustomStyle:{
|
||||
padding: '0',
|
||||
margin:'0',
|
||||
border:'1rpx solid #f2f6fc'
|
||||
},
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
clickThumb(item,index){
|
||||
this.$emit('userEvent',{type:'clickThumb',item,index});
|
||||
},
|
||||
deleteCircle(item,index){
|
||||
this.$emit('userEvent',{type:'deleteCircle',item,index});
|
||||
},
|
||||
handleComment(comment,index){
|
||||
this.$emit('userEvent',{type:'handleComment',comment,index});
|
||||
},
|
||||
linkToBusinessCard(userID){
|
||||
this.$emit('userEvent',{type:'linkToBusinessCard',userID});
|
||||
},
|
||||
//查看大图或者预览视频
|
||||
previewImg(current) {
|
||||
const data = this.item;
|
||||
let that=this;
|
||||
let releaseType= data.releaseType;
|
||||
let fileList=[...data.files];
|
||||
if(releaseType==2){
|
||||
that.previewVideoSrc=fileList[0];
|
||||
that.previewVideoFlag=true;
|
||||
}else{
|
||||
fileList=fileList.map(item=>this.cdn(item));
|
||||
uni.previewImage({
|
||||
current:current,
|
||||
urls: fileList,
|
||||
});
|
||||
return;
|
||||
}
|
||||
},
|
||||
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 scoped lang="scss">
|
||||
|
||||
.content-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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-img-more{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,781 @@
|
||||
<template>
|
||||
<view class="content" id="content">
|
||||
<u-navbar
|
||||
@leftClick="leftClick"
|
||||
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" class="scrollView"
|
||||
:scroll-with-animation="scrollWithAnimation" :scroll-top="scrollTop" @scroll="scrolling"
|
||||
@scrolltolower="loadMore"
|
||||
:style="'height:'+scrollViewHeight+'px'">
|
||||
<!-- 我的朋友圈基本信息 -->
|
||||
<view class="content-imgbox">
|
||||
<image class="bgimg" v-if="settings.bg" :src="settings.bg" 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 || selfInfo.remark }}</text>
|
||||
</view>
|
||||
<!-- 个性签名 -->
|
||||
<view class="signature">
|
||||
<view class="">{{ selfInfo.bio }}</view>
|
||||
</view>
|
||||
|
||||
<view v-if="unreadCount>0" style="display: flex;justify-content: center;">
|
||||
<view @click="clearUnReadCount()"
|
||||
style="width: 300rpx;height:70rpx;line-height:70rpx;background-color: #333333;color: #ffffff;border-radius:10rpx;display: flex;align-items: center;">
|
||||
<view style="width:80rpx;padding:0 10rpx;">
|
||||
<MyAvatar :src="selfInfo.faceURL" class="headimg" desc=" " size="24"/>
|
||||
</view>
|
||||
<view style="flex:1;">
|
||||
{{unreadCount}}条新信息
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 朋友圈列表 -->
|
||||
<view class="content-circle">
|
||||
<!-- circleData是vuex变量，不在本页面定义 -->
|
||||
<template v-if="circleData!=null&&circleData.length>0">
|
||||
<template v-for="(item, index) in circleData" >
|
||||
<CircleItem :key="index" :index="index" :item="item" @userEvent="onUserEvent"></CircleItem>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view style="margin-top: 30%;">
|
||||
<u-empty text="暂无动态,发一条试试吧~"></u-empty>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<u-overlay :show="showInput" @click="showInput = false">
|
||||
<view class="input-box" style="height: 100rpx;" @tap.stop>
|
||||
<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="true" @confirm="sendMsg" />
|
||||
</view>
|
||||
<u-button class="btn" type="primary" size="mini" @tap.prevent.stop="sendMsg">发送</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
|
||||
<!-- 视频预览 -->
|
||||
<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";
|
||||
import CircleItem from "./components/circleItem.vue"
|
||||
export default {
|
||||
name: 'firendCircle',
|
||||
mixins:[UserBase],
|
||||
components:{videoPlayer ,MyAvatar,CircleItem},
|
||||
computed: {
|
||||
selfInfo() {
|
||||
return this.$store.getters.storeSelfInfo;
|
||||
},
|
||||
circleData() {
|
||||
return this.$store.getters.storeCircleData;
|
||||
},
|
||||
unreadCount() {
|
||||
return this.$store.getters.storeCircleUnreadCount;
|
||||
},
|
||||
last_unread_item() {
|
||||
return this.$store.getters.storeCircleLastUnreadItem;
|
||||
},
|
||||
settings() {
|
||||
return this.$store.getters.storeCircleSettings;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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.$store.dispatch('circle/getFriendCircleInfo');
|
||||
this.getCircleDataList(param);
|
||||
uni.$on("handleFriendCircle", function(friendCircleMessage) {
|
||||
console.log("监听到朋友圈动态有更新",friendCircleMessage);
|
||||
let id= friendCircleMessage.content.id;
|
||||
let newPraise= friendCircleMessage.content.likes;
|
||||
const index = that.circleData.findIndex(i => i.id ==id);
|
||||
that.circleData[index].likes=JSON.parse(newPraise);
|
||||
if(friendCircleMessage.content.is_liked&&friendCircleMessage.userId!=that.selfInfo.userID){
|
||||
that.$store.dispatch('circle/updateUnreadCount',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: {
|
||||
goto:util.goto,
|
||||
clearUnReadCount(){
|
||||
this.$store.dispatch('circle/updateUnreadCount',0-this.unreadCount);
|
||||
},
|
||||
//初始化朋友圈
|
||||
getCircleDataList:function(param){
|
||||
let that=this;
|
||||
this.$store.dispatch('circle/getFriendCircleList',param);
|
||||
},
|
||||
|
||||
//滚动事件
|
||||
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.is_liked = !item.is_liked;
|
||||
if (item.is_liked) {
|
||||
item.likes.push({
|
||||
userId: this.selfInfo.userID,
|
||||
userName: this.selfInfo.nickname
|
||||
});
|
||||
} else {
|
||||
const index = item.likes.findIndex(i => i.userId == this.selfInfo.userID);
|
||||
item.likes.splice(index, 1);
|
||||
flag=false;
|
||||
}
|
||||
console.log("当前动态下标",index);
|
||||
console.log("点赞列表",item);
|
||||
let param={
|
||||
id:item.id,
|
||||
likes:JSON.stringify(item.likes),
|
||||
is_liked:flag
|
||||
};
|
||||
this.$store.dispatch('circle/like',param).then(res=>{
|
||||
console.log("点赞更新成功",res.data);
|
||||
item.likes=JSON.parse(res.data.likes);
|
||||
that.circleData[index]=item;
|
||||
}).catch(e=>{
|
||||
item.is_liked = !item.is_liked;
|
||||
console.log("评论失败",e);
|
||||
});
|
||||
},
|
||||
//跳转到名片
|
||||
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(comment, index) {
|
||||
let that = this;
|
||||
this.content = '';
|
||||
that.currentItem = that.circleData[index];
|
||||
that.currentTop = 0;
|
||||
this.id = that.currentItem.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.user.nickname}:`;
|
||||
}
|
||||
}
|
||||
this.showInput = true;
|
||||
},
|
||||
//提交评论消息
|
||||
sendMsg() {
|
||||
let that=this;
|
||||
if (!that.$u.trim(that.content)) {
|
||||
return;
|
||||
}
|
||||
let param={
|
||||
reply_user_id:that.commentInfo?.user_id || '',
|
||||
body:that.content,
|
||||
id:that.currentItem.id
|
||||
};
|
||||
this.$store.dispatch('circle/comment',param).then(res=>{
|
||||
console.log("评论失败1",res);
|
||||
that.closeInputModel();
|
||||
}).catch(e=>{
|
||||
console.log("评论失败",e);
|
||||
});
|
||||
},
|
||||
|
||||
//查看大图或者预览视频
|
||||
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();
|
||||
},
|
||||
|
||||
//选择发表朋友圈的方式
|
||||
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: 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: tempFilePaths
|
||||
}
|
||||
that.linkToRelease(param);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
//点击自定义组件相机按钮
|
||||
linkToRelease(params) {
|
||||
console.log(params);
|
||||
let url = "/pages/workbench/friend-circle/releaseFriendCircle?";
|
||||
for(let key in params){
|
||||
if(key!="tempFilePaths"){
|
||||
url+=key+"="+params[key]+"&";
|
||||
}
|
||||
}
|
||||
uni.navigateTo({
|
||||
url:url,
|
||||
success(res) {
|
||||
res.eventChannel.emit('successEvent',params);
|
||||
}
|
||||
})
|
||||
},
|
||||
getVideoPoster(videoSrc){
|
||||
console.log("video",videoSrc);
|
||||
return "http://192.168.31.125:9090/we-chat/images/friendCircle/1715421601709.mp4";
|
||||
//return videoSrc;
|
||||
},
|
||||
leftClick(e){
|
||||
this.goto('/pages/workbench/index/index',"2");
|
||||
},
|
||||
onUserEvent(e){
|
||||
switch(e.type){
|
||||
case 'clickThumb':
|
||||
this.clickThumb(e.item,e.index);
|
||||
break;
|
||||
case 'handleComment':
|
||||
this.handleComment(e.comment,e.index);
|
||||
break;
|
||||
case 'linkToBusinessCard':
|
||||
this.linkToBusinessCard(e.userID);
|
||||
break;
|
||||
}
|
||||
},
|
||||
cdn:util.cdn
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<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: $uni-color-success;
|
||||
border: none;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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,530 @@
|
||||
<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" :key="index" :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"
|
||||
:value="address.chooseFlag?(address.address):'请选择'" isLink
|
||||
@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="24" height="24" 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
|
||||
},
|
||||
computed: {
|
||||
circleData() {
|
||||
return this.$store.getters.storeCircleData;
|
||||
}
|
||||
},
|
||||
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 = "发表视频";
|
||||
}
|
||||
const _this = this;
|
||||
const eventChannel = this.getOpenerEventChannel();
|
||||
// 注意在 onUnload 取消监听，避免监听常驻内存
|
||||
eventChannel.on('successEvent', function(data) {
|
||||
console.log(data)
|
||||
if (data.tempFilePaths != null && data.tempFilePaths != undefined && data.tempFilePaths.length > 0) {
|
||||
_this.tempFilePaths = data.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;
|
||||
}
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
try {
|
||||
const eventChannel = this.getOpenerEventChannel();
|
||||
eventChannel.off('successEvent');
|
||||
} catch (error) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
|
||||
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{
|
||||
//附件列表没有
|
||||
this.submitFlag = this.tempFilePaths.length<1;
|
||||
}
|
||||
}
|
||||
},
|
||||
//复制文本到输入框文字太多,焦点保证落在末尾去
|
||||
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{
|
||||
//附件列表没有
|
||||
this.submitFlag = this.tempFilePaths.length<1;
|
||||
}
|
||||
}
|
||||
},
|
||||
//返回
|
||||
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.files=JSON.stringify(files);
|
||||
that.submitPublish(params);
|
||||
uni.hideLoading();
|
||||
return;
|
||||
}
|
||||
let filePath=that.tempFilePaths[index];
|
||||
let obj = {
|
||||
savePath: "circle" //文件存放目录
|
||||
}
|
||||
//批量上传
|
||||
|
||||
//单个上传
|
||||
upload(filePath,obj).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.$store.commit('circle/SET_LIST',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>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view class="workbench_page">
|
||||
<uni-nav-bar
|
||||
title="发现"
|
||||
statusBar
|
||||
fixed
|
||||
background-color="transparent"></uni-nav-bar>
|
||||
<uni-list>
|
||||
<uni-list-item title="朋友圈"
|
||||
thumb="/static/images/workbench/01.png"
|
||||
:thumbSize="thumbSize"
|
||||
showArrow
|
||||
to="/pages/workbench/friend-circle/friend-circle">
|
||||
<view slot="footer" v-if="last_unread_item&&last_unread_item.avatar.length>0">
|
||||
<u-avatar :src="last_unread_item.avatar" mode="square" :size="70"></u-avatar>
|
||||
<u-badge :is-dot="true" type="error" :offset="[20,60]"></u-badge>
|
||||
</view>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
<u-gap :height="10"></u-gap>
|
||||
<uni-list>
|
||||
<uni-list-item title="扫一扫" thumb="/static/images/workbench/03.png" :thumbSize="thumbSize" @click="scan" clickable showArrow></uni-list-item>
|
||||
<uni-list-item title="摇一摇" thumb="/static/images/workbench/05.png" :thumbSize="thumbSize" to="/pages/workbench/friend-circle/friend-circle" showArrow></uni-list-item>
|
||||
<uni-list-item title="看一看" thumb="/static/images/workbench/06.png" :thumbSize="thumbSize" to="/pages/workbench/friend-circle/friend-circle" showArrow></uni-list-item>
|
||||
<uni-list-item title="听一听" thumb="/static/images/workbench/06.png" :thumbSize="thumbSize" to="/pages/workbench/friend-circle/friend-circle" showArrow></uni-list-item>
|
||||
<uni-list-item title="附近" thumb="/static/images/workbench/08.png" :thumbSize="thumbSize" to="/pages/workbench/near/near" showArrow></uni-list-item>
|
||||
<uni-list-item title="购物" thumb="/static/images/workbench/09.png" :thumbSize="thumbSize" to="/pages/workbench/friend-circle/friend-circle" showArrow></uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
thumbSize:"base"
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
circleUnreadCount() {
|
||||
return this.$store.getters.storeCircleUnreadCount;
|
||||
},
|
||||
last_unread_item() {
|
||||
return this.$store.getters.storeCircleLastUnreadItem;
|
||||
},
|
||||
},
|
||||
onShow: function() {
|
||||
let unreadCount= 1;
|
||||
this.$store.dispatch('circle/getFriendCircleInfo');
|
||||
},
|
||||
methods: {
|
||||
scan(){
|
||||
uni.scanCode({
|
||||
success(res) {
|
||||
if(res.scanType == "QR_CODE"){
|
||||
if(res.result.startsWith("http")){
|
||||
uni.navigateTo({
|
||||
url:"/pages/common/webview?url="+encodeURIComponent(res.result)
|
||||
});
|
||||
//res.result;
|
||||
return ;
|
||||
}
|
||||
if(res.result.startsWith("http")){
|
||||
return ;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
// uni.navigateTo({
|
||||
// url:"/pages/common/scan"
|
||||
// })
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.workbench_page {
|
||||
background-color: #ececec !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view class="near-item" :index="index">
|
||||
<view @tap="linkToBusinessCard(item.user_id)">
|
||||
<MyAvatar :src="item.user.avatar" :desc="item.user.nickname || item.user.id" :isGroup="false" size="48"></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">
|
||||
<u--text :lines="5" :text="item.body" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import util from "@/util/index.js";
|
||||
export default{
|
||||
components:{MyAvatar},
|
||||
props:{
|
||||
index:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
item:{
|
||||
type:Object,
|
||||
default(){
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
selfInfo() {
|
||||
return this.$store.getters.storeSelfInfo;
|
||||
},
|
||||
},
|
||||
data(){
|
||||
//console.log(this.item);
|
||||
return {
|
||||
girdItemCustomStyle:{
|
||||
padding: '0',
|
||||
margin:'0',
|
||||
border:'1rpx solid #f2f6fc'
|
||||
},
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
linkToBusinessCard(userID){
|
||||
this.$emit('userEvent',{type:'linkToBusinessCard',userID});
|
||||
},
|
||||
cdn:util.cdn
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.near-item {
|
||||
padding: 18rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f2eeee;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding-left: 18rpx;
|
||||
font-size: 32rpx;
|
||||
|
||||
&-name {
|
||||
color: #666666;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
color: #999999;
|
||||
padding-top: 4rpx;
|
||||
//line-height: 36rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<view class="near_page">
|
||||
<u-navbar
|
||||
@leftClick="leftClick"
|
||||
@rightClick="moreOptionClick"
|
||||
leftIcon="arrow-left"
|
||||
rightIcon="more-dot-fill"
|
||||
placeholder
|
||||
bgColor="#FFF"
|
||||
title="附近的人"
|
||||
title-size="36"
|
||||
:title-bold="true"
|
||||
:border-bottom="false">
|
||||
</u-navbar>
|
||||
<view>
|
||||
<UserItem v-for="(item,index) in list" :item="item" :index="index" :key="index"></UserItem>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserItem from './components/UserItem';
|
||||
export default {
|
||||
components:{UserItem},
|
||||
data() {
|
||||
return {
|
||||
list:[
|
||||
{
|
||||
user:{
|
||||
avatar:"/static/img/avatar.png",
|
||||
id:1,
|
||||
nickname:"nickname",
|
||||
remark:"remark"
|
||||
},
|
||||
user_id:1,
|
||||
body:"body"
|
||||
},
|
||||
{
|
||||
user:{
|
||||
avatar:"/static/img/avatar.png",
|
||||
id:1,
|
||||
nickname:"nickname",
|
||||
remark:"remark"
|
||||
},
|
||||
user_id:1,
|
||||
body:"body"
|
||||
},
|
||||
{
|
||||
user:{
|
||||
avatar:"/static/img/avatar.png",
|
||||
id:1,
|
||||
nickname:"nickname",
|
||||
remark:"remark"
|
||||
},
|
||||
user_id:1,
|
||||
body:"body"
|
||||
},
|
||||
{
|
||||
user:{
|
||||
avatar:"/static/img/avatar.png",
|
||||
id:1,
|
||||
nickname:"nickname",
|
||||
remark:"remark"
|
||||
},
|
||||
user_id:1,
|
||||
body:"body"
|
||||
},
|
||||
{
|
||||
user:{
|
||||
avatar:"/static/img/avatar.png",
|
||||
id:1,
|
||||
nickname:"nickname",
|
||||
remark:"remark"
|
||||
},
|
||||
user_id:1,
|
||||
body:"body"
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
moreOptionClick(){
|
||||
|
||||
},
|
||||
leftClick(){
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.near_page{
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user