caimei-applets-hehe/pages/fight-order/fight-create-order.vue

<template>
    <view class="figth-create-order">
        <!-- 收货地址 -->
        <cm-choose-address :addressData="addressData"></cm-choose-address>
        <view class="grid"></view>
        <!-- 订单列表 -->
        <view class="order-list">
            <view class="order-section">
                <!-- 供应商 -->
                <view class="origin">
                    <image class="cover" src="https://picsum.photos/100/100?random=1"></image>
                    <view class="name">华熙生物</view>
                </view>
                <!-- 商品列表 -->
                <view class="goods-list">
                    <!-- 商品信息 -->
                    <view class="order-goods"><cm-order-prodcut></cm-order-prodcut></view>
                    <view class="order-goods"><cm-order-prodcut></cm-order-prodcut></view>
                </view>
                <!-- 合计 -->
                <view class="total-price"> <text>合计:</text> <text class="price">￥900.00</text> </view>
                <!-- 留言 -->
                <view class="remark">
                    <view class="label">留言:</view> <input class="control" type="text" placeholder="请输入内容" />
                </view>
            </view>
        </view>
        <view class="grid"></view>
        <!-- 优惠券 -->
        <cm-order-coupon-section></cm-order-coupon-section>
        <view class="grid"></view>
        <!-- 运费 -->
        <cm-order-freight-section></cm-order-freight-section>
        <!-- 提交导航 -->
        <cm-order-submit-nav></cm-order-submit-nav>
    </view>
</template>

<script>
import CmChooseAddress from '@/components/cm-module/cm-choose-address/cm-choose-address.vue'
import CmOrderProdcut from '@/components/cm-module/cm-order-prodcut/cm-order-prodcut.vue'
import CmOrderSubmitNav from '@/components/cm-module/cm-order-submit-nav/cm-order-submit-nav.vue'
import CmOrderCouponSection from '@/components/cm-module/cm-order-coupon-section/cm-order-coupon-section.vue'
import CmOrderFreightSection from '@/components/cm-module/cm-order-freight-section/cm-order-freight-section.vue'

export default {
    components: {
        CmOrderProdcut,
        CmChooseAddress,
        CmOrderSubmitNav,
        CmOrderCouponSection,
        CmOrderFreightSection
    },
    data() {
        return {
            addressData: {}
        }
    }
}
</script>

<style lang="scss" scoped>
.figth-create-order {
    background: #f7f7f7;
    min-height: 100vh;
}

.grid {
    width: 100%;
    height: 20rpx;
    background: #f7f7f7;
}

.order-list {
    background: #fff;

    .order-section {
        padding: 38rpx 0;
        margin-top: 20rpx;
        &:first-child {
            margin-top: 0;
        }
    }

    .goods-list {
        .order-goods {
            padding-top: 32rpx;
            &:first-child {
                padding-top: 0;
            }
        }
    }

    .origin {
        padding: 0 24rpx;
        margin-bottom: 16rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .cover {
            width: 56rpx;
            height: 56rpx;
            border-radius: 4rpx;
        }
        .name {
            margin-left: 16rpx;
            font-size: 30rpx;
            color: #333333;
        }
    }
}

.total-price {
    padding: 24rpx;
    text-align: right;
    font-size: 26rpx;
    color: #333;
    background: #fff;

    .price {
        color: #ff457b;
    }
}

.remark {
    padding: 0 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;

    .label {
        width: 78rpx;
        font-size: 26rpx;
        color: #999999;
        margin-right: 16rpx;
    }

    .control {
        flex: 1;
        font-size: 26rpx;
        color: #333333;
        padding: 8rpx 16rpx;
        background: #f7f7f7;
        border-radius: 8rpx;
    }
}
</style>