Vue组件：实现电商商品详情领券场景的仿京东拼多多弹出框

在前端开发中，为了提升用户体验和增加交互性，我们常常需要实现各种弹出框组件。本文将介绍如何使用Vue框架实现一个仿京东拼多多的优惠券领取弹出框组件，该组件可以应用于电商商品详情页的领券场景。

功能需求

我们的目标是创建一个Vue组件，通过点击按钮触发弹出框，在弹出框中展示可领取的优惠券列表，并实现用户点击领取优惠券的功能。

组件的主要功能如下：

1. 点击按钮，弹出优惠券弹出框。
2. 在弹出框中展示可领取的优惠券列表，包括优惠券的名称、面值、使用条件等信息。
3. 用户可以点击优惠券进行领取，领取成功后，优惠券状态更新为已领取。
4. 用户可以关闭弹出框。

实现步骤

1. 创建Vue组件

首先，我们需要在Vue项目中创建一个名为CouponPopup的组件。在组件中，我们可以通过定义data属性来存储优惠券数据和控制弹出框的显示与隐藏。

<template>
  <div>
    <button @click="showPopup">领取优惠券</button>
    <div v-if=