android-cloud-H5/pages/claimCloudPhone/zeroYuanClaim.vue

<template>
  <layout :isNavBar="isNavBar">
    <div class="zero-yuan-claim">
      <img
        class="zero-yuan-claim-title"
        src="@/assets/image/claimCloudPhone/zero-yuan-claim-title.png"
      />
      <div>
        <template v-for="item in packageList">
          <setMealItem
            :key="item.serialNumber"
            :data="item"
            v-if="item.mealList && item.mealList.length"
            :type="1"
          />
        </template>
      </div>
    </div>
    <van-dialog
      v-model="visible"
      confirmButtonText="返回上一页"
      confirmButtonColor="#169bd5"
      close-on-click-overlay
      @confirm="$router.go(-1)"
    >
      <div style="text-align: center; padding: 10px; color: #999">
        很抱歉<br />
        您的套餐不支持此活动进行续费
      </div>
    </van-dialog>
  </layout>
</template>

<script>
import layout from './components/layout.vue';
import setMealItem from './components/setMealItem.vue';
import common from './mixins/common.js';
export default {
  name: 'zeroYuanClaim',
  auth: false,
  head: {
    title: '0元购机，尽情享受',
  },
  mixins: [common],
  components: { layout, setMealItem },
  data() {
    return {
      isNavBar: true,
    };
  },
  mounted() {
    const { userCardId, inviteeExits = 0 } = this.$route.query;
    this.isNavBar = !+inviteeExits;
    const obj = {
      personnelMealType: 1,
    };
    if (userCardId) obj.userCardId = userCardId;
    this.getActivitySortRuleAndActivityMealList(obj);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.zero-yuan-claim {
  height: 100%;
  .zero-yuan-claim-title {
    height: 40px;
    margin: 0 auto;
    display: block;
  }
}
</style>