秦佳浩 2 months ago
commit 86fac260f2

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

@ -2,142 +2,89 @@
<view class="container"> <view class="container">
<!-- 头部菜单 --> <!-- 头部菜单 -->
<view class="order-tit"> <view class="order-tit">
<text <!-- 动态生成订单状态标签点击切换显示不同状态的订单列表 -->
data-sts="0" <text v-for="(status, index) in statuses"
:class="sts==0?'on':''" :key="index"
@tap="onStsTap" :data-sts="status.value"
> :class="sts === status.value ? 'on' : ''"
全部 @tap="onStsTap">
</text> {{ status.label }}
<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> </text>
</view> </view>
<!-- end 头部菜单 --> <!-- end 头部菜单 -->
<view class="main"> <view class="main">
<view <!-- 如果订单列表为空则显示提示信息 -->
v-if="list.length==0" <view v-if="list.length === 0" class="empty">
class="empty"
>
还没有任何相关订单 还没有任何相关订单
</view> </view>
<!-- 订单列表 --> <!-- 订单列表 -->
<block <block v-for="(item, index) in list" :key="index">
v-for="(item, index) in list"
:key="index"
>
<view class="prod-item"> <view class="prod-item">
<!-- 订单编号和状态 -->
<view class="order-num"> <view class="order-num">
<text>订单编号{{ item.orderNumber }}</text> <text>订单编号{{ item.orderNumber }}</text>
<view class="order-state"> <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> </text>
<view <!-- 已完成或已取消的订单显示清除按钮 -->
v-if="item.status==5 || item.status==6" <view v-if="item.status === 5 || item.status === 6"
class="clear-btn" class="clear-btn">
> <image src="@/static/images/icon/clear-his.png"
<image
src="@/static/images/icon/clear-his.png"
class="clear-list-btn" class="clear-list-btn"
:data-ordernum="item.orderNumber" :data-ordernum="item.orderNumber"
@tap="delOrderList" @tap="delOrderList" />
/>
</view> </view>
</view> </view>
</view> </view>
<!-- 商品列表 --> <!-- 商品列表 -->
<!-- 一个订单单个商品的显示 --> <!-- 单个商品时直接显示商品详情 -->
<block v-if="item.orderItemDtos.length==1"> <block v-if="item.orderItemDtos.length === 1">
<block <block v-for="(prod, index2) in item.orderItemDtos" :key="index2">
v-for="(prod, index2) in item.orderItemDtos"
:key="index2"
>
<view> <view>
<view <view class="item-cont"
class="item-cont"
:data-ordernum="item.orderNumber" :data-ordernum="item.orderNumber"
@tap="toOrderDetailPage" @tap="toOrderDetailPage">
>
<view class="prod-pic"> <view class="prod-pic">
<image :src="prod.pic" /> <image :src="prod.pic" />
</view> </view>
<view class="prod-info"> <view class="prod-info">
<view class="prodname"> <view class="prodname">{{ prod.prodName }}</view>
{{ prod.prodName }} <view class="prod-info-cont">{{ prod.skuName }}</view>
</view>
<view class="prod-info-cont">
{{ prod.skuName }}
</view>
<view class="price-nums"> <view class="price-nums">
<text class="prodprice"> <text class="prodprice">
<text class="symbol"> <text class="symbol"></text>
<text class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text>
</text> <text class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</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> </text>
<text class="prodcount">x{{ prod.prodCount }}</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</block> </block>
</block> </block>
<!-- 一个订单多个商品时的显示 --> <!-- 多个商品时使用横向滚动视图展示所有商品图片 -->
<block v-else> <block v-else>
<view <view class="item-cont"
class="item-cont"
:data-ordernum="item.orderNumber" :data-ordernum="item.orderNumber"
@tap="toOrderDetailPage" @tap="toOrderDetailPage">
> <scroll-view scroll-x="true"
<scroll-view
scroll-x="true"
scroll-left="0" scroll-left="0"
scroll-with-animation="false" scroll-with-animation="false"
class="categories" class="categories">
> <block v-for="(prod, index2) in item.orderItemDtos" :key="index2">
<block
v-for="(prod, index2) in item.orderItemDtos"
:key="index2"
>
<view class="prod-pic"> <view class="prod-pic">
<image :src="prod.pic" /> <image :src="prod.pic" />
</view> </view>
@ -146,60 +93,47 @@
</view> </view>
</block> </block>
<!-- 显示订单总价 -->
<view class="total-num"> <view class="total-num">
<text class="prodcount"> <text class="prodcount">共1件商品</text>
共1件商品
</text>
<view class="prodprice"> <view class="prodprice">
合计 合计
<text class="symbol"> <text class="symbol"></text>
<text class="big-num">{{ wxs.parsePrice(item.actualTotal)[0] }}</text>
</text> <text class="small-num">.{{ wxs.parsePrice(item.actualTotal)[1] }}</text>
<text class="big-num">
{{ wxs.parsePrice(item.actualTotal)[0] }}
</text>
<text class="small-num">
.{{ wxs.parsePrice(item.actualTotal)[1] }}
</text>
</view> </view>
</view> </view>
<!-- end 商品列表 -->
<!-- 操作按钮 -->
<view class="prod-foot"> <view class="prod-foot">
<view class="btn"> <view class="btn">
<text <!-- 根据订单状态显示不同的操作按钮 -->
v-if="item.status==1" <text v-if="item.status === 1"
class="button" class="button"
:data-ordernum="item.orderNumber" :data-ordernum="item.orderNumber"
hover-class="none" hover-class="none"
@tap="onCancelOrder" @tap="onCancelOrder">
>
取消订单 取消订单
</text> </text>
<text <text v-if="item.status === 1"
v-if="item.status==1"
class="button warn" class="button warn"
:data-ordernum="item.orderNumber" :data-ordernum="item.orderNumber"
hover-class="none" hover-class="none"
@tap="normalPay" @tap="normalPay">
>
付款 付款
</text> </text>
<text <text v-if="item.status === 3 || item.status === 5"
v-if="item.status==3 || item.status==5"
class="button" class="button"
:data-ordernum="item.orderNumber" :data-ordernum="item.orderNumber"
hover-class="none" hover-class="none"
@tap="toDeliveryPage" @tap="toDeliveryPage">
>
查看物流 查看物流
</text> </text>
<text <text v-if="item.status === 3"
v-if="item.status==3"
class="button warn" class="button warn"
:data-ordernum="item.orderNumber" :data-ordernum="item.orderNumber"
hover-class="none" hover-class="none"
@tap="onConfirmReceive" @tap="onConfirmReceive">
>
确认收货 确认收货
</text> </text>
</view> </view>
@ -208,54 +142,57 @@
</block> </block>
</view> </view>
</view> </view>
<!-- end 订单列表 -->
</template> </template>
<script setup> <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) { if (options.sts) {
sts.value = options.sts sts.value = parseInt(options.sts)
loadOrderData(options.sts, 1)
} else {
loadOrderData(0, 1)
} }
loadOrderData(sts.value, 1)
}) })
//
const current = ref(1) const current = ref(1)
const pages = ref(0) const pages = ref(0)
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom(() => {
if (current.value < pages.value) {
loadOrderData(sts.value, current.value + 1)
}
})
//
const list = ref([]) const list = ref([])
/**
* 加载订单数据 //
*/ const loadOrderData = (status, currentPage) => {
const loadOrderData = (sts, currentParam) => { uni.showLoading() //
uni.showLoading() //
http.request({ http.request({
url: '/p/myOrder/myOrder', url: '/p/myOrder/myOrder',
method: 'GET', method: 'GET',
data: { data: {
current: currentParam, current: currentPage,
size: 10, size: 10,
status: sts status: status
} }
}) })
.then(({ data }) => { .then(({ data }) => {
//
let listParam = [] let listParam = []
if (data.current === 1) { if (currentPage === 1) {
listParam = data.records listParam = data.records
} else { } else {
listParam = list.value listParam = list.value
@ -263,31 +200,31 @@ const loadOrderData = (sts, currentParam) => {
} }
list.value = listParam list.value = listParam
pages.value = data.pages pages.value = data.pages
current.value = data.current current.value = currentPage
uni.hideLoading() uni.hideLoading() //
}) })
} }
/** //
* 状态点击事件
*/
const onStsTap = (e) => { const onStsTap = (e) => {
sts.value = e.currentTarget.dataset.sts const selectedStatus = e.currentTarget.dataset.sts
sts.value = parseInt(selectedStatus)
loadOrderData(sts.value, 1) loadOrderData(sts.value, 1)
} }
/** //
* 查看物流 const getStatusLabel = (status) => {
*/ return statuses.find(s => s.value === status)?.label || '未知状态'
}
//
const toDeliveryPage = (e) => { const toDeliveryPage = (e) => {
uni.navigateTo({ 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 const ordernum = e.currentTarget.dataset.ordernum
uni.showModal({ uni.showModal({
@ -300,13 +237,10 @@ const onCancelOrder = (e) => {
success(res) { success(res) {
if (res.confirm) { if (res.confirm) {
uni.showLoading({ uni.showLoading({ mask: true })
mask: true
})
http.request({ http.request({
url: '/p/myOrder/cancel/' + ordernum, url: `/p/myOrder/cancel/${ordernum}`,
method: 'PUT', method: 'PUT'
data: {}
}) })
.then(() => { .then(() => {
loadOrderData(sts.value, 1) loadOrderData(sts.value, 1)
@ -317,14 +251,9 @@ const onCancelOrder = (e) => {
}) })
} }
/** //
* 模拟支付直接提交成功
* @param e
*/
const normalPay = (e) => { const normalPay = (e) => {
uni.showLoading({ uni.showLoading({ mask: true })
mask: true
})
http.request({ http.request({
url: '/p/order/normalPay', url: '/p/order/normalPay',
method: 'POST', method: 'POST',
@ -341,7 +270,7 @@ const normalPay = (e) => {
}) })
setTimeout(() => { setTimeout(() => {
uni.navigateTo({ 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) }, 1200)
} else { } else {
@ -353,18 +282,14 @@ const normalPay = (e) => {
}) })
} }
/** //
* 查看订单详情
*/
const toOrderDetailPage = (e) => { const toOrderDetailPage = (e) => {
uni.navigateTo({ 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({ uni.showModal({
title: '', title: '',
@ -373,11 +298,9 @@ const onConfirmReceive = (e) => {
success(res) { success(res) {
if (res.confirm) { if (res.confirm) {
uni.showLoading({ uni.showLoading({ mask: true })
mask: true
})
http.request({ http.request({
url: '/p/myOrder/receipt/' + e.currentTarget.dataset.ordernum, url: `/p/myOrder/receipt/${e.currentTarget.dataset.ordernum}`,
method: 'PUT' method: 'PUT'
}) })
.then(() => { .then(() => {
@ -389,10 +312,7 @@ const onConfirmReceive = (e) => {
}) })
} }
/** //
* 删除已完成||已取消的订单
* @param e
*/
const delOrderList = (e) => { const delOrderList = (e) => {
uni.showModal({ uni.showModal({
title: '', title: '',
@ -405,7 +325,7 @@ const delOrderList = (e) => {
uni.showLoading() uni.showLoading()
http.request({ http.request({
url: '/p/myOrder/' + ordernum, url: `/p/myOrder/${ordernum}`,
method: 'DELETE' method: 'DELETE'
}) })
.then(() => { .then(() => {
@ -416,7 +336,6 @@ const delOrderList = (e) => {
} }
}) })
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

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

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

Loading…
Cancel
Save