menduner/src/views/mall/components/confirm_order/confirm.vue

<template>
  <div>
    <!-- 头部地址选择【配送地址】【自提地址】 -->
    <AddressSelection v-if="!goodsType" v-model="addressState" class="addressBox" />
    
    <!-- 表头 -->
    <div class="d-flex px-6 mb-2">
      <div class="img">小图</div>
      <div class="headerTitleList">
        <div class="title">商品名称</div>
        <div class="skuString">商品属性</div>
        <div class="price">单价</div>
        <div class="buyNum">数量</div>
        <div class="subtotal">小计</div>
      </div>
    </div>

    <!-- 购买的商品信息 -->
    <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 v-if="goodsType" class="mt-5" style="width: 800px;">
        <TextUI v-model="email" :item="emailObj"></TextUI>
      </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 { isNumber } from '@/utils/is'
  import { checkCompanyEmail } from '@/utils/validate'
  import TextUI from '@/components/FormUI/TextInput'
  const emit = defineEmits(['orderCreated'])
  const props = defineProps({
    data: {
      type: String,
      default: ''
    }
  })

  const goodsType = ref(0)
  const email = ref('') // 如果商品spu的type不是0(不是普通商品)则要填这个邮箱

  const state = reactive({
    orderPayload: {},
    orderInfo: {
      items: [], // 商品项列表
      price: {}, // 价格信息
    },
    showCoupon: false, // 是否展示优惠劵
    couponInfo: [], // 优惠劵列表
    showDiscount: false, // 是否展示营销活动
    // ========== 积分 ==========
    pointStatus: false, //是否使用积分
  });
  const emailObj = {
    type: 'text',
    key: 'email',
    value: '',
    label: '接收邮箱 *（虚拟商品会发送到填写的邮箱，填写错误的邮箱会导致接收失败，请注意检查！）',
    rules: [
      value => {
        if (value) return true
        return '请输入邮箱'
      },
      value => {
        if (checkCompanyEmail(value)) return true
        return '请输入正确的邮箱'
      }
    ],
  }

  // 检测支付环境
  // 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, 
    async (newVal) => {
      if (newVal) {
        state.orderPayload = JSON.parse(newVal);
        // 是否是普通快递商品
        goodsType.value = state.orderPayload && isNumber(state.orderPayload?.goodsType-0) ? state.orderPayload.goodsType-0 : 0
        
        if (!goodsType.value) tradeConfig()
        else {
          // addressState.value.deliveryType = null
          getOrderInfo()
        }
      }
    },
    { 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 (goodsType.value && !email.value) {
      Snackbar.warning('请填写邮箱')
      return;
    }
    if (goodsType.value && !checkCompanyEmail(email.value)) {
      Snackbar.warning('请输入正确的邮箱')
      return;
    }
    submitOrder()
  }
  
  // 创建订单&跳转
  async function submitOrder() {
    let query = {
      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 (email.value) query = Object.assign(query, { receiverExtend: { email: email.value} })

    const data = await createOrder(query)
    if (!data.payOrderId && data.payOrderId > 0) return
    // 更新购物车列表，如果来自购物车
    emit('orderCreated', {
      payOrderId: data.payOrderId,
      orderId: data.id
    })
    // payImmediately(data.payOrderId)
  }

  // 检查库存 & 计算订单价格
  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;
    }
  }
  .img {
    width: 92px
  }
  .headerTitleList {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .title {
      width: 30%;
    }
    .skuString {
      width: 25%;
    }
    .price {
      width: 15%;
    }
    .buyNum {
      width: 10%;
    }
    .subtotal {
      width: 15%;
    }
  }
</style>