183 lines
4.0 KiB
Vue
183 lines
4.0 KiB
Vue
<template>
|
||
<view class="coupon-page">
|
||
<NavCom title="我的优惠券"></NavCom>
|
||
<view class="tab">
|
||
<view class="tab-item" :class="{'active':tabIndex === index}" v-for="(item,index) in tabList" :key="index" @click="tabCk(index)">
|
||
{{item.label}}
|
||
<image src="@/static/mine/tab_bottom.png" mode="" class="tab-img" v-if="tabIndex === index"></image>
|
||
</view>
|
||
</view>
|
||
<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation @scrolltolower="scrolltolower">
|
||
<view v-if="list.length === 0" style="padding-top: 200rpx;">
|
||
<empty></empty>
|
||
</view>
|
||
<view class="list" v-for="(item,index) in list" :key="index" :style="{backgroundImage:`url(${imgList[tabIndex]})`}">
|
||
<view class="detail">
|
||
<view class="header">
|
||
<view class="name">
|
||
购物满减券
|
||
</view>
|
||
<view class="time">有效期至2024-05-05</view>
|
||
</view>
|
||
<view class="type">
|
||
新人<text class="price">10元</text>大礼包
|
||
</view>
|
||
<view class="tip">新人入门大礼包，满30减10元，申购指定商品可用</view>
|
||
</view>
|
||
<view class="status">{{tabList[tabIndex].label}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="footer" @click="moreCoupon">更多优惠券</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
import NavCom from '@/pages/components/nav.vue'
|
||
export default{
|
||
mixins: [myMixins],
|
||
data(){
|
||
return{
|
||
tabList:[
|
||
{label:"未使用",value:""},
|
||
{label:"已使用",value:""},
|
||
{label:"已失效",value:""},
|
||
],
|
||
tabIndex:0,
|
||
type:'',
|
||
list:[
|
||
{},{},{},{},{},{}
|
||
],
|
||
imgList:{
|
||
"0":'../../static/sign/qsy.png',
|
||
"1":'../../static/sign/ysy.png',
|
||
"2":'../../static/sign/ysx.png'
|
||
}
|
||
}
|
||
},
|
||
components:{NavCom},
|
||
mounted() {
|
||
|
||
},
|
||
methods:{
|
||
tabCk(index){
|
||
this.tabIndex = index
|
||
},
|
||
moreCoupon(){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/moreCoupon`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page{
|
||
background-image: url('@/static/index/bg.png');
|
||
background-size: 100%;
|
||
}
|
||
.coupon-page{
|
||
.tab{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 130rpx 22rpx 30rpx 22rpx;
|
||
.tab-item{
|
||
width: 250rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
color: #999;
|
||
position: relative;
|
||
// border: 1px solid red;
|
||
.tab-img{
|
||
position: absolute;
|
||
left: 70rpx;
|
||
bottom: 6rpx;
|
||
width: 77rpx;
|
||
height: 11rpx;
|
||
}
|
||
}
|
||
.active{
|
||
color: #000000;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.scroll-list-view{
|
||
height: calc(100vh - 200rpx);
|
||
box-sizing: border-box;
|
||
padding-bottom: 160rpx;
|
||
.list{
|
||
width: 726rpx;
|
||
height: 274rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
.detail{
|
||
width: 644rpx;
|
||
.header{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 76rpx 0 89rpx;
|
||
padding-top: 32rpx;
|
||
.name{
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
.time{
|
||
font-weight: 300;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
.type{
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #333333;
|
||
margin-top: 33rpx;
|
||
margin-left: 52rpx;
|
||
.price{
|
||
color: #F05248;
|
||
}
|
||
}
|
||
.tip{
|
||
margin-top: 21rpx;
|
||
margin-left: 52rpx;
|
||
font-weight: 300;
|
||
font-size: 24rpx;
|
||
color: #888888;
|
||
}
|
||
}
|
||
.status{
|
||
width: 24rpx;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
height: 274rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-right: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
.footer{
|
||
position: fixed;
|
||
bottom: 76rpx;
|
||
left: 22rpx;
|
||
width: 706rpx;
|
||
height: 88rpx;
|
||
background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
|
||
border-radius: 44rpx;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style> |