yc-ui2 0.2.2-beta2 → 0.2.2-beta3

package/src/components/YcCustomerService/chat.vue

@@ -1,337 +0,0 @@
-<template>
-  <div class="chat" v-show="visible">
-    <header>
-      <img :src="require('assets/customerService/admin.jpg')" />
-      <span>{{ title }}</span>
-      <el-tooltip content="点击跳转至客服页面" placement="top" effect="light">
-        <i class="icon-enlarge" v-if="jumpPage" @click="enlarge"
-          ><img :src="require('assets/customerService/enlarge.png')"
-        /></i>
-      </el-tooltip>
-      <i class="el-icon-close" @click="close"></i>
-    </header>
-    <main ref="main">
-      <div
-        v-for="(item, index) in messagelist"
-        :key="index"
-        :class="['message', item.id]"
-      >
-        <img
-          class="avatar"
-          :src="require(`assets/customerService/${item.id}.jpg`)"
-        />
-        <div class="content">
-          <span
-            v-for="({ msg, id, answerType }, index) in item.msg"
-            :key="index"
-            v-html="(item.msg.length > 1 ? 1 + index + '. ' : ' ') + msg + (answerType ? `《${answerType}》`: '')"
-            :class="item.msg.length > 1 ? 'href' : ''"
-            @click="item.msg.length > 1 && regularClick(msg, id)"
-          ></span>
-          <div class="based" v-if="item.based" @click="handExpand(item)">
-            <span>依据</span
-            ><span :class="{ 'is-active': item.isActive }"
-              >{{ item.based }}<i class="el-icon-d-arrow-right"></i
-            ></span>
-          </div>
-        </div>
-      </div>
-    </main>
-    <nav>
-      <el-button
-        size="mini"
-        round
-        v-for="(item, index) in regular"
-        :key="item + index"
-        @click="regularClick(item)"
-        >{{ item }}</el-button
-      >
-    </nav>
-    <el-input
-      type="textarea"
-      maxlength="500"
-      :autosize="{ minRows: 2, maxRows: 3 }"
-      autofocus="true"
-      resize="none"
-      placeholder="请反馈您的问题，我们将尽快回复"
-      v-model="textareaValue"
-      @keyup.enter.native="carriageReturn"
-    >
-    </el-input>
-    <!-- <el-button size="mini" type="primary">发送</el-button> -->
-    <el-button
-      type="primary"
-      size="mini"
-      :disabled="!textareaValue"
-      @click="send"
-      >发送</el-button
-    >
-  </div>
-</template>
-<script>
-import { findMaxNumData } from "api/customerService"
-import chatMixin from "./chatMixin"
-export default {
-  name: "ChatMini",
-  mixins: [chatMixin],
-  watch: {
-    id(newValue) {
-      this.findMaxNumData(newValue)
-    },
-  },
-  created() {
-    this.findMaxNumData(this.id)
-  },
-  methods: {
-    findMaxNumData(id) {
-      if (id)
-        findMaxNumData(id).then(({ data }) => {
-          this.regular = data.map((item) => item.problem)
-        })
-    },
-  },
-}
-</script>
-<style lang="scss" scoped>
-.chat {
-  width: 350px;
-  height: 480px;
-  position: fixed;
-  bottom: 10px;
-  right: 55px;
-  z-index: 2001;
-  background-color: #ffffff;
-  border-radius: 12px;
-  border: 1px solid #e6ebf5;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
-  overflow: hidden;
-  > header {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    background-color: #ff575f;
-    font-size: 16px;
-    padding: 10px;
-    font-weight: 400;
-    color: #fafdff;
-    > img {
-      width: 44px;
-      height: 44px;
-      border-radius: 50%;
-      margin-right: 10px;
-      transition: all 0.3s linear;
-      &:focus,
-      &:hover {
-        transform: scale(1.2, 1.2) rotate(15deg);
-      }
-    }
-    i {
-      cursor: pointer;
-      position: absolute;
-      top: 5px;
-      width: 20px;
-      height: 20px;
-      border-radius: 6px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      transition: all 0.3s linear;
-      &:focus,
-      &:hover {
-        transform: scale(1.2, 1.2);
-        background-color: rgba(255, 137, 122, 0.8);
-      }
-      &.el-icon-close {
-        right: 10px;
-      }
-      &.icon-enlarge {
-        right: 35px;
-      }
-      > img {
-        width: 12px;
-      }
-    }
-  }
-
-  > main {
-    width: 100%;
-    height: 60%;
-    overflow-y: auto;
-    padding-bottom: 20px;
-    background-color: #f7f7f9;
-    // 滚动条宽度
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-    // 滚动条轨道
-    &::-webkit-scrollbar-track {
-      background: rgb(239, 239, 239);
-      border-radius: 2px;
-    }
-    // 小滑块
-    &::-webkit-scrollbar-thumb {
-      background: #ff8879;
-      border-radius: 10px;
-    }
-    &::-webkit-scrollbar-thumb:hover {
-      background: #ff755d;
-    }
-    .message {
-      display: flex;
-      gap: 15px;
-      position: relative;
-      margin: 20px 5px 0px 5px;
-      opacity: 0;
-      .avatar {
-        width: 30px;
-        height: 30px;
-        border-radius: 50%;
-      }
-      .content {
-        width: fit-content;
-        max-width: 250px;
-        font-weight: 400;
-        font-size: 12px;
-        color: #4c4c4d;
-        line-height: 20px;
-        padding: 10px;
-        border-radius: 10px;
-        background-color: #ffffff;
-        .href {
-          cursor: pointer;
-          display: block;
-          color: #ff575f;
-          &:not(:last-child) {
-            margin-bottom: 0.5rem;
-          }
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-
-        > .based {
-          cursor: pointer;
-          color: #909399;
-          display: flex;
-          align-items: flex-start;
-          justify-content: flex-start;
-          border-top: 1px solid #ebebed;
-          padding-top: 5px;
-          margin-top: 5px;
-          gap: 5px;
-
-          & > span:first-child {
-            white-space: nowrap;
-            color: #4c4c4d;
-            border-radius: 10px;
-            background-color: #eeeef0;
-            padding: 0px 7px;
-          }
-
-          & > span:last-child {
-            width: 100%;
-            position: relative;
-            display: inline-block;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            padding-right: 12px;
-
-            .el-icon-d-arrow-right {
-              position: absolute;
-              right: 0px;
-              bottom: 5px;
-              transform: rotate(90deg);
-              transition: all 0.35s linear;
-            }
-            &.is-active {
-              overflow: visible;
-              white-space: normal;
-              .el-icon-d-arrow-right {
-                transform: rotate(270deg);
-              }
-            }
-
-            &:hover {
-              color: #ff575f;
-            }
-          }
-        }
-      }
-      &.admin {
-        animation: animation01 0.3s linear 1.5s forwards;
-        .content::before {
-          content: "";
-          position: absolute;
-          top: 2px;
-          left: 37px;
-          transform: rotate(-45deg);
-          border-width: 10px;
-          border-style: solid;
-          border-color: transparent transparent transparent #ffffff;
-        }
-      }
-      &.personal {
-        animation: animation01 0.3s linear 0.3s forwards;
-        flex-direction: row-reverse;
-        .content::after {
-          content: "";
-          position: absolute;
-          top: 2px;
-          right: 37px;
-          transform: rotate(-45deg);
-          border-width: 10px;
-          border-style: solid;
-          border-color: transparent transparent #ffffff transparent;
-        }
-      }
-      @keyframes animation01 {
-        0% {
-          transform: translateY(20px);
-          opacity: 0;
-        }
-
-        100% {
-          transform: translateY(0px);
-          opacity: 1;
-        }
-      }
-    }
-  }
-  > nav {
-    overflow-x: auto;
-    background-color: #f7f7f9;
-    border-bottom: 1px solid #e7e7ea;
-    padding: 5px 10px;
-    display: flex;
-    .el-button {
-      font-size: 12px;
-      font-weight: 400;
-      color: #4c4c4d;
-      background-color: #fff !important;
-      border: 1px solid #e7e7ea;
-      padding: 5px 8px;
-    }
-  }
-  > .el-textarea {
-    border-color: transparent;
-    textarea {
-      overflow-y: hidden;
-      padding-right: 65px;
-      font-weight: 400;
-      color: #19191a;
-      font-size: 12px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-    }
-    textarea,
-    textarea:focus {
-      border-color: transparent;
-    }
-  }
-  > .el-button {
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
-  }
-}
-</style>

package/src/components/YcCustomerService/chatMixin.js

@@ -1,128 +0,0 @@
-import { findDataByProblem } from "api/customerService";
-export default {
-  props: {
-    visible: Boolean,
-    jumpPage: String,
-    title: String,
-    commit: String,
-    id: {
-      default: 0,
-      type: Number,
-    },
-  },
-  data() {
-    return {
-      textareaValue: "",
-      regular: [
-        /*'发票增值税率', '城市维护建设税', '教育费附加征收率'*/
-      ],
-      messagelist: [
-        {
-          id: "admin",
-          msg: [
-            {
-              msg: `您好，很高兴为你服务！`,
-            },
-          ],
-          isActive: false,
-        },
-        // {id: 'personal', msg: ['消费税？']}
-      ],
-      isActive: false,
-    };
-  },
-  computed: {
-    questions() {
-      return JSON.parse(this.json);
-    },
-  },
-  methods: {
-    close() {
-      this.$emit("update:visible", false);
-    },
-    carriageReturn() {
-      let e = window.event || arguments[0];
-      if (
-        (e.key == "Enter" || e.code == "Enter" || e.keyCode == 13) &&
-        this.textareaValue
-      ) {
-        this.send();
-      }
-    },
-    send() {
-      if (!this.textareaValue.replace(/[^\w\u4E00-\u9FA5]/g, "")) return;
-
-      this.add(this.textareaValue, "personal", () => {
-        this.textareaValue = "";
-      });
-      this.search(this.textareaValue);
-    },
-    regularClick(msg, id) {
-      this.add([{ msg, id }]);
-      this.search(msg, id);
-    },
-    search(msg, id) {
-      const parameter = {
-        aiServiceId: 1,
-        problem: msg.replace(/\n/g, ""),
-      };
-      id && (parameter["id"] = id);
-      findDataByProblem(parameter).then(({ data }) => {
-        this.add(
-          (() => {
-            if (data) {
-              return data.length > 1
-                ? data.reduce(
-                    (prev, { problem, id, answerType }) => [
-                      ...prev,
-                      {
-                        msg: problem,
-                        id,
-                        answerType,
-                      },
-                    ],
-                    []
-                  )
-                : data[0].answer || "您好";
-            } else {
-              return "您好";
-            }
-          })(),
-          "admin",
-          null,
-          (() => {
-            if (data && data.length == 1) {
-              return data[0].based;
-            } else {
-              return "";
-            }
-          })()
-        );
-      });
-    },
-    add(msg, id = "personal", fun, based = "") {
-      this.messagelist.push({
-        id,
-        msg: Array.isArray(msg) ? msg : [{ msg }],
-        based,
-        isActive: false,
-      });
-      this.$nextTick(() => {
-        fun && fun();
-        // this.$refs.main.scrollTop += 70
-        this.$refs.main.scrollTop = this.$refs.main.scrollHeight;
-        // console.log(this.$refs.main.scrollTop, this.$refs.main.scrollHeight)
-      });
-    },
-    enlarge() {
-      // this.$router.resolve({
-      //     name: this.jumpPage
-      // })
-
-      window.open(this.jumpPage, "_blank");
-    },
-    handExpand(item) {
-      item.isActive = !item.isActive;
-    },
-  },
-};