diff --git a/src/pages/order/cart.vue b/src/pages/order/cart.vue
index 941210b..e53e1f8 100644
--- a/src/pages/order/cart.vue
+++ b/src/pages/order/cart.vue
@@ -1,11 +1,77 @@
 <template>
-    <app-layout headerBackgroundColor="#00418c" textColor="light">
-        <view class="cart-container"> </view>
+    <app-layout
+        headerBackgroundColor="#F6F6F6"
+        backgroundColor="#F6F6F6"
+        title="购物车"
+        textColor="dark"
+    >
+        <widget-tips
+            text="为什么会拆成多个订单?根据师傅服务能力与服务类型进行订单拆分"
+        />
+        <view class="cart-container">
+            <view class="cart-group" v-for="(item, index) in list" :key="index">
+                <view
+                    class="group-title limit-line clamp-1"
+                    @click="clickGroup(index)"
+                >
+                    <view class="group-checkbox">
+                        <widget-check-box :checked="item.checked" />
+                    </view>
+                    <view class="title">
+                        <text>{{ item.name }}</text>
+                    </view>
+                </view>
+                <view class="group-items">
+                    <view
+                        class="cart-item"
+                        v-for="(v, i) in item.list"
+                        :key="i"
+                    >
+                        <view
+                            class="item-checkbox"
+                            @click="clickItem(index, i)"
+                        >
+                            <widget-check-box :checked="v.checked" />
+                        </view>
+                        <view class="item-box">
+                            <service-preview-item :data="v" />
+                            <widget-count-modify
+                                class="component-add"
+                                :initNumber="v.buyNumber"
+                                @change="
+                                    changeNumber($event, {
+                                        parentIndex: index,
+                                        index: i,
+                                    })
+                                "
+                            />
+                        </view>
+                    </view>
+                </view>
+                <view class="bottom-btn-box">
+                    <view class="total-price">
+                        <text class="text">合计：</text>
+                        <text class="price">¥ {{ item.total }}</text>
+                    </view>
+                    <view class="button">
+                        <text>去下单</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="more">
+            <widget-load-more :hasMore="false" />
+        </view>
     </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
+import WidgetTips from "@/components/widgets/tips";
+import WidgetCheckBox from "@/components/widgets/checkbox";
+import WidgetCountModify from "@/components/widgets/count-modify";
+import WidgetLoadMore from "@/components/widgets/loadmore";
+import ServicePreviewItem from "@/components/service/preview-item";
 export default {
     name: "order-cart",
     data() {
@@ -37,7 +103,7 @@ export default {
                             id: 3,
                             name: "厨房下水道",
                             icon: require("@/static/temp/cate/1.png"),
-                            buyNumber: 1,
+                            buyNumber: 10,
                         },
                     ],
                 },
@@ -46,14 +112,135 @@ export default {
     },
     components: {
         AppLayout,
+        WidgetTips,
+        WidgetCheckBox,
+        WidgetCountModify,
+        WidgetLoadMore,
+        ServicePreviewItem,
+    },
+    onLoad() {
+        this.list = this.parseList(this.list);
     },
-    onLoad() {},
     onShow() {},
     onReady() {},
     onReachBottom() {},
     onPullDownRefresh() {},
-    methods: {},
+    methods: {
+        parseList(list) {
+            let newList = [];
+            list.forEach((item, index) => {
+                list[index].checked = false;
+                list[index].total = 0;
+                list[index].list.forEach((v, i) => {
+                    list[index].list[i].checked = false;
+                });
+                newList.push(list[index]);
+            });
+            return newList;
+        },
+        clickGroup(parentIndex) {
+            this.list[parentIndex].list.forEach((item, itemIndex) => {
+                this.checkedItem(parentIndex, itemIndex);
+            });
+        },
+        clickItem(parentIndex, itemIndex) {
+            this.checkedItem(parentIndex, itemIndex);
+        },
+        // 选中单项
+        checkedItem(parentIndex, itemIndex) {
+            this.list[parentIndex].list[itemIndex].checked =
+                !this.list[parentIndex].list[itemIndex].checked;
+            let allChecked = true;
+            this.list[parentIndex].list.forEach((item, index) => {
+                if (!item.checked) {
+                    allChecked = false;
+                }
+            });
+            this.list[parentIndex].checked = allChecked;
+            this.$forceUpdate();
+        },
+        changeNumber(e, d) {
+            console.log(e);
+            console.log(d);
+        },
+    },
 };
 </script>
 
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped>
+.cart-container {
+    width: 710rpx;
+    margin: 24rpx auto 0 auto;
+}
+.cart-group {
+    width: 100%;
+    margin-bottom: 22rpx;
+    background-color: #ffffff;
+}
+.group-title {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 22rpx;
+    display: flex;
+    align-items: center;
+    .title {
+        margin-left: 22rpx;
+        font-size: 26rpx;
+        font-weight: bold;
+        color: #000000;
+    }
+}
+.group-items {
+    width: 100%;
+    .cart-item {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 0 22rpx;
+        margin-bottom: 50rpx;
+    }
+    .item-box {
+        position: relative;
+        width: 609rpx;
+        .component-add {
+            position: absolute;
+            right: 0;
+            bottom: 9rpx;
+        }
+    }
+}
+.bottom-btn-box {
+    width: 670rpx;
+    margin: 0 auto;
+    border-top: 2rpx solid #e1e1e1;
+    box-sizing: border-box;
+    padding: 26rpx 0;
+    display: flex;
+    justify-content: space-between;
+    .total-price {
+        .text {
+            font-size: 26rpx;
+            color: #000000;
+        }
+        .price {
+            font-size: 32rpx;
+            color: #ec7655;
+        }
+    }
+    .button {
+        width: 183rpx;
+        height: 54rpx;
+        line-height: 54rpx;
+        background: linear-gradient(-90deg, #8194f2, #8194f2);
+        text-align: center;
+        border-radius: 23rpx;
+        font-size: 24rpx;
+        color: #ffffff;
+    }
+}
+.more {
+    margin-top: 60rpx;
+}
+</style>
\ No newline at end of file