cbz-sj/pages/mine/service/purOrder/detail.vue

<template>
	<view class="content">
		<view class="top">
			<u-navbar title="订单详情" :autoBack="true" bgColor="rgba(0,0,0,0)" @leftClick="leftClick" :placeholder="true" :titleStyle="titleStyle"></u-navbar>
			<view class="title" v-if="pageData.status == 1">暂无报价</view>
			<view class="title" v-if="pageData.status == 2">已有报价</view>
			<view class="title" v-if="pageData.status == 3 && pageData.tab !== 1">已匹配</view>
			<view class="hflex acenter jbetween" v-if="pageData.status == 3 && pageData.tab == 1">
				<view class="title">已匹配</view>
				<view class="top_down hflex acenter jcenter" @click="select">
					<image src="/static/images/common/down2.png" style="width: 36rpx;height: 36rpx;"></image>
					<view class="">下载附件</view>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="box">
				<view class="title">商品明细</view>
				<block v-for="(item,index) in pageData.items">
					<view class="item_bg">
						<view class="item_name">{{item.name}}</view>
						<view class="text_style1" v-if="tab !== '4'">规格：{{item.spec}}  数量：{{item.number}}桶</view>
						<view class="text_style1" v-else>数量/吨位：{{item.weight}}</view>
						<view v-if="item.enclosure">
							<block v-for="(item2,index2) in item.enclosure" :key="index2">
								<view class="hflex acenter jbetween enclo">
									<view class="enclo_name">{{item2.filename}}</view>
									<view class="enclo_down hflex acenter jcenter" @click="open(index,index2)">
										<image src="/static/images/common/down_icon.png" style="width: 20rpx;height: 20rpx;"></image>
										<view>下载附件</view>
									</view>
								</view>
							</block>
						</view>
						<view class="text_style1" v-if="item.price">原采购价：<span class="price">￥{{item.price}}</span></view>
						<view class="text_style1" v-if="item.standard">质量标准：{{item.standard}}</view>
						<view class="hflex acenter jcenter" v-if="pageData.status == 1 && tab == '1'">
							<view class="item_btn hflex acenter jcenter">暂无报价</view>
						</view>
						<view class="hflex acenter jbetween offer_bg" v-if="pageData.status == 2 && tab == '1'">
							<view class="bg_left">已有报价•{{item.offers.length}}条</view>
							<view class="hflex acenter" @click="showOffer(index)">
								<view class="top_text">{{!item.show?'展开':'隐藏'}}</view>
								<u-icon name="arrow-up" color="#555555" size="20rpx" v-if="item.show"></u-icon>
								<u-icon name="arrow-down" color="#555555" size="20rpx" v-else></u-icon>
							</view>
						</view>
						<view class="vflex" v-if="item.show">
							<block v-for="(item2,index2) in item.offers" :key="index2">
								<view class="offer_bg">
									<view class="hflex acenter jbetween">
										<view class="offer-user hflex acenter">
											<image :src="item2.user.headimg" class="offer_avatar"></image>
											<view class="user_name">{{item2.user.nickname}}</view>
											<view class="renz hflex acenter jcenter">已认证</view>
										</view>
										<view class="offer_price">
											报价：<span style="font-size: 36rpx;">￥{{item2.amount}}</span>
										</view>
									</view>
									<view class="hflex acenter jbetween offer_center">
										<view class="tele">联系电话：{{item2.user.phone}}</view>
										<image src="/static/images/common/tele.png" style="width: 32rpx; height: 32rpx;" @click="tele(item2.user.phone)"></image>
									</view>
									<view class="hflex acenter jend offer_bottom">
										<view class="bottom_btn1 hflex acenter jcenter" @click="toDetail(item2.user.id)">查看详情</view>
										<view class="bottom_btn1 bottom_btn2 hflex acenter jcenter" @click="match(item2.id)">匹配订单</view>
									</view>
								</view>
							</block>
						</view>
						<view class="offer_bg" v-if="tab == '1' && pageData.status == 3">
							<view class="hflex acenter jbetween">
								<view class="offer-user hflex acenter">
									<image :src="pageData.offers[0].user.headimg" class="offer_avatar"></image>
									<view class="user_name">{{pageData.offers[0].user.nickname}}</view>
									<view class="renz hflex acenter jcenter">已认证</view>
								</view>
								<view class="offer_price">
									报价：<span style="font-size: 36rpx;">￥{{pageData.offers[0].amount}}</span>
								</view>
							</view>
							<view class="hflex acenter jbetween offer_center">
								<view class="tele">联系电话：{{pageData.offers[0].user.phone}}</view>
								<image src="/static/images/common/tele.png" style="width: 32rpx; height: 32rpx;" @click="tele(pageData.offers[0].user.phone)"></image>
							</view>
							<view class="hflex acenter jend offer_bottom">
								<view class="bottom_btn1 hflex acenter jcenter" @click="toDetail(pageData.offers[0].user.id)">查看详情</view>
								<view class="bottom_btn1 hflex acenter jcenter" @click="toDetail(pageData.offers[0].user.id)">联系接单人</view>
								<view class="bottom_btn1 bottom_btn2 hflex acenter jcenter">提醒完成</view>
							</view>
						</view>
					</view>
				</block>
				<view class="cell">
					<view class="right" v-if="pageData.standard_tech">生产技术标准：<span class="left">{{pageData.standard_tech}}</span></view>
				</view>
				<view class="cell">
					<view class="right" v-if="pageData.standard_check">生产验收标准：<span class="left">{{pageData.standard_check}}</span></view>
				</view>
				<view class="title">图片/视频</view>
				<view class="hflex acenter fwrap" v-if="tab == '1'">
					<block v-for="(item,index) in pageData.images" :key="index">
						<image v-if="item.type == 'image'" :src="item.src" class="img"></image>
						<video v-else :src="item.src"  class="img"></video>
					</block>
				</view>
				<view class="hflex acenter fwrap" v-else>
					<block v-for="(item,index) in pageData.file" :key="index">
						<image v-if="item.type == 'image'" :src="item.src" class="img"></image>
						<video v-else :src="item.src"  class="img"></video>
					</block>
				</view>
				<view class="hflex acenter cell">
					<view class="left">交货地址：</view>
					<view class="right">{{pageData.post_address}}</view>
				</view>
				<view class="hflex acenter cell">
					<view class="left">交货日期：</view>
					<view class="right">{{pageData.post_time}}</view>
				</view>
				<view class="hflex acenter cell">
					<view class="left">发布时间：</view>
					<view class="right">{{pageData.create_time}}</view>
				</view>
			</view>
			<view class="box" v-if="pageData.status == 2 && tab !== '1'">
				<view class="hflex acenter jbetween cell2">
					<view class="bg_left">已有报价•{{pageData.offers.length}}条</view>
					<view class="hflex acenter" @click="showOffer2">
						<view class="top_text">{{!show?'展开':'隐藏'}}</view>
						<u-icon name="arrow-up" color="#555555" size="20rpx" v-if="show"></u-icon>
						<u-icon name="arrow-down" color="#555555" size="20rpx" v-else></u-icon>
					</view>
				</view>
				<view class="vflex box_bg" v-if="show">
					<block v-for="(item2,index2) in pageData.offers" :key="index2">
						<view class="offer_bg">
							<view class="hflex acenter jbetween">
								<view class="offer-user hflex acenter">
									<image :src="item2.user.headimg" class="offer_avatar"></image>
									<view class="user_name">{{item2.user.nickname}}</view>
									<view class="renz hflex acenter jcenter">已认证</view>
								</view>
								<view class="offer_price">
									报价：<span style="font-size: 36rpx;">￥{{item2.amount}}</span>
								</view>
							</view>
							<view class="hflex acenter jbetween offer_center">
								<view class="tele">联系电话：{{item2.user.phone}}</view>
								<image src="/static/images/common/tele.png" style="width: 32rpx; height: 32rpx;" @click="tele(item2.user.phone)"></image>
							</view>
							<view class="hflex acenter jend offer_bottom">
								<view class="bottom_btn1 hflex acenter jcenter" @click="toDetail(item2.user.id)">查看详情</view>
								<view class="bottom_btn1 bottom_btn2 hflex acenter jcenter" @click="match(item2.id)">匹配订单</view>
							</view>
						</view>
					</block>
				</view>
				
			</view>
			<view class="box" v-if="tab !== '1' && pageData.status == 3">
				<view class="bg_left cell2">接单人详情</view>
				<view class="box_bg">
					<view class="offer_bg">
						<view class="hflex acenter jbetween">
							<view class="offer-user hflex acenter">
								<image :src="pageData.offers[0].user.headimg" class="offer_avatar"></image>
								<view class="user_name">{{pageData.offers[0].user.nickname}}</view>
								<view class="renz hflex acenter jcenter">已认证</view>
							</view>
							<view class="offer_price">
								报价：<span style="font-size: 36rpx;">￥{{pageData.offers[0].amount}}</span>
							</view>
						</view>
						<view class="hflex acenter jbetween offer_center">
							<view class="tele">联系电话：{{pageData.offers[0].user.phone}}</view>
							<image src="/static/images/common/tele.png" style="width: 32rpx; height: 32rpx;" @click="tele(pageData.offers[0].user.phone)"></image>
						</view>
						<view class="hflex acenter jend offer_bottom">
							<view class="bottom_btn1 hflex acenter jcenter" @click="toDetail(pageData.offers[0].user.id)">查看详情</view>
							<view class="bottom_btn1 hflex acenter jcenter" @click="toDetail(pageData.offers[0].user.id)">联系接单人</view>
							<view class="bottom_btn1 bottom_btn2 hflex acenter jcenter">提醒完成</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom hflex jend" v-if="pageData.status !== 3">
			<view class="btn1 hflex acenter jcenter" @click="cancel(pageData.id)">取消订单</view>
			<view class="btn1 btn2 hflex acenter jcenter" @click="edit(pageData.id)">编辑订单</view>
		</view>
		<u-popup :show="down_show" mode="center" @close="close">
			<view class="popu">
				<view class="popu_top hflex acenter jbetween">
					<view></view>
					<view class="popu_title">下载文件</view>
					<image src="/static/images/common/close_icon.png" style="width: 32rpx;height: 32rpx;" @click="close"></image>
				</view>
				<view class="file_bg hflex acenter">
					<image :src="pageData.items[index1].enclosure?pageData.items[index1].enclosure[index2].icon:''" class="file_icon"></image>
					<view class="file_name">{{pageData.items[index1].enclosure?pageData.items[index1].enclosure[index2].filename:''}}</view>
				</view>
				<view class="btn_group hflex acenter jbetween">
					<view class="left_btn hflex acenter jcenter" @click="copy(pageData.items[index1].enclosure?pageData.items[index1].enclosure[index2].fileurl:'')">复制链接</view>
					<view class="right_btn hflex acenter jcenter" @click="down(pageData.items[index1].enclosure?pageData.items[index1].enclosure[index2].fileurl:'')">下载文件</view>
				</view>
				<view class="hflex acenter jcenter text_blue" @click="see(pageData.items[index1].enclosure?pageData.items[index1].enclosure[index2].fileurl:'')">预览文件></view>
			</view>
		</u-popup>
		<u-popup :show="select_show" mode="center" @close="close" v-if="pageData.staus==1"></u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				titleStyle: {
					fontSize: '36rpx',
					color: '#FFFFFF'
				},
				id: '',
				tab: '',
				pageData: {},
				show: false,
				down_show: false,
				index1: 0,
				index2: 0,
				select_show: false,
			}
		},
		onLoad(options) {
			that = this
			that.id = options.id
			that.tab = options.tab
			that.getData() 
		},
		methods: {
			leftClick() {
				console.log('leftClick');
			},
			getData() {
				$api.req({
					url: '/data/api.business.Purchase/show',
					data: {
						tab: that.tab,
						id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						that.pageData = res.data
					}
				})
			},
			showOffer(index) {
				if(that.pageData.items[index].show) {
					that.$set(that.pageData.items[index],'show',false)
				} else {
					that.$set(that.pageData.items[index],'show',true)
				}
			},
			showOffer2() {
				that.show = !that.show
			},
			open(index1,index2) {
				that.index1 = index1
				that.index2 = index2
				that.down_show = true
			},
			close() {
				that.down_show = false
				that.select_show = false
			},
			select() {
				that.select_show = true
			},
			down(url) {
				uni.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)
							}
						})
				    }
				  }
				})
			},
			see(url) {
				uni.downloadFile({
				  // 示例 url，并非真实存在
				  url: url,
				  showMenu: true,
				  success: function (res) {
				    const filePath = res.tempFilePath
				    uni.openDocument({
				      filePath: filePath,
				      success: function (res) {
				        console.log('打开文档成功')
				      }
				    })
				  }
				})
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function () {
						$api.info('复制成功')
					}
				});
			},
			tele(value) {
				uni.makePhoneCall({
					phoneNumber: value
				});
			},
			toDetail(id) {
				$api.jump('/pages/mine/service/purOrder/msg?id=' + that.id + '&userid=' + id + '&tab=' + that.tab) 
			},
			match(id) {
				$api.req({
					url: '/data/api.business.Purchase/match',
					method: 'POST',
					data: {
						tab: that.tab,
						id: that.id,
						offer_id: id
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						that.getData()
					}
				})
			},
			cancel(id) {
				$api.req({
					url: '/data/api.business.Purchase/cancel',
					data: {
						tab:that.tab,
						id: id
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						that.getList()
					}
				})
			},
			edit(id) {
				var url = ''
				switch(that.tab) {
					case '1' :
						url = '/pages/release/purchase/purchase?id=' + id;
						break;
					case '2' :
						url = '/pages/release/production/production?id=' +id;
						break;
					case '3' :
						url = '/pages/release/waixie/waixie?id=' +id;
						break;
					case '4':
						url = '/pages/release/ocean/ocean?id=' +id;
						break;
				}
				$api.jump(url)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F4F4F4;
		position: relative;
		.top {
			width: 100%;
			height: 520rpx;
			background: url('/static/images/common/top_bg.png') no-repeat;
			background-size: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			.title {
				padding: 24rpx 0;
				font-size: 44rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 60rpx;
			}
			.top_down {
				padding: 0 16rpx;
				height: 52rpx;
				border-radius: 26rpx;
				border: 1rpx solid #FFFFFF;
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 34rpx;
			}
		}
		.center {
			position: absolute;
			left: 0;
			top: 196rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			.box {
				width: 100%;
				background: #FFFFFF;
				border-radius: 20px;
				box-sizing: border-box;
				padding: 0 20rpx 12rpx;
				margin-top: 20rpx;
				.title {
					font-size: 30rpx;
					font-weight: 500;
					color: #222222;
					line-height: 42rpx;
					padding: 28rpx 0;
				}
				.item_bg {
					width: 100%;
					background: #F4F4F4;
					border-radius: 16rpx;
					box-sizing: border-box;
					padding: 0 20rpx 13rpx;
					margin-bottom: 20rpx;
					.item_name {
						font-size: 30rpx;
						font-weight: 400;
						color: #222222;
						line-height: 42rpx;
						padding: 20rpx 0 14rpx;
					}
					.text_style1 {
						font-size: 24rpx;
						font-weight: 400;
						color: #888888;
						line-height: 34rpx;
						padding-bottom: 16rpx;
					}
					.price {
						font-size: 28rpx;
						font-weight: 400;
						color: #555555;
						line-height: 30rpx;
					}
					.item_btn {
						width: 160rpx;
						height: 52rpx;
						border-radius: 32rpx;
						border: 1rpx solid #979797;
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
						margin: 10rpx 0 24rpx;
					}
					.offer_bg {
						width: 100%;
						background: #FFFFFF;
						border-radius: 16rpx;
						width: 100%;
						box-sizing: border-box;
						padding: 20rpx;
						margin-bottom: 20rpx;
						.bg_left {
							font-size: 26rpx;
							font-weight: 500;
							color: #222222;
							line-height: 36rpx;
						}
						.top_text {
							font-size: 20rpx;
							font-weight: 400;
							color: #555555;
							line-height: 28rpx;
						}
						.offer-user {
							padding: 20rpx 0 16rpx;
							.offer_avatar {
								width: 72rpx;
								height: 72rpx;
								border-radius: 50%;
							}
							.user_name {
								font-size: 28rpx;
								font-weight: 400;
								color: #222222;
								line-height: 40rpx;
								padding: 0 16rpx;
							}
							.renz {
								height: 28rpx;
								background: #506DFF;
								border-radius: 14rpx;
								font-size: 16rpx;
								font-weight: 400;
								color: #FFFFFF;
								line-height: 22rpx;
								padding: 0 12rpx;
							}
						}
						.offer_price {
							font-size: 24rpx;
							font-weight: 400;
							color: #FF4646;
							line-height: 34rpx;
						}
						.offer_center {
							padding: 0 0 20rpx;
							border-bottom: 1rpx solid #F4F4F4;
							.tele {
								font-size: 22rpx;
								font-weight: 400;
								color: #666666;
								line-height: 32rpx;
							}
						}
						.offer_bottom {
							padding: 20rpx 0 0;
							.bottom_btn1 {
								margin-left: 20rpx;
								// width: 132rpx;
								height: 48rpx;
								border-radius: 26rpx;
								border: 1rpx solid #506DFF;
								font-size: 22rpx;
								font-weight: 400;
								color: #506DFF;
								line-height: 32rpx;
								padding: 0 22rpx;
							}
							.bottom_btn2 {
								background: #506DFF;
								color: #FFFFFF;
							}
						}
					}
					.enclo {
						padding: 20rpx 0;
						border-top: 1rpx solid #ECECEC;
						.enclo_name {
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
							line-height: 34rpx;
						}
						.enclo_down {
							padding: 12rpx 16rpx;
							border-radius: 22rpx;
							border: 1px solid #506DFF;
							font-size: 16rpx;
							font-weight: 400;
							color: #506DFF;
							line-height: 22rpx;
						}
					}
				}
				.img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;
					margin: 0 14rpx 20rpx 0;
				}
				.img:nth-child(3n+3) {
					margin: 0 0 20rpx 0;
				}
				.cell {
					margin: 0 0 24rpx;
					.left {
						font-size: 26rpx;
						font-weight: 400;
						color: #888888;
						line-height: 36rpx;
					}
					.right {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 36rpx;
					}
				}
				.cell2 {
					padding: 20rpx 0;
					.bg_left {
						font-size: 26rpx;
						font-weight: 500;
						color: #222222;
						line-height: 36rpx;
					}
					.top_text {
						font-size: 20rpx;
						font-weight: 400;
						color: #555555;
						line-height: 28rpx;
					}
				}
				.box_bg {
					.offer_bg {
						width: 100%;
						background: #F4F4F4;
						border-radius: 16rpx;
						width: 100%;
						box-sizing: border-box;
						padding: 20rpx;
						margin-bottom: 20rpx;
						
					}
					
					.offer-user {
						padding: 20rpx 0 16rpx;
						.offer_avatar {
							width: 72rpx;
							height: 72rpx;
							border-radius: 50%;
						}
						.user_name {
							font-size: 28rpx;
							font-weight: 400;
							color: #222222;
							line-height: 40rpx;
							padding: 0 16rpx;
						}
						.renz {
							height: 28rpx;
							background: #506DFF;
							border-radius: 14rpx;
							font-size: 16rpx;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 22rpx;
							padding: 0 12rpx;
						}
					}
					.offer_price {
						font-size: 24rpx;
						font-weight: 400;
						color: #FF4646;
						line-height: 34rpx;
					}
					.offer_center {
						padding: 0 0 20rpx;
						border-bottom: 1rpx solid #F4F4F4;
						.tele {
							font-size: 22rpx;
							font-weight: 400;
							color: #666666;
							line-height: 32rpx;
						}
					}
					.offer_bottom {
						padding: 20rpx 0 0;
						.bottom_btn1 {
							margin-left: 20rpx;
							// width: 132rpx;
							padding: 0 22rpx;
							height: 48rpx;
							border-radius: 26rpx;
							border: 1rpx solid #506DFF;
							font-size: 22rpx;
							font-weight: 400;
							color: #506DFF;
							line-height: 32rpx;
						}
						.bottom_btn2 {
							background: #506DFF;
							color: #FFFFFF;
						}
					}
				}
			}
			.box:nth-last-child(1) {
				margin-bottom: 186rpx;
			}
		}
		.bottom {
			width: 100%;
			height: 166rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			z-index: 99;
			box-sizing: border-box;
			padding: 12rpx 30rpx 0;
			.btn1 {
				width: 200rpx;
				height: 76rpx;
				border-radius: 42rpx;
				border: 1rpx solid #979797;
				font-size: 32rpx;
				font-weight: 400;
				color: #222222;
				line-height: 44rpx;
				margin-left: 40rpx;
			}
			.btn2 {
				border: 1px solid #506DFF;
				color: #506DFF;
			}
		}
	.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 {
				padding-left: 14rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}
			.btn_group {
				width: 100%;
				.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>