.

project.config.json

@@ -123,6 +123,12 @@
                     "name": "退款",
                     "pathName": "pages/refund",
                     "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "评价",
+                    "pathName": "pages/rate",
+                    "scene": null
                 }
             ]
         }

src/main.js

@@ -51,7 +51,8 @@ export default {
             'pages/article',
             'pages/rules',
             'pages/help',
-            'pages/refund'
+            'pages/refund',
+            'pages/rate'
         ],
         window: {
             backgroundTextStyle: 'light',
@@ -81,7 +82,8 @@ export default {
             'van-panel': '/vant/panel/index',
             'van-overlay': '/vant/overlay/index',
             'van-stepper': '/vant/stepper/index',
-            'van-steps': '/vant/steps/index'
+            'van-steps': '/vant/steps/index',
+            'van-rate': '/vant/rate/index'
         },
         permission: {
             'scope.userLocation': {

src/pages/order.vue

@@ -16,24 +16,55 @@
                 <van-tab title="已完成" name="FINISH,REFUNDED"> </van-tab>
             </van-tabs>
         </van-sticky>
-        <div class="order-item" v-for="item in list" :key="item.id">
-            <div slot="header" class="order-header">
+        <div class="order-item" v-for="(item, i) in list" :key="item.id" :class="{ detail: item.showDetail }">
+            <div slot="header" class="order-header" @click="showDetail(i)">
                 <div class="content">订单编号：{{ item.id }}</div>
                 <div class="status" :class="{ paid: item.isPaid }">{{ item.isPaid ? '已支付' : '未支付' }}</div>
                 <van-icon name="arrow" />
             </div>
             <view class="order-info">
-                <div class="row">
-                    <div class="label">{{ item.scenicName }}</div>
-                    <div class="value">{{ item.deviceNum }}台</div>
-                </div>
-                <div class="row">
-                    <div class="label">总租金</div>
-                    <div class="value">¥{{ item.totalPrice }}</div>
+                <div class="wrapper" v-if="item.showDetail">
+                    <div class="row">
+                        <div class="label">景区</div>
+                        <div class="value">{{ item.scenicName }}</div>
+                    </div>
+                    <div class="row">
+                        <div class="label">数量</div>
+                        <div class="value">{{ item.deviceNum }}副</div>
+                    </div>
+                    <div class="row">
+                        <div class="label">租金单价</div>
+                        <div class="value">
+                            {{ item.price }}元/次/副<span
+                                class="link"
+                                @click="navigateTo('/pages/article?name=计费细则')"
+                            >
+                                计费细则
+                            </span>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="label">总押金</div>
+                        <div class="value">已实名免押</div>
+                    </div>
+                    <div class="row">
+                        <div class="label">创建时间</div>
+                        <div class="value">{{ item.createdAt }}</div>
+                    </div>
+                    <div class="row">
+                        <div class="label">总租金</div>
+                        <div class="value">¥{{ item.totalPrice }}</div>
+                    </div>
+                    <div class="row">
+                        <div class="label">状态</div>
+                        <div class="value">{{ item.statusDesc }}</div>
+                    </div>
                 </div>
-                <div class="row">
-                    <div class="label">状态</div>
-                    <div class="value">{{ item.statusDesc }}</div>
+                <div class="row" v-else>
+                    <div class="label">{{ item.scenicName }}</div>
+                    <div class="value" style="text-align:right;padding-right:10px">
+                        <span style="font-size:18px">{{ item.deviceNum }} </span>副
+                    </div>
                 </div>
                 <view class="order-btns">
                     <div class="btn cancel" @click="cancel(item)" v-if="item.status === 'NOT_PAID'">
@@ -51,9 +82,16 @@
                     <div class="btn" @click="showCode(item)" v-if="item.status === 'USING'">
                         设备归还码
                     </div>
-                    <div class="btn" @click="refundDetail(item)" v-if="item.status === 'REFUNDED'">
+                    <div class="btn cancel" @click="refundDetail(item)" v-if="item.status === 'REFUNDED'">
                         已退款
                     </div>
+                    <div class="btn cancel" @click="rate(item)" v-if="item.status === 'FINISH'">
+                        评价
+                    </div>
+                    <div class="divider"></div>
+                    <button class="btn cancel disable" v-if="item.status === 'FINISH'">
+                        分享
+                    </button>
                 </view>
             </view>
         </div>
@@ -140,6 +178,7 @@ export default {
                 .then(res => {
                     this.list = res.map(item => {
                         item.isPaid = item.status === 'CREATED' || item.status === 'USING' || item.status === 'FINISH';
+                        item.showDetail = false;
                         return item;
                     });
                     wx.stopPullDownRefresh();
@@ -300,9 +339,7 @@ export default {
                         mask: true,
                         title: '加载中'
                     });
-                    return this.$http.post('/order/refund', {
-                        orderId: item.id
-                    });
+                    return this.$http.post(`/order/refund/${item.id}`);
                 })
                 .then(res => {
                     wx.hideLoading();
@@ -330,6 +367,27 @@ export default {
                     res.eventChannel.emit('order', item);
                 }
             });
+        },
+        navigateTo(url) {
+            wx.navigateTo({
+                url: url
+            });
+        },
+        showDetail(i) {
+            let show = !this.list[i].showDetail;
+            this.$set(this.list, i, { ...this.list[i], showDetail: show });
+            for (let n = 0; n < this.list.length; n++) {
+                if (n !== i && this.list[n].showDetail) {
+                    this.$set(this.list, n, { ...this.list[n], showDetail: false });
+                }
+            }
+        },
+        rate(item) {
+            if (!item.rated) {
+                wx.navigateTo({
+                    url: `/pages/rate?id=${item.id}`
+                });
+            }
         }
     },
     watch: {
@@ -337,6 +395,9 @@ export default {
             this.list = [];
             this.getData();
         }
+    },
+    onShareAppMessage(res) {
+        return this.share();
     }
 };
 </script>
@@ -354,7 +415,7 @@ export default {
     font-size: 14px;
     color: @text2;
     margin: 0 15px;
-    border-bottom: 1rpx solid @border2;
+    border-bottom: 1rpx solid @border3;
     .content {
         flex-basis: 0;
         flex-grow: 1;
@@ -380,7 +441,7 @@ export default {
         }
         .value {
             flex-grow: 1;
-            text-align: right;
+            text-align: left;
         }
     }
 }
@@ -405,13 +466,30 @@ export default {
         &.cancel {
             background: white;
             color: @text2;
-            border-top: 1rpx solid @border2;
+            border-top: 1rpx solid @border3;
             &:active {
                 background: shade(#ffffff, 10%);
             }
         }
+        &.disable {
+            background: white;
+            color: @text4;
+            border-top: 1rpx solid @border3;
+            &:active {
+                background: white;
+            }
+        }
+    }
+    .divider {
+        width: 1px;
+        height: 36px;
+        background: @border3;
     }
 }
+.link {
+    color: @prim;
+    text-decoration: underline;
+}
 </style>
 <style lang="less">
 page {
@@ -452,4 +530,14 @@ page {
 .overlay-index--van-overlay {
     z-index: 100 !important;
 }
+.order-item {
+    .van-icon-arrow {
+        transition: all 0.3s;
+    }
+    &.detail {
+        .van-icon-arrow {
+            transform: rotate(90deg);
+        }
+    }
+}
 </style>

src/pages/rate.vue

@@ -0,0 +1,110 @@
+<config>
+{
+    "navigationBarTitleText": "评价"
+}
+</config>
+<template>
+    <div>
+        <div class="dialog">
+            <div class="msg">
+                您对租赁服务人员满意吗？
+            </div>
+            <div class="btns">
+                <div class="btn" :class="{ active: satisfy === false }" @click="satisfy = false">
+                    <van-icon name="good-job-o" style="transform: rotateX(180deg)" />&nbsp;不满意
+                </div>
+                <div class="btn" :class="{ active: satisfy === true }" @click="satisfy = true">
+                    <van-icon name="good-job-o" />&nbsp;满意
+                </div>
+            </div>
+        </div>
+        <div class="dialog">
+            <div class="msg">
+                您对MR眼睛内容满意吗？
+            </div>
+            <div class="body">
+                <van-rate :size="32" :value="rate" @change="onChange" :gutter="14" />
+                <div class="desc">{{ rateDesc }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            satisfy: true,
+            rate: 5
+        };
+    },
+    computed: {
+        rateDesc() {
+            switch (this.rate) {
+                case 1:
+                    return '很不满意';
+                case 2:
+                    return '不满意';
+                case 3:
+                    return '一般';
+                case 4:
+                    return '满意';
+                case 5:
+                    return '很满意';
+            }
+            return '';
+        }
+    },
+    methods: {
+        onChange(e) {
+            console.log(e);
+            this.rate = e.detail;
+        }
+    }
+};
+</script>
+<style lang="less">
+page {
+    background: @bg;
+}
+.dialog {
+    background: white;
+    margin: 20px;
+    border-radius: 16px;
+    overflow: hidden;
+    .msg {
+        padding: 15px 20px;
+        font-size: 18px;
+        color: @text1;
+    }
+    .btns {
+        .flex();
+        .btn {
+            flex-basis: 0;
+            flex-grow: 1;
+            .flex();
+            justify-content: center;
+            font-size: 16px;
+            color: @text1;
+            height: 50px;
+            box-sizing: border-box;
+            border-top: 1px solid @border3;
+            &.active {
+                background: @prim;
+                color: white;
+                border-top: none;
+            }
+        }
+    }
+    .body {
+        margin: 0 20px;
+        text-align: center;
+        border-top: 1px solid @border3;
+        padding: 20px 0;
+        .desc {
+            margin-top: 10px;
+            font-size: 16px;
+            color: @text1;
+        }
+    }
+}
+</style>