YXGJ/packageA/fullView/detail.vue

<template>
    <view style="background-color: #fff;padding-bottom: 80px;padding-top: 10px;">
        <view class="main">
            <view class="changeby-box">
                <view class="changeby">
                    <image class="headpic"
                        :src="detail.headpic || 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202406011717209838416B6150695f.webp'"
                        mode="aspectFill" />
                    <view class="name u-line-1">
                        {{ detail.changeby || '--' }}
                    </view>
                </view>
                <navigator class="iconfont icon-a-720quanjing-bai" v-if="detail.ispanorama"
                    style="color: #C30D23;font-size: 24px;" :url="'/packageA/webView/webView?url=' + detail.panoramaurl" />
            </view>
            <view class="title" v-if="detail.title_c || detail.title">
                {{ detail.title_c || detail.title }}
            </view>
            <block v-for="item in files" :key="item.attachmentid">
                <image class="image" v-if="item.fileType == 'image'" :src="item.cover" mode="widthFix" lazy-load="true"
                    @click="previewImg(item)" />
                <video v-else-if="item.fileType == 'video'" class="video" :poster="item.subfiles[0].url" :src="item.url" />
            </block>
        </view>
        <view class="comment-box">
            <view class="head">
                <view class="label">
                    评论
                </view>
                <view class="total">
                    共{{ detail.commentcount || 0 }}条
                </view>
            </view>
            <view class="comment" v-for="item in comments" :key="item.sys_datacommentid">
                <view class="user">
                    <image class="headpic"
                        :src="item.headpic || 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202406011717209838416B6150695f.webp'"
                        mode="aspectFill" />
                    <view class="name">
                        {{ item.name }}
                    </view>
                </view>
                <view class="content">
                    {{ item.content }}
                </view>
                <view class="time">
                    <text class="createdate">{{ item.createdate }}</text>
                    <view v-if="userid == item.userid" class="iconfont icon-shanchu" hover-class="navigator-hover"
                        @click="delectComment(item)" />
                </view>
            </view>
            <view v-if="!comments.length" style="padding:50px 0 100px 0;">
                <u-empty mode="data" text="暂无评论" />
            </view>
            <view v-else style="padding-bottom: 10px;">
                <u-divider text="已经到底部" :dashed="true" />
            </view>
        </view>

        <view class="footer">
            <view class="but" @click="loadings.like ? '' : handleCollect(2, detail.islike)">
                <u-loading-icon v-if="loadings.like" />
                <block v-else>
                    <view v-if="detail.islike" style="color: #E3041F;" class="iconfont icon-yidianzan" />
                    <view v-else style="color: #646566;" class="iconfont icon-weidianzan" />
                    <view class="text">
                        点赞
                    </view>
                </block>
            </view>
            <view class="but" @click="loadings.collect ? '' : handleCollect(1, detail.iscollect)">
                <u-loading-icon v-if="loadings.collect" />
                <block v-else>
                    <view v-if="detail.iscollect" style="color: #FFC300;" class="iconfont icon-yishoucang" />
                    <view v-else style="color: #646566;" class="iconfont icon-weishoucang" />
                    <view class="text">
                        收藏
                    </view>
                </block>
            </view>
            <view class="input-box" hover-class="navigator-hover">
                <input class="input" type="text" placeholder="评论" :value="commentText" maxlength="499"
                    @input="changeComment" confirm-type="send" @confirm="onSend">
                <icon v-if="commentText" class="icon" type="clear" size="3.733vw" @click="onClear" />
            </view>
        </view>
    </view>
</template>

<script>
import { viewImage, formattedFiles } from "../../utils/settleFiles"
export default {
    data() {
        return {
            sat_sharematerialid: 0,
            detail: {},
            files: [],
            comments: [],
            "content": {
                "ownertable": "sat_sharematerial"
            },
            commentText: "",
            userid: uni.getStorageSync('userMsg').userid,
            loadings: {
                collect: false,
                like: false
            },
            loadingGetList: false
        }
    },
    onLoad(options) {
        this.sat_sharematerialid = options.id;
        this.getDetail(true);
    },
    onUnload() {
        this.$Http.setCount && delete this.$Http.setCount
    },
    onReachBottom() {
        if (!this.loadingGetList) this.getList();
    },
    methods: {
        previewImg(item) {
            viewImage(item.url)
        },
        getDetail(init = false) {
            this.getList(init)
            if (!init) return;
            this.$Http.basic({
                "id": 20240417104702,
                "content": {
                    "sat_sharematerialid": this.sat_sharematerialid
                },
            }).then(res => {
                console.log("设计实景详情", res)
                if (this.cutoff(res.msg)) return;
                this.files = formattedFiles(res.data.attinfos_pic.map(v => v.attinfos[0])).map(v => {
                    if (v.fileType == 'image') v.cover = this.getSpecifiedImage(v, 'compressed')
                    return v
                })
                this.detail = res.data;
                this.setCount()
                uni.setNavigationBarTitle({
                    title: res.data.title_c || res.data.title || '详情'
                });
            })
        },
        getList(init = false) {
            this.loadingGetList = true;
            if (this.paging(this.content, init)) return this.loadingGetList = false;
            this.content.ownerid = this.sat_sharematerialid;
            this.$Http.basic({
                "id": 20240417161702,
                content: this.content
            }).then(res => {
                this.loadingGetList = false;
                console.log("获取评论列表", res)
                if (this.cutoff(res.msg)) return;
                this.comments = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                this.content.pageNumber = res.pageNumber - 0 + 1;
                this.content.pageTotal = res.pageTotal;
                this.content.pageSize = res.pageSize;
            })
        },
        changeComment(e) {
            this.commentText = e.detail.value;
        },
        onClear() {
            let that = this;
            uni.showModal({
                title: '提示',
                content: '是否确定清空评论?',
                success: ({ confirm }) => {
                    if (confirm) that.commentText = ""
                },
            })
        },
        onSend() {
            if (this.commentText == '') return uni.showToast({
                title: '还未输入评论内容！',
                duration: 2000,
                icon: "none"
            });
            this.$Http.basic({
                "id": 20240417161502,
                "content": {
                    "ownertable": "sat_sharematerial",
                    "ownerid": this.sat_sharematerialid,
                    "contentstr": this.commentText
                },
            }).then(res => {
                console.log("发送评论", res)
                if (this.cutoff(res.msg, '评论成功')) return;
                this.commentText = '';
                this.getDetail(true)
            })
        },
        delectComment(item) {
            let that = this;
            uni.showModal({
                title: '提示',
                content: "是否确定删除该评论?",
                success: ({ confirm }) => {
                    if (confirm) that.$Http.basic({
                        "id": 20240417161602,
                        "content": {
                            "sys_datacommentid": item.sys_datacommentid,
                            "ownertable": "sat_sharematerial",
                            "ownerid": item.ownerid
                        },
                    }).then(res => {
                        console.log("删除评论", res)
                        if (this.cutoff(res.msg, '删除成功')) return;
                        that.detail.commentcount -= 1;
                        that.comments = that.comments.filter(v => v.sys_datacommentid != item.sys_datacommentid);
                        this.setCount()
                    })
                },
            })
        },
        setCount() {
            this.$Http.setCount && this.$Http.setCount(this.detail)
        },
        handleCollect(type, value) {
            if (type == 1) {
                this.loadings.collect = true;
            } else {
                this.loadings.like = true;
            }
            this.$Http.basic({
                "id": 20240416133702,
                "content": {
                    "ownertable": "sat_sharematerial",
                    "ownerid": this.detail.sat_sharematerialid,
                    type
                },
            }).then(res => {
                console.log(value ? '取消' : '添加', type == 1 ? "收藏" : "喜欢", res)
                if (type == 1) {
                    this.loadings.collect = false;
                } else {
                    this.loadings.like = false;
                }
                if (this.cutoff(res.msg)) return;
                if (type == 1) {
                    this.detail.iscollect = value ? 0 : 1
                    this.detail.collectcount = value ? this.detail.collectcount - 1 : this.detail.collectcount - 0 + 1
                } else {
                    this.detail.islike = value ? 0 : 1
                    this.detail.likecount = value ? this.detail.likecount - 1 : this.detail.likecount - 0 + 1
                }
                this.setCount();
            })
        },
    },

}
</script>

<style lang="scss" scoped>
.main {
    width: 355px;
    margin: 0 auto;

    .changeby-box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .changeby {
            display: flex;
            align-items: center;

            .headpic {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                margin-right: 5px;
            }

            .name {
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-size: 12px;
                color: #333333;
                width: 200px;
            }
        }
    }

    .title {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 12px;
        color: #333333;
        line-height: 20px;
        margin-top: 10px;
    }

    .image {
        width: 100%;
        border-radius: 5px;
        margin-top: 10px;
    }

    .video {
        width: 355px;
        height: 240px;
        border-radius: 5px;
        margin-top: 10px;
    }
}

.comment-box {
    background: #fff;
    margin-top: 10px;

    .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100vw;
        height: 45px;

        .label {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 16px;
            color: #333333;
            margin-left: 10px;
        }

        .total {
            font-family: PingFang SC, PingFang SC;
            font-size: 14px;
            color: #333333;
            margin-right: 10px;
        }
    }

    .comment {
        padding: 10px;

        .user {
            display: flex;
            align-items: center;
            height: 32px;

            .headpic {
                width: 32px;
                height: 32px;
                border-radius: 50%;

            }

            .name {
                margin-left: 10px;
                font-family: Source Han Sans SC,
                    Source Han Sans SC;
                font-weight: 500;
                font-size: 14px;
                color: #666666;
            }

        }

        .content {
            width: 313px;
            margin-top: 4px;
            margin-left: 42px;
            line-height: 20px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 14px;
            color: #333333;
        }

        .time {
            display: flex;
            justify-content: space-between;
            width: 313px;
            margin-top: 10px;
            margin-left: 42px;

            .iconfont,
            .createdate {
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-size: 12px;
                color: #999999;
                line-height: 17px;
            }

            .iconfont {
                padding: 0 5px;
                border-radius: 4px;
            }
        }


    }
}

.footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 375px;
    height: 70px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);

    .but {
        width: 50px;
        text-align: center;
        padding-top: 13px;

        .iconfont {
            font-size: 16px;
            margin-bottom: 4px;
        }

        .text {
            font-family: PingFang SC, PingFang SC;
            font-size: 10px;
            color: #333333;
            height: 100%;
            box-sizing: border-box;
        }
    }

    .input-box {
        display: flex;
        align-items: center;
        width: 245px;
        height: 45px;
        background: #F7F7F7;
        border-radius: 50px;
        border: 1px solid #CCCCCC;
        margin-left: 20px;
        margin-top: 6px;
        padding: 0 10px 0 20px;
        box-sizing: border-box;

        .input {
            flex: 1;
            height: 45px;
            line-height: 45px;
        }

        .icon {
            margin-left: 5px;
        }
    }
}
</style>