12 changed files with 823 additions and 439 deletions
@ -0,0 +1,222 @@ |
|||
<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> |
|||
</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); |
|||
} |
|||
} |
|||
} |
|||
</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); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,136 @@ |
|||
<template> |
|||
<view class="reim-detail-page"> |
|||
<view class="header-bar"> |
|||
<view class="title">报销详情</view> |
|||
</view> |
|||
<view class="detail-box"> |
|||
<view class="row"> |
|||
<view class="label">报销金额</view> |
|||
<view class="value">￥{{ detail.amount }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">报销描述</view> |
|||
<view class="value">{{ detail.description }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">发票/收据</view> |
|||
<view class="value"> |
|||
<image v-if="detail.receipt_url && isImage(detail.receipt_url)" :src="detail.receipt_url" class="receipt-img" mode="aspectFit" /> |
|||
<view v-else-if="detail.receipt_url" class="file-link">{{ detail.receipt_url }}</view> |
|||
<text v-else>无附件</text> |
|||
</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">状态</view> |
|||
<view class="value status-{{detail.status}}">{{ statusMap[detail.status] || detail.status }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">创建时间</view> |
|||
<view class="value">{{ detail.created_at }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">修改时间</view> |
|||
<view class="value">{{ detail.updated_at }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
detail: {}, |
|||
statusMap: { |
|||
pending: '待审批', |
|||
approved: '已批准', |
|||
rejected: '已拒绝', |
|||
}, |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if (options.id) { |
|||
this.fetchDetail(options.id); |
|||
} else { |
|||
uni.showToast({ title: '缺少报销ID', icon: 'none' }); |
|||
uni.navigateBack(); |
|||
} |
|||
}, |
|||
methods: { |
|||
fetchDetail(id) { |
|||
// 模拟接口获取详情 |
|||
uni.showLoading({ title: '加载中...' }); |
|||
setTimeout(() => { |
|||
const mockData = { |
|||
id: id, |
|||
amount: 300.00, |
|||
description: '办公用品采购（已批准）', |
|||
receipt_url: 'https://cdn.uviewui.com/uview/swiper/1.jpg', |
|||
status: 'approved', |
|||
created_at: '2024-06-02 09:30', |
|||
updated_at: '2024-06-03 12:00', |
|||
}; |
|||
this.detail = mockData; |
|||
uni.hideLoading(); |
|||
}, 500); |
|||
}, |
|||
isImage(url) { |
|||
if (!url) return false; |
|||
return /\.(jpg|jpeg|png|gif|bmp)$/i.test(url) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.reim-detail-page { |
|||
min-height: 100vh; |
|||
background: #292929; |
|||
} |
|||
.header-bar { |
|||
padding: 32rpx 32rpx 0 32rpx; |
|||
.title { |
|||
font-size: 36rpx; |
|||
color: #24BA9F; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
.detail-box { |
|||
margin: 32rpx; |
|||
background: #434544; |
|||
border-radius: 18rpx; |
|||
padding: 32rpx 24rpx 24rpx 24rpx; |
|||
} |
|||
.row { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 32rpx; |
|||
.label { |
|||
color: #aaa; |
|||
font-size: 28rpx; |
|||
width: 180rpx; |
|||
flex-shrink: 0; |
|||
margin-top: 10rpx; |
|||
} |
|||
.value { |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
word-break: break-all; |
|||
} |
|||
.status-pending { color: #f0ad4e; } |
|||
.status-approved { color: #24BA9F; } |
|||
.status-rejected { color: #e74c3c; } |
|||
.receipt-img { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
border-radius: 8rpx; |
|||
background: #222; |
|||
border: 1rpx solid #333; |
|||
} |
|||
.file-link { |
|||
color: #24BA9F; |
|||
font-size: 26rpx; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,152 @@ |
|||
<template> |
|||
<view class="reim-list-page"> |
|||
<view class="header-bar"> |
|||
<view class="title">报销列表</view> |
|||
<fui-button |
|||
background="transparent" |
|||
color="#24BA9F" |
|||
borderColor="#24BA9F" |
|||
width="180rpx" |
|||
height="64rpx" |
|||
radius="32rpx" |
|||
@click="goAdd"> |
|||
新增报销 |
|||
</fui-button> |
|||
</view> |
|||
<view v-if="list.length === 0" class="empty-tip">暂无报销记录</view> |
|||
<view v-for="item in list" :key="item.id" class="reim-card" @click="goDetail(item)"> |
|||
<view class="row"> |
|||
<view class="label">金额：</view> |
|||
<view class="value">￥{{ item.amount }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">描述：</view> |
|||
<view class="value">{{ item.description }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">发票/收据：</view> |
|||
<view class="value"> |
|||
<image v-if="item.receipt_url" :src="item.receipt_url" class="receipt-img" mode="aspectFit" /> |
|||
<text v-else>无附件</text> |
|||
</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">状态：</view> |
|||
<view class="value status-{{item.status}}">{{ statusMap[item.status] || item.status }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">创建时间：</view> |
|||
<view class="value">{{ item.created_at }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [ |
|||
{ |
|||
id: 1, |
|||
amount: 120.50, |
|||
description: '差旅交通费', |
|||
receipt_url: '', |
|||
status: 'pending', |
|||
created_at: '2024-06-01 10:00', |
|||
}, |
|||
{ |
|||
id: 2, |
|||
amount: 300.00, |
|||
description: '办公用品采购', |
|||
receipt_url: 'https://cdn.uviewui.com/uview/swiper/1.jpg', |
|||
status: 'approved', |
|||
created_at: '2024-06-02 09:30', |
|||
}, |
|||
], |
|||
statusMap: { |
|||
pending: '待审批', |
|||
approved: '已批准', |
|||
rejected: '已拒绝', |
|||
}, |
|||
} |
|||
}, |
|||
methods: { |
|||
goAdd() { |
|||
uni.navigateTo({ |
|||
url: '/pages/market/reimbursement/add' |
|||
}); |
|||
}, |
|||
goDetail(item) { |
|||
// 待审批状态可编辑，否则只能查看 |
|||
if (item.status === 'pending') { |
|||
uni.navigateTo({ |
|||
url: `/pages/market/reimbursement/add?id=${item.id}` |
|||
}); |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: `/pages/market/reimbursement/detail?id=${item.id}` |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.reim-list-page { |
|||
min-height: 100vh; |
|||
background: #292929; |
|||
padding-bottom: 120rpx; |
|||
} |
|||
.header-bar { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 32rpx 32rpx 0 32rpx; |
|||
.title { |
|||
font-size: 36rpx; |
|||
color: #fff; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
.empty-tip { |
|||
color: #888; |
|||
text-align: center; |
|||
margin: 80rpx 0; |
|||
} |
|||
.reim-card { |
|||
background: #434544; |
|||
border-radius: 18rpx; |
|||
margin: 32rpx; |
|||
margin-bottom: 0; |
|||
padding: 32rpx 24rpx 24rpx 24rpx; |
|||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08); |
|||
.row { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 18rpx; |
|||
.label { |
|||
color: #aaa; |
|||
font-size: 26rpx; |
|||
width: 140rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.value { |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
word-break: break-all; |
|||
} |
|||
.status-pending { color: #f0ad4e; } |
|||
.status-approved { color: #24BA9F; } |
|||
.status-rejected { color: #e74c3c; } |
|||
.receipt-img { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 8rpx; |
|||
background: #222; |
|||
border: 1rpx solid #333; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue