|
@@ -1,221 +0,0 @@
|
|
|
-<template>
|
|
|
|
|
- <style-dialog
|
|
|
|
|
- v-if="visible"
|
|
|
|
|
- @close="handleClose"
|
|
|
|
|
- title="">
|
|
|
|
|
-
|
|
|
|
|
- <view class="page pt-20 pr-40 pl-40">
|
|
|
|
|
- <view class="tab-list flex-align-end">
|
|
|
|
|
- <view class="fs-28 color-666 mt-20 w50" :class="mode===0?'active':''" @click="changeTab(0)">权益卡</view>
|
|
|
|
|
- <view class="fs-28 color-666 mt-20 w50" :class="mode===1?'active':''" @click="changeTab(1)">优惠券</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view>
|
|
|
|
|
- <view
|
|
|
|
|
- class="item mt-20 "
|
|
|
|
|
- v-for="(item, index) in list"
|
|
|
|
|
- :class="item.status==0?'inactive':''"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- >
|
|
|
|
|
- <image class="full-percent" src="../static/discount-bg.png"></image>
|
|
|
|
|
- <view class="absolute-full flex pt-8 pb-8">
|
|
|
|
|
- <view class="left flex-justify-center pl-48">
|
|
|
|
|
-
|
|
|
|
|
- <view class="item-content_left">
|
|
|
|
|
- <view class="flex-align-end">
|
|
|
|
|
- <view class="item-header__left">
|
|
|
|
|
- <image class="width-84" src="../static/discount-rights-card.png" mode="widthFix"></image>
|
|
|
|
|
- <view class="fs-48 lh-58 color-000 fw-500 ml-16">{{ item.discountAmount }}折
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="fs-26 color-999 ml-16" v-if="mode === 0"
|
|
|
|
|
- >用于充电服务费抵扣
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <!-- <view class="item-header__right flex-grow">
|
|
|
|
|
- <view class="item-status ml-10">{{ item.status == 0 ? '已失效' : '生效中' }}</view>
|
|
|
|
|
- </view>-->
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- <block>
|
|
|
|
|
- <view class="fs-26 color-999 mt-8"
|
|
|
|
|
- >
|
|
|
|
|
- <view class="fs-26 color-999 mt-24">到期时间:{{ item.endTime }}</view>
|
|
|
|
|
- <!-- <view class="flex-align-center" v-if="mode === 0">
|
|
|
|
|
- <view class="fs-26 color-999 mt-24">权益余额:{{ ((item.rightsBalance || 0) / 100).toFixed(2) }}元
|
|
|
|
|
- <text class="color-primary">详细规则</text>
|
|
|
|
|
- <text class="fs-24 ml-4 color-primary">>></text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>-->
|
|
|
|
|
- </view>
|
|
|
|
|
- </block>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="item-content_right">
|
|
|
|
|
- <view class="item-status ml-10" @click.stop="handleCollectCoupon(item)">领券</view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- </view>
|
|
|
|
|
- >
|
|
|
|
|
- </style-dialog>
|
|
|
|
|
-
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
-<script setup lang="ts">
|
|
|
|
|
-import {onPullDownRefresh} from "@dcloudio/uni-app";
|
|
|
|
|
-import {ref} from "vue";
|
|
|
|
|
-import {collectCoupon, listAvailableCoupons} from "@/api/user";
|
|
|
|
|
-
|
|
|
|
|
-const mode = ref(0);
|
|
|
|
|
-const list = ref<any[]>([]);
|
|
|
|
|
-const couponList = ref<any[]>([]);
|
|
|
|
|
-const stationId = ref(-1);
|
|
|
|
|
-const visible = ref(false);
|
|
|
|
|
-
|
|
|
|
|
-const handleClose = () => {
|
|
|
|
|
-
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-onPullDownRefresh(() => {
|
|
|
|
|
- loadData();
|
|
|
|
|
-});
|
|
|
|
|
-
|
|
|
|
|
-const changeTab = (tab: number) => {
|
|
|
|
|
- mode.value = tab;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-const handleCollectCoupon = (coupon: any) => {
|
|
|
|
|
- collectCoupon(coupon.id).then((res) => {
|
|
|
|
|
- console.log(res)
|
|
|
|
|
- uni.showToast({
|
|
|
|
|
- title: "领券成功",
|
|
|
|
|
- icon: "success"
|
|
|
|
|
- });
|
|
|
|
|
- });
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-const loadData = () => {
|
|
|
|
|
- uni.showLoading({
|
|
|
|
|
- title: "加载中",
|
|
|
|
|
- });
|
|
|
|
|
- listAvailableCoupons(stationId.value).then((res) => {
|
|
|
|
|
- console.log(res)
|
|
|
|
|
- uni.hideLoading();
|
|
|
|
|
- couponList.value = res.list;
|
|
|
|
|
- });
|
|
|
|
|
-}
|
|
|
|
|
-const open = (stationId: any) => {
|
|
|
|
|
- visible.value = true;
|
|
|
|
|
- stationId.value = stationId;
|
|
|
|
|
- loadData()
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-defineExpose({
|
|
|
|
|
- open
|
|
|
|
|
-})
|
|
|
|
|
-</script>
|
|
|
|
|
-
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
|
-.page {
|
|
|
|
|
- min-height: 100vh;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- background-color: #f6f7fa;
|
|
|
|
|
-
|
|
|
|
|
- .item {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- min-height: 220rpx;
|
|
|
|
|
- border-radius: 20rpx;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
-
|
|
|
|
|
- .left {
|
|
|
|
|
- flex-grow: 1;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .right {
|
|
|
|
|
- flex-shrink: 0;
|
|
|
|
|
-
|
|
|
|
|
- .btn {
|
|
|
|
|
- border-radius: 8rpx;
|
|
|
|
|
- border: 1px solid var(--color-primary);
|
|
|
|
|
- color: var(--color-primary);
|
|
|
|
|
- width: 144rpx;
|
|
|
|
|
- height: 56rpx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .tab-list {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
-
|
|
|
|
|
- .w50 {
|
|
|
|
|
- width: 50%;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .active {
|
|
|
|
|
- color: var(--color-primary);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.item-status {
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- padding: 0rpx 2rpx;
|
|
|
|
|
- color: var(--color-primary);
|
|
|
|
|
- border: 2rpx solid var(--color-primary);
|
|
|
|
|
- border-radius: 6rpx;
|
|
|
|
|
-
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.item-header__left {
|
|
|
|
|
- display: inline-flex;
|
|
|
|
|
- align-items: flex-end;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.item-header__right {
|
|
|
|
|
- padding: 5rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- //justify-content: flex-end;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.inactive {
|
|
|
|
|
- cursor: not-allowed;
|
|
|
|
|
- pointer-events: none;
|
|
|
|
|
-
|
|
|
|
|
- .item-status {
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- padding: 0rpx 2rpx;
|
|
|
|
|
- color: #ccc !important;
|
|
|
|
|
- border: 2rpx solid #ccc;
|
|
|
|
|
- border-radius: 6rpx;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .color-primary {
|
|
|
|
|
- color: #ccc !important;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.item-content_left {
|
|
|
|
|
- flex-grow: 1;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- justify-content: space-around;
|
|
|
|
|
-
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.item-content_right {
|
|
|
|
|
- width: 120rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- align-content: center;
|
|
|
|
|
-}
|
|
|
|
|
-</style>
|
|
|