6 changed files with 478 additions and 1 deletions
-
157src/components/order_list/mall/mall.vue
-
8src/pages.json
-
6src/pages/order_list/order_list.vue
-
152src/subpackage/order/pages/mall/refund_list/refund_list.vue
-
155src/subpackage/order/pages/mall/refund_operate/refund_operate.vue
-
1src/subpackage/order/pages/mall/send_out/send_out.vue
@ -0,0 +1,157 @@ |
|||
<template> |
|||
<view class="mall-order"> |
|||
<view class="mo-num"> |
|||
<view class="mn-view">订单号：sh20201111152456789</view> |
|||
<view class="mn-view">待发货</view> |
|||
</view> |
|||
<view class="mo-goods-ls"> |
|||
<view class="rgi-list" v-if="false"> |
|||
<view class="rl-item" v-for="i in 3" :key="i"> |
|||
<image class="ri-img"></image> |
|||
<view class="ri-view">克洛羽毛球…</view> |
|||
</view> |
|||
</view> |
|||
<view class="rgi-single"> |
|||
<image class="rs-img"></image> |
|||
<view class="rs-view">克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛球比赛用</view> |
|||
</view> |
|||
<view class="rgi-total"><text>共3件</text><image class="rt-img"></image></view> |
|||
</view> |
|||
<view class="mo-total"><text class="mt-txt">商品金额合计：</text>¥239.6</view> |
|||
<view class="mo-bot"> |
|||
<view class="mb-express">配送方式：快递</view> |
|||
<view class="mb-btn">发货</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.mall-order{ |
|||
background-color: #fff; |
|||
padding: 30upx 20upx; |
|||
border-radius: 10upx; |
|||
|
|||
} |
|||
.mo-num{ |
|||
margin-bottom: 20upx; |
|||
@include centerFlex(space-between); |
|||
.mn-view{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
color: #1A1A1A; |
|||
@include textHide(1); |
|||
} |
|||
&+.mn-view{ |
|||
flex-shrink: 0; |
|||
max-width: 30%; |
|||
color: $themeColor; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
.mo-goods-ls{ |
|||
margin-bottom: 30upx; |
|||
@include centerFlex(space-between); |
|||
.rgi-list{ |
|||
display: flex; |
|||
.rl-item{ |
|||
flex-shrink: 0; |
|||
.ri-img{ |
|||
margin-bottom: 6upx; |
|||
width: 152upx; |
|||
height: 152upx; |
|||
border-radius: 10upx; |
|||
background-color: skyblue; |
|||
|
|||
} |
|||
.ri-view{ |
|||
width: 152upx; |
|||
line-height: 34upx; |
|||
font-size: 24upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
&:not(:last-child){ |
|||
margin-right: 20upx; |
|||
} |
|||
} |
|||
} |
|||
.rgi-single{ |
|||
margin-right: 34upx; |
|||
display: flex; |
|||
align-items: flex-start; |
|||
.rs-img{ |
|||
flex-shrink: 0; |
|||
margin-right: 22upx; |
|||
width: 152upx; |
|||
height: 152upx; |
|||
border-radius: 10upx; |
|||
background-color: skyblue; |
|||
} |
|||
.rs-view{ |
|||
@include textHide(3); |
|||
font-size: 24upx; |
|||
line-height: 34upx; |
|||
color: #1a1a1a; |
|||
} |
|||
} |
|||
.rgi-total{ |
|||
flex-shrink: 0; |
|||
line-height: 34upx; |
|||
font-size: 24upx; |
|||
color: #9a9a9d; |
|||
.rt-img{ |
|||
margin-left: 8upx; |
|||
vertical-align: middle; |
|||
width: 30upx; |
|||
height: 30upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
} |
|||
.mo-total{ |
|||
margin-bottom: 30upx; |
|||
font-size: 24upx; |
|||
line-height: 34upx; |
|||
text-align: right; |
|||
color: #1a1a1a; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
.mt-txt{ |
|||
color: #9A9A9D; |
|||
} |
|||
} |
|||
.mo-bot{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
.mb-express{ |
|||
font-size: 24upx; |
|||
line-height: 34upx; |
|||
color: #9A9A9D; |
|||
@include textHide(1); |
|||
} |
|||
.mb-btn{ |
|||
flex-shrink: 0; |
|||
margin-left: 20upx; |
|||
width: 190upx; |
|||
line-height: 80upx; |
|||
text-align: center; |
|||
border-radius: 10upx; |
|||
font-size: 32upx; |
|||
color: #fff; |
|||
background-color: $themeColor; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,152 @@ |
|||
<template> |
|||
<view class="refund-list"> |
|||
<view class="rl-num">订单编号 sc20 0822 0815 6894</view> |
|||
<view class="rl-tit">请选择商品发货</view> |
|||
<view class="rl-goods-list"> |
|||
<view class="rgl-item" v-for="i in 3" :key="i"> |
|||
<view class="ri-icon"></view> |
|||
<image class="ri-img"></image> |
|||
<view class="ri-info"> |
|||
<view class="ri-name">克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛球比赛用</view> |
|||
<view class="ri-spec"><view>比赛专用；黑色</view><view>×1</view></view> |
|||
<view class="ri-price">实付：¥<text>59.9</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="rl-fixed-bar"> |
|||
<view class="rfb-select"> |
|||
<view></view> |
|||
<view>全选</view> |
|||
</view> |
|||
<div class="rfb-btn">下一步</div> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.refund-list{ |
|||
padding: 40upx 24upx; |
|||
.rl-num{ |
|||
margin-bottom: 34upx; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
} |
|||
.rl-tit{ |
|||
margin-bottom: 20upx; |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
line-height: 44upx; |
|||
color: #1a1a1a; |
|||
} |
|||
.rl-goods-list{ |
|||
padding: 20upx 0; |
|||
background-color: #fff; |
|||
.rgl-item{ |
|||
padding: 20upx; |
|||
@include centerFlex(space-between); |
|||
.ri-icon{ |
|||
margin-right: 20upx; |
|||
flex-shrink: 0; |
|||
width: 32upx; |
|||
height: 32upx; |
|||
border-radius: 50%; |
|||
box-shadow: 0 0 0 2upx #9A9A9D; |
|||
} |
|||
.ri-img{ |
|||
margin-right: 20upx; |
|||
width: 180upx; |
|||
height: 180upx; |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
border-radius: 10upx; |
|||
background-color: skyblue; |
|||
} |
|||
.ri-info{ |
|||
flex-grow: 1; |
|||
.ri-name{ |
|||
margin-bottom: 12upx; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
@include textHide(2); |
|||
} |
|||
.ri-spec{ |
|||
margin-bottom: 4upx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
font-size: 24upx; |
|||
line-height: 34upx; |
|||
color: #9a9a9d; |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
@include textHide(1); |
|||
} |
|||
&+view{ |
|||
flex-shrink: 0; |
|||
max-width: 20%; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
.ri-price{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #FF873D; |
|||
@include textHide(1); |
|||
>text{ |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.rl-fixed-bar{ |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
background-color: #f2f2f7; |
|||
padding: 10upx 24upx; |
|||
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
.rfb-select{ |
|||
margin-bottom: 34upx; |
|||
@include centerFlex(flex-start); |
|||
>view{ |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
margin-right: 20upx; |
|||
width: 32upx; |
|||
height: 32upx; |
|||
border-radius: 50%; |
|||
box-shadow: 0 0 0 2upx #dadada; |
|||
} |
|||
&+view{ |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.rfb-btn{ |
|||
line-height: 112upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
border-radius: 10upx; |
|||
background-color: $themeColor; |
|||
color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue