uniapp H5端模拟机器人回复

模拟机器人聊天并回复

1.html部分，通过user字段区分机器人或用户发送的信息进行渲染。

<template>
  <view class="vw1">
    <view class="center">
      <view class="message_box">
        <view class="vw3" v-for="(item, index) in msglist" :key="index">
          <view v-if="item.user != 'my'">
            <view class="icon_box">
              <img class="icon" src="../../static/jqr.png" alt="" />
              <p>机器人</p>
            </view>
            <text class="chat-bubble">{{ item.text }}</text>
          </view>
 
          <view class="my" v-else>
            <text class="my_p">{{ item.text }}</text>
            <view class="my_box">
              <img class="my_icon" src="../../static/tx.png" alt="" />
              <p>我</p>
            </view>
          </view>
        </view>
      </view>
      <view class="vw2">
        <input class="ip1" placeholder="请输入您想咨询的信息" v-model="text" />
        <button class="bt1" type="primary" @click="click1">发送</button>
      </view>
      <view class="vw2">
        <button type="primary" @click="click2">模拟回复</button>
      </view>
    </view>
  </view>
</template>

2.JS部分

<script>
export default {
  data() {
    return {
      text: "", //用户输入框中输入的内容
      msglist: [], //用于存放对话内容的列表
    };
  },
  methods: {
    // 此处为写死数据模拟机器人回复，后期通过接口返回信息添加到数组里即可。
    click2() {
      this.msglist.push({
        text: "你好，您想咨询什么问题",
        user: "",
      });
    },
    // 用户发送信息，此处为写死数据。后期通过接口方式将text传送即可。
    click1() {
      if (this.text == "") {
        uni.showToast({
          title: "请输入内容",
          icon: "none",
        });
        return;
      }
      //定义一个click1函数来实现存入对话及api请求
      this.msglist.push({
        text: this.text,
        user: "my",
      }); //将输入框中内容传入存放对话的列表
      this.text = "";
      uni.request({
        //发起api请求
        url: "xxx",
 
        //将用户输入框中的内容放入api的url中
        success: (res) => {
          console.log(res.data);
          this.text = ""; //清空输入框，方便用户下次输入
          this.msglist.push(res.data.text); //将机器人回复内容传入列表
        },
      });
    },
  },
};
</script>

3.css部分

<style lang="less" scoped>
.vw1 {
  width: 100%;
  height: 100%;
  flex: ;
  display: flex;
  flex-direction: column;
  justify-content: column;
  align-items: center;
}
 
.center {
  width: 84%;
  height: 80vh;
  border: 2rpx solid #ccc;
  border-radius: 5rpx;
  padding: 15rpx 20rpx;
  .message_box {
    height: 70vh;
    margin-bottom: 20rpx;
    overflow-y: auto;
  }
  .vw3 {
    margin-top: 7px;
    .icon_box {
      display: inline-block;
      text-align: center;
      .icon {
        width: 65rpx;
        height: 65rpx;
        vertical-align: bottom;
      }
      p {
        font-size: 26rpx;
      }
    }
 
    .chat-bubble {
      position: relative;
      width: 200px;
      padding: 30rpx;
      border-radius: 10px;
      border: 2rpx solid #fff;
      background-color: #ed6b7a;
      display: inline-block;
      margin-left: 10px;
      color: #fff;
      vertical-align: bottom;
    }
 
    .chat-bubble:before {
      content: "";
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
      width: 20px;
      height: 20px;
      background-color: #ed6b7a;
      border: inherit;
      border-top: none;
      border-right: none;
    }
 
    .chat-bubble:after {
      content: "";
      position: absolute;
      left: -9px;
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
      width: 18px;
      height: 18px;
      background-color: #ed6b7a;
      border: inherit;
      border-top: none;
      border-right: none;
    }
 
    .my {
      text-align: right;
      .my_box {
        display: inline-block;
        text-align: center;
        .my_icon {
          width: 65rpx;
          height: 65rpx;
          vertical-align: bottom;
        }
        p {
          font-size: 26rpx;
        }
      }
    }
 
    .my_p {
      position: relative;
      width: 200px;
      padding: 30rpx;
      border-radius: 10px;
      border: 2rpx solid #fff;
      background-color: #22ac38;
      display: inline-block;
      margin-right: 15px;
      color: #fff;
      vertical-align: bottom;
    }
 
    .my_p:before {
      content: "";
      position: absolute;
      right: -10px;
      top: 50%;
      -webkit-transform: translateY(-50%) rotate(45deg);
      transform: translateY(-49%) rotate(-136deg);
      width: 18px;
      height: 22px;
      background-color: #22ac38;
      border: inherit;
      border-top: none;
      border-right: none;
    }
 
    .my_p:after {
      content: "";
      position: absolute;
      right: -10px;
      top: 50%;
      -webkit-transform: translateY(-50%) rotate(45deg);
      transform: translateY(-49%) rotate(-136deg);
      width: 18px;
      height: 22px;
      background-color: #22ac38;
      border: inherit;
      border-top: none;
      border-right: none;
    }
 
  }
  .vw2 {
    margin-bottom: 20px;
    .ip1 {
      display: inline-block !important;
      width: 78%;
      caret-color: #4e6ef2;
      box-sizing: border-box;
      display: block;
      padding: 10px 20px;
      margin: 0;
      height: 48px;
      line-height: 20px;
      border: 1px solid #b8b8b8;
      font-size: 18px;
      color: #1f1f1f;
      transition: 0.3s;
      font-family: PingFangSC-Regular, Tahoma, Helvetica, "Microsoft Yahei",
        "微软雅黑", Arial, STHeiti;
      border-radius: 8px;
    }
    .bt1 {
      display: inline-block;
      width: 20%;
      margin-left: 2%;
      height: 48px;
      line-height: 48px;
      background: #4e6ef2;
      border-radius: 10px;
      box-shadow: 0 6px 16px 0 rgb(78 111 242 / 30%);
      font-size: 17px;
      font-weight: 800;
      border: 0;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>