4 changed files with 309 additions and 279 deletions
@ -1,222 +1,272 @@ |
|||||
<template> |
<template> |
||||
<view class="reim-add-page"> |
<view class="reim-add-page"> |
||||
<view class="header-bar"> |
<view class="header-bar"> |
||||
<view class="title">{{ pageTitle }}</view> |
<view class="title">{{ pageTitle }}</view> |
||||
</view> |
</view> |
||||
<view class="form-box"> |
<view class="form-box"> |
||||
<!-- 金额 --> |
<!-- 金额 --> |
||||
<view class="form-row"> |
<view class="form-row"> |
||||
<view class="label">报销金额</view> |
<view class="label">报销金额</view> |
||||
<input class="input-amount" type="number" v-model="form.amount" placeholder="0.00" :disabled="disabled" /> |
<input class="input-amount" type="number" v-model="form.amount" placeholder="0.00" |
||||
</view> |
:disabled="disabled" /> |
||||
<!-- 描述 --> |
</view> |
||||
<view class="form-row-top"> |
<!-- 描述 --> |
||||
<view class="label">报销描述</view> |
<view class="form-row-top"> |
||||
<textarea class="textarea" v-model="form.description" placeholder="请输入报销事由" :disabled="disabled" /> |
<view class="label">报销描述</view> |
||||
</view> |
<textarea class="textarea" v-model="form.description" placeholder="请输入报销事由" :disabled="disabled" /> |
||||
<!-- 附件 --> |
</view> |
||||
<view class="form-row"> |
<!-- 附件 --> |
||||
<view class="label">发票/收据</view> |
<view class="form-row"> |
||||
<view class="file-upload-wrapper"> |
<view class="label">发票/收据</view> |
||||
<view v-if="form.receipt_url" class="preview-box" @click="previewImage"> |
<view class="file-upload-wrapper"> |
||||
<image v-if="isImage(form.receipt_url)" :src="form.receipt_url" class="preview-img" mode="aspectFit" /> |
<view v-if="form.receipt_url" class="preview-box" @click="previewImage"> |
||||
<view v-else class="file-link">{{ getFileName(form.receipt_url) }}</view> |
<image v-if="isImage(form.receipt_url)" :src="form.receipt_url" class="preview-img" |
||||
</view> |
mode="aspectFit" /> |
||||
<button class="upload-btn" @click="chooseFile" :disabled="disabled"> |
<view v-else class="file-link">{{ getFileName(form.receipt_url) }}</view> |
||||
{{ form.receipt_url ? '重新选择' : '选择附件' }} |
</view> |
||||
</button> |
<button class="upload-btn" @click="chooseFile" :disabled="disabled"> |
||||
</view> |
{{ form.receipt_url ? '重新选择' : '选择附件' }} |
||||
</view> |
</button> |
||||
</view> |
</view> |
||||
<view class="save-btn-box" v-if="!disabled"> |
</view> |
||||
<fui-button background="#434544" color="#24BA9F" borderColor="#24BA9F" @click="submit">提交</fui-button> |
</view> |
||||
</view> |
<view class="save-btn-box" v-if="!disabled"> |
||||
</view> |
<fui-button background="#434544" color="#24BA9F" borderColor="#24BA9F" @click="submit">提交</fui-button> |
||||
|
</view> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
import apiRoute from '@/api/apiRoute.js'; |
||||
data() { |
import { |
||||
return { |
Api_url |
||||
pageTitle: '新增报销', |
} from "@/common/config.js"; |
||||
disabled: false, |
export default { |
||||
form: { |
data() { |
||||
id: null, |
return { |
||||
amount: '', |
uploadUrl: `${Api_url}/uploadImage`, |
||||
description: '', |
pageTitle: '新增报销', |
||||
receipt_url: '', |
disabled: false, |
||||
} |
form: { |
||||
} |
id: null, |
||||
}, |
amount: '', |
||||
onLoad(options) { |
description: '', |
||||
if (options.id) { |
receipt_url: '', |
||||
this.form.id = options.id; |
} |
||||
this.fetchDetail(options.id); |
} |
||||
} |
}, |
||||
}, |
onLoad(options) { |
||||
methods: { |
if (options.id) { |
||||
fetchDetail(id) { |
this.form.id = options.id; |
||||
uni.showLoading({ title: '加载中...' }); |
this.fetchDetail(options.id); |
||||
setTimeout(() => { |
} |
||||
const mockData = { |
}, |
||||
id: id, |
methods: { |
||||
amount: 120.50, |
async fetchDetail(id) { |
||||
description: '差旅交通费', |
uni.showLoading({ |
||||
receipt_url: '', |
title: '加载中...' |
||||
status: 'pending', |
}); |
||||
}; |
|
||||
|
let res = await apiRoute.reimbursement_info({id:id}) |
||||
if (mockData.status !== 'pending') { |
let mockData = res.data |
||||
this.disabled = true; |
|
||||
this.pageTitle = '查看报销'; |
if (mockData.status !== 'pending') { |
||||
} else { |
this.disabled = true; |
||||
this.pageTitle = '编辑报销'; |
this.pageTitle = '查看报销'; |
||||
} |
} else { |
||||
|
this.pageTitle = '编辑报销'; |
||||
this.form.amount = mockData.amount; |
} |
||||
this.form.description = `${mockData.description} (${this.disabled ? '不可编辑' : '待审批'})`; |
|
||||
this.form.receipt_url = mockData.receipt_url; |
this.form.amount = mockData.amount; |
||||
uni.hideLoading(); |
this.form.description = mockData.description; |
||||
}, 500); |
this.form.receipt_url = mockData.receipt_url; |
||||
}, |
uni.hideLoading(); |
||||
chooseFile() { |
}, |
||||
uni.chooseImage({ |
chooseFile() { |
||||
count: 1, |
|
||||
success: (res) => { |
uni.chooseImage({ |
||||
this.form.receipt_url = res.tempFilePaths[0]; |
count: 1, |
||||
} |
success: (res) => { |
||||
}); |
const tempFilePath = res.tempFilePaths[0] |
||||
}, |
// 这里可以调用上传接口 |
||||
isImage(url) { |
this.uploadFilePromise(tempFilePath) |
||||
if (!url) return false; |
} |
||||
return /\.(jpg|jpeg|png|gif|bmp)$/i.test(url); |
}) |
||||
}, |
}, |
||||
getFileName(path) { |
uploadFilePromise(url) { |
||||
if (!path) return ''; |
let token = uni.getStorageSync('token') || '' |
||||
return path.split('/').pop(); |
let a = uni.uploadFile({ |
||||
}, |
url: this.uploadUrl, //仅为示例，非真实的接口地址 |
||||
previewImage() { |
filePath: url, |
||||
if (this.form.receipt_url && this.isImage(this.form.receipt_url)) { |
name: 'file', |
||||
uni.previewImage({ |
header: { |
||||
urls: [this.form.receipt_url] |
'token': `${token}`, //请求头设置token |
||||
}); |
}, |
||||
} |
success: (e) => { |
||||
}, |
let res = JSON.parse(e.data.replace(/\ufeff/g, "") || "{}") |
||||
submit() { |
|
||||
if (!this.form.amount || !this.form.description) { |
if (res.code == 1) { |
||||
uni.showToast({ title: '请填写完整', icon: 'none' }); |
this.form.receipt_url = res.data.url |
||||
return; |
} else { |
||||
} |
uni.showToast({ |
||||
|
title: res.msg, |
||||
if (this.form.id) { |
icon: 'none' |
||||
uni.showToast({ title: '修改成功（待对接接口）', icon: 'success' }); |
}) |
||||
} else { |
} |
||||
uni.showToast({ title: '提交成功（待对接接口）', icon: 'success' }); |
}, |
||||
} |
}); |
||||
|
}, |
||||
setTimeout(() => { |
isImage(url) { |
||||
uni.navigateBack(); |
if (!url) return false; |
||||
}, 1000); |
return /\.(jpg|jpeg|png|gif|bmp)$/i.test(url); |
||||
} |
}, |
||||
} |
getFileName(path) { |
||||
} |
if (!path) return ''; |
||||
|
return path.split('/').pop(); |
||||
|
}, |
||||
|
previewImage() { |
||||
|
if (this.form.receipt_url && this.isImage(this.form.receipt_url)) { |
||||
|
uni.previewImage({ |
||||
|
urls: [this.form.receipt_url] |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
submit() { |
||||
|
if (!this.form.amount || !this.form.description) { |
||||
|
uni.showToast({ |
||||
|
title: '请填写完整', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
let res = apiRoute.reimbursement_add(this.form) |
||||
|
|
||||
|
if (res['code'] == 1) { |
||||
|
uni.showToast({ |
||||
|
title: '提交成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
uni.navigateBack(); |
||||
|
}, 1000); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="less" scoped> |
<style lang="less" scoped> |
||||
.reim-add-page { |
.reim-add-page { |
||||
min-height: 100vh; |
min-height: 100vh; |
||||
background: #292929; |
background: #292929; |
||||
padding-bottom: 120rpx; |
padding-bottom: 120rpx; |
||||
} |
} |
||||
.header-bar { |
|
||||
padding: 32rpx; |
.header-bar { |
||||
.title { |
padding: 32rpx; |
||||
font-size: 44rpx; |
|
||||
color: #fff; |
.title { |
||||
font-weight: bold; |
font-size: 44rpx; |
||||
} |
color: #fff; |
||||
} |
font-weight: bold; |
||||
.form-box { |
} |
||||
margin: 0 32rpx; |
} |
||||
background: #434544; |
|
||||
border-radius: 18rpx; |
.form-box { |
||||
padding: 0 24rpx; |
margin: 0 32rpx; |
||||
} |
background: #434544; |
||||
.form-row, .form-row-top { |
border-radius: 18rpx; |
||||
display: flex; |
padding: 0 24rpx; |
||||
padding: 32rpx 0; |
} |
||||
border-bottom: 1rpx solid #3a3a3a; |
|
||||
&:last-of-type { |
.form-row, |
||||
border-bottom: none; |
.form-row-top { |
||||
} |
display: flex; |
||||
} |
padding: 32rpx 0; |
||||
.form-row { |
border-bottom: 1rpx solid #3a3a3a; |
||||
align-items: center; |
|
||||
} |
&:last-of-type { |
||||
.form-row-top { |
border-bottom: none; |
||||
align-items: flex-start; |
} |
||||
} |
} |
||||
.label { |
|
||||
color: #aaa; |
.form-row { |
||||
font-size: 28rpx; |
align-items: center; |
||||
width: 180rpx; |
} |
||||
flex-shrink: 0; |
|
||||
} |
.form-row-top { |
||||
.input-amount { |
align-items: flex-start; |
||||
flex: 1; |
} |
||||
color: #fff; |
|
||||
font-size: 28rpx; |
.label { |
||||
text-align: right; |
color: #aaa; |
||||
} |
font-size: 28rpx; |
||||
.textarea { |
width: 180rpx; |
||||
flex: 1; |
flex-shrink: 0; |
||||
height: 180rpx; |
} |
||||
color: #fff; |
|
||||
font-size: 28rpx; |
.input-amount { |
||||
background-color: transparent; |
flex: 1; |
||||
padding: 0; |
color: #fff; |
||||
width: 100%; |
font-size: 28rpx; |
||||
} |
text-align: right; |
||||
.file-upload-wrapper { |
} |
||||
flex: 1; |
|
||||
display: flex; |
.textarea { |
||||
justify-content: flex-end; |
flex: 1; |
||||
align-items: center; |
height: 180rpx; |
||||
gap: 20rpx; |
color: #fff; |
||||
} |
font-size: 28rpx; |
||||
.upload-btn { |
background-color: transparent; |
||||
background: #24BA9F; |
padding: 0; |
||||
color: #fff; |
width: 100%; |
||||
border: none; |
} |
||||
border-radius: 8rpx; |
|
||||
padding: 0 32rpx; |
.file-upload-wrapper { |
||||
line-height: 64rpx; |
flex: 1; |
||||
height: 64rpx; |
display: flex; |
||||
font-size: 26rpx; |
justify-content: flex-end; |
||||
margin: 0; |
align-items: center; |
||||
} |
gap: 20rpx; |
||||
.preview-box { |
} |
||||
.preview-img { |
|
||||
width: 120rpx; |
.upload-btn { |
||||
height: 120rpx; |
background: #24BA9F; |
||||
border-radius: 8rpx; |
color: #fff; |
||||
background: #222; |
border: none; |
||||
border: 1rpx solid #333; |
border-radius: 8rpx; |
||||
} |
padding: 0 32rpx; |
||||
.file-link { |
line-height: 64rpx; |
||||
color: #24BA9F; |
height: 64rpx; |
||||
font-size: 26rpx; |
font-size: 26rpx; |
||||
word-break: break-all; |
margin: 0; |
||||
} |
} |
||||
} |
|
||||
.save-btn-box { |
.preview-box { |
||||
position: fixed; |
.preview-img { |
||||
left: 0; |
width: 120rpx; |
||||
right: 0; |
height: 120rpx; |
||||
bottom: 0; |
border-radius: 8rpx; |
||||
z-index: 100; |
background: #222; |
||||
background: #292929; |
border: 1rpx solid #333; |
||||
padding: 20rpx 40rpx 40rpx 40rpx; |
} |
||||
box-shadow: 0 -2rpx 8rpx rgba(0,0,0,0.12); |
|
||||
} |
.file-link { |
||||
</style> |
color: #24BA9F; |
||||
|
font-size: 26rpx; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.save-btn-box { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
z-index: 100; |
||||
|
background: #292929; |
||||
|
padding: 20rpx 40rpx 40rpx 40rpx; |
||||
|
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.12); |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue