订单详情折扣展示

src/api/user.ts

@@ -135,6 +135,11 @@ export function fetchWallet(
   );
 }
 
+export function fetchOrderDiscount(startChargeSeq: string,discountType:string) {
+  return userHttp.get(`/charge/orderDiscountDetail?startChargeSeq=${startChargeSeq}&discountType=${discountType}`);
+}
+
+
 export function fetchOrder(orderid: string) {
   return userHttp.get(`/charge/orderDetail/${orderid}`);
 }

src/components/order-coupon-detail/order-coupon-detail.vue

@@ -0,0 +1,244 @@
+<template>
+  <style-dialog
+      v-if="visible"
+      @close="handleClose"
+      title="优惠明细">
+
+    <view class="page pt-20 pr-40 pl-40">
+
+      <view v-if="mode===0">
+        <view
+            class="item mt-20 "
+            v-for="(item, index) in rightsList"
+            :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="/static/images/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-24 color-999">充值{{ ((item.amountMin || 0) / 100).toFixed(2) }}元，享受{{ (item.discount / 10).toFixed(1) }}折服务费权益，有效期{{ item.validity }}天
+                        <!--                        <text class="color-primary">详细规则</text>
+                                                <text class="fs-24 ml-4 color-primary">>></text>-->
+                      </view>
+                    </view>
+                  </view>
+                </block>
+              </view>
+            </view>
+          </view>
+        </view>
+
+      </view>
+
+      <view v-if="mode===1">
+        <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>
+          </view>
+        </view>
+      </view>
+
+
+    </view>
+    >
+  </style-dialog>
+
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+import {fetchOrderDiscount} from "@/api/user";
+import {to} from "@/utils/navigate";
+
+const mode = ref(0);
+const rightsList = ref<any[]>([]);
+const couponList = ref<any[]>([]);
+const visible = ref(false);
+
+const handleClose = () => {
+  visible.value = false;
+}
+
+
+const open = (startChargeSeq: string, discountType: string) => {
+  visible.value = true;
+  fetchOrderDiscount(startChargeSeq, discountType).then((res) => {
+    console.log(res)
+    if (res) {
+      if (discountType == "RechargeRights") {
+        rightsList.value = [res]
+        mode.value = 0;
+      } else {
+        couponList.value = [res]
+        mode.value = 1;
+      }
+    }
+  })
+}
+
+
+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/shadow-card/shadow-card.vue

@@ -2,20 +2,23 @@
   <view class="shadow-card">
     <slot></slot>
     <view
-      v-for="(item, index) in list"
-      :key="index"
-      :style="{
+        v-for="(item, index) in list"
+        :key="index"
+        :style="{
         marginTop: index === 0 ? '0rpx' : '40rpx',
-      }"
-    >
+      }">
+
       <view class="label">{{ item.label }}</view>
       <view
-        class="value"
-        :style="{
+          class="value"
+          :style="{
           color: item.color ? item.color : '#000',
-        }"
-        >{{ item.value }} <text class="copy-btn" v-if="item.copy" @click="copyText(item.value)">复制</text></view
-      >
+        }">
+        {{ item.value }}
+        <text class="copy-btn" v-if="item.copy" @click="copyText(item.value)">复制</text>
+        <text class="copy-btn" v-if="item.discount" @click="handleClickOrderDiscountDesc">明细</text>
+      </view>
+
     </view>
   </view>
 </template>
@@ -29,16 +32,20 @@ export default {
     },
   },
   methods: {
-    copyText(text:string) {
-      if(!text) return;
+    copyText(text: string) {
+      if (!text) return;
       uni.setClipboardData({
         data: text,
         success: function () {
           uni.showToast({
             title: '复制成功',
-            icon: 'success',})
+            icon: 'success',
+          })
         }
       })
+    },
+    handleClickOrderDiscountDesc(){
+      this.$emit('on-discount')
     }
   }
 };
@@ -70,11 +77,11 @@ export default {
   }
 }
 
-.copy-btn{
+.copy-btn {
   margin-left: 10rpx;
   color: #1aa4f2;
-/*  padding: 6rpx;
-  background: #1aa4f2;*/
+  /*  padding: 6rpx;
+    background: #1aa4f2;*/
   font-size: 20rpx;
 }
 </style>

src/pages-charge/order/order.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="body" v-if="list">
-    <shadow-card :list="list">
+    <shadow-card :list="list" @on-discount="handleClickDesc">
       <view class="flex-column flex-center pb-48">
         <view class="fw-500 color-000">
           <text class="fs-40 mr-8">¥</text>
@@ -11,19 +11,32 @@
         >
       </view>
     </shadow-card>
+
+    <order-coupon-detail ref="order_coupon_detail_ref"></order-coupon-detail>
   </view>
 </template>
 
 <script setup lang="ts">
-import { fetchOrder } from "../../api/user";
+import { fetchOrder} from "../../api/user";
 import { onLoad } from "@dcloudio/uni-app";
 import { ref } from "vue";
+import OrderCouponDetail from "@/components/order-coupon-detail/order-coupon-detail.vue";
 
 const list = ref<any[]>();
 const price = ref();
+const orderDetail = ref();
+const order_coupon_detail_ref = ref();
+
+const handleClickDesc = () => {
+  console.log("handleClickDesc")
+  let {startChargeSeq,discountType} = orderDetail.value;
+  order_coupon_detail_ref.value?.open(startChargeSeq,"Coupon");
+}
+
 onLoad((options: any) => {
   fetchOrder(options.id)
     .then((res) => {
+      orderDetail.value = res;
       const totalMoney = (res.totalMoney / 100).toFixed(2);
       const discountAmount = (res.discountAmount / 100).toFixed(2);
       const discountAmountText = res.rightsDesc;
@@ -53,6 +66,11 @@ onLoad((options: any) => {
           label: "订单金额",
           value: `${totalMoney.replace(reg, ",")}元`,
         },
+       /* {
+          label: "折扣金额",
+          value: `${discountAmount.replace(reg, ",")}元`,
+          discount:true
+        },*/
         {
           label: "开始时间",
           value: res.startTime,
@@ -78,6 +96,7 @@ onLoad((options: any) => {
             Number(discountAmount) <= 0 ? "" : "-"
           }${discountAmount}元${discountAmountText}`,
           color: "#F43636",
+          discount:true
         });
       }
       list.value = _list;