uniAppXCX/pages/rule/rule.vue

<template>
  <view class="container">
    <view class="title fs16 bold text-center">{{ title }}</view>
    <view class="textInfo text-zinc-800" v-html="rulesHtml"></view>
  </view>
</template>

<script>
import { rules } from './rule.js'
export default {
  data() {
    return {
      rules: rules,
      rulesHtml: '',
      type: null,
      title: '规则与说明',
    }
  },
  onLoad(query) {
    console.log(query)
    if (query.type) {
      this.type = query.type
      this.typeInit()
    }
  },
  methods: {
    typeInit() {
      let titleText = '规则与说明'
      switch (this.type) {
        case '0':
          titleText = '规则与说明'
          this.rulesHtml = this.rules['all']
          break
        case '1':
          titleText = '无限赏规则与说明'
          this.rulesHtml = this.rules['wuxian']
          break
        case '2':
          titleText = 'last赏规则与说明'
          this.rulesHtml = this.rules['last']
          break
        case '3':
          titleText = '全套赏规则与说明'
          this.rulesHtml = this.rules['fullSet']
          break
        case '4':
          titleText = '抽盒机规则与说明'
          this.rulesHtml = this.rules['box']
          break
        case '5':
          titleText = 'first赏规则与说明'
          this.rulesHtml = this.rules['first']
          break
        case '6':
          titleText = '邀请好友规则与说明'
          this.rulesHtml = this.rules['invite']
          break
      }
      this.title = titleText
      wx.setNavigationBarTitle({
        title: titleText,
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  font-size: 28rpx;
  padding: 20rpx;

  .title {
  }

  .textInfo {
    padding-bottom: 60rpx;

    p {
      margin: 10rpx 0;
    }
  }
}
</style>