androidCnToWechatGrt/pagesStorage/storageRecord/detail.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='详情'></cus-header>
		<div class="info">
			<div class="item">
				<div class="left">订单类型</div>
				<div class="right">
					<div class="box" :class="typeClass[storageDto.orderType]||'mr'">{{typeCfg[storageDto.orderType]||''}}</div>
				</div>
			</div>
			<div class="item">
				<div class="left">商品信息</div>
				<div class="right">{{storageDto.itemName||''}}</div>
			</div>
			<div class="item">
				<div class="left">规格信息</div>
				<div class="right">{{storageDto.skuName||''}}</div>
			</div>
			<div class="item">
				<div class="left">仓库</div>
				<div class="right">{{storageDto.warehouseName||''}}</div>
			</div>
			<div class="item">
				<div class="left">操作单号</div>
				<div class="right">{{storageDto.orderNo||''}}</div>
			</div>
			<div class="item">
				<div class="left">操作前</div>
				<div class="right jc">{{storageDto.beforeQuantity||''}}</div>
			</div>
			<div class="item">
				<div class="left">操作后</div>
				<div class="right jc">{{storageDto.afterQuantity||''}}</div>
			</div>
			<div class="item">
				<div class="left">数量</div>
				<div class="right jc"><span v-if="storageDto.quantity>0">+</span>{{storageDto.quantity||0}}</div>
			</div>
			<div class="item">
				<div class="left">金额</div>
				<div class="right jc">￥{{storageDto.amount||0}}</div>
			</div>
			<div class="item">
				<div class="left">操作时间</div>
				<div class="right">{{storageDto.createDate||''}}</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				typeCfg:{},
				typeClass:{
					1:'rk',
					2:'ck',
					3:'yk',
					4:'pk'
				},
				storageDto:{}
			}
		},
		async onLoad(option) {
			await this.getStorageType();
			this.getDetailInfo(option.id);
		},
		methods:{
			async getStorageType(){
				let res = await this.$api.get('/sys/dict/data/getListByType/wms_inventory_history_type');
				if(res.data.code===0){
					res.data.data.forEach(d=>{
						this.typeCfg[d.dictValue] = d.dictLabel;
					})
				}else this.$showToast(res.data.msg)
			},
			getDetailInfo(id){
				this.$api.get('/wms/inventoryhistory/'+id).then(res=>{
					if(res.data.code===0){
						this.storageDto = res.data.data;
					}else this.$showToast(res.data.msg)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		width: 100%;
		padding: 0 24rpx 20rpx;
		box-sizing: border-box;
		background: #F4F8FB;
		.info{
			width: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			.item{
				width: 100%;
				padding: 24rpx 0;
				box-sizing: border-box;
				background: #FFFFFF;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
				display: flex;
				justify-content: space-between;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
					text-align: left;
				}
				.right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #4E5969;
					line-height: 42rpx;
					text-align: right;
					&.jc{
						font-weight: bold;
					}
					.box{
						height: 42rpx;
						border-radius: 6rpx;
						padding: 0 12rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 42rpx;
						&.rk{
							background: #14CC8C;
						}
						&.ck{
							background: #FF817C;
						}
						&.yk{
							background: #FEA34C;
						}
						&.pk{
							background: #98A1FE;
						}
						&.mr{
							background: lightgray;
						}
					}
				}
			}
		}
	}
</style>