gx

queenwuli

2020-12-18 682ca9d7a7cd97ad02a9350b8cf8f931462c0a18

gx

 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%;

 hive-app/pages.json

@@ -158,7 +158,7 @@
            }
        },
        {
            "path": "pages/workbench/selectProduct",
            "path": "pages/workbench/selectProduct/index",
            "style": {
                "navigationBarTitleText": "当前客户:李某",
                "navigationBarBackgroundColor":"#FFFFFF",
@@ -200,6 +200,15 @@
                    "scrollIndicator": "none"
                }
            }
        },
        {
            "path": "pages/workbench/productDetail/index",
            "style": {
                "transparentTitle": "always",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
            }
        }
    ],
    "globalStyle": {

 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';
            }

 hive-app/pages/workbench/productDetail/index.vue

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

 hive-app/pages/workbench/selectProduct/index.vue

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

 hive-app/pages/workbench/selectProduct/shoppingCart.vue

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

 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>

 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 {

 hive-app/static/iconfont/iconfont.ttf

Binary files differ

 hive-app/static/images/banner1.jpg

 hive-app/static/images/product.jpg

 hive-app/static/images/succeed.png