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

<template>
<!--pages/user/resourcesManage/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-order.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="number acea-row row-between row-middle">
       <text> </text>
       <view class="status" v-if="tabActive == 2">等待审核</view>
       <view class="status" v-if="tabActive == 3">{{item.resourceAuditState == 0 ? '未编辑完成' : '审核未通过：' + item.reason }}</view>
      </view>
      <view class="info-box acea-row row-middle">
        <image :src="item.resourceImgs[0]"></image>
        <view class="info">
          <view class="i-title">{{item.title}}</view>
          <view class="i-desc line2">{{item.detailedDescription}}</view>
        </view>
      </view>
      <view class="colO" v-if="tabActive == 1 || tabActive == 4">项目合作数量({{item.finishProjects}})</view>
      <view class="btn-box acea-row row-between row-middle">
				<view class="btn-box-l">
					<view>成交金额 {{item.totalMoney}}元</view>
					<view class="time" v-if="tabActive == 2 || tabActive == 3">{{item.createTime}}申请</view>
				</view>
        <view class="btns acea-row">
          <view class="btn" v-if="tabActive == 1" :data-item="item" @tap="xiajiaClick">下架资源</view>
          <view class="btn" v-if="tabActive == 2" :data-id="item.id" @tap="withdrawClick">撤回审核</view>
          <view class="btn" v-if="tabActive == 3" :data-id="item.id" @tap="editClick">编辑发布</view>
          <view class="btn default" v-if="tabActive == 3" :data-id="item.id" @tap="delClick">删除项目</view>
          <view class="text" v-if="tabActive == 4" :data-id="item.id">项目已圆满结束</view>
        </view>
      </view>
    </view>
  </view>
</view>
</template>

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

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

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      tabActive: options.type
    });
    this.setParams(options.type);
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setParams(this.tabActive);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
  methods: {
    toRelease() {
      uni.navigateTo({
        url: '/pages/release/index'
      });
    },

    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();
    },

    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;
    },

    // 编辑
    editClick(e) {
      let id = e.currentTarget.dataset.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/resourcesManage/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: #000;
  position: absolute;
  bottom: -22rpx;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transition: all .2s ease,opacity .15s ease;
}
.tab-a{
	color: #292929;
	font-weight: bold;
}
.tab-a::after{
  opacity: 1;
  left: 0;
  transform: translateX(0%) scaleX(1);
}
.list{
  width: 100%;
  padding: 32rpx 40rpx;
}
.list-item{
  width: 100%;
  padding: 20rpx 20rpx 32rpx;
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}
.number{
  margin-bottom: 12rpx;
  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;
  /* height: 110rpx; */
  /* overflow: hidden; */
}
.time{
  color: #A7A7A7;
  font-size: 24rpx;
}
.colO{
  font-size: 28rpx;
  margin: 24rpx 0 4rpx;
  color: #FF5100;
}
.btn-box{
  font-size: 30rpx;
  font-weight: 500;
  line-height: 40px;
  color: #FF5100;
	margin-top: 10rpx;
}
.btn-box-l{
	line-height: 40rpx;
}
.btn{
  font-size: 28rpx;
  width: 150rpx;
  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%);
}
.text{
  font-size: 28rpx;
  color: #666;
}


</style>