优选集团

src/router/modules/recruit.js

@@ -76,16 +76,6 @@ const recruit = [
           title: '我的'
         },
         children: [
-          // {
-          //   path: '/mall/user/cart',
-          //   component: () => import('@/views/mall/user/cart/index.vue'),
-          //   name: 'mallUserCart',
-          //   meta: {
-          //     title: '购物车',
-          //     enName: 'My Cart',
-          //     icon: 'mdi-cart-outline'
-          //   }
-          // },
           {
             path: '/mall/user/order',
             component: () => import('@/views/mall/user/order/index.vue'),
@@ -126,6 +116,14 @@ const recruit = [
           title: '订单详情'
         }
       },
+      {
+        path: '/mall/order/settlement/:id',
+        component: () => import('@/views/mall/settlement/index.vue'),
+        show: true,
+        meta: {
+          title: '订单结算页'
+        }
+      },
       // {
       //   path: '/mall/order',
       //   component: () => import('@/views/mall/order/index.vue'),

src/views/mall/components/details.vue

@@ -1,10 +1,11 @@
 <!-- 商品详情 -->
 <template>
 <div>
-  <Navbar />
-  <div class="default-width pb-5 mt-3" v-if="state.goodsInfo && Object.keys(state.goodsInfo).length">
+  <!-- <Navbar /> -->
+  <div class="default-width pb-5 mt-3 pt-3" v-if="state.goodsInfo && Object.keys(state.goodsInfo).length">
     <v-card class="carousel border-radius-8 white-bgc pa-5" style="width: 100%;">
-      <div class=" d-flex">
+      <v-btn variant="text" size="x-large" prepend-icon="mdi-chevron-triple-left" color="primary" @click.stop="router.go(-1)">返回</v-btn>
+      <div class="mt-1 d-flex">
         <!-- 图片展示-轮播 -->
         <div style="width: 400px; height: 400px;">
           <div v-if="selectedSkuPicUrl" class="selectedSkuImgBox" @mouseover="showSelectedSkuImg = true" @mouseleave="showSelectedSkuImg = false">
@@ -29,12 +30,19 @@
           <!-- 小标题 -->
           <div class="title-introduction">{{ state.goodsInfo?.introduction || '--' }}</div>
           <!-- 价格 -->
-          <div class="prices py-4 px-5 my-3" :class="{'activePrices': showActivePrices}">
+          <div class="prices py-4 my-3">
             <div class="left">
               <div class="price mr-5"><span>￥</span>{{ selectedSkuPrice}}</div>
               <div class="marketPrice" v-if="selectedSkuMarketPrice && selectedSkuMarketPrice !== selectedSkuPrice">优惠前￥{{ selectedSkuMarketPrice}}</div>
             </div>
-            <div v-if="showActivePrices" class="right">下单即可参与房券抽奖活动，百分百中奖，快来下单参与抽奖吧~</div>
+            <div v-if="showActivePrices" :class="{'activePrices': showActivePrices}" class="right pa-3 mt-3">
+              <div>优惠大赠送！</div>
+              <div>购买一份人力资源薪酬报告，可获赠一张超值酒店住宿房券！！！先到先得，赠完为止。</div>
+              <div class="cursor-pointer">
+                <v-icon>mdi-help-circle-outline</v-icon>
+                <span class="text-decoration-underline">查看赠送活动详情</span>
+              </div>
+            </div>
           </div>
           <!-- 销量 -->
           <div class="salesCount mb-5 parameterColor"><span class="l-s-10">已售</span>：{{ state.goodsInfo?.salesCount || 0 }}</div>
@@ -166,12 +174,13 @@ const skuInfo = ref(null) // 购买商品规格信息
 const onBuy = async (e) => {
   if (!getToken()) return handleLogin()
   if (!e?.id) return Snackbar.warning('请选择商品规格!')
-  // console.log('购买规格信息:', e)
-  //
+
   skuInfo.value = JSON.stringify({
-    items: [{ skuId: e.id, count: e.goods_num, categoryId: state.goodsInfo.categoryId, }]
+    items: [{ skuId: e.id, count: e.goods_num, categoryId: state.goodsInfo.categoryId }]
   })
   showSettlement.value = true
+
+  // router.push(`/mall/order/settlement/${e.id}?count=${e.goods_num}`)
 }
 
 // 创建订单完成
@@ -276,6 +285,7 @@ const loginClose = () => {
 .activePrices {
   color: #fff;
   background-color: #fb0037;
+  border-radius: 10px;
 }
 .price {
   font-weight: 600;

src/views/mall/home/index.vue

@@ -3,8 +3,8 @@
     <!-- 导航栏 -->
     <Navbar />
 
-    <div id="contentBox" ref="scrollBox">
-      <div class="default-width pb-10">
+    <div id="contentBox" ref="scrollBox" class="pt-3">
+      <div class="default-width pb-5">
         <!-- 轮播图 -->
         <div v-if="carouselList.length" style="height: 400px;">
           <v-carousel cycle hide-delimiter-background show-arrows="hover" style="height: 100%;">
@@ -59,7 +59,7 @@ onMounted(async () => {
 const tab = ref(0)
 const tabList = [
   { title: '热门商品', value: 0 },
-  { title: '积分兑换', value: 1 }
+  { title: '兑换专区', value: 1 }
 ]
 
 let template = ref(JSON.parse(localStorage.getItem('mallTemplate')) || {})

src/views/mall/settlement/index.vue

@@ -0,0 +1,188 @@
+<template>
+	<v-card class="default-width pa-5 mb-5" style="min-height: 75vh; margin-top: 70px;">
+		<div>
+    <!-- 头部地址选择【配送地址】【自提地址】 -->
+    <AddressSelection v-model="addressState" class="addressBox elevation-3" />
+    
+    <!-- 购买的商品信息 -->
+    <v-card class="goodsListBox my-3 pa-3 elevation-5">
+      <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 color-666">
+          <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 class="text-center">
+				<div>请在30分钟内完成支付，支付成功后可以随机抽取赠送的房券。</div>
+				<v-btn class="elevation-5" color="primary" width="250">立即支付</v-btn>
+				<div>支付时间还剩余30分27秒</div>
+			</div>
+
+    </div>
+  </div>
+	</v-card>
+</template>
+
+<script setup>
+defineOptions({ name: 'mall-order-settlement' })
+import { useRoute, useRouter } from 'vue-router'
+import { reactive, ref, onMounted, watch } from 'vue'
+import AddressSelection from '@/views/mall/components/details/order/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'
+
+const route = useRoute()
+const router = useRouter()
+const { id } = route.params
+const { count }	= route.query
+
+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: '', // 收件人手机
+});
+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()
+}
+
+// 检查库存 & 计算订单价格
+async function getOrderInfo() {
+    // 计算价格
+    const data = await settlementOrder({
+      items: [{ skuId: id, count }],
+      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();
+    }
+  });
+
+onMounted(async () => {
+  if (!id || !count) return router.go(-1)
+	await tradeConfig()
+})
+
+</script>