hgmj_h5/src/components/AiGoldPopup/index.vue

<template>
  <!-- <van-overlay v-model:show="isShow" z-index="2001"> -->
  <van-popup
    v-model:show="isShow"
    close-on-click-overlay
    z-index="2001"
    position="bottom"
    :style="{ height: '350px' }"
    @close="close"
  >
    <div class="wrapper_gold">
      <div class="popup-title">
        <div class="title">使用抵扣券</div>
      </div>
      <div class="wrap">
        <div class="couponMain overflow-y-auto">
          <div class="couponItem" v-for="item in state.couponList" :key="item.id">
            <!-- <div class="aiLogo"></div> -->
            <div class="coupon-name">{{ item.goodsName }}</div>
            <div class="couponInfo">
              <div class="coupon-value">{{ item.goodsDesc }}</div>
              <!-- <div class="faceValue">{{ item.goodsValue }}金币</div>
              <div class="time">
                有效期:<span>{{ dateFormatYyyyMmDd(item.expiredTime) }}</span>
              </div> -->
            </div>
            <div class="right">
              <div class="use-btn" @click="handleUseCoupon(item)">立即使用</div>
              <!-- <div class="selectedCoupon" v-if="item.id == state.couponId"></div>
              <div class="selectCoupon" v-else></div> -->
            </div>
          </div>
          <Empty v-if="state.couponList.length === 0" />
        </div>
      </div>
    </div>
  </van-popup>
</template>
<script lang="ts" setup>
import useLoading from '@/hooks/loading';
import VideoApi from '@/service/video';
import { nextTick, reactive, watch, ref } from 'vue';
import { ProductType } from '@/enums/app';
import { showToast } from 'vant';
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';
import MineApi from '@/service/mine';
import { dateFormatYyyyMmDd } from '@/utils/index.ts';

const props = defineProps({
  gold: {
    type: Number,
    required: true,
  },
  isOpen: {
    type: Boolean,
    required: true,
  },
  isAv: {
    type: Boolean,
    required: false,
    default() {
      return false;
    },
  },
  isCoupon: {
    type: Boolean,
    required: false,
    default() {
      return true;
    },
  },
});

let state = reactive({
  couponSelect: -1,
  couponIndex: -1,
  couponList: [],
  couponId: '',
});

const userStore = useUserStore();
const userInfo = useUserStore().userInfo;
const router = useRouter();
const { openLoading, closeLoading } = useLoading();
const emit = defineEmits(['close', 'buySuccess', 'update:isOpen', 'useCoupon']);
const isShow = ref(false);

watch(
  () => props.isOpen,
  (newVal) => {
    isShow.value = newVal;
  },
);

nextTick(() => {
  getAiCoupon();
});

/**
 * 获取抵用卷
 */
const getAiCoupon = async () => {
  let res: any = await MineApi.getAibackpack({ page: 1, limit: 50, status: 2, type: 3 });
  console.log(res);
  state.couponList = res || [];
};

const select = (item: any) => {
  if (item.id == state.couponId) {
    // 说明已经选了此优惠券，想要取消
    state.couponId = '';
  } else {
    state.couponId = item.id;
  }
  setTimeout(() => {
    // state.showCouponPopup = false;
  }, 500);
};

const selectCoupon = (index: any) => {
  if (state.couponSelect == state.couponIndex) {
    state.couponSelect = -1;
    state.couponIndex = -1;
  } else {
    state.couponIndex = index;
  }
};

const unlockNowCoupon = (type: any) => {
  if (state.couponIndex > -1 && type) {
    emit('buySuccess', state.couponList[state.couponIndex]['coupon']['id']);
  } else {
    emit('buySuccess', null);
  }
};

const close = () => {
  emit('close');
  emit('update:isOpen', false);
};

const handleUseCoupon = (item: any) => {
  console.log(item);
  emit('useCoupon', item);
  close();
};
// const selectCoupon = (item: any) => {
//   let money = userInfo.isVip ? props.videoInfo.coins : props.videoInfo.originCoins;
//   if (item.gold < money) {
//     showToast('观影券面值过小，请选择其他支付方式');
//   } else {
//     unlockNow(item.gold);
//   }
// };
</script>
<style lang="scss" scoped>
.wrapper_gold {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(3, 15, 24, 1);
  padding: 16px;
  overflow: hidden;
  .wrap {
    flex: 1;
    overflow: hidden;
    // border-radius: 5px;
    // padding: 20px 0;
  }
  .popup-title {
    text-align: center;
    position: relative;
    font-weight: 600;
    font-size: 18px;
    color: #fff;
    margin-bottom: 16px;
  }

  .buyAiTitleBg {
    .title {
      font-size: 16px;
    }
    .close {
      position: absolute;
      font-size: 18px;
      right: 15px;
      top: -5px;
      z-index: 5;
    }
  }

  .couponMain {
    padding-top: 16px;
    height: 388px;
    .couponItem {
      height: 68px;
      width: 343px;
      margin: 0 auto 14px;
      background: url('@/assets/images/png/aiCouponBg.png') no-repeat;
      background-size: 100% 100%;
      position: relative;
      display: flex;
      align-items: center;
      .coupon-name {
        font-size: 18px;
        font-weight: 600;
        color: rgba(126, 68, 68, 1);
        margin-left: 12px;
      }
      .coupon-value {
        font-size: 14px;
        color: rgba(126, 68, 68, 1);
        opacity: 0.6;
        margin-left: 12px;
      }
      // .aiLogo {
      //   height: 48px;
      //   width: 43.2px;
      //   background: url("@/assets/images/png/ai.png") no-repeat;
      //   background-size: 100% 100%;
      //   position: absolute;
      //   left: 30px;
      //   top: 20px;
      // }
      .couponInfo {
        // position: absolute;
        // left: 124px;
        // top: 14px;
        .faceValue {
          font-size: 23px;
          font-weight: 500;
          color: rgb(242, 106, 80);
        }
        .time {
          font-size: 14px;
          color: rgb(100, 94, 91);
          margin-top: 7px;
          span {
            font-size: 12px;
          }
        }
      }
      .right {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        .use-btn {
          width: 72px;
          height: 26px;
          background: rgba(255, 220, 179, 1);
          border-radius: 50px;
          font-size: 14px;
          color: rgba(127, 0, 0, 1);
          text-align: center;
          line-height: 26px;
        }
        // .selectCoupon {
        //   height: 16px;
        //   width: 16px;
        //   background: url("@/assets/images/png/selectCoupon.png") no-repeat;
        //   background-size: 100% 100%;
        // }
        // .selectedCoupon {
        //   height: 16px;
        //   width: 16px;
        //   background: url("@/assets/images/png/selectedCoupon.png")
        //     no-repeat;
        //   background-size: 100% 100%;
        // }
      }
    }
  }
}
</style>