领券弹窗

src/components/charge-station/charge-station.vue

@@ -7,17 +7,15 @@
     }"
       @touchstart="touchstart"
       @touchend="touchend"
-      data-method="detail"
   >
     <view class="flex-between">
       <view>
         <view class="flex flex-align-center">
-          <view class="fs-32 fw-bold">{{ title }}</view>
-          <view class="coupon-box ml-5"
+          <view class="fs-32 fw-bold" @click.stop="detail">{{ title }}</view>
+          <view class="coupon-box ml-5" @click.stop="toCouponCenter"
                 v-if="activityList&&activityList.length>0"
                 @touchstart="touchstart"
                 @touchend.stop="touchend"
-                data-method="toCouponCenter"
           >
             <!--            <image src="/static/images/coupon-center.png" mode="widthFix" style="width:42rpx"/>-->
             <text>领券</text>
@@ -28,7 +26,7 @@
         <view v-if="tag">
           <view class="flex-center tag">{{ tagMap[tag] }}</view>
         </view>
-        <view v-else class="fs-22" style="color: rgba(0, 0, 0, 0.5)"
+        <view v-else @click.stop="detail" class="fs-22" style="color: rgba(0, 0, 0, 0.5)"
         >{{ address }} | {{ distance }}km
         </view
         >
@@ -43,7 +41,7 @@
         <text>导航</text>
       </view>
     </view>
-    <view class="mt-20 flex">
+    <view class="mt-20 flex" @click.stop="detail">
       <view class="status flex-column flex-grow">
         <view class="flex-align-center" v-if="price">
           <text class="fs-32 fw-600" style="color: var(--color-warning)">{{
@@ -114,13 +112,16 @@
         >
       </view>
     </view>
+    <station-coupon ref="station_coupon_ref"></station-coupon>
   </view>
 </template>
 
 <script lang="ts">
 import {addCollectList, fetchCollectList} from "../../api/user";
+import StationCoupon from "@/components/station-coupon/station-coupon.vue";
 
 export default {
+  components: {StationCoupon},
   props: {
     sId: {
       type: String,
@@ -182,6 +183,7 @@ export default {
       // uni.navigateTo({
       //   url: `/pages-charge/coupon-center/coupon-center?title=${this.title}&id=${this.sId}`,
       // });
+      this.$refs.station_coupon_ref?.open(this.sId);
     },
     detail() {
       const {address, latitude, longitude, activityList} = this;
@@ -234,9 +236,9 @@ export default {
     },
     touchend(e: any) {
       const current = new Date().getTime();
-      if (current - this.touchtime < 100) {
-        this[e.currentTarget.dataset.method]();
-      }
+      // if (current - this.touchtime < 100) {
+      //   this[e.currentTarget.dataset.method]();
+      // }
     },
   },
 };
@@ -309,53 +311,6 @@ export default {
   font-size: 18rpx;
   border-radius: 4rpx;
   padding: 0rpx 6rpx;
-
-  /*  background: linear-gradient(
-            -135deg,
-            transparent 12rpx,
-            #fff 22rpx,
-            #dd524d 100%
-    )
-    top right,
-    linear-gradient(
-            -45deg,
-            transparent 12rpx,
-            #fff 22rpx,
-            #dd524d 100%
-    )
-    bottom right;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;*/
-
-  /*flex-shrink: 0;
-  background-size: 70% 70%;
-  background-image: radial-gradient(
-          circle at 100% 100%,
-          transparent 0,
-          transparent 12px,
-          #2179f5 13px
-  ),
-  radial-gradient(
-          circle at 0 0,
-          transparent 0,
-          transparent 12px,
-          #2179f5 13px
-  ),
-  radial-gradient(
-          circle at 100% 0,
-          transparent 0,
-          transparent 12px,
-          #2179f5 13px
-  ),
-  radial-gradient(
-          circle at 0 100%,
-          transparent 0,
-          transparent 12px,
-          #2179f5 13px
-  );
-  background-repeat: no-repeat;
-  background-position: right bottom, left top, right top, left bottom;
-*/
   text {
     font-size: 24rpx;
   }

src/components/station-coupon/station-coupon.vue

@@ -0,0 +1,234 @@
+<template>
+  <style-dialog
+      v-if="visible"
+      @close="handleClose"
+      title="站点优惠券领取">
+
+    <view class="page pt-20 pr-40 pl-40">
+      <view>
+        <view
+            class="item mt-20 "
+            v-for="(item, index) in couponList"
+            :class="item.collected?'inactive':''"
+            :key="index"
+        >
+          <image class="full-percent" src="/static/images/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/images/discount-coupon.png"
+                        mode="widthFix"
+                    ></image>
+                    <view></view>
+                    <view class="fs-48 lh-58 color-000 fw-500 ml-16" v-if="item.couponType=='FullDiscount'">
+                      {{ ((item.discount || 0) / 100).toFixed(2) }}元
+                    </view>
+
+                    <view class="fs-48 lh-58 color-000 fw-500 ml-16" v-else>
+                      {{ (item.discount / 10).toFixed(1) }}折
+                    </view>
+
+                    <view class="fs-26 color-999 ml-16">
+                      充电服务费：{{ item.couponType == 'FullDiscount' ? '满减券' : '折扣券' }}
+                    </view>
+                  </view>
+
+                </view>
+
+                <block >
+                  <view class="fs-26 color-999 mt-8"
+                        @click.stop="to(`/pages-common/activity/activity?id=${item.activityId}`)">
+                    <view class="fs-26 color-999">到期时间：{{ item.endTime }}</view>
+                    <view class="flex-align-center">
+                      <view class="fs-26 color-999">服务费门槛：{{ ((item.minServiceMoney || 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" @tap.stop="handleCollectCoupon(item,index)">{{item.collected?'已领取':'领取'}}</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";
+import {to} from "@/utils/navigate";
+
+const mode = ref(0);
+const list = ref<any[]>([]);
+const couponList = ref<any[]>([]);
+const stationId = ref(null);
+const visible = ref(false);
+
+const handleClose = () => {
+ visible.value = false;
+}
+
+onPullDownRefresh(() => {
+  loadData();
+});
+
+const changeTab = (tab: number) => {
+  mode.value = tab;
+}
+
+const handleCollectCoupon = (coupon: any,index:number) => {
+  if(coupon.collected)return;
+  collectCoupon(coupon.id).then((res) => {
+    console.log(res)
+    uni.showToast({
+      title: "领券成功",
+      icon: "success"
+    });
+    couponList.value[index].collected = true;
+  }).catch(e=>{
+    console.error(e)
+    if(e.errMsg){
+      uni.showToast({
+        title: e.errMsg,
+        icon: "none"
+      });
+    }
+  });
+}
+
+
+const loadData = () => {
+  uni.showLoading({
+    title: "加载中",
+  });
+  listAvailableCoupons(stationId.value).then((res) => {
+    console.log(res)
+    uni.hideLoading();
+    couponList.value = res.list;
+  });
+}
+const open = (sid: any) => {
+  visible.value = true;
+  stationId.value = sid;
+  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 6rpx;
+  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 6rpx;
+    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>

src/components/style-dialog/style-dialog.vue

@@ -1,9 +1,9 @@
 <template>
-  <view class="style-dialog">
+  <view class="style-dialog" @click.stop>
     <view :style="{ background }">
       <view class="style-dialog_head flex-center">
         <view class="fw-500 color-000 fs-32">{{ title }}</view>
-        <view class="close" @click="close">
+        <view class="close" @click.stop="close">
           <uni-icons type="closeempty" size="24" color="#2D284B"></uni-icons>
         </view>
       </view>

src/pages-charge/machines/machines.vue

@@ -28,7 +28,16 @@
     </view>
     <view class="pl-20 pr-20">
       <view class="station flex-column" v-if="canUseCount >= 0">
-        <view class="fs-40 fw-600 color-000">{{ title }}</view>
+        <view style="display: inline-flex;align-items: center;">
+          <view class="fs-40 fw-600 color-000">{{ title }}</view>
+          <view class="coupon-box ml-5"
+                v-if="location.activityList&&location.activityList.length>0"
+                @tap.stop="toCouponCenter"
+          >
+<!--            <image src="/static/images/coupon-center.png" mode="widthFix" style="width:42rpx"/>-->
+            <text @tap.stop="showStationCoupon">领券</text>
+          </view>
+        </view>
         <view class="flex-align-center mt-10 height-48 relative flex-shrink">
           <image
             src="/pages-charge/static/machines-banner-address.png"
@@ -160,6 +169,7 @@
         </view>
       </view>
     </view>
+    <station-coupon ref="station_coupon_ref"></station-coupon>
   </view>
 </template>
 
@@ -169,6 +179,7 @@ import { fetchStation, fetchStationPriceDesc } from "../../api/charge";
 import { onLoad } from "@dcloudio/uni-app";
 import ChargeMachine from "./charge-machine/charge-machine.vue";
 import PriceDesc from "./price-desc/price-desc.vue";
+import StationCoupon from "@/components/station-coupon/station-coupon.vue";
 const dialogVisible = ref(false);
 const dialogType = ref("");
 const desc = ref<any[]>([]);
@@ -200,6 +211,8 @@ const station = ref();
 const stationEquipmentInfos = ref();
 const currentTime = ref();
 
+const station_coupon_ref = ref(null);
+
 onLoad((options: any) => {
   const _title = options.title || "";
   uni.setNavigationBarTitle({
@@ -207,12 +220,13 @@ onLoad((options: any) => {
   });
   title.value = _title;
   if (getApp<any>().globalData.lastData.station) {
-    const { address, latitude, longitude } =
+    const { address, latitude, longitude ,activityList} =
       getApp<any>().globalData.lastData.station;
     location.value = {
       address,
       latitude,
       longitude,
+      activityList
     };
     getApp<any>().globalData.lastData.station = undefined;
   }
@@ -339,6 +353,11 @@ const previewImage = (url: string) => {
     current: url,
   });
 };
+
+const showStationCoupon = ()=>{
+  console.log(station.value)
+  station_coupon_ref.value?.open(station.value.StationID);
+}
 </script>
 
 <style lang="scss">
@@ -434,4 +453,19 @@ page {
     }
   }
 }
+
+
+.coupon-box {
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #fff;
+  background-color: #dd524d;
+  font-size: 18rpx;
+  border-radius: 4rpx;
+  padding: 0rpx 6rpx;
+  text {
+    font-size: 24rpx;
+  }
+}
 </style>

src/pages/map/map.vue

@@ -193,6 +193,7 @@
               :distance="item.stationLatDistance"
               :latitude="item.location.stationLat"
               :longitude="item.location.stationLng"
+              :activity-list="item.activityList"
               :fromMap="true"
             ></charge-station>
           </view>
@@ -212,6 +213,7 @@
               :distance="station[markersIndex].stationLatDistance"
               :latitude="station[markersIndex].location.stationLat"
               :longitude="station[markersIndex].location.stationLng"
+              :activity-list="station[markersIndex].activityList"
               :fromMap="true"
             ></charge-station>
           </view>