agree.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <rich-text :nodes="formatRichText(info.agreement)"></rich-text>
  6. </view>
  7. </view>
  8. </mobile-frame>
  9. </template>
  10. <script>
  11. export default {
  12. components: {},
  13. data() {
  14. return {
  15. info: {}
  16. };
  17. },
  18. onShow: function() {
  19. const that = this;
  20. that.search();
  21. },
  22. methods: {
  23. search() {
  24. const that = this;
  25. try {
  26. const res = uni.getStorageSync('config');
  27. if (res) that.$set(that, `info`, res);
  28. } catch (err) {
  29. uni.showToast({
  30. title: err.errmsg,
  31. icon: 'error',
  32. duration: 2000
  33. });
  34. }
  35. },
  36. // 处理富文本
  37. formatRichText(html) {
  38. if (html) {
  39. // 富文本内容格式化
  40. return html && html.replace(/<img[^>]*>/gi, function(match, capture) {
  41. // 查找所有的 img 元素
  42. return match.replace(/style=".*"/gi, '').replace(/style='.*'/gi,
  43. '')
  44. // 删除找到的所有 img 元素中的 style 属性
  45. }).replace(/\<img/gi, '<img style="width:100%;"') // 对 img 元素增加 style 属性,并设置宽度为 100%
  46. }
  47. },
  48. }
  49. }
  50. </script>
  51. <style lang="scss">
  52. .main {
  53. display: flex;
  54. flex-direction: column;
  55. width: 100vw;
  56. height: 100vh;
  57. .one {
  58. padding: 2vw;
  59. .rich-img {
  60. width: 100% !important;
  61. display: block;
  62. }
  63. }
  64. }
  65. </style>