充电权益卡和优惠券选择

src/api/charge.ts

@@ -496,4 +496,7 @@ function _fetchStationStatus(list: any[]) {
       }
       return _list;
     });
+
+
+
 }

src/api/user.ts

@@ -186,3 +186,16 @@ export function collectCoupon (couponId: number) {
 
 
 
+
+
+/**
+ * 获取当前用户当前站点有效的权益和优惠券
+ * @param stationId
+ */
+export function listStationAvailableRightsAndCoupons (stationId: string) {
+  return userHttp.get(`/account/listStationAvailableRightsAndCoupons?stationId=${stationId}`, {
+  });
+}
+
+
+

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

@@ -0,0 +1,343 @@
+<template>
+  <style-dialog
+      v-if="visible"
+      confirm
+      @ok="handleConfirm"
+      @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 v-if="mode===0">
+        <view
+            class="item mt-20 "
+            v-for="(item, index) in rightsList"
+            :class="item.status==0?'inactive':''"
+            :key="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-justify-center pl-48">
+
+              <view class="item-content_left">
+                <view class="flex-align-end">
+                  <view class="item-header__left">
+                    <image class="width-84" src="/pages-charge/static/discount-rights-card.png" mode="widthFix"></image>
+                    <view class="fs-48 lh-58 color-000 fw-500 ml-16">
+                      {{ (item.discount / 10).toFixed(1) }}折
+                    </view>
+                    <view class="fs-26 color-999 ml-16" v-if="mode === 0"
+                    >抵扣充电服务费
+                    </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" v-if="mode === 0">
+                      <view class="fs-26 color-999">权益余额：{{ ((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">
+                <style-checkbox
+                    @on-checkChange="handleCheckRights($event,item.rightsId)"
+                    :size="48"
+                    :checked="item.rightsId === rightsId"
+                    :iconsize="17"
+                ></style-checkbox>
+              </view>
+
+            </view>
+          </view>
+        </view>
+      </view>
+
+
+      <view v-else-if="mode===1">
+        <view
+            class="item mt-20"
+            v-for="(item, index) in couponList"
+            :key="index">
+
+          <!--            :class="item.usageStatus==1||item.status==0?'inactive':''"-->
+          <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="/pages-charge/static/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 v-if="mode === 1">
+                  <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-content_right">
+                  <!--                  <radio-group @change="handleCheckCoupon($event,item.couponId)">
+                                      <radio  :checked="item.couponId === couponId"/>
+                                    </radio-group>-->
+                  <style-checkbox
+                      @on-checkChange="handleCheckCoupon($event,item.couponId)"
+                      :size="48"
+                      :checked="item.couponId === couponId"
+                      :iconsize="17"
+                  ></style-checkbox>
+                </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 {listStationAvailableRightsAndCoupons} from "@/api/user";
+import {to} from "@/utils/navigate";
+
+const mode = ref(0);
+const couponList = ref<any[]>([]);
+const rightsList = ref<any[]>([]);
+
+const stationId = ref(null);
+const rightsId = ref(null);
+const couponId = ref(null);
+const visible = ref(false);
+
+const emits = defineEmits(['on-change'])
+
+const handleClose = () => {
+  visible.value = false;
+  rightsId.value = null;
+  couponId.value = null;
+  stationId.value = null;
+  mode.value = 0;
+}
+
+const handleConfirm = () => {
+  let emitData = {
+    rightsId: rightsId.value,
+    couponId: couponId.value,
+    stationId: stationId.value,
+    userRights: rightsList.value?.find((k: any) => k.rightsId == rightsId.value),
+    userCoupon: couponList.value?.find((k: any) => k.couponId == couponId.value)
+  }
+  // console.log(emitData)
+  emits('on-change', emitData)
+  handleClose();
+}
+
+onPullDownRefresh(() => {
+  loadData();
+});
+
+const changeTab = (tab: number) => {
+  mode.value = tab;
+}
+
+const handleCheckRights = (val: boolean, userRightsId: any) => {
+  console.log("handleCheckRights", userRightsId, val)
+  if (rightsId.value == userRightsId) {
+    rightsId.value = null;
+  } else {
+    rightsId.value = userRightsId;
+    couponId.value = null;
+  }
+}
+
+const handleCheckCoupon = (e: any, userCouponId: any) => {
+  console.log("handleCheckCoupon", userCouponId, e)
+  if (couponId.value == userCouponId) {
+    couponId.value = null;
+  } else {
+    couponId.value = userCouponId;
+    rightsId.value = null;
+  }
+}
+
+
+const loadData = () => {
+  uni.showLoading({
+    title: "加载中",
+  });
+  listStationAvailableRightsAndCoupons(stationId.value).then((res) => {
+    let {userRechargeRightsList, userCouponList} = res;
+    couponList.value = (userCouponList || []).sort((a: any, b: any) => new Date(a.endTime).getTime() - new Date(b.endTime).getTime());
+    rightsList.value = (userRechargeRightsList || []).sort((a: any, b: any) => new Date(a.endTime).getTime() - new Date(b.endTime).getTime());
+    if (!rightsId.value && !couponId.value) {
+      if (rightsList.value && rightsList.value.length > 0) {
+        rightsId.value = rightsList.value[0].rightsId;
+        mode.value = 0;
+      } else if (couponList.value && couponList.value.length > 0) {
+        couponId.value = couponList.value[0].couponId;
+        mode.value = 1;
+      }
+    } else if (rightsId.value) {
+      mode.value = 0;
+    } else if (couponId.value) {
+      mode.value = 1;
+    }
+
+    console.log(res)
+    uni.hideLoading();
+  });
+}
+const open = (sid: any, userRightsId: any, userCouponId: any) => {
+  visible.value = true;
+  stationId.value = sid;
+  rightsId.value = userRightsId;
+  couponId.value = userCouponId;
+  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-checkbox/style-checkbox.vue

@@ -1,13 +1,14 @@
 <template>
   <view
     class="lh-24 br-round flex-center"
+    @click.stop="handleClick"
     :style="{
       width: `${size}rpx`,
       height: `${size}rpx`,
       border: checked
         ? '1rpx solid var(--color-primary)'
         : '1rpx solid rgba(0,0,0,0.15)',
-      backgroundColor: checked ? 'var(--color-primary)' : 'rgba(0,0,0,0.1)',
+      backgroundColor: checked ? 'var(--color-primary)' : 'rgba(0,0,0,0)',
     }"
   >
     <uni-icons
@@ -32,6 +33,12 @@ export default {
       default: 10,
     },
   },
+  methods:{
+    handleClick(){
+      console.log(!this.checked)
+      this.$emit('on-checkChange',!this.checked);
+    }
+  }
 };
 </script>
 

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

@@ -2,6 +2,9 @@
   <view class="style-dialog" @click.stop>
     <view :style="{ background }">
       <view class="style-dialog_head flex-center">
+        <view class="ok" @click.stop="close">
+          <text type="success" v-if="confirm" @click.stop="handleConfirm">确定</text>
+        </view>
         <view class="fw-500 color-000 fs-32">{{ title }}</view>
         <view class="close" @click.stop="close">
           <uni-icons type="closeempty" size="24" color="#2D284B"></uni-icons>
@@ -22,11 +25,18 @@ export default {
       type: String,
       default: "#fff",
     },
+    confirm:{
+      type:Boolean,
+      default:false
+    }
   },
   methods: {
     close() {
       this.$emit("close");
     },
+    handleConfirm(){
+      this.$emit('ok');
+    }
   },
 };
 </script>
@@ -60,6 +70,14 @@ export default {
       top: 50%;
       transform: translateY(-50%);
     }
+
+    .ok {
+      position: absolute;
+      left: 30rpx;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--color-primary);
+    }
   }
   &_body {
     max-height: 1000rpx;

src/pages-charge/appointment/appointment-backup.vue

@@ -0,0 +1,861 @@
+<template>
+  <view :class="['page']">
+    <view v-if="data && priceInfo">
+      <view class="block">
+        <view class="station">
+          <ChargeMachine
+              :title="'NO.' + data.equipment.shortId"
+              :list="data.equipment.connectorInfos"
+              :time="priceInfo.useTime"
+              :parkingNo="data.equipment.parkingNo"
+          ></ChargeMachine>
+        </view>
+        <view class="pt-20 pb-20 pl-30 pr-30 flex-align-center">
+          <image
+              src="/pages-charge/static/machines-banner-address.png"
+              mode="widthFix"
+              class="flex-shrink mr-12 width-40"
+          />
+          <view class="fs-26 color-666">{{ data.station.address }}</view>
+        </view>
+      </view>
+      <!--      <view class="mt-40 ml-30 color-999 fs-32 fw-500">费用说明</view>-->
+      <view
+          class="mt-20 block height-96 flex-align-center pl-30 pr-30"
+          @click="openPriceDesc"
+      >
+        <view class="fs-28 color-000">充电费用</view>
+        <view class="ml-64 fs-26 color-333"
+        >{{ priceInfo.minPrice }}~{{ priceInfo.maxPrice }}元/度
+        </view
+        >
+        <view class="ml-auto">
+          <uni-icons type="right" size="16" color="rgba(0,0,0,0.4)"></uni-icons>
+        </view>
+      </view>
+      <template v-if="appointmentData">
+        <view class="mt-40 color-999 fs-32 fw-500">已预约充电</view>
+        <view class="mt-20 block flex-align-center" style="height: 180rpx">
+          <image
+              class="width-56 ml-30"
+              src="/pages-charge/static/icon-alarm.png"
+              mode="widthFix"
+          ></image>
+          <view class="ml-24">
+            <view class="flex" v-if="appointmentCountDown">
+              <view class="fs-28 color-000">将在</view>
+              <view class="fs-44 lh-36 color-primary ml-8 mr-8">{{
+                  appointmentCountDown
+                }}
+              </view>
+              <view class="fs-28 color-000">后开始充电</view>
+            </view>
+            <view class="fs-24 color-999 mt-8"
+            >请在{{ appointmentData.startTime }}前到达充电桩并开始充电
+            </view
+            >
+          </view>
+        </view>
+        <view class="mt-40 flex-center">
+          <view
+              class="flex-center height-68 br-68 fs-26 color-666"
+              style="width: 184rpx; border: 1px solid rgba(0, 0, 0, 0.3)"
+              @click="cancelAppointment"
+          >取消预约
+          </view
+          >
+        </view>
+      </template>
+      <template v-else>
+        <!--        <view class="mt-40 ml-30 color-999 fs-32 fw-500">选择充电方式</view>-->
+        <view class="mt-20 block pl-30 pr-30">
+          <view
+              v-for="(type, index) in chargeTypes"
+              :key="index"
+              :class="['pt-40', 'pb-40', 'flex-align-center']"
+              :style="{
+              borderTop: index === 0 ? '' : '1rpx solid rgba(0, 0, 0, 0.10)',
+            }"
+              @click="changeType(index)"
+          >
+            <view>
+              <view class="fs-28 lh-28 color-000 fw-500">{{ type.title }}</view>
+              <view
+                  class="fs-24 lh-24 mt-16"
+                  style="color: #f8386a"
+                  v-if="chargeType === index"
+              >{{ type.checkTip }}
+              </view
+              >
+              <view class="fs-24 color-999 lh-24 mt-16" v-else>{{
+                  type.tip
+                }}
+              </view>
+            </view>
+            <view class="ml-auto">
+              <style-checkbox :checked="chargeType === index"></style-checkbox>
+            </view>
+          </view>
+        </view>
+        <view class="mt-20 block pl-30 pr-30" v-if="chargeType === 0">
+          <view
+              class="pt-40 pb-40 flex-between"
+              style="border-bottom: 1rpx solid rgba(0, 0, 0, 0.1)"
+              @click="selectTime"
+          >
+            <view class="fs-28 color-000 fw-500">充电时间</view>
+            <view class="flex-align-center lh-28">
+              <block v-if="chargeTime.isPowerSaving">
+                <view class="fs-28 color-333 fw-500 mr-16">00:00 - 08:00</view>
+              </block>
+              <block v-else>
+                <view
+                    v-if="chargeTime.format"
+                    class="fs-28 color-333 fw-500 mr-16"
+                >{{ chargeTime.format }}
+                </view
+                >
+                <view v-else class="fs-26 mr-16" style="color: #cacaca"
+                >请选择
+                </view
+                >
+                <uni-icons type="right" size="16" color="#CACACA"></uni-icons>
+              </block>
+            </view>
+          </view>
+          <view class="pt-40 pb-40 flex-between">
+            <view class="fs-28 color-000 fw-500">预计费用</view>
+            <view class="flex-align-center lh-28">
+              <block v-if="chargeTime.isPowerSaving">
+                <view class="fs-28 color-333 fw-500"
+                >低至{{ priceInfo.minPrice }}元/kwh
+                </view
+                >
+              </block>
+              <block v-else>
+                <view
+                    v-if="chargeTime.formatPrice"
+                    class="fs-28 color-333 fw-500"
+                >{{ chargeTime.formatPrice }}
+                </view
+                >
+                <view v-else class="fs-26 mr-16" style="color: #cacaca"
+                >选择时间后显示
+                </view
+                >
+              </block>
+            </view>
+          </view>
+        </view>
+
+        <view
+            class="mt-20 block flex-align-center pl-30 pr-30 pt-30 pb-30"
+            @click="
+            to(
+              `/pages-charge/discount/discountV2?rightsId=${userRechargeRightsId}&couponId=${userCouponId}&stationId=${stationId}`
+            )
+          "
+        >
+          <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.toFixed(1) }}折
+            </view
+            >
+            <uni-icons type="right" size="16" color="#CACACA"></uni-icons>
+          </block>
+          <block v-else-if="activity">
+            <view class="fs-28 lh-28 ml-auto" style="color: #f43636"
+            >{{ activity.minDiscount }}折
+            </view
+            >
+            <view class="fs-28 lh-28 color-666 ml-8">权益待领取</view>
+            <uni-icons type="right" size="16" color="#CACACA"></uni-icons>
+          </block>
+          <view v-else class="fs-28 lh-28 color-666 ml-auto">无</view>
+        </view>
+
+        <view
+            class="mt-20 block flex-align-center pl-30 pr-30 pt-30 pb-30"
+            v-if="chargeType === 0"
+        >
+          <view class="flex-column">
+            <view class="fs-28 lh-28 color-000 fw-500">省钱模式</view>
+            <view class="fs-24 lh-30 color-999 mt-8"
+            >处于00:00-08:00时，电费低至{{ priceInfo.minPrice }}元/kwh
+            </view
+            >
+          </view>
+          <view class="ml-auto">
+            <switch
+                :checked="chargeTime.isPowerSaving"
+                color="#2d9e95"
+                @change="changePowerSaving"
+            />
+          </view>
+        </view>
+      </template>
+      <view class="pt-60 pb-80"></view>
+      <style-bottom-view>
+        <view class="pt-20 pl-40 pr-40 pb-20 bg-fff flex">
+          <template v-if="appointmentData">
+            <view class="mr-10" style="width: 50%">
+              <style-button size="small" @click="selectTime"
+              >修改时间
+              </style-button
+              >
+            </view
+            >
+            <view class="ml-10" style="width: 50%">
+              <style-button type="primary" size="small" @click="submitNow"
+              >立即开始
+              </style-button
+              >
+            </view>
+          </template>
+          <style-button v-else type="primary" size="small" @click="submit">{{
+              chargeType === 0 ? "提交预约" : "马上充电"
+            }}
+          </style-button>
+        </view>
+      </style-bottom-view>
+    </view>
+    <style-dialog
+        v-if="chargeTimeDialog"
+        @close="closeTime"
+        :title="
+        '请选择' + (chargeTime.isPowerSaving ? '省电模式' : '') + '充电时间'
+      "
+    >
+      <view class="flex" style="border-top: 1rpx solid rgba(0, 0, 0, 0.1)">
+        <view
+            class="flex-shrink"
+            style="height: 840rpx; width: 256rpx; background-color: #f0f0f0"
+        >
+          <view
+              class="flex-align-center pl-32 height-90"
+              v-for="(day, index) in timesInfo.day"
+              :key="index"
+              :style="{
+              backgroundColor:
+                day.format === chargeTime.day ? '#fff' : 'transparent',
+            }"
+              @click="changeDay(index)"
+          >
+            <view
+                :class="[
+                'fs-32',
+                'fw-500',
+                day.format === chargeTime.day ? 'color-primary' : 'color-000',
+              ]"
+            >{{ day.format }}
+            </view
+            >
+            <view
+                class="fs-24 color-666 ml-12 br-8 width-60 height-40 flex-center"
+                style="background-color: rgba(0, 0, 0, 0.07)"
+                v-if="day.year && day.format !== chargeTime.day"
+            >{{ day.year }}年
+            </view
+            >
+          </view>
+        </view>
+        <scroll-view
+            scroll-y
+            class="flex-grow"
+            style="height: 840rpx"
+            :scroll-into-view="chargeTime.scrollId"
+        >
+          <view
+              :id="`hour-${hour.format}`"
+              class="flex-align-center pl-40 height-90 fs-32"
+              v-for="(hour, index) in timesInfo.hour"
+              :key="index"
+              :style="{
+              color: hour.disabled
+                ? '#999'
+                : hour.format === chargeTime.hour
+                ? 'var(--color-primary)'
+                : '#000',
+            }"
+              @click="changeHour(index)"
+          >
+            {{ hour.format }}
+          </view>
+          <view class="hour-placeholder"></view>
+        </scroll-view>
+      </view>
+    </style-dialog>
+    <PriceDesc
+        v-if="priceDescVisible"
+        :desc="priceInfo.policyInfos || []"
+        @close="closePriceDesc"
+    ></PriceDesc>
+  </view>
+</template>
+
+<script setup lang="ts">
+import {cancelAppointmentCharge, changeAppointmentTime, fetchChargeStatus, fetchStationByConnectorIdOrShortId, fetchStationPriceDesc, startAppointmentCharge, startCharge,} from "@/api/charge";
+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 {redirect, to} from "../../utils/navigate";
+
+const DAY = 24 * 60 * 60 * 1000;
+const options = ref<any>();
+const data = ref<any>();
+const priceInfo = ref();
+const priceDescVisible = ref(false);
+const timesInfo = ref<any>({
+  day: [],
+  time: [],
+});
+
+const chargeType = ref(1);
+const chargeTypes = ref([
+  {
+    title: "预约充电",
+    tip: "预约特定时间点开始充电",
+    checkTip: "部分车辆可能进入休眠状态无法唤醒，将导致充电失败",
+  },
+  {
+    title: "立即充电",
+  },
+]);
+const chargeTimeDialog = ref(false);
+const chargeTime = ref({
+  time: 0, // 时间戳
+  day: "",
+  hour: "",
+  format: "",
+  formatPrice: "",
+  scrollId: "",
+  isPowerSaving: false, // 省电模式
+});
+const appointmentData = ref();
+const appointmentCountDown = ref();
+
+const discountIndex = ref(-1);
+const discountList = ref<any[]>([]);
+const activity = ref();
+
+const userRechargeRightsId = ref();
+const userCouponId = ref();
+const stationId = ref();
+
+
+const changeType = (index: number) => {
+  chargeType.value = index;
+};
+
+const isPassTime = (hour: string, day: number) => {
+  const now = new Date();
+  const time = new Date(format("y/M/d", day) + " " + hour + ":00");
+  return now > time;
+};
+
+const getHourPrice = (hour: string) => {
+  let price = "";
+  priceInfo.value.policyInfos.forEach((item: any) => {
+    if (Number(hour) >= Number(item.startTime.substring(0, 2))) {
+      price = item.totalPrice;
+    }
+  });
+  return price;
+};
+
+const rebuildHours = (day: Date) => {
+  timesInfo.value.hour = [];
+  const nowHour = format("h");
+  const isTaday = format("d") === format("d", day.getTime());
+  // 当前时间的24小时内
+  let startHour = isTaday ? Number(nowHour) : 0;
+  let endHour = isTaday ? 24 : Number(nowHour) + 1;
+  if (chargeTime.value.isPowerSaving) {
+    startHour = 0;
+    endHour = 8;
+  }
+  for (let index = startHour; index < endHour; index++) {
+    timesInfo.value.hour = [...timesInfo.value.hour, ...buildHours(index, day)];
+  }
+};
+
+const buildHours = (hour: number, day: Date) => {
+  let res: any[] = [];
+  let hourTemp = hour >= 10 ? `${hour}` : `0${hour}`;
+  let priceTemp = getHourPrice(hourTemp);
+  for (let index = 0; index < 12; index++) {
+    res.push({
+      format: `${hourTemp}:${index * 5 >= 10 ? index * 5 : `0${index * 5}`}`,
+      formatPrice: priceTemp,
+      disabled: isPassTime(
+          `${hourTemp}:${index * 5 >= 10 ? index * 5 : `0${index * 5}`}`,
+          chargeTime.value.time ? chargeTime.value.time : day.getTime()
+      ),
+    });
+  }
+  return res;
+};
+
+const selectTime = () => {
+  if (chargeTime.value.isPowerSaving) {
+    uni.showToast({
+      title: "省电模式将在00:00-08:00进行充电",
+      icon: "none",
+    });
+    return;
+  }
+  if (!appointmentData.value && chargeType.value === 1) {
+    uni.showToast({
+      title: "请选择预约模式",
+      icon: "none",
+    });
+    return;
+  }
+  const now = appointmentData.value
+      ? new Date(appointmentData.value.startTime.replace(/-/g, "/"))
+      : new Date();
+  const year = format("y", now.getTime());
+  const nextyear = format("y", now.getTime() + DAY);
+
+  // 天
+  timesInfo.value.day = [
+    {
+      time: now.getTime(),
+      format: format("M月d日", now.getTime()),
+      year: "",
+    },
+    {
+      time: now.getTime() + DAY,
+      format: format("M月d日", now.getTime() + DAY),
+      year: year === nextyear ? "" : nextyear.slice(2),
+    },
+  ];
+  rebuildHours(now);
+
+  // 预约时间
+  if (!appointmentData.value) {
+    if (!chargeTime.value.day) {
+      chargeTime.value.time = timesInfo.value.day[0].time;
+      chargeTime.value.day = timesInfo.value.day[0].format;
+    }
+    // 滚动到特定位置
+    if (chargeTime.value.hour) {
+      chargeTime.value.scrollId = `hour-${chargeTime.value.hour}`;
+    } else {
+      let hourNow = now.getHours();
+      chargeTime.value.scrollId = `hour-${hourNow}:00`;
+    }
+  }
+  // 修改时间
+  if (appointmentData.value) {
+    chargeTime.value.time = timesInfo.value.day[0].time;
+    chargeTime.value.day = timesInfo.value.day[0].format;
+    const findIndex = timesInfo.value.hour.findIndex(
+        (item: any) => item.format === format("h:m:s", now.getTime())
+    );
+    if (findIndex >= 0) {
+      chargeTime.value.hour = timesInfo.value.hour[findIndex].format;
+      chargeTime.value.formatPrice =
+          timesInfo.value.hour[findIndex].formatPrice;
+    }
+  }
+  chargeTimeDialog.value = true;
+};
+
+const changeDay = (index: number) => {
+  chargeTime.value.time = timesInfo.value.day[index].time;
+  chargeTime.value.day = timesInfo.value.day[index].format;
+  if (chargeTime.value.hour) {
+    chargeTime.value.hour = "";
+    chargeTime.value.formatPrice = "";
+  }
+  const now = new Date(chargeTime.value.time);
+  rebuildHours(now);
+  setTimeout(() => {
+    chargeTime.value.scrollId = `hour-${timesInfo.value.hour[0].format}`;
+  }, 0);
+};
+
+const changeHour = (index: number) => {
+  if (timesInfo.value.hour[index].disabled) {
+    uni.showToast({
+      title: "无法选择过去的时间",
+      icon: "none",
+    });
+    return;
+  }
+  if (appointmentData.value) {
+    // 修改时间
+    uni.showModal({
+      title: "温馨提示",
+      content: `确认修改为${timesInfo.value.hour[index].format}吗？`,
+      confirmText: "确定",
+      confirmColor: "#2d9e95",
+      success(modal) {
+        if (modal.confirm) {
+          uni.showLoading({
+            title: "提交中",
+            mask: true,
+          });
+          changeAppointmentTime(
+              appointmentData.value.startChargeSeq,
+              `${format("y-M-d", chargeTime.value.time)} ${
+                  timesInfo.value.hour[index].format
+              }:00`
+          )
+              .then(() => {
+                return fetchChargeStatus();
+              })
+              .then((res) => {
+                uni.hideLoading();
+                if (res && res.isAppointment) {
+                  uni.showToast({
+                    icon: "success",
+                    title: "修改成功",
+                  });
+                  closeTime();
+                  appointmentData.value = res;
+                  startAppointmentCountDown();
+                }
+              });
+        }
+      },
+    });
+    return;
+  }
+  chargeTime.value.hour = timesInfo.value.hour[index].format;
+  chargeTime.value.format = `${format("y年M月d日", chargeTime.value.time)} ${
+      chargeTime.value.hour
+  }`;
+  chargeTime.value.formatPrice = timesInfo.value.hour[index].formatPrice;
+  closeTime();
+};
+
+const changePowerSaving = (e: any) => {
+  chargeTime.value = {
+    time: 0, // 时间戳
+    day: "",
+    hour: "",
+    isPowerSaving: e.detail.value,
+    format: "",
+    formatPrice: "",
+    scrollId: "",
+  };
+};
+
+const closeTime = () => {
+  chargeTimeDialog.value = false;
+  if (appointmentData.value) {
+    return;
+  }
+  if (!chargeTime.value.hour) {
+    chargeTime.value = {
+      time: 0, // 时间戳
+      day: "",
+      hour: "",
+      isPowerSaving: chargeTime.value.isPowerSaving, // 省电模式
+      format: "",
+      formatPrice: "",
+      scrollId: "",
+    };
+  }
+};
+
+const openPriceDesc = () => {
+  priceDescVisible.value = true;
+};
+
+const closePriceDesc = () => {
+  priceDescVisible.value = false;
+};
+
+const cancelAppointment = () => {
+  uni.showModal({
+    title: "取消预约",
+    content: "确定取消预约吗？",
+    cancelText: "取消预约",
+    cancelColor: "#999999",
+    confirmText: "点错了",
+    confirmColor: "#2d9e95",
+    success: (res) => {
+      if (res.cancel) {
+        uni.showLoading({
+          title: "提交中",
+          mask: true,
+        });
+        cancelAppointmentCharge()
+            .then(() => {
+              uni.hideLoading();
+              uni.showToast({
+                icon: "success",
+                title: "已取消",
+              });
+              appointmentData.value = undefined;
+              startAppointmentCountDown();
+            })
+            .catch((err) => {
+              uni.hideLoading();
+            });
+      }
+    },
+  });
+};
+
+let appointmentCountDownTimer = 0;
+
+const startAppointmentCountDown = () => {
+  appointmentCountDownTimer && clearTimeout(appointmentCountDownTimer);
+  if (!appointmentData.value) {
+    appointmentCountDown.value = "";
+    return;
+  }
+  appointmentCountDown.value = formatAppointmentCountDown(
+      appointmentData.value.startTime
+  );
+  if (appointmentCountDown.value) {
+    appointmentCountDownTimer = setTimeout(() => {
+      startAppointmentCountDown();
+    }, 1000);
+  } else {
+    uni.showModal({
+      content: "当前预约时间已到，将开始进行充电",
+      showCancel: false,
+      success() {
+        uni.switchTab({
+          url: "/pages/map/map",
+        });
+      },
+    });
+  }
+};
+
+const formatAppointmentCountDown = (time: string) => {
+  const now = new Date();
+  const date = new Date(time.replace(/-/g, "/"));
+  let secondTime = parseInt(`${(date.getTime() - now.getTime()) / 1000}`);
+  if (secondTime <= 0) {
+    return "";
+  }
+  let hourTime = 0;
+  let minuteTime = 0; // 分
+  if (secondTime >= 60) {
+    minuteTime = parseInt(`${secondTime / 60}`);
+    secondTime = parseInt(`${secondTime % 60}`);
+    if (minuteTime >= 60) {
+      hourTime = parseInt(`${minuteTime / 60}`);
+      minuteTime = parseInt(`${minuteTime % 60}`);
+    }
+  }
+  return `${hourTime < 10 ? "0" + hourTime : hourTime}:${
+      minuteTime < 10 ? "0" + minuteTime : minuteTime
+  }:${secondTime < 10 ? "0" + secondTime : secondTime}`;
+};
+
+const submit = () => {
+  if (
+      chargeType.value === 0 &&
+      !chargeTime.value.isPowerSaving &&
+      !chargeTime.value.hour
+  ) {
+    uni.showToast({
+      title: "请选择充电时间",
+      icon: "none",
+    });
+    return;
+  }
+  const now = new Date();
+  let startTime = chargeTime.value.time;
+  if (chargeTime.value.isPowerSaving) {
+    startTime = now.getTime();
+    // 省电模式
+    if (
+        now.getHours() >= 8 &&
+        now.getDate() === Number(format("d", chargeTime.value.time))
+    ) {
+      startTime += DAY;
+    }
+  }
+  let query = "";
+  if (chargeType.value === 0) {
+    query += "isBooking=true";
+    query += `&startTime=${format("y-M-d", startTime)} ${
+        chargeTime.value.isPowerSaving
+            ? "00:00:00"
+            : `${chargeTime.value.hour}:00`
+    }`;
+    if (chargeTime.value.isPowerSaving) {
+      query += `&endTime=${format("y-M-d", startTime)} 08:00:00`;
+    }
+  }
+  if (chargeType.value === 1) {
+    query += "isBooking=false";
+  }
+  if (discountIndex.value >= 0) {
+    query += `&rechargeRightsId=${discountList.value[discountIndex.value].id}`;
+  }
+  console.log(query)
+  uni.showLoading({
+    title: "提交中",
+    mask: true,
+  });
+  startCharge(options.value.sn, query)
+      .then(() => {
+        if (chargeType.value === 0) {
+          fetchChargeStatus()
+              .then((res) => {
+                if (res && res.isAppointment) {
+                  uni.hideLoading();
+                  uni.showToast({
+                    icon: "success",
+                    title: "预约成功",
+                  });
+                  appointmentData.value = res;
+                  startAppointmentCountDown();
+                }
+              })
+              .catch(() => {
+                uni.navigateBack();
+              });
+        }
+        if (chargeType.value === 1) {
+          redirect(`/pages-charge/ordering/ordering?sn=${options.value.sn}&start=1`)
+        }
+      })
+      .catch((err) => {
+        uni.hideLoading();
+        uni.showModal({
+          content: `${err.errMsg}`,
+          showCancel: false,
+        });
+      });
+};
+
+const submitNow = () => {
+  uni.showLoading({
+    title: "提交中",
+    mask: true,
+  });
+  startAppointmentCharge(options.value.sn)
+      .then(() => {
+        _checkStartCharge();
+      })
+      .catch((err) => {
+        uni.hideLoading();
+        uni.showModal({
+          content: `${err.errMsg}`,
+          showCancel: false,
+        });
+      });
+};
+
+const _checkStartCharge = () => {
+  fetchChargeStatus().then((res) => {
+    if (res && [2].includes(res.chargeStatus)) {
+      uni.hideLoading();
+      redirect(`/pages-charge/ordering/ordering?sn=${options.value.sn}&start=1`)
+    } else {
+      _checkStartCharge();
+    }
+  });
+};
+
+onLoad((_options: any) => {
+  // sn=SN100523042860091 测试环境
+  console.log("options", _options);
+  let sn = _options.sn;
+  uni.showLoading({
+    title: "加载中",
+  });
+  fetchStationByConnectorIdOrShortId(sn)
+      .then((res) => {
+        console.log(res);
+        let {station, equipment} = res;
+        if (station) {
+          stationId.value = station.StationID;
+        }
+        if (equipment && equipment.connectorInfos && equipment.connectorInfos.length) {
+          sn = equipment.connectorInfos[0].connectorId;
+          _options.sn = equipment.connectorInfos[0].connectorId;
+        }
+        options.value = _options;
+        data.value = res;
+        return fetchStationPriceDesc(sn);
+      })
+      .then((res) => {
+        // console.log(res);
+        uni.hideLoading();
+        priceInfo.value = res;
+        return fetchChargeStatus(false, true);
+      })
+      .then((res) => {
+        if (res && res.isAppointment) {
+          appointmentData.value = res;
+          startAppointmentCountDown();
+        }
+      })
+      .catch((err) => {
+        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(1)
+      );
+    }
+  });
+
+});
+
+onShow(() => {
+  if (getApp<any>().globalData.lastData.discount) {
+    discountIndex.value = getApp<any>().globalData.lastData.discount.index;
+    getApp<any>().globalData.lastData.discount = undefined;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+  min-height: 100vh;
+  width: 100%;
+  padding: 20rpx;
+  background-color: #f6f7fa;
+}
+
+.block {
+  border-radius: 20rpx;
+  background: #fff;
+}
+
+.station {
+  height: 148rpx;
+  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+}
+
+.hour-placeholder {
+  box-sizing: content-box;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+</style>

src/pages-charge/appointment/appointment.vue

@@ -4,29 +4,30 @@
       <view class="block">
         <view class="station">
           <ChargeMachine
-            :title="'NO.' + data.equipment.shortId"
-            :list="data.equipment.connectorInfos"
-            :time="priceInfo.useTime"
-            :parkingNo="data.equipment.parkingNo"
+              :title="'NO.' + data.equipment.shortId"
+              :list="data.equipment.connectorInfos"
+              :time="priceInfo.useTime"
+              :parkingNo="data.equipment.parkingNo"
           ></ChargeMachine>
         </view>
         <view class="pt-20 pb-20 pl-30 pr-30 flex-align-center">
           <image
-            src="/pages-charge/static/machines-banner-address.png"
-            mode="widthFix"
-            class="flex-shrink mr-12 width-40"
+              src="/pages-charge/static/machines-banner-address.png"
+              mode="widthFix"
+              class="flex-shrink mr-12 width-40"
           />
           <view class="fs-26 color-666">{{ data.station.address }}</view>
         </view>
       </view>
-<!--      <view class="mt-40 ml-30 color-999 fs-32 fw-500">费用说明</view>-->
+      <!--      <view class="mt-40 ml-30 color-999 fs-32 fw-500">费用说明</view>-->
       <view
-        class="mt-20 block height-96 flex-align-center pl-30 pr-30"
-        @click="openPriceDesc"
+          class="mt-20 block height-96 flex-align-center pl-30 pr-30"
+          @click="openPriceDesc"
       >
         <view class="fs-28 color-000">充电费用</view>
         <view class="ml-64 fs-26 color-333"
-          >{{ priceInfo.minPrice }}~{{ priceInfo.maxPrice }}元/度</view
+        >{{ priceInfo.minPrice }}~{{ priceInfo.maxPrice }}元/度
+        </view
         >
         <view class="ml-auto">
           <uni-icons type="right" size="16" color="rgba(0,0,0,0.4)"></uni-icons>
@@ -36,55 +37,60 @@
         <view class="mt-40 color-999 fs-32 fw-500">已预约充电</view>
         <view class="mt-20 block flex-align-center" style="height: 180rpx">
           <image
-            class="width-56 ml-30"
-            src="/pages-charge/static/icon-alarm.png"
-            mode="widthFix"
+              class="width-56 ml-30"
+              src="/pages-charge/static/icon-alarm.png"
+              mode="widthFix"
           ></image>
           <view class="ml-24">
             <view class="flex" v-if="appointmentCountDown">
               <view class="fs-28 color-000">将在</view>
               <view class="fs-44 lh-36 color-primary ml-8 mr-8">{{
-                appointmentCountDown
-              }}</view>
+                  appointmentCountDown
+                }}
+              </view>
               <view class="fs-28 color-000">后开始充电</view>
             </view>
             <view class="fs-24 color-999 mt-8"
-              >请在{{ appointmentData.startTime }}前到达充电桩并开始充电</view
+            >请在{{ appointmentData.startTime }}前到达充电桩并开始充电
+            </view
             >
           </view>
         </view>
         <view class="mt-40 flex-center">
           <view
-            class="flex-center height-68 br-68 fs-26 color-666"
-            style="width: 184rpx; border: 1px solid rgba(0, 0, 0, 0.3)"
-            @click="cancelAppointment"
-            >取消预约</view
+              class="flex-center height-68 br-68 fs-26 color-666"
+              style="width: 184rpx; border: 1px solid rgba(0, 0, 0, 0.3)"
+              @click="cancelAppointment"
+          >取消预约
+          </view
           >
         </view>
       </template>
       <template v-else>
-<!--        <view class="mt-40 ml-30 color-999 fs-32 fw-500">选择充电方式</view>-->
+        <!--        <view class="mt-40 ml-30 color-999 fs-32 fw-500">选择充电方式</view>-->
         <view class="mt-20 block pl-30 pr-30">
           <view
-            v-for="(type, index) in chargeTypes"
-            :key="index"
-            :class="['pt-40', 'pb-40', 'flex-align-center']"
-            :style="{
+              v-for="(type, index) in chargeTypes"
+              :key="index"
+              :class="['pt-40', 'pb-40', 'flex-align-center']"
+              :style="{
               borderTop: index === 0 ? '' : '1rpx solid rgba(0, 0, 0, 0.10)',
             }"
-            @click="changeType(index)"
+              @click="changeType(index)"
           >
             <view>
               <view class="fs-28 lh-28 color-000 fw-500">{{ type.title }}</view>
               <view
-                class="fs-24 lh-24 mt-16"
-                style="color: #f8386a"
-                v-if="chargeType === index"
-                >{{ type.checkTip }}</view
+                  class="fs-24 lh-24 mt-16"
+                  style="color: #f8386a"
+                  v-if="chargeType === index"
+              >{{ type.checkTip }}
+              </view
               >
               <view class="fs-24 color-999 lh-24 mt-16" v-else>{{
-                type.tip
-              }}</view>
+                  type.tip
+                }}
+              </view>
             </view>
             <view class="ml-auto">
               <style-checkbox :checked="chargeType === index"></style-checkbox>
@@ -93,9 +99,9 @@
         </view>
         <view class="mt-20 block pl-30 pr-30" v-if="chargeType === 0">
           <view
-            class="pt-40 pb-40 flex-between"
-            style="border-bottom: 1rpx solid rgba(0, 0, 0, 0.1)"
-            @click="selectTime"
+              class="pt-40 pb-40 flex-between"
+              style="border-bottom: 1rpx solid rgba(0, 0, 0, 0.1)"
+              @click="selectTime"
           >
             <view class="fs-28 color-000 fw-500">充电时间</view>
             <view class="flex-align-center lh-28">
@@ -104,12 +110,14 @@
               </block>
               <block v-else>
                 <view
-                  v-if="chargeTime.format"
-                  class="fs-28 color-333 fw-500 mr-16"
-                  >{{ chargeTime.format }}</view
+                    v-if="chargeTime.format"
+                    class="fs-28 color-333 fw-500 mr-16"
+                >{{ chargeTime.format }}
+                </view
                 >
                 <view v-else class="fs-26 mr-16" style="color: #cacaca"
-                  >请选择</view
+                >请选择
+                </view
                 >
                 <uni-icons type="right" size="16" color="#CACACA"></uni-icons>
               </block>
@@ -120,63 +128,68 @@
             <view class="flex-align-center lh-28">
               <block v-if="chargeTime.isPowerSaving">
                 <view class="fs-28 color-333 fw-500"
-                  >低至{{ priceInfo.minPrice }}元/kwh</view
+                >低至{{ priceInfo.minPrice }}元/kwh
+                </view
                 >
               </block>
               <block v-else>
                 <view
-                  v-if="chargeTime.formatPrice"
-                  class="fs-28 color-333 fw-500"
-                  >{{ chargeTime.formatPrice }}</view
+                    v-if="chargeTime.formatPrice"
+                    class="fs-28 color-333 fw-500"
+                >{{ chargeTime.formatPrice }}
+                </view
                 >
                 <view v-else class="fs-26 mr-16" style="color: #cacaca"
-                  >选择时间后显示</view
+                >选择时间后显示
+                </view
                 >
               </block>
             </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}${
-                activity && activity.id ? `&id=${activity.id}` : ''
-              }`
-            )
-          "
+            class="mt-20 block flex-align-center pl-30 pr-30 pt-30 pb-30"
+            @click="handleShowStationChargeCoupon"
         >
+          <!--          to(-->
+          <!--          `/pages-charge/discount/discountV2?rightsId=${userRechargeRightsId}&couponId=${userCouponId}&stationId=${stationId}`-->
+          <!--          )-->
           <view class="fs-28 lh-28 color-000 fw-500">优惠</view>
-          <block v-if="discountList.length > 0">
+          <block v-if="checkedUserRightsOrCoupon&&checkedUserRightsOrCoupon.userRights">
             <view class="fs-28 lh-28 ml-auto" style="color: #f43636"
-              >{{ discountList[discountIndex].discountFormat.toFixed(1) }}折</view
+            >{{ ((checkedUserRightsOrCoupon?.userRights?.discount||0)/10).toFixed(1) }}折
+            </view
             >
             <uni-icons type="right" size="16" color="#CACACA"></uni-icons>
           </block>
-          <block v-else-if="activity">
+          <block v-else-if="checkedUserRightsOrCoupon&&checkedUserRightsOrCoupon.userCoupon">
             <view class="fs-28 lh-28 ml-auto" style="color: #f43636"
-              >{{ activity.minDiscount }}折</view
+            >{{ ((checkedUserRightsOrCoupon?.userCoupon?.discount||0)/100).toFixed(2) }}元
+            </view
             >
-            <view class="fs-28 lh-28 color-666 ml-8">权益待领取</view>
+            <!--            <view class="fs-28 lh-28 color-666 ml-8">权益待领取</view>-->
             <uni-icons type="right" size="16" color="#CACACA"></uni-icons>
           </block>
           <view v-else class="fs-28 lh-28 color-666 ml-auto">无</view>
         </view>
+
         <view
-          class="mt-20 block flex-align-center pl-30 pr-30 pt-30 pb-30"
-          v-if="chargeType === 0"
+            class="mt-20 block flex-align-center pl-30 pr-30 pt-30 pb-30"
+            v-if="chargeType === 0"
         >
           <view class="flex-column">
             <view class="fs-28 lh-28 color-000 fw-500">省钱模式</view>
             <view class="fs-24 lh-30 color-999 mt-8"
-              >处于00:00-08:00时，电费低至{{ priceInfo.minPrice }}元/kwh</view
+            >处于00:00-08:00时，电费低至{{ priceInfo.minPrice }}元/kwh
+            </view
             >
           </view>
           <view class="ml-auto">
             <switch
-              :checked="chargeTime.isPowerSaving"
-              color="#2d9e95"
-              @change="changePowerSaving"
+                :checked="chargeTime.isPowerSaving"
+                color="#2d9e95"
+                @change="changePowerSaving"
             />
           </view>
         </view>
@@ -187,78 +200,84 @@
           <template v-if="appointmentData">
             <view class="mr-10" style="width: 50%">
               <style-button size="small" @click="selectTime"
-                >修改时间</style-button
-              ></view
+              >修改时间
+              </style-button
+              >
+            </view
             >
             <view class="ml-10" style="width: 50%">
               <style-button type="primary" size="small" @click="submitNow"
-                >立即开始</style-button
+              >立即开始
+              </style-button
               >
             </view>
           </template>
           <style-button v-else type="primary" size="small" @click="submit">{{
-            chargeType === 0 ? "提交预约" : "马上充电"
-          }}</style-button>
+              chargeType === 0 ? "提交预约" : "马上充电"
+            }}
+          </style-button>
         </view>
       </style-bottom-view>
     </view>
     <style-dialog
-      v-if="chargeTimeDialog"
-      @close="closeTime"
-      :title="
+        v-if="chargeTimeDialog"
+        @close="closeTime"
+        :title="
         '请选择' + (chargeTime.isPowerSaving ? '省电模式' : '') + '充电时间'
       "
     >
       <view class="flex" style="border-top: 1rpx solid rgba(0, 0, 0, 0.1)">
         <view
-          class="flex-shrink"
-          style="height: 840rpx; width: 256rpx; background-color: #f0f0f0"
+            class="flex-shrink"
+            style="height: 840rpx; width: 256rpx; background-color: #f0f0f0"
         >
           <view
-            class="flex-align-center pl-32 height-90"
-            v-for="(day, index) in timesInfo.day"
-            :key="index"
-            :style="{
+              class="flex-align-center pl-32 height-90"
+              v-for="(day, index) in timesInfo.day"
+              :key="index"
+              :style="{
               backgroundColor:
                 day.format === chargeTime.day ? '#fff' : 'transparent',
             }"
-            @click="changeDay(index)"
+              @click="changeDay(index)"
           >
             <view
-              :class="[
+                :class="[
                 'fs-32',
                 'fw-500',
                 day.format === chargeTime.day ? 'color-primary' : 'color-000',
               ]"
-              >{{ day.format }}</view
+            >{{ day.format }}
+            </view
             >
             <view
-              class="fs-24 color-666 ml-12 br-8 width-60 height-40 flex-center"
-              style="background-color: rgba(0, 0, 0, 0.07)"
-              v-if="day.year && day.format !== chargeTime.day"
-              >{{ day.year }}年</view
+                class="fs-24 color-666 ml-12 br-8 width-60 height-40 flex-center"
+                style="background-color: rgba(0, 0, 0, 0.07)"
+                v-if="day.year && day.format !== chargeTime.day"
+            >{{ day.year }}年
+            </view
             >
           </view>
         </view>
         <scroll-view
-          scroll-y
-          class="flex-grow"
-          style="height: 840rpx"
-          :scroll-into-view="chargeTime.scrollId"
+            scroll-y
+            class="flex-grow"
+            style="height: 840rpx"
+            :scroll-into-view="chargeTime.scrollId"
         >
           <view
-            :id="`hour-${hour.format}`"
-            class="flex-align-center pl-40 height-90 fs-32"
-            v-for="(hour, index) in timesInfo.hour"
-            :key="index"
-            :style="{
+              :id="`hour-${hour.format}`"
+              class="flex-align-center pl-40 height-90 fs-32"
+              v-for="(hour, index) in timesInfo.hour"
+              :key="index"
+              :style="{
               color: hour.disabled
                 ? '#999'
                 : hour.format === chargeTime.hour
                 ? 'var(--color-primary)'
                 : '#000',
             }"
-            @click="changeHour(index)"
+              @click="changeHour(index)"
           >
             {{ hour.format }}
           </view>
@@ -267,30 +286,26 @@
       </view>
     </style-dialog>
     <PriceDesc
-      v-if="priceDescVisible"
-      :desc="priceInfo.policyInfos || []"
-      @close="closePriceDesc"
+        v-if="priceDescVisible"
+        :desc="priceInfo.policyInfos || []"
+        @close="closePriceDesc"
     ></PriceDesc>
+
+    <StationChargeCoupon ref="station_charge_coupon_ref" @on-change="handleCheckedUserRightsAndCoupon"></StationChargeCoupon>
   </view>
 </template>
 
 <script setup lang="ts">
-import {
-  fetchChargeStatus,
-  fetchStationByConnectorIdOrShortId,
-  fetchStationPriceDesc,
-  startCharge,
-  startAppointmentCharge,
-  cancelAppointmentCharge,
-  changeAppointmentTime,
-} from "@/api/charge";
-import { fetchProfile } from "@/api/user";
-import { onLoad, onShow } from "@dcloudio/uni-app";
-import { ref } from "vue";
+import {cancelAppointmentCharge, changeAppointmentTime, fetchChargeStatus, fetchStationByConnectorIdOrShortId, fetchStationPriceDesc, startAppointmentCharge, startCharge,} from "@/api/charge";
+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,redirect } from "../../utils/navigate";
+import StationChargeCoupon from "@/components/station-charge-coupon/station-charge-coupon.vue";
+import {format} from "@/utils/date";
+import {redirect} from "../../utils/navigate";
+
 
 const DAY = 24 * 60 * 60 * 1000;
 const options = ref<any>();
@@ -301,6 +316,15 @@ const timesInfo = ref<any>({
   day: [],
   time: [],
 });
+const checkedUserRightsOrCoupon = ref<any>({
+  rightsId: null,
+  couponId: null,
+  stationId: null,
+  userRights: null,
+  userCoupon: null
+});
+
+const station_charge_coupon_ref = ref();
 
 const chargeType = ref(1);
 const chargeTypes = ref([
@@ -330,6 +354,18 @@ const discountIndex = ref(-1);
 const discountList = ref<any[]>([]);
 const activity = ref();
 
+const stationId = ref();
+
+const handleShowStationChargeCoupon = () => {
+  let {rightsId,couponId} = checkedUserRightsOrCoupon.value;
+  station_charge_coupon_ref.value?.open(stationId.value,rightsId,couponId);
+}
+
+const handleCheckedUserRightsAndCoupon = (data: any) => {
+  // console.log("handleCheckedUserRightsAndCoupon", data);
+  checkedUserRightsOrCoupon.value = data;
+}
+
 const changeType = (index: number) => {
   chargeType.value = index;
 };
@@ -375,8 +411,8 @@ const buildHours = (hour: number, day: Date) => {
       format: `${hourTemp}:${index * 5 >= 10 ? index * 5 : `0${index * 5}`}`,
       formatPrice: priceTemp,
       disabled: isPassTime(
-        `${hourTemp}:${index * 5 >= 10 ? index * 5 : `0${index * 5}`}`,
-        chargeTime.value.time ? chargeTime.value.time : day.getTime()
+          `${hourTemp}:${index * 5 >= 10 ? index * 5 : `0${index * 5}`}`,
+          chargeTime.value.time ? chargeTime.value.time : day.getTime()
       ),
     });
   }
@@ -399,8 +435,8 @@ const selectTime = () => {
     return;
   }
   const now = appointmentData.value
-    ? new Date(appointmentData.value.startTime.replace(/-/g, "/"))
-    : new Date();
+      ? new Date(appointmentData.value.startTime.replace(/-/g, "/"))
+      : new Date();
   const year = format("y", now.getTime());
   const nextyear = format("y", now.getTime() + DAY);
 
@@ -438,12 +474,12 @@ const selectTime = () => {
     chargeTime.value.time = timesInfo.value.day[0].time;
     chargeTime.value.day = timesInfo.value.day[0].format;
     const findIndex = timesInfo.value.hour.findIndex(
-      (item: any) => item.format === format("h:m:s", now.getTime())
+        (item: any) => item.format === format("h:m:s", now.getTime())
     );
     if (findIndex >= 0) {
       chargeTime.value.hour = timesInfo.value.hour[findIndex].format;
       chargeTime.value.formatPrice =
-        timesInfo.value.hour[findIndex].formatPrice;
+          timesInfo.value.hour[findIndex].formatPrice;
     }
   }
   chargeTimeDialog.value = true;
@@ -485,26 +521,26 @@ const changeHour = (index: number) => {
             mask: true,
           });
           changeAppointmentTime(
-            appointmentData.value.startChargeSeq,
-            `${format("y-M-d", chargeTime.value.time)} ${
-              timesInfo.value.hour[index].format
-            }:00`
+              appointmentData.value.startChargeSeq,
+              `${format("y-M-d", chargeTime.value.time)} ${
+                  timesInfo.value.hour[index].format
+              }:00`
           )
-            .then(() => {
-              return fetchChargeStatus();
-            })
-            .then((res) => {
-              uni.hideLoading();
-              if (res && res.isAppointment) {
-                uni.showToast({
-                  icon: "success",
-                  title: "修改成功",
-                });
-                closeTime();
-                appointmentData.value = res;
-                startAppointmentCountDown();
-              }
-            });
+              .then(() => {
+                return fetchChargeStatus();
+              })
+              .then((res) => {
+                uni.hideLoading();
+                if (res && res.isAppointment) {
+                  uni.showToast({
+                    icon: "success",
+                    title: "修改成功",
+                  });
+                  closeTime();
+                  appointmentData.value = res;
+                  startAppointmentCountDown();
+                }
+              });
         }
       },
     });
@@ -512,7 +548,7 @@ const changeHour = (index: number) => {
   }
   chargeTime.value.hour = timesInfo.value.hour[index].format;
   chargeTime.value.format = `${format("y年M月d日", chargeTime.value.time)} ${
-    chargeTime.value.hour
+      chargeTime.value.hour
   }`;
   chargeTime.value.formatPrice = timesInfo.value.hour[index].formatPrice;
   closeTime();
@@ -571,18 +607,18 @@ const cancelAppointment = () => {
           mask: true,
         });
         cancelAppointmentCharge()
-          .then(() => {
-            uni.hideLoading();
-            uni.showToast({
-              icon: "success",
-              title: "已取消",
+            .then(() => {
+              uni.hideLoading();
+              uni.showToast({
+                icon: "success",
+                title: "已取消",
+              });
+              appointmentData.value = undefined;
+              startAppointmentCountDown();
+            })
+            .catch((err) => {
+              uni.hideLoading();
             });
-            appointmentData.value = undefined;
-            startAppointmentCountDown();
-          })
-          .catch((err) => {
-            uni.hideLoading();
-          });
       }
     },
   });
@@ -597,7 +633,7 @@ const startAppointmentCountDown = () => {
     return;
   }
   appointmentCountDown.value = formatAppointmentCountDown(
-    appointmentData.value.startTime
+      appointmentData.value.startTime
   );
   if (appointmentCountDown.value) {
     appointmentCountDownTimer = setTimeout(() => {
@@ -634,15 +670,15 @@ const formatAppointmentCountDown = (time: string) => {
     }
   }
   return `${hourTime < 10 ? "0" + hourTime : hourTime}:${
-    minuteTime < 10 ? "0" + minuteTime : minuteTime
+      minuteTime < 10 ? "0" + minuteTime : minuteTime
   }:${secondTime < 10 ? "0" + secondTime : secondTime}`;
 };
 
 const submit = () => {
   if (
-    chargeType.value === 0 &&
-    !chargeTime.value.isPowerSaving &&
-    !chargeTime.value.hour
+      chargeType.value === 0 &&
+      !chargeTime.value.isPowerSaving &&
+      !chargeTime.value.hour
   ) {
     uni.showToast({
       title: "请选择充电时间",
@@ -656,8 +692,8 @@ const submit = () => {
     startTime = now.getTime();
     // 省电模式
     if (
-      now.getHours() >= 8 &&
-      now.getDate() === Number(format("d", chargeTime.value.time))
+        now.getHours() >= 8 &&
+        now.getDate() === Number(format("d", chargeTime.value.time))
     ) {
       startTime += DAY;
     }
@@ -666,9 +702,9 @@ const submit = () => {
   if (chargeType.value === 0) {
     query += "isBooking=true";
     query += `&startTime=${format("y-M-d", startTime)} ${
-      chargeTime.value.isPowerSaving
-        ? "00:00:00"
-        : `${chargeTime.value.hour}:00`
+        chargeTime.value.isPowerSaving
+            ? "00:00:00"
+            : `${chargeTime.value.hour}:00`
     }`;
     if (chargeTime.value.isPowerSaving) {
       query += `&endTime=${format("y-M-d", startTime)} 08:00:00`;
@@ -677,8 +713,12 @@ const submit = () => {
   if (chargeType.value === 1) {
     query += "isBooking=false";
   }
-  if (discountIndex.value >= 0) {
-    query += `&rechargeRightsId=${discountList.value[discountIndex.value].id}`;
+  let {rightsId,couponId} = checkedUserRightsOrCoupon.value;
+  if (rightsId &&rightsId >= 0) {
+    query += `&userRechargeRightsId=${rightsId}`;
+  }
+  if (couponId &&couponId >= 0) {
+    query += `&userCouponId=${couponId}`;
   }
   console.log(query)
   uni.showLoading({
@@ -686,35 +726,35 @@ const submit = () => {
     mask: true,
   });
   startCharge(options.value.sn, query)
-    .then(() => {
-      if (chargeType.value === 0) {
-        fetchChargeStatus()
-          .then((res) => {
-            if (res && res.isAppointment) {
-              uni.hideLoading();
-              uni.showToast({
-                icon: "success",
-                title: "预约成功",
+      .then(() => {
+        if (chargeType.value === 0) {
+          fetchChargeStatus()
+              .then((res) => {
+                if (res && res.isAppointment) {
+                  uni.hideLoading();
+                  uni.showToast({
+                    icon: "success",
+                    title: "预约成功",
+                  });
+                  appointmentData.value = res;
+                  startAppointmentCountDown();
+                }
+              })
+              .catch(() => {
+                uni.navigateBack();
               });
-              appointmentData.value = res;
-              startAppointmentCountDown();
-            }
-          })
-          .catch(() => {
-            uni.navigateBack();
-          });
-      }
-      if (chargeType.value === 1) {
-        redirect(`/pages-charge/ordering/ordering?sn=${options.value.sn}&start=1`)
-      }
-    })
-    .catch((err) => {
-      uni.hideLoading();
-      uni.showModal({
-        content: `${err.errMsg}`,
-        showCancel: false,
+        }
+        if (chargeType.value === 1) {
+          redirect(`/pages-charge/ordering/ordering?sn=${options.value.sn}&start=1`)
+        }
+      })
+      .catch((err) => {
+        uni.hideLoading();
+        uni.showModal({
+          content: `${err.errMsg}`,
+          showCancel: false,
+        });
       });
-    });
 };
 
 const submitNow = () => {
@@ -723,16 +763,16 @@ const submitNow = () => {
     mask: true,
   });
   startAppointmentCharge(options.value.sn)
-    .then(() => {
-      _checkStartCharge();
-    })
-    .catch((err) => {
-      uni.hideLoading();
-      uni.showModal({
-        content: `${err.errMsg}`,
-        showCancel: false,
+      .then(() => {
+        _checkStartCharge();
+      })
+      .catch((err) => {
+        uni.hideLoading();
+        uni.showModal({
+          content: `${err.errMsg}`,
+          showCancel: false,
+        });
       });
-    });
 };
 
 const _checkStartCharge = () => {
@@ -754,36 +794,38 @@ onLoad((_options: any) => {
     title: "加载中",
   });
   fetchStationByConnectorIdOrShortId(sn)
-    .then((res) => {
-      console.log(res);
-      if (
-        res.equipment &&
-        res.equipment.connectorInfos &&
-        res.equipment.connectorInfos.length
-      ) {
-        sn = res.equipment.connectorInfos[0].connectorId;
-        _options.sn = res.equipment.connectorInfos[0].connectorId;
-      }
-      options.value = _options;
-      data.value = res;
-      return fetchStationPriceDesc(sn);
-    })
-    .then((res) => {
-      // console.log(res);
-      uni.hideLoading();
-      priceInfo.value = res;
-      return fetchChargeStatus(false, true);
-    })
-    .then((res) => {
-      if (res && res.isAppointment) {
-        appointmentData.value = res;
-        startAppointmentCountDown();
-      }
-    })
-    .catch((err) => {
-      console.log(err);
-      uni.hideLoading();
-    });
+      .then((res) => {
+        console.log(res);
+        let {station, equipment} = res;
+        if (station) {
+          stationId.value = station.StationID;
+        }
+        if (equipment && equipment.connectorInfos && equipment.connectorInfos.length) {
+          sn = equipment.connectorInfos[0].connectorId;
+          _options.sn = equipment.connectorInfos[0].connectorId;
+        }
+        options.value = _options;
+        data.value = res;
+        return fetchStationPriceDesc(sn);
+      })
+      .then((res) => {
+        // console.log(res);
+        uni.hideLoading();
+        priceInfo.value = res;
+        return fetchChargeStatus(false, true);
+      })
+      .then((res) => {
+        if (res && res.isAppointment) {
+          appointmentData.value = res;
+          startAppointmentCountDown();
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+        uni.hideLoading();
+      });
+
+
   fetchProfile().then((res) => {
     if (res.userRechargeRightsList.length) {
       res.userRechargeRightsList.forEach((item: any) => {
@@ -799,12 +841,13 @@ onLoad((_options: any) => {
       });
       activity.value = res.activityList[0];
       activity.value.minDiscount = Number(
-        (
-          Number(res.activityList[0].rechargeRightsList[0].discount) / 10
-        ).toFixed(1)
+          (
+              Number(res.activityList[0].rechargeRightsList[0].discount) / 10
+          ).toFixed(1)
       );
     }
   });
+
 });
 
 onShow(() => {
@@ -822,10 +865,12 @@ onShow(() => {
   padding: 20rpx;
   background-color: #f6f7fa;
 }
+
 .block {
   border-radius: 20rpx;
   background: #fff;
 }
+
 .station {
   height: 148rpx;
   border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

src/pages-charge/card/card.vue

@@ -142,25 +142,6 @@
 
 
           </view>
-          <!--          <view v-if="mode === 0" class="right width-80 flex-center">
-                      <style-checkbox
-                          :size="48"
-                          :checked="checkIndex === index"
-                          :iconsize="17"
-                      ></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"
-                      >{{ item.discount }}折</view
-                      >
-                    </view>-->
         </view>
       </view>
     </view>
@@ -181,16 +162,6 @@ 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
-  );
-};
-*/
-
 onPullDownRefresh(() => {
   loadData();
 });
@@ -199,27 +170,6 @@ const changeTab = (tab: number) => {
   mode.value = tab;
 }
 
-
-/*
-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;
-    }
-  }
-});
-*/
 const loadData = () => {
   uni.showLoading({
     title: "加载中",

src/pages-common/activity/activity.vue

@@ -1,70 +1,70 @@
-<template>
-  <view class="page">
-    <block v-if="activity">
-      <navigation-bar
-        :title="activity.name"
-        :color="'#fff'"
-        :placeholder="false"
-        :background="'#3F3EC2'"
-      ></navigation-bar>
-      <image
-        v-if="activity.activityDescPage"
-        style="width: 100%"
-        mode="widthFix"
-        :src="activity.activityDescPage"
-      ></image>
-    </block>
-    <view class="desc">
-      <view class="flex mb-40" v-for="(item, index) in desc" :key="index">
-        <view
-          class="width-40 height-40 br-round fs-28 color-fff flex-center flex-shrink mr-20"
-          style="
-            shadow: 0px 1px 1px rgba(0, 0, 0, 0.25));
-            background: linear-gradient(180deg, #9767f8 0%, #564eed 100%);
-          "
-          >{{ index + 1 }}</view
-        >
-        <view class="fs-28 lh-40 flex-grow" style="color: rgba(8, 0, 61, 0.8)">{{ item }}</view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { fetchProfile } from "../../api/user";
-import { onLoad } from "@dcloudio/uni-app";
-import { ref } from "vue";
-
-const desc = ref<string[]>([]);
-const activity = ref();
-
-onLoad((options: any) => {
-  uni.showLoading({
-    title: "加载中",
-  });
-  fetchProfile().then((res) => {
-    const a = res.activityList.find((item: any) => item.id === options.id);
-    desc.value = a.activityDesc.split("\n");
-    activity.value = a;
-    uni.hideLoading();
-  });
-});
-</script>
-
-<style lang="scss">
-page {
-  background-color: #716ffc;
-}
-.page {
-  position: relative;
-  .desc {
-    position: absolute;
-    width: 100%;
-    left: 0;
-    top: 650rpx;
-    box-sizing: border-box;
-    padding: 0 68rpx;
-    padding-top: 100rpx;
-  }
-}
-</style>
+<template>
+  <view class="page">
+    <block v-if="activity">
+      <navigation-bar
+        :title="activity.name"
+        :color="'#fff'"
+        :placeholder="false"
+        :background="'#3F3EC2'"
+      ></navigation-bar>
+      <image
+        v-if="activity.activityDescPage"
+        style="width: 100%"
+        mode="widthFix"
+        :src="activity.activityDescPage"
+      ></image>
+    </block>
+    <view class="desc">
+      <view class="flex mb-40" v-for="(item, index) in desc" :key="index">
+        <view
+          class="width-40 height-40 br-round fs-28 color-fff flex-center flex-shrink mr-20"
+          style="
+            shadow: 0px 1px 1px rgba(0, 0, 0, 0.25));
+            background: linear-gradient(180deg, #9767f8 0%, #564eed 100%);
+          "
+          >{{ index + 1 }}</view
+        >
+        <view class="fs-28 lh-40 flex-grow" style="color: rgba(8, 0, 61, 0.8)">{{ item }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { fetchProfile } from "../../api/user";
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+
+const desc = ref<string[]>([]);
+const activity = ref();
+
+onLoad((options: any) => {
+  uni.showLoading({
+    title: "加载中",
+  });
+  fetchProfile().then((res) => {
+    const a = res.activityList.find((item: any) => item.id === options.id);
+    desc.value = a?.activityDesc?.split("\n");
+    activity.value = a;
+    uni.hideLoading();
+  });
+});
+</script>
+
+<style lang="scss">
+page {
+  background-color: #716ffc;
+}
+.page {
+  position: relative;
+  .desc {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 650rpx;
+    box-sizing: border-box;
+    padding: 0 68rpx;
+    padding-top: 100rpx;
+  }
+}
+</style>