yunshengtai-uniapp/pages/user/resourcesOrder/index.vue

<template>
<!--pages/user/resourcesOrder/index.wxml-->
<view class="order-page">
  <view class="tabs-box acea-row row-between">
    <view :class="'tab ' + (tabActive == 1 ? 'tab-a' : '')" data-i="1" @tap="tabClick">沟通中</view>
    <view :class="'tab ' + (tabActive == 2 ? 'tab-a' : '')" data-i="2" @tap="tabClick">进行中</view>
    <view :class="'tab ' + (tabActive == 3 ? 'tab-a' : '')" data-i="3" @tap="tabClick">已结束</view>
  </view>
  <view class="list">
    <view class="no-list" v-if="list.length == 0">
      <image src="https://download.cyjyyjy.com/no-needs.png"></image>
      <view>暂无订单</view>
      <view class="to-btn" @tap="toDemandHall">去需求广场</view>
    </view>
    <view v-for="(item, index) in list" :key="index" v-if="list.length > 0" class="item">
      <view class="number acea-row row-between row-middle">
       <text v-if="tabActive == 1"></text>
       <text v-else>项目编号 {{item.projectCode}}</text>
       <view class="status" v-if="item.projectState != 5">{{tabActive == 1 ? '沟通中' : tabActive == 2 ? '进行中' : '已结束'}}</view>
       <view class="status" v-else>平台介入中</view>
      </view>
      <view class="info-box acea-row">
        <image :src="item.resourceInfo.logo" v-if="tabActive == 1"></image>
        <image :src="item.projectResource.logo" v-else></image>
        <view class="info">
          <view class="i-title line1">{{item.resourceInfo.name || item.projectResource.name}}</view>
          <view class="tag-item" v-if="tabActive != 1">{{item.cooperationMode}}</view>
          <view class="i-desc" v-if="tabActive == 1">{{item.resourceInfo.content}}</view>
          <view class="projectinfo-box">
            <view class="acea-row row-middle" v-if="tabActive != 1">
              <view class="p-label">项目名称：</view>
              <view>{{item.projectName}}</view>
            </view>
            <view class="acea-row row-middle line1" v-if="tabActive != 1">
              <view class="p-label">合作方：</view>
              <view>{{item.partner}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="concat-list-box" v-if="tabActive == 1">
        <view class="open-btn acea-row row-middle" @tap="openClick" :data-idx="index">
         <text>{{!item.open ? '展开' : '收起'}}</text> 
         <image :class="'arrow-down ' + (!item.open ? '' : 'arrow-up')" src="/static/images/arrow-d.png"></image>
        </view>
        <view :class="'concat-list ' + (item.open ? 'list-open' : '')">
          <view v-for="(c, index2) in item.partnerInfos" :key="index2" class="concat-item acea-row-nowrap row-middle row-between" @tap="toApplyDetail" :data-item="item">
            <view class="acea-row row-middle">
              <image :src="c.logo" class="logo"></image>
              <view class="name-box acea-row">
                <view class="name acea-row row-middle line1">
                  <view class="company-name">{{c.name}}</view>
                  <text class="concat-status" v-if="c.comminuteState == 1">等待立项</text>
                  <text class="concat-status" v-if="c.comminuteState == 2">等待对方确认</text>
                  <text class="concat-status" v-if="c.comminuteState == 3">已立项</text>
                  <text class="concat-status" v-if="c.comminuteState == 4">项目流标</text>
                </view>
                <view class="desc line1">{{c.content}}</view>
              </view>
            </view>
            <image src="/static/images/home/call.png" class="call" @tap.stop="call" :data-item="c"></image>
            <view :class="'create-btn ' + (c.comminuteState != 1 ? 'default' : '')" v-if="c.haveRight == 1" @tap.stop="createProject" :data-item="item" :data-id="c.communicateId" :data-comminutestate="c.comminuteState">立项</view>
            <!-- <text class="concat-status" wx:if="{{c.comminuteState == 2}}" data-item="{{item}}" data-id="{{c.communicateId}}">等待对方确认</text>
            <text class="concat-status" wx:if="{{c.comminuteState == 3}}" data-item="{{item}}" data-id="{{c.communicateId}}">已立项</text>
            <text class="concat-status" wx:if="{{c.comminuteState == 4}}" data-item="{{item}}" data-id="{{c.communicateId}}">项目流标</text> -->
          </view>
        </view>
      </view>
      <view class="progress-box" v-if="tabActive != 1">
        <view v-for="(progress, index2) in item.stageResultsDtoList" :key="index2" class="progress-item acea-row row-between row-middle">
          <view class="acea-row row-middle">
            <image src="/static/images/home/progress.png"></image>
            <text>{{progress.name}} ￥{{progress.money}}</text>
          </view>
          <view class="progress-status" v-if="progress.state == 0">未开始</view>
          <view class="progress-status" v-if="progress.state == 1">申请开启</view>
          <view class="progress-status" v-if="progress.state == 2">进行中</view>
          <view class="progress-status colorO" v-if="progress.state == 3">已结束</view>
        </view>
      </view>
      <view class="btn-box acea-row row-between row-bottom" v-if="tabActive != 1">
        <view class="start-time" v-if="tabActive == 2">{{item.examineTime}}项目开启</view>
        <view v-if="tabActive == 3">项目已圆满结束</view>
        <view class="btns acea-row">
          <view class="btn-item" v-if="tabActive == 2 && item.deliverType == 1" @tap="openNextProgress" :data-item="item">开启下阶段</view> 
          <view class="btn-item" v-if="tabActive == 2  && item.deliverType == 2" @tap="applyDelivery" :data-item="item">申请交付</view>
          <view class="btn-item" v-if="tabActive == 3" @tap="toPlatform" :data-item="item">平台介入</view>
        </view>
      </view>
    </view>
    <!-- <view class="item">
      <view class="number acea-row row-between row-middle">
       <text>项目编号 17262626272727</text>
       <view class="status">{{tabActive == 1 ? '沟通中' : tabActive == 2 ? '进行中' : '已结束'}}</view>
      </view>
      <view class="info-box acea-row row-middle" >
        <image src="../../../images/home/company-img.png"></image>
        <view class="info">
          <view class="i-title line1">教育类学校官网网站建设</view>
          <view class="tag-item">定金尾款</view>
          <view class="i-desc" wx:if="{{tabActive == 1}}">针对中小学教育机构、课外培训辅导机构，提供官网升级优化和专业的网站建设定制化服务。</view>
          <view class="projectinfo-box">
            <view class="acea-row row-middle" wx:if="{{tabActive != 1}}">
              <view class="p-label">项目名称：</view>
              <view>武汉大学武汉大学网建设</view>
            </view>
            <view class="acea-row row-middle line1" wx:if="{{tabActive != 1}}">
              <view class="p-label">合作方：</view>
              <view>武汉楚象科技有限公司</view>
            </view>
          </view>
        </view>
      </view>
      <view class="concat-list-box" wx:if="{{ tabActive == 1 }}">
        <view class="open-btn" bindtap="openClick">展开/收起</view>
        <view class="concat-list {{open ? 'list-open' : ''}}">
          <view class="concat-item acea-row row-middle row-between" wx:for="{{7}}" wx:key="index" bindtap="toApplyDetail">
            <image src="../../../images/user/header.png" class="logo"></image>
            <view class="name-box acea-row">
              <view class="name acea-row row-middle">
                <view class="company-name line1">武汉出牛科技科技有限公有限公司</view>
                <text class="concat-status">未沟通</text>
              </view>
              <view class="desc line1">您好，我对您发布的信息很感兴的信息很感兴趣</view>
            </view>
            <image src="../../../images/home/call.png" class="call"></image>
            <view class="create-btn">立项</view>
          </view>
        </view>
      </view>
      <view class="progress-box" wx:if="{{ tabActive != 1 }}">
        <view class="progress-item acea-row row-between row-middle">
          <view class="acea-row row-middle">
            <image src="../../../images/home/progress.png"></image>
            <text>阶段1 定金</text>
          </view>
          <view class="progress-status">已结束</view>
        </view>
        <view class="progress-item acea-row row-between row-middle">
          <view class="acea-row row-middle">
            <image src="../../../images/home/progress.png"></image>
            <text>阶段2 定金</text>
          </view>
          <view class="progress-status">已结束</view>
        </view>
        <view class="progress-item acea-row row-between row-middle">
          <view class="acea-row row-middle">
            <image src="../../../images/home/progress.png"></image>
            <text>阶段3 尾款</text>
          </view>
          <view class="progress-status colorO">已结束</view>
        </view>
      </view>
      <view class="btn-box acea-row row-between row-bottom" wx:if="{{ tabActive != 1 }}">
        <view class="start-time" wx:if="{{ tabActive == 2 }}">2021/08/31项目开启</view>
        <view class="" wx:if="{{ tabActive == 3 }}">项目已圆满结束</view>
        <view class="btns acea-row">
          <view class="btn-item" wx:if="{{ tabActive == 2 }}">开启下阶段</view>
          <view class="btn-item default" wx:if="{{ tabActive == 2 }}">申请交付</view>
          <view class="btn-item"  wx:if="{{ tabActive == 3 }}">合作反馈</view>
        </view>
      </view>
    </view> -->
  </view>
</view>
</template>

<script>
// pages/user/resourcesOrder/index.js
const app = getApp();

export default {
  data() {
    return {
      tabActive: 1,
      list: []
    };
  },

  components: {},
  props: {},

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

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // console.log(this.data.tabActive)
    if (this.tabActive == 1) {
      this.getCommunicates();
    } else {
      this.getProjectList();
    }
  },

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

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

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    if (this.tabActive == 1) {
      this.getCommunicates();
    } else {
      this.getProjectList();
    }
  },

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    toDemandHall() {
      uni.switchTab({
        url: '/pages/demandHall/index'
      });
    },

    tabClick(e) {
      let i = e.currentTarget.dataset.i;
      this.setData({
        tabActive: i
      });

      if (i == 1) {
        this.getCommunicates();
      } else {
        this.getProjectList();
      }
    },

    // 获取 沟通中
    getCommunicates() {
      app.http('get', 'Communicate/resourceCommunicates').then(res => {
        if (res.data.success) {
          if (res.data.data.length > 0) {
            res.data.data.map(item => {
              item.open = false;
            });
            res.data.data[0].open = true;
          }

          this.setData({
            list: res.data.data
          });
          uni.stopPullDownRefresh();
        }
      });
    },

    //获取进行中、已结束列表
    getProjectList() {
      app.http('get', 'Project/listProject', {
        projectState: this.tabActive - 1,
        projectType: 1
      }).then(res => {
        if (res.data.success) {
          res.data.data.map(item => {
            item.stageResultsDtoList.map(stage => {
              if (stage.state == 1) {
                item.showBtn = true;
              }
            });
          });
          this.setData({
            list: res.data.data
          });
          uni.stopPullDownRefresh();
        }
      });
    },

    // 开启下一阶段
    openNextProgress(e) {
      let item = e.currentTarget.dataset.item;
      console.log(item);
      uni.showModal({
        title: '提示！',
        content: '是否申请开启下阶段？',

        success(res) {
          if (res.confirm) {
            app.http('get', 'Project/applyNextStage', {
              projectCode: item.projectCode
            }).then(res => {
              if (res.data.success) {
                uni.showToast({
                  title: '操作成功！',
                  duration: 2000
                });
              }
            });
          }
        }

      });
    },

    //点击展开
    openClick(e) {
      let idx = e.currentTarget.dataset.idx;
      console.log(idx);
      let list = this.list;
      list[idx].open = !list[idx].open;
      this.setData({
        list: list
      });
    },

    // 跳转申请详情
    toApplyDetail(e) {
      let data = encodeURIComponent(JSON.stringify(e.currentTarget.dataset.item));
      uni.navigateTo({
        url: '/pages/demandHall/applyDetail/index?data=' + data
      });
    },

    //申请交付
    applyDelivery(e) {
      let item = e.currentTarget.dataset.item;
      uni.showModal({
        title: '提示',
        content: '是否确认提交申请交付',
        success: r => {
          if (r.confirm) {
            app.http('GET', 'Project/applyDeliveryProject', {
              projectId: item.id
            }).then(res => {
              if (res.data.success) {
                uni.showToast({
                  title: '操作成功！'
                });
              }
            });
          }
        }
      });
    },

    // 拨打电话
    call(e) {
      let item = e.currentTarget.dataset.item;
      uni.makePhoneCall({
        phoneNumber: item.phone
      });
    },

    // 立项
    createProject(e) {
      console.log(e);
      let id = e.currentTarget.dataset.id,
          comminutestate = e.currentTarget.dataset.comminutestate;

      if (comminutestate == 1) {
        uni.showModal({
          title: "提示！",
          content: '是否确认立项？',

          success(res) {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/demandHall/createProject/index?id=' + id
              });
            }
          }

        });
      }
    },

    // 平台介入
    toPlatform(e) {
      let code = e.currentTarget.dataset.item.projectCode;
      uni.navigateTo({
        url: '/pages/demandHall/platform/index?code=' + code
      });
    }

  }
};
</script>
<style>
/* pages/user/resourcesOrder/index.wxss */
image{
  border-radius: 8rpx;
}
.order-page{
  width: 100%;
  min-height: 100vh;
  background: #EEEEEE;
}
.tabs-box{
  width: 100%;
  padding: 18rpx 72rpx;
  background: #fff; 
}
.tab{
  text-align: center;
  font-size: 28rpx;
  color: #707070;
  position: relative;
}
.tab::after{
  display: block;
  content: '';
  width: 100%;
  height: 8rpx;
  border-radius: 8rpx;
  background: #000;
  position: absolute;
  bottom: -22rpx;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transition: all .2s ease,opacity .15s ease;
}
.tab-a::after{
  opacity: 1;
  left: 0;
  transform: translateX(0%) scaleX(1);
}
.list{
  width: 100%;
  padding: 32rpx 40rpx;
}
.no-order{
  text-align: center;
  line-height: 50rpx;
  font-size: 28rpx;
  color: #666666;
}
.item{
  width: 100%;
  padding: 20rpx 20rpx 32rpx;
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}
.number{
  margin-bottom: 24rpx;
  color: #666666;
  font-size: 28rpx;
}
.status{
  font-weight: 500;
  font-size: 28rpx;
  color: #FF5100;
}
.info-box image{
  width: 154rpx;
  height: 154rpx;
  border-radius: 8rpx;
  margin-right: 12rpx;
}
.info{
  width: 450rpx;
  font-size: 28rpx;
}
.i-title{
  font-weight: 500;
  line-height: 40rpx;
  color: #1D1D1D;
}
.i-desc{
  font-size: 24rpx;
  font-weight: 400;
  line-height: 34rpx;
  color: #666666;
}
.projectinfo-box{
  font-size: 24rpx;
  color: #1D1D1D;
}
.p-label{
  color: #666666;
}
.time{
  color: #A7A7A7;
  font-size: 24rpx;
}
.colO{
  font-size: 28rpx;
  margin: 24rpx 0 4rpx;
  color: #FF5100;
}

.tag-item{
  width: 114rpx;
  height: 36rpx;
  line-height: 34rpx;
  text-align: center;
  color: #FF5100;
  border: 2rpx solid #FF5100;
  background: #fff;
  border-radius: 4rpx;
  font-size: 24rpx;
  margin: 5rpx 0;
}
.open-btn{
  color: #FF5100;
  font-weight: 500;
  font-size: 28rpx;
  margin: 20rpx 0;
}
.arrow-down{
  width: 25rpx;
  height: 14rpx;
  margin-left: 12rpx;
}
.arrow-up{
  
  transform: rotate(180deg);
}

.concat-list{
  height: 0rpx;
  padding-bottom: 0rpx;
  margin-bottom: 0rpx;
  overflow:hidden;
  transition: height 200ms ease;
}
.list-open{
  height: 500rpx;
  padding-bottom: 28rpx;
  margin-bottom: 12rpx;
  overflow-y: scroll;
  transition: height 300ms ease;
}
.concat-item{
  width: 100%;
  height: 154rpx;
  border-top: 2px solid #EEEEEE;
}
.logo-box{
  width: 380rpx;
}
.logo{
  width: 92rpx;
  height: 92rpx;
  margin-right: 10rpx;
}
.call{
  width: 54rpx;
  height: 54rpx;
}
.name-box{
  width: 330rpx;
  font-size: 28rpx;
}
.concat-status{
  font-size: 24rpx;
  display: inline-block;
  margin-left: 2rpx;
  color: #FF5100;
}
.name{
  width: 100%;
  font-weight: 500;
  line-height: 40rpx;
  color: #1D1D1D;
}
.company-name{
  width: auto;
  margin-right: 10rpx;
}
.desc{
  font-size: 20rpx;
  color: #707070;
  margin-top: 16rpx;
}
.create-btn{
  width:120rpx;
  height: 50rpx;
  padding: 0 6rpx;
  font-size: 24rpx;
  background: #000;
  border-radius: 12rpx;
  text-align: center;
  line-height: 50rpx;
  color: #fff;
}
.progress-box{
  margin-top: 32rpx;
  padding-top: 32rpx;
  border-top: 1px solid #EEEEEE;
}
.progress-item{
  width: 100%;
  height: 54rpx;
  background: #f8f8f8;
  padding: 0rpx 20rpx;
  font-size: 26rpx;
  font-weight: 500;
  margin-bottom: 16rpx;
}
.progress-item image{
  width: 24rpx;
  height: 24rpx;
  margin-right: 8rpx;
}
.colorO{
 color: #FF8350;
}

.btn-box{
  margin-top: 20rpx;
  color: #FF5100;
}
.btn-item{
  font-size: 28rpx;
  width: 162rpx;
  height: 56rpx;
  line-height: 56rpx;
  text-align: center;
  background: #000;
  border-radius: 12rpx;
  color: #fff;
  margin-left: 16rpx;
}
.default{
  background: linear-gradient(134deg, #BFBFBF 0%, #BFBFBF 100%);
}
.btn-box .start-time{
  font-size: 22rpx;
  color: #1D1D1D;
}
</style>