From b2920edd2e328124758db10dbf4af57272693a01 Mon Sep 17 00:00:00 2001
From: li-guang <153605324@qq.com>
Date: Thu, 17 Dec 2020 16:38:22 +0800
Subject: [PATCH] 订单当前客户页面
---
hive-app/App.vue | 2
hive-app/common/styles/index.css | 6 +-
hive-app/static/images/product.jpg | 0
hive-app/pages/workbench/submitSucceed.vue | 10 ++---
hive-app/pages/workbench/selectProduct.vue | 82 +++++++++++++++++++++++++++++++++--------
5 files changed, 74 insertions(+), 26 deletions(-)
diff --git a/hive-app/App.vue b/hive-app/App.vue
index 0d223b2..f86b1fa 100644
--- a/hive-app/App.vue
+++ b/hive-app/App.vue
@@ -16,5 +16,5 @@
/*每个页面公共css */
@import url("./common/styles/index");
@import url("./static/iconfont/iconfont.css");
-@import url("//at.alicdn.com/t/font_2263696_m22p50f3dmd.css");
+@import url("//at.alicdn.com/t/font_2263696_ummufxkzv9r.css");
</style>
diff --git a/hive-app/common/styles/index.css b/hive-app/common/styles/index.css
index 29c647f..929a894 100644
--- a/hive-app/common/styles/index.css
+++ b/hive-app/common/styles/index.css
@@ -190,13 +190,13 @@
}
/* 蓝色圆形加减按钮 */
.blue-btn-circle{
- width: 30px;
- height: 30px;
+ width: 20px;
+ height: 20px;
display: flex;
align-items: center;
justify-content: center;
- border-radius: 50%;
background: #518EFF;
+ border-radius: 4px;
color: #FFFFFF;
}
diff --git a/hive-app/pages/workbench/selectProduct.vue b/hive-app/pages/workbench/selectProduct.vue
index 0e9dd98..51308ab 100644
--- a/hive-app/pages/workbench/selectProduct.vue
+++ b/hive-app/pages/workbench/selectProduct.vue
@@ -12,29 +12,41 @@
</view>
</scroll-view>
<scroll-view class="list-right" scroll-y>
- <view class="flex flex-v list-right-row">
- <text class="flex justify-start font-14">肽妍氨基酸平衡基础洁面乳</text>
- <text class="flex justify-start font-14 red mt-10">￥400.00</text>
- <view class="flex align-center justify-end mt-10">
- <button class="blue-btn-circle mr-10">-</button>
- <text>1</text>
- <button class="blue-btn-circle ml-10 mr-0">+</button>
+ <view class="flex align-center list-right-row">
+ <image class="product-img mr-5" mode="aspectFill" src="../../static/images/product.jpg"></image>
+ <view>
+ <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
+ <text class="font-10 gray flex justify-start">物品描述</text>
+ <view class="flex justify-between align-center mt-15">
+ <text class="flex justify-start font-12 red mt-10">￥400.00</text>
+ <view class="flex align-center justify-end mt-10">
+ <text class="blue-btn-circle mr-10">-</text>
+ <text class="font-12">1</text>
+ <text class="blue-btn-circle ml-10 mr-0">+</text>
+ </view>
+ </view>
</view>
</view>
- <view class="flex flex-v list-right-row">
- <text class="flex justify-start font-14">肽妍氨基酸平衡基础洁面乳</text>
- <text class="flex justify-start font-14 red mt-10">￥400.00</text>
- <view class="flex align-center justify-end mt-10">
- <button class="blue-btn-circle mr-10">-</button>
- <text>1</text>
- <button class="blue-btn-circle ml-10 mr-0">+</button>
+ <view class="flex align-center list-right-row">
+ <image class="product-img mr-5" mode="aspectFill" src="../../static/images/product.jpg"></image>
+ <view>
+ <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
+ <text class="font-10 gray flex justify-start">物品描述</text>
+ <view class="flex justify-between align-center mt-15">
+ <text class="flex justify-start font-12 red mt-10">￥400.00</text>
+ <view class="flex align-center justify-end mt-10">
+ <text class="blue-btn-circle mr-10">-</text>
+ <text class="font-12">1</text>
+ <text class="blue-btn-circle ml-10 mr-0">+</text>
+ </view>
+ </view>
</view>
</view>
</scroll-view>
</view>
<view class="shopping flex align-center justify-between">
<view class="flex align-center">
- <view class="shopping-icon iconfont icongouwuche gray">
+ <view class="shopping-icon iconfont icongouwuche gray" @click="openShoppingCart">
<view class="shopping-icon-num flex align-center justify-center">
<text class="font-10">19</text>
</view>
@@ -43,14 +55,31 @@
</view>
<button class="blue-btn btn mr-0" @click="linkTo('./confirmOrder')">提交订单</button>
</view>
+ <uni-popup ref="popup" type="bottom">
+ <view class="popup-content">
+ <view class="popup-header flex justify-between">
+ <text class="font-16 blue">已选商品</text>
+ <view class="flex align-center">
+ <text class="icon iconfont iconlajixiang_huaban1 gray"></text>
+ <text class="font-16 gray">清空</text>
+ </view>
+ <view>
+ <image src="../../static/images/product.jpg"></image>
+ <view></view>
+ </view>
+ </view>
+ </view>
+ </uni-popup>
</view>
</template>
<script>
import searchBar from '../../components/searchBar/index.vue';
+ import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
components:{
- searchBar
+ searchBar,
+ uniPopup
},
data(){
return{
@@ -67,6 +96,9 @@
},
active(index){
this.select=index
+ },
+ openShoppingCart(){
+ this.$refs.popup.open()
}
}
}
@@ -115,8 +147,13 @@
.list-right-row:not(:first-child){
margin-top: 10px;
}
+ .product-img{
+ width: 81px;
+ height: 81px;
+ }
.shopping{
padding: 20px 10px;
+ box-shadow:0 6px 100px rgba(237,234,244,1);
}
.shopping-icon{
font-size: 25px;
@@ -137,4 +174,17 @@
line-height: 30px;
font-size: 14px;
}
+ .popup-content{
+ background: #FFFFFF;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ padding: 10px;
+ }
+ .icon{
+ font-size: 20px;
+ }
+ .popup-header{
+ padding: 0 5px 10px;
+ border-bottom: 1px solid #EDEAF4;
+ }
</style>
diff --git a/hive-app/pages/workbench/submitSucceed.vue b/hive-app/pages/workbench/submitSucceed.vue
index 9b9b4e2..a890cb6 100644
--- a/hive-app/pages/workbench/submitSucceed.vue
+++ b/hive-app/pages/workbench/submitSucceed.vue
@@ -3,9 +3,10 @@
<view class="flex flex-v align-center">
<image class="img" mode="aspectFit" src="../../static/images/succeed.png"></image>
<text class="font-16">提交成功请到前台付款</text>
-
- <button class="blue-btn btn mt-20">查看详情</button>
- <button class="white-btn btn mt-20">返回首页</button>
+ <view class="sticky-footer">
+ <button class="blue-btn btn mt-20">查看详情</button>
+ <button class="white-btn btn mt-20">返回首页</button>
+ </view>
</view>
</template>
@@ -17,8 +18,5 @@
width:200px;
height: 150px;
margin-top: 50px;
- }
- .btn{
- padding: 0 40px;
}
</style>
diff --git a/hive-app/static/images/product.jpg b/hive-app/static/images/product.jpg
new file mode 100644
index 0000000..6f57d6c
--- /dev/null
+++ b/hive-app/static/images/product.jpg
Binary files differ
--
Gitblit v1.9.1