android-cloud-H5/pages/activity/invite-user/invite-new-user-rule.vue

<template>
  <layoutBack>
    <layout title="活动规则" padding="0">
      <div class="rule-container">
        <div class="rule-wrap" v-html="rule">
        </div>
      </div>
    </layout>
  </layoutBack>
</template>

<script>
import layoutBack from '@/components/layout';
import layout from './components/layout';

export default {
  auth: false,
  name: 'OemInviteNewUserRule',
  head: {
    // title: '活动规则', // 删除title, 因为title修改时,安卓返nav会重新显示
  },
  // 页面初始化后触发
  async fetch() {
    // 获取参数
    let activityId = this.$route.query.activityId;
    if(!activityId) {return Toast('获取活动规则失败')}
    await this.getActivityRule(activityId);
  },
  components: { layout, layoutBack},
  data() {
    return {
      rule: ''
    }
  },
  methods: {
    // 获取活动规则
    async getActivityRule(id) {
      let {status, success, data} = await this.$axios.$get('/activity/activity/basic/getDetailsById',{
        params: { id }
      });

      if(status === 0 && success) {
        this.rule = data?.activityInviteNewUser?.activityRule;
      }
    },
    // 转换html实体
    decodeHtmlEntities(content) {
      // 创建一个更全面的 HTML 实体映射表
      const entityMap = {
      '&amp;': '&',
      '&lt;': '<',
      '&gt;': '>',
      '&quot;': '"',
      '&#39;': "'",
      '&nbsp;': ' ',
      '&iexcl;': '¡',
      '&cent;': '¢',
      '&pound;': '£',
      '&curren;': '¤',
      '&yen;': '¥',
      '&brvbar;': '¦',
      '&sect;': '§',
      '&uml;': '¨',
      '&copy;': '©',
      '&ordf;': 'ª',
      '&laquo;': '«',
      '&not;': '¬',
      '&shy;': '­',
      '&reg;': '®',
      '&macr;': '¯',
      '&deg;': '°',
      '&plusmn;': '±',
      '&sup2;': '²',
      '&sup3;': '³',
      '&acute;': '´',
      '&micro;': 'µ',
      '&para;': '¶',
      '&middot;': '·',
      '&cedil;': '¸',
      '&sup1;': '¹',
      '&ordm;': 'º',
      '&raquo;': '»',
      '&frac14;': '¼',
      '&frac12;': '½',
      '&frac34;': '¾',
      '&iquest;': '¿',
      '&Agrave;': 'À',
      '&Aacute;': 'Á',
      '&Acirc;': 'Â',
      '&Atilde;': 'Ã',
      '&Auml;': 'Ä',
      '&Aring;': 'Å',
      '&AElig;': 'Æ',
      '&Ccedil;': 'Ç',
      '&Egrave;': 'È',
      '&Eacute;': 'É',
      '&Ecirc;': 'Ê',
      '&Euml;': 'Ë',
      '&Igrave;': 'Ì',
      '&Iacute;': 'Í',
      '&Icirc;': 'Î',
      '&Iuml;': 'Ï',
      '&ETH;': 'Ð',
      '&Ntilde;': 'Ñ',
      '&Ograve;': 'Ò',
      '&Oacute;': 'Ó',
      '&Ocirc;': 'Ô',
      '&Otilde;': 'Õ',
      '&Ouml;': 'Ö',
      '&times;': '×',
      '&Oslash;': 'Ø',
      '&Ugrave;': 'Ù',
      '&Uacute;': 'Ú',
      '&Ucirc;': 'Û',
      '&Uuml;': 'Ü',
      '&Yacute;': 'Ý',
      '&THORN;': 'Þ',
      '&szlig;': 'ß',
      '&agrave;': 'à',
      '&aacute;': 'á',
      '&acirc;': 'â',
      '&atilde;': 'ã',
      '&auml;': 'ä',
      '&aring;': 'å',
      '&aelig;': 'æ',
      '&ccedil;': 'ç',
      '&egrave;': 'è',
      '&eacute;': 'é',
      '&ecirc;': 'ê',
      '&euml;': 'ë',
      '&igrave;': 'ì',
      '&iacute;': 'í',
      '&icirc;': 'î',
      '&iuml;': 'ï',
      '&eth;': 'ð',
      '&ntilde;': 'ñ',
      '&ograve;': 'ò',
      '&oacute;': 'ó',
      '&ocirc;': 'ô',
      '&otilde;': 'õ',
      '&ouml;': 'ö',
      '&divide;': '÷',
      '&oslash;': 'ø',
      '&ugrave;': 'ù',
      '&uacute;': 'ú',
      '&ucirc;': 'û',
      '&uuml;': 'ü',
      '&yacute;': 'ý',
      '&thorn;': 'þ',
      '&yuml;': 'ÿ',
      '&OElig;': 'Œ',
      '&oelig;': 'œ',
      '&Scaron;': 'Š',
      '&scaron;': 'š',
      '&Yuml;': 'Ÿ',
      '&fnof;': 'ƒ',
      '&circ;': 'ˆ',
      '&tilde;': '˜',
      '&Alpha;': 'Α',
      '&Beta;': 'Β',
      '&Gamma;': 'Γ',
      '&Delta;': 'Δ',
      '&Epsilon;': 'Ε',
      '&Zeta;': 'Ζ',
      '&Eta;': 'Η',
      '&Theta;': 'Θ',
      '&Iota;': 'Ι',
      '&Kappa;': 'Κ',
      '&Lambda;': 'Λ',
      '&Mu;': 'Μ',
      '&Nu;': 'Ν',
      '&Xi;': 'Ξ',
      '&Omicron;': 'Ο',
      '&Pi;': 'Π',
      '&Rho;': 'Ρ',
      '&Sigma;': 'Σ',
      '&Tau;': 'Τ',
      '&Upsilon;': 'Υ',
      '&Phi;': 'Φ',
      '&Chi;': 'Χ',
      '&Psi;': 'Ψ',
      '&Omega;': 'Ω',
      '&alpha;': 'α',
      '&beta;': 'β',
      '&gamma;': 'γ',
      '&delta;': 'δ',
      '&epsilon;': 'ε',
      '&zeta;': 'ζ',
      '&eta;': 'η',
      '&theta;': 'θ',
      '&iota;': 'ι',
      '&kappa;': 'κ',
      '&lambda;': 'λ',
      '&mu;': 'μ',
      '&nu;': 'ν',
      '&xi;': 'ξ',
      '&omicron;': 'ο',
      '&pi;': 'π',
      '&rho;': 'ρ',
      '&sigmaf;': 'ς',
      '&sigma;': 'σ',
      '&tau;': 'τ',
      '&upsilon;': 'υ',
      '&phi;': 'φ',
      '&chi;': 'χ',
      '&psi;': 'ψ',
      '&omega;': 'ω',
      '&thetasym;': 'ϑ',
      '&upsih;': 'ϒ',
      '&piv;': 'ϖ',
      '&ensp;': ' ',
      '&emsp;': ' ',
      '&thinsp;': ' ',
      '&zwnj;': '‌',
      '&zwj;': '‍',
      '&lrm;': '‎',
      '&rlm;': '‏',
      '&ndash;': '–',
      '&mdash;': '—',
      '&lsquo;': '‘',
      '&rsquo;': '’',
      '&sbquo;': '‚',
      '&ldquo;': '“',
      '&rdquo;': '”',
      '&bdquo;': '„',
      '&dagger;': '†',
      '&Dagger;': '‡',
      '&bull;': '•',
      '&hellip;': '…',
      '&permil;': '‰',
      '&prime;': '′',
      '&Prime;': '″',
      '&lsaquo;': '‹',
      '&rsaquo;': '›',
      '&euro;': '€'
      };

      // 使用正则表达式匹配所有可能的 HTML 实体
      return content.replace(/&[a-zA-Z0-9#]+;/g, (match) => {
        return entityMap[match] || match; // 如果匹配到的实体在映射表中有对应值，则替换，否则返回原值
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.rule-container {
  font-size: 12px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #EB3043;
  padding: 16px;

  .rule-wrap {
    min-height: 100px;
    padding: 16px;
    background-color: #FFFDF1;
    border-radius: 8px;


  }
}

</style>