712 lines
17 KiB
Vue
712 lines
17 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="page-bg"></view>
|
||
<view class="release" @click="navTo('sub_pages/love/release/release')">
|
||
<image src="../../static/icon/add5.png" mode="widthFix"></image>
|
||
</view>
|
||
<view :style="'margin-top: ' + statusBarHeight + 'px'"></view>
|
||
<view class="header" :style="'margin-top: ' + statusBarHeight + 'px'">
|
||
<view class="pair">
|
||
<view class="search" @click="navTo('pages/search/index')">
|
||
<image src="../../static/icon/search2.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="pair-btn" @click="navTo('pages/search/index')">
|
||
<image src="../../static/icon/screen.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="menu">
|
||
<u-tabs
|
||
:list="menu"
|
||
lineColor="#AD1384"
|
||
:activeStyle="{
|
||
color: '#ffffff',
|
||
fontWeight: 'bold',
|
||
transform: 'scale(1.05)'
|
||
}"
|
||
@click="onTabs"
|
||
>
|
||
</u-tabs>
|
||
</view>
|
||
</view>
|
||
<view class="header-box"></view>
|
||
<view class="comment-box">
|
||
<view class="comment">
|
||
<view class="item" v-for="(item,index) in list" :key="index">
|
||
<view class="avatar" @click="$push('sub_pages/member/detail/detail',{userId:item.userId})">
|
||
<view class="icon">
|
||
<image :src="item.userAvatar" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="info">
|
||
<view class="head">
|
||
<view class="title">
|
||
<view class="nickname">{{ item.nickname }}</view>
|
||
<view class="date-time">{{ new Date(item.createTime).getTime() | timeFrom }}</view>
|
||
</view>
|
||
<view v-if="item.follow" class="unfollow-btn">
|
||
<text>已关注</text>
|
||
</view>
|
||
<view v-else class="follow-btn" @click="onFollow(item.userId,index)">
|
||
<!-- <image src="../../static/icon/follow.png" mode="widthFix"></image> -->
|
||
<u-icon name="heart" color="#ffffff" :size="15"></u-icon>
|
||
<text>关注</text>
|
||
</view>
|
||
</view>
|
||
<view class="desc">
|
||
<mp-html :content="item.content" />
|
||
<!-- <text>有没有小姐姐想今年结婚的呀，我们可以私聊，希望有人可以与我共黄昏，有人问我粥可温...</text> -->
|
||
</view>
|
||
<view v-if="item.video" class="video">
|
||
<video id="myVideo" :src="item.video" @error="videoErrorCallback"></video>
|
||
</view>
|
||
<view v-else class="image">
|
||
<u-album :urls="item.files" keyName="thumb" multipleMode="widthFix"></u-album>
|
||
</view>
|
||
<view class="comment-btn">
|
||
<view class="zan" v-if="item.liked == 0" @click="onLikes(item,index)">
|
||
<u-icon name="thumb-up" :size="20"></u-icon>
|
||
<text>{{ item.likes }}</text>
|
||
</view>
|
||
<view class="zan" v-else @click="onLikes(item,index)">
|
||
<u-icon name="thumb-up" color="#8b004c" :size="20"></u-icon>
|
||
<text class="active">{{ item.likes }}</text>
|
||
</view>
|
||
<view class="comment2" @click="openComment(item,index)" >
|
||
<u-icon name="chat" :size="20"></u-icon>
|
||
<!-- <image src="../../static/icon/comment2.png" mode="widthFix"></image> -->
|
||
<text>{{ item.commentNumbers }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-empty
|
||
v-if="!list && list.length == 0"
|
||
mode="list"
|
||
icon="http://cdn.uviewui.com/uview/empty/list.png"
|
||
>
|
||
</u-empty>
|
||
</view>
|
||
</view>
|
||
<u-loadmore :status="loading" />
|
||
<u-gap height="5"></u-gap>
|
||
|
||
<u-popup :show="showComment" mode="bottom" :round="10" :closeable="true" @close="closeComment">
|
||
<view class="comment-popup">
|
||
<view class="head">
|
||
<text class="title">{{ countComment }}条评论</text>
|
||
</view>
|
||
<view class="user-list">
|
||
<u-list :height="300" @scrolltolower="scrolltolower">
|
||
<view class="list">
|
||
<u-list-item v-for="(item, index) in comment" :key="index">
|
||
<u-cell>
|
||
<view slot="title" class="nickname">
|
||
{{ item.nickname }}
|
||
</view>
|
||
<view slot="icon" :iconStyle="iconStyle" class="avatar2">
|
||
<u-avatar size="50" :src="item.avatar"
|
||
customStyle="margin: -3px 5px -3px 0"
|
||
@click="$push('sub_pages/member/detail/detail',{userId: item.userId})"></u-avatar>
|
||
</view>
|
||
<view slot="label">
|
||
<rich-text class="content" :nodes="item.content"></rich-text>
|
||
<view class="fans">{{ new Date(item.createTime).getTime() | timeFrom }}</view>
|
||
</view>
|
||
<view slot="right-icon">
|
||
|
||
</view>
|
||
</u-cell>
|
||
</u-list-item>
|
||
<u-empty
|
||
v-if="comment.length == 0"
|
||
mode="message"
|
||
icon="http://cdn.uviewui.com/uview/empty/message.png"
|
||
>
|
||
</u-empty>
|
||
</view>
|
||
</u-list>
|
||
</view>
|
||
<view class="footer">
|
||
<u-search :showAction="true" placeholder="发表评论" searchIcon="chat" actionText="发表" v-model="form.content" :actionStyle="actionStyle" @custom="onSend()"></u-search>
|
||
<!-- <view class="btn-wrapper">
|
||
<u-button text="发送" color="linear-gradient(to bottom, #010002, #681752)" :disabled="disabled"
|
||
shape="circle" @click="$push('pages/checkout/checkout')"></u-button>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import store from '@/store/index.js'
|
||
import * as UserApi from '@/api/user.js'
|
||
import * as ArticleApi from '@/api/article.js'
|
||
import * as ArticleLikeApi from '@/api/article-like.js'
|
||
import * as ArticleCommentApi from '@/api/article-comment.js'
|
||
import * as UserFollowApi from '@/api/user-follow.js'
|
||
import * as Config from '@/config.js';
|
||
|
||
const pageSize = 10
|
||
const userId = uni.getStorageSync('userId')
|
||
|
||
const menu = [{
|
||
name: '最新'
|
||
},
|
||
{
|
||
name: '同城'
|
||
},
|
||
{
|
||
name: '关注'
|
||
}
|
||
]
|
||
|
||
import mixin from '@/core/mixins/tabbar'
|
||
export default {
|
||
mixins: [mixin],
|
||
data() {
|
||
return {
|
||
options: null,
|
||
list: [], // 文章列表
|
||
comment: [], // 文章评论列表
|
||
menu,
|
||
curTab: 0,
|
||
danmuList: [{
|
||
text: '好可爱嗷~~',
|
||
color: '#ff0000',
|
||
time: 1
|
||
},
|
||
{
|
||
text: 'かわゆい',
|
||
color: '#ff00ff',
|
||
time: 3
|
||
}
|
||
],
|
||
actionStyle: {
|
||
background: '#8b004c',
|
||
color: '#ffffff',
|
||
padding: '12rpx 16rpx',
|
||
borderRadius: '50rpx'
|
||
},
|
||
iconStyle: {
|
||
background: '#8b004c',
|
||
},
|
||
statusBarHeight: 25,
|
||
latitude: 22.766777,
|
||
longitude: 108.375152,
|
||
scale: 10,
|
||
page: 0,
|
||
// 控制onShow事件是否刷新订单列表
|
||
canReset: false,
|
||
showComment: false,
|
||
countComment: 0,
|
||
where: {
|
||
platform: 'MP-WEIXIN'
|
||
},
|
||
form: {
|
||
articleId: 0,
|
||
content: '',
|
||
},
|
||
articleIndex: 0, // 当前评论的文章
|
||
isLogin: false,
|
||
loading: 'loading'
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
const app = this
|
||
console.log("options: ",options);
|
||
app.checkLogin()
|
||
app.onRefreshList()
|
||
app.getLocation(res => {
|
||
if (res.latitude && res.longitude) {
|
||
app.latitude = res.latitude
|
||
app.longitude = res.longitude
|
||
app.scale = 16
|
||
}
|
||
})
|
||
uni.getSystemInfo({
|
||
success(data) {
|
||
if (data) {
|
||
app.statusBarHeight = data.statusBarHeight
|
||
}
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow() {
|
||
const pages = getCurrentPages()
|
||
console.log("this.options: ",this.options);
|
||
},
|
||
// 触底函数
|
||
onReachBottom() {
|
||
const app = this
|
||
if (app.canReset) {
|
||
console.log("触底函数1: ");
|
||
app.page = ++app.page;
|
||
app.onRefreshList()
|
||
}
|
||
},
|
||
onPullDownRefresh(){
|
||
this.page = 1
|
||
this.list = []
|
||
this.onRefreshList()
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
methods: {
|
||
onTabs(e){
|
||
const index = e.index
|
||
this.curTab = index
|
||
console.log("index: ",index);
|
||
},
|
||
// 刷新订单列表
|
||
onRefreshList() {
|
||
const app = this
|
||
app.where.page = app.page
|
||
app.where.loginUserId = userId
|
||
app.where.categoryId = 0
|
||
app.where.showFollow = true
|
||
return new Promise((resolve, reject) => {
|
||
ArticleApi.pageArticle(app.where)
|
||
.then(result => {
|
||
const list = result.data.list
|
||
// 图片反序列化
|
||
const newList = list.map((d, i) => {
|
||
const imgs = JSON.parse(d.files)
|
||
if (imgs) {
|
||
var files = []
|
||
imgs.map(pic => {
|
||
files.push({
|
||
thumb: pic.thumb ? pic.thumb : pic.url,
|
||
url: pic.url
|
||
})
|
||
})
|
||
}
|
||
d.files = files
|
||
return d
|
||
})
|
||
// 合并新数据
|
||
app.list = app.list.concat(newList)
|
||
if(result.data.count > app.list.length){
|
||
app.canReset = true
|
||
}else{
|
||
app.loading = 'nomore'
|
||
app.canReset = false
|
||
}
|
||
resolve(newList)
|
||
})
|
||
})
|
||
},
|
||
videoErrorCallback: function(e) {
|
||
uni.showModal({
|
||
content: e.target.errMsg,
|
||
showCancel: false
|
||
})
|
||
},
|
||
// 检查是否登录
|
||
checkLogin() {
|
||
if (!!store.getters.userId && store.getters.userId != Config.userId) {
|
||
this.isLogin = true
|
||
}
|
||
},
|
||
// 获取用户坐标
|
||
// 参考文档：https://uniapp.dcloud.io/api/location/location?id=getlocation
|
||
getLocation(callback) {
|
||
const app = this
|
||
uni.getLocation({
|
||
success: callback,
|
||
fail() {
|
||
app.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
|
||
app.isAuthor = false
|
||
}
|
||
})
|
||
},
|
||
// 跳转页面
|
||
navTo(url) {
|
||
if(!store.getters.userId || store.getters.userId == 1101) {
|
||
this.$navTo('pages/login/index')
|
||
return false
|
||
}
|
||
this.$navTo(url)
|
||
},
|
||
onFollow(shopId,index){
|
||
const app = this
|
||
if(!app.isLogin){
|
||
app.$push('pages/login/index')
|
||
return false
|
||
}
|
||
const status = !app.list[index].follow
|
||
app.list[index].follow = status
|
||
app.list.map((d,i) => {
|
||
if(shopId == d.userId){
|
||
app.list[i].follow = status
|
||
}
|
||
})
|
||
UserFollowApi.addFollow({shopId}).then(res => {
|
||
app.$success(res.message)
|
||
})
|
||
},
|
||
onLikes(item,index){
|
||
const app = this
|
||
const { articleId, likes, liked } = item
|
||
if(!app.isLogin){
|
||
app.$push('pages/login/index')
|
||
return false
|
||
}
|
||
ArticleLikeApi.addArticleLike({
|
||
articleId,
|
||
likes,
|
||
liked
|
||
}).then(res => {
|
||
app.list[index].liked = res.data.liked
|
||
app.list[index].likes = res.data.likes
|
||
}).catch(err => {
|
||
app.$error(err.message)
|
||
})
|
||
},
|
||
openComment(item,index){
|
||
if(!this.isLogin){
|
||
this.$push('pages/login/index')
|
||
return false
|
||
}
|
||
uni.hideTabBar()
|
||
this.comment = []
|
||
this.getComment(item.articleId)
|
||
this.form.articleId = item.articleId
|
||
this.articleIndex = index
|
||
this.showComment = true
|
||
},
|
||
closeComment(){
|
||
uni.showTabBar()
|
||
this.showComment = false
|
||
},
|
||
getComment(articleId){
|
||
const app = this
|
||
ArticleCommentApi.pageArticleComment({articleId}).then(res => {
|
||
app.countComment = res.data.count
|
||
app.comment = res.data.list
|
||
})
|
||
},
|
||
// 发表评论
|
||
onSend(){
|
||
const app = this
|
||
const { form } = this
|
||
form.countComment = app.countComment
|
||
ArticleCommentApi.addArticleComment(form).then(res => {
|
||
app.form.content = ''
|
||
app.getComment(form.articleId)
|
||
app.list[app.articleIndex].commentNumbers = res.data.commentNumbers
|
||
// app.$success(res.message)
|
||
}).catch(err => {
|
||
app.$error(err.message)
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page{
|
||
background-color: #ffffff !important;
|
||
}
|
||
.page-bg {
|
||
width: 750rpx;
|
||
/* #ifdef MP-WEIXIN */
|
||
height: calc(100rpx + var(--status-bar-height));
|
||
/* #endif */
|
||
display: block;
|
||
background-color: #0d0119;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 8888;
|
||
}
|
||
|
||
.release {
|
||
position: fixed;
|
||
bottom: 120rpx;
|
||
right: 30rpx;
|
||
z-index: 9999;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 100%;
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.header {
|
||
width: 750rpx;
|
||
position: fixed;
|
||
z-index: 9999;
|
||
top: 0;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
height: 88rpx;
|
||
background-color: #0d0119;
|
||
|
||
.pair {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
position: absolute;
|
||
right: 30rpx;
|
||
display: flex;
|
||
|
||
.search {
|
||
image {
|
||
padding-top: 15rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.pair-btn {
|
||
image {
|
||
margin-left: 30rpx;
|
||
padding-top: 16rpx;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
|
||
// .pair-btn{
|
||
// margin-left: 22rpx;
|
||
// height: 50rpx;
|
||
// line-height: 50rpx;
|
||
// margin-top: 15rpx;
|
||
// padding: 6rpx 12rpx;
|
||
// color: #ffffff;
|
||
// border-radius: 10rpx;
|
||
// background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||
// }
|
||
}
|
||
|
||
|
||
.menu {
|
||
display: flex;
|
||
justify-content: center;
|
||
// font-size: 32rpx;
|
||
// font-weight: 600;
|
||
z-index: 9999;
|
||
|
||
.link {
|
||
color: #cfd1d7;
|
||
}
|
||
|
||
.curr {
|
||
color: #ffffff;
|
||
border-bottom: 5rpx solid #ffffff;
|
||
}
|
||
}
|
||
|
||
// .search{
|
||
// position: absolute;
|
||
// right: 30rpx;
|
||
// image{
|
||
// padding-top: 20rpx;
|
||
// width: 50rpx;
|
||
// height: 50rpx;
|
||
// }
|
||
// }
|
||
}
|
||
|
||
.header-box{
|
||
height: 100rpx;
|
||
}
|
||
|
||
.comment-box {
|
||
width: 750rpx;
|
||
margin: 0 auto;
|
||
.comment {
|
||
width: 700rpx;
|
||
padding: 30rpx;
|
||
background-color: #ffffff;
|
||
|
||
.item {
|
||
display: flex;
|
||
padding-bottom: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
border-bottom: 2rpx solid #f3f3f3;
|
||
|
||
.avatar {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.icon {
|
||
image {
|
||
width: 90rpx !important;
|
||
height: 90rpx !important;
|
||
border-radius: 100%;
|
||
overflow: hidden;
|
||
border: 5rpx solid #ffffff;
|
||
}
|
||
}
|
||
|
||
.add {
|
||
position: absolute;
|
||
bottom: -7rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 100%;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
width: 660rpx;
|
||
margin-left: 10rpx;
|
||
|
||
.head {
|
||
height: 90rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
.nickname {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.date-time {
|
||
color: #9a9a9a;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.follow-btn {
|
||
padding: 4rpx 20rpx;
|
||
color: #ffffff;
|
||
font-size: 26rpx;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
margin-right: 10rpx;
|
||
background: linear-gradient(#47076b, #8d1a50);
|
||
image {
|
||
width: 24rpx;
|
||
height: 66rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
|
||
.unfollow-btn {
|
||
padding: 4rpx 20rpx;
|
||
color: #ffffff;
|
||
font-size: 26rpx;
|
||
border-radius: 50rpx;
|
||
margin-right: 10rpx;
|
||
background: linear-gradient(#b3b3b3, #cccccc);
|
||
image {
|
||
width: 24rpx;
|
||
height: 66rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.image {
|
||
padding: 20rpx 0;
|
||
|
||
image {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.video {
|
||
padding: 20rpx 0;
|
||
max-width: 400rpx;
|
||
|
||
video {
|
||
max-width: 400rpx;
|
||
}
|
||
}
|
||
|
||
.comment-btn {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.zan {
|
||
display: flex;
|
||
|
||
image {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.comment2 {
|
||
margin-left: 50rpx;
|
||
display: flex;
|
||
|
||
image {
|
||
width: 36rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
text{
|
||
padding: 0 5rpx;
|
||
}
|
||
}
|
||
|
||
.active{
|
||
color: #681752;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.comment-popup {
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 750rpx;
|
||
height: 780rpx;
|
||
.head{
|
||
padding: 30rpx;
|
||
text-align: center;
|
||
}
|
||
.user-list{
|
||
.list{
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.nickname{
|
||
color: #999999;
|
||
}
|
||
.avatar2{
|
||
display: flex;
|
||
height: auto;
|
||
}
|
||
.content{
|
||
padding: 20rpx 0;
|
||
}
|
||
}
|
||
.footer {
|
||
width: 700rpx;
|
||
margin: auto;
|
||
position: fixed;
|
||
left: 25rpx;
|
||
bottom: 10rpx;
|
||
padding: 20rpx 0;
|
||
}
|
||
.fans{
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
</style>
|