给一个demo示例，使用uni-collapse组件，仿美团小程序优惠券，展开收起效果

好的，下面是一个使用uni-collapse组件实现仿美团小程序优惠券展开收起效果的demo示例：

<template>
  <view class="coupon">
    <view class="coupon-header">
      <text class="title">优惠券</text>
      <text class="sub-title">{{couponList.length}}张</text>
    </view>
    <view class="coupon-list">
      <uni-collapse :accordion="false">
        <uni-collapse-item :title="item.title" :key="index" v-for="(item, index) in couponList">
          <view class="coupon-item" slot="content">
            <view class="coupon-item-left">
              <view class="coupon-item-money">
                <text class="money-symbol">¥</text>
                <text class="money-value">{{item.money}}</text>
              </view>
              <view class="coupon-item-desc">{{item.desc}}</view>
            </view>
            <view class="coupon-item-right">
              <view class="coupon-item-time">{{item.time}}</view>
              <view class="coupon-item-status">{{item.status}}</view>
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      couponList: [
        {
          title: '满100减50',
          money: 50,
          desc: '全场通用',
          time: '2021-12-31 23:59:59',
          status: '未使用'
        },
        {
          title: '满50减10',
          money: 10,
          desc: '仅限酒水类商品',
          time: '2022-12-31 23:59:59',
          status: '已使用'
        },
        {
          title: '满200减50',
          money: 50,
          desc: '仅限美食类商品',
          time: '2022-12-31 23:59:59',
          status: '未使用'
        }
      ]
    }
  }
}
</script>

<style>
.coupon {
  padding: 20upx;
}

.coupon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20upx;
}

.coupon-header .title {
  font-size: 36rpx;
  font-weight: bold;
}

.coupon-header .sub-title {
  font-size: 28rpx;
  color: #999;
}

.coupon-list {
  background-color: #f5f5f5;
  border-radius: 20upx;
  overflow: hidden;
}

.coupon-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120upx;
  padding: 20upx;
  background-color: #fff;
}

.coupon-item-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.coupon-item-money {
  display: flex;
  align-items: center;
}

.coupon-item-money .money-symbol {
  font-size: 28rpx;
  color: #ff4545;
}

.coupon-item-money .money-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff4545;
}

.coupon-item-desc {
  font-size: 28rpx;
  color: #999;
}

.coupon-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.coupon-item-time {
  font-size: 28rpx;
  color: #999;
}

.coupon-item-status {
  font-size: 28rpx;
  color: #ff4545;
}
</style>

在这个示例中，我们使用了uni-collapse和uni-collapse-item组件来实现优惠券的展开收起效果。在coupon-list中使用了uni-collapse组件，并将accordion属性设置为false，这样就可以展开多个优惠券了。在uni-collapse-item中，将title属性设置为优惠券的标题，将key属性设置为索引值，然后在slot="content"中放置具体的优惠券内容。在优惠券内容中，使用了flex布局和一些样式来实现美团小程序优惠券的展示效果。