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

add order

account
刘嘉炜 4 years ago
parent
27a49382bf
commit
603e7ad4b1
6 changed files with 478 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 157
      src/components/order_list/mall/mall.vue
  2. 8
      src/pages.json
  3. 6
      src/pages/order_list/order_list.vue
  4. 152
      src/subpackage/order/pages/mall/refund_list/refund_list.vue
  5. 155
      src/subpackage/order/pages/mall/refund_operate/refund_operate.vue
  6. 1
      src/subpackage/order/pages/mall/send_out/send_out.vue

157
src/components/order_list/mall/mall.vue
View File

@ -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>

8
src/pages.json
View File

@ -390,9 +390,15 @@
"root": "subpackage/order", "root": "subpackage/order",
"pages": [ "pages": [
{ {
"path": "pages/mall/refund_list/refund_list",
"style" : {
"navigationBarTitleText": "退款"
}
},
{
"path": "pages/mall/refund_operate/refund_operate", "path": "pages/mall/refund_operate/refund_operate",
"style" : { "style" : {
"navigationBarTitleText": "查看物流"
"navigationBarTitleText": "退款"
} }
}, },
{ {

6
src/pages/order_list/order_list.vue
View File

@ -61,11 +61,15 @@
</view> </view>
<view class="ool-item"> <view class="ool-item">
<mall></mall>
</view>
<view class="ool-item">
<locker></locker> <locker></locker>
</view> </view>
<view class="ool-item"> <view class="ool-item">
<rent-and-sale></rent-and-sale> <rent-and-sale></rent-and-sale>
</view> </view>
<!-- <view class="ool-item"> <!-- <view class="ool-item">
<spectacular-monent></spectacular-monent> <spectacular-monent></spectacular-monent>
</view> </view>
@ -131,6 +135,7 @@
import club_rental from '../../components/order_list/club_rental/club_rental.vue'; import club_rental from '../../components/order_list/club_rental/club_rental.vue';
import locker from '../../components/order_list/locker/locker.vue'; import locker from '../../components/order_list/locker/locker.vue';
import rent_and_sale from '../../components/order_list/rent_and_sale/rent_and_sale.vue'; import rent_and_sale from '../../components/order_list/rent_and_sale/rent_and_sale.vue';
import mall from '../../components/order_list/mall/mall.vue';
import util from '../../utils/util'; import util from '../../utils/util';
import { servers } from '../../js/server'; import { servers } from '../../js/server';
@ -152,6 +157,7 @@
'club-rental': club_rental, 'club-rental': club_rental,
'locker': locker, 'locker': locker,
'rent-and-sale': rent_and_sale, 'rent-and-sale': rent_and_sale,
'mall': mall,
}, },
computed:{ computed:{
isStoreInfo(){ isStoreInfo(){

152
src/subpackage/order/pages/mall/refund_list/refund_list.vue
View File

@ -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>

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

@ -1,6 +1,34 @@
<template> <template>
<view class="refund-operate"> <view class="refund-operate">
<view class="ro-num">订单编号 sc20 0822 0815 6894</view> <view class="ro-num">订单编号 sc20 0822 0815 6894</view>
<view class="ro-box ro-goods-info">
<view class="rgi-list" v-if="false">
<view class="rl-item" v-for="i in 3" :key="i">
<image></image>
<view>克洛羽毛球…</view>
</view>
</view>
<view class="rgi-single">
<image></image>
<view>克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛球比赛用</view>
</view>
<view class="rgi-total"><text>共3件</text><image></image></view>
</view>
<view class="ro-box ro-refund-info">
<view class="rri-txt">最大可退金额 <text>￥179.7</text>（含运费￥0）</view>
<view class="rri-txt">可退积分：100积分</view>
<view class="rri-line">
<view class="rl-name"><text>*</text>退款金额</view>
<view class="rl-frame"><input /></view>
</view>
<view class="rri-line">
<view class="rl-name"><text>*</text>回退积分</view>
<view class="rl-frame"><input /></view>
</view>
</view>
<view class="ro-bar">
<view>确定</view>
</view>
</view> </view>
</template> </template>
@ -14,6 +42,8 @@ export default {
@import '~style/public.scss'; @import '~style/public.scss';
.refund-operate{ .refund-operate{
padding: 40upx 24upx 140upx; padding: 40upx 24upx 140upx;
padding-bottom: calc( 140upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 140upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
.ro-num{ .ro-num{
margin-bottom: 40upx; margin-bottom: 40upx;
font-size: 28upx; font-size: 28upx;
@ -22,4 +52,129 @@ export default {
@include textHide(1); @include textHide(1);
} }
} }
.ro-box{
margin-bottom: 24upx;
padding: 30upx 20upx;
border-radius: 10upx;
background-color: #fff;
}
.ro-goods-info{
@include centerFlex(space-between);
.rgi-total{
flex-shrink: 0;
line-height: 34upx;
font-size: 24upx;
color: #9a9a9d;
>image{
margin-left: 8upx;
vertical-align: middle;
width: 30upx;
height: 30upx;
background-color: skyblue;
}
}
.rgi-list{
display: flex;
.rl-item{
flex-shrink: 0;
>image{
margin-bottom: 6upx;
width: 152upx;
height: 152upx;
border-radius: 10upx;
background-color: skyblue;
}
>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;
>image{
flex-shrink: 0;
margin-right: 22upx;
width: 152upx;
height: 152upx;
border-radius: 10upx;
background-color: skyblue;
}
>view{
@include textHide(3);
font-size: 24upx;
line-height: 34upx;
color: #1a1a1a;
}
}
}
.ro-refund-info{
.rri-txt{
margin-bottom: 20upx;
font-size: 28upx;
line-height: 40upx;
color: #1a1a1a;
>text{
color: #ff873d;
}
}
.rri-line{
margin-bottom: 30upx;
@include centerFlex(flex-start);
.rl-name{
margin-right: 40upx;
flex-shrink: 0;
font-size: 28upx;
line-height: 40upx;
color: #9A9A9D;
>text{
margin-right: 10upx;
color: #EA5061;
}
}
.rl-frame{
flex-grow: 1;
padding: 0 24upx;
height: 88upx;
border-radius: 10upx;
border: 2upx solid #979797;
>input{
width: 100%;
height: 100%;
font-size: 28upx;
color: #1a1a1a;
}
}
}
}
.ro-bar{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 10upx 24upx;
padding-bottom: 10upx;
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
>view{
line-height: 112upx;
text-align: center;
font-size: 32upx;
color: #fff;
border-radius: 10upx;
background-color: $themeColor;
}
}
</style> </style>

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

@ -135,6 +135,7 @@ export default {
<style lang='scss'> <style lang='scss'>
@import '~style/public.scss'; @import '~style/public.scss';
.order-send-out{ .order-send-out{
padding-bottom: 140upx;
padding-bottom: calc( 140upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ padding-bottom: calc( 140upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 140upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ padding-bottom: calc( 140upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
} }

Write Preview
Loading…
Cancel
Save