wanyu_frontend/pages/order/report-order-exception.vue
2025-04-20 14:02:02 +08:00

149 lines
3.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="ctr" v-if="data !== null">
<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">请选择异常原因</view>
<view v-else class="select-ctr flex-r select">{{typeList[typeListIndex].title}}</view>
</view>
</picker>
<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";
const bindPickerChange = (e) => {
typeListIndex.value = e.detail.value;
submitData.abnormal_id = typeList.value[e.detail.value].id
}
const typeListIndex = ref(0)
//提交
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 typeList = ref(null)
const init = () => {
api.orderInfo({order_dispatch_id: id.value}).then(res => {
data.value = res
}).catch(() => {})
api.findExceptionTypeList().then(res => {
typeList.value = res
console.log(typeList.value)
}).catch(() => {})
}
//提交数据
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>