1160 lines
28 KiB
Vue
1160 lines
28 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="page-bg"></view>
|
||
<view class="release" @click="onRelease">
|
||
<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="showGender = true">
|
||
<image src="../../static/icon/screen2.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="menu">
|
||
<u-tabs :list="menu" :current="currentTab" lineColor="#ff0077" :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 @click="navTo('sub_pages/notice/comment')" class="commit-notice" v-show="unReadCommentNumber > 0">
|
||
{{unReadCommentNumber}}条新消息
|
||
</view>
|
||
<view class="item" v-for="(item,index) in list" :key="index">
|
||
<view class="avatar" @click="navTo('sub_pages/member/detail/detail',{userId:item.userId})">
|
||
<view class="icon">
|
||
<image :src="item.userAvatar" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<view class="info">
|
||
<view class="head">
|
||
<view class="title">
|
||
<view class="nickname">
|
||
<text class="text">{{ item.nickname }}</text>
|
||
<text class="user-city" v-if="item.userCity">{{ getCity(item.userCity) }}</text>
|
||
<!-- <u-tag v-if="item.userCity" :customStyle="{marginLeft: '20rpx'}" class="city" type="info" borderColor="#681752"
|
||
:text="`${item.userCity}`" size="mini"></u-tag> -->
|
||
</view>
|
||
<view class="label">
|
||
{{ item.age ? item.age + '岁' : '' }}
|
||
{{ item.position ? item.position : '' }}
|
||
</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.files[0].type =='video'" class="video">
|
||
<ArticleVideo :src="item.files[0].url" :poster="item.files[0].thumb" :width="item.files[0].width" :height="item.files[0].height"></ArticleVideo>
|
||
</view>
|
||
<view v-else class="image">
|
||
<u-album :urls="item.files" keyName="thumb" :singleSize="100" singleMode="aspectFill"
|
||
multipleMode="aspectFill"></u-album>
|
||
</view>
|
||
<view class="topic" v-if="item.topic">
|
||
<text @click="onTopic(item.topic)">#{{ item.topic }}</text>
|
||
</view>
|
||
<view class="comment-btn">
|
||
<view class="left">
|
||
<!-- <view class="date-time">{{ new Date(item.createTime).getTime() | timeFrom }}</view> -->
|
||
</view>
|
||
<view class="right">
|
||
<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>
|
||
</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>
|
||
|
||
<view class="popup" :catchtouchmove="true" @touchmove="()=>{}">
|
||
<u-popup :show="showComment" mode="bottom" :safeAreaInsetTop="ture" :round="10" :closeable="true"
|
||
@close="closeComment" :catchtouchmove="true">
|
||
<view class="comment-popup">
|
||
<view class="head">
|
||
<text class="title">{{ countComment }}条评论</text>
|
||
</view>
|
||
<view class="user-list">
|
||
<u-list :height="310" :scrollTop="anchor">
|
||
<view class="list">
|
||
<u-list-item v-for="(item, index) in comment" :key="index">
|
||
<u-cell :border="false">
|
||
<!-- <view slot="icon">
|
||
<view class="avatar">
|
||
<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> -->
|
||
<view slot="label">
|
||
<view class="comment-box">
|
||
<view class="comment-avatar">
|
||
<u-avatar :size="45" :src="item.avatar"
|
||
customStyle="margin: 0 5px -3px 0"
|
||
@click="$push('sub_pages/member/detail/detail',{userId: item.userId})"></u-avatar>
|
||
</view>
|
||
<view class="comment-content">
|
||
<view class="nickname">
|
||
{{ item.nickname }}
|
||
</view>
|
||
<rich-text class="content" :nodes="item.content"></rich-text>
|
||
<view class="reply-box">
|
||
<view class="create-time">
|
||
{{ new Date(item.createTime).getTime() | timeFrom }} ·
|
||
{{ item.city }} <text class="reply"
|
||
@click="onReply(item,index)">回复</text>
|
||
</view>
|
||
<view class="like">
|
||
<!-- <u-icon name="heart" :size="18"></u-icon> -->
|
||
粉丝：
|
||
<u-badge numberType="limit" :inverted="true" color="#999999"
|
||
:value="item.fans"></u-badge>
|
||
</view>
|
||
<!-- 粉丝：{{ item.fans }} -->
|
||
</view>
|
||
<!-- 回复评论 -->
|
||
<block v-for="(reply, replyIndex) in item.children"
|
||
:key="replyIndex">
|
||
<view class="reply-item">
|
||
<view class="reply-user">
|
||
<u-avatar :size="16" :src="reply.avatar"
|
||
customStyle="margin: -3px 5px -3px 0"
|
||
@click="$push('sub_pages/member/detail/detail',{userId: reply.replyUserId})"></u-avatar>
|
||
<view class="nickname">
|
||
<text
|
||
class="reply-nickname1">{{ reply.nickname }}</text>
|
||
<u-icon v-if="reply.replyNickname"
|
||
name="play-right-fill" :size="12"
|
||
color="#999999"></u-icon>
|
||
<text class="reply-nickname2"
|
||
v-if="reply.replyNickname">{{ reply.replyNickname }}</text>
|
||
</view>
|
||
</view>
|
||
<rich-text class="content"
|
||
:nodes="reply.content"></rich-text>
|
||
<view class="reply-box">
|
||
<view class="create-time">
|
||
{{ new Date(reply.createTime).getTime() | timeFrom }}
|
||
·
|
||
{{ reply.city }} <text class="reply"
|
||
@click="onReply(reply,replyIndex)">回复</text>
|
||
</view>
|
||
<view class="like">
|
||
粉丝：
|
||
<u-badge numberType="limit" :inverted="true"
|
||
color="#999999" :value="reply.fans"></u-badge>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view slot="right-icon">
|
||
|
||
</view>
|
||
</u-cell>
|
||
</u-list-item>
|
||
<u-empty v-if="comment.length == 0" mode="message" text="暂无评论"
|
||
icon="http://cdn.uviewui.com/uview/empty/data.png">
|
||
</u-empty>
|
||
</view>
|
||
</u-list>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="search">
|
||
<!-- <u-button searchIcon="chat" text="发送" v-model="form.content" @click="onSend()" :actionStyle="actionStyle" :disabled="disabled"></u-button> -->
|
||
<u-search :showAction="true" :placeholder="placeholder" searchIcon="chat" actionText="发送" borderColor="#EEEEEE"
|
||
:actionStyle="actionStyle" v-model="form.content" :disabled="disabled"
|
||
@custom="$u.throttle(onSend, 500)"></u-search>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
<!-- <u-action-sheet :actions="gender" :show="showGender" cancelText="取消" @select="onGender"
|
||
@close="showGender = false"></u-action-sheet> -->
|
||
<view v-if="showGender" class="poppup-gender">
|
||
<view class="poppup-gender-mask" @click="showGender=false">
|
||
<view class="poppup-gender-arrow">
|
||
|
||
</view>
|
||
<view class="poppup-gender-box">
|
||
<view @click.stop="onGender(null)" class="poppup-gender-item" :class="{current: where.gender == null}">
|
||
帅哥美女
|
||
</view>
|
||
<view @click.stop="onGender(2)" class="poppup-gender-item" :class="{current: where.gender == 2}">
|
||
只看美女
|
||
</view>
|
||
<view @click.stop="onGender(1)" class="poppup-gender-item" :class="{current: where.gender == 1}">
|
||
只看帅哥
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import store from '@/store/index.js'
|
||
import storage from '@/utils/storage'
|
||
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 Util from '@/utils/util.js'
|
||
import * as Config from '@/config.js';
|
||
import ArticleVideo from '@/components/article-video/article-video.vue'
|
||
const pageSize = 10
|
||
const userId = uni.getStorageSync('userId')
|
||
const loginUserId = uni.getStorageSync('userId')
|
||
|
||
const menu = [{
|
||
name: '推荐'
|
||
},
|
||
{
|
||
name: '同城'
|
||
},
|
||
{
|
||
name: '关注'
|
||
}
|
||
]
|
||
|
||
import mixin from '@/core/mixins/tabbar'
|
||
export default {
|
||
components: {ArticleVideo},
|
||
mixins: [mixin],
|
||
data() {
|
||
return {
|
||
anchor: 0,
|
||
options: null,
|
||
list: [], // 文章列表
|
||
comment: [], // 文章评论列表
|
||
menu,
|
||
currentTab: 0,
|
||
disabled: false,
|
||
danmuList: [{
|
||
text: '好可爱嗷~~',
|
||
color: '#ff0000',
|
||
time: 1
|
||
},
|
||
{
|
||
text: 'かわゆい',
|
||
color: '#ff00ff',
|
||
time: 3
|
||
}
|
||
],
|
||
gender: [{
|
||
value: 2,
|
||
name: '只看美女'
|
||
},
|
||
{
|
||
value: 1,
|
||
name: '只看帅哥'
|
||
},
|
||
{
|
||
value: null,
|
||
name: '美女帅哥'
|
||
}
|
||
],
|
||
actionStyle: {
|
||
background: '#8b004c',
|
||
color: '#ffffff',
|
||
padding: '12rpx 16rpx',
|
||
borderRadius: '50rpx'
|
||
},
|
||
iconStyle: {
|
||
background: '#8b004c',
|
||
},
|
||
statusBarHeight: 25,
|
||
latitude: 22.766777,
|
||
longitude: 108.375152,
|
||
scale: 10,
|
||
page: 1,
|
||
// 控制onShow事件是否刷新订单列表
|
||
canReset: false,
|
||
showGender: false,
|
||
showComment: false,
|
||
countComment: 0,
|
||
where: {
|
||
categoryId: 0,
|
||
platform: 'MP-WEIXIN',
|
||
showFollow: true,
|
||
scene: 'new'
|
||
},
|
||
form: {
|
||
articleId: 0,
|
||
content: '',
|
||
replyCommentId: 0,
|
||
commentNumbers: 0
|
||
},
|
||
articleIndex: 0, // 当前评论的文章
|
||
currentIndex: 0, // 当前评论ID
|
||
loading: 'loading',
|
||
replyUserId: 0,
|
||
placeholder: '善语结善缘，恶言伤人心',
|
||
isLogin: false
|
||
}
|
||
},
|
||
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
|
||
}
|
||
}
|
||
})
|
||
uni.$on("ArticleChange",(data)=>{
|
||
const index = this.list.findIndex(item => item.articleId == data.articleId)
|
||
if(index >= 0){
|
||
this.list[index].liked = data.liked
|
||
this.list[index].likes = data.likes
|
||
this.list[index].commentNumbers = data.commentNumbers
|
||
}
|
||
console.log(data);
|
||
})
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow() {
|
||
// this.page = 1
|
||
// this.list = []
|
||
// this.onRefreshList()
|
||
},
|
||
// 触底函数
|
||
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 app = this
|
||
const userId = uni.getStorageSync('userId')
|
||
const index = e.index
|
||
app.currentTab = index
|
||
app.where = {}
|
||
|
||
// 最新
|
||
if (index == 0) {
|
||
app.where.scene = 'new'
|
||
}
|
||
// 同城
|
||
if (index == 1) {
|
||
app.where.scene = 'intraCity'
|
||
if (userId == 1101) {
|
||
app.$push('pages/login/index')
|
||
return false
|
||
}
|
||
}
|
||
// 关注
|
||
if (index == 2) {
|
||
app.where.scene = 'focus'
|
||
if (userId == 1101) {
|
||
app.$push('pages/login/index')
|
||
return false
|
||
}
|
||
}
|
||
app.page = 1
|
||
app.list = []
|
||
app.onRefreshList()
|
||
},
|
||
onChange(e) {
|
||
this.currentTab = e.index
|
||
},
|
||
// 刷新订单列表
|
||
onRefreshList() {
|
||
const app = this
|
||
// var LoveWhere = uni.getStorageSync('LoveWhere')
|
||
app.where.page = app.page
|
||
app.where.loginUserId = userId
|
||
app.where.categoryId = 0
|
||
app.where.showFollow = true
|
||
app.where.sceneType = 'LOVE_INDEX'
|
||
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 => {
|
||
if(pic.type != 'video'){
|
||
files.push({
|
||
thumb: pic.url + '?x-oss-process=image/resize,w_400/quality,Q_90',
|
||
url: pic.url + '?x-oss-process=image/resize,w_1500/quality,Q_90'
|
||
})
|
||
}else {
|
||
files.push(pic)
|
||
}
|
||
|
||
})
|
||
}
|
||
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
|
||
}
|
||
},
|
||
onGender(gender) {
|
||
this.list = []
|
||
this.where.page = 1
|
||
this.where.gender = gender
|
||
this.showGender = false
|
||
this.onRefreshList()
|
||
},
|
||
// 获取用户坐标
|
||
// 参考文档：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, params) {
|
||
if (!store.getters.userId || store.getters.userId == 1101) {
|
||
this.$navTo('pages/login/index')
|
||
return false
|
||
}
|
||
this.$navTo(url, params)
|
||
},
|
||
onRelease(){
|
||
const app = this
|
||
if (!store.getters.userId || store.getters.userId == 1101) {
|
||
this.$navTo('pages/login/index')
|
||
return false
|
||
}
|
||
uni.navigateTo({
|
||
url: `/sub_pages/love/release/release`,
|
||
events: {
|
||
reload: ({
|
||
isRefresh // false
|
||
}) => {
|
||
console.log("onRelease: ",isRefresh);
|
||
if(isRefresh){
|
||
app.page = 1
|
||
app.list = []
|
||
app.onRefreshList()
|
||
}
|
||
// const currentTab = uni.getStorageSync('currentTab')
|
||
// // 取消关注，从列表中删除
|
||
// if (!follow && currentTab == 2 && app.curQueue[index]) app.curQueue.splice(index, 1)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
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) {
|
||
const loginUserId = store.getters.userId
|
||
if (!loginUserId || loginUserId == 1101) {
|
||
this.$push('pages/login/index')
|
||
return false
|
||
}
|
||
console.log("item: ", item);
|
||
// uni.hideTabBar()
|
||
this.comment = []
|
||
this.getComment(item.articleId)
|
||
this.form.articleId = item.articleId
|
||
this.form.commentNumbers = item.commentNumbers
|
||
this.form.toUserId = item.userId
|
||
this.countComment = item.commentNumbers
|
||
this.currentIndex = index
|
||
this.showComment = true
|
||
console.log("this.form: ", this.form);
|
||
},
|
||
closeComment() {
|
||
// uni.showTabBar()
|
||
this.showComment = false
|
||
this.placeholder = '善语结善缘，恶言伤人心'
|
||
},
|
||
getComment(articleId) {
|
||
const app = this
|
||
ArticleCommentApi.pageArticleComment({
|
||
articleId
|
||
}).then(res => {
|
||
app.countComment = res.data.count
|
||
app.comment = res.data.list.map(d => {
|
||
d.children = d.children.reverse()
|
||
return d
|
||
})
|
||
})
|
||
},
|
||
// 发表评论
|
||
onSend() {
|
||
const app = this
|
||
const {
|
||
form,
|
||
countComment
|
||
} = this
|
||
const {
|
||
articleId,
|
||
content,
|
||
toUserId,
|
||
replyUserId,
|
||
replyCommentId
|
||
} = form
|
||
if (form.content == '') {
|
||
app.$error('请填写评论内容')
|
||
return false
|
||
}
|
||
form.countComment = countComment
|
||
app.disabled = true
|
||
ArticleCommentApi.addArticleComment({
|
||
articleId,
|
||
countComment,
|
||
content,
|
||
toUserId: replyUserId?replyUserId:toUserId,
|
||
replyCommentId,
|
||
replyUserId
|
||
}).then(res => {
|
||
app.form.content = ''
|
||
app.form.replyCommentId = 0
|
||
app.form.replyUserId = 0
|
||
app.placeholder = '善语结善缘，恶言伤人心'
|
||
app.getComment(form.articleId)
|
||
const currIndex = app.list.findIndex(item => item.articleId == articleId)
|
||
app.list[currIndex].commentNumbers = res.data.commentNumbers
|
||
app.anchor = app.anchor + 0.01
|
||
app.disabled = false
|
||
// app.$success(res.message)
|
||
}).catch(err => {
|
||
app.$error(err.message)
|
||
app.disabled = false
|
||
})
|
||
},
|
||
getProvince(text) {
|
||
if (text == '广西壮族自治区') {
|
||
return '广西'
|
||
}
|
||
return text;
|
||
},
|
||
getCity(text) {
|
||
return text.replace('市', '')
|
||
},
|
||
onReply(item, index) {
|
||
const app = this
|
||
if (loginUserId == 1101 || loginUserId == null) {
|
||
app.$push('pages/login/index')
|
||
return false
|
||
}
|
||
console.log("item: ", item);
|
||
app.placeholder = '回复@' + item.nickname
|
||
app.form.replyCommentId = item.replyCommentId ? item.replyCommentId : item.commentId
|
||
app.form.replyUserId = item.userId
|
||
// UserLikeApi.addLike(app.form).then(res => {
|
||
// app.likes = res.data
|
||
// app.setLikeLight(index)
|
||
// })
|
||
},
|
||
onTopic(text){
|
||
this.$push('/pages/love/category?topic=' + text)
|
||
// this.list = []
|
||
// this.where.page = 1
|
||
// this.where.topic = text
|
||
// this.onRefreshList()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
background-color: #ffffff;
|
||
height: 100vh;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.search-wrapper {
|
||
width: 240rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
}
|
||
|
||
// .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 {
|
||
background-color: #ffffff;
|
||
width: 750rpx;
|
||
margin: 0 auto;
|
||
overflow-x: hidden;
|
||
|
||
.comment {
|
||
width: 700rpx;
|
||
padding: 30rpx;
|
||
|
||
.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 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
.nickname {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
|
||
.user-city {
|
||
border: 1rpx solid #8d1a50;
|
||
border-radius: 25px;
|
||
padding: 0 8rpx !important;
|
||
font-size: 18rpx;
|
||
margin-left: 20rpx;
|
||
height: 25rpx;
|
||
color: #8d1a50;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.label {
|
||
color: #999999;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.topic {
|
||
margin-bottom: 20rpx;
|
||
padding: 8rpx 16rpx;
|
||
font-size: 28rpx;
|
||
color: #8d1a50;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.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: space-between;
|
||
font-size: 26rpx;
|
||
|
||
.left {
|
||
.date-time {
|
||
color: #9a9a9a;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
|
||
.zan {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.comment2 {
|
||
margin-left: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
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;
|
||
margin-bottom: 40rpx;
|
||
font-size: 26rpx;
|
||
|
||
.head {
|
||
padding: 24rpx;
|
||
text-align: center;
|
||
border-bottom: 1rpx solid #f3f3f3;
|
||
}
|
||
|
||
.user-list {}
|
||
|
||
.footer {
|
||
background-color: #ffffff;
|
||
border-top: 1rpx solid #f3f3f3;
|
||
width: 750rpx;
|
||
height: 55rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 20rpx;
|
||
padding: 20rpx 0;
|
||
|
||
.search {
|
||
width: 700rpx;
|
||
margin: auto;
|
||
}
|
||
}
|
||
|
||
.comment-box {
|
||
display: flex;
|
||
|
||
.comment-avatar {}
|
||
|
||
.comment-content {
|
||
width: 100%;
|
||
|
||
.nickname {
|
||
color: #999999;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
padding: 2rpx 0;
|
||
|
||
.reply-nickname1 {
|
||
padding-right: 10rpx;
|
||
}
|
||
|
||
.reply-nickname2 {
|
||
padding-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.reply-box {
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0;
|
||
|
||
.reply {
|
||
color: #681752;
|
||
margin: 0 30rpx;
|
||
}
|
||
|
||
.like {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #999999;
|
||
font-size: 26rpx;
|
||
padding-right: 50rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.reply-item {
|
||
margin: 24rpx 0;
|
||
|
||
.reply-user {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 2rpx 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.poppup-gender{
|
||
&-mask{
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
top: 0;
|
||
z-index: 99999;
|
||
background-color: rgba(0, 0, 0, .5);
|
||
}
|
||
|
||
&-arrow {
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 8rpx solid transparent;
|
||
border-bottom: 8rpx solid #ffffff;
|
||
border-left: 8rpx solid transparent;
|
||
border-right: 8rpx solid transparent;
|
||
position: absolute;
|
||
top: calc(114rpx + var(--status-bar-height));
|
||
left: 98rpx;
|
||
}
|
||
&-box{
|
||
// width: 170rpx;
|
||
// height: 200rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 8rpx;
|
||
position: absolute;
|
||
top: calc(130rpx + var(--status-bar-height));
|
||
left: 80rpx;
|
||
padding: 10rpx 0;
|
||
}
|
||
&-item{
|
||
font-size: 32rpx;
|
||
height: 100rpx;
|
||
padding: 0 40rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
color: #999999;
|
||
&.current{
|
||
color: #681752;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.commit-notice{
|
||
width: 220rpx;
|
||
height: 50rpx;
|
||
background-color: rgba(#681752, 1);
|
||
color: #ffffff;
|
||
margin: 10rpx auto;
|
||
border-radius: 10rpx;
|
||
font-size: 28rpx;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
</style> |