wxThird/pages/user/bespeakDetail.vue

<template>
	<view class="box">
         <homenav :iStatusBarHeight="iStatusBarHeight" :title="'预约详情'" ></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="orderData.orderSheet.sheetState == 0">待确认</view>
				<view class="SheetState" v-if="orderData.orderSheet.sheetState == 1">预约中</view>
				<view class="SheetState" v-if="orderData.orderSheet.sheetState == 2">已到店</view>
				<view class="SheetState" v-if="orderData.orderSheet.sheetState == 3">已取消</view>
			</view>


		</view>

		<!-- 店铺信息 -->
		<view class="shopBox">
			<image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
			<view class="shopCont">
				<view class="shopName">{{orderData.shopInfo.shopName}}</view>
				<view class="Address">{{orderData.shopInfo.province}}{{orderData.shopInfo.city}}{{orderData.shopInfo.area}}{{orderData.shopInfo.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="detailedTitle">基本信息</view>
			<view class="informationLine">
				<view class="informationTxt">车牌号：</view>
				<view class="informationNum">{{orderData.orderSheet.plateNumber}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">手机号：</view>
				<view class="informationNum">{{orderData.orderSheet.mobilePhone}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">预约时间：</view>
				<view class="informationNum">{{orderData.orderSheet.billDate}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">单号：</view>
				<view class="informationNum">{{orderData.orderSheet.code}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">备注：</view>
				<view class="informationNum">{{orderData.orderSheet.comment}}</view>
			</view>

		</view>

		<!-- 项目明细 -->
		<view class="detailedBox itemBox" v-if=" orderData.orderDetails.length!=0">
			<view class="detailedTitle">预约项目</view>
			<view class="detailedLineBox">
				<view class="detailedLine" v-for="(v,index) in orderData.orderDetails">
						<view class="detailedName">{{v.itemName}}</view>
						<span>￥{{v.amountMoney}}</span>
				</view>
				<view class="detailedLine" v-if=" orderData.orderDetails.length!=0">
						<view class="detailedName">预估总价</view>
						<span v-if="orderData.sumMoney>0">￥{{orderData.sumMoney}}</span>
				</view>
				<view class="content">温馨提示：该报价仅为参考价格，实际以门店为准（不同品牌和车型费用会不同）</view>
			</view>
		</view>

		
		<view class="bottom" v-if="(orderData.orderSheet.sheetState == 0)||(orderData.orderSheet.sheetState == 1)">
		
			<view class="cancel" @click="cancelBespeak" >取消预约</view>
			<view class="defer" :style="{border:'1rpx solid #'+themeColor,color:'#'+themeColor}" @click="cktime">延期</view>
		</view>
		
		<!-- 预约时间 -->
		<timeSelect ref="timeSelect" :timedata="timedata" @changeTime="changeTime"></timeSelect>	

	</view>
</template>

<script>
	import timeSelect from '@/components/timeSelect/timeSelect.vue'
	import homenav from "../../components/homenav/nav.vue"
	export default {
		components: {
			timeSelect,homenav
		},
	
		data() {
			return {
				location: '',
				id: '',
				orderData: '',
				timedata:'',
				billDate:'',
				 themeColor:'',
                iStatusBarHeight:'',
			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.id = opt.id
			 this.themeColor = uni.getStorageSync("themeColor");

			if (this.id) {
				this.getData()
			}

		},
		
		methods: {
			changeTime(data){
				console.log(data)
				this.billDate=data
				this.upTime();
			},
			cktime(){
				 this.$refs.timeSelect.open();
			},
			upTime() {
				uni.showLoading({
					title: '加载中'
				})
				var that = this
				this.$http('openreservation/carOwner/updateTimeOfAppointment', {
			
					id: this.id,
					shopId: this.orderData.shopInfo.id,
					billDate:this.billDate
				}, 'POST').then(res => {
					uni.hideLoading();
					// var list = res.data.Items
					var list = res.data
					console.log("result+=",res.data);
					uni.showToast({
						title: '延期成功',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						that.getData();
					}, 1000);
					
			
				})
			},
			cancelBespeak() {
				uni.showLoading({
					title: '加载中'
				})
				var that = this
				this.$http('openreservation/carOwner/updateState', {
			
					id: this.id,
					shopId: this.orderData.shopInfo.id,
					sheetState:3
				}, 'POST').then(res => {
					uni.hideLoading();
					// var list = res.data.Items
					var list = res.data
					uni.showToast({
						title: '取消成功',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						that.getData();
					}, 1000);
				})
			},
			map() {
				console.log("打开地图")
				var that = this;
				if (!that.orderData.shopInfo.lat || !that.orderData.shopInfo.lng) {
					uni.showToast({
						title: '该店铺未设置定位',
						icon: 'none',
						duration: 3000
					});
				} else {
					uni.openLocation({
						latitude: Number(that.orderData.shopInfo.lat),
						longitude: Number(that.orderData.shopInfo.lng),
						name: that.orderData.shopInfo.shopName,
						address: that.orderData.shopInfo.province+that.orderData.shopInfo.city+that.orderData.shopInfo.area+that.orderData.shopInfo.address,
						success: function() {
							console.log('success');
						},
						fail(err) {
							console.log(err)
						}
					});
				}

			},

			call() {
				uni.makePhoneCall({
					phoneNumber: this.orderData.shopInfo.mobilePhone
				});
			},


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

				this.$http('openreservation/orderSheetDetails', {
					// lat: this.location.lat,
					// lng: this.location.lng,
					id: this.id,
				}, 'GET').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: #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;

	}



	.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: 45rpx;
	}

	.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;
		width: 524rpx;
	}

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

	

	.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;
	}
	.content{
		background-color: #F4F5F7;
		border-radius: 10rpx;
		padding: 16rpx;
		color: #999999;
		font-size: 24rpx;
		margin: 20rpx;
	}
	.bottom {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
		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);
		
	}
	.cancel{
		color: #3C3C3C;
		font-size: 28rpx;
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 1rpx solid #DDDDDD;
		text-align: center;
		line-height: 56rpx;
		margin-right: 40rpx;
	}
	.defer {
		color: #D53533;
		font-size: 28rpx;
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 1rpx solid #D53533;
		text-align: center;
		line-height: 56rpx;
		margin-right: 40rpx;
	}
	
	
</style>