You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
336 lines
7.6 KiB
336 lines
7.6 KiB
<template>
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<view class="view">
|
|
<div class="tab">
|
|
<u-tabs :list="tabList" @change="tabChange" :scrollable="false" :activeStyle="{color: 'var(--base-color)'}" lineColor="var(--base-color)"></u-tabs>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div v-if="currentTab==0">
|
|
<div class="coupon" v-for="(item,index) in data" :key="index">
|
|
<div class="left">
|
|
<div class="quantity">
|
|
<span class="unit">￥</span>
|
|
<span class="number">{{item.number}}</span>
|
|
</div>
|
|
<div class="desc">{{item.desc}}</div>
|
|
</div>
|
|
<div class="lineImg">
|
|
<image src="@/static/line.png" mode=""></image>
|
|
</div>
|
|
<div class="right">
|
|
<div class="btn" @click="showToast">
|
|
去使用
|
|
</div>
|
|
<div class="type">{{item.type}}</div>
|
|
<div class="validity">有效期：{{item.validity}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="currentTab==1">
|
|
<div class="un_coupon" v-for="(item,index) in unableData" :key="index">
|
|
<div class="top">
|
|
<div class="left">
|
|
<div class="quantity">
|
|
<span class="unit">￥</span>
|
|
<span class="number">{{item.number}}</span>
|
|
</div>
|
|
<div class="desc">{{item.desc}}</div>
|
|
</div>
|
|
<div class="lineImg">
|
|
<image src="@/static/line.png" mode=""></image>
|
|
</div>
|
|
<div class="right">
|
|
<div class="type">{{item.type}}</div>
|
|
<div class="validity">有效期：{{item.validity}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">·{{item.reason}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentTab: 1,
|
|
tabList: [{
|
|
name: '可用优惠券'
|
|
},{
|
|
name: '不可用优惠券'
|
|
}],
|
|
data:[{
|
|
number:200,
|
|
desc: '免费抵用券',
|
|
type: '满减劵',
|
|
validity: '2022.12.12-2022.12.22',
|
|
},{
|
|
number:1.5,
|
|
desc: '无使用门槛',
|
|
type: '满减劵',
|
|
validity: '2022.12.12-2022.12.22'
|
|
},{
|
|
number:200,
|
|
desc: '免费抵用券',
|
|
type: '满减劵',
|
|
validity: '2022.12.12-2022.12.22'
|
|
},{
|
|
number:1.5,
|
|
desc: '满100可使用',
|
|
type: '满减劵',
|
|
validity: '2022.12.12-2022.12.22'
|
|
},{
|
|
number:200,
|
|
desc: '免费抵用券',
|
|
type: '满减劵213213123123123123123122312',
|
|
validity: '2022.12.12-2022.12.22'
|
|
},{
|
|
number:1.5,
|
|
desc: '无使用门槛',
|
|
type: '满减劵',
|
|
validity: '2022.12.12-2022.12.22'
|
|
},{
|
|
number:1.5,
|
|
desc: '无使用门槛',
|
|
type: '满减劵',
|
|
validity: '2022.12.12-2022.12.22'
|
|
},{
|
|
number:1.5,
|
|
desc: '无使用门槛',
|
|
type: '满减劵',
|
|
validity: '2022.12.12-2022.12.22'
|
|
},{
|
|
number:1.5,
|
|
desc: '无使用门槛',
|
|
type: '满减劵',
|
|
validity: '2022.12.12-2022.12.22'
|
|
}],
|
|
unableData:[{
|
|
number:1.5,
|
|
desc: '无使用门槛',
|
|
type: '满减劵',
|
|
validity: '2022.12.12-2022.12.22',
|
|
reason: '这里是不可用的原因'
|
|
},{
|
|
number:1.5,
|
|
desc: '无使用门槛',
|
|
type: '满减劵',
|
|
validity: '2022.12.12-2022.12.22',
|
|
reason: '这里是不可用的原因'
|
|
},{
|
|
number:1.5,
|
|
desc: '无使用门槛',
|
|
type: '满减劵',
|
|
validity: '2022.12.12-2022.12.22',
|
|
reason: '这里是不可用的原因'
|
|
}]
|
|
}
|
|
},
|
|
methods: {
|
|
tabChange ({index}) {
|
|
this.currentTab = index
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.view {
|
|
min-height: 100vh;
|
|
background-color: #FFFFFF;
|
|
.tab {
|
|
|
|
}
|
|
.content {
|
|
padding: 32rpx;
|
|
.coupon {
|
|
margin-bottom:32rpx;
|
|
height: 176rpx;
|
|
background: url("@/static/coupon.png");
|
|
background-size: cover;
|
|
display: flex;
|
|
.left{
|
|
width: 226rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding-top: 30rpx;
|
|
padding-bottom: 48rpx;
|
|
.quantity {
|
|
box-sizing: border-box;
|
|
.unit{
|
|
font-size: 32rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #E5831E;
|
|
}
|
|
.number {
|
|
font-size: 64rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #F08433;
|
|
line-height: 62rpx;
|
|
}
|
|
}
|
|
.desc {
|
|
font-size: 22rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: rgba(240,132,51,0.78);
|
|
|
|
|
|
}
|
|
}
|
|
.lineImg {
|
|
position: relative;
|
|
top: 30rpx;
|
|
left: 1rpx;
|
|
width: 20rpx;
|
|
image {
|
|
width: 2rpx;
|
|
height: 114rpx;
|
|
}
|
|
}
|
|
.right {
|
|
padding: 35rpx 0 35rpx 25rpx;
|
|
position: relative;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.btn {
|
|
position: absolute;
|
|
right: 38rpx;
|
|
|
|
width: 144rpx;
|
|
height: 48rpx;
|
|
background: linear-gradient(133deg, #FB6677 0%, #F33B50 100%);
|
|
border-radius: 28rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
|
|
transform: translate(0,10%);
|
|
}
|
|
.type {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space:nowrap;
|
|
word-break: break-all;
|
|
max-width: 230rpx;
|
|
font-size: 36rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #F08433;
|
|
}
|
|
.validity {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: rgba(240,132,51,0.78);
|
|
}
|
|
}
|
|
}
|
|
.un_coupon {
|
|
margin-bottom:32rpx;
|
|
height: 250rpx;
|
|
background: url("@/static/un_coupon.png");
|
|
background-size: cover;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.top {
|
|
display: flex;
|
|
.left{
|
|
width: 226rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding-top: 30rpx;
|
|
padding-bottom: 38rpx;
|
|
.quantity {
|
|
box-sizing: border-box;
|
|
.unit{
|
|
font-size: 32rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #999999;
|
|
}
|
|
.number {
|
|
font-size: 64rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #999999;
|
|
line-height: 62rpx;
|
|
}
|
|
}
|
|
.desc {
|
|
font-size: 22rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
opacity: 0.78;
|
|
|
|
|
|
}
|
|
}
|
|
.lineImg {
|
|
position: relative;
|
|
top: 30rpx;
|
|
left: 1rpx;
|
|
width: 20rpx;
|
|
image {
|
|
width: 2rpx;
|
|
height: 114rpx;
|
|
}
|
|
}
|
|
.right {
|
|
padding: 35rpx 0 35rpx 25rpx;
|
|
position: relative;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.type {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space:nowrap;
|
|
word-break: break-all;
|
|
max-width: 230rpx;
|
|
font-size: 36rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
}
|
|
.validity {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
opacity: 0.78;
|
|
}
|
|
}
|
|
}
|
|
.bottom {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
padding-left: 52rpx;
|
|
padding-top: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|