read.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <script lang="ts">
  2. import { ref, reactive, defineComponent } from 'vue'
  3. import { useStore } from 'vuex'
  4. import { useRoute } from "vue-router"
  5. import banner from '@/components/layout/banner.vue'
  6. import recomMendation from '@/components/layout/recomMendation.vue'
  7. export default defineComponent({
  8. setup(){
  9. const store = useStore()
  10. const route = useRoute()
  11. const recomMendationList:any = ref(recomMendationFilter(store.state.recomMendation)) //推荐内容
  12. //推荐内容过滤
  13. function recomMendationFilter(data:any){
  14. let array = []
  15. for(let i =0;i<data.length;i++){
  16. if(data[i].id != route.query?.id){
  17. array.push(data[i])
  18. }
  19. }
  20. return array
  21. }
  22. return { store, recomMendationList }
  23. },
  24. components:{
  25. banner,
  26. recomMendation
  27. },
  28. asyncData({ store, route } :any){
  29. //获取菜单列表
  30. let params:any = reactive({}) //路由参数
  31. if(route.value.query?.categoryid){
  32. params = route.value
  33. }else{
  34. params = store.state.route
  35. }
  36. return store.dispatch('getMenuList',params).then(()=>{
  37. const data = reactive(store.state.menuList)
  38. let str = ref("")
  39. let sub = ref()
  40. let paramsData = reactive({})
  41. if(params.path.indexOf("_")>-1){
  42. str.value = params.path.split("_")[0]
  43. }
  44. for(let i=0;i<data.length;i++){
  45. if(params.path == data[i].path || str.value == data[i].path){
  46. if(params.query?.categoryid && !data[i].sname){
  47. sub.value = i
  48. }
  49. }
  50. }
  51. if(params.query?.categoryid && !params.query.dup){
  52. paramsData = {
  53. params:{
  54. categoryid: params.query.categoryid,
  55. pageNum:1,
  56. pageSize:1,
  57. order:"sortindex",
  58. articleid: params.query.id,
  59. id: params.query.id,
  60. details:true
  61. },
  62. index:params.path,
  63. sub:sub.value
  64. }
  65. return store.dispatch('getPageData',paramsData)
  66. }
  67. })
  68. }
  69. })
  70. </script>
  71. <template>
  72. <div class="pageContain">
  73. <section class="common-bradcrumb-section" >
  74. <banner />
  75. </section>
  76. <section class="product-content-section pt-60">
  77. <div class="container" v-if="store.state.pageContent.length>0">
  78. <div class="row">
  79. <div class="col-lg-12 col-md-12 content">
  80. <div class="read_content mb-60">
  81. <div class="section-title text-center both-border mb-60 d-flex justify-content-between">
  82. <span class="title-tag2 text-left" >{{store.state.pageContent[0].title}}</span>
  83. <a href="javascript:history.back(-1)"><img src="@/assets/img/product/close.png" alt=""></a>
  84. </div>
  85. <div class="row">
  86. <div class=" col-lg-12 col-md-12 " >
  87. <div v-html="store.state.pageContent[0].content" class="text-left"></div>
  88. </div>
  89. </div>
  90. </div>
  91. <recomMendation :data="recomMendationList" v-if="recomMendationList.length>0" />
  92. </div>
  93. </div>
  94. </div>
  95. </section>
  96. </div>
  97. </template>