699 lines
19 KiB
Vue
699 lines
19 KiB
Vue
<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,
|
||
},
|
||
// list（array） 数据集 type（number）数据类型 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>
|