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

<template>
<!--pages/user/NeedsManage/index.wxml-->
<view class="manage-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 :class="'tab ' + (tabActive == 4 ? 'tab-a' : '')" data-i="4" @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="toRelease">去发布吧</view>
    </view>
    <view v-for="(item, index) in list" :key="index" class="list-item" v-if="list.length > 0">
      <view class="item-top acea-row row-between">
        <view class="top-l">
          <view class="n-title">{{item.title}}</view>
          <view class="tags-box acea-row">
            <view class="tag-item">公司起名</view>
            <view class="tag-item colG">LOGO</view>
          </view>
        </view>
        <view class="top-r">
          <view class="status" v-if="tabActive == 1">发布中</view>
          <view class="status" v-if="tabActive == 2">审核中</view>
       <view class="status" v-if="tabActive == 3">{{item.resourceAuditState == 0 ? '未编辑完成' : '审核未通过：' + item.reason }}</view>
          <view class="status" v-if="tabActive == 4">项目已圆满结束</view>
          <view class="time" v-if="tabActive == 1">展示至{{item.resourceEndTime}}</view>
        </view>
      </view>
      <view class="fz28">需求预算:<text class="colR">{{item.capital}}</text></view>
      <view class="desc">{{item.detailedDescription}}</view>
      <view class="btn-box acea-row row-between row-middle">
        <view class="time">{{item.resourceStartTime}}申请</view>
        <view class="btns acea-row row-middle">
          <view class="btn" v-if="tabActive == 1" @tap="xiajiaClick" :data-item="item">{{item.status == 1 ? '下架' : '上架' }}需求</view>
          <view class="btn" v-if="tabActive == 2" @tap="withdrawClick" :data-id="item.id">撤回审核</view>
          <view class="btn" v-if="tabActive == 3" @tap="editClick" :data-id="item.id">编辑发布</view>
          <view class="btn default" v-if="tabActive == 3" @tap="delClick" :data-id="item.id">删除需求</view>
        </view>
      </view>
    </view>
    <!-- <view class="list-item">
      <view class="item-top acea-row row-between">
        <view class="top-l">
          <view class="n-title">我需要公司官网设计</view>
          <view class="tags-box acea-row">
            <view class="tag-item">公司起名</view>
            <view class="tag-item colG">LOGO</view>
          </view>
        </view>
        <view class="top-r">
          <view class="status" wx:if="{{tabActive == 1}}">发布中</view>
          <view class="status" wx:if="{{tabActive == 2}}">审核中</view>
          <view class="status" wx:if="{{tabActive == 3}}">编辑未完成</view>
          <view class="status" wx:if="{{tabActive == 4}}">项目已圆满结束</view>
          <view class="time" wx:if="{{tabActive == 1}}">展示至21/08/31</view>
        </view>
      </view>
      <view class="fz28">需求预算<text class="colR">20000</text>元</view>
      <view class="desc">各位禅易才子佳人，本公司业务领域是母婴用品，现在需要设计公司官网，设计风格需要针对国内母婴市场审美。</view>
      <view class="btn-box acea-row row-between row-middle">
        <view class="time">2021.8.21申请</view>
        <view class="btns acea-row row-middle">
          <view class="btn" wx:if="{{tabActive == 1}}">下架需求</view>
          <view class="btn" wx:if="{{tabActive == 2}}">撤回审核</view>
          <view class="btn" wx:if="{{tabActive == 3}}">编辑发布</view>
          <view class="btn default" wx:if="{{tabActive == 3}}">删除需求</view>
        </view>
      </view>
    </view> -->
  </view>
</view>
</template>

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

export default {
  data() {
    return {
      tabActive: 1,
      list: [],
      resourceType: 2,
      resourceAuditState: null,
      resourceState: 0
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      tabActive: options.type
    });
    this.setParams(options.type);
  },

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

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

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

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

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

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    tabClick(e) {
      let i = e.currentTarget.dataset.i;
      this.setParams(i);
    },

    setParams(i) {
      if (i == 1) {
        this.setData({
          tabActive: i,
          resourceState: 1,
          resourceAuditState: [2]
        });
      } else if (i == 2) {
        this.setData({
          tabActive: i,
          resourceAuditState: [1]
        });
      } else if (i == 3) {
        this.setData({
          tabActive: i,
          resourceAuditState: [0, 3]
        });
      } else if (i == 4) {
        this.setData({
          tabActive: i,
          resourceState: 2,
          resourceAuditState: []
        });
      }

      this.getList();
    },

    toRelease() {
      uni.navigateTo({
        url: '/pages/release/index'
      });
    },

    getList() {
      app.http('post', 'Resources/listMyResources', {
        resourceType: this.resourceType,
        resourceState: this.resourceState,
        resourceAuditState: this.resourceAuditState
      }).then(res => {
        if (res.data.success) {
          this.setData({
            list: res.data.data.content
          });
          uni.stopPullDownRefresh();
        }
      });
    },

    // 下架
    xiajiaClick(e) {
      let id = e.currentTarget.dataset.item.id;
      let status = e.currentTarget.dataset.item.status;
      let that = this;

      if (status == 1) {
        uni.showModal({
          title: '提示',
          content: '是否确定下架需求',

          success(res) {
            if (res.confirm) {
              app.http('GET', 'Resources/withdrawResource', {
                id: id
              }).then(res => {
                if (res.data.success) {
                  uni.showToast({
                    title: '操作成功'
                  });
                  setTimeout(() => {
                    that.getList();
                  }, 1500);
                }
              });
            }
          }

        });
      } else {
        uni.showModal({
          title: '提示',
          content: '是否确定上架需求',

          success(res) {
            if (res.confirm) {
              app.http('GET', 'Resources/putOnResource', {
                id: id
              }).then(res => {
                if (res.data.success) {
                  uni.showToast({
                    title: '操作成功'
                  });
                  setTimeout(() => {
                    that.getList();
                  }, 1500);
                }
              });
            }
          }

        });
      }
    },

    // 撤回
    withdrawClick(e) {
      let id = e.currentTarget.dataset.id;
      console.log(id);
    },

    // 编辑
    editClick(e) {
      let id = e.currentTarget.dataset.id;
      console.log(id);
      uni.navigateTo({
        url: '/pages/user/editNeeds/index?id=' + id
      });
    },

    // 删除
    delClick(e) {
      let id = e.currentTarget.dataset.id;
      uni.showModal({
        title: '提示',
        content: '是否确定删除？',

        success(res) {
          if (res.confirm) {
            app.http('GET', 'Resources/delResource', {
              id: id
            }).then(res => {
              if (res.data.success) {
                uni.showToast({
                  title: '操作成功'
                });
                setTimeout(() => {
                  that.getList();
                }, 1500);
              }
            });
          }
        }

      });
    }

  }
};
</script>
<style>
/* pages/user/NeedsManage/index.wxss */
.manage-page{
  width: 100%;
  min-height: 100vh;
  background: #EEEEEE;
}
.tabs-box{
  width: 100%;
  padding: 18rpx 58rpx;
  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: #FF6D31;
  position: absolute;
  bottom: -22rpx;
  left: 50%;
  margin-left: -41rpx;
  opacity: 0;
  transform: scaleX(0);
  transition: all .2s ease,opacity .15s ease;
}
.tab-a::after{
  opacity: 1;
  transform: scaleX(1);
}
.list{
  width: 100%;
  padding: 32rpx 40rpx;
}
.list-item{
  width: 100%;
  padding: 20rpx 20rpx 32rpx;
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.n-title{
  font-size: 28rpx;
  color: #1D1D1D;
  font-weight: 500;
  margin-bottom: 18rpx;
}
.tag-item{
  width: 114rpx;
  height: 36rpx;
  line-height: 34rpx;
  text-align: center;
  color: #FC9367;
  border: 1rpx solid #FC9367;
  background: #fff;
  border-radius: 4rpx;
  font-size: 24rpx;
  margin-right: 8rpx;
}
.colG{
  color: #3A9EFA;
  border-color: #3A9EFA;
}
.top-r{
  color: #FF5100;
  font-size: 20rpx;
  font-weight: 600;
  line-height: 40rpx;
}
.status{
  font-size: 30rpx;
}
.fz28{
  color:#707070;
  line-height: 40rpx;
  margin: 18rpx 0 10rpx;
}
.colR{
  color: #FF5100;
}
.desc{
  font-size: 24rpx;
  line-height: 34rpx;
  color: #333;
}
.time{
  font-size: 24rpx;
  color: #707070;
}
.btn-box{
  font-size: 30rpx;
  font-weight: 500;
  line-height: 40px;
  color: #FF5100;
}
.btn{
  font-size: 28rpx;
  width: 150rpx;
  height: 56rpx;
  line-height: 56rpx;
  text-align: center;
  background: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%);
  border-radius: 12rpx;
  color: #fff;
  margin-left: 16rpx;
}
.default{
  background: linear-gradient(134deg, #BFBFBF 0%, #BFBFBF 100%);
}
</style>