msgInfo.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <view class="contentBox">
  3. <view class="title">{{info.title}}</view>
  4. <view class="time">{{info.added_on}}</view>
  5. <view class="content" v-html="info.contents"></view>
  6. <view class="orgTitle">{{teamname}}</view>
  7. </view>
  8. </template>
  9. <script>
  10. import {messageInfo} from "../../api/index.js"
  11. import { mapState } from "vuex"
  12. export default{
  13. data(){
  14. return{
  15. info:{
  16. title:"",
  17. contents:"",
  18. added_on:""
  19. }
  20. }
  21. },
  22. computed:{
  23. ...mapState(['teamname']),
  24. },
  25. onLoad(option) {
  26. const {id}=option
  27. messageInfo({id}).then(res=>{
  28. const { data } = res;
  29. let content=data.contents
  30. const regex = new RegExp('<img', 'gi');
  31. content = content.replace(regex, `<img style="width: 100%;height:auto;margin:10px 0"`);
  32. res.data.contents=content
  33. this.info=data
  34. })
  35. }
  36. }
  37. </script>
  38. <style lang="scss">
  39. page{
  40. width: 100%;
  41. min-height: 100%;
  42. background: $uni-bg-color-normal;
  43. }
  44. .contentBox{
  45. font-size: 28rpx;
  46. color: #4D4D4D;
  47. }
  48. .title{
  49. text-align: center;
  50. margin-top: 36rpx;
  51. margin-bottom: 15rpx;
  52. font-size: 32rpx;
  53. }
  54. .orgTitle{
  55. text-align: center;
  56. margin: 50rpx auto;
  57. }
  58. .time{
  59. text-align: center;
  60. margin-bottom: 20rpx;
  61. }
  62. .content{
  63. padding-left: 31rpx;
  64. padding-right: 26rpx;
  65. }
  66. </style>