yunshengtai-uniapp/pages/demandHall/createProject/index.vue

<template>
<!--pages/demandHall/createProject/index.wxml-->
<view class="createProject-page">
  <view class="resource-info-box">
    <view class="title">资源信息</view>
    <view class="company-card-box acea-row-nowrap">
      <image :src="projectInfo.projectResource.logo" class="company-logo" mode="aspectFill"></image>
      <view class="info">
        <view class="company-name line1">{{projectInfo.projectResource.name}}</view>
        <view class="tags-box">
          <view class="tag-item">网站建设</view>
        </view>
        <view class="slogan">{{projectInfo.projectResource.content}}</view>
      </view>
    </view>
  </view>
  <view class="project-name-box">
    <view class="title">项目名称</view>
    <view class="inp-box" v-if="state == 1 || !state">
      <input type="text" placeholder="请填写项目名称" :value="projectName" @input="inpChange" data-t="n">
    </view>
    <view v-if="state == 3 || state == 2">{{projectName}}</view>
  </view>
  <view class="project-name-box">
    <view class="title acea-row row-middle">项目编号 <view class="num">{{projectInfo.projectCode}}</view></view>
  </view>
  <view class="project-name-box">
    <view class="title acea-row row-middle">
      <text>合作模式</text> 
      <view class="mode-box acea-row">
        <view v-for="(item, index) in modeList" :key="index" :class="'mode-item ' + (modeActive == item.id ? 'mode-item-a' : '')" :data-id="item.id" :data-nums="item.stageNums" @tap="modeClick">{{item.name}}</view>
      </view>
    </view>
    <view class="mode-detail">
      <view class="m-tit">合作规则-定金尾款模式</view>
      <text>{{modeList[modeActive - 1].content}}</text>
    </view>
  </view>
  <view class="project-name-box">
    <view class="title acea-row row-middle">交付成果</view>
    <view class="area-box" :style="projectId ? 'background:#fff;border:4rpx solid #EEEEEE;' : ''">
      <view class="p-title acea-row row-middle">
        <view>总金额</view>
        <input type="text" :disabled="state != 0" :value="totalMoney" @input="inpChange" data-t="t">
        <text>元</text>
      </view>
      <textarea placeholder="请描述交付成果" :disabled="state != 0" class="area" :value="resultContent" @input="inpChange" data-t="c"></textarea>
      <view clsas="progress-box" v-if="modeActive > 1">
        <view v-for="(mode, index) in stageResultsDtoList" :key="index" class="progress-item">
          <view class="p-title acea-row row-middle">
            <view>阶段{{index+1}}</view>
            <input type="text" :value="mode.money" :disabled="state != 0" @input="changePrice" :data-i="index">
            <text>元</text>
          </view>
          <input type="text" class="desc" placeholder="本阶段将提供。" :disabled="state != 0" :value="mode.content" @input="changeContent" :data-i="index">
        </view>
      </view>
    </view>
  </view>
  <!-- <view class="project-name-box">
    <view class="title acea-row row-middle">项目资金</view>
    <view class="item acea-row row-between row-middle">
      <view class="label">总金额</view>
      <view class="item-r acea-row row-between row-middle">
        <input type="text" placeholder="请输入总金额" />
        <text>元</text>
      </view>
    </view>
    <view class="item acea-row row-between row-middle">
      <view class="label">定金</view>
      <view class="item-r acea-row row-between row-middle">
        <input type="text" placeholder="请输入总定金" />
        <text>元</text>
      </view>
    </view>
    <view class="item acea-row row-between row-middle">
      <view class="label">尾款</view>
      <view class="item-r acea-row row-between row-middle">
        <input type="text" placeholder="请输入总尾款" />
        <text>元</text>
      </view>
    </view>
  </view> -->
  <view class="project-name-box">
    <view class="title acea-row row-middle">项目发起方（供方）</view>
    <view class="fqifang-box">
      <view class="f-name">{{projectInfo.projectProvider.name}}</view>
      <view class="f-item acea-row row-middle">
        <view class="f-item-label">银行账户</view>
        <view>{{projectInfo.projectProvider.bankNum}}</view>
      </view>
      <view class="f-item acea-row row-middle">
        <view class="f-item-label">开户信息</view>
        <view>{{projectInfo.projectProvider.bankInfo}}</view>
      </view>
    </view>
  </view>
  <view class="project-name-box">
    <view class="title acea-row row-middle">合作方</view>
    <view class="hezuofang-box acea-row row-middle row-between">
      <view class="header-box acea-row row-middle">
        <image :src="projectInfo.projectReceiver.photoPath"></image>
        <view>{{projectInfo.projectReceiver.name}}</view>
      </view>
      <view class="call" @tap="call" :data-phone="projectInfo.projectReceiver.phone"><image src="/static/images/home/call.png"></image></view>
    </view>
  </view>
  <view class="btn-box acea-row row-right" v-if="state != 3">
    <view class="submit-btn" @tap="submit" v-if="state == 0 || state == 1">确认并发起</view>
    <view class="submit-btn" @tap="confirm" v-if="state == 2 && canConfirm == true">待确认</view>
  </view>
</view>
</template>

<script>
// pages/demandHall/createProject/index.js
const app = getApp();

export default {
  data() {
    return {
      state: 0,
      //未申请
      communicateId: null,
      projectId: null,
      detail: [],
      projectInfo: {},
      modeList: [],
      modeActive: 1,
      projectName: '',
      resultContent: '',
      totalMoney: '',
      stageResultsDtoList: [],
      canConfirm: false
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    let id = options.id; // 立项

    let state = options.state || 0; // 项目书状态，1已申请，2等待立项，3已成立

    this.setData({
      communicateId: id,
      state: state
    });
    this.getModeList();

    if (state == 0) {
      this.getProjectInfo();
    } else {
      this.getProjectDetail();
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    inpChange(e) {
      let t = e.currentTarget.dataset.t;
      let value = e.detail.value;

      if (t == 'n') {
        this.setData({
          projectName: value
        });
      } else if (t == 't') {
        this.setData({
          totalMoney: value
        });
      } else if (t == 'c') {
        this.setData({
          resultContent: value
        });
      }
    },

    modeClick(e) {
      let id = e.currentTarget.dataset.id;
      let nums = e.currentTarget.dataset.nums;

      if (this.state != 0) {
        return;
      }

      this.setData({
        stageResultsDtoList: []
      });
      let p = this.stageResultsDtoList;

      for (var j = 0; j < nums; j++) {
        p.push({
          name: j + 1,
          money: '',
          content: ''
        });
      }

      this.setData({
        modeActive: id,
        stageResultsDtoList: p
      });
    },

    changePrice(e) {
      let idx = Number(e.currentTarget.dataset.i);
      let stageResultsDtoList = this.stageResultsDtoList;
      stageResultsDtoList[idx].money = e.detail.value;
      this.setData({
        stageResultsDtoList
      });
    },

    changeContent(e) {
      let idx = Number(e.currentTarget.dataset.i);
      let stageResultsDtoList = this.stageResultsDtoList;
      stageResultsDtoList[idx].content = e.detail.value;
      this.setData({
        stageResultsDtoList
      });
    },

    submit() {
      let data = {
        resourcesId: this.projectInfo.projectResource.resourceId,
        projectName: this.projectName,
        projectCode: this.projectInfo.projectCode,
        cooperationModeId: this.modeActive,
        resultContent: this.resultContent,
        stageResultsDtoList: this.stageResultsDtoList,
        totalMoney: this.totalMoney,
        providerId: this.projectInfo.projectProvider.prividerId,
        receiverId: this.projectInfo.projectReceiver.receiverId,
        communicateId: this.communicateId
      };

      if (data.projectName == '') {
        uni.showToast({
          title: '请填写项目名称！',
          icon: 'none'
        });
        return;
      } else if (data.totalMoney == '') {
        uni.showToast({
          title: '请填写项目总金额！',
          icon: 'none'
        });
        return;
      } else if (data.resultContent == '') {
        uni.showToast({
          title: '请描述交付成果！',
          icon: 'none'
        });
        return;
      }

      app.http('post', 'Project/create', data).then(res => {
        if (res.data.success) {
          uni.showToast({
            title: '操作成功！',
            duration: 2000
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
          }, 2000);
        }
      }); // console.log(this.data.stageResultsDtoList)
    },

    //获取合作模式
    getModeList() {
      app.http('get', 'CooperationMode/listCooperationMode').then(res => {
        if (res.data.success) {
          this.setData({
            modeList: res.data.data
          });
        }
      });
    },

    //获取资源信息
    getProjectInfo() {
      console.log(this.communicateId);
      app.http('get', 'Project/toCreateProject', {
        communicateId: this.communicateId
      }).then(res => {
        if (res.data.success) {
          this.setData({
            projectInfo: res.data.data
          });
        }
      });
    },

    //获取立项书详情
    getProjectDetail() {
      app.http('get', 'Communicate/getProjectInfo', {
        communicateId: this.communicateId
      }).then(res => {
        if (res.data.success) {
          let data = res.data.data;
          this.setData({//['projectInfo.projectResource']: data.projectResource
            //['projectInfo.projectProvider']: data.projectProvider
            //['projectInfo.projectReceiver']: data.projectReceiver

            projectName: data.projectName,
            stageResultsDtoList: data.stageResultsDtoList,
            modeActive: data.stageResultsDtoList.length,
            resultContent: data.resultContent,
            totalMoney: data.totalMoney,
            canConfirm: data.canConfirm,
            projectId: data.id,
          });
          //try fix
          this['projectInfo.projectReceiver'] = data.projectReceiver;
          //try fix
          this['projectInfo.projectProvider'] = data.projectProvider;
          //try fix
          this['projectInfo.projectResource'] = data.projectResource;
        }
      });
    },

    confirm() {
      let that = this;
      uni.showModal({
        title: '提示！',
        content: '是否确认立项？',

        success(res) {
          if (res.confirm) {
            app.http('GET', 'Communicate/aggreProject', {
              projectId: that.projectId
            }).then(res => {
              if (res.data.success) {
                uni.showToast({
                  title: '操作成功！',
                  duration: 2000
                });
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1
                  });
                }, 2000);
              }
            });
          }
        }

      });
    },

    call(e) {
      uni.makePhoneCall({
        phoneNumber: e.currentTarget.dataset.phone
      });
    }

  }
};
</script>
<style>
/* pages/demandHall/createProject/index.wxss */
.createProject-page{
  width: 100%;
  padding: 0 40rpx 180rpx;
  font-size: 28rpx;
}
.company-card-box {
  width: 100%;
  padding: 30rpx 12rpx;
  background: #FFFFFF;
  border: 2px solid #EEEEEE;
  border-radius: 12rpx;
  margin-bottom: 32rpx;
}
.info{
  width: 70%;
}
.company-logo{
  width: 154rpx;
  height: 154rpx;
  margin-right: 20rpx;
}
.company-name{
  font-size: 28rpx;
  line-height: 56rpx;
  font-weight: 500;
  color: #1D1D1D;
}
.slogan{
  font-size: 24rpx;
  line-height: 34rpx;
  color: #666;
  margin: 4rpx 0 12rpx;
}
.tags-box{
  margin: 6rpx 0 10rpx;
}
.tag-item{
  width: 112rpx;
  height: 36rpx;
  line-height: 34rpx;
  text-align: center;
  border: 1rpx solid #FFAA00;
  color: #FFAA00;
  border-radius: 4rpx;
  margin-right: 8rpx;
  font-size: 24rpx;
}
.title{
  margin-bottom: 26rpx;
  font-weight: 500;
  line-height: 40rpx;
  color: #1D1D1D;
}
.num,.mode-box{
  margin-left: 38rpx;
}
.project-name-box{
  margin-bottom: 32rpx;
}
.inp-box{
  width: 100%;
  height: 60rpx;
  padding: 10rpx 20rpx;
  background: #eee;
}
.inp-box input{
  width: 100%;
  height: 100%;
}
.mode-item{
  width: 122rpx;
  height: 40rpx;
  border: 1rpx solid #707070;
  text-align: center;
  line-height: 38rpx;
  font-size: 24rpx;
  color: #707070;
  border-radius: 8rpx;
  margin-right: 10rpx;
}
.mode-item:nth-last-child(1){
  margin-right: 0;
}
.mode-item-a{
  border-color: #FF6D31;
  color: #FF6D31;
}
.mode-detail{
  width: 670rpx;
  height: 176rpx;
  background: #FFF5F0;
  border: 2rpx solid #FF5100;
  border-radius: 12rpx;
  font-size: 24rpx;
  color: #666;
  padding: 24rpx 20rpx;
}
.m-tit{
  font-weight: 500;
  line-height: 34rpx;
  color: #707070;
  margin-bottom: 20rpx;
}
.area-box{
  width: 100%;
  /* height: 446rpx; */
  background: #eee;
  border-radius: 8rpx;
  padding:28rpx 22rpx;
  font-size: 24rpx;
}
.area-box textarea{
  width: 100%;
  height: 116rpx;
  border-bottom: 2rpx solid #BFBFBF;
  margin-top: 24rpx;
}
.progress-item{
  width: 100%;
  height: 138rpx;
  border-bottom: 2rpx solid #BFBFBF;
  padding: 24rpx 0;
}
.p-title input{
  width: 115rpx;
  margin-left: 14rpx;
  text-align: center;
  border-bottom: 2rpx solid #BFBFBF;
}
.desc{
  width: 100%;
  margin-top: 20rpx;
}

.item{
  color: #666;
  margin-bottom: 26rpx;
}
.item-r{
  width: 538rpx;
  height: 60rpx;
  padding: 10rpx 20rpx;
  background: #eee;
}
.faqifang-box{
  color: #1D1D1D;
}
.f-item{
  margin-top: 22rpx;
}
.f-item-label{
  color: #707070;
  margin-right: 28rpx;
}

.header-box image{
  width: 92rpx;
  height: 92rpx;
  margin-right: 24rpx;
}
.call image{
  width: 54rpx;
  height: 54rpx;
}
.btn-box{
  width: 750rpx;
  height: 160rpx;
  background: #FFFFFF;
  box-shadow: 0px -6px 12px rgba(0, 0, 0, 0.04);
  padding-top: 24rpx;
  padding-right: 40rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
}
.submit-btn{
  width: 223rpx;
  height: 76rpx;
  background: linear-gradient(144deg, #FFA782 0%, #FF5100 100%);
  border-radius: 38rpx;
  text-align: center;
  line-height: 76rpx;
  font-size: 32rpx;
  color: #fff;
  font-weight: 500;
}
</style>