epmet-apartment-work-mp/pagesA/bxPage/bxReport.vue

<!-- 报修上报 -->
<template>
  <scroll-view class="bx-page" scroll-y="true">
    <image src="/static/img/bsorbxBac.png" class="contentImg"></image>
    <view class="bxTitle">填写信息</view>
    <view class="bxTips">请您填写相关问题</view>
    
    <view class="conItem">
      <u-form labelPosition="left">
        <u-form-item
          labelAlign="right"
          labelWidth="100px"
          label="报修物品"
          prop="repairItem"
          borderBottom
          required
        >
          <u--input
            v-model="form.repairItemName"
            disabledColor="#ffffff"
            placeholder="请输入"
            border="none"
            inputAlign="right"
          ></u--input>
          <!-- <template #right>
            <u-icon name="arrow-right"></u-icon>
          </template> -->
        </u-form-item>
        
        <u-form-item
          labelAlign="right"
          labelWidth="100px"
          label="故障说明"
          :borderBottom="false"
          required
          labelPosition="top"
        >
          <u--textarea
            v-model="form.faultDescription"
            placeholder="请输入详细故障说明"
            border="none"
            height="200rpx"
            custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;margin-top:16rpx;"
          ></u--textarea>
        </u-form-item>
        
        <u-form-item
          labelAlign="right"
          labelWidth="120px"
          label="上传图片/视频"
          :borderBottom="false"
          labelPosition="top"
        >
          <u-upload
            :max-count="10"
            :multiple="true"
            :preview-full-image="true"
            :deletable="true"
            :show-upload-list="true"
            :fileList="fileList"
            :auto-upload="false"
            accept="all"
            :maxSize="10 * 1024 * 1024"
            @oversize="oversize"
            @delete="onDelete"
            :disabled="true"
          >
            <view class="custom-upload-btn" @click.stop="chooseMedia">
              <view class="icon-box">
                <image
                  class="camera-icon"
                  src="/static/img/camera-icon.png"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="upload-tips">点击上传</view>
            </view>
          </u-upload>
        </u-form-item>
        
        <u-form-item
          labelAlign="right"
          labelWidth="100px"
          label="位置"
          prop="location"
          borderBottom
          @click="locationShow = true"
          required
        >
          <u--input
            v-model="form.locationName"
            disabled
            disabledColor="#ffffff"
            placeholder="请输入"
            border="none"
            inputAlign="right"
          ></u--input>
          <template #right>
            <u-icon name="arrow-right"></u-icon>
          </template>
        </u-form-item>
      </u-form>
    </view>
    
    <view class="btn" @click="handleSubmit">提交</view>
    
    <!-- 报修物品选择器 -->
    <u-action-sheet
      :show="itemShow"
      :actions="repairItemList"
      title="请选择报修物品"
      @close="itemShow = false"
      @select="handleItemSelect"
    >
    </u-action-sheet>
    
    <!-- 位置选择器 -->
    <u-action-sheet
      :show="locationShow"
      :actions="locationList"
      title="请选择位置"
      @close="locationShow = false"
      @select="handleLocationSelect"
    >
    </u-action-sheet>
  </scroll-view>
</template>

<script>
import { uploadImage } from "@/pages/api";
import { mapState } from "vuex";

export default {
  data() {
    return {
      itemShow: false,
      locationShow: false,
      repairItemList: [
        { dictValue: "1", name: "空调" },
        { dictValue: "2", name: "冰箱" },
        { dictValue: "3", name: "洗衣机" },
        { dictValue: "4", name: "热水器" },
        { dictValue: "5", name: "电视" },
        { dictValue: "6", name: "其他" }
      ],
      locationList: [
        { dictValue: "1", name: "客厅" },
        { dictValue: "2", name: "卧室" },
        { dictValue: "3", name: "厨房" },
        { dictValue: "4", name: "卫生间" },
        { dictValue: "5", name: "阳台" },
        { dictValue: "6", name: "其他" }
      ],
      form: {
        repairItem: "",
        repairItemName: "",
        faultDescription: "",
        location: "",
        locationName: "",
        imageList: [],
      },
      fileList: [],
    };
  },
  onLoad() {
    const userInfo = uni.getStorageSync("userInfo");
    if (userInfo) {
      this.$store.dispatch("user/setUserInfo", userInfo);
    }
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    chooseMedia() {
      uni.chooseMedia({
        count: 10 - this.fileList.length,
        mediaType: ["image", "video"],
        sourceType: ["album", "camera"],
        maxDuration: 60,
        camera: "back",
        success: async (res) => {
          const files = res.tempFiles;
          const oversizeFiles = files.filter(
            (file) => file.size > 10 * 1024 * 1024
          );
          if (oversizeFiles.length > 0) {
            this.$u.toast("请选择10MB以内大小的图片/视频！");
            return;
          }
          uni.showLoading({ title: "上传中...", mask: true });
          try {
            const files = res.tempFiles;
            for (let i = 0; i < files.length; i++) {
              const file = files[i];
              const filePath = file.tempFilePath;
              const type =
                file.fileType ||
                (filePath.match(/\.(mp4|mov|avi|wmv|flv|mkv)$/i)
                  ? "video"
                  : "image");
              const uploadRes = await uploadImage(filePath);
              this.fileList.push({
                url: uploadRes.data?.url || uploadRes.url || uploadRes.path,
                name: uploadRes.data?.name || uploadRes.name || "",
                type: type,
                status: "success",
              });
            }
            this.form.imageList = this.fileList.map((v) => ({
              name: v.name || "",
              format: v.type,
              url: v.url,
            }));
          } catch (e) {
            uni.showToast({ title: "上传失败", icon: "none" });
          } finally {
            uni.hideLoading();
          }
        },
        fail: () => {
          uni.hideLoading();
        },
      });
    },
    
    oversize(e) {
      this.$u.toast("请传10MB以内大小的图片/视频！");
      return false;
    },
    
    onDelete(event) {
      this.fileList.splice(event.index, 1);
      var arry = [];
      this.fileList.filter((v, i) => {
        arry.push({
          name: v.name || "",
          format: v.type,
          url: v.url,
        });
      });
      this.form.imageList = arry;
    },
    
    handleSubmit() {
      if (!this.form.repairItem) {
        uni.showToast({
          icon: "none",
          title: "请选择报修物品",
        });
        return;
      } else if (!this.form.faultDescription) {
        uni.showToast({
          icon: "none",
          title: "请输入故障说明",
        });
        return;
      } else if (!this.form.location) {
        uni.showToast({
          icon: "none",
          title: "请选择位置",
        });
        return;
      }
      
      let parmas = JSON.parse(JSON.stringify(this.form));
      delete parmas.repairItemName;
      delete parmas.locationName;
      
      console.log("提交报修信息", parmas);
      
      uni.showToast({
        icon: "success",
        title: "提交成功!",
      });
    },
    
    handleItemSelect(e) {
      this.form.repairItemName = e.name;
      this.form.repairItem = e.dictValue;
    },
    
    handleLocationSelect(e) {
      this.form.locationName = e.name;
      this.form.location = e.dictValue;
    },
  },
};
</script>

<style lang="scss" scoped>
.bx-page {
  width: 100%;
  height: 100vh;
  padding-bottom: 50rpx;
  box-sizing: border-box;
  background: #f8f8f8;
  position: relative;
}

.contentImg {
  position: absolute;
  left: 0rpx;
  top: 0rpx;
  width: 100%;
  height: 280rpx;
  z-index: 1;
}

.bxTitle {
  width: 100%;
  color: rgba(16, 16, 16, 1);
  font-size: 38rpx;
  font-weight: bold;
  margin-left: 30rpx;
  margin-top: 40rpx;
  z-index: 1;
  position: relative;
}

.bxTips {
  width: 100%;
  color: rgba(102, 102, 102, 1);
  font-size: 26rpx;
  margin-left: 30rpx;
  margin-top: 10rpx;
  z-index: 1;
  position: relative;


}

.conItem {
  width: calc(100% - 40rpx);
  border-radius: 20rpx;
  margin-left: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  margin-top: 20rpx;
  padding: 24rpx 36rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.btn {
  width: 414rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 600rpx;
  background: linear-gradient(
    86.25deg,
    rgba(13, 198, 198, 1) 3.03%,
    rgba(19, 194, 194, 1) 3.03%,
    rgba(70, 219, 213, 1) 96.43%
  );
  color: rgba(255, 255, 255, 1);
  font-size: 34rpx;
  text-align: center;
  margin: auto;
  margin-top: 40rpx;
  position: relative;
  z-index: 1;
}

.custom-upload-btn {
  width: 160rpx;
  height: 160rpx;
  background: #fafafa;
  border: 2rpx solid #f0f0f0;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20rpx 16rpx 0 0;
}

.icon-box {
  width: 60rpx;
  height: 60rpx;
  background: #ceeced;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-icon {
  width: 36rpx;
  height: 36rpx;
}

.upload-tips {
  color: #bbb;
  font-size: 24rpx;
  margin-top: 8rpx;
}

.u-upload__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20rpx;
}

.u-upload__preview {
  border-radius: 16rpx;
  overflow: hidden;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
}
</style>

<style lang="scss">
.bx-page {
  .u-form-item__body__left__content__required {
    font-size: 24rpx !important;
  }
}
</style>