APP
/
ox_zhiNengZhuShou
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add mall order

account
刘嘉炜 4 years ago
parent
ed7dd7158d
commit
27a49382bf
4 changed files with 484 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/pages.json
  2. 92
      src/subpackage/order/pages/mall/check_logistic/check_logistic.vue
  3. 25
      src/subpackage/order/pages/mall/refund_operate/refund_operate.vue
  4. 407
      src/subpackage/order/pages/mall/send_out/send_out.vue

12
src/pages.json
View File

@ -390,6 +390,18 @@
"root": "subpackage/order",
"pages": [
{
"path": "pages/mall/refund_operate/refund_operate",
"style" : {
"navigationBarTitleText": "查看物流"
}
},
{
"path": "pages/mall/check_logistic/check_logistic",
"style" : {
"navigationBarTitleText": "查看物流"
}
},
{
"path": "pages/mall/send_out/send_out",
"style" : {
"navigationBarTitleText": "发货"

92
src/subpackage/order/pages/mall/check_logistic/check_logistic.vue
View File

@ -0,0 +1,92 @@
<template>
<view class="check-logistic">
<view class="package-list">
<view class="pl-item" v-for="i in 2" :key="i">
<view class="pi-tit">包裹1</view>
<view class="pi-express"><view>快递：顺丰速递 SF1090317923085</view><view>复制</view></view>
<view class="pi-goods">
<view class="pg-item" v-for="i in 4" :key="i">
<image></image>
<view>克洛羽毛球…</view>
</view>
</view>
<view class="pi-total">共10件商品</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import '~style/public.scss';
.package-list{
padding: 24upx;
.pl-item{
margin-bottom: 24upx;
padding: 20upx;
border-radius: 10upx;
background-color: #fff;
.pi-tit{
margin-bottom: 30upx;
line-height: 40upx;
font-size: 28upx;
font-weight: 500;
color: #1a1a1a;
}
.pi-express{
margin-bottom: 20upx;
@include centerFlex(flex-start);
>view{
font-size: 28upx;
line-height: 40upx;
color: #1a1a1a;
@include textHide(1);
&+view{
flex-shrink: 0;
margin-left: 20upx;
color: $themeColor;
}
}
}
.pi-goods{
display: flex;
align-items: flex-start;
margin-bottom: 30upx;
.pg-item{
flex-shrink: 0;
flex-grow: 0;
>image{
display: block;
width: 152upx;
height: 152upx;
border-radius: 10upx;
background-color: skyblue;
}
>view{
width: 152upx;
line-height: 34upx;
font-size: 24upx;
color: #1a1a1a;
@include textHide(1);
}
&:not(:last-child){
margin-right: 20upx;
}
}
}
.pi-total{
font-size: 24upx;
line-height: 34upx;
color: #9a9a9d;
@include textHide(1);
}
}
}
</style>

25
src/subpackage/order/pages/mall/refund_operate/refund_operate.vue
View File

@ -0,0 +1,25 @@
<template>
<view class="refund-operate">
<view class="ro-num">订单编号 sc20 0822 0815 6894</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import '~style/public.scss';
.refund-operate{
padding: 40upx 24upx 140upx;
.ro-num{
margin-bottom: 40upx;
font-size: 28upx;
line-height: 40upx;
color: #1a1a1a;
@include textHide(1);
}
}
</style>

407
src/subpackage/order/pages/mall/send_out/send_out.vue
View File

@ -21,7 +21,7 @@
</view>
<view class="oh-section">
<!-- 待发货 -->
<view class="os-wait">
<view class="os-wait" v-if="false">
<view class="oh-box ow-goods">
<view class="og-header">
<view class="oh-tit"><text>*</text>请选择商品发货</view>
@ -41,9 +41,87 @@
</view>
</view>
</view>
<view class="oh-box ow-warehouse">
<view class="oh-tit"><text>*</text>发货仓库</view>
<picker>
<view class="ow-picker">
<input disabled placeholder="请选择发货仓库" />
<image></image>
</view>
</picker>
<view class="ow-tip">商品如果不在同一仓库，请分开发货</view>
</view>
<view class="oh-box ow-logistics">
<view class="oh-tit">发货仓库</view>
<view class="ol-line">
<view class="ol-name"><text>* </text>发货方式</view>
<view class="ol-mode">
<view class="om-item">
<view class="active"></view>
<view>快递</view>
</view>
<view class="om-item">
<view></view>
<view>无需快递</view>
</view>
</view>
</view>
<view class="ol-line">
<view class="ol-name"><text>* </text>物流公司</view>
<view class="ol-company">
<picker>
<view class="oc-ipt-frame">
<input disabled placeholder="请选择物流公司" />
<image></image>
</view>
</picker>
</view>
</view>
<view class="ol-line">
<view class="ol-name"><text>* </text>物流单号</view>
<view class="ol-company">
<view class="oc-ipt-frame">
<input placeholder="请输入物流单号" />
</view>
</view>
</view>
<view class="ol-line">
<view class="ol-name"><text>* </text>备注</view>
<view class="ol-company">
<view class="oc-ipt-frame">
<input placeholder="备注" />
</view>
</view>
</view>
</view>
<cover-view class="ow-btn">
<cover-view class="ob-btn">确认发货</cover-view>
</cover-view>
</view>
<!-- 已发货 -->
<view class="os-yet"></view>
<view class="os-yet" v-if="false">
<view class="package-list">
<view class="pl-item" v-for="i in 2" :key="i">
<view class="pi-tit">包裹1</view>
<view class="pi-express"><view>快递：顺丰速递 SF1090317923085</view><view>复制</view></view>
<view class="pi-goods">
<view class="pg-item" v-for="i in 4" :key="i">
<image></image>
<view>克洛羽毛球…</view>
</view>
</view>
<view class="pi-total">共10件商品</view>
</view>
</view>
</view>
<!-- 没数据 -->
<view class="os-null">
<image></image>
<view>无已发货</view>
</view>
</view>
</view>
</template>
@ -57,7 +135,8 @@ export default {
<style lang='scss'>
@import '~style/public.scss';
.order-send-out{
padding-bottom: calc( 140upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 140upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
}
.oso-header{
margin-bottom: 24upx;
@ -145,83 +224,307 @@ export default {
}
.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-tit{
line-height: 44upx;
font-weight: 500;
font-size: 32upx;
color: #1a1a1a;
>text{
margin-right: 10upx;
color: #EA5061;
}
}
.os-wait{
.ow-goods{
.og-header{
@include centerFlex(space-between);
.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%;
}
}
}
}
.oh-select{
flex-shrink: 0;
@include centerFlex(flex-end);
>view{
&:first-child{
.og-list{
.ol-item{
padding: 20upx 0;
@include centerFlex(flex-start);
.oi-select{
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%;
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);
}
}
}
}
}
.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;
.ow-warehouse{
.oh-tit{
margin-bottom: 24upx;
}
.ow-picker{
padding: 0 20upx;
height: 88upx;
border: 2upx solid #979797;
border-radius: 10upx;
@include centerFlex(space-between);
>input{
flex-grow: 1;
font-size: 28upx;
color: #1a1a1a;
}
>image{
flex-shrink: 0;
margin: 0 20upx;
width: 180upx;
height: 180upx;
border-radius: 10upx;
flex-grow: 0;
margin-left: 20upx;
width: 30upx;
height: 30upx;
background-color: skyblue;
}
.oi-info{
align-self: flex-start;
.oi-tit{
margin-bottom: 12upx;
line-height: 40upx;
}
.ow-tip{
margin-top: 20upx;
line-height: 40upx;
font-size: 28upx;
color: #9A9A9D;
}
}
.ow-logistics{
.oh-tit{
margin-bottom: 50upx
}
.ol-line{
margin-bottom: 30upx;
@include centerFlex(flex-start);
>view+view{
flex-grow: 1;
}
.ol-name{
flex-shrink: 0;
margin-right: 40upx;
font-size: 28upx;
line-height: 40upx;
color: #9A9A9D;
>text{
margin-right: 10upx;
color: #EA5061;
}
}
.ol-mode{
padding: 0 30upx;
@include centerFlex(space-between);
.om-item{
@include centerFlex(flex-start);
>view{
&:first-child{
margin-right: 20upx;
width: 32upx;
height: 32upx;
padding: 4upx;
border: 2upx solid #d8d8d8;
border-radius: 50%;
&::after{
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #d8d8d8;
}
&.active{
border-color: $themeColor;
&::after{
background-color: $themeColor;
}
}
}
&+view{
line-height: 40upx;
font-size: 28upx;
color: #1a1a1a;
}
}
}
}
.ol-company{
.oc-ipt-frame{
padding: 0 20upx;
height: 88upx;
border-radius: 10upx;
border: 2upx solid #979797;
@include centerFlex(space-between);
>input{
flex-grow: 1;
height: 100%;
font-size: 28upx;
color: #333;
}
>image{
flex-shrink: 0;
flex-grow: 0;
margin-left: 20upx;
width: 30upx;
height: 30upx;
background-color: skyblue;
}
}
}
}
}
.ow-btn{
position: fixed;
left: 0;
bottom: 0;
z-index: 10;
width: 100%;
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 */
background-color: #f2f2f7;
border-radius: 10upx;
box-sizing: border-box;
.ob-btn{
box-sizing: border-box;
line-height: 112upx;
text-align: center;
border-radius: 10upx;
font-size: 32upx;
color: #fff;
background-color: $themeColor;
}
}
}
.os-yet{
.package-list{
.pl-item{
margin-bottom: 24upx;
padding: 20upx;
border-radius: 10upx;
background-color: #fff;
.pi-tit{
margin-bottom: 30upx;
line-height: 40upx;
font-size: 28upx;
font-weight: 500;
color: #1a1a1a;
}
.pi-express{
margin-bottom: 20upx;
@include centerFlex(flex-start);
>view{
font-size: 28upx;
line-height: 40upx;
color: #1a1a1a;
@include textHide(2);
}
.oi-spec{
line-height: 34upx;
font-size: 24upx;
color: #9a9a9d;
@include textHide(1);
&+view{
flex-shrink: 0;
margin-left: 20upx;
color: $themeColor;
}
}
}
.pi-goods{
display: flex;
align-items: flex-start;
margin-bottom: 30upx;
.pg-item{
flex-shrink: 0;
flex-grow: 0;
>image{
display: block;
width: 152upx;
height: 152upx;
border-radius: 10upx;
background-color: skyblue;
}
>view{
width: 152upx;
line-height: 34upx;
font-size: 24upx;
color: #1a1a1a;
@include textHide(1);
}
&:not(:last-child){
margin-right: 20upx;
}
}
}
.pi-total{
font-size: 24upx;
line-height: 34upx;
color: #9a9a9d;
@include textHide(1);
}
}
}
}
.os-null{
padding-top: 164upx;
>image{
display: block;
margin: 0 auto 68upx;
width: 260upx;
height: 260upx;
background-color: skyblue;
}
>view{
line-height: 44upx;
text-align: center;
font-size: 32upx;
color: #9a9a9d;
}
}
}
.oh-box{
margin-bottom: 24upx;
padding: 30upx;
border-radius: 10upx;
background-color: #fff;
}
</style>
Write Preview
Loading…
Cancel
Save