zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化领劵中心的逻辑以及页面

master
lemon橪 2022-05-31 15:42:21 +08:00 committed by 学习很差啦
parent d8c46b49d9
commit 8cb01d0ba8
2 changed files with 280 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

547
pages/cart/coupon/couponCenter.vue
View File

@ -1,299 +1,294 @@
<template> <template>
<view class="coupon-center"> <view class="coupon-center">
<swiper class="swiper-box"> <div class="swiper-box">
<swiper-item class="swiper-item"> <div class="swiper-item">
<scroll-view class="scroll-v" enableBackToTop="true" scroll-y @scrolltolower="loadMore"> <div class="scroll-v" enableBackToTop="true" scroll-y>
<u-empty mode="coupon" text="没有优惠券了" v-if="whetherEmpty"></u-empty> <u-empty mode="coupon" style='margin-top: 20%;' text="没有优惠券了" v-if="whetherEmpty"></u-empty>
<view v-else class="coupon-item" v-for="(item, index) in couponList" :key="index"> <view v-else class="coupon-item" v-for="(item, index) in couponList" :key="index">
<view class="left"> <view class="left">
<view class="wave-line"> <view class="wave-line">
<view class="wave" v-for="(item, index) in 12" :key="index"></view> <view class="wave" v-for="(item, index) in 12" :key="index"></view>
</view> </view>
<view class="message"> <view class="message">
<view> <view>
<!--判断当前优惠券类型 couponType PRICE || DISCOUNT --> <!--判断当前优惠券类型 couponType PRICE || DISCOUNT -->
<span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span> <span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span>
<span v-else>{{ item.price }}元</span> <span v-else>{{ item.price }}元</span>
</view> </view>
<view>满{{ item.consumeThreshold | unitPrice }}元可用</view> <view>满{{ item.consumeThreshold | unitPrice }}元可用</view>
</view> </view>
<view class="circle circle-top"></view> <view class="circle circle-top"></view>
<view class="circle circle-bottom"></view> <view class="circle circle-bottom"></view>
</view> </view>
<view class="right"> <view class="right">
<view> <view>
<!-- 根据scopeType 判断是否是 平台、品类或店铺 --> <!-- 根据scopeType 判断是否是 平台、品类或店铺 -->
<view v-if="item.scopeType"> <view class="coupon-title wes-3" v-if="item.scopeType">
<span v-if="item.scopeType == 'ALL' && item.id == 'platform'">全平台</span> <span v-if="item.scopeType == 'ALL' && item.id == 'platform'">全平台</span>
<span v-if="item.scopeType == 'PORTION_CATEGORY'">仅限品类</span> <span v-if="item.scopeType == 'PORTION_CATEGORY'">仅限品类</span>
<view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用</view> <view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用
</view> </view>
<view v-if="item.endTime">有效期至：{{ item.endTime.split(" ")[0] }}</view> </view>
</view> <view v-if="item.endTime">有效期至：{{ item.endTime.split(" ")[0] }}</view>
<view class="receive" @click="receive(item)"> </view>
<text>点击</text><br /> <view class="receive" @click="receive(item)">
<text>领取</text> <text>点击</text><br />
</view> <text>领取</text>
<view class="bg-quan"> 券 </view> </view>
</view> <view class="bg-quan"> 券 </view>
</view> </view>
<uni-load-more :status="loadStatus"></uni-load-more> </view>
</scroll-view>
</swiper-item> </div>
</swiper> </div>
</view> </div>
</view>
</template> </template>
<script> <script>
import { receiveCoupons } from "@/api/members.js"; import {
import { getAllCoupons } from "@/api/promotions.js"; receiveCoupons
export default { } from "@/api/members.js";
data() { import {
return { getAllCoupons
loadStatus: "more", //下拉状态 } from "@/api/promotions.js";
whetherEmpty: false, //是否为空 export default {
couponList: [], // 优惠券列表 data() {
params: { return {
pageNumber: 1, loadStatus: "more", //下拉状态
pageSize: 10, whetherEmpty: false, //是否为空
}, couponList: [], // 优惠券列表
storeId: "", //店铺 id params: {
}; pageNumber: 1,
}, pageSize: 10,
onLoad(option) { },
this.storeId = option.storeId; storeId: "", //店铺 id,
this.getCoupon(); couponData: ""
}, };
onPullDownRefresh() { },
//下拉刷新 onLoad(option) {
this.params.pageNumber = 1; this.storeId = option.storeId;
this.couponList = []; this.getCoupon();
this.getCoupon(); },
}, onReachBottom() {
methods: {
/** this.loadMore()
* 获取当前优惠券 },
*/ onPullDownRefresh() {
getCoupon() { //下拉刷新
uni.showLoading({ this.params.pageNumber = 1;
title: "加载中", this.couponList = [];
}); this.getCoupon();
let submitData = { ...this.params }; },
// 判断当前是否有店铺 methods: {
this.storeId ? (submitData = { ...this.params, storeId: this.storeId }): "", /**
getAllCoupons(submitData) * 获取当前优惠券
.then((res) => { */
uni.hideLoading(); getCoupon() {
uni.stopPullDownRefresh(); uni.showLoading({
if (res.data.code == 200) { title: "加载中",
// 如果请求成功，展示数据并进行展示 });
let data = res.data.result; let submitData = {
if (data.total == 0) { ...this.params
// 当本次请求数据为空展示空信息 };
this.whetherEmpty = true; // 判断当前是否有店铺
} else { this.storeId ? (submitData = {
this.couponList.push(...data.records); ...this.params,
this.loadStatus = "noMore"; storeId: this.storeId
} }) : "",
} getAllCoupons(submitData)
}) .then((res) => {
.catch((err) => { uni.hideLoading();
uni.hideLoading(); uni.stopPullDownRefresh();
}); if (res.data.code == 200) {
}, // 如果请求成功，展示数据并进行展示
/** this.couponData = res.data.result
* 领取优惠券 if (this.couponData.total == 0) {
*/ // 当本次请求数据为空展示空信息
receive(item) { this.whetherEmpty = true;
receiveCoupons(item.id).then((res) => { } else {
if (res.data.code == 200) { this.couponList.push(...this.couponData.records);
uni.showToast({ this.loadStatus = "noMore";
title: "领取成功", }
icon: "none", }
}); })
} else { .catch((err) => {
uni.showToast({ uni.hideLoading();
title: res.data.message, });
icon: "none", },
}); /**
} * 领取优惠券
}); */
}, receive(item) {
/** receiveCoupons(item.id).then((res) => {
* 加载更多 if (res.data.code == 200) {
*/ uni.showToast({
loadMore() { title: "领取成功",
if (this.loadStatus != "noMore") { icon: "none",
this.params.pageNumber++; });
this.getAllCoupons(); } else {
} uni.showToast({
}, title: res.data.message,
}, icon: "none",
onNavigationBarButtonTap(e) { });
uni.navigateTo({ }
url: "/pages/cart/coupon/couponIntro", });
}); },
}, /**
}; * 加载更多
*/
loadMore() {
if (this.couponData.total > this.params.pageNumber * this.params.pageSize) {
this.params.pageNumber++;
this.getCoupon();
}
},
},
onNavigationBarButtonTap(e) {
uni.navigateTo({
url: "/pages/cart/coupon/couponIntro",
});
},
};
</script> </script>
<style> <style>
page { page {
height: 100%; height: 100%;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.coupon-center { .coupon-center {
height: 100%; height: 100%;
.couponList-scroll-content { .swiper-box {
position: relative; .coupon-item {
width: 100%; display: flex;
display: flex; align-items: center;
white-space: nowrap; height: 220rpx;
align-items: center; margin: 20rpx;
justify-content: space-between;
align-items: center;
background-color: $main-color;
color: #ffffff;
.tab-item { .left {
width: 160rpx; height: 100%;
height: 80rpx; width: 260rpx;
line-height: 60rpx; background-color: $light-color;
text-align: center; position: relative;
display: inline-block;
}
.active { .message {
border-bottom: 2px solid #ffffff; color: $font-color-white;
broder-width: 60rpx; display: flex;
font-size: 30rpx; justify-content: center;
font-weight: 700; align-items: center;
padding-bottom: 4rpx; flex-direction: column;
} margin-top: 40rpx;
}
.swiper-box { view:nth-child(1) {
height: 100%; font-weight: bold;
font-size: 60rpx;
}
.scroll-v { view:nth-child(2) {
height: 100%; font-size: $font-sm;
} }
}
.coupon-item { .wave-line {
display: flex; height: 220rpx;
align-items: center; width: 8rpx;
height: 220rpx; position: absolute;
margin: 20rpx; top: 0;
left: 0;
background-color: $light-color;
overflow: hidden;
.left { .wave {
height: 100%; width: 8rpx;
width: 260rpx; height: 16rpx;
background-color: $light-color; background-color: #ffffff;
position: relative; border-radius: 0 16rpx 16rpx 0;
.message { margin-top: 4rpx;
color: $font-color-white; }
display: flex; }
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 40rpx;
view:nth-child(1) { .circle {
font-weight: bold; width: 40rpx;
font-size: 60rpx; height: 40rpx;
} background-color: $bg-color;
position: absolute;
border-radius: 50%;
z-index: 111;
}
view:nth-child(2) { .circle-top {
font-size: $font-sm; top: -20rpx;
} right: -20rpx;
} }
.wave-line { .circle-bottom {
height: 220rpx; bottom: -20rpx;
width: 8rpx; right: -20rpx;
position: absolute; }
top: 0; }
left: 0;
background-color: $light-color;
overflow: hidden;
.wave { .right {
width: 8rpx; display: flex;
height: 16rpx; justify-content: space-between;
background-color: #ffffff; align-items: center;
border-radius: 0 16rpx 16rpx 0; width: 450rpx;
margin-top: 4rpx; font-size: $font-sm;
} height: 100%;
} background-color: #ffffff;
.circle { overflow: hidden;
width: 40rpx; position: relative;
height: 40rpx;
background-color: $bg-color;
position: absolute;
border-radius: 50%;
z-index: 111;
}
.circle-top {
top: -20rpx;
right: -20rpx;
}
.circle-bottom {
bottom: -20rpx;
right: -20rpx;
}
}
.right { >view:nth-child(1) {
display: flex; color: #666666;
justify-content: space-between; margin-left: 20rpx;
align-items: center; display: flex;
width: 450rpx; height: 100%;
font-size: $font-sm; flex-direction: column;
height: 100%; justify-content: space-around;
background-color: #ffffff;
overflow: hidden;
position: relative;
> view:nth-child(1) {
color: #666666;
margin-left: 20rpx;
line-height: 3em;
> view:nth-child(1) {
color: #ff6262;
font-size: 30rpx;
}
}
.receive { >view:nth-child(1) {
color: #ffffff; color: #ff6262;
background-color: $main-color; font-size: 30rpx;
border-radius: 50%; }
width: 86rpx; }
height: 86rpx;
text-align: center;
margin-right: 30rpx;
vertical-align: middle;
padding-top: 8rpx;
position: relative;
z-index: 2;
}
.bg-quan { .receive {
width: 244rpx; color: #ffffff;
height: 244rpx; background-color: $main-color;
border: 6rpx solid $main-color; border-radius: 50%;
border-radius: 50%; width: 86rpx;
opacity: 0.1; height: 86rpx;
color: $main-color; text-align: center;
text-align: center; margin-right: 30rpx;
padding-top: 30rpx; vertical-align: middle;
font-size: 130rpx; padding-top: 8rpx;
position: absolute; position: relative;
right: -54rpx; z-index: 2;
bottom: -60rpx; }
}
} .bg-quan {
} width: 244rpx;
} height: 244rpx;
} border: 6rpx solid $main-color;
border-radius: 50%;
opacity: 0.1;
color: $main-color;
text-align: center;
padding-top: 30rpx;
font-size: 130rpx;
position: absolute;
right: -54rpx;
bottom: -60rpx;
}
}
}
}
}
.coupon-title {
width: 260rpx;
}
</style> </style>

8
uni.scss
View File

@ -169,3 +169,11 @@ $font-weight: 400;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
} }
.wes-3 {
/* 适用于webkit内核和移动端 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}