帮客人下单使用积分

src/pageB/select_product/com_order.vue

@@ -52,10 +52,6 @@
     </view>
     <!--  -->
     <view class="bg-white mt-base rounded-xs pb-base px-40rpx pt-rowSm text-md">
-      <view class="flex items-center justify-between py-rowSm text-txBase" v-if="orderInfo.total_points>0">
-        <view>抵扣积分</view>
-        <view>{{ orderInfo.total_points }}</view>
-      </view>
       <view class="flex items-center justify-between py-rowSm text-txBase">
         <view>商品金额</view>
         <view>￥{{ orderInfo.products_total_amount }}</view>
@@ -77,10 +73,22 @@
         <view>砍价优惠</view>
         <view class="text-bgSubtitle">-￥{{ orderInfo.bargain_amount }}</view>
       </view>
+      <view v-if="orderInfo.total_amount > 0" class="flex items-center justify-between py-rowSm text-txBase">
+        <view>积分<block v-if="hasRemainingPoints">(共{{ orderInfo.remaining_points }})</block></view>
+        <view v-if="hasRemainingPoints" class="flex items-center" @tap="openPointDiscountDrawer">
+          <view v-if="pointDiscount.amount > 0" class="text-bgSubtitle">-￥{{ pointDiscount.amount }}</view>
+          <view v-else>请选择</view>
+          <u-icon name="arrow-right" size="20" class="ml-10rpx text-gray-400"></u-icon>
+        </view>
+        <view v-else class="flex items-center text-gray-400">
+          <view>无可用</view>
+          <u-icon name="arrow-right" size="20" class="ml-10rpx text-gray-400"></u-icon>
+        </view>
+      </view>
       <!--  -->
       <view class="text-md border-t border-txBorder flex items-center justify-end py-base">
         <view class="text-txBase">实付金额：</view>
-        <view class="text-bgSubtitle">￥{{ orderInfo.total_amount }}</view>
+        <view class="text-bgSubtitle">￥{{ paymentAmount }}</view>
       </view>
       <!--  -->
       <view class="border-t border-txBorder pt-base text-md">
@@ -103,13 +111,35 @@
       </view>
     </cu-popup>
 
+    <cu-popup v-model="showPointDiscountDrawer" mode="bottom" border-radius="20" closeable close-icon-size="24">
+      <view>
+        <view class="flex p-50rpx text-x-lg items-end">积分<view class="text-md text-txBase">（剩余: {{ orderInfo.remaining_points }}）</view></view>
+        <scroll-view scroll-y="true" class="min-h-600rpx max-h-900rpx">
+          <view class="text-md flex justify-between px-50rpx py-base" @tap="selectPointDiscountOption(0)">
+            <view>暂不使用积分</view>
+            <u-icon name="checkmark-circle" :color="pointDiscountSelectedOption.value == 0 ? '#f43530' : '#808080'" size="40"></u-icon>
+          </view>
+          <view class="text-md flex justify-between px-50rpx py-base" @tap="selectPointDiscountOption(1)">
+            <view class="flex">
+              抵扣<view class="mx-8rpx text-bgSubtitle">￥{{ orderInfo.point_discount_amount }}</view>使用<view class="mx-8rpx">{{ orderInfo.available_points }}</view>积分
+            </view>
+            <u-icon name="checkmark-circle" :color="pointDiscountSelectedOption.value == 1 ? '#f43530' : '#808080'" size="40"></u-icon>
+          </view>
+        </scroll-view>
+        <view class="p-base">
+          <view class="btn bg-hex-FB4A34 h-84rpx leading-84rpx text-white" @tap="submitPointDiscount">
+            <text>确定</text>
+          </view>
+        </view>
+      </view>
+    </cu-popup>
+
     <!--  -->
     <view class="h-130rpx"></view>
     <!--  -->
     <view class="flex items-center justify-end bg-white shadow-up fixed right-0 left-0 bottom-0 cu-bar tabbar">
       <view class="text-md text-txBase">
-        合计: <text class="text-xl" v-if="orderInfo.total_points >0"> {{orderInfo.total_points}}积分+</text> <text
+        合计: <text class="text-xl text-txSvip">￥{{ paymentAmount }}</text>
-          class="text-xl text-txSvip">￥{{ orderInfo.total_amount }}</text>
       </view>
       <view @tap="createOrder"
         class="w-180rpx h-66rpx leading-66rpx text-center text-lg ml-40rpx text-white bg-primary rounded-lg mr-base">
@@ -124,6 +154,7 @@
 
 <script>
   let btnLoading = false;
+  import { sub } from '@/utils'
   export default {
     data() {
       return {
@@ -135,7 +166,21 @@
         tempCouponId: '',
         couponShow: false,
         isFirstLoading: true,
-        cuId: null
+        cuId: null,
+        //--------------------------
+        // 积分抵扣
+        //--------------------------
+        pointDiscount: {
+          value: null,
+          points: 0,
+          amount: 0,
+        },
+        showPointDiscountDrawer: false,
+        pointDiscountSelectedOption: {
+          value: null,
+          points: 0,
+          amount: 0,
+        },
       };
     },
     onLoad({ id }) {
@@ -158,6 +203,13 @@
         const coupon = this.couponsList.find((e) => e.id == this.couponId);
         return coupon;
       },
+      // 是否有剩余积分
+      hasRemainingPoints() {
+        return this.orderInfo.remaining_points > 0
+      },
+      paymentAmount() {
+        return sub(this.orderInfo.total_amount ?? 0, this.pointDiscount.amount ?? 0)
+      },
     },
     onShow() {
       setTimeout(() => {
@@ -170,7 +222,8 @@
         const params = {
           coupon_id: this.couponId,
           note: this.remarks,
-          order_pre: this.cuId
+          order_pre: this.cuId,
+          points: this.pointDiscount.points,
         };
         if (btnLoading) return;
         btnLoading = true;
@@ -211,6 +264,33 @@
         if (this.couponsList.length == 0) return this.$u.toast('当前无可用优惠券')
         this.couponShow = true
       },
+      openPointDiscountDrawer() {
+        this.pointDiscountSelectedOption = this.pointDiscount
+        this.showPointDiscountDrawer = true
+      },
+      selectPointDiscountOption(value) {
+        switch (value) {
+          case 0:
+            this.pointDiscountSelectedOption = {
+              value: 0,
+              points: 0,
+              amount: 0,
+            }
+            break;
+
+          case 1:
+            this.pointDiscountSelectedOption = {
+              value: 1,
+              points: this.orderInfo.available_points,
+              amount: this.orderInfo.point_discount_amount,
+            }
+            break;
+        }
+      },
+      submitPointDiscount() {
+        this.pointDiscount = this.pointDiscountSelectedOption
+        this.showPointDiscountDrawer = false
+      },
 
       //确认订单详情
       async getDetail() {
@@ -219,7 +299,8 @@
         });
         const params = {
           coupon_id: this.couponId,
-          order_pre: this.cuId
+          order_pre: this.cuId,
+          ignore_shipping_fee: true,
         };
         try {
           let orderInfo = await this.$api.post('/v1/order/verify-order', params);