Feat：店铺资讯评论
This commit is contained in:
LinCyJang
+13
@@ -273,4 +273,17 @@ export function getMerchantApply() {
|
|||||||
return request.get("/merchantApply/userHotels", {}, {login: true})
|
return request.get("/merchantApply/userHotels", {}, {login: true})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取用户评论列表
|
||||||
|
*/
|
||||||
|
export function getCommentList(params) {
|
||||||
|
return request.get("/user/reply/list", params, {login: true})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加用户评论
|
||||||
|
*/
|
||||||
|
export function addComment(data) {
|
||||||
|
return request.post("/user/reply/add", data, {login: true})
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,485 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="c_total">资讯评论</view>
|
||||||
|
<template v-if="dataList && dataList.length">
|
||||||
|
<view class="c_comment" v-for="(item1, index1) in dataList" :key="item1.id">
|
||||||
|
<!-- 一级评论 -->
|
||||||
|
<CommonComp
|
||||||
|
:data="item1"
|
||||||
|
@likeClick="() => likeClick({ item1, index1 })"
|
||||||
|
@replyClick="() => replyClick({ item1, index1 })"
|
||||||
|
@deleteClick="() => deleteClick({ item1, index1 })"
|
||||||
|
/>
|
||||||
|
<view class="children_item" v-if="item1.children && item1.children.length">
|
||||||
|
<!-- 二级评论 -->
|
||||||
|
<CommonComp
|
||||||
|
v-for="(item2, index2) in item1.childrenShow"
|
||||||
|
:key="item2.id"
|
||||||
|
:data="item2"
|
||||||
|
:pData="item1"
|
||||||
|
@likeClick="() => likeClick({ item1, index1, item2, index2 })"
|
||||||
|
@replyClick="() => replyClick({ item1, index1, item2, index2 })"
|
||||||
|
@deleteClick="() => deleteClick({ item1, index1, item2, index2 })"
|
||||||
|
/>
|
||||||
|
<!-- 展开二级评论 -->
|
||||||
|
<view
|
||||||
|
class="expand_reply"
|
||||||
|
v-if="expandTxtShow({ item1, index1 })"
|
||||||
|
@tap="() => expandReplyFun({ item1, index1 })"
|
||||||
|
>
|
||||||
|
<span class="txt"> 展开{{ item1.children.length - item1.childrenShow.length }}条回复 </span>
|
||||||
|
<uni-icons type="down" size="24" color="#007aff"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<!-- 折叠二级评论 -->
|
||||||
|
<view
|
||||||
|
class="shrink_reply"
|
||||||
|
v-if="shrinkTxtShow({ item1, index1 })"
|
||||||
|
@tap="() => shrinkReplyFun({ item1, index1 })"
|
||||||
|
>
|
||||||
|
<span class="txt"> 收起回复内容 </span>
|
||||||
|
<uni-icons type="up" size="24" color="#007aff"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<!-- 空盒子 -->
|
||||||
|
<view class="empty_box" v-else>
|
||||||
|
<uni-icons type="chatboxes" size="36" color="#c0c0c0"></uni-icons>
|
||||||
|
<view>
|
||||||
|
<span class="txt"> 这里是一片荒草地, </span>
|
||||||
|
<span class="txt click" @click="() => newCommentFun()">说点什么...</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 评论弹窗 -->
|
||||||
|
<uni-popup ref="cPopupRef" type="bottom" @change="popChange">
|
||||||
|
<view class="c_popup_box">
|
||||||
|
<view class="reply_text">
|
||||||
|
<template v-if="Object.keys(replyTemp).length">
|
||||||
|
<span class="text_aid">回复给</span>
|
||||||
|
<img
|
||||||
|
class="user_avatar"
|
||||||
|
:src="replyTemp.item2 ? replyTemp.item2.user_avatar : replyTemp.item1.user_avatar"
|
||||||
|
/>
|
||||||
|
<span class="text_main">{{ replyTemp.item2 ? replyTemp.item2.user_name : replyTemp.item1.user_name }}</span>
|
||||||
|
</template>
|
||||||
|
<span v-else class="text_main">发表新评论</span>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
<view class="text_area">
|
||||||
|
<uni-easyinput
|
||||||
|
class="text_area"
|
||||||
|
type="textarea"
|
||||||
|
v-model="commentValue"
|
||||||
|
:placeholder="commentPlaceholder"
|
||||||
|
:focus="focus"
|
||||||
|
trim
|
||||||
|
autoHeight
|
||||||
|
maxlength="300"
|
||||||
|
></uni-easyinput>
|
||||||
|
</view>
|
||||||
|
<view class="send_btn" @tap="() => sendClick()">发送</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
<!-- 删除弹窗 -->
|
||||||
|
<uni-popup ref="delPopupRef" type="dialog">
|
||||||
|
<uni-popup-dialog
|
||||||
|
mode="base"
|
||||||
|
title=""
|
||||||
|
content="确定删除这条评论吗?"
|
||||||
|
:before-close="true"
|
||||||
|
@close="delCloseFun"
|
||||||
|
@confirm="delConfirmFun"
|
||||||
|
></uni-popup-dialog>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CommonComp from "./componets/common";
|
||||||
|
export default {
|
||||||
|
components: { CommonComp },
|
||||||
|
props: {
|
||||||
|
/** 登陆用户信息
|
||||||
|
* id: number // 登陆用户id
|
||||||
|
* user_name: number // 登陆用户名
|
||||||
|
* user_avatar: string // 登陆用户头像地址
|
||||||
|
*/
|
||||||
|
myInfo: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
/** 文章作者信息
|
||||||
|
* id: number // 文章作者id
|
||||||
|
* user_name: number // 文章作者名
|
||||||
|
* user_avatar: string // 文章作者头像地址
|
||||||
|
*/
|
||||||
|
userInfo: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
/** 评论列表
|
||||||
|
* id: number // 评论id
|
||||||
|
* parent_id: number // 父级评论id
|
||||||
|
* reply_id: number // 被回复人评论id
|
||||||
|
* reply_name: string // 被回复人名称
|
||||||
|
* user_name: string // 用户名
|
||||||
|
* user_avatar: string // 评论者头像地址
|
||||||
|
* user_content: string // 评论内容
|
||||||
|
* is_like: boolean // 是否点赞
|
||||||
|
* like_count: number // 点赞数统计
|
||||||
|
* create_time: string // 创建时间
|
||||||
|
*/
|
||||||
|
tableData: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
// 评论总数
|
||||||
|
tableTotal: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
// 评论删除模式
|
||||||
|
// bind - 当被删除的一级评论存在回复评论, 那么该评论内容变更显示为[当前评论内容已被移除]
|
||||||
|
// only - 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
|
||||||
|
// all - 删除所有评论包括回复评论
|
||||||
|
deleteMode: {
|
||||||
|
type: String,
|
||||||
|
default: "all",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataList: [], // 渲染数据(前端的格式)
|
||||||
|
replyTemp: {}, // 回复临时数据
|
||||||
|
isNewComment: false, // 是否为新评论
|
||||||
|
focus: false, // 评论弹窗
|
||||||
|
commentValue: "", // 输入框值
|
||||||
|
commentPlaceholder: "说点什么...", // 输入框占位符
|
||||||
|
delTemp: {}, // 删除临时数据
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
tableData: {
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal.length !== this.dataList.length) {
|
||||||
|
this.dataList = this.treeTransForm(newVal);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
// 数据转换
|
||||||
|
treeTransForm(data) {
|
||||||
|
let newData = JSON.parse(JSON.stringify(data));
|
||||||
|
let result = [];
|
||||||
|
let map = {};
|
||||||
|
newData.forEach((item, i) => {
|
||||||
|
item.owner = item.user_id === this.myInfo.user_id; // 是否为当前登陆用户 可以对自己的评论进行删除 不能回复
|
||||||
|
item.author = item.user_id === this.userInfo.user_id; // 是否为作者 显示标记
|
||||||
|
map[item.id] = item;
|
||||||
|
});
|
||||||
|
newData.forEach((item) => {
|
||||||
|
let parent = map[item.parent_id];
|
||||||
|
if (parent) {
|
||||||
|
(parent.children || (parent.children = [])).push(item); // 所有回复
|
||||||
|
if (parent.children.length === 1) {
|
||||||
|
(parent.childrenShow = []).push(item); // 显示的回复
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
result.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
// 点赞
|
||||||
|
setLike(item) {
|
||||||
|
item.is_like = !item.is_like;
|
||||||
|
item.like_count = item.is_like ? item.like_count + 1 : item.like_count - 1;
|
||||||
|
},
|
||||||
|
likeClick({ item1, index1, item2, index2 }) {
|
||||||
|
let item = item2 || item1;
|
||||||
|
this.setLike(item);
|
||||||
|
this.$emit("likeFun", { params: item }, (res) => {
|
||||||
|
// 请求后端失败, 重置点赞
|
||||||
|
setLike(item);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 回复
|
||||||
|
replyClick({ item1, index1, item2, index2 }) {
|
||||||
|
this.replyTemp = JSON.parse(JSON.stringify({ item1, index1, item2, index2 }));
|
||||||
|
this.$refs["cPopupRef"].open();
|
||||||
|
},
|
||||||
|
// 发起新评论
|
||||||
|
newCommentFun() {
|
||||||
|
this.isNewComment = true;
|
||||||
|
this.$refs["cPopupRef"].open();
|
||||||
|
},
|
||||||
|
// 评论弹窗
|
||||||
|
popChange(e) {
|
||||||
|
// 关闭弹窗
|
||||||
|
if (!e.show) {
|
||||||
|
this.commentValue = ""; // 清空输入框值
|
||||||
|
this.replyTemp = {}; // 清空被回复人信息
|
||||||
|
this.isNewComment = false; // 恢复是否为新评论默认值
|
||||||
|
}
|
||||||
|
this.focus = e.show;
|
||||||
|
},
|
||||||
|
// 发送评论
|
||||||
|
sendClick({ item1, index1, item2, index2 } = this.replyTemp) {
|
||||||
|
let item = item2 || item1;
|
||||||
|
let params = {};
|
||||||
|
// 新评论
|
||||||
|
if (this.isNewComment) {
|
||||||
|
params = {
|
||||||
|
id: Math.random(), // 评论id
|
||||||
|
parent_id: null, // 父级评论id
|
||||||
|
reply_id: null, // 被回复评论id
|
||||||
|
reply_name: null, // 被回复人名称
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// 回复评论
|
||||||
|
params = {
|
||||||
|
id: Math.random(), // 评论id
|
||||||
|
parent_id: item?.parent_id ?? item.id, // 父级评论id
|
||||||
|
reply_id: item.id, // 被回复评论id
|
||||||
|
reply_name: item.user_name, // 被回复人名称
|
||||||
|
};
|
||||||
|
}
|
||||||
|
params = {
|
||||||
|
...params,
|
||||||
|
user_id: this.myInfo.user_id, // 用户id
|
||||||
|
user_name: this.myInfo.user_name, // 用户名
|
||||||
|
user_avatar: this.myInfo.user_avatar, // 用户头像地址
|
||||||
|
user_content: this.commentValue, // 用户评论内容
|
||||||
|
is_like: false, // 是否点赞
|
||||||
|
like_count: 0, // 点赞数统计
|
||||||
|
create_time: "刚刚", // 创建时间
|
||||||
|
owner: true, // 是否为所有者 所有者可以进行删除 管理员默认true
|
||||||
|
};
|
||||||
|
|
||||||
|
uni.showLoading({
|
||||||
|
title: "正在发送",
|
||||||
|
mask: true,
|
||||||
|
});
|
||||||
|
this.$emit("replyFun", { params }, (res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
// 拿到后端返回的id赋值, 因为删除要用到id
|
||||||
|
params = { ...params, id: res.id };
|
||||||
|
// 新评论
|
||||||
|
if (this.isNewComment) {
|
||||||
|
this.dataList.push(params);
|
||||||
|
} else {
|
||||||
|
// 回复
|
||||||
|
let c_data = this.dataList[index1];
|
||||||
|
(c_data.children || (c_data.children = [])).push(params);
|
||||||
|
// 如果已展开所有回复, 那么此时插入children长度会大于childrenShow长度1, 所以就直接展开显示即可
|
||||||
|
if (c_data.children.length === (c_data.childrenShow || (c_data.childrenShow = [])).length + 1) {
|
||||||
|
c_data.childrenShow.push(params);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$emit("update:tableTotal", this.tableTotal + 1);
|
||||||
|
this.$refs["cPopupRef"].close();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//删除
|
||||||
|
deleteClick({ item1, index1, item2, index2 }) {
|
||||||
|
this.delTemp = JSON.parse(JSON.stringify({ item1, index1, item2, index2 }));
|
||||||
|
this.$refs["delPopupRef"].open();
|
||||||
|
},
|
||||||
|
// 关闭删除弹窗
|
||||||
|
delCloseFun() {
|
||||||
|
this.delTemp = {};
|
||||||
|
this.$refs["delPopupRef"].close();
|
||||||
|
},
|
||||||
|
// 确定删除
|
||||||
|
delConfirmFun({ item1, index1, item2, index2 } = this.delTemp) {
|
||||||
|
const deleteMode = this.deleteMode;
|
||||||
|
let c_data = this.dataList[index1];
|
||||||
|
uni.showLoading({
|
||||||
|
title: "正在删除",
|
||||||
|
mask: true,
|
||||||
|
});
|
||||||
|
// 删除二级评论
|
||||||
|
if (index2 >= 0) {
|
||||||
|
this.$emit("deleteFun", { params: [c_data.children[index2].id], mode: deleteMode }, (res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.$emit("update:tableTotal", this.tableTotal - 1);
|
||||||
|
c_data.children.splice(index2, 1);
|
||||||
|
c_data.childrenShow.splice(index2, 1);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 删除一级评论
|
||||||
|
if (c_data?.children?.length) {
|
||||||
|
// 如果一级评论包含回复评论
|
||||||
|
switch (deleteMode) {
|
||||||
|
case "bind":
|
||||||
|
// 一级评论内容展示修改为: 当前评论内容已被移除
|
||||||
|
this.$emit(
|
||||||
|
"deleteFun",
|
||||||
|
{
|
||||||
|
params: [c_data.id],
|
||||||
|
mode: deleteMode,
|
||||||
|
},
|
||||||
|
(res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
c_data.user_content = "当前评论内容已被移除";
|
||||||
|
}
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "only":
|
||||||
|
// 后端自行根据删除的一级评论id, 查找关联的子评论进行删除
|
||||||
|
this.$emit(
|
||||||
|
"deleteFun",
|
||||||
|
{
|
||||||
|
params: [c_data.id],
|
||||||
|
mode: deleteMode,
|
||||||
|
},
|
||||||
|
(res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.$emit("update:tableTotal", this.tableTotal - c_data.children.length + 1);
|
||||||
|
this.dataList.splice(index1, 1);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
// all
|
||||||
|
// 收集子评论id, 提交给后端统一删除
|
||||||
|
let delIdArr = [c_data.id];
|
||||||
|
c_data.children.forEach((_, i) => {
|
||||||
|
delIdArr.push(_.id);
|
||||||
|
});
|
||||||
|
this.$emit("deleteFun", { params: delIdArr, mode: deleteMode }, (res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.$emit("update:tableTotal", this.tableTotal - c_data.children.length + 1);
|
||||||
|
this.dataList.splice(index1, 1);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 一级评论无回复, 直接删除
|
||||||
|
this.$emit("deleteFun", { params: [c_data.id], mode: deleteMode }, (res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.$emit("update:tableTotal", this.tableTotal - 1);
|
||||||
|
this.dataList.splice(index1, 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.delCloseFun();
|
||||||
|
},
|
||||||
|
// 展开评论if
|
||||||
|
expandTxtShow({ item1, index1 }) {
|
||||||
|
return item1.childrenShow?.length && item1.children.length - item1.childrenShow.length;
|
||||||
|
},
|
||||||
|
// 展开更多评论
|
||||||
|
expandReplyFun({ item1, index1 }) {
|
||||||
|
let csLen = this.dataList[index1].childrenShow.length;
|
||||||
|
this.dataList[index1].childrenShow.push(
|
||||||
|
...this.dataList[index1].children.slice(csLen, csLen + 6) // 截取5条评论
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 收起评论if
|
||||||
|
shrinkTxtShow({ item1, index1 }) {
|
||||||
|
return item1.childrenShow?.length >= 2 && item1.children.length - item1.childrenShow.length === 0;
|
||||||
|
},
|
||||||
|
// 收起更多评论
|
||||||
|
shrinkReplyFun({ item1, index1 }) {
|
||||||
|
this.dataList[index1].childrenShow = [];
|
||||||
|
this.dataList[index1].childrenShow.push(
|
||||||
|
...this.dataList[index1].children.slice(0, 1) // 截取1条评论
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
////////////////////////
|
||||||
|
.center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
////////////////////////
|
||||||
|
.c_total {
|
||||||
|
padding: 20rpx 30rpx 0 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.empty_box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 150rpx 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
.txt {
|
||||||
|
color: $uni-text-color-disable;
|
||||||
|
}
|
||||||
|
.click {
|
||||||
|
color: $uni-color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.c_comment {
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
.children_item {
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-left: 80rpx;
|
||||||
|
background-color: $uni-bg-color-grey;
|
||||||
|
.expand_reply,
|
||||||
|
.shrink_reply {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-left: 80rpx;
|
||||||
|
.txt {
|
||||||
|
font-weight: 600;
|
||||||
|
color: $uni-color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.c_popup_box {
|
||||||
|
background-color: #fff;
|
||||||
|
.reply_text {
|
||||||
|
@extend .center;
|
||||||
|
padding: 20rpx 20rpx 0 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
.text_aid {
|
||||||
|
color: $uni-text-color-grey;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
.user_avatar {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
margin-left: 12rpx;
|
||||||
|
}
|
||||||
|
.text_main {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
@extend .center;
|
||||||
|
.text_area {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
.send_btn {
|
||||||
|
@extend .center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #fff;
|
||||||
|
background-color: $uni-color-primary;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
margin-left: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,182 @@
|
|||||||
|
<template>
|
||||||
|
<view class="comment_item">
|
||||||
|
<view class="top">
|
||||||
|
<view class="top_left">
|
||||||
|
<img class="user_avatar" :src="data.user_avatar" />
|
||||||
|
<uni-tag v-if="data.author" class="tag" type="primary" :inverted="false" text="作者" size="mini" circle />
|
||||||
|
<span class="user_name">{{ data.user_name }}</span>
|
||||||
|
<span class="user_name">{{ cReplyName }}</span>
|
||||||
|
</view>
|
||||||
|
<view class="top_right" @click="likeClick(data)">
|
||||||
|
<span :class="[data.is_like ? 'active' : '', 'like_count']">{{ cLikeCount }}</span>
|
||||||
|
<uni-icons v-show="data.is_like" type="hand-up-filled" size="24" color="#007aff"></uni-icons>
|
||||||
|
<uni-icons v-show="!data.is_like" type="hand-up" size="24" color="#999"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content" @click="replyClick(data)">
|
||||||
|
{{ c_content }}
|
||||||
|
<span class="shrink" v-if="isShrink" @click.stop="expandContentFun(data.user_content)">...展开</span>
|
||||||
|
<span
|
||||||
|
class="shrink"
|
||||||
|
v-if="!isShrink && user_content.length > contentShowLength"
|
||||||
|
@click.stop="shrinkContentFun(data.user_content)"
|
||||||
|
>
|
||||||
|
收起</span
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<view class="bottom">
|
||||||
|
<span class="create_time">{{ data.create_time }}</span>
|
||||||
|
<span v-if="data.owner" class="delete" @click="deleteClick(data)">删除</span>
|
||||||
|
<!-- <span v-else class="reply" @click="replyClick(props.data)"
|
||||||
|
>回复</span
|
||||||
|
> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 评论数据
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 评论过长处理
|
||||||
|
contentShowLength: 70, // 默认显示评论字符
|
||||||
|
user_content: "",
|
||||||
|
isShrink: false, // 是否收缩评论
|
||||||
|
c_content: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 被回复人名称
|
||||||
|
cReplyName: function () {
|
||||||
|
return this.data?.reply_name ? ` ▸ ` + this.data?.reply_name : "";
|
||||||
|
},
|
||||||
|
// 点赞数显示
|
||||||
|
cLikeCount: function () {
|
||||||
|
return this.data.like_count === 0 ? "" : this.data.like_count > 99 ? `99+` : this.data.like_count;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 删除变更显示定制
|
||||||
|
"data.user_content": function (newVal, oldVal) {
|
||||||
|
if (newVal !== oldVal) {
|
||||||
|
this.c_content = newVal;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 监听isShrink变化，更新c_content
|
||||||
|
isShrink: function (newVal) {
|
||||||
|
this.c_content = newVal ? this.user_content.slice(0, this.contentShowLength + 1) : this.user_content;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 展开文字
|
||||||
|
expandContentFun() {
|
||||||
|
this.isShrink = false;
|
||||||
|
},
|
||||||
|
// 收起文字
|
||||||
|
shrinkContentFun() {
|
||||||
|
this.isShrink = true;
|
||||||
|
},
|
||||||
|
// 点赞
|
||||||
|
likeClick(item) {
|
||||||
|
this.$emit("likeClick", item);
|
||||||
|
},
|
||||||
|
// 回复
|
||||||
|
replyClick(item) {
|
||||||
|
// 自己不能回复自己
|
||||||
|
if (item.owner) return;
|
||||||
|
this.$emit("replyClick", item);
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
deleteClick(item) {
|
||||||
|
this.$emit("deleteClick", item);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.user_content = this.data.user_content;
|
||||||
|
this.isShrink = this.user_content.length > this.contentShowLength;
|
||||||
|
this.c_content = this.isShrink ? this.user_content.slice(0, this.contentShowLength + 1) : this.user_content;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
////////////////////
|
||||||
|
.center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ellipsis {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
////////////////////
|
||||||
|
.comment_item {
|
||||||
|
font-size: 28rpx;
|
||||||
|
.top {
|
||||||
|
@extend .center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.top_left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
.user_avatar {
|
||||||
|
width: 68rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
.tag {
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
.user_name {
|
||||||
|
@extend .ellipsis;
|
||||||
|
max-width: 180rpx;
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top_right {
|
||||||
|
@extend .center;
|
||||||
|
.like_count {
|
||||||
|
color: #8c8c8c;
|
||||||
|
&.active {
|
||||||
|
color: #007aff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding: 10rpx;
|
||||||
|
margin-left: 70rpx;
|
||||||
|
color: #333;
|
||||||
|
&:active {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
.shrink {
|
||||||
|
padding: 20rpx 20rpx 20rpx 0rpx;
|
||||||
|
color: #007aff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
padding-left: 80rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
.create_time {
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
.delete {
|
||||||
|
padding: 20rpx 20rpx 0 20rpx;
|
||||||
|
color: #c0c0c0;
|
||||||
|
}
|
||||||
|
.reply {
|
||||||
|
color: #007aff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+2
-1
@@ -447,7 +447,8 @@
|
|||||||
{
|
{
|
||||||
"path": "inn/innInfoDetail",
|
"path": "inn/innInfoDetail",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "资讯详情"
|
"navigationBarTitleText": "资讯详情",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -293,6 +293,14 @@
|
|||||||
class="seeNum-txt"
|
class="seeNum-txt"
|
||||||
>{{ item.zan }}</text>
|
>{{ item.zan }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="flex">
|
||||||
|
<!-- <image
|
||||||
|
:src="webUrl + '/20230803152147141807.png'"
|
||||||
|
class="icon"
|
||||||
|
/> -->
|
||||||
|
<u-icon name="chat" size="24"></u-icon>
|
||||||
|
<text class="seeNum-txt">{{ item.replyCount || 0 }}</text>
|
||||||
|
</view>
|
||||||
<view v-if="isMyInn" class="flex more-btn" @click="toggleMoreHandle(index)">
|
<view v-if="isMyInn" class="flex more-btn" @click="toggleMoreHandle(index)">
|
||||||
<image
|
<image
|
||||||
:src="webUrl + '/page/hotel/more.png'"
|
:src="webUrl + '/page/hotel/more.png'"
|
||||||
@@ -453,7 +461,7 @@ import {
|
|||||||
getHotelNewsZan,
|
getHotelNewsZan,
|
||||||
getHotelShareBackgroundImage,
|
getHotelShareBackgroundImage,
|
||||||
hotelNewsView,
|
hotelNewsView,
|
||||||
getMerchantApply
|
getMerchantApply,
|
||||||
} from "@/api/inn.js"
|
} from "@/api/inn.js"
|
||||||
import {formatDateTime} from "@/utils"
|
import {formatDateTime} from "@/utils"
|
||||||
import {getUrlParam} from "@/utils/common.js"
|
import {getUrlParam} from "@/utils/common.js"
|
||||||
@@ -723,7 +731,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
infoClick: function (info) {
|
infoClick: function (info) {
|
||||||
// this.$yrouter.push('/pagesInn/inn/innInfoDetail?id=' + info.id)
|
this.$yrouter.push('/pagesInn/inn/innInfoDetail?id=' + info.id)
|
||||||
},
|
},
|
||||||
coverPlay(){
|
coverPlay(){
|
||||||
this.videoPlayers.forEach(player => {
|
this.videoPlayers.forEach(player => {
|
||||||
|
|||||||
+839
-48
@@ -1,83 +1,874 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="pages-inn-info-detail">
|
<view class="info-section">
|
||||||
<view class="top-box">
|
<view class="info-item">
|
||||||
<view class="title more-t">{{ info.name }}</view>
|
<view
|
||||||
|
:class="item.isTop === 1 ? 'info-item-top' : ''"
|
||||||
<view class="sub flex jc-between ai-center">
|
:style="{
|
||||||
<text class="datetime">{{ info.createdTime }}</text>
|
'background-image': item.isTop
|
||||||
<view class="flex ai-center">
|
? 'url(' + webUrl + '/page/hotel/info-top-bg.png)'
|
||||||
<view class="flex ai-center" style="margin-right: 28rpx">
|
: 'none',
|
||||||
<image :src="webUrl+'/20230803152147141807.png'"/>
|
}"
|
||||||
<view class="num">{{ info.pv }}</view>
|
class="info-item-header"
|
||||||
|
>
|
||||||
|
<view class="name">
|
||||||
|
{{ item.name }}
|
||||||
|
</view>
|
||||||
|
<view class="intro">
|
||||||
|
{{ item.intro }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item-body">
|
||||||
|
<view v-if="item.type === 'NT_VIDEO'" class="video">
|
||||||
|
<video
|
||||||
|
:src="item.video"
|
||||||
|
:poster="item.video + '?vframe/jpg/offset/1'"
|
||||||
|
controls
|
||||||
|
play-btn-position="center"
|
||||||
|
class="video-item"
|
||||||
|
:id="'video-item' + index"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view v-else>
|
||||||
|
<img-box
|
||||||
|
v-if="item.resources"
|
||||||
|
:imgList="item.resources"
|
||||||
|
:num="item.resources.length"
|
||||||
|
:img-radius="10"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item-bottom">
|
||||||
|
<view class="time">
|
||||||
|
{{
|
||||||
|
item.publishTime
|
||||||
|
? item.publishTime.replace(/-/g, ".").substr(0, 10)
|
||||||
|
: ""
|
||||||
|
}}
|
||||||
|
</view>
|
||||||
|
<view class="btns">
|
||||||
|
<view class="flex">
|
||||||
|
<image :src="webUrl + '/20230803152147141807.png'" class="icon" />
|
||||||
|
<text class="seeNum-txt">{{ item.pv }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="flex ai-center" @click="likeInfo">
|
<view class="flex">
|
||||||
<image :src="webUrl+'/20230803151308999742.png'" v-if="info.zanVo != null"/>
|
<image
|
||||||
<image :src="webUrl+'/20230803151302213857.png'" v-else/>
|
v-if="!item.zanVo"
|
||||||
<view class="num">{{ info.zan }}</view>
|
:src="webUrl + '/page/hotel/zan-off-2.png'"
|
||||||
|
class="zan-off-icon"
|
||||||
|
@click="likeInfo"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
:src="webUrl + '/page/hotel/zan-on-2.png'"
|
||||||
|
class="zan-on-icon"
|
||||||
|
@click="likeInfo"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
v-show="item.zan > 0"
|
||||||
|
:class="item.zanVo ? 'on' : ''"
|
||||||
|
class="seeNum-txt"
|
||||||
|
>{{ item.zan }}</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<view class="flex">
|
||||||
|
<u-icon name="chat" size="24"></u-icon>
|
||||||
|
<text class="seeNum-txt">{{ item.replyCount || 0 }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="comment-list">
|
||||||
|
<view class="v12-mt-2" v-for="(comment, index) in comments" :key="index" @click="selectComment(comment)">
|
||||||
|
<view class="user-info v12-align-center">
|
||||||
|
<view class="user-avatar">
|
||||||
|
<u-avatar :src="comment.userAvatar"></u-avatar>
|
||||||
|
</view>
|
||||||
|
<view class="user-name v12-ml-3">
|
||||||
|
<view class="v12-font-bold v12-dark-text v12-font-32">
|
||||||
|
<text>{{ comment.userNickName }}</text>
|
||||||
|
<text v-if="comment.isHotelAdmin" class="v12-ml-1 v12-primary v12-white-text v12-font-24 v12-font-weight-400 v12-px-1 v12-radius-8">
|
||||||
|
{{ '店主' }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="v12-font-22 v12-secondary-dark-text v12-mt-1">
|
||||||
|
<text>{{ formatterTime(comment.createTime) }}</text>
|
||||||
|
<text v-if="comment.at">
|
||||||
|
{{ ' 回复 ' + comment.at.atNickName }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="user-info v12-d-flex" >
|
||||||
|
<view class="user-avatar">
|
||||||
|
<view style="opacity: 0;">
|
||||||
|
<u-avatar></u-avatar>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="user-name v12-ml-3">
|
||||||
|
<view class="v12-font-28 v12-dark-text">
|
||||||
|
{{ comment.reply }}
|
||||||
|
</view>
|
||||||
|
<view v-if="comment.children">
|
||||||
|
<view class="v12-mt-2" v-for="(_comment, atIndex) in comment.children" :key="atIndex" @click.stop="selectComment(_comment)">
|
||||||
|
<view class="user-info v12-align-center">
|
||||||
|
<view class="user-avatar">
|
||||||
|
<u-avatar size="35" :src="_comment.userAvatar"></u-avatar>
|
||||||
|
</view>
|
||||||
|
<view class="user-name v12-ml-3">
|
||||||
|
<view class="v12-font-bold v12-dark-text v12-font-32">
|
||||||
|
<text>{{ _comment.userNickName }}</text>
|
||||||
|
<text v-if="_comment.isHotelAdmin" class="v12-ml-1 v12-primary v12-white-text v12-font-24 v12-font-weight-400 v12-px-1 v12-radius-8">
|
||||||
|
{{ '店主' }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="v12-font-22 v12-secondary-dark-text v12-mt-1">
|
||||||
|
<text>{{ formatterTime(_comment.createTime) }}</text>
|
||||||
|
<text v-if="_comment.at">
|
||||||
|
{{ ' 回复 ' + _comment.at.atNickName }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="user-info v12-align-center">
|
||||||
|
<view class="user-avatar">
|
||||||
|
<view style="opacity: 0;">
|
||||||
|
<u-avatar size="35"></u-avatar>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="user-name v12-ml-3">
|
||||||
|
<view class="v12-font-28 v12-dark-text">
|
||||||
|
{{ _comment.reply }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="comment.hasMoreChildren" class="more-text" @click.stop="showMoreComment(comment)">
|
||||||
|
{{ '—— 点击展开更多回复 ——' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="video-box" v-if="info.type==='NT_VIDEO'">
|
</view>
|
||||||
<video style="width: 100%;height: 320rpx;" :src="info.video" controls play-btn-position="center"/>
|
|
||||||
</view>
|
</view>
|
||||||
|
<view class="comment-input-wrap">
|
||||||
|
<view style="width: 100%;">
|
||||||
|
<u-input
|
||||||
|
@focus="commentInputFocus"
|
||||||
|
@change="commentInputChange"
|
||||||
|
:prefixIcon="prefixIcon"
|
||||||
|
class="comment-input"
|
||||||
|
v-model="reply"
|
||||||
|
placeholder="分享你的观点，让世界听见你的声音...">
|
||||||
|
|
||||||
<view class="content-box">
|
<template slot="prefix">
|
||||||
<rich-text :nodes="info.content"/>
|
<view class="v12-align-center">
|
||||||
|
<u-icon :name="prefixIcon"></u-icon>
|
||||||
|
<u--text
|
||||||
|
v-if="currentComment.userNickName"
|
||||||
|
:text="'@' + currentComment.userNickName"
|
||||||
|
margin="0 3px 0 0"
|
||||||
|
type="tips"
|
||||||
|
></u--text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</u-input>
|
||||||
|
</view>
|
||||||
|
<view class="">
|
||||||
|
<view class="send-btn v12-primary v12-white-text" @click="sendComment">发送</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {getHotelNewsDetail, getHotelNewsZan} from "@/api/inn";
|
import { getHotelNewsDetail, getHotelNewsZan, getCommentList, addComment } from "@/api/inn";
|
||||||
|
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
imgBox
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||||
id: null,
|
id: null,
|
||||||
info: null
|
item: {},
|
||||||
}
|
comments: [],
|
||||||
|
reply: '',
|
||||||
|
atUid: '',
|
||||||
|
currentComment: {},
|
||||||
|
prefixIcon: 'edit-pen'
|
||||||
|
};
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
this.id = options.id;
|
this.id = options.id;
|
||||||
this.init();
|
this.init();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
showMoreComment(comment) {
|
||||||
getHotelNewsDetail(this.id).then(({data}) => this.info = data);
|
const params = {
|
||||||
},
|
contentId: this.id,
|
||||||
|
contentType: "hotelNews",
|
||||||
likeInfo() {
|
rootReplyId: comment.id,
|
||||||
let that = this;
|
page: 1,
|
||||||
uni.showLoading();
|
limit: 99999,
|
||||||
getHotelNewsZan(this.id).then((res) => {
|
}
|
||||||
|
uni.showLoading({
|
||||||
|
mask: true,
|
||||||
|
});
|
||||||
|
getCommentList(params).then((res) => {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
|
comment.children = res.data.records
|
||||||
uni.showToast({
|
comment.hasMoreChildren = false
|
||||||
title: res.msg,
|
|
||||||
mask: false,
|
|
||||||
duration: 1500,
|
|
||||||
success() {
|
|
||||||
if (res.status === 200) that.info = res.data;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}).catch((err) => {
|
|
||||||
uni.hideLoading()
|
|
||||||
uni.showToast({
|
|
||||||
title: err.msg + '',
|
|
||||||
icon: 'none',
|
|
||||||
mask: false,
|
|
||||||
duration: 1500
|
|
||||||
});
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
}
|
commentInputChange(e) {
|
||||||
}
|
// 若删除直接将@用户名整个删除
|
||||||
|
if (e === '') {
|
||||||
|
this.currentComment = {}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const split = e.split(' ')
|
||||||
|
if(split[0] !== '' && this.currentComment.userNickName) {
|
||||||
|
this.currentComment = {}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
},
|
||||||
|
commentInputFocus(e) {
|
||||||
|
// this.prefixIcon = ''
|
||||||
|
},
|
||||||
|
selectComment(comment) {
|
||||||
|
this.currentComment = comment;
|
||||||
|
// this.prefixIcon = ''
|
||||||
|
this.reply = ' '
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 格式化时间
|
||||||
|
* @param {*} time 时间
|
||||||
|
* @returns 距离当前时间的时间差
|
||||||
|
* 1. 小于1分钟，显示刚刚
|
||||||
|
* 2. 小于1小时，显示xx分钟前
|
||||||
|
* 3. 小于1天，显示xx小时前
|
||||||
|
* 4. 小于1月，显示xx天前
|
||||||
|
* 5. 小于1年，显示xx月前
|
||||||
|
* 6. 大于1年，显示xxxx年xx月xx日
|
||||||
|
* 7. 其他，显示xxxx-xx-xx
|
||||||
|
*/
|
||||||
|
formatterTime(time) {
|
||||||
|
const now = new Date();
|
||||||
|
const date = new Date(time);
|
||||||
|
const diff = now - date; // 时间差
|
||||||
|
const diffDay = diff / (1000 * 60 * 60 * 24); // 天数
|
||||||
|
const diffHour = diff / (1000 * 60 * 60); // 小时
|
||||||
|
const diffMinute = diff / (1000 * 60); // 分钟
|
||||||
|
if (diffMinute < 1) {
|
||||||
|
return '刚刚';
|
||||||
|
} else if (diffHour < 1) {
|
||||||
|
return `${Math.floor(diffMinute)}分钟前`;
|
||||||
|
} else if (diffDay < 1) {
|
||||||
|
return `${Math.floor(diffHour)}小时前`;
|
||||||
|
} else if (diffDay < 30) {
|
||||||
|
return `${Math.floor(diffDay)}天前`;
|
||||||
|
} else if (diffDay < 365) {
|
||||||
|
return `${Math.floor(diffDay / 30)}月前`;
|
||||||
|
} else if (diffDay < 365 * 10) {
|
||||||
|
return `${Math.floor(diffDay / 365)}年前`;
|
||||||
|
} else {
|
||||||
|
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 发评论
|
||||||
|
*/
|
||||||
|
sendComment() {
|
||||||
|
if (!this.reply.trim()) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入评论内容',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
uni.showLoading({
|
||||||
|
mask: true,
|
||||||
|
});
|
||||||
|
const params = {
|
||||||
|
contentId: this.id,
|
||||||
|
contentType: 'hotelNews',
|
||||||
|
parentReplyId: this.currentComment.parentId || this.currentComment.id,
|
||||||
|
reply: this.reply,
|
||||||
|
atUid: this.currentComment.uid || null,
|
||||||
|
}
|
||||||
|
addComment(params).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
uni.hideLoading();
|
||||||
|
this.getComment()
|
||||||
|
this.reply = ''
|
||||||
|
this.item.replyCount === null ? this.item.replyCount = 1 : this.item.replyCount++
|
||||||
|
})
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
getHotelNewsDetail(this.id).then(({ data }) => (this.item = data));
|
||||||
|
this.getComment();
|
||||||
|
},
|
||||||
|
// contentId int 评论的目标内容ID，必传
|
||||||
|
// contentType string 评论的目标内容类型，必传（店铺资讯传入值hotelNews）
|
||||||
|
// rootReplyId int 根评论ID
|
||||||
|
// page int 页码
|
||||||
|
// limit int 每页数量
|
||||||
|
getComment() {
|
||||||
|
const params = {
|
||||||
|
contentId: this.id,
|
||||||
|
contentType: "hotelNews",
|
||||||
|
page: 1,
|
||||||
|
limit: 99999,
|
||||||
|
}
|
||||||
|
getCommentList(params).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.comments = res.data.records
|
||||||
|
})
|
||||||
|
},
|
||||||
|
likeInfo() {
|
||||||
|
uni.showLoading({
|
||||||
|
mask: true,
|
||||||
|
});
|
||||||
|
getHotelNewsZan(this.id)
|
||||||
|
.then((res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.item = res.data;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
@import "@/assets/css/store.less";
|
||||||
|
.more-text{
|
||||||
|
color:#1B76F0;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.comment-input-wrap{
|
||||||
|
padding: 20rpx 0 ;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: sticky;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
bottom: 0;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.comment-input{
|
||||||
|
height: 70rpx;
|
||||||
|
background: rgba(246,246,246,0.39);
|
||||||
|
border-radius: 12rpx;
|
||||||
|
}
|
||||||
|
.send-btn{
|
||||||
|
border-radius: 16rpx;
|
||||||
|
width: 96rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
}
|
||||||
|
.my-inn-page {
|
||||||
|
padding: 0 0 100rpx 0;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
.cover-box {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.full-img {
|
||||||
|
width: 750rpx;
|
||||||
|
}
|
||||||
|
.video {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.guarantee {
|
||||||
|
margin-right: 16rpx;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background: #0DC5C5;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 22rpx;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.zan-favorite-wrap {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
.on {
|
||||||
|
color: #FF564A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.zan-box {
|
||||||
|
.img {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
margin: 0 8rpx 0 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.favorite-box {
|
||||||
|
.icon {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
margin: 0 8rpx 0 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-img {
|
||||||
|
width: 686rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-section {
|
||||||
|
padding: 40rpx 32rpx 0;
|
||||||
|
background: #F5F5FA;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
width: 332rpx;
|
||||||
|
height: 528rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-right: 22rpx;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
padding: 0 6rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-line {
|
||||||
|
padding: 0 10rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 38rpx;
|
||||||
|
color: #ED0F0F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sales-line {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 8rpx 10rpx 18rpx;
|
||||||
|
border-top: 1rpx solid #EFEFEF;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 34rpx;
|
||||||
|
color: #8D8D8D;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:nth-child(2n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cover {
|
||||||
|
width: 332rpx;
|
||||||
|
height: 332rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.39);
|
||||||
|
border-radius: 8rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
margin-right: 4rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 0 40rpx 0;
|
||||||
|
justify-content: center;
|
||||||
|
.btn-cont {
|
||||||
|
padding: 13rpx 30rpx;
|
||||||
|
border: 1px solid #0DC5C5;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
color: #0DC5C5;
|
||||||
|
.iconfont {
|
||||||
|
margin: 0 0 0 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.innInfoWrap {
|
||||||
|
position: relative;
|
||||||
|
margin-top: -76rpx;
|
||||||
|
padding: 20rpx 36rpx;
|
||||||
|
line-height: 1;
|
||||||
|
z-index: 1;
|
||||||
|
.bg-color {
|
||||||
|
position: absolute;
|
||||||
|
top: -5px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
|
height: 50%;
|
||||||
|
background: linear-gradient(-180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
|
||||||
|
|
||||||
|
.box-mask {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 166rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 32rpx 12rpx 0;
|
||||||
|
|
||||||
|
.city-section {
|
||||||
|
width: 256rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.body-cont {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.inn-logo {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 56*2rpx;
|
||||||
|
height: 56*2rpx;
|
||||||
|
margin-right: 18rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inn-logo image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inn-name {
|
||||||
|
width: 280rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 48rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inn-owner {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #8B8F99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inn-tag-wrap {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
.inn-signature-wrap {
|
||||||
|
position: relative;
|
||||||
|
z-index: 5;
|
||||||
|
padding: 0 32rpx;
|
||||||
|
margin: 20rpx 0 0 0;
|
||||||
|
.triangle {
|
||||||
|
position: absolute;
|
||||||
|
top: -20rpx;
|
||||||
|
left: 72rpx;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 20rpx solid transparent;
|
||||||
|
border-right: 20rpx solid transparent;
|
||||||
|
border-bottom: 24rpx solid rgba(243,243,246,0.39);
|
||||||
|
}
|
||||||
|
.inn-signature {
|
||||||
|
position: relative;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #080F1A;
|
||||||
|
background: rgba(243,243,246,0.39);
|
||||||
|
box-shadow: 0px 6px 12px rgba(0,0,0,0.12);
|
||||||
|
}
|
||||||
|
.share-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: -68rpx;
|
||||||
|
.img {
|
||||||
|
width: 212rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btLine {
|
||||||
|
width: 100%;
|
||||||
|
height: 6rpx;
|
||||||
|
margin-top: 18rpx;
|
||||||
|
background: #0DC5C5;
|
||||||
|
}
|
||||||
|
.pics-box {
|
||||||
|
margin: 36rpx;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.pics-list {
|
||||||
|
position: relative;
|
||||||
|
padding: 32rpx 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.pics-list .pics-item {
|
||||||
|
margin-left: 36rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
.bottom-view {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 99;
|
||||||
|
display: flex;
|
||||||
|
height: 70rpx;
|
||||||
|
padding: 15rpx;
|
||||||
|
border-top: 1px solid #f1f1f1;
|
||||||
|
background: #FFFFFF;
|
||||||
|
|
||||||
|
.bottom-btn {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
line-height: 70rpx;
|
||||||
|
&:first-child {
|
||||||
|
border-right: 1px solid #d5d5d5;
|
||||||
|
}
|
||||||
|
.img {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin: 0 12rpx 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab-item-active {
|
||||||
|
color:#080F1A;
|
||||||
|
font-size:32rpx;
|
||||||
|
}
|
||||||
|
.tab-item-no-active {
|
||||||
|
color:#A6AAB3;
|
||||||
|
font-size:28rpx;
|
||||||
|
}
|
||||||
|
.map-wrapper {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
height: 200rpx;
|
||||||
|
margin: 40rpx 0 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
.map-cont {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
width: 100%;
|
||||||
|
opacity: 0.3;
|
||||||
|
transform: translateY(-50rpx);
|
||||||
|
}
|
||||||
|
.bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 3;
|
||||||
|
height: 60rpx;
|
||||||
|
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
|
||||||
|
}
|
||||||
|
.map-info {
|
||||||
|
position: relative;
|
||||||
|
z-index: 5;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 40rpx 10rpx 40rpx 32rpx;
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
justify-content: space-between;
|
||||||
|
.map-info-hd {
|
||||||
|
.icon {
|
||||||
|
display: block;
|
||||||
|
width: 56rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.map-info-bd {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 60rpx 0 20rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
}
|
||||||
|
.map-info-ft {
|
||||||
|
.item + .item {
|
||||||
|
margin: 0 0 0 6rpx;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
.img {
|
||||||
|
display: block;
|
||||||
|
width: 96rpx;
|
||||||
|
height: 96rpx;
|
||||||
|
margin: 0 0 -16rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top-tab {
|
||||||
|
margin: 60rpx 0 0 0;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
.tab {
|
||||||
|
margin: 0 35rpx;
|
||||||
|
&.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info-section,
|
||||||
|
.pics-section,
|
||||||
|
.qualifications-section {
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.info-section,
|
||||||
|
.qualifications-section {
|
||||||
|
padding: 32rpx;
|
||||||
|
}
|
||||||
|
.info-section {
|
||||||
|
word-break: break-all;
|
||||||
|
.info-item + .info-item {
|
||||||
|
margin: 32rpx 0 0 0;
|
||||||
|
}
|
||||||
|
.info-item {
|
||||||
|
border-radius: 10rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
.info-item-header {
|
||||||
|
position: relative;
|
||||||
|
padding: 20rpx 20rpx 0 20rpx;
|
||||||
|
&.info-item-top {
|
||||||
|
padding-top: 60rpx;
|
||||||
|
background-size: 100% 80rpx;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url();
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.intro {
|
||||||
|
margin: 10rpx 0 0 0;
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info-item-body {
|
||||||
|
padding: 0 20rpx 20rpx 20rpx;
|
||||||
|
.video {
|
||||||
|
padding: 20rpx 0 0 0;
|
||||||
|
.video-item {
|
||||||
|
width: 100%;
|
||||||
|
height: 400rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info-item-bottom {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-top: 1px solid #f1f1f1;
|
||||||
|
font-size: 16px;
|
||||||
|
.time {
|
||||||
|
flex: 1;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.btns {
|
||||||
|
display: flex;
|
||||||
|
color: #999;
|
||||||
|
.flex + .flex {
|
||||||
|
margin: 0 0 0 32rpx;
|
||||||
|
}
|
||||||
|
.flex {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
margin: 0 8rpx 0 0;
|
||||||
|
}
|
||||||
|
.zan-off-icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
.zan-on-icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
.seeNum-txt {
|
||||||
|
&.on {
|
||||||
|
color: #D81E06;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.more-btn {
|
||||||
|
position: relative;
|
||||||
|
.more-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
right: -20rpx;
|
||||||
|
top: -150rpx;
|
||||||
|
z-index: 5;
|
||||||
|
width: 200rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0px 1px 6px rgba(0,0,0,0.16);
|
||||||
|
.more-item + .more-item {
|
||||||
|
border-top: 1px solid #d5d5d5;
|
||||||
|
}
|
||||||
|
.more-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 70rpx;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
.more-icon {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
margin: 0 10rpx 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab-no-data {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #999;
|
||||||
|
line-height: 200rpx;
|
||||||
|
}
|
||||||
.pages-inn-info-detail {
|
.pages-inn-info-detail {
|
||||||
.top-box {
|
.top-box {
|
||||||
padding: 40rpx 32rpx 20rpx;
|
padding: 40rpx 32rpx 20rpx;
|
||||||
|
|||||||
Reference in New Issue
Block a user