485 lines
13 KiB
Vue
485 lines
13 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view class="tabBox">
|
|
<view :class="selectTab === item.value ? 'tabItem selectTabItem' : 'tabItem'" v-for="(item, index) in tabList"
|
|
:key="index" @click="handleChangeTab(item.value)">
|
|
{{ item.label }}
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view class="couponContent" scroll-y>
|
|
<view class="couponItem" v-for="(item, index) in showCouponList" :key="index">
|
|
<view class="couponItemTop">
|
|
<view class="couponItemLeft" v-if="item.CouponType !== 9000">
|
|
<view class="couponItemPrice">
|
|
<text class="couponItemPriceUnit">¥</text>
|
|
<text class="couponItemPriceValue">{{ item.UseAmount }}</text>
|
|
</view>
|
|
|
|
<view class="couponItemRule" v-if="!item.CouponSendId && item.CouponPoint">{{ item.CouponPoint }}积分兑换</view>
|
|
<view class="couponItemRule" v-else>{{
|
|
item.WithAmount > 0
|
|
? "满" + item.WithAmount + "可用"
|
|
: "无门槛使用"
|
|
}}</view>
|
|
</view>
|
|
<view class="couponItemLeft" v-if="item.CouponType === 9000">
|
|
<view class="couponItemPrice">
|
|
<text class="couponItemPriceUnit">¥</text>
|
|
<text class="couponItemPriceValue">{{ item.UseAmount }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="couponItemRight">
|
|
<view class="couponItemRightLeft">
|
|
<view class="couponItemName">{{ item.CouponName }}</view>
|
|
<view class="couponItemTime" v-if="item.CouponSendId">有效期至{{ item.EndTime }}</view>
|
|
<view class="couponItemTime" v-else>活动至{{ item.EndTime }}</view>
|
|
<view class="couponItemUsedType" @click="handleShowRule(item)"
|
|
v-if="item.PayMethodText && item.CouponType !== 9000">
|
|
<view class="couponItemUsedTypeLabel">使用规则</view>
|
|
<image class="couponItemUsedTypeIcon"
|
|
:style="{ transform: item.showRule ? 'rotate(180deg)' : 'rotate(0deg)' }"
|
|
src="http://saas.eshangtech.com/caiyunyiImg/bottomArrow.png" />
|
|
</view>
|
|
</view>
|
|
<view class="couponItemRightRight">
|
|
<view class="noUsed" v-if="item.CouponState === 0" @click="goShop(item)">去使用</view>
|
|
<view class="used" v-if="item.CouponState === 1">已使用</view>
|
|
<view class="used" v-if="item.CouponState === 2">已过期</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="couponItemBottom" v-if="item.showRule">
|
|
<view class="couponItemBottomDesc">{{ item.PayMethodText }}</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="showCouponList.length === 0">
|
|
<NoData :text="'暂无信息'" />
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import NoData from "../../../components/noData.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,
|
|
tabList: [{ label: "未使用", value: 1 }, { label: "已使用", value: 2 }, { label: "已过期", value: 3 }],// tab的列表
|
|
selectTab: 1,
|
|
allCouponList: [],// 全部类型的 列表
|
|
showCouponList: [],// 当前显示的列表
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: "user",
|
|
isLoading: "isLoading",
|
|
}),
|
|
},
|
|
components: {
|
|
NoData,
|
|
},
|
|
onUnload() {
|
|
this.novalid = [];
|
|
this.couponList = [];
|
|
this.pageMsg.isLoading = true;
|
|
this.pageMsg.activeTabs = 0;
|
|
},
|
|
// onHide () {
|
|
// this.couponOrder = {}
|
|
// this.couponList = []
|
|
// this.novalid = []
|
|
// },
|
|
async onShow() {
|
|
// this.getList();
|
|
await this.handleGetData()
|
|
},
|
|
async onLoad(option) {
|
|
this.$utils.addUserBehaviorNew({
|
|
behaviorRecordDesc: "查看券包"
|
|
});
|
|
// this.setIsLoading(true)
|
|
// this.getUnList();
|
|
// this.$utils.addUserBehaviorNew();
|
|
},
|
|
// 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);
|
|
// },
|
|
methods: {
|
|
...mapMutations({
|
|
setIsLoading: "setIsLoading",
|
|
}),
|
|
// 修改 是否显示规则
|
|
handleShowRule(item) {
|
|
item.showRule = !item.showRule
|
|
this.$forceUpdate();
|
|
},
|
|
// 修改顶部的tab选择
|
|
handleChangeTab(value) {
|
|
this.selectTab = value
|
|
this.showCouponList = this.allCouponList[this.selectTab - 1]
|
|
|
|
console.log('this.showCouponList', this.showCouponList.length);
|
|
|
|
this.$forceUpdate();
|
|
},
|
|
handleGoCouponsList(obj) {
|
|
console.log('obj', obj);
|
|
// uni.navigateTo({
|
|
// url: `/pages/homeFn/payfor/index?cid=${obj.CouponId}`,
|
|
// });
|
|
},
|
|
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,
|
|
// });
|
|
if (item.CouponType === 9000) {
|
|
uni.navigateTo({
|
|
url: `/pages/payfor/index?cid=${item.CouponSendId}`,
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: "/pages/serviceList/index?type=food",
|
|
});
|
|
}
|
|
},
|
|
couponBtn() {
|
|
this.$store.commit("couponPrice", this.couponList[this.radio]);
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
},
|
|
|
|
async handleGetData() {
|
|
const req = {
|
|
CouponStatus: "0,1,2"
|
|
}
|
|
const data = await this.$api.$get("/WeChat/GetMemberCouponList", req)
|
|
console.log('data', data);
|
|
|
|
let list = data.Result_Data.List
|
|
|
|
// 待使用
|
|
let toBeUsed = []
|
|
// 已使用
|
|
let usedAlready = []
|
|
// 已失效
|
|
let expired = []
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
item.showRule = false
|
|
if (item.CouponState === 0) {
|
|
toBeUsed.push(item)
|
|
} else if (item.CouponState === 1) {
|
|
usedAlready.push(item)
|
|
} else if (item.CouponState === 2) {
|
|
expired.push(item)
|
|
}
|
|
})
|
|
}
|
|
console.log('toBeUsedtoBeUsedtoBeUsed', toBeUsed);
|
|
|
|
this.allCouponList = [toBeUsed, usedAlready, expired]
|
|
this.showCouponList = this.allCouponList[this.selectTab - 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) {
|
|
console.log('rsrsrsrsrsrsrs', rs);
|
|
|
|
_this.novalid = rs.Result_Data.List;
|
|
}
|
|
_this.isCustomLoading = false;
|
|
});
|
|
},
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #F1F5F6;
|
|
|
|
.tabBox {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
box-sizing: border-box;
|
|
padding: 30rpx 0 0;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.tabItem {
|
|
// width: 120rpx;
|
|
width: calc(100% / 3);
|
|
height: 58rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
}
|
|
|
|
.selectTabItem {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #EC632E;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
position: relative;
|
|
}
|
|
|
|
.selectTabItem::after {
|
|
content: "";
|
|
width: 2rem;
|
|
height: 6rpx;
|
|
background: #EC632E;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.couponContent {
|
|
width: 100%;
|
|
height: calc(100% - 88rpx);
|
|
box-sizing: border-box;
|
|
padding: 46rpx 24rpx 0;
|
|
|
|
.couponItem {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 28rpx 24rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 22rpx;
|
|
|
|
.couponItemTop {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.couponItemLeft {
|
|
width: 160rpx;
|
|
margin-right: 22rpx;
|
|
|
|
.couponItemPrice {
|
|
text-align: center;
|
|
|
|
.couponItemPriceUnit {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #E84D38;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
}
|
|
|
|
.couponItemPriceValue {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 52rpx;
|
|
color: #E84D38;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.couponItemRule {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #E84D38;
|
|
line-height: 28rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
margin-top: 12rpx;
|
|
}
|
|
}
|
|
|
|
.couponItemRight {
|
|
width: calc(100% - 182rpx);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.couponItemRightLeft {
|
|
width: calc(100% - 120rpx - 44rpx);
|
|
|
|
.couponItemName {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 34rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
/* 最多显示2行 */
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.couponItemTime {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
line-height: 34rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.couponItemUsedType {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 16rpx;
|
|
|
|
.couponItemUsedTypeLabel {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
line-height: 28rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.couponItemUsedTypeIcon {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.couponItemRightRight {
|
|
width: 120rpx;
|
|
margin-left: 44rpx;
|
|
|
|
.noUsed {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
box-sizing: border-box;
|
|
padding: 4rpx 18rpx;
|
|
background: #E84D38;
|
|
border-radius: 26rpx;
|
|
}
|
|
|
|
.used {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
padding: 4rpx 18rpx;
|
|
background: #CCCCCC;
|
|
border-radius: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.couponItemBottom {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 50rpx 0 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
line-height: 28rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-top: 48rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|