Skip to content

C
cust-app
Commit 2b77c5df authored by liwei's avatar liwei
Browse files
Options

增加了查看更多动态按钮和页面

parent 34c253ce
Show whitespace changes
Inline Side-by-side
Showing with 610 additions and 5 deletions
pages.json
View file @ 2b77c5df
......@@ -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/tab/my.vue
View file @ 2b77c5df
......@@ -116,7 +116,7 @@
我的动态
</view>
</view>
<view class="my-article-more">
<view class="my-article-more" @click="gotomore">
查看更多
<u-icon name="arrow-right" size="13" bold="true"></u-icon>
</view>
......@@ -256,6 +256,12 @@ import {setUserProfile} from '../../api/login/index'
}
},
methods: {
//查看更多动态
gotomore(){
uni.navigateTo({
url: '/pagesUser/userArticleList?userId='+this.userInfo.businessId +'&type=my'
});
},
//获取用户信息
getUserInfo() {
try {
......
pagesUser/component/Item.vue 0 → 100644
View file @ 2b77c5df
<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 @ 2b77c5df
<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 @ 2b77c5df
......@@ -108,7 +108,7 @@
我的动态
</view>
</view>
<view class="boxsname2">
<view class="boxsname2" @click="gotomore">
查看更多
<u-icon name="arrow-right" size="13" bold="true"></u-icon>
</view>
......@@ -252,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,
......@@ -260,7 +261,7 @@
};
},
onLoad(options) {
this.userId = options.id;
this.memId = options.id;
this.getUserDetail();
if (options.share != null) {
this.share = options.share;
......@@ -332,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, '/'))
//处理星座
......
pagesUser/userList.vue
View file @ 2b77c5df
......@@ -83,7 +83,7 @@ export default {
//跳转用户详情
gotoDetail(item){
uni.navigateTo({
url: '/pagesUser/userInfo?id='+item.businessId
url: '/pagesUser/userInfo?id='+item.userId
})
},
getUserList() {
......
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