choujiang/pagesB/order/order.vue

<template>
    <view>
        <statusNav returnColor="#141414" fontWeight="800" titleColor="#141414" backgroudColor="#ffffff"
            navBarTitle="确认订单">
        </statusNav>

        <view class="main">
            <view class="address-content">
                <image src="" class="icon" mode=""></image>
                <view class="text">
                    请填写收货地址
                </view>
            </view>

            <view class="address-list">
                <view class="li">
                    <view class="li-content">
                        <view class="name">
                            小灰灰
                        </view>
                        <view class="tel">
                            188****8888
                        </view>
                    </view>
                    <image src="" class="icon" mode=""></image>
                </view>
                <view class="address">
                    四川省成都市成华区中环路双店路段奥园广场3期6栋1314
                </view>
            </view>

            <view class="order-content">
                <view class="order-content-commodity">
                    <image src="" class="img" mode=""></image>
                    <view class="text">
                        <view class="name-content">
                            <view class="name">
                                （杏仁酸抗痘套组）杏仁酸精华8%
                            </view>
                            <view class="num">
                                x1
                            </view>
                        </view>
                        <view class="selected">
                            已选200ml+220g
                        </view>
                        <view class="money-signin">
                            ￥1236.00+2000积分
                        </view>
                    </view>
                </view>

                <view class="quantity-commodity">
                    <view class="">
                        商品数量
                    </view>
                    <view class="">
                        1
                    </view>
                </view>
                <view class="quantity-commodity">
                    <view class="">
                        总价
                    </view>
                    <view class="cor">
                        ￥1300.00
                    </view>
                </view>
                <view class="quantity-commodity">
                    <view class="">
                        积分抵扣
                    </view>
                    <view class="cor">
                        -2000
                    </view>
                </view>
                <view class="quantity-commodity">
                    <view class="">
                        快递邮费
                    </view>
                    <view class="">
                        10.00
                    </view>
                </view>
            </view>
        </view>

        <view class="order-bottom">
            <view class="">
                合计：<text class="cor">￥1246.00+2000积分</text>
            </view>
            <view class="btn">
                去支付
            </view>
        </view>
    </view>
</template>

<script>
    import statusNav from '../../components/status-nav.vue';
    export default {
        components: {
            statusNav
        },
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style>
    page {
        background-color: #f4f4f4;
    }

    .main {
        background-color: #FFFFFF;
        padding-top: 66rpx;
        padding-bottom: 106rpx;
    }

    .address-content {
        width: 692rpx;
        border-bottom: 2rpx solid rgba(229, 229, 229, 100);
        display: flex;
        margin: auto;
        justify-content: center;
        align-items: center;
        padding-bottom: 38rpx;
    }

    .address-list {
        width: 692rpx;
        margin: auto;
        padding-bottom: 38rpx;
        padding-top: 38rpx;
        border-bottom: 2rpx solid rgba(229, 229, 229, 100);
    }

    .address-list .address {
        font-size: 24rpx;
        color: rgba(16, 16, 16, 100);
    }

    .address-list .li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
    }

    .address-list .li .li-content {
        display: flex;
    }

    .address-list .li .li-content .name {
        color: rgba(16, 16, 16, 100);
        font-size: 28rpx;
        font-weight: bold;
        margin-right: 48rpx;
    }

    .address-list .li .li-content .tel {
        color: rgba(16, 16, 16, 100);
        font-size: 28rpx;
    }

    .address-list .li .icon {
        width: 46rpx;
        height: 46rpx;
        background-color: #E3E3E3;
        margin-right: 16rpx;
    }

    .address-content .icon {
        width: 46rpx;
        height: 46rpx;
        background-color: #E3E3E3;
        margin-right: 16rpx;
    }

    .order-content {
        padding: 0 20rpx;
        padding-top: 28rpx;
    }

    .order-content-commodity {
        display: flex;
    }

    .order-content-commodity .text {
        flex: 1;
    }

    .order-content-commodity .text .name-content {
        display: flex;
        justify-content: space-between;
    }

    .order-content-commodity .img {
        width: 196rpx;
        margin-right: 20rpx;
        height: 196rpx;
        background-color: #E3E3E3;
    }

    .order-content-commodity .text .name {
        font-size: 28rpx;
        width: 364rpx;
        line-height: 45rpx;
    }

    .order-content-commodity .text .num {
        font-size: 28rpx;
        color: #9C9C9C;
    }

    .order-content-commodity .text .selected {
        color: rgba(185, 185, 185, 100);
        font-size: 24rpx;
        margin-top: 16rpx;
        margin-bottom: 14rpx;
    }

    .order-content-commodity .text .money-signin {
        color: rgba(185, 185, 185, 100);
        font-size: 28rpx;
        margin-top: 16rpx;
        margin-bottom: 17rpx;
        color: rgba(249, 70, 70, 100);
        font-size: 28rpx;
    }

    .quantity-commodity {
        display: flex;
        justify-content: space-between;
        margin-top: 60rpx;
        color: rgba(16, 16, 16, 100);
        font-size: 14px;
    }

    .quantity-commodity .cor {
        color: #F94646;
    }

    .order-bottom {
        width: 100%;
        height: 110rpx;
        display: flex;
        justify-content: space-between;
        position: fixed;
        padding-left: 20rpx;
        bottom: 0rpx;
        align-items: center;
        left: 0rpx;
        background-color: rgba(255, 255, 255, 100);
    }

    .order-bottom .btn {
        width: 290rpx;
        height: 110rpx;
        background-color: rgba(249, 70, 70, 100);
        text-align: center;
        color: rgba(255, 255, 255, 100);
        font-size: 28rpx;
        line-height: 110rpx;
    }

    .order-bottom .cor {
        color: #F94646;
        font-weight: 600;
    }
</style>