Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优惠券优化

master
Enzo 4 years ago
parent
a35a812982
commit
3564c7c1f4
1 changed files with 177 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 204
      pages/coupon/index/index.vue

204
pages/coupon/index/index.vue
View File

@ -4,51 +4,201 @@
<view class="special_tab">
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
</view>
<view class="coupon-wrap">
<view class="coupon-card lf-m-b-30" :class="{'invalid-bg': i == 2}" v-for="i of 3">
<view class="coupon-circle-top">
<view class="coupon-circle1"></view>
</view>
<view class="coupon-circle-bottom">
<view class="coupon-circle1"></view>
</view>
<view class="coupon-radius">
<view class="coupon-left">
<view class="lf-font-36 lf-color-white" style="line-height: 1;">
<text>￥</text>
<text class="lf-font-70 lf-font-bold">200</text>
<swiper :style="{height: autoHeight}" :current="current" @change="swiperChange">
<swiper-item v-for="(tab, tabIndex) in tab_list" :key="tabIndex">
<scroll-view :style="{height: autoHeight}" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher"
@scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
<view class="coupon-wrap">
<view class="coupon-card lf-m-b-30" :class="{'invalid-bg': item.ifpast == true}" v-for="(item, index) in tab.list" :key="index">
<view class="coupon-circle-top">
<view class="coupon-circle1"></view>
</view>
<view class="coupon-circle-bottom">
<view class="coupon-circle1"></view>
</view>
<view class="coupon-radius">
<view class="coupon-left">
<view class="lf-font-36 lf-color-white" style="line-height: 1;" v-if="item.discount.action_type.type == 'cash'">
<text>￥</text>
<text class="lf-font-70 lf-font-bold">{{item.discount.action_type.value}}</text>
</view>
<view class="lf-font-36 lf-color-white" style="line-height: 1;" v-if="item.discount.action_type.type == 'discount'">
<text class="lf-font-70 lf-font-bold">{{item.discount.action_type.value}}</text>
<text>%</text>
</view>
<view class="coupon-tag" v-if="item.used_at != ''">
已使用
</view>
<view class="coupon-tag" v-if="item.ifpast">
已过期
</view>
<view class="coupon-tag" v-if="!item.ifpast && item.used_at == ''">
待使用
</view>
</view>
<view class="coupon-right">
<view class="lf-font-32 lf-font-bold lf-color-white">{{item.discount.title}}</view>
<view class="lf-font-24 lf-color-white">有效期{{item.discount.ends_at}}</view>
</view>
</view>
</view>
<view class="coupon-tag">
待使用
<!-- 空数据的情况 -->
<view class="loading-more">
<text v-if="tab.list.length"
:class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
<lf-nocontent v-else></lf-nocontent>
</view>
</view>
<view class="coupon-right">
<view class="lf-font-32 lf-font-bold lf-color-white">满1200减200</view>
<view class="lf-font-24 lf-color-white">有效期2021.09.09-2021-09.15</view>
</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
let _public = {
page: 1,
isPage: true,
loadingClass: true,
loadingText: '正在加载中'
}
return {
current: 0,
tab_list: [
{name: '全部'},
{name: '待使用'},
{name: '已使用'},
{name: '已过期'}
]
{
name: '全部',
list: [],
type: 'all',
..._public
},
{
name: '待使用',
list: [],
type: 'valid',
..._public
},
{
name: '已使用',
list: [],
type: 'used',
..._public
},
{
name: '已失效',
list: [],
type: 'invalid',
..._public
}
],
scrollH: 0,
nav_height: 0,
isRefresher: true
}
},
computed: {
autoHeight(){
return `calc(${this.scrollH}px - ${this.nav_height}px - 86rpx)`;
}
},
methods: {
compareDate(val) {
var nowTime = new Date(new Date().toLocaleDateString()).getTime();
let oldTime = new Date(new Date(val).toLocaleDateString()).getTime();
if(nowTime>oldTime) {
return true;
}else {
return false;
}
},
// 页面触底，加载下一页
onScrolltolower(){
let tab_item = this.tab_list[this.current];
if(tab_item.isPage){
tab_item.page = tab_item.page + 1;
this.getCouponList();
}
},
// 下拉刷新处理
refreshFn(options){
let tab_item = this.tab_list[this.current];
tab_item.page = 1;
tab_item.isPage = true;
tab_item.loadingClass = true;
tab_item.list = []
tab_item.loadingText = '正在加载中';
this.getCouponList(options);
},
// scroll-view 下拉刷新
onRefresherrefresh(){
this.isRefresher = true;
this.refreshFn({type: 'scrollRefresh'});
},
swiperChange(event){
this.current = event.detail.current;
if (event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
this.getCouponList();
},
getCouponList(options = {}) {
let tab_item = this.tab_list[this.current];
this.$http
.get({
api: 'api/coupon',
data: {
type: tab_item.type,
page: tab_item.page
},
header: {
Authorization: this.$cookieStorage.get('user_token')
},
})
.then(res => {
if (res.statusCode == 200) {
let isPage = res.data.total_pages == 1?true:false;
tab_item.isPage = isPage;
if(!isPage) {
tab_item.loadingClass = false;
tab_item.loadingText = '没有更多数据啦~';
}
if(options.type == 'pageRefresh') {
uni.stopPullDownRefresh();
}else if(options.type == 'scrollRefresh') {
this.isRefresher = false;
}
if(tab_item.page == 1) {
tab_item.list = res.data.data;
}else {
tab_item.list.push(...res.data.data);
}
tab_item.list.forEach((item,index) => {
if(this.compareDate(item.discount.ends_at)) {
this.$set(item,'ifpast',true);
}else {
this.$set(item,'ifpast',false);
}
})
} else {
wx.showModal({
content: '请下拉页面刷新重试',
showCancel: false
});
}
wx.hideLoading();
})
.catch(() => {
wx.hideLoading();
});
},
tabChange(index){
this.current = index;
this.getCouponList();
},
},
onLoad() {
let info = uni.getSystemInfoSync();
this.scrollH = info.screenHeight;
this.getCouponList();
}
}
</script>

Write Preview
Loading…
Cancel
Save