property-resident-side/property-uniapp-project/pages/online-repair/publicRepair.vue

<template>
  <view class="form-container">
    <!-- 维修项目展示 -->
    <view class="form-item">
      <text class="label">维修项目</text>
      <view class="value" @click="goBackSelect">
		  <view>
			  <text v-if="!repairProject">请选择项目</text>
			  {{ repairProject }}
		</view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>

    <!-- 标题输入 -->
    <view class="form-item">
      <text class="label">标题</text>
      <!-- <input type="text" placeholder="请输入问题标题" v-model="form.title" /> -->
	  <uni-easyinput v-model="form.title" placeholder="请输入内容" :inputBorder="false"></uni-easyinput>
    </view>

    <!-- 问题描述 -->
    <view class="form-item-wenti">
      <text class="label">问题描述</text>
      <!-- <textarea placeholder="请输入问题内容" v-model="form.desc" rows="5" ></textarea> -->
	  <uni-easyinput v-model="form.desc" placeholder="请描述你的问题" type="textarea"></uni-easyinput>
    </view>

    <!-- 手机号 -->
    <view class="form-item">
      <text class="label">手机号</text>
	  <uni-easyinput type="number" v-model="form.phone" placeholder="请输入手机号" :inputBorder="false"></uni-easyinput>
    </view>

    <!-- 图片上传 -->
    <view class="form-item-wenti">
      <text class="label">问题照片</text>
      <view class="upload-wrap">
        <!-- 已上传图片 -->
        <view class="upload-item" v-for="(img, index) in form.images" :key="index">
          <image :src="img" mode="aspectFill"></image>
          <uni-icons type="close" size="16" @click="deleteImage(index)"></uni-icons>
        </view>
        <!-- 上传按钮 -->
        <view class="upload-btn" @click="chooseImage">
          <uni-icons type="plus" size="24"></uni-icons>
          <text>上传照片</text>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <button class="submit-btn" @click="submitForm">提交</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import{onLoad} from "@dcloudio/uni-app"
// import { onLoad, uniShowToast, uniNavigateBack, uniChooseImage, uniUploadFile } from '@dcloudio/uni-app'

// 接收上个页面传的维修项目
const repairProject = ref('')

// 表单数据
const form = ref({
  title: '',
  desc: '',
  phone: '',
  images: [] // 图片列表
})

// 页面加载时获取传参
onLoad((options) => {
  if (options.category && options.project) {
    repairProject.value = `${options.category}-${options.project}`
  }
})

// 返回选择项目页
const goBackSelect = () => {
	uni.navigateTo({
		url:"/pages/online-repair/repairSelect"
	})
  // uni.navigateBack({
  //   delta: 1
  // })
}

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3, // 最多选3张
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      // 临时文件路径
      const tempFilePaths = res.tempFilePaths
      form.value.images = [...form.value.images, ...tempFilePaths]
      
      // 【可选】如果需要上传到服务器，取消下面注释
      // tempFilePaths.forEach(path => {
      //   uni.uploadFile({
      //     url: '你的上传接口地址',
      //     filePath: path,
      //     name: 'file',
      //     success: (uploadRes) => {
      //       console.log('上传成功', uploadRes)
      //     }
      //   })
      // })
    }
  })
}

// 删除图片
const deleteImage = (index) => {
  form.value.images.splice(index, 1)
}

// 表单提交
const submitForm = () => {
  // 表单校验
  if (!repairProject.value) {
    uni.showToast({ title: '请选择维修项目', icon: 'none' })
    return
  }
  if (!form.value.title) {
    uni.showToast({ title: '请输入问题标题', icon: 'none' })
    return
  }
  if (!form.value.desc) {
    uni.showToast({ title: '请输入问题描述', icon: 'none' })
    return
  }
  if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
    return
  }

  // 提交数据（替换成你的接口）
  uni.showLoading({ title: '提交中...' })
  
  // 模拟接口请求
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '提交成功', icon: 'success' })
    
    // 提交成功后重置表单/返回上一页
    // form.value = { title: '', desc: '', phone: '', images: [] }
    // 或返回上一页
    uni.navigateBack({ delta: 3 })
  }, 1000)
}
</script>

<style scoped>
.form-container {
  padding: 15px;
  background: #fff;
  min-height: 100vh;
}
.form-item-wenti {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.form-item {
  display: flex;
  margin-bottom: 30rpx;
  align-items: flex-start;
	border-bottom: 1px solid #eee;
}
.label {
  width: 140rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 80rpx;
}

.value {
  flex: 1;
  font-size: 28rpx;
  color: #666;
  line-height: 80rpx;
  text-align: right;
  display: flex;
  justify-content: space-between;
}
.input, .textarea {
  font-size: 14px;
  width: 100%;
  padding: 8px 0;
  box-sizing: border-box;
}
.textarea {
  resize: none;
}
.upload-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.upload-item {
  position: relative;
  width: 80px;
  height: 80px;
}
.upload-item image {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.upload-item uni-icons {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff3b30;
  color: #fff;
  border-radius: 50%;
  padding: 2px;
}
.upload-btn {
  width: 80px;
  height: 80px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 12px;
}
.submit-btn {
  width: 100%;
  background: #007aff;
  color: #fff;
  border-radius: 6px;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
}
</style>