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

<template>
  <layout @goBack="leaveFun" :isNavBar="isNavBar" :bgHeight="350">
    <div class="choose-cloud-phone">
      <div class="choose-cloud-phone_info">
        <div class="choose-cloud-phone_info-name">
          亲爱的{{ info.phoneNumber || '用户' }}
        </div>
        <img
          class="choose-cloud-phone_tips"
          src="@/assets/image/claimCloudPhone/chooseCloudPhoneTitle.png"
          alt=""
        />
      </div>
      <div class="choose-cloud-phone_select">
        <div>请选择</div>
        <div v-for="item in 2" :key="item" @click="selectJumpPhone(item)"></div>
      </div>
      <cloudMobilePhonePopup
        v-model="visible"
        titleText="选择续费云手机"
        :ids.sync="ids"
        @confirm="selectJumpPhone(3)"
        :data="packageList"
        :total="packageTotal"
        :loading="loading"
        :listLoading.sync="listLoading"
        @load="load"
      >
        <van-search
          v-model="keyWord"
          placeholder="请输入云机名称"
          style="padding: 0; width: 170px"
          @input="search"
        />
      </cloudMobilePhonePopup>
    </div>
    <van-dialog
      v-model="dialogVisible"
      :showConfirmButton="false"
      close-on-click-overlay
      :before-close="beforeClose"
    >
      <img
        v-cloak
        src="@/assets/image/claimCloudPhone/firstScreenPopUp.png"
        alt=""
        ref="dialogImg"
        class="dialog-img"
        @click="beforeClose"
      />
    </van-dialog>
  </layout>
</template>

<script>
import debounce from 'lodash.debounce';
import common from './mixins/common.js';
import layout from './components/layout.vue';
import cloudMobilePhonePopup from '@/components/cloudMobilePhonePopup';
let _self = null;
export default {
  name: 'chooseCloudPhone',
  auth: false,
  head: {
    title: '0元购机，尽情享受',
  },
  mixins: [common],
  components: {
    layout,
    cloudMobilePhonePopup,
  },
  data() {
    return {
      visible: false, // 显示续费云手机弹窗
      ids: [], // 选中的id
      // 续费云手机套餐相关参数
      pageNum: 1,
      pageSize: 50,
      keyWord: '', // 搜索云手机关键词
      packageList: [],
      packageTotal: 0,
      loading: false,
      listLoading: false,
      isNavBar: true,
      info: {},
      dialogVisible: false,
    };
  },
  mounted() {
    if (localStorage.getItem('bargainingStatusInfo')) {
      this.info = JSON.parse(localStorage.getItem('bargainingStatusInfo'));
    }
    if (+sessionStorage.getItem('activityEmd')) {
      this.dialogVisible = false;
      this.$toast('活动已到期');
      return;
    }
    setTimeout(() => {
      this.dialogVisible = true;
    })
    this.isNavBar = !+localStorage.getItem('auth.inviteeNum');
    _self = this;
    // 用来监听微信返回上一页的
    const { exit } = this.$route.query;
    if (exit) {
      this.wxIntercept(() => {
        this.leaveFun();
      });
    }
    this.getRenewalPackage();
  },
  methods: {
    // 选增新增云手机 of 续费云手机
    selectJumpPhone(item) {
      if (+sessionStorage.getItem('activityEmd')) {
        this.$toast('活动已到期');
        return;
      }
      if (item === 2) {
        this.ids = [];
        this.visible = true;
        return;
      }
      let url = '/claimCloudPhone/zeroYuanClaim';
      if (item === 3) url += `?userCardId=${this.ids[0].id}`;
      this.$router.push(url);
    },

    // 搜索云机名称
    search: debounce(() => {
      _self.pageNum = 1;
      _self.packageList = [];
      _self.getRenewalPackage();
    }, 500),

    // 获取续费套餐
    getRenewalPackage(bool = true) {
      if (bool) this.loading = true;
      this.$axios
        .$post('resources/v5/activity/card/bargaining/list', {
          diskName: this.keyWord,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
        .then((res) => {
          if (res.success) {
            this.packageList.push(...res.data.list);
            this.packageTotal = res.data.total;
          }
        })
        .finally(() => {
          this.loading = false;
          !bool && (this.listLoading = false);
        });
    },

    // 触发续费云手机套餐分页
    load() {
      this.pageNum++;
      this.getRenewalPackage(false);
    },

    // 动画
    beforeClose(action, done) {
      this.$refs.dialogImg.className += ' dialog-img-animation';
      this.$refs.dialogImg.addEventListener('animationend', () => {
        done ? done() : (this.dialogVisible = false);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.choose-cloud-phone {
  height: 100%;
  .choose-cloud-phone_info {
    .choose-cloud-phone_info-name {
      display: inline-block;
      padding: 5px 10px;
      background: linear-gradient(296deg, #fdf0e2 0%, #fcd9ae 100%);
      box-shadow: 0px 1px 2px 0px #facd8a;
      border-radius: 4px;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: bold;
      font-size: 14px;
      color: #754213;
      line-height: 20px;
      text-align: center;
      font-style: normal;
      margin-bottom: 4px;
    }
  }
  .choose-cloud-phone_tips {
    width: 260px;
  }
  .choose-cloud-phone_select {
    margin-top: 10px;
    & > div {
      margin-bottom: 12px;
    }
    & > div:nth-of-type(1) {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 20px;
      font-style: normal;
    }
    & > div:nth-of-type(2) {
      background: url(~/assets/image/claimCloudPhone/addCloudMobilePhone.png)
        no-repeat;
    }
    & > div:nth-of-type(3) {
      background: url(~/assets/image/claimCloudPhone/renewCloudMobilePhone.png)
        no-repeat;
    }
    & > div:nth-of-type(2),
    & > div:nth-of-type(3) {
      height: 123px;
      background-size: 100% 100%;
      background-position: 0px 0px;
    }
  }
}
.van-dialog {
  background: transparent;
  overflow: initial;
  .dialog-img {
    width: 100%;
    height: 100%;
    &.dialog-img-animation {
      animation: dialogImg 0.5s forwards linear;
      @keyframes dialogImg {
        0% {
          opacity: 1;
        }
        100% {
          transform: translate(-39%, -73%) scale(0.2);
          opacity: 0;
        }
      }
    }
  }
}
</style>