支付有礼

src/api/order.js

@@ -16,5 +16,9 @@ export default {
     //获取电子卡券订单卡券
     getElectronicCardRedeemCode(data){
       return requestGET(`${process.env.OLSHOP_URL}/order/getElectronicCardRedeemCode?orderSn=${data}`)
+    },
+    // 获取订单是否参加支付有礼
+    getPayWithCourtesyInfoForShop(data) {
+      return requestPOST(`${process.env.OLSHOP_URL}/payWithCourtesy/getPayWithCourtesyInfoForShop`, data);
     }
  }

src/components/paySuccess/payWithGifts.vue

+<template>
+  <div v-if="isShowIntegral || isShowGifts" :style="{ 'padding-top': paddingTop, 'padding-bottom': paddingBottom }">
+    <div class="pay-with-gifts__wrapper">
+      <template v-if="isShowGifts">
+        <!-- 推广类型: (0: 送优惠券 1: 抽奖大转盘 2: 优惠码) -->
+        <template v-if="giftsInfo.getPayWithCourtesyInfoForShopRespDTO.promotionType == 0">
+          <div @click="handleUseCoupon">
+            <!-- 默认图片 -->
+            <template v-if="giftsInfo.getPayWithCourtesyInfoForShopRespDTO.picType == 2">
+              <image mode="widthFix" src="http://test-ant.mayi888.cn/static/img/couponImg.043ef7c.png"></image>
+            </template>
+            <!-- 自定义图片 -->
+            <template v-else>
+              <image mode="widthFix" :src="giftsInfo.getPayWithCourtesyInfoForShopRespDTO.picUrl" alt></image>
+            </template>
+          </div>
+        </template>
+        <template v-else-if="giftsInfo.getPayWithCourtesyInfoForShopRespDTO.promotionType == 1">
+          <div @click="handleLottery">
+            <!-- 默认图片 -->
+            <template v-if="giftsInfo.getPayWithCourtesyInfoForShopRespDTO.picType == 1">
+              <image mode="widthFix" src="http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/png/2a61b201-4fe3-406b-9d76-9ec606ed08c0.png"></image>
+            </template>
+            <!-- 自定义图片 -->
+            <template v-else>
+              <image mode="widthFix" :src="giftsInfo.getPayWithCourtesyInfoForShopRespDTO.picUrl" alt></image>
+            </template>
+          </div>
+        </template>
+      </template>
+      <div class="points-wrapper flex" v-if="!isShowIntegral">
+        <image class="image" src="http://cdn.mayi888.com/public/png/4eef96f4-a6be-4d13-9b5e-60577d289e08.png"></image>
+        <div class="flex center">
+          <div class="points-content">+ {{ giftsInfo.integral }}积分</div>
+          <div class="tip">海量积分好礼等你来兑</div>
+        </div>
+        <div class="points-btn" @click="handleToPoint">去兑换</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import order from "@/api/order";
+
+  const app = getApp();
+  export default {
+    name: "pay-with-gifts",
+    props: {
+      datas: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      orderDetail: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      totalMoney: {
+        type: Number,
+        default: 0,
+      },
+    },
+    data() {
+      return {
+        isShowIntegral: false,
+        isShowGifts: false,
+        _orderDetail: {},
+        giftsInfo: [],
+        getPayWithCourtesyInfoForShopRespDTO: {},
+      }
+    },
+    watch: {
+      orderDetail(val) {
+        this._orderDetail = val;
+        this.getPayWithCourtesyInfoForShop();
+      }
+    },
+    computed: {
+      paddingTop() {
+        return this.datas.componentData["paddingTop"] + "px";
+      },
+      paddingBottom() {
+        return this.datas.componentData["paddingBottom"] + "px";
+      },
+    },
+    methods: {
+      // 领取优惠券
+      handleUseCoupon() {
+        app.$themeToLink({ type: 1, link: '/personalCenter/coupon/myCoupon' })
+      },
+      // 积分抽奖
+      handleLottery() {
+        app.$themeToLink({
+          type: 1,
+          link: `/turntable?type=payWithGifts&orderSn=${this.orderDetail.orderSn}&turntableCode=${this.giftsInfo.getPayWithCourtesyInfoForShopRespDTO.promotionContent}&payWithCcourtesyId=${this.giftsInfo.getPayWithCourtesyInfoForShopRespDTO.activityid}`
+        })
+      },
+      // 去兑换
+      handleToPoint() {
+        app.$themeToLink({ type: 1, link: '/pointShop/pointCenter' })
+      },
+      
+      // 获取礼物信息
+      async getPayWithCourtesyInfoForShop() {
+        const goodsIds = [];
+        this._orderDetail.orderItems.forEach(item => {
+          // 赠品不参与计算
+          if (item.giftFlag == 0) {
+            goodsIds.push(Number(item.goodsId));
+          }
+        })
+        const data = {
+          orderSn: this._orderDetail.orderSn,
+          goodsIds,
+          amountMoney: this.totalMoney
+        }
+        const res = await order.getPayWithCourtesyInfoForShop(data);
+        if (res.data.code == 200) {
+          this.giftsInfo = res.data.data;
+          // 如果不存在数据则不显示
+          if (this.giftsInfo.integral && this.giftsInfo.integral > 0) {
+            this.isShowIntegral = true;
+          }
+          if (this.giftsInfo.getPayWithCourtesyInfoForShopRespDTO) {
+            this.isShowGifts = true;
+          }
+        }
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.pay-with-gifts__wrapper {
+  padding: 0 12px;
+  
+  image {
+    width: 100%;
+  }
+  
+  .image {
+    width: 88px;
+    height: 88px;
+  }
+  
+  .points-wrapper {
+    margin-top: 8px;
+    border-radius: 8px;
+    align-items: center;
+    justify-content: space-between;
+    background: #fff;
+    
+    .center {
+      align-self: normal;
+      margin: 18px auto 18px 8px;
+      flex-direction: column;
+      justify-content: space-between;
+      
+      .points-content {
+        font-size: 14px;
+        color: #C72A30;
+      }
+      
+      .tip {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.4);
+      }
+    }
+    
+    .points-btn {
+      font-size: 12px;
+      color: #C9353F;
+      padding: 2px 8px;
+      margin-right: 16px;
+      border-radius: 4px;
+      border: 1px solid #C9353F;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/pages/paySuccess/index.vue

@@ -67,6 +67,12 @@
           :whetherOpenEnterprisesWantGoods="whetherOpenEnterprisesWantGoods"
           :whetherOpenApproval="whetherOpenApproval"
         />
+        <payWithGifts
+          v-if="item.componentCode=='pay-with-gifts' && item.componentInfo.visible==1"
+          :datas="item"
+          :orderDetail="orderDetail"
+          :totalMoney="totalMoney"
+        />
       </div>
     </div>
     <automati-Card :showReceiveCard="showReceiveCard" @closeHandle="closeHandle" :cardInfo="cardInfo"></automati-Card>
@@ -105,6 +111,7 @@ import { serialize } from "@/utils/index";
 import { checkTabbarPage, checkShowConditionIds, themeColor } from "@/utils/mayi";
 import ThemeDataPlant from "@/components/ThemeDataPlant";
 import paySuccessInfo from "@/components/paySuccess/paySuccessInfo";
+import payWithGifts from "@/components/paySuccess/payWithGifts";
 import PayElectronCard from "@/components/paySuccess/PayElectronCard";
 import automatiCard from "@/components/paySuccess/automatiCard";
 import text from "@/components/content/text";
@@ -159,6 +166,7 @@ export default {
     interval,
     partition,
     paySuccessInfo,
+    payWithGifts,
     PayElectronCard,
     automatiCard,
     coupon,