最近微信小程序项目里，做了一个领取优惠券的弹框。如果如果项目经常用到可以做成一个组件

源代码如下：

<script>import wepy from 'wepy'export default class ShopCart extends wepy.page {config = {navigationBarTitleText: '测试demo'}data = {couponList: [{ money: 20 }, { money: 40 }, { money: 60 }],animationData: {},isShowBackgroundView: false}methods = {show() {this.isShowBackgroundView = truethis.animation.bottom('0rpx').step()this.setData({animationData: this.animation.export()})},hide() {this.isShowBackgroundView = falsethis.animation.bottom('-100%').step()this.setData({animationData: this.animation.export()})}}onLoad() {let animation = wx.createAnimation({duration: 800,timingFunction: 'ease'})this.animation = animation}}
</script>
<template><view><view class="show-btn" @tap="show">展示</view><view class="coupon_show_animation" animation="{{animationData}}"><view class="coupon_show"><view class="view_title">领取优惠券</view><scroll-view scroll-y style="max-height: 760rpx;"><view class="couponEach" wx:for="{{couponList}}" wx:key="{{index}}"><view class="firstCircle"></view><view class="couponDetail"><view class="detailmoney"><text class="textMoney">{{'￥' + item.money}}</text><text class="textdesc">店铺优惠券</text></view><view class="detail_limits">适用范围：订单满99可用</view><view class="detail_limits">有效期：2019年4月10日-2019年5月9日</view></view><view class="line_dashed2"></view><text class="getCoupon">立即领取</text><view class="lastCircle"></view></view></scroll-view><view class="bottomdesc">以上价格仅为初步预估，不代表最终购买价格</view><view style="height: 2rpx; width: 100%;background-color: #979797"></view><text class="textcancle" @tap="hide">完成</text></view></view><view @tap="hide" wx:if="{{isShowBackgroundView}}" class="backgroundView" animation="{{animationBackground}}"/></view>
</template>
<style lang="less">.firstCircle {background-color: #EAEBED;height: 40 rpx;width: 40 rpx;border-radius: 20 rpx;margin-left: -20 rpx;margin-top: auto;margin-bottom: auto;}.couponDetail {display: flex;flex-direction: column;margin-top: auto;margin-bottom: auto;margin-left: 26 rpx;width: 436 rpx;}.couponEach {width: 690 rpx;height: 200 rpx;margin-left: auto;margin-right: auto;background-color: white;display: flex;margin-bottom: 20 rpx;}.detailmoney {display: flex;}.textMoney {font-size: 48 rpx;color: #742A1C;margin-left: -6 rpx;}.textdesc0 {color: #742A1C;font-size: 24 rpx;margin-top: auto;margin-bottom: auto;margin-left: 20 rpx;}.detail_limits {font-size: 18 rpx;color: #856E65;}.line_dashed2 {height: 185 rpx;width: 1 rpx;border-left: 1 rpx dashed #b2b2b2;margin-top: auto;margin-bottom: auto;}.getCoupon {width: 140 rpx;height: 50 rpx;font-size: 24 rpx;line-height: 50 rpx;text-align: center;margin: auto;color: #742A1C;border-radius: 25 rpx;border: 1 rpx solid #742A1C;}.lastCircle {background-color: #EAEBED;height: 40 rpx;width: 40 rpx;border-radius: 20 rpx;margin-right: -20 rpx;margin-top: auto;margin-bottom: auto;}.coupon_show_animation {width: 100%;background: #EAEBED;position: fixed;z-index: 101;bottom: -100%;}.coupon_show {width: 100%;display: flex;flex-direction: column;}.view_title {margin-left: auto;margin-right: auto;font-size: 30 rpx;color: #666363;margin-top: 32 rpx;margin-bottom: 20 rpx;}.view_coupon_desc {display: flex;margin-left: auto;margin-right: auto;margin-bottom: 42 rpx;}.goodmoney {color: #F5A623;font-size: 18 rpx;margin-top: auto;margin-bottom: auto;}.removemoney {color: #C94A3F;font-size: 18 rpx;margin-top: auto;margin-bottom: auto;}.textdesc {color: #B2B2B2;font-size: 18 rpx;margin-top: auto;margin-bottom: auto;}.view_coupon_desc image {width: 32 rpx;height: 32 rpx;margin-right: 10 rpx;margin-top: auto;margin-bottom: auto;}.bottomdesc {color: #B2B2B2;font-size: 18 rpx;margin-top: 20 rpx;margin-bottom: 20 rpx;margin-left: auto;margin-right: auto;}.textcancle {font-size: 30 rpx;color: white;height: 80 rpx;width: 250 rpx;border-radius: 40 rpx;background-color: #d63e23;line-height: 80 rpx;text-align: center;margin-left: auto;margin-right: auto;margin-bottom: 30 rpx;margin-top: 20 rpx;}.backgroundView {opacity: 0.6;z-index: 100;background-color: black;position: fixed;top: 0;left: 0;width: 100%;height: 100%;}
</style>