秦佳浩 2 months ago
commit 86fac260f2

@ -1,40 +1,50 @@
<style scoped lang="scss" >
/* 定义全局容器 */
.container {
position: absolute;
width: 100%;
height: 100%;
background-color: #f4f4f4;
color: #333;
position: absolute; /* 绝对定位相对于最近的非static祖先元素 */
width: 100%; /* 宽度占满整个父容器 */
height: 100%; /* 高度占满整个父容器 */
background-color: #f4f4f4; /* 背景颜色为浅灰色 */
color: #333; /* 默认文本颜色为深灰色 */
}
/* 订单标题栏 */
.order-tit {
position: fixed;
top: 0;
display: flex;
justify-content: space-around;
z-index: 999;
width: 100%;
height: 100rpx;
line-height: 100rpx;
background-color: #fff;
border-bottom: 2rpx solid #f4f4f4;
position: fixed; /* 固定定位,不随页面滚动而移动 */
top: 0; /* 紧贴页面顶部 */
display: flex; /* 使用弹性布局 */
justify-content: space-around; /* 子元素在主轴上均匀分布 */
z-index: 999; /* 设置堆叠顺序,确保标题栏位于最上层 */
width: 100%; /* 宽度占满整个屏幕 */
height: 100rpx; /* 高度为100个rpx根据设备宽度自适应 */
line-height: 100rpx; /* 行高与高度一致,使文本垂直居中 */
background-color: #fff; /* 背景颜色为白色 */
border-bottom: 2rpx solid #f4f4f4; /* 下边框为浅灰色细线 */
text {
display: block;
font-size: 28rpx;
color: 999;
width: 100rpx;
text-align: center;
display: block; /* 将文本块级化 */
font-size: 28rpx; /* 字体大小 */
color: #999; /* 文本颜色为浅灰色 */
width: 100rpx; /* 每个文本项宽度 */
text-align: center; /* 文本水平居中 */
}
text.on {
border-bottom: 4rpx solid #eb2444;
color: #eb2444;
text.on { /* 当前选中的文本样式 */
border-bottom: 4rpx solid #eb2444; /* 底部有红色细线 */
color: #eb2444; /* 文本颜色为红色 */
}
}
/* 主内容区 */
.main {
padding-top: 15rpx;
padding-top: 15rpx; /* 上内边距,避免被固定标题栏遮挡 */
}
/* 商品项目 */
.prod-item {
background-color: #fff;
margin-top: 15rpx;
font-size: 28rpx;
background-color: #fff; /* 背景颜色为白色 */
margin-top: 15rpx; /* 上外边距,与上方元素间隔 */
font-size: 28rpx; /* 默认字体大小 */
.item-cont {
.prod-pic {
image {
@ -43,172 +53,199 @@
width: 100%;
height: 100%;
}
font-size: 0;
display: inline-block;
font-size: 0; /* 去除图片之间的空白 */
display: inline-block; /* 内联块状显示 */
width: 160rpx;
height: 160rpx;
overflow: hidden;
background: #fff;
margin-right: 16rpx;
overflow: hidden; /* 超出部分隐藏 */
background: #fff; /* 背景颜色为白色 */
margin-right: 16rpx; /* 右侧外边距,与文字部分间隔 */
}
.categories {
white-space: nowrap;
}
display: flex;
align-items: center;
padding: 20rpx 30rpx;
border-radius: 10rpx;
display: -webkit-flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
background: #fafafa;
white-space: nowrap; /* 强制在同一行内显示 */
}
display: flex; /* 使用弹性布局 */
align-items: center; /* 交叉轴上居中对齐 */
padding: 20rpx 30rpx; /* 内边距 */
border-radius: 10rpx; /* 圆角 */
background: #fafafa; /* 背景颜色 */
.prod-info {
margin-left: 10rpx;
font-size: 28rpx;
width: 100%;
position: relative;
height: 160rpx;
-webkit-flex: 1;
-ms-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
flex: 1;
margin-left: 10rpx; /* 左侧内边距 */
font-size: 28rpx; /* 字体大小 */
width: 100%; /* 宽度占满剩余空间 */
position: relative; /* 相对定位 */
height: 160rpx; /* 高度 */
flex: 1; /* 占用剩余空间 */
.prodname {
font-size: 28rpx;
line-height: 36rpx;
max-height: 86rpx;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
word-break: break-all;
}
font-size: 28rpx; /* 字体大小 */
line-height: 36rpx; /* 行高 */
max-height: 86rpx; /* 最大高度 */
overflow: hidden; /* 超出部分隐藏 */
display: -webkit-box; /* WebKit浏览器兼容 */
-webkit-line-clamp: 2; /* 限制显示两行 */
-webkit-box-orient: vertical; /* 垂直排列 */
text-overflow: ellipsis; /* 超出部分以省略号表示 */
word-break: break-all; /* 允许在单词内部换行 */
}
.prod-info-cont {
color: #999;
line-height: 40rpx;
margin-top: 10rpx;
font-size: 22rpx;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
word-break: break-all;
color: #999; /* 文本颜色为浅灰色 */
line-height: 40rpx; /* 行高 */
margin-top: 10rpx; /* 上外边距 */
font-size: 22rpx; /* 字体大小 */
overflow: hidden; /* 超出部分隐藏 */
display: -webkit-box; /* WebKit浏览器兼容 */
-webkit-line-clamp: 1; /* 限制显示一行 */
-webkit-box-orient: vertical; /* 垂直排列 */
text-overflow: ellipsis; /* 超出部分以省略号表示 */
word-break: break-all; /* 允许在单词内部换行 */
}
}
}
.order-num {
padding: 20rpx 30rpx;
display: flex;
justify-content: space-between;
font-size: 28rpx;
padding: 20rpx 30rpx; /* 内边距 */
display: flex; /* 使用弹性布局 */
justify-content: space-between; /* 子元素在主轴上两端对齐 */
font-size: 28rpx; /* 字体大小 */
.clear-btn {
width: 32rpx;
height: 32rpx;
font-size: 0;
vertical-align: top;
margin-left: 42rpx;
position: relative;
font-size: 0; /* 去除按钮内的空白 */
vertical-align: top; /* 顶部对齐 */
margin-left: 42rpx; /* 左侧外边距 */
position: relative; /* 相对定位 */
&::after {
content: " ";
display: block;
position: absolute;
left: -10px;
left: -10rpx;
top: 0rpx;
width: 1px;
height: 32rpx;
background: #ddd;
background: #ddd; /* 背景色为浅灰色 */
}
.clear-list-btn {
width: 100%;
height: 100%;
vertical-align: middle;
vertical-align: middle; /* 中间对齐 */
}
}
}
.total-num {
text-align: right;
padding: 20rpx 30rpx;
font-size: 28rpx;
text-align: right; /* 文本右对齐 */
padding: 20rpx 30rpx; /* 内边距 */
font-size: 28rpx; /* 字体大小 */
.prodprice {
display: inline-block;
color: #333;
display: inline-block; /* 内联块状显示 */
color: #333; /* 文本颜色为深灰色 */
}
.prodcount {
margin-right: 20rpx;
margin-right: 20rpx; /* 右侧外边距 */
}
}
.price-nums {
.prodprice {
color: #333;
position: absolute;
bottom: 0;
color: #333; /* 文本颜色为深灰色 */
position: absolute; /* 绝对定位 */
bottom: 0; /* 紧贴底部 */
}
.prodcount {
position: absolute;
bottom: 5rpx;
right: 0;
color: #999;
font-family: verdana;
position: absolute; /* 绝对定位 */
bottom: 5rpx; /* 紧贴底部并留出一些间距 */
right: 0; /* 紧贴右侧 */
color: #999; /* 文本颜色为浅灰色 */
font-family: verdana; /* 字体家族 */
}
}
.prod-foot {
border-top: 2rpx solid #e6e6e6;
border-top: 2rpx solid #e6e6e6; /* 顶部边框 */
.total {
font-size: 25rpx;
margin-bottom: 20rpx;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #e9eaec;
font-size: 25rpx; /* 字体大小 */
margin-bottom: 20rpx; /* 下外边距 */
padding-bottom: 20rpx; /* 下内边距 */
border-bottom: 2rpx solid #e9eaec; /* 底部边框 */
}
.btn {
display: flex;
align-items: center;
justify-content: flex-end;
display: flex; /* 使用弹性布局 */
align-items: center; /* 交叉轴上居中对齐 */
justify-content: flex-end; /* 主轴上右对齐 */
}
}
}
/* 订单状态 */
.order-state {
display: flex;
align-items: center;
font-size: 24rpx;
display: flex; /* 使用弹性布局 */
align-items: center; /* 交叉轴上居中对齐 */
font-size: 24rpx; /* 字体大小 */
.order-sts.red {
color: #eb2444;
color: #eb2444; /* 文本颜色为红色 */
}
.order-sts.gray {
color: #999;
color: #999; /* 文本颜色为浅灰色 */
}
}
/* 其他按钮悬停效果 */
.other-button-hover {
background-color: blue;
background-color: blue; /* 悬停时背景颜色为蓝色 */
}
/* 按钮悬停效果 */
.button-hover {
background-color: red;
background-color: blue;
background-color: red; /* 悬停时背景颜色为红色 */
background-color: blue; /* 悬停时背景颜色为蓝色(后一个覆盖前一个) */
}
/* 按钮样式 */
.button {
margin-top: 20rpx;
margin-bottom: 20rpx;
margin-left: 10px;
font-size: 26rpx;
background: #fff;
padding: 10rpx 30rpx;
border-radius: 80rpx;
border: 2rpx solid #e1e1e1;
margin-top: 20rpx; /* 上外边距 */
margin-bottom: 20rpx; /* 下外边距 */
margin-left: 10px; /* 左外边距 */
font-size: 26rpx; /* 字体大小 */
background: #fff; /* 背景颜色为白色 */
padding: 10rpx 30rpx; /* 内边距 */
border-radius: 80rpx; /* 圆角 */
border: 2rpx solid #e1e1e1; /* 边框 */
&:last-child {
margin-right: 10rpx;
margin-right: 10rpx; /* 最后一个子元素的右外边距 */
}
}
/* 警告按钮样式 */
.button.warn {
color: #eb2444;
border-color: #eb2444;
color: #eb2444; /* 文本颜色为红色 */
border-color: #eb2444; /* 边框颜色为红色 */
}
/* 空状态样式 */
.empty {
font-size: 24rpx;
margin-top: 100rpx;
text-align: center;
color: #999;
height: 300rpx;
line-height: 300rpx;
font-size: 24rpx; /* 字体大小 */
margin-top: 100rpx; /* 上外边距 */
text-align: center; /* 文本居中 */
color: #999; /* 文本颜色为浅灰色 */
height: 300rpx; /* 高度 */
line-height: 300rpx; /* 行高与高度一致,使文本垂直居中 */
}
</style >

@ -2,142 +2,89 @@
<view class="container">
<!-- 头部菜单 -->
<view class="order-tit">
<text
data-sts="0"
:class="sts==0?'on':''"
@tap="onStsTap"
>
全部
</text>
<text
data-sts="1"
:class="sts==1?'on':''"
@tap="onStsTap"
>
待支付
</text>
<text
data-sts="2"
:class="sts==2?'on':''"
@tap="onStsTap"
>
待发货
</text>
<text
data-sts="3"
:class="sts==3?'on':''"
@tap="onStsTap"
>
待收货
</text>
<text
data-sts="5"
:class="sts==5?'on':''"
@tap="onStsTap"
>
已完成
<!-- 动态生成订单状态标签点击切换显示不同状态的订单列表 -->
<text v-for="(status, index) in statuses"
:key="index"
:data-sts="status.value"
:class="sts === status.value ? 'on' : ''"
@tap="onStsTap">
{{ status.label }}
</text>
</view>
<!-- end 头部菜单 -->
<view class="main">
<view
v-if="list.length==0"
class="empty"
>
<!-- 如果订单列表为空则显示提示信息 -->
<view v-if="list.length === 0" class="empty">
还没有任何相关订单
</view>
<!-- 订单列表 -->
<block
v-for="(item, index) in list"
:key="index"
>
<block v-for="(item, index) in list" :key="index">
<view class="prod-item">
<!-- 订单编号和状态 -->
<view class="order-num">
<text>订单编号{{ item.orderNumber }}</text>
<view class="order-state">
<text
:class="'order-sts ' + (item.status==1?'red':'') + ' ' + ((item.status==5||item.status==6)?'gray':'')"
>
<!-- 根据订单状态动态设置文本颜色并显示相应的状态 -->
<text :class="[
'order-sts',
item.status === 1 ? 'red' : '',
(item.status === 5 || item.status === 6) ? 'gray' : ''
]">
{{
item.status == 1 ? '待支付' : (item.status == 2 ? '待发货' : (item.status == 3 ? '待收货' : (item.status == 5 ? '已完成' : '已取消')))
getStatusLabel(item.status)
}}
</text>
<view
v-if="item.status==5 || item.status==6"
class="clear-btn"
>
<image
src="@/static/images/icon/clear-his.png"
<!-- 已完成或已取消的订单显示清除按钮 -->
<view v-if="item.status === 5 || item.status === 6"
class="clear-btn">
<image src="@/static/images/icon/clear-his.png"
class="clear-list-btn"
:data-ordernum="item.orderNumber"
@tap="delOrderList"
/>
@tap="delOrderList" />
</view>
</view>
</view>
<!-- 商品列表 -->
<!-- 一个订单单个商品的显示 -->
<block v-if="item.orderItemDtos.length==1">
<block
v-for="(prod, index2) in item.orderItemDtos"
:key="index2"
>
<!-- 单个商品时直接显示商品详情 -->
<block v-if="item.orderItemDtos.length === 1">
<block v-for="(prod, index2) in item.orderItemDtos" :key="index2">
<view>
<view
class="item-cont"
<view class="item-cont"
:data-ordernum="item.orderNumber"
@tap="toOrderDetailPage"
>
@tap="toOrderDetailPage">
<view class="prod-pic">
<image :src="prod.pic" />
</view>
<view class="prod-info">
<view class="prodname">
{{ prod.prodName }}
</view>
<view class="prod-info-cont">
{{ prod.skuName }}
</view>
<view class="prodname">{{ prod.prodName }}</view>
<view class="prod-info-cont">{{ prod.skuName }}</view>
<view class="price-nums">
<text class="prodprice">
<text class="symbol">
</text>
<text class="big-num">
{{ wxs.parsePrice(prod.price)[0] }}
</text>
<text class="small-num">
.{{ wxs.parsePrice(prod.price)[1] }}
</text>
</text>
<text class="prodcount">
x{{ prod.prodCount }}
<text class="symbol"></text>
<text class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text>
<text class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</text>
</text>
<text class="prodcount">x{{ prod.prodCount }}</text>
</view>
</view>
</view>
</view>
</block>
</block>
<!-- 一个订单多个商品时的显示 -->
<!-- 多个商品时使用横向滚动视图展示所有商品图片 -->
<block v-else>
<view
class="item-cont"
<view class="item-cont"
:data-ordernum="item.orderNumber"
@tap="toOrderDetailPage"
>
<scroll-view
scroll-x="true"
@tap="toOrderDetailPage">
<scroll-view scroll-x="true"
scroll-left="0"
scroll-with-animation="false"
class="categories"
>
<block
v-for="(prod, index2) in item.orderItemDtos"
:key="index2"
>
class="categories">
<block v-for="(prod, index2) in item.orderItemDtos" :key="index2">
<view class="prod-pic">
<image :src="prod.pic" />
</view>
@ -146,60 +93,47 @@
</view>
</block>
<!-- 显示订单总价 -->
<view class="total-num">
<text class="prodcount">
共1件商品
</text>
<text class="prodcount">共1件商品</text>
<view class="prodprice">
合计
<text class="symbol">
</text>
<text class="big-num">
{{ wxs.parsePrice(item.actualTotal)[0] }}
</text>
<text class="small-num">
.{{ wxs.parsePrice(item.actualTotal)[1] }}
</text>
<text class="symbol"></text>
<text class="big-num">{{ wxs.parsePrice(item.actualTotal)[0] }}</text>
<text class="small-num">.{{ wxs.parsePrice(item.actualTotal)[1] }}</text>
</view>
</view>
<!-- end 商品列表 -->
<!-- 操作按钮 -->
<view class="prod-foot">
<view class="btn">
<text
v-if="item.status==1"
<!-- 根据订单状态显示不同的操作按钮 -->
<text v-if="item.status === 1"
class="button"
:data-ordernum="item.orderNumber"
hover-class="none"
@tap="onCancelOrder"
>
@tap="onCancelOrder">
取消订单
</text>
<text
v-if="item.status==1"
<text v-if="item.status === 1"
class="button warn"
:data-ordernum="item.orderNumber"
hover-class="none"
@tap="normalPay"
>
@tap="normalPay">
付款
</text>
<text
v-if="item.status==3 || item.status==5"
<text v-if="item.status === 3 || item.status === 5"
class="button"
:data-ordernum="item.orderNumber"
hover-class="none"
@tap="toDeliveryPage"
>
@tap="toDeliveryPage">
查看物流
</text>
<text
v-if="item.status==3"
<text v-if="item.status === 3"
class="button warn"
:data-ordernum="item.orderNumber"
hover-class="none"
@tap="onConfirmReceive"
>
@tap="onConfirmReceive">
确认收货
</text>
</view>
@ -208,54 +142,57 @@
</block>
</view>
</view>
<!-- end 订单列表 -->
</template>
<script setup>
const wxs = number()
import { ref, onMounted, onReachBottom } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import http from '@/utils/http'
import number from '@/wxs/number.wxs'
//
const statuses = [
{ label: '全部', value: 0 },
{ label: '待支付', value: 1 },
{ label: '待发货', value: 2 },
{ label: '待收货', value: 3 },
{ label: '已完成', value: 5 }
]
//
const sts = ref(0)
const sts = ref(0)
/**
* 生命周期函数--监听页面加载
*/
onLoad((options) => {
//
onLoad((options) => {
if (options.sts) {
sts.value = options.sts
loadOrderData(options.sts, 1)
} else {
loadOrderData(0, 1)
sts.value = parseInt(options.sts)
}
})
loadOrderData(sts.value, 1)
})
const current = ref(1)
const pages = ref(0)
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom(() => {
if (current.value < pages.value) {
loadOrderData(sts.value, current.value + 1)
}
})
//
const current = ref(1)
const pages = ref(0)
//
const list = ref([])
const list = ref([])
/**
* 加载订单数据
*/
const loadOrderData = (sts, currentParam) => {
uni.showLoading() //
//
const loadOrderData = (status, currentPage) => {
uni.showLoading() //
http.request({
url: '/p/myOrder/myOrder',
method: 'GET',
data: {
current: currentParam,
current: currentPage,
size: 10,
status: sts
status: status
}
})
.then(({ data }) => {
//
let listParam = []
if (data.current === 1) {
if (currentPage === 1) {
listParam = data.records
} else {
listParam = list.value
@ -263,32 +200,32 @@ const loadOrderData = (sts, currentParam) => {
}
list.value = listParam
pages.value = data.pages
current.value = data.current
uni.hideLoading()
current.value = currentPage
uni.hideLoading() //
})
}
}
/**
* 状态点击事件
*/
const onStsTap = (e) => {
sts.value = e.currentTarget.dataset.sts
//
const onStsTap = (e) => {
const selectedStatus = e.currentTarget.dataset.sts
sts.value = parseInt(selectedStatus)
loadOrderData(sts.value, 1)
}
}
/**
* 查看物流
*/
const toDeliveryPage = (e) => {
//
const getStatusLabel = (status) => {
return statuses.find(s => s.value === status)?.label || '未知状态'
}
//
const toDeliveryPage = (e) => {
uni.navigateTo({
url: '/pages/express-delivery/express-delivery?orderNum=' + e.currentTarget.dataset.ordernum
url: `/pages/express-delivery/express-delivery?orderNum=${e.currentTarget.dataset.ordernum}`
})
}
}
/**
* 取消订单
*/
const onCancelOrder = (e) => {
//
const onCancelOrder = (e) => {
const ordernum = e.currentTarget.dataset.ordernum
uni.showModal({
title: '',
@ -298,15 +235,12 @@ const onCancelOrder = (e) => {
cancelText: '否',
confirmText: '是',
success (res) {
success(res) {
if (res.confirm) {
uni.showLoading({
mask: true
})
uni.showLoading({ mask: true })
http.request({
url: '/p/myOrder/cancel/' + ordernum,
method: 'PUT',
data: {}
url: `/p/myOrder/cancel/${ordernum}`,
method: 'PUT'
})
.then(() => {
loadOrderData(sts.value, 1)
@ -315,16 +249,11 @@ const onCancelOrder = (e) => {
}
}
})
}
}
/**
* 模拟支付直接提交成功
* @param e
*/
const normalPay = (e) => {
uni.showLoading({
mask: true
})
//
const normalPay = (e) => {
uni.showLoading({ mask: true })
http.request({
url: '/p/order/normalPay',
method: 'POST',
@ -341,7 +270,7 @@ const normalPay = (e) => {
})
setTimeout(() => {
uni.navigateTo({
url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + e.currentTarget.dataset.ordernum
url: `/pages/pay-result/pay-result?sts=1&orderNumbers=${e.currentTarget.dataset.ordernum}`
})
}, 1200)
} else {
@ -351,33 +280,27 @@ const normalPay = (e) => {
})
}
})
}
}
/**
* 查看订单详情
*/
const toOrderDetailPage = (e) => {
//
const toOrderDetailPage = (e) => {
uni.navigateTo({
url: '/pages/order-detail/order-detail?orderNum=' + e.currentTarget.dataset.ordernum
url: `/pages/order-detail/order-detail?orderNum=${e.currentTarget.dataset.ordernum}`
})
}
}
/**
* 确认收货
*/
const onConfirmReceive = (e) => {
//
const onConfirmReceive = (e) => {
uni.showModal({
title: '',
content: '我已收到货?',
confirmColor: '#eb2444',
success (res) {
success(res) {
if (res.confirm) {
uni.showLoading({
mask: true
})
uni.showLoading({ mask: true })
http.request({
url: '/p/myOrder/receipt/' + e.currentTarget.dataset.ordernum,
url: `/p/myOrder/receipt/${e.currentTarget.dataset.ordernum}`,
method: 'PUT'
})
.then(() => {
@ -387,25 +310,22 @@ const onConfirmReceive = (e) => {
}
}
})
}
}
/**
* 删除已完成||已取消的订单
* @param e
*/
const delOrderList = (e) => {
//
const delOrderList = (e) => {
uni.showModal({
title: '',
content: '确定要删除此订单吗?',
confirmColor: '#eb2444',
success (res) {
success(res) {
if (res.confirm) {
const ordernum = e.currentTarget.dataset.ordernum
uni.showLoading()
http.request({
url: '/p/myOrder/' + ordernum,
url: `/p/myOrder/${ordernum}`,
method: 'DELETE'
})
.then(() => {
@ -415,10 +335,9 @@ const delOrderList = (e) => {
}
}
})
}
}
</script>
<style scoped lang="scss">
@use './orderList.scss';
@use './orderList.scss';
</style>

@ -1,50 +1,92 @@
/* 定义支付状态信息的样式 */
.pay-sts {
/* 设置字体大小为40rpx */
font-size: 40rpx;
/* 设置顶部外边距为100rpx使支付状态信息与页面顶部有一定的间距 */
margin-top: 100rpx;
/* 设置上下内边距为30rpx左右内边距为0确保文本有足够的内部空间 */
padding: 30rpx 0;
/* 文本居中对齐 */
text-align: center;
}
/* 当支付状态为失败时,设置文本颜色为红色(#f43530以视觉上突出错误信息 */
.pay-sts.fail {
color: #f43530;
}
/* 当支付状态为成功时,设置文本颜色为绿色(#19be6b表示操作成功 */
.pay-sts.succ {
color: #19be6b;
}
/* 定义按钮组的样式 */
.btns {
/* 设置顶部外边距为50rpx使按钮组与上方内容有一定的间距 */
margin-top: 50rpx;
/* 文本居中对齐 */
text-align: center;
/* 定义默认按钮样式 */
.button {
/* 设置圆角半径为10rpx使按钮看起来更加圆润 */
border-radius: 10rpx;
/* 设置字体大小为28rpx */
font-size: 28rpx;
/* 设置背景颜色为白色 */
background: #fff;
/* 设置文本颜色为深灰色 */
color: #333;
/* 设置上下内边距为20rpx左右内边距为35rpx确保按钮内的文本有足够的内部空间 */
padding: 20rpx 35rpx;
/* 设置按钮宽度为300rpx确保按钮在不同屏幕尺寸下都能保持一致的宽度 */
width: 300rpx;
/* 设置左右外边距为20rpx确保按钮之间有一定的间距 */
margin: 0 20rpx;
/* 文本居中对齐 */
text-align: center;
}
/* 定义“查看订单”按钮的样式 */
.button.checkorder {
/* 设置背景颜色为绿色(#19be6b表示这是一个积极的操作 */
background: #19be6b;
/* 设置文本颜色为白色 */
color: #fff;
/* 设置底部外边距为20rpx使按钮与其他元素之间有一定的间距 */
margin-bottom: 20rpx;
/* 设置边框为2rpx宽的绿色实线 */
border: 2rpx solid #19be6b;
}
/* 定义“再次支付”按钮的样式 */
.button.payagain {
/* 设置背景颜色为白色 */
background: #fff;
/* 设置边框为2rpx宽的橙色实线 */
border: 2rpx solid #f90;
/* 设置文本颜色为橙色 */
color: #f90;
}
/* 定义“继续购物”按钮的样式 */
.button.shopcontinue {
/* 设置背景颜色为白色 */
background: #fff;
/* 设置边框为2rpx宽的绿色实线 */
border: 2rpx solid #19be6b;
/* 设置文本颜色为绿色 */
color: #19be6b;
}
}
/* 定义提示信息的样式 */
.tips {
/* 设置字体大小为28rpx */
font-size: 28rpx;
/* 设置文本颜色为浅灰色(#999使提示信息显得不那么显眼 */
color: #999;
/* 文本居中对齐 */
text-align: center;
/* 定义警告信息的样式 */
.warn {
/* 设置文本颜色为红色(#f43530用于突出显示警告或错误信息 */
color: #f43530;
}
}

@ -1,52 +1,61 @@
<template>
<!-- 定义页面的根容器 -->
<view class="container">
<!-- 当支付状态为失败sts == 0时显示的内容 -->
<view v-if="sts == 0">
<!-- 显示支付失败的状态信息 -->
<view class="pay-sts fail">
支付失败
</view>
<!-- 提示用户在30分钟内完成付款否则订单会被取消 -->
<view class="tips">
请在
<text class="warn">
30分钟
</text>内完成付款
<text class="warn">30分钟</text>内完成付款
</view>
<view class="tips">
否则订单会被系统取消
</view>
<!-- 按钮组提供查看订单重新支付的操作选项 -->
<view class="btns">
<text
class="button checkorder"
@tap="toOrderList"
>
<!-- 查看订单按钮点击后跳转到订单列表页面 -->
<text class="button checkorder"
@tap="toOrderList">
查看订单
</text>
<text
class="button payagain"
@tap="payAgain"
>
<!-- 重新支付按钮点击后触发重新支付的操作 -->
<text class="button payagain"
@tap="payAgain">
重新支付
</text>
</view>
</view>
<!-- 当支付状态为成功sts == 1时显示的内容 -->
<view v-if="sts == 1">
<!-- 显示支付成功的状态信息 -->
<view class="pay-sts succ">
支付成功
</view>
<!-- 感谢用户的购买 -->
<view class="tips">
感谢您的购买
</view>
<!-- 按钮组提供查看订单继续购物的操作选项 -->
<view class="btns">
<text
class="button checkorder"
@tap="toOrderList"
>
<!-- 查看订单按钮点击后跳转到订单列表页面 -->
<text class="button checkorder"
@tap="toOrderList">
查看订单
</text>
<text
class="button shopcontinue"
@tap="toIndex"
>
<!-- 继续购物按钮点击后返回首页 -->
<text class="button shopcontinue"
@tap="toIndex">
继续购物
</text>
</view>
@ -55,56 +64,87 @@
</template>
<script setup>
const sts = ref(0)
const orderNumbers = ref('')
/**
// Vueref
import { ref } from 'vue';
// uni-appAPI
import { onLoad, navigateTo, switchTab, showLoading, hideLoading, requestPayment, redirectTo } from '@dcloudio/uni-app';
// HTTP
import http from '@/utils/http';
//
const sts = ref(0); // 0
const orderNumbers = ref(''); //
/**
* 生命周期函数--监听页面加载
*/
onLoad((options) => {
sts.value = options.sts
orderNumbers.value = options.orderNumbers
})
const toOrderList = () => {
uni.navigateTo({
url: '/pages/orderList/orderList?sts=0'
})
}
const toIndex = () => {
uni.switchTab({
url: '/pages/index/index'
})
}
const payAgain = () => {
uni.showLoading({
mask: true
})
onLoad((options) => {
//
sts.value = parseInt(options.sts, 10); //
orderNumbers.value = options.orderNumbers;
});
//
const toOrderList = () => {
navigateTo({
url: '/pages/orderList/orderList?sts=0' // sts=0
});
};
//
const toIndex = () => {
switchTab({
url: '/pages/index/index' //
});
};
//
const payAgain = () => {
//
showLoading({
mask: true //
});
//
http.request({
url: '/p/order/pay',
method: 'POST',
url: '/p/order/pay', // URL
method: 'POST', // HTTP
data: {
payType: 1,
orderNumbers: orderNumbers.value
payType: 1, // 1
orderNumbers: orderNumbers.value //
}
})
.then(({ data }) => {
uni.hideLoading()
uni.requestPayment({
timeStamp: data.timeStamp,
nonceStr: data.nonceStr,
package: data.packageValue,
signType: data.signType,
paySign: data.paySign,
//
hideLoading();
//
requestPayment({
timeStamp: data.timeStamp, //
nonceStr: data.nonceStr, //
package: data.packageValue, //
signType: data.signType, //
paySign: data.paySign, //
success: () => {
uni.redirectTo({
url: '/pages/pay-result/pay-result?sts=1&orderNum=' + orderNumbers.value
})
//
redirectTo({
url: `/pages/pay-result/pay-result?sts=1&orderNum=${orderNumbers.value}`
});
},
fail: (err) => {
console.error('支付失败:', err);
//
}
});
})
})
}
.catch(err => {
console.error('发起支付请求失败:', err);
//
});
};
</script>
<style scoped lang="scss">
@use './pay-result.scss';
/* 使用本地的SCSS文件来定义样式 */
@use './pay-result.scss';
</style>

Loading…
Cancel
Save