city-gather/src/subPack-xsb/confirmOrder/index.vue

<script setup lang="ts">
import CouponItem from '../components/coupon/index.vue'
import router from '@/router'

const { userMemberInfo } = storeToRefs(useUserStore())
definePage({
  name: 'xsb-confirmOrder',
  islogin: true,
  style: {
    navigationBarTitleText: '提交订单',
  },
})
const { selectedAddress, userInfo } = storeToRefs(useUserStore())
const { SelectShopInfo } = storeToRefs(useSysXsbStore())
const { Location } = storeToRefs(useAddressStore())
type ConfirmOrderInfo = Api.shoppingCartOrderConfirm & Partial<Api.AppletOrderSkuVo>

const orderInfo = ref<ConfirmOrderInfo>()
const { totalProduct } = storeToRefs(useSmqjhCartStore())
const isPay = ref(false)
const remarks = ref('')
const initialCouponId = ref<string | undefined>(undefined)
const confirmedCouponId = ref<string | undefined>(undefined)
const draftCouponId = ref<string | undefined>(undefined)
const list = ref<string[]>(['即时配送', '自提'])
const current = ref('即时配送')
const model = reactive<{
  value1: string
  value2: string
}>({
  value1: '',
  value2: '',
})
const mobilePattern = /^1[3-9]\d{9}$/
const mobileRules = [{ required: true, pattern: mobilePattern, message: '请输入正确的手机号' }]
const deliveryType = ref(1)
const isMemberGiftOrder = computed(() => !!orderInfo.value?.memberGiftItems?.length)
const isSingleSkuOrder = computed(() => (orderInfo.value?.skuList?.length || 0) <= 1)
const isSelfPickup = computed(() => current.value === '自提')
const shopAddressInfo = computed(() => orderInfo.value?.shopAddressDTO)
const shopDistanceText = computed(() => {
  const distance = shopAddressInfo.value?.distance
  if (distance === undefined || distance === null) {
    return ''
  }
  return `距你${Number(distance).toFixed(2)}km`
})

// 优惠券选择
const couponPopup = ref(false)
const couponList = ref<Api.AppMemberCouponVO[]>([])
const couponTabActive = ref(0)
const availableCoupons = computed(() => couponList.value.filter(it => it.isUsed === 2))
const unavailableCoupons = computed(() => couponList.value.filter(it => it.isUsed !== 2))
const displayCoupons = computed(() => couponTabActive.value === 0 ? availableCoupons.value : unavailableCoupons.value)
const confirmedCoupon = computed(() => couponList.value.find(it => it.allowanceId === confirmedCouponId.value))
const draftCoupon = computed(() => couponList.value.find(it => it.allowanceId === draftCouponId.value))
const hasManualCouponSelection = computed(() => confirmedCouponId.value !== initialCouponId.value)
const currentCouponDiscount = computed(() => {
  if (hasManualCouponSelection.value) {
    return Number(confirmedCoupon.value?.discountMoney || 0)
  }
  return Number(orderInfo.value?.coupon || 0)
})
const memberDiscountCents = computed(() => {
  if (!isMemberGiftOrder.value && userMemberInfo.value?.active) {
    return Math.round(Number(unref(orderInfo)?.memberDiscountAmount || 0) * 100)
  }
  return 0
})
const offsetPoints = computed(() => {
  const couponCents = Math.round(currentCouponDiscount.value * 100)
  const freightCents = isSelfPickup.value ? 0 : Math.round(Number(unref(orderInfo)?.transfee) * 100)
  const money = freightCents + Math.round(Number(unref(orderInfo)?.price) * 100) - couponCents - memberDiscountCents.value
  const cap = Math.max(0, money)
  if (Number(unref(orderInfo)?.offsetPoints) > cap) {
    return cap
  }
  return Number(unref(orderInfo)?.offsetPoints)
})
const currentCouponName = computed(() => {
  if (hasManualCouponSelection.value) {
    return getCouponDisplayName(confirmedCoupon.value)
  }
  return getCouponDisplayName(orderInfo.value)
})
const displayTotalPrice = computed(() => {
  if (!orderInfo.value) {
    return 0
  }
  const goodsPrice = Number(orderInfo.value.price || 0)
  const freight = Number(deliveryType.value !== 2 ? orderInfo.value.transfee : 0)
  const couponDiscount = hasManualCouponSelection.value
    ? Number(confirmedCoupon.value?.discountMoney || 0)
    : Number(orderInfo.value?.coupon || 0)
  const pointsDiscount = offsetPoints.value / 100
  const memberDiscount = memberDiscountCents.value / 100
  return Math.max(0, Number((goodsPrice + freight - couponDiscount - pointsDiscount - memberDiscount).toFixed(2)))
})
const displayDiscountTotal = computed(() => Number((currentCouponDiscount.value + offsetPoints.value / 100 + memberDiscountCents.value / 100).toFixed(2)))
const giftOriginalTotal = computed(() => {
  if (!isMemberGiftOrder.value)
    return 0
  return Number((Number(orderInfo.value?.price || 0) + Number(orderInfo.value?.transfee || 0)).toFixed(2))
})

onLoad((options: any) => {
  orderInfo.value = JSON.parse(options.data)
  console.log(orderInfo.value, '===商品数据===')
  syncCouponState()
  deliveryType.value = current.value === '自提' ? 2 : 3
  // model.value1 = userInfo.value?.nickName || ''
  model.value2 = userInfo.value?.mobile || ''
})
onShow(() => {
  useUserStore().getuserAddresslist()
  if (orderInfo.value && current.value === '即时配送' && (isSingleSkuOrder.value || isMemberGiftOrder.value)) {
    getConfirmOrder()
  }
})

watch(current, async (value) => {
  deliveryType.value = value === '自提' ? 2 : 3
  if (orderInfo.value && (isSingleSkuOrder.value || isMemberGiftOrder.value)) {
    await getConfirmOrder()
  }
})

function getCouponDisplayName(coupon?: Partial<Api.AppMemberCouponVO> & Record<string, any>) {
  return coupon?.activityName || coupon?.couponName || ''
}

function syncCouponState() {
  couponList.value = orderInfo.value?.orderCouponItemDTOS || []
  initialCouponId.value = orderInfo.value?.allowanceId
  confirmedCouponId.value = initialCouponId.value
  draftCouponId.value = initialCouponId.value
}

function getOrderConfirmParams() {
  const firstSku = orderInfo.value?.skuList?.[0]
  return {
    skuId: firstSku?.skuId,
    num: Number(firstSku?.num || 1),
    channelId: userInfo.value?.channelId,
    shopId: Number(firstSku?.shopId || SelectShopInfo.value?.shopId || 2),
    dvyType: deliveryType.value,
  }
}

async function getConfirmOrder() {
  const params: Record<string, any> = getOrderConfirmParams()
  if (!params.skuId) {
    return
  }
  if (isSelfPickup.value) {
    if (!Location.value.latitude || !Location.value.longitude) {
      useGlobalToast().show('暂无定位缓存，无法计算自提点距离')
    }
    else {
      params.latitude = Location.value.latitude
      params.longitude = Location.value.longitude
    }
  }
  const res = await Apis.xsb.skuOrderConfirm({
    data: params,
  })
  if (isMemberGiftOrder.value) {
    // 赠品订单仅更新配送费和店铺地址信息，保留原始商品数据
    orderInfo.value = {
      ...orderInfo.value,
      transfee: res.data.transfee ?? orderInfo.value?.transfee ?? 0,
      shopAddressDTO: res.data.shopAddressDTO ?? orderInfo.value?.shopAddressDTO,
    } as ConfirmOrderInfo
  }
  else {
    const originalSku = orderInfo.value?.skuList?.[0]
    const skuList = res.data.sku
      ? [{ ...res.data.sku, id: originalSku?.id, num: params.num, shopId: params.shopId }]
      : (orderInfo.value?.skuList || [])
    orderInfo.value = {
      ...orderInfo.value,
      ...res.data,
      skuList,
    } as ConfirmOrderInfo
    syncCouponState()
  }
}

function openShopLocation() {
  uni.openLocation({
    latitude: Number(shopAddressInfo.value?.shopLat) || 0,
    longitude: Number(shopAddressInfo.value?.shopLng) || 0,
    name: shopAddressInfo.value?.shopName,
    address: shopAddressInfo.value?.shopAddress,
  })
}

async function openCouponPopup() {
  draftCouponId.value = confirmedCouponId.value
  couponPopup.value = true
}

function handleSelectCoupon(item: Api.AppMemberCouponVO) {
  if (item.isUsed !== 2 || !item.allowanceId) {
    return
  }
  // 再次点击已选中的券则取消选中
  if (draftCouponId.value === item.allowanceId) {
    draftCouponId.value = undefined
    return
  }
  draftCouponId.value = item.allowanceId
}

function confirmCoupon() {
  confirmedCouponId.value = draftCouponId.value
  couponPopup.value = false
}

async function handleH5PayResult(orderNumber: string): Promise<boolean> {
  const isPaySuccess = await useUserStore().pollOrderPaySuccess(orderNumber)
  if (isPaySuccess) {
    router.replace({ name: 'xsb-order' })
    return true
  }

  useGlobalToast().show({ msg: '暂未查询到支付成功，请稍后在订单列表查看' })
  isPay.value = false
  return false
}

async function handlePay() {
  if (!isSelfPickup.value && !selectedAddress.value) {
    useGlobalToast().show({ msg: '请选择收货地址' })
    return
  }
  if (!orderInfo.value) {
    useGlobalToast().show({ msg: '网络异常！请联系客服' })
    return
  }
  if (isSelfPickup.value) {
    if (!model.value1) {
      useGlobalToast().show({ msg: '请填写联系人' })
      return
    }
    if (!mobilePattern.test(model.value2)) {
      useGlobalToast().show({ msg: '请输入正确的手机号' })
      return
    }
  }
  isPay.value = true
  try {
    if (isMemberGiftOrder.value) {
      console.log('=====赠品订单')
      if (!selectedAddress.value) {
        useGlobalToast().show({ msg: '请选择收货地址' })
        return
      }
      await Apis.sys.giftsReceive({
        data: {
          addressId: selectedAddress.value.id,
          items: orderInfo.value.memberGiftItems,
        },
      })
      await useUserStore().paySuccess('xsb-order', 'subPack-xsb/commonTab/index')
      return
    }
    const orderItemList = orderInfo.value?.skuList.map((it) => {
      return {
        prodCount: it.num,
        skuId: it.skuId,
      }
    })

    const orderNumber = await useUserStore().getOrderPayMent(
      deliveryType.value !== 2 ? orderInfo.value.transfee : 0,
      'XSB',
      deliveryType.value,
      Number(orderInfo.value?.skuList[0].shopId || SelectShopInfo.value?.shopId),
      orderItemList,
      unref(remarks),
      confirmedCouponId.value,
      isSelfPickup.value
        ? {
            consigneeName: model.value1,
            consigneeMobile: model.value2,
          }
        : undefined,
    )
    const payMent = await useUserStore().getPayMent(orderNumber)
    const skuList = orderInfo.value?.skuList || []
    await useUserStore().clearCart(skuList)
    totalProduct.value = null
    isPay.value = false
    if (payMent.payType !== 'point') {
      try {
        // #ifdef H5
        useUserStore().handleCommonWechatPay(orderNumber)
        await handleH5PayResult(orderNumber)
        // #endif
        // #ifdef MP-WEIXIN
        const res = await useUserStore().handleCommonPayMent(orderNumber)
        await useUserStore().getWxCommonPayment(res)
        await useUserStore().paySuccess('xsb-order', 'subPack-xsb/commonTab/index')
        // #endif
      }
      catch {
        await useUserStore().payError('xsb-order', 'subPack-xsb/commonTab/index')
      }
    }
    else {
      await useUserStore().handleCommonPayMent(orderNumber)
      await useUserStore().paySuccess('xsb-order', 'subPack-xsb/commonTab/index')
    }
  }
  catch {
    isPay.value = false
  }
}
</script>

<template>
  <view class="page px20rpx py20rpx">
    <wd-segmented v-model:value="current" :options="list" />
    <view
      v-if="current === '即时配送'"
      class="my20rpx rounded-16rpx bg-white p24rpx"
      @click="router.push({ name: 'common-addressList', params: { type: 'select' } })"
    >
      <view class="flex items-center justify-between">
        <view v-if="!selectedAddress" class="flex items-center">
          <wd-icon name="location" size="18px" />
          <view class="ml10rpx text-28rpx">
            请添加收货地址
          </view>
        </view>
        <view v-else>
          <view class="flex items-center">
            <view v-if="selectedAddress.defaulted" class="mr20rpx">
              <wd-tag type="primary">
                默认
              </wd-tag>
            </view>
            <view class="flex items-center text-28rpx font-semibold">
              <view>{{ selectedAddress?.consigneeName }} </view>
              <view class="ml20rpx">
                {{ selectedAddress?.consigneeMobile }}
              </view>
            </view>
          </view>
          <view class="mt20rpx flex items-center text-24rpx text-#AAAAAA">
            {{ selectedAddress?.province }} {{ selectedAddress?.city }} {{ selectedAddress?.detailAddress }}
          </view>
        </view>
        <wd-icon name="arrow-right" size="18px" color="#aaa" />
      </view>
    </view>

    <view v-else class="my20rpx rounded-16rpx bg-white p24rpx">
      <view class="flex items-center gap-50rpx">
        <view class="flex-1">
          <view class="text-28rpx font-semibold">
            自提点：{{ shopAddressInfo?.shopName || orderInfo?.shopName || '暂无门店信息' }}
          </view>
          <view class="mt-20rpx text-24rpx text-#AAAAAA">
            {{ shopAddressInfo?.shopAddress || '暂无门店地址' }}
          </view>
        </view>
        <view class="flex-shrink-0" @click="openShopLocation">
          <view v-if="shopDistanceText" class="mb-20rpx text-24rpx text-#AAAAAA">
            {{ shopDistanceText }}
          </view>
          <wd-icon name="location" size="22px" color="var(--them-color)" />
        </view>
      </view>
      <view>
        <view class="mt-20rpx flex items-center">
          <view class="w100rpx text-28rpx">
            联系人:
          </view>
          <wd-input
            v-model="model.value1"
            prop="value1"
            clearable
            placeholder="请输入联系人"
            :rules="[{ required: true, message: '请填写联系人' }]"
          />
        </view>
        <view class="mt-20rpx flex items-center">
          <view class="w140rpx text-28rpx">
            预留电话：
          </view>
          <wd-input
            v-model="model.value2"
            prop="value2"
            clearable
            placeholder="请输入预留电话"
            :rules="mobileRules"
          />
        </view>
      </view>
    </view>

    <view class="rounded-16rpx bg-white p24rpx">
      <view class="flex items-center text-28rpx font-semibold">
        {{ orderInfo?.shopName }}
      </view>
      <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
      <CollapsePanel :line-height="150">
        <view v-for="item in orderInfo?.skuList" :key="item.id" class="mb20rpx w-full flex items-center">
          <view class="mr20rpx w120rpx flex-shrink-0">
            <image :src="item.pic" class="h120rpx w120rpx" />
          </view>
          <view class="flex-1">
            <view class="w-full flex items-center justify-between font-semibold">
              <view class="text-28rpx">
                <text v-if="isMemberGiftOrder" class="mr-8rpx rounded-8rpx bg-#FF4D3A px-12rpx py-4rpx text-22rpx text-#FFF">
                  赠品
                </text>
                {{ item.skuName }}
              </view>
              <view class="text-32rpx text-#FF4D3A">
                ￥{{ item.price }}
              </view>
            </view>
            <view class="text-24rpx text-#AAAAAA">
              规格：{{ item.spec }}
            </view>
            <view class="text-24rpx text-#AAAAAA">
              ×{{ item.num || 1 }}
            </view>
          </view>
        </view>
      </CollapsePanel>
    </view>
    <view class="mt20rpx rounded-16rpx bg-white p24rpx">
      <view class="mb28rpx flex items-center justify-between text-28rpx">
        <view>商品金额</view>
        <view class="text-#FF4D3A font-semibold">
          ￥{{ orderInfo?.price }}
        </view>
      </view>
      <view class="mb28rpx flex items-center justify-between text-28rpx">
        <view v-if="deliveryType == 3">
          配送费（即时配送）
        </view>
        <view v-if="deliveryType == 1">
          快递
        </view>
        <view v-if="deliveryType == 2">
          自提
        </view>
        <view class="text-#FF4D3A font-semibold">
          ￥{{ deliveryType == 2 ? '0.00' : orderInfo?.transfee }}
        </view>
      </view>
      <view v-if="!isMemberGiftOrder && userMemberInfo.active && orderInfo?.memberBenefitDesc && orderInfo?.memberDiscountAmount" class="mb28rpx flex items-center justify-between text-28rpx">
        <view>{{ orderInfo?.memberBenefitDesc }}</view>
        <view class="text-#FF4D3A font-semibold">
          -￥{{ orderInfo?.memberDiscountAmount }}
        </view>
      </view>
      <view v-if="!isMemberGiftOrder" class="mb28rpx flex items-center justify-between text-28rpx" @click="openCouponPopup">
        <view>优惠券</view>
        <view class="flex items-center">
          <view v-if="currentCouponDiscount > 0" class="text-[#FF4D3A] font-semibold">
            -￥{{ currentCouponDiscount }}
          </view>
          <view v-else class="text-[#AAAAAA]">
            {{ availableCoupons.length > 0 ? `${availableCoupons.length}张可用` : '暂无可用' }}
          </view>
          <wd-icon name="arrow-right" size="18px" color="#aaa" class="ml10rpx" />
        </view>
      </view>
      <view v-if="!isMemberGiftOrder" class="flex items-center justify-between text-28rpx">
        <view>积分（{{ offsetPoints }}）</view>
        <view class="text-#FF4D3A font-semibold">
          - ￥{{ offsetPoints / 100 }}
        </view>
      </view>
      <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
      <view class="flex items-center justify-between text-28rpx">
        <view class="font-semibold">
          总计：
        </view>
        <view v-if="isMemberGiftOrder" class="flex items-center">
          <text class="mr-8rpx rounded-8rpx bg-#FF4D3A px-12rpx py-4rpx text-22rpx text-#FFF">
            赠品
          </text>
          <text class="text-#AAAAAA line-through">
            ￥{{ giftOriginalTotal }}
          </text>
        </view>
        <view v-else class="text-#FF4D3A font-semibold">
          ￥ {{ displayTotalPrice }}
        </view>
      </view>
    </view>
    <view v-if="isMemberGiftOrder" class="mt20rpx flex items-center gap-20rpx rounded-16rpx bg-white p24rpx">
      <wd-icon name="warning" size="16px" color="#FF4D3A" />
      <text class="text-24rpx">
        本商品为会员权益赠品，购买后不支持售后
      </text>
    </view>
    <view class="mt20rpx flex items-center rounded-16rpx bg-white p24rpx">
      <view class="w80rpx">
        备注
      </view>
      <view class="flex-1">
        <wd-input v-model="remarks" placeholder="选填，请先和商家协商一致，付款后商家可见" clearable no-border />
      </view>
    </view>
    <view class="h250rpx" />

    <!-- 优惠券选择弹窗 -->
    <Zpopup v-model="couponPopup" :zindex="100" bg="#fff">
      <view class="ios box-border w-full">
        <view class="px-32rpx pt-32rpx">
          <view class="mb-24rpx text-center text-32rpx font-semibold">
            优惠券
          </view>
          <view class="mb-24rpx flex items-center">
            <view
              class="mr-16rpx flex-1 rounded-full py-18rpx text-center text-28rpx"
              :class="couponTabActive === 0 ? 'bg-[var(--them-color)] text-white font-semibold' : 'bg-[#F0F0F0] text-[#666]'"
              @click="couponTabActive = 0"
            >
              可用券({{ availableCoupons.length }})
            </view>
            <view
              class="flex-1 rounded-full py-18rpx text-center text-28rpx"
              :class="couponTabActive === 1 ? 'bg-[var(--them-color)] text-white font-semibold' : 'bg-[#F0F0F0] text-[#666]'"
              @click="couponTabActive = 1"
            >
              不可用券({{ unavailableCoupons.length }})
            </view>
          </view>
          <view class="mb-20rpx flex items-center justify-between text-24rpx">
            <view class="text-[#333]">
              优惠券共减
            </view>
            <view v-if="draftCoupon" class="text-right text-[#FF4D3A]">
              {{ getCouponDisplayName(draftCoupon) }}，可减-￥{{ draftCoupon.discountMoney }}
            </view>
            <view v-else-if="currentCouponDiscount > 0 && currentCouponName" class="text-right text-[#FF4D3A]">
              {{ currentCouponName }}，可减￥{{ currentCouponDiscount }}
            </view>
            <view v-else class="text-[#AAAAAA]">
              暂未选择
            </view>
          </view>
        </view>
        <scroll-view scroll-y class="box-border h-560rpx px-32rpx">
          <view v-for="item in displayCoupons" :key="item.id" class="relative mb-20rpx">
            <view class="relative" @click="handleSelectCoupon(item)">
              <CouponItem :itemcoupon="item" :hide-all-btn="true" />
              <view
                class="absolute right-32rpx top-50% h-44rpx w-44rpx flex items-center justify-center -translate-y-50%"
              >
                <wd-icon v-if="draftCouponId === item.allowanceId" name="check-circle" size="44rpx" color="#FF4D3A" />
                <view v-else class="h-40rpx w-40rpx border-2rpx border-[#ccc] rounded-full border-solid" />
              </view>
            </view>
            <view
              v-if="item.unavailableReason"
              class="relative z-1 w-full rounded-b-16rpx bg-[#FFF4F3] px20rpx py18rpx text-24rpx -mt16rpx"
            >
              <view>
                不可用原因
              </view>
              <view>
                {{ item.unavailableReason }}
              </view>
            </view>
          </view>
          <view v-if="displayCoupons.length === 0" class="py-80rpx text-center text-28rpx text-[#AAAAAA]">
            暂无优惠券
          </view>
        </scroll-view>
      </view>
      <template #footer>
        <view class="box-border w-full px24rpx">
          <wd-button size="large" block type="primary" @click="confirmCoupon">
            确定
          </wd-button>
        </view>
      </template>
    </Zpopup>
    <view class="ios footer fixed bottom-0 left-0 z-10 box-border w-full rounded-t-16rpx bg-white px24rpx">
      <view class="box-border w-full flex items-center justify-between py20rpx">
        <view v-if="isMemberGiftOrder" class="flex items-center">
          <text class="mr-8rpx rounded-8rpx bg-#FF4D3A px-12rpx py-4rpx text-22rpx text-#FFF">
            赠品
          </text>
          <text class="text-32rpx text-#AAAAAA line-through">
            ￥{{ giftOriginalTotal }}
          </text>
        </view>
        <view v-else class="flex items-center text-#FF4D3A">
          <view class="font-semibold10 flex items-baseline text-36rpx">
            <text class="text-24rpx">
              ￥
            </text> {{ displayTotalPrice }}
          </view>
          <view class="ml20rpx text-22rpx">
            共减￥{{ displayDiscountTotal }}
          </view>
        </view>
        <view class="w180-btn w180rpx">
          <wd-button size="large" :loading="isPay" loading-color="#9ED605" @click="handlePay">
            立即支付
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.footer {
  box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
}

.page {
  .w180-btn {
    :deep() {
      .wd-button {
        width: 180rpx !important;
      }
    }
  }

}
</style>