feat: 上报异常页面

pages.json

@@ -59,6 +59,13 @@
 			{
 				"navigationBarTitleText" : "完成服务"
 			}
+		},
+		{
+			"path" : "pages/order/report-order-exception",
+			"style" : 
+			{
+				"navigationBarTitleText" : "上报异常"
+			}
 		}
 	],
 	"globalStyle": {

pages/order/report-order-exception.vue

@@ -0,0 +1,145 @@
+<template>
+  <view class="ctr" v-if="data !== null">
+    <view class="form-group">
+      <view class="item input flex-sb line-after" @click="selectFinalPaymentMethod()">
+        <view class="title flex-l">异常原因</view>
+        <view v-if="submitData.final_payment_method === null" class="select-ctr flex-r">请异常原因</view>
+        <view v-else class="select-ctr flex-r select">{{submitData.final_payment_method === 1 ? '线下尾款' : '线上尾款'}}</view>
+      </view>
+      <view class="textarea">
+        <view class="title flex-l">异常说明</view>
+        <view class="value">
+          <textarea :disable-default-padding="true" class="input-textarea" v-model="submitData.detail"  placeholder-class="placeholder-class" placeholder="请输入异常说明（200字以内）"/>
+        </view>
+      </view>
+    </view>
+    <me-empty-space height="376"></me-empty-space>
+    <view class="bottom">
+      <me-button @click="submit()" text="立即上报" width="686rpx" icon-type="icon-arrow-up-line" margin-top="32rpx"></me-button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+
+import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
+import MeButton from "../../components/me-button/me-button.vue";
+import helpers from "../../utils/helpers";
+import {ref, reactive} from 'vue'
+import {onLoad} from '@dcloudio/uni-app'
+import api from "../../api/api";
+import {throttle} from "../../utils/throttle";
+import enums from "../../utils/enums";
+
+//提交
+const submit = throttle(() => {
+  if (!validate()) {
+    return false
+  }
+
+  uni.showModal({
+    title: '提示信息',
+    confirmText: '确认',
+    content: '确认已完成所有服务？',
+    success: function (res) {
+      if (res.confirm) {
+        uni.showLoading({
+          title: '提交中'
+        });
+
+        let data = helpers.deepObj(submitData)
+        data.complete_images = (submitData.complete_images).join(',')
+        data.order_dispatch_id = id.value
+
+        api.completeService(data).then(() => {
+          uni.hideLoading();
+          uni.showToast({
+            title: '已完成服务',
+            icon: "success"
+          })
+          setTimeout(() => {
+            uni.navigateBack();
+          }, 1000)
+        }).catch(() => {})
+      }
+    }
+  });
+})
+
+const id = ref(null)
+onLoad((params) => {
+  id.value = params.id
+  init()
+})
+
+const data = ref(null)
+const init = () => {
+  api.orderInfo({order_dispatch_id: id.value}).then(res => {
+    data.value = res
+  }).catch(() => {})
+}
+
+//提交数据
+const submitData = reactive({
+  abnormal_id: null,
+  detail: '',
+})
+
+const selectFinalPaymentMethod = () => {
+  uni.showActionSheet({
+    itemList: ['线下尾款', '线上尾款'],
+    success: function (res) {
+      submitData.final_payment_method = res.tapIndex + 1
+    },
+    fail: function (res) {
+      console.log(res.errMsg);
+    }
+  });
+}
+
+//验证提交数据
+const validate = () => {
+  if (submitData.abnormal_id === null) {
+    helpers.showToast('请选择异常原因')
+    return false
+  }
+
+  if (submitData.detail === '') {
+    helpers.showToast('请输入异常详情')
+    return false
+  }
+
+  return true
+}
+
+</script>
+
+<style lang="scss" scoped>
+.ctr {
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  height: 100vh;
+  .bottom {
+    width: 100%;
+    padding-top: 20rpx;
+    padding-bottom: 68rpx;
+    background: var(--pageBgColor);
+    box-sizing: border-box;
+    position: fixed;
+    bottom: 0;
+  }
+}
+</style>
+
+
+
+
+
+
+
+
+
+
+
+
+

pages/workbench/workbench.vue

@@ -60,7 +60,7 @@
             <text class="text">{{getOrderStatusText(item.status)}}</text>
           </view>
           <view class="operate flex-r">
-            <view class="btn flex-c" hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
+            <view class="btn flex-c" @click="reportOrderException(item.id)" hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
               <me-icon type="icon-arrow-up-line" color="#FFFFFF" size="40rpx"></me-icon>
               <text>上报异常</text>
             </view>
@@ -83,10 +83,16 @@ import helpers from "../../utils/helpers";
 import enums from "../../utils/enums";
 import WorkbenchSkeleton from "./workbench-skeleton";
 
+//订单详情
 const toDetail = (id) => {
   helpers.jumpToPage('order-info', `id=${id}`)
 }
 
+//上报异常
+const reportOrderException = (id) => {
+  helpers.jumpToPage('report-order-exception', `id=${id}`)
+}
+
 //是否显示骨架屏
 const isShowSkeleton = computed(() => {
   return data.list === null || countOrder === undefined

static/css/form.scss

@@ -18,6 +18,25 @@
   .item {
     width: 100%;
   }
+  .textarea {
+    width: 100%;
+    .title {
+      width: 100%;
+      height: 80rpx;
+      font-size: 30rpx;
+      color: var(--titleColor);
+    }
+    .value {
+      width: 100%;
+      height: 120rpx;
+      .input-textarea {
+        width: 100%;
+        height: 100%;
+        font-size: 30rpx;
+        color: var(--titleColor);
+      }
+    }
+  }
   .time {
     .item-row {
       width: 100%;

utils/helpers.js

@@ -25,6 +25,8 @@ class helpers {
 			'arrived-on-site': '/pages/order/arrived-on-site',
 			//完成服务
 			'complete-service': '/pages/order/complete-service',
+			//上报异常
+			'report-order-exception': '/pages/order/report-order-exception',
 		}
 
 		url = paths[pathName]