Skip to content

S
singleStore
Commit 21220c8d authored by June's avatar June
Browse files
Options

feat: 订单列表ui，订单详情ui；fixed: step数量组件默认最小值

parent 5d9e1f63
Hide whitespace changes
Inline Side-by-side
Showing with 263 additions and 18 deletions
components/goods-popup/index.vue
View file @ 21220c8d
......@@ -24,8 +24,7 @@
<view class="flex-1">{{item.spec_str}}</view>
<view class="step-wrap">
<input-number
:defaultVal="item.origin_number_sku ? item.origin_number_sku : item.counts"
:min="item.origin_number_sku"
:defaultVal="item.counts"
:params="{
index
}"
......
pages.json
View file @ 21220c8d
{
"pages": [
{
"path": "pages/order/order-detail",
"style": {
"navigationBarTitleText": "订单详情"
}
},
{
"path": "pages/home/index",
"style": {
......@@ -36,15 +41,15 @@
}
},
{
"path": "pages/order/order-list",
"path": "pages/goods/detail",
"style": {
"navigationBarTitleText": "订单管理"
"navigationStyle": "custom"
}
},
{
"path": "pages/goods/detail",
"path": "pages/order/order-list",
"style": {
"navigationStyle": "custom"
"navigationBarTitleText": "订单管理"
}
},
{
......
pages/order/order-detail.vue 0 → 100644
View file @ 21220c8d
<template>
<view class="wrapper">
<view class="order-status w-100">
d
</view>
<view class="goods w-100 mt-2">
<view class="goods-item">
<view class="flex j-start a-center">
<image class="cover" src="/static/images/common/bg.png" mode="aspectFit"></image>
<view class="title flex-1">text</view>
</view>
<view class="mt-2">1</view>
<view class="mt-2">1</view>
<view class="mt-2 flex j-between a-center">
<text>1</text>
<text class="primary">小计：￥9999.99</text>
</view>
</view>
</view>
<view class="wrap mt-2 flex j-end a-center">
合计：<text class="primary">3</text><text class="mr-2">件</text>合计：<text class="primary">￥9999.99</text>
</view>
<view class="mt-2 box">
<view>商家派送: 商家自行派送<text class="primary">联系商家</text></view>
<view class="my-2">派送地址: 广东省广州市荔湾区那那那街这这这大厦多少 多少户</view>
<view>
<text class="mr-2">小格</text>
<text>188 1818 1888</text>
</view>
</view>
<view class="wrap mt-2">发票: 发票信息参数（文字/图片等）</view>
<view class="mt-2 box">
<view class="item w-100 flex j-start a-center">
<view class="hd">订单编号：</view>
<view class="flex-1 flex j-between a-center">
<text>1</text>
<text class="primary">2</text>
</view>
</view>
<view class="item w-100 flex j-start a-center">
<view class="hd">订单编号：</view>
<view class="flex-1">
<text>1</text>
</view>
</view>
</view>
<view class="btn-wrap mt-2 flex j-end a-center">
<view class="btn cancle">111111</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.wrapper {
.order-status {
padding: 24rpx 30rpx;
color: #fff;
background-color: $primary;
}
.goods {
background-color: #fff;
border-bottom: 1rpx solid $line;
&:last-child {
border-bottom: none;
}
.goods-item {
@include borderBox(20rpx, 30rpx);
.cover {
flex: 0 0 160rpx;
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
}
}
}
.primary {
color: $primary;
}
.wrap {
padding: 24rpx 30rpx;
background-color: #fff;
}
.box {
@include borderBox(20rpx, 30rpx);
background-color: #fff;
.item {
margin-bottom: 20rpx;
&:last-child {
border-bottom: none;
}
.hd {
flex: 0 0 140rpx;
}
}
}
.btn-wrap {
box-sizing: border-box;
padding: 0 30rpx;
width: 100%;
height: 88rpx;
background-color: #fff;
.btn {
@include borderBox(16rpx, 34rpx);
border-radius: 8rpx;
}
.cancle {
border: 1rpx solid $line;
background-color: #fff;
}
.pay {
color: #fff;
background-color: $primary;
}
}
}
</style>
pages/order/order-list.vue
View file @ 21220c8d
......@@ -14,7 +14,57 @@
<view class="list-wrap">
<pull-list
refresherEnabled
></pull-list>
>
<view class="w-100 list-item">
<view class="w-100 item-inner">
<view class="w-100 mb-2">
<view class="flex j-between a-center">
<text class="order-item">time</text>
<text class="order-status">status</text>
</view>
<view class="flex j-start a-center">
<image class="cover" src="/static/images/common/bg.png" mode="aspectFit"></image>
<view class="goods-info flex-1 flex j-between flex-column">
<view class="title">title</view>
<view class="desc">12</view>
<view class="w-100 flex j-between a-center">
<text class="price">￥5555</text>
<text class="desc">x1</text>
</view>
</view>
</view>
</view>
<view class="w-100 mb-2">
<view class="flex j-between a-center">
<text class="order-item">time</text>
<text class="order-status">status</text>
</view>
<view class="flex j-start a-center">
<image class="cover" src="/static/images/common/bg.png" mode="aspectFit"></image>
<view class="goods-info flex-1 flex j-between flex-column">
<view class="title">title</view>
<view class="desc">12</view>
<view class="w-100 flex j-between a-center">
<text class="price">￥5555</text>
<text class="desc">x1</text>
</view>
</view>
</view>
</view>
</view>
<view class="order-info">
<view class="w-100 flex j-end a-center mb-2">
<text class="mr-2">共<text class="primary">3</text>件</text>
<text class="primary">￥333</text>
</view>
<view class="w-100 flex j-end a-center">
<view class="btn ml-2 cancle">取消订单</view>
<view class="btn ml-2 pay">立即支付</view>
</view>
</view>
</view>
</pull-list>
</view>
</view>
</template>
......@@ -74,24 +124,33 @@ export default {
.order-wrap {
height: 100vh;
.tab-wrap {
height: 98rpx;
height: 88rpx;
white-space:nowrap;
border-top: 1rpx solid $line;
border-bottom: 1rpx solid $line;
background-color: #fff;
.tab-item {
height: 98rpx;
line-height: 98rpx;
width: 198rpx;
height: 88rpx;
line-height: 88rpx;
text-align: center;
position: relative;
display: inline-block;
}
.tab_active {
color: red;
color: $primary;
font-weight: 600;
&::after {
position: absolute;
left: 0;
bottom: 0;
display: inline-block;
content: "";
width: 100%;
position: absolute;
left: 50%;
bottom: 2rpx;
transform: translateX(-50%);
z-index: 5;
width: 198rpx;
height: 4rpx;
background-color: blue;
background-color: $primary;
}
}
}
......@@ -99,8 +158,59 @@ export default {
.list-wrap {
width: 100%;
height: calc(100vh - 98rpx);
background-color: yellow;
overflow: hidden;
.list-item {
margin-top: 20rpx;
background-color: $white;
.item-inner {
@include borderBox(20rpx, 30rpx);
border-bottom: 1rpx solid $line;
.order-item {
font-size: 24rpx;
color: $desc;
}
.order-status {
font-size: 24rpx;
color: $primary;
}
.cover {
flex: 0 0 160rpx;
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
}
.goods-info {
height: 160rpx;
.title {
@include text-ellipsis(2);
}
.desc {
color: $desc;
}
.price {
color: $primary;
}
}
}
.order-info {
@include borderBox(20rpx, 30rpx);
.primary {
color: $primary;
}
.btn {
@include borderBox(16rpx, 34rpx);
border-radius: 8rpx;
}
.cancle {
border: 1rpx solid $line;
background-color: #fff;
}
.pay {
color: #fff;
background-color: $primary;
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment