Skip to content

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

no message

parent 15f3f34d
Hide whitespace changes
Inline Side-by-side
Showing with 143 additions and 89 deletions
pages/coupon/list/list.vue
View file @ 0c23764b
<template> <template>
<view class="couponlistStyle height100vh column"> <scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh">
<view> <view class="headStatus" v-if="scrollTop > 50" :style="[
<view class="relative"> headStyle,
<headerCoupon style="position: absolute; left: 0;top: 0;z-index: 1;"></headerCoupon> {
<img class="block" zIndex: scrollTop < 10 ? 'unset' : 2,
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747792785027173.png" opacity: scrollTop < 10 ? '100' : scrollTop,
style="width: 750rpx;height: 723rpx;"/> },
</view> ]">
</view> <view class="title" v-if="scrollTop > 50">{{ pageTitle }}</view>
<view class="col column">
<view class="couponType relative">
<view class="couponTypeBg row-sbs-n">
<scroll-view scroll-x :scroll-left="scrollLeft"
scroll-with-animation style="height: 70rpx; white-space: nowrap;">
<view class="row">
<view class="couponTypeTitle column relative"
:class="[msg.CouponsUseScope==item.Id?'active':'']"
v-for="(item, index) in ScopeOfUseList"
:key="index"
@click="changeHandler(item.Id)">
<text>{{ item.Name }}</text>
<view v-if="msg.CouponsUseScope==item.Id"
class="borderActive">
<view></view>
</view>
</view>
</view>
</scroll-view>
</view> </view>
</view> <view class="couponlistStyle column">
<view class="couponListBg col"> <view>
<u-empty v-if="g.length == 0" text="暂无相关优惠券" mode="coupon" padding-top="5"></u-empty> <view class="relative">
<view <headerCoupon style="position: absolute; left: 0;top: 0;z-index: 1;"></headerCoupon>
v-if="g.length > 0" <img class="block"
style="height: 100%;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747792785027173.png"
> style="width: 750rpx;height: 723rpx;"/>
<scroll-view </view>
scroll-y </view>
:enable-back-to-top="true" <view class="col column">
:enable-flex="true" <view class="couponType relative">
@scrolltolower="lower" <view class="couponTypeBg row-sbs-n">
:style="{ height: '100%' }" <scroll-view scroll-x :scroll-left="scrollLeft"
> scroll-with-animation style="height: 70rpx; white-space: nowrap;">
<view class="couponlist"> <view class="row">
<view class="c_list_item row" <view class="couponTypeTitle column relative"
:class="[x.couponReceiveCount>0?'active':'']" :class="[msg.CouponsUseScope==item.Id?'active':'']"
v-for="(x, i) in g" :key="i" @click="goUrl(x)"> v-for="(item, index) in ScopeOfUseList"
<view class="item_top column items-center justify-center"> :key="index"
<view> @click="changeHandler(item.Id)">
<text v-if="x.couponsType==1">￥</text> <text>{{ item.Name }}</text>
<text style="font-size: 54rpx;font-weight: bold;">{{x.denomination }}</text> <view v-if="msg.CouponsUseScope==item.Id"
<text v-if="x.couponsType==2" style="margin-left: 10rpx;">折</text> class="borderActive">
</view> <view></view>
<Text>满{{Number(x.useCondition) }}可用</Text> </view>
</view> </view>
<view class="item_b col relative">
<view class="row">
<text class="item_b_l_title">{{ x.couponsUseScope }}</text>
<text class="item_b_l_text">{{x.couponsType==1?'抵扣券':'折扣券'}}</text>
</view>
<view class="row-sbas-n">
<view class="col item_b_r_text">
{{ x.couponsName }}
</view> </view>
<view class="item_b_r_buttom"> </scroll-view>
<view class="receive" @click.stop="receive(x,i)"> </view>
<Text>{{x.couponReceiveCount>0?'已领取':'立即领取'}} </Text> </view>
<view class="couponListBg col">
<u-empty v-if="g.length == 0" text="暂无相关优惠券" mode="coupon" padding-top="5"></u-empty>
<view
v-if="g.length > 0"
style="height: 100%;"
>
<scroll-view
scroll-y
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
:style="{ height: '100%' }"
>
<view class="couponlist">
<view class="c_list_item row"
:class="[x.couponReceiveCount>0?'active':'']"
v-for="(x, i) in g" :key="i" @click="goUrl(x)">
<view class="item_top column items-center justify-center">
<view>
<text v-if="x.couponsType==1">￥</text>
<text style="font-size: 54rpx;font-weight: bold;">{{x.denomination }}</text>
<text v-if="x.couponsType==2" style="margin-left: 10rpx;">折</text>
</view>
<Text>满{{Number(x.useCondition) }}可用</Text>
</view>
<view class="item_b col relative">
<view class="row">
<text class="item_b_l_title">{{ x.couponsUseScope }}</text>
<text class="item_b_l_text">{{x.couponsType==1?'抵扣券':'折扣券'}}</text>
</view>
<view class="row-sbas-n">
<view class="col item_b_r_text">
{{ x.couponsName }}
</view>
<view class="item_b_r_buttom">
<view class="receive" @click.stop="receive(x,i)">
<Text>{{x.couponReceiveCount>0?'已领取':'立即领取'}} </Text>
</view>
</view>
</view>
<img v-if="x.couponReceiveCount>0" class="item_b_r_RecAlr" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747799527913675.png"/>
</view> </view>
</view> </view>
</view> </view>
<img v-if="x.couponReceiveCount>0" class="item_b_r_RecAlr" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747799527913675.png"/> <view style="padding: 0 25rpx;">
<u-loadmore
:status="status"
:load-text="loadText"
:font-size="24"
:margin-top="20"
:margin-bottom="20"
bg-color="#f3f4f6"
/>
</view>
</scroll-view>
</view>
<view class="loading" style="padding: 0 25rpx;" v-if="loading">
<u-loading mode="flower" size="48">></u-loading>
<Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
</view> </view>
</view> </view>
</view> </view>
<view style="padding: 0 25rpx;">
<u-loadmore <auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth>
:status="status"
:load-text="loadText"
:font-size="24"
:margin-top="20"
:margin-bottom="20"
bg-color="#f3f4f6"
/>
</view>
</scroll-view>
</view>
<view class="loading" style="padding: 0 25rpx;" v-if="loading">
<u-loading mode="flower" size="48">></u-loading>
<Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
</view> </view>
</view> </scroll-view>
</view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth>
</view>
</template> </template>
<script> <script>
...@@ -136,6 +148,8 @@ export default { ...@@ -136,6 +148,8 @@ export default {
fontSize: '28rpx', fontSize: '28rpx',
}, },
scrollLeft: 0, scrollLeft: 0,
scrollTop: 0,
headStyle: {},
}; };
}, },
created() { created() {
...@@ -175,6 +189,12 @@ export default { ...@@ -175,6 +189,12 @@ export default {
}, },
methods: { methods: {
scrollHandler(e) {
this.scrollTop = e.detail.scrollTop;
},
scrollTopHandler() {
this.scrollTop = 0;
},
SearchData() { SearchData() {
this.msg.pageIndex = 1; this.msg.pageIndex = 1;
this.g = []; this.g = [];
...@@ -324,6 +344,7 @@ export default { ...@@ -324,6 +344,7 @@ export default {
} }
.couponlistStyle { .couponlistStyle {
width: 100%; width: 100%;
min-height: 100vh;
background: #f3f4f6; background: #f3f4f6;
} }
.couponlistStyle .couponlist{ .couponlistStyle .couponlist{
...@@ -464,4 +485,37 @@ export default { ...@@ -464,4 +485,37 @@ export default {
margin-left: -100rpx; margin-left: -100rpx;
z-index: 999; z-index: 999;
} }
.headStatus {
overflow: hidden;
position: relative;
width: 140vw;
padding-right: 40vw;
padding-top: 50rpx;
padding-bottom: 10px;
position: fixed;
left: 0;
right: 0;
top: 0;
display: flex;
background-image: linear-gradient(to right, #e6b865, #ebb45e);
}
.headStatus .arrow {
height: 24px;
margin: 5px 10px;
width: 24px;
}
.headStatus .title {
font-size: 18px;
color: #fff;
flex: 1;
width: 1px;
line-height: 34px;
text-align: center;
}
.headStatus .title {
color: #111 !important;
}
</style> </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