count-pass-app/pages/approval/approvallist.vue

<template>
  <view class="approval">
    <view class="top-banner">
			<u-swiper :list="pictureList" height="320rpx" imgMode="heightFix" keyName="picture" radius="0" circular ></u-swiper>
		</view>
    <view class="grid">
      <u-grid :border="false"  col="3">
        <u-grid-item @click="toPage('/subpages/approval/launch')">
          <image
            class="grid-img"
            src="../../static/czzn-img/approve/approval-launch.png"
          />
          <text class="grid-text">{{$t('home.initiated')}}</text>
        </u-grid-item>
        <u-grid-item @click="toPage('/subpages/approval/done')">
          <image
            class="grid-img"
            src="../../static/czzn-img/approve/approval-done.png"
          />
          <text class="grid-text">{{$t('home.done')}}</text>
        </u-grid-item>
        <u-grid-item @click="toPage('/subpages/approval/pending')">
          <image class="grid-img"
            src="../../static/czzn-img/approve/approval-pending.png"
          />
          <text class="grid-text">{{$t('home.toDo')}}</text>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="list-wrap" v-for="list in approvalList" :key="list.id">
      <u-cell :border="false" :customStyle="{'font-weight':'bold','padding':'10rpx 10rpx'}" :title="list.fullName"></u-cell>
      <view class="cell-wrap">
        <view class="cell-item" v-for="(item,index) in list.children" :key="index" @click="toForm(item)">
          <view class="cell-icon">
            <uni-icons custom-prefix="elicon" :type="item.icon" size="30" color="#4680F9"></uni-icons>
          </view>
          <text>{{item.fullName}}</text>
        </view>
      </view>
    </view>
    
   
    <view class="message-wrap" style="padding:32rpx">
      <view class="message-title" @click="toPage('/subpages/approval/messageList')">
        <span class="label">消息通知</span>
        <span class="message">
          3条未读信息
          <u-icon name="arrow-right" color="#222222"></u-icon>
        </span>
      </view>

      <!-- 单消息 -->
      <view class="message-item">
        <view class="title">
          <span style="color:#222">价格申请</span>
          <span>23分钟前</span>
        </view>
        <view class="info">
          <view class="cell-icon">
            <uni-icons custom-prefix="elicon" type="el-icon-s-promotion" size="16" color="#4680F9"></uni-icons>
          </view>
          <span class="info-text">善良的咖啡机提交了关于什么什么价格申请,阿姆斯特朗登月</span>
        </view>
      </view>
    </view>
    <Bars></Bars>
  </view>
</template>

<script>
import {getApprovalList} from "../../api/approval"
import Bars from '../../components/tabBar/tabBar.vue';
import imgUtil from '../../utils/imgUtil';
export default {
   components:{
    Bars
  },
  data(){
    return {
      approvalList:[],
      pictureList:[imgUtil.approvalBanner]
    }
  },
  onLoad(options) {
		uni.hideTabBar()
    this.getApprovalList()
  },
  methods:{
    //获取审批列表
    getApprovalList(){
      getApprovalList().then(res=>{
        if(res.data.code == 200){
          this.approvalList=res.data.data.list
        }
      })
    },
    //跳转页面
    toPage(url){
      uni.navigateTo({ url: url })
      // switch (item) {
      //   case '1':
      //     uni.navigateTo({ url: '/subpages/approval/launch' })
      //     break;
      //   case '2':
      //     uni.navigateTo({ url: '/subpages/approval/done' })
      //     break;
      //   case '3':
      //     uni.navigateTo({ url: '/subpages/approval/pending' })
      //     break;
      //   default:
      //     break;
      // }
    },
    
    //跳转到发起审批
    toForm(item){
      console.log(item);
      uni.navigateTo({ url: `/subpages/approvalform/${item.enCode}?flowId=${item.id}`})
    },

  }
};
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
view {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}
.report-list {
			display: flex;
			flex-wrap: wrap;
      flex-direction: row;
			padding: 0 16rpx 16rpx;

			.item {
				display: flex;
				align-items: center;
				background: #fff;
				width: calc(50% - 40rpx);
				margin: 16rpx 20rpx;
				padding: 32rpx;

				.item-img {
					width: 76rpx;
					height: 68rpx;
				}

				.item-text {
					font-size: 24rpx;
					line-height: 2;
					color: #222;
				}
			}
		}

page {
  background-color: #f5f7fa;
}
/* #endif*/
.approval {
  /* #ifndef APP-NVUE */
		display: flex;
		width: 750rpx;
		min-height: 100%;
		/* #endif */
		flex-direction: column;
		flex: 1;
		background-color: #f5f7fa;
    .top-banner{
      padding: 32rpx 32rpx 0;
    }
  .grid{
    padding: 36rpx 48rpx;
    margin: 40rpx 32rpx 0;
    background-color: #fff;
    border-radius: 10rpx;
    color: #000;
    .grid-img{
      width: 64rpx;
      height: 64rpx;
    }
    .grid-text{
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  }
  .list-wrap{
    @extend .grid;
    padding: 0;
    .cell-wrap{
      padding-left: 40rpx;
      display: flex;
      flex-direction: row;
      justify-content: left;
      flex-wrap: wrap;
      .cell-item{
        text-align: center;
        width: 100rpx;
        margin-right: 61rpx;
        font-size: 20rpx;
        margin-bottom: 40rpx;
        .cell-icon{
          width: 100rpx;
          height: 100rpx;
          background-color: #E1EBFF;
          border-radius: 10rpx;
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-bottom: 10rpx;
        }
      }
    }
    
    .grid-text{
      font-size: 24rpx;
      margin-top: 12rpx;
      color: #999;
    }
  }
  .message-wrap{
    margin: 40rpx 32rpx;
    background-color: #fff;
    padding: 40rpx;
		border-radius: 10rpx;
    .message-title{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        line-height: 32rpx;
        .label{
          color: #222;
          font-size: 28rpx;
          font-weight: bold;
        }
        .message{
          display: flex;
          flex-direction: row;
          color: #999;
          font-size: 24rpx;
        }
      }
      .message-item{
        margin-top: 32rpx;
        background-color: #f9f9f9;
        border-radius: 10rpx;
        padding: 28rpx 32rpx;
        .title{
          justify-content: space-between;
          display: flex;
          flex-direction: row;
          // width: 176rpx;
          color: #999;
          font-size: 24rpx;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 32rpx;
        }
        .info{
          flex-direction: row;
          .cell-icon{
            width: 50rpx;
            height: 50rpx;
            background-color: #E1EBFF;
            border-radius: 10rpx;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-right: 32rpx;
          }
          .info-text{
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 22rpx;
            color: #666;
          }
        }
      }
  }
}
</style>