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">已结算</view>
				<view class="SheetState" v-if="orderData.SheetState==1">已结算</view>
				<view class="SheetState" v-if="orderData.SheetState==2">未结算</view>
			</view>


		</view>

		<!-- 店铺信息 -->
		<view class="shopBox">
			<image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
			<view class="shopCont">
				<view class="shopName">{{orderData.ShopName}}这是门店名称</view>
				<view class="Address">江苏省南京市鼓楼区铁路南街233
					{{orderData.ProvinceName}}{{orderData.CityName}}{{orderData.AreaName}}{{orderData.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">鲁A12345</view>
				<view class="mileage">1000km</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">姓名：</view>
				<view class="informationNum">{{orderData.Code}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">手机号：</view>
				<view class="informationNum">{{orderData.MemberName}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">单号：</view>
				<view class="informationNum">{{orderData.CreateTime}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">接车时间：</view>
				<view class="informationNum">{{orderData.Comment}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">服务顾问：</view>
				<view class="informationNum" v-if="orderData.ConfirmTime != null">{{orderData.ConfirmTime}}</view>
			</view>

		</view>

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

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


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

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

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



	</view>
</template>

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

				ifShow: false,

				timeShow: false,
				orderTime: '',
				OrderTimes: '',
				orderTimeIndex1: 0,
				orderTimeIndex2: -1,
				isShowMa: true,
				noClick: true,
			}
		},
		onLoad(opt) {
			// this.location = uni.getStorageSync("locationCity");
			// this.id = opt.id
			
			// this.getData()
			// this.type = opt.type;

		},
		onShow() {
			if (this.id) {
				this.getData()
			}
		},
		methods: {
			refundDetail() {
				uni.navigateTo({
					url: '../refundMoney/refundMoneyDetail?id=' + this.orderData.AfterServiceID

				})
			},
			changeDetail() {
				uni.navigateTo({
					url: '../changeStore/changeStoreDetail?id=' + this.orderData.ChangeShopID
				})
			},
			changeStore() {
				// 是否可以更换门店
				this.haveChangeStore();
			},
			haveChangeStore() {
				uni.showLoading({
					title: '加载中'
				});

				this.$http('worldKeepCar/orderChangeShop/queryIfConChangeShop', {
					sheetId: this.id,

				}, 'GET').then(res => {
					uni.hideLoading();
					if (res.code == 1) {

						uni.showModal({
							title: '提示',
							showCancel: false,
							content: res.msg,
							success: function(res) {


							}
						});
					} else if (res.code == 0) {
						uni.navigateTo({
							url: '../changeStore/changeStore?sheetId=' + this.id + '&oldShopID=' + this
								.orderData.ShopID + '&oldStoreName=' + this
								.orderData.ShopName + '&oldStoreAddress=' + this.orderData.ProvinceName +
								this.orderData.CityName + this.orderData.AreaName + this.orderData
								.Address + '&brand=' + this.orderData.Brand
						})
					}

				})
			},
			showMa() {
				this.isShowMa = !this.isShowMa
			},
			gopingjia() {
				uni.navigateTo({
					url: '../me/myAppraiseDetail?id=' + this.id
				})
			},
			timeShowClick() {
				if (this.OrderTimes) {
					this.timeShow = true
				} else {
					uni.showToast({
						title: '当前店铺尚未设置可预约时间',
						icon: 'none',
						duration: 3000
					});
				}

			},

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

			},

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


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

				this.$http('worldKeepCar/keepCarMy/queryMiNiAppTSheetDetail', {
					lat: this.location.lat,
					lng: this.location.lng,
					id: this.id,
				}, 'GET').then(res => {
					uni.hideLoading();
					this.orderData = res.data;

					this.getOrderTimes();
				})
			},
			goback() {

				uni.navigateBack({})


			},
			evaluate() {
				uni.navigateTo({
					url: 'evaluate?sheetID=' + this.id + '&shopID=' + this.orderData.ShopID
				})
			},

			cancelOrder() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要取消订单吗',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中'
							})
							that.$http('worldKeepCar/keepCarMy/cancelMiNiTMSheet', {
								id: that.orderData.ID
							}, 'POST').then(res => {
								uni.hideLoading();


								uni.showModal({
									title: '提示',
									content: '订单取消成功',
									showCancel: false,
									success: function(res) {
										that.getData()
									}
								});
							})
						} else if (res.cancel) {

						}
					}
				});
			},
			refundMoney() {
				console.log('退款');


				// 是否可以退款
				this.haveRefundMoney();
			},
			haveRefundMoney() {
				uni.showLoading({
					title: '加载中'
				});

				this.$http('worldKeepCar/orderRefund/queryIfConRefund', {
					sheetId: this.id,

				}, 'GET').then(res => {
					uni.hideLoading();
					if (res.code == 1) {

						uni.showModal({
							title: '提示',
							showCancel: false,
							content: res.msg,
							success: function(res) {


							}
						});
					} else if (res.code == 0) {

						uni.navigateTo({
							url: '../refundMoney/refundMoney?sheetId=' + this.id + '&maxMoney=' + this
								.orderData.PayMoney

						})
					}

				})
			},
			orderPay() {
				uni.showLoading({
					title: '支付中'
				})
				var that = this;
				this.$http('worldKeepCar/maintainOrder/orderPay', {
					sheetID: this.orderData.ID
				}, 'POST').then(res => {
					uni.hideLoading();
					if (res.isPay == 0) {
						uni.showToast({
							title: '支付成功',
							icon: 'none',
							duration: 2000
						});
						that.getData()
					} else {
						var payInfo = JSON.parse(res.data.payInfo)
						uni.requestPayment({
							provider: 'wxpay',
							// timeStamp: String(Date.now()),
							timeStamp: payInfo.timeStamp,
							nonceStr: payInfo.nonceStr,
							package: payInfo.package,
							signType: payInfo.signType,
							paySign: payInfo.paySign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.showToast({
									title: '支付成功',
									icon: 'none',
									duration: 2000
								});
								that.getData()
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));

							}
						});
					}
				})
			},
			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 = ''
				if (this.orderData.OrderState == 1) {
					urlStr = 'worldKeepCar/keepCarMy/saveOrderTime'
				}
				if (this.orderData.OrderState == 2) {
					urlStr = 'worldKeepCar/keepCarMy/changeTSheetTime'
				}
				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()
				})
			},
			getOrderTimes() {
				this.$http('worldKeepCar/keepCarMy/getTSheetTimes', {
					shopId: this.orderData.ShopID,
					id: this.orderData.ID,
				}, 'GET').then(res => {

					this.OrderTimes = res.data;
				})
			}
		},
		onPullDownRefresh() {
			this.getOrderTimes()
			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;
	}

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

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

	}

	.shopRightBox {
		padding-top: 30rpx;
		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-left: 20rpx;
		padding-top: 40rpx;
	}

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

	.detailedCont {
		padding-left: 20rpx;
		display: flex;
		justify-content: space-between;
	}

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



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