Skip to content

C
cust-app
Commit f0fbca24 authored by 罗林杰's avatar 罗林杰
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents fd99e83e 2b77c5df
Hide whitespace changes
Inline Side-by-side
Showing with 1162 additions and 437 deletions
pages.json
View file @ f0fbca24
......@@ -88,6 +88,18 @@
"navigationBarBackgroundColor": "#F4F5F9",
"navigationStyle": "custom"
}
},
{
"path": "userArticleList",
"style": {
"navigationBarTitleText": "动态列表",
"enablePullDownRefresh": false,
"onReachBottomDistance": 50,
"backgroundColor": "#F4F5F9",
"backgroundColorTop": "#F4F5F9",
"navigationBarBackgroundColor": "#F4F5F9",
"navigationStyle": "custom"
}
}
]
},
......
pages/components/article/Item.vue
View file @ f0fbca24
......@@ -125,8 +125,8 @@
watch: {
info: {
handler(newValue) {
if (newValue?.pictureUrls?.length) {
this.imgs = newValue.pictureUrls
if (newValue?.url?.length) {
this.imgs = newValue.url
}
},
deep: true,
......
pages/components/article/List.vue
View file @ f0fbca24
......@@ -145,8 +145,8 @@
item.memAvatar = item.memAvatar.replace(/\\/g, '/')
}
//处理动态照片
if (item.pictureUrls != null){
item.pictureUrls = item.pictureUrls.replace(/\\/g, '/').split(',')
if (item.url != null){
item.url = item.url.replace(/\\/g, '/').split(',')
}
//处理性别
item.memSex = getValue('sex',item.memSex)
......
pages/tab/article.vue
View file @ f0fbca24
......@@ -71,9 +71,8 @@
],
//当前tab
current: 1,
arr: [],
total: 0,
num: 0,
//登录弹窗
isLoginPop: false
};
},
......
pages/tab/my.vue
View file @ f0fbca24
<template>
<view class="" style="background: #F4F5F9;">
<view style="background: #F4F5F9;">
<!-- 没登录-->
<view class="home-page-container" style="min-height: 100vh;" @touchmove.stop.prevent="() => {}" v-if="nologin==true">
<image class="bgc-imga" :src="baseUrl+'/user/bg-c.png'" mode="aspectFill"></image>
<u-navbar leftText=" " title=" " :bgColor="bgColor" :fixed="false" :safeAreaInsetTop="true"
:placeholder="true">
<view class="noLogin-container" @touchmove.stop.prevent="() => {}" v-if="nologin==true">
<image class="noLogin-background-image" :src="baseUrl+'/user/bg-c.png'" mode="aspectFill"></image>
<u-navbar leftText=" " title=" " bgColor="rgba(255, 255, 255, 0)" :fixed="false" :safeAreaInsetTop="true" :placeholder="true">
<view class="u-nav-slot" slot="left">
<view class="text"> </view>
<view class="texts"> </view>
</view>
<view class="u-nav-slot" slot="center">
<view class="texts"> 我的 </view>
</view>
</u-navbar>
<view class="noimg">
<view class="noLogin-image">
<image :src="baseUrl+'/user/nologin.png'" style="width: 100%;height: 100%;" mode="aspectFill"/>
</view>
<view class="text"> 登录后才能查看我的哦 </view>
<view class="nobutton" @click="login"> 点此登录 </view>
<view class="noLogin-text"> 登录后才能查看我的哦 </view>
<view class="noLogin-button" @click="login"> 点此登录 </view>
</view>
<!-- 已登录-->
<view class="" v-if="nologin == false">
<!-- 顶部 背景-->
<image class="bgc-imga" :src="baseUrl+'/user/my2.png'" mode="aspectFill"/>
<!-- 顶部 第一部分-->
<view class="logion">
<image class="bgc-imgas" :src="baseUrl+'/user/my22.png'" mode="aspectFill"></image>
<view class="sss">
<view class="logo">
<image :src="info.headPortrait" style="width: 100%;height: 100%;border-radius: 50%;"
mode="aspectFill">
</image>
<view class="logola">
<image :src="baseUrl+'/user/myrz.png'" class="cuo" mode="aspectFill"
<view class="Login-container" v-if="nologin == false">
<!-- 顶部-->
<view class="top">
<!-- 顶部背景-->
<image class="top-background" :src="baseUrl+'/user/my22.png'" mode="aspectFill"></image>
<view class="top-content">
<view class="top-avatar">
<!-- 头像-->
<image class="top-avatar-image" :src="info.headPortrait" mode="aspectFill"/>
<view class="top-avatar-label">
<image :src="baseUrl+'/user/myrz.png'" class="label-image" mode="aspectFill"
v-if="info.waitApprovedStatus == 'EXAMINE' || info.waitApprovedStatus=='REFUSE'"/>
<image :src="baseUrl+'/user/yrz.png'" class="cuo" mode="aspectFill" v-else/>
<view class="shenhe">
<image :src="baseUrl+'/user/yrz.png'" class="label-image" mode="aspectFill" v-else/>
<view class="label-title">
{{ info.waitApprovedStatus == 'EXAMINE' ?
"审核中": info.waitApprovedStatus == 'PASS' ?
"已认证": info.waitApprovedStatus == 'REFUSE' ?
......@@ -46,38 +43,32 @@
</view>
</view>
</view>
<view class="names">
<text v-if="info.nickName">{{info.nickName}}</text><text v-else>0</text>
<view class="top-name">
<text v-if="info.nickName">{{info.nickName}}</text>
<text v-else>0</text>
</view>
<view class="div">
<view class="diving" @click="gotolike(1,info.ilike)">
<view class="divtast">
<view class="top-tabs">
<view class="tab-1" @click="gotolike(1,info.ilike)">
<view class="tab-1-num">
<text v-if="info.ilike">{{info.ilike}}</text><text v-else>0</text>
</view>
<view class="divingname">
<view class="tab-1-text">
我喜欢的
</view>
</view>
<view class="diving" style="margin: 0 136rpx;" @click="gotolike(2,info.likeMe)">
<!-- <view class="divtast" v-if="info.likeMe==0">-->
<view class="divtast">
<view class="tab-2" style="margin: 0 136rpx;" @click="gotolike(2,info.likeMe)">
<view class="tab-2-num">
<text v-if="info.likeMe">{{info.likeMe}}</text><text v-else>0</text>
</view>
<!-- <view class="vimg" v-else>-->
<!-- <image :src="info.likeMeheadPortrait" class="simg" mode="aspectFill"></image>-->
<!-- </view>-->
<view class="divingname">
<view class="tab-2-text">
喜欢我的
</view>
</view>
<view class="diving" @click="gotolike(3,info.lovers)">
<view class="divtast">
<view class="tab-3" @click="gotolike(3,info.lovers)">
<view class="tab-3-num">
<text v-if="info.lovers">{{info.lovers}}</text><text v-else>0</text>
</view>
<view class="divingname">
<view class="tab-3-text">
互相喜欢
</view>
</view>
......@@ -85,30 +76,30 @@
</view>
</view>
<!-- 认证 第二部分-->
<view class="box">
<view class="boxsing" style="height: 52rpx;">
<view class="boxsname" style="margin-left: 42rpx;">
<!-- 认证 第一部分-->
<view class="content-1">
<view class="double-auth">
<view class="double-auth-title" style="margin-left: 42rpx;">
双重认证
</view>
<view class="boxsnames" style="width: 88rpx;margin-left: 0rpx;">
<view class="double-auth-text" style="width: 88rpx;margin-left: 0rpx;">
（{{numtwo}}/2）
</view>
<view class="boxsnames" style="margin-left: 0rpx;">
<view class="double-auth-text" style="margin-left: 0rpx;">
配对成功率提升200%
</view>
<view class="boxsbutton" @click="gotomation">
<view class="double-auth-button" @click="gotomation">
立即认证
</view>
</view>
<view class="boxsing" style="height: 52rpx;">
<view class="boxsname" style="margin-left: 42rpx;">
<view class="personal-data">
<view class="personal-data-title">
个人资料
</view>
<view class="boxsnames">
<view class="personal-data-desc">
资料完善80%以上双倍曝光
</view>
<view class="boxsbutton" @click="updateInformation">
<view class="personal-data-button" @click="updateInformation">
立即完善
</view>
</view>
......@@ -116,26 +107,30 @@
</view>
</view>
<!-- 动态 第三部分-->
<view class="box" @click="goCommunity" v-if="(info.userArticleViewResponse.articleImg !== null && info.userArticleViewResponse.articleImg.length) || info.userArticleViewResponse.articleContent !== null">
<view class="boxsing">
<image :src="baseUrl+'/user/106.svg'" style="width: 42rpx;height: 42rpx;margin-left: 42rpx;;"
mode="aspectFill">
</image>
<view class="boxsname">
我的动态
</view>
<!-- 动态 第二部分-->
<view class="content-2" @click="goCommunity" v-if="(info.articleInfo.articleImg !== null && info.articleInfo.articleImg.length) || info.articleInfo.articleContent !== null">
<view class="my-article">
<view class="my-article-title">
<image class="title-image" :src="baseUrl+'/user/106.svg'" mode="aspectFill"/>
<view class="title-text">
我的动态
</view>
</view>
<view class="my-article-more" @click="gotomore">
查看更多
<u-icon name="arrow-right" size="13" bold="true"></u-icon>
</view>
</view>
<view class="strs" v-if="info.userArticleViewResponse.articleContent !== null">
{{info.userArticleViewResponse.articleContent}}
<view class="my-article-content" v-if="info.articleInfo.articleContent !== null">
{{info.articleInfo.articleContent}}
</view>
<view :class="['imgs',info.userArticleViewResponse.articleImg.length == 2 ? 'twoTemp':'']" v-if="info.userArticleViewResponse.articleImg !== null && info.userArticleViewResponse.articleImg.length">
<image v-for="item in info.userArticleViewResponse.articleImg" :src="item" mode="aspectFill"></image>
<view :class="['my-article-image-1',info.articleInfo.articleImg.length == 2 ? 'my-article-image-2':'']" v-if="info.articleInfo.articleImg !== null && info.articleInfo.articleImg.length">
<image v-for="item in info.articleInfo.articleImg" :src="item" mode="aspectFill"></image>
</view>
</view>
<!-- 操作项 第四部分-->
<view class="box" style="">
<!-- 操作项 第三部分-->
<view class="content-3">
<view class="box-bottom" v-for="(item,index) in button" :key="index" @click="whether(index)">
<view class="box-bottom-left">
<image :src="item.img" class="box-bottom-img" mode="aspectFill"></image>
......@@ -199,8 +194,6 @@ import {setUserProfile} from '../../api/login/index'
nologin: '',//登录标志
userInfo:{},//用户信息
token:'',//token
img: this.$BASE_URL,
bgColor: "rgba(255, 255, 255, 0)",
button: [
{
name: "金币",
......@@ -224,16 +217,17 @@ import {setUserProfile} from '../../api/login/index'
img: this.$store.state.imgUrl+'/user/myset.png',
}],
info: {
headPortrait:'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
headPortrait:'http://192.168.1.7/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
nickName:'11111',
ilike:'6',
likeMe:'7',
lovers:'8',
goldBalance:0,
userArticleViewResponse:{
waitApprovedStatus:'PASS',
articleInfo:{
articleImg:[
'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg'
'http://192.168.1.7/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
'http://192.168.1.7/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg'
],
articleContent:'将昨天的快乐在今天发出去，就是双倍快乐！'
}
......@@ -262,6 +256,12 @@ import {setUserProfile} from '../../api/login/index'
}
},
methods: {
//查看更多动态
gotomore(){
uni.navigateTo({
url: '/pagesUser/userArticleList?userId='+this.userInfo.businessId +'&type=my'
});
},
//获取用户信息
getUserInfo() {
try {
......@@ -363,354 +363,444 @@ import {setUserProfile} from '../../api/login/index'
</script>
<style lang="scss" scoped>
.logion {
width: 100%;
height: 750rpx;
position: relative;
}
.twoTemp{
&:after{
width: calc(33% - 10rpx);
content: '';
}
image{
&:last-child{
margin-left: 10rpx;
}
}
}
.imgs{
display: flex;
justify-content: space-between;
padding: 30rpx 42rpx;
image{
width: calc(33% - 10rpx);
height: 198rpx;
border-radius: 12rpx;
}
}
.strs{
padding: 30rpx 42rpx;
font-size: 28rpx;
color: #333333;
}
.box-bottom-text-la {
font-size: 36rpx;
font-family: 'PingFang SC-Heavy, PingFang SC';
font-weight: 400;
color: #5B83E8;
line-height: 36rpx;
margin-left: 20rpx;
}
.box-bottom-right-img {
width: 11rpx;
height: 20rpx;
margin: 0 38rpx 0 14rpx;
}
.box-bottom-right-name {
font-size: 28rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #B7B7B7;
line-height: 28rpx;
}
.box-bottom-right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.box-bottom-text {
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 28rpx;
margin-left: 24rpx;
}
.box-bottom-img {
height: 36rpx;
width: 36rpx;
margin-left: 42rpx;
}
.box-bottom-left {
display: flex;
align-items: center;
}
.box-bottom {
width: 100%;
height: 36rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 66rpx;
}
.box-bottom:first-child {
padding-top: 30rpx;
}
.box-bottom:last-child {
padding-bottom: 40rpx;
}
.boxsbutton {
width: 152rpx;
height: 52rpx;
background: #E7EDFC;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #446CD2;
line-height: 52rpx;
margin-left: auto;
border-radius: 33rpx;
margin-right: 42rpx;
}
.boxsnames {
height: 34rpx;
font-size: 24rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
line-height: 34rpx;
margin-left: 18rpx;
color: rgba(45, 49, 50, 0.9);
}
.boxsname {
height: 40rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 40rpx;
margin-left: 14rpx;
}
.boxsing {
display: flex;
align-items: center;
height: 42rpx;
padding-top: 42rpx;
}
.box {
width: 686rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin: 0 auto;
margin-top: 32rpx;
position: relative;
}
.divingname {
width: 96rpx;
height: 24rpx;
font-size: 24rpx;
font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
font-weight: 400;
color: #B1B4C5;
line-height: 24rpx;
}
.simg {
width: 100%;
height: 100%;
border-radius: 50%;
filter: blur(4rpx);
transform: translate3d(0, 0, 0);
}
.vimg {
border: 5rpx solid #CCD9EF;
width: 96rpx;
height: 96rpx;
margin-top: 30rpx;
border-radius: 50%;
box-sizing: border-box;
}
.divtast {
width: 96rpx;
height: 96rpx;
margin-top: 30rpx;
display: flex;
font-size: 40rpx;
font-family: 'Arial-Regular, Arial';
font-weight: 400;
color: #000000;
line-height: 40rpx;
justify-content: center;
align-items: center;
}
.diving {
width: 102rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.div {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 50rpx;
}
.sss {
position: absolute;
width: 100%;
height: 100%;
left: 0rpx;
}
.names {
width: 100%;
text-align: center;
height: 44rpx;
font-size: 32rpx;
// font-weight: bold;
// font-family: 'PingFang SC-Bold, PingFang SC';
font-family: 'Arial-Regular, Arial';
font-weight: 600;
color: #333333;
line-height: 44rpx;
margin-top: 28rpx;
}
.shenhe {
height: 28rpx;
font-size: 20rpx;
font-family: 'PingFang SC-Bold, PingFang SC';
font-weight: bold;
color: #86A6F3;
margin-left: 8rpx;
line-height: 28rpx;
}
.cuo {
width: 20rpx;
height: 20rpx;
}
.logo {
width: 184rpx;
height: 184rpx;
border: 6rpx solid #CCD9EF;
margin: 0 auto;
border-radius: 50%;
margin-top: 186rpx;
position: relative;
.logola {
width: 126rpx;
height: 36rpx;
background: rgba(222, 231, 252, 1);
border-radius: 23rpx;
border: 2rpx solid #86A6F3;
position: absolute;
left: 30rpx;
bottom: -18rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
.texts {
height: 50rpx;
font-size: 32rpx;
font-family: 'PingFang SC-Bold, PingFang SC';
// font-weight: bold;
color: #000000;
line-height: 50rpx;
}
.nobutton {
width: 392rpx;
height: 84rpx;
background: linear-gradient(86deg, #C2D2F9 0%, #C5C2F3 100%);
border-radius: 42rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
margin: 0 auto;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #415C9E;
margin-top: 40rpx;
}
.text {
width: 100%;
height: 44rpx;
font-size: 32rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #C9C9D0;
line-height: 44rpx;
text-align: center;
margin-top: 104rpx;
}
.noimg {
width: 338rpx;
height: 338rpx;
margin: 0 auto;
padding-top: 200rpx;
}
page {
height: 100%;
background: linear-gradient(180deg, #F4F5F9 0%, #F4F5F9 100%);
}
.bgc-img {
position: absolute;
top: -80rpx;
left: 40rpx;
width: 670rpx;
pointer-events: none;
height: 100%;
}
.noLogin-container{
min-height: 100vh;
.noLogin-background-image{
position: absolute;
top: -100rpx;
left: 0rpx;
width: 100%;
height: 100%;
pointer-events: none;
}
.u-nav-slot{
.texts {
height: 50rpx;
font-size: 32rpx;
font-family: 'PingFang SC-Bold, PingFang SC';
color: #000000;
line-height: 50rpx;
}
}
.noLogin-image{
width: 338rpx;
height: 338rpx;
margin: 0 auto;
padding-top: 200rpx;
}
.noLogin-text{
width: 100%;
height: 44rpx;
font-size: 32rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #C9C9D0;
line-height: 44rpx;
text-align: center;
margin-top: 104rpx;
}
.noLogin-button{
width: 392rpx;
height: 84rpx;
background: linear-gradient(86deg, #C2D2F9 0%, #C5C2F3 100%);
border-radius: 42rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
margin: 0 auto;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #415C9E;
margin-top: 40rpx;
}
}
.bgc-imga {
position: absolute;
top: -100rpx;
left: 0rpx;
width: 100%;
height: 100%;
pointer-events: none;
}
.Login-container{
.top {
width: 100%;
height: 750rpx;
position: relative;
.top-background{
position: absolute;
top: 0rpx;
left: 0rpx;
width: 100%;
height: 100%;
}
.top-content{
position: absolute;
width: 100%;
height: 100%;
left: 0rpx;
.top-avatar {
width: 184rpx;
height: 184rpx;
border: 6rpx solid #CCD9EF;
margin: 0 auto;
border-radius: 50%;
margin-top: 186rpx;
position: relative;
.top-avatar-image{
width: 100%;
height: 100%;
border-radius: 50%;
}
.top-avatar-label {
width: 126rpx;
height: 36rpx;
background: rgba(222, 231, 252, 1);
border-radius: 23rpx;
border: 2rpx solid #86A6F3;
position: absolute;
left: 30rpx;
bottom: -18rpx;
display: flex;
align-items: center;
justify-content: center;
.label-image{
width: 20rpx;
height: 20rpx;
}
.label-title {
height: 28rpx;
font-size: 20rpx;
font-family: 'PingFang SC-Bold, PingFang SC';
font-weight: bold;
color: #86A6F3;
margin-left: 8rpx;
line-height: 28rpx;
}
}
}
.top-name{
width: 100%;
text-align: center;
height: 44rpx;
font-size: 32rpx;
font-family: 'Arial-Regular, Arial';
font-weight: 600;
color: #333333;
line-height: 44rpx;
margin-top: 28rpx;
}
.top-tabs{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 50rpx;
.tab-1{
width: 102rpx;
display: flex;
flex-direction: column;
justify-content: center;
.tab-1-num{
width: 96rpx;
height: 96rpx;
margin-top: 30rpx;
display: flex;
font-size: 40rpx;
font-family: 'Arial-Regular, Arial';
font-weight: 400;
color: #000000;
line-height: 40rpx;
justify-content: center;
align-items: center;
}
.tab-1-text{
width: 96rpx;
height: 24rpx;
font-size: 24rpx;
font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
font-weight: 400;
color: #B1B4C5;
line-height: 24rpx;
}
}
.tab-2{
width: 102rpx;
display: flex;
flex-direction: column;
justify-content: center;
.tab-2-num{
width: 96rpx;
height: 96rpx;
margin-top: 30rpx;
display: flex;
font-size: 40rpx;
font-family: 'Arial-Regular, Arial';
font-weight: 400;
color: #000000;
line-height: 40rpx;
justify-content: center;
align-items: center;
}
.tab-2-text{
width: 96rpx;
height: 24rpx;
font-size: 24rpx;
font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
font-weight: 400;
color: #B1B4C5;
line-height: 24rpx;
}
}
.tab-3{
width: 102rpx;
display: flex;
flex-direction: column;
justify-content: center;
.tab-3-num{
width: 96rpx;
height: 96rpx;
margin-top: 30rpx;
display: flex;
font-size: 40rpx;
font-family: 'Arial-Regular, Arial';
font-weight: 400;
color: #000000;
line-height: 40rpx;
justify-content: center;
align-items: center;
}
.tab-3-text{
width: 96rpx;
height: 24rpx;
font-size: 24rpx;
font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
font-weight: 400;
color: #B1B4C5;
line-height: 24rpx;
}
}
}
}
}
.content-1{
width: 686rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin: 0 auto;
margin-top: 32rpx;
position: relative;
.double-auth{
display: flex;
align-items: center;
height: 52rpx;
padding-top: 42rpx;
.double-auth-title{
height: 40rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 40rpx;
margin-left: 42rpx;
}
.double-auth-text{
height: 34rpx;
font-size: 24rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
line-height: 34rpx;
margin-left: 18rpx;
color: rgba(45, 49, 50, 0.9);
}
.double-auth-button{
width: 152rpx;
height: 52rpx;
background: #E7EDFC;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #446CD2;
line-height: 52rpx;
margin-left: auto;
border-radius: 33rpx;
margin-right: 42rpx;
}
}
.personal-data{
display: flex;
align-items: center;
padding-top: 42rpx;
height: 52rpx;
.personal-data-title{
height: 40rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 40rpx;
margin-left: 42rpx;
}
.personal-data-desc{
height: 34rpx;
font-size: 24rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
line-height: 34rpx;
margin-left: 18rpx;
color: rgba(45, 49, 50, 0.9);
}
.personal-data-button{
width: 152rpx;
height: 52rpx;
background: #E7EDFC;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #446CD2;
line-height: 52rpx;
margin-left: auto;
border-radius: 33rpx;
margin-right: 42rpx;
}
}
}
.content-2{
width: 686rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin: 0 auto;
margin-top: 32rpx;
position: relative;
.my-article {
display: flex;
justify-content: space-between;
align-items: center;
height: 42rpx;
padding-top: 42rpx;
.my-article-title{
display: flex;
.title-image{
width: 42rpx;
height: 42rpx;
margin-left: 42rpx;
}
.title-text{
height: 40rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 40rpx;
margin-left: 14rpx;
}
}
.my-article-more{
display: flex;
height: 40rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 40rpx;
margin-right: 42rpx;
}
}
.my-article-content{
padding: 30rpx 42rpx;
font-size: 28rpx;
color: #333333;
}
.my-article-image-1{
display: flex;
justify-content: space-between;
padding: 30rpx 42rpx;
image{
width: calc(33% - 10rpx);
height: 198rpx;
border-radius: 12rpx;
}
}
.my-article-image-2{
&:after{
width: calc(33% - 10rpx);
content: '';
}
image{
&:last-child{
margin-left: 10rpx;
}
}
}
}
.content-3{
width: 686rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin: 0 auto;
margin-top: 32rpx;
position: relative;
.box-bottom {
width: 100%;
height: 36rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 66rpx;
.box-bottom-left {
display: flex;
align-items: center;
.box-bottom-img {
height: 36rpx;
width: 36rpx;
margin-left: 42rpx;
}
.box-bottom-text {
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 28rpx;
margin-left: 24rpx;
}
.box-bottom-text-la {
font-size: 36rpx;
font-family: 'PingFang SC-Heavy, PingFang SC';
font-weight: 400;
color: #5B83E8;
line-height: 36rpx;
margin-left: 20rpx;
}
}
.box-bottom-right {
display: flex;
align-items: center;
justify-content: flex-end;
.box-bottom-right-img {
width: 11rpx;
height: 20rpx;
margin: 0 38rpx 0 14rpx;
}
.box-bottom-right-name {
font-size: 28rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #B7B7B7;
line-height: 28rpx;
}
}
}
.box-bottom:first-child {
padding-top: 30rpx;
}
.box-bottom:last-child {
padding-bottom: 40rpx;
}
}
}
.bgc-imgas {
position: absolute;
top: 0rpx;
left: 0rpx;
width: 100%;
height: 100%;
}
.popup-container {
height: 562rpx;
width: 544rpx;
......
pagesUser/component/Item.vue 0 → 100644
View file @ f0fbca24
<template>
<view :class="{item:true,bor:true}">
<view class="left">
<view class="l" v-if="info.headPortrait == ''">
<view class="box">
<view class="day">
{{info.createDate.substring(8,10)*1}}
</view>
<view class="str">
/
</view>
<view class="month">
{{info.createDate.substring(5,7)*1}}月
</view>
</view>
<view class="line">
</view>
</view>
<image v-else @click="gotoUserInfo(info)" :src="info.memAvatar" mode="aspectFill"></image>
</view>
<view class="center">
<template>
<view class="name">
<text @click="gotoUserInfo(info)">{{info.memNickName}}</text>
<image v-if="info.memSex != '男'" class="gender" :src="baseUrl+'/user/famale.png'" mode="">
</image>
<image v-else class="gender" :src="baseUrl+'/user/male.png'" mode=""></image>
</view>
<view class="info">
<text decode="true" style="color: #434343;">
{{info.memAge}}·{{info.city}}·{{info.memMaxEducation}}·{{info.memCareer}}
</text>
</view>
</template>
<view class="content">
<template v-if="info.content">
<u-read-more ref="uReadMore" :toggle="true" color="#415C9E"
:textIndent="0" showHeight="126rpx">
<view @click="gotoDetail(info)" style="font-size: 28rpx;color: #333333;">
<view class="" style="line-height: 1.5;">
{{info.content}}
</view>
</view>
</u-read-more>
</template>
</view>
<view class="contentImg">
<imageAdaptation :imgList="imgs" :imgLayout1="imgLayout1" :imgLayout2="imgLayout2"
:imgLayout3="imgLayout3" @previewImg="preview"></imageAdaptation>
<q-previewImage ref="previewImage" :urls="imgs" @onLongpress="onLongpress" @open="open"
@close="close"></q-previewImage>
</view>
<view class="time">
{{info.createDate}}
</view>
<view class="btns">
<view class="btn">
<!-- <u-button -->
<!-- open-type="share" -->
<!-- @click="select" -->
<!-- :customStyle="{-->
<!-- background: none,-->
<!-- color: inherit,-->
<!-- border: 0,-->
<!-- padding: 0,-->
<!-- font: inherit,-->
<!-- cursor: pointer,-->
<!-- outline: inherit,-->
<!-- height:'40rpx'}">-->
<!-- <image src="../../static/images/103.png" mode=""></image>-->
<!-- <text>分享</text>-->
<!-- </u-button>-->
</view>
<view class="btn" @click="gotoDetail(info)">
<image :src="baseUrl+'/article/104.png'" mode=""></image>
<text>{{info.commentCount}}</text>
</view>
<view class="btn" @click="praise(info)">
<image v-if="info.isLike == '0'" :src="baseUrl+'/article/105.png'" mode=""></image>
<image v-else :src="baseUrl+'/article/105-no.png'" mode=""></image>
<text>{{info.likeCount}}</text>
</view>
</view>
</view>
<view class="right">
<!-- 右上角的三个点-->
<view v-if="info.isDelete" @click="showSelect(info)">
<text></text>
<text></text>
<text></text>
</view>
</view>
<!-- 右上角三个点的选项-->
<u-action-sheet :actions="list" :closeOnClickOverlay="true" :safeAreaInsetBottom="true" cancelText="取消"
@select="selectClick" @close="show = false" :show="show"></u-action-sheet>
<!-- 登录弹窗-->
<login @change="getToLogin" :isLoginPop="isLoginPop" class="my-select"></login>
</view>
</template>
<script>
import imageAdaptation from '@/components/images-adaptation/imageAdaptation.vue'
import xzjReadMore from "@/components/xzj-readMore/xzj-readMore.vue"
export default {
name:'ArticleItem',
options: {
styleIsolation: 'shared'
},
components: {
imageAdaptation,
xzjReadMore
},
props: {
info: {
type: Object,
default: () => {}
}
},
watch: {
info: {
handler(newValue) {
if (newValue?.url?.length) {
this.imgs = newValue.url
}
},
deep: true,
immediate: true
}
},
mounted() {
if (this.$refs.uReadMore) {
setTimeout(() => {
this.$nextTick(() => {
this.$refs.uReadMore.init();
})
}, 100)
}
},
data() {
return {
//登录弹窗
isLoginPop: false,
//图片路径
baseUrl: this.$store.state.imgUrl,
imgs: [],
imgLayout1: [450, 450],
imgLayout2: [220, 220],
imgLayout3: [160, 160],
show: false,
//右上角三个点的操作项
list: [{
name: '删除',
},
// {
// name: "举报"
// }
],
}
},
methods: {
load() {
this.$refs.uReadMore.init();
},
//查看动态详情
gotoDetail(item) {
uni.navigateTo({
url: '/pagesArticle/articleDetail?userId=' + item.userId
})
},
//查看用户详情
gotoUserInfo(item) {
uni.navigateTo({
url: '/pagesUser/userInfo?id=' + item.userId
})
},
// 点赞
praise(item) {
const token = uni.getStorageSync('token')
//校验token 如果没有token，跳到登录页进行登录
if (token && token !== '' && token != null){
//已登录
//0：取消点赞/未点赞 1：点赞
item.isLike = item.isLike == '0' ? '1' : '0'
this.$emit('praise', item)
} else {
//未登录
this.isLoginPop = true
}
},
//登录弹窗
getToLogin(e) {
if (e == 0) {
//取消登录
this.isLoginPop = false;
} else {
this.isLoginPop = false;
//立即登录
uni.navigateTo({
url: '/pageslogin/index'
})
}
},
// 删除
selectClick(item) {
},
//
preview({
url,
index
}) {
uni.previewImage({
current: index,
urls: this.imgs,
longPressActions: {
// itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
},
onLongpress(e) { //长按事件
console.log('当前长按的图片是' + e);
uni.showActionSheet({
itemList: ['转发给朋友', '保存到手机'],
success: function(res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
},
fail: function(res) {
console.log(res.errMsg);
}
});
},
/* open和close方法一般用不到，但是在一些特殊场景会用到，
* 比如预览图片时你需要覆盖 NavigationBar和 TabBar，
* 或者在app中需要预览图片时覆盖住原生组件，比如video或者map等，
* 你可以根据open和close去做一些操作，例如隐藏导航栏或者隐藏一些原生组件等
*/
open() { //监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件）
uni.hideTabBar()
uni.setNavigationBarColor({
frontColor: '#000000', // 设置前景色为黑色
backgroundColor: '#000000', // 设置背景色为黑色
})
this.$emit("open")
},
close() { //监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件）
uni.showTabBar()
uni.setNavigationBarColor({
frontColor: '#ffffff', // 设置前景色为白色
backgroundColor: '#000000', // 设置背景色为黑色
})
this.$emit("close")
},
showSelect(info) {
if (info.isDelete != true) {
const index = this.list.findIndex(i => i.name === '删除');
if (index !== -1) {
this.list.splice(index, 1);
}
}
this.show = true;
}
}
}
</script>
<style lang="scss" scoped>
.bor {
border-top: 2rpx solid #F5F5F5;
}
.item {
display: flex;
justify-content: space-between;
padding: 40rpx 0 0rpx 0;
margin-left: 32rpx;
margin-right: 32rpx;
.left {
image {
width: 68rpx;
height: 68rpx;
border-radius: 50%;
}
.l {
height: 100%;
margin-right: 10rpx;
.box {
font-weight: 600;
font-size: 24rpx;
color: #111827;
.str {
font-size: 30rpx;
}
.month {
font-size: 20rpx;
}
}
}
.line {
margin-left: 10rpx;
width: 0;
height: calc(100% - 80rpx);
border: 1rpx solid #E6E6E6;
margin-top: 20rpx;
}
}
.center {
margin: 0 20rpx;
flex: 1;
.name {
text {
font-weight: 600;
font-size: 32rpx;
color: #333333;
}
.gender {
width: 36rpx;
height: 36rpx;
margin-left: 16rpx;
vertical-align: middle;
}
}
.info {
font-weight: 400;
font-size: 24rpx;
color: #434343;
margin: 12rpx 0 24rpx 0;
}
.content {
font-weight: 400;
font-size: 28rpx;
color: #333333;
margin-bottom: 16rpx;
::v-deep .u-read-more__toggle {
justify-content: flex-end !important;
}
}
.contentImg {
}
.time {
font-weight: 400;
font-size: 24rpx;
color: #939393;
margin: 22rpx 0 34rpx 0;
}
.btns {
display: flex;
justify-content: space-between;
.btn {
image {
width: 28rpx;
height: 28rpx;
margin-right: 8rpx;
vertical-align: middle;
}
text {
font-weight: 400;
font-size: 24rpx;
color: #434343;
}
}
}
}
.right {
view {
display: flex;
height: 30rpx;
padding-top: 14rpx;
text {
width: 8rpx;
height: 8rpx;
background-color: #333;
border-radius: 50%;
margin-right: 6rpx;
}
}
}
}
</style>
pagesUser/userArticleList.vue 0 → 100644
View file @ f0fbca24
<template>
<view>
<u-navbar @leftClick="backbar" bgColor="#F4F5F9" :title="title"> </u-navbar>
<!-- z-paging是一个分页组件-->
<view :style="{'top':navHeight+'px','height': '100vh','position': 'relative'}">
<z-paging ref="paging" empty-view-text="迈出第一步才有更多故事发生哦"
:empty-view-title-style="{
'font-size': '32rpx',
'color': '#C9C9D0',
'position': 'absolute',
'width': '100vw',
}" :empty-view-img="baseUrl+'/common/empty.png'" :empty-view-img-style="{
'position': 'absolute',
'top': '210rpx',
'width': '447rpx',
'height': '375rpx'
}" v-model="dataList" @query="queryList" :fixed="false">
<view v-for="(item,index) in dataList" :key="item.id">
<ItemVue :info="item" @praise="praise"/>
</view>
</z-paging>
</view>
</view>
</template>
<script>
import ItemVue from './component/Item.vue';
import empty from '@/components/empty.vue';
import {topicList} from "../api/topic";
import {articleList, like} from "../api/article";
import {getCity, getValue} from "../common/options";
import {calculateAge, parseDate} from "../common";
export default {
name:'ArticleList',
components: {
ItemVue,
empty
},
data() {
return {
//登录弹窗
isLoginPop:'',
//话题id
topicId: 0,
//当前的tab
current: 0,
//话题列表
topicList:[],
//图片路径
baseUrl: this.$store.state.imgUrl,
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
dataList: [],
menuButtonInfo:'',
navHeight:'',
type:'',
title:''
}
},
props: {
},
watch: {
},
onLoad(options){
this.userId = options.userId
this.type = options.type
if (this.type === 'else'){
this.title = '他的动态'
} else if(this.type === 'my'){
this.title = '我的动态'
}else {
this.title = '动态列表'
}
//导航栏高度
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const {
top,
width,
height,
right
} = this.menuButtonInfo
uni.getSystemInfo({
success: (res) => {
const {
statusBarHeight
} = res;
const margin = top - statusBarHeight
this.navHeight = (height + statusBarHeight + (margin * 2)) //导航栏总高
}
})
},
methods: {
//返回
backbar() {
uni.navigateBack({
delta: 1, //返回层数，2则上上页
})
},
// 接收父组件传过来的刷新列表要求
reload() {
this.$nextTick(() => {
// 刷新列表数据(如果不希望列表pageNo被重置可以用refresh代替reload方法)
this.$refs.paging && this.$refs.paging.reload();
})
},
//分页查询方法
queryList(pageNo, pageSize) {
// const userId = uni.getStorageSync('userInfo').businessId
const params = {
page:pageNo,
rows:pageSize,
userId: this.userId
}
articleList(params).then( res =>{
const list = res.data.data
list.forEach(item => {
//处理头像
if (item.memAvatar != null){
item.memAvatar = item.memAvatar.replace(/\\/g, '/')
}
//处理动态照片
if (item.url != null){
item.url = item.url.replace(/\\/g, '/').split(',')
}
//处理性别
item.memSex = getValue('sex',item.memSex)
//通过生日计算年龄
const dataItem = parseDate(item.memBirthday)
item.memAge = calculateAge(dataItem.year,dataItem.month,dataItem.day)
//处理地址
item.city = getCity(item.memResidenceProvince,item.memResidenceCity)
//处理教育经历
item.memMaxEducation = getValue('education',item.memMaxEducation)
})
this.$refs.paging.complete(list);
})
},
// 点赞
praise(item) {
var type = ''
if (item.isLike == '0') {
//取消点赞
type = 'cancel'
item.likeCount -= 1
} else {
//点赞
type = 'praise'
item.likeCount += 1
}
const params = {
id: item.businessId,
praiseType: type
}
like(params).then( res => {
let idx = this.dataList.findIndex(obj => obj.businessId == item.businessId)
this.dataList.splice(idx, 1, item)
})
},
}
}
</script>
<style scoped>
.content {
height: 100vh;
}
</style>
pagesUser/userInfo.vue
View file @ f0fbca24
......@@ -101,11 +101,17 @@
<view class="card" style="height: auto;"
v-if="(userData.articleImg !== null && userData.articleImg.length) || userData.articleContent !== null">
<view class="content">
<view class="have_image">
<image :src="baseUrl+'/user/106.svg'" mode="aspectFill"/>
<view class="title" style="font-family: SC-Bold;">
我的动态
</view>
<view class="have_image_two">
<view class="have_image_title">
<image :src="baseUrl+'/user/106.svg'" mode="aspectFill"/>
<view class="title" style="font-family: SC-Bold;">
我的动态
</view>
</view>
<view class="boxsname2" @click="gotomore">
查看更多
<u-icon name="arrow-right" size="13" bold="true"></u-icon>
</view>
</view>
<view class="strs" v-if="userData.articleContent !== null">
{{userData.articleContent}}
......@@ -246,6 +252,7 @@
data: [],
count: 0,
userId: '',
memId:'',
city: (uni.getStorageSync('itemobj').city != null && uni.getStorageSync('itemobj').city != undefined) ? uni
.getStorageSync('itemobj').city : "中国",
share: false,
......@@ -254,7 +261,7 @@
};
},
onLoad(options) {
this.userId = options.id;
this.memId = options.id;
this.getUserDetail();
if (options.share != null) {
this.share = options.share;
......@@ -326,10 +333,17 @@
_this.flag = true;
},
methods: {
//查看更多动态
gotomore(){
uni.navigateTo({
url: '/pagesUser/userArticleList?userId='+this.userId +'&type=else'
});
},
//获取用户详情
getUserDetail(){
userDetail(this.userId).then(res => {
userDetail(this.memId).then(res => {
this.userData = res.data.data
this.userId = this.userData.userId
//处理头像
this.imgList.push(res.data.data.avatarUrl.replace(/\\/g, '/'))
//处理星座
......@@ -671,6 +685,37 @@
}
}
.have_image_two {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
font-weight: bold;
.have_image_title{
display: flex;
align-items: center;
}
image {
width: 28rpx;
height: 28rpx;
}
.title {
padding-left: 12rpx;
}
.boxsname2{
display: flex;
height: 40rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 40rpx;
margin-right: 42rpx;
}
}
.one {
font-size: 28rpx;
margin-top: 26rpx;
......
pagesUser/userList.vue
View file @ f0fbca24
......@@ -83,7 +83,7 @@ export default {
//跳转用户详情
gotoDetail(item){
uni.navigateTo({
url: '/pagesUser/userInfo?id='+item.businessId
url: '/pagesUser/userInfo?id='+item.userId
})
},
getUserList() {
......
pageslogin/index.vue
View file @ f0fbca24
......@@ -160,7 +160,7 @@
};
</script>
<style lang="scss">
<style lang="scss" scoped>
page {
height: 100%;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment