opms_wechat/pages/home/reply.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-05-22 15:31:58
 * @Description: file content
 * @FilePath: \oms\pages\distributor\index.vue
-->
<template>
  <view class="home">
    <view class="nav">
      <view :style="{ paddingTop }">
        <view class="title" :style="[{ height }, { lineHeight: height }]">
          <text>评论回复</text>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="flex top-tips">
        <u-text type="error" text="*请先回复完以下评论"></u-text>
        <u-text type="primary" :text="'待回复信息' + replyIndex + '/' + commentList.length"></u-text>
      </view>
      <transition-group name="fade" tag="view">
        <view class="comment-wrap" v-show="replyIndex - 1 == i" v-for="(v, i) in commentList" :key="i">
          <view class="header flex">
            <u-image
              :src="require('../../static/images/user_avatar.png')"
              width="40px"
              height="40px"
              shape="circle"></u-image>
            <view class="name">{{ v.createdName }}</view>
          </view>
          <view class="content-wrap">
            <view class="content">
              <u-text :text="v.content"></u-text>
            </view>
            <view class="flex">
              <text>{{ parseTime(v.createdTime, '{y}-{m}-{d} {h}:{i}') }}</text>
            </view>
            <view class="replyText">
              <u-textarea v-model="replyContent" height="100" placeholder="回复内容："></u-textarea>
              <view style="float: right; margin: 20px 0 0">
                <u-button :loading="loading" customStyle="width:60px" type="primary" @click="handleReply(v)">
                  回复
                </u-button>
              </view>
            </view>
          </view>
        </view>
      </transition-group>
    </view>
  </view>
</template>
<script>
  import followApi from '@/api/follow/index'
  import to from 'await-to-js'
  export default {
    name: 'omsIndex',
    components: {},
    data() {
      return {
        height: '',
        paddingTop: '',
        commentList: [],
        replyIndex: 1,
        replyContent: '',
        loading: false,
      }
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    onShow() {
      this.getCommentList()
    },
    methods: {
      async getCommentList() {
        const [err, res] = await to(followApi.getNeedReplyComments())
        if (err) return
        if (res && res.code == 200) {
          this.commentList = res.data.list
        }
      },
      async handleReply(row) {
        if (!this.replyContent) {
          return this.$u.toast('请输入回复内容')
        }
        const params = {
          followId: '' + row.followId,
          content: this.replyContent,
          pid: row.id,
        }
        this.loading = true
        const [err, res] = await to(followApi.onReply(params))
        this.loading = false
        if (err) return
        if (res && res.code == 200) {
          this.replyContent = ''
          if (this.replyIndex < this.commentList.length) {
            this.replyIndex++
            return this.$u.toast('回复成功，请继续回复下一条')
          }
          this.$u.toast('已全部回复，即将返回首页')
          setTimeout(() => {
            uni.switchTab({ url: '/pages/home/index' })
          }, 2000)
        }
      },
    },
  }
</script>
<style>
  page {
    background: #f2f3f5;
  }
</style>
<style lang="scss" scoped>
  .home {
    padding-top: 188rpx;
    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 284rpx;
      background: #3e7ef8;
      .title {
        position: relative;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
        .back {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          left: 70rpx;
          display: flex;
        }
      }
    }
    .main {
      position: absolute;
      width: 100%;
      height: calc(100vh - 188rpx);
      background: #f5f5f5;
      box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
      border-radius: 31rpx 31rpx 0 0;
      padding: 0 32rpx;
      padding-bottom: 64rpx;
      .top-tips {
        padding: 10px 10px 20px;
      }
      .comment-wrap {
        border: 1px solid #d7e8f4;
        background: #f7fbfe;
        border-radius: 8px;
        padding: 10px;
        overflow: hidden;
        .header {
          align-items: center;
          .name {
            margin-left: 20rpx;
            font-weight: bold;
            color: #333;
            margin-left: 10px;
          }
        }
        .content-wrap {
          padding-left: 50px;
          .content {
            padding: 10px 0;
          }
        }
        .replyText {
          margin: 20px 0;
        }
      }
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  .is-hidden {
    display: none;
  }
</style>