<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>