settle_down_wx/pages/subPackages/intention/edit.vue

<template>
  <div class="propertyEditor">
    <ul class="detailUl">
      <li class="detailLi">
        <span class="liName"> 定金编号 </span>
        <div class="inputBox">
          <input
            placeholder="请输入"
            class="myIpt"
            v-model="form.serialNumber"
          />
        </div>
      </li>
      <li class="detailLi">
        <span class="liName"> 批次号-选房号 </span>
        <div class="inputBox">
          <div class="myIpt">
            {{ form.batchNumber + "-" + form.roomSelectionNumber }}
          </div>
        </div>
      </li>
      <li class="detailLi">
        <span class="liName"> 买受人 </span>
        <div class="inputBox">
          <input placeholder="请输入" class="myIpt" v-model="form.buyerName" />
        </div>
      </li>
      <li class="detailLi">
        <span class="liName"> 选房日期 </span>
        <div class="inputBox">
          <input
            placeholder="请输入"
            class="myIpt"
            v-model="form.roomSelectionDate"
          />
        </div>
      </li>

      <li class="detailLi">
        <span class="liName"> 应收定金（元） </span>
        <div class="inputBox">
          <input
            placeholder="请输入"
            class="myIpt"
            v-model="form.subscriptionFunds"
          />
        </div>
      </li>
    </ul>
    <ul class="detailUl">
      <li class="detailLi">
        <span class="liName">
          <span style="color: red">*</span>
          实收金额（元）
        </span>
        <div class="inputBox">
          <input
            placeholder="请输入"
            class="myIpt"
            v-model="form.receivedAmount"
          />
        </div>
      </li>
      <li class="detailLi">
        <span class="liName"> <span style="color: red">*</span> 收款方式 </span>
        <div class="inputBox">
          <picker
            range-key="label"
            @change="getPaymentMethod"
            :range="COLLECTION_METHODS"
          >
            <view class="uni-input">{{
              form.paymentMethod
                ? COLLECTION_METHODS[form.paymentMethod - 1].label
                : "请选择"
            }}</view>
          </picker>
        </div>
      </li>
      <li class="detailLi">
        <span class="liName"> <span style="color: red">*</span>收款时间 </span>
        <div class="inputBox">
          <picker
            mode="date"
            :value="form.collectionTime"
            :start="startDate"
            :end="endDate"
            @change="bindDateChange"
          >
            <div class="myIpt">
              {{ form.collectionTime ? form.collectionTime : "请选择" }}
            </div>
          </picker>
        </div>
      </li>

      <li class="detailLi2">
        <div class="titleBox">
          <span class="liName">备注</span>
        </div>
        <van-field
          :value="form.remark"
          @change="changeRemark"
          autosize
          type="textarea"
          placeholder="请输入"
          class="myField"
          maxlength="1000"
          show-word-limit
        />
      </li>
      <li class="detailLi2">
        <div class="titleBox" style="margin-bottom: 24rpx">
          <span class="liName">
            照片上传
            <span style="color: #b3b3b3; font-size: 28rpx"
              >（只能上传jpg/png格式，限制上传9张）</span
            >
          </span>
        </div>
        <van-uploader
          :max-count="9"
          @delete="deleteRYXXZP"
          :file-list="fileList"
          @after-read="uploadRYXXZP"
          :show-upload="true"
        />
      </li>

      <li class="detailLi">
        <span class="liName"> 经办人 </span>
        <div class="inputBox">
          <input
            placeholder="请输入"
            class="myIpt"
            disabled
            v-model="form.truename"
          />
        </div>
      </li>
      <li class="detailLi" style="border-bottom: none">
        <span class="liName"> 经办日期 </span>
        <div class="inputBox">
          <input
            placeholder="请输入"
            class="myIpt"
            v-model="form.collectionTime"
          />
        </div>
      </li>
    </ul>
    <button class="commitBtn" @tap="editIntentional">保存</button>
  </div>
</template>

<script>
import {
  getCustomerInfoById,
  ParkFloorDiscControllerGetById,
  getSerialNumber,
  getByCustomerManagementId,
  getByCodes,
  getUserLocalStorageInfo,
  editIntentional,
} from "@/js_sdk/http";
export default {
  name: "propertyEditor",
  data() {
    return {
      COLLECTION_METHODS: [],
      fileList: [],
      fileList2: [],
      buildFa: "",
      show: false,
      showTree: false,
      cascaderValue: null,
      fieldNames: {
        text: "label",
        value: "value",
        children: "children",
      },
      options: [],
      areaList: [],
      floorList: [],
      usegeList: [],
      natureList: [],
      enableList: [],
      cxList: [],
      situationList: [],
      statusList: [],
      popType: "",
      form: {},

      postData: {
        groupName: "",
        floorDiscName: "",
        buildName: "",
        roomNo: "",
        region: "",
        size: "",
        imgNo: "",
        floor: "",
        roomUse: "",
        roomUseLabel: "",
        propertyNature: "",
        direction: "",
        decorationSituation: "",
        floorHeight: "",
        bearing: "",
        electricity: "",
        guidePrice: "",
        remark: "",
        environmentPicture: "",
        planPicture: "",
        address: "",
      },
      dic_key: ["COLLECTION_METHODS"],
    };
  },
  onLoad(options) {
    this.form.userId = getUserLocalStorageInfo().id;
    this.form.truename = getUserLocalStorageInfo().truename;
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1; // 月份从 0 开始，因此需要加 1
    const day = now.getDate();
    this.form.collectionTime = `${year}-${month}-${day}`;
    this.options = options;
    this.getCustomerInfoById();
    this.getByCodes();
  },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
  },
  methods: {
    async editIntentional() {
      let fileList = JSON.parse(JSON.stringify(this.fileList));
      let fileListStr = fileList.map((e) => {
        return {
          url: e.imgUrl,
          id: e.id,
          data: e.id,

          type: "image",
          isImage: true,
        };
      });
      console.log({
        ...this.form,
        id: this.options.rowId,
        customerManagementId: this.options.id,
        fileList: JSON.stringify(fileListStr),
      });
      let data = await editIntentional({
        ...this.form,
        id: this.options.rowId,
        customerManagementId: this.options.id,
        fileList: JSON.stringify(fileListStr),
      });
    },
    getPaymentMethod(e) {
      this.form.paymentMethod = this.COLLECTION_METHODS[e.detail.value].value;
      console.log(e.detail.value);
      let form = { ...this.form };
      this.form = {};
      this.form = form;
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      let dic_SelectList = this.$common.handleDicList(data);
      this.COLLECTION_METHODS = dic_SelectList.COLLECTION_METHODS;
      console.log(this.COLLECTION_METHODS);
    },
    bindDateChange(e) {
      this.form.collectionTime = e.detail.value;
      console.log(e.detail.value);
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    async getSerialNumber() {
      let data = await getSerialNumber({
        customerManagementId: this.options.id,
      });
      this.form.serialNumber = data;
      console.log(data);
      let form = { ...this.form };
      this.form = {};
      this.form = form;
      this.ParkFloorDiscControllerGetById();
    },
    async getCustomerInfoById() {
      let data = await getCustomerInfoById({ id: this.options.id });
      console.log(data);
      this.form.roomSelectionDate = data.roomSelectionDate;
      this.form.batchNumber = data.batchNumber;
      this.form.roomSelectionNumber = data.roomSelectionNumber;
      this.form.buyerName = data.buyerName;
      this.form.intentionalDepositStatus = data.intentionalDepositStatus;
      //   this.form.receivedAmount = data.receivedAmount;
      console.log(this.form.buyerName);
      this.form.discId = data.discId;
      this.getSerialNumber();
    },
    changeRemark(e) {
      this.form.remark = e.detail;
      console.log(e.detail);
    },
    async ParkFloorDiscControllerGetById() {
      let data = await ParkFloorDiscControllerGetById({
        id: this.form.discId,
      });
      this.form.subscriptionFunds = data.subscriptionFunds;

      this.getByCustomerManagementId();
    },
    async getByCustomerManagementId() {
      let data = await getByCustomerManagementId({
        customerManagementId: this.options.id,
      });
      this.form.receivedAmount = data.receivedAmount ? data.receivedAmount : "";
      console.log("paymentMethod", data.paymentMethod);
      this.form.paymentMethod = data.paymentMethod + "";
      this.form.remark = data.remark;
      let fileList = JSON.parse(data.fileList);
      this.fileList = fileList;
      console.log(fileList);
      let form = { ...this.form };
      this.form = {};
      this.form = form;
    },
    deleteRYXXZP(event) {
      this.fileList.splice(event.detail.index, 1);
      this.$forceUpdate();
    },
    uploadRYXXZP(event) {
      // console.log(event)
      let that = this;
      const { file } = event.detail;
      console.log(event.detail);
      uni.uploadFile({
        url: that.$constant.BASE_URI + "/wx/FileController/upload",
        filePath: file.url,
        name: "file",
        formData: { user: "test" },
        success(res) {
          // 上传完成需要更新 fileList'
          console.log(JSON.parse(res.data));
          let data = JSON.parse(res.data);
          if (event.detail.file.type === "image") {
            that.fileList.push({
              imgUrl: "/FileController/download/" + data.data,
              id: data.data,
              url:
                that.$constant.BASE_URI +
                "/FileController/download/" +
                data.data,
              type: event.detail.file.type,
              isImage: true,
            });
          } else {
            that.fileList.push({
              imgUrl: "/FileController/download/" + data.data,
              id: data.data,
              url:
                that.$constant.BASE_URI +
                "/FileController/download/" +
                data.data,
              type: event.detail.file.type,
              isVideo: true,
            });
          }
        },
        fail(res) {},
      });
    },
  },
};
</script>

<style lang="scss">
.propertyEditor {
  padding-bottom: 150rpx;
  .detailUl {
    margin-top: 20rpx;
    background: white;
    padding: 0 32rpx;
    .liName {
      font-size: 32rpx;
      color: rgba(51, 51, 51, 1);
      white-space: nowrap;
      .callNumber {
        color: rgba(24, 23, 42, 1);
        font-size: 36rpx;
        font-weight: 600;
      }
      .callName {
        color: rgba(102, 102, 102, 1);
        font-size: 28rpx;
      }
    }
    .phoneIcon {
      width: 64rpx;
      height: 64rpx;
    }
    .detailLi {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0;
      border-bottom: 2rpx solid #e6e6e6;
      .liInfo {
        display: inline-block;
        text-align: right;
        max-width: 428rpx;
        color: rgba(102, 102, 102, 1);
        font-size: 32rpx;
        line-height: 38rpx;
        overflow: hidden;
        word-wrap: break-word;
      }
      .inputBox {
        display: flex;
        align-items: center;
      }
      .myIpt {
        text-align: right;
        margin-right: 20rpx;
        color: rgba(102, 102, 102, 1);
      }
    }
    .detailLi2 {
      display: flex;
      flex-direction: column;
      padding: 32rpx 0;
      border-bottom: 2rpx solid #e6e6e6;
      .detailLi2BoxTop {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 12rpx 0;
        .checkItem {
          width: 128rpx;
          height: 64rpx;
          font-size: 28rpx;
          color: #666666;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f5f7fa;
          border-radius: 8rpx;
          margin: 12rpx 0;
        }
        .checked {
          background: #0365f9;
          color: white;
        }
      }
      .locationBox {
        position: absolute;
        right: 24rpx;
        top: 100rpx;
      }
      .van-cell {
        background: #f5f7fa !important;
        border-radius: 8rpx;
        font-size: 28rpx;
        margin-top: 16rpx;
      }
    }
  }
  .commitBtn {
    width: 654rpx;
    height: 96rpx;
    background: rgba(3, 101, 249, 1);
    margin: 64rpx 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    color: white;
  }
}
</style>