|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <u-sticky bgColor="#F8F8F8">
|
|
|
- <view class="top"> </view>
|
|
|
- <u-tabs :list="list1" lineWidth="30" lineColor="#f56c6c" @change='tabChange' :activeStyle="{
|
|
|
+ <view class="container">
|
|
|
+ <u-sticky bgColor="#F8F8F8">
|
|
|
+ <view class="top"> </view>
|
|
|
+ <u-tabs :list="list1" lineWidth="30" lineColor="#f56c6c" @change='tabChange' :activeStyle="{
|
|
|
color: '#303133',
|
|
|
fontWeight: 'bold',
|
|
|
transform: 'scale(1.05)',
|
|
@@ -12,108 +12,114 @@
|
|
|
color: '#606266',
|
|
|
transform: 'scale(1)'
|
|
|
}" itemStyle=" padding-left: 15px; padding-right: 15px; height: 34px;">
|
|
|
- </u-tabs>
|
|
|
- <view class="top-bottom"> </view>
|
|
|
- </u-sticky>
|
|
|
+ </u-tabs>
|
|
|
+ <view class="top-bottom"> </view>
|
|
|
+ </u-sticky>
|
|
|
|
|
|
- <view class="center-box">
|
|
|
- <view class="item-box" v-for="(item,index) of initList" :key='index'>
|
|
|
- <view class="item-top">
|
|
|
- <view class="top-left">
|
|
|
- <image class="img" :src="item.userDTO.avatar"></image>
|
|
|
- </view>
|
|
|
- <view class="top-right">
|
|
|
- <view class="right-title">{{ item.userDTO.nickname }}</view>
|
|
|
- <view class="right-address">2天前 {{ item.location }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="center-box">
|
|
|
+ <view class="item-box" v-for="(item,index) of initList" :key='index'>
|
|
|
+ <view class="item-top">
|
|
|
+ <view class="top-left">
|
|
|
+ <image class="img" :src="item.userDTO.avatar"></image>
|
|
|
+ </view>
|
|
|
+ <view class="top-right">
|
|
|
+ <view class="right-title">{{ item.userDTO.nickname }}</view>
|
|
|
+ <view class="right-address">2天前 {{ item.location }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
- <u-line margin='10rpx 0'></u-line>
|
|
|
+ <u-line margin='10rpx 0'></u-line>
|
|
|
|
|
|
- <view class="item-center">
|
|
|
- <view class="center-text">
|
|
|
- {{ item.textContent }}
|
|
|
- </view>
|
|
|
- <view class="center-img-box">
|
|
|
- <image v-for="itm of item.resourceVos" class="center-img" :src="itm.resourceKey"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item-bottom">
|
|
|
- <view class="bottom-item">
|
|
|
- <u-icon name="thumb-up" :size='iconSize'></u-icon><span>2332</span>
|
|
|
- </view>
|
|
|
- <view class="bottom-item">
|
|
|
- <u-icon name="heart" :size='iconSize'></u-icon><span>2332</span>
|
|
|
- </view>
|
|
|
- <view class="bottom-item" @click='communityShow = true'>
|
|
|
- <u-icon name="more-circle" :size='iconSize'></u-icon><span>2332</span>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="item-center">
|
|
|
+ <view class="center-text">
|
|
|
+ {{ item.textContent }}
|
|
|
+ </view>
|
|
|
+ <view class="center-img-box">
|
|
|
+ <image v-for="itm of item.resourceVos" class="center-img" :src="itm.resourceKey"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-bottom">
|
|
|
+ <view class="bottom-item">
|
|
|
+ <u-icon :name="item.clickStatus == 0 ? 'thumb-up' : 'thumb-up-fill'" :size='iconSize'
|
|
|
+ @click='handlerPraise(item)'></u-icon><span>{{ item.goodNum }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-item" @click='communityShow = true'>
|
|
|
+ <u-icon name="more-circle" :size='iconSize'></u-icon><span>{{ item.commentNum }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
- <empty v-if="initList.length == 0"/>
|
|
|
+ <empty v-if="initList.length == 0" />
|
|
|
|
|
|
- <view class="flex-box">
|
|
|
- <view class="flex" @click="handlerToPublish">
|
|
|
- <view class="flex-icon">
|
|
|
- <u-icon name="edit-pen" color='#fff' size='26'></u-icon>
|
|
|
- </view>
|
|
|
- <view class=""> 发布 </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="flex-box">
|
|
|
+ <view class="flex" @click="handlerToPublish">
|
|
|
+ <view class="flex-icon">
|
|
|
+ <u-icon name="edit-pen" color='#fff' size='26'></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class=""> 发布 </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
- <u-popup :show="communityShow" @close="communityShow = false" mode='bottom' overlayOpacity='0.1' round="20" >
|
|
|
- <view class="pop-box">
|
|
|
- <communityPop />
|
|
|
- </view>
|
|
|
+ <u-popup :show="communityShow" @close="communityShow = false" mode='bottom' overlayOpacity='0.1' round="20">
|
|
|
+ <view class="pop-box">
|
|
|
+ <communityPop />
|
|
|
+ </view>
|
|
|
</u-popup>
|
|
|
|
|
|
<tabbar currentTab="clientCommunity" />
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { clientContentList } from '@/api/client/community.js';
|
|
|
- import { intervalTime } from "@/utils/tools.js"
|
|
|
+ import {
|
|
|
+ clientContentList,
|
|
|
+ addEvaulateRecords
|
|
|
+ } from '@/api/client/community.js';
|
|
|
+ import {
|
|
|
+ intervalTime
|
|
|
+ } from "@/utils/tools.js"
|
|
|
import communityPop from "@/components/communityPop/index.vue"
|
|
|
import empty from "@/components/empty/index.vue"
|
|
|
- export default {
|
|
|
- components:{communityPop , empty},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- communityShow:false,
|
|
|
- list1: [{
|
|
|
- name: '最新',
|
|
|
- type: 'LATEST',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '关注',
|
|
|
- type: 'ATTENTION',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '最热',
|
|
|
- type: 'HOTTEST',
|
|
|
- }
|
|
|
- ],
|
|
|
- iconSize: 24,
|
|
|
- duration: 700,
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ communityPop,
|
|
|
+ empty
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ communityShow: false,
|
|
|
+ list1: [{
|
|
|
+ name: '最新',
|
|
|
+ type: 'LATEST',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '关注',
|
|
|
+ type: 'ATTENTION',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '最热',
|
|
|
+ type: 'HOTTEST',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ iconSize: 24,
|
|
|
+ duration: 700,
|
|
|
params: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
type: 'LATEST',
|
|
|
keyWord: '',
|
|
|
},
|
|
|
- initList:[] , // 初始化列表
|
|
|
- }
|
|
|
- },
|
|
|
- onShow(){
|
|
|
+ initList: [], // 初始化列表
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
this.handlerInitList()
|
|
|
// let a = intervalTime(1709797137000)
|
|
|
},
|
|
|
- methods: {
|
|
|
- handlerInitList(){
|
|
|
- clientContentList(this.params).then(res=>{
|
|
|
+ methods: {
|
|
|
+ handlerInitList() {
|
|
|
+ clientContentList(this.params).then(res => {
|
|
|
this.initList = res.data.records
|
|
|
})
|
|
|
},
|
|
@@ -131,131 +137,159 @@
|
|
|
// }
|
|
|
// this.queryParams.birthday = year + '-' + month + '-' + date
|
|
|
// },
|
|
|
- // 切换顶部tabbar
|
|
|
- tabChange(e) {
|
|
|
+ // 切换顶部tabbar
|
|
|
+ tabChange(e) {
|
|
|
this.params.type = e.type
|
|
|
this.handlerInitList()
|
|
|
- },
|
|
|
- // 发布按钮
|
|
|
- handlerToPublish(){
|
|
|
- uni.navigateTo({
|
|
|
- url:"/pages/client/clientPackage/communityPublish"
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 发布按钮
|
|
|
+ handlerToPublish() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/client/clientPackage/communityPublish"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点赞按钮
|
|
|
+ handlerPraise(item) {
|
|
|
+ let params = {
|
|
|
+ dynamicStatusType: item.clickStatus == 0 ? 'GOOD' : 'BAD', // 操作类型:1-点赞;2-踩 允许值: GOOD, BAD
|
|
|
+ recordType: 'DYNAMIC', // 内容类型:1-动态;2-评论/回复 允许值: DYNAMIC, COMMENT, USER
|
|
|
+ actionType: item.clickStatus == 0 ? 'ADD' : 'CANCEL', // 点击类型:1-点赞/踩;2-取消赞/取消踩 允许值: ADD, CANCEL
|
|
|
+ contentId: item.id,
|
|
|
+ targetUserId: item.userId
|
|
|
+ }
|
|
|
+ addEvaulateRecords(params).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title:'点赞成功',
|
|
|
+ icon:'none'
|
|
|
+ })
|
|
|
+ this.handlerInitList()
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title:res.msg,
|
|
|
+ icon:'none'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .container {
|
|
|
- background-color: #F8F8F8;
|
|
|
- min-height: calc(100vh);
|
|
|
- // padding: 0 0 40rpx;
|
|
|
- // box-sizing: border-box;
|
|
|
- .top {
|
|
|
- height: 100rpx;
|
|
|
- }
|
|
|
+ .container {
|
|
|
+ background-color: #F8F8F8;
|
|
|
+ min-height: calc(100vh);
|
|
|
+
|
|
|
+ // padding: 0 0 40rpx;
|
|
|
+ // box-sizing: border-box;
|
|
|
+ .top {
|
|
|
+ height: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-bottom {
|
|
|
+ height: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-box {
|
|
|
+ margin: 30rpx auto 0;
|
|
|
+ width: 95%;
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
|
- .top-bottom {
|
|
|
- height: 20rpx;
|
|
|
- }
|
|
|
+ .item-box {
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ box-shadow: 0 5rpx 15rpx 0 rgba(0, 0, 0, 0.2);
|
|
|
+ background-color: #fff;
|
|
|
|
|
|
- .center-box {
|
|
|
- margin: 30rpx auto 0;
|
|
|
- width: 95%;
|
|
|
- font-size: 28rpx;
|
|
|
+ .item-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .item-box {
|
|
|
- padding: 20rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- box-shadow: 0 5rpx 15rpx 0 rgba(0, 0, 0, 0.2);
|
|
|
- background-color: #fff;
|
|
|
+ .top-left {
|
|
|
+ .img {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .item-top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .top-right {
|
|
|
+ margin-left: 20rpx;
|
|
|
|
|
|
- .top-left {
|
|
|
- .img {
|
|
|
- width: 90rpx;
|
|
|
- height: 90rpx;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
+ .right-title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 34rpx;
|
|
|
+ }
|
|
|
|
|
|
- .top-right {
|
|
|
- margin-left: 20rpx;
|
|
|
+ .right-address {
|
|
|
+ color: #959595;
|
|
|
+ font-style: italic;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .right-title {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 34rpx;
|
|
|
- }
|
|
|
+ .item-center {
|
|
|
+ .center-text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
|
|
|
- .right-address {
|
|
|
- color: #959595;
|
|
|
- font-style: italic;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .center-img-box {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 32% 32% 32%;
|
|
|
+ gap: 4% 1%;
|
|
|
|
|
|
- .item-center {
|
|
|
- .center-text {
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
+ .center-img {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .center-img-box {
|
|
|
- margin-top: 20rpx;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 32% 32% 32%;
|
|
|
- gap: 4% 1%;
|
|
|
+ .item-bottom {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 40rpx;
|
|
|
|
|
|
- .center-img {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .bottom-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 20%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .item-bottom {
|
|
|
- display: flex;
|
|
|
- margin-top: 40rpx;
|
|
|
- justify-content: space-between;
|
|
|
+ .flex-box {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #000;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 15%;
|
|
|
+ right: 5%;
|
|
|
+ box-shadow: 0 5rpx 15rpx 0 rgba(0, 0, 0, 0.5);
|
|
|
+ padding: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
|
|
|
- .bottom-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .flex {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: bold;
|
|
|
|
|
|
- .flex-box {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #000;
|
|
|
- position: fixed;
|
|
|
- bottom: 15%;
|
|
|
- right: 5%;
|
|
|
- box-shadow: 0 5rpx 15rpx 0 rgba(0, 0, 0, 0.5);
|
|
|
- padding: 10rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- .flex {
|
|
|
- color: #fff;
|
|
|
- font-size:26rpx;
|
|
|
- font-weight: bold;
|
|
|
- .flex-icon{
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .flex-icon {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
// ::v-deep .u-safe-area-inset-bottom{
|
|
|
// padding-bottom: 0;
|