ZhiHuiJiaoWu_UniApp/pages/market/reimbursement/add.vue

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