|
@@ -1,174 +1,47 @@
|
|
<template>
|
|
<template>
|
|
- <div title="确认订单">
|
|
|
|
|
|
+ <div>
|
|
<!-- 头部地址选择【配送地址】【自提地址】 -->
|
|
<!-- 头部地址选择【配送地址】【自提地址】 -->
|
|
<AddressSelection v-model="addressState" class="mb-3" />
|
|
<AddressSelection v-model="addressState" class="mb-3" />
|
|
-
|
|
|
|
- <!-- 商品信息 -->
|
|
|
|
- <!-- <div>
|
|
|
|
|
|
+
|
|
|
|
+ <!-- 购买的商品信息 -->
|
|
|
|
+ <div class="goodsListBox mb-3">
|
|
<s-goods-item
|
|
<s-goods-item
|
|
- v-for="item in state.orderInfo.items"
|
|
|
|
|
|
+ v-for="(item, index) in state.orderInfo.items"
|
|
:key="item.skuId"
|
|
:key="item.skuId"
|
|
:img="item.picUrl"
|
|
:img="item.picUrl"
|
|
:title="item.spuName"
|
|
:title="item.spuName"
|
|
:skuText="item.properties.map((property) => property.valueName).join(' ')"
|
|
:skuText="item.properties.map((property) => property.valueName).join(' ')"
|
|
:price="item.price"
|
|
:price="item.price"
|
|
:num="item.count"
|
|
:num="item.count"
|
|
- marginBottom="10"
|
|
|
|
|
|
+ :marginTop="index ? '0' : '12'"
|
|
/>
|
|
/>
|
|
- </div> -->
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
<!-- 价格信息 -->
|
|
<!-- 价格信息 -->
|
|
<div>
|
|
<div>
|
|
<div>
|
|
<div>
|
|
<div class="order-item d-flex">
|
|
<div class="order-item d-flex">
|
|
- <div class="item-title mr-3">商品金额:</div>
|
|
|
|
|
|
+ <div class="item-title mr-3 ">商品金额:</div>
|
|
<div>
|
|
<div>
|
|
<span class="item-value">
|
|
<span class="item-value">
|
|
¥{{ fen2yuan(state.orderInfo.price.totalPrice) }}
|
|
¥{{ fen2yuan(state.orderInfo.price.totalPrice) }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <!-- <div
|
|
|
|
- v-if="state.orderPayload.pointActivityId"
|
|
|
|
- class="order-item ss-flex ss-col-center ss-row-between"
|
|
|
|
- >
|
|
|
|
- <div class="item-title">兑换积分</div>
|
|
|
|
- <div class="ss-flex ss-col-center">
|
|
|
|
- <image
|
|
|
|
- :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
|
|
|
- class="score-img"
|
|
|
|
- />
|
|
|
|
- <span class="item-value ss-m-r-24">
|
|
|
|
- {{ state.orderInfo.usePoint }}
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- class="order-item ss-flex ss-col-center ss-row-between"
|
|
|
|
- v-if="state.orderInfo.type === 0 || state.orderPayload.pointActivityId"
|
|
|
|
- >
|
|
|
|
- <div class="item-title">积分抵扣</div>
|
|
|
|
- <div class="ss-flex ss-col-center">
|
|
|
|
- {{ state.pointStatus || state.orderPayload.pointActivityId ? '剩余积分' : '当前积分' }}
|
|
|
|
- <image
|
|
|
|
- :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
|
|
|
- class="score-img"
|
|
|
|
- />
|
|
|
|
- <span class="item-value ss-m-r-24">
|
|
|
|
- {{
|
|
|
|
- state.pointStatus || state.orderPayload.pointActivityId
|
|
|
|
- ? state.orderInfo.totalPoint - state.orderInfo.usePoint
|
|
|
|
- : state.orderInfo.totalPoint || 0
|
|
|
|
- }}
|
|
|
|
- </span>
|
|
|
|
- <checkbox-group @change="changeIntegral" v-if="!state.orderPayload.pointActivityId">
|
|
|
|
- <checkbox
|
|
|
|
- :checked="state.pointStatus"
|
|
|
|
- :disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0"
|
|
|
|
- />
|
|
|
|
- </checkbox-group>
|
|
|
|
- </div>
|
|
|
|
- </div> -->
|
|
|
|
<!-- 快递配置时,信息的展示 -->
|
|
<!-- 快递配置时,信息的展示 -->
|
|
<div
|
|
<div
|
|
class="order-item d-flex"
|
|
class="order-item d-flex"
|
|
v-if="addressState.deliveryType === 1"
|
|
v-if="addressState.deliveryType === 1"
|
|
>
|
|
>
|
|
- <div class="item-title mr-3">运费:</div>
|
|
|
|
- <div class="ss-flex ss-col-center">
|
|
|
|
- <span class="item-value ss-m-r-24" v-if="state.orderInfo.price.deliveryPrice > 0">
|
|
|
|
|
|
+ <div class="item-title mr-3">运{{ spaces() }}费:</div>
|
|
|
|
+ <div>
|
|
|
|
+ <span class="item-value text-red" v-if="state.orderInfo.price.deliveryPrice > 0">
|
|
+¥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }}
|
|
+¥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }}
|
|
</span>
|
|
</span>
|
|
- <div class="item-value ss-m-r-24" v-else>免运费</div>
|
|
|
|
|
|
+ <div class="item-value" v-else>免运费</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 门店自提时,需要填写姓名和手机号 -->
|
|
<!-- 门店自提时,需要填写姓名和手机号 -->
|
|
- <div
|
|
|
|
- class="order-item ss-flex ss-col-center ss-row-between"
|
|
|
|
- v-if="addressState.deliveryType === 2"
|
|
|
|
- >
|
|
|
|
- <div class="item-title">联系人</div>
|
|
|
|
- <div class="ss-flex ss-col-center">
|
|
|
|
- 请填写您的联系姓名
|
|
|
|
- <!-- <uni-easyinput
|
|
|
|
- maxlength="20"
|
|
|
|
- placeholder="请填写您的联系姓名"
|
|
|
|
- v-model="addressState.receiverName"
|
|
|
|
- :inputBorder="false"
|
|
|
|
- :clearable="false"
|
|
|
|
- /> -->
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- class="order-item ss-flex ss-col-center ss-row-between"
|
|
|
|
- v-if="addressState.deliveryType === 2"
|
|
|
|
- >
|
|
|
|
- <div class="item-title">联系电话</div>
|
|
|
|
- <div class="ss-flex ss-col-center">
|
|
|
|
- 请填写您的联系电话
|
|
|
|
- <!-- <uni-easyinput
|
|
|
|
- maxlength="20"
|
|
|
|
- placeholder="请填写您的联系电话"
|
|
|
|
- v-model="addressState.receiverMobile"
|
|
|
|
- :inputBorder="false"
|
|
|
|
- :clearable="false"
|
|
|
|
- /> -->
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <!-- 优惠劵:只有 type = 0 普通订单(非拼团、秒杀、砍价),才可以使用优惠劵 -->
|
|
|
|
- <!-- <div
|
|
|
|
- class="order-item ss-flex ss-col-center ss-row-between"
|
|
|
|
- v-if="state.orderInfo.type === 0"
|
|
|
|
- >
|
|
|
|
- <div class="item-title">优惠券</div>
|
|
|
|
- <div class="ss-flex ss-col-center" @tap="state.showCoupon = true">
|
|
|
|
- <span class="item-value text-red" v-if="state.orderPayload.couponId > 0">
|
|
|
|
- -¥{{ fen2yuan(state.orderInfo.price.couponPrice) }}
|
|
|
|
- </span>
|
|
|
|
- <span
|
|
|
|
- class="item-value"
|
|
|
|
- :class="
|
|
|
|
- state.couponInfo.filter((coupon) => coupon.match).length > 0
|
|
|
|
- ? 'text-red'
|
|
|
|
- : 'text-disabled'
|
|
|
|
- "
|
|
|
|
- v-else
|
|
|
|
- >
|
|
|
|
- {{
|
|
|
|
- state.couponInfo.filter((coupon) => coupon.match).length > 0
|
|
|
|
- ? state.couponInfo.filter((coupon) => coupon.match).length + ' 张可用'
|
|
|
|
- : '暂无可用优惠券'
|
|
|
|
- }}
|
|
|
|
- </span>
|
|
|
|
- <span class="_icon-forward item-icon" />
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- class="order-item ss-flex ss-col-center ss-row-between"
|
|
|
|
- v-if="state.orderInfo.price.discountPrice > 0"
|
|
|
|
- >
|
|
|
|
- <div class="item-title">活动优惠</div>
|
|
|
|
- <div class="ss-flex ss-col-center" @tap="state.showDiscount = true">
|
|
|
|
- <span class="item-value text-red">
|
|
|
|
- -¥{{ fen2yuan(state.orderInfo.price.discountPrice) }}
|
|
|
|
- </span>
|
|
|
|
- <span class="_icon-forward item-icon" />
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- class="order-item ss-flex ss-col-center ss-row-between"
|
|
|
|
- v-if="state.orderInfo.price.vipPrice > 0"
|
|
|
|
- >
|
|
|
|
- <div class="item-title">会员优惠</div>
|
|
|
|
- <div class="ss-flex ss-col-center">
|
|
|
|
- <span class="item-value text-red">
|
|
|
|
- -¥{{ fen2yuan(state.orderInfo.price.vipPrice) }}
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- </div> -->
|
|
|
|
- </div>
|
|
|
|
- <div class="total-num ss-m-r-20">
|
|
|
|
- 共{{ state.orderInfo.items.reduce((acc, item) => acc + item.count, 0) }}件
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mt-5">
|
|
<div class="mt-5">
|
|
@@ -184,50 +57,25 @@
|
|
|
|
|
|
<div class="total-box-footer d-flex flex-column align-end">
|
|
<div class="total-box-footer d-flex flex-column align-end">
|
|
<div class="d-flex">
|
|
<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>合计:</div>
|
|
<div class="total-num text-red"> ¥{{ fen2yuan(state.orderInfo.price.payPrice) }}</div>
|
|
<div class="total-num text-red"> ¥{{ fen2yuan(state.orderInfo.price.payPrice) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <!-- 选择优惠券弹框 -->
|
|
|
|
- <!-- <s-coupon-select
|
|
|
|
- v-model="state.couponInfo"
|
|
|
|
- :show="state.showCoupon"
|
|
|
|
- @confirm="onSelectCoupon"
|
|
|
|
- @close="state.showCoupon = false"
|
|
|
|
- /> -->
|
|
|
|
-
|
|
|
|
- <!-- 满额折扣弹框 TODO @puhui999:【折扣】后续要把优惠信息打进去 -->
|
|
|
|
- <!-- <s-discount-list
|
|
|
|
- v-model="state.orderInfo"
|
|
|
|
- :show="state.showDiscount"
|
|
|
|
- @close="state.showDiscount = false"
|
|
|
|
- /> -->
|
|
|
|
-
|
|
|
|
- <!-- 底部 -->
|
|
|
|
- <!-- <su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
|
|
|
|
- <div class="footer-box border-top ss-flex ss-row-between ss-p-x-20 ss-col-center">
|
|
|
|
- <div class="total-box-footer ss-flex ss-col-center">
|
|
|
|
- <div class="total-num ss-font-30 text-red">
|
|
|
|
- ¥{{ fen2yuan(state.orderInfo.price.payPrice) }}
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <button
|
|
|
|
- class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main"
|
|
|
|
- @tap="onConfirm"
|
|
|
|
- >
|
|
|
|
- 提交订单
|
|
|
|
- </button>
|
|
|
|
- </div>
|
|
|
|
- </su-fixed> -->
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
import { reactive, ref, watch } from 'vue'
|
|
import { reactive, ref, watch } from 'vue'
|
|
import AddressSelection from './addressSelection.vue'
|
|
import AddressSelection from './addressSelection.vue'
|
|
|
|
+ import sGoodsItem from '@/views/mall/components/s-goods-item'
|
|
import { fen2yuan } from '@/hooks/web/useGoods'
|
|
import { fen2yuan } from '@/hooks/web/useGoods'
|
|
|
|
+ import { spaces } from '@/utils/index.js'
|
|
import { getTradeConfig, createOrder, settlementOrder } from '@/api/mall/trade'
|
|
import { getTradeConfig, createOrder, settlementOrder } from '@/api/mall/trade'
|
|
import Snackbar from '@/plugins/snackbar'
|
|
import Snackbar from '@/plugins/snackbar'
|
|
import { getOrderPayStatus, payOrderSubmit } from '@/api/common'
|
|
import { getOrderPayStatus, payOrderSubmit } from '@/api/common'
|
|
@@ -479,6 +327,10 @@
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
|
+ .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%);
|
|
|
|
+ }
|
|
.score-img {
|
|
.score-img {
|
|
width: 36rpx;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
height: 36rpx;
|
|
@@ -491,15 +343,17 @@
|
|
.item-title {
|
|
.item-title {
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
|
|
+ color: #7a7a7a;
|
|
}
|
|
}
|
|
|
|
|
|
.item-value {
|
|
.item-value {
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
|
+ color: #7a7a7a;
|
|
}
|
|
}
|
|
|
|
|
|
.text-disabled {
|
|
.text-disabled {
|
|
- color: #bbbbbb;
|
|
|
|
|
|
+ color: #070606;
|
|
}
|
|
}
|
|
|
|
|
|
.item-icon {
|
|
.item-icon {
|
|
@@ -521,7 +375,7 @@
|
|
height: 90rpx;
|
|
height: 90rpx;
|
|
|
|
|
|
.total-num {
|
|
.total-num {
|
|
- color: #333333;
|
|
|
|
|
|
+ color: #7a7a7a;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|