yc-ui2 0.2.2-beta2 → 0.2.2-beta3

package/src/components/YcQuestion/index.vue

@@ -1,535 +0,0 @@
-<template>
-  <div class="YcQuestion">
-    <div class="chatPage">
-      <header
-        style="
-          background: url(/cloud-img/customerService/chatTop.png) center
-            no-repeat cover;
-          background-size: cover;
-        "
-      >
-        <div>
-          <h3>{{ title }}</h3>
-          <span>Problem Help</span>
-        </div>
-        <p>{{ commit }}</p>
-      </header>
-      <div class="main">
-        <div>
-          <main ref="main">
-            <p>今天{{ currData }}</p>
-            <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" :data-before="`${title}【${id}号为您服务】`">
-                <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.prevent="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>
-          <footer>
-            <el-input
-              type="textarea"
-              maxlength="500"
-              :autosize="{ minRows: 6, maxRows: 6 }"
-              autofocus="true"
-              resize="none"
-              placeholder="请输入你要咨询的问题"
-              v-model="textareaValue"
-              @keyup.enter.native="carriageReturn"
-            >
-            </el-input>
-            <el-button
-              type="primary"
-              :disabled="!textareaValue"
-              :style="
-                !textareaValue
-                  ? 'background-color: #F7F7F9;color: #FF575F;border-color: transparent;'
-                  : ''
-              "
-              @click="send"
-              >发送</el-button
-            >
-          </footer>
-        </div>
-        <aside>
-          <el-collapse v-model="activeNames" accordion>
-            <el-collapse-item
-              v-for="{
-                discourseVoList,
-                answerTypeId,
-                answerType,
-              } in questionsList"
-              :key="answerTypeId"
-              :name="answerTypeId"
-            >
-              <template slot="title">
-                <img
-                  :src="require(`assets/customerService/ellipticalWenh.png`)"
-                />{{ answerType }}
-              </template>
-              <div
-                v-for="{ problem, problemId } in discourseVoList"
-                :key="problemId"
-                v-html="problem"
-                @click="regularClick(problem, problemId)"
-              ></div>
-            </el-collapse-item>
-          </el-collapse>
-        </aside>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { getProblemTypeAndProblem } from "api/customerService";
-import chatMixin from "comp/YcCustomerService/chatMixin";
-export default {
-  name: "YcQuestion",
-  mixins: [chatMixin],
-  props: {
-    tokenName: String,
-  },
-  data() {
-    return {
-      activeNames: [1],
-      questionsList: [],
-    };
-  },
-  computed: {
-    currData() {
-      const currData = new Date();
-      return `${currData.getHours()}:${currData.getMinutes()}`;
-    },
-    // questionsList() {
-    //   return this.questions.reduce((prev, curr) => {
-    //     // eslint-disable-next-line no-prototype-builtins
-    //     if (prev.hasOwnProperty(curr.type)) {
-    //       prev[curr.type].push(curr.faq)
-    //     } else {
-    //       prev[curr.type] = [curr.faq]
-    //     }
-    //     return prev
-    //   }, {})
-    // },
-  },
-  watch: {
-    id(newVal) {
-      this.getProblemTypeAndProblem(newVal);
-    },
-  },
-  created() {
-    sessionStorage.setItem(process.env.VUE_APP_TOKEN_NAME, this.tokenName);
-    this.getProblemTypeAndProblem(this.id);
-  },
-  methods: {
-    getProblemTypeAndProblem(id) {
-      if (id)
-        getProblemTypeAndProblem(id).then(({ data }) => {
-          this.questionsList = data;
-        });
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.YcQuestion {
-  // min-width: auto;
-  // overflow: hidden;
-  // height: 100vh;
-  ::v-deep .chatPage {
-    background-color: #ffffff;
-
-    > header {
-      height: 8vw;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      gap: 5vw;
-      padding-left: 8vw;
-      // background: url("~assets/customerService/chatTop.png");
-      // background-position: center center;
-      // background-repeat: no-repeat;
-      // background-size: cover;
-
-      > div {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-
-        // flex-direction: row-reverse;
-        h3 {
-          height: 1vw;
-          margin-top: 0px;
-          font-size: 2.125rem;
-          font-weight: bold;
-          color: #191a2c;
-          font-family: Source Han Sans CN-Bold, Source Han Sans CN;
-        }
-
-        span {
-          font-size: 1rem;
-          font-family: LXGW New Clear Gothic-Regular, LXGW New Clear Gothic;
-          font-weight: 400;
-          color: #666;
-        }
-      }
-
-      p {
-        font-size: 1rem;
-        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-        font-weight: 400;
-        color: #2e2f42;
-      }
-    }
-
-    .main {
-      display: flex;
-
-      > div {
-        width: 74vw;
-        position: relative;
-
-        > main {
-          height: 62vh;
-          overflow-y: auto;
-          padding-bottom: 2vw;
-          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;
-          }
-
-          > p {
-            text-align: center;
-            font-size: 0.875rem;
-            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-            font-weight: 400;
-            color: #909399;
-          }
-
-          .message {
-            display: flex;
-            gap: 15px;
-            margin: 1.5vw 1.5vw 0px 1.5vw;
-            opacity: 0;
-
-            .avatar {
-              width: 2.5vw;
-              height: 2.5vw;
-              min-width: 35px;
-              min-height: 35px;
-              border-radius: 50%;
-              transition: all 0.3s linear;
-              &:focus,
-              &:hover {
-                transform: scale(1.2, 1.2) rotate(15deg);
-              }
-            }
-
-            .content {
-              width: fit-content;
-              max-width: 50vw;
-              font-weight: 400;
-              font-size: 1rem;
-              color: #4c4c4d;
-              padding: 10px;
-              border-radius: 10px;
-              position: relative;
-              background-color: #ffffff;
-
-              .href {
-                cursor: pointer;
-                display: block;
-                color: #ff575f;
-
-                &:not(:last-child) {
-                  margin-bottom: 1.5rem;
-                }
-
-                &:hover {
-                  text-decoration: underline;
-                }
-              }
-
-              > .based {
-                cursor: pointer;
-                font-size: 1rem;
-                font-weight: 400;
-                color: #909399;
-                display: flex;
-                align-items: flex-start;
-                justify-content: flex-start;
-                border-top: 1px solid #ebebed;
-                padding-top: 0.625rem;
-                margin-top: 0.625rem;
-                gap: 0.625rem;
-
-                & > span:first-child {
-                  white-space: nowrap;
-                  color: #4c4c4d;
-                  border-radius: 18px;
-                  background-color: #eeeef0;
-                  padding: 0.1875rem 0.625rem;
-                  margin-top: -0.1875rem;
-                }
-
-                & > 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: 0px;
-                    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 {
-                margin-top: 20px;
-
-                &::before {
-                  content: "";
-                  position: absolute;
-                  top: 2px;
-                  left: -10px;
-                  transform: rotate(-45deg);
-                  border-width: 10px;
-                  border-style: solid;
-                  border-color: transparent transparent transparent #fff;
-                }
-
-                &::after {
-                  content: attr(data-before);
-                  width: 200px;
-                  font-size: 0.875rem;
-                  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
-                  font-weight: 500;
-                  color: #8b8c8f;
-                  position: absolute;
-                  left: 0px;
-                  top: -20px;
-                }
-              }
-            }
-
-            &.personal {
-              animation: animation01 0.3s linear 0.3s forwards;
-              flex-direction: row-reverse;
-
-              .content::after {
-                content: "";
-                position: absolute;
-                top: 2px;
-                right: -10px;
-                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;
-              }
-            }
-          }
-        }
-
-        footer {
-          height: 30vh;
-          border: 1px solid #e7e7ea;
-
-          > .el-textarea {
-            border-color: transparent;
-
-            textarea {
-              overflow-y: hidden;
-              // padding-right: 65px;
-              font-weight: 400;
-              color: #19191a;
-              font-size: 1rem;
-              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-            }
-
-            textarea,
-            textarea:focus {
-              border-color: transparent;
-            }
-          }
-
-          > .el-button {
-            float: right;
-            // position: absolute;
-            // bottom: 40px;
-            // right: 40px;
-            z-index: 1;
-            font-size: 0.875rem;
-            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-            font-weight: 400;
-            border-radius: 4px;
-            margin-right: 2vw;
-            width: 5vw;
-            min-width: 92px;
-          }
-        }
-      }
-
-      aside {
-        width: 26vw;
-        height: calc(100vh - 8vw);
-        padding: 1vw;
-        overflow-y: auto;
-        background-color: #ffffff;
-
-        .el-collapse-item__header {
-          color: #373a3c;
-          font-size: 1.5rem;
-          font-weight: 500;
-          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
-          padding: 2rem;
-          background-color: #f00;
-          background: linear-gradient(#ffdad4, #ffa9a3);
-
-          &.is-active {
-            color: #ffffff;
-            background: linear-gradient(#ff897a, #ff645a);
-
-            i {
-              color: #ffffff;
-            }
-          }
-
-          img {
-            width: 2.25rem;
-            height: 2.25rem;
-            float: left;
-            margin-left: -0.5rem;
-            margin-right: 0.5rem;
-          }
-
-          i {
-            font-size: 2rem;
-            color: #ff575f;
-            font-weight: 900;
-          }
-        }
-
-        .el-collapse-item__content {
-          font-size: 1rem;
-          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-          font-weight: 400;
-          padding: 20px 20px 20px 40px;
-          color: #000000;
-          background-color: #f7f7f9;
-
-          > div {
-            position: relative;
-            margin-top: 1rem;
-            cursor: pointer;
-            transition: all 0.3s linear;
-
-            &:first-child {
-              margin-top: 0px;
-            }
-
-            &::before {
-              content: "";
-              position: absolute;
-              top: 5px;
-              left: -15px;
-              // transform: rotate(-45deg);
-              // float: left;
-              border-width: 10px;
-              border-style: solid;
-              border-color: transparent transparent transparent #ffa9a3;
-            }
-
-            &:hover {
-              color: #ff575f;
-              transform: translate(0.5rem);
-
-              &::before {
-                border-color: transparent transparent transparent #ff575f;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>

package/src/components/YcSlideVerify/index.vue

@@ -1,104 +0,0 @@
-<template>
-  <el-dialog
-    :title="title"
-    :visible="isShow"
-    width="350px"
-    :append-to-body="true"
-    @close="handleClose"
-  >
-    <slide-verify
-      ref="slideblock"
-      :l="42"
-      :r="10"
-      :w="310"
-      :h="155"
-      :imgs="imgs"
-      :accuracy="accuracy"
-      :slider-text="sliderText"
-      @success="onSuccess"
-      @fail="onFail"
-      @again="onAgain"
-      @refresh="onRefresh"
-      @fulfilled="onFulfilled"
-    ></slide-verify>
-  </el-dialog>
-</template>
-
-<script>
-import SlideVerify from "vue-monoplasty-slide-verify/src/lib/slide-verify";
-export default {
-  name: "YcSlideVerify",
-  components: {
-    SlideVerify,
-  },
-  props: {
-    title: {
-      type: String,
-      default: "滑动验证",
-    },
-    isShow: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      accuracy: 5,
-      sliderText: "拖动完成上方拼图",
-      countDownNum: 120,
-    };
-  },
-  computed: {
-    imgs() {
-      const list = [];
-      for (let i = 1; i < 9; i++) {
-        list.push(`/cloud-img/${i}.jpg`);
-      }
-      return list;
-    },
-  },
-  watch: {
-    isShow(newVal) {
-      // 这里第三方引用，ref没有渲染完成，reset报错，还不能用？号
-      newVal &&
-        this.$refs.slideblock &&
-        this.$refs.slideblock.reset &&
-        this.$refs.slideblock.reset();
-    },
-  },
-  created() {},
-  methods: {
-    onSuccess() {
-      this.$emit("success");
-      this.$emit("update:isShow", false);
-    },
-    onFail() {},
-    onAgain() {},
-    onRefresh() {},
-    onFulfilled() {},
-    handleClose() {
-      this.$emit("update:isShow", false);
-      this.$emit("close");
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.el-dialog__wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-::v-deep .el-dialog {
-  margin-top: 0 !important;
-  border-radius: 8px;
-}
-::v-deep .el-dialog__header {
-  background-color: #f2f6fc;
-  border-radius: 8px 8px 0 0;
-}
-.el-dialog__body {
-  display: flex;
-  justify-content: center;
-}
-</style>

package/src/main.js

@@ -1,19 +0,0 @@
-import "core-js"; // IE
-// import "current-script-polyfill"; // IE
-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
-
-// import SlideVerify from "vue-monoplasty-slide-verify"
-import ElementUI from "element-ui";
-import "element-ui/lib/theme-chalk/index.css";
-
-Vue.config.productionTip = false;
-
-// Vue.use(SlideVerify)
-Vue.use(ElementUI);
-
-new Vue({
-  render: (h) => h(App),
-  router,
-}).$mount("#yc-ui2");

package/src/packages/index.js

@@ -1,29 +0,0 @@
-import YcSlideVerify from 'comp/YcSlideVerify'
-import YcCustomerService from 'comp/YcCustomerService'
-import YcQuestion from 'comp/YcQuestion'
-import YcCA from 'comp/YcCA'
-
-
-const components = [
-  YcSlideVerify,
-  YcCustomerService,
-  YcQuestion,
-  YcCA
-]
-// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
-const install = function (Vue) {
-   // 遍历注册全局组件
-  components.forEach(component => {
-    Vue.component(component.name, component)
-  })
-
-  // 判断是否是直接引入文件,如果是，就不用调用 Vue.use()
-  if (typeof window !== 'undefined' && window.Vue) {
-    install(window.Vue)
-  }
-}
-
-// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
-export default {
-  install
-}

package/src/router/index.js

@@ -1,20 +0,0 @@
-import Vue from "vue"
-import VueRouter from "vue-router"
-
-Vue.use(VueRouter)
-
-const routes = [
-  {
-    path: "/question",
-    component: (resolve) => require(['views/question.vue'], resolve),
-    hidden: true,
-  },
-]
-
-const router = new VueRouter({
-  routes,
-  mode: "history", // 去掉url中的#
-  scrollBehavior: () => ({ y: 0 })
-})
-
-export default router

package/src/utils/auth.js

@@ -1,6 +0,0 @@
-export function getCookie(name) {
-  const value = `; ${document.cookie}`
-  const parts = value.split(`; ${name}=`)
-  if (parts.length === 2) return parts.pop().split(";").shift()
-  return null
-}