From 9ea5f12713c8b379dafe4173292abaac12bc04c2 Mon Sep 17 00:00:00 2001
From: li-guang <153605324@qq.com>
Date: Fri, 18 Dec 2020 10:41:24 +0800
Subject: [PATCH] 订单的页面
---
/dev/null | 227 --------------------
hive-app/pages/workbench/selectProduct/shoppingCart.vue | 96 ++++++++
hive-app/App.vue | 2
hive-app/pages.json | 11
hive-app/pages/workbench/index.vue | 3
hive-app/static/iconfont/iconfont.ttf | 0
hive-app/static/iconfont/iconfont.css | 37 ++-
hive-app/static/images/banner1.jpg | 0
hive-app/pages/workbench/selectProduct/index.vue | 168 +++++++++++++++
hive-app/pages/workbench/customerInfo.vue | 9
hive-app/pages/workbench/productDetail/index.vue | 76 ++++++
11 files changed, 383 insertions(+), 246 deletions(-)
diff --git a/hive-app/App.vue b/hive-app/App.vue
index fdfeeef..79cc8bc 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_7v5ezq1ygk8.css");
+@import url("//at.alicdn.com/t/font_2263696_tm4mdlsht1a.css");
</style>
diff --git a/hive-app/pages.json b/hive-app/pages.json
index 9d6d769..93adcbb 100644
--- a/hive-app/pages.json
+++ b/hive-app/pages.json
@@ -158,7 +158,7 @@
}
},
{
- "path": "pages/workbench/selectProduct",
+ "path": "pages/workbench/selectProduct/index",
"style": {
"navigationBarTitleText": "当前客户:李某",
"navigationBarBackgroundColor":"#FFFFFF",
@@ -189,6 +189,15 @@
"scrollIndicator": "none"
}
}
+ },
+ {
+ "path": "pages/workbench/productDetail/index",
+ "style": {
+ "transparentTitle": "always",
+ "app-plus":{
+ "scrollIndicator": "none"
+ }
+ }
}
],
"globalStyle": {
diff --git a/hive-app/pages/workbench/customerInfo.vue b/hive-app/pages/workbench/customerInfo.vue
index 825386c..7077475 100644
--- a/hive-app/pages/workbench/customerInfo.vue
+++ b/hive-app/pages/workbench/customerInfo.vue
@@ -35,7 +35,9 @@
<text class="font-14 gray">东莞店</text>
</view>
</view>
- <button class="blue-btn btn" @click="linkTo('./selectProduct')">下一步</button>
+ <navigator url="./selectProduct/index">
+ <button class="blue-btn btn">下一步</button>
+ </navigator>
</view>
</template>
@@ -45,11 +47,6 @@
return{}
},
methods:{
- linkTo(val){
- uni.navigateTo({
- url:val
- })
- }
}
}
</script>
diff --git a/hive-app/pages/workbench/index.vue b/hive-app/pages/workbench/index.vue
index 58ad2ef..3472ed6 100644
--- a/hive-app/pages/workbench/index.vue
+++ b/hive-app/pages/workbench/index.vue
@@ -175,6 +175,9 @@
</script>
<style>
+ page{
+ background: #F6F6F8;
+ }
.icon {
font-size: 18px;
text-align: center;
diff --git a/hive-app/pages/workbench/productDetail/index.vue b/hive-app/pages/workbench/productDetail/index.vue
new file mode 100644
index 0000000..25e65f9
--- /dev/null
+++ b/hive-app/pages/workbench/productDetail/index.vue
@@ -0,0 +1,76 @@
+<template>
+ <!-- 商品详情 -->
+ <view>
+ <!-- #ifndef H5 -->
+ <view class="status_bar"></view>
+ <!-- #endif -->
+ <view class="banner">
+ <swiper class="swiper"
+ autoplay="true"
+ interval="5000"
+ duration="1500"
+ @change="swiperChange"
+ >
+ <swiper-item v-for="(item,index) in bannerList" :key="index">
+ <image class="banner-img" :src="item.img" mode="aspectFill"></image>
+ </swiper-item>
+ </swiper>
+ </view>
+ <view class="return-icon iconfont iconzuojiantou"></view>
+ <view class="dots-container justify-center">
+ <view v-for="(item, index) in bannerList" :key="index">
+ <view :class="['dot', index === swiperIndex ? 'actives' : '']">1</view>
+ </view>
+ /3
+ </view>
+ </view>
+</template>
+
+<script>
+ export default{
+ data(){
+ return{
+ bannerList:[
+ {img:'../../../static/images/banner1.jpg'},
+ {img:'../../../static/images/banner1.jpg'}
+ ]
+ }
+ },
+ methods:{
+ swiperChange(e){
+ this.swiperIndex = e.detail.current;
+ },
+
+ }
+ }
+</script>
+
+<style>
+ .return-icon{
+ font-size: 28px;
+ opacity: 0.5;
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ }
+ .swiper{
+ width: 100%;
+ height: 300px;
+ }
+ .banner-img{
+ width: 100%;
+ height: 100%;
+ }
+ .dots-container {
+ display: flex;
+ padding-bottom: 17px;
+ background: rgba(0,0,0,0.5);
+ border-radius: 20px;
+ }
+ .dots-box{
+
+ }
+ .dot{
+
+ }
+</style>
diff --git a/hive-app/pages/workbench/selectProduct.vue b/hive-app/pages/workbench/selectProduct.vue
deleted file mode 100644
index d81e0ae..0000000
--- a/hive-app/pages/workbench/selectProduct.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<template>
- <!-- 当前客户 -->
- <view class="container">
- <!-- #ifndef H5 -->
- <view class="status_bar"></view>
- <!-- #endif -->
- <search-bar :placeholder="placeholder" class="ml-10 mr-10"></search-bar>
- <view class="list flex">
- <scroll-view class="list-left" scroll-y>
- <view v-for="(item,index) in list" class="list-left-row" @click="active(index)" :class="select==index?'active':''">
- <text class="font-14">{{item}}</text>
- </view>
- </scroll-view>
- <scroll-view class="list-right" scroll-y>
- <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="iconfont iconjian blue-outline-btn-circle mr-10"></text>
- <text>1</text>
- <text class="iconfont iconjia blue-btn-circle ml-10"></text>
- </view>
- </view>
- </view>
- </view>
- <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="iconfont iconjian blue-outline-btn-circle mr-10"></text>
- <text>1</text>
- <text class="iconfont iconjia blue-btn-circle ml-10"></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 iconicongouwuche gray" @click="openShoppingCart">
- <view class="shopping-icon-num flex align-center justify-center">
- <text class="font-10">19</text>
- </view>
- </view>
- <text class="font-14 blue ml-10">¥110.00</text>
- </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">
- <view class="popup-header-icon iconfont iconlajixiang_huaban1 gray"></view>
- <text class="font-16 gray">清空</text>
- </view>
- </view>
- <view class="popup-row flex align-center">
- <image class="popup-row-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
- <view class="popup-row-right">
- <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
- <view class="flex justify-between align-center">
- <text class="flex justify-start font-12 red">￥400.00</text>
- <view class="flex align-center justify-end">
- <text class="iconfont iconjian blue-outline-btn-circle mr-10 center"></text>
- <text>1</text>
- <text class="iconfont iconjia blue-btn-circle ml-10 center"></text>
- </view>
- </view>
- </view>
- </view>
- <view class="popup-end flex align-center justify-between">
- <view class="flex align-center">
- <view class="shopping-icon iconfont iconicongouwuche gray" @click="openShoppingCart">
- <view class="shopping-icon-num flex align-center justify-center">
- <text class="font-10">19</text>
- </view>
- </view>
- <text class="font-14 blue ml-10">¥110.00</text>
- </view>
- <button class="blue-btn btn mr-0" @click="linkTo('./confirmOrder')">提交订单</button>
- </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,
- uniPopup
- },
- data(){
- return{
- placeholder:'商品名称、编号、拼音',
- list:['院装产品','美容套餐','美容客装','美容试装','头皮院装'],
- select:'0'
- }
- },
- methods:{
- linkTo(val){
- uni.navigateTo({
- url:val
- })
- },
- active(index){
- this.select=index
- },
- openShoppingCart(){
- this.$refs.popup.open()
- }
- }
- }
-</script>
-
-<style>
- page{
- height: 100%;
- }
- .container{
- display: flex;
- flex-direction: column;
- height: 100%;
- padding: 10px 0 0;
- box-sizing: border-box;
- }
- .list{
- flex: 1;
- }
- .list-left{
- width: 25%;
- height: 100%;
- text-align: center;
- background: #F6F6F8;
- border-radius: 4px;
- }
- .list-right{
- width: 75%;
- text-align: center;
- padding: 0px 10px;
- }
- .list-left-row{
- padding: 10px;
- color: #8c9fad;
- }
- .active{
- background: #FFFFFF;
- color: #000000;
- }
- .list-right-row{
- border: 1px solid #EDEAF4;
- box-shadow:0 6px 6px rgba(237,234,244,0.5);
- border-radius: 4px;
- padding: 10px;
- }
- .list-right-row:not(:first-child){
- margin-top: 10px;
- }
- .product-img{
- width: 81px;
- height: 81px;
- }
- .shopping{
- padding: 10px 10px;
- box-shadow:0 6px 100px rgba(237,234,244,1);
- }
- .shopping-icon{
- font-size: 25px;
- position: relative;
- }
- .shopping-icon-num{
- width: 20px;
- height: 20px;
- background: #518EFF;
- border-radius: 50%;
- color: #FFFFFF;
- position: absolute;
- right: -10px;
- top: -10px;
- }
- .btn{
- border-radius: 20px;
- line-height: 34px;
- padding: 0 24px;
- font-size: 14px;
- }
- .popup-content{
- background: #FFFFFF;
- border-top-left-radius: 8px;
- border-top-right-radius: 8px;
- padding: 10px;
- }
- .popup-header{
- padding: 0 5px 10px;
- border-bottom: 1px solid #EDEAF4;
- }
- .popup-header-icon{
- width: 20px;
- height: 20px;
- }
- .popup-row{
- border-bottom: 1px solid #EDEAF4;
- padding: 10px 5px;
- }
- .popup-row-img{
- width: 40px;
- height: 40px;
- }
- .popup-row-right{
- width: 100%;
- }
- .popup-end{
- padding: 10px 0;
- }
-</style>
diff --git a/hive-app/pages/workbench/selectProduct/index.vue b/hive-app/pages/workbench/selectProduct/index.vue
new file mode 100644
index 0000000..b28c9b6
--- /dev/null
+++ b/hive-app/pages/workbench/selectProduct/index.vue
@@ -0,0 +1,168 @@
+<template>
+ <!-- 当前客户 -->
+ <view class="container">
+ <!-- #ifndef H5 -->
+ <view class="status_bar"></view>
+ <!-- #endif -->
+ <search-bar :placeholder="placeholder" class="ml-10 mr-10"></search-bar>
+ <view class="list flex">
+ <scroll-view class="list-left" scroll-y>
+ <view v-for="(item,index) in list" class="list-left-row" @click="active(index)" :class="select==index?'active':''">
+ <text class="font-14">{{item}}</text>
+ </view>
+ </scroll-view>
+ <scroll-view class="list-right" scroll-y>
+ <navigator url="../productDetail/index">
+ <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="iconfont iconjian blue-outline-btn-circle mr-10"></text>
+ <text>1</text>
+ <text class="iconfont iconjia blue-btn-circle ml-10"></text>
+ </view>
+ </view>
+ </view>
+ </view>
+ </navigator>
+ <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="iconfont iconjian blue-outline-btn-circle mr-10"></text>
+ <text>1</text>
+ <text class="iconfont iconjia blue-btn-circle ml-10"></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 iconicongouwuche gray" @click="openShoppingCart">
+ <view class="shopping-icon-num flex align-center justify-center">
+ <text class="font-10">19</text>
+ </view>
+ </view>
+ <text class="font-14 blue ml-10">¥110.00</text>
+ </view>
+ <navigator url="../confirmOrder">
+ <button class="blue-btn btn mr-0">提交订单</button>
+ </navigator>
+
+ </view>
+ <uni-popup ref="popup" type="bottom">
+ <shopping-cart></shopping-cart>
+ </uni-popup>
+ </view>
+</template>
+
+<script>
+ import searchBar from '../../../components/searchBar/index.vue';
+ import uniPopup from '@/components/uni-popup/uni-popup.vue'
+ import shoppingCart from './shoppingCart.vue'
+ export default {
+ components:{
+ searchBar,
+ uniPopup,
+ shoppingCart
+ },
+ data(){
+ return{
+ placeholder:'商品名称、编号、拼音',
+ list:['院装产品','美容套餐','美容客装','美容试装','头皮院装'],
+ select:'0'
+ }
+ },
+ methods:{
+ active(index){
+ this.select=index
+ },
+ openShoppingCart(){
+ this.$refs.popup.open()
+ }
+ }
+ }
+</script>
+
+<style>
+ page{
+ height: 100%;
+ }
+ .container{
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ padding: 10px 0 0;
+ box-sizing: border-box;
+ }
+ .list{
+ flex: 1;
+ }
+ .list-left{
+ width: 25%;
+ height: 100%;
+ text-align: center;
+ background: #F6F6F8;
+ border-radius: 4px;
+ }
+ .list-right{
+ width: 75%;
+ text-align: center;
+ padding: 0px 10px;
+ }
+ .list-left-row{
+ padding: 10px;
+ color: #8c9fad;
+ }
+ .active{
+ background: #FFFFFF;
+ color: #000000;
+ }
+ .list-right-row{
+ border: 1px solid #EDEAF4;
+ box-shadow:0 6px 6px rgba(237,234,244,0.5);
+ border-radius: 4px;
+ padding: 10px;
+ }
+ .list-right-row:not(:first-child){
+ margin-top: 10px;
+ }
+ .product-img{
+ width: 81px;
+ height: 81px;
+ }
+ .shopping{
+ padding: 10px 10px;
+ box-shadow:0 6px 100px rgba(237,234,244,1);
+ }
+ .shopping-icon{
+ font-size: 28px;
+ position: relative;
+ }
+ .shopping-icon-num{
+ width: 20px;
+ height: 20px;
+ background: #518EFF;
+ border-radius: 50%;
+ color: #FFFFFF;
+ position: absolute;
+ right: -10px;
+ top: -10px;
+ }
+ .btn{
+ border-radius: 20px;
+ line-height: 34px;
+ padding: 0 24px;
+ font-size: 14px;
+ }
+</style>
diff --git a/hive-app/pages/workbench/selectProduct/shoppingCart.vue b/hive-app/pages/workbench/selectProduct/shoppingCart.vue
new file mode 100644
index 0000000..81a57bc
--- /dev/null
+++ b/hive-app/pages/workbench/selectProduct/shoppingCart.vue
@@ -0,0 +1,96 @@
+<template>
+ <!-- 购物车 -->
+ <view class="popup-content">
+ <view class="popup-header flex justify-between">
+ <text class="blue">已选商品</text>
+ <view class="flex align-center">
+ <view class="popup-header-icon iconfont iconlajixiang_huaban1 gray"></view>
+ <text class="gray font-14">清空</text>
+ </view>
+ </view>
+ <view class="popup-row flex align-center"v-for="item in 3">
+ <image class="popup-row-img" mode="aspectFill" src="../../../static/images/product.jpg"></image>
+ <view class="popup-row-right">
+ <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
+ <view class="flex justify-between align-center">
+ <text class="flex justify-start font-12 red">￥400.00</text>
+ <view class="flex align-center justify-end">
+ <text class="iconfont iconjian blue-outline-btn-circle mr-10 center"></text>
+ <text>1</text>
+ <text class="iconfont iconjia blue-btn-circle ml-10 center"></text>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="popup-end flex align-center justify-between">
+ <view class="flex align-center">
+ <view class="shopping-icon iconfont iconicongouwuche gray" @click="openShoppingCart">
+ <view class="shopping-icon-num flex align-center justify-center">
+ <text class="font-10">19</text>
+ </view>
+ </view>
+ <text class="font-14 blue ml-10">¥110.00</text>
+ </view>
+ <button class="blue-btn btn mr-0" @click="linkTo('./confirmOrder')">提交订单</button>
+ </view>
+ </view>
+</template>
+
+<script>
+</script>
+
+<style>
+ .shopping{
+ padding: 10px 10px;
+ box-shadow:0 6px 100px rgba(237,234,244,1);
+ }
+ .shopping-icon{
+ font-size: 28px;
+ position: relative;
+ }
+ .shopping-icon-num{
+ width: 20px;
+ height: 20px;
+ background: #518EFF;
+ border-radius: 50%;
+ color: #FFFFFF;
+ position: absolute;
+ right: -10px;
+ top: -10px;
+ }
+ .btn{
+ border-radius: 20px;
+ line-height: 34px;
+ padding: 0 24px;
+ font-size: 14px;
+ }
+ .popup-content{
+ background: #FFFFFF;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ padding: 0 10px;
+ }
+ .popup-header{
+ padding: 10px 0;
+ border-bottom: 1px solid #EDEAF4;
+ font-size: 16px;
+ }
+ .popup-header-icon{
+ font-size: 22px;
+ vertical-align: middle;
+ }
+ .popup-row{
+ padding: 10px 0;
+ }
+ .popup-row-img{
+ width: 40px;
+ height: 40px;
+ margin-right: 10px;
+ }
+ .popup-row-right{
+ width: 100%;
+ }
+ .popup-end{
+ padding: 10px 0;
+ }
+</style>
diff --git a/hive-app/static/iconfont/iconfont.css b/hive-app/static/iconfont/iconfont.css
index 7c35db0..3d1bd24 100644
--- a/hive-app/static/iconfont/iconfont.css
+++ b/hive-app/static/iconfont/iconfont.css
@@ -1,19 +1,38 @@
@font-face {
font-family: 'iconfont'; /* project id 2263696 */
- src: url('https://at.alicdn.com/t/font_2263696_9yynz69zizb.eot');
- src: url('https://at.alicdn.com/t/font_2263696_9yynz69zizb.eot?#iefix') format('embedded-opentype'),
- url('https://at.alicdn.com/t/font_2263696_9yynz69zizb.woff2') format('woff2'),
- url('https://at.alicdn.com/t/font_2263696_9yynz69zizb.woff') format('woff'),
- url('https://at.alicdn.com/t/font_2263696_9yynz69zizb.ttf') format('truetype'),
- url('https://at.alicdn.com/t/font_2263696_9yynz69zizb.svg#iconfont') format('svg');
+ src: url('https://at.alicdn.com/t/font_2263696_7v5ezq1ygk8.eot');
+ src: url('https://at.alicdn.com/t/font_2263696_7v5ezq1ygk8.eot?#iefix') format('embedded-opentype'),
+ url('https://at.alicdn.com/t/font_2263696_7v5ezq1ygk8.woff2') format('woff2'),
+ url('https://at.alicdn.com/t/font_2263696_7v5ezq1ygk8.woff') format('woff'),
+ url('https://at.alicdn.com/t/font_2263696_7v5ezq1ygk8.ttf') format('truetype'),
+ url('https://at.alicdn.com/t/font_2263696_7v5ezq1ygk8.svg#iconfont') format('svg');
}
-
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+}
+
+.iconicongouwuche:before {
+ content: "\e600";
+}
+
+.iconlajixiang_huaban1:before {
+ content: "\e68d";
+}
+
+.iconjian:before {
+ content: "\e644";
+}
+
+.iconjia:before {
+ content: "\e620";
+}
+
+.iconguanbi:before {
+ content: "\e634";
}
.iconyanjing:before {
@@ -62,10 +81,6 @@
.iconsaomiao:before {
content: "\e60f";
-}
-
-.iconjiahao:before {
- content: "\e600";
}
.iconsousuo:before {
diff --git a/hive-app/static/iconfont/iconfont.ttf b/hive-app/static/iconfont/iconfont.ttf
index c083576..fdd70f8 100644
--- a/hive-app/static/iconfont/iconfont.ttf
+++ b/hive-app/static/iconfont/iconfont.ttf
Binary files differ
diff --git a/hive-app/static/images/banner1.jpg b/hive-app/static/images/banner1.jpg
new file mode 100644
index 0000000..b09faec
--- /dev/null
+++ b/hive-app/static/images/banner1.jpg
Binary files differ
--
Gitblit v1.9.1