订单当前客户页面

li-guang

2020-12-17 b2920edd2e328124758db10dbf4af57272693a01

订单当前客户页面

 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>

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


 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>

 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>

 hive-app/static/images/product.jpg