zh_order_food_xcx/pages-my/my-publish.vue

<template>
  <view class="flex-common-css">
    <Nav title="我的发布" titleColor="#333" bgckgroundBox='#fff'></Nav>
    <scroll-view :scroll-y="true" class="scroll-view-css content-box box-sizing-border" @scrolltolower="scrolltolower">
      <view v-if="listData.length <= 0" class="scroll-view-css">
        <EnBlank :customSrc='true'>
          <template v-slot:blankImg>
            <image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
          </template>
        </EnBlank>
      </view>
      <view class="item-box box-sizing-border b-rad-20 mb-20 bgc-f flex-justify-space" v-for="(item,index) in listData"
        :key="index" @click="goToUrl(item)">
        <image class="item-head-img flex-shrink0 b-rad-50 mr-16" :src="item.head_img" mode="aspectFill"></image>
        <view class="itme-right common-view-css box-border-box">
          <view class="item-name flex-justify-space mb-16">
            <view class="">
              <view class="mb-4 fc-3 fs-28">
                {{item.nickname}}
              </view>
              <view class="fs-24 fc-9">
                {{item.created_date}}
              </view>
            </view>
            <view class="align-items-center">
              <image class="rd-img mr-8" src="@/static/img/my/rd.png" mode=""></image>
              <view class="fs-26 fc-9">
                {{item.heat}}
              </view>
            </view>
          </view>
          <view class="text-overflow-ellipsis-t item-content fs-30 fc-3 mb-16">
            {{item.content}}
          </view>
          <view class="item-img-box mb-20 align-items-center flex-wrap-wrap">
            <image class="b-rad-12" v-for="imgUrl in item.image" :src="imgUrl" mode="aspectFill"
              :class="item.image.length==1?'item-img-one':item.image.length==2?'item-img-two':'item-img-three'">
            </image>
          </view>
          <view class="align-items-center mb-40">
            <view class="label-box align-items-center mr-20 b-rad-200 bgc-F2F2F2">
              <image class="wz mr-8" src="@/static/img/my/wz.png" mode=""></image>
              <view class="fs-24 fc-9">
                {{item.school_name}}
              </view>
            </view>
            <view class="label-box align-items-center b-rad-200 bgc-F2F2F2">
              <image class="wz mr-8" src="@/static/img/my/ht.png" mode=""></image>
              <view class="fs-24 fc-9">
                {{item.topic_name}}
              </view>
            </view>
          </view>
          <view class="flex-justify-space">
            <view class="align-items-center" @click.stop="handUp(1,item)">
              <uni-icons class="mr-8" type="hand-up" size="22" :color="item.is_like==1?'#FD5C02':'#999'"></uni-icons>
              <view class="fs-24 fc-9">
                {{item.like}}
              </view>
            </view>
            <view class="align-items-center" @click.stop="openMsg(item,0)">
              <image class="but-icons mr-8" src="@/static/img/my/hf.png" mode=""></image>
              <view class="fs-24 fc-9">
                {{item.remark}}
              </view>
            </view>
            <view class="" @click.stop="alumniDelClick(item)">
              <uni-icons color="#999999" type="trash" size="20" ></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <movable-area class="add-box" v-show="false">
      <movable-view direction="all" y="300">
        <view class="add-but b-rad-50 text-align-center" @click="addInfo()">
          <uni-icons type="plusempty" color="#fff" size="30"></uni-icons>
        </view>
      </movable-view>
    </movable-area>
    <uni-popup ref="popmsg" type="bottom">
      <view class="pop-box pop-msg box-border-box p-24">
        <!-- 输入框 -->
        <view class="pop-input" v-if="isShowIpnut">
          <view class="head-pop flex-justify-space align-items-center mb-24 box-border-box p-24">
            <view class="fs-28 fw-600 fc-41ABF5"></view>
            <view class="fs-36 fc-0 fw-600">评论</view>
            <uni-icons @click.stop="closeInput()" type="closeempty" size="24"></uni-icons>
          </view>
          <view class="scroll-view-css">
            <view class="bgc-f box-border-box p-32">
              <view class="fs-34 fw-600 mb-20">评论</view>
              <textarea v-model="msgData.content" maxlength="100" class=" fs-24" placeholder='友善评论，文明发言'></textarea>
            </view>
          </view>
          <view class="box-border-box p-24">
            <view class="save-box" @click.stop="save()">评论</view>
          </view>
        </view>
        <!-- ----- -->
        <view class="head-pop flex-justify-space align-items-center mb-24">
          <view class=""></view>
          <view class="fs-36 fc-0 fw-600">评论内容</view>
          <uni-icons @click.stop="closeMsg()" type="closeempty" size="24"></uni-icons>
        </view>
        <view v-if="remarkData.list.length === 0" class="scroll-view-css">
          <EnBlank :customSrc='true'>
            <template v-slot:blankImg>
              <image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
            </template>
          </EnBlank>
        </view>
        <view v-else class="scroll-view-css box-border-box plr-24">
          <view class="list-box flex-justify-space" v-for="(item,i) in remarkData.list" :key="i">
            <image class="list-box-img" :src="item.head_img" mode="scaleToFill"></image>
            <view class="flex-1 p-b-20">
              <view class=" flex-justify-space">
                <view class=" b-b-F9F9F9 mr-20">
                  <view class="fs-28 fw-400 fc-9 mb-8 align-items-center">
                    {{item.nickname}}
                    <span v-if="item.is_author == 1" class='only-box text-align-center fs-24 fc-41ABF5 ml-10'>作者</span>
                    <view class="ml-10" v-if="item.is_self == 1" @click="delInfo(item)">
                      <uni-icons type="trash" size="18"></uni-icons>
                    </view>
                  </view>
                  <view class="fs-30 fw-400 mb-8" @click.stop="openInput(1,item)">
                    {{item.content}}
                  </view>
                  <view class="fs-24 fw-400 fc-9 mb-8">{{item.created_date}}</view>
                </view>
                <view class="display-flex" @click.stop="handUp(2,item)">
                  <uni-icons type="hand-up" size="20" :color="item.is_like==1?'#FD5C02':'#999'"></uni-icons>
                  <view class="fs-24 fw-400 mt-5" :class="item.is_like==1?'fc-FD5C02':'fc-9'">
                    {{item.like}}
                  </view>
                </view>
              </view>
              <view v-if="item.isOpen" class="fs-24 fc-6 text-align-center mb-12" @click="openReply(1,item)">展开更多评论
              </view>
              <!-- 回复 -->
              <view class="mb-16" v-if="item.replyList.length > 0">
                <view class="list-box flex-justify-space" v-for="(info,index) in item.replyList" :key="index">
                  <image class="list-box-img" :src="info.head_img" mode="scaleToFill"></image>
                  <view class="flex-1">
                    <view class=" flex-justify-space">
                      <view class=" b-b-F9F9F9 mr-20">
                        <view class="fs-28 fw-400 fc-9 mb-8 align-items-center">
                          {{info.nickname}}
                          <span v-if="info.is_author == 1"
                            class='only-box text-align-center fs-24 fc-41ABF5 ml-10'>作者</span>
                          <view class="ml-10" v-if="info.is_self == 1" @click="delInfo(info)">
                            <uni-icons type="trash" size="18"></uni-icons>
                          </view>
                        </view>
                        <view class="fs-30 fw-400 mb-8" @click.stop="openInput(2,info)">
                          {{info.content}}
                        </view>
                        <view class="fs-24 fw-400 fc-9 mb-8">{{info.created_date}}</view>
                      </view>
                      <view class="display-flex" @click.stop="handUp(2,info)">
                        <uni-icons type="hand-up" size="20" :color="info.is_like==1?'#FD5C02':'#999'"></uni-icons>
                        <view class="fs-24 fw-400 mt-5" :class="info.is_like==1?'fc-FD5C02':'fc-9'">{{info.like}}</view>
                      </view>
                    </view>
                  </view>
                </view>
                <view v-if="item.replyList.length < item.count" class="fs-24 fc-6 text-align-center mb-12"
                  @click="openReply(2,item)">展开更多评论</view>
              </view>
            </view>
          </view>
          <view v-if="remarkData.list.length < remarkData.total" class="text-align-center fs-26"
            @click="scrolltolowerList">加载更多评论</view>
        </view>
        <view class="input-box text-align-left fs-28 fc-9 box-border-box plr-24" @click.stop="openInput(0,'')">
          友善评论，文明发言</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import EnBlank from "@/components/en-utils/en-blank/en-blank";
  import {
    alumnMyAlumni,
    setAlumniLike,
    getRemarkList,
    setCreateRemark,
    alumniDel,
    setRemarkLike,
    delRemark
  } from "@/api/alumni.js"
  import tools from "@/service/tools";
  export default {
    components: {
      EnBlank
    },
    data() {
      return {
        listData: [],
        isShowIpnut: false,
        // 一级评论
        remarkData: {
          remark_id: '',
          news_id: '',
          total: 0,
          list: [],
          page: 1,
        },
        // 发起评论
        msgData: {
          news_id: '',
          remark_id: '',
          content: '',
          reply_id: '',
        },
        // 回复评论
        replyData: {
          page: 1,
        },
        isAJAX: false,
        total: 0,
        page: 1
      };
    },
    onLoad(data) {},
    mounted() {
      this.alumnMyAlumni()
    },
    methods: {
      goToUrl(item) {
        uni.navigateTo({
          url: "/pages-school/circle-info?news_id=" + item.news_id
        })
      },
      alumniDelClick(item) {
        // 删除帖子
        alumniDel({
          news_id: item.news_id
        }).then((res) => {
          if (res.code == 1) {
            tools.success(res.msg)
            this.listData = []
            this.page = 1;
            this.alumnMyAlumni()
          } else {
            tools.error(res.msg)
          }
        })
      },
      // 加载更多评论
      scrolltolowerList() {
        if (this.remarkData.list.length < this.remarkData.total) {
          this.remarkData.page += 1;
          this.getMsg();
        }
      },
      // 点赞
      handUp(type, item) {
        if (this.isAJAX) {
          return
        }
        this.isAJAX = true;
        let is_like = item.is_like == 1 ? 0 : 1;
        if (type == 1) {
          // 点赞贴子
          setAlumniLike({
            news_id: item.news_id,
            is_like: is_like
          }).then((res) => {
            this.handUpFun(res, item, is_like)
          })
        } else {
          // 点赞评论
          setRemarkLike({
            news_id: item.news_id,
            is_like: is_like,
            remark_id: item.id
          }).then((res) => {
            this.handUpFun(res, item, is_like)
          })
        }
      },
      // 点赞公共回复
      handUpFun(res, item, is_like) {
        if (res.code === 1) {
          item.is_like = is_like;
          if (is_like == 0) {
            item.like -= 1
          } else {
            item.like += 1
          }
          this.isAJAX = false;
          tools.success(res.msg);
        } else {
          this.isAJAX = false;
          tools.error(res.msg);
        }
      },
      openInput(type, item) {
        if (type == 0) {
          this.msgData.remark_id = 0;
        } else if (type == 1) {
          this.msgData.remark_id = item.id;
          this.msgData.reply_id = item.m_id;
        } else {
          this.msgData.remark_id = item.remark_id;
          this.msgData.reply_id = item.m_id;
        }
        this.isShowIpnut = true;
      },
      save() {
        if (this.isAJAX) {
          return
        }
        this.isAJAX = true;
        setCreateRemark(this.msgData).then((res) => {
          if (res.code == 1) {
            tools.success('评论成功')
            setTimeout(() => {
              this.isAJAX = false;
              this.closeInput()
              if (this.msgData.remark_id == 0) {
                this.remarkData.list = [];
                this.remarkData.page = 1;
                this.getMsg();
                // this.list = [];
                // this.fromData.page = 1;
                this.listData = []
                this.page = 1;
                this.alumnMyAlumni()
              } else {
                this.remarkData.list = [];
                this.remarkData.page = 1;
                this.getMsg();
              }
            }, 1500)
          } else {
            this.isAJAX = false;
            tools.error(res.msg)
          }
        })
      },
      closeInput() {
        this.isShowIpnut = false;
        this.msgData.remark_id = '';
        this.msgData.content = '';
        this.msgData.reply_id = '';
      },
      // 打开评论
      openMsg(item) {
        uni.navigateTo({
          url: "/pages-school/circle-info?news_id=" + item.news_id
        })
        // this.remarkData.news_id = item.news_id;
        // this.msgData.news_id = item.news_id;
        // this.remarkData.remark_id = 0;
        // this.getMsg();
      },
      // 获取回复列表
      openReply(type, item) {
        // type 1获取其他 2加载更多
        if (this.isAJAX) {
          return
        }
        this.isAJAX = true;
        if (type == 1) {
          item.replyList = [];
          this.replyData.page = 1;
        } else {
          this.replyData.page += 1;
        }
        getRemarkList({
          news_id: item.news_id,
          remark_id: item.id,
          page: this.replyData.page
        }).then((res) => {
          if (res.code === 1) {
            this.isAJAX = false;
            item.replyList = [...item.replyList, ...res.data.items];
            item.isOpen = false;
          } else {
            this.isAJAX = false;
            tools.error(res.msg)
          }
        })
      },
      closeMsg() {
        this.$refs.popmsg.close();
        this.remarkData.list = [];
        this.remarkData.page = 1;
        this.msgData.news_id = '';
        this.remarkData.remark_id = '';
      },
      delInfo(item) {
        if (this.isAJAX) {
          return
        }
        this.isAJAX = true;
        delRemark({
          remark_id: item.id
        }).then((res) => {
          if (res.code === 1) {
            tools.success('删除成功')
            setTimeout(() => {
              this.isAJAX = false;
              this.remarkData.list = [];
              this.remarkData.page = 1;
              this.getMsg();
              // this.list = [];
              // this.fromData.page = 1;
              // this.getList();
              this.listData = []
              this.page = 1;
              this.alumnMyAlumni()
            }, 1500)
          } else {
            this.isAJAX = false;
            tools.error(res.msg)
          }
        })
      },
      // 获取评论
      getMsg() {
        if (this.isAJAX) {
          return
        }
        this.isAJAX = true;
        getRemarkList({
          news_id: this.remarkData.news_id,
          remark_id: this.remarkData.remark_id,
          page: this.remarkData.page
        }).then((res) => {
          if (res.code === 1) {
            this.isAJAX = false;
            this.remarkData.list = [...this.remarkData.list, ...res.data.items];
            this.remarkData.total = res.data.total;
            this.remarkData.list.forEach((v) => {
              v.replyList = [];
              if (v.count > 0) {
                v.isOpen = true;
              }
            })
            this.$refs.popmsg.open();
          } else {
            this.isAJAX = false;
            tools.error(res.msg)
          }
        })
      },
      scrolltolower() {
        console.log('触底');
      },
      alumnMyAlumni() {
        alumnMyAlumni({
          page: this.page
        }).then((res) => {
          if (res.code == 1) {
            if (res.data.items.length > 0) {
              this.listData.push(...res.data.items)
            }
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .item-content {
    max-width: 558rpx;
  }

  .content-box {
    padding: 20rpx 24rpx;
  }

  .item-box {
    padding: 24rpx;
  }

  .item-name {
    align-items: flex-start;
  }

  .item-head-img {
    width: 80rpx;
    height: 80rpx;
  }

  .rd-img {
    width: 40rpx;
    height: 40rpx;
  }

  .label-box {
    padding: 0 12rpx;
    height: 38rpx;
    line-height: 38rpx;
  }

  .wz {
    width: 32rpx;
    height: 32rpx;
  }

  .but-icons {
    width: 40rpx;
    height: 40rpx;
  }

  .item-img-box {
    width: calc(100% + 6rpx);
  }

  .item-img-one {
    width: 360rpx;
    height: 360rpx;
  }

  .item-img-two {
    width: 276rpx;
    height: 276rpx;
    margin: 0 6rpx 0 0;
  }

  .item-img-three {
    width: 182rpx;
    height: 182rpx;
    margin: 0 6rpx 6rpx 0;
  }

  .add-box {
    position: fixed;
    right: 98rpx;
    top: 10vh;
    max-width: 88rpx;
    height: 80vh;
    z-index: 999;
  }

  .add-but {
    width: 88rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: linear-gradient(284deg, #0290FC 0%, #01D8FF 100%);
  }

  .pop-box {

    width: 100%;
    height: 50vh;
    background-color: #fff;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    display: flex;
    flex-direction: column;

    .item-box {
      width: 100%;
      height: 92rpx;

      border-radius: 200rpx;
      line-height: 92rpx;
      text-align: center;
      margin-bottom: 24rpx;
    }
  }

  .pop-msg {
    height: 70vh;
    position: relative;

    .pop-input {
      position: absolute;
      width: 100%;
      height: 70vh;
      background-color: #fff;
      bottom: 0;
      left: 0;
      border-top: 1rpx solid #ccc;
      border-radius: 20rpx 20rpx 0 0;
      display: flex;
      flex-direction: column;

      .save-box {
        text-align: center;
        line-height: 88rpx;
        font-weight: 600;
        font-size: 32rpx;
        color: #FFFFFF;
        width: 100%;
        height: 80rpx;
        border-radius: 200rpx;
        background: linear-gradient(105deg, #57CAFF 0%, #41ABF5 100%);
      }
    }

    .head-pop {
      padding-bottom: 34rpx !important;
      border-bottom: 1rpx solid #F2F2F2;
    }

    .list-box {
      .list-box-img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }

      .only-box {
        padding: 4rpx 16rpx;
        background: rgba(65, 171, 245, 0.1);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }

      .msg-img {
        width: 144rpx;
        height: 144rpx;
        border-radius: 12rpx;
        margin-right: 5rpx;
        margin-bottom: 5rpx;
      }

      .msg-img:nth-child(3n) {
        margin-right: 0rpx;
      }

      .msg-img-1 {
        width: 100rpx !important;
        height: 100rpx !important;
      }
    }
  }
</style>