Vue电商项目实战-5
支付页
- 渲染基础数据
- 封装获取订单详情的接口
- 获取关键数据并渲染
import request from "@/utils/https"
export const getOrderAPI = (id) =>{
return request({
url:`/member/order/${id}`
})
}
<script setup>
import { getOrderAPI } from '@/apis/pay'
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()
const payInfo = ref({})
const getPayInfo =async() =>{
const res = await getOrderAPI(route.query.id)
payInfo.value = res.result
}
onMounted(()=>getPayInfo())
</script>
<template>
<div class="xtx-pay-page">
<div class="container">
<!-- 付款信息 -->
<div class="pay-info">
<span class="icon iconfont icon-queren2"></span>
<div class="tip">
<p>订单提交成功！请尽快完成支付。</p>
<p>支付还剩 <span>24分30秒</span>, 超时后将取消订单</p>
</div>
<div class="amount">
<span>应付总额：</span>
<span>¥{{ payInfo.payMoney?.toFixed(2) }}</span>
</div>
</div>
<!-- 付款方式 -->
<div class="pay-type">
<p class="head">选择以下支付方式付款</p>
<div class="item">
<p>支付平台</p>
<a class="btn wx" href="javascript:;"></a>
<a class="btn alipay" :href="payUrl"></a>
</div>
<div class="item">
<p>支付方式</p>
<a class="btn" href="javascript:;">招商银行</a>
<a class="btn" href="javascript:;">工商银行</a>
<a class="btn" href="javascript:;">建设银行</a>
<a class="btn" href="javascript:;">农业银行</a>
<a class="btn" href="javascript:;">交通银行</a>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.xtx-pay-page {
margin-top: 20px;
}
.pay-info {
background: #fff;
display: flex;
align-items: center;
height: 240px;
padding: 0 80px;
.icon {
font-size: 80px;
color: #1dc779;
}
.tip {
padding-left: 10px;
flex: 1;
p {
&:first-child {
font-size: 20px;
margin-bottom: 5px;
}
&:last-child {
color: #999;
font-size: 16px;
}
}
}
.amount {
span {
&:first-child {
font-size: 16px;
color: #999;
}
&:last-child {
color: $priceColor;
font-size: 20px;
}
}
}
}
.pay-type {
margin-top: 20px;
background-color: #fff;
padding-bottom: 70px;
p {
line-height: 70px;
height: 70px;
padding-left: 30px;
font-size: 16px;
&.head {
border-bottom: 1px solid #f5f5f5;
}
}
.btn {
width: 150px;
height: 50px;
border: 1px solid #e4e4e4;
text-align: center;
line-height: 48px;
margin-left: 30px;
color: #666666;
display: inline-block;
&.active,
&:hover {
border-color: $xtxColor;
}
&.alipay {
background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b6b02396368c9314528c0bbd85a2e06.png) no-repeat center / contain;
}
&.wx {
background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg) no-repeat center / contain;
}
}
}
</style>
- 实现支付功能
- 客户端向后端：跳转支付地址（get请求）（订单id+回跳地址url）
- 后端向客户端：跳转到回跳地址url（订单id+支付状态）
// 支付地址
const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
const backURL = 'http://127.0.0.1:5173/paycallback'
const redirectUrl = encodeURIComponent(backURL)
const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.id}&redirect=${redirectUrl}`
- 交付结果展示
- 配置paycallback路由
- 根据支付结果适配支付状态
- 获取订单数据渲染支付信息
<script setup>
import { getOrderAPI } from '@/apis/pay'
import { ref,onMounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()
const orderInfo =ref({})
const getOrdrInfo =async() =>{
const res=await getOrderAPI(route.query.orderId)
orderInfo.value =res.result
}
onMounted(()=>getOrdrInfo())
</script>
<template>
<div class="xtx-pay-page">
<div class="container">
<!-- 支付结果 -->
<div class="pay-result">
<span class="iconfont icon-queren2 green" v-if="$router.query.payResult === 'true'"></span>
<span class="iconfont icon-shanchu red" v-else></span>
<p class="tit">{{ $router.query.payResult === 'true'?'成功':'失败' }}</p>
<p class="tip">我们将尽快为您发货，收货期间请保持手机畅通</p>
<p>支付方式：<span>支付宝</span></p>
<p>支付金额：<span>¥{{ orderInfo.payMoney?.toFixed(2) }}</span></p>
<div class="btn">
<el-button type="primary" style="margin-right:20px">查看订单</el-button>
<el-button>进入首页</el-button>
</div>
<p class="alert">
<span class="iconfont icon-tip"></span>
温馨提示：小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作，保护资产、谨慎操作。
</p>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.pay-result {
padding: 100px 0;
background: #fff;
text-align: center;
margin-top: 20px;
>.iconfont {
font-size: 100px;
}
.green {
color: #1dc779;
}
.red {
color: $priceColor;
}
.tit {
font-size: 24px;
}
.tip {
color: #999;
}
p {
line-height: 40px;
font-size: 16px;
}
.btn {
margin-top: 50px;
}
.alert {
font-size: 12px;
color: #999;
margin-top: 50px;
}
}
</style>
- 封装倒计时函数
- 编写函数框架，确定参数和返回值：参数为空，返回值中formatTime为显示的倒计时时间，start是倒计时启动函数，调用时可以编写初始值并且开始倒计时
- 编写核心倒计时逻辑，实现基础倒计时：每隔一秒就让formatTime的值减一
- 格式化时间：引入dayjs实现将时间转化为xx分xx秒
- 在倒计时结束之后销毁时间
import { computed, onUnmounted, ref } from "vue";
import dayjs from "dayjs";
export const useCountDown =()=>{
let timer = null
const time = ref(0)
const formatTime = computed(()=>dayjs.unix(time.value).format('mm分ss秒'))
const start = (currentTime)=>{
time.value = currentTime
timer=setInterval(()=>{
time.value--
},1000)
}
onUnmounted(()=>{
timer&&clearInterval(timer)
})
return{
formatTime,
start
}
}
import { useCountDown } from '@/composables/useCountDown'
const { formatTime,start } = useCountDown()
const getPayInfo =async() =>{
const res = await getOrderAPI(route.query.id)
payInfo.value = res.result
start(res.result.countdown)
}
<!-- 付款信息 -->
<div class="pay-info">
<span class="icon iconfont icon-queren2"></span>
<div class="tip">
<p>订单提交成功！请尽快完成支付。</p>
<p>支付还剩 <span>{{ formatTime }}</span>, 超时后将取消订单</p>
</div>
<div class="amount">
<span>应付总额：</span>
<span>¥{{ payInfo.payMoney?.toFixed(2) }}</span>
</div>
</div>
会员中心页
- 路由配置
- 准备个人中心模板组件
- 绑定个人中心二级路由
- 准备个人中心和和我的订单三级路由
- 配置三级路由
import member from '@/views/Member/index.vue'
import userinfo from '@/views/Member/component/UserInfo.vue'
import userorder from '@/views/Member/component/Userorder.vue'
{
path:'member',
component:member,
children:[
{
path:'user',
component:userinfo
},
{
path:'order',
component:userorder
}
]
}
]
},
<script setup>
const userStore = {}
</script>
<template>
<div class="home-overview">
<!-- 用户信息 -->
<div class="user-meta">
<div class="avatar">
<img :src="userStore.userInfo?.avatar" />
</div>
<h4>{{ userStore.userInfo?.account }}</h4>
</div>
<div class="item">
<a href="javascript:;">
<span class="iconfont icon-hy"></span>
<p>会员中心</p>
</a>
<a href="javascript:;">
<span class="iconfont icon-aq"></span>
<p>安全设置</p>
</a>
<a href="javascript:;">
<span class="iconfont icon-dw"></span>
<p>地址管理</p>
</a>
</div>
</div>
<div class="like-container">
<div class="home-panel">
<div class="header">
<h4 data-v-bcb266e0="">猜你喜欢</h4>
</div>
<div class="goods-list">
<!-- <GoodsItem v-for="good in likeList" :key="good.id" :good="good" /> -->
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.home-overview {
height: 132px;
background: url(@/assets/images/center-bg.png) no-repeat center / cover;
display: flex;
.user-meta {
flex: 1;
display: flex;
align-items: center;
.avatar {
width: 85px;
height: 85px;
border-radius: 50%;
overflow: hidden;
margin-left: 60px;
img {
width: 100%;
height: 100%;
}
}
h4 {
padding-left: 26px;
font-size: 18px;
font-weight: normal;
color: white;
}
}
.item {
flex: 1;
display: flex;
align-items: center;
justify-content: space-around;
&:first-child {
border-right: 1px solid #f4f4f4;
}
a {
color: white;
font-size: 16px;
text-align: center;
.iconfont {
font-size: 32px;
}
p {
line-height: 32px;
}
}
}
}
.like-container {
margin-top: 20px;
border-radius: 4px;
background-color: #fff;
}
.home-panel {
background-color: #fff;
padding: 0 20px;
margin-top: 20px;
height: 400px;
.header {
height: 66px;
border-bottom: 1px solid #f5f5f5;
padding: 18px 0;
display: flex;
justify-content: space-between;
align-items: baseline;
h4 {
font-size: 22px;
font-weight: 400;
}
}
.goods-list {
display: flex;
justify-content: space-around;
}
}
</style>
<script setup>
// tab列表
const tabTypes = [
{ name: "all", label: "全部订单" },
{ name: "unpay", label: "待付款" },
{ name: "deliver", label: "待发货" },
{ name: "receive", label: "待收货" },
{ name: "comment", label: "待评价" },
{ name: "complete", label: "已完成" },
{ name: "cancel", label: "已取消" }
]
// 订单列表
const orderList = []
</script>
<template>
<div class="order-container">
<el-tabs>
<!-- tab切换 -->
<el-tab-pane v-for="item in tabTypes" :key="item.name" :label="item.label" />
<div class="main-container">
<div class="holder-container" v-if="orderList.length === 0">
<el-empty description="暂无订单数据" />
</div>
<div v-else>
<!-- 订单列表 -->
<div class="order-item" v-for="order in orderList" :key="order.id">
<div class="head">
<span>下单时间：{{ order.createTime }}</span>
<span>订单编号：{{ order.id }}</span>
<!-- 未付款，倒计时时间还有 -->
<span class="down-time" v-if="order.orderState === 1">
<i class="iconfont icon-down-time"></i>
<b>付款截止: {{order.countdown}}</b>
</span>
</div>
<div class="body">
<div class="column goods">
<ul>
<li v-for="item in order.skus" :key="item.id">
<a class="image" href="javascript:;">
<img :src="item.image" alt="" />
</a>
<div class="info">
<p class="name ellipsis-2">
{{ item.name }}
</p>
<p class="attr ellipsis">
<span>{{ item.attrsText }}</span>
</p>
</div>
<div class="price">¥{{ item.realPay?.toFixed(2) }}</div>
<div class="count">x{{ item.quantity }}</div>
</li>
</ul>
</div>
<div class="column state">
<p>{{ order.orderState }}</p>
<p v-if="order.orderState === 3">
<a href="javascript:;" class="green">查看物流</a>
</p>
<p v-if="order.orderState === 4">
<a href="javascript:;" class="green">评价商品</a>
</p>
<p v-if="order.orderState === 5">
<a href="javascript:;" class="green">查看评价</a>
</p>
</div>
<div class="column amount">
<p class="red">¥{{ order.payMoney?.toFixed(2) }}</p>
<p>（含运费：¥{{ order.postFee?.toFixed(2) }}）</p>
<p>在线支付</p>
</div>
<div class="column action">
<el-button v-if="order.orderState === 1" type="primary"
size="small">
立即付款
</el-button>
<el-button v-if="order.orderState === 3" type="primary" size="small">
确认收货
</el-button>
<p><a href="javascript:;">查看详情</a></p>
<p v-if="[2, 3, 4, 5].includes(order.orderState)">
<a href="javascript:;">再次购买</a>
</p>
<p v-if="[4, 5].includes(order.orderState)">
<a href="javascript:;">申请售后</a>
</p>
<p v-if="order.orderState === 1"><a href="javascript:;">取消订单</a></p>
</div>
</div>
</div>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background layout="prev, pager, next" />
</div>
</div>
</div>
</el-tabs>
</div>
</template>
<style scoped lang="scss">
.order-container {
padding: 10px 20px;
.pagination-container {
display: flex;
justify-content: center;
}
.main-container {
min-height: 500px;
.holder-container {
min-height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.order-item {
margin-bottom: 20px;
border: 1px solid #f5f5f5;
.head {
height: 50px;
line-height: 50px;
background: #f5f5f5;
padding: 0 20px;
overflow: hidden;
span {
margin-right: 20px;
&.down-time {
margin-right: 0;
float: right;
i {
vertical-align: middle;
margin-right: 3px;
}
b {
vertical-align: middle;
font-weight: normal;
}
}
}
.del {
margin-right: 0;
float: right;
color: #999;
}
}
.body {
display: flex;
align-items: stretch;
.column {
border-left: 1px solid #f5f5f5;
text-align: center;
padding: 20px;
>p {
padding-top: 10px;
}
&:first-child {
border-left: none;
}
&.goods {
flex: 1;
padding: 0;
align-self: center;
ul {
li {
border-bottom: 1px solid #f5f5f5;
padding: 10px;
display: flex;
&:last-child {
border-bottom: none;
}
.image {
width: 70px;
height: 70px;
border: 1px solid #f5f5f5;
}
.info {
width: 220px;
text-align: left;
padding: 0 10px;
p {
margin-bottom: 5px;
&.name {
height: 38px;
}
&.attr {
color: #999;
font-size: 12px;
span {
margin-right: 5px;
}
}
}
}
.price {
width: 100px;
}
.count {
width: 80px;
}
}
}
}
&.state {
width: 120px;
.green {
color: $xtxColor;
}
}
&.amount {
width: 200px;
.red {
color: $priceColor;
}
}
&.action {
width: 140px;
a {
display: block;
&:hover {
color: $xtxColor;
}
}
}
}
}
}
</style>
- 个人中心信息渲染
- 个人部分直接使用pinia中的数据
- 猜你喜欢部分走接口获取
export const getLikeListAPI = ({ limit = 4 }) => {
return request({
url:'/goods/relevant',
params: {
limit
}
})
}
import { getLikeListAPI } from '@/apis/user'
import { useUserStore } from "@/stores/user";
import { ref,onMounted } from 'vue';
import GoodsItem from '@/views/Home/components/GoodsItem.vue';
const userStore = useUserStore()
const likeList = ref([])
const getLikeList = async()=>{
const res=await getLikeListAPI({limit:4})
likeList.value = res.result
}
onMounted(()=>getLikeList())
<div class="avatar">
<img :src="userStore.userInfo?.avatar" />
</div>
<h4>{{ userStore.userInfo?.account }}</h4>
</div>
- 我的订单 基础订单列表实现
- 封装订单接口getUserOrder
- 准备基础请求参数orderList、params
- 调用接口请求数据getOrderList
import request from '@/utils/https'
export const getUserOrder = (params) => {
return request({
url:'/member/order',
method:'GET',
params
})
}
import { getUserOrder } from '@/apis/order'
import { ref,onMounted } from 'vue';
// tab列表
const tabTypes = [
{ name: "all", label: "全部订单" },
{ name: "unpay", label: "待付款" },
{ name: "deliver", label: "待发货" },
{ name: "receive", label: "待收货" },
{ name: "comment", label: "待评价" },
{ name: "complete", label: "已完成" },
{ name: "cancel", label: "已取消" }
]
// 订单列表
const orderList = ref([])
const params = ref({
orderState:0,
page:1,
pageSize:2
})
const getOrderList = async()=>{
const res = await getUserOrder(params.value)
orderList.value = res.result.items
}
onMounted(()=>getOrderList())
- 我的订单 tab切换实现
- 切换tab修改orderState参数，再次发送求情获取订单列表数据
- 绑定tab-change事件
- 获取当前激活tab项数据
- 使用最新tab项数据发送请求
- 切换tab修改orderState参数，再次发送求情获取订单列表数据
const tabChange=(type)=>{
console.log(type);
params.value.orderState=type
getOrderList()
}
<el-tabs @tab-change="tabChange">
- 我的订单 分页逻辑
- 使用列表数据生成分页：页数=总条数/每页条数
- 使用total属性绑定总条数
- 使用page-size属性绑定每页条数
- 切换分页修改page参数，再次获取订单列表数据
- 绑定current-page事件
- 拿到当前页面
- 使用最新页面发送请求数据
- 使用列表数据生成分页：页数=总条数/每页条数
const tabChange=(type)=>{
console.log(type);
params.value.orderState=type
getOrderList()
}
const pageChange=(page)=>{
console.log(page);
params.value.page=page
getOrderList()
}
<div class="pagination-container">
<el-pagination :total="total" @current-change="pageChange" :page-size="params.pageSize" background layout="prev, pager, next" />
</div>
- 细节优化
- 将三级路由显示在二级路由上，只需将三级路由置空
- 订单状态显示适配：创建格式化函数 调用函数适配显示
<script setup>
// 创建格式化函数
const fomartPayState = (payState) => {
const stateMap = {
1: '待付款',
2: '待发货',
3: '待收货',
4: '待评价',
5: '已完成',
6: '已取消'
}
return stateMap[payState]
}
</script>
<template>
<!-- 调用函数适配显示 -->
<p>{{ fomartPayState(order.orderState)}}</p>
</template>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
