liruiqiang
4 weeks ago
1 changed files with 686 additions and 0 deletions
@ -0,0 +1,686 @@ |
|||
<template> |
|||
<!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 --> |
|||
<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"> |
|||
<view class="wrap"> |
|||
<navigator |
|||
v-if="pages.length > 1" |
|||
open-type="navigateBack" |
|||
class="back icon-left" |
|||
></navigator> |
|||
<navigator v-else url="/pages/index/index" open-type="switchTab" class="back icon-home"> |
|||
</navigator> |
|||
<view class="title">订单详情</view> |
|||
</view> |
|||
</view> |
|||
<scroll-view |
|||
enable-back-to-top |
|||
scroll-y |
|||
class="viewport" |
|||
id="scroller" |
|||
@scrolltolower="onScrolltolower" |
|||
> |
|||
<template v-if="true"> |
|||
<!-- 订单状态 --> |
|||
<view class="overview" :style="{ paddingTop: safeAreaInsets!.top + 20 + 'px' }"> |
|||
<!-- 待付款状态:展示去支付按钮和倒计时 --> |
|||
<template v-if="true"> |
|||
<view class="status icon-clock">等待付款</view> |
|||
<view class="tips"> |
|||
<text class="money">应付金额: ¥ 99.00</text> |
|||
<text class="time">支付剩余</text> |
|||
00 时 29 分 59 秒 |
|||
</view> |
|||
<view class="button">去支付</view> |
|||
</template> |
|||
<!-- 其他订单状态:展示再次购买按钮 --> |
|||
<template v-else> |
|||
<!-- 订单状态文字 --> |
|||
<view class="status"> 待付款 </view> |
|||
<view class="button-group"> |
|||
<navigator |
|||
class="button" |
|||
:url="`/pagesOrder/create/create?orderId=${query.id}`" |
|||
hover-class="none" |
|||
> |
|||
再次购买 |
|||
</navigator> |
|||
<!-- 待发货状态：模拟发货,开发期间使用,用于修改订单状态为已发货 --> |
|||
<view v-if="false" class="button"> 模拟发货 </view> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
<!-- 配送状态 --> |
|||
<view class="shipment"> |
|||
<!-- 订单物流信息 --> |
|||
<view v-for="item in 1" :key="item" class="item"> |
|||
<view class="message"> |
|||
您已在广州市天河区黑马程序员完成取件，感谢使用菜鸟驿站，期待再次为您服务。 |
|||
</view> |
|||
<view class="date"> 2023-04-14 13:14:20 </view> |
|||
</view> |
|||
<!-- 用户收货地址 --> |
|||
<view class="locate"> |
|||
<view class="user"> 张三 13333333333 </view> |
|||
<view class="address"> 广东省 广州市 天河区 黑马程序员 </view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 商品信息 --> |
|||
<view class="goods"> |
|||
<view class="item"> |
|||
<navigator |
|||
class="navigator" |
|||
v-for="item in 2" |
|||
:key="item" |
|||
:url="`/pages/goods/goods?id=${item}`" |
|||
hover-class="none" |
|||
> |
|||
<image |
|||
class="cover" |
|||
src="https://yanxuan-item.nosdn.127.net/c07edde1047fa1bd0b795bed136c2bb2.jpg" |
|||
></image> |
|||
<view class="meta"> |
|||
<view class="name ellipsis">ins风小碎花泡泡袖衬110-160cm</view> |
|||
<view class="type">藏青小花， 130</view> |
|||
<view class="price"> |
|||
<view class="actual"> |
|||
<text class="symbol">¥</text> |
|||
<text>99.00</text> |
|||
</view> |
|||
</view> |
|||
<view class="quantity">x1</view> |
|||
</view> |
|||
</navigator> |
|||
<!-- 待评价状态:展示按钮 --> |
|||
<view class="action" v-if="true"> |
|||
<view class="button primary">申请售后</view> |
|||
<navigator url="" class="button"> 去评价 </navigator> |
|||
</view> |
|||
</view> |
|||
<!-- 合计 --> |
|||
<view class="total"> |
|||
<view class="row"> |
|||
<view class="text">商品总价: </view> |
|||
<view class="symbol">99.00</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="text">运费: </view> |
|||
<view class="symbol">10.00</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="text">应付金额: </view> |
|||
<view class="symbol primary">109.00</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 订单信息 --> |
|||
<view class="detail"> |
|||
<view class="title">订单信息</view> |
|||
<view class="row"> |
|||
<view class="item"> |
|||
订单编号: {{ query.id }} <text class="copy" @tap="onCopy(query.id)">复制</text> |
|||
</view> |
|||
<view class="item">下单时间: 2023-04-14 13:14:20</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 猜你喜欢 --> |
|||
<XtxGuess ref="guessRef" /> |
|||
|
|||
<!-- 底部操作栏 --> |
|||
<view class="toolbar-height" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"></view> |
|||
<view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"> |
|||
<!-- 待付款状态:展示支付按钮 --> |
|||
<template v-if="true"> |
|||
<view class="button primary"> 去支付 </view> |
|||
<view class="button" @tap="popup?.open?.()"> 取消订单 </view> |
|||
</template> |
|||
<!-- 其他订单状态:按需展示按钮 --> |
|||
<template v-else> |
|||
<navigator |
|||
class="button secondary" |
|||
:url="`/pagesOrder/create/create?orderId=${query.id}`" |
|||
hover-class="none" |
|||
> |
|||
再次购买 |
|||
</navigator> |
|||
<!-- 待收货状态: 展示确认收货 --> |
|||
<view class="button primary"> 确认收货 </view> |
|||
<!-- 待评价状态: 展示去评价 --> |
|||
<view class="button"> 去评价 </view> |
|||
<!-- 待评价/已完成/已取消 状态: 展示删除订单 --> |
|||
<view class="button delete"> 删除订单 </view> |
|||
</template> |
|||
</view> |
|||
</template> |
|||
<template v-else> |
|||
<!-- 骨架屏组件 --> |
|||
<PageSkeleton /> |
|||
</template> |
|||
</scroll-view> |
|||
<!-- 取消订单弹窗 --> |
|||
<uni-popup ref="popup" type="bottom" background-color="#fff"> |
|||
<view class="popup-root"> |
|||
<view class="title">订单取消</view> |
|||
<view class="description"> |
|||
<view class="tips">请选择取消订单的原因：</view> |
|||
<view class="cell" v-for="item in reasonList" :key="item" @tap="reason = item"> |
|||
<text class="text">{{ item }}</text> |
|||
<text class="icon" :class="{ checked: item === reason }"></text> |
|||
</view> |
|||
</view> |
|||
<view class="footer"> |
|||
<view class="button" @tap="popup?.close?.()">取消</view> |
|||
<view class="button primary">确认</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { onReady } from '@dcloudio/uni-app' |
|||
import { useGuessList } from '@/composables' |
|||
import { ref } from 'vue' |
|||
|
|||
// 获取屏幕边界到安全区域距离 |
|||
const { safeAreaInsets } = uni.getSystemInfoSync() |
|||
// 猜你喜欢 |
|||
const { guessRef, onScrolltolower } = useGuessList() |
|||
// 弹出层组件 |
|||
const popup = ref<UniHelper.UniPopupInstance>() |
|||
// 取消原因列表 |
|||
const reasonList = ref([ |
|||
'商品无货', |
|||
'不想要了', |
|||
'商品信息填错了', |
|||
'地址信息填写错误', |
|||
'商品降价', |
|||
'其它', |
|||
]) |
|||
// 订单取消原因 |
|||
const reason = ref('') |
|||
// 复制内容 |
|||
const onCopy = (id: string) => { |
|||
// 设置系统剪贴板的内容 |
|||
uni.setClipboardData({ data: id }) |
|||
} |
|||
// 获取页面参数 |
|||
const query = defineProps<{ |
|||
id: string |
|||
}>() |
|||
|
|||
// 获取页面栈 |
|||
const pages = getCurrentPages() |
|||
|
|||
// 获取当前页面实例，数组最后一项 |
|||
const pageInstance = pages.at(-1) as any |
|||
|
|||
// 页面渲染完毕，绑定动画效果 |
|||
onReady(() => { |
|||
// 动画效果,导航栏背景色 |
|||
pageInstance.animate( |
|||
'.navbar', // 选择器 |
|||
[{ backgroundColor: 'transparent' }, { backgroundColor: '#f8f8f8' }], // 关键帧信息 |
|||
1000, // 动画持续时长 |
|||
{ |
|||
scrollSource: '#scroller', // scroll-view 的选择器 |
|||
startScrollOffset: 0, // 开始滚动偏移量 |
|||
endScrollOffset: 50, // 停止滚动偏移量 |
|||
timeRange: 1000, // 时间长度 |
|||
}, |
|||
) |
|||
// 动画效果,导航栏标题 |
|||
pageInstance.animate('.navbar .title', [{ color: 'transparent' }, { color: '#000' }], 1000, { |
|||
scrollSource: '#scroller', |
|||
timeRange: 1000, |
|||
startScrollOffset: 0, |
|||
endScrollOffset: 50, |
|||
}) |
|||
// 动画效果,导航栏返回按钮 |
|||
pageInstance.animate('.navbar .back', [{ color: '#fff' }, { color: '#000' }], 1000, { |
|||
scrollSource: '#scroller', |
|||
timeRange: 1000, |
|||
startScrollOffset: 0, |
|||
endScrollOffset: 50, |
|||
}) |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.navbar { |
|||
width: 750rpx; |
|||
color: #000; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 9; |
|||
/* background-color: #f8f8f8; */ |
|||
background-color: transparent; |
|||
|
|||
.wrap { |
|||
position: relative; |
|||
|
|||
.title { |
|||
height: 44px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 32rpx; |
|||
/* color: #000; */ |
|||
color: transparent; |
|||
} |
|||
|
|||
.back { |
|||
position: absolute; |
|||
left: 0; |
|||
height: 44px; |
|||
width: 44px; |
|||
font-size: 44rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
/* color: #000; */ |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.viewport { |
|||
background-color: #f7f7f8; |
|||
} |
|||
|
|||
.overview { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
|
|||
line-height: 1; |
|||
padding-bottom: 30rpx; |
|||
color: #fff; |
|||
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png); |
|||
background-size: cover; |
|||
|
|||
.status { |
|||
font-size: 36rpx; |
|||
} |
|||
|
|||
.status::before { |
|||
margin-right: 6rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.tips { |
|||
margin: 30rpx 0; |
|||
display: flex; |
|||
font-size: 14px; |
|||
align-items: center; |
|||
|
|||
.money { |
|||
margin-right: 30rpx; |
|||
} |
|||
} |
|||
|
|||
.button-group { |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.button { |
|||
width: 260rpx; |
|||
height: 64rpx; |
|||
margin: 0 10rpx; |
|||
text-align: center; |
|||
line-height: 64rpx; |
|||
font-size: 28rpx; |
|||
color: #27ba9b; |
|||
border-radius: 68rpx; |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
|
|||
.shipment { |
|||
line-height: 1.4; |
|||
padding: 0 20rpx; |
|||
margin: 20rpx 20rpx 0; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
|
|||
.locate, |
|||
.item { |
|||
min-height: 120rpx; |
|||
padding: 30rpx 30rpx 25rpx 75rpx; |
|||
background-size: 50rpx; |
|||
background-repeat: no-repeat; |
|||
background-position: 6rpx center; |
|||
} |
|||
|
|||
.locate { |
|||
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png); |
|||
|
|||
.user { |
|||
font-size: 26rpx; |
|||
color: #444; |
|||
} |
|||
|
|||
.address { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
|
|||
.item { |
|||
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png); |
|||
border-bottom: 1rpx solid #eee; |
|||
position: relative; |
|||
|
|||
.message { |
|||
font-size: 26rpx; |
|||
color: #444; |
|||
} |
|||
|
|||
.date { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.goods { |
|||
margin: 20rpx 20rpx 0; |
|||
padding: 0 20rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
|
|||
.item { |
|||
padding: 30rpx 0; |
|||
border-bottom: 1rpx solid #eee; |
|||
|
|||
.navigator { |
|||
display: flex; |
|||
margin: 20rpx 0; |
|||
} |
|||
|
|||
.cover { |
|||
width: 170rpx; |
|||
height: 170rpx; |
|||
border-radius: 10rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.meta { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
position: relative; |
|||
} |
|||
|
|||
.name { |
|||
height: 80rpx; |
|||
font-size: 26rpx; |
|||
color: #444; |
|||
} |
|||
|
|||
.type { |
|||
line-height: 1.8; |
|||
padding: 0 15rpx; |
|||
margin-top: 6rpx; |
|||
font-size: 24rpx; |
|||
align-self: flex-start; |
|||
border-radius: 4rpx; |
|||
color: #888; |
|||
background-color: #f7f7f8; |
|||
} |
|||
|
|||
.price { |
|||
display: flex; |
|||
margin-top: 6rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.symbol { |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.original { |
|||
color: #999; |
|||
text-decoration: line-through; |
|||
} |
|||
|
|||
.actual { |
|||
margin-left: 10rpx; |
|||
color: #444; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.quantity { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
font-size: 24rpx; |
|||
color: #444; |
|||
} |
|||
|
|||
.action { |
|||
display: flex; |
|||
flex-direction: row-reverse; |
|||
justify-content: flex-start; |
|||
padding: 30rpx 0 0; |
|||
|
|||
.button { |
|||
width: 200rpx; |
|||
height: 60rpx; |
|||
text-align: center; |
|||
justify-content: center; |
|||
line-height: 60rpx; |
|||
margin-left: 20rpx; |
|||
border-radius: 60rpx; |
|||
border: 1rpx solid #ccc; |
|||
font-size: 26rpx; |
|||
color: #444; |
|||
} |
|||
|
|||
.primary { |
|||
color: #27ba9b; |
|||
border-color: #27ba9b; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.total { |
|||
line-height: 1; |
|||
font-size: 26rpx; |
|||
padding: 20rpx 0; |
|||
color: #666; |
|||
|
|||
.row { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 10rpx 0; |
|||
} |
|||
|
|||
.symbol::before { |
|||
content: '¥'; |
|||
font-size: 80%; |
|||
margin-right: 3rpx; |
|||
} |
|||
|
|||
.primary { |
|||
color: #cf4444; |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.detail { |
|||
line-height: 1; |
|||
padding: 30rpx 20rpx 0; |
|||
margin: 20rpx 20rpx 0; |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
border-radius: 10rpx; |
|||
background-color: #fff; |
|||
|
|||
.title { |
|||
font-size: 30rpx; |
|||
color: #444; |
|||
} |
|||
|
|||
.row { |
|||
padding: 20rpx 0; |
|||
|
|||
.item { |
|||
padding: 10rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.copy { |
|||
border-radius: 20rpx; |
|||
font-size: 20rpx; |
|||
border: 1px solid #ccc; |
|||
padding: 5rpx 10rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.toolbar-height { |
|||
height: 100rpx; |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
.toolbar { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: calc(var(--window-bottom)); |
|||
z-index: 1; |
|||
|
|||
height: 100rpx; |
|||
padding: 0 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-direction: row-reverse; |
|||
border-top: 1rpx solid #ededed; |
|||
border-bottom: 1rpx solid #ededed; |
|||
background-color: #fff; |
|||
box-sizing: content-box; |
|||
|
|||
.button { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
width: 200rpx; |
|||
height: 72rpx; |
|||
margin-left: 15rpx; |
|||
font-size: 26rpx; |
|||
border-radius: 72rpx; |
|||
border: 1rpx solid #ccc; |
|||
color: #444; |
|||
} |
|||
|
|||
.delete { |
|||
order: 4; |
|||
} |
|||
|
|||
.button { |
|||
order: 3; |
|||
} |
|||
|
|||
.secondary { |
|||
order: 2; |
|||
color: #27ba9b; |
|||
border-color: #27ba9b; |
|||
} |
|||
|
|||
.primary { |
|||
order: 1; |
|||
color: #fff; |
|||
background-color: #27ba9b; |
|||
} |
|||
} |
|||
|
|||
.popup-root { |
|||
padding: 30rpx 30rpx 0; |
|||
border-radius: 10rpx 10rpx 0 0; |
|||
overflow: hidden; |
|||
|
|||
.title { |
|||
font-size: 30rpx; |
|||
text-align: center; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.description { |
|||
font-size: 28rpx; |
|||
padding: 0 20rpx; |
|||
|
|||
.tips { |
|||
color: #444; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.cell { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 15rpx 0; |
|||
color: #666; |
|||
} |
|||
|
|||
.icon::before { |
|||
content: '\e6cd'; |
|||
font-family: 'erabbit' !important; |
|||
font-size: 38rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.icon.checked::before { |
|||
content: '\e6cc'; |
|||
font-size: 38rpx; |
|||
color: #27ba9b; |
|||
} |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 30rpx 0 40rpx; |
|||
font-size: 28rpx; |
|||
color: #444; |
|||
|
|||
.button { |
|||
flex: 1; |
|||
height: 72rpx; |
|||
text-align: center; |
|||
line-height: 72rpx; |
|||
margin: 0 20rpx; |
|||
color: #444; |
|||
border-radius: 72rpx; |
|||
border: 1rpx solid #ccc; |
|||
} |
|||
|
|||
.primary { |
|||
color: #fff; |
|||
background-color: #27ba9b; |
|||
border: none; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue