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

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

@ -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);
}
</style>
.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>

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

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

Write Preview
Loading…
Cancel
Save