{"version":3,"file":"view.7fa3a4aa.mjs","sources":["../../../../pages/article/view.vue"],"sourcesContent":["<template>\n  <NuxtLayout>\n    <div class=\"article_page\">\n      <div class=\"navigation\">\n        <el-breadcrumb :separator-icon=\"ArrowRight\">\n          <el-breadcrumb-item :to=\"{ path: '/' }\">首页</el-breadcrumb-item>\n          <el-breadcrumb-item :to=\"{ path: '/article/list' }\">新闻资讯</el-breadcrumb-item>\n          <el-breadcrumb-item>\n            <div class=\"now_title\">{{ map.info.title }}</div>\n          </el-breadcrumb-item>\n        </el-breadcrumb>\n      </div>\n      <div v-if=\"map.info.id\" v-loading=\"ctrl.loading\" class=\"content\">\n        <div class=\"detail\">\n          <div class=\"top\">\n            <p>{{ map.info.title }}</p>\n            <div class=\"count\">\n              <span class=\"time\">{{ map.info.artTime }}</span>\n              <span>{{ map.info.readCount }}人已浏览</span>\n            </div>\n          </div>\n          <div class=\"bottom rich-text\">\n            <p v-if=\"map.info.summary\" class=\"summary\">摘要：{{ map.info.summary }}</p>\n            <div class=\"text\" v-html=\"map.info.content\"></div>\n          </div>\n        </div>\n        <div class=\"hot\">\n          <div class=\"block\">\n            <p class=\"recommend\">相关推荐</p>\n            <template v-if=\"map.recommendList.length > 0\">\n              <div v-for=\"(i,index) in map.recommendList\" :key=\"index\" class=\"item\" @click=\"viewDetail(i.id)\">\n                <p class=\"title\">{{ i.title }}</p>\n                <p class=\"c_999 tx-ov flex-item\">{{ i.readCount }}人已浏览</p>\n              </div>\n            </template>\n            <div v-else class=\"no_data\">暂无数据</div>\n          </div>\n          <div class=\"holder\"></div>\n          <div class=\"block\">\n            <p class=\"recommend\">热门推荐</p>\n            <template v-if=\"map.hotList.length > 0\">\n              <div v-for=\"(i,index) in map.hotList\" :key=\"index\" class=\"item\" @click=\"viewDetail(i.id)\">\n                <p class=\"title\">{{ i.title }}</p>\n                <p class=\"c_999 tx-ov flex-item\">{{ i.readCount }}人已浏览</p>\n              </div>\n            </template>\n            <div v-else class=\"no_data\">暂无数据</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </NuxtLayout>\n</template>\n\n<script setup>\nimport {ArrowRight} from '@element-plus/icons-vue'\nimport {articleHot, articleRecommend, articleView} from '../../api/article.js'\nimport {forbidCopy} from '@/utils'\nimport cookie from '@/utils/cookies'\nimport {parseTime} from '@/utils/index.js';\n\nconst route = useRoute()\nconst router = useRouter()\nlet cookieData = cookie.getShop()\nconst nowDay = new Date().getTime()\nconst beginTime = parseTime(nowDay - 30 * 24 * 60 * 60 * 1000)\nconst {data, pending} = await useAsyncData('articleView', ({ssrContext}) => {\n  const param = {\n    id: route.query.id\n  }\n  if (process.server) {\n    console.log('ssrContext', ssrContext.req.headers.host)\n    param.websiteDomain = ssrContext.req.headers.host\n  } else {\n    param.websiteDomain = window.location.origin\n  }\n  return new Promise(async (resolve) => {\n    // 课程列表的请求\n    Promise.allSettled([\n      articleView(param),\n      articleHot({size: 6, beginTime}),\n      articleRecommend({size: 6, beginTime, articleId: route.query.id})\n    ]).then(([articleInfo, hotList, recommendList]) => {\n      let data = {};\n      if (hotList.status === 'fulfilled') {\n        data.hotList = hotList.value\n      } else {\n        data.hotList = []\n      }\n\n      if (articleInfo.status === 'fulfilled') {\n        data.articleInfo = articleInfo\n      } else {\n        data.articleInfo = {}\n      }\n\n      if (recommendList.status === 'fulfilled') {\n        data.recommendList = recommendList.value\n      } else {\n        data.recommendList = []\n      }\n      resolve(data)\n    })\n  })\n}, {initialCache: false})\n\nconst map = reactive({\n  info: {},\n  id: '',\n  hotList: [],\n  recommendList: []\n})\n\nconst ctrl = reactive({\n  loading: false\n})\n\nlet articleInfo = {};\nif (!pending.value && data.value) {\n  const d = data.value\n  map.hotList = d.hotList\n  map.recommendList = d.recommendList\n  map.info = d.articleInfo.value\n  articleInfo = d.articleInfo\n}\n\n\nuseHead({\n  title: computed(() => `${articleInfo.value.browserTitle ? articleInfo.value.browserTitle : articleInfo.value.title}-${cookieData.shopName}`),\n  meta: [{\n    hid: 'keywords',\n    name: 'keywords',\n    content: articleInfo.value.keywords || articleInfo.value.title\n  },\n    {\n      hid: 'description',\n      name: 'description',\n      content: articleInfo.value.detailsDescribe ? articleInfo.value.detailsDescribe : articleInfo.value.title\n    }]\n})\n\n\nwatch(\n  route, async () => {\n    if (route.query.id !== map.id) {\n      map.id = route.query.id\n      if (!map.id) return\n      console.log('websiteDomain', window.location.origin)\n      const articleInfo = await articleView({id: route.query.id, websiteDomain: window.location.origin});\n      console.log('articleInfo', articleInfo)\n      useHead({\n        title: computed(() => `${articleInfo.title ? articleInfo.title : '资讯详情'}-${cookieData.shopName}`),\n        meta: [\n          {\n            hid: 'keywords',\n            name: 'keywords',\n            content: articleInfo.title\n          },\n          {\n            hid: 'description',\n            name: 'description',\n            content: articleInfo.summary ? articleInfo.summary : articleInfo.title\n          }\n        ]\n      })\n      map.info = articleInfo\n      getHotList()\n    }\n  }\n);\n\nconst viewDetail = (id) => {\n  router.push({\n    path: '/article/view',\n    query: {\n      id\n    }\n  })\n}\n\nconst getHotList = () => {\n  articleHot({size: 6, beginTime}).then(res => {\n    map.hotList = res || []\n  })\n}\n\nconst getRecommendList = () => {\n  articleRecommend({size: 6, beginTime, articleId: route.query.id}).then(res => {\n    map.recommendList = res || []\n  })\n}\nonMounted(() => {\n  if (map.info.enableForbidContentCopy) {\n    forbidCopy('.content')\n    forbidCopy('.now_title')\n  }\n})\n\n</script>\n\n<style lang=\"scss\" scoped>\n.article_page {\n  width: 1200px;\n  margin: auto;\n  margin-bottom: 40px;\n}\n\n.navigation {\n  margin: 17px 0;\n\n  :deep(.el-breadcrumb__inner) {\n    color: #999;\n  }\n\n  :deep(.el-breadcrumb__inner.is-link) {\n    font-weight: normal;\n  }\n\n  .now_title {\n    width: 113px;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    cursor: pointer;\n  }\n}\n\n.content {\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n}\n\n.detail {\n  width: 820px;\n  box-sizing: border-box;\n  background: #fff;\n  border-radius: 5px;\n\n  .top {\n    padding: 20px;\n    border-bottom: 1px solid #EBEEF5;\n\n    p {\n      font-size: 24px;\n    }\n\n    .count {\n      margin-top: 10px;\n      color: #999999;\n    }\n\n    .time {\n      position: relative;\n      margin-right: 28px;\n\n      &::after {\n        content: '';\n        position: absolute;\n        right: -14px;\n        top: 4px;\n        width: 1px;\n        height: 10px;\n        background: #999;\n      }\n    }\n  }\n\n  .bottom {\n    padding: 30px;\n    min-height: 305px;\n\n    .summary {\n      padding-bottom: 20px;\n      margin-bottom: 20px;\n      font-size: 16px;\n      line-height: 32px;\n      border-bottom: 1px solid #EBEEF5;\n    }\n\n    .text {\n      font-size: 16px;\n      line-height: 32px;\n    }\n  }\n}\n\n.hot {\n  width: 360px;\n  // position: fixed;\n  // top: 113px;\n  // right: calc((100% - 1200px) / 2);\n  background: #f6f8fb;\n  border-radius: 5px;\n  box-sizing: border-box;\n\n  .block {\n    //min-height: 300px;\n    background-color: #fff;\n    padding: 12px 15px 15px 15px;\n  }\n\n  .recommend {\n    font-size: 20px;\n    margin-bottom: 15px;\n  }\n\n  .no_data {\n    color: #999;\n    text-align: center;\n    //line-height: 353px;\n  }\n\n  .item {\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: 19px;\n    cursor: pointer;\n\n    .title {\n      width: 230px;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      word-break: break-all;\n    }\n\n    &:last-child {\n      margin-bottom: 0px;\n    }\n\n    &:hover p {\n      color: #2256F6;\n    }\n  }\n\n  .holder {\n    height: 20px;\n    background-color: #f6f8fb;\n  }\n}\n\n</style>\n<style>\n.rich-text ul li {\n  position: relative;\n}\n\n.rich-text ul li:before {\n  content: \"\";\n  position: absolute;\n  left: -15px;\n  width: 10px;\n  top: 30%;\n  height: 10px;\n  border-radius: 50%;\n  background-color: #333333;\n}\n</style>\n"],"names":["route","useRoute","router","useRouter","cookieData","cookie","getShop","nowDay","Date","getTime","beginTime","parseTime","data","pending","param","id","query","websiteDomain","window","location","origin","Promise","async","resolve","allSettled","articleView","articleHot","size","articleRecommend","articleId","then","articleInfo","hotList","recommendList","status","value","initialCache","map","reactive","info","ctrl","loading","d","useHead","title","computed","browserTitle","shopName","meta","hid","name","content","keywords","detailsDescribe","watch","summary","getHotList","viewDetail","push","path","res","onMounted","enableForbidContentCopy","forbidCopy"],"mappings":"ukCA6DA,MAAAA,EAAAC,IACAC,EAAAC,IACA,IAAAC,GAAAC,EAAAC,UACA,MAAAC,IAAA,IAAAC,MAAAC,UACAC,GAAAC,EAAAJ,GAAA,SACAK,KAAAA,GAAAC,QAAAA,sDACA,MAAAC,EAAA,CACAC,GAAAf,EAAAgB,MAAAD,IAQA,OAFAD,EAAAG,cAAAC,OAAAC,SAAAC,OAEA,IAAAC,SAAAC,MAAAC,IAEAF,QAAAG,WAAA,CACAC,EAAAX,GACAY,EAAA,CAAAC,KAAA,EAAAjB,eACAkB,EAAA,CAAAD,KAAA,EAAAjB,aAAAmB,UAAA7B,EAAAgB,MAAAD,OACAe,MAAA,EAAAC,EAAAC,EAAAC,MACA,IAAArB,EAAA,CAAA,EACA,cAAAoB,EAAAE,OACAtB,EAAAoB,QAAAA,EAAAG,MAEAvB,EAAAoB,QAAA,GAGA,cAAAD,EAAAG,OACAtB,EAAAmB,YAAAA,EAEAnB,EAAAmB,YAAA,CAAA,EAGA,cAAAE,EAAAC,OACAtB,EAAAqB,cAAAA,EAAAE,MAEAvB,EAAAqB,cAAA,GAEAV,EAAAX,EAAA,GACA,GACA,GACA,CAAAwB,cAAA,GAAA,kCAEAC,GAAAC,EAAA,CACAC,KAAA,CAAA,EACAxB,GAAA,GACAiB,QAAA,GACAC,cAAA,KAGAO,GAAAF,EAAA,CACAG,SAAA,IAGA,IAAAV,GAAA,CAAA,EACA,IAAAlB,GAAAsB,OAAAvB,GAAAuB,MAAA,CACA,MAAAO,EAAA9B,GAAAuB,MACAE,GAAAL,QAAAU,EAAAV,QACAK,GAAAJ,cAAAS,EAAAT,cACAI,GAAAE,KAAAG,EAAAX,YAAAI,MACAJ,GAAAW,EAAAX,WACA,CAGAY,EAAA,CACAC,MAAAC,GAAA,IAAA,GAAAd,GAAAI,MAAAW,aAAAf,GAAAI,MAAAW,aAAAf,GAAAI,MAAAS,SAAAxC,GAAA2C,aACAC,KAAA,CAAA,CACAC,IAAA,WACAC,KAAA,WACAC,QAAApB,GAAAI,MAAAiB,UAAArB,GAAAI,MAAAS,OAEA,CACAK,IAAA,cACAC,KAAA,cACAC,QAAApB,GAAAI,MAAAkB,gBAAAtB,GAAAI,MAAAkB,gBAAAtB,GAAAI,MAAAS,UAKAU,EACAtD,GAAAsB,UACA,GAAAtB,EAAAgB,MAAAD,KAAAsB,GAAAtB,GAAA,CAEA,GADAsB,GAAAtB,GAAAf,EAAAgB,MAAAD,IACAsB,GAAAtB,GAAA,OAEA,MAAAgB,QAAAN,EAAA,CAAAV,GAAAf,EAAAgB,MAAAD,GAAAE,cAAAC,OAAAC,SAAAC,SAEAuB,EAAA,CACAC,MAAAC,GAAA,IAAA,GAAAd,EAAAa,MAAAb,EAAAa,MAAA,UAAAxC,GAAA2C,aACAC,KAAA,CACA,CACAC,IAAA,WACAC,KAAA,WACAC,QAAApB,EAAAa,OAEA,CACAK,IAAA,cACAC,KAAA,cACAC,QAAApB,EAAAwB,QAAAxB,EAAAwB,QAAAxB,EAAAa,UAIAP,GAAAE,KAAAR,EACAyB,IACA,KAIA,MAAAC,GAAA1C,IACAb,EAAAwD,KAAA,CACAC,KAAA,gBACA3C,MAAA,CACAD,OAEA,EAGAyC,GAAA,KACA9B,EAAA,CAAAC,KAAA,EAAAjB,eAAAoB,MAAA8B,IACAvB,GAAAL,QAAA4B,GAAA,EAAA,GACA,SAQAC,GAAA,KACAxB,GAAAE,KAAAuB,0BACAC,EAAA,YACAA,EAAA,cACA"}