订单的页面

li-guang

2020-12-18 9ea5f12713c8b379dafe4173292abaac12bc04c2

订单的页面

 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>

 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": {

 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>

 hive-app/pages/workbench/index.vue

@@ -175,6 +175,9 @@
</script>

<style>
    page{
        background: #F6F6F8;
    }
    .icon {
        font-size: 18px;
        text-align: center;

 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.vue

File was deleted

 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/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