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">{{state}}</view>
			<view class="top_box" v-if="state_id == '2'">
				<view class="hflex acenter ">
					<image :src="worker.headimg" class="headimg"></image>
					<view class="img_right">
						<view class="hflex acenter ">
							<view class="name">{{worker.name}}</view>
							<view class="blue_bg">维修工</view>
						</view>
						<view class="hflex acenter ">
							<view class="text_style1">{{worker.is_renz?'已认证':'未认证'}}</view>
							<view class="text_style1">| {{worker.wxc}}</view>
						</view>
					</view>
				</view>
				<view class="hflex acenter jbetween" style="padding-top: 32rpx;">
					<view class="hflex acenter">
						<view class="text_style1">联系电话：</view>
						<view class="text_style1">{{worker.phone}}</view>
						<view class="phone hflex acenter jcenter">
							<u-icon name="phone-fill" color="#506DFF" size="9"></u-icon>
						</view>
					</view>
					<view class="btn hflex acenter jcenter">查看详情</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="hflex acenter" style="padding-top: 28rpx;">
				<image :src="boss.headimg" class="headimg"></image>
				<view class="img_right">
					<view class="hflex acenter ">
						<view class="name">{{boss.name}}</view>
					</view>
					<view class="hflex acenter ">
						<view class="text_style1">{{boss.addr}}</view>
						<view class="text_style1">| {{boss.date}}发布</view>
					</view>
				</view>
			</view>
			<view class="box_contetn">{{boss.content}}</view>
			<view class="imgs hflex acenter fwrap">
				<block v-for="(item,index) in boss.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">{{boss.phone}}</view>
			</view>
			<view class="hflex acenter jbetween cell">
				<view class="left_text">维修时间</view>
				<view class="right_text">{{boss.time}}</view>
			</view>
			<view class="hflex acenter jbetween cell" style="padding-bottom: 28rpx;">
				<view class="left_text">维修地点</view>
				<view class="right_text">{{boss.address}}</view>
			</view>
			<view class="hflex acenter jbetween type">
				<view class="right_text">订单类型</view>
				<view class="text_blue">{{boss.type}}</view>
			</view>
			<view class="offer hflex acenter jbetween">
				<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="state_id == '2'">
			<view class="hflex acenter jbetween cell">
				<view class="left_text">订单编号</view>
				<view class="right_text">{{order_no}}</view>
			</view>
			<view class="hflex acenter jbetween cell">
				<view class="left_text">创建时间</view>
				<view class="right_text">{{create_date}}</view>
			</view>
		</view>
		<view class="box" style="margin-bottom: 186rpx;" v-if="state_id == '1'">
			<block v-for="(item,index) in works" :key="index">
				<view class="item_bg" :class="active == index ? 'active' : ''" @click="selectItem(index)">
					<view class="hflex jbetween">
						<view class="hflex acenter">
							<image :src="item.headimg" class="headimg"></image>
							<view class="img_right">
								<view class="hflex acenter ">
									<view class="name">{{item.name}}</view>
									<view class="blue_bg">维修工</view>
								</view>
								<view class="hflex acenter text_hide" style="width: 270rpx;">
									<view class="text_style1">{{item.is_renz?'已认证':'未认证'}} | {{item.wxc}}</view>
								</view>
							</view>
						</view>
						<view class="text_red">报价：<span style="font-size: 36rpx;">￥{{item.offest}}</span></view>
					</view>
					<view class="hflex acenter jbetween">
						<view class="hflex acenter">
							<view class="text_style1">联系电话：</view>
							<view class="text_style1">{{item.phone}}</view>
							<view class="phone hflex acenter jcenter">
								<u-icon name="phone-fill" color="#506DFF" size="9"></u-icon>
							</view>
						</view>
						<view class="btn hflex acenter jcenter">查看详情</view>
					</view>
				</view>
			</block>
		</view>
		<view class="bottom">
			<view class="btn hflex acenter jcenter" v-if="is_boss == '1' && state_id == '2'">
				<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="is_boss == '1' && state_id == '1'" @click="match">匹配维修工</view>
			<view class="hflex acenter jcenter" v-if="is_boss == '0'">
				<view class="left_btn hflex acenter jcenter">
					<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>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				title: '',
				state_id: '1',		//未报价，已报价，已确认
				state: '订单已匹配成功',
				worker: {
					headimg: '/static/images/mine/avatar2.jpg',
					name: '张琪',
					is_renz: true,
					wxc: '博锐船舶器械维修厂',
					phone: '18978652376',
				},
				boss: {
					headimg: '/static/images/mine/avatar1.jpg',
					name: 'NANA的微笑',
					addr: '江苏南京市',
					date: '2022-08-08 12:34',
					phone: '18978652376',
					time: '2022-08-03至08-04',
					type: '快修',
					address: '上海市浦东区滨河路18号江东造船厂',
					offest: '19999.89',
					content: '请详细描述故障情况及原因，方便师傅带齐工具，并为您提供准确合理的维修请详细描述故障情况及原因，方便师傅带齐工具，并为提供准确合理的维修请详细描述故障情况及',
					imgs: ['/static/images/index/class_img3.png','/static/images/index/class_img4.png','/static/images/index/class_img5.png'],
				},
				works: [
					{
						headimg: '/static/images/mine/avatar2.jpg',
						name: '张琪',
						is_renz: true,
						wxc: '博锐船舶器械维修厂',
						phone: '18978652376',
						offest: '199',
					},
					{
						headimg: '/static/images/mine/avatar2.jpg',
						name: '张琪',
						is_renz: true,
						wxc: '博锐船舶器械维修厂',
						phone: '18978652376',
						offest: '299',
					},
					{
						headimg: '/static/images/mine/avatar2.jpg',
						name: '张琪',
						is_renz: true,
						wxc: '博锐船舶器械维修厂',
						phone: '18978652376',
						offest: '799',
					},
				],
				order_no: 'Cbz20221238993932',
				create_date: '2022-08-11 20:34:34',
				active: -1,
				is_boss: '0',
				show: false,
				content: '确定要匹配当前维修工吗？',
			}
		},
		onLoad() {
			that = this
			
		},
		onReady() {
			if(true) {
				uni.setNavigationBarTitle({
					title: '订单详情'
				})
			}
		},
		methods: {
			leftClick() {
				$api.jump(-1)
			},
			selectItem(index) {
				that.active = index
			},
			match() {
				if(that.active == -1) {
					$api.info('请选择维修工')
					return
				} else {
					
					that.show = true
				}
			},
			close() {
				that.show = false
			},
			sure() {
				that.state_id = '2'
				that.state = '订单已匹配成功'
				that.close()
			}
		},
	}
</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_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;
		}
	}
</style>