149 lines
3.3 KiB
Vue
149 lines
3.3 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="body">
|
|||
|
|
<view class="top-view">
|
|||
|
|
<view class="title">{{coupon.title}}</view>
|
|||
|
|
<view class="price"><text>￥</text>{{coupon.price | unitPrice}}</view>
|
|||
|
|
<view class="text">满{{coupon.consumeThreshold}}元可用</view>
|
|||
|
|
<view class="bg-quan">
|
|||
|
|
券
|
|||
|
|
</view>
|
|||
|
|
<view class="jiao-1" :class="{'used-color':coupon.used_status!=0}">
|
|||
|
|
<text class="text-1">{{coupon.used_status == 0?'新到':coupon.used_status_text}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bottom-view">
|
|||
|
|
<view class="text">• 使用平台：{{
|
|||
|
|
coupon.scopeType == 'ALL' && coupon.id == 'platform'
|
|||
|
|
? "全平台"
|
|||
|
|
: coupon.scopeType == "PORTION_CATEGORY"
|
|||
|
|
? "仅限品类"
|
|||
|
|
: coupon.storeName == 'platform' ? '全平台' :coupon.storeName+''
|
|||
|
|
}}使用</view>
|
|||
|
|
<view class="text">• 有效期至：{{coupon.endTime}}</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<button class="btn" @click="gostorePage" v-if="coupon.used_status==0">立即使用</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
customStyle: {
|
|||
|
|
backgroundColor: this.lightColor,
|
|||
|
|
},
|
|||
|
|
coupon: {},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.coupon = JSON.parse(decodeURIComponent(option.item));
|
|||
|
|
console.log(this.coupon);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
gostorePage() {
|
|||
|
|
let id = this.coupon.storeId;
|
|||
|
|
if (id) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/product/shopPage?id=${id}`,
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: "/pages/tabbar/home/index",
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page,
|
|||
|
|
.content {
|
|||
|
|
// background: $main-color;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.body {
|
|||
|
|
.top-view {
|
|||
|
|
margin: 20rpx 20rpx 0;
|
|||
|
|
height: 290rpx;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
316deg,
|
|||
|
|
$light-color 2%,
|
|||
|
|
$aider-light-color 98%
|
|||
|
|
);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 60rpx 0;
|
|||
|
|
.title {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #ffee80;
|
|||
|
|
}
|
|||
|
|
.price {
|
|||
|
|
font-size: 60rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #ffffff;
|
|||
|
|
text {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.bg-quan {
|
|||
|
|
width: 244rpx;
|
|||
|
|
height: 244rpx;
|
|||
|
|
border: 6rpx solid #ffffff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
opacity: 0.3;
|
|||
|
|
color: #ffffff;
|
|||
|
|
text-align: center;
|
|||
|
|
padding-top: 30rpx;
|
|||
|
|
font-size: 130rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
right: -54rpx;
|
|||
|
|
bottom: -54rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.jiao-1 {
|
|||
|
|
background-color: #ffc71c;
|
|||
|
|
width: 400rpx;
|
|||
|
|
transform: rotate(45deg);
|
|||
|
|
text-align: center;
|
|||
|
|
position: absolute;
|
|||
|
|
right: -130rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
top: 0;
|
|||
|
|
.text-1 {
|
|||
|
|
margin-left: 68rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.used-color {
|
|||
|
|
background-color: #ffc71c;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.bottom-view {
|
|||
|
|
border-radius: 0 0 20rpx 20rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
height: 580rpx;
|
|||
|
|
padding: 50rpx 50rpx;
|
|||
|
|
margin: 0 30rpx;
|
|||
|
|
line-height: 2em;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
margin: 140rpx 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|