onedetail.vue 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <view style="padding: 20upx 32upx;">
  3. <view style="font-size: 35rpx;padding-bottom: 30upx;">{{aricte.article_title}}</view>
  4. <view style="color: #999;padding-bottom: 30upx;">{{aricte.article_time}}</view>
  5. <rich-text :nodes="nodes"></rich-text>
  6. <view v-if="aricte.ad_type!=0" class="aricte" :class="isclose?'closeacrile':''">
  7. <view style="display: flex;justify-content: space-between;padding: 20upx 0;">
  8. <view>{{aricte.ad_title}}</view>
  9. <view style="color:#4399FC;" @click="close">x关闭</view>
  10. </view>
  11. <view @click="godetail" style="padding: 10upx 0upx;position: relative;">
  12. <image :src=" pictureUrl + '/' + aricte.ad_image" style="height: 600upx;width: 100%;" />
  13. <view style="color: #fff;position: absolute;bottom: 20upx;left: 20upx;">广告</view>
  14. </view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. isclose: false,
  23. pictureUrl: this.pictureUrl,
  24. article_id: '',
  25. nodes:'',
  26. aricte: {}
  27. }
  28. },
  29. onLoad(a) {
  30. this.article_id = a.id;
  31. let name = a.name;
  32. uni.setNavigationBarTitle({
  33. title: name
  34. });
  35. this.getactrile();
  36. },
  37. methods: {
  38. godetail() {
  39. if(this.aricte.ad_type == 1) {
  40. //商品
  41. let id = this.aricte.goods_id; // 商品Id
  42. let store_id = this.aricte.store_id; // 商品Id
  43. uni.navigateTo({
  44. url:`/pages/index/shop?id=${id}&store_id=${store_id}`
  45. })
  46. }else if(this.aricte.ad_type == 2) {
  47. //商品
  48. let id = this.aricte.store_id; // 商品Id
  49. uni.navigateTo({
  50. url: `/pages/index/hotel?id=${id}`
  51. });
  52. }
  53. },
  54. close() {
  55. this.isclose = true;
  56. },
  57. getactrile() {
  58. this.request({
  59. url: '/v1/entry/news_desc',
  60. method: 'post',
  61. data: {
  62. article_id: this.article_id
  63. },
  64. success: (res) => {
  65. let { data } = res.data;
  66. this.aricte = data;
  67. const regex = new RegExp('<img', 'gi');
  68. data.article_content =data.article_content.replace(regex,`<img class="changeimg"`);
  69. this.nodes = data.article_content; // 富文本渲染
  70. }
  71. })
  72. }
  73. },
  74. }
  75. </script>
  76. <style>
  77. .aricte {
  78. background-color: #EEEEEE;
  79. padding: 0 28upx 10upx 28upx;
  80. }
  81. .closeacrile {
  82. display: none;
  83. }
  84. .changeimg {
  85. width: 100%;
  86. height: auto!important;
  87. display: block;
  88. text-align: center;
  89. }
  90. </style>