bigDataApp/pages/expertDiagnosis/particulars.vue

<template>
  <view>
    <view class="status_bar"></view>
    <view
      style="position: fixed; top: 44px; background-color: #fff; z-index: 99"
    >
      <uni-nav-bar
        @clickLeft="clickLeft"
        left-icon="back"
        left-text="返回"
        title="详情"
      ></uni-nav-bar>
    </view>
    <view style="position: relative; top: 90px">
      <view class="partitlteimg">
        <!-- <image :src="list" mode="" class="" @click="examine(list)"></image> -->
        <u-swiper :list="list" height="428" @click="examine(list)"></u-swiper>
      </view>
      <view class="quiz">
        <view class="quiz_username">
          <image
            :src="
              $imageURL+ '/bigdata_app' +
              '/image/expertDiagnosis/6940a11a251770f1b0d8b7b10ebdf9b.png'
            "
            mode=""
            v-if="Number(quizdata.heat) == 1"
          ></image>
          <span>{{ quizdata.title }}</span>
        </view>
        <view class="quiz_usertime">
          <view style="display: flex; align-items: center">
            <image
              :src="
                quizdata.image
                  ? quizdata.image
                  : $imageURL+'/bigdata_app/image/fourMoodBase/touxiang.png'
              "
              mode=""
            ></image>
            <span>{{ quizdata.username }}</span>
          </view>
          <view>
            <span>{{ quizdata.adtime | timeFormat() }}</span>
          </view>
        </view>
        <view class="quiz_usercontert" v-html="quizdata.content"></view>
      </view>
      <view class="comment">
        <p class="comment_title">评论</p>
        <scroll-view
          class="scroll-view_H"
          :scroll-y="true"
          @scrolltolower="scroll"
          scroll-top="0"
        >
          <view
            class="comment_unit"
            v-for="(item, index) in commentdata"
            :key="index"
          >
            <view class="comment_unit_user">
              <view class="username">
                <image :src="item.image" mode=""></image>
                <span style="font-size: 26rpx; color: #c1c1c1">{{
                  item.username
                }}</span>
                <p v-if="Number(item.user_type) == 1">专家</p>
              </view>
              <view>
                <span style="font-size: 26rpx; color: #c1c1c1">{{
                  item.uptime | timeFormat()
                }}</span>
              </view>
            </view>
            <view class="comment_unit_con">
              <p v-html="item.content"></p>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view
      class="issue_box"
      :style="{ position: 'fixed', bottom: height + 'px' }"
    >
      <view class="issue">
        <input
          type="text"
          v-model="issuedata"
          @focus="focus"
          :auto-blur="true"
          :adjust-position="false"
          @blur="blur"
          @confirm="confirm"
        />
        <p @click="issue">发布</p>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      quizdata: {},
      commentdata: [],
      issuedata: '',
      defaultimg: '/images/expertDiagnosis/img01.png',
      height: 0,
      page: 1,
    };
  },
  methods: {
    //
    async getParticulars(datas) {
      //获取评论列表
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=pest.pests.pests_answers_list',
        data: {
          lower: datas,
          page: this.page,
          page_size: 10,
        },
      });
      this.commentdata = this.commentdata.concat(res.data);
      console.log(res.data);
    },
    async getDiscuss(data) {
      //发布评论
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=pest.pests.pests_new_idea',
        data: {
          lower: data.lower,
          content: data.content,
        },
      });
      if (res.code == 200) {
        this.commentdata = [];
        this.page = 1;
        this.getParticulars(this.quizdata.lower);
      }
      console.log(res);
    },
    clickLeft() {
      uni.navigateTo({
        url: './exchangeShare',
      });
    },
    issue() {
      //发布评论
      let obj = {};
      obj.lower = this.quizdata.lower;
      obj.content = this.issuedata;
      if (this.issuedata != '') {
        this.getDiscuss(obj);
        this.issuedata = '';
      }
    },
    focus(e) {
      this.height = e.detail.height;
    },
    blur() {
      this.height = 0;
    },
    confirm() {
      this.issue();
    },
    scroll(e) {
      this.page++;
      this.getParticulars(this.quizdata.lower);
    },
    examine(list) {
      console.log(list);
      var imgarr = [];
      for (var i = 0; i < list.length; i++) {
        imgarr.unshift(list[0].image);
      }
      console.log(imgarr);
      uni.previewImage({
        urls: imgarr,
      });
    },
    async getInvitation(id) {
      //获取点击的帖子详细内容
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=pest.pests.pests_answers_list',
        data: {
          d_id: id,
          page: this.page,
          page_size: 10,
        },
      });
      console.log(res);
      this.quizdata = res.data[0];
      console.log(this.quizdata);
      var index2 = this.quizdata.content.indexOf('http');
      this.recursion(index2);
      if (!(index2 + 1)) {
        var obj = {
          image: this.quizdata.img_urls,
        };
        this.list.push(obj);
      }

      this.getParticulars(this.quizdata.lower);
    },
    recursion(index) {
      if (index + 1) {
        var src = this.quizdata.content.slice(
          index,
          this.quizdata.content.indexOf('"', index)
        );
        var length = src.length;
        var obj = {
          image: src,
        };
        this.list.push(obj);
        console.log(src);
        var index3 = this.quizdata.content.indexOf('http', index + length);
        console.log(index3);
        this.recursion(index3);
      }
    },
  },
  onLoad(option) {
    console.log(option.items);
    this.getInvitation(option.items);
  },
};
</script>
<style lang="scss">
// .u-swiper-wrap {
// 	width: 95%;
// 	margin: 20rpx auto;
// }
.partitlteimg {
  width: 95%;
  margin: 0 auto 20rpx;
  height: 428rpx;
  image {
    max-width: 100%;
    max-height: 100%;
  }
}

.quiz {
  width: 95%;
  margin: 20rpx auto;
  border-bottom: 4rpx dashed #e8e8e8;
  .quiz_title {
    width: 100%;
    font-size: 36rpx;
    font-weight: 700;
    text-align: center;
  }
  .quiz_username {
    width: 100%;

    image {
      width: 40rpx;
      height: 40rpx;
      vertical-align: middle;
      margin-right: 20rpx;
    }

    span {
      font-weight: 700;
      font-size: 32rpx;
    }
  }

  .quiz_usertime {
    width: 100%;
    margin-top: 15rpx;
    display: flex;
    justify-content: space-between;

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

    span {
      font-size: 24rpx;
      color: #c1c1c1;
      font-weight: 700;
    }
  }

  .quiz_usercontert {
    padding: 20rpx;
    margin-bottom: 20rpx;
    ::v-deep img {
      width: 0 !important;
      height: 0 !important;
    }
  }
}

.comment {
  width: 95%;
  margin: 20rpx auto 0;

  .comment_title {
    font-weight: 700;
    font-size: 32rpx;
  }

  .scroll-view_H {
    height: 600rpx;
    padding-bottom: 100rpx;
  }

  .comment_unit {
    .comment_unit_user {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;

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

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

        p {
          width: 60rpx;
          height: 30rpx;
          color: white;
          background-color: #5ca348;
          font-size: 24rpx;
          text-align: center;
          line-height: 30rpx;
          padding: 0 10rpx;
          margin-left: 20rpx;
          border-radius: 8rpx;
        }
      }
    }

    .comment_unit_con {
      padding-left: 60rpx;

      ::v-deep p {
        margin-top: 20rpx;

        img {
          margin-top: 20rpx;
          display: block;
          width: 180rpx !important;
          height: 180rpx !important;
        }
      }
    }
  }
}

.issue_box {
  width: 100%;
  background-color: #ffffff;
}

.issue {
  width: 95%;
  margin: 0 auto;
  display: flex;
  padding-bottom: 20rpx;

  input {
    width: 90%;
    background-color: #f3f3f3;
    height: 60rpx;
    text-indent: 1em;
  }

  p {
    width: 10%;
    text-align: right;
    line-height: 60rpx;
    color: #7a7a7a;
  }
}
</style>