连云港陪玩陪聊
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
chunwan/pages/dongtai/index.vue

392 lines
9.0 KiB

<template>
<view class="dongtai">
<view class="dongtai-tab">
<view class="tab">
<u-tabs :list="list" bg-color="transparent" :is-scroll="false" active-color="#222222" inactive-color="#666666" font-size="30" :active-item-style="activeStyle" bar-height="10" bar-width="60" v-model="current" @change="changeTabs"></u-tabs>
</view>
</view>
<view class="dongtai-list">
<view class="item" v-for="(a,i) in dongtaiList" :key="i" @click="openPage(1,a.id)">
<view class="a">
<view class="fl">
<image :src="a.faceImage?a.faceImage:a.img"></image>
<view class="info">
<view class="name">{{a.nickname}}</view>
<view class="desc">{{a.createTime}}</view>
</view>
</view>
<view class="fr" v-if="info.userid != userInfo.id" @click.stop="openPage(3,a.id)">
<image src="@/static/shenglue.png"></image>
</view>
<view class="fr" v-else @click.stop="openPage(6,a.id,i)">
<image src="@/static/icon-del.png"></image>
</view>
</view>
<view class="b">{{a.content}}</view>
<view class="c">
<image mode="aspectFill" v-for="(b,idx) in a.imgurl" :key="idx" @click.stop="previewImage(i,idx)" :src="b"></image>
</view>
<view class="d">
<view class="fl">
<view class="li">
<image src="@/static/xiaoxi.png"></image>{{a.pinglun}}
</view>
<view class="li">
<image v-if="a.isUserZan == 0 " src="@/static/dianzan.png"></image>
<image v-else src="@/static/zandin2.png"></image>{{a.zan}}
</view>
<view class="li" @click.stop="openPage(4,a)">
<image src="@/static/fenxiang.png"></image>分享
</view>
</view>
<view class="fr" @click.stop="openPage(5,a.userid)">搭讪</view>
</view>
</view>
<view style="margin-top: 25rpx;">
<u-divider v-if="total>=1 && total==dongtaiList.length" bg-color="transparent">到底啦~</u-divider>
</view>
<view class="empty" v-if="total == 0">
<image src="@/static/empty.png"></image>
<view class="txt">暂无数据</view>
</view>
</view>
<view class="dongtai-fd" @click.stop="openPage(2)">
<image src="@/static/icon-fabu.png"></image>
</view>
<unverified :isPopup="isPopup" />
<dashan :isDashan="isDashan" :info="info"></dashan>
<share :isShare="isShare" :info="info" />
</view>
</template>
<script>
export default {
data() {
return {
info: {},
isDashan: false,
isShare: false,
isPopup: false,
current: 0,
pageNum: 1,
total: 1,
list:[{'name': '广场'},{'name': '关注'}],
activeStyle:{'fontSize': '35rpx'},
dongtaiList: [],
userInfo: {}
}
},
onReady() {
const that = this;
that.getList();
uni.$on("toAddDongtai",res=>{
that.pageNum = 1;
that.current = 0;
that.dongtaiList = [];
that.getList();
})
uni.$on("closeSharePopup",res=>{
that.isShare = false;
that.isPopup = false;
that.isDashan= false;
})
},
onShow() {
this.getUserInfo();
},
onReachBottom() {
const that = this;
uni.showLoading({
title: "加载中"
})
if(this.dongtaiList.length <= this.total){
that.pageNum ++;
setTimeout(function() {
that.getList(1);
}, 1000);
}
},
methods: {
previewImage(index,i){
uni.previewImage({
urls: this.dongtaiList[index].imgurl,
count: i
})
},
//数组对象去重
arrayUnique (arr, name) {
var hash = {};
return arr.reduce(function (item, next) {
hash[next[name]]
? ""
: (hash[next[name]] = true && item.push(next));
return item;
}, []);
},
//查询列表
async getList(type) {
const { code, data } = await this.$api.articleList({
userId: uni.getStorageSync("userInfo").id,
type: Number(this.current)+1,
limit: 20,
page: this.pageNum,
})
if(code == 200){
if(type == 1){
uni.hideLoading();
}
if(data.totalCount > 0){
data.list.map(a=>{
if(a.imgurl){
a.imgurl = a.imgurl.split(",")
}
})
}
this.total = data.totalCount;
this.dongtaiList = this.arrayUnique([...this.dongtaiList,...data.list],"id")
}
},
//删除
async toDel(id,index) {
const { code, data, msg } = await this.$api.commentDelete({articleid: this.id, userId: uni.getStorageSync("userInfo").id});
if(code == 200){
uni.showToast({
title: "删除成功"
})
setTimeout(()=>{
this.dongtaiList.splice(index,1)
},1000)
}else{
uni.showToast({
title: msg,
icon: "none",
position: "bottom"
})
}
},
openPage(index,id,idx){
if(index == 1){
uni.navigateTo({
url: "/pages/dongtai/detail?id="+id
})
}else if(index == 2){
if(this.userInfo.realnameFlag == 0 || this.userInfo.faceFlag == 0 || this.userInfo.phoneFlag == 0){
this.isPopup = true
return ;
}
uni.navigateTo({
url: "/pages/dongtai/add"
})
}else if(index == 3){
if(this.userInfo.realnameFlag == 0 || this.userInfo.faceFlag == 0 || this.userInfo.phoneFlag == 0){
this.isPopup = true
return ;
}
uni.navigateTo({
url: "/pages/dongtai/add"
})
}else if(index == 4){
if(this.userInfo.realnameFlag == 0 || this.userInfo.faceFlag == 0 || this.userInfo.phoneFlag == 0){
this.isPopup = true
return ;
}
this.info.href = this.$articleShareUrl+id.id;
this.info.title = id.nickname;
this.info.summary = id.content;
this.info.imageUrl = id.faceImage;
console.log(this.info);
// this.isShare = true
}else if(index == 5){
if(this.userInfo.realnameFlag == 0 || this.userInfo.faceFlag == 0 || this.userInfo.phoneFlag == 0){
this.isPopup = true
return ;
}
this.info.userid = id;
this.isDashan = true
}else if(index == 6){
uni.showModal({
title: "温馨提示",
content: "确定删除该动态?",
confirmColor: "#000000",
success(res){
if(res.confirm){
that.toDel(id,idx);
}
}
})
}
},
async getUserInfo() {
const { code, data , msg } = await this.$api.findUserInfo({userId: uni.getStorageSync("userInfo").id});
if(code == 200){
this.userInfo = data;
uni.setStorageSync("userInfo",data)
}else{
uni.showToast({
title: msg,
position: "bottom",
icon: "none",
})
}
},
changeTabs(index){
this.current = index
this.pageNum = 1;
this.total = 1;
this.dongtaiList = []
this.getList();
},
}
}
</script>
<style scoped lang="scss">
.dongtai{
overflow: hidden;
.empty{
padding: 150rpx 0;
text-align: center;
font-weight: 500;
font-size: 28rpx;
color: #222222;
image{
display: block;
width: 460rpx;
height: 400rpx;
margin: 0 auto;
}
}
&-fd{
width: 135rpx;
height: 135rpx;
position: fixed;
right: 10rpx;
bottom: 100rpx;
z-index: 22;
image{
width: 100%;
height: 100%;
}
}
&-tab{
display: flex;
margin-top: 10rpx;
overflow: hidden;
.tab{
width: 250rpx;
}
}
&-list{
padding: 0 25rpx 25rpx;
overflow: hidden;
.item{
width: 100%;
background: #FFFFFF;
border-radius: 20rpx;
padding: 30rpx;
box-sizing: border-box;
margin-top: 20rpx;
.d{
font-weight: 400;
font-size: 24rpx;
color: #333333;
line-height: 42rpx;
margin-top: 20rpx;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
.fl{
flex: 1;
display: flex;
align-items: center;
.li{
display: flex;
align-items: center;
width: 120rpx;
image{
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
}
}
.fr{
width: 90rpx;
line-height: 44rpx;
background: #000000;
border-radius: 44rpx;
text-align: center;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
}
}
.c{
width: 110%;
margin-top: 20rpx;
overflow: hidden;
image{
width: 210rpx;
height: 210rpx;
border-radius: 10rpx;
margin-right: 10rpx;
}
}
.b{
font-weight: 400;
font-size: 28rpx;
color: #222222;
line-height: 42rpx;
margin-top: 20rpx;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 定义文本的行数 */
overflow: hidden;
text-overflow: ellipsis;
}
.a{
display: flex;
align-items: center;
justify-content: space-between;
.fl{
flex: 1;
display: flex;
align-items: center;
margin-right: 20rpx;
image{
width: 80rpx;
height: 80rpx;
background: #E6E9ED;
border-radius: 50%;
margin-right: 20rpx;
}
.info{
flex: 1;
}
.name{
font-weight: 400;
font-size: 30rpx;
color: #222222;
}
.desc{
font-weight: 400;
font-size: 22rpx;
color: #B6BCC2;
margin-top: 10rpx;
}
}
.fr{
width: 32rpx;
image{
width: 32rpx;
height: 32rpx;
}
}
}
}
}
}
</style>