productLine-applet/pages/index/index.vue

<template>
  <view class="page">
	  <!-- 顶部自定义导航 -->
	  <tn-nav-bar :isBack="fasle" fixed>产线检测 </tn-nav-bar>
	  <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		  <view class="page-top-bg tn-main-gradient-blue">
			<view class="title">助力企业产线管理在线化、数智化</view>
			<!-- <img src="@/static/image/index-bg.jpg" draggable="false"> -->
		  </view>
		  <view class="page-items">
		    <tn-list-view  >
		      <tn-list-cell v-if="permission == 1 || permission == 2 || permission == 5">
		        <view class="message tn-margin-left message tn-margin-top tn-margin-bottom" @click="toPage(1)">
		          <view class="message__left">
					<!-- <img class="item-img" src="@/static/image/list-search.png"> -->
					<view class="tn-icon-search-list tn-main-gradient-blue  item-icon"></view>
		          </view>
		          <view class="message__middle">
		            <view class="message__name">下线查询</view>
		            <view class="message__content tn-text-ellipsis">采集生产数据、掌握生产进度</view>
		          </view>
		          <view class="message__right">
		            <view class="message__tips tn-margin-right">
		              <text class="message__tips__icon tn-icon-sound-close tn-icon-right"></text>
		            </view>
		          </view>
		        </view>
		      </tn-list-cell>
		      <tn-list-cell v-if="permission == 1 || permission == 3">
		        <view class="message tn-margin-left message tn-margin-top tn-margin-bottom" @click="toPage(2)">
		          <view class="message__left">
					<view class="tn-icon-scan tn-main-gradient-cyan item-icon"></view>
		          </view>
		          <view class="message__middle">
		            <view class="message__name">扫码入库</view>
		            <view class="message__content tn-text-ellipsis">数据实时上传、监控质量和追溯</view>
		          </view>
		          <view class="message__right">
		            <view class="message__tips tn-margin-right">
		              <text class="message__tips__icon tn-icon-sound-close tn-icon-right"></text>
		            </view>
		          </view>
		        </view>
		      </tn-list-cell>
		      <tn-list-cell v-if="permission == 1 || permission == 2 || permission == 5">
		        <view class="message tn-margin-left message tn-margin-top tn-margin-bottom" @click="toPage(5)">
		          <view class="message__left">
					<!-- <img class="item-img" src="@/static/image/list-search.png"> -->
					<view class="tn-icon-write tn-main-gradient-red--reverse  item-icon"></view>
		          </view>
		          <view class="message__middle">
		            <view class="message__name">数据补偿</view>
		            <view class="message__content tn-text-ellipsis">NG数据补偿，调整、多入口解决</view>
		          </view>
		          <view class="message__right">
		            <view class="message__tips tn-margin-right">
		              <text class="message__tips__icon tn-icon-sound-close tn-icon-right"></text>
		            </view>
		          </view>
		        </view>
		      </tn-list-cell>
		      <tn-list-cell v-if="permission == 1 || permission == 2 || permission == 3 || permission == 4 || permission == 5">
		        <view class="message tn-margin-left message tn-margin-top tn-margin-bottom" @click="toPage(3)">
		          <view class="message__left">
					<view class="tn-icon-set tn-main-gradient-orangered--reverse item-icon"></view>
		          </view>
		          <view class="message__middle">
		            <view class="message__name">返工返修</view>
		            <view class="message__content tn-text-ellipsis">返修数据采集、推送，实时审核</view>
		          </view>
		          <view class="message__right">
		            <view class="message__tips tn-margin-right">
		              <text class="message__tips__icon tn-icon-sound-close tn-icon-right"></text>
		            </view>
		          </view>
		        </view>
		      </tn-list-cell>
			  <tn-list-cell v-if="permission == 1 || permission == 5">
			    <view class="message tn-margin-left message tn-margin-top tn-margin-bottom" @click="toPage(4)">
			      <view class="message__left">
					<view class="tn-icon-data tn-main-gradient-orange--reverse item-icon"></view>
			      </view>
			      <view class="message__middle">
			        <view class="message__name">报表中心</view>
			        <view class="message__content tn-text-ellipsis">数据报表查询，汇总，实时掌握</view>
			      </view>
			      <view class="message__right">
			        <view class="message__tips tn-margin-right">
			          <text class="message__tips__icon tn-icon-sound-close tn-icon-right"></text>
			        </view>
			      </view>
			    </view>
			  </tn-list-cell>
		    </tn-list-view>
			</view>
		  
	  <!-- <view class="button-vip tn-flex tn-flex-row-between tn-shadow-blur tn-main-gradient-blue ">
		<view class="tn-margin-left tn-margin-top-lg tn-padding-xl page-top-bg">
		  <img src="https://resource.tuniaokj.com/images/index_bg/components_new.jpg" draggable="false">
		</view>
		
	  </view> -->
	  
	  </view>
  </view>
</template>

<script setup>
  export default {
    data(){
      return {
		permission: this.api.getUserPermission()
      }
    },
	onShow(){
	},
    methods: {
		toPage(type){
			if(type==1){ 
				uni.navigateTo({
					url:"/pages/product/query" 
				})
			}else if(type==2){ 
				uni.navigateTo({
					url:"/pages/product/inStock" 
				})
			}else if(type==3){ 
				uni.navigateTo({
					url:"/pages/product/reworkRecord" 
				})
			}else if(type==4){ 
				uni.navigateTo({
					url:"/pages/reportCenter/index" 
				})
			}else if(type==5){ 
				uni.navigateTo({
					url:"/pages/product/query?status=-1" 
				})
			}
		}
    }
  }
</script>

<style lang="scss" scoped>
	.page{
		background-color: #F4F4F4;
		height: 100vh;
		
		/deep/ .tn-list-view{
			background-color: transparent;
		}
		/deep/ .tn-list-cell{
			margin: 30rpx;
			width: calc(100% - 60rpx);
		}
		.page-top-bg{
			height: 350rpx;
			image{
				width: 100%;
				height: 100%;
			}
			.title{
				text-align: center;
				position: absolute;
				top: 18%;
				width: 100%;
				color: #fff;
				font-size: 20px;
			}
		}
		.page-items{
			position: absolute;
			top: 25%;
			width: 100vw;
			.item-img{
				height: 150rpx;
				width: 130rpx;
			}
			.item-icon{
				color: #fff;
				width: 120rpx;
				font-size: 80rpx;
				height: 140rpx;
				padding-top: 30rpx;
				border-radius: 20rpx;
			}
		}
	
		
		.message {
		  display: flex;
		  flex-direction: row;
		  align-items: center;
		  justify-content: space-around;
		  
		  &__left {
		    width: 20%;
		  }
		  &__middle {
		    width: 75%;
		    padding-left: 50rpx;
		  }
		  &__right {
		    width: 5%;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		  }
		  
		  &__name {
		    font-size: 32rpx;
		    margin-bottom: 8rpx;
		  }
		  &__content {
		    font-size: 26rpx;
		    color: #838383;
		  }
		  &__tips {
		    &__icon {
		      font-size: 36rpx;
		      color: #AAAAAA;
		    }
		  }
		}
	}
</style>