Skip to content

J
jz_Travel
Commit c06a3b61 authored by youjie's avatar youjie
Browse files
Options

优惠券列表样式

parent 411a2e97
Hide whitespace changes
Inline Side-by-side
Showing with 353 additions and 37 deletions
pages/coupon/index/index.vue
View file @ c06a3b61
<template>
<view class="couponStyle" :style="{ height: contentHeight }">
<u-tabs :list="list" :is-scroll="false" :current="currentIndex" @change="change" :active-color="mainColor" :show-bar="showBar"
height="100"></u-tabs>
<view class="couponStyle" :style="{ height: contentHeight }" @click="lineShow=false">
<!-- <u-tabs :list="list" :is-scroll="false" :current="currentIndex" @change="change" :active-color="mainColor" :show-bar="showBar"
height="100"></u-tabs> -->
<view class="couponHeaderBox">
<view class="couponHeader">
<view class="couponHeadLeft">
<view class="couponHeadLText" @click.stop="lineShow=!lineShow">
<text class="couponHeadLTextL">{{ lineName }}</text>
<view><u-icon :name="!lineShow?'arrow-down':'arrow-up'" size="24"></u-icon></view>
</view>
</view>
<view class="couponHeadRight">
<text v-for="(item,index) in list" :key="index"
:class="[msg.CouponType==item.id?'active':'']" @click.stop="msg.CouponType=item.id,ResetQuery()">{{ item.name }}</text>
</view>
</view>
<view class="couponLine" v-if="lineShow">
<view class="couponLineT" v-for="(item,index) in lineList"
>
<view class="couponLineAllName" :class="[msg.lineId==item.id?'active':'']"
@click.stop="msg.lineId=item.id,lineName=item.text">
<text>{{ item.text }}</text>
</view>
</view>
</view>
</view>
<u-empty v-if="couponDataList.length == 0 && !loading" text="暂无相关优惠券" mode="coupon"></u-empty>
<view v-if="couponDataList.length > 0" style=" height: calc(100vh - 50px); width: calc(100vw); overflow: hidden;padding-bottom: 50px;">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
<view class="couponList">
<view class="item" v-for="(x, i) in couponDataList" :key="i" @click="godetails(x)">
<view :class="{'ticket':msg.CouponStatus == 1,'ticket2':msg.CouponStatus != 1}">
<view class="miane">
<view class="money">
<text class="small" style="font-family: microsoft yahei ui light;" v-if="x.couponsType == 1">￥</text>
<Text style="font-size: 44px;font-family: nav-font;">{{ Number(x.denomination) }}
</Text>
<Text class="small" style="font-family: microsoft yahei ui light;">{{ x.couponsType != 1? "折" : "" }}</Text>
<view class="couponListBox"
:class="{
'active0': x.couponsType,'active1': '',
'active2': '','active3': '',
'active4': '','active5': '',
'active6': '','active7': '',
'active8': '',
}"
v-for="(x, i) in couponDataList" :key="i">
<view class="item">
<view
:style="{'background-image':`url(${x.backGroubd}) `}"
class="couponItemLeft"
>
<view class="miane">
<view class="money">
<text class="small" style="font-family: microsoft yahei ui light;margin-right: 5rpx;" v-if="x.couponsType == 1">￥</text>
<Text style="font-size: 40rpx;font-family: nav-font;">{{ Number(x.denomination) }}
</Text>
<Text class="small" style="font-family: microsoft yahei ui light;margin-left: 5rpx;">{{ x.couponsType != 1? "折" : "" }}</Text>
</view>
<view class="tiaojian">抵扣券</view>
</view>
<view class="tiaojian">满{{ Number(x.useCondition) }}元可用</view>
</view>
<view style="width: 10px;height: 10px; border-radius: 5px;background: #f3f4f6; position: absolute; right: -5px; top: -5px;"></view>
<view style=" width: 10px; height: 10px; border-radius: 5px; background: #f3f4f6; position: absolute; right: -5px; bottom: -5px; "></view>
</view>
<view class="detail">
<view class="coupond">
<view class="name" style="font-family:'microsoft yahei ui light';">{{ x.couponName }}</view>
<view class="date">{{ x.expirationDate }} 失效</view>
<view class="detail">
<view class="coupond">
<view class="name" style="font-family:'microsoft yahei ui light';">
<view class="nameText">{{ x.couponName }}</view>
<view class="nameType">跟团游</view>
</view>
<view class="coupondLineTb">
<view class="coupondLineTbt">
适用蓝梦系列适用蓝梦系列适用蓝梦系列适用蓝梦系列适用蓝梦系列
</view>
<view class="coupondLineGo" @click.stop="godetails(x)">去使用</view>
</view>
<view class="date">{{ x.expirationDate }}</view>
</view>
</view>
</view>
</view>
......@@ -56,13 +100,20 @@
showAuth: false,
U: {},
list: [{
name: "未使用"
name: "全部",
id: 0,
},
{
name: "已使用"
name: "折扣券",
id: 1,
},
{
name: "已过期"
name: "抵扣券",
id: 2,
},
{
name: "已过期",
id: 3,
}
],
mainColor: "",
......@@ -73,6 +124,8 @@
"pageSize": 8,
"userId": 15625, //CustomerAccountId
"CouponStatus": 1, // 优惠券状态 1未使用 2已使用 3已过期
"CouponType": 0,//优惠券类型
"lineId": 0,//线路
},
page_count: 1,
couponDataList: [],
......@@ -84,6 +137,57 @@
nomore: "没有更多了",
},
showBar: true,
lineList:[
{
text: '通用',
id: 0
},
{
text: '跟团游',
id: 1
},
{
text: '自由行',
id: 2
},
{
text: '景点',
id: 3
},
{
text: '当地游',
id: 4
},
{
text: '定制游',
id: 5
},
{
text: '美食',
id: 6
},
{
text: '门票',
id: 7
},
{
text: '签证',
id: 8
},
],
lineName: '通用',
lineShow: false,
lineImgs:[
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322574781584.png',//跟团游
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322566159036.png',//自由行
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322566207695.png',//门票
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726323205591893.png',//当地游
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726326034522587.png',//定制游
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322567374491.png',//签证
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322567423518.png',//机票
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322570001132.png',//美食1
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322569972025.png',//美食2
]
};
},
created() {
......@@ -112,6 +216,11 @@
this.init()
},
methods: {
ResetQuery(){
this.couponDataList = []
this.msg.pageIndex=1
this.init()
},
change(index) {
this.currentIndex = index;
this.msg.CouponStatus = index + 1;
......@@ -125,7 +234,16 @@
this.apipost("coupon_post_GetUserCanUseCouponPageList", this.msg, (res) => {
this.loading = false;
if (res.resultCode == 1) {
let arrList = function(list){
list.forEach(x=>{
x.backGroubd = ''
})
}
arrList(res.data.pageData)
this.couponDataList = res.data.pageData;
this.couponDataList.forEach(x=>{
x.backGroubd = this.lineImgs[0]
})
this.page_count = res.data.pageCount;
console.log("this.couponDataList", this.couponDataList)
}
......@@ -201,13 +319,13 @@
.couponStyle .couponList {
width: 100%;
padding: 0 30rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.couponStyle .couponitem {
width: 94%;
display: flex;
align-items: center;
height: 180rpx;
......@@ -237,19 +355,13 @@
.couponStyle .item {
display: flex;
margin-top: 10px;
align-items: flex-start;
background: #fff;
width: 94%;
border-radius: 12rpx;
overflow: hidden;
}
.couponStyle .item .ticket {
position: relative;
background-image: linear-gradient(to bottom right,
rgb(117, 174, 246),
rgb(56, 106, 244));
width: 125px;
height: 100px;
display: flex;
......@@ -266,28 +378,26 @@
align-items: center;
color: #fff;
}
.couponStyle .item .miane .money {
font-family: "oswald";
font-weight: bold;
size: 64px;
width: 125px;
text-align: center;
}
.couponStyle .item .miane .money .small {
font-size: 20px;
font-size: 12px;
font-weight: 100;
}
.couponStyle .item .miane .tiaojian {
font-size: 14px;
width: 125px;
font-size: 24rpx;
text-align: center;
margin-top: 2px;
}
.couponStyle .item .detail {
width: 100%;
height: 100px;
background: #fff;
padding: 10px;
display: flex;
......@@ -301,11 +411,12 @@
}
.couponStyle .item .detail .coupond .name {
font-size: 16px;
font-size: 28rpx;
font-weight: 600;
color: #000;
display: flex;
flex-wrap: nowrap;
}
.couponStyle .item .detail .coupond .date {
font-family: "23";
margin-top: 5px;
......@@ -322,4 +433,209 @@
.couponStyle .item .detail .chosen {
width: 20px;
}
.couponHeaderBox{
background: #fff;
position: relative;
}
.couponHeader{
}
.couponHeader{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}
.couponHeadLeft{
flex-shrink: 0;
}
.couponHeadLText{
display: flex;
align-items: center;
flex: 1;
padding-left: 43rpx;
border-right: 1rpx solid rgba(207, 207, 207, .4);
}
.couponHeadLTextL{
margin-right: 42rpx;
font-size: 28rpx;
}
.couponHeadLText view{
flex-shrink: 0;
margin-right: 25rpx;
}
.couponHeadLAuto{
flex-shrink: 0;
width: 2px;
background: rgba(207, 207, 207, 1);
}
.couponLine{
width: 100%;
position: absolute;
top: 75rpx;
flex: 1;
z-index: 2;
background: #fff;
}
.couponHeadRight{
display: flex;
justify-content: space-between;
flex: 1;
}
.couponHeadRight text{
display: inline-block;
padding: 0 31rpx;
font-size: 28rpx;
white-space: nowrap;
}
.couponHeadRight text.active{
color: rgba(238, 68, 84, 1);
}
.couponLine{
display: flex;
flex-wrap: wrap;
padding: 40rpx 17rpx 10rpx 17rpx;
border-top: 1rpx solid rgba(207, 207, 207, .4);
}
.couponLineT{
padding: 0 21rpx;
}
.couponLineAllName{
width: 142rpx;
padding: 18rpx 0;
border-radius: 10rpx;
background: #EEEEEE;
margin-bottom: 30rpx;
text-align: center;
font-size: 28rpx;
}
.couponLineAllName.active{
background: rgba(238, 68, 84, .2);
color: #EE4454;
}
.couponListBox{
margin-top: 30rpx;
width: 100%;
padding: 24rpx 28rpx;
background: #fff;
border-radius: 20rpx;
}
.couponItemLeft{
width: 146rpx;
height: 143rpx;
padding: 0 36rpx;
background: no-repeat;
background-size: 100% 100%;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.couponStyle .item .detail .coupond .nameText{
width: calc(100%-48rpx);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.couponStyle .item .detail .coupond .nameType {
flex-shrink: 0;
margin-left: 14rpx;
border-radius: 4rpx;
padding: 5rpx 12rpx;
font-size: 24rpx;
font-weight: 100;
}
.couponListBox.active0 .nameType{
color: rgba(29, 152, 144, 1);
background: rgba(97, 220, 212, 1);
}
.couponListBox.active1 .nameType{
color: rgba(212, 84, 42, 1);
background: rgba(253, 127, 86, 1);
}
.couponListBox.active2 .nameType{
color: rgba(60, 103, 160, 1);
background: rgba(106, 168, 249, 1);
}
.couponListBox.active3 .nameType{
color: rgba(204, 60, 110, 1);
background: rgba(243, 108, 155, 1);
}
.couponListBox.active4 .nameType{
color: rgba(40, 132, 163, 1);
background: rgba(24, 184, 237, 1);
}
.couponListBox.active5 .nameType{
color: rgba(184, 163, 19, 1);
background: rgba(233, 235, 51, 1);
}
.couponListBox.active6 .nameType{
color: rgba(186, 110, 1, 1);
background: rgba(255, 150, 0, 1);
}
.couponListBox.active7 .nameType{
color: rgba(55, 143, 71, 1);
background: rgba(31, 193, 62, 1);
}
.couponListBox.active8 .nameType{
color: #c6c6c6;
background: #e1e1e1;
}
.coupondLineTb{
position: relative;
}
.coupondLineTbt{
height: 56rpx;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 22rpx;
font-weight: 400;
margin-top: 14rpx;
line-height: 28rpx;
color: #666;
}
.coupondLineGo{
position: absolute;
right: 0;
top: 56rpx;
width: 114rpx;
height: 44rpx;
border-radius: 12rpx;
color: #fff;
font-size: 22rpx;
text-align: center;
line-height: 44rpx;
}
.couponListBox.active0 .coupondLineGo{
background: linear-gradient(133deg, #26C6A5, #61DCD4);
}
.couponListBox.active1 .coupondLineGo{
background: linear-gradient(133deg, #FD7F56, #FFC291);
}
.couponListBox.active2 .coupondLineGo{
background: linear-gradient(133deg, #3C67A0, #88ADDD);
}
.couponListBox.active3 .coupondLineGo{
background: linear-gradient(133deg, #F36C9B, #FEA7C6);
}
.couponListBox.active4 .coupondLineGo{
background: linear-gradient(133deg, #18B8ED, #89D6EF);
}
.couponListBox.active5 .coupondLineGo{
background: linear-gradient(133deg, #EBD333, #EBF38C);
}
.couponListBox.active6 .coupondLineGo{
background: linear-gradient(133deg, #FF9600, #FFC600);
}
.couponListBox.active7 .coupondLineGo{
background: linear-gradient(133deg, #1FC13E, #5AE19A);
}
.couponListBox.active8 .coupondLineGo{
background: linear-gradient(133deg, #c6c6c6, #e1e1e1);
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment