uniAppXCX/pages/rule/rule.vue

<template>
  <view class="container">
    <!-- <view class="title fs16 bold text-center">{{ title }}</view> -->
    <!-- <view class="textInfo text-white" v-html="rulesHtml"></view> -->
    <div v-if="type == 0">
      <div class="mx-auto my-4 rounded-md bg-white py-3 px-4 box-border" style="width: 670rpx">
        <p class="fs20 bold my-2 text-center">玩法说明</p>
        <p>1、 开赏类盲盒商品，一经购买不接受无理由退款，请谨慎例行购买 (未成年人禁止下单)</p>
        <p class="my-2">
          2、根据您的需求点击 同时会获得对应张数的赠送赏品，100%有赠品，赏品类型以及获得概率已商品详情为准
        </p>
        <p class="my-2">3、所有赏品概率及记录均在赏品详情展示，请参考后下单，平台保证公平公正公开的原则。</p>
        <p class="my-2">4、 赏品按稀有度分别为S赏、A赏、欧王赏，B赏、C赏、五个等级，每个品级获得概率以公示为准。</p>
      </div>
      <div class="mx-auto my-4 rounded-md bg-white py-3 px-4 box-border" style="width: 670rpx">
        <p class="fs20 bold my-2 text-center">特殊模式说明</p>
        <p class="my-2">1、FIRST赏说明：当卡盒余量小于一半时，将在之前抽奖所有用户中随机抽取一位用户获得FIRST赏奖品</p>
        <p class="my-2">2、LAST赏说明：当卡盒被抽完时，买到最后一张卡的用户将额外获得一张LAST赏奖品</p>
        <p class="my-2">
          3、连击说明：当连击达到300时，必出一个限定等级的商品，具体等级已商品详情为准，连击值请对应展示界面。
        </p>
        <p class="my-2">
          4、无限赏锁箱模式：如果开启了锁箱则已商品详情张数赏的锁箱秒数为准，当前用户购买赏品锁箱中，其他用户无法购买，锁箱时间均在赏内有提示。当前用户停止购买，其他用户等待锁箱结束后，第一个支付成功的用户可购买、一次性支付10抽自动开启锁箱模式。(锁箱时间上限60分钟)
        </p>
        <p class="my-2">
          5、随机掉落模式：每次抽赏系统会有概率 (以点击掉落界面的概率为准)赠送一个赏品。具体概率已掉落页面为准。
        </p>
        <p class="my-2">
          6、欧王模式：如果开启了欧王奖励，则获得欧王赏等级赏品的欧王将会成为当前欧王，之后购买的金额将会按商品详情点击欧王奖励公示的比例奖励给欧王。
        </p>
        <p class="my-2">7、全套赏模式</p>
        <p class="my-2 ml-2">7.1 购买：全套赏为拼单模式，倒计时结束前用户可以选购，卡盒全部被选购则拼单成功。</p>
        <p class="my-2 ml-2">7.2 开奖：倒计时结束后，若拼单成功则开奖，可在全套赏界面中查看中奖结果。</p>
        <p class="my-2">8、抽盒机模式</p>
        <p class="my-2 ml-2">8.1 抽盒机为卡牌类在线拆包福袋盲盒</p>
        <p class="my-2 ml-2">8.2 每一盒必有一张稀有高罕卡</p>
        <p class="my-2 ml-2">8.3 每1包卡包，必定包含多少岁张卡牌以下单界面显示的张数为准</p>
        <p class="my-2 ml-2">
          8.4
          卡牌类商品付款后即完成在线拆包，依据《网络购买商品七日无理由退货暂行办法》第七条《二)规定，不适用7日无理由退货，超15天售后期后不接受质量问题退换货。
        </p>
        <p class="fs15 bold my-2">三、关于发货</p>
        <p class="my-2">1、开赏后的赏品会放进背包，您可以到”背包”内手动申请发货。</p>
        <p class="my-2">
          2、请务必确保您填写的默认地址是真实有效的，因您地址错误或其他个人原因导致的任何损失由您自行承担。
        </p>
        <p class="my-2">
          3、我们会根据申请发货的先后顺序安排发货，如遇节假日或特殊情况会暂停或延缓发货，但我们会竭尽全力将现货商品尽快送达您的手中，申请发货后7-10个工作日内发出。
        </p>
        <p class="my-2">
          发货机制:平台默认使用圆通物流，满5件国内包邮(新疆、内蒙、港澳台除外) ，小于5件需支付15元邮费。
        </p>
        <p class="my-2">
          4、如因非人为原因导致出现赏品损坏请及时沟通客服(请按照封箱贴上的提示，录制好开箱视频)，可调换新的同款赏品
          (以退换货规则为准) ;不支持退货、调换其他款赏品。
        </p>
        <p class="my-2">
          5、为保障每一个用户能够公平享有冲赏的权利，我们会对用户的冲赏行为进行实时监测，对于出现恶意行为的用户，我们有权要求其退还因恶意行为获得的额外利益并进行警告;出现两次恶意行为，用户将被拉入黑名单，并冻结其如意卡牌一番账户，不可使用一番赏购买服务及其他相关服务
          恶意行为: 开箱后无质量问题以各种理由要求退款、欺骗或与他人联合欺骗其他冲赏用户、利用系统BUG恶意冲赏等。
        </p>
        <p class="my-2">
          6、一番赏内赏品难免存在轻微蹭色、溢色等轻微瑕疵不支持因此提出的退换货申请，请您知悉并谨慎考虑后购买;
        </p>
        <p class="my-2">
          7、如您收到的商品有质量问题，如:存在损坏、少件或遗失,请您提供有效凭证，证明签收时商品即存在上述问题，平台将提供退换货服务且由平台承担来回运费。
        </p>
        <p class="fs15 bold my-2">四、关于商品缺货的处理</p>
        <p class="my-2">
          由于市场变化、系统问题、不可抗力等因素影响，您所提交的订单信息中的商品可能出现缺货情形。在此情形下，如意卡牌一番将以有效方式(包括但不限于向您提供的联系电话发送手机短信)
          通知您并提供解决方案(包括但不限于取消订单、换货、调货等方式)
          。请您在未收到商品之前留意通知，若如意卡牌一番自发出通知一周内超过两次无法与您取得电话联系且您在收到如意卡牌一番通知超过30天未主动联系在线客服，将有权取消订单并退还您所支付的冲赏费用，由此给您带来的不便敬请谅解。缺货商品是否补货不再另行通知，如您对此商品感兴趣，请您随时关注。
        </p>
        <p class="fs15 bold my-2">五、关于售后</p>
        <p class="my-2">1、因盲盒商品特殊性不支持7天无理由退换货</p>
        <p class="my-2">
          2、一番赏内商品由于属于IP定制产品难免存在轻微蹭溢色等涂装问题的瑕疵，此类问题不属于质量问题，我们保证相应产品已获得版权方授权，为正版商品。我们不接受因上述瑕疵问题因此提出的退换货申请，请您知悉并谨慎考虑后购买
        </p>
        <p class="my-2">
          3、如您收到的商品有质量问题，如:存在损坏、少件或遗失,请您提供有效凭证，证明签收时商品即存在上述问题，平台将提供退换货服务且由平台承担来回运费
        </p>
        <p class="my-2">4、接受售后时间: 退货申请--自物流签收后起7天内;换货申请--自物流签收后起15天内 (以自然天计算)</p>
        <p class="my-2">5、售后处理时效:如需回寄退换货的，用户需在收到通知7天内回寄商品 (春节假期以公告为准)</p>
        <p class="my-2">6、品牌方售后处理周期以品牌方时效为准</p>
      </div>
    </div>
    <div v-if="type == 1">
      <div class="mx-auto my-4 rounded-md bg-white py-3 px-4 box-border" style="width: 670rpx">
        <p class="fs20 bold my-2 text-center">玩法说明</p>
        <p class="my-2">1、 开赏类盲盒商品，一经购买不接受无理由退款，请谨慎例行购买 (未成年人禁止下单)</p>
        <p class="my-2">
          2、根据您的需求点击 同时会获得对应张数的赠送赏品，100%有赠品，赏品类型以及获得概率已商品详情为准
        </p>
        <p class="my-2">3、所有赏品概率及记录均在赏品详情展示，请参考后下单，平台保证公平公正公开的原则。</p>
        <p class="my-2">4、 赏品按稀有度分别为S赏、A赏、欧王赏，B赏、C赏、五个等级，每个品级获得概率以公示为准。</p>
      </div>
      <div class="mx-auto my-4 rounded-md bg-white py-3 px-4 box-border" style="width: 670rpx">
        <p class="fs20 bold my-2 text-center">特殊模式说明</p>
        <p class="my-2">
          1、连击说明：当连击达到300时，必出一个限定等级的商品，具体等级已商品详情为准，连击值请对应展示界面。
        </p>
        <p class="my-2">
          2、无限赏锁箱模式：如果开启了锁箱则已商品详情张数赏的锁箱秒数为准，当前用户购买赏品锁箱中，其他用户无法购买，锁箱时间均在赏内有提示。当前用户停止购买，其他用户等待锁箱结束后，第一个支付成功的用户可购买、一次性支付10抽自动开启锁箱模式。(锁箱时间上限60分钟)
        </p>
        <p class="my-2">
          3、随机掉落模式：每次抽赏系统会有概率 (以点击掉落界面的概率为准)赠送一个赏品。具体概率已掉落页面为准。
        </p>
        <p class="my-2">
          4、欧王模式：如果开启了欧王奖励，则获得欧王赏等级赏品的欧王将会成为当前欧王，之后购买的金额将会按商品详情点击欧王奖励公示的比例奖励给欧王。
        </p>
      </div>
    </div>
    <div v-if="type == 2">
      <div class="mx-auto my-4 rounded-md bg-white py-3 px-4 box-border" style="width: 670rpx">
        <p class="fs20 bold my-2 text-center">玩法说明</p>
        <p class="my-2">1、开赏类盲盒商品，一经购买不接受无理由退款，请谨慎例行购买 (未成年人禁止下单)</p>
        <p class="my-2">
          2、根据您的需求点击 同时会获得对应张数的赠送赏品，100%有赠品，赏品类型以及获得概率已商品详情为准
        </p>
        <p class="my-2">3、所有赏品概率及记录均在赏品详情展示，请参考后下单，平台保证公平公正公开的原则。</p>
        <p class="my-2">4、赏品按稀有度分别为S赏、A赏、欧王赏，B赏、C赏、五个等级，每个品级获得概率以公示为准。</p>
      </div>
      <div class="mx-auto my-4 rounded-md bg-white py-3 px-4 box-border" style="width: 670rpx">
        <p class="fs20 bold my-2 text-center">特殊模式说明</p>
        <p class="my-2">LAST赏说明：当卡盒被抽完时，买到最后一张卡的用户将额外获得一张LAST赏奖品</p>
      </div>
    </div>
    <div v-if="type == 3">
      <div class="mx-auto my-4 rounded-md bg-white py-3 px-4 box-border" style="width: 670rpx">
        <p class="fs20 bold my-2 text-center">玩法说明</p>
        <p class="my-2">1、 开赏类盲盒商品，一经购买不接受无理由退款，请谨慎例行购买 (未成年人禁止下单)</p>
        <p class="my-2">
          2、根据您的需求点击 同时会获得对应张数的赠送赏品，100%有赠品，赏品类型以及获得概率已商品详情为准
        </p>
        <p class="my-2">3、所有赏品概率及记录均在赏品详情展示，请参考后下单，平台保证公平公正公开的原则。</p>
        <p class="my-2">4、 赏品按稀有度分别为S赏、A赏、欧王赏，B赏、C赏、五个等级，每个品级获得概率以公示为准。</p>
      </div>
      <div class="mx-auto my-4 rounded-md bg-white py-3 px-4 box-border" style="width: 670rpx">
        <p class="fs20 bold my-2 text-center">特殊模式说明</p>
        <p class="my-2">1、全套赏模式</p>
        <p class="my-2 ml-2">1.1 购买：全套赏为拼单模式，倒计时结束前用户可以选购，卡盒全部被选购则拼单成功。</p>
        <p class="my-2 ml-2">1.2 开奖：倒计时结束后，若拼单成功则开奖，可在全套赏界面中查看中奖结果。</p>
      </div>
    </div>
    <div v-if="type == 4">
      <div class="mx-auto my-4 rounded-md bg-white py-3 px-4 box-border" style="width: 670rpx">
        <p class="fs20 bold my-2 text-center">玩法说明</p>
        <p class="my-2">1、 开赏类盲盒商品，一经购买不接受无理由退款，请谨慎例行购买 (未成年人禁止下单)</p>
        <p class="my-2">
          2、根据您的需求点击 同时会获得对应张数的赠送赏品，100%有赠品，赏品类型以及获得概率已商品详情为准
        </p>
        <p class="my-2">3、所有赏品概率及记录均在赏品详情展示，请参考后下单，平台保证公平公正公开的原则。</p>
        <p class="my-2">4、 赏品按稀有度分别为S赏、A赏、欧王赏，B赏、C赏、五个等级，每个品级获得概率以公示为准。</p>
      </div>
      <div class="mx-auto my-4 rounded-md bg-white py-3 px-4 box-border" style="width: 670rpx">
        <p class="fs20 bold my-2 text-center">特殊模式说明</p>
        <p class="my-2">1、抽盒机模式</p>
        <p class="my-2 ml-2">1.1 抽盒机为卡牌类在线拆包福袋盲盒</p>
        <p class="my-2 ml-2">1.2 每一盒必有一张稀有高罕卡</p>
        <p class="my-2 ml-2">1.3 每1包卡包，必定包含多少岁张卡牌以下单界面显示的张数为准</p>
        <p class="my-2 ml-2">
          1.4
          卡牌类商品付款后即完成在线拆包，依据《网络购买商品七日无理由退货暂行办法》第七条《二)规定，不适用7日无理由退货，超15天售后期后不接受质量问题退换货。
        </p>
      </div>
    </div>
    <div v-if="type == 5">
      <div class="mx-auto my-4 rounded-md bg-white py-3 px-4 box-border" style="width: 670rpx">
        <p class="fs20 bold my-2 text-center">玩法说明</p>
        <p class="my-2">1、开赏类盲盒商品，一经购买不接受无理由退款，请谨慎例行购买 (未成年人禁止下单)</p>
        <p class="my-2">
          2、根据您的需求点击 同时会获得对应张数的赠送赏品，100%有赠品，赏品类型以及获得概率已商品详情为准
        </p>
        <p class="my-2">3、所有赏品概率及记录均在赏品详情展示，请参考后下单，平台保证公平公正公开的原则。</p>
        <p class="my-2">4、赏品按稀有度分别为S赏、A赏、欧王赏，B赏、C赏、五个等级，每个品级获得概率以公示为准。</p>
      </div>
      <div class="mx-auto my-4 rounded-md bg-white py-3 px-4 box-border" style="width: 670rpx">
        <p class="fs20 bold my-2 text-center">特殊模式说明</p>
        <p class="my-2">FIRST赏说明：当卡盒余量小于一半时，将在之前抽奖所有用户中随机抽取一位用户获得FIRST赏奖品</p>
      </div>
    </div>
    <div v-if="type == 6">
      <div class="mx-auto my-4 rounded-md bg-white py-3 px-4 box-border" style="width: 670rpx">
        <p class="fs20 bold my-2 text-center">玩法说明</p>
        <p class="my-2">1、转发邀请好友成功注册后绑定为下级，下级任意消费金额的3%转换为通用积分。</p>
        <p class="my-2">2、通用积分可以用于消费抵扣，积分商城消费。</p>
      </div>
    </div>
  </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;
  background: #f67f53;

  .textInfo {
    padding-bottom: 60rpx;

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