wxThird/pages/subPack/depositDetail.vue

<template>
	<view class="box">
		<homenav :iStatusBarHeight="iStatusBarHeight" :title="'寄存详情'" :cj="4"></homenav>
	    <view class="top" :style="{background:'#'+themeColor}">
			<view class="orderState">
				<image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
				<view class="SheetState" v-if="data.sheetState==-1">待寄存</view>
				<view class="SheetState" v-if="data.sheetState==0">寄存中</view>
				<view class="SheetState" v-if="data.sheetState==1">已领取</view>
				<view class="SheetState" v-if="data.sheetState==2">已作废</view>
			</view>
		</view>
		<!-- 店铺信息 -->
		<view class="shopBox" ><!-- :class="{shopBoxpt:orderData.data.sheetState == 5}" -->
			<image src="../../static/timg/icon_che.png" mode="" class="shopBoximg"></image>
			<view class="shopCont">
				<view class="shopName">
				 <span style="font-weight: 500;padding-left: 20rpx;">{{data.plateNumber}}</span>
				 <span style="color: #3C3C3C;font-size: 24rpx;padding-left: 20rpx;">{{data.customerName}}</span>
				</view>
				<view class="Address">
					{{data.carModel}}
				</view>
		
			</view>
		</view>
		<!-- 基本信息 -->
		<view class="information">
			<view class="detailedTitle">基本信息</view>
			<view class="informationLine">
				<view class="informationTxt">寄存时间：</view>
				<view class="informationNum">{{data.billDate}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">寄存类型：</view>
				<view class="informationNum" >轮胎</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">数量：</view>
				<view class="informationNum">{{data.goodsQty}}</view>
			</view>
		</view>
		
		<view class="information" v-for="(item,index) in data.detailList">
			<view class="detailedTitle" style="display: flex;justify-content: space-between;">
				<view>
					<span v-if="item.locationType==1">左前</span>
					<span v-if="item.locationType==2">右前</span>
					<span v-if="item.locationType==3">左后</span>
					<span v-if="item.locationType==4">右后</span>
					<span v-if="item.locationType==5">备胎</span>
					<span >轮胎</span>
				</view>
				<view class="seeImg" @click="seeImg(item.imgList)" v-if="item.imgList" style="font-size: 24rpx;font-weight: 400;color: #666;">查看图片</view>
				
			</view>
			<view class="informationLine">
				<view class="informationTxt">品牌：</view>
				<view class="informationNum">{{item.brand}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">尺寸：</view>
				<view class="informationNum" >{{item.size}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">生产时间：</view>
				<view class="informationNum">{{item.productDate}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">外伤检测：</view>
				<view class="informationNum">{{item.tireState}}</view>
			</view>
		</view>
		
		<view style="height: 110rpx;background-color: #F4F5F7;padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);"></view>
		
		<view class="bottom">
		 	<view class="defer" :style="{border:'1rpx solid #'+themeColor,color:'#'+themeColor}" @click="seeBy" >查看保养单</view>

		</view>
		
	</view>
</template>

<script>
	import nodata from '@/components/nodata/nodata.vue'
	import homenav from "@/components/homenav/nav.vue"
	export default {
		components: {
			nodata,homenav
		},
		data() {
			return {
		        data:'',
				isload: false,
                iStatusBarHeight:'',
				themeColor:'',
				id:'',
				
			}
		},
		onLoad(opt) {
            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.themeColor = uni.getStorageSync("themeColor");
			this.id=opt.id
			//this.id='34435FE8-F160-4CCF-8D91-CEDF897FDC04'
			this.getData()
		},
		onShow() {
			
		},
		methods: {
			seeBy() {
				uni.navigateTo({
					url: '../user/historyDetail?id=' + this.data.billSheetID
				})
			},
			seeImg(imgList){
				uni.previewImage({
					urls: imgList.split(','),
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			goDetail(item) {
				//SheetType 1 商品2项目3套餐4救援5钣喷6集客
					uni.navigateTo({
						url: "rescueOrderOrderDetail?id=" + item.ID
					})
				
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				});
				this.isload = false;
				var padata = {
					id:this.id
				}

				this.$http('applet/tire-deposit-sheet/detail/'+this.id, {}, 'GET').then(res => {
					uni.hideLoading();
					this.isload = true;
                    this.data = res.data

				})
			},

		},
		onReachBottom() {
			this.page++;

			this.getData()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background: #F4F5F7;
	}
.top {
		height: 190rpx;
		background: #FF0000;

	}
	.orderState {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 40rpx;
	}
	.SheetState {
		display: flex;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 15rpx;
	}
	.shopBoximg {
		width: 40rpx;
		height: 40rpx;
	}
	.shopBox {
		display: flex;
		padding: 30rpx 20rpx;
		margin: 0rpx 24rpx;
		margin-top: -60rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}
	.shopName{
		
		color: #3C3C3C;
		line-height: 42rpx;
		font-size: 30rpx;
	}
	.Address{
		color: #999999;font-size: 24rpx;padding-top: 10rpx;
	}
.information {
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx 24rpx;
		padding-bottom: 15rpx;
	}
	.informationLine {
		display: flex;
		padding: 15rpx 20rpx;
	}
	.informationTxt {
		width: 190rpx;
		font-size: 26rpx;
		color: #999999;
	}
.informationNum {
		color: #333333;
		font-size: 26rpx;
		width: 500rpx;
	}
.detailedTitle{
	padding: 23rpx 20rpx;
	display: flex;
	text-align: center;
	align-content: flex-start;
	border-bottom: 1rpx solid #EEEEEE;
	
	font-size: 30rpx;
	font-weight: bold;
	color: #3C3C3C;
}
.bottom {
		display: flex;
		justify-content: flex-end;
		background-color: #FFFFFF;
		align-items: center;
		height: 98rpx;
		width: 100vw;
		position: fixed;
		bottom: 0rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.defer {
		color: #D53533;
		font-size: 28rpx;
		width: 180rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 1rpx solid #D53533;
		text-align: center;
		line-height: 56rpx;
		margin-right: 40rpx;
	}
</style>