wagoo-douy3/src/components/petOrder/add-service-pay-modal.vue

<template>
  <select-modal @close="closeAction" title="调整服务费">
    <view class="add-pay-container">
      <view class="top-container">
        <detail-cell v-if="weightName" title="下单宠物重量区间" :content="weightName"/>
        <detail-cell title="已支付费用" :content="`¥${price}`"/>
<!--        <detail-cell v-if="orderInfo.dikou_id" title="优惠券" :content="`-¥${diKouPrice}`"/>-->
<!--        <detail-cell v-if="orderInfo.fuwuquan_id" title="服务券金额" :content="`¥${servicePrice}`"/>-->
        <view class="top-cell" @click.stop="selectedWeight">
          <view class="info-view">
            <text class="app-fc-main fs-30">实际宠物重量区间</text>
            <text class="app-fc-main fs-30 app-font-bold-500">{{ realWeightName }}</text>
          </view>
          <image class="right-arrow" mode="aspectFit" src="/static/images/arrow_right_black.png"/>
        </view>
        <view class="top-cell">
          <view class="info-view">
            <text v-if="needRefund" class="app-fc-main fs-30">差价退款金额</text>
            <text v-else class="app-fc-main fs-30">差价补偿金额</text>
          </view>
          <text class="fs-30 app-fc-alarm app-font-bold-500">{{needRefund ? '-' : ''}}{{ `¥${diffPrice}` }}</text>
        </view>
      </view>
      <view class="line-view"/>
      <view class="bottom-container">
        <view class="price-container">
          <view class="price-view">
            <text class="app-fc-main fs-30 app-font-bold-500">￥</text>
            <text class="app-fc-main fs-40 app-font-bold-700">{{ diffPrice }}</text>
          </view>
          <text class="fs-24 app-fc-normal">差价补退</text>
        </view>
        <view class="submit-btn" @click.stop="paymentConfirm">
          <text v-if="needRefund" class="app-fc-white fs-30">提交</text>
          <text v-else class="app-fc-white fs-30">确认支付</text>
        </view>
      </view>
    </view>
  </select-modal>
</template>

<script>
import SelectModal from "@/components/select-modal.vue";
import DetailCell from "@/components/petOrder/detail-cell.vue";

export default {
  components: { DetailCell, SelectModal },
  props: {
    orderInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    newWeight: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    price() {
      return this.orderInfo.price || '';
    },
    diKouPrice() {
      return this.orderInfo.dikou_price || '';
    },
    servicePrice() {
      return +this.orderInfo.fuwuquan_price || 0;
    },
    weightName() {
      return this.orderInfo.new_weight_name || this.orderInfo?.weight_name || '';
    },
    realWeightName() {
      return this.newWeight?.weight_name || '请选择';
    },
    diffPrice() {
      if (Object.keys(this.newWeight).length > 0) {
        const newPrice = Number(this.newWeight?.price || 0);
        const orderPrice = Number(this.orderInfo?.price || 0);
        const payPrice = Number(this.orderInfo?.pay_price || 0);
        let d = Math.abs(newPrice - orderPrice);
        if (d === 0) {
          return '0'
        } else if (newPrice > orderPrice) {
          //需要补交钱
          return d.toFixed(2);
        } else {
          //退款
          if (this.orderInfo.fuwuquan_id) {
            //使用服务券
            if ((orderPrice - newPrice) >= this.servicePrice) {
              return this.servicePrice.toFixed(2);
            } else {
              return d.toFixed(2);
            }
          } else {
            if ((orderPrice - newPrice) >= payPrice) {
              return payPrice.toFixed(2);
            } else {
              return d.toFixed(2);
            }
          }
        }
      }
      return '0';
    },
    needRefund() {
      const newPrice = Number(this.newWeight?.price || 0);
      const orderPrice = Number(this.orderInfo?.price || 0);
      return orderPrice > newPrice;
    },
  },
  data() {
    return {};
  },
  methods: {
    selectedWeight() {
      this.$emit('changeWeight')
    },
    closeAction() {
      this.$emit('close');
    },
    paymentConfirm() {
      // console.log(this.orderInfo,'--')
      if (Object.keys(this.newWeight).length === 0) {
        uni.showToast({
          icon: 'none',
          title: '请选择实际宠物重量区间'
        });
        return;
      }
      this.$emit('paymentConfirm', {
        needRefund: this.needRefund,
        diffPrice:this.diffPrice,
        order_id:this.orderInfo.order_id
      });
    }
  },
}
</script>

<style lang="scss" scoped>

.add-pay-container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .top-container {
    width: 100%;
    padding: 30rpx 40rpx 0;
    box-sizing: border-box;

    .top-cell {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 40rpx;
      box-sizing: border-box;
      border-radius: 30rpx;
      background-color: #F9F7F9;
      margin-bottom: 20rpx;
      margin-top: 12rpx;

      .info-view {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .right-arrow {
        width: 32rpx;
        height: 32rpx;
        flex-shrink: 0;
        margin-left: 12rpx;
      }
    }
  }

  .line-view {
    width: 100%;
    height: 2rpx;
    background-color: #ECECEC;
    margin-top: 10rpx;
  }

  .bottom-container {
    width: 100%;
    padding: 20rpx 32rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .price-container {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;

      .price-view {
        display: flex;
        align-items: flex-end;
        flex-direction: row;
      }
    }

    .submit-btn {
      flex-shrink: 0;
      width: 260rpx;
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 45rpx;
      background-color: $app_color_main;
    }
  }
}

</style>