emergencyManagement/pages/goods/index.vue

<template>
	<view class="page-wrap">
		<view class="pageTabs">
			<uni-segmented-control :current="tabIdx" :values="tabs" style-type="text" active-color="#007aff" @clickItem="changeTab" />	
		</view>	
		<view class="head">
			<uni-section title="物资列表" type="line">
				<template v-slot:right>
				  <view class="handle" @click="linkToRecord">出库/入库记录</view>
				</template>
			</uni-section>
			<view class="addbt" @click="onInbound('in',tabIdx+1)">
				<view class="word">物资入库</view>
			</view>
		</view>	
		<view class="pageMain">
			<uni-card v-for="(item,idx) in items" :key="idx" padding="0">
				<template v-slot:title>
					<view class="title">
						<view class="name">
							<uni-tag :text="item.goodsCatTitle" type="primary"></uni-tag>
						</view>
						<uni-tag :text="`${item.count}`" custom-style="background-color: #ecf5ff; border-color: #d9ecff; color: #409eff;"></uni-tag>
					</view>
				</template>
				<view class="bottom">
					<view class="groupName">
						<uni-tag :text="item.groupName" type="success" :inverted="true"></uni-tag>
					</view>
					<div class="handle" @click="onOutbound(item)"><uni-tag text="出库" type="warning" size="normal"  /></div>
				</view>			
			</uni-card>
		</view>
		<Inbound ref="inbound"></Inbound>
		<Outbound ref="outbound"></Outbound>
	</view>
</template>

<script>
	import Inbound from './components/Inbound.vue'
	import Outbound from './components/Outbound.vue'
	
	import goodsApi from '@/api/goods.js'	
	export default {
		components:{
			Inbound,
			Outbound
		},
		data() {
			return {
				tabIdx:0,			
				tabs:['行业物质','镇办物资'],
				items:[],
				goodsType: 1,
				keywords: ""
			}
		},
		onShow() {
			this.getData();
			this.init()
		},
		methods: {
			changeTab({currentIndex}){
				if (this.tabIdx !== currentIndex) {
					this.tabIdx = currentIndex	
					this.getData()
				}
			},
			init(){		
				if(!uni.getStorageSync('goodsCats')){
					goodsApi.getCatByList().then((res)=>{
						uni.setStorageSync('goodsCats',res.data)
					})
				}
			},
			getData(){
				goodsApi.counterByCat({goodsType:this.tabIdx+1}).then((res)=>{
					this.items=res.data
				})
			},
			onInbound(){
				this.$refs.inbound.show()
			},
			onOutbound(){
				this.$refs.outbound.show()
			},
			linkToRecord(){
				uni.navigateTo({
					url:`/pages/goods/record?type=${this.tabIdx+1}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-wrap{
	padding:0 20rpx;
	.pageTabs{
		background-color: #fff;
	}
	.head{
		margin-top: 20rpx;
		.handle{
			display: inline-block;
			background-color: #007aff;
			color: #fff;
			text-align: center;
			padding:16rpx 20rpx;
			border-radius: 6rpx;
			border: 1px solid #007aff;
			font-size: 28rpx;
			box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
		}
		.addbt{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			color: #fff;
			background-color: rgba(64,158,255,0.75);			
			box-shadow:0 0 10rpx rgba(0,0,0,0.6);
			position: fixed;
			right: 10rpx;
			bottom: 20%;
			z-index: 99;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			.word{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin: 5rpx auto;
				font-size: 28rpx;
				letter-spacing: 2px;
			}
		}
	}
	.pageMain{
		margin-top: 20rpx;
		background-color: #f5f5f5;
		padding-bottom: 50rpx;
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 16rpx;
		}
		.bottom{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.handle{
				padding: 10px 0 10px 20px;
			}
		}
	}
}
</style>