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>
        <div class="choose-cloud-phone_info-tips">
          <div>恭喜您获得“0元领云机”大奖</div>
          <div>感谢您的陪伴与支持</div>
        </div>
      </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>
  </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: {}
    };
  },
  mounted() {
    if(localStorage.getItem('bargainingStatusInfo')) {
      this.info = JSON.parse(localStorage.getItem('bargainingStatusInfo'))
    }
    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 (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);
    }
  },
};
</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_info-tips {
      & > div:first-child {
        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
        font-weight: bold;
        font-size: 20px;
        line-height: 27px;
        font-style: normal;
        background: linear-gradient(90deg, #fffbfb 0%, #fbce95 100%);
        /* 将文字颜色设置为透明，以便背景渐变可见 */
        color: transparent;
        /* 使用 blend-mode 来控制渐变背景与文字颜色的混合效果 */
        -webkit-background-clip: text;
        background-clip: text;
      }

      & > div:last-child {
        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        line-height: 17px;
        margin-bottom: 20px;
      }
    }
  }

  .choose-cloud-phone_select {
    & > div {
      margin-bottom: 12px;
    }
    & > div:nth-of-type(1) {
      font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      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;
    }
  }
}
</style>