menduner/src/views/mall/components/details/order/confirm.vue

<template>
  <div>
    <!-- 头部地址选择【配送地址】【自提地址】 -->
    <AddressSelection v-model="addressState" class="addressBox" />
    
    <!-- 购买的商品信息 -->
    <v-card class="goodsListBox mb-3 pa-3">
      <s-goods-item
        v-for="(item, index) in state.orderInfo.items"
        :key="item.skuId"
        :img="item.picUrl"
        :title="item.spuName"
        :skuText="item.properties.map((property) => property.valueName).join(' ')"
        :price="item.price"
        :num="item.count"
        :style="{'marginTop': index ? '8px' : '0px'}"
      />
    </v-card>

    <!-- 价格信息 -->
    <div>
      <div>
        <div class="order-item d-flex">
          <div class="item-title mr-3 ">商品金额：</div>
          <div>￥{{ fen2yuan(state.orderInfo.price.totalPrice) }}</div>
        </div>
        <!-- 快递配置时，信息的展示 -->
        <div
          class="order-item d-flex"
          v-if="addressState.deliveryType === 1"
        >
          <div class="item-title mr-3">运{{ spaces() }}费：</div>
          <div>
            <span class="text-red" v-if="state.orderInfo.price.deliveryPrice > 0">
              +￥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }}
            </span>
            <div class="item-value" v-else>免运费</div>
          </div>
        </div>
        <!-- 门店自提时，需要填写姓名和手机号 -->
      </div>
      
      <div class="mt-5">
        <v-text-field
          v-model="state.orderPayload.remark"
          label="订单备注" 
          placeholder="建议留言前先与商家沟通"
          variant="outlined" 
          density="compact"
          color="primary"
        ></v-text-field>
      </div>

      <div class="total-box-footer d-flex flex-column align-end">
        <div class="d-flex">
          <div class="mr-3">
            <span class="total-num">共</span>
            <span class="mx-1" style="color: var(--v-primary-base);">{{ state.orderInfo.items.reduce((acc, item) => acc + item.count, 0) }}</span>
            <span class="total-num">件</span>
          </div>
          <div>合计：</div>
          <div class="total-num text-red"> ￥{{ fen2yuan(state.orderInfo.price.payPrice) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref, watch } from 'vue'
  import AddressSelection from './addressSelection.vue'
  import sGoodsItem from '@/views/mall/components/s-goods-item'
  import { fen2yuan } from '@/hooks/web/useGoods'
  import { spaces } from '@/utils/index.js'
  import { getTradeConfig, createOrder, settlementOrder } from '@/api/mall/trade'
  import Snackbar from '@/plugins/snackbar'
  import { getOrderPayStatus, payOrderSubmit } from '@/api/common'
  import Confirm from '@/plugins/confirm'
  import { useRouter } from 'vue-router'; const router = useRouter()
  import { useUserStore } from '@/store/user'; const userStore = useUserStore()
  import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
  const emit = defineEmits(['paySuccess'])

  const props = defineProps({
    data: {
      type: String,
      default: '',
    },
  });

  const state = reactive({
    orderPayload: {},
    orderInfo: {
      items: [], // 商品项列表
      price: {}, // 价格信息
    },
    showCoupon: false, // 是否展示优惠劵
    couponInfo: [], // 优惠劵列表
    showDiscount: false, // 是否展示营销活动
    // ========== 积分 ==========
    pointStatus: false, //是否使用积分
  });
  // 检测支付环境
  const payState = reactive({
    orderType: 'goods', // 订单类型; goods - 商品订单, recharge - 充值订单
    orderInfo: {}, // 支付单信息
    payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
    payMethods: [], // 可选的支付方式
    payment: '', // 选中的支付方式
  });

  const addressState = ref({
    addressInfo: {}, // 选择的收货地址
    deliveryType: undefined, // 收货方式：1-快递配送，2-门店自提
    isPickUp: true, // 门店自提是否开启
    pickUpInfo: {}, // 选择的自提门店信息
    receiverName: '', // 收件人名称
    receiverMobile: '', // 收件人手机
  });
  
  watch(
    () => props.data, 
    (newVal) => {
      if (newVal) {
        state.orderPayload = JSON.parse(newVal);
        tradeConfig()
      }
    },
    { immediate: true },
    // { deep: true }
  )
  async function tradeConfig () {
    // 获取交易配置
    const data = await getTradeConfig();
    addressState.value.isPickUp = data.deliveryPickUpEnabled;

    // 价格计算
    // 情况一：先自动选择“快递物流”
    addressState.value.deliveryType = 1;
    let orderCode = await getOrderInfo();
    if (orderCode === 0) {
      return;
    }
    // 情况二：失败，再自动选择“门店自提”
    if (addressState.value.isPickUp) {
      addressState.value.deliveryType = 2;
      let orderCode = await getOrderInfo();
      if (orderCode === 0) {
        return;
      }
    }
    // 情况三：都失败，则不选择
    addressState.value.deliveryType = undefined;
    await getOrderInfo()
  }

  // 提交订单
  function onConfirm() {
    if (addressState.value.deliveryType === 1 && !addressState.value.addressInfo.id) {
      Snackbar.warning('请选择收货地址')
      return;
    }
    // if (addressState.value.deliveryType === 2) {
    //   if (!addressState.value.pickUpInfo.id) {
    //     Snackbar.warning('请选择自提门店地址')
    //     return;
    //   }
    //   if (addressState.value.receiverName === '' || addressState.value.receiverMobile === '') {
    //     Snackbar.warning('请填写联系人或联系人电话')
    //     return;
    //   }
    //   if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(addressState.value.receiverName)) {
    //     Snackbar.warning('请填写您的真实姓名')
    //     return;
    //   }
    //   if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(addressState.value.receiverMobile)) {
    //     Snackbar.warning('请填写正确的手机号')
    //     return;
    //   }
    // }
    submitOrder();
  }
  
  const userAccount = ref(JSON.parse(localStorage.getItem('userAccount')) || {}) // 账户信息

  userStore.$subscribe((mutation, state) => {
    if (Object.keys(state.userAccount).length) userAccount.value = state.userAccount
  })

  // 获得支付方式 // 暂时只对接余额支付(wallet) 
  const channel = 'wallet'
  const payOrderSubmitFun = async () => {
    // 提交支付订单
    let obj = {
      id: payState.orderInfo.id,
      channelCode: channel,
      channelExtras: {},
    };
    const res = await payOrderSubmit(obj)
    // console.log('提交支付订单payOrderSubmit:', res)
    Snackbar.success('支付成功，请前往我的订单查看！')
    emit('paySuccess')
    userStore.getUserAccountBalance()
  }

  // 设置支付订单信息
  const payImmediately = async (id) => {
    // 获得支付订单信息
    const orderRes = await getOrderPayStatus({ id, sync: true })
    if (!orderRes) {
      payState.payStatus = -2;
      return;
    }
    payState.orderInfo = orderRes;
    // 对比余额是否不足 订单金额:orderInfo?.price-0
    const balance = userAccount.value?.balance ? userAccount.value.balance-0 : 0
    // const balanceShow = userAccount.value?.balance && userAccount.value?.balance > 0 ? (userAccount.value?.balance / 100.0).toFixed(2) : 0
    if (balance < payState?.orderInfo?.price-0) {
      // 余额不足
      Confirm(t('common.confirmTitle'), '余额不足，是否前往充值？', {sureText: '立即前往'}).then(() => {
        router.push({ path: '/personalRecharge' })
      })
    } else {
      Confirm(t('common.confirmTitle'), `将会从余额扣除￥${fen2yuan(state.orderInfo.price.payPrice)}，是否确定支付？`).then(() => {
        payOrderSubmitFun()
      })
    }
  }

  // 创建订单&跳转
  async function submitOrder() {
    const data = await createOrder({
      items: state.orderPayload.items,
      couponId: state.orderPayload.couponId,
      remark: state.orderPayload.remark,
      deliveryType: addressState.value.deliveryType,
      addressId: addressState.value.addressInfo.id, // 收件地址编号
      pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
      receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名
      receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机
      pointStatus: state.pointStatus,
      combinationActivityId: state.orderPayload.combinationActivityId,
      combinationHeadId: state.orderPayload.combinationHeadId,
      seckillActivityId: state.orderPayload.seckillActivityId,
      pointActivityId: state.orderPayload.pointActivityId,
    });
    if (data.payOrderId && data.payOrderId > 0) payImmediately(data.payOrderId)
    // 更新购物车列表，如果来自购物车
    // if (state.orderPayload.items[0].cartId > 0) {
    //   sheep.$store('cart').getList();
    // }

    // // 跳转到支付页面
    // if (data.payOrderId && data.payOrderId > 0) {
    //   sheep.$router.redirect('/pages/pay/index', {
    //     id: data.payOrderId,
    //   });
    // } else {
    //   sheep.$router.redirect('/pages/order/detail', {
    //     id: data.id,
    //   });
    // }
  }

  // 检查库存 & 计算订单价格
  async function getOrderInfo() {
    // 计算价格
    const data = await settlementOrder({
      items: state.orderPayload.items,
      couponId: state.orderPayload.couponId,
      deliveryType: addressState.value.deliveryType,
      addressId: addressState.value.addressInfo.id, // 收件地址编号
      pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
      receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名
      receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机
      pointStatus: state.pointStatus,
      combinationActivityId: state.orderPayload.combinationActivityId,
      combinationHeadId: state.orderPayload.combinationHeadId,
      seckillActivityId: state.orderPayload.seckillActivityId,
      pointActivityId: state.orderPayload.pointActivityId,
    });
    state.orderInfo = data;
    state.couponInfo = data.coupons || [];
    // 设置收货地址
    if (state.orderInfo.address) {
      addressState.value.addressInfo = state.orderInfo.address;
    }
    return 0;
  }

  // 使用 watch 监听地址和配送方式的变化
  watch(addressState, async (newAddress, oldAddress) => {
    // 如果收货地址或配送方式有变化，则重新计算价格
    if (
      newAddress.addressInfo.id !== oldAddress.addressInfo.id ||
      newAddress.deliveryType !== oldAddress.deliveryType
    ) {
      await getOrderInfo();
    }
  });

  defineExpose({
    onConfirm
  })
</script>

<style lang="scss" scoped>
  .addressBox {
    margin-bottom: 20px;
  }
  .goodsListBox {
    // background: linear-gradient(to bottom, #e93323 0%, #e93323 100%);
    // background: linear-gradient(to bottom, var(--v-primary-base) 0%, var(--v-primary-base) 100%);
    border-radius: 4px;
  }
  .order-item {
    color: #7a7a7a;
  }

  .total-box-footer {
    .total-num {
      color: #7a7a7a;
    }
  }
</style>