android-cloud-H5/components/cloudMobilePhonePopup/index.vue

<template>
  <van-popup
    v-model="visible"
    v-bind="$attrs"
    v-on="$listeners"
    :position="position"
    :style="{ background: 'transparent' }"
  >
    <div class="cloud-mobile-phone_popup" :style="{ background }">
      <div class="cloud-mobile-phone_popup-title">
        <div class="cloud-mobile-phone_popup-title_left">
          <slot name="left">
            <div>
              {{ titleText }}
            </div>
          </slot>
        </div>

        <slot>
          <van-checkbox
            shape="square"
            v-model="checkboxAll"
            @change="changeCheckboxAll"
            icon-size="16px"
            >全选</van-checkbox
          >
        </slot>
      </div>
      <div class="cloud-mobile-phone_popup-content">
        <div v-if="data.length">
          <van-checkbox-group icon-size="16px" v-model="selectIds">
            <van-list
              v-model="asyncListLoading"
              @load="onLoad"
              :finished="finished"
              offset="10"
              :immediate-check="false"
            >
              <div
                :style="{
                  background: backgroundItem,
                  marginTop: index !== 0 ? '12px' : '',
                }"
                v-for="(item, index) in data"
                :key="item.id"
                class="cloud-mobile-phone_popup-content_item"
              >
                <div class="cloud-mobile-phone_popup-content_item-left">
                  <img :src="require(`@/assets/image/${item.buyVipType}_icon.png`)" alt="" />
                  <div>
                    <div>{{ item.diskName }}</div>
                    <div>
                      <img src="@/assets/image/phone_time.png" alt="" />
                      剩{{ timeStamp(item.validTime, item.userCardType) }}
                    </div>
                  </div>
                </div>
                <div class="cloud-mobile-phone_popup-content_item-right">
                  <van-checkbox
                    :name="item"
                    :shape="isMultipleChoice ? 'square' : 'round'"
                    @click="changeSelectIds(item)"
                  ></van-checkbox>
                </div>
              </div>
            </van-list>
          </van-checkbox-group>
        </div>
        <div v-else style="height: 100%">
          <van-empty description="暂无续费云手机" v-if="!loading" />
          <div
            v-else
            style="
              display: flex;
              height: 100%;
              justify-content: center;
              align-items: center;
            "
          >
            <van-loading />
          </div>
        </div>
      </div>
      <van-button
        type="info"
        color="linear-gradient(to right,#38AEFC, #3B7FFF)"
        :disabled="!selectIds.length"
        @click="confirm"
      >
        确认
      </van-button>
    </div>
  </van-popup>
</template>

<script>
import {timeStamp} from '@/plugins/plugins.js';
export default {
  name: 'cloudMobilePhonePopup',
  props: {
    // 显示更隐藏
    value: {
      type: Boolean,
      default: false,
    },
    // 弹窗从哪里弹出来
    position: {
      type: String,
      default: 'bottom',
    },
    // 最外层弹框盒子颜色
    background: {
      type: String,
      default: '#fff',
    },
    // 左上角标题
    titleText: {
      type: String,
      default: '选择云手机',
    },
    // 云机每项的背景颜色
    backgroundItem: {
      type: String,
      default: '#F2F4F7',
    },
    // 最终确认的ids
    ids: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 是否是多选
    isMultipleChoice: {
      type: Boolean,
      default: false,
    },
    total: {
      type: [String, Number],
      default: 0,
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    listLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checkboxAll: false,
      timeStamp,
      selectIds: [],
      finished: false,
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        if (!val) this.selectIds = [];
        this.$emit('input', val);
      },
    },
    asyncListLoading: {
      get() {
        return this.listLoading;
      },
      set(val) {
        this.$emit('update:listLoading', val);
      },
    },
  },
  methods: {
    // 全选相关逻辑,后续再拓展
    changeCheckboxAll(bool) {
      console.log(bool);
    },
    // 用来处理单选相关的逻辑
    changeSelectIds(data) {
      if (!this.isMultipleChoice && this.selectIds.length) {
        this.selectIds = [data];
      }
    },
    // 最终确认的
    confirm() {
      this.$emit('update:ids', this.selectIds);
      this.$emit('confirm');
    },

    onLoad() {
      if (this.total === this.data.length) {
        this.finished = true;
        return 
      }
      this.$emit('load');
    },
  },
};
</script>

<style style lang="scss" scoped>
.cloud-mobile-phone_popup {
  border-radius: 10px 10px 0 0;
  padding: 16px 0px;
  margin: 0 16px;
  height: 60vh;
  display: flex;
  flex-direction: column;

  .van-empty {
    padding: 0 !important;
  }
  .cloud-mobile-phone_popup-title,
  .cloud-mobile-phone_popup-content > div,
  .van-button {
    margin: 0 12px;
  }

  .van-button {
    border-radius: 8px;
  }
  .cloud-mobile-phone_popup-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    .cloud-mobile-phone_popup-title_left {
      font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      font-size: 16px;
      color: #0a132b;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .cloud-mobile-phone_popup-content {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 12px;
    .cloud-mobile-phone_popup-content_item {
      height: 65px;
      padding: 16px 12px;
      box-sizing: border-box;
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
      & > div {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .cloud-mobile-phone_popup-content_item-left {
        & > img {
          margin-right: 8px;
          width: 34px;
          height: 34px;
        }
        & > div {
          font-family: PingFangSC, PingFang SC;
          & > div:first-of-type {
            font-weight: bold;
            font-size: 16px;
            color: #0a132b;
            line-height: 22px;
            font-style: normal;
          }

          & > div:last-of-type {
            font-weight: 400;
            font-size: 12px;
            color: #666666;
            line-height: 17px;
            font-style: normal;
            vertical-align: middle;
            img {
              width: 13px;
              height: 13px;
              vertical-align: middle;
              margin-bottom: 3px;
            }
            &.red-time {
              color: #f04646;
            }
          }
        }
      }
    }
  }
}
</style>