cbz/page_shop/pages/order/repairDetail2.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.repair.status == 1">暂未填写报价，请及时报价</view>
			<view class="state" v-if="pageData.repair.status == 2 && pageData.price == 0">暂未填写报价，请及时报价</view>
			<view class="state" v-if="pageData.repair.status == 2 && pageData.price != 0">已报价，等待匹配</view>
			<view class="state" v-if="pageData.repair.status == 3">已匹配成功</view>
			<view class="top_box">
				<view class="hflex jbetween">
					<view class="hflex acenter">
						<image :src="pageData.user.headimg" class="headimg"></image>
						<view class="img_right">
							<view class="hflex acenter ">
								<view class="name text_hide">{{pageData.user.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.price?pageData.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.user.phone}}</view>
						<view class="phone hflex acenter jcenter" @click.stop="makeCell(pageData.user.phone)">
							<u-icon name="phone-fill" color="#506DFF" size="9"></u-icon>
						</view>
					</view>
					<view class="btn hflex acenter jcenter" @click.stop="toOffer">查看详情</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="hflex acenter" style="padding-top: 28rpx;">
				<image :src="pageData.repair.user.headimg" class="headimg"></image>
				<view class="img_right">
					<view class="hflex acenter ">
						<view class="name text_hide">{{pageData.repair.user.nickname}}</view>
					</view>
					<view class="hflex acenter ">
						<view class="text_style1">{{pageData.repair.province}}{{pageData.repair.city}}</view>
						<view class="text_style1">| {{pageData.repair.create_at}}发布</view>
					</view>
				</view>
			</view>
			<view class="box_contetn">{{pageData.repair.describe}}</view>
			<view class="imgs hflex acenter fwrap">
				<block v-for="(item,index) in pageData.repair.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.repair.user.phone}}</view>
			</view>
			<view class="hflex acenter jbetween cell">
				<view class="left_text">维修时间</view>
				<view class="right_text">{{pageData.repair.start_time}}至{{pageData.repair.end_time}}</view>
			</view>
			<view class="hflex acenter jbetween cell" style="padding-bottom: 28rpx;">
				<view class="left_text">维修地点</view>
				<view class="right_text">{{pageData.repair.address}}</view>
			</view>
			<view class="hflex acenter jbetween type">
				<view class="right_text">订单类型</view>
				<view class="text_blue">{{pageData.repair.quick==2?'快修':'普修'}}</view>
			</view>
			<view class="offer hflex acenter jbetween">
				<view class="hflex acenter">
					<view class="offer_label">订单报价：</view>
					<view class="offer_label" style="color: #FF3636;" v-if="pageData.price && pageData.price==0">
						暂未填写报价
					</view>
					<view class="offer_text" v-else>￥{{pageData.price}}</view>
				</view>
				<view class="btn hflex acenter jcenter" @click="toOffer" v-if="pageData.price && pageData.price==0">立即报价</view>
				<view class="btn hflex acenter jcenter" @click="toOffer" v-else>查看详情</view>
			</view>
		</view>
		<view class="box" v-if="pageData.repair.status == 3">
			<view class="hflex acenter jbetween cell">
				<view class="left_text">订单编号</view>
				<view class="right_text">{{pageData.repair.order_no}}</view>
			</view>
			<view class="hflex acenter jbetween cell">
				<view class="left_text">创建时间</view>
				<view class="right_text">{{pageData.repair.success_at}}</view>
			</view>
		</view>
		<view style="margin-bottom: 186rpx;"></view>
		<view class="bottom">
			<view class="hflex acenter jcenter" v-if="pageData.repair.status == 3">
				<view class="left_btn hflex acenter jcenter" @click="openDown">
					<image src="https://ship-expert.zhousi.hdlkeji.com/common/down-blue.png" style="width: 33rpx; height: 33rpx;"></image>
					<view>下载文件</view>
				</view>
				<view class="right_btn hflex acenter jcenter" @click="toChat(pageData.repair.id)">查看回复</view>
			</view>
			<view class="btn hflex acenter jcenter" v-else>
				<view @click="toChat(pageData.repair.id)">查看回复</view>
			</view>
		</view>
		<u-popup :show="down_show" @close="close" :round="10" mode="center" :closeable="true">
			<view class="popu">
				<view class="popu_top hflex acenter jbetween">
					<view></view>
					<view class="popu_title">下载文件</view>
					<view></view>
				</view>
				<view class="file_bg hflex acenter">
					<!-- <image :src="pageData.items[index1].enclosure[index2].icon" class="file_icon"></image> -->
					<view class="file_name text_hide">{{pageData.repair.down_word}}</view>
				</view>
				<view class="btn_group hflex acenter jbetween">
					<view class="left_btn hflex acenter jcenter" @click="copy(pageData.repair.down_word)">复制链接</view>
					<view class="right_btn hflex acenter jcenter" @click="see(pageData.repair.down_word)">预览文件</view>
				</view>
				<!-- <view class="hflex acenter jcenter text_blue" @click="see(pageData.items[index1].enclosure[index2].fileurl)">预览文件></view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				title: '',
				active: -1,
				type: '',
				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(id) {
				$api.jump('/page_shop/pages/order/chat2?id=' + id)
			},
			toOffer() {
				$api.jump('/page_shop/pages/order/offer2?id=' + that.pageData.repair_id + '&status=' + that.pageData.repair.status)
			},
			openDown() {
				/* var url = that.pageData.repair.down_word
				wx.downloadFile({
				  url: url, //仅为示例，并非真实的资源
				  success (res) {
				    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
				    if (res.statusCode === 200) {
						const filePath = res.tempFilePath
						uni.saveFile({
							tempFilePath: filePath,
							success: function(res) {
								console.log(res);
								that.close()
								that.see(res.savedFilePath)
							}
						})
				    }
				  }
				}) */
				that.down_show = true
			},
			down(url) {
				wx.downloadFile({
				  url: url, //仅为示例，并非真实的资源
				  success (res) {
				    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
				    if (res.statusCode === 200) {
						const filePath = res.tempFilePath
						uni.saveFile({
							tempFilePath: filePath,
							success: function(res) {
								console.log(res);
								that.close()
								that.see(res.savedFilePath)
							}
						})
				    }
				  }
				})
			},
			copy(url) {
				uni.setClipboardData({
					data: url,
					success: function () {
						$api.info('复制成功')
						that.close()
					}
				});
				
			},
			see(url) {
				wx.downloadFile({
				  // 示例 url，并非真实存在
				  url: url,
				  showMenu: true,
				  success: function (res) {
				    const filePath = res.tempFilePath
				    wx.openDocument({
				      filePath: filePath,
				      success: function (res) {
				        console.log('打开文档成功')
				      }
				    })
				  }
				})
			}
		},
	}
</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 {
						max-width: 500rpx;
						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: 200rpx;
					height: 200rpx;
					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 {
					max-width: 500rpx;
					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;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 0 40rpx;
			.popu_top {
				padding: 32rpx 0 40rpx;
				.popu_title {
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					line-height: 50rpx;
				}
			}
			.file_bg {
				width: 550rpx;
				height: 100rpx;
				background: #F4F4F4;
				border-radius: 16rpx;
				margin: 0 0 42rpx;
			}
			.file_icon {
				width: 48rpx;
				height: 60rpx;
			}
			.file_name {
				max-width: 530rpx;
				padding-left: 14rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}
			.btn_group {
				width: 100%;
				padding: 30rpx 0;
				.left_btn {
					width: 260rpx;
					height: 76rpx;
					background: #ECEFFE;
					border-radius: 40rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #506DFF;
					line-height: 42rpx;
				}
				.right_btn {
					width: 260rpx;
					height: 76rpx;
					background: #506DFF;
					border-radius: 40rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 42rpx;
				}
			}
			.text_blue {
				font-size: 30rpx;
				font-weight: 400;
				color: #506DFF;
				line-height: 42rpx;
				padding: 28rpx 0 46rpx;
			}
		}
	}
</style>