product_wx/pages/subPackages/todo/predetermineDetail.vue

<template>
    <div class="predetermineDetail">
       <ul class="predetermineUl">
          <li class="predetermineLi">
            <div class="liName">项目/企业名称</div>
            <input v-model="postData.companyName" class="liIpt">
          </li>
          <li class="predetermineLi2">
            <div class="liName">项目/企业简介</div>
            <van-field
                :value="postData.constant"
                autosize
                type="textarea"
                placeholder="请输入"
                class="myField"
                maxlength="800"
                show-word-limit
            />
          </li>
          <li class="predetermineLi2">
            <div class="liName">企业需求</div>
            <van-field
                :value="postData.demand"
                autosize
                type="textarea"
                placeholder="请输入"
                class="myField"
                maxlength="800"
                show-word-limit
            />
          </li>
         <li class="predetermineLi">
           <div class="liName">项目/企业联系人</div>
           <input v-model="postData.contact" class="liIpt" placeholder="请输入">
         </li>
         <li class="predetermineLi" style="border-bottom: none">
           <div class="liName">联系电话</div>
           <input v-model="postData.phone" class="liIpt" placeholder="请输入">
         </li>
       </ul>
      <div class="predetermineBox">
          <div class="titleBox">
            <span class="titleName">关联房源</span>
            <van-icon name="add" style="color:rgba(3, 101, 249, 1)"/>
            <span class="tips">（如有多个房源，可继续添加）</span>
          </div>
        <div class="houseBox">
           <div class="houseTag" v-for="item in 2">一期-A-1101</div>
        </div>
      </div>
      <div class="predetermineBox">
          <div class="titleBox" style="margin-bottom: 24rpx">
            <span class="titleName">其他附件</span>
            <span class="tips">（支持图片，最多12张）</span>
          </div>
        <van-uploader
            :max-count="12"
            @delete="deleteRYXXZP"
            :file-list="fileList"
            @after-read="uploadRYXXZP"
            :show-upload="true"
        />
      </div>
      <div class="btnBox">
        <button class="cancelBtn" @tap="closePage">关闭</button>
        <button class="addBtn" @tap="addtoMine">添加至我的招商</button>
      </div>
      <van-dialog
          use-slot
          :show="show"
          show-cancel-button
          confirm-button-open-type="getUserInfo"
          @confirm="confirm"
      >
        <div class="dialogInfo">
           <van-icon name="warning" style="color:red"/> &nbsp;确认添加后将由您负责跟进该项目！
        </div>
      </van-dialog>
    </div>
</template>

<script>
export default {
  name: "predetermineDetail",
  data(){
    return{
      postData:{
        companyName: "无锡XXXXX有限公司",
        constant:'',
        demand:'',
        contact:'',
        phone:'',
      },
      fileList:[],
      show:false
    }
  },
  methods:{
    addtoMine(){
      this.show = true
    },
    confirm(){
      console.log(1111)
    },
    closePage(){
      uni.navigateTo({
        url:'/pages/subPackages/todo/index'
      })
    },
    deleteRYXXZP(event) {
      this.fileList.splice(event.detail.index, 1);
      this.$forceUpdate();
    },
    uploadRYXXZP(event) {
      console.log(event)
      let that = this;
      const { file } = event.detail;
      uni.uploadFile({
        url: that.$constant.BASE_URI + "/wx/fileController/upload",
        filePath: file.url,
        name: "file",
        formData: { user: "test" },
        success(res) {
          // 上传完成需要更新 fileList
          let data = JSON.parse(res.data);
          that.fileList.push({
            imgUrl: "/FileController/download/" + data.data[0],
            id: data.data[0],
            url:
                that.$constant.BASE_URI +
                "/FileController/download/" +
                data.data[0],
            isImage: true,
          });
        },
        fail(res) {},
      });
    },
  }
}
</script>

<style lang="scss">
    .predetermineDetail{
      padding-bottom: 120rpx;
      .predetermineUl{
        margin: 24rpx 0;
        background: white;
        box-sizing: border-box;
        padding: 0 32rpx;
        .predetermineLi{
          padding: 32rpx 0;
          border-bottom: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          justify-content: space-between;
        }
        .predetermineLi2{
          padding: 32rpx 0;
          border-bottom: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          flex-direction: column;
        }
        .van-cell {
          background: #F5F7FA !important;
          border-radius: 8rpx;
          font-size: 28rpx;
          margin-top: 16rpx;
        }
        .liName{
          color: rgba(51, 51, 51, 1);
          font-size: 32rpx;
        }
        .liIpt{
          color: rgba(102, 102, 102, 1);
          font-size: 32rpx;
          text-align: right;
        }
      }
      .predetermineBox{
        padding: 32rpx;
        background: white;
        box-sizing: border-box;
        margin-bottom: 24rpx;
        .titleBox{
          display: flex;
          align-items: center;
          .titleName{
            color: rgba(24, 23, 42, 1);
            font-size: 32rpx;
            font-weight: 600;
            margin-right: 16rpx;
          }
          .tips{
            font-size: 28rpx;
            color: rgba(179, 179, 179, 1);
          }
        }
        .houseBox{
          display: flex;
          flex-wrap: wrap;
          margin-top: 24rpx;
          min-height: 200rpx;
          .houseTag{
            width: 200rpx;
            height: 56rpx;
            background: rgba(245, 247, 250, 1);
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            color: rgba(51, 51, 51, 1);
            margin-right: 24rpx;
            margin-bottom: 24rpx;
          }
        }
      }
      .btnBox{
        display: flex;
        justify-content: space-evenly;
        margin-top: 64rpx;
        .cancelBtn{
          width: 240rpx;
          height: 80rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(3, 101, 249, 1);
          font-size: 34rpx;
          background: rgba(0, 0, 0, 0.05);
          border-radius: 8rpx;
          &::after{
            border: none;
          }
        }
        .addBtn{
          width: 300rpx;
          height: 80rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 34rpx;
          background: rgba(3, 101, 249, 1);
          border-radius: 8rpx;
          &::after{
            border: none;
          }
        }
      }
      .dialogInfo{
        padding: 64rpx 32rpx;
        font-size: 32rpx;
      }
    }
</style>