147 lines
3.2 KiB
Vue
147 lines
3.2 KiB
Vue
<template>
|
|
<view class="page_padding">
|
|
<view class="repairCompleted">
|
|
<view class="item">
|
|
<view class="title">
|
|
<text>维修描述</text>
|
|
</view>
|
|
<view class="descrition">
|
|
<textarea
|
|
:maxlength="500"
|
|
v-model="form.descrition"
|
|
auto-height
|
|
style="width: 100%"
|
|
placeholder-style="color:#e8e8e8;"
|
|
placeholder="请输入您的描述"
|
|
/>
|
|
<view class="maxlength"> {{ form.descrition.length }}/500 </view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="title">
|
|
<text>维修图片</text>
|
|
</view>
|
|
<view class="">
|
|
<filePicker
|
|
v-model="form.images"
|
|
file-field-name="file"
|
|
uploadUrl="/api/butler/file/uploadImage"
|
|
></filePicker>
|
|
</view>
|
|
</view>
|
|
<view class="action_btn" @tap="handleSelecthouse">
|
|
<text>确 认</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import filePicker from '@/components/filePicker/filePicker.vue'
|
|
import { ticketComputed } from '@/api/ticket.js'
|
|
import { PushSingle } from '@/api/common.js'
|
|
const form = ref({
|
|
id: '',
|
|
descrition: '',
|
|
images: []
|
|
})
|
|
|
|
onLoad(options => {
|
|
form.value.id = options.id
|
|
})
|
|
|
|
/** 返回上一页 */
|
|
function handleSelecthouse() {
|
|
const obj = {
|
|
id: form.value.id,
|
|
repairDes: form.value.descrition,
|
|
repairImageUrl: ''
|
|
}
|
|
if (form.value.images.length > 0) {
|
|
obj.repairImageUrl = form.value.images.join(',')
|
|
}
|
|
ticketComputed(obj)
|
|
.then(res => {
|
|
uni.navigateBack()
|
|
})
|
|
.catch(err => {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '提交错误'
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.repairCompleted {
|
|
padding: 20rpx 40rpx;
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
flex: 1;
|
|
|
|
.item {
|
|
margin-bottom: 28rpx;
|
|
.title {
|
|
padding-left: 16rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 36rpx;
|
|
}
|
|
.descrition {
|
|
min-height: 200rpx;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
border: 2rpx solid #ececec;
|
|
padding: 22rpx 18rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
padding-bottom: 40rpx;
|
|
.maxlength {
|
|
font-size: small;
|
|
position: absolute;
|
|
right: 1em;
|
|
bottom: 0.5em;
|
|
height: 22rpx;
|
|
line-height: 22rpx;
|
|
color: #e8e8e8;
|
|
}
|
|
}
|
|
.imageboxs {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
.images {
|
|
width: 160rpx;
|
|
margin-right: 20rpx;
|
|
height: 160rpx;
|
|
border-radius: 0rpx;
|
|
}
|
|
}
|
|
:deep(.file-picker__box-content.is-add) {
|
|
background-color: #f3f3f3 !important;
|
|
}
|
|
}
|
|
|
|
.action_btn {
|
|
width: 670rpx;
|
|
height: 80rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
background: #4d5dfa;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
</style>
|