anmo-master/my/takeOrder/takeDetail.vue

<template>
	<view class="padding">
		<view class="bg padding radius">
			<view class=" u-flex " @click="goNav('')">
				<view class="" style="width: 200rpx;height: 200rpx;">
					<image :src="order.orderTaking.headImg" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="u-flex-1 text-white margin-left-xs">
					<view class="flex">
						<view v-if="order.orderTaking.authentication == 2">
							<image src="../../static/images/qi.png" style="width: 35rpx;height: 35rpx;"></image>
						</view>
						<view class="" v-if="order.orderTaking.authentication == 1">
							<image src="../../static/images/geren.png" style="width: 35rpx;height: 35rpx;">
							</image>
						</view>
						<view class="margin-right-xs text-df margin-left-xs"
							style="margin-top: -2px;display: inline-block;width: 400rpx; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
							{{order.orderTaking.myLevel}}
						</view>
					</view>
					<view style="color: #999999;font-size: 24rpx;line-height: 40rpx;"
						v-if="order.orderTaking.authentication == 1">
						<text v-if="order.orderTaking.sex == 1">女</text>
						<text v-if="order.orderTaking.sex == 0">男</text>
						/<text>{{age}}岁</text>
						/<text>{{order.orderTaking.orderLevel}}</text>
						/<text>{{order.orderTaking.region}}</text>
					</view>

					<view style="color: #999999;line-height: 60rpx;" v-if="order.orderTaking.authentication == 2">
						<text>{{order.orderTaking.orderTakingUserName}}</text>/<text>{{order.orderTaking.region}}</text>
					</view>
					<view class="margin-top-xs ">
						<text class="padding-xs margin-right-xs text-sm"
							style="color: #FF1200;background-color: #FFEBF0;"
							v-for="(item,index) in order.orderTaking.gameId" :key="index">{{item}}</text>
					</view>
					<view style="color:#FF1200;font-size: 31rpx;margin-top: 20rpx;">
						￥{{order.orderTaking.oldMoney}}/月
					</view>
				</view>
			</view>
		</view>

		<view class="bg padding radius margin-top">
			<view class="text-lg text-bold">
				服务信息
			</view>
			<view class="margin-left-sm margin-right-xs">

				<view class="flex justify-between margin-top-lg">
					<view style="width: 140upx;">服务类型</view>
					<view><text v-for="(item,index) in order.orderTaking.gameId" :key="index"
							class="margin-left-sm">{{item}}</text></view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view style="width: 140upx;">上户地址</view>
					<view class="text-white">
						<text>{{order.detailsAddress}}{{order.houseNumber}}</text>
					</view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view style="width: 140upx;">入离时间</view>
					<view class="text-white">
						<text>{{order.startTime}}至{{order.endTime}}</text>
					</view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view style="width: 140upx;">服务地点</view>
					<view class="flex">
						<view class="text-white">{{order.orderTaking.region}}
						</view>
					</view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view style="width: 140upx;">真实姓名</view>
					<view class="text-white">{{order.name}}</view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view style="width: 140upx;">联系方式</view>
					<view class="text-white" @click="bindphone()">{{order.phone}}</view>
				</view>

			</view>

		</view>
		<view class="bg padding radius margin-top" style="margin-bottom: 140rpx;">
			<view class="text-lg text-bold">
				订单信息
			</view>
			<view class="margin-left-sm margin-right-xs">
				<view class="flex justify-between margin-top-lg">
					<view style="width: 165rpx;">订单编号</view>
					<view class="text-white">{{order.ordersNo}}</view>
				</view>
				<view class="flex justify-between margin-top-lg">
					<view style="width: 165rpx;">下单时间</view>
					<view class="text-white">{{order.createTime}}</view>
				</view>
				<!-- <view class="flex justify-between margin-top-lg">
					<view style="width: 120upx;">支付方式</view>
					<view class="text-white">{{order.createTime}}</view>
				</view>
 -->
			</view>
		</view>

		<!-- <view class="flex tabber padding-top-sm padding-bottom-sm align-center" v-if="isTrue == 0">
			<u-button @click="cancelOrder(order)" shape="circle" class="margin-right-sm " :custom-style="customStyle"
				:hair-line="false">取消订单
			</u-button>
			<u-button @click="pay" class="margin-right-sm " shape="circle" :custom-style="customStyle2"
				:hair-line="false">立即支付
			</u-button>
		</view> -->
		<view class="flex tabber padding-top-sm padding-bottom-sm align-center margin-right-xs padding-right"
			v-if="order.state ==1">
			<u-button v-if="order.state == 1" :custom-style="customStyle" shape="circle" :plain="true"
				@click="cancelOrder(order,3)">拒接接单</u-button>
			<!-- <u-button v-if="item.state == 3" :custom-style="customStyle" shape="circle" :plain="true" @click="delOrder(item)">拒接接单</u-button> -->
			<u-button v-if="order.state == 1" :custom-style="customStyle1" shape="circle" :plain="true"
				@click="cancelOrder(order,2)">完成接单</u-button>
			<!-- <u-button :custom-style="customStyle" shape="circle" :plain="true" @click="clickItem(item)">联系TA
			</u-button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					color: '#999999',
					border: '2rpx solid #999999',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				customStyle1: {
					color: '#557EFD',
					border: '2rpx solid #557EFD',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				id: '',
				order: {
					user: {},
					game: {}
				},
				isTrue: 0,
				vipMoney: '',
				data: [],
				price: '',
				age: 0,
				birthDate: ''
			}
		},
		onLoad(e) {
			console.log(e)
			var jsObject = JSON.stringify(e);
			console.log(jsObject)
			this.isTrue = e.isTrue
			if (this.isTrue) {
				uni.setNavigationBarTitle({
					title: '订单详情'
				})
			}
			this.id = e.id
			this.getOrder()
		},
		methods: {
			//换算年龄
			getAge(e) {
				console.log('出生日期：' + e)
				this.birthDate = e
				//创建系统日期
				var today = new Date();
				//把出生日期转换成日期
				this.birthDate = new Date(this.birthDate);
				//分别获取到年份后相减
				this.age = today.getFullYear() - this.birthDate.getFullYear();
				// console.log(this.age+'当前年龄')
			},
			// 拨打电话
			bindphone() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否拨打电话',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定', that.phone);
							uni.makePhoneCall({
								phoneNumber: that.phone //仅为示例
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goNav(e) {
				uni.navigateTo({
					url: e
				})
			},
			getOrder() {
				let data = {
					id: this.id
				}
				this.$Request.get('/app/orders/queryOrders', data).then(res => {
					if (res.code == 0) {
						this.order = res.data
						// this.order.orderTaking.gameName = this.order.orderTaking.gameName.split(",");
						this.order.orderTaking.gameId = this.order.orderTaking.gameId.split(",");
						// this.order.orderTaking.region = this.order.orderTaking.region.split(",");
						if (this.order.orderTaking.region) {
							let region = this.order.orderTaking.region.split(",");
							this.order.orderTaking.region = region[1]
						} else {
							this.order.orderTaking.region = '不限地区'
						}
						this.price = (res.data.orderTaking.oldMoney * res.data.orderNumber)
							.toFixed(2)
						this.vipMoney = (res.data.orderTaking.money * res.data.orderNumber - res.data.payMoney * 1)
							.toFixed(2)
						this.getAge(this.order.orderTaking.birthdate)
						console.log(this.vipMoney, 'vipvipvipv')
					}
				})
			},
			// 取消订单
			cancelOrder(e, status) {
				let that = this
				let content = ''
				if (status == 3) {
					content = '确定拒绝接单吗？'
				} else if (status == 2) {
					content = '确定订单已经完成吗？如果未完成，客户投诉将采取封号处理'
				}
				uni.showModal({
					title: '提示',
					content: content,
					success: function(res) {
						if (res.confirm) {
							let data = {
								id: e.ordersId,
								status
							}
							that.$Request.get('/app/orders/cancelOrder', data).then(res => {
								if (res.code == 0) {

									that.getOrder()
								}
							})
						}
					},
				})

			},
			// 支付订单
			pay() {
				let that = this
				uni.showModal({
					title: '付款提示',
					content: '确认支付' + that.order.payMoney + '元吗?',
					success: function(re) {
						if (re.confirm) {
							console.log('用户点击确定');
							that.$Request.post("/app/orders/payMoney", {
								ordersId: that.order.ordersId,
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '支付成功'
									})
									setTimeout(function() {
										uni.navigateBack()
									}, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							});
						} else if (re.cancel) {
							console.log('用户点击取消');
						}
					}

				})

			},
			// 取消订单
			// cancelOrder(e) {
			// 	let data = {
			// 		id: e.ordersId,
			// 		status: '3'
			// 	}
			// 	this.$Request.get('/app/orders/cancelOrder', data).then(res => {
			// 		if (res.code == 0) {
			// 			uni.showToast({
			// 				title: '取消成功',
			// 				icon: 'none'
			// 			})
			// 			setTimeout(function() {
			// 				uni.navigateBack()
			// 			}, 1000)
			// 		}
			// 	})
			// },
			goMsg() {
				let data = {
					userId: uni.getStorageSync('userId'),
					focusedUserId: this.order.user.userId
				}
				this.$Request.postJson('/app/chat/insertChatConversation ', data).then(res => {
					if (res.code == 0) {
						let id = this.order.user.userId == res.data.userId ? res.data.focusedUserId : this.order
							.user.userId
						uni.navigateTo({
							url: '/pages/msg/im?chatConversationId=' + res.data.chatConversationId +
								'&byUserId=' + id
						})
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}

	.bg {
		background: #FFFFFF;
	}

	.tabber {
		width: 100%;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		justify-content: flex-end;
		height: 127rpx;
	}
</style>