liruiqiang
1 month ago
1 changed files with 319 additions and 0 deletions
@ -0,0 +1,319 @@ |
|||||
|
<template> |
||||
|
<view class="viewport"> |
||||
|
<!-- tabs --> |
||||
|
<view class="tabs"> |
||||
|
<text |
||||
|
class="item" |
||||
|
v-for="(item, index) in orderTabs" |
||||
|
:key="item.title" |
||||
|
@tap="activeIndex = index" |
||||
|
> |
||||
|
{{ item.title }} |
||||
|
</text> |
||||
|
<!-- 游标 --> |
||||
|
<view class="cursor" :style="{ left: activeIndex * 20 + '%' }"></view> |
||||
|
</view> |
||||
|
<!-- 滑动容器 --> |
||||
|
<swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current"> |
||||
|
<!-- 滑动项 --> |
||||
|
<swiper-item v-for="item in orderTabs" :key="item.title"> |
||||
|
<!-- 订单列表 --> |
||||
|
<scroll-view scroll-y class="orders"> |
||||
|
<view class="card" v-for="item in 2" :key="item"> |
||||
|
<!-- 订单信息 --> |
||||
|
<view class="status"> |
||||
|
<text class="date">2023-04-14 13:14:20</text> |
||||
|
<!-- 订单状态文字 --> |
||||
|
<text>待付款</text> |
||||
|
<!-- 待评价/已完成/已取消 状态: 展示删除订单 --> |
||||
|
<text class="icon-delete"></text> |
||||
|
</view> |
||||
|
<!-- 商品信息，点击商品跳转到订单详情，不是商品详情 --> |
||||
|
<navigator |
||||
|
v-for="sku in 2" |
||||
|
:key="sku" |
||||
|
class="goods" |
||||
|
:url="`/pagesOrder/detail/detail?id=1`" |
||||
|
hover-class="none" |
||||
|
> |
||||
|
<view class="cover"> |
||||
|
<image |
||||
|
mode="aspectFit" |
||||
|
src="https://yanxuan-item.nosdn.127.net/c07edde1047fa1bd0b795bed136c2bb2.jpg" |
||||
|
></image> |
||||
|
</view> |
||||
|
<view class="meta"> |
||||
|
<view class="name ellipsis">ins风小碎花泡泡袖衬110-160cm</view> |
||||
|
<view class="type">藏青小花 130</view> |
||||
|
</view> |
||||
|
</navigator> |
||||
|
<!-- 支付信息 --> |
||||
|
<view class="payment"> |
||||
|
<text class="quantity">共5件商品</text> |
||||
|
<text>实付</text> |
||||
|
<text class="amount"> <text class="symbol">¥</text>99</text> |
||||
|
</view> |
||||
|
<!-- 订单操作按钮 --> |
||||
|
<view class="action"> |
||||
|
<!-- 待付款状态：显示去支付按钮 --> |
||||
|
<template v-if="true"> |
||||
|
<view class="button primary">去支付</view> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<navigator |
||||
|
class="button secondary" |
||||
|
:url="`/pagesOrder/create/create?orderId=id`" |
||||
|
hover-class="none" |
||||
|
> |
||||
|
再次购买 |
||||
|
</navigator> |
||||
|
<!-- 待收货状态: 展示确认收货 --> |
||||
|
<view v-if="false" class="button primary">确认收货</view> |
||||
|
</template> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 底部提示文字 --> |
||||
|
<view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"> |
||||
|
{{ true ? '没有更多数据~' : '正在加载...' }} |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref } from 'vue' |
||||
|
|
||||
|
// 获取屏幕边界到安全区域距离 |
||||
|
const { safeAreaInsets } = uni.getSystemInfoSync() |
||||
|
// tabs 数据 |
||||
|
const orderTabs = ref([ |
||||
|
{ orderState: 0, title: '全部' }, |
||||
|
{ orderState: 1, title: '待付款' }, |
||||
|
{ orderState: 2, title: '待发货' }, |
||||
|
{ orderState: 3, title: '待收货' }, |
||||
|
{ orderState: 4, title: '待评价' }, |
||||
|
]) |
||||
|
|
||||
|
// 获取页面参数 |
||||
|
const query = defineProps<{ |
||||
|
type: string |
||||
|
}>() |
||||
|
|
||||
|
// 高亮下标 |
||||
|
const activeIndex = ref(orderTabs.value.findIndex((v) => v.orderState === Number(query.type))) |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
page { |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.viewport { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
// tabs |
||||
|
.tabs { |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
line-height: 60rpx; |
||||
|
margin: 0 10rpx; |
||||
|
background-color: #fff; |
||||
|
box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6); |
||||
|
position: relative; |
||||
|
z-index: 9; |
||||
|
|
||||
|
.item { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
padding: 20rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #262626; |
||||
|
} |
||||
|
|
||||
|
.cursor { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
width: 20%; |
||||
|
height: 6rpx; |
||||
|
padding: 0 50rpx; |
||||
|
background-color: #27ba9b; |
||||
|
/* 过渡效果 */ |
||||
|
transition: all 0.4s; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// swiper |
||||
|
.swiper { |
||||
|
background-color: #f7f7f8; |
||||
|
} |
||||
|
|
||||
|
// 订单列表 |
||||
|
.orders { |
||||
|
.card { |
||||
|
min-height: 100rpx; |
||||
|
padding: 20rpx; |
||||
|
margin: 20rpx 20rpx 0; |
||||
|
border-radius: 10rpx; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
&:last-child { |
||||
|
padding-bottom: 40rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
font-size: 28rpx; |
||||
|
color: #999; |
||||
|
margin-bottom: 15rpx; |
||||
|
|
||||
|
.date { |
||||
|
color: #666; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.primary { |
||||
|
color: #ff9240; |
||||
|
} |
||||
|
|
||||
|
.icon-delete { |
||||
|
line-height: 1; |
||||
|
margin-left: 10rpx; |
||||
|
padding-left: 10rpx; |
||||
|
border-left: 1rpx solid #e3e3e3; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods { |
||||
|
display: flex; |
||||
|
margin-bottom: 20rpx; |
||||
|
|
||||
|
.cover { |
||||
|
width: 170rpx; |
||||
|
height: 170rpx; |
||||
|
margin-right: 20rpx; |
||||
|
border-radius: 10rpx; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.quantity { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
line-height: 1; |
||||
|
padding: 6rpx 4rpx 6rpx 8rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #fff; |
||||
|
border-radius: 10rpx 0 0 0; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
} |
||||
|
|
||||
|
.meta { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
height: 80rpx; |
||||
|
font-size: 26rpx; |
||||
|
color: #444; |
||||
|
} |
||||
|
|
||||
|
.type { |
||||
|
line-height: 1.8; |
||||
|
padding: 0 15rpx; |
||||
|
margin-top: 10rpx; |
||||
|
font-size: 24rpx; |
||||
|
align-self: flex-start; |
||||
|
border-radius: 4rpx; |
||||
|
color: #888; |
||||
|
background-color: #f7f7f8; |
||||
|
} |
||||
|
|
||||
|
.more { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 22rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.payment { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
line-height: 1; |
||||
|
padding: 20rpx 0; |
||||
|
text-align: right; |
||||
|
color: #999; |
||||
|
font-size: 28rpx; |
||||
|
border-bottom: 1rpx solid #eee; |
||||
|
|
||||
|
.quantity { |
||||
|
font-size: 24rpx; |
||||
|
margin-right: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.amount { |
||||
|
color: #444; |
||||
|
margin-left: 6rpx; |
||||
|
} |
||||
|
|
||||
|
.symbol { |
||||
|
font-size: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.action { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
padding-top: 20rpx; |
||||
|
|
||||
|
.button { |
||||
|
width: 180rpx; |
||||
|
height: 60rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-left: 20rpx; |
||||
|
border-radius: 60rpx; |
||||
|
border: 1rpx solid #ccc; |
||||
|
font-size: 26rpx; |
||||
|
color: #444; |
||||
|
} |
||||
|
|
||||
|
.secondary { |
||||
|
color: #27ba9b; |
||||
|
border-color: #27ba9b; |
||||
|
} |
||||
|
|
||||
|
.primary { |
||||
|
color: #fff; |
||||
|
background-color: #27ba9b; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.loading-text { |
||||
|
text-align: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
padding: 20rpx 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue