wxThird/pages/user/bespeakDetail.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.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.amountMoney}}</span>
				</view>
				<view class="content">温馨提示：该报价仅为参考价格，实际以门店为准（不同品牌和车型费用会不同）</view>
			</view>
		</view>

		
		<view class="bottom" v-if="(orderData.orderSheet.sheetState == 0)||(orderData.orderSheet.sheetState == 1)">
		
			<view class="cancel">取消预约</view>
			<view class="defer" @click="timeShowClick">延期</view>
		</view>
		
		<!-- 预约时间 -->
		<view class="timeBox2" v-if="timeShow&&OrderTimes" @click="timeShow=false">
			<view class="timeMain">
				<view class="timeTop">
					<view class="timeTopTitle">选择预约时间</view>
					<view class="close" @click="timeShow=false">X</view>
				</view>
				<view class="timeCont">
					<view class="timeLeft2">
						<scroll-view scroll-y="true" class="timeSv">
							<view class="timeleftLine" v-for="(item,index) in OrderTimes"
								:class="{timeLeftActive:index==orderTimeIndex1}"
								@click.stop="orderTimeIndex1=index,orderTimeIndex2=-1">{{item.date.substring(5,10)}}
							</view>
						</scroll-view>
					</view>
					<view class="timeRight2">
						<scroll-view scroll-y="true" class="timeSv">
							<view class="timerightBox">
								<view class="timesf" v-for="(item,index) in OrderTimes[orderTimeIndex1].timeList"
									:class="{timesfNo:item.type!=1,timesfActive:index==orderTimeIndex2}"
									@click.stop="timeSfCk(item,index)">
									<view class="timeSfNum">{{item.time}}</view>
									<view class="timeyy" v-if="item.type==1">可预约</view>
									<view class="timeyy" v-if="item.type==2">已约满</view>
									<view class="timeyy" v-if="item.type==3">已过期</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="timeBottom">
					<view class="timecomplete" @click="timeCk">完成</view>
				</view>
			</view>
		</view>
				

	</view>
</template>

<script>
	export default {
		data() {
			return {
				location: '',
				id: '',
				orderData: '',
				timeShow: false,
				orderTime: '',
				OrderTimes: '',
				orderTimeIndex1: 0,
				orderTimeIndex2: -1,

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

		},
		
		methods: {
			
			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.orderSheet.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;

					this.getOrderTimes();
					
				})
			},
			getOrderTimes() {
				this.$http('worldKeepCar/keepCarMy/getTSheetTimes', {
					shopId: this.orderData.ShopID,
					id:this.orderData.ID,
				}, 'GET').then(res => {
			
					this.OrderTimes = res.data;
				})
			},
			timeShowClick() {
				if (this.OrderTimes) {
					this.timeShow = true
				} else {
					uni.showToast({
						title: '当前店铺尚未设置可预约时间',
						icon: 'none',
						duration: 3000
					});
				}
			
			},
			timeSfCk(item, index) {
				if (item.type == 1) {
					this.orderTimeIndex2 = index;
					var orderTime = this.OrderTimes[this.orderTimeIndex1].date + ' ' + item.time
					this.orderTime = orderTime
				}
			
			},
			timeCk() {
				this.timeShow = false;
				var urlStr = 'worldKeepCar/keepCarMy/saveOrderTime'
				
				this.$http(urlStr, {
					id: this.id,
					orderTime: this.orderTime
				}, 'POST').then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '预约成功',
							icon: 'none',
							duration: 2000
						});
					}
					this.getData()
				})
			},
			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;
	}

	

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