3 changed files with 505 additions and 7 deletions
-
6src/pages.json
-
269src/subpackage/order/pages/mall/detail/detail.vue
-
227src/subpackage/order/pages/mall/send_out/send_out.vue
@ -0,0 +1,227 @@ |
|||||
|
<template> |
||||
|
<view class="order-send-out"> |
||||
|
<view class="oso-header"> |
||||
|
<view class="oh-tit">收货人信息</view> |
||||
|
<view class="oh-mode">配送方式：快递</view> |
||||
|
<view class="oh-name">李晓娜<text>18087690993</text></view> |
||||
|
<view class="oh-addr">广东省广州市白云区丛云路万事达广场A302</view> |
||||
|
</view> |
||||
|
<view class="oh-tab"> |
||||
|
<view class="ot-item"> |
||||
|
<view class="active"> |
||||
|
<view class="oi-txt">待发货</view> |
||||
|
<view class="oi-num">999</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ot-item"> |
||||
|
<view> |
||||
|
<view class="oi-txt">待发货</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="oh-section"> |
||||
|
<!-- 待发货 --> |
||||
|
<view class="os-wait"> |
||||
|
<view class="oh-box ow-goods"> |
||||
|
<view class="og-header"> |
||||
|
<view class="oh-tit"><text>*</text>请选择商品发货</view> |
||||
|
<view class="oh-select"> |
||||
|
<view>全选</view> |
||||
|
<view></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="og-list"> |
||||
|
<view class="ol-item"> |
||||
|
<view class="oi-select"></view> |
||||
|
<image></image> |
||||
|
<view class="oi-info"> |
||||
|
<view class="oi-tit">克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛球比赛用</view> |
||||
|
<view class="oi-spec">比赛专用；黑色</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 已发货 --> |
||||
|
<view class="os-yet"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss'> |
||||
|
@import '~style/public.scss'; |
||||
|
.order-send-out{ |
||||
|
|
||||
|
} |
||||
|
.oso-header{ |
||||
|
margin-bottom: 24upx; |
||||
|
padding: 30upx 44upx 20upx; |
||||
|
background-color: #fff; |
||||
|
.oh-tit{ |
||||
|
margin-bottom: 30upx; |
||||
|
line-height: 44upx; |
||||
|
font-weight: 500; |
||||
|
font-size: 32upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
.oh-mode{ |
||||
|
margin-bottom: 10upx; |
||||
|
line-height: 40upx; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
.oh-name{ |
||||
|
margin-bottom: 6upx; |
||||
|
line-height: 44upx; |
||||
|
font-weight: 500; |
||||
|
font-size: 32upx; |
||||
|
color: #1a1a1a; |
||||
|
@include textHide(1); |
||||
|
>text{ |
||||
|
margin-left: 50upx; |
||||
|
} |
||||
|
} |
||||
|
.oh-addr{ |
||||
|
line-height: 40upx; |
||||
|
font-size: 28upx; |
||||
|
color: #9a9a9d; |
||||
|
@include textHide(2); |
||||
|
} |
||||
|
} |
||||
|
.oh-tab{ |
||||
|
background-color: #fff; |
||||
|
display: flex; |
||||
|
@include centerFlex(flex-start); |
||||
|
.ot-item{ |
||||
|
height: 110upx; |
||||
|
padding: 0 46upx; |
||||
|
>view{ |
||||
|
position: relative; |
||||
|
.oi-txt{ |
||||
|
width: 100%; |
||||
|
line-height: 110upx; |
||||
|
text-align: center; |
||||
|
font-size: 32upx; |
||||
|
color: #9C9C9F; |
||||
|
} |
||||
|
.oi-num{ |
||||
|
position: absolute; |
||||
|
right: -50upx; |
||||
|
top: 22upx; |
||||
|
width: 48upx; |
||||
|
height: 48upx; |
||||
|
line-height: 48upx; |
||||
|
text-align: center; |
||||
|
font-size: 24upx; |
||||
|
border-radius: 50%; |
||||
|
background-color: #EA5061; |
||||
|
color: #fff; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
&.active{ |
||||
|
.oi-txt{ |
||||
|
color: $themeColor; |
||||
|
} |
||||
|
&::after{ |
||||
|
position: absolute; |
||||
|
content: ''; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
height: 8upx; |
||||
|
border-radius: 4upx; |
||||
|
background-color: $themeColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.oh-section{ |
||||
|
padding: 24upx; |
||||
|
.ow-goods{ |
||||
|
.og-header{ |
||||
|
|
||||
|
@include centerFlex(space-between); |
||||
|
.oh-tit{ |
||||
|
line-height: 44upx; |
||||
|
font-weight: 500; |
||||
|
font-size: 32upx; |
||||
|
color: #1a1a1a; |
||||
|
>text{ |
||||
|
color: #EA5061; |
||||
|
} |
||||
|
} |
||||
|
.oh-select{ |
||||
|
flex-shrink: 0; |
||||
|
@include centerFlex(flex-end); |
||||
|
>view{ |
||||
|
&:first-child{ |
||||
|
flex-shrink: 0; |
||||
|
line-height: 40upx; |
||||
|
font-size: 28upx; |
||||
|
color: #9a9a9d; |
||||
|
} |
||||
|
&+view{ |
||||
|
width: 32upx; |
||||
|
height: 32upx; |
||||
|
margin-left: 20upx; |
||||
|
border: 2upx solid #9a9a9d; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.og-list{ |
||||
|
.ol-item{ |
||||
|
padding: 20upx 0; |
||||
|
@include centerFlex(flex-start); |
||||
|
.oi-select{ |
||||
|
flex-shrink: 0; |
||||
|
width: 32upx; |
||||
|
height: 32upx; |
||||
|
border-radius: 50%; |
||||
|
box-shadow: 0 0 0 2upx #9A9A9D; |
||||
|
} |
||||
|
>image{ |
||||
|
flex-shrink: 0; |
||||
|
margin: 0 20upx; |
||||
|
width: 180upx; |
||||
|
height: 180upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
.oi-info{ |
||||
|
align-self: flex-start; |
||||
|
.oi-tit{ |
||||
|
margin-bottom: 12upx; |
||||
|
line-height: 40upx; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
@include textHide(2); |
||||
|
} |
||||
|
.oi-spec{ |
||||
|
line-height: 34upx; |
||||
|
font-size: 24upx; |
||||
|
color: #9a9a9d; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.oh-box{ |
||||
|
margin-bottom: 24upx; |
||||
|
padding: 30upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue