saas_miniprogram/components/course/answerBox.vue

<template>
  <view class="Answering">
    <view
      v-for="(item, index) in answerList"
      :key="index"
      style="background-color: #ffffff"
      class="answer_item"
    >
      <view class="chat_box" @click.stop="clearCtx">
        <view style="display: flex; flex: 1">
          <view
            ><image
              :src="
                item.assignUserId > 0 && !item.realname
                  ? '/static/logo_xcx.png'
                  : $method.splitImgHost(item.avatar)
              "
              style="width: 64rpx; height: 64rpx"
            ></image
          ></view>
          <view style="margin-left: 15rpx">
            <view class="chat1">{{
              item.assignUserId > 0 && !item.realname
                ? "祥粤老师"
                : item.realname
            }}</view>
            <view class="chat2">{{
              $method.timestampToTime(item.createTime, false)
            }}</view>
            <view class="chat3">
              <text v-if="item.assignUserId > 0">回复</text>
              <text v-if="item.assignUserId > 0" style="color: #007aff"
                >@{{ item.assignRealname }}</text
              >
              <view style="word-break: break-all">{{ item.answerText }}</view>
            </view>
          </view>
        </view>
        <view
          class="btnReply"
          @click.stop="replyContent(item)"
          v-if="item.userId != userId"
          >回复</view
        >
        <view v-else class="btnDel" @click.stop="delAnswer(item.answerId)"
          >删除</view
        >
      </view>
      <u-line color="#D6D6DB" />
    </view>
    <view v-if="answerList.length == 0" style="text-align: center"
      >暂无记录</view
    >
    <view class="inputBottom" :style="{ bottom: bottomHeight + 'px' }">
      <view class="flex_auto">
        <input
          v-model="ctxValue"
          height="60"
          fixed="true"
          :focus="isFocus"
          :placeholder="placeholder"
          type="text"
          :custom-style="inputStyle"
          :adjust-position="false"
          class="input"
          @focus="focusNote"
          @blur="blur"
        />
      </view>
      <view class="btn" @click="postContent">提交</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "SaasMiniprogramAnswerBox",
  props: {
    userId: {
      type: Number,
      defaule: 0,
    },
  },
  inject: ["paramsFn"],
  data() {
    return {
      answerList: [],
      ctxValue: "",
      isFocus: false,
      placeholder: "您可以在这里输入答疑内容",
      inputStyle: {
        background: "rgba(244, 244, 244, 0.98)",
        borderRadius: "24rpx",
        padding: "8rpx",
        marginBottom: "10rpx",
      },
      bottomHeight: 0,
      assignUserId: 0,
    };
  },

  mounted() {
    this.getAnswerList();
  },

  methods: {
    postContent() {
      if (!this.ctxValue || this.ctxValue == "") {
        this.$u.toast("请输入内容");
        return;
      }
      this.postAnswer();
    },
    blur() {
      this.bottomHeight = 0;
      this.clearTimer = setTimeout(() => {
        this.ctxValue = "";
        this.isFocus = false;
        this.assignUserId = 0;
        this.placeholder = "您可以在这里输入答疑内容";
      }, 2000);
    },
    focusNote(event) {
      this.bottomHeight = event.detail.height;
    },
    getAnswerList() {
      this.$api.answerList(this.params).then((res) => {
        if (res.data.code == 200) {
          this.answerList = res.data.rows;
        }
      });
    },
    postAnswer() {
      let self = this;
      let data = {
        answerText: this.ctxValue,
        ...this.params,
      };
      if (this.assignUserId > 0) {
        data.assignUserId = this.assignUserId;
      }
      this.$api.postAnswer(data).then((res) => {
        if (res.data.code == 200) {
          this.$u.toast("发布成功");
          self.getAnswerList();
          this.isFocus = false;
          this.placeholder = "您可以在这里输入答疑内容";
          this.ctxValue = "";
          this.assignUserId = 0;
        }
      });
    },
    delAnswer(answerId) {
      this.$api
        .delAnswer({
          answerId: answerId,
          status: -1,
          orderGoodsId: this.params.orderGoodsId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.getAnswerList();
          }
        });
    },
    clearCtx() {
      this.placeholder = "您可以在这里输入答疑内容";
      this.ctxValue = "";
      this.assignUserId = 0;
    },
    replyContent(item) {
      this.isFocus = true;
      this.assignUserId = item.userId;
      this.placeholder = "@" + item.realname;
    },
  },
  computed: {
    params() {
      return this.paramsFn(["orderGoodsId", "goodsId", "courseId", "gradeId"]);
    },
  },
};
</script>

<style lang="scss" scoped>
.Answering {
  .answer_item {
    &:nth-child(2) {
      border-radius: 16rpx 16rpx 0rpx 0rpx;
    }
    &:nth-last-child(1) {
      border-radius: 0rpx 0rpx 16rpx 16rpx;
    }
  }
}
.chat_box {
  display: flex;
  padding: 20rpx;
  justify-content: space-between;
}
.chat3 {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  margin-top: 10rpx;
}
.chat2 {
  font-size: 20rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-top: 10rpx;
}
.chat1 {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.btnReply {
  width: 80rpx;
  height: 40rpx;
  background: #e3f0ff;
  border-radius: 16rpx;
  text-align: center;
  color: #007aff;
}
.btnDel {
  width: 80rpx;
  height: 40rpx;
  background: #ffedf0;
  border-radius: 16rpx;
  text-align: center;
  color: #ff2d55;
}
.btnReply {
  width: 80rpx;
  height: 40rpx;
  background: #e3f0ff;
  border-radius: 16rpx;
  font-size: 24rpx;
}
.inputBottom {
  position: fixed;
  left: 0;
  bottom: 0;
  background: #ffffff;
  height: 98rpx;
  display: flex;
  align-items: center;
  width: 100%;

  .flex_auto {
    flex: 1;
    margin-left: 10%;
    word-break: break-all;
    // .input {
    //   height: 60rpx;
    // }
  }

  .btn {
    color: #007aff;
    font-size: 30rpx;
    font-weight: bold;
    width: 15%;
    text-align: center;
  }
  .input {
    background: rgba(244, 244, 244, 0.98);
    height: 60rpx;
    border-radius: 24rpx;
    margin-top: 12rpx;
  }
}
</style>