140 lines
3.0 KiB
Vue
140 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="content">
|
||
|
|
<view class="pricecontent"><text class="price">{{price}}</text><text class="price1">元</text></view>
|
||
|
|
<view class="couponinfo">
|
||
|
|
<view class="title"><text>{{data.prize_name}}</text></view>
|
||
|
|
<view class="extime">
|
||
|
|
<text>到期时间:</text>
|
||
|
|
<text style="margin-left: 10rpx;">{{data.create_time}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="btn">
|
||
|
|
<u-button v-if="data.state == 1" shape='circle' size="small"
|
||
|
|
color="linear-gradient(90deg, #FF2D01, #FF6729)" type="primary" @click="openCouponLink" text="兑换"></u-button>
|
||
|
|
<u-button :disabled="true" v-else-if="data.state == 2" shape='circle' size="small" color="#B2B2B2" type="primary"
|
||
|
|
text="已兑换"></u-button>
|
||
|
|
<u-button :disabled="true" v-else shape='circle' size="small" color="#B2B2B2" type="primary"
|
||
|
|
text="已过期"></u-button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
data: Object
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
openCouponLink(){
|
||
|
|
window.location.href = this.data.voucher_link
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
price:{
|
||
|
|
get(){
|
||
|
|
if(this.data.product.price){
|
||
|
|
return Math.floor(this.data.product.price)
|
||
|
|
}else return 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.content {
|
||
|
|
width: 638rpx;
|
||
|
|
height: 150rpx;
|
||
|
|
background: linear-gradient(90deg, #FEEBE3 26%, #FEFEFE 100%);
|
||
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
|
|
background-image: url('@/static/images/couponitem.png');
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pricecontent{
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: flex-end;
|
||
|
|
width: 160rpx;
|
||
|
|
/* background-color: rebeccapurple; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.price {
|
||
|
|
/* font-family: D-DIN, D-DIN; */
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 48rpx;
|
||
|
|
color: #FF3607;
|
||
|
|
line-height: 72rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
margin-left: 36rpx;
|
||
|
|
/* background-color: rebeccapurple; */
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.price1 {
|
||
|
|
/* font-family: Source Han Sans, Source Han Sans; */
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 28rpx;
|
||
|
|
line-height: 64rpx;
|
||
|
|
color: #FF3607;
|
||
|
|
text-align: center;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
margin-left: 2rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
/* font-family: D-DIN, D-DIN; */
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #333333;
|
||
|
|
line-height: 24rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.extime {
|
||
|
|
/* font-family: Source Han Sans, Source Han Sans; */
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: #808080;
|
||
|
|
line-height: 24rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.couponinfo {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 22rpx;
|
||
|
|
height: 100%;
|
||
|
|
padding-top: 12rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
padding-right: 34rpx;
|
||
|
|
width: 128rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
height: 48rpx;
|
||
|
|
}
|
||
|
|
</style>
|