php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: php:f149bfebc54d05f12adbe1d3d5c2ccbc5efc4df6
Branches Tags
php:master
...
compare: php:f18fe1dc0ee7d17be093ea450507c5c5b427cd6c
Branches Tags
php:master

2 Commits
f149bfebc5 ... f18fe1dc0e

Author SHA1 Message Date
于宏哲PHP f18fe1dc0e Merge branch 'master' of http://gitlab.frkj.cc/php/ZhiHuiJiaoWu_UniApp
9 months ago
于宏哲PHP 278723e0b3 1
9 months ago
4 changed files with 595 additions and 638 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. 12
      api/apiRoute.js
  2. 713
      pages/market/data/statistics.vue
  3. 480
      pages/market/reimbursement/add.vue
  4. 28
      pages/market/reimbursement/list.vue

12
api/apiRoute.js
View File

@ -346,7 +346,19 @@ export default {
async scheduleList(data = {}) { async scheduleList(data = {}) {
return await http.get('/course/scheduleList', data); return await http.get('/course/scheduleList', data);
}, },
async getStaffStatistics(data = {}) {
return await http.get('/statistics/getStaffStatistics', data);
},
async reimbursement_list(data = {}) {
return await http.get('/personnel/reimbursement_list', data);
},
async reimbursement_add(data = {}) {
return await http.post('/personnel/reimbursement_add', data);
},
async reimbursement_info(data = {}) {
return await http.get('/personnel/reimbursement_info', data);
},

713
pages/market/data/statistics.vue
View File

@ -1,413 +1,316 @@
<!--市场数据统计页面--> <!--市场数据统计页面-->
<template> <template>
<view class="main_box"> <view class="main_box">
<!--自定义导航栏--> <!--自定义导航栏-->
<view class="navbar_section"> <view class="navbar_section">
<view class="filter-item"> <view class="title">市场数据统计</view>
<view class="label">统计时间：</view> </view>
<picker mode="date" fields="month" :value="currentDate" @change="dateChange">
<view class="picker-value">{{currentDate}}</view> <!-- 顶部筛选 -->
</picker> <view class="filter-section">
</view> <view class="filter-item">
</view> <view class="label">统计时间：</view>
<picker mode="date" fields="month" :value="currentDate" @change="dateChange">
<view class="picker-value">{{currentDate}}</view>
<!-- 市场人员资源量统计 --> </picker>
<view class="table-section"> </view>
<view class="table-title">市场人员资源量统计</view> </view>
<view class="table-container">
<view class="table-header"> <!-- 市场人员资源量统计 -->
<view class="th th-person">人员</view> <view class="table-section">
<view class="th th-week">周数量</view> <view class="table-title">市场人员资源量统计</view>
<view class="th th-month">月数量</view> <view class="table-container">
<view class="th th-year">年数量</view> <view class="table-header">
</view> <view class="th th-person">人员</view>
<view class="table-body"> <view class="th th-week">周数量</view>
<view class="table-row" v-for="(item, index) in staffData" :key="index"> <view class="th th-month">月数量</view>
<view class="td td-person">{{item.name}}</view> <view class="th th-year">年数量</view>
<view class="td td-week">{{item.weekCount}}</view> </view>
<view class="td td-month">{{item.monthCount}}</view> <view class="table-body">
<view class="td td-year">{{item.yearCount}}</view> <view class="table-row" v-for="(item, index) in staffData" :key="index">
</view> <view class="td td-person">{{item.name}}</view>
</view> <view class="td td-week">{{item.weekCount}}</view>
</view> <view class="td td-month">{{item.monthCount}}</view>
</view> <view class="td td-year">{{item.yearCount}}</view>
</view>
<!-- 校区人员资源渠道量 --> </view>
<view class="table-section"> </view>
<view class="table-title">{{currentMonth}}月 - 年度校区人员资源渠道量</view> </view>
<view class="table-container">
<view class="table-header"> <!-- 校区人员资源渠道量 -->
<view class="th th-channel" style="width: 100px;">渠道</view> <view class="table-section">
<view class="th" v-for="(school, index) in schoolList" :key="index">{{school.name}}</view> <view class="table-title">{{currentMonth}}月 - 年度校区人员资源渠道量</view>
<view class="th th-total">渠道合计</view> <view class="table-container">
</view> <view class="table-header">
<view class="table-body"> <view class="th th-channel" style="width: 100px;">渠道</view>
<view class="table-row" v-for="(channel, index) in channelSchoolData" :key="index"> <view class="th" v-for="(school, index) in schoolList" :key="index">{{school.campus_name}}</view>
<view class="td td-channel" style="width: 100px;">{{channel.name}}</view> <view class="th th-total">渠道合计</view>
<view class="td" v-for="(school, sIndex) in schoolList" :key="sIndex"> </view>
{{channel.schools[school.id] || 0}} <view class="table-body">
</view> <view class="table-row" v-for="(channel, index) in channelList" :key="index">
<view class="td td-total">{{channel.total}}</view> <view class="td td-channel" style="width: 100px;">{{channel.name}}</view>
</view> <view class="td" v-for="(school, sIndex) in schoolList" :key="sIndex">
</view> {{channel[school.id] || 0}}
</view> </view>
</view> <view class="td td-total">{{channel.total}}</view>
</view>
<!-- 市场人员资源渠道统计 --> </view>
<view class="table-section"> </view>
<view class="table-title">{{currentMonth}}月 - 年度市场人员资源渠道统计</view> </view>
<view class="table-container">
<view class="table-header"> <!-- 市场人员资源渠道统计 -->
<view class="th th-channel" style="width: 100px;">渠道</view> <view class="table-section">
<view class="th" v-for="(staff, index) in marketStaffList" :key="index">市场{{staff.name}}</view> <view class="table-title">{{currentMonth}}月 - 年度市场人员资源渠道统计</view>
<view class="th th-total">资源合计</view> <view class="table-container">
</view> <view class="table-header">
<view class="table-body"> <view class="th th-channel" style="width: 100px;">渠道</view>
<view class="table-row" v-for="(channel, index) in channelStaffData" :key="index"> <view class="th" v-for="(staff, index) in staffData" :key="index">市场{{staff.name}}</view>
<view class="td td-channel" style="width: 100px;">{{channel.name}}</view> <view class="th th-total">资源合计</view>
<view class="td" v-for="(staff, sIndex) in marketStaffList" :key="sIndex"> </view>
{{channel.staffs[staff.id] || 0}} <view class="table-body">
</view> <view class="table-row" v-for="(channel, index) in channelList" :key="index">
<view class="td td-total">{{channel.total}}</view> <view class="td td-channel" style="width: 100px;">{{channel.name}}</view>
</view> <view class="td" v-for="(staff, sIndex) in staffData" :key="sIndex">
</view> {{staff['channel'][channel.value] || 0}}
</view> </view>
</view> <view class="td td-total">{{channel.total}}</view>
<!-- 底部导航--> </view>
<AQTabber /> </view>
</view> </view>
</view>
</view>
</template> </template>
<script> <script>
import apiRoute from '@/api/apiRoute.js'; import apiRoute from '@/api/apiRoute.js';
import AQTabber from "@/components/AQ/AQTabber.vue"
export default { export default {
components: { data() {
AQTabber, return {
}, currentDate: this.formatDate(new Date()),
data() { currentMonth: new Date().getMonth() + 1,
return { // 市场人员资源量统计
currentDate: this.formatDate(new Date()), staffData: [],
currentMonth: new Date().getMonth() + 1, // 校区列表
// 市场人员资源量统计 schoolList: [],
staffData: [{ // 渠道列表
name: 'A', channelList: [],
weekCount: 0, // 市场人员列表
monthCount: 0, marketStaffList: [
yearCount: 0 { id: 'A', name: 'A' },
}, { id: 'B', name: 'B' },
{ { id: 'C', name: 'C' },
name: 'B', { id: 'D', name: 'D' }
weekCount: 0, ],
monthCount: 0, // 校区渠道数据
yearCount: 0 channelSchoolData: [],
}, // 人员渠道数据
{ channelStaffData: []
name: 'C', }
weekCount: 0, },
monthCount: 0, onLoad() {
yearCount: 0 this.initData();
}, },
{ methods: {
name: 'D', // 格式化日期为 YYYY-MM
weekCount: 0, formatDate(date) {
monthCount: 0, const year = date.getFullYear();
yearCount: 0 const month = (date.getMonth() + 1).toString().padStart(2, '0');
}, return `${year}-${month}`;
{ },
name: 'E',
weekCount: 0, // 日期选择器变更
monthCount: 0, dateChange(e) {
yearCount: 0 this.currentDate = e.detail.value;
} const [year, month] = this.currentDate.split('-');
], this.currentMonth = parseInt(month);
// 校区列表 this.initData();
schoolList: [{ },
id: 1,
name: '校区1' // 初始化数据
}, async initData() {
{ // 模拟获取数据，实际项目中应该调用API
id: 2, await this.getStaffStatistics();
name: '校区2' // await this.getChannelSchoolStatistics();
}, // this.getChannelStaffStatistics();
{ },
id: 3,
name: '校区3' // 获取人员资源量统计
}, async getStaffStatistics() {
{ // 模拟数据，实际项目中应该调用API
id: 4, let res = await apiRoute.getStaffStatistics({date: this.currentDate})
name: '校区4'
}, console.log(res.data.staffData,"================");
{ this.staffData = res.data.staffData
id: 5, this.schoolList = res.data.schoolList
name: '校区5' this.channelList = res.data.channelList
}
], },
// 渠道列表
channelList: [{ // 获取校区渠道统计
id: 1, getChannelSchoolStatistics() {
name: '地推' // 模拟数据，实际项目中应该调用API
}, this.channelSchoolData = this.channelList.map(channel => {
{ const schools = {};
id: 2, let total = 0;
name: '转介绍'
}, this.schoolList.forEach(school => {
{ const count = Math.floor(Math.random() * 50);
id: 3, schools[school.id] = count;
name: '美团/大众' total += count;
}, });
{
id: 4, return {
name: '抖音' id: channel.id,
}, name: channel.name,
{ schools,
id: 5, total
name: '小红书' }
}, });
{ },
id: 6,
name: '其他' // 获取人员渠道统计
} getChannelStaffStatistics() {
], // 模拟数据，实际项目中应该调用API
// 市场人员列表 this.channelStaffData = this.channelList.map(channel => {
marketStaffList: [{ const staffs = {};
id: 'A', let total = 0;
name: 'A'
}, this.marketStaffList.forEach(staff => {
{ const count = Math.floor(Math.random() * 40);
id: 'B', staffs[staff.id] = count;
name: 'B' total += count;
}, });
{
id: 'C', return {
name: 'C' id: channel.id,
}, name: channel.name,
{ staffs,
id: 'D', total
name: 'D' }
} });
], }
// 校区渠道数据 }
channelSchoolData: [], }
// 人员渠道数据
channelStaffData: []
}
},
onLoad() {
this.initData();
},
methods: {
// 格式化日期为 YYYY-MM
formatDate(date) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
return `${year}-${month}`;
},
// 日期选择器变更
dateChange(e) {
this.currentDate = e.detail.value;
const [year, month] = this.currentDate.split('-');
this.currentMonth = parseInt(month);
this.initData();
},
// 初始化数据
initData() {
// 模拟获取数据，实际项目中应该调用API
this.getStaffStatistics();
this.getChannelSchoolStatistics();
this.getChannelStaffStatistics();
},
// 获取人员资源量统计
getStaffStatistics() {
// 模拟数据，实际项目中应该调用API
// 示例：apiRoute.getStaffStatistics({date: this.currentDate}).then(res => {})
// 模拟随机数据
this.staffData = this.staffData.map(staff => {
const monthCount = Math.floor(Math.random() * 100);
return {
...staff,
weekCount: Math.floor(Math.random() * 30),
monthCount: monthCount,
yearCount: monthCount + Math.floor(Math.random() * 200)
}
});
},
// 获取校区渠道统计
getChannelSchoolStatistics() {
// 模拟数据，实际项目中应该调用API
this.channelSchoolData = this.channelList.map(channel => {
const schools = {};
let total = 0;
this.schoolList.forEach(school => {
const count = Math.floor(Math.random() * 50);
schools[school.id] = count;
total += count;
});
return {
id: channel.id,
name: channel.name,
schools,
total
}
});
},
// 获取人员渠道统计
getChannelStaffStatistics() {
// 模拟数据，实际项目中应该调用API
this.channelStaffData = this.channelList.map(channel => {
const staffs = {};
let total = 0;
this.marketStaffList.forEach(staff => {
const count = Math.floor(Math.random() * 40);
staffs[staff.id] = count;
total += count;
});
return {
id: channel.id,
name: channel.name,
staffs,
total
}
});
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main_box { .main_box {
min-height: 100vh; min-height: 100vh;
background-color: #1a1a1a; background-color: #1a1a1a;
color: #ffffff; color: #ffffff;
padding-bottom: 30rpx; padding-bottom: 30rpx;
} }
.navbar_section { .navbar_section {
background-color: #1a1a1a; background-color: #1a1a1a;
height: 88rpx; height: 88rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
.title { .title {
font-size: 36rpx; font-size: 36rpx;
font-weight: bold; font-weight: bold;
} }
} }
.filter-section { .filter-section {
padding: 20rpx; padding: 20rpx;
background-color: #222222; background-color: #222222;
margin: 20rpx; margin: 20rpx;
border-radius: 10rpx; border-radius: 10rpx;
.filter-item { .filter-item {
display: flex; display: flex;
align-items: center; align-items: center;
.label { .label {
font-size: 28rpx; font-size: 28rpx;
margin-right: 10rpx; margin-right: 10rpx;
} }
.picker-value { .picker-value {
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
background-color: #333333; background-color: #333333;
border-radius: 6rpx; border-radius: 6rpx;
font-size: 28rpx; font-size: 28rpx;
} }
} }
} }
.table-section { .table-section {
margin: 30rpx 20rpx; margin: 30rpx 20rpx;
background-color: #222222; background-color: #222222;
border-radius: 10rpx; border-radius: 10rpx;
overflow: hidden; overflow: hidden;
.table-title { .table-title {
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
padding: 20rpx; padding: 20rpx;
border-bottom: 1px solid #333333; border-bottom: 1px solid #333333;
} }
.table-container { .table-container {
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
} }
.table-header { .table-header {
display: flex; display: flex;
background-color: #333333; background-color: #333333;
.th { .th {
padding: 15rpx 10rpx; padding: 15rpx 10rpx;
font-size: 26rpx; font-size: 26rpx;
text-align: center; text-align: center;
flex: 1; flex: 1;
min-width: 100rpx; min-width: 100rpx;
font-weight: bold; font-weight: bold;
} }
} }
.table-body { .table-body {
.table-row { .table-row {
display: flex; display: flex;
border-bottom: 1px solid #333333; border-bottom: 1px solid #333333;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
.td { .td {
padding: 15rpx 10rpx; padding: 15rpx 10rpx;
font-size: 26rpx; font-size: 26rpx;
text-align: center; text-align: center;
flex: 1; flex: 1;
min-width: 100rpx; min-width: 100rpx;
} }
} }
} }
.th-person, .th-person, .td-person {
.td-person { min-width: 80rpx;
min-width: 80rpx; flex: 0.8;
flex: 0.8; }
}
.th-week, .td-week,
.th-week, .th-month, .td-month,
.td-week, .th-year, .td-year {
.th-month, flex: 1;
.td-month, }
.th-year,
.td-year { .th-channel, .td-channel {
flex: 1; flex: 1.2;
} text-align: left;
padding-left: 20rpx;
.th-channel, }
.td-channel {
flex: 1.2; .th-total, .td-total {
text-align: left; flex: 1.2;
padding-left: 20rpx; font-weight: bold;
} }
}
.th-total, </style>
.td-total {
flex: 1.2;
font-weight: bold;
}
}
</style>

480
pages/market/reimbursement/add.vue
View File

@ -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>

28
pages/market/reimbursement/list.vue
View File

@ -43,27 +43,11 @@
</template> </template>
<script> <script>
import apiRoute from '@/api/apiRoute.js';
export default { export default {
data() { data() {
return { return {
list: [ 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: { statusMap: {
pending: '待审批', pending: '待审批',
approved: '已批准', approved: '已批准',
@ -71,7 +55,15 @@ export default {
}, },
} }
}, },
async onShow() {
await this.reimbursementList();
},
methods: { methods: {
async reimbursementList(){
let res = await apiRoute.reimbursement_list({})
this.list = res.data;
},
goAdd() { goAdd() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/market/reimbursement/add' url: '/pages/market/reimbursement/add'

Write Preview
Loading…
Cancel
Save