1601 lines
42 KiB
Vue
1601 lines
42 KiB
Vue
<template>
|
||
<view class="pair">
|
||
<view class="bg-color"></view>
|
||
<!-- <image src="https://file.wsdns.cn/20230604/c848136d880e46bf97c3980eb0f4a67c.jpeg" class="bg" mode="widthFix">
|
||
</image> -->
|
||
<image :src="userInfo.bgImage?userInfo.bgImage :userInfo.avatar" class="bg" width="750" mode="aspectFill">
|
||
</image>
|
||
<view class="header">
|
||
<view class="user">
|
||
<view class="avatar" @click="openAvatarBig(userInfo.avatar)">
|
||
<u-avatar :src="userInfo.avatar" shape="circle" mode="aspectFill" :size="100"></u-avatar>
|
||
</view>
|
||
<view class="info">
|
||
<view class="nickname">{{ userInfo.nickname }}</view>
|
||
<view class="region">{{ userInfo.province }} {{ userInfo.city }} {{ userInfo.region }}</view>
|
||
<view class="user-id" v-if="userIdPrefix && userInfo.userId">
|
||
ID：{{ userIdPrefix }}{{ userInfo.userId }}</view>
|
||
<view class="focus">
|
||
<view v-if="userInfo.certification != 1" class="unfollow-btn">
|
||
<text>未实名</text>
|
||
</view>
|
||
<view v-else class="follow-btn">
|
||
<text>已实名</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tools">
|
||
<view class="left">
|
||
<view class="focus">
|
||
<u-badge numberType="limit" :customStyle="{fontSize: '30rpx'}" inverted color="#ffffff"
|
||
:showZero="true" :value="userInfo.followers"></u-badge>
|
||
<text>关注</text>
|
||
</view>
|
||
<view class="fans">
|
||
<u-badge numberType="limit" :customStyle="{fontSize: '30rpx'}" inverted color="#ffffff"
|
||
:showZero="true" :value="userInfo.fans"></u-badge>
|
||
<text>粉丝</text>
|
||
</view>
|
||
<view class="like">
|
||
<u-badge numberType="limit" :customStyle="{fontSize: '30rpx'}" inverted color="#ffffff"
|
||
:showZero="true" :value="userInfo.likes"></u-badge>
|
||
<text>获赞</text>
|
||
</view>
|
||
</view>
|
||
<view class="right" v-if="loginUserId != userInfo.userId">
|
||
<block>
|
||
<view v-if="form.follow" class="unfocus" @click="addFocus(userInfo.userId)">
|
||
<!-- <image src="../../../static/icon/follow.png" mode="widthFix"></image> -->
|
||
<text>已关注</text>
|
||
</view>
|
||
<view v-else class="focus" @click="addFocus(userInfo.userId)">
|
||
<u-icon name="heart" color="#ffffff" :size="15"></u-icon>
|
||
<!-- <image src="../../../static/icon/follow.png" mode="widthFix"></image> -->
|
||
<text>关注</text>
|
||
</view>
|
||
</block>
|
||
<view class="chat" @click="onChat(userInfo)">
|
||
<u-icon name="chat" color="#ffffff" :size="15"></u-icon>
|
||
<!-- <image src="../../../static/icon/comment.png" mode="widthFix"></image> -->
|
||
<text>聊天</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="main">
|
||
<view class="tabs">
|
||
<u-tabs :current="curTab" :list="tabs" @click="onTabs" :activeStyle="{color: '#681752'}" lineColor="#681752"></u-tabs>
|
||
</view>
|
||
<!-- 信息 -->
|
||
<view v-if="curTab == 0" class="list">
|
||
<view class="info-item">
|
||
<view class="his-head">
|
||
<view class="line"></view>
|
||
<text class="title">关于我</text>
|
||
</view>
|
||
<view class="interest">
|
||
<view class="desc">
|
||
{{ userInfo.introduction ? userInfo.introduction : '该用户还未填写自我介绍，看看她的其他内容吧~' }}
|
||
</view>
|
||
</view>
|
||
<view class="his-head">
|
||
<view class="line"></view>
|
||
<text class="title">基本信息</text>
|
||
</view>
|
||
<view class="interest">
|
||
<view class="field">
|
||
<view class="text">性别：{{ getSexName(userInfo.sex) }}</view>
|
||
<view class="text" v-if="userInfo.birthday">
|
||
年龄：{{ computedAge(userInfo.birthday) }}</view>
|
||
<!-- <view class="text" v-if="userInfo.birthday">{{ `生日：${userInfo.birthday}` }}</view> -->
|
||
<view class="text" v-if="form.position">职业：{{ form.position }}</view>
|
||
<view class="text" v-if="userInfo.city">
|
||
{{ `注册地址：${userInfo.province}-${userInfo.city}-${userInfo.region}` }}
|
||
</view>
|
||
<view class="text" v-if="form.yearlyPay">
|
||
{{ `年收入：${form.yearlyPay ? form.yearlyPay : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="userInfo.education">
|
||
{{ `学历：${userInfo.education ? userInfo.education : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.maritalStatus">
|
||
{{ `婚姻状况：${form.maritalStatus ? form.maritalStatus : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.height">{{ `身高：${form.height ? form.height : '不限'}` }}</view>
|
||
<view class="text" v-if="form.weight">{{ `体重：${form.weight ? form.weight : '不限'}` }}</view>
|
||
<view class="text" v-if="form.shape">{{ `体型：${form.shape ? form.shape : '不限'}` }}</view>
|
||
<view class="text" v-if="form.hasChildren">
|
||
{{ `有无孩子：${form.hasChildren ? form.hasChildren : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.haveChild">
|
||
{{ `是否想要孩子：${form.haveChild ? form.haveChild : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.whenMarried">
|
||
{{ `何时想结婚：${form.whenMarried ? form.whenMarried : '不限'}` }}
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="his-head">
|
||
<view class="line"></view>
|
||
<text class="title">择偶信息</text>
|
||
</view>
|
||
<view class="interest">
|
||
<view class="field">
|
||
<view class="text" v-if="form.ageMate">{{ `年龄：${form.ageMate ? form.ageMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.heightMate">
|
||
{{ `身高：${form.heightMate ? form.heightMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.weightMate">
|
||
{{ `体重：${form.weightMate ? form.weightMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.yearlyPayMate">
|
||
{{ `年收入：${form.yearlyPayMate ? form.yearlyPayMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.educationMate">
|
||
{{ `学历：${form.educationMate ? form.educationMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.vocationMate">
|
||
{{ `职业：${form.vocationMate ? form.vocationMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.shapeMate">
|
||
{{ `体型：${form.shapeMate ? form.shapeMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.maritalStatusMate">
|
||
{{ `婚姻状况：${form.maritalStatusMate ? form.maritalStatusMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.cityMate">
|
||
{{ `择偶区域：${form.provinceMate}-${form.cityMate}-${form.regionMate}` }}
|
||
</view>
|
||
<view class="text" v-if="form.hasChildrenMate">
|
||
{{ `有无孩子：${form.hasChildrenMate ? form.hasChildrenMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.haveChildMate">
|
||
{{ `是否想要孩子：${form.haveChildMate ? form.haveChildMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.isSmokingMate">
|
||
{{ `是否吸烟：${form.isSmokingMate ? form.isSmokingMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.isDrinkMate">
|
||
{{ `是否喝酒：${form.isDrinkMate ? form.isDrinkMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.hasCarMate">
|
||
{{ `是否有房：${form.hasCarMate ? form.hasCarMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.hasHouseMate">
|
||
{{ `是否有房：${form.hasHouseMate ? form.hasHouseMate : '不限'}` }}
|
||
</view>
|
||
<view class="text" v-if="form.whenMarriedMate">
|
||
{{ `何时想结婚：${form.whenMarriedMate ? form.whenMarriedMate : '不限'}` }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="his-head">
|
||
<view class="line"></view>
|
||
<text class="title">兴趣爱好</text>
|
||
</view>
|
||
<view class="interest" v-if="interest">
|
||
<view class="u-page__tag-item" v-for="(tag, index) in interest" :key="index">
|
||
<u-tag :text="`${tag}`" type="info" color="#ffffff" bgColor="#681752" borderColor="#681752"
|
||
:name="index">
|
||
</u-tag>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="his-head">
|
||
<view class="line"></view>
|
||
<text class="title">Ta的形象照</text>
|
||
</view>
|
||
<u-album :urls="fileList1" keyName="thumb" :singleSize="100" singleMode="aspectFill"
|
||
multipleMode="aspectFill"></u-album>
|
||
<!-- <u-album :urls="fileList1" keyName="thumb" multipleMode="widthFix"></u-album> -->
|
||
<!-- <u-album :urls="fileList1" keyName="thumb"></u-album> -->
|
||
</view>
|
||
<u-gap height="80"></u-gap>
|
||
<!-- 操作按钮 -->
|
||
<view class="footer" v-if="myself">
|
||
<view class="btn-wrapper">
|
||
<u-button text="去编辑" color="linear-gradient(to bottom, #010002, #681752)" :disabled="disabled"
|
||
shape="circle" @click="navTo('sub_pages/user/personal/index')"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 动态 -->
|
||
<view v-if="curTab == 1" class="list">
|
||
<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 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>
|
||
<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" :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>
|
||
<!-- <u-album :urls="item.files" keyName="thumb" multipleMode="widthFix"></u-album> -->
|
||
</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 active" style="margin-right: 50rpx;" v-if="item.userId == loginUserId"
|
||
@click="onDelete(item.articleId)">
|
||
<u-icon name="trash" color="#681752" :size="20"></u-icon>
|
||
<text>删除</text>
|
||
</view>
|
||
<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 class="comment-btn">
|
||
<view class="zan active" style="margin-right: 50rpx;" v-if="item.userId == loginUserId"
|
||
@click="onDelete(item.articleId)">
|
||
<u-icon name="trash" color="#681752" :size="20"></u-icon>
|
||
<text>删除</text>
|
||
</view>
|
||
<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>
|
||
<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/data.png">
|
||
</u-empty>
|
||
</view>
|
||
</view>
|
||
<!-- 认证信息 -->
|
||
<view v-if="curTab == 2">
|
||
<view class="certification-list">
|
||
<view class="item" v-for="(item, index) in certification" :key="index" @click="navTo(item)">
|
||
<view class="content">
|
||
<view class="icon">
|
||
<image :src="item.icon" mode="widthFix"></image>
|
||
</view>
|
||
<view class="info">
|
||
<view class="title">{{ item.name }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn">
|
||
<text v-if="item.submitText == '已认证'">{{ item.submitText }}</text>
|
||
<text v-else style="color: #666666;">{{ item.submitText }}</text>
|
||
<u-icon name="checkbox-mark" color="#681752" v-if="item.submitText == '已认证'"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <u-loadmore :status="loading" /> -->
|
||
|
||
<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="310">
|
||
<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: -3px 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-search :showAction="true" :placeholder="placeholder" searchIcon="chat" actionText="发送"
|
||
:actionStyle="actionStyle" v-model="form.content" @custom="onSend()"></u-search>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-modal showCancelButton @cancel="showIdCardModal = false" @confirm="doAuth" :show="showIdCardModal" title="完成认证我们才能开始配对聊天哦" cancelText="稍后认证" confirm-text="立即认证"></u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
navTo
|
||
} from '@/core/app.js'
|
||
import {
|
||
username,
|
||
userIdPrefix
|
||
} from '@/config.js';
|
||
import {
|
||
mapMutations
|
||
} from 'vuex'
|
||
import store from '@/store'
|
||
// import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
|
||
// import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
|
||
import * as ArticleApi from '@/api/article.js'
|
||
import * as UserProfileApi from '@/api/love-user-profile.js'
|
||
import * as RedisUtilApi from '@/api/redis-util.js'
|
||
import * as ArticleLikeApi from '@/api/article-like.js'
|
||
import * as CertificateApi from '@/api/love-certificate.js'
|
||
import * as Util from '@/utils/util.js'
|
||
import * as ArticleCommentApi from '@/api/article-comment.js'
|
||
import ArticleVideo from '@/components/article-video/article-video.vue'
|
||
const pageSize = 10
|
||
|
||
const loginUserId = uni.getStorageSync('userId')
|
||
|
||
export default {
|
||
components: {ArticleVideo},
|
||
// components: {
|
||
// MescrollBody
|
||
// },
|
||
// mixins: [MescrollMixin],
|
||
data() {
|
||
return {
|
||
userIdPrefix,
|
||
loginUserId,
|
||
userId: 0,
|
||
userInfo: {
|
||
avatar: '',
|
||
nickname: '',
|
||
province: '',
|
||
city: '',
|
||
region: '',
|
||
userId: ''
|
||
},
|
||
actionStyle: {
|
||
background: '#8b004c',
|
||
color: '#ffffff',
|
||
padding: '12rpx 16rpx',
|
||
borderRadius: '50rpx'
|
||
},
|
||
iconStyle: {
|
||
background: '#8b004c',
|
||
},
|
||
interest: [],
|
||
fileList1: [],
|
||
myself: false,
|
||
tabs: [{
|
||
name: '信息'
|
||
}, {
|
||
name: '动态'
|
||
}, {
|
||
name: '认证信息'
|
||
}],
|
||
certification: [{
|
||
type: 'idCard',
|
||
icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/idcard.png',
|
||
name: '身份认证',
|
||
desc: '远离骗子与婚托，真诚交友安全有保障',
|
||
url: 'sub_pages/certification/id-card/id-card',
|
||
submitText: '未认证',
|
||
isEdit: false
|
||
},
|
||
{
|
||
type: 'house',
|
||
icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/house.png',
|
||
name: '房屋认证',
|
||
desc: '有趣的灵魂万里挑一，遇见同频的TA',
|
||
url: 'sub_pages/certification/house/house',
|
||
submitText: '未认证',
|
||
isEdit: false
|
||
},
|
||
{
|
||
type: 'education',
|
||
icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/xueli.png',
|
||
name: '学历认证',
|
||
desc: '有车一族，来一场说走就走的旅行',
|
||
url: 'sub_pages/certification/education/education',
|
||
submitText: '未认证',
|
||
isEdit: false
|
||
},
|
||
{
|
||
type: 'car',
|
||
icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/card.png',
|
||
name: '车辆认证',
|
||
desc: '完成房产认证，证实你的实力',
|
||
url: 'sub_pages/certification/car/car',
|
||
submitText: '未认证',
|
||
isEdit: false
|
||
}
|
||
],
|
||
navTo,
|
||
curTab: 0,
|
||
isLogin: false,
|
||
list: [], // 文章列表
|
||
comment: [], // 文章评论列表
|
||
page: 0,
|
||
// 控制onShow事件是否刷新订单列表
|
||
canReset: false,
|
||
// 上拉加载配置
|
||
upOption: {
|
||
// 首次自动执行
|
||
auto: true,
|
||
// 每页数据的数量; 默认10
|
||
page: {
|
||
size: pageSize
|
||
},
|
||
// 数量要大于4条才显示无更多数据
|
||
noMoreSize: 4,
|
||
// 空布局
|
||
empty: {
|
||
tip: '亲，暂无订单记录'
|
||
}
|
||
},
|
||
where: {
|
||
platform: 'MP-WEIXIN'
|
||
},
|
||
form: {
|
||
articleId: 0,
|
||
content: '',
|
||
replyCommentId: 0,
|
||
commentNumbers: 0
|
||
},
|
||
articleIndex: 0, // 当前评论的文章
|
||
showComment: false,
|
||
countComment: 0,
|
||
currentIndex: 0, // 当前评论ID
|
||
loading: 'loading',
|
||
replyUserId: 0,
|
||
placeholder: '善语结善缘，恶言伤人心',
|
||
showIdCardModal: false
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
const app = this
|
||
app.userId = options.userId
|
||
app.getUserProfile()
|
||
app.getCertfication()
|
||
// 注册全局事件订阅: 是否刷新订单列表
|
||
// uni.$on('syncRefreshOrder', canReset => {
|
||
// app.canReset = canReset
|
||
// })
|
||
// 我自己
|
||
const userId = uni.getStorageSync('userId')
|
||
if (options.userId == userId) {
|
||
app.myself = true
|
||
this.onTabs({index: 1})
|
||
}
|
||
if (loginUserId > 0 && loginUserId != 1101) {
|
||
app.isLogin = true
|
||
}
|
||
},
|
||
onShow() {
|
||
this.canReset && this.onRefreshList()
|
||
this.canReset = false
|
||
// this.userId = uni.getStorageSync('userId')
|
||
|
||
},
|
||
onUnload() {
|
||
const eventChannel = this.getOpenerEventChannel();
|
||
eventChannel.emit('reload', {
|
||
follow: this.form.follow
|
||
});
|
||
},
|
||
onPullDownRefresh() {
|
||
this.list = []
|
||
this.onRefreshList()
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
onReady() {},
|
||
methods: {
|
||
...mapMutations(['ADD_FRIEND']),
|
||
/**
|
||
* 上拉加载的回调 (页面初始化时也会执行一次)
|
||
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
|
||
* @param {Object} page
|
||
*/
|
||
// upCallback(page) {
|
||
// const app = this
|
||
// app.getArticleList(app.page++)
|
||
// .then(list => {
|
||
// const curPageLen = list.data.length
|
||
// const totalSize = list.data.total
|
||
// app.mescroll.endBySize(curPageLen, totalSize)
|
||
// })
|
||
// .catch(() => app.mescroll.endErr())
|
||
// },
|
||
|
||
// 刷新订单列表
|
||
onRefreshList() {
|
||
const app = this
|
||
app.where.page = app.page
|
||
app.where.userId = app.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)
|
||
})
|
||
})
|
||
},
|
||
getUserProfile() {
|
||
const app = this
|
||
UserProfileApi.getUserDetail(app.userId).then(res => {
|
||
app.form = res.data
|
||
const userInfo = res.data.userInfo
|
||
app.userInfo = userInfo
|
||
app.interest = JSON.parse(app.form.interest)
|
||
// 处理相册
|
||
const imgs = JSON.parse(app.form.images)
|
||
if (imgs) {
|
||
var files = []
|
||
imgs.map(pic => {
|
||
// thumb: Util.thumbnail(pic.url),
|
||
files.push({
|
||
thumb: pic.url,
|
||
url: pic.url
|
||
})
|
||
})
|
||
}
|
||
app.fileList1 = files
|
||
|
||
}).catch(err => {
|
||
app.$success(err)
|
||
})
|
||
},
|
||
|
||
getArticleList() {
|
||
const app = this
|
||
app.where.page = app.page
|
||
app.where.userId = app.userId
|
||
app.where.showFollow = true
|
||
return new Promise((resolve, reject) => {
|
||
ArticleApi.pageArticle(app.where, {
|
||
load: false
|
||
})
|
||
.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 (d.accept == 'video') {
|
||
files = pic.url
|
||
} else {
|
||
files.push({
|
||
thumb: pic.url,
|
||
url: pic.url
|
||
})
|
||
}
|
||
})
|
||
}
|
||
d.files = files
|
||
return d
|
||
})
|
||
// 合并新数据
|
||
app.list.data = app.list.data.concat(newList)
|
||
resolve(newList)
|
||
})
|
||
})
|
||
},
|
||
onTabs(e) {
|
||
this.curTab = e.index
|
||
this.list = []
|
||
this.onRefreshList()
|
||
},
|
||
getSexName(sex) {
|
||
if (sex == '1') {
|
||
return '男'
|
||
}
|
||
if (sex == '2') {
|
||
return '女'
|
||
}
|
||
return '保密'
|
||
},
|
||
addFocus(shopId) {
|
||
const app = this
|
||
if (!app.isLogin) {
|
||
app.$push('pages/login/index')
|
||
return false
|
||
}
|
||
this.form.follow = !this.form.follow
|
||
RedisUtilApi.addFocus({
|
||
shopId
|
||
}).then(res => {
|
||
app.$success(res.message)
|
||
})
|
||
},
|
||
onChat(userInfo) {
|
||
if (!this.isLogin) {
|
||
this.$push('pages/login/index')
|
||
return false
|
||
}
|
||
if(this.$store.getters.userInfo.certification != 1){
|
||
this.showIdCardModal = true
|
||
return false
|
||
}
|
||
this.ADD_FRIEND(userInfo)
|
||
this.$push('/pages/chat/chat?friendId=' + userInfo.userId)
|
||
// uni.navigateTo({
|
||
// url: '/pages/chat/chat?friendId=' + item.userInfo.userId
|
||
// })
|
||
|
||
},
|
||
onDelete(articleId) {
|
||
ArticleApi.removeArticle(articleId).then(res => {
|
||
this.list = []
|
||
this.onRefreshList()
|
||
this.$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 => {
|
||
console.log("res.....: ", res);
|
||
app.list[index].liked = res.data.liked
|
||
app.list[index].likes = res.data.likes
|
||
uni.$emit("ArticleChange", app.list[index])
|
||
}).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
|
||
ArticleCommentApi.addArticleComment({
|
||
articleId,
|
||
countComment,
|
||
content,
|
||
toUserId,
|
||
replyCommentId,
|
||
replyUserId
|
||
}).then(res => {
|
||
app.form.content = ''
|
||
app.getComment(form.articleId)
|
||
app.list[app.articleIndex].commentNumbers = res.data.commentNumbers
|
||
uni.$emit("ArticleChange", app.list[app.articleIndex])
|
||
// app.$success(res.message)
|
||
}).catch(err => {
|
||
app.$error(err.message)
|
||
})
|
||
},
|
||
getProvince(text) {
|
||
if (text == '广西壮族自治区') {
|
||
return '广西'
|
||
}
|
||
return text;
|
||
},
|
||
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)
|
||
// })
|
||
},
|
||
openAvatarBig(pic) {
|
||
const img = Util.original(pic)
|
||
// 预览图片
|
||
uni.previewImage({
|
||
urls: [img],
|
||
longPressActions: {
|
||
itemList: ['保存图片'],
|
||
success: function(data) {
|
||
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
||
},
|
||
fail: function(err) {
|
||
console.log(err.errMsg);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getCity(text) {
|
||
return text.replace('市', '')
|
||
},
|
||
getCertfication() {
|
||
const app = this
|
||
const {
|
||
userId
|
||
} = this
|
||
CertificateApi.listCertificate({
|
||
userId
|
||
}).then(res => {
|
||
res.data.map(d => {
|
||
if (d.certificateType == 'idCard' && d.status == 30) {
|
||
app.certification[0].submitText = '已认证'
|
||
app.certification[0].isEdit = true
|
||
}
|
||
if (d.certificateType == 'house' && d.status == 30) {
|
||
app.certification[1].submitText = '已认证'
|
||
app.certification[1].isEdit = true
|
||
}
|
||
if (d.certificateType == 'education' && d.status == 30) {
|
||
app.certification[2].submitText = '已认证'
|
||
app.certification[2].isEdit = true
|
||
}
|
||
if (d.certificateType == 'car' && d.status == 30) {
|
||
app.certification[3].submitText = '已认证'
|
||
app.certification[3].isEdit = true
|
||
}
|
||
})
|
||
})
|
||
},
|
||
doAuth(){
|
||
uni.navigateTo({
|
||
url: '/sub_pages/certification/id-card/id-card',
|
||
events: {
|
||
reload: () => {
|
||
this.showIdCardModal = false
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.pair {
|
||
.bg {
|
||
width: 750rpx;
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 0;
|
||
background-color: #0d0119;
|
||
}
|
||
|
||
/* 背景叠加 */
|
||
.bg-color {
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 10;
|
||
width: 750rpx;
|
||
height: 500rpx;
|
||
background-color: #0d0119;
|
||
opacity: .3;
|
||
filter: Alpha(opacity=30);
|
||
}
|
||
|
||
.header {
|
||
width: 750rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
z-index: 888;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-top: 88rpx;
|
||
|
||
.user {
|
||
width: 680rpx;
|
||
margin: 20rpx auto;
|
||
display: flex;
|
||
|
||
.avatar {
|
||
border: 6rpx solid #ffffff;
|
||
border-radius: 100%;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
color: #ffffff;
|
||
margin-left: 20rpx;
|
||
font-size: 26rpx;
|
||
|
||
.nickname {
|
||
font-size: 43rpx;
|
||
font-weight: 700;
|
||
}
|
||
.focus {
|
||
display: flex;
|
||
// padding: 4rpx 20rpx;
|
||
width: 200rpx;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
font-size: 26rpx;
|
||
border-radius: 50rpx;
|
||
margin-right: 10rpx;
|
||
// background: linear-gradient(#47076b, #8d1a50);
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.tools {
|
||
width: 680rpx;
|
||
margin: auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
display: flex;
|
||
flex-direction: row;
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
justify-content: space-between;
|
||
|
||
.focus {
|
||
font-size: 24rpx;
|
||
margin-right: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.fans {
|
||
margin-right: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.like {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
|
||
display: flex;
|
||
flex-direction: row;
|
||
|
||
.focus {
|
||
display: flex;
|
||
padding: 4rpx 20rpx;
|
||
color: #ffffff;
|
||
font-size: 26rpx;
|
||
border-radius: 50rpx;
|
||
margin-right: 10rpx;
|
||
background: linear-gradient(#47076b, #8d1a50);
|
||
|
||
image {
|
||
width: 24rpx;
|
||
height: 66rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
|
||
.unfocus {
|
||
display: flex;
|
||
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;
|
||
}
|
||
}
|
||
|
||
.chat {
|
||
display: flex;
|
||
padding: 4rpx 20rpx;
|
||
color: #ffffff;
|
||
font-size: 26rpx;
|
||
border-radius: 50rpx;
|
||
margin-right: 10rpx;
|
||
background: linear-gradient(#47076b, #8d1a50);
|
||
|
||
image {
|
||
width: 24rpx;
|
||
height: 66rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.main {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 999;
|
||
width: 750rpx;
|
||
margin-top: 400rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
|
||
.tabs {
|
||
width: 300rpx;
|
||
margin: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.comment {
|
||
width: 700rpx;
|
||
min-height: 800rpx;
|
||
height: auto !important;
|
||
background-color: #ffffff;
|
||
margin: 30rpx auto;
|
||
|
||
.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 {
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-item {
|
||
width: 660rpx;
|
||
margin: auto;
|
||
|
||
.his-head {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
padding: 50rpx 0 20rpx 0;
|
||
color: #681752;
|
||
|
||
.line {
|
||
background-color: #681752;
|
||
width: 8rpx;
|
||
height: 30rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.icon {
|
||
float: right;
|
||
}
|
||
|
||
}
|
||
|
||
.interest {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
|
||
.desc {
|
||
color: #666666;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.field {
|
||
width: 600rpx;
|
||
background-color: #f3f3f3;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
|
||
.text {
|
||
margin: 10rpx 10rpx 20rpx 0;
|
||
width: auto;
|
||
padding: 4rpx 10rpx;
|
||
color: #666666;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.u-page__tag-item {
|
||
margin-bottom: 10rpx;
|
||
margin-right: 10rpx;
|
||
display: block;
|
||
}
|
||
|
||
}
|
||
|
||
.his-list {
|
||
padding: 20rpx 0;
|
||
overflow: hidden;
|
||
|
||
.his-item {
|
||
width: 33.3%;
|
||
float: left;
|
||
padding: 10rpx;
|
||
box-sizing: border-box;
|
||
|
||
.history-button {
|
||
text-align: center;
|
||
padding: 14rpx;
|
||
line-height: 30rpx;
|
||
border-radius: 100rpx;
|
||
background: #fff;
|
||
font-size: 26rpx;
|
||
border: 1rpx solid #efefef;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-wrapper {
|
||
width: 360rpx;
|
||
margin: 50rpx auto;
|
||
// display: flex;
|
||
// align-items: center;
|
||
padding: 0 20rpx;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
margin: 0 30rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.reply-item {
|
||
margin: 24rpx 0;
|
||
|
||
.reply-user {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 2rpx 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.certification-list {
|
||
margin: 0 auto;
|
||
|
||
.list {
|
||
.icon {
|
||
padding: 10rpx;
|
||
}
|
||
}
|
||
|
||
.item {
|
||
width: 660rpx;
|
||
height: 130rpx;
|
||
margin: 50rpx auto;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #ffffff;
|
||
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 20rpx;
|
||
|
||
.content {
|
||
display: flex;
|
||
|
||
.icon {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
margin-left: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
padding-bottom: 5rpx;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-size: 28rpx;
|
||
color: #681752;
|
||
width: 120rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: row-reverse;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
</style> |