xiangan/servicePages/pages/patrol.vue

<template>
  <view class="container">
    <view class="form-container">
      <view class="form-item">
        <text class="label">巡更名称</text>
        <text class="value">{{ patrolName }}</text>
      </view>
      
      <view class="form-item-column">
        <text class="label">上报描述</text>
        <textarea 
          class="textarea" 
          v-model="questionDescription" 
          placeholder="请输入上报描述" 
          placeholder-class="placeholder"
        />
      </view>
      <view class="form-item-column">
        <text class="label">异常图片</text>
        <view class="image-uploader">
          <view class="image-list">
            <view class="image-item" v-if="questionImage">
              <image :src="questionImage" mode="aspectFill" @click="previewImageQuest"></image>
              <view class="delete-icon" @click="deleteImageQuest">×</view>
            </view>
            <view class="add-btn" @click="chooseImageQuest">
              <text>+</text>
            </view>
          </view>
        </view>
      </view>
      <view class="form-item-column">
        <text class="label">处理描述</text>
        <textarea 
          class="textarea" 
          v-model="answerDescription" 
          placeholder="请输入处理描述" 
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="form-item-column">
        <text class="label">处理图片</text>
        <view class="image-uploader">
          <view class="image-list">
            <view class="image-item" v-if="answerImage">
              <image :src="answerImage" mode="aspectFill" @click="previewImage"></image>
              <view class="delete-icon" @click="deleteImage">×</view>
            </view>
            <view class="add-btn" @click="chooseImage">
              <text>+</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="button-container">
      <button class="submit-button" @click="submit">提交打卡</button>
    </view>
  </view>
</template>

<script>
import {addPatrolRecordReq, getPointInfoReq} from "@/api/common";
import {chooseImg} from "@/util";

export default {
  data() {
    return {
      patrolName: '',
      questionDescription: '',
      answerDescription: '',
      imageList: [],
      filedId: [],
      pointId: null,
      answerImage: null,
      questionImage: null,
    }
  },
  methods: {
    async chooseImage() {
      uni.showLoading({
        title: '上传中...',
      })
      const res = await chooseImg(1)
      this.answerImage = res[0].path
      uni.hideLoading()
    },
    previewImage() {
      uni.previewImage({
        urls: [this.answerImage],
        current: 0
      });
    },
    deleteImage() {
      this.answerImage = null;
    },

    async chooseImageQuest() {
      uni.showLoading({
        title: '上传中...',
      })
      const res = await chooseImg(1)
      this.questionImage = res[0].path
      uni.hideLoading()
    },
    previewImageQuest() {
      uni.previewImage({
        urls: [this.questionImage],
        current: 0
      });
    },
    deleteImageQuest() {
      this.questionImage = null;
    },

    async submit() {
      if (!this.questionDescription.trim()) {
        uni.showToast({
          title: '请输入上报描述',
          icon: 'none'
        });
        return;
      }
      
      if (!this.answerDescription.trim()) {
        uni.showToast({
          title: '请输入处理描述',
          icon: 'none'
        });
        return;
      }
      
      const formData = {
        patrolName: this.patrolName,
        questionDescription: this.questionDescription,
        answerDescription: this.answerDescription,
        answerImage: this.answerImage,
        questionImage: this.questionImage,
        patrolRouteId: this.pointData.patrolRoute.id,
        pointId: this.pointId,
      };
      
      console.log('提交数据:', formData);
      await addPatrolRecordReq(formData)
      
      // 这里调用提交接口
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      });
      
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }, 1500);
    },
    async getPointInfoReq(){
      const {data} = await getPointInfoReq(this.pointId)
      this.pointData = data
      this.patrolName = `${data.patrolRoute.routeName}-${data.pointName}`
    }
  },
  onLoad(e){
    this.pointId = e.scene;
    this.getPointInfoReq()
  },
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.form-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
}

.form-item, .form-item-column {
  padding: 30rpx 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 28rpx;
  
  &:last-child {
    border-bottom: none;
  }
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-item-column {
  display: flex;
  flex-direction: column;
  
  .label {
    margin-bottom: 20rpx;
  }
}

.label {
  color: #333;
  font-weight: 500;
}

.value {
  color: #333;
}

.textarea {
  width: 100%;
  height: 200rpx;
  font-size: 28rpx;
  border: 1px solid #e0e0e0;
  border-radius: 8rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.placeholder {
  color: #999;
}

.image-uploader {
  .image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }
  
  .image-item {
    position: relative;
    width: 150rpx;
    height: 150rpx;
    
    image {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
    }
    
    .delete-icon {
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      width: 30rpx;
      height: 30rpx;
      background: #ff4757;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20rpx;
      font-weight: bold;
    }
  }
  
  .add-btn {
    width: 150rpx;
    height: 150rpx;
    border: 2rpx dashed #ccc;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60rpx;
    color: #ccc;
    background-color: #fafafa;
  }
}

.button-container {
  margin-top: 40rpx;
}

.submit-button {
  background-color: #007aff;
  color: #fff;
  border-radius: 50rpx;
  font-size: 32rpx;
  padding: 20rpx 0;
}
</style>