front/merchapp
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: 订单详情页

Browse Source
This commit is contained in:
mixtan 2025-07-31 15:35:14 +08:00
parent 66b2c737c5
commit 2cea3d2187
3 changed files with 492 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
java-mall-app-shop-admin/pages.json
View File

@ -91,6 +91,12 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/order/orderInfo",
"style": {
"navigationBarTitleText": "订单详情"
}
},
{
"path": "pages/IM/IM",

652
java-mall-app-shop-admin/pages/order/components/OrderItem.vue
View File

@ -38,24 +38,209 @@
</view>
<view class="goods">
<view class="body">
<view class="info">
<image src="111" mode="aspectFit" class="img" />
<image src="111" mode="aspectFit" class="img" />
<image src="111" mode="aspectFit" class="img" />
<view class="total">共10件商品</view>
<view class="single" v-if="isList">
<view class="body">
<view class="info">
<image src="111" mode="aspectFit" class="img" />
<image src="111" mode="aspectFit" class="img" />
<image src="111" mode="aspectFit" class="img" />
<view class="total">共10件商品</view>
</view>
</view>
<view class="footer">
<view class="text">合计</view>
<view class="prize_type">¥</view>
<view class="prize_num">289.45</view>
</view>
</view>
<view class="footer">
<view class="text">合计</view>
<view class="prize_type">¥</view>
<view class="prize_num">289.45</view>
<view class="list">
<view class="item">
<image src="111" mode="aspectFit" class="img" />
<view class="box">
<view class="tit">新鲜明虾 500g~550/份</view>
<view class="desc">
<view class="total">数量X1</view>
<view class="price">¥29.5/件</view>
</view>
</view>
<view class="counter">
<view class="text">小计</view>
<view class="prize_type">¥</view>
<view class="prize_num">29.5</view>
</view>
</view>
<view class="item">
<image src="111" mode="aspectFit" class="img" />
<view class="box">
<view class="tit">新鲜明虾 500g~550/份</view>
<view class="desc">
<view class="total">数量X1</view>
<view class="price">¥29.5/件</view>
</view>
</view>
<view class="counter">
<view class="text">小计</view>
<view class="prize_type">¥</view>
<view class="prize_num">29.5</view>
</view>
</view>
<view class="item">
<image src="111" mode="aspectFit" class="img" />
<view class="box">
<view class="tit">新鲜明虾 500g~550/份</view>
<view class="desc">
<view class="total">数量X1</view>
<view class="price">¥29.5/件</view>
</view>
</view>
<view class="counter">
<view class="text">小计</view>
<view class="prize_type">¥</view>
<view class="prize_num">29.5</view>
</view>
</view>
<view class="item">
<image src="111" mode="aspectFit" class="img" />
<view class="box">
<view class="tit">新鲜明虾 500g~550/份</view>
<view class="desc">
<view class="total">数量X1</view>
<view class="price">¥29.5/件</view>
</view>
</view>
<view class="counter">
<view class="text">小计</view>
<view class="prize_type">¥</view>
<view class="prize_num">29.5</view>
</view>
</view>
<view class="item">
<image src="111" mode="aspectFit" class="img" />
<view class="box">
<view class="tit">新鲜明虾 500g~550/份</view>
<view class="desc">
<view class="total">数量X1</view>
<view class="price">¥29.5/件</view>
</view>
</view>
<view class="counter">
<view class="text">小计</view>
<view class="prize_type">¥</view>
<view class="prize_num">29.5</view>
</view>
</view>
<view class="item">
<image src="111" mode="aspectFit" class="img" />
<view class="box">
<view class="tit">新鲜明虾 500g~550/份</view>
<view class="desc">
<view class="total">数量X1</view>
<view class="price">¥29.5/件</view>
</view>
</view>
<view class="counter">
<view class="text">小计</view>
<view class="prize_type">¥</view>
<view class="prize_num">29.5</view>
</view>
</view>
<view class="item">
<image src="111" mode="aspectFit" class="img" />
<view class="box">
<view class="tit">新鲜明虾 500g~550/份</view>
<view class="desc">
<view class="total">数量X1</view>
<view class="price">¥29.5/件</view>
</view>
</view>
<view class="counter">
<view class="text">小计</view>
<view class="prize_type">¥</view>
<view class="prize_num">29.5</view>
</view>
</view>
<view class="item">
<image src="111" mode="aspectFit" class="img" />
<view class="box">
<view class="tit">新鲜明虾 500g~550/份</view>
<view class="desc">
<view class="total">数量X1</view>
<view class="price">¥29.5/件</view>
</view>
</view>
<view class="counter">
<view class="text">小计</view>
<view class="prize_type">¥</view>
<view class="prize_num">29.5</view>
</view>
</view>
</view>
</view>
<view class="result">
<view class="cell">
<view class="header"> 商品总额 </view>
<view class="body"> <text>¥</text><text class="total">295</text> </view>
</view>
<view class="cell">
<view class="header"> 配送运费 </view>
<view class="body red"> - ¥5</view>
</view>
<view class="cell">
<view class="header"> 平台佣金 </view>
<view class="body red"> - ¥0.5</view>
</view>
<view class="cell">
<view class="header"> 活动减免 </view>
<view class="body red"> - ¥0.05</view>
</view>
<view class="cell">
<view class="header"> 合计实收 </view>
<view class="body"> ¥<text class="count">295</text> </view>
</view>
</view>
<view class="result">
<view class="cell">
<view class="header"> 订单编号 </view>
<view class="body">
<view class="order_num">3139803842281</view
><view class="btn_copy">复制</view></view
>
</view>
<view class="cell">
<view class="header"> 下单时间 </view>
<view class="body"> 2025/07/29 15:21</view>
</view>
<view class="cell">
<view class="header"> 支付时间 </view>
<view class="body"> 2025/07/29 15:21</view>
</view>
<view class="cell">
<view class="header"> 配送方式 </view>
<view class="body"> 同城 </view>
</view>
<view class="cell">
<view class="header"> 配送单号 </view>
<view class="body">
<view class="order_num">3139803842281</view
><view class="btn_copy">复制</view></view
>
</view>
</view>
<view class="tool">
<view class="header"> 更多订单信息<u-icon name="arrow-down" color="#666" class="icon"></u-icon> </view>
<view class="header">
<template v-if="isList">
更多订单信息<u-icon
name="arrow-down"
color="#666"
class="icon"
></u-icon>
</template>
</view>
<view class="body">
<view class="btn btn_cancel">取消订单</view>
<view class="btn btn_refund">退款</view>
@ -65,7 +250,14 @@
</template>
<script>
export default {};
export default {
props: {
isList: {
type: Boolean,
default: false,
},
},
};
</script>
<style lang="scss" scoped>
@ -77,66 +269,105 @@ export default {};
background: #fff;
font-size: 24rpx;
color: #222;
.expresser {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
.header {
text {
font-size: 48rpx;
.expresser {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
.header {
text {
font-size: 48rpx;
}
}
}
.body {
flex: 1;
padding-left: 24rpx;
position: relative;
.body {
flex: 1;
padding-left: 24rpx;
position: relative;
&::after{
&::after {
position: absolute;
right: 0;
top: 0;
height: 100%;
display: block;
display: block;
content: " ";
width: 1px;
background-image: linear-gradient(to bottom, #000 80%, transparent 20%);
background-size: 100% 16rpx;
opacity: 0.2;
}
.item {
display: flex;
align-items: center;
&.info{
margin-bottom: 8rpx;
background-image: linear-gradient(to bottom, #000 80%, transparent 20%);
background-size: 100% 16rpx;
opacity: 0.2;
}
.time {
color: rgba(34, 34, 34, 0.9);
}
.name {
font-weight: bold;
.item {
display: flex;
align-items: center;
&::before {
display: block;
content: " ";
width: 36rpx;
height: 36rpx;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6rpx;
margin-right: 12rpx;
background: url("@/static/icon_mt.png") no-repeat 50% 50%;
background-size: 28rpx 28rpx;
&.info {
margin-bottom: 8rpx;
}
.time {
color: rgba(34, 34, 34, 0.9);
}
.name {
font-weight: bold;
display: flex;
align-items: center;
&::before {
display: block;
content: " ";
width: 36rpx;
height: 36rpx;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6rpx;
margin-right: 12rpx;
background: url("@/static/icon_mt.png") no-repeat 50% 50%;
background-size: 28rpx 28rpx;
}
}
.btn_call {
display: flex;
align-items: center;
margin-left: 24rpx;
&::before {
display: block;
content: " ";
width: 32rpx;
height: 32rpx;
background: url("@/static/icon_phone.png") no-repeat;
background-size: 100%;
}
}
}
}
.footer {
width: 228rpx;
.status {
text-align: center;
font-size: 28rpx;
font-weight: bold;
}
}
}
.user {
margin-bottom: 24rpx;
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12rpx;
.info {
display: flex;
align-items: center;
.name {
font-size: 28rpx;
font-weight: bold;
}
}
.btn_call {
display: flex;
align-items: center;
margin-left: 24rpx;
&::before {
display: block;
content: " ";
@ -147,155 +378,208 @@ export default {};
}
}
}
}
.footer{
width: 228rpx;
.status{
text-align: center;
font-size: 28rpx;
font-weight: bold;
.body {
display: flex;
justify-content: space-between;
align-items: center;
.btn_map {
width: 36rpx;
height: 36rpx;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6rpx;
background: url("@/static/icon_map.png") no-repeat 50% 50%;
background-size: 28rpx 28rpx;
}
.box {
padding-left: 40rpx;
}
}
.footer {
.info {
margin: 16rpx 0 24rpx;
background: rgba(254, 247, 234, 0.5);
padding: 12rpx 24rpx;
border-radius: 8rpx;
text {
color: #ff801f;
display: inline-block;
margin-right: 12rpx;
}
}
&::after {
display: block;
content: " ";
height: 1px;
background-image: linear-gradient(to right, #000 50%, transparent 20%);
background-size: 16rpx 100%;
opacity: 0.2;
}
}
}
}
.user {
margin-bottom: 24rpx;
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12rpx;
.info {
.goods {
margin-bottom: 24rpx;
.single {
display: flex;
justify-content: space-between;
align-items: center;
.body {
display: flex;
align-items: center;
.info {
display: flex;
align-items: center;
}
.img {
width: 96rpx;
height: 96rpx;
margin-right: 12rpx;
border-radius: 10rpx;
background: #666;
}
}
.footer {
display: flex;
align-items: baseline;
line-height: 36rpx;
.text {
color: #666;
}
.prize_type {
margin-left: 14rpx;
}
.prize_num {
font-size: 28rpx;
}
}
}
.list {
margin-bottom: 24rpx;
.item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
.img {
width: 96rpx;
height: 96rpx;
border-radius: 10rpx;
background: #666;
}
.box {
flex: 1;
padding: 0 24rpx;
.desc {
display: flex;
color: #666;
padding-top: 8rpx;
.total {
margin-right: 24rpx;
}
}
}
.counter {
display: flex;
justify-content: flex-end;
align-items: baseline;
min-width: 156rpx;
.prize_type {
font-weight: bold;
padding-left: 12rpx;
}
.prize_num {
font-size: 28rpx;
font-weight: bold;
}
}
}
}
}
.result {
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 24rpx;
.cell {
color: #666666;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
.body{
display: flex;
align-items: center;
.name {
}
.red {
color: #fe411b;
}
text {
color: #222;
}
.total {
font-size: 28rpx;
font-weight: bold;
}
}
.btn_call {
display: flex;
.count {
font-size: 36rpx;
font-weight: bold;
}
.order_num {
display: flex;
align-items: center;
&::before {
display: block;
content: " ";
width: 32rpx;
height: 32rpx;
background: url("@/static/icon_phone.png") no-repeat;
background-size: 100%;
&::after {
display: block;
content: " ";
width: 1px;
height: 24rpx;
margin: 0 12rpx;
background: #ccc;
}
}
}
}
.body {
.tool {
display: flex;
justify-content: space-between;
align-items: center;
.btn_map {
width: 36rpx;
height: 36rpx;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6rpx;
background: url("@/static/icon_map.png") no-repeat 50% 50%;
background-size: 28rpx 28rpx;
}
.box{
padding-left: 40rpx;
}
}
.footer{
.info{
margin: 16rpx 0 24rpx;
background: rgba(254, 247, 234, 0.5);
padding: 12rpx 24rpx;
border-radius: 8rpx;
text{
color: #FF801F;
display: inline-block;
margin-right: 12rpx;
}
}
&::after{
display: block;
content: " ";
height: 1px;
background-image: linear-gradient(to right, #000 50%, transparent 20%);
background-size: 16rpx 100%;
opacity: 0.2;
}
}
}
.goods {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
.body {
display: flex;
align-items: center;
.info {
.header {
color: #666;
display: flex;
align-items: center;
.icon {
margin-left: 8rpx;
}
}
.img {
width: 96rpx;
height: 96rpx;
margin-right: 12rpx;
border-radius: 10rpx;
background: #666;
}
}
.footer {
display: flex;
align-items: baseline;
line-height: 36rpx;
.text{
color: #666;
}
.prize_type{
margin-left: 14rpx;
}
.prize_num {
font-size: 36rpx;
.body {
display: flex;
justify-content: space-between;
align-items: center;
.btn {
width: 132rpx;
height: 48rpx;
line-height: 48rpx;
text-align: center;
border: 1px solid #666;
border-radius: 8rpx;
margin-left: 24rpx;
}
.btn_refund {
border-color: $base-color;
color: $base-color;
}
}
}
}
.tool {
display: flex;
justify-content: space-between;
align-items: center;
.header{
color: #666;
display: flex;
align-items: center;
.icon{
margin-left: 8rpx;
}
}
.body {
display: flex;
justify-content: space-between;
align-items: center;
.btn{
width: 132rpx;
height: 48rpx;
line-height: 48rpx;
text-align: center;
border: 1px solid #666;
border-radius: 8rpx;
margin-left: 24rpx;
}
.btn_refund{
border-color: $base-color;
color: $base-color;
}
}
}
}
</style>

18
java-mall-app-shop-admin/pages/order/orderInfo.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<view class="order_info">
<OrderItem></OrderItem>
</view>
</template>
<script>
import OrderItem from "./components/OrderItem.vue";
export default {
components: {
OrderItem,
},
}
</script>
<style lang="scss" scoped>
</style>