wxThird/pages/user/historyDetail.vue

<template>
	<view class="box">

		<view class="top">
			<view class="orderState">
				<image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
				
				<view class="SheetState" v-if="orderData.billsheet.PayState==2">已结算</view>
				<view class="SheetState" v-if="orderData.billsheet.PayState==0">未结算</view>
			</view>


		</view>

		<!-- 店铺信息 -->
		<view class="shopBox">
			<image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
			<view class="shopCont">
				<view class="shopName">{{orderData.billsheet.ShopName}}</view>
				<view class="Address">{{orderData.billsheet.Address}}</view>

			</view>
			<view class="shopRightBox" @click="map">

				<image src="../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>

				<view class="shopRihgtTxt">地图</view>
			</view>
			<view class="shopsx"></view>
			<view class="shopRightBox" @click="call">

				<image src="../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>

				<view class="shopRihgtTxt">电话</view>
			</view>
		</view>


		<!-- 订单信息 -->
		<view class="information">
			<view class="carMes">
				<view class="plate">{{orderData.billsheet.PlateNumber}}</view>
				<view class="mileage" v-if="orderData.billsheet.CurrentMileage>0">{{orderData.billsheet.CurrentMileage}}km</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">姓名：</view>
				<view class="informationNum">{{orderData.billsheet.CustomerName}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">手机号：</view>
				<view class="informationNum">{{orderData.billsheet.MobilePhone}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">单号：</view>
				<view class="informationNum">{{orderData.billsheet.Code}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">接车时间：</view>
				<view class="informationNum">{{orderData.billsheet.time}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">服务顾问：</view>
				<view class="informationNum">{{orderData.billsheet.PickName}}</view>
			</view>

		</view>

		<!-- 项目明细 -->
		<view class="detailedBox itemBox" v-if=" orderData.listItems.length!=0">
			<view class="detailedTitle">项目</view>
			<view class="detailedLineBox">
				<view class="detailedLine" v-for="(item,index) in orderData.listItems">

					
						<view class="detailedName">{{item.ItemName}}项目名称</view>
						<span>x1</span>
					
				</view>
			</view>
		</view>


		<!-- 商品明细-->
		<view class="detailedBox itemBox" v-if="orderData.listParts.length!=0">
			<view class="detailedTitle">商品</view>
			<view class="detailedLineBox">
				<view class="detailedLine" v-for="(item,index) in orderData.listParts">

					
						<view class="detailedName">{{item.GoodsName}}商品名称</view>
						<span>x{{item.SaleQty}}</span>

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



	</view>
</template>

<script>
	export default {
		data() {
			return {
				location: '',
				id: '',
				orderData: '',
				

			}
		},
		onLoad(opt) {
			
			this.id = opt.id
			
			this.getData()
			

		},
		onShow() {
			if (this.id) {
				this.getData()
			}
		},
		methods: {
			
			map() {
				console.log("打开地图")
				var that = this;
				if (!that.orderData.billsheet.lat || !that.orderData.billsheet.lng) {
					uni.showToast({
						title: '该店铺未设置定位',
						icon: 'none',
						duration: 3000
					});
				} else {
					uni.openLocation({
						latitude: Number(that.orderData.billsheet.lat),
						longitude: Number(that.orderData.billsheet.lng),
						name: that.orderData.billsheet.ShopName,
						address: that.orderData.billsheet.Address,
						success: function() {
							console.log('success');
						},
						fail(err) {
							console.log(err)
						}
					});
				}

			},

			call() {
				uni.makePhoneCall({
					phoneNumber: this.orderData.billsheet.MobilePhone
				});
			},


			getData() {
				uni.showLoading({
					title: '加载中'
				});

				this.$http('openweiXinCardInfoController/queryConsumptionDetail', {
					// lat: this.location.lat,
					// lng: this.location.lng,
					id: this.id,
				}, 'POST').then(res => {
					uni.hideLoading();
					this.orderData = res.data;

					
				})
			},
			goback() {

				uni.navigateBack({})


			},
			
		},
		onPullDownRefresh() {
			
			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background: #F4F5F7;

	}

	.top {
		height: 190rpx;
		background-color: #F03B3B;

	}

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

	}



	.timeEditImg {
		width: 25rpx;
		height: 25rpx;
		padding-left: 20rpx;
	}



	.shopBoximg {
		width: 40rpx;
		height: 40rpx;
	}

	.shopRightImg {
		width: 44rpx;
		height: 45rpx;
	}

	.shopsx {
		width: 1px;
		height: 50rpx;
		background: #EEEEEE;
		margin-top: 30rpx;
		margin-left: 28rpx;
	}

	.shopBox {

		display: flex;
		padding: 30rpx 20rpx;
		margin: 0rpx 24rpx;
		margin-top: -60rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

	}

	.shopCont {
		width: 405rpx;
		padding-left: 20rpx;

	}

	.shopName {
		font-size: 30rpx;
		font-weight: bold;
		color: #3C3C3C;
		line-height: 42rpx;
	}

	.Address {
		color: #999999;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.shopRihgtTxt {
		color: #999999;
		font-size: 24rpx;

	}

	.shopRightBox {
		
		padding-left: 28rpx;
	}

	.peopleCont {
		font-size: 28rpx;
		color: #3C3C3C;
		padding-left: 20rpx;
	}

	.people {
		display: flex;
		padding-left: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 36rpx;
	}

	.PlateNumberBox {
		display: flex;
		padding-left: 20rpx;
		padding-bottom: 30rpx;
	}

	.PlateNumbercx {
		font-size: 28rpx;

		color: #3C3C3C;
		padding-left: 20rpx;
	}

	.PlateNumber {
		width: 130rpx;
		height: 32rpx;
		border-radius: 4rpx;
		border: 1px solid #F19D01;
		line-height: 32rpx;
		text-align: center;
		font-size: 22rpx;
		color: #F19D01;
		margin-left: 26rpx;
	}

	.PlateNumberBoxTop {
		display: flex;
	}

	.CarModel {
		font-size: 26rpx;
		color: #999999;
		padding-left: 20rpx;
		padding-top: 6rpx;
		padding-right: 20rpx;
		padding-bottom: 15rpx;
		width: 600rpx;
	}

	.detailedBox {

		background: #FFFFFF;
		border-radius: 10px;
		margin: 20rpx 24rpx;
		padding-bottom: 20rpx;
	}

	.itemBox {
		margin-top: 20rpx;
	}

	.carMes {
		padding: 23rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.plate {
		font-size: 30rpx;
		color: #3C3C3C;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.mileage {
		font-size: 24rpx;
		color: #F19D01;
		padding: 0rpx 10rpx;
		border: 1rpx solid #F19D01;
		border-radius: 4rpx;
		height: 36rpx;
	}

	.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;
	}


	.detailedLine {
		display: flex;
		padding: 20rpx 20rpx 0rpx;
		justify-content: space-between;
	}

	.detailedImg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}

	

	.detailedName {
		font-size: 26rpx;
		color: #3C3C3C;
	}

	span{
		font-size: 26rpx;
		color: #999999;
	}

	.goodscost {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 10px;
		margin-left: 24rpx;
		margin-top: 20rpx;
		padding: 15rpx 0;
	}

	.goodscostLine {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		padding: 20rpx 20rpx;
		color: #666666;
	}

	.goodsCostNum {
		color: #3C3C3C;
	}

	.information {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 10px;
		margin-left: 24rpx;
		margin-top: 20rpx;
		padding: 0rpx 0 15rpx 0;
	}

	.informationLine {
		display: flex;
		font-size: 26rpx;
		padding: 15rpx 20rpx;
	}

	.informationTxt {
		width: 190rpx;
		color: #999999;
	}

	.informationNum {
		color: #333333;
	}

	.copyBtn {
		width: 86rpx;
		height: 40rpx;
		background: #F4F5F7;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 40rpx;
		margin-left: 20rpx;
	}

	.orderBottom {
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
	}

	.cancelBtn {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #DDDDDD;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #3C3C3C;
		margin-top: 21rpx;
		margin-right: 16rpx;
		margin-left: 20rpx;
	}

	.payBtn {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #FF4F00;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #FF4F00;
		margin-top: 21rpx;
		margin-right: 16rpx;
		margin-left: 20rpx;
	}

	.timeBox2 {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
	}

	.timeLeftActive {
		background: #FFFFFF;
	}

	.timeMain {
		width: 100vw;
		height: 70vh;
		margin-top: 30vh;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0px 0px;
	}

	.timesfNo {
		background: #F5F5F5;
	}

	.timesfActive {
		background: #FF4F00;

	}

	.timesfActive .timeSfNum {
		color: #FFFFFF;
	}

	.timesfActive .timeyy {
		color: #FFFFFF;
	}

	.topBox {
		padding: 20rpx 24rpx;
	}

	.timeTop {
		display: flex;
		line-height: 90rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		justify-content: space-between;
	}

	.timeTopTitle {
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #3C3C3C;
	}

	.close {
		color: #999999;
		font-size: 30rpx;
		padding-left: 30rpx;
	}

	.timeCont {
		height: calc(70vh - 210rpx);
	}

	.timeSv {
		height: calc(70vh - 210rpx);
	}

	.timeLeft2 {
		width: 162rpx;
		background: #F4F5F7;
		border-top: 1px soid #F4F5F7;
		border-right: 1px soid #F4F5F7;
	}

	.timeRight2 {
		width: 588rpx;
	}

	.timesf {
		width: 165rpx;
		height: 98rpx;
		border-radius: 7rpx;
		border: 2rpx solid #EEEEEE;
		text-align: center;
		margin-left: 20rpx;
		margin-bottom: 24rpx;
	}

	.timeBottom {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -2px 20rpx 0px rgba(153, 153, 153, 0.2);
		display: flex;
		align-items: center;

	}

	.timerightBox {
		display: flex;
		flex-wrap: wrap;
	}

	.timeCont {
		display: flex;
	}

	.timeSfNum {
		color: #666666;
		font-size: 28rpx;
		padding-top: 15rpx;
	}

	.timeyy {
		font-size: 24rpx;
		color: #999999;
	}

	.timecomplete {
		width: 690rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		line-height: 74rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-left: 30rpx;
	}

	.timeleftLine {
		font-size: 30rpx;
		color: #999999;
		text-align: center;
		padding: 28rpx 10rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.yuyueBox {

		background: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;

	}

	.yuyueTime {
		display: flex;
		padding-left: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 36rpx;
		align-items: center;
	}

	.yuyueState {
		display: flex;
		padding-left: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 36rpx;
	}

	.maBox {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 20rpx;
	}

	.querenMa {

		margin: 20rpx 0;
		padding-bottom: 30rpx;
	}

	.maBoximg {
		width: 308rpx;
		height: 308rpx;
		margin: 30rpx 197rpx;


	}

	.rightShou {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>