feat:充值优惠选择

src/api/user.ts

@@ -8,6 +8,13 @@ export function fetchProfile() {
     res.balance = (Number(res.balance) / 100).toFixed(2);
     res.discountAmount = (Number(res.discountAmount) / 100).toFixed(2);
     res.refundableAmount = (Number(res.refundableAmount) / 100).toFixed(2);
+    if (isDebug) {
+      res.userRechargeRightsList = [
+        {
+          discount: 90,
+        },
+      ];
+    }
     getApp<any>().globalData.user = res;
     return res;
   });

src/components/style-checkbox/style-checkbox.vue

@@ -1,7 +1,9 @@
 <template>
   <view
-    class="height-32 width-32 lh-24 br-round flex-justify-center"
+    class="lh-24 br-round flex-center"
     :style="{
+      width: `${size}rpx`,
+      height: `${size}rpx`,
       border: checked
         ? '1rpx solid var(--color-primary)'
         : '1rpx solid rgba(0,0,0,0.15)',
@@ -11,7 +13,7 @@
     <uni-icons
       v-if="checked"
       type="checkmarkempty"
-      size="10"
+      :size="iconsize"
       color="#ffffff"
     ></uni-icons>
   </view>
@@ -21,9 +23,16 @@
 export default {
   props: {
     checked: Boolean,
+    size: {
+      type: Number,
+      default: 32,
+    },
+    iconsize: {
+      type: Number,
+      default: 10,
+    },
   },
 };
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>

src/pages-charge/appointment/appointment.vue

@@ -121,6 +121,31 @@
             </view>
           </view>
         </view>
+        <view
+          class="mt-20 block flex-align-center pl-30 pr-30 pt-30 pb-30"
+          @click="
+            to(
+              `/pages-charge/discount/discount?index=${discountIndex}&id=${activity.id}`
+            )
+          "
+        >
+          <view class="fs-28 lh-28 color-000 fw-500">优惠</view>
+          <block v-if="discountList.length > 0">
+            <view class="fs-28 lh-28 ml-auto" style="color: #f43636"
+              >{{ discountList[discountIndex].discountFormat }}折</view
+            >
+          </block>
+          <block v-else>
+            <view
+              class="fs-28 lh-28 ml-auto"
+              style="color: #f43636"
+              v-if="activity"
+              >{{ activity.minDiscount }}折</view
+            >
+            <view class="fs-28 lh-28 color-666 ml-8">权益待领取</view>
+          </block>
+          <uni-icons type="right" size="16" color="#CACACA"></uni-icons>
+        </view>
         <view
           class="mt-20 block flex-align-center pl-30 pr-30 pt-30 pb-30"
           v-if="chargeType === 0"
@@ -241,11 +266,13 @@ import {
   cancelAppointmentCharge,
   changeAppointmentTime,
 } from "@/api/charge";
-import { onLoad } from "@dcloudio/uni-app";
+import { fetchProfile } from "@/api/user";
+import { onLoad, onShow } from "@dcloudio/uni-app";
 import { ref } from "vue";
 import ChargeMachine from "../machines/charge-machine/charge-machine.vue";
 import PriceDesc from "../machines/price-desc/price-desc.vue";
 import { format } from "@/utils/date";
+import { to } from "../../utils/navigate";
 
 const DAY = 24 * 60 * 60 * 1000;
 const options = ref<any>();
@@ -280,6 +307,10 @@ const chargeTime = ref({
 const appointmentData = ref();
 const appointmentCountDown = ref();
 
+const discountIndex = ref(-1);
+const discountList = ref<any[]>([]);
+const activity = ref();
+
 const changeType = (index: number) => {
   chargeType.value = index;
 };
@@ -606,6 +637,9 @@ const submit = () => {
   if (chargeType.value === 1) {
     query += "isBooking=false";
   }
+  if (discountIndex.value >= 0) {
+    query += `&rechargeRightsId=${discountList.value[discountIndex.value].id}`;
+  }
   console.log(query);
   uni.showLoading({
     title: "提交中",
@@ -706,6 +740,34 @@ onLoad((_options: any) => {
       console.log(err);
       uni.hideLoading();
     });
+  fetchProfile().then((res) => {
+    if (res.userRechargeRightsList.length) {
+      res.userRechargeRightsList.forEach((item: any) => {
+        item.discountFormat = Number((Number(item.discount) / 10).toFixed(2));
+      });
+      discountList.value = res.userRechargeRightsList;
+      discountIndex.value = 0;
+    }
+
+    if (res.activityList && res.activityList.length) {
+      res.activityList[0].rechargeRightsList.sort((a: any, b: any) => {
+        return a.discount - b.discount;
+      });
+      activity.value = res.activityList[0];
+      activity.value.minDiscount = Number(
+        (
+          Number(res.activityList[0].rechargeRightsList[0].discount) / 10
+        ).toFixed(2)
+      );
+    }
+  });
+});
+
+onShow(() => {
+  if (getApp<any>().globalData.lastData.discount) {
+    discountIndex.value = getApp<any>().globalData.lastData.discount.index;
+    getApp<any>().globalData.lastData.discount = undefined;
+  }
 });
 </script>
 

src/pages-charge/discount/discount.vue

@@ -0,0 +1,175 @@
+<template>
+  <view class="page pt-20 pr-40 pl-40">
+    <view class="fs-28 color-666 mt-20" v-if="mode === 0">充电优惠权益卡</view>
+    <view
+      class="item mt-20"
+      v-for="(item, index) in list"
+      v-if="mode >= 0"
+      :key="index"
+      @click="checkDiscount(index)"
+    >
+      <image
+        class="full-percent"
+        src="/pages-charge/static/discount-bg.png"
+      ></image>
+      <view class="absolute-full flex pt-8 pb-8">
+        <view class="left flex-column flex-justify-center pl-48">
+          <view class="flex-align-end">
+            <image
+              class="width-92"
+              src="/pages-charge/static/discount-coupon.png"
+              mode="widthFix"
+            ></image>
+            <view class="fs-48 lh-58 color-000 fw-500 ml-16"
+              >{{ item.discountFormat }}折</view
+            >
+            <view class="fs-26 color-999 ml-16" v-if="mode === 0"
+              >充电服务费</view
+            >
+          </view>
+          <view class="flex-align-center" v-if="mode === 0">
+            <view class="fs-26 color-999 mt-24"
+              >充{{ item.rightsBalanceFormat }}元送｜</view
+            >
+            <view class="fs-26 color-999 mt-24"
+              >{{ item.endTimeFormat }}到期</view
+            >
+          </view>
+          <block v-if="mode === 1">
+            <view class="fs-26 color-999 mt-24">{{ item.rightsDesc }}</view>
+            <view
+              class="fs-26 color-999 mt-8"
+              @click.stop="
+                to(`/pages-common/activity/activity?id=${activity.id}`)
+              "
+            >
+              <text>有效期{{ item.validity }}天，</text>
+              <text class="color-primary">详细规则</text>
+              <text class="fs-24 ml-4 color-primary">>></text>
+            </view>
+          </block>
+        </view>
+        <view v-if="mode === 0" class="right width-80 flex-center">
+          <style-checkbox
+            :size="48"
+            :checked="checkIndex === index"
+            :iconsize="16"
+          ></style-checkbox>
+        </view>
+        <view
+          v-if="mode === 1"
+          class="right flex-center"
+          :style="{
+            width: '210rpx',
+            borderLeft: '1px dashed rgba(0, 0, 0, 0.10)',
+          }"
+        >
+          <view class="btn flex-center fs-28" @click.stop="toCharge(index)"
+            >前往充值</view
+          >
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import { to } from "../../utils/navigate";
+import { fetchProfile } from "@/api/user";
+
+const mode = ref(-1);
+const list = ref<any[]>([]);
+const activity = ref();
+const checkIndex = ref(-1);
+const needRefresh = ref(false);
+
+const toCharge = (index: number) => {
+  needRefresh.value = true;
+  to(
+    "/pages-user/wallet-recharge/wallet-recharge?back=1&value=" +
+      list.value[index].amountMin
+  );
+};
+
+const setUserRecharge = (_list: any[]) => {
+  _list.forEach((item: any) => {
+    item.endTimeFormat = item.endTime.split(" ")[0];
+    item.rightsBalanceFormat = Number(
+      (Number(item.rightsBalance) / 100).toFixed(2)
+    );
+  });
+  list.value = _list;
+  mode.value = 0;
+};
+
+const checkDiscount = (index: number) => {
+  checkIndex.value = index;
+  getApp<any>().globalData.lastData.discount = {
+    index,
+  };
+};
+
+onLoad((options: any) => {
+  if (getApp<any>().globalData.user) {
+    if (getApp<any>().globalData.user.userRechargeRightsList.length) {
+      setUserRecharge(getApp<any>().globalData.user.userRechargeRightsList);
+      checkIndex.value = options.index ? Number(options.index) : 0;
+    } else {
+      const _activity = getApp<any>().globalData.user.activityList.find(
+        (item: any) => item.id === options.id
+      );
+      _activity.rechargeRightsList.forEach((item: any) => {
+        item.discountFormat = Number((Number(item.discount) / 10).toFixed(2));
+      });
+      list.value = _activity.rechargeRightsList;
+      activity.value = _activity;
+      mode.value = 1;
+    }
+  }
+});
+onShow(() => {
+  if (needRefresh.value) {
+    needRefresh.value = false;
+    uni.showLoading({
+      title: "加载中",
+    });
+    fetchProfile().then((res) => {
+      uni.hideLoading();
+      if (res.userRechargeRightsList.length) {
+        setUserRecharge(res.userRechargeRightsList);
+        checkDiscount(0)
+      }
+    });
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+  min-height: 100vh;
+  width: 100%;
+  background-color: #f6f7fa;
+  .item {
+    position: relative;
+    height: 240rpx;
+    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;
+      }
+    }
+  }
+}
+</style>

src/pages-user/wallet-recharge/wallet-recharge.vue

@@ -56,7 +56,7 @@
 import { ref } from "vue";
 import { fetchProfile, insertMoney } from "../../api/user";
 import { onLoad } from "@dcloudio/uni-app";
-import { to } from "@/utils/navigate";
+import { to, back } from "@/utils/navigate";
 const balance = ref(0);
 const payOption = ref(3);
 const payOptions = ref([30, 50, 100, 200, 500, 1000]);
@@ -64,6 +64,7 @@ const payOptionsDiscount = ref(["", "", "", "", "", ""]);
 const payOptionsDiscountDay = ref([0, 0, 0, 0, 0, 0]);
 const payValue = ref(0);
 const activityId = ref();
+const needBack = ref(false);
 const input = (e: any) => {
   payValue.value = e.value;
 };
@@ -108,7 +109,13 @@ const confirm = () => {
         title: "已支付",
         icon: "success",
       });
-      to("/pages-user/wallet/wallet");
+      setTimeout(() => {
+        if (needBack.value) {
+          back();
+        } else {
+          to("/pages-user/wallet/wallet");
+        }
+      }, 2000)
     })
     .catch((err) => {
       if (/cancel/.test(err.errMsg)) {
@@ -119,7 +126,13 @@ const confirm = () => {
       });
     });
 };
-onLoad(() => {
+onLoad((options: any) => {
+  if (options.value) {
+    payOption.value = payOptions.value.findIndex(
+      (item) => item === Number((Number(options.value) / 100).toFixed(2))
+    );
+    needBack.value = !!options.back;
+  }
   fetchProfile().then((res) => {
     // console.log(res);
     balance.value = res.balance;

src/pages.json

@@ -70,6 +70,14 @@
             "navigationBarBackgroundColor": "#F6F7FA"
           }
         },
+        {
+          "path": "discount/discount",
+          "style": {
+            "navigationBarTitleText": "选择充电优惠",
+            "navigationStyle": "default",
+            "navigationBarBackgroundColor": "#F6F7FA"
+          }
+        },
         {
           "path": "camera/camera",
           "style": {