code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2025-12-21 18:05:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 11:03:32 +08:00
commit 23804939eb
2158 changed files with 149684 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
pages/cart/coupon/couponCenter.vue Normal file
View File

@@ -0,0 +1,355 @@
<template>
<view class="coupon-center">
<swiper :current="tabIndex" class="swiper-box" @change="ontabchange">
<swiper-item @touchmove.stop class="swiper-item" v-for="tab in categoryIndexData" :key="tab.category_id">
<scroll-view class="scroll-v" enableBackToTop="true" scroll-y @scrolltolower="loadMore">
<u-empty mode="coupon" text="没有优惠券了" v-if="nomsg"></u-empty>
<view v-else class="coupon-item" v-for="(item, index) in list" :key="index">
<view class="left">
<view class="wave-line">
<view class="wave" v-for="(item, index) in 12" :key="index"></view>
</view>
<view class="msg">
<view>
<span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span>
<span v-else>{{ item.price }}元</span>
</view>
<view>满{{ item.consumeThreshold | unitPrice }}元可用</view>
</view>
<view class="circle circle-top"></view>
<view class="circle circle-bottom"></view>
</view>
<view class="right">
<view>
<view v-if="item.scopeType">
<span v-if="item.scopeType == 'ALL' && item.id == 'platform'">全平台</span>
<span v-if="item.scopeType == 'PORTION_CATEGORY'">仅限品类</span>
<view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用</view>
</view>
<view>有效期至：{{ item.endTime.split(" ")[0] }}</view>
</view>
<view class="receive" @click="receive(item)">
<text>点击</text><br />
<text>领取</text>
</view>
<view class="bg-quan"> 券 </view>
</view>
</view>
<uni-load-more :status="loadStatus"></uni-load-more>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import { receiveCoupons } from "@/api/members.js";
import { getAllCoupons } from "@/api/promotions.js";
import { getCategoryIndexData } from "@/api/home.js";
export default {
data() {
return {
loadStatus: "more",
nomsg: false,
list: [],
params: {
pageNumber: 1,
pageSize: 10,
status: 1,
},
storeId: "",
categoryIndexData: [],
currentLeft: 0,
tabIndex: 0,
};
},
onLoad(option) {
this.storeId = option.storeId;
this.getCoupon();
this.getTabbar();
},
onPullDownRefresh() {
//下拉刷新
console.log("refresh");
this.params.pageNumber = 1;
this.list = [];
this.getCoupon();
},
methods: {
getCoupon() {
//全部优惠券
uni.showLoading({
title: "加载中",
});
if (this.storeId) {
getAllCoupons({ storeId: this.storeId ,...this.params })
.then((res) => {
uni.hideLoading();
uni.stopPullDownRefresh();
if (res.statusCode == 200) {
let data = res.data.result;
if (data.total == 0) {
this.nomsg = true;
} else {
this.list.push(...data.records);
this.loadStatus = "noMore";
}
}
})
.catch((err) => {
uni.hideLoading();
});
} else {
getAllCoupons(this.params)
.then((res) => {
uni.hideLoading();
uni.stopPullDownRefresh();
if (res.statusCode == 200) {
console.log(res);
let data = res.data.result;
if (data.total == 0) {
this.nomsg = true;
console.log("这里");
} else if (data.total < 10) {
this.list.push(...data.records);
this.loadStatus = "noMore";
} else {
this.list.push(...data.records);
if (data.data.length < 10) this.loadStatus = "noMore";
}
}
})
.catch((err) => {
uni.hideLoading();
});
}
},
receive(item) {
//领取优惠券
receiveCoupons(item.id).then((res) => {
if (res.data.code == 200) {
uni.showToast({
title: "领取成功",
icon: "none",
});
} else {
uni.showToast({
title: res.data.message,
icon: "none",
});
}
});
// this.$set(this.list,0,this.list[0])
// console.log(this.list)
},
getTabbar() {
//获取顶级分类
// uni.showLoading({
// title: "加载中"
// })
let tabbar = {
category_id: 0,
name: "全部",
parent_id: 0,
category_path: "|0|",
goods_count: 0,
category_order: 0,
list_show: 1,
image:
"https://wwwyinbeicn.oss-cn-beijing.aliyuncs.com/yinbeistore/normal/FF468285411041E1AE5C36DAD1161AE4.png",
};
getCategoryIndexData().then((res) => {
console.log(res);
this.categoryIndexData.push(tabbar, ...res.data.result);
});
},
loadMore() {
if (this.loadStatus != "noMore") {
this.params.pageNumber++;
this.getAllCoupons();
}
},
setCat(type) {
this.tabIndex = type;
// this.searchStore();
},
ontabchange(e) {
this.tabIndex = e.detail.current;
if (e.detail.current > 3) {
this.currentLeft = (e.detail.current - 3) * 90;
} else {
this.currentLeft = 0;
}
// this.searchStore();
},
},
onNavigationBarButtonTap(e) {
uni.navigateTo({
url: "/pages/cart/coupon/couponIntro",
});
},
};
</script>
<style>
page {
height: 100%;
}
</style>
<style lang="scss" scoped>
.coupon-center {
height: 100%;
.list-scroll-content {
position: relative;
width: 100%;
display: flex;
white-space: nowrap;
align-items: center;
justify-content: space-between;
align-items: center;
background-color: $main-color;
color: #ffffff;
.tab-item {
width: 160rpx;
height: 80rpx;
line-height: 60rpx;
text-align: center;
display: inline-block;
}
.active {
border-bottom: 2px solid #ffffff;
broder-width: 60rpx;
font-size: 30rpx;
font-weight: 700;
padding-bottom: 4rpx;
}
}
.swiper-box {
height: 100%;
.scroll-v {
height: 100%;
}
.coupon-item {
display: flex;
align-items: center;
height: 220rpx;
margin: 20rpx;
.left {
height: 100%;
width: 260rpx;
background-color: $light-color;
position: relative;
.msg {
color: $font-color-white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 40rpx;
view:nth-child(1) {
font-weight: bold;
font-size: 60rpx;
}
view:nth-child(2) {
font-size: $font-sm;
}
}
.wave-line {
height: 220rpx;
width: 8rpx;
position: absolute;
top: 0;
left: 0;
background-color: $light-color;
overflow: hidden;
.wave {
width: 8rpx;
height: 16rpx;
background-color: #ffffff;
border-radius: 0 16rpx 16rpx 0;
margin-top: 4rpx;
}
}
.circle {
width: 40rpx;
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 {
display: flex;
justify-content: space-between;
align-items: center;
width: 450rpx;
font-size: $font-sm;
height: 100%;
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 {
color: #ffffff;
background-color: $main-color;
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 {
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;
}
}
}
}
}
</style>

148
pages/cart/coupon/couponDetail.vue Normal file
View File

@@ -0,0 +1,148 @@
<template>
<view class="content">
<view class="body">
<view class="top-view">
<view class="title">{{coupon.title}}</view>
<view class="price"><text>￥</text>{{coupon.price | unitPrice}}</view>
<view class="text">满{{coupon.consumeThreshold}}元可用</view>
<view class="bg-quan">
券
</view>
<view class="jiao-1" :class="{'used-color':coupon.used_status!=0}">
<text class="text-1">{{coupon.used_status == 0?'新到':coupon.used_status_text}}</text>
</view>
</view>
<view class="bottom-view">
<view class="text">• 使用平台：{{
coupon.scopeType == 'ALL' && coupon.id == 'platform'
? "全平台"
: coupon.scopeType == "PORTION_CATEGORY"
? "仅限品类"
: coupon.storeName == 'platform' ? '全平台' :coupon.storeName+''
}}使用</view>
<view class="text">• 有效期至：{{coupon.endTime}}</view>
</view>
<button class="btn" @click="gostorePage" v-if="coupon.used_status==0">立即使用</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
customStyle: {
backgroundColor: this.lightColor,
},
coupon: {},
};
},
onLoad(option) {
this.coupon = JSON.parse(decodeURIComponent(option.item));
console.log(this.coupon);
},
methods: {
gostorePage() {
let id = this.coupon.storeId;
if (id) {
uni.navigateTo({
url: `/pages/product/shopPage?id=${id}`,
});
} else {
uni.switchTab({
url: "/pages/tabbar/home/index",
});
}
},
},
};
</script>
<style lang="scss">
page,
.content {
// background: $main-color;
height: 100%;
}
.body {
.top-view {
margin: 20rpx 20rpx 0;
height: 290rpx;
background: linear-gradient(
316deg,
$light-color 2%,
$aider-light-color 98%
);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border-radius: 20rpx;
padding: 60rpx 0;
.title {
font-size: 30rpx;
color: #ffee80;
}
.price {
font-size: 60rpx;
font-weight: 600;
color: #ffffff;
text {
font-size: 30rpx;
}
}
.text {
font-size: 24rpx;
color: #ffffff;
}
.bg-quan {
width: 244rpx;
height: 244rpx;
border: 6rpx solid #ffffff;
border-radius: 50%;
opacity: 0.3;
color: #ffffff;
text-align: center;
padding-top: 30rpx;
font-size: 130rpx;
position: absolute;
right: -54rpx;
bottom: -54rpx;
}
.jiao-1 {
background-color: #ffc71c;
width: 400rpx;
transform: rotate(45deg);
text-align: center;
position: absolute;
right: -130rpx;
color: #ffffff;
top: 0;
.text-1 {
margin-left: 68rpx;
font-size: 28rpx;
}
}
.used-color {
background-color: #ffc71c;
}
}
.bottom-view {
border-radius: 0 0 20rpx 20rpx;
background-color: #ffffff;
height: 580rpx;
padding: 50rpx 50rpx;
margin: 0 30rpx;
line-height: 2em;
color: #999;
}
.btn {
margin: 140rpx 20rpx;
}
}
</style>

59
pages/cart/coupon/couponIntro.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<view class="coupin-intro">
<view class="title">
1.优惠券的获取
</view>
<view class="mb-60">
通过活动赠送、客服补偿等获得(系统自动添加, 无需兑换);
</view>
<view class="title">
2.优惠券使用
</view>
<view>1）每张抵用券仅能使用一次，不找零，不退换，不兑换现金</view>
<view>2）单笔订单只能使用1张优惠券, 不支持同时使用多张, 用券后差额不找零, 不退回；</view>
<view>3）优惠券 (包括新用户券) 不能抵扣运费, 只能抵扣商品金额。特价商品不可使用优惠券, 与其他优惠不同享；</view>
<view>4）每张优惠券的使用条件请查看对应优惠券的使用说明；</view>
<view>5）请在有效期内使用优惠券, 未使用的优惠券过期后, 将自动作废；</view>
<view>6）每个用户仅限使用1张新用户专享优惠券, 同一帐号和手机号均视为同一用户；</view>
<view>7）用券前订单满88元即可包邮（港澳台地区需满500元包邮）；</view>
<view class="mb-60">8）使用抵用券抵扣部分的货款不开具发票</view>
<view class="title">3.优惠券失效</view>
<view>1）新用户券使用一张后其他新用户券失效, 取消订单后不返还；</view>
<view>2）使用优惠券的订单, 若产生退货, 优惠券均不退回, 退款金额按优惠后的小计金额退款；</view>
<view>3）参加满赠券活动获得的赠券,发生退货时,若订单中剩余商品不满足赠券条件,实物赠品需勾选退货并寄回,否则将从退款中扣减对应金额,客服审核通过退货申请后,所获赠券将会自动失效；</view>
<view>4）优惠券严禁出售或转让, 如经发现并证实的, 该券将予以失效处理；</view>
<view>5）如需了解更多, 请联系在线客服或拨打客服电话400-0000-000。</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss">
.coupin-intro{
background-color: #fff;
color: #999999;
font-size: $font-sm;
padding: 30rpx;
border-top: 1px solid $border-color-light;
line-height: 2.5em;
.title{
font-size: $font-base;
font-weight: bold;
}
.mb-60{
margin-bottom: 60rpx;
}
}
</style>

378
pages/cart/coupon/index.vue Normal file
View File

@@ -0,0 +1,378 @@
<template>
<div class="wrapper">
<div class="nomore" v-if="current === 0 && couponsList.length <= 0">
暂无优惠券
</div>
<div class="nomore" v-if="current === 1 && disabledCouponsList.length <= 0">
暂无优惠券
</div>
<view class="coupon-item" v-for="(item, index) in couponsList" :key="index" v-if="item.memberCouponStatus == 'NEW'">
<view class="left">
<view class="wave-line">
<view class="wave" v-for="(item, index) in 12" :key="index"></view>
</view>
<view class="msg">
<view>
<span v-if="item.couponType == 'DISCOUNT'">{{ item.discount }}折</span>
<span v-else>{{ item.price }}元</span>
</view>
<view>满{{ item.consumeThreshold | unitPrice }}元可用</view>
</view>
<view class="circle circle-top"></view>
<view class="circle circle-bottom"></view>
</view>
<view class="right">
<view>
<view v-if="item.scopeType">
<span v-if="item.scopeType == 'ALL' && item.id == 'platform'">全平台</span>
<span v-if="item.scopeType == 'PORTION_CATEGORY'">仅限品类</span>
<view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用</view>
</view>
<view>有效期至：{{item.endTime}}</view>
</view>
<view class="receive" @click="clickWay(item)">
<text>立即</text><br />
<text>使用</text>
</view>
<view class="bg-quan"> 券 </view>
</view>
</view>
</div>
</template>
<script>
import {
useCoupon,
getMemberCouponList,
getMemberCanUse,
} from "@/api/trade.js";
export default {
data() {
return {
current: 0,
list: [
{
name: "可用优惠券",
},
{
name: "不可用优惠券",
},
],
curNow: "",
couponsList: [],
disabledCouponsList: [],
params: {
memberCouponStatus: "NEW",
pageNumber: 1,
pageSize: 10,
scopeId: "",
storeId: "",
totalPrice: "",
// endTime: this.$u.timeFormat(new Date().getTime(),'yyyy-mm-dd hh:MM:ss')
},
way: [],
routerVal: "",
};
},
onReachBottom() {
this.pageNumber++;
this.getAllCouponsFun();
},
onLoad(val) {
this.routerVal = val;
this.params.scopeId = val.skuId;
this.params.storeId = val.storeId;
if (val.type) {
this.params.endTime = new Date().getTime();
}
},
mounted() {
uni.getStorage({
key: "totalPrice",
success: (res) => {
this.params.totalPrice = res.data;
this.getCoupons();
},
});
},
methods: {
// 获取优惠券数量
getCoupons() {
getMemberCanUse(this.params).then((res) => {
if (res.data.success) {
this.couponsList = res.data.result.records;
}
});
},
// 领取优惠券
async clickWay(coupon) {
useCoupon({
memberCouponId: coupon.id,
used: true,
way: this.routerVal.way,
}).then((res) => {
if (res.data.success) {
uni.navigateBack();
} else {
uni.showToast({
title: res.data.message,
duration: 2000,
icon: "none",
});
}
});
},
submitback() {
uni.navigateBack();
},
// 获取商品优惠券
getAllCouponsFun() {},
sectionChange(index) {
this.curNow = index;
},
change(index) {
this.current = index;
},
},
};
</script>
<style scoped lang="scss">
.nomore {
margin-top: 20px;
text-align: center;
}
.selectBtn {
position: fixed;
bottom: 0;
background: #fff;
text-align: center;
width: 100%;
padding: 20rpx 0;
}
.wrapper {
background: #f9f9f9;
overflow: hidden;
}
.coupon-jd {
margin: 40rpx auto 0 auto;
width: 700rpx;
height: auto;
background-color: #ffffff;
display: flex;
.left {
padding: 0 30rpx;
width: 200rpx;
background-color: $aider-light-color;
text-align: center;
font-size: 28rpx;
color: #ffffff;
.sum {
margin-top: 50rpx;
font-weight: bold;
font-size: 32rpx;
.num {
font-size: 60rpx;
}
}
.type {
margin-bottom: 50rpx;
font-size: 24rpx;
}
}
.right {
padding: 20rpx 20rpx 0;
font-size: 28rpx;
.top {
border-bottom: 2rpx dashed $u-border-color;
.title {
margin-right: 60rpx;
line-height: 40rpx;
.tag {
padding: 4rpx 20rpx;
background-color: $aider-light-color;
border-radius: 20rpx;
color: #ffffff;
font-weight: bold;
font-size: 24rpx;
margin-right: 10rpx;
}
}
.bottom {
display: flex;
margin-top: 20rpx;
align-items: center;
justify-content: space-between;
margin-bottom: 10rpx;
.date {
font-size: 20rpx;
flex: 1;
}
}
}
.tips {
width: 100%;
line-height: 50rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
.transpond {
margin-right: 10rpx;
}
.explain {
display: flex;
align-items: center;
}
.particulars {
width: 30rpx;
height: 30rpx;
box-sizing: border-box;
padding-top: 8rpx;
border-radius: 50%;
background-color: $u-type-info-disabled;
text-align: center;
}
}
}
}
.immediate-use {
height: auto;
padding: 0 20rpx;
font-size: 24rpx;
text-align: center;
width: 160rpx;
margin: 20rpx 0;
border-radius: 40rpx;
line-height: 40rpx;
color: $aider-light-color;
border: 2rpx solid $aider-light-color;
}
.coupon-item {
display: flex;
align-items: center;
height: 220rpx;
margin: 20rpx;
.left {
height: 100%;
width: 260rpx;
background-color: $light-color;
position: relative;
.msg {
color: $font-color-white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 40rpx;
view:nth-child(1) {
font-weight: bold;
font-size: 60rpx;
}
view:nth-child(2) {
font-size: $font-sm;
}
}
.wave-line {
height: 220rpx;
width: 8rpx;
position: absolute;
top: 0;
left: 0;
background-color: $light-color;
overflow: hidden;
.wave {
width: 8rpx;
height: 16rpx;
background-color: #ffffff;
border-radius: 0 16rpx 16rpx 0;
margin-top: 4rpx;
}
}
.circle {
width: 40rpx;
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 {
display: flex;
justify-content: space-between;
align-items: center;
width: 450rpx;
font-size: $font-sm;
height: 100%;
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 {
color: #ffffff;
background-color: $main-color;
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 {
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;
}
}
}
</style>

430
pages/cart/coupon/myCoupon.vue Normal file
View File

@@ -0,0 +1,430 @@
<template>
<view class="b-content">
<view class="navbar">
<view v-for="(item, index) in navList" :key="index" class="nav-item" @click="tabClick(index)"><text :class="{ current: tabCurrentIndex === index }">{{
item.text
}}</text></view>
</view>
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
<!-- 空白页 -->
<empty v-if="tabItem.nomsg"></empty>
<!-- 数据 -->
<view v-if="tabItem.dataList && coupon" class="coupon-item" :class="{ 'coupon-used': tabIndex != 0 }" v-for="(coupon, index) in tabItem.dataList" :key="index">
<view class="left">
<view class="wave-line">
<view class="wave" v-for="(item, index) in 12" :key="index"></view>
</view>
<view class="msg">
<view class="price" v-if="coupon.couponType == 'DISCOUNT'">{{ coupon.discount }}折</view>
<view class="price" v-else>{{ coupon.price }}元</view>
<!-- <view class="price" v-if="coupon.couponType == 'PRICE'">￥{{ coupon.price | unitPrice }}</view> -->
<!-- <view class="price" v-if="coupon.couponType == 'DISCOUNT'">￥{{ coupon.couponDiscount }}</view> -->
<view class="sub-price">满{{ coupon.consumeThreshold | unitPrice }}可用</view>
</view>
<view class="circle circle-top"></view>
<view class="circle circle-bottom"></view>
</view>
<view class="right" v-if="coupon">
<view class="content">
<view class="title-1">{{ coupon.title }}</view>
<view class="title-2">使用平台：{{
coupon.scopeType == 'ALL' && coupon.id == 'platform'
? "全平台"
: coupon.scopeType == "PORTION_CATEGORY"
? "仅限品类"
: coupon.storeName == 'platform' ? '全平台' :coupon.storeName+''
}}使用</view>
<view v-if="coupon.endTime">{{
coupon.endTime
}}</view>
<view @click="couponDetail(coupon)">详细说明
<u-icon style="float: right; margin-top: 10rpx" name="arrow-right"></u-icon>
</view>
</view>
<view class="jiao-1" v-if="tabIndex == 0">
<text class="text-1">新到</text>
<text class="text-2" v-if="coupon.used_status == 1">将过期</text>
</view>
<image class="no-icon" v-if="tabIndex == 1" src="@/static/img/used.png"></image>
<image class="no-icon" v-if="tabIndex == 2" src="@/pages/floor/imgs/overdue.png"></image>
<view class="receive" v-if="tabIndex == 0" @click="nowUse(coupon)">
<text>立即</text><br />
<text>使用</text>
</view>
<view class="bg-quan"> 券 </view>
</view>
</view>
<uni-load-more :status="tabItem.loadStatus"></uni-load-more>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import { getMemberCoupons } from "@/api/members.js";
export default {
data() {
return {
tabCurrentIndex: 0,
navList: [
{
text: "未使用",
loadStatus: "more",
dataList: [],
params: {
memberCouponStatus: "NEW",
pageNumber: 1,
pageSize: 10,
status: 1,
},
nomsg: false,
},
{
text: "已使用",
loadStatus: "more",
dataList: [],
params: {
memberCouponStatus: "USED",
pageNumber: 1,
pageSize: 10,
status: 2,
},
nomsg: false,
},
{
text: "已过期",
loadStatus: "more",
dataList: [],
params: {
memberCouponStatus: "EXPIRE",
pageNumber: 1,
pageSize: 10,
status: 3,
},
nomsg: false,
},
],
couponList: [],
};
},
onNavigationBarButtonTap() {
uni.navigateTo({
url: "/pages/cart/coupon/couponIntro",
});
},
onLoad() {
// this.tabCurrentIndex = 0;
this.getData();
},
onPullDownRefresh() {
let index = this.tabCurrentIndex;
this.navList[index].params.pageNumber = 1;
this.navList[index].dataList = [];
this.getData();
},
watch: {
tabCurrentIndex(val) {
if (this.navList[val].dataList.length == 0) this.getData();
},
},
methods: {
//顶部tab点击
tabClick(index) {
this.tabCurrentIndex = index;
// this.loadData();
},
getData() {
//读取优惠券
uni.showLoading({
title: "加载中",
});
let index = this.tabCurrentIndex;
getMemberCoupons(this.navList[index].params).then((res) => {
uni.stopPullDownRefresh();
if (res.statusCode == 200) {
let data = res.data.result.records;
if (data.length == 0) {
if (res.data.pageNumber == 1) {
this.navList[index].nomsg = true;
} else {
this.navList[index].loadStatus = "noMore";
}
} else if (data.length < 10) {
this.navList[index].loadStatus = "noMore";
this.navList[index].dataList.push(...data);
} else {
this.navList[index].dataList.push(...data);
}
}
uni.hideLoading();
});
},
changeTab(e) {
this.tabCurrentIndex = e.target.current;
},
loadData() {
let index = this.tabCurrentIndex;
if (this.navList[index].loadStatus != "noMore") {
this.navList[index].params.pageNumber++;
this.getData();
}
},
nowUse(item) {
console.log(item)
return
//立即使用
if (item.storeId) {
uni.navigateTo({
url: `/pages/product/shopPage?id=${item.storeId}`,
});
} else {
uni.switchTab({
url: "/pages/tabbar/home/index",
});
}
},
couponDetail(item) {
uni.navigateTo({
url:
"/pages/cart/coupon/couponDetail?item=" +
encodeURIComponent(JSON.stringify(item)),
});
},
},
};
</script>
<style>
page {
height: 100%;
}
</style>
<style lang="scss">
$item-color: #fff;
.b-content {
background: $page-color-base;
height: 100%;
}
.swiper-box {
height: calc(100% - 40px);
}
.list-scroll-content {
height: 100%;
width: 100%;
.coupon-item {
display: flex;
align-items: center;
height: 220rpx;
margin: 20rpx;
.left {
height: 100%;
width: 260rpx;
background-color: $light-color;
position: relative;
.msg {
color: $font-color-white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 40rpx;
view:nth-child(1) {
font-weight: bold;
font-size: 60rpx;
}
view:nth-child(2) {
font-size: $font-sm;
}
}
.wave-line {
height: 220rpx;
width: 8rpx;
position: absolute;
top: 0;
left: 0;
background-color: $light-color;
overflow: hidden;
.wave {
width: 8rpx;
height: 16rpx;
background-color: #ffffff;
border-radius: 0 16rpx 16rpx 0;
margin-top: 4rpx;
}
}
.circle {
width: 40rpx;
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 {
display: flex;
justify-content: space-between;
align-items: center;
width: 450rpx;
font-size: $font-sm;
height: 100%;
background-color: #ffffff;
overflow: hidden;
position: relative;
.content {
color: #666666;
margin-left: 20rpx;
line-height: 2em;
> view:nth-child(1) {
color: #ff6262;
font-size: 30rpx;
}
.title-1,
.title-2,
.title-3 {
font-size: 25rpx;
}
}
.receive {
color: #ffffff;
background-color: $main-color;
border-radius: 50%;
width: 86rpx;
height: 86rpx;
text-align: center;
margin-right: 48rpx;
vertical-align: middle;
padding-top: 8rpx;
position: relative;
z-index: 2;
}
.jiao-1 {
background-color: #ffc71c;
width: 400rpx;
transform: rotate(45deg);
text-align: center;
position: absolute;
color: #ffffff;
right: -130rpx;
top: 0;
.text-1 {
margin-left: 68rpx;
font-size: 28rpx;
}
.text-2 {
margin-left: 68rpx;
font-size: 28rpx;
}
}
.no-icon {
border-radius: 50%;
width: 86rpx;
height: 86rpx;
margin-right: 48rpx;
position: relative;
z-index: 2;
}
.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-used {
.left {
background-color: #dddddd;
.wave-line {
background-color: #dddddd;
}
}
.right {
color: #cccccc;
.content {
color: #cccccc;
> view:nth-child(1) {
color: #cccccc;
}
}
.bg-quan {
border: 6rpx solid #cccccc;
color: #cccccc;
}
}
}
}
.navbar {
display: flex;
height: 80rpx;
padding: 0 5px;
background: #fff;
color: $light-color;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
position: relative;
z-index: 10;
.nav-item {
flex: 1;
height: 100%;
font-size: 26rpx;
color: $light-color;
position: relative;
text-align: center;
text {
line-height: 80rpx;
}
.current {
font-weight: bold;
font-size: 28rpx;
&:after {
content: "";
position: absolute;
bottom: 10rpx;
left: 108rpx;
width: 30rpx;
border-bottom: 2px solid $light-color;
}
}
}
}
</style>