完成订单列表页面

src/components/order/action.vue

@@ -3,8 +3,11 @@
         <view class="btn">
             <text>立即抢单</text>
         </view>
-        <view class="btn active">
+        <view class="btn" @click="setPrice">
-            <text>立即报价</text>
+            <text>尾款确认</text>
+        </view>
+        <view v-if="false" class="btn">
+            <text>取消报价</text>
         </view>
         <view v-if="false" class="btn normal">
             <text>已完成</text>
@@ -37,11 +40,8 @@ export default {
     mounted() {},
     destroyed() {},
     methods: {
-        getOrder() {
+        setPrice() {
-            console.log("获取" + this.order.id);
+            this.$emit("setPrice");
-        },
-        postPrice() {
-            this.$emit("postPrice");
         },
     },
 };

src/components/order/item.vue

@@ -1,7 +1,12 @@
 <template>
     <view class="component-order-item">
         <view class="order-head">
-            <view class="title">{{ order.username }}-{{ order.cate }}</view>
+            <view class="order-title">
+                <text class="type" :style="{ backgroundColor: models.order.getOrderTypeColor(order.orderType) }">
+                    {{ models.order.getOrderTypeText(order.orderType) }}
+                </text>
+                <text class="text">{{ order.username }}-{{ order.cate }}</text>
+            </view>
             <view class="more">
                 <text class="text">详情</text>
                 <text class="iconfont icon-jinru"></text>
@@ -42,7 +47,9 @@
 export default {
     name: "component-order-item",
     data() {
-        return {};
+        return {
+            models: this.$models,
+        };
     },
     props: {
         order: {
@@ -75,18 +82,32 @@ export default {
         align-items: center;
         justify-content: space-between;
         padding-top: 40rpx;
-        .title {
+    }
+    .order-title {
+        display: flex;
+        align-items: center;
+        .type {
+            display: inline-block;
+            box-sizing: border-box;
+            padding: 9rpx 24rpx;
+            border-radius: 10rpx;
+            font-size: 24rpx;
+            color: #ffffff;
+            line-height: 24rpx;
+            margin-right: 22rpx;
+        }
+        .text {
             font-size: 30rpx;
             font-weight: bold;
             color: #000000;
             line-height: 30rpx;
         }
-        .more {
+    }
-            font-size: 26rpx;
+    .more {
-            font-weight: bold;
+        font-size: 26rpx;
-            color: #666666;
+        font-weight: bold;
-            line-height: 32rpx;
+        color: #666666;
-        }
+        line-height: 32rpx;
     }
     .order-body {
         width: 100%;

src/core/models/order.js

@@ -26,6 +26,30 @@ export default {
         // 无法退款
         CAN_NOT_REFUND: 8,
     },
+    getOrderTypeColor(type) {
+        switch (type) {
+            case this.type.NORMAL:
+                return '#0ec4ad';
+            case this.state.WORKER_PRICE:
+                return '#0ec4ad';
+            case this.state.CUSTOM_PRICE:
+                return '#0ec4ad';
+            default:
+                return '#ff0000';
+        }
+    },
+    getOrderTypeText(type) {
+        switch (type) {
+            case this.type.NORMAL:
+                return '一口价';
+            case this.state.WORKER_PRICE:
+                return '报价';
+            case this.state.CUSTOM_PRICE:
+                return '议价';
+            default:
+                return '未知';
+        }
+    },
     getOrderStateTextColor(state) {
         switch (state) {
             case this.state.NO_PAY:

src/pages/order/order.vue

@@ -1,20 +1,31 @@
 <template>
     <app-layout v-model="safePt" title="订单" btnType="unset">
         <view class="order-container">
-            <view class="scroll-cate" :style="{ top: safePt + 'px' }">
+            <view class="fixed-box" :style="{ top: safePt + 'px' }">
-                <scroll-view scroll-x>
+                <view class="search-order">
-                    <view class="cate-group">
+                    <text class="iconfont icon-sousuo"></text>
-                        <view
+                    <input
-                            class="cate-item"
+                        class="input"
-                            v-for="(item, index) in tabList"
+                        v-model="keywords"
-                            :key="index"
+                        placeholder="输入订单编号/客户姓名/电话"
-                            :class="{ active: tabIndex == index }"
+                        placeholder-class="placeholder-style-3"
-                            @click="tabIndex = index"
+                    />
-                        >
+                </view>
-                            {{ item.name }}
+                <view class="scroll-box">
+                    <scroll-view scroll-x>
+                        <view class="cate-group">
+                            <view
+                                class="cate-item"
+                                v-for="(item, index) in tabList"
+                                :key="index"
+                                :class="{ active: tabIndex == index }"
+                                @click="tabIndex = index"
+                            >
+                                {{ item.name }}
+                            </view>
                         </view>
-                    </view>
+                    </scroll-view>
-                </scroll-view>
+                </view>
             </view>
             <view class="order-group">
                 <swiper :current="tabIndex" :style="{ height: tabHeight + 'px' }" @change="changeTab">
@@ -24,7 +35,7 @@
                                 <order-item :order="v">
                                     <view class="order-action">
                                         <view class="price">¥ 306.00</view>
-                                        <order-action :order="v" @postPrice="postPrice(v.id)" />
+                                        <order-action :order="v" @setPrice="showPriceModal(v.id)" />
                                     </view>
                                 </order-item>
                             </view>
@@ -36,6 +47,28 @@
                 </swiper>
             </view>
         </view>
+        <widget-modal title="尾款确认" :show="priceModal" @close="priceModal = false">
+            <view class="modal-content">
+                <view class="input-row">
+                    <text class="title">费用增加</text>
+                    <input
+                        class="input"
+                        type="number"
+                        v-model="currentOrder.price"
+                        @input="currentOrder.price = parseFloat(currentOrder.price)"
+                    />
+                    <text class="unit">
+                        <text class="iconfont icon-qingchu" @click="currentOrder.price = 0"></text>
+                        <text class="text">元</text>
+                    </text>
+                </view>
+                <view class="desc">
+                    <text class="text">1)添加后，请客户在小程序订单中支付尾款</text>
+                    <text class="text">2)没有尾款的话，请直接点击确认提交</text>
+                </view>
+                <view class="btn" @click="setPrice">确认添加</view>
+            </view>
+        </widget-modal>
     </app-layout>
 </template>
 
@@ -44,12 +77,13 @@ import AppLayout from "@/components/layout/layout";
 import OrderItem from "@/components/order/item";
 import OrderAction from "@/components/order/action";
 import LoadMore from "@/components/widgets/loadmore";
+import WidgetModal from "@/components/widgets/modal";
 export default {
     name: "get-index",
     data() {
         return {
             utils: this.$utils,
-            postModal: false,
+            priceModal: false,
             safePt: 0,
             tabIndex: 0,
             tabHeight: 0,
@@ -130,6 +164,11 @@ export default {
                     list: [],
                 },
             ],
+            currentOrder: {
+                id: 0,
+                price: 0,
+            },
+            keywords: "",
         };
     },
     components: {
@@ -137,6 +176,7 @@ export default {
         OrderItem,
         OrderAction,
         LoadMore,
+        WidgetModal,
     },
     onLoad() {
         this.$nextTick(() => {
@@ -166,6 +206,14 @@ export default {
                 }
             });
         },
+        showPriceModal(id) {
+            this.currentOrder.id = id;
+            this.priceModal = true;
+        },
+        setPrice() {
+            console.log(this.currentOrder);
+            this.priceModal = false;
+        },
     },
 };
 </script>
@@ -175,30 +223,56 @@ export default {
     width: 100%;
     padding-bottom: 50rpx;
 }
-.scroll-cate {
+.fixed-box {
     z-index: 15;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
-    background-color: #f7a134;
+    background-color: #f6f6f6;
 }
-.cate-group {
+.search-order {
-    width: 100%;
+    display: flex;
-    height: 96rpx;
+    align-items: center;
-    white-space: nowrap;
+    width: 670rpx;
+    height: 66rpx;
+    margin: 0 auto 20rpx auto;
     box-sizing: border-box;
-    padding: 5rpx 0;
+    padding: 20rpx;
-    .cate-item {
+    background-color: #ffffff;
-        display: inline-block;
+    border-radius: 10rpx;
-        height: 86rpx;
+    .iconfont {
-        line-height: 86rpx;
+        display: block;
-        margin: 0 20rpx;
+        flex-shrink: 0;
-        color: #ffffff;
+        margin-right: 20rpx;
+        font-size: 28rpx;
     }
-    .cate-item.active {
+    .input {
+        width: 100%;
+        font-size: 24rpx;
+        color: #bebebe;
+    }
+}
+.scroll-box {
+    width: 100%;
+    background-color: #f7a134;
+    .cate-group {
+        width: 100%;
+        height: 96rpx;
+        white-space: nowrap;
         box-sizing: border-box;
-        border-bottom: 7rpx solid #ffffff;
+        padding: 5rpx 0;
+        .cate-item {
+            display: inline-block;
+            height: 86rpx;
+            line-height: 86rpx;
+            margin: 0 20rpx;
+            color: #ffffff;
+        }
+        .cate-item.active {
+            box-sizing: border-box;
+            border-bottom: 7rpx solid #ffffff;
+        }
     }
 }
 .order-group {
@@ -206,9 +280,9 @@ export default {
     position: relative;
     width: 100%;
     box-sizing: border-box;
-    padding-top: 122rpx;
+    padding-top: 202rpx;
     .order-item-box {
-        margin-bottom: 26rpx;
+        margin-bottom: 20rpx;
         background-color: #ffffff;
         box-sizing: border-box;
         padding: 0 40rpx;
@@ -231,4 +305,56 @@ export default {
         padding: 20rpx 0;
     }
 }
+.modal-content {
+    width: 100%;
+    .input-row {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 40rpx 0;
+        border-bottom: 4rpx solid #f5f5f5;
+        .title {
+            font-size: 28rpx;
+            color: #666666;
+        }
+        .input {
+            width: 308rpx;
+            height: 72rpx;
+            box-sizing: border-box;
+            border: 1px solid #d8d8d8;
+            text-align: center;
+        }
+        .unit {
+            color: #333333;
+        }
+        .iconfont {
+            display: inline-block;
+            font-size: 30rpx;
+            margin-right: 22rpx;
+        }
+        .text {
+            font-size: 28rpx;
+        }
+    }
+    .desc {
+        padding: 24rpx 0;
+        .text {
+            display: block;
+            font-size: 24rpx;
+            color: #999999;
+            line-height: 36rpx;
+        }
+    }
+    .btn {
+        width: 100%;
+        height: 68rpx;
+        line-height: 68rpx;
+        text-align: center;
+        font-size: 32rpx;
+        color: #ffffff;
+        background-color: #7286f1;
+        margin-top: 15rpx;
+    }
+}
 </style>