路由配置
chekout/index.vue
<script setup>
const checkInfo = {} // 订单对象
const curAddress = {} // 地址对象
</script>
<template><div class="xtx-pay-checkout-page"><div class="container"><div class="wrapper"><!-- 收货地址 --><h3 class="box-title">收货地址</h3><div class="box-body"><div class="address"><div class="text"><div class="none" v-if="!curAddress">您需要先添加收货地址才可提交订单。</div><ul v-else><li><span>收<i />货<i />人：</span>{{ curAddress.receiver }}</li><li><span>联系方式：</span>{{ curAddress.contact }}</li><li><span>收货地址：</span>{{ curAddress.fullLocation }} {{ curAddress.address }}</li></ul></div><div class="action"><el-button size="large" @click="toggleFlag = true">切换地址</el-button><el-button size="large" @click="addFlag = true">添加地址</el-button></div></div></div><!-- 商品信息 --><h3 class="box-title">商品信息</h3><div class="box-body"><table class="goods"><thead><tr><th width="520">商品信息</th><th width="170">单价</th><th width="170">数量</th><th width="170">小计</th><th width="170">实付</th></tr></thead><tbody><tr v-for="i in checkInfo.goods" :key="i.id"><td><a href="javascript:;" class="info"><img :src="i.picture" alt=""><div class="right"><p>{{ i.name }}</p><p>{{ i.attrsText }}</p></div></a></td><td>¥{{ i.price }}</td><td>{{ i.price }}</td><td>¥{{ i.totalPrice }}</td><td>¥{{ i.totalPayPrice }}</td></tr></tbody></table></div><!-- 配送时间 --><h3 class="box-title">配送时间</h3><div class="box-body"><a class="my-btn active" href="javascript:;">不限送货时间：周一至周日</a><a class="my-btn" href="javascript:;">工作日送货：周一至周五</a><a class="my-btn" href="javascript:;">双休日、假日送货：周六至周日</a></div><!-- 支付方式 --><h3 class="box-title">支付方式</h3><div class="box-body"><a class="my-btn active" href="javascript:;">在线支付</a><a class="my-btn" href="javascript:;">货到付款</a><span style="color:#999">货到付款需付5元手续费</span></div><!-- 金额明细 --><h3 class="box-title">金额明细</h3><div class="box-body"><div class="total"><dl><dt>商品件数：</dt><dd>{{ checkInfo.summary?.goodsCount }}件</dd></dl><dl><dt>商品总价：</dt><dd>¥{{ checkInfo.summary?.totalPrice.toFixed(2) }}</dd></dl><dl><dt>运<i></i>费：</dt><dd>¥{{ checkInfo.summary?.postFee.toFixed(2) }}</dd></dl><dl><dt>应付总额：</dt><dd class="price">{{ checkInfo.summary?.totalPayPrice.toFixed(2) }}</dd></dl></div></div><!-- 提交订单 --><div class="submit"><el-button type="primary" size="large" >提交订单</el-button></div></div></div></div><!-- 切换地址 --><!-- 添加地址 -->
</template><style scoped lang="scss">
.xtx-pay-checkout-page {margin-top: 20px;.wrapper {background: #fff;padding: 0 20px;.box-title {font-size: 16px;font-weight: normal;padding-left: 10px;line-height: 70px;border-bottom: 1px solid #f5f5f5;}.box-body {padding: 20px 0;}}
}.address {border: 1px solid #f5f5f5;display: flex;align-items: center;.text {flex: 1;min-height: 90px;display: flex;align-items: center;.none {line-height: 90px;color: #999;text-align: center;width: 100%;}>ul {flex: 1;padding: 20px;li {line-height: 30px;span {color: #999;margin-right: 5px;>i {width: 0.5em;display: inline-block;}}}}>a {color: $xtxColor;width: 160px;text-align: center;height: 90px;line-height: 90px;border-right: 1px solid #f5f5f5;}}.action {width: 420px;text-align: center;.btn {width: 140px;height: 46px;line-height: 44px;font-size: 14px;&:first-child {margin-right: 10px;}}}
}.goods {width: 100%;border-collapse: collapse;border-spacing: 0;.info {display: flex;text-align: left;img {width: 70px;height: 70px;margin-right: 20px;}.right {line-height: 24px;p {&:last-child {color: #999;}}}}tr {th {background: #f5f5f5;font-weight: normal;}td,th {text-align: center;padding: 20px;border-bottom: 1px solid #f5f5f5;&:first-child {border-left: 1px solid #f5f5f5;}&:last-child {border-right: 1px solid #f5f5f5;}}}
}.my-btn {width: 228px;height: 50px;border: 1px solid #e4e4e4;text-align: center;line-height: 48px;margin-right: 25px;color: #666666;display: inline-block;&.active,&:hover {border-color: $xtxColor;}
}.total {dl {display: flex;justify-content: flex-end;line-height: 50px;dt {i {display: inline-block;width: 2em;}}dd {width: 240px;text-align: right;padding-right: 70px;&.price {font-size: 20px;color: $priceColor;}}}
}.submit {text-align: right;padding: 60px;border-top: 1px solid #f5f5f5;
}.addressWrapper {max-height: 500px;overflow-y: auto;
}.text {flex: 1;min-height: 90px;display: flex;align-items: center;&.item {border: 1px solid #f5f5f5;margin-bottom: 10px;cursor: pointer;&.active,&:hover {border-color: $xtxColor;background: lighten($xtxColor, 50%);}>ul {padding: 10px;font-size: 14px;line-height: 30px;}}
}
</style>
router.js
// createRouter：创建router实例对象
// createWebHistory：创建history模式的路由
import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
import Home from '@/views/Home/index.vue'
import Category from '@/views/Category/index.vue'
import SubCategory from '@/views/SubCategory/index.vue'
import Detail from '@/views/Detail/index.vue'
import CartList from '@/views/CartList/index.vue'
import Checkout from '@/views/Checkout/index.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),// path和component对应关系的位置routes: [{path: '/',component: Layout,children: [{path: '',component: Home},{path: 'category/:id',component: Category},{path: 'category/sub/:id',component: SubCategory},{path: 'detail/:id',component: Detail},{path: 'cartlist',component: CartList},{path: 'checkout',component: Checkout}]},{path: '/login',component: Login}],// 路由滚动行为定制scrollBehavior () {return {top: 0}}
})export default routercartList/index.vue
<div class="total"><el-button size="large" type="primary" @click="$router.push('/checkout')">下单结算</el-button></div>
基础数据渲染
apis/chekout.js
import request from '@/utils/request'
/*** 获取结算信息*/
export const getCheckoutInfoAPI = () => {return request({url:'/member/order/pre'})
}
chekout/index.vue
<script setup>
import { getCheckInfoAPI, createOrderAPI } from '@/apis/checkout'
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { useCartStore } from '@/stores/cartStore'
const cartStore = useCartStore()
const router = useRouter()
// 获取结算信息
const checkInfo = ref({}) // 订单对象
const curAddress = ref({}) // 默认地址
const getCheckInfo = async () => {const res = await getCheckInfoAPI()checkInfo.value = res.result// 适配默认地址// 从地址列表中筛选出来 isDefault === 0 那一项const item = checkInfo.value.userAddresses.find(item => item.isDefault === 0)curAddress.value = item
}onMounted(() => getCheckInfo())</script><template><div class="none" v-if="!curAddress">您需要先添加收货地址才可提交订单。</div><ul v-else><li><span>收<i />货<i />人：</span>{{ curAddress.receiver }}</li><li><span>联系方式：</span>{{ curAddress.contact }}</li><li><span>收货地址：</span>{{ curAddress.fullLocation }} {{ curAddress.address }}</li></ul></div>
</template>
地址切换交互实现—打开弹窗
需求分析
1️⃣打开弹框交互：点击切换地址按钮，打开弹框，回显用户可选地址列表
2️⃣切换地址交互：点击切换地址，点击确定按钮，激活地址替换成默认收货地址
弹框模版
const showDialog = ref(false)
<el-dialog v-model="showDialog" title="切换收货地址" width="30%" center><div class="addressWrapper"><div class="text item" v-for="item in checkInfo.userAddresses" :key="item.id"><ul><li><span>收<i />货<i />人：</span>{{ item.receiver }} </li><li><span>联系方式：</span>{{ item.contact }}</li><li><span>收货地址：</span>{{ item.fullLocation + item.address }}</li></ul></div></div><template #footer><span class="dialog-footer"><el-button>取消</el-button><el-button type="primary">确定</el-button></span></template>
</el-dialog>
添加按钮事件
<div class="action"><el-button size="large" @click="showDialog = true">切换地址</el-button><el-button size="large">添加地址</el-button></div>
地址切换交互实现—激活交互实现
原理
地址切换是我们经常遇到的tab切换类需求，这类需求的实现逻辑都是相似的
1️⃣点击时记录一个当前激活地址对象activeAddress，点击哪个地址就把哪个地址对象记录下来
2️⃣通过动态类名：class控制激活样式类型active是否存在，判断条件为：激活地址对象的id===当前项id
<script setup>
// 切换地址
const activeAddress = ref({})
const switchAddress = (item) => {activeAddress.value = item
}
const confirm = () => {curAddress.value = activeAddress.valueshowDialog.value = falseactiveAddress.value = {}
}
</script>
<template>
<div class="text item" :class="{ active: activeAddress.id === item.id }" @click="switchAddress(item)":key="item.id">
</div>
</template><!-- 切换地址 --><el-dialog v-model="showDialog" title="切换收货地址" width="30%" center><div class="addressWrapper"><div class="text item" :class="{ active: activeAddress.id === item.id }" @click="switchAddress(item)"v-for="item in checkInfo.userAddresses" :key="item.id"><ul><li><span>收<i />货<i />人：</span>{{ item.receiver }} </li><li><span>联系方式：</span>{{ item.contact }}</li><li><span>收货地址：</span>{{ item.fullLocation + item.address }}</li></ul></div></div><template #footer><span class="dialog-footer"><el-button>取消</el-button><el-button type="primary" @click="confirm">确定</el-button></span></template></el-dialog>
生成订单功能实现
业务需求
确定结算信息没有问题之后，点击提交订单按钮，需要做以下两件事
1️⃣调用接口生成订单id，并且携带id跳转到支付页
2️⃣调用更新购物车列表接口，更新购物车状态
准备生成订单接口
// 创建订单
export const createOrderAPI = (data) => {return request({url: '/member/order',method: 'POST',data})
}
调用接口携带id跳转路由
<script setup>
import { useCartStore } from '@/stores/cartStore'
const cartStore = useCartStore()
import { createOrderAPI } from '@/apis/checkout'
// 创建订单
const createOrder = async () => {const res = await createOrderAPI({deliveryTimeType: 1,payType: 1,payChannel: 1,buyerMessage: '',goods: checkInfo.value.goods.map(item => {return {skuId: item.skuId,count: item.count}}),addressId: curAddress.value.id})const orderId = res.result.idrouter.push({path: '/pay',query: {id: orderId}})// 更新购物车cartStore.updateNewList()
}</script><template><!-- 提交订单 --><div class="submit"><el-button @click="createOrder" type="primary" size="large">提交订单</el-button></div>
</template>
