{"version":3,"file":"SideBar-2.0.53.js","sources":["../../../../components/Chat/SideBar.vue"],"sourcesContent":["\r\n<template>\r\n  <div class=\"side-bar\">\r\n    <div class=\"logo-box\">\r\n      <div>\r\n        <a href=\"https://www.ppkao.com\">\r\n          <img class=\"logo\" src=\"https://static.ppkao.com/chat/assets/logo.png\"  alt=\"考试资料网\"/>\r\n        </a>\r\n      </div>\r\n    </div>\r\n    <div class=\"search-record\">\r\n      <template v-if=\"records.length > 0\">\r\n        <div v-for=\"item in records\" class=\"record-box\">\r\n       <span class=\"days\">{{ item.day }}</span>\r\n        <ul class=\"record-list\">\r\n          <li v-for=\"ele in item.data\" @click=\"handleToChat(ele)\">\r\n            <span :class=\"{active: ele.AddDate === route.query.date}\">{{ ele.title }}</span>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n      </template>\r\n    </div>\r\n    <div class=\"info-box\">\r\n      <el-popover\r\n        trigger=\"hover\"\r\n        placement=\"right\"\r\n        :effect=\"effect\"\r\n      >\r\n        <template #reference>\r\n          <div class=\"info-wrap\">\r\n            <div class=\"left-box\">\r\n              <img class=\"avatar\" src=\"https://static.ppkao.com/chat/assets/kefu.png\" />\r\n              <div>\r\n                <span>联系客服</span>\r\n                <span>周一至周五 08:30-18:00</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </template>\r\n        <template #default>\r\n          <div class=\"qrcode-box\">\r\n            <img src=\"https://static.ppkao.com/public/wxqrcode/pptiku.jpg\" alt=\"联系客服\"/>\r\n            <span>微信扫一扫关注公众号后联系客服</span>\r\n          </div>\r\n        </template>\r\n      </el-popover>\r\n\r\n        <NuxtLink v-if=\"store.userInfo.isLogin\" class=\"info-wrap line\" href=\"/user\" target=\"_blank\">\r\n          <div class=\"left-box \">\r\n              <img class=\"avatar\" :src=\"userInfo.UserFace\" />\r\n              <div v-if=\"userInfo.RealName\">\r\n                <span >{{ userInfo.RealName }}</span>\r\n                <span>剩余次数: {{ userInfo.SearchPackNum }}</span>\r\n              </div>\r\n\r\n          </div>\r\n          <ArrowSvg class=\"arrow\"/>\r\n        </NuxtLink>\r\n      <div v-else class=\"info-wrap line\" @click=\"modalStore.setModal('scan', true)\">\r\n          <div  class=\"left-box\" >\r\n            <img class=\"avatar\" src=\"https://static.ppkao.com/chat/assets/login.png\" />\r\n            <div>\r\n              <span>登录</span>\r\n              <span>剩余次数:0</span>\r\n            </div>\r\n          </div>\r\n          <ArrowSvg class=\"arrow\"/>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</template>\r\n<script setup>\r\nimport ArrowSvg from '@/assets/svgs/arrow.svg';\r\nimport { getUserInfo as getUserModel } from '@/api';\r\nconst effect = computed(() =>  useNuxtApp().$darkMode.isDarkMode.value ? 'dark' : 'light');\r\nconst modalStore = useModalStore()\r\nconst store = useUserStore();\r\nconst router = useRouter();\r\nconst route = useRoute()\r\n\r\nconst isMini = inject('is-mini');\r\n\r\nlet userInfo = reactive({\r\n  UserFace: 'https://static.ppkao.com/assets/image/avatar.png',\r\n  RealName: '考试资料网用户',\r\n  SearchPackNum: 0\r\n});\r\n\r\nconst onLoginSuccess = () => {\r\n  modalStore.setModal('pay', false);\r\n  getUserInfo();\r\n}\r\nconst props = defineProps({\r\n  record: {\r\n    type: Array,\r\n    required: true\r\n  }\r\n});\r\n\r\nconst records = computed(() => categorizeData(props.record));\r\n\r\nconst getUserInfo = () => {\r\n  getUserModel()\r\n\t\t.then(data => {\r\n\t\t\tObject.assign(userInfo, { ...data.UserList[0] });\r\n\t\t})\r\n}\r\nconst handleToChat = (item) => {\r\n\trouter.replace({\r\n\t\tquery: {\r\n\t\t\tdate: item.AddDate\r\n\t\t}\r\n\t});\r\n}\r\n\r\nwatchEffect(() => {\r\n\tif (props.record.length > 0) {\r\n\t\tgetUserInfo();\r\n\t}\r\n})\r\nonMounted(() => {\r\n  if (store.userInfo.isLogin && !isMini) {\r\n\t  getUserInfo();\r\n  }\r\n})\r\n\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.qrcode-box {\r\n  @include flex-col-center;\r\n  img {\r\n    width: 120px;\r\n  }\r\n  span {\r\n    text-align: center;\r\n    margin-top: 6px;\r\n    @include font(var(--title-color))\r\n  }\r\n}\r\n.side-bar {\r\n  width: 232px;\r\n  height: calc(100% - 50px);\r\n  background: var(--side-bg-color);\r\n  box-sizing: border-box;\r\n  position: relative;\r\n  z-index: 3;\r\n  .logo-box {\r\n    width: 100%;\r\n    height: 80px;\r\n    padding: 10px 20px 0 20px;\r\n    div {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      padding: 0 20px;\r\n      height: 100%;\r\n      border-bottom: 1px solid var(--line-color);\r\n    }\r\n    .logo {\r\n      width: 136px;\r\n      height: 38px;\r\n      display: block;\r\n      margin: 0 auto;\r\n    }\r\n  }\r\n  .search-record {\r\n    height: calc(100% - 302px);\r\n    margin-top: 10px;\r\n    overflow: auto;\r\n    padding: 0 20px;\r\n    &::-webkit-scrollbar {\r\n      width: 4px; /* 滚动条宽度 */\r\n      cursor: pointer;\r\n    }\r\n\r\n    &::-webkit-scrollbar-thumb {\r\n      background: #D6E3E9; /* 滚动条滑块颜色 */\r\n      border-radius: 4px; /* 滚动条滑块圆角 */\r\n    }\r\n\r\n    &:hover::-webkit-scrollbar-thumb {\r\n      background: #BCD3DE !important;\r\n    }\r\n\r\n    &::-webkit-scrollbar-track {\r\n      background: #f1f1f1; /* 滚动条轨道颜色 */\r\n    }\r\n    .record-box {\r\n      margin-top: 20px;\r\n      .days {\r\n        font-size: 14px;\r\n        color: #838F95;\r\n        line-height: 36px;\r\n      }\r\n      .record-list {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        align-content: flex-start;\r\n        li {\r\n          font-size: 14px;\r\n          color: var(--primary-text-color);\r\n          padding: 10px 0px;\r\n          white-space: nowrap;       /* 不换行 */\r\n          overflow: hidden;          /* 超出部分隐藏 */\r\n          text-overflow: ellipsis;   /* 显示省略号 */\r\n          width: 200px;              /* 根据需要设置元素宽度 */\r\n          cursor: pointer;\r\n          span:hover, .active {\r\n            color: #0479FF;\r\n            text-decoration: underline;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  .info-box {\r\n    padding: 0 20px 40px 20px;\r\n    cursor: pointer;\r\n    .line {\r\n      border-top: 1px solid var(--line-color);\r\n    }\r\n    .info-wrap {\r\n      padding: 20px 0;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      .arrow {\r\n        fill: var(--line-color);\r\n        width: 20px;\r\n        height: 20px;\r\n      }\r\n      .left-box {\r\n        display: flex;\r\n        .avatar {\r\n          width: 40px;\r\n          height: 40px;\r\n          border-radius: 50%;\r\n          border: 1px solid var(--border-color);\r\n        }\r\n        div {\r\n          margin-left: 12px;\r\n          display: flex;\r\n          flex-direction: column;\r\n          justify-content: space-around;\r\n          span:nth-child(1) {\r\n            font-size: 14px;\r\n            color: var(--primary-text-color);\r\n            white-space: nowrap;       /* 不换行 */\r\n            overflow: hidden;          /* 超出部分隐藏 */\r\n            text-overflow: ellipsis;   /* 显示省略号 */\r\n            width: 100px;              /* 根据需要设置元素宽度 */\r\n          }\r\n          span:nth-child(2) {\r\n            font-size: 12px;\r\n            color: var(--secondary-text-color);\r\n          }\r\n        }\r\n      }\r\n\r\n    }\r\n  }\r\n}\r\n\r\n</style>\r\n"],"names":["effect","computed","useNuxtApp","modalStore","useModalStore","store","useUserStore","router","useRouter","route","useRoute","isMini","inject","userInfo","reactive","props","__props","records","categorizeData","getUserInfo","getUserModel","data","handleToChat","item","watchEffect","onMounted"],"mappings":"0mBA2EA,MAAAA,EAAAC,EAAA,IAAAC,EAAA,EAAA,UAAA,WAAA,MAAA,OAAA,OAAA,EACAC,EAAAC,EAAA,EACAC,EAAAC,EAAA,EACAC,EAAAC,EAAA,EACAC,EAAAC,EAAA,EAEAC,EAAAC,EAAA,SAAA,EAEA,IAAAC,EAAAC,EAAA,CACA,SAAA,mDACA,SAAA,UACA,cAAA,CACA,CAAA,EAMA,MAAAC,EAAAC,EAOAC,EAAAhB,EAAA,IAAAiB,EAAAH,EAAA,MAAA,CAAA,EAEAI,EAAA,IAAA,CACAC,EAAA,EACA,KAAAC,GAAA,CACA,OAAA,OAAAR,EAAA,CAAA,GAAAQ,EAAA,SAAA,CAAA,EAAA,CACA,CAAA,CACA,EACAC,EAAAC,GAAA,CACAhB,EAAA,QAAA,CACA,MAAA,CACA,KAAAgB,EAAA,OACA,CACA,CAAA,CACA,EAEA,OAAAC,EAAA,IAAA,CACAT,EAAA,OAAA,OAAA,GACAI,EAAA,CAEA,CAAA,EACAM,EAAA,IAAA,CACApB,EAAA,SAAA,SAAA,CAAAM,GACAQ,EAAA,CAEA,CAAA"}