cbz/page_mine/pages/order/repairDetail.vue

<template>
	<view class="content">
		<view class="top">
			<u-navbar :title="title" @leftClick="leftClick" bgColor="rgba(0,0,0,0)" :placeholder="true"></u-navbar>
			<view class="state" v-if="pageData.status == 1">暂未收到报价，请耐心等待</view>
			<view class="state" v-if="pageData.status == 2">收到报价，请尽快确认</view>
			<view class="state" v-if="pageData.status == 3">已匹配成功</view>
			<view class="top_box" v-if="pageData.status == 3">
				<view class="hflex jbetween">
					<view class="hflex acenter">
						<image :src="pageData.success.headimg" class="headimg"></image>
						<view class="img_right">
							<view class="hflex acenter ">
								<view class="name">{{pageData.success.nickname}}</view>
								<view class="blue_bg">维修工</view>
							</view>
							<view class="hflex acenter ">
								<view class="text_style1">已认证</view>
								<!-- <view class="text_style1">| {{worker.wxc}}</view> -->
							</view>
						</view>
					</view>
					<view class="text_red">报价：<span style="font-size: 36rpx;">￥{{pageData.success_price}}</span></view>
				</view>
				<view class="hflex acenter jbetween" style="padding-top: 32rpx;">
					<view class="hflex acenter">
						<view class="text_style1">联系电话：</view>
						<view class="text_style1">{{pageData.success.phone}}</view>
						<view class="phone hflex acenter jcenter" @click.stop="makeCell(pageData.success.phone)">
							<u-icon name="phone-fill" color="#506DFF" size="9"></u-icon>
						</view>
					</view>
					<view class="btn hflex acenter jcenter" @click.stop="toChat(pageData.success.id)">查看详情</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="hflex acenter" style="padding-top: 28rpx;">
				<image :src="pageData.user.headimg" class="headimg"></image>
				<view class="img_right">
					<view class="hflex acenter ">
						<view class="name">{{pageData.user.nickname}}</view>
					</view>
					<view class="hflex acenter ">
						<view class="text_style1">{{pageData.province}}{{pageData.city}}</view>
						<view class="text_style1">| {{pageData.create_at}}发布</view>
					</view>
				</view>
			</view>
			<view class="box_contetn">{{pageData.describe}}</view>
			<view class="imgs hflex acenter fwrap">
				<block v-for="(item,index) in pageData.imgs" :key="index">
					<image :src="item" class="img" mode="aspectFill"></image>
				</block>
			</view>
			<view class="hflex acenter jbetween cell">
				<view class="left_text">联系方式</view>
				<view class="right_text">{{pageData.user.phone}}</view>
			</view>
			<view class="hflex acenter jbetween cell">
				<view class="left_text">维修时间</view>
				<view class="right_text">{{pageData.start_time}}至{{pageData.end_time}}</view>
			</view>
			<view class="hflex acenter jbetween cell" style="padding-bottom: 28rpx;">
				<view class="left_text">维修地点</view>
				<view class="right_text">{{pageData.address}}</view>
			</view>
			<view class="hflex acenter jbetween type">
				<view class="right_text">订单类型</view>
				<view class="text_blue">{{pageData.quick==2?'快修':'普修'}}</view>
			</view>
			<view class="offer hflex acenter jbetween" v-if="pageData.type == 2">
				<view class="hflex acenter">
					<view class="offer_label">订单报价：</view>
					<view class="offer_text">￥{{boss.offest}}</view>
				</view>
				<view class="btn hflex acenter jcenter">查看详情</view>
			</view>
		</view>
		<view class="box" style="margin-bottom: 186rpx;" v-if="pageData.status == 3">
			<view class="hflex acenter jbetween cell">
				<view class="left_text">订单编号</view>
				<view class="right_text">{{pageData.order_no}}</view>
			</view>
			<view class="hflex acenter jbetween cell">
				<view class="left_text">创建时间</view>
				<view class="right_text">{{pageData.success_at}}</view>
			</view>
		</view>
		<view class="box" style="margin-bottom: 186rpx;" v-if="pageData.status == 2">
			<block v-for="(item,index) in pageData.offer" :key="index">
				<view class="item_bg" :class="active == index ? 'active' : ''" @click="selectItem(index,item.id)">
					<view class="hflex jbetween">
						<view class="hflex acenter">
							<image :src="item.user.headimg" class="headimg"></image>
							<view class="img_right">
								<view class="hflex acenter ">
									<view class="name">{{item.user.name}}</view>
									<view class="blue_bg">维修工</view>
								</view>
								<view class="hflex acenter text_hide" style="width: 270rpx;">
									<view class="text_style1">已认证</view>
								</view>
							</view>
						</view>
						<view class="text_red">报价：<span style="font-size: 36rpx;">￥{{item.price !== '0'?item.price: '暂无'}}</span></view>
					</view>
					<view class="hflex acenter jbetween">
						<view class="hflex acenter">
							<view class="text_style1">联系电话：</view>
							<view class="text_style1">{{item.user.phone}}</view>
							<view class="phone hflex acenter jcenter" @click.stop="makeCell(item.user.phone)">
								<u-icon name="phone-fill" color="#506DFF" size="9"></u-icon>
							</view>
						</view>
						<view class="btn hflex acenter jcenter" @click.stop="toChat(item.offer_id)">查看详情</view>
					</view>
				</view>
			</block>
		</view>
		<view class="bottom" v-if="pageData.status !== 1" @click="openDown">
			<view class="btn hflex acenter jcenter" v-if="type == 1 && pageData.status == 3">
				<image src="/static/images/comment/down-fff.png" style="width: 33rpx; height: 33rpx;"></image>
				<view>下载文件</view>
			</view>
			<view class="btn hflex acenter jcenter" :class="active == -1 ? 'btn1' : ''" v-if="type == 1 && pageData.status == 2" @click="match">匹配维修工</view>
			<view class="hflex acenter jcenter" v-if="type == 2">
				<view class="left_btn hflex acenter jcenter" @click="openDown">
					<image src="/static/images/comment/down-blue.png" style="width: 33rpx; height: 33rpx;"></image>
					<view>下载文件</view>
				</view>
				<view class="right_btn hflex acenter jcenter">查看回复</view>
			</view>
		</view>
		<u-modal :show="show">
			<view class="modeal_content" slot="default">
				<view>{{content}}</view>
			</view>
			<view slot="confirmButton" class="button_group hflex acenter jcenter">
				<view class="left hflex acenter jcenter" @click="close">我再想想</view>
				<view class="right hflex acenter jcenter" @click="sure">确认匹配</view>
			</view>
		</u-modal>
		<u-popup :show="down_show" @close="close" :round="10" mode="center" :closeable="true">
			<view class="popu">
				<view class="popu_title">下载文件</view>
				<view class="wj_bg">
					
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				title: '',
				active: -1,
				type: '',
				show: false,
				content: '确定要匹配当前维修工吗？',
				id: '',
				pageData: {},
				offer_id: '',
				down_show: false,
			}
		},
		onLoad(options) {
			that = this
			that.id = options.id
			that.type = options.type
			that.getData()
		},
		onReady() {
			if(true) {
				uni.setNavigationBarTitle({
					title: '订单详情'
				})
			}
		},
		methods: {
			leftClick() {
				$api.jump(-1)
			},
			getData() {
				$api.req({
					url: '/data/api.auth.Center/repairdetail',
					method: 'POST',
					data: {
						type: that.type,
						id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						that.pageData = res.data
					}
				})
			},
			selectItem(index,id) {
				that.active = index
				that.offer_id = id
			},
			match() {
				if(that.active == -1) {
					$api.info('请选择维修工')
					return
				} else {
					that.show = true
				}
			},
			close() {
				that.show = false
				that.down_show = false
			},
			sure() {
				$api.req({
					url: '/data/api.auth.Center/repairoffer',
					method: 'POST',
					data: {
						id: that.pageData.id,
						offer_id: that.offer_id
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
					}
				})
				that.close()
				that.getData()
			},
			makeCell(mobile) {
				$api.makeCall(mobile) 
			},
			toChat(offer_id) {
				$api.jump('/page_mine/pages/order/chat?id=' + that.pageData.id + '&offer_id=' + offer_id + '&type=' + that.type)
			},
			openDown() {
				that.down_show = true
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F4F4F4;
		.top {
			box-sizing: border-box;
			width: 100%;
			padding: 0 30rpx;
			background: linear-gradient(180deg, #506DFF 0%, #F3F3F3 100%);
			.state {
				font-size: 44rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 60rpx;
				padding: 28rpx 0;
			}
			.top_box {
				width: 100%;
				box-sizing: border-box;
				padding: 28rpx 20rpx 20rpx;
				background: #FFFFFF;
				border-radius: 10px;
				
				.headimg {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}
				.img_right {
					margin-left: 12rpx;
					.name {
						font-size: 30rpx;
						font-weight: 400;
						color: #222222;
						line-height: 42rpx;
					}
					.blue_bg {
						margin-left: 8rpx;
						width: 72rpx;
						height: 28rpx;
						background: #506DFF;
						border-radius: 4rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 28rpx;
						text-align: center;
					}
				}
				.text_red {
					font-size: 24rpx;
					font-weight: 400;
					color: #FF4646;
					line-height: 34rpx;
				}
				.text_style1 {
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					line-height: 34rpx;
					padding-right: 12rpx;
				}
				.phone {
					width: 32rpx;
					height: 32rpx;
					background: #E1E6FF;
					border-radius: 8rpx;
				}
				.btn {
					width: 132rpx;
					height: 48rpx;
					border-radius: 24rpx;
					border: 2rpx solid #506DFF;
					font-size: 24rpx;
					font-weight: 400;
					color: #506DFF;
					line-height: 48rpx;
				}
				
			}
		}
		.box {
			width: 690rpx;
			margin: 20rpx auto 0;
			box-sizing: border-box;
			padding: 0 20rpx 20rpx;
			background: #FFFFFF;
			border-radius: 10px;
			.box_contetn {
				font-size: 28rpx;
				font-weight: 400;
				color: #444444;
				line-height: 44rpx;
				padding: 24rpx 0 0;
			}
			.imgs{
				width: 100%;
				.img {
					width: 208rpx;
					height: 208rpx;
					border-radius: 6px;
					margin: 20rpx 14rpx 0 0;
				}
				.img:nth-child(3n+3) {
					margin: 20rpx 0 0;
				}
			}
			.cell {
				padding: 24rpx 0 0;
				.left_text {
					font-size: 26rpx;
					font-weight: 400;
					color: #777777;
					line-height: 36rpx;
				}
				.right_text {
					font-size: 26rpx;
					font-weight: 500;
					color: #222222;
					line-height: 32rpx;
				}
			}
			.type {
				padding: 24rpx 0;
				border-top: 1rpx solid #F4F4F4;
				.text_blue {
					font-size: 28rpx;
					font-weight: 500;
					color: #506DFF;
					line-height: 40rpx;
				}
			}
			.offer {
				width: 100%;
				height: 76rpx;
				background: #EAF4FF;
				border-radius: 12rpx;
				box-sizing: border-box;
				padding: 16rpx 20rpx;
				.offer_label {
					font-size: 24rpx;
					font-weight: 400;
					color: #506DFF;
					line-height: 34rpx;
				}
				.offer_text {
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
				}
				.btn {
					width: 132rpx;
					height: 48rpx;
					border-radius: 24rpx;
					border: 2rpx solid #506DFF;
					font-size: 24rpx;
					font-weight: 400;
					color: #506DFF;
					line-height: 48rpx;
				}
				
			}
			.headimg {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
			}
			.img_right {
				margin-left: 12rpx;
				.name {
					font-size: 30rpx;
					font-weight: 400;
					color: #222222;
					line-height: 42rpx;
				}
				.blue_bg {
					margin-left: 8rpx;
					width: 72rpx;
					height: 28rpx;
					background: #506DFF;
					border-radius: 4rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 28rpx;
					text-align: center;
				}
			}
			.text_style1 {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 34rpx;
				padding-right: 12rpx;
			}
			.phone {
				width: 32rpx;
				height: 32rpx;
				background: #E1E6FF;
				border-radius: 8rpx;
			}
			.active {
				background: #F0F3FF !important;
				border-radius: 8px;
				border: 1px solid #506DFF;
			}
			.item_bg {
				background: #F4F4F4;
				border-radius: 8px;
				margin-top: 20rpx;
				box-sizing: border-box;
				padding: 20rpx;
				.text_red {
					font-size: 24rpx;
					font-weight: 400;
					color: #FF4646;
					line-height: 34rpx;
				}
				.btn {
					width: 132rpx;
					height: 48rpx;
					border-radius: 24rpx;
					border: 2rpx solid #506DFF;
					font-size: 24rpx;
					font-weight: 400;
					color: #506DFF;
					line-height: 48rpx;
				}
			}
		}
		.bottom {
			width: 100%;
			height: 166rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			z-index: 99;
			box-sizing: border-box;
			padding: 10rpx 30rpx 0;
			.btn {
				width: 100%;
				height: 88rpx;
				background: #506DFF;
				border-radius: 44rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 50rpx;
			}
			.btn1 {
				background: rgba(80,109,255,0.3) !important;
			}
			.left_btn {
				width: 300rpx;
				height: 88rpx;
				background: #ECEFFE;
				border-radius: 44rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #506DFF;
				margin-right: 20rpx;
			}
			.right_btn {
				width: 370rpx;
				height: 88rpx;
				background: #506DFF;
				border-radius: 44rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #fff;
			}
			
		}
		.modeal_content {
			font-size: 36rpx;
			font-weight: 500;
			color: #222222;
			line-height: 50rpx;
		}
		.left {
			width: 230rpx;
			height: 84rpx;
			background: #ECEFFF;
			border-radius: 42rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #506DFF;
			margin-right: 50rpx;
		}
		.right {
			width: 230rpx;
			height: 84rpx;
			background: #506DFF;
			border-radius: 42rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
		.popu {
			width: 630rpx;
			height: 460rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			box-sizing: border-box;
			padding: 0 40rpx;
			.popu_title {
				padding: 32rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				line-height: 50rpx;
			}
			.wj_bg {
				margin: 44rpx 0 42rpx;
				width: 100%;
				height: 100rpx;
				background: #F4F4F4;
				border-radius: 16rpx;
			}
		}
	}
</style>