pet-system-fulfiller-app/pages/orders/appeal/index.vue

<template>
  <view class="appeal-container">
    <!-- 自定义头部 -->
    <view class="custom-header">
      <view class="header-left" @click="navBack">
        <image class="back-icon" src="/static/icons/chevron_right_dark.svg" style="transform: rotate(180deg);"></image>
      </view>
      <text class="header-title">增改服务项</text>
      <view class="header-right"></view>
    </view>
    <view class="header-placeholder"></view>

    <!-- 顶部提示 -->
    <view class="banner-tip">
      <view class="tip-content">
        <text class="tip-title">服务变更申请</text>
        <text class="tip-desc">如需在服务过程中增加或修改服务内容，请在此提交申请并上传相关凭证。</text>
      </view>
      <image class="banner-img" src="/static/icons/service-classification.svg"></image>
    </view>

    <view class="form-wrapper">
      <!-- 选择服务项 -->
      <view class="form-section">
        <view class="section-label">
          <text class="label-text">变更服务项</text>
          <text class="required">*</text>
        </view>
        <picker @change="onServiceChange" :value="serviceIndex" :range="serviceOptions" range-key="name">
          <view class="picker-box">
            <text class="picker-value" :class="{ 'placeholder': serviceIndex === -1 }">
              {{ serviceIndex === -1 ? '请选择需要变更的服务项' : serviceOptions[serviceIndex].name }}
            </text>
            <image class="arrow-icon" src="/static/icons/nav_arrow.svg"></image>
          </view>
        </picker>
      </view>

      <!-- 履约佣金 -->
      <view class="form-section">
        <view class="section-label">
          <text class="label-text">履约佣金(元)</text>
          <text class="required">*</text>
        </view>
        <view class="input-box">
          <input 
            class="content-input" 
            type="digit"
            v-model="fulfillmentCommissionYuan" 
            placeholder="请输入新的履约佣金..." 
          />
        </view>
      </view>

      <!-- 上传凭证 -->
      <view class="form-section">
        <view class="section-label">
          <text class="label-text">图片凭证</text>
          <text class="required">*</text>
          <text class="label-sub">(最多6张)</text>
        </view>
        <view class="upload-grid">
          <view class="upload-item" v-for="(img, index) in imageList" :key="index" @click="previewImage(index)">
            <image :src="img" class="uploaded-img" mode="aspectFill"></image>
            <view class="delete-btn" @click.stop="deleteImage(index)">×</view>
          </view>
          <view class="upload-btn" v-if="imageList.length < 6" @click="chooseImage">
            <text class="plus">+</text>
            <text class="upload-text">上传凭证</text>
          </view>
        </view>
      </view>

      <!-- 变更说明 -->
      <view class="form-section">
        <view class="section-label">
          <text class="label-text">变更说明</text>
          <text class="label-sub">(选填)</text>
        </view>
        <view class="textarea-box">
          <textarea 
            class="content-textarea" 
            v-model="description" 
            placeholder="请详细描述具体的变更内容或原因..." 
            maxlength="500" 
            auto-height 
          />
          <text class="word-count">{{ description.length }}/500</text>
        </view>
      </view>
    </view>

    <!-- 底部确认按钮 -->
    <view class="bottom-action">
      <button class="confirm-btn" :class="{ 'disabled': !isReady }" @click="submitAppeal">确认提交</button>
    </view>
  </view>
</template>

<script>
import { listAllService } from '@/api/service/list'
import { uploadFile } from '@/api/fulfiller/app'
import { addSubOrderAppeal } from '@/api/order/subOrderAppeal'

export default {
  data() {
    return {
      orderId: '',
      serviceOptions: [],
      serviceIndex: -1,
      imageList: [],
      imageOssIds: [],
      description: '',
      fulfillmentCommissionYuan: ''
    }
  },
  computed: {
    isReady() {
      // 必须要选服务且上传了至少一张图片，并且填写了佣金
      return this.serviceIndex !== -1 && this.imageList.length > 0 && this.fulfillmentCommissionYuan !== '';
    }
  },
  async onLoad(options) {
    if (options.id) {
      this.orderId = options.id;
    }
    await this.fetchServices();
  },
  methods: {
    // 补齐一个简单的时间格式化工具
    formatNow() {
      const now = new Date();
      const pad = (n) => String(n).padStart(2, '0');
      const year = now.getFullYear();
      const month = pad(now.getMonth() + 1);
      const day = pad(now.getDate());
      const hours = pad(now.getHours());
      const minutes = pad(now.getMinutes());
      const seconds = pad(now.getSeconds());
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    async fetchServices() {
      try {
        const res = await listAllService();
        this.serviceOptions = res.data || [];
      } catch (err) {
        console.error('获取服务项失败:', err);
        uni.showToast({ title: err.message || err.msg || '请求失败', icon: 'none' });
      }
    },
    navBack() {
      uni.navigateBack({ delta: 1 });
    },
    onServiceChange(e) {
      this.serviceIndex = e.detail.value;
      const selectedService = this.serviceOptions[this.serviceIndex];
      // 当选择服务时，自动填充其默认的履约佣金，并转化为元显示
      if (selectedService && selectedService.fulfillmentCommission != null) {
        this.fulfillmentCommissionYuan = (selectedService.fulfillmentCommission / 100).toFixed(2);
      } else {
        this.fulfillmentCommissionYuan = '';
      }
    },
    chooseImage() {
      uni.chooseImage({
        count: 6 - this.imageList.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
          for (const path of res.tempFilePaths) {
            this.imageList.push(path);
            try {
              uni.showLoading({ title: '正在上传...', mask: true });
              const uploadRes = await uploadFile(path);
              if (uploadRes && uploadRes.data && uploadRes.data.ossId) {
                this.imageOssIds.push(uploadRes.data.ossId);
              }
              uni.hideLoading();
            } catch (err) {
              uni.hideLoading();
              console.error('上传凭证失败:', err);
              uni.showToast({ title: err.message || err.msg || '请求失败', icon: 'none' });
            }
          }
        }
      });
    },
    deleteImage(index) {
      this.imageList.splice(index, 1);
      this.imageOssIds.splice(index, 1);
    },
    previewImage(index) {
      uni.previewImage({
        urls: this.imageList,
        current: index
      });
    },
    async submitAppeal() {
      // 再次检查校验条件
      if (!this.isReady) {
        if (this.serviceIndex === -1) {
          uni.showToast({ title: '请先选择服务项', icon: 'none' });
        } else if (this.fulfillmentCommissionYuan === '') {
          uni.showToast({ title: '请输入履约佣金', icon: 'none' });
        } else if (this.imageList.length === 0) {
          uni.showToast({ title: '请上传至少一张凭证', icon: 'none' });
        }
        return;
      }

      uni.showLoading({ title: '提交中...', mask: true });
      
      try {
        const selectedService = this.serviceOptions[this.serviceIndex];
        const nowStr = this.formatNow();

        // 构造完整 JSON 入参
        const cents = Math.round(parseFloat(this.fulfillmentCommissionYuan) * 100) || 0;
        const data = {
          "orderId": this.orderId, // 保留原始类型（通常为 string 或 number）
          "service": selectedService.id,
          "photos": this.imageOssIds.join(','),
          "fulfillmentCommission": cents,
          "reason": this.description || '无详细备注',
          "createDept": 0,
          "createBy": 0,
          "createTime": nowStr,
          "updateBy": 0,
          "updateTime": nowStr,
          "params": {}
        };
        
        console.log('即将发起 API 请求:', data);
        const res = await addSubOrderAppeal(data);
        
        uni.hideLoading();
        if (res.code === 200 || res.msg === '操作成功') {
            uni.showToast({ title: '提交成功，请等待后续处理', icon: 'none', duration: 2000 });
            setTimeout(() => {
              uni.navigateBack({ delta: 1 });
            }, 2000);
        } else {
            uni.showToast({ title: res.msg || '提交异常，请稍后重试', icon: 'none', duration: 2000 });
        }
      } catch (err) {
        uni.hideLoading();
        console.error('提交失败详情:', err);
        uni.showToast({ title: err.message || err.msg || '请求失败', icon: 'none', duration: 2000 });
      }
    }
  }
}
</script>

<style scoped>
page {
  background-color: #F8F9FB;
}

.appeal-container {
  min-height: 100vh;
  padding-bottom: 180rpx;
}

/* 导航栏样式 */
.custom-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88rpx;
  padding-top: var(--status-bar-height);
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 30rpx;
  padding-right: 30rpx;
  box-sizing: content-box;
  z-index: 100;
}

.header-placeholder {
  height: calc(88rpx + var(--status-bar-height));
}

.back-icon {
  width: 44rpx;
  height: 44rpx;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.header-right {
  width: 44rpx;
}

/* Banner 提示 */
.banner-tip {
  background: linear-gradient(135deg, #FF9800 0%, #FF5722 100%);
  margin: 30rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 10rpx 20rpx rgba(255, 87, 34, 0.2);
}

.tip-content {
  flex: 1;
}

.tip-title {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.tip-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 24rpx;
}

.banner-img {
  width: 100rpx;
  height: 100rpx;
  opacity: 0.8;
}

/* 表单容器 */
.form-wrapper {
  margin: 0 30rpx;
}

.form-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
}

.section-label {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.label-text {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.required {
  color: #FF5722;
  margin-left: 6rpx;
}

.label-sub {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

/* 下拉选择框 */
.picker-box {
  background-color: #F8F9FA;
  height: 96rpx;
  padding: 0 30rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #EEEEEE;
}

.picker-value {
  font-size: 28rpx;
  color: #333;
}

.picker-value.placeholder {
  color: #999;
}

.arrow-icon {
  width: 24rpx;
  height: 24rpx;
  opacity: 0.3;
}

/* 输入框 */
.input-box {
  background-color: #F8F9FA;
  height: 96rpx;
  padding: 0 30rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  border: 1px solid #EEEEEE;
}

.content-input {
  width: 100%;
  font-size: 28rpx;
  color: #333;
}

/* 图片上传网格 */
.upload-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18rpx;
}

.upload-item, .upload-btn {
  width: calc((100% - 36rpx) / 3);
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
}

.uploaded-img {
  width: 100%;
  height: 100%;
}

.delete-btn {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

.upload-btn {
  background-color: #F8F9FA;
  border: 2rpx dashed #E0E0E0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.plus {
  font-size: 60rpx;
  color: #CCCCCC;
  line-height: 1;
}

.upload-text {
  font-size: 22rpx;
  color: #999;
  margin-top: 8rpx;
}

/* 文本域 */
.textarea-box {
  background-color: #F8F9FA;
  border-radius: 12rpx;
  padding: 24rpx;
  border: 1px solid #EEEEEE;
}

.content-textarea {
  width: 100%;
  min-height: 200rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.word-count {
  text-align: right;
  display: block;
  font-size: 22rpx;
  color: #BBB;
  margin-top: 10rpx;
}

/* 底部按钮 */
.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 30rpx 40rpx;
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.05);
  z-index: 99;
}

.confirm-btn {
  background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%);
  color: #fff;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  box-shadow: 0 8rpx 20rpx rgba(255, 87, 34, 0.3);
}

.confirm-btn.disabled {
  background: #E0E0E0;
  box-shadow: none;
  color: #fff;
}
</style>