From 682ca9d7a7cd97ad02a9350b8cf8f931462c0a18 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Fri, 18 Dec 2020 15:47:17 +0800
Subject: [PATCH] gx
---
hive-app/static/images/succeed.png | 0
hive-app/pages/workbench/selectProduct/shoppingCart.vue | 96 ++++++++++++
hive-app/common/styles/index.css | 15 +
hive-app/pages.json | 11 +
hive-app/static/images/product.jpg | 0
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 | 5
hive-app/pages/workbench/submitSucceed.vue | 15 +
hive-app/pages/workbench/productDetail/index.vue | 76 +++++++++
12 files changed, 396 insertions(+), 27 deletions(-)
diff --git a/hive-app/common/styles/index.css b/hive-app/common/styles/index.css
index a53a989..c5c2597 100644
--- a/hive-app/common/styles/index.css
+++ b/hive-app/common/styles/index.css
@@ -193,19 +193,20 @@
}
/* 蓝色圆形加减按钮 */
.blue-btn-circle{
- height: 26px;
- width: 26px;
- line-height: 26px;
+ height: 24px;
+ width: 24px;
+ line-height: 24px;
box-sizing: border-box;
font-size: 14px!important;
- border-radius: 50%;
+ border-radius: 50%!important;
background: #518EFF;
+ border-radius: 4px;
color: #FFFFFF;
}
.blue-outline-btn-circle{
- height: 26px;
- width: 26px;
- line-height: 24px;
+ height: 24px;
+ width: 24px;
+ line-height: 22px;
box-sizing: border-box;
font-size: 12px!important;
border-radius: 50%;
diff --git a/hive-app/pages.json b/hive-app/pages.json
index 3da0405..76511c7 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",
@@ -196,6 +196,15 @@
"navigationBarTitleText": "当前客户:李某",
"navigationBarBackgroundColor":"#FFFFFF",
"navigationBarTextStyle":"black",
+ "app-plus":{
+ "scrollIndicator": "none"
+ }
+ }
+ },
+ {
+ "path": "pages/workbench/productDetail/index",
+ "style": {
+ "transparentTitle": "always",
"app-plus":{
"scrollIndicator": "none"
}
diff --git a/hive-app/pages/workbench/customerInfo.vue b/hive-app/pages/workbench/customerInfo.vue
index 18302a2..27986ab 100644
--- a/hive-app/pages/workbench/customerInfo.vue
+++ b/hive-app/pages/workbench/customerInfo.vue
@@ -38,7 +38,6 @@
<navigator :url="url">
<button class="blue-btn sticky-footer">下一步</button>
</navigator>
-
</view>
</template>
@@ -46,12 +45,12 @@
export default{
data(){
return{
- url: './selectProduct',
+ url: './selectProduct/index',
}
},
onLoad(options) {
if(options.type==1){
- this.url = './selectProduct';
+ this.url = './selectProduct/index';
} else {
this.url = './selectService';
}
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/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/pages/workbench/submitSucceed.vue b/hive-app/pages/workbench/submitSucceed.vue
index 57ad2d8..cf4c239 100644
--- a/hive-app/pages/workbench/submitSucceed.vue
+++ b/hive-app/pages/workbench/submitSucceed.vue
@@ -3,8 +3,14 @@
<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">
+ <navigator url="./orderList">
+ <button class="blue-btn btn">查看详情</button>
+ </navigator>
+ <navigator url="./index" open-type="switchTab">
+ <button class="white-btn btn mt-15">返回首页</button>
+ </navigator>
+ </view>
</view>
</template>
@@ -14,8 +20,7 @@
<style>
.img{
width:200px;
- }
- .btn{
- padding: 0 40px;
+ height: 150px;
+ margin-top: 50px;
}
</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
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
diff --git a/hive-app/static/images/succeed.png b/hive-app/static/images/succeed.png
index ecf2d2e..8d9ac37 100644
--- a/hive-app/static/images/succeed.png
+++ b/hive-app/static/images/succeed.png
Binary files differ
--
Gitblit v1.9.1