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