wxThird/pages/user/myOrder/mallOrderDetail.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.data.sheetState == 1">待付款</view>
				<view class="SheetState" v-if="orderData.data.sheetState == 2">待服务</view>
				<view class="SheetState" v-if="orderData.data.sheetState == 3">已完成</view>
				<view class="SheetState" v-if="orderData.data.sheetState == 4">已取消</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.provinceName}}{{orderData.shopInfo.cityName}}{{orderData.shopInfo.areaName}}{{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="goodsName">{{orderData.OpenSheetQRCodeList.itemName}}</view>
			<view class="informationLine2">
				<view class="informationNum">￥{{orderData.OpenSheetQRCodeList.totalPrice}}</view>
				<view class="informationNum">
					x{{orderData.OpenSheetQRCodeList.noWriteoffQty+orderData.OpenSheetQRCodeList.writeoffQty}}</view>
			</view>

			<view>
				<view class="goodsName">券码信息（{{orderData.OpenSheetQRCodeList.noWriteoffQty}}张可用）</view>
				<view class="detailedLine" v-for="(v,index) in orderData.OpenSheetQRCodeList.OpenSheetQRCode">
					<view class="detailedName"><span class="redPoint"></span><span class="quanState"
							v-if="v.WriteoffState==3">待使用</span></view>
					<view class="detailedName old"><span class="redPoint"></span><span class="quanState"
							v-if="v.WriteoffState==1">已使用</span></view>
					<image src="../../../static/img/icon_erweima.png" mode="" style="width: 36rpx;height: 36rpx;"
						v-if="v.WriteoffState==3"></image>
				</view>
			</view>

		</view>

		<!-- 套餐内容 -->
		<view class="information" v-if="SheetType==3">
			<view class="detailedTitle">套餐内容</view>
			<!-- 项目 -->
			<view class="itemBox">
				<!-- 头 -->
				<view class="itemTop">
					<view class="topTitle leftItem">项目名称</view>
					<view class="topTitle">数量</view>
					<view class="topTitle">有效期</view>
				</view>

				<view v-for="(item,index) in orderData.projectList" :key="index">
					<view class="itemContent">
						<view class="topTitle leftItem">{{item.flowName}}</view>
						<view class="topTitle">{{item.flowQty}}</view>
						<view class="topTitle">{{item.date}}</view>
					</view>
				</view>
			</view>
		
			<!-- 商品 -->
			<view class="itemBox">
				<!-- 头 -->
				<view class="itemTop">
					<view class="topTitle leftItem">商品名称</view>
					<view class="topTitle">数量</view>
					<view class="topTitle">有效期</view>
				</view>
			
				<view v-for="(item,index) in orderData.shopList" :key="index">
					<view class="itemContent">
						<view class="topTitle leftItem">{{item.flowName}}</view>
						<view class="topTitle">{{item.flowQty}}</view>
						<view class="topTitle">{{item.date}}</view>
					</view>
				</view>
			</view>
					
		</view>

		<!-- 实付款 -->
		<view class="money">
			<view class="informationNum">实付款：</view>
			<view class="informationNum" style="color: #FF0000;">￥{{orderData.data.realMoney}}</view>
		</view>

		<!-- 订单信息 -->
		<view class="information">
			<view class="detailedTitle">订单信息</view>
			<view class="informationLine">
				<view class="informationTxt">订单单号：</view>
				<view class="informationNum">{{orderData.data.code}}<span class="codeCopy"
						@click="copy(orderData.data.code)">复制</span></view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">下单人：</view>
				<view class="informationNum">{{orderData.data.nickName}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">下单时间：</view>
				<view class="informationNum">{{orderData.data.createTime}}</view>
			</view>

			<view class="informationLine">
				<view class="informationTxt">订单备注：</view>
				<view class="informationNum">{{orderData.data.comment}}</view>
			</view>

		</view>

		<!-- 支付信息 -->
		<view class="information">
			<view class="detailedTitle">支付信息</view>
			<view class="informationLine">
				<view class="informationTxt">支付状态：</view>
				<view class="informationNum" v-if="orderData.data.payState==1">未支付</view>
				<view class="informationNum" v-if="orderData.data.payState==2">已支付</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">支付方式：</view>
				<view class="informationNum" v-if="orderData.data.payType==1">在线支付</view>
				<view class="informationNum" v-if="orderData.data.payType==2">线下支付</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">支付时间：</view>
				<view class="informationNum">{{orderData.data.payTime?orderData.data.payTime:'-'}}</view>
			</view>

		</view>

		<view style="height: 50rpx;background-color: #F4F5F7;"></view>

		<view class="bottom" v-if="orderData.data.sheetState == 1">

			<view class="cancel" @click="cancelBespeak">取消订单</view>
			<view class="defer" @click="pay">立即支付</view>
		</view>


	</view>
</template>

<script>
	export default {


		data() {
			return {

				id: '',
				SheetType:'',//SheetType 1 商品2项目3套餐4救援5钣喷6集客
				orderData: '',
				

			}
		},
		onLoad(opt) {

			this.id = opt.id
			this.SheetType = opt.SheetType

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

		},

		methods: {
			copy(txt) {
				uni.setClipboardData({
					data: txt,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			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('openOrderManagement/updateSheetState', {

					id: this.id,

				}, '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.provinceName + that.orderData.shopInfo.cityName + that
							.orderData.shopInfo.areaName + 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('openOrderManagement/queryOpenSheet', {

					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;
		padding-bottom: 135rpx;
	}

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

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

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

	}

	.shopRightBox {

		padding-left: 28rpx;
	}





	.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: 15rpx 20rpx;
		justify-content: space-between;
		align-items: center;
	}

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



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

	.old {
		color: #999999;
		text-decoration: line-through;
	}

	.redPoint {
		width: 10rpx;
		height: 10rpx;
		background: #FF0000;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}





	.information {

		background: #FFFFFF;
		border-radius: 10rpx;

		margin: 20rpx 24rpx;
		padding-bottom: 15rpx;
	}

	.informationLine {
		display: flex;

		padding: 15rpx 20rpx;
	}

	.informationLine2 {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 15rpx 20rpx;
	}

	.money {
		background: #FFFFFF;
		border-radius: 10rpx;

		margin: 20rpx 24rpx;

		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 30rpx 20rpx;
	}

	.informationTxt {
		width: 190rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.goodsName {
		padding: 20rpx 20rpx 15rpx;
		border-top: 1rpx solid #EEEEEE;
		color: #333333;
		font-size: 26rpx;
	}

	.informationNum {
		color: #333333;
		font-size: 26rpx;
	}

	.codeCopy {
		width: 77rpx;
		height: 36rpx;
		background: #F4F5F7;
		border-radius: 22rpx;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 33rpx;
		padding: 0 15rpx;
	}

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






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

	.itemBox {
		margin: 20rpx;
		border-radius: 10rpx;
		border: 2rpx solid #EEEEEE;
	}

	.itemTop {
		padding: 18rpx 20rpx;
		background-color: #FFEFD5;

		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.topTitle {

		font-size: 26rpx;
		color: #333333;
		margin-right: 10rpx;
	}

	.leftItem {
		flex-grow: 1;
	}

	.itemContent {
		padding: 20rpx;
		background-color: #FFFFFF;

		display: flex;
		justify-content: space-between;
		align-content: center;
	}
</style>