agree.vue 1.4 KB

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