Skip to content

C
cust-app
Commit 19b499c3 authored by liwei's avatar liwei
Browse files
Options

增加了动态和话题接口

parent d471713a
Expand all Show whitespace changes
Inline Side-by-side
Showing with 138 additions and 411 deletions
api/article/index.js
View file @ 19b499c3
import {request} from '../../util/api' import {request} from '../../util/api'
// banner列表
export function articleList(query) {
return request({
url: '/app/open/opmArticle/queryArticleByPagination',
data: query,
method: 'GET',
})
}
api/topic/index.js 0 → 100644
View file @ 19b499c3
import {request} from '../../util/api'
// 话题列表
export function topicList(data) {
return request({
url:'/app/open/opmTopic/queryAllOpmTopic',
data: data,
method: 'GET',
})
}
pages/components/article/Item.vue
View file @ 19b499c3
<template> <template>
<view :class="{item:true,bor:!isState}"> <view :class="{item:true,bor:true}">
<view class="left"> <view class="left">
<view class="l" v-if="isState"> <view class="l" v-if="info.headPortrait == ''">
<view class="box"> <view class="box">
<view class="day"> <view class="day">
{{info.createTime.substring(8,10)*1}} {{info.createTime.substring(8,10)*1}}
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<image v-else @click="gotoUserInfo(info)" :src="info.headPortrait" mode="aspectFill"></image> <image v-else @click="gotoUserInfo(info)" :src="info.headPortrait" mode="aspectFill"></image>
</view> </view>
<view class="center"> <view class="center">
<template v-if="!isState"> <template>
<view class="name"> <view class="name">
<text @click="gotoUserInfo(info)">{{info.nickName}}</text> <text @click="gotoUserInfo(info)">{{info.nickName}}</text>
<image v-if="info.gender != 'MALE'" class="gender" :src="baseUrl+'/user/famale.png'" mode=""> <image v-if="info.gender != 'MALE'" class="gender" :src="baseUrl+'/user/famale.png'" mode="">
...@@ -39,18 +39,12 @@ ...@@ -39,18 +39,12 @@
<u-read-more ref="uReadMore" :shadowStyle="shadowStyle" :toggle="true" color="#415C9E" <u-read-more ref="uReadMore" :shadowStyle="shadowStyle" :toggle="true" color="#415C9E"
:textIndent="0" showHeight="126rpx"> :textIndent="0" showHeight="126rpx">
<view @click="gotoDetail(info)" style="font-size: 28rpx;color: #333333;"> <view @click="gotoDetail(info)" style="font-size: 28rpx;color: #333333;">
<!-- <u-parse :tagStyle="tagStyle" :content="info.content" @load="load"></u-parse> -->
<!-- <rich-text :nodes="info.content"></rich-text> -->
<view class="" style="line-height: 1.5;"> <view class="" style="line-height: 1.5;">
{{info.content}} {{info.content}}
</view> </view>
</view> </view>
</u-read-more> </u-read-more>
</template> </template>
<!-- <xzj-readMore hideLineNum="4" :showHeight="40">
{{info.content}}
</xzj-readMore> -->
</view> </view>
<view class="contentImg"> <view class="contentImg">
<imageAdaptation :imgList="imgs" :imgLayout1="imgLayout1" :imgLayout2="imgLayout2" <imageAdaptation :imgList="imgs" :imgLayout1="imgLayout1" :imgLayout2="imgLayout2"
...@@ -99,18 +93,16 @@ ...@@ -99,18 +93,16 @@
<text></text> <text></text>
<text></text> <text></text>
</view> </view>
</view> </view>
<!-- 右上角三个点的选项-->
<u-action-sheet :actions="list" :closeOnClickOverlay="true" :safeAreaInsetBottom="true" cancelText="取消" <u-action-sheet :actions="list" :closeOnClickOverlay="true" :safeAreaInsetBottom="true" cancelText="取消"
@select="selectClick" @close="show = false" :show="show"></u-action-sheet> @select="selectClick" @close="show = false" :show="show"></u-action-sheet>
<ELM ref="elm" :msg="tipMsg" :isConfirm="isConfirm" @confirm="confirm"></ELM>
</view> </view>
</template> </template>
<script> <script>
import imageAdaptation from '@/components/images-adaptation/imageAdaptation.vue' import imageAdaptation from '@/components/images-adaptation/imageAdaptation.vue'
import xzjReadMore from "@/components/xzj-readMore/xzj-readMore.vue" import xzjReadMore from "@/components/xzj-readMore/xzj-readMore.vue"
import ELM from '@/components/elm-toast/index.vue';
export default { export default {
name:'ArticleItem', name:'ArticleItem',
options: { options: {
...@@ -118,14 +110,9 @@ ...@@ -118,14 +110,9 @@
}, },
components: { components: {
imageAdaptation, imageAdaptation,
xzjReadMore, xzjReadMore
ELM
}, },
props: { props: {
isState: {
type: Boolean,
default: false
},
info: { info: {
type: Object, type: Object,
default: () => {} default: () => {}
...@@ -134,6 +121,7 @@ ...@@ -134,6 +121,7 @@
watch: { watch: {
info: { info: {
handler(newValue) { handler(newValue) {
console.log('newValue:',newValue)
if (newValue?.img?.length) { if (newValue?.img?.length) {
this.imgs = newValue.img this.imgs = newValue.img
} }
...@@ -156,14 +144,12 @@ ...@@ -156,14 +144,12 @@
return { return {
//图片路径 //图片路径
baseUrl: this.$store.state.imgUrl, baseUrl: this.$store.state.imgUrl,
tagStyle: {
text: 'line-height:1em'
},
imgs: [], imgs: [],
imgLayout1: [450, 450], imgLayout1: [450, 450],
imgLayout2: [220, 220], imgLayout2: [220, 220],
imgLayout3: [160, 160], imgLayout3: [160, 160],
show: false, show: false,
//右上角三个点的操作项
list: [{ list: [{
name: '删除', name: '删除',
}, },
...@@ -172,10 +158,9 @@ ...@@ -172,10 +158,9 @@
// } // }
], ],
shadowStyle: { shadowStyle: {
'backgroundImage': 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 50%, #fff 100%)', backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 50%, #fff 100%)',
justifyContent: 'flex-end' justifyContent: 'flex-end'
}, },
tipMsg: '',
isConfirm: false isConfirm: false
} }
}, },
...@@ -183,9 +168,6 @@ ...@@ -183,9 +168,6 @@
load() { load() {
this.$refs.uReadMore.init(); this.$refs.uReadMore.init();
}, },
select() {
this.$emit("selectShare", this.info)
},
//查看动态详情 //查看动态详情
gotoDetail(item) { gotoDetail(item) {
uni.navigateTo({ uni.navigateTo({
...@@ -200,17 +182,13 @@ ...@@ -200,17 +182,13 @@
}, },
// 点赞 // 点赞
praise(value) { praise(value) {
this.$emit("praise", value)
}, },
// 删除 // 删除
selectClick(item) { selectClick(item) {
if (item.name == "删除") {
this.$emit("delete", this.info)
} else if (item.name == "举报") {
this.tipMsg = "尽情期待";
this.$refs.elm.showDialog();
}
}, },
//
preview({ preview({
url, url,
index index
...@@ -228,15 +206,6 @@ ...@@ -228,15 +206,6 @@
} }
} }
}); });
// // #ifdef MP-WEIXIN
// this.$nextTick(() => {
// this.$refs.previewImage.open(url); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图)
// })
// // #endif
// // #ifndef MP-WEIXIN
// this.$refs.previewImage.open(url); // 传入当前选中的图片地址
// // #endif
}, },
onLongpress(e) { //长按事件 onLongpress(e) { //长按事件
console.log('当前长按的图片是' + e); console.log('当前长按的图片是' + e);
...@@ -262,7 +231,6 @@ ...@@ -262,7 +231,6 @@
frontColor: '#000000', // 设置前景色为黑色 frontColor: '#000000', // 设置前景色为黑色
backgroundColor: '#000000', // 设置背景色为黑色 backgroundColor: '#000000', // 设置背景色为黑色
}) })
// this.videoShow = false
this.$emit("open") this.$emit("open")
}, },
close() { //监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件） close() { //监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件）
...@@ -271,7 +239,6 @@ ...@@ -271,7 +239,6 @@
frontColor: '#ffffff', // 设置前景色为白色 frontColor: '#ffffff', // 设置前景色为白色
backgroundColor: '#000000', // 设置背景色为黑色 backgroundColor: '#000000', // 设置背景色为黑色
}) })
// this.videoShow = true
this.$emit("close") this.$emit("close")
}, },
showSelect(info) { showSelect(info) {
...@@ -297,8 +264,6 @@ ...@@ -297,8 +264,6 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 40rpx 0 0rpx 0; padding: 40rpx 0 0rpx 0;
// padding-top: 40rpx;
margin-top: 34rpx;
margin-left: 32rpx; margin-left: 32rpx;
margin-right: 32rpx; margin-right: 32rpx;
...@@ -375,7 +340,7 @@ ...@@ -375,7 +340,7 @@
} }
.contentImg { .contentImg {
// max-height: 450rpx;
} }
.time { .time {
......
pages/components/article/List.vue
View file @ 19b499c3
<template> <template>
<view class="content"> <view class="content">
<!-- z-paging是一个分页组件-->
<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" empty-view-text="迈出第一步才有更多故事发生哦" <z-paging v-if="firstLoaded || isCurrentPage" ref="paging" empty-view-text="迈出第一步才有更多故事发生哦"
:empty-view-title-style="{ :empty-view-title-style="{
'font-size': '32rpx', 'font-size': '32rpx',
...@@ -12,14 +13,22 @@ ...@@ -12,14 +13,22 @@
'width': '447rpx', 'width': '447rpx',
'height': '375rpx' 'height': '375rpx'
}" v-model="dataList" @query="queryList" :fixed="false"> }" v-model="dataList" @query="queryList" :fixed="false">
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 --> <view v-if="currentIndex == '2'">
<!-- <template v-if="dataList.length"> --> <u-tabs ref="tabs" :list="topicList" font-size="30" :current="current"
<view class="itemm" v-for="(item,index) in dataList" :key="item.id" @click="itemClick(item)"> :activeStyle="{
<ItemVue @delete="deleteFn" :info="item" @selectShare="selectShare(item)" @praise="praise" color: 'rgb(41, 121, 255)',
@close="close" @open="open" /> transform: 'scale(1)'
}"
:inactiveStyle="{
color: '#606266',
transform: 'scale(1)'
}">
</u-tabs>
</view> </view>
<!-- </template> --> <view v-for="(item,index) in dataList" :key="item.id">
<!-- <empty v-if="firstLoaded&&!dataList.length"></empty> --> <ItemVue :info="item"/>
</view>
<empty v-if="firstLoaded && !dataList.length"/>
</z-paging> </z-paging>
</view> </view>
</template> </template>
...@@ -27,16 +36,20 @@ ...@@ -27,16 +36,20 @@
<script> <script>
import ItemVue from './Item.vue' import ItemVue from './Item.vue'
import empty from '@/components/empty.vue' import empty from '@/components/empty.vue'
import login from '../../../components/login/login.vue' import {topicList} from "../../../api/topic";
import {articleList} from "../../../api/article";
export default { export default {
name:'ArticleList', name:'ArticleList',
components: { components: {
ItemVue, ItemVue,
empty, empty
login
}, },
data() { data() {
return { return {
//当前的tab
current: 0,
//话题列表
topicList:[],
//图片路径 //图片路径
baseUrl: this.$store.state.imgUrl, baseUrl: this.$store.state.imgUrl,
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！ // v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
...@@ -61,19 +74,17 @@ ...@@ -61,19 +74,17 @@
default: function() { default: function() {
return 0 return 0
} }
},
userInfo: {
type: Object,
default: function() {
return {}
}
} }
}, },
watch: { watch: {
currentIndex: { currentIndex: {
handler(newVal) { handler(newVal) {
console.log("切换到了第：" + newVal) console.log("currentIndex切换到了第：" + newVal)
console.log('this.tabIndex:',this.tabIndex)
if (newVal === this.tabIndex) { if (newVal === this.tabIndex) {
if (newVal === 2){
this.getTopicList()
}
// 懒加载，当滑动到当前的item时，才去加载 // 懒加载，当滑动到当前的item时，才去加载
if (!this.firstLoaded) { if (!this.firstLoaded) {
// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题 // 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
...@@ -83,76 +94,23 @@ ...@@ -83,76 +94,23 @@
}, 100); }, 100);
}) })
} }
}
if (newVal == 0 || newVal == 2) {
console.log("进入判断第" + newVal + "个")
} }
}, },
immediate: true immediate: true
}, },
}, },
methods: { methods: {
close() { //查询话题列表
this.$emit("changeOpen", false) getTopicList(){
}, topicList().then(res =>{
open() { //获取res.data.data里的topicName赋值给this.topicList，并且
this.$emit("changeOpen", true) this.topicList = res.data.data.map(item => {
}, return {
selectShare(item) { name: item.topicName
this.$emit("selectShare", item) };
}, });
// 删除
deleteFn(value) {
this.$myRequest({
url: `nostalgia/article/article/${value.id}`,
withToken: true,
method: 'DELETE',
}).then(res => {
if (res.data.code == "200") {
let idx = this.dataList.findIndex(item => item.id == value.id)
this.dataList.splice(idx, 1)
}
else{
}
}) })
}, },
// 点赞
praise(value) {
// let obj = {
// ...value,
// }
// let url = ''
// if (obj.isLike) {
// url = 'nostalgia/article/cancel/praise'
// obj.likeCount -= 1
// } else {
// url = 'nostalgia/article/praise'
// obj.likeCount += 1
// }
// this.$myRequest({
// url,
// data: {
// id: value.id,
// praiseType: "ARTICLE"
// },
// withToken: true,
// method: 'PUT',
// }).then(res => {
// if (res.data.code == "200") {
// obj.isLike = !value.isLike
// let idx = this.dataList.findIndex(item => item.id == obj.id)
// this.dataList.splice(idx, 1, obj)
// } else if(res.data.code == "10006"){
// console.log("报错了："+res.data.code)
// }
// })
},
// 接收父组件传过来的刷新列表要求 // 接收父组件传过来的刷新列表要求
reload() { reload() {
this.$nextTick(() => { this.$nextTick(() => {
...@@ -160,11 +118,36 @@ ...@@ -160,11 +118,36 @@
this.$refs.paging && this.$refs.paging.reload(); this.$refs.paging && this.$refs.paging.reload();
}) })
}, },
//分页查询方法
queryList(pageNo, pageSize) { queryList(pageNo, pageSize) {
const params = {
page:pageNo,
rows:pageSize,
}
articleList(params).then(res=>{
})
console.log('1111')
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用 // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可 // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
// 模拟请求服务器获取分页数据，请替换成自己的网络请求 // 模拟请求服务器获取分页数据，请替换成自己的网络请求
this.dataList = [ const arr = [
{
createTime:'2024-12-28 15:02:01',
headPortrait:'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',//头像
nickName:'不爱吃辣的小王',//nickName
gender:'MALE',//性别
information:'02·重庆市·硕士·互联网',//个人信息
content:'昨天的快乐留在今天发，那就是100%',//动态内容
time:'2024-11-11 15:02:01',//发布动态的时间
commentCount:'10',//评论数
likeCount:'11',//点赞数
isLike:true,
img:[
'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg'
]
},
{ {
createTime:'2024-12-28 15:02:01', createTime:'2024-12-28 15:02:01',
headPortrait:'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',//头像 headPortrait:'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',//头像
...@@ -177,6 +160,7 @@ ...@@ -177,6 +160,7 @@
likeCount:'11',//点赞数 likeCount:'11',//点赞数
}, },
] ]
this.$refs.paging.complete(arr);
// const params = { // const params = {
// pageIndex: pageNo, // pageIndex: pageNo,
// pageSize: pageSize, // pageSize: pageSize,
...@@ -241,9 +225,6 @@ ...@@ -241,9 +225,6 @@
// this.$refs.paging.complete(false); // this.$refs.paging.complete(false);
// }) // })
}, },
itemClick(item) {
console.log('点击了-----', item.title);
},
} }
} }
</script> </script>
......
pages/tab/article.vue
View file @ 19b499c3
This diff is collapsed.
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