storage-wechat/pages/select/select.vue

<template>
	<view class="select">
		<view class="menu">
			<view :class="menuType == 1 ? 'active': ''" @click="menuFn(1)">
				<span>总览</span>
			</view>
			<view :class="menuType == 2 ? 'active': ''" @click="menuFn(2)">
				<span>库存明细</span>
			</view>
		</view>
		<view class="content" v-if="menuType == 1">
			<view class="" v-for="i in listData" :key="i.technologyType">
				<view class="select-title">
					<view class="">
						{{i.name}}
					</view>
					<view style="color: #F59A23;">
						总金额{{i.totalAmount || 0}}
					</view>
					<view style="color: #487CFF;">
						{{i.total || 0}}件
					</view>
					<view style="color: #487CFF;">
						{{i.totalQuantity || 0}}
					</view>
				</view>
				<uni-card>
					<uni-row class="demo-uni-row">
						<uni-col :span="11">
							<view class="demo-uni-col dark">用途</view>
						</uni-col>
						<uni-col :span="5">
							<view class="demo-uni-col light">金额</view>
						</uni-col>
						<uni-col :span="4">
							<view class="demo-uni-col light">件数</view>
						</uni-col>
						<uni-col :span="4">
							<view class="demo-uni-col light">数量</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row" v-for="j in i.list">
						<uni-col :span="11">
							<view class="demo-uni-col dark">{{j.rurpose || j.name}} </view>
						</uni-col>
						<uni-col :span="5">
							<view class="demo-uni-col light">{{j.amount}} </view>
						</uni-col>
						<uni-col :span="4">
							<view class="demo-uni-col light">{{j.number}} </view>
						</uni-col>
						<uni-col :span="4">
							<view class="demo-uni-col light">{{j.quantity}} </view>
						</uni-col>
					</uni-row>
					
				</uni-card>
			</view>
		</view>
		<view class="content" style="background: #fff;" v-else>
			<view class="addQrcode-list" v-for="(i,index) in listData2" :key="i.materialId">
				<view class="fl">
					<view class="" style="color: #aaaaaa;">
						{{i.code}} <span style="margin-left: 50rpx;">{{i.name}} </span>
					</view>
					<view class="">
						
					</view>
					<view class="">
						库存件数：{{i.count}} <span style="margin-left: 50rpx;">库存数量：{{i[1] + i[2]}}</span>
					</view>
					<view class="">
						一楼面料仓库：{{i[1]}}
					</view>
					<view class="">
						四楼面料仓库：{{i[2]}}
					</view>
				</view>
				<!-- <view class="fr">
					<uni-icons type="forward" color="#0066CC"  size="30"></uni-icons>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				req: {
					keyword:null,
					pageSize:1000,
				},
				listData:[],
				menuType:1,
				listData2:[],
			}
		},
		onLoad: function(option) {
			const v = this
			v.getData()
		},
		methods: {
			menuFn(_type){
				this.menuType = _type
			},
			getData(){
				const v = this
				v.$post('/wx/recordDetails/selectType',{
					technologyType:0,
				}).then(res=>{
					console.log(res)
					res.data.name = '直喷'
					v.listData.push(res.data)
					console.log(v.listData)
				})
				v.$post('/wx/recordDetails/selectType',{
					technologyType:1,
				}).then(res=>{
					res.data.name = '热转'
					v.listData.push(res.data)
					console.log(v.listData)
				})
				v.$post('/wx/recordDetails/selectType',{
					technologyType:2,
				}).then(res=>{
					res.data.name = '打纸'
					v.listData.push(res.data)
					console.log(v.listData)
				})
				v.$post('/wx/recordDetails/selectMaterialStock',v.req).then(res=>{
					v.listData2 = res.data.rows
					console.log(v.listData)
				})
			},
		},
		created() {
			
		}
	}
</script>

<style lang="less">
	.select {
		background-color: #f4f4f4;
		min-height: 100vh;
		.addQrcode-list {
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			padding: 15rpx;
			border-bottom: 1rpx solid #dcdcdc;
			font-size: 24rpx;
			.fr {
				line-height: 120rpx;
				color: #0066CC;
			}
		}
		.select-title {
			height: 60rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			font-size: 28rpx;
		}

		.menu {
			background-color: #fff;
			display: flex;
			view {
				width: 50%;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
			}

			view.active {
				span {
					color: #333333;
					border-bottom: 2px solid #487CFF;
					padding: 16rpx;
					height: 100rpx;
					line-height: 100rpx;
				}

				color: #fff;
			}

		}
	}
</style>