zh_order_food_xcx/pages-school/circle-info.vue

<template>
  <view class="circle-info-box iPhone-bottom flex-common-css box-border-box bgc-f">
    <view class="nav-box bgc-f">
      <Nav :leftShow='false' :customNav='true' bgckgroundBox='transparent'>
        <template>
          <view slot="custom" class="display-flex ">
            <image class="nav-img" @click="toBack()" src="@/static/img/takeout/bg-back.png" mode="scaleToFill"></image>
            <view class="info-nav display-flex">
              <image :src="obj.head_img" mode=""></image>
              <view class="pb-5">
                <view class="fs-28 fw-600 w348 text-overflow-ellipsis-one">{{obj.nickname||''}}</view>
                <view class="fs-20 fc-9 fw-400 mb-10">{{obj.created_date||''}}</view>
              </view>
            </view>
          </view>
        </template>
      </Nav>
    </view>

    <scroll-view scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
      <view class="box-border-box mb-26" v-if="obj.image.length > 0">
        <swiper class="swiper mb-32 " circular indicator-dots indicator-active-color="#4FB3EF" :autoplay="true"
          :interval="3000" :duration="500">
          <swiper-item v-for="(item,i) in obj.image" :key="i">
            <image class="swiper-item" :src="item" mode="aspectFit" @click="lookImg(i,item)"></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="box-border-box bz-box bgc-f b-b-F9F9F9 mt-24 mb-32">
        <view class="fs-30 fw-600 mb-32 item-content">{{obj.content||''}}</view>
        <view class="card-4 flex-wrap-wrap">
          <view class="label-box align-items-center mr-20 b-rad-200 bgc-F2F2F2">
            <image class="wz mr-8" src="@/static/img/my/wz-two.png" mode=""></image>
            <view class="fs-24 fc-9">
              {{obj.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">
              {{obj.topic_name||''}}
            </view>
          </view>
        </view>
      </view>
      <view class="fs-32 fc-3 fw-600 mb-16 plr-32 box-border-box">
        评论<text class="fs-24 fc-9">({{obj.remark}})</text>
      </view>
      <view v-if="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="pop-box pop-msg box-border-box p-24">
        <view class=" box-border-box plr-24">
          <view class="list-box flex-justify-space" v-for="(item,i) in 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>
                  <view class="fs-30 fw-400 mb-8" @click.stop="openInput(1,item,i,i)">
                    {{item.content}}
                  </view>
                  <view class="align-items-center mb-8">
                    <view class="fs-24 fw-400 fc-9">{{item.created_date}}</view>
                    <uni-icons class="ml-10" v-if="item.is_self == 1" @click="delInfo(item, i, 1, i)" type="trash"
                      size="18" color="#BFBFBF"></uni-icons>
                  </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.count > 0">
                <view class="list-box flex-justify-space" v-for="(info,index) in item.replyList" :key="index">
                  <image class="list-box-img" src="@/static/img/my/bg.png" 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">
                          <view class="">
                            {{info.nickname}}
                          </view>
                          <span v-if="info.is_author == 1"
                            class='only-box text-align-center fs-24 fc-41ABF5 ml-10'>作者</span>
                        </view>
                        <view class="fs-30 fw-400 mb-8" @click.stop="openInput(2,info,index,i)">
                          {{info.content}}
                        </view>
                        <view class="align-items-center mb-8">
                          <view class="fs-24 fw-400 fc-9 ">{{info.created_date}}</view>
                          <uni-icons type="trash" size="18" class="ml-10" v-if="info.is_self == 1"
                            @click="delInfo(info, index, 2 ,i)" color="#BFBFBF"></uni-icons>
                        </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>0 && item.replyList.length < item.count  && item.count > 10"
                  class="fs-24 fc-6 text-align-center mb-12" @click="openReply(2,item)">展开更多评论</view>
              </view>

            </view>
          </view>
        </view>
      </view>

    </scroll-view>

    <view class="card-5 align-items-center flex-justify-space box-border-box boder-b-t">
      <view class="input-box-box fs-28 fc-9 mr-20" @click.stop="openInput(0,'','','')">友善评论，文明发言</view>
      <!-- 			<input class="fs-input" :focus='focus' v-model="msgData.content" @click.stop="openInput(0,'','','')"
				type="text" @focus='inputFocus(true)' @blur='inputFocus(false)' /> -->
      <!-- 			<textarea class="fs-input fs-36 fc-3" :focus='focus' v-model="msgData.content"
				@click.stop="openInput(0,'','','')" @focus='inputFocus(true)' @blur='inputFocus(false)' auto-height /> -->
      <view class="display-flex flex-shrink0">
        <view class="align-items-center mr-20" @click.stop="handUp(1,obj)">
          <uni-icons type="hand-up" size="22" :color="obj.is_like==1?'#FD5C02':'#999'"></uni-icons>
          <view :class="obj.is_like==1?'fc-FD5C02':'fc-9'">
            点赞
          </view>
          <!-- <view class="fs-24 " :class="obj.is_like==1?'fc-FD5C02':'fc-9'">{{obj.like}}</view> -->
        </view>
        <view class="align-items-center" @click.stop="openRepot(obj)">
          <image src="@/static/img/school/info.png" mode=""></image>
          <view class="fs-24 fc-9">举报</view>
        </view>
      </view>
      <!-- <image v-else class="wh64" @click.stop="save()" src="@/static/img/school/fs.png" mode=""></image> -->
    </view>

    <uni-popup ref="popup" type="bottom">
      <view class="pop-input">
        <view class="text-align-right mb-20 fs-30 fc-41ABF5" @click.stop="save()">
          发送
        </view>
        <textarea class="fs-input fs-28 fc-3" :focus='focus' v-model="msgData.content" placeholder='友善评论，文明发言'
          maxlength="100" placeholder-class='fs-28 fc-9 fw-600' @focus='inputFocus(true)' @blur='inputFocus(false)'
          @keyboardheightchange='keyboardheightchange' />
        <view :style="[{'height': KeyboardHeight +'px'}]"> </view>
        <!-- 				<input class="fs-input" focus type="text" />
				<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="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>
    </uni-popup>

    <uni-popup ref="popupRepot" type="bottom">
      <view class="pop-box pop-h-30 box-border-box p-24" :style="'bottom:'+KeyboardHeight+'px;'">
        <view class="head-pop flex-justify-space align-items-center mb-24">
          <uni-icons @click.stop="closePop(1)" type="closeempty" size="24"></uni-icons>
          <view class="fs-36 fc-0 fw-600">请输入举报内容</view>
          <view class="fs-28 fw-600 fc-41ABF5" @click.stop="closePop(2)">确定</view>
        </view>
        <view class="scroll-view-css">
          <textarea style="height: 100%;" v-model="reportData.content" class=" fs-24" :maxlength='50'
            placeholder='请输入举报内容'></textarea>
        </view>
        <!-- <view @click.stop="closePop(2)" class="b-bottom text-align-center fs-32 fc-3 fw-600 fc-f">确认举报</view> -->
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import EnBlank from "@/components/en-utils/en-blank/en-blank";
  import {
    alumnInfo,
    getRemarkList,
    setAlumniLike,
    delRemark,
    setCreateRemark,
    setRemarkLike,
    alumniReport
  } from '@/api/alumni.js';
  import tools from "@/service/tools";
  export default {
    components: {
      EnBlank
    },
    data() {
      return {
        isAJAX: false,
        news_id: '',
        obj: {
          image: [],
        },
        list: [],
        page: 1,
        total: 0,

        // 发起评论
        msgData: {
          news_id: '',
          remark_id: '',
          content: '',
          reply_id: '',
        },
        // 回复评论
        replyData: {
          page: 1,
        },
        // 举报
        reportData: {
          news_id: '',
          content: '',
        },
        focus: false,
        msgType: 0, // 消息类型
        msgIndex: 0, // 列表一级索引
        msgI: 0,
        KeyboardHeight: 0, // 键盘高度
        // showKeyNum: 0, //键盘打开的次数
        remark: ''
      }
    },
    onLoad(e) {
      this.news_id = e.news_id;
      this.msgData.news_id = e.news_id;
      this.getInfo();
      this.getList();
      uni.onKeyboardHeightChange(res => {
        console.log('log', res);
        this.KeyboardHeight = res.height
      })
    },
    onUnload() {
      const circleDataUp = {}
      alumnInfo({
        news_id: this.news_id
      }).then((res) => {
        if (res.code === 1) {
          circleDataUp.news_id = res.data.news_id
          circleDataUp.like = res.data.like
          circleDataUp.remark = res.data.remark
          circleDataUp.heat = res.data.heat
          circleDataUp.is_like = res.data.is_like
          uni.$emit('circleDataUp', circleDataUp)
        }
      })
      // const circleDataUp = {
      // 	news_id: this.obj.news_id,
      // 	like: this.obj.like,
      // 	remark: list.length,
      // 	heat: this.obj.heat
      // }
      console.log("监听页面卸载");
    },
    methods: {
      // keyboardheightchange(e) {
      // 	this.keyboardHeight = e.detail.height;
      // 	console.log(this.keyboardHeight, '1111111111');
      // 	this.showKeyNum++;
      // 	setTimeout(() => {
      // 		uni.pageScrollTo({
      // 			scrollTop: 2000
      // 		});
      // 	}, 200)
      // },
      // hideBorad() {
      // 	this.showKeyNum = 2;
      // 	this.keyboardHeight = 0;
      // },
      inputFocus(type) {
        if (!type) {
          this.focus = false
          // this.hideBorad()
        }
        this.$forceUpdate()
      },
      lookImg(i, item) {
        tools.lookBigImg(i, item)
      },
      toBack() {
        tools.leftClick()
      },
      getInfo() {
        alumnInfo({
          news_id: this.news_id
        }).then((res) => {
          if (res.code === 1) {
            this.obj = res.data;
          } else {
            tools.error(res.msg)
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 1500)
          }
        })
      },
      scrolltolower() {
        if (this.list.length < this.total) {
          this.page += 1;
          this.getList();
        }
      },
      getList() {
        getRemarkList({
          news_id: this.news_id,
          remark_id: 0,
          page: this.page
        }).then((res) => {
          if (res.code === 1) {
            this.list = [...this.list, ...res.data.items];
            this.total = res.data.total;
            this.list.forEach((v) => {
              v.replyList = [];
              if (v.count > 0) {
                v.isOpen = true;
              }
            })
          }
        })
      },
      // 获取回复列表
      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)
          }
        })
      },

      // 点赞
      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, index, i) {
        console.log(index, i, '$$$$$$$$$$$$$$$$$');
        this.msgIndex = index
        this.msgType = type
        this.msgI = i
        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.$refs.popup.open();
        setTimeout(() => {
          this.focus = true
          // this.$forceUpdate()
        }, 500);

        // console.log(this.focus, '是否聚焦');
      },
      closeInput() {
        this.$refs.popup.close();
        this.msgData.remark_id = '';
        this.msgData.content = '';
        this.msgData.reply_id = '';
      },
      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()
              console.log(this.msgType)
              if (this.msgType == 0) {
                this.list.unshift(res.data)
                this.$forceUpdate()
              } else if (this.msgType == 1) {
                let replyList = []
                  ++this.list[this.msgI].count
                console.log(this.list[this.msgIndex], '二级');
                if (this.list[this.msgIndex].replyList) {
                  this.list[this.msgIndex].replyList.push(res.data)
                } else {
                  this.list[this.msgIndex].replyList = replyList
                  this.list[this.msgIndex].replyList.push(res.data)
                  this.$forceUpdate()
                }
              } else {
                console.log(this.list[this.msgIndex]);
                ++this.list[this.msgI].count
                this.list[this.msgI].replyList.push(res.data)
                this.$forceUpdate()
              }
              console.log(this.list[this.msgIndex]);
              this.msgIndex = 0
              this.msgType = 0
              this.msgI = 0
              // this.list = [];
              // this.page = 1;
              // this.getList();
              this.getInfo();

              // remark
            }, 1500)
          } else {
            this.isAJAX = false;
            tools.error(res.msg)
          }
        })
      },
      delInfo(item, index, type, i) {
        if (this.isAJAX) {
          return
        }
        this.isAJAX = true;
        delRemark({
          remark_id: item.id
        }).then((res) => {
          if (res.code === 1) {
            tools.success('删除成功')
            setTimeout(() => {
              this.isAJAX = false;
              console.log(this.list[i], '88888888888888888');
              --this.list[i].count
              if (type == 1) {
                this.list.splice(index, 1)
              } else {
                this.list[i].replyList.splice(index, 1)
              }
              // this.list = [];
              // this.page = 1;
              // this.getList();
              this.getInfo();
            }, 1500)
          } else {
            this.isAJAX = false;
            tools.error(res.msg)
          }
        })
      },

      // 打开举报
      openRepot(item) {
        this.reportData.news_id = item.news_id;
        this.$refs.popupRepot.open();
      },
      // 举报
      closePop(type) {
        if (type === 1) {
          this.reportData.news_id = '';
          this.reportData.content = '';
          this.$refs.popupRepot.close();
        } else {
          if (this.isAJAX) {
            return
          }
          this.isAJAX = true;
          alumniReport(this.reportData).then((res) => {
            if (res.code === 1) {
              tools.success(res.msg)
              setTimeout(() => {
                this.isAJAX = false;
                this.closePop(1);
              }, 1000)
            } else {
              tools.error(res.msg);
              this.isAJAX = false;;
            }
          })
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .item-content {
    word-wrap: break-word;
  }

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

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

  .fs-input {
    flex: 1;
    width: 100%;
    height: 170rpx !important;
    // line-height: 72rpx;
    background: #F2F2F2;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 20rpx 24rpx;
  }

  .wh64 {
    width: 68rpx;
    height: 68rpx;
  }

  .input-box-box {
    width: 436rpx;
    height: 72rpx;
    line-height: 72rpx;
    background: #F2F2F2;
    border-radius: 200rpx;
    box-sizing: border-box;
    padding: 0 24rpx;
  }

  .circle-info-box {

    .boder-b-t {
      border-top: 1rpx solid #F2F2F2;
    }

    .card-5 {
      height: 98rpx;
      padding: 9rpx 24rpx 9rpx 32rpx;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 8rpx;

      }
    }

    .w348 {
      width: 348rpx;
    }

    .nav-box {
      z-index: 99;
      padding-bottom: 10rpx;

      .nav-img {
        width: 56rpx;
        height: 56rpx;
        margin-right: 30rpx;
      }

      .info-nav {
        image {
          width: 64rpx;
          height: 64rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
      }
    }

    .swiper {
      width: 100%rpx;
      height: 920rpx;

      .swiper-item {
        width: 100%;
        height: 920rpx;
        // background-color: skyblue;
      }
    }

    .bz-box {
      padding: 0 32rpx 20rpx 32rpx;

      .card-4 {
        // view {
        // 	padding: 4rpx 16rpx;
        // 	background: #F2F2F2;
        // 	border-radius: 200rpx;
        // 	font-size: 24rpx;
        // 	color: #999;
        // 	margin-right: 20rpx;
        // 	margin-bottom: 10rpx;
        // }
      }
    }

    .pop-input {
      width: 100%;
      height: auto;
      background-color: #fff;
      border-top: 1rpx solid #ccc;
      padding: 15rpx 24rpx;
      box-sizing: border-box;
      // .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%);
      // }
    }

    .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;
      .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>