668 lines
16 KiB
Vue
668 lines
16 KiB
Vue
<template>
|
|
<div class="coupon" v-show="!pageMsg.isLoading">
|
|
<!-- Tabs Header -->
|
|
<div class="tabs-header">
|
|
<div class="tab-item" :class="{ active: pageMsg.activeTabs === 0 }" @click="changeActive(0)">
|
|
有效
|
|
</div>
|
|
<div class="tab-item" :class="{ active: pageMsg.activeTabs === 1 }" @click="changeActive(1)">
|
|
无效
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs Content -->
|
|
<div class="tabs-content">
|
|
<!-- 有效 Tab -->
|
|
<div v-if="pageMsg.activeTabs === 0" class="tab-panel">
|
|
<div style="padding-top: 24rpx">
|
|
<div class="couponList">
|
|
<div class="couponItem" v-for="(item, i) in couponList" :key="i" @drop="goShop(item)">
|
|
<div class="itemleft">
|
|
<div>
|
|
<span class="leftUnit">¥</span>
|
|
<span class="money">{{ item.UseAmount }}</span>
|
|
</div>
|
|
<div v-if="!item.CouponSendId && item.CouponPoint" class="condition">
|
|
{{ item.CouponPoint }}积分兑换
|
|
</div>
|
|
<div v-else class="condition">
|
|
{{
|
|
item.WithAmount > 0
|
|
? "满" + item.WithAmount + "可用"
|
|
: "无门槛使用"
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="itemRight">
|
|
<div>
|
|
<div class="couponName">{{ item.CouponName }}</div>
|
|
<div class="timeText">
|
|
<span class="coupon-date" v-if="item.CouponSendId">有效期至{{ item.EndTime }}</span>
|
|
<span class="coupon-date" v-else>活动至{{ item.EndTime }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="useBtn">
|
|
<span class="useBtnText" v-if="!item.CouponSendId" @click="goShop(item)">去兑换</span>
|
|
<span class="useBtnText" @click="goShop(item)" v-else-if="item.CouponState == 0">立即使用</span>
|
|
<span class="useBtnText" v-else>{{
|
|
item.CouponStateText
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <Card
|
|
:props="item"
|
|
v-for="(item, i) in couponList"
|
|
:key="i"
|
|
@drop="goShop"
|
|
/> -->
|
|
</div>
|
|
<no-data :text="'您暂无可使用的优惠券'" :isShow="!(couponList && couponList.length > 0)" />
|
|
</div>
|
|
|
|
<!-- 无效 Tab -->
|
|
<div v-if="pageMsg.activeTabs === 1" class="tab-panel">
|
|
<div style="padding-top: 24rpx">
|
|
<div class="invalidList">
|
|
<div class="couponItem" v-for="(item, i) in novalid" :key="i" @drop="goShop(item)">
|
|
<div class="itemleft">
|
|
<div>
|
|
<span class="leftUnit">¥</span>
|
|
<span class="money">{{ item.UseAmount }}</span>
|
|
</div>
|
|
<div v-if="!item.CouponSendId && item.CouponPoint" class="condition">
|
|
{{ item.CouponPoint }}积分兑换
|
|
</div>
|
|
<div v-else class="condition">
|
|
{{
|
|
item.WithAmount > 0
|
|
? "满" + item.WithAmount + "可用"
|
|
: "无门槛使用"
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="itemRight">
|
|
<div>
|
|
<div class="couponName">{{ item.CouponName }}</div>
|
|
<div class="timeText">
|
|
<span class="coupon-date" v-if="item.CouponSendId">有效期至{{ item.EndTime }}</span>
|
|
<span class="coupon-date" v-else>活动至{{ item.EndTime }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="useBtn">
|
|
<span class="useBtnText">已过期</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <Card
|
|
:props="item"
|
|
v-for="(item, i) in novalid"
|
|
:key="i"
|
|
@drop="goShop"
|
|
/> -->
|
|
</div>
|
|
<no-data :text="'暂无信息'" :isShow="!(novalid.length > 0)" />
|
|
</div>
|
|
</div>
|
|
<CustomLoading :visible="isCustomLoading" />
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import NoData from "@/components/noData.vue";
|
|
import Card from "@/components/card.vue";
|
|
import CustomLoading from "../../../components/customLoading.vue";
|
|
import { mapGetters, mapMutations } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
radio: 0,
|
|
pageMsg: {
|
|
isLoading: true,
|
|
pageSize: 10,
|
|
pageIndex: 1,
|
|
activeTabs: 0,
|
|
},
|
|
isCoupon: false,
|
|
isBgcolor: false,
|
|
couponOrder: {},
|
|
couponList: [],
|
|
specialCards: [], // 专享券
|
|
novalid: [],
|
|
isCustomLoading: false
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: "user",
|
|
isLoading: "isLoading",
|
|
}),
|
|
},
|
|
components: {
|
|
NoData,
|
|
Card, CustomLoading
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
setIsLoading: "setIsLoading",
|
|
}),
|
|
changeActive(index) {
|
|
this.pageMsg.activeTabs = index;
|
|
},
|
|
getRadio(item) {
|
|
if (this.radio === item) {
|
|
this.radio = "";
|
|
} else {
|
|
this.radio = parseInt(item);
|
|
}
|
|
},
|
|
goShop(item) {
|
|
uni.navigateTo({
|
|
url: "/pages/couponDetail/index?sendId=" + item.CouponSendId,
|
|
});
|
|
},
|
|
couponBtn() {
|
|
this.$store.commit("couponPrice", this.couponList[this.radio]);
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
},
|
|
|
|
getList() {
|
|
let _this = this;
|
|
this.$api
|
|
.$get("/WeChat/GetMemberCouponList", { CouponStatus: 0 })
|
|
.then((rs) => {
|
|
_this.pageMsg.isLoading = false;
|
|
if (rs.Result_Code === 100) {
|
|
_this.couponList =
|
|
_this.pageMsg.pageIndex === 1
|
|
? rs.Result_Data.List
|
|
: _this.couponList.concat(rs.Result_Data.List);
|
|
if (rs.Result_Data.TotalCount > _this.couponList.length) {
|
|
_this.pageMsg.isLoadMore = true;
|
|
} else {
|
|
_this.pageMsg.isLoadMore = false;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
getUnList() {
|
|
this.isCustomLoading = true
|
|
let _this = this;
|
|
_this.$api
|
|
.$get("/WeChat/GetMemberCouponList", { CouponStatus: "1,2" })
|
|
.then((rs) => {
|
|
if (rs.Result_Code === 100) {
|
|
_this.novalid = rs.Result_Data.List;
|
|
}
|
|
_this.isCustomLoading = false
|
|
});
|
|
},
|
|
},
|
|
onUnload() {
|
|
this.novalid = [];
|
|
this.couponList = [];
|
|
this.pageMsg.isLoading = true;
|
|
this.pageMsg.activeTabs = 0;
|
|
},
|
|
// onHide () {
|
|
// this.couponOrder = {}
|
|
// this.couponList = []
|
|
// this.novalid = []
|
|
// },
|
|
onShow() {
|
|
this.getList();
|
|
},
|
|
onLoad(option) {
|
|
// this.setIsLoading(true)
|
|
|
|
this.getUnList();
|
|
},
|
|
onReachBottom() {
|
|
if (this.pageMsg.isLoadMore) {
|
|
this.pageMsg.pageIndex += 1;
|
|
this.getList();
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
this.pageMsg.pageIndex = 1;
|
|
this.getList();
|
|
this.getUnList();
|
|
setTimeout(function () {
|
|
uni.stopPullDownRefresh();
|
|
}, 1000);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
bodyColor = #CAA97F;
|
|
color999 = #999999;
|
|
|
|
.coupon {
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.coupon-bg {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.coupon-title {
|
|
color: #333333;
|
|
font-size: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 638rpx;
|
|
margin: 30rpx auto 0 auto;
|
|
|
|
image {
|
|
width: 62rpx;
|
|
height: 62rpx;
|
|
margin-right: 24rpx;
|
|
border-radius: 36rpx;
|
|
}
|
|
}
|
|
|
|
.tabs-header {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.tab-item {
|
|
// flex: 1;
|
|
text-align: center;
|
|
padding: 12px 0;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
color: #333;
|
|
}
|
|
|
|
.tab-item.active {
|
|
font-weight: bold;
|
|
color: #caa97f; /* 激活状态颜色 */
|
|
border-bottom: 2px solid #caa97f; /* 激活状态下的底部边框 */
|
|
}
|
|
|
|
.tabs-content {
|
|
padding: 10px;
|
|
}
|
|
|
|
.tab-panel {
|
|
display: block;
|
|
|
|
.couponList {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
.couponItem {
|
|
width: 100%;
|
|
height: 144rpx;
|
|
background: url('https://eshangtech.com/wanmeiyizhanImg/home/validCoupons.png') no-repeat center;
|
|
background-size: contain;
|
|
box-sizing: border-box;
|
|
padding: 32rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 32rpx;
|
|
|
|
.itemleft {
|
|
width: 195rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-right: 2rpx dashed #E5CD92;
|
|
|
|
.leftUnit {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 34rpx;
|
|
color: #BA922F;
|
|
line-height: 48rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.money {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 48rpx;
|
|
color: #BA922F;
|
|
line-height: 56rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.condition {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #BA922F;
|
|
line-height: 28rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.itemRight {
|
|
flex: 1;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.couponName {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130F05;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.timeText {
|
|
.coupon-date {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #716F69;
|
|
line-height: 32rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.useBtn {
|
|
.useBtnText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
line-height: 36rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
padding: 8rpx 20rpx;
|
|
background: #BA922F;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.invalidList {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
.couponItem {
|
|
width: 100%;
|
|
height: 144rpx;
|
|
background: url('https://eshangtech.com/wanmeiyizhanImg/home/invalidCoupons.png') no-repeat center;
|
|
background-size: contain;
|
|
box-sizing: border-box;
|
|
padding: 32rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 32rpx;
|
|
|
|
.itemleft {
|
|
width: 195rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-right: 2rpx dashed #E5CD92;
|
|
|
|
.leftUnit {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 34rpx;
|
|
color: #716F69;
|
|
line-height: 48rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.money {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 48rpx;
|
|
color: #716F69;
|
|
line-height: 56rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.condition {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #716F69;
|
|
line-height: 28rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.itemRight {
|
|
flex: 1;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.couponName {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #716F69;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.timeText {
|
|
.coupon-date {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #716F69;
|
|
line-height: 32rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.useBtn {
|
|
.useBtnText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #716F69;
|
|
line-height: 36rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
// padding: 8rpx 20rpx;
|
|
// background: #BA922F;
|
|
// border-radius: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.coupon-card {
|
|
background: url('https://eshangtech.com/ShopICO/coupon-bg.png') no-repeat center; // eshangtech.com/ShopICO/coupon-bg.png) no-repeat center
|
|
background-size: contain;
|
|
height: 229rpx;
|
|
width: 669rpx;
|
|
padding: 20rpx 30rpx;
|
|
margin: 30rpx auto 0 auto;
|
|
box-sizing: border-box;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.coupon-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.coupon-left {
|
|
text-align: center;
|
|
color: bodyColor;
|
|
}
|
|
|
|
.coupon-price {
|
|
color: #323033;
|
|
font-size: 46rpx;
|
|
font-weight: bolder;
|
|
font-family: 'San Francisco Display Medium';
|
|
line-height: 46rpx;
|
|
}
|
|
|
|
.coupon-manjian {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.coupon-center {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
// margin-top 16rpx
|
|
}
|
|
|
|
.coupon-img {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
border-radius: 10rpx;
|
|
background: #dddddd;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.coupon-zx {
|
|
display: inline-block;
|
|
padding: 6rpx 10rpx;
|
|
color: #be6f6b;
|
|
border: 2rpx solid #edd0cc;
|
|
background: #fef4f3;
|
|
border-radius: 6rpx;
|
|
margin: 6rpx 0;
|
|
}
|
|
|
|
.coupon-name {
|
|
color: #000;
|
|
font-size: 28rpx;
|
|
margin-bottom: 20rpx;
|
|
// font-weight 800
|
|
}
|
|
|
|
.coupon-right {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.coupon-use-door {
|
|
background: url('https://eshangtech.com/ShopICO/coupon-btn.png') no-repeat center; // eshangtech.com/ShopICO/coupon-btn.png) no-repeat center
|
|
background-size: contain;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: 120rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.coupon-door {
|
|
display: inline-block;
|
|
background: #f2f2f2;
|
|
color: #999;
|
|
padding: 6rpx 30rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.coupon-date {
|
|
color: #333333;
|
|
}
|
|
|
|
.span24 {
|
|
display: block;
|
|
color: color999;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.coupon-btn {
|
|
height: 100rpx;
|
|
width: 100%;
|
|
line-height: 100rpx;
|
|
background: #333;
|
|
color: bodyColor;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
left: 0rpx;
|
|
}
|
|
|
|
.activity-btn {
|
|
width: 152rpx;
|
|
height: 46rpx;
|
|
// position absolute
|
|
// bottom 74rpx
|
|
// left 55rpx
|
|
color: #666;
|
|
background: #eee;
|
|
border: 2rpx solid #ededed;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
border-radius: 36rpx;
|
|
line-height: 48rpx;
|
|
margin-top: 36rpx;
|
|
margin-bottom: 17rpx;
|
|
}
|
|
|
|
.activity-card {
|
|
background: url('https://eshangtech.com/ShopICO/activity_card_201907292.png') no-repeat center; // eshangtech.com/ShopICO/activity_card_201907292.png) no-repeat center
|
|
background-size: contain;
|
|
width: 673rpx;
|
|
height: 310rpx;
|
|
padding: 35rpx 56rpx;
|
|
text-align: left;
|
|
margin: 12rpx auto 0 auto;
|
|
box-sizing: border-box;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.use-card-btn {
|
|
width: 152rpx;
|
|
height: 46rpx;
|
|
color: #fff;
|
|
background: linear-gradient(to right, #A17356, #D8AA8B);
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
border-radius: 36rpx;
|
|
line-height: 48rpx;
|
|
margin-top: 38rpx;
|
|
margin-bottom: 17rpx;
|
|
}
|
|
</style>
|