settle_down_wx/pages/subPackages/repairDispatch-app/add.vue

<template>
  <div class="repair-box-add">
    <div class="repair-content fixed-page-content">
      <div class="white-box page-2">
        <div class="custom-item-tit">
          <p class="tit">当前企业</p>
        </div>
        <div class="custom-white-box-content">
          <div class="custom-input-box">
            <input
              type="text"
              :maxlength="50"
              placeholder="请输入"
              v-model="form.companyName"
            />
          </div>
        </div>
        <div class="cell-item">
          <p class="label required">您是想</p>
          <div class="tit">
            <van-radio-group v-model="form.type">
              <van-radio name="1" checked-color="#976CEB" custom-class="youwill"
                >报事</van-radio
              >
              <van-radio name="2" checked-color="#976CEB" custom-class="youwill"
                >咨询</van-radio
              >
            </van-radio-group>
          </div>
        </div>
        <div class="block-cell-item">
          <p class="label">快捷选择</p>
          <div class="tit">
            <ul class="custom-select-list">
              <li
                v-for="item in dic_SelectList.QUICK_SELECTION"
                v-if="item.value !== ''"
                :key="item.value"
                :class="{
                  active: quickSleced.value && item.value === quickSleced.value,
                }"
                @click="quickSelect(item)"
              >
                {{ item.label }}
              </li>
            </ul>

            <uni-easyinput
              type="textarea"
              autoHeight
              v-model="form.description"
              maxlength="800"
              class="bgcF9F9F9 height218rpx"
              placeholder="请输入"
            />
          </div>
        </div>
      </div>
      <div class="white-box page-3" style="padding-bottom: 200rpx">
        <div class="cell-item">
          <p class="label required">位置</p>
          <div class="tit">
            <van-radio-group v-model="form.position">
              <van-radio
                :name="item.val"
                checked-color="#976CEB"
                v-for="item in positionList"
                :key="item.val"
                @change="changePosition(item.val)"
                >{{ item.label }}</van-radio
              >
            </van-radio-group>
          </div>
        </div>
        <div class="block-cell-item">
          <p class="label">
            补充说明<span class="tips"
              >（支持图片/视频上传限20M内，最多6张）</span
            >
          </p>
          <div class="tit">
            <van-uploader
              :multiple="true"
              :file-list="fileUrlList"
              :max-count="6"
              @after-read="afterRead"
              @before-delete="beforeDelete"
              :show-upload="true"
            >
            </van-uploader>
          </div>
        </div>
        <div class="cell-item">
          <p class="label">报事人</p>
          <p class="tit">{{ form.userId }}</p>
        </div>
      </div>
    </div>
    <div class="repair-bottom bottom-button">
      <button class="btn" @click="submit()">提交</button>
    </div>
  </div>
</template>
<script>
// "van-radio": "/wxcomponents/weapp/dist/radio/index",
// "van-radio-group": "/wxcomponents/weapp/dist/radio-group/index",
import vanRadio from "../../../wxcomponents/weapp/dist/radio/index";
import vanRadioGroup from "../../../wxcomponents/weapp/dist/radio-group/index";

import {
  getCompanyById,
  addRepair,
  getByCodes,
  getUserLocalStorageInfo,
} from "@/js_sdk/http";
export default {
  components: {
    vanRadio,
    vanRadioGroup,
  },
  data() {
    return {
      dic_SelectList: {},
      dic_key: ["QUICK_SELECTION"],
      reportTypeSleced: "1",
      quickSleced: {},
      quickList: [],
      positionSleced: "1",
      positionList: [
        {
          val: "1",
          label: "室内",
        },
        {
          val: "2",
          label: "公区",
        },
      ],
      fileUrlList: [],
      fileUrls: [],
      form: {
        groupId: "",
        companyId: "",
        companyName: "",
        type: "1",
        serviceType: "",
        description: "",
        position: "1",

        fileUrl: "",
        status: "unAcceptance",
      },
    };
  },
  onLoad() {
    this.getByCodes(this.dic_SelectList);
    this.form.userId =
      getUserLocalStorageInfo().user.truename +
      "-" +
      getUserLocalStorageInfo().user.phone;
  },
  methods: {
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
    },
    /**
     *
     */
    quickSelect(item) {
      if (this.quickSleced.value && this.quickSleced.value === item.value) {
        this.quickSleced = {};
        console.log(123);
      } else {
        console.log(item);
        this.quickSleced = item;
        this.form.description = "";
        this.form.description = this.form.description + item.label;
      }
    },
    /**
     * 上传文件
     */
    // afterRead(file) {
    //   if (file instanceof Array) {
    //     file.map((v) => {
    //       this.uploadImg(v);
    //     });
    //   } else {
    //     this.uploadImg(file);
    //   }
    // },

    beforeDelete(file, detail) {
      // this.handleImagUrlList = []
      const vm = this;
      // name.index代表图片的索引
      vm.fileUrlList.splice(detail.index, 1);
      return (file, name) => {
        const fileIndex = name.index;
        vm.fileUrlList[detail.index].splice(fileIndex, 1);
      };
    },
    /**
     * 上传图片
     */

    afterRead(event) {
      let that = this;
      const { file } = event.detail;
      console.log(file);
      uni.uploadFile({
        url: that.$constant.BASE_URI + "/wx/fileController/upload",
        filePath: file[0].url,
        name: "file",
        formData: { user: "test" },
        success(res) {
          let { data } = JSON.parse(res.data);
          console.log(data[0]);

          that.fileUrlList.push({
            id: data[0],
            url:
              that.$constant.BASE_URI + "/FileController/download/" + data[0],
            isImage: true,
          });
          that.fileUrlList = [...that.fileUrlList];
          that.$forceUpdate();
          console.log(that.fileUrlList);
        },
        fail(res) {},
      });
    },
    submit() {
      let that = this;
      if (that.quickSleced.value == null || that.quickSleced.value === "") {
        this.$showToast("请选择服务类型");
        return;
      }
      let localStorageInfo = getUserLocalStorageInfo().user;
      that.form.groupId = "870261874875170816"; // 园区
      //   that.form.fileUrl = JSON.stringify(that.fileUrlList);
      let fileUrlList = "";
      if (that.fileUrlList && that.fileUrlList.length > 0) {
        fileUrlList = that.fileUrlList.map((e) => {
          return e.id;
        });
      }

      that.form.fileUrl = fileUrlList ? fileUrlList.join(",") : [];
      that.form.userId =
        localStorageInfo.id +
        "-" +
        localStorageInfo.truename +
        "-" +
        localStorageInfo.phone;
      that.form.serviceType = this.quickSleced.value;
      that.form.createdBy = localStorageInfo.id;
      addRepair(that.form).then((res) => {
        that.$showToast("填报成功");
        uni.navigateBack({});
        // this.$router.push({
        //   path: "/repairDispatch-app",
        // });
      });
    },
    changePosition(val) {},
  },
};
</script>
<style lang="scss" scoped>
// .youwill {
//   width: 50%;
//   float: left;
// }
.custom-item-tit {
  height: 13.333vw;
  font-size: 4.267vw;
  color: #333;
  padding: 2.667vw 0;
  position: relative;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  box-sizing: border-box;
  .tit {
    padding-left: 2.667vw;
    position: relative;
    &::after {
      content: "";
      width: 0.8vw;
      height: 90%;
      background-color: #976dec;
      border-radius: 0.4vw;
      position: absolute;
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }
  }
}
.fixed-page-content {
  width: 100%;
  height: 100%;
  padding-bottom: 190px;
  box-sizing: border-box;
  overflow-y: auto;
}
.icon-daichulihetong:before {
  content: "\e639";
}
.repair-box-add {
  width: 100%;
  height: 100%;
  .page-1 {
    font-size: 30rpx;
    color: #6600ff;
    padding: 30rpx;
    box-sizing: border-box;
    .page-1-head {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      i {
        font-size: 38rpx;
        margin-right: 10rpx;
      }
    }
  }

  .page-2 {
    .van-cell {
      padding: 20rpx;
      border-radius: 10rpx;
      background: $page-color-base;
      box-sizing: border-box;
      textarea {
        height: 60rpx;
      }
    }
  }
}
.custom-input-box {
  height: 80rpx;
  color: $text3;
  font-size: 30rpx;
  background: $home-bg-color;
  border-radius: 10rpx;

  .txt {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0 20rpx;
    line-height: 80rpx;
    box-sizing: border-box;
  }
  input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: transparent;
    padding: 0 20rpx;
    color: $text3;
    box-sizing: border-box;
  }
}
.cell-item {
  color: #333;
  padding: 30rpx 0;
  display: flex;
  justify-content: space-between;
  position: relative;
  &::after {
    position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 1rpx solid #ebedf0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  .label {
    flex: 1;
    width: 30%;
    .tips {
      font-size: 22rpx;
      color: #dddddd;
    }
    &.required {
      position: relative;
      &::after {
        content: "*";
        color: #fd4e4e;
        position: absolute;
        font-size: 30rpx;
        top: -15rpx;
        left: -15rpx;
      }
    }
  }
  .tit {
    color: #333;
    flex: 1;
    width: 70%;
    text-align: right;
  }
}
.white-box {
  width: 100%;
  font-size: 28rpx;
  padding: 0 40rpx;
  background-color: #ffffff;
  box-sizing: border-box;
  &:not(:last-child) {
    margin-bottom: 30rpx;
  }
  .flex-item {
    align-items: center;
    .tel-box {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .custom-tel-component {
        margin-left: 20rpx;
      }
    }
  }
  .cell-item {
    color: #333;
    padding: 30rpx 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: " ";
      pointer-events: none;
      right: 0;
      bottom: 0;
      left: 0;
      border-bottom: 1rpx solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    .label {
      flex: 1;
      width: 30%;
      .tips {
        font-size: 22rpx;
        color: #dddddd;
      }

      &.required {
        position: relative;
        &::after {
          content: "*";
          color: var#fd4e4e;
          position: absolute;
          font-size: 30rpx;
          top: -15rpx;
          left: -15rpx;
        }
      }
    }
    .tit {
      color: #333;
      flex: 1;
      width: 70%;
      text-align: right;
    }
  }
  .block-cell-item {
    color: #333;
    padding: 30rpx 0;
    position: relative;
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: " ";
      pointer-events: none;
      right: 16rpx;
      bottom: 0;
      left: 16rpx;
      border-bottom: 1rpx solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    .label {
      width: 100%;
      padding-bottom: 30rpx;
      &.required {
        position: relative;
        &::after {
          content: "*";
          color: #fd4e4e;
          position: absolute;
          font-size: 30rpx;
          top: -15rpx;
          left: -15rpx;
        }
      }
      .tips {
        font-size: 22rpx;
        color: #dddddd;
      }
    }
    .tit {
      width: 100%;
      color: #333;

      .textarea {
        background-color: #f8f8f8;
        font-size: 30rpx;
        color: #b7b7b7;
        border-radius: 10rpx;
        padding: 30rpx;
        word-break: break-all;
      }
    }
  }
  .custom-white-box-content {
    padding-bottom: 30rpx;
  }
}
.custom-select-list {
  color: $color4;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    font-size: 22rpx;
    margin-bottom: 25rpx;
    padding: 20rpx 0;
    width: 22%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 10rpx;
    border: 2rpx solid $text4;
    &.active {
      color: $text6;
      border-color: $text6;
    }
  }
}
.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 160rpx;
  padding: 35rpx 30rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  .btn {
    height: 100%;
    line-height: 80rpx;
    width: 100%;
    color: #fff;
    background-color: #6600ff;
    font-size: 34rpx;
    border-radius: 10rpx;
  }
}
</style>


<style lang="scss">
.repair-box-add {
  .van-radio-group {
    display: flex;

    .van-radio {
      width: 100%;
      padding-left: 30rpx;
    }
    .van-radio__label {
    }
  }
}
</style>