Commit f0fbca24 authored by 罗林杰's avatar 罗林杰

Merge remote-tracking branch 'origin/master'

parents fd99e83e 2b77c5df
...@@ -88,6 +88,18 @@ ...@@ -88,6 +88,18 @@
"navigationBarBackgroundColor": "#F4F5F9", "navigationBarBackgroundColor": "#F4F5F9",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
},
{
"path": "userArticleList",
"style": {
"navigationBarTitleText": "动态列表",
"enablePullDownRefresh": false,
"onReachBottomDistance": 50,
"backgroundColor": "#F4F5F9",
"backgroundColorTop": "#F4F5F9",
"navigationBarBackgroundColor": "#F4F5F9",
"navigationStyle": "custom"
}
} }
] ]
}, },
......
...@@ -125,8 +125,8 @@ ...@@ -125,8 +125,8 @@
watch: { watch: {
info: { info: {
handler(newValue) { handler(newValue) {
if (newValue?.pictureUrls?.length) { if (newValue?.url?.length) {
this.imgs = newValue.pictureUrls this.imgs = newValue.url
} }
}, },
deep: true, deep: true,
......
...@@ -145,8 +145,8 @@ ...@@ -145,8 +145,8 @@
item.memAvatar = item.memAvatar.replace(/\\/g, '/') item.memAvatar = item.memAvatar.replace(/\\/g, '/')
} }
//处理动态照片 //处理动态照片
if (item.pictureUrls != null){ if (item.url != null){
item.pictureUrls = item.pictureUrls.replace(/\\/g, '/').split(',') item.url = item.url.replace(/\\/g, '/').split(',')
} }
//处理性别 //处理性别
item.memSex = getValue('sex',item.memSex) item.memSex = getValue('sex',item.memSex)
......
...@@ -71,9 +71,8 @@ ...@@ -71,9 +71,8 @@
], ],
//当前tab //当前tab
current: 1, current: 1,
arr: [],
total: 0,
num: 0, num: 0,
//登录弹窗
isLoginPop: false isLoginPop: false
}; };
}, },
......
This diff is collapsed.
<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>
<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>
...@@ -101,11 +101,17 @@ ...@@ -101,11 +101,17 @@
<view class="card" style="height: auto;" <view class="card" style="height: auto;"
v-if="(userData.articleImg !== null && userData.articleImg.length) || userData.articleContent !== null"> v-if="(userData.articleImg !== null && userData.articleImg.length) || userData.articleContent !== null">
<view class="content"> <view class="content">
<view class="have_image"> <view class="have_image_two">
<image :src="baseUrl+'/user/106.svg'" mode="aspectFill"/> <view class="have_image_title">
<view class="title" style="font-family: SC-Bold;"> <image :src="baseUrl+'/user/106.svg'" mode="aspectFill"/>
我的动态 <view class="title" style="font-family: SC-Bold;">
</view> 我的动态
</view>
</view>
<view class="boxsname2" @click="gotomore">
查看更多
<u-icon name="arrow-right" size="13" bold="true"></u-icon>
</view>
</view> </view>
<view class="strs" v-if="userData.articleContent !== null"> <view class="strs" v-if="userData.articleContent !== null">
{{userData.articleContent}} {{userData.articleContent}}
...@@ -246,6 +252,7 @@ ...@@ -246,6 +252,7 @@
data: [], data: [],
count: 0, count: 0,
userId: '', userId: '',
memId:'',
city: (uni.getStorageSync('itemobj').city != null && uni.getStorageSync('itemobj').city != undefined) ? uni city: (uni.getStorageSync('itemobj').city != null && uni.getStorageSync('itemobj').city != undefined) ? uni
.getStorageSync('itemobj').city : "中国", .getStorageSync('itemobj').city : "中国",
share: false, share: false,
...@@ -254,7 +261,7 @@ ...@@ -254,7 +261,7 @@
}; };
}, },
onLoad(options) { onLoad(options) {
this.userId = options.id; this.memId = options.id;
this.getUserDetail(); this.getUserDetail();
if (options.share != null) { if (options.share != null) {
this.share = options.share; this.share = options.share;
...@@ -326,10 +333,17 @@ ...@@ -326,10 +333,17 @@
_this.flag = true; _this.flag = true;
}, },
methods: { methods: {
//查看更多动态
gotomore(){
uni.navigateTo({
url: '/pagesUser/userArticleList?userId='+this.userId +'&type=else'
});
},
//获取用户详情 //获取用户详情
getUserDetail(){ getUserDetail(){
userDetail(this.userId).then(res => { userDetail(this.memId).then(res => {
this.userData = res.data.data this.userData = res.data.data
this.userId = this.userData.userId
//处理头像 //处理头像
this.imgList.push(res.data.data.avatarUrl.replace(/\\/g, '/')) this.imgList.push(res.data.data.avatarUrl.replace(/\\/g, '/'))
//处理星座 //处理星座
...@@ -671,6 +685,37 @@ ...@@ -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 { .one {
font-size: 28rpx; font-size: 28rpx;
margin-top: 26rpx; margin-top: 26rpx;
......
...@@ -83,7 +83,7 @@ export default { ...@@ -83,7 +83,7 @@ export default {
//跳转用户详情 //跳转用户详情
gotoDetail(item){ gotoDetail(item){
uni.navigateTo({ uni.navigateTo({
url: '/pagesUser/userInfo?id='+item.businessId url: '/pagesUser/userInfo?id='+item.userId
}) })
}, },
getUserList() { getUserList() {
......
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
page { page {
height: 100%; 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