epidemic_apply/pages/apply/applyItem/applyItem.vue

<template>
	<view class="content">
		<!-- 自定义导航 -->
		<view class="navbar-box">
			<u-navbar title="申请详情" :safeAreaInsetTop="true" @custom-back="leftClick"></u-navbar>
		</view>
		<view class="wrap">
			<view class="item-title">物资信息</view>
			<view class="list">
				<view class="item u-flex u-row-between" v-for="item in productList" :key="item.id">
					<view class="left u-flex">
						<image :src="item.imgUrl" mode="aspectFill"></image>
						<view class="text">
							<view class="name u-m-b-10">{{item.mateName}}</view>
							<view class="u-tips-color">{{filterSpecName(item.specCode)}}*{{filterUnitName(item.unitCode)}}</view>
						</view>
					</view>
					<view class="right">
						<view class="" v-if="askforStatus==2" style="color: #919191;">
							<view class="u-m-b-10">申请数量:{{item.askforNum}}</view>
							<view class="">审批数量:{{item.grantNum}}</view>
						</view>
						<view class="" v-else style="color: #003bff;">
							{{item.askforNum}}{{filterUnitName(item.unitCode)}}
						</view>
					</view>
				</view>
				<view class="show-more" v-if="showMore" @click="jumpPage(`/pages/apply/applylist/list?id=${id}&askforStatus=${askforStatus}`)">
					<text>查看更多</text> 
				</view>
			</view>
			<u-gap class="gap" height="20" bg-color="#ededed"></u-gap>
			<view class="item-title">领取信息</view>
			<view class="info-item u-flex">
				<view class="til u-m-r-10">领取方式:</view>
				<view class="con u-tips-color">{{filterPaymentName(details.storeOutType)}}</view>
			</view>
			<view class="info-item u-flex" v-if="details.storeOutType==1">
				<view class="til u-m-r-10">预计取货时间:</view>
				<view class="con u-tips-color">{{details.dispTime}}</view>
			</view>
			<view class="info-item u-flex" v-if="details.storeOutType==2">
				<view class="til u-m-r-10">派送地址:</view>
				<view class="con u-tips-color">{{details.dispAddress}}</view>
			</view>
			<view class="info-item u-flex">
				<view class="til u-m-r-10">联系人姓名:</view>
				<view class="con u-tips-color">{{details.contactPerson}}</view>
			</view>
			<view class="info-item u-flex">
				<view class="til u-m-r-10">联系人电话:</view>
				<view class="con u-tips-color">{{details.contactPhone}}</view>
			</view>
			<u-gap class="gap" height="20" bg-color="#ededed"></u-gap>
			<view class="item-title">审批信息</view>
			<view class="info-item u-flex">
				<view class="til u-m-r-10">审批状态:</view>
				<view class="con u-tips-color">{{details.askforStatus|filterAskforStatus}}</view>
			</view>
			<view class="info-item u-flex">
				<view class="til u-m-r-10">审批人:</view>
				<view class="con u-tips-color">{{details.processUserName||'-'}}</view>
			</view>
			<view class="info-item u-flex">
				<view class="til u-m-r-10">审批时间:</view>
				<view class="con u-tips-color">{{details.processTime||'-'}}</view>
			</view>
			<view class="text-color-red" v-if="details.remark">备注:{{details.remark}}</view>
		</view>
	</view>
</template>

<script>
	import {otherApiUrl} from '@/common/apiurl.js';
	export default {
		data() {
			return {
				id:'',
				details:{},
				productList:[],
				unitNameList:[],
				askforStatus:'',
				paymentList:[],
				specNameList:[],
				showMore:false,
			}
		},
		onLoad(page) {
			this.id = page.id;
			this.askforStatus = page.askforStatus;
			this.getApplyDetails(page.id);
			this.getApplyDetailsProduct();
			this.unitNameDict();
			this.getpaymentList();
			this.specNameDict();
			
		},
		computed:{
			filterUnitName(){
				return function(value){
					let v = '';
					for (let i = 0; i < this.unitNameList.length; i++){
						// console.log('value',value);
						// console.log('value',this.unitNameList[i]);
						let item = this.unitNameList[i];
						if (value == item.value) {
						  v = item.label;
						  break;
						}
					}
					return v
				}
			},
			filterSpecName(){
				return function(value){
					let v = '';
					for (let i = 0; i < this.specNameList.length; i++){
						// console.log('value',value);
						// console.log('value',this.specNameList[i]);
						let item = this.specNameList[i];
						if (value == item.value) {
						  v = item.label;
						  break;
						}
					}
					return v
				}
			},
			filterPaymentName(){
				return function(value){
					let v = '';
					for (let i = 0; i < this.paymentList.length; i++){
						// console.log('value',value);
						// console.log('value',this.paymentList[i]);
						let item = this.paymentList[i];
						if (value == item.value) {
						  v = item.label;
						  break;
						}
					}
					return v
				}
			}
		},
		methods: {
			leftClick() {
			   let canNavBack = getCurrentPages();
			     if(canNavBack && canNavBack.length>1) {  
			       uni.navigateBack({  
			         delta: 1  
			       });  
			     } else {  
			       history.back();  
			     }
			},
			// 跳转页面
			jumpPage (url) {
				if(url) {
					uni.navigateTo({
						url: url
					});
				}
			},
			async getApplyDetails(id) {
				let { code, data, msg} = await this.$u.get(otherApiUrl.applyDetails + id)
				if(code === 200) {
					this.details = data
				}else{
					uni.showToast({
						title:msg,
						icon:'error'
					})
				}
			},
			async getApplyDetailsProduct(id) {
				let param ={
					pageNum:1,
					pageSize:1000,
					askfoId:this.id,
				}
				let { code, rows, msg} = await this.$u.api.applyDetailsProduct(param);
				if(code === 200) {
					// this.productList = rows;
					if(rows.length>2){
						this.showMore = true;
					}
					this.productList = rows.slice(0,2);
				}else{
					uni.showToast({
						title:msg,
						icon:'error'
					})
				}
			},
			async unitNameDict() {
				let { code, data, msg} = await this.$u.get(otherApiUrl.getDict + 'goods_unit_name')
				if(code === 200) {
					this.unitNameList = data.map(item => {
						return {
							label: item.dictLabel,
							value: item.dictValue
						}
					})
				}
			},
			async specNameDict() {
				let { code, data, msg} = await this.$u.get(otherApiUrl.getDict + 'goods_spec_name')
				if(code === 200) {
					this.specNameList = data.map(item => {
						return {
							label: item.dictLabel,
							value: item.dictValue
						}
					})
				}
			},
			async getpaymentList() {
				let { code, data, msg} = await this.$u.get(otherApiUrl.getDict + 'payment')
				if(code === 200) {
					this.paymentList = data.map(item => {
						return {
							label: item.dictLabel,
							value: item.dictValue
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.item{
	margin: 24rpx;
	padding: 24rpx;
	border: 1px solid #ddd;
	border-radius: 10rpx;
	.left image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 12rpx;
	}
}
.info-item{
	margin-bottom: 10rpx;
}
.show-more{
	text-align: center;
	color: blue;
}
</style>