YingXingAI/components/Information.vue

699 lines
19 KiB
Vue
Raw Permalink Normal View History

2025-06-30 14:43:02 +08:00
<template>
<view>
<view
class="flex-col Information"
style="position: relative; height: 100%"
@tap="btnShow = false"
>
<view class="flex-col">
<template v-if="list.length <= 0">
<view
v-if="type != 2 && type != 3 && !noShowEmpty"
style="height: 1rem"
></view>
<!-- <u-empty v-if="type != 2 && type != 3" text="暂无数据" mode="list"></u-empty> -->
<no-data v-if="type != 2 && type != 3" text="暂无数据"></no-data>
</template>
<template v-else v-for="(item, index) in list">
<view
class="flex-col list-item"
:class="{
'border-radius': borderRadius,
'border-noPadding': borderNoPadding,
}"
:key="index"
>
<view style="height: 0.1rem" v-if="item.isState"></view>
<text class="shield" v-if="item.isState">
<u-icon size="30" name="error-circle-fill"></u-icon
>该信息已被管理员屏蔽
</text>
<view class="flex-row group_8 view">
<u-avatar
@click="toDetil(item.userId)"
size="0.3rem"
:src="$u.http.config.imgUrl + item.userHead"
class="image_3"
></u-avatar>
<text class="text_8 text_43">{{ item.userName }}</text>
<text class="text_9">{{ item.creationTime }}</text>
<text class="text_11">{{ item.schoolName }}</text>
<u-icon
v-if="isDel"
name="more-dot-fill"
color="#ccc"
size="40"
style="position: absolute; right: 0"
@click="showDelFn(item)"
></u-icon>
</view>
<view class="flex-col group_9" @click="onDetails(item)">
<text class="text_14" v-if="type != 2">{{
item.title.length > 15
? item.title.slice(0, 15) + "..."
: item.title
}}</text>
<text class="text_14" v-else>{{ item.title }}</text>
<template v-if="!item.isForward">
<view v-if="!item.isDelete">
<text class="text_15" v-if="type != 2">
{{
item.content.length > 50
? item.content.slice(0, 50) + "..."
: item.content
}}
</text>
<text class="text_15" v-else>
{{ item.content }}
</text>
<view
class="imgList flex-col"
v-if="item.imageUrl.indexOf('.') > 0"
>
<view class="flex-row">
<image
@click.stop="clickImg(v)"
v-for="(v, i) in item.imageUrl.split(',')"
:key="i"
:src="v ? $u.http.config.imgUrl + v : ''"
class="image_10"
/>
</view>
</view>
<view class="flex-row" v-if="item.sysSignStr">
<text
class="text_16"
v-for="(v, i) in item.sysSignStr.split(',')"
@click.stop="onSign(v)"
:key="i"
>{{ v ? "#" + v : "" }}</text
>
</view>
</view>
<view
v-else
class="flex-row justify-between items-center delete-item"
>
<text class="item-text">哎呀此页面已被发布者删除</text>
<u-icon
class="icon-1"
name="trash"
color="black"
size="50"
@click="onDelCollet(item)"
></u-icon>
</view>
</template>
<template v-else>
<view
style="
background: #f8f8f8;
padding: 0.1rem;
margin-top: 0.1rem;
"
class="flex-col group_9"
>
<text class="text_14" v-if="type != 2">{{
item.forwardModel.forwardTitle.length > 15
? item.forwardModel.forwardTitle.slice(0, 15) + "..."
: item.forwardModel.forwardTitle
}}</text>
<text class="text_14" v-else>{{
item.forwardModel.forwardTitle
}}</text>
<text class="text_15" v-if="type != 2">
{{
item.content.length > 50
? item.content.slice(0, 50) + "..."
: item.content
}}
</text>
<text class="text_15" v-else>
{{ item.content }}
</text>
<view
class="imgList flex-col"
v-if="item.forwardModel.forwardImageUrl.indexOf('.') > 0"
>
<view class="flex-row">
<image
style="width: 32%; height: 0auto"
@click.stop="clickImg(v)"
v-for="(
v, i
) in item.forwardModel.forwardImageUrl.split(',')"
v-if="i < 9"
:key="i"
:src="v ? $u.http.config.imgUrl + v : ''"
class="image_10"
/>
</view>
</view>
<view class="flex-row" v-if="item.sysSignStr">
<text
@click.stop="onSign(v)"
class="text_16"
v-for="(v, i) in item.sysSignStr.split(',')"
:key="i"
>{{ v ? "#" + v : "" }}</text
>
</view>
</view>
</template>
</view>
<view class="flex-row">
<view class="flex-row group_21" v-if="type != 2 && type != 3">
<view
class="flex-row equal-division-item_1"
@click="onForward(item)"
v-if="!item.isForward && type != 0"
>
<image
src="/static/common/img/homepage/reply.png"
class="image_8"
/>
<text class="text_19">{{ item.forwardCount }}</text>
</view>
<view class="flex-row group_10" @click="onDetails(item)">
<image
src="/static/common/img/homepage/comment.png"
class="image_7"
/>
<text class="text_18">{{ item.commentCount }}</text>
</view>
<view class="flex-row group_20">
<!-- <u-icon style="font-size:0.22rem;color:#b4b6bd" v-if="item.isCllect == false"
name="star" @click="onStar(item)"></u-icon> -->
<image
style="width: 42rpx; height: 42rpx"
src="/static/common/img/homepage/star.png"
v-if="item.isCllect == false"
name="star"
@click="onStar(item)"
></image>
<u-icon
style="font-size: 40rpx; color: #ffc300"
v-else
name="star-fill"
@click="onStar(item)"
></u-icon>
<text class="text_17">{{ item.collectCount }}</text>
</view>
<!--
<view
class="flex-row group_20"
v-if="isDel"
@tap="onDelete(item)"
>
<image
src="/static/common/img/homepage/trash.png"
style="width: 42rpx; height: 42rpx"
/>
</view>
-->
</view>
</view>
</view>
</template>
</view>
<template v-if="bottom && list.length > 0">
<view style="height: 0.46rem"></view>
<u-divider
style="bottom: 0.2rem; position: absolute; background: transparent"
color="#6d6d6d"
half-width="200"
border-color="#6d6d6d"
>
{{ text ? text : "已经到底了" }}
</u-divider>
</template>
<u-popup v-model="showDel" mode="bottom" :border-radius="40">
<view class="popup-box">
<view class="popup-btn" @click="delItem">删除</view>
<view class="popup-line"></view>
<view class="popup-btn" @click="showDel = false">取消</view>
</view>
</u-popup>
<u-toast ref="uToast" />
<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
</view>
</view>
</template>
<script>
import NoData from "components/NoData.vue";
export default {
name: "information",
components: {
NoData,
},
// listarray 数据集 typenumber数据类型 bottom 是否显示 nolink控制是否进行转挑
props: [
"list",
"type",
"bottom",
"text",
"schoolId",
"nolink",
"route",
"flag",
"id",
"isEllipsis",
"isDel",
"borderRadius",
"borderNoPadding",
"noShowEmpty",
],
data() {
return {
isindex: -1,
btnShow: false,
state: false,
currentRow: {},
showDel: false,
delRow: {},
};
},
mounted() {},
onLoad() {
this.state = true;
},
methods: {
showDelFn(item) {
this.delRow = item;
this.showDel = true;
},
delItem() {
this.showDel = false;
this.$emit("onDelete", {
type: this.delRow.type,
id: this.delRow.id,
});
},
//详情
onDetails(item) {
console.log(JSON.parse(JSON.stringify(item)), "item-JSON-");
this.currentRow = item;
uni.$off("echoList");
uni.$on("echoList", (result) => {
// console.log('echoList----')
// 收藏
if (result.type === "star") {
console.log("%c%s", "color:red", "收藏回显");
console.log(result, "result");
this.currentRow.isCllect = result.data.isCllect;
console.log(result.isCllect, "result.isCllect");
if (result.data.isCllect === true) {
this.currentRow.collectCount++;
}
if (result.data.isCllect === false) {
this.currentRow.collectCount && this.currentRow.collectCount--;
}
}
// 评价
if (result.type === "evaluate") {
console.log("%c%s", "color:red", "评价回显");
console.log(result, "result");
this.currentRow.commentCount = result.data.commentCount;
}
});
// return
if (this.nolink) {
return;
}
if (item.isDelete) {
return;
}
item.flag = this.flag;
item.route = this.route;
item.mytype = this.type;
item.myschoolId = this.id;
if (this.type == 3) {
item.mytype = item.type;
}
// return
this.$u.route({
url: "pages/AlumniCircle/ArticleDetails/ArticleDetails",
params: {
data: JSON.stringify(item),
isDel:this.isDel
},
});
},
toDetil(id) {
this.$u.route({
url: "/pages/AlumniCircle/userDetail/userDetail?id=" + id + "&type=4",
});
},
//收藏
onStar(item) {
item.type = this.type;
this.$emit("onStar", item);
},
//转发
async onForward(item) {
console.log(JSON.parse(JSON.stringify(item)), "item-JSON-");
// return
this.currentRow = item;
uni.$off("echoList");
uni.$on("echoList", (result) => {
console.log("%c%s", "color:red", "echoList----");
// 转发
if (result.type === "forward") {
console.log("%c%s", "color:red", "转发回显");
console.log(result, "result");
this.currentRow.forwardCount++;
}
});
// 判断当前学校是否认证,未认证不可转发
const req = {
userId: this.vuex_user.id,
};
const res = await this.$u.apiList.MyPage(req);
console.log(JSON.parse(JSON.stringify(res)), "res");
const edcationList = res.edcationList;
if (!edcationList.length) {
return this.$refs.uToast.show({
title: "认证后可进行转发操作",
type: "none",
});
}
const findRow = edcationList.find((x) => x.isSelected === true);
if ([0, 2].includes(findRow.certifyStatus)) {
return this.$refs.uToast.show({
title: "认证后可进行转发操作",
type: "none",
});
}
if (this.schoolId) {
item.schoolId = this.schoolId;
}
item.route = this.route;
if (item.isForward) return;
this.$u.route({
url: "pages/AlumniCircle/forward/forward",
params: {
data: JSON.stringify(item),
},
});
},
//图片预览
clickImg(item) {
if (this.route == 3 || this.nolink) {
item = this.$u.http.config.imgUrl + item;
var images = [];
images.push(item);
uni.previewImage({
// 图片路径必须是一个数组 => ['']
current: 0,
urls: images,
});
}
this.$emit("clickImg", item);
},
onSign(v) {
this.$emit("onSign", v);
},
//删除
onDelete(item) {
this.$emit("onDelete", {
type: item.type,
id: item.id,
});
},
//删除收藏
onDelCollet(item) {
this.$emit("onDelCollet", item.collectId);
},
},
};
</script>
<style lang="scss">
.btns {
background-color: #fff;
box-shadow: 0 0 0.05rem #ccc;
border-radius: 0.05rem;
position: absolute;
bottom: 100%;
white-space: nowrap;
.item {
line-height: 2;
padding: 0 0.1rem;
}
}
::v-deep .u-divider-text {
line-height: 2;
}
.Information {
background-color: rgb(246, 247, 250);
// margin-top: 0.1rem;
.list-item {
padding: 0.18rem 0.2rem;
background-color: rgb(255, 255, 255);
margin-bottom: 0.1rem;
position: relative;
width: 100%;
// width: calc(100% - 50rpx);
// margin: 0.1rem auto 0;
// border-radius: 24rpx 24rpx 24rpx 24rpx;
// border: 2rpx solid #F7F6F9;
overflow: hidden;
.shield {
position: absolute;
top: 0.05rem;
width: 100%;
color: #ff9b00;
left: 0.1rem;
}
.view {
margin-right: 0.051rem;
}
.group_9 {
// margin-right: 0.13rem;
margin-top: 0.1rem;
width: 100%;
.text_14 {
align-self: flex-start;
color: rgb(2, 2, 2);
font-size: 0.16rem;
font-family: Adobe Heiti Std;
line-height: 2;
width: 100%;
word-wrap: break-word;
}
.text_15 {
// margin-top: 0.11rem;
color: rgb(73, 76, 87);
font-size: 0.14rem;
font-family: Adobe Heiti Std;
line-height: 0.24rem;
text-indent: 0.2rem;
word-wrap: break-word;
}
.text_16 {
margin-left: 0.04rem;
margin-top: 0.12rem;
align-self: flex-start;
// color: rgb(44, 109, 255);
color: #298bc3;
font-size: 0.14rem;
font-family: PingFang;
line-height: 0.13rem;
}
}
.group_21 {
margin-top: 0.1rem;
justify-content: space-between;
width: 90%;
margin: 0.1rem auto 0;
.group_20 {
justify-content: center;
flex: 1;
// margin: 0.025rem 0;
.image_6 {
flex-shrink: 0;
width: 42rpx;
height: 42rpx;
}
.text_17 {
margin-left: 5rpx;
margin-top: 8rpx;
color: rgb(180, 182, 189);
font-size: 0.14rem;
font-family: PingFang;
line-height: 0.11rem;
}
}
.group_10 {
justify-content: center;
flex: 1;
align-self: center;
.image_7 {
flex-shrink: 0;
width: 42rpx;
height: 42rpx;
}
.text_18 {
margin-left: 5rpx;
margin-top: 8rpx;
color: rgb(180, 182, 189);
font-size: 0.14rem;
font-family: PingFang;
line-height: 0.11rem;
}
}
.equal-division-item_1 {
flex: 1;
justify-content: center;
align-self: center;
.image_8 {
width: 42rpx;
height: 42rpx;
}
.text_19 {
margin-left: 5rpx;
margin-top: 8rpx;
color: rgb(180, 182, 189);
font-size: 0.14rem;
font-family: PingFang;
line-height: 0.11rem;
}
}
}
}
.border-radius {
border-radius: 24rpx;
width: calc(100% - 48rpx);
margin: 0.1rem auto 0;
}
.border-noPadding {
border-radius: 24rpx;
margin: 0.1rem auto 0;
}
.list-item:last-child {
margin-bottom: 0;
}
.imgList {
padding-top: 0.1rem;
.flex-row {
flex-wrap: wrap;
}
image {
width: 33%;
height: 1rem;
margin: 0 0.5% 0.5% 0;
}
image:nth-child(3n) {
margin-right: 0;
}
}
.delete-item {
box-sizing: border-box;
.item-text {
padding-top: 0.05rem;
color: #000000;
}
.icon-1 {
}
}
.group_8 {
height: 0.32rem;
position: relative;
.image_3 {
width: 0.3rem !important;
height: 0.3rem !important;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
}
.text_8 {
color: rgb(2, 2, 2);
font-size: 0.14rem;
font-family: PingFang;
line-height: 0.13rem;
}
.text_43 {
position: absolute;
left: 0.37rem;
top: 0.02rem;
}
.text_9 {
color: rgb(184, 184, 184);
font-size: 0.12rem;
font-family: PingFang;
line-height: 0.12rem;
position: absolute;
left: 0.37rem;
bottom: 0;
}
.text_11 {
color: rgb(184, 184, 184);
font-size: 0.12rem;
font-family: PingFang;
line-height: 0.12rem;
position: absolute;
left: 0.97rem;
bottom: 0;
}
.text_20 {
position: absolute;
left: 0.36rem;
top: 0.02rem;
}
}
}
.popup-box {
padding: 10rpx 0;
.popup-btn {
font-size: 34rpx;
text-align: center;
padding: 30rpx;
}
.popup-line {
height: 20rpx;
background: #f7f7f8;
}
}
</style>