dynamicdetails.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <view class="">
  3. <u-navbar
  4. title="详情"
  5. :autoBack="true"
  6. :safeAreaInsetTop="true"
  7. >
  8. </u-navbar>
  9. <view class="page-wrap">
  10. <view class="title">{{pageData.title}}</view>
  11. <view class="info u-flex u-row-between">
  12. <view class="time">{{pageData.createTime}}</view>
  13. <view class="view-count">{{pageData.viewCount}}</view>
  14. </view>
  15. <view class="content-wrap">
  16. <u--image :src="pageData.mainImg" :showLoading="true" width="100%" mode="aspectFill"></u--image>
  17. <view class="content">
  18. {{pageData.content}}
  19. </view>
  20. </view>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. export default{
  26. data(){
  27. return{
  28. id:null,
  29. type:'',
  30. pageData:{
  31. title:'',
  32. content:''
  33. },
  34. }
  35. },
  36. onLoad(page) {
  37. this.id = page.id;
  38. this.type = page.type;
  39. if(this.type=='swiperDetail'){
  40. this.swiperDetails(this.id);
  41. }else{
  42. this.getDetails(this.id);
  43. this.addViewCount(this.id);
  44. }
  45. },
  46. methods:{
  47. getDetails(id){
  48. this.$u.api.shopNews({id:id}).then(res=>{
  49. this.pageData = res.data;
  50. // console.log('res',res);
  51. }).catch(err=>{
  52. console.log('shopNews',err.data);
  53. })
  54. },
  55. getSwiperDetails(id){
  56. this.$u.api.swiperDetails({id:id}).then(res=>{
  57. this.pageData = res.data;
  58. // console.log('res',res);
  59. }).catch(err=>{
  60. console.log('getSwiperDetails',err.data);
  61. })
  62. },
  63. addViewCount(id){
  64. this.$u.api.addViewCount({id:id}).then(res=>{
  65. // console.log('res',res);
  66. }).catch(err=>{
  67. console.log('addViewCount',err.data);
  68. })
  69. }
  70. }
  71. }
  72. </script>
  73. <style>
  74. page{background-color: #F5F5F5;}
  75. </style>
  76. <style lang="scss" scoped>
  77. .title{
  78. font-size: 36rpx;
  79. font-weight: 600;
  80. color: #333333;
  81. line-height: 50rpx;
  82. margin-bottom: 20rpx;
  83. }
  84. .info{
  85. margin-bottom: 50rpx;
  86. font-size: 24rpx;
  87. font-weight: 400;
  88. color: #999999;
  89. line-height: 33rpx;
  90. }
  91. .content{
  92. font-size: 26rpx;
  93. font-weight: 400;
  94. color: #666666;
  95. line-height: 44rpx;
  96. margin: 20rpx 0;
  97. }
  98. .u-image{
  99. max-width: 100%;
  100. }
  101. </style>