wanyu_frontend/pages/order/report-order-exception.vue

<template>
  <view class="ctr">
    <view class="form-group">
      <picker @change="bindPickerChange" range-key="title" :range="typeList">
        <view class="item input flex-sb line-after">
          <view class="title flex-l">异常原因</view>
          <view v-if="submitData.abnormal_id === 0" class="select-ctr flex-r">请选择异常原因
            <me-icon type="icon-arrow-right" color="var(--contentBgColor)" size="56rpx"></me-icon>
          </view>
          <view v-else class="select-ctr flex-r select">{{ abnormalTitle }}<me-icon type="icon-arrow-right" color="var(--contentBgColor)" size="56rpx"></me-icon></view>
        </view>
      </picker>

      <view class="textarea">
        <view class="title flex-l">异常说明</view>
        <view class="value">
          <textarea maxlength="200" :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="submitText" 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, computed} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import api from "../../api/api";
import {throttle} from "../../utils/throttle";
import MeIcon from "../../components/me-icon/me-icon.vue";

const bindPickerChange = (e) => {
  typeListIndex.value = e.detail.value;
  submitData.abnormal_id = typeList.value[e.detail.value].id
}

const typeListIndex = ref(0)

const abnormalTitle = computed(() => {
  if (submitData.abnormal_id === 0 || typeList.value === null) {
    return ''
  }

  const match = typeList.value.find(item => item.id === submitData.abnormal_id)
  return match ? match.title : ''
})

const submitText = computed(() => {
  if (orderInfo.value === null) {
    return '立即上报'
  }

  return '再次上报'
})

//提交
const submit = throttle(() => {
  if (!validate()) {
    return false
  }

  uni.showModal({
    title: '提示信息',
    confirmText: '确认',
    content: '确认上报异常？',
    success: function (res) {
      if (res.confirm) {
        uni.showLoading({
          title: '提交中'
        });

        submitData.order_id = orderId.value

        api.createOrderAbnormal(submitData).then(() => {
          helpers.delayHideLoading()
          uni.showModal({
            title: '提示信息',
            showCancel: false,
            content: '异常已上报',
            success: function (res) {
              if (res.confirm) {
                uni.navigateBack();
              }
            }
          });

          init()
        }).catch(() => {})
      }
    }
  });
})

const orderInfo = ref(null)
const init = () => {
  api.orderAbnormalInfo({order_id: orderId.value}).then(res => {
    if (res.id !== undefined) {
      orderInfo.value = res
      submitData.abnormal_id = orderInfo.value.abnormal_id
      submitData.detail = orderInfo.value.detail
    }

    helpers.delayHideLoading()
  }).catch(() => {})

  api.findExceptionTypeList().then(res => {
    typeList.value = res
  }).catch(() => {}).finally(() => {
    helpers.delayHideLoading()
  })
}

const orderId = ref(null)
onLoad((params) => {
  orderId.value = params.order_id
  uni.showLoading({
    title: '加载中'
  })
  init()
})

const typeList = ref(null)

//提交数据
const submitData = reactive({
  abnormal_id: 0,
  detail: '',
})

//验证提交数据
const validate = () => {
  if (submitData.abnormal_id === 0) {
    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>