代码提交

miniapp/app/pages/classify/index.json

@@ -1,3 +1,3 @@
 {
-    "navigationBarTitleText": "支付结果"
+    "navigationBarTitleText": "分类"
 }

miniapp/app/pages/classify/index.wxml

@@ -1,9 +1,118 @@
 <view class="page">
     <view class="page-bd">
-        <view class="card">
-            <image class="icon-status" src="/img/pay-success.png"></image>
-            <view class="status-text">支付成功</view>
-            <view class="btn-green">查看订单</view>
+        <view class="classify blue">
+            <view class="hd">
+                <text class="dot">●</text>家政</view>
+            <view class="bd">
+                <view class="item">
+                    <view class="inner">
+                        <view class="text">月嫂</view>
+                        <view class="sub-text">月嫂</view>
+                        <image class="icon-arr" src="/img/arr1.png"></image>
+                    </view>
+                </view>
+                <view class="item">
+                    <view class="inner">
+                        <view class="text">育婴师</view>
+                        <view class="sub-text">育婴师</view>
+                        <image class="icon-arr" src="/img/arr1.png"></image>
+                    </view>
+                </view>
+                <view class="item">
+                    <view class="inner">
+                        <view class="text">病人护理</view>
+                        <view class="sub-text">病人护理</view>
+                        <image class="icon-arr" src="/img/arr1.png"></image>
+                    </view>
+                </view>
+                <view class="item">
+                    <view class="inner">
+                        <view class="text">老人看护</view>
+                        <view class="sub-text">老人看护</view>
+                        <image class="icon-arr" src="/img/arr1.png"></image>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="classify green">
+            <view class="hd">
+                <text class="dot">●</text>钟点/家庭保洁服务</view>
+            <view class="bd">
+                <view class="item">
+                    <view class="inner">
+                        <view class="text">空调清洗</view>
+                        <view class="sub-text">空调清洗</view>
+                        <image class="icon-arr" src="/img/arr2.png"></image>
+                    </view>
+                </view>
+                <view class="item">
+                    <view class="inner">
+                        <view class="text">冰箱清洁</view>
+                        <view class="sub-text">冰箱清洁</view>
+                        <image class="icon-arr" src="/img/arr2.png"></image>
+                    </view>
+                </view>
+                <view class="item">
+                    <view class="inner">
+                        <view class="text">抽油烟机清洗</view>
+                        <view class="sub-text">抽油烟机清洗</view>
+                        <image class="icon-arr" src="/img/arr2.png"></image>
+                    </view>
+                </view>
+                <view class="item">
+                    <view class="inner">
+                        <view class="text">家庭除螨</view>
+                        <view class="sub-text">家庭除螨</view>
+                        <image class="icon-arr" src="/img/arr2.png"></image>
+                    </view>
+                </view>
+                <view class="item">
+                    <view class="inner">
+                        <view class="text">开荒清洁</view>
+                        <view class="sub-text">开荒清洁</view>
+                        <image class="icon-arr" src="/img/arr2.png"></image>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="classify pink">
+            <view class="hd">
+                <text class="dot">●</text>母婴产品</view>
+            <view class="bd">
+                <view class="item">
+                    <view class="inner">
+                        <view class="text">母婴产品</view>
+                        <view class="sub-text">母婴产品</view>
+                        <image class="icon-arr" src="/img/arr3.png"></image>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="classify orange">
+            <view class="hd">
+                <text class="dot">●</text>催乳及产后康复</view>
+            <view class="bd">
+                <view class="item">
+                    <view class="inner">
+                        <view class="text">催乳及产后康复</view>
+                        <view class="sub-text">催乳及产后康复</view>
+                        <image class="icon-arr" src="/img/arr4.png"></image>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="classify purple">
+            <view class="hd">
+                <text class="dot">●</text>月子及育婴知识咨询</view>
+            <view class="bd">
+                <view class="item">
+                    <view class="inner">
+                        <view class="text">月子及育婴知识咨询</view>
+                        <view class="sub-text">月子及育婴咨询</view>
+                        <image class="icon-arr" src="/img/arr5.png"></image>
+                    </view>
+                </view>
+            </view>
         </view>
     </view>
 </view>

miniapp/app/pages/classify/index.wxss

@@ -1,40 +1,106 @@
-page{
+page {
     background-color: #ebebeb;
 }
-.page{
+
+.page {
     overflow: hidden;
 }
-.card{
+
+.page-bd {
+    padding-top: 20rpx;
+}
+
+.classify {
+    margin-bottom: 20rpx;
+}
+
+.hd {
+    height: 52rpx;
+    line-height: 52rpx;
+    margin: 0 20rpx;
+    font-size: 24rpx;
+    color: #ffffff;
+    border-radius: 6rpx;
+}
+
+.hd .dot {
+    font-size: 18rpx;
+    display: inline-block;
+    margin: 0 14rpx;
+}
+
+.blue .hd {
+    background-color: #7069ff;
+}
+
+.blue .text {
+    color: #7069ff;
+}
+
+.green .hd {
+    background-color: #4ad008;
+}
+
+.green .text {
+    color: #4ad008;
+}
+
+.pink .hd {
+    background-color: #ff00b4;
+}
+
+.pink .text {
+    color: #ff00b4;
+}
+
+.orange .hd {
+    background-color: #ff7800;
+}
+
+.orange .text {
+    color: #ff7800;
+}
+
+.purple .hd {
+    background-color: #cd12f5;
+}
+
+.purple .text {
+    color: #cd12f5;
+}
+
+.bd {
+    margin: 0 10rpx;
+}
+
+.item {
+    margin-top: 20rpx;
+    display: inline-block;
+    width: 33.33%;
+}
+
+.inner {
+    margin: 0 10rpx;
     background-color: #fff;
-    margin: 74rpx auto 0;
-    border-radius: 40rpx;
-    width: 600rpx;
-    height: 800rpx;
-    overflow: hidden;
+    border-radius: 6rpx;
+    padding: 20rpx 12rpx;
+    position: relative;
 }
 
-.icon-status{
-    display: block;
-    margin: 100rpx auto 0;
-    width: 141rpx;
-    height: 141rpx;
+.icon-arr {
+    width: 34rpx;
+    height: 34rpx;
+    position: absolute;
+    bottom: 20rpx;
+    right: 12rpx;
 }
 
-.status-text{
-    text-align: center;
-    font-size: 46rpx;
-    color: #494949;
-    margin-top: 80rpx;
+.text {
+    font-size: 22rpx;
 }
 
-.btn-green{
-    width: 300rpx;
-    height: 80rpx;
-    text-align: center;
-    line-height: 80rpx;
-    border-radius: 40rpx;
-    color: #fff;
-    font-size: 30rpx;
-    background-color: #1aad19;
-    margin: 210rpx auto 0;
+.sub-text {
+    font-size: 20rpx;
+    color: #999999;
+    margin-top: 10rpx;
 }

miniapp/app/pages/order/index.json

@@ -1,3 +1,3 @@
 {
-    "navigationBarTitleText": "支付结果"
+    "navigationBarTitleText": "我的订单"
 }

miniapp/app/pages/order/index.wxml

@@ -1,9 +1,5 @@
 <view class="page">
     <view class="page-bd">
-        <view class="card">
-            <image class="icon-status" src="/img/pay-success.png"></image>
-            <view class="status-text">支付成功</view>
-            <view class="btn-green">查看订单</view>
-        </view>
+
     </view>
 </view>

miniapp/app/pages/order/index.wxss

@@ -1,40 +0,0 @@
-page{
-    background-color: #ebebeb;
-}
-.page{
-    overflow: hidden;
-}
-.card{
-    background-color: #fff;
-    margin: 74rpx auto 0;
-    border-radius: 40rpx;
-    width: 600rpx;
-    height: 800rpx;
-    overflow: hidden;
-}
-
-.icon-status{
-    display: block;
-    margin: 100rpx auto 0;
-    width: 141rpx;
-    height: 141rpx;
-}
-
-.status-text{
-    text-align: center;
-    font-size: 46rpx;
-    color: #494949;
-    margin-top: 80rpx;
-}
-
-.btn-green{
-    width: 300rpx;
-    height: 80rpx;
-    text-align: center;
-    line-height: 80rpx;
-    border-radius: 40rpx;
-    color: #fff;
-    font-size: 30rpx;
-    background-color: #1aad19;
-    margin: 210rpx auto 0;
-}