feat: 服务质量页面

src/pages.json

@@ -432,6 +432,15 @@
 						"disableScroll": true
 					}
 				},
+				{
+					"path": "quality",
+					"style": {
+						"navigationBarTitleText": "订单质量",
+						"enablePullDownRefresh": false,
+						"navigationStyle": "custom",
+						"disableScroll": true
+					}
+				},
 				{
 					"path": "search",
 					"style": {

src/pages/order/complete.vue

@@ -1082,10 +1082,10 @@ export default {
         content: '是否查看本单服务质量详情？',
         confirmText: '好的',
         cancelText: '算了',
-        success: function (res) {
+        success: res => {
           if (res.confirm) {
             uni.reLaunch({
-              url: '/pages/mine/portrait/index',
+              url: `/pages/order/quality?id=${this.orderId}`,
             })
           } else if (res.cancel) {
             if (this.completeBack) {

src/pages/order/quality.vue

+<template>
+  <view class="order-wrap">
+    <u-navbar
+      title-color="#FFFFFF"
+      title-size="32"
+      back-icon-color="#FFFFFF"
+      :background="background"
+      :border-bottom="false"
+      :custom-back="goBack"
+      title-bold
+      title="服务质量"
+    ></u-navbar>
+    <view class="content">
+      <!-- 订单详情 -->
+      <view class="card">
+        <Detail
+          :order="order"
+          :readMore.sync="readMore"
+          :operate="true"
+        ></Detail>
+      </view>
+
+      <view class="view-block u-flex u-row-between">
+        <view class="u-flex-col l">
+          <view>
+            <u-image width="80rpx" height="80rpx" :src="imageUrl('quality-icon1.png')"></u-image>
+          </view>
+          <view class="name">系统接单时间</view>
+          <view class="value">2021.04.21 12:00:00</view>
+          <view class="name">实际接单时间</view>
+          <view class="value">2021.04.21 10:00:00</view>
+          <view class="result">
+            <text class="blue">接单准时</text>
+          </view>
+        </view>
+        <view class="r">
+          <u-image width="200rpx" height="200rpx" :src="imageUrl('quality-pass.png')"></u-image>
+        </view>
+      </view>
+
+      <view class="view-block u-flex u-row-between">
+        <view class="u-flex-col l">
+          <view>
+            <u-image width="80rpx" height="80rpx" :src="imageUrl('quality-icon2.png')"></u-image>
+          </view>
+          <view class="name">预约上门时间</view>
+          <view class="value">2021.04.21 12:00:00</view>
+          <view class="name">实际接单时间</view>
+          <view class="value">2021.04.21 10:00:00</view>
+          <view class="result">
+            <text>上门超时时长</text>
+            <text class="red">16小时30分钟</text>
+          </view>
+        </view>
+        <view class="r">
+          <u-image width="200rpx" height="200rpx" :src="imageUrl('quality-reject.png')"></u-image>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import Detail from '@/components/order/detail.vue'
+
+export default {
+  components: {
+    Detail
+  },
+  data() {
+    return {
+      type: '',
+      readMore: true, // 是：显示的是'查看更多'按钮；否：显示的是'点击收起'按钮
+      background: {
+        backgroundColor: 'none',
+      },
+      orderId: 11918973, // 测试数据
+      order: {}
+    }
+  },
+  computed: {
+    
+  },
+  onLoad(option) {
+    if (option && option.id) {
+      this.orderId = option.id
+    }
+
+    this.loadOrderDetail()
+  },
+  methods: {
+    imageUrl(name) {
+      return `${process.uniEnv.qn_base_url}${name}`
+    },
+    goBack() {
+      uni.switchTab({
+        url:'pages/index/order'
+      })
+    },
+    loadOrderDetail() {
+      // 获取工单详情
+      this.$u.api.orderDetail({}, this.orderId).then(res => {
+        if (res.code == 200) {
+          this.order = res.data
+        } else {
+          console.log(res.message, '获取订单详情失败！')
+        }
+      })
+    }
+  },
+}
+</script>
+<style lang="scss">
+.order-wrap {
+  .u-countdown-colon {
+    margin-left: 6rpx;
+    margin-right: 6rpx;
+  }
+  .u-mode-center-box {
+    background-color: transparent !important;
+    padding-top: 40rpx;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.order-wrap {
+  width: 750rpx;
+  height: 100vh;
+  overflow: auto;
+  background-color: #f4f5f7;
+  background-image: linear-gradient(to top, #f4f5f7 0%, #2272ff 50%);
+  background-size: 750rpx 600rpx;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+
+  .content {
+    height: 100%;
+    border-radius: 12rpx;
+    overflow: auto;
+    margin: 0rpx 30rpx 30rpx 30rpx;
+    .card {
+      background-color: #ffffff;
+      margin-bottom: 20rpx;
+      padding: 30rpx 30rpx 0 30rpx;
+      border-radius: 12rpx;
+    }
+    .view-block {
+      background: #fff;
+      padding: 30rpx;
+      margin-bottom: 20rpx;
+      border-radius: 12rpx;
+      .l {
+        .name {
+          color: #999;
+          font-size:40rpx;
+          padding-top: 30rpx;
+        }
+        .value {
+          color: #6A7D9E;
+          font-size:32rpx;
+          padding-top: 10rpx;
+        }
+        .result {
+          color: #333;
+          font-size: 28rpx;
+          padding-top: 30rpx;
+          .blue {
+            color: #2272FF;
+          }
+          .red {
+            color: #FA5A49;
+            margin-left: 20rpx;
+          }
+        }
+      }
+    }
+  }
+}
+</style>