<template>
|
<view>
|
<view class="bg-fff u-br-20 box">
|
<image src="/static/bind-card-modal.png" class="top-bg"></image>
|
<view class="title">绑卡成功</view>
|
<view class="u-flex u-row-center u-m-t-40 u-m-b-30">
|
<image class="title-bg" src="/static/title-left.png" mode=""></image>
|
<view class="title-txt">已获<text>{{couponList.length}}</text>张优惠券</view>
|
<image class="title-bg" src="/static/title-right.png" mode=""></image>
|
</view>
|
<view v-for="(item,i) in couponList" :key="i" class="coupon">
|
<view class="num-box">
|
<view v-if="item.discount_type==1"><text class="unit">￥</text><text class="money">{{item.discount / 100}}</text></view>
|
<view v-else><text class="money">{{item.item.discount}}</text><text class="unit">折</text></view>
|
<view v-if="item.threshold == 0" class="cont">无门槛</view>
|
<view v-else class="cont">满{{item.threshold_value / 100}}元使用</view>
|
</view>
|
<view class="info-box">
|
<view class="coupon-name">{{item.name}}</view>
|
<view class="coupon-date">有效期至：{{$u.timeFormat(item.out_time, 'yyyy-mm-dd hh:MM')}}</view>
|
</view>
|
</view>
|
<navigator open-type="navigateBack" class="btn">去使用</navigator>
|
</view>
|
<!-- <image @click="$emit('close')" class="close" src="/static/close-icon.png" mode=""></image> -->
|
</view>
|
|
</template>
|
|
<script>
|
export default {
|
name: "bind-card-activity",
|
props:{
|
couponList:{
|
type:Array,
|
default: []
|
}
|
},
|
data() {
|
return {
|
|
};
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
background-image: linear-gradient(180deg, rgba(254, 254, 252, 1) 0%, rgba(253, 242, 225, 1) 100%);
|
width: 600rpx;
|
padding-bottom: 35rpx;
|
}
|
|
.top-bg {
|
width: 628rpx;
|
height: 385rpx;
|
position: absolute;
|
top: -225rpx;
|
left: -16rpx;
|
}
|
|
.title {
|
font-size: 36rpx;
|
color: #C6774B;
|
font-weight: bold;
|
width: 337rpx;
|
height: 76rpx;
|
background-image: url(~@/static/bind-card-title.png);
|
background-size: contain;
|
text-align: center;
|
line-height: 76rpx;
|
position: relative;
|
left: 141.5rpx;
|
}
|
|
.title-bg {
|
width: 131rpx;
|
height: 21rpx;
|
}
|
|
.title-txt {
|
font-size: 28rpx;
|
color: #B36C44;
|
}
|
|
.title-txt text {
|
color: #D31F28;
|
}
|
|
.coupon {
|
width: 508rpx;
|
height: 145rpx;
|
background-image: url(~@/static/coupon-bg2.png);
|
background-size: 100% 100%;
|
margin: 0 auto 10rpx;
|
display: flex;
|
}
|
|
.num-box {
|
width: 140rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.unit {
|
font-size: 24rpx;
|
font-weight: bold;
|
color: #D31F28;
|
}
|
|
.money {
|
font-size: 50rpx;
|
font-weight: bold;
|
color: #D31F28;
|
}
|
|
.cont {
|
font-size: 20rpx;
|
color: #D31F28;
|
}
|
|
.info-box {
|
flex: 1;
|
padding: 0 15rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
|
.coupon-name {
|
font-size: 24rpx;
|
color: #333333;
|
}
|
|
.coupon-date {
|
margin-top: 10rpx;
|
font-size: 20rpx;
|
color: #999;
|
}
|
|
.btn {
|
width: 476rpx;
|
height: 88rpx;
|
border-radius: 44rpx;
|
background-color: rgba(238, 68, 82, 1);
|
margin: 30rpx auto 0;
|
font-size: 36rpx;
|
color: #fff;
|
font-weight: bold;
|
line-height: 88rpx;
|
text-align: center;
|
}
|
.close{
|
display: block;
|
width: 64rpx;
|
height: 64rpx;
|
margin: 30rpx auto 0;
|
}
|
</style>
|
