crm-mobile/pages/application/index.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="nav-bar linear-gradient">
      我的
    </view>

    <scroll-view :scroll-y="true" class="main-container">
      <view class="header-top">
        <view class="bg linear-gradient" />
        <view class="card">
          <view class="user-box" @click="handleTo('/pages_personal/user')">
            <wk-avatar :name="userInfo.realname" :avatar="userInfo.img" :size="16" class="avatar" />
            <view class="info">
              <view class="name">
                {{ userInfo.realname }}
              </view>
              <view class="position">
                {{ userDesc }}
              </view>
            </view>
            <text class="more-icon" />
          </view>
          <view class="company-name">
            <text class="wk wk-customer" />
            {{ companyInfo.companyName || appName }}
          </view>

          <view class="statistics">
            <view
              v-for="(item, index) in statisticsList"
              :key="index"
              class="statistics-item"
              @click="handleTo(item.path, item.query)">
              <text class="statistics-item__value">
                {{ item.value }}
              </text>
              <text class="statistics-item__label">
                {{ item.label }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <view class="section backlog">
        <view class="backlog-item" @click="handleTo('/pages_message/messageIndex')">
          <view v-if="backlogDetail.messageNum" class="badge">
            {{ formatBadge(backlogDetail.messageNum) }}
          </view>
          <image :src="$static('images/application/clock.png')" class="pic" />
          <text class="text">
            消息
          </text>
        </view>
        <view class="line" />
        <view class="backlog-item" @click="handleTo('/pages_message/backlogIndex')">
          <view v-if="backlogDetail.backlogNum" class="badge">
            {{ formatBadge(backlogDetail.backlogNum) }}
          </view>
          <image :src="$static('images/application/chat.png')" class="pic" />
          <text class="text">
            待办
          </text>
        </view>
      </view>

      <view v-if="crmList.length > 0" class="section">
        <view class="section-title">
          <image :src="$static('images/icon/crm.png')" class="icon" />
          <text class="text">
            客户管理
          </text>
        </view>
        <view class="section-body">
          <template v-for="(item, index) in crmList">
            <view
              :key="index"
              class="nav-list-item"
              @click="handleTo(item.url)">
              <image :src="$static(item.icon)" alt="" class="nav-list-item-icon" />
              <text class="nav-list-item-label">
                {{ item.label }}
              </text>
            </view>
          </template>

          <template v-if="crmList.length % 4 !== 0">
            <view
              v-for="i in (4 - crmList.length % 4)"
              :key="i | emptyKey"
              style="visibility: hidden;"
              class="nav-list-item" />
          </template>
        </view>
      </view>

      <view v-if="oaList.length > 0" class="section">
        <view class="section-title">
          <image :src="$static('images/icon/work.png')" class="icon" />
          <text class="text">
            办公
          </text>
        </view>
        <view class="section-body">
          <template v-for="(item, index) in oaList">
            <view
              :key="index"
              class="nav-list-item"
              @click="handleTo(item.url)">
              <image :src="$static(item.icon)" alt="" class="nav-list-item-icon" />
              <text class="nav-list-item-label">
                {{ item.label }}
              </text>
            </view>
          </template>

          <template v-if="oaList.length % 4 !== 0">
            <view
              v-for="i in (4 - oaList.length % 4)"
              :key="i | emptyKey"
              style="visibility: hidden;"
              class="nav-list-item" />
          </template>
        </view>
      </view>

      <view class="section cell">
        <view class="cell-box" @click="handleTo('/pages_personal/about')">
          <image :src="$static('images/icon/airplane.png')" class="icon" />
          <text class="text">
            关于
          </text>
          <text class="more-icon" />
        </view>
        <view class="cell-box" @click="handleTo('/pages_personal/setting')">
          <image :src="$static('images/icon/setting.png')" class="icon" />
          <text class="text">
            设置
          </text>
          <text class="more-icon" />
        </view>
      </view>

      <view class="empty" />
    </scroll-view>

    <wk-tabbar v-model="footerIndex" :list="mixinFooterNav" />

    <uni-popup ref="popup" :mask-click="false" type="dialog">
      <wk-popup-expiration />
    </uni-popup>
  </view>
</template>

<script>
  import {
    QueryCompanyConfig
  } from 'API/admin'
  import {
    QueryOaBusinessNum
  } from 'API/oa/journal'

  import { crmLibList, oaLibList } from '@/utils/data.js'
  import tabbar from '@/mixins/tabbar.js'
  import {
    mapGetters,
    mapActions
  } from 'vuex'
  import {
    appName
  } from '@/config.js'

  export default {
    name: 'ApplicationIndex',
    filters: {
      emptyKey(key) {
        return `empty_${key}`
      }
    },
    mixins: [tabbar],
    data() {
      return {
        appName: appName,
        companyInfo: {},

        statisticsList: [
          { label: '我的日志', field: 'logNum', value: 0, path: '/pages_log/index', query: {by: 1} },
          { label: '我的审批', field: 'examineNum', value: 0, path: '/pages_examine/list', query: {by: 'my', tab: 1} },
          { label: '我的任务', field: 'taskNum', value: 0, path: '/pages_task/index', query: {type: 1} },
          { label: '我的跟进', field: 'activityNum', value: 0, path: '/pages_oa/record/index', query: {subUser: 0} }
        ]
      }
    },
    computed: {
			...mapGetters({
				userInfo: 'user/userInfo',
				showExpiration: 'user/showExpiration',
				backlogDetail: 'base/backlogDetail'
			}),
			userDesc() {
				let str = ''
				str = `${this.userInfo.deptName || ''}-${this.userInfo.post || ''}`
				if (
					str.startsWith('-') ||
					str.endsWith('-')
				) {
					return str.replace(/-/g, '')
				}
				return str
			},
			crmList() {
				const that = this
				return crmLibList.filter(o => {
					return that.$auth(o.auth)
				})
			},
			oaList() {
				const that = this
				return oaLibList.filter(o => {
					return that.$auth(o.auth)
				})
			},
    },
    watch: {
      showExpiration: {
        handler() {
          if (this.showExpiration) {
            this.$nextTick(function() {
              this.$refs.popup.open()
            })
          }
        },
        immediate: true,
        deep: true
      }
    },
    created() {
      this.getCompanyConfig()
      console.log('auth: ', this.$auth('crm.taskExamine'))
    },
    onShow() {
      this.getStatistics()
      this.getBacklogTotal()
    },
    methods: {
			...mapActions({
				getBacklogTotal: 'base/getBacklogTotal'
			}),

			getCompanyConfig() {
				QueryCompanyConfig().then(res => {
					this.companyInfo = res || {}
				}).catch()
			},

			getStatistics() {
				QueryOaBusinessNum().then(res => {
					this.statisticsList.forEach(item => {
						if (res.hasOwnProperty(item.field)) {
							this.$set(item, 'value', res[item.field])
						}
					})
				}).catch()
			},

			handleTo(url, query = {}) {
				if (!url) return
				this.$Router.navigateTo({
					url,
					query
				})
			},

			formatBadge(num) {
				const val = Number(num)
				if (isNaN(val)) return null
				if (val > 99) return '99+'
				return val
			}
    }
  }
</script>

<style scoped lang="scss">
	.nav-bar {
		width: 100%;
		height: 88rpx;
		font-size: 34rpx;
		color: white;
		padding: 0 32rpx;
		@include left;
	}

	.more-icon {
		width: 18rpx;
		height: 18rpx;
		border-top: 5rpx solid #999;
		border-right: 5rpx solid #999;
		transform: translate(-50%, 0) rotate(45deg);
		display: inline-block;
	}

	.main-container {
		.header-top {
			position: relative;
			width: 100%;
			padding-bottom: 30rpx;

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 190rpx;
			}

			.card {
				position: relative;
				width: calc(100% - 48rpx);
				border-radius: 10rpx;
				background-color: white;
				box-shadow: 0 14rpx 16rpx 0 rgba(28, 108, 255, 0.10);
				margin: 0 auto;

				.user-box {
					padding: 32rpx 32rpx 12rpx;
					@include left;

					.avatar {
						width: 98rpx;
						height: 98rpx;
						border-radius: 50%;
						overflow: hidden;
						border: 2rpx solid #fff;
					}

					.info {
						flex: 1;
						font-size: $wk-font-sm;
						margin-left: 36rpx;

						.name {
							font-size: 34rpx;
							font-weight: 500;
							color: $dark;
						}

						.position {
							color: $gray;
							font-size: $wk-font-base;
						}
					}
				}

				.company-name {
					width: 100%;
					font-size: $wk-font-base;
					color: $gray;
					padding: 10rpx 32rpx 20rpx;
					@include ellipsis;

					.wk {
						color: $theme-color;
						margin-right: 15rpx;
					}
				}

				.statistics {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 50rpx;
					.statistics-item {
						font-weight: 500;
						color: $dark;
						flex-direction: column;
						@include center;
						.statistics-item__value {
							font-size: 34rpx;
							margin-bottom: 10rpx;
						}
						.statistics-item__label {
							font-size: $wk-font-sm;
						}
					}
				}
			}
		}

		.section {
			width: calc(100% - 48rpx);
			background-color: white;
			border-radius: 12rpx;
			border: 1rpx solid $border-color;
			margin: 0 auto 20rpx;

			.section-title {
				border-bottom: 1rpx solid $border-color;
				padding: 20rpx 32rpx;
				@include left;

				.icon {
					width: 34rpx;
					height: 34rpx;
					margin-right: 15rpx;
				}

				.text {
					font-size: $wk-font-large;
					font-weight: 500;
					color: $dark;
					line-height: 1;
				}
			}

			.section-body {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx 0;
				.nav-list-item {
					width: 20%;
					flex-direction: column;
					margin: 15rpx;
					@include center;
					.nav-list-item-icon {
						width: 58rpx;
						height: 58rpx;
					}
					.nav-list-item-label {
						font-size: $wk-font-base;
						color: $dark;
						margin-top: 12rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}

		.backlog {
			padding: 38rpx 0 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.line {
				width: 2rpx;
				height: 80rpx;
				background: $border-color;
			}
			.backlog-item {
				position: relative;
				flex: 1;
				margin: 0 112rpx;
				flex-direction: column;
				@include center;
				.pic {
					width: 72rpx;
					height: 72rpx;
				}
				.text {
					font-size: $wk-font-sm;
					margin-top: 10rpx;
				}

				.badge {
					position: absolute;
					top: -10rpx;
					left: calc(50% + 15rpx);
					z-index: 10;
					min-width: 32rpx;
					height: 32rpx;
					font-size: $wk-font-mini;
					line-height: normal;
					color: white;
					background-color: #E60000;
					border-radius: 32rpx;
					padding: 0 10rpx;
					@include center;
				}
			}
		}

		.empty {
			width: 100%;
			height: 1rpx;
			visibility: hidden;
		}

		.cell {
			padding: 15rpx;
			.cell-box {
				width: 100%;
				padding: 20rpx 15rpx;
				@include left;
				.icon {
					width: 38rpx;
					height: 38rpx;
				}
				.text {
					flex: 1;
					font-size: $wk-font-medium;
					color: $dark;
					margin-left: 15rpx;
				}
			}
		}
	}
</style>