You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
366 lines
11 KiB
366 lines
11 KiB
<template>
|
|
<u-navbar :title="'互动专区'" placeholder="true" bg-color="#F1F3F9" :auto-back="true" />
|
|
<view class="container">
|
|
<u-tabs :list="list1" @click="click" :current="current"></u-tabs>
|
|
<scroll-view class="cardbox" scroll-y="true" @scrolltolower="scrolltolower">
|
|
<view class="dhone" v-for="(item, index) in datalist" :key="index">
|
|
<view class="head">
|
|
<image style="height: 96rpx; width: 96rpx; border-radius: 50%" :src="url + '/' + item.member_head_pic" mode=""></image>
|
|
<view class="namepart">
|
|
<text class="name">{{ item.member_nickname }}</text>
|
|
<text class="date">{{ item.create_time }}</text>
|
|
</view>
|
|
</view>
|
|
<text class="pl">{{ item.content }}</text>
|
|
<view class="ypl" v-if="item.comments">
|
|
<view class="head">
|
|
<view class="left">
|
|
<image
|
|
style="height: 40rpx; width: 40rpx; border-radius: 50%"
|
|
:src="url + '/' + item.comments?.member_head_pic"
|
|
mode=""
|
|
></image>
|
|
<text class="name">{{ item.comments?.member_nickname }}</text>
|
|
</view>
|
|
<view class="right">
|
|
<text class="value">{{ item.comments?.like_count }}</text>
|
|
<image
|
|
style="width: 24rpx; height: 24rpx; margin-left: 8rpx"
|
|
:src="item.comments.is_like ? '/static/img/ydz.png' : '/static/img/dz.png'"
|
|
mode=""
|
|
@click="pldzClick(item.posts_id, item.comments.is_like, item.comments.comments_id)"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
<text class="pl">{{ item.comments?.content }}</text>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="left">
|
|
<image
|
|
style="width: 36rpx; height: 34rpx"
|
|
:src="item.is_like ? '/static/img/ydz.png' : '/static/img/dz.png'"
|
|
@click="dzClick(item.is_like, item.posts_id)"
|
|
mode=""
|
|
></image>
|
|
<text class="value">{{ item.like_count }}</text>
|
|
</view>
|
|
<view class="right">
|
|
<image style="width: 36rpx; height: 36rpx" src="@/static/img/pl.png" mode="" @click="godetail(item.posts_id)"></image>
|
|
<text class="value">{{ item.comment_count }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<liuDragButton :width-px="'145rpx'">
|
|
<image class="hdzq" src="@/static/img/fbhd.png" mode="" @click="goxzhdzq"></image>
|
|
</liuDragButton>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { postsList, likesPosts } from '@/api/shop'
|
|
import liuDragButton from '@/uni_modules/liu-drag-button/components/liu-drag-button/liu-drag-button.vue'
|
|
import useUserStore from '@/store/user'
|
|
const userStore = useUserStore()
|
|
|
|
const url = ref(import.meta.env.VITE_APP_BASE_URL)
|
|
|
|
|
|
const current = ref(0)
|
|
// 创建响应式数据
|
|
const list1 = reactive([
|
|
{
|
|
name: '查政策',
|
|
id: 1
|
|
},
|
|
{
|
|
name: '金融帮',
|
|
id: 2
|
|
},
|
|
{
|
|
name: '媒体帮',
|
|
id: 3
|
|
},
|
|
{
|
|
name: '提诉求',
|
|
id: 4
|
|
},
|
|
{
|
|
name: '法律帮',
|
|
id: 5
|
|
}
|
|
])
|
|
|
|
const typeid = ref(0)
|
|
const typename = ref('')
|
|
// 定义方法
|
|
const click = async (item) => {
|
|
page.value = 1
|
|
typeid.value = item.id
|
|
typename.value = item.name
|
|
datalist.value = []
|
|
await getpostsList()
|
|
}
|
|
|
|
const dzClick = (like, id) => {
|
|
if (userStore.userInfo.moblie === undefined) {
|
|
uni.showToast({
|
|
title: '请登录后操作！',
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
datalist.value.forEach((ele) => {
|
|
if (ele.posts_id === id) {
|
|
ele.is_like = !ele.is_like
|
|
if (ele.is_like) {
|
|
ele.like_count++
|
|
} else {
|
|
ele.like_count--
|
|
}
|
|
likesPosts({ target_id: id, type: 'posts' })
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
const scrolltolower = async () => {
|
|
page.value++
|
|
await getpostsList()
|
|
}
|
|
|
|
const goxzhdzq = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/index/shoppage/makeAssistance?id='+typeid.value+'&name='+typename.value
|
|
})
|
|
}
|
|
|
|
const godetail = (id) => {
|
|
uni.navigateTo({
|
|
url: '/pages/index/shoppage/interactiveDetail?id=' + id
|
|
})
|
|
}
|
|
|
|
const page = ref(1)
|
|
const limit = ref(4)
|
|
const datalist = ref([])
|
|
const getpostsList = async () => {
|
|
await postsList({ page: page.value, limit: limit.value, type_id: typeid.value }).then((res) => {
|
|
if (res.code === 1) {
|
|
datalist.value = [...datalist.value, ...res.data.data]
|
|
}
|
|
})
|
|
}
|
|
|
|
const pldzClick = (postid, like, id) => {
|
|
if (userStore.userInfo.moblie === undefined) {
|
|
uni.showToast({
|
|
title: '请登录后操作！',
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
datalist.value.forEach((ele) => {
|
|
if (ele.posts_id === postid) {
|
|
ele.comments.is_like = !like
|
|
if (ele.comments.is_like) {
|
|
ele.comments.like_count++
|
|
} else {
|
|
ele.comments.like_count--
|
|
}
|
|
likesPosts({
|
|
target_id: id,
|
|
type: 'comments'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
onLoad(async (e) => {
|
|
typeid.value = list1[e.tabid].id
|
|
typename.value = list1[e.tabid].name
|
|
current.value = e.tabid
|
|
page.value = 1
|
|
datalist.value = []
|
|
await getpostsList()
|
|
})
|
|
onShow(async()=> {
|
|
if(datalist.value.length !== 0) {
|
|
page.value = 1
|
|
datalist.value = []
|
|
await postsList({ page: page.value, limit: limit.value, type_id: typeid.value }).then((res) => {
|
|
if (res.code === 1) {
|
|
datalist.value = [...datalist.value, ...res.data.data]
|
|
}
|
|
})
|
|
}
|
|
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
background-color: #f1f3f9;
|
|
height: calc(100vh - 192rpx);
|
|
overflow: hidden;
|
|
width: 100%;
|
|
|
|
.cardbox {
|
|
max-height: calc(100vh - 300rpx);
|
|
|
|
.dhone {
|
|
margin-top: 30rpx;
|
|
width: 100%;
|
|
padding: 40rpx;
|
|
display: grid;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.namepart {
|
|
margin-left: 20rpx;
|
|
display: grid;
|
|
|
|
.name {
|
|
font-family: Source Han Sans;
|
|
font-size: 28rpx;
|
|
font-weight: 350;
|
|
line-height: 26rpx;
|
|
letter-spacing: normal;
|
|
color: #0c092a;
|
|
}
|
|
|
|
.date {
|
|
margin-top: 18rpx;
|
|
font-family: Source Han Sans;
|
|
font-size: 28rpx;
|
|
font-weight: 350;
|
|
line-height: 30rpx;
|
|
letter-spacing: normal;
|
|
color: #858494;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pl {
|
|
margin-top: 24rpx;
|
|
font-family: Source Han Sans;
|
|
font-size: 28rpx;
|
|
font-weight: 350;
|
|
text-align: justify;
|
|
/* 浏览器可能不支持 */
|
|
letter-spacing: normal;
|
|
color: #0c092a;
|
|
}
|
|
|
|
.bottom {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.value {
|
|
margin-left: 8rpx;
|
|
font-family: Source Han Sans;
|
|
font-size: 36rpx;
|
|
font-weight: 350;
|
|
line-height: 72rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: normal;
|
|
color: #858494;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.value {
|
|
margin-left: 8rpx;
|
|
font-family: Source Han Sans;
|
|
font-size: 36rpx;
|
|
font-weight: 350;
|
|
line-height: 72rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: normal;
|
|
color: #858494;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ypl {
|
|
width: 100%;
|
|
border-radius: 8rpx;
|
|
background: #f8f9fa;
|
|
padding: 24rpx;
|
|
margin-top: 22rpx;
|
|
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.name {
|
|
margin-left: 8rpx;
|
|
font-family: Source Han Sans;
|
|
font-size: 28rpx;
|
|
font-weight: 350;
|
|
line-height: 26rpx;
|
|
letter-spacing: normal;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.value {
|
|
font-family: Source Han Sans;
|
|
font-size: 24rpx;
|
|
font-weight: 350;
|
|
line-height: 20rpx;
|
|
letter-spacing: normal;
|
|
color: #858494;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pl {
|
|
font-family: Source Han Sans;
|
|
font-size: 24rpx;
|
|
font-weight: 350;
|
|
line-height: normal;
|
|
text-align: justify;
|
|
/* 浏览器可能不支持 */
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: normal;
|
|
color: #0c092a;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hdzq {
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 75%;
|
|
}
|
|
</style>
|
|
|