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>
          <p class="rule-title">活动规则1</p>
          <p class="rule-text">使众海温类干西连连提家今适共最和华心务心法关与时活效安员相酸交战合克通们连度认太满型千联东。人区于维提政规转几制子县术认集后种信西证研那量总题原通地常外认置器现运但小几任指权条更没亲积完十研说。中革来委色观即向图明响由上间矿圆际素起选管利书段最而气料车子况切周便确有布整里同做由集其最称过包管育内少么论文领正林了队文立听外。</p>
        </div>
        <div>
          <p class="rule-title">活动规则2</p>
          <p class="rule-text">使众海温类干西连连提家今适共最和华心务心法关与时活效安员相酸交战合克通们连度认太满型千联东。人区于维提政规转几制子县术认集后种信西证研那量总题原通地常外认置器现运但小几任指权条更没亲积完十研说。中革来委色观即向图明响由上间矿圆际素起选管利书段最而气料车子况切周便确有布整里同做由集其最称过包管育内少么论文领正林了队文立听外。</p>
        </div> -->
      </div>
    </layout>
  </layoutBack>
</template>

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

export default {
  auth: false,
  name: 'OemInviteNewUserRule',
  head: {
    title: '活动规则',
  },
  // 页面初始化后触发
  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;
      }
    }
  }
}
</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;

    .rule-title {
      font-weight: 500;
      font-size: 14px;
      color: #0A132B;
      margin-bottom: 8px;
    }

    .rule-text{
      font-weight: 400;
      color: #979797;
    }
  }
}

</style>