Skip to content

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

优惠券优化样式

parent a7ccd44b
Hide whitespace changes
Inline Side-by-side
Showing with 42 additions and 127 deletions
pages/coupon/details/details.vue
View file @ a09db6b0
......@@ -52,47 +52,6 @@
</view>
<view class="cdTiaojianButtom" @click="gouseUrl(g)">立即使用</view>
</view>
<view class="cd_box" v-if="false">
<Text class='cd_name'>
{{g.couponName}}
</Text>
<view style="display: flex;align-items: flex-end;">
<Text style='font-size: 32px;'>{{ g.denomination }} </Text>
<Text style='font-size: 14px;'>{{g.couponsType!=1?'折':""}}</Text>
</view>
<Text class='condition'>
满{{g.useCondition }}可用
</Text>
<view v-if='type==2 && g.IsReceive==0' class="receive" :style="{'background':mainColor}" @click="receive(g.CouponId)">
<Text>
立即领取
</Text>
</view>
<view v-if='type==1 || g.IsReceive==1' class="gouse" @click="gouseUrl(g)">
<Text>
去使用
</Text>
</view>
<view style="width: 100%;border-top: 1px dashed #f5f5f5;margin: 10px 0;"></view>
<Text class='c_name' style='margin-top: 25px;'>有效期</Text>
<Text class='cd_content'>{{g.expirationDate}} 失效</Text>
<!-- <Text class='cd_content' v-if='g.IndateType==1'>领取后{{g.IndateDay}}天内有效</Text>
<Text class='cd_content' v-if='g.IndateType==2'>{{g.StartDate}}-{{g.EndDate}}</Text> -->
<!-- <Text class='cd_content' >{{g.StartDate}}-{{g.EndDate}}</Text> -->
<Text class='c_name' style='margin-top: 1px;'>使用规则</Text>
<Text class='cd_content' v-if='g.UseType==1'>适用类别: <Text v-for="(item, index) in g.ProductList" :key="index">{{item.Relevance}}</Text>
</Text>
<Text class='cd_content' v-if='g.UseType==2'>适用商品: <Text v-for="(item, index) in g.ProductList" :key="index">{{item.Relevance}}</Text>
</Text>
<Text class='cd_content' v-if='g.UseType==3'>适用范围:全场通用</Text>
<Text class='cd_content' v-if='g.UseType==4'>适用方式:当面付</Text>
<Text class='c_name' style='margin-top: 1px;'>使用说明</Text>
<Text class='cd_content'>{{g.Describe}}</Text>
</view>
</view>
</template>
......
pages/coupon/index/index.vue
View file @ a09db6b0
......@@ -29,7 +29,7 @@
<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="couponListBox" :class="[x.couponsUseScope>0?'active'+(x.couponsUseScope-1):'']"
<view class="couponListBox" :class="[x.couponsUseScope>0&&msg.CouponStatus!=3?'active'+x.couponsUseScope:'active0']"
v-for="(x, i) in couponDataList" :key="i">
<view class="item">
<view :style="{'background-image':`url(${x.backGroubd}) `}" class="couponItemLeft">
......@@ -55,7 +55,7 @@
<template v-if="x.lineteamNameStr&&x.lineteamNameStr!=''">适用系列:{{x.lineteamNameStr}}</template>
<template v-if="x.remark&&x.remark!=''">{{x.remark}}</template>
</view>
<view class="coupondLineGo" @click.stop="godetails(x)">去使用</view>
<view class="coupondLineGo" @click.stop="msg.CouponStatus!=3?godetails(x):''">{{msg.CouponStatus!=3?'去使用':'已过期'}}</view>
</view>
<view class="date">{{x.effectDate}}至{{ x.expirationDate }}</view>
</view>
......@@ -131,48 +131,6 @@
nomore: "没有更多了",
},
showBar: true,
lineList: [
{
text: '不限',
id: -1
},
{
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
},
],
CouponsUseScopeName: '不限',
CouponsUseScopeShow: false,
lineImgs: [
......@@ -283,17 +241,22 @@
arrList(res.data.pageData)
this.couponDataList = res.data.pageData;
this.couponDataList.forEach((x,index) => {
if(x.couponsUseScope==1) x.backGroubd = this.lineImgs[0]
if(x.couponsUseScope==2) x.backGroubd = this.lineImgs[1]
if(x.couponsUseScope==3) x.backGroubd = this.lineImgs[2]
if(x.couponsUseScope==4) x.backGroubd = this.lineImgs[3]
if(x.couponsUseScope==5) x.backGroubd = this.lineImgs[4]
if(x.couponsUseScope==6) x.backGroubd = this.lineImgs[5]
if(x.couponsUseScope==7) x.backGroubd = this.lineImgs[6]
if(x.couponsUseScope==8) x.backGroubd = this.lineImgs[7]
if(x.couponsUseScope==9) x.backGroubd = this.lineImgs[8]
if(x.couponsUseScope==10) x.backGroubd = this.lineImgs[0]
if(x.couponsUseScope==11) x.backGroubd = this.lineImgs[1]
if(this.msg.CouponStatus!=3){
if(x.couponsUseScope==1) x.backGroubd = this.lineImgs[0]
if(x.couponsUseScope==2) x.backGroubd = this.lineImgs[1]
if(x.couponsUseScope==3) x.backGroubd = this.lineImgs[2]
if(x.couponsUseScope==4) x.backGroubd = this.lineImgs[3]
if(x.couponsUseScope==5) x.backGroubd = this.lineImgs[4]
if(x.couponsUseScope==6) x.backGroubd = this.lineImgs[5]
if(x.couponsUseScope==7) x.backGroubd = this.lineImgs[6]
if(x.couponsUseScope==8) x.backGroubd = this.lineImgs[7]
if(x.couponsUseScope==9) x.backGroubd = this.lineImgs[0]
if(x.couponsUseScope==10) x.backGroubd = this.lineImgs[1]
if(x.couponsUseScope==11) x.backGroubd = this.lineImgs[2]
}else{
x.backGroubd = this.lineImgs[8]
}
})
this.page_count = res.data.pageCount;
if(this.page_count==1) this.status = 'nomore'
......@@ -309,12 +272,6 @@
this.loading = false;
})
},
getLineImgs(){
let i = 0
if(i<this.lineImgs.length-1) i++
if(i==this.lineImgs.length-1) i = 0
return i
},
lower(e) {
if (this.msg.pageIndex < this.page_count) {
this.msg.pageIndex++;
......@@ -628,51 +585,52 @@
font-size: 24rpx;
font-weight: 100;
}
.couponListBox.active0 .nameType {
color: #c6c6c6;
background: #e1e1e1;
}
.couponListBox.active1 .nameType {
color: rgba(29, 152, 144, 1);
background: rgba(97, 220, 212, .5);
}
.couponListBox.active1 .nameType {
.couponListBox.active2 .nameType {
color: rgba(212, 84, 42, 1);
background: rgba(253, 127, 86, .5);
}
.couponListBox.active2 .nameType {
.couponListBox.active3 .nameType {
color: rgba(60, 103, 160, 1);
background: rgba(106, 168, 249, .5);
}
.couponListBox.active3 .nameType {
.couponListBox.active4 .nameType {
color: rgba(204, 60, 110, 1);
background: rgba(243, 108, 155, .5);
}
.couponListBox.active4 .nameType {
.couponListBox.active5 .nameType {
color: rgba(40, 132, 163, 1);
background: rgba(24, 184, 237, .5);
}
.couponListBox.active5 .nameType {
.couponListBox.active6 .nameType {
color: rgba(184, 163, 19, 1);
background: rgba(233, 235, 51, .5);
}
.couponListBox.active6 .nameType {
.couponListBox.active7 .nameType {
color: rgba(186, 110, 1, 1);
background: rgba(255, 150, 0, .5);
}
.couponListBox.active7 .nameType {
.couponListBox.active8 .nameType {
color: rgba(55, 143, 71, 1);
background: rgba(31, 193, 62, .5);
}
.couponListBox.active8 .nameType {
color: #c6c6c6;
background: #e1e1e1;
}
.couponListBox.active9 .nameType {
color: rgba(29, 152, 144, 1);
background: rgba(97, 220, 212, .5);
......@@ -720,7 +678,7 @@
.coupondLineGo {
position: absolute;
right: 0;
top: 76rpx;
top: 60rpx;
width: 114rpx;
height: 44rpx;
border-radius: 12rpx;
......@@ -729,43 +687,41 @@
text-align: center;
line-height: 44rpx;
}
.couponListBox .coupondLineGo {
background: linear-gradient(133deg, #26C6A5, #61DCD4);
}
.couponListBox.active0 .coupondLineGo {
background: linear-gradient(133deg, #26C6A5, #61DCD4);
background: linear-gradient(133deg, #c6c6c6, #e1e1e1);
}
.couponListBox.active1 .coupondLineGo {
background: linear-gradient(133deg, #FD7F56, #FFC291);
background: linear-gradient(133deg, #26C6A5, #61DCD4);
}
.couponListBox.active2 .coupondLineGo {
background: linear-gradient(133deg, #3C67A0, #88ADDD);
background: linear-gradient(133deg, #FD7F56, #FFC291);
}
.couponListBox.active3 .coupondLineGo {
background: linear-gradient(133deg, #F36C9B, #FEA7C6);
background: linear-gradient(133deg, #3C67A0, #88ADDD);
}
.couponListBox.active4 .coupondLineGo {
background: linear-gradient(133deg, #18B8ED, #89D6EF);
background: linear-gradient(133deg, #F36C9B, #FEA7C6);
}
.couponListBox.active5 .coupondLineGo {
background: linear-gradient(133deg, #EBD333, #EBF38C);
background: linear-gradient(133deg, #18B8ED, #89D6EF);
}
.couponListBox.active6 .coupondLineGo {
background: linear-gradient(133deg, #FF9600, #FFC600);
background: linear-gradient(133deg, #EBD333, #EBF38C);
}
.couponListBox.active7 .coupondLineGo {
background: linear-gradient(133deg, #1FC13E, #5AE19A);
background: linear-gradient(133deg, #FF9600, #FFC600);
}
.couponListBox.active8 .coupondLineGo {
background: linear-gradient(133deg, #c6c6c6, #e1e1e1);
background: linear-gradient(133deg, #1FC13E, #5AE19A);
}
.couponListBox.active9 .coupondLineGo {
......
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