applet/components/couponSelectPopup/couponSelectPopup.vue

<template>
  <uv-popup ref="popupRef" mode="bottom" round="20rpx" closeable>
    <view class="coupon-main">
      <view class="coupon-main-title"> 选择优惠卷 </view>
      <scroll-view scroll-y class="coupon-list">
        <view style="padding: 0 20rpx">
          <couponInfo
            v-for="(item, index) in list"
            :key="index"
            :item="item"
            :show="checkIndex === index ? true : false"
            :isMyCoupon="true"
            @useTickets="checkCoupon"
            :select="item.id == id ? true : false"
            types="select"
          />
        </view>
      </scroll-view>
    </view>
  </uv-popup>
</template>

<script setup name="couponSelectPopup">
import { ref, watch } from "vue";
const emit = defineEmits(["change"]);
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});

const popupRef = ref(null);
const list = ref(props.list || []);
const id = ref("");
watch(
  () => props.list,
  (newValue) => {
    list.value = newValue;
  }
);

const checkCoupon = (item) => {
  popupRef.value.close();
  emit("change", item);
};

const open = (itemId = "") => {
  id.value = itemId || "";
  popupRef.value.open();
};

defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.coupon-main-title {
  text-align: center;
  font-size: 30rpx;
  font-weight: 700;
  background-color: #fdfdfd;
}
.coupon-main {
  background-color: #fdfdfd;
  box-sizing: border-box;
  padding: 40rpx 0;
}
.coupon-list {
  height: 60vh;
}
</style>