[抖火客户端]
This commit is contained in:
237
pages/user/coupon.vue
Normal file
237
pages/user/coupon.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="tab">
|
||||
<view class="tab-item" :class="{active : status == 'init'}" @click="tabClick('init')">
|
||||
未使用
|
||||
</view>
|
||||
<view class="tab-item" :class="{active : status == 'used'}" @click="tabClick('used')">
|
||||
已使用
|
||||
</view>
|
||||
<view class="tab-item" :class="{active : status == 'overdue'}" @click="tabClick('overdue')">
|
||||
已过期
|
||||
</view>
|
||||
</view>
|
||||
<view class="list" v-if="listsArr.length > 0">
|
||||
<view class="list-item" :class="{active : status != 'init'}" v-for="(item, index) in listsArr" :key="index">
|
||||
<view class="list-number" :class="{active : status != 'init'}">
|
||||
{{item.price}}<text>元</text>
|
||||
</view>
|
||||
<view class="list-text">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="list-btn">
|
||||
<image v-if="status == 'init'" class="list-img" src="@/static/imgs/couponImg.png" mode="heightFix"></image>
|
||||
<view class="list-see">
|
||||
<view class="list-go" :class="{active : status != 'init'}">
|
||||
<text @click="$Router.push({name: 'indexIntroduce'})" v-if="status == 'init'">去使用</text>
|
||||
<text v-else-if="status == 'used'">已使用</text>
|
||||
<text v-else>已过期</text>
|
||||
</view>
|
||||
<view class="list-time" :class="{active : status != 'init'}">
|
||||
<block v-if="status == 'overdue'">已过期</block>
|
||||
<block v-else>{{item.time.end_at}} 过期</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="list-item active">
|
||||
<view class="list-number active">
|
||||
9.9<text>元</text>
|
||||
</view>
|
||||
<view class="list-text active">
|
||||
抵扣券
|
||||
</view>
|
||||
<view class="list-btn">
|
||||
<view class="list-see">
|
||||
<view class="list-go active">
|
||||
已使用
|
||||
</view>
|
||||
<view class="list-time active">
|
||||
2022-11-10过期
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="pack-center pages-hint" v-else>
|
||||
<image src="/static/imgs/Noevaluate.png"></image>
|
||||
<view>暂无优惠券</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { coupons } from '@/apis/interfaces/user'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
status : 'init', // tab状态 init 未使用 used 已使用 overdue 已过期
|
||||
listsArr: [], // 列表
|
||||
};
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 获取基础信息
|
||||
this.couponsInfo();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 基础信息
|
||||
couponsInfo() {
|
||||
coupons({
|
||||
type : 2,
|
||||
status : this.status
|
||||
}).then(res => {
|
||||
this.listsArr = res.lists
|
||||
}).catch( err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// tab选择
|
||||
tabClick(e) {
|
||||
this.status = e
|
||||
// 获取基础信息
|
||||
this.couponsInfo();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
background-color: #f7f9fa;
|
||||
// height: calc(100vh - 44px);
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.tab {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 44px;
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
.tab-item {
|
||||
flex: 2;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
font-size: $title-size-lg;
|
||||
color: #80818e;
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: calc(50% - 20rpx);
|
||||
bottom: 0;
|
||||
background-color: transparent;
|
||||
width: 40rpx;
|
||||
height: 6rpx;
|
||||
}
|
||||
&.active {
|
||||
color: #0e1a2f;
|
||||
}
|
||||
&.active::after {
|
||||
background-color: #0e1a2f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
margin-top: 90rpx;
|
||||
.list-item {
|
||||
box-sizing: border-box;
|
||||
background-color: #ff4835;
|
||||
color: #ffffff;
|
||||
border-radius: $radius;
|
||||
margin-bottom: $margin;
|
||||
display: flex;
|
||||
height: 180rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
&.active {
|
||||
background-color: #fceff1;
|
||||
color: #eb4e3d;
|
||||
}
|
||||
.list-number {
|
||||
font-size: $title-size + 20;
|
||||
width: 200rpx;
|
||||
line-height: 180rpx;
|
||||
text-align: center;
|
||||
border-right: 2rpx dashed #f09789;
|
||||
text {
|
||||
font-size: $title-size-m;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
&.active {
|
||||
border-color: #f3b0a8;
|
||||
}
|
||||
}
|
||||
.list-text {
|
||||
line-height: 180rpx;
|
||||
font-weight: 600;
|
||||
width: calc(100% - 440rpx);
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
&.active {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
.list-btn {
|
||||
text-align: center;
|
||||
width: 320rpx;
|
||||
height: 180rpx;
|
||||
position: relative;
|
||||
.list-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.list-see {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
padding-left: $padding;
|
||||
box-sizing: border-box;
|
||||
.list-go {
|
||||
background-color: #ffffff;
|
||||
border-radius: $radius-m;
|
||||
color: #ff4835;
|
||||
display: inline-block;
|
||||
font-size: $title-size-m;
|
||||
font-weight: 600;
|
||||
line-height: 58rpx;
|
||||
padding: 0 $padding;
|
||||
margin: $margin + 10 0 15rpx;
|
||||
border: 2rpx solid #e54d37;
|
||||
&.active {
|
||||
border-color: #c9c9c9;
|
||||
color: #c9c9c9;
|
||||
}
|
||||
}
|
||||
.list-time {
|
||||
color: #f4c745;
|
||||
font-size: $title-size-sm;
|
||||
&.active {
|
||||
color: #aca9aa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user