crm-mobile/pages_examine/index.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="审批" />

      <view class="container">
        <view class="top">
          <view class="box" @click="handleTo('my')">
            <image :src="$static('images/examine/owner_sponsor.png')" class="box-pic" />
            <text class="text">
              我发起的
            </text>
          </view>
          <view class="line" />
          <view class="box" @click="handleTo('examine')">
            <image :src="$static('images/examine/owner_examine.png')" class="box-pic" />
            <text class="text">
              我审批的
            </text>
          </view>
        </view>

        <view class="section-title">
          新建审批
        </view>
        <view class="container-body">
          <view
            v-for="(item, index) in categoryList"
            :key="index"
            class="box body-box"
            @click="createExamine(item)">
            <view :style="{backgroundColor: item.examineIcon ? item.examineIcon.split(',')[1] : '#9376ff'}" class="icon">
              <text :class="item.examineIcon ? item.examineIcon.split(',')[0] : 'wk wk-approve'" />
            </view>
            <text class="text">
              {{ item.examineName }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { QueryPartList } from 'API/examine'

  export default {
    name: 'OaExamineIndex',
    data() {
      return {
        categoryList: []
      }
    },
    mounted() {
      this.getCategoryList()
    },
    methods: {
      getCategoryList() {
        QueryPartList({
          label: 0
        }).then(res => {
          this.categoryList = res.list
        }).catch(() => {})
      },

      handleTo(type) {
        this.$Router.navigateTo({
          url: '/pages_examine/list',
          query: {
            by: type
          }
        })
      },
			
      // categoryId: item.examineId
      createExamine(item) {
        this.$Router.navigateTo({
          url: '/pages_examine/add',
          query: {
            examineId: item.examineId,
            title: item.examineName
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	.box {
		width: 23%;
		flex-direction: column;
		margin: 24rpx 1%;
		@include center;
	
		.box-pic, .icon {
			width: 80rpx;
			height: 80rpx;
			color: white;
			margin-bottom: 15rpx;
			@include center;
	
			.wk {
				font-size: 42rpx;
			}
		}
		
		.text {
			width: 100%;
			font-size: 26rpx;
			color: $gray;
			text-align: center;
			@include ellipsis;
		}
	}
	
	.main-container {
		background-color: #F5F5F5;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.container {
			flex: 1;
			overflow-y: scroll;
			
			.section-title {
				font-weight: bold;
				font-size: $wk-font-medium;
				background-color: white;
				padding: 26rpx 20rpx 10rpx 20rpx;
				&.border {
					border-bottom: 1rpx solid $border-color;
				}
			}
			
			.top {
				background-color: white;
				margin-bottom: 20rpx;
				padding: 15rpx 0;
				@include center;

				.box {
					margin: 24rpx 11.5%;
					.box-pic {
						width: 66rpx;
						height: 66rpx;
					}
				}
				.line {
					width: 1rpx;
					height: 100rpx;
					background-color: $border-color;
				}
			}

			.container-body {
				background-color: #fff;
				display: flex;
				flex-wrap: wrap;
				color: $dark;
				padding-bottom: 15rpx;
				
				.body-box {
					.icon {
						border-radius: 50%;
					}
				}
			}
		}
	}
</style>