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>
<view class="couponlistStyle height100vh column">
<view>
<view class="relative">
<headerCoupon style="position: absolute; left: 0;top: 0;z-index: 1;"></headerCoupon>
<img class="block"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747792785027173.png"
style="width: 750rpx;height: 723rpx;"/>
</view>
</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>
<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh">
<view class="headStatus" v-if="scrollTop > 50" :style="[
headStyle,
{
zIndex: scrollTop < 10 ? 'unset' : 2,
opacity: scrollTop < 10 ? '100' : scrollTop,
},
]">
<view class="title" v-if="scrollTop > 50">{{ pageTitle }}</view>
</view>
</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 class="couponlistStyle column">
<view>
<view class="relative">
<headerCoupon style="position: absolute; left: 0;top: 0;z-index: 1;"></headerCoupon>
<img class="block"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747792785027173.png"
style="width: 750rpx;height: 723rpx;"/>
</view>
</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>
<view class="item_b_r_buttom">
<view class="receive" @click.stop="receive(x,i)">
<Text>{{x.couponReceiveCount>0?'已领取':'立即领取'}} </Text>
</scroll-view>
</view>
</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>
<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 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>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth>
</view>
</view>
</view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth>
</view>
</scroll-view>
</template>
<script>
......@@ -136,6 +148,8 @@ export default {
fontSize: '28rpx',
},
scrollLeft: 0,
scrollTop: 0,
headStyle: {},
};
},
created() {
......@@ -175,6 +189,12 @@ export default {
},
methods: {
scrollHandler(e) {
this.scrollTop = e.detail.scrollTop;
},
scrollTopHandler() {
this.scrollTop = 0;
},
SearchData() {
this.msg.pageIndex = 1;
this.g = [];
......@@ -324,6 +344,7 @@ export default {
}
.couponlistStyle {
width: 100%;
min-height: 100vh;
background: #f3f4f6;
}
.couponlistStyle .couponlist{
......@@ -464,4 +485,37 @@ export default {
margin-left: -100rpx;
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>
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