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