cbz/page_index/pages/bidding/bidDetail.vue

<template>
	<view class="content">
		<view class="box">
			<view class="name">{{pageData.title}}</view>
			<view class="hflex acenter jbetween cell">
				<view class="hflex acenter">
					<view class="type">{{pageData.type.name}}</view>
					<view class="city">{{pageData.citys}}</view>
				</view>
				<view class="text_style1">{{pageData.create_time}}发布</view>
			</view>
			<view class="info_bg">
				<view class="info_title cell">招标方信息</view>
				<view class="hflex acenter cell">
					<view class="label">公司名称</view>
					<view class="text_style2">{{pageData.com_name}}</view>
				</view>
				<view class="hflex acenter cell">
					<view class="label">联系人</view>
					<view class="text_style2">{{pageData.com_username}}</view>
					<view class="blue">{{pageData.com_mobile}}</view>
				</view>
				<view class="hflex acenter cell">
					<view class="label">披露时间</view>
					<view class="text_style2">{{pageData.pl_time_start}}</view>
				</view>
			</view>
			<view class="info_bg" v-if="pageData.win != null">
				<view class="info_title2 cell">中标方信息</view>
				<view class="hflex acenter cell">
					<view class="label">公司名称</view>
					<view class="text_style2">{{pageData.win.com_name}}</view>
				</view>
				<view class="hflex acenter cell">
					<view class="label">联系人</view>
					<view class="text_style2">{{pageData.win.com_username}}</view>
					<view class="blue">{{pageData.win.com_mobile}}</view>
				</view>
			</view>
		</view>
		<view class="box" style="margin-bottom: 186rpx;">
			<view class="box_title">招标简述</view>
			<scroll-view :scroll-y="true" class="text">
				<u-parse :content="pageData.summary"></u-parse>
				<!-- <view>{{pageData.summary}}</view> -->
			</scroll-view>
			<block v-for="(item,index) in pageData.files" :key="index">
				<view class="hflex acenter cell">
					<view class="text2">附件：</view>
					<u-icon name="attach" color="#cacaca" size="14"></u-icon>
					<view class="blue" @click="down(item.fileurl)">{{item.filename}}</view>
					<image src="https://ship.shipcc.cn/common/down.png" class="down_img" @click="down(item.fileurl)"></image>
				</view>
			</block>
		</view>
		<view class="bottom">
			<view class="bottom_btn" @click="share('Poster1')">分享</view>
		</view>
		<view class="share_content" :class="share_show?'':'share_content1'">
			<!-- <view style="width: 100%;height: 168rpx;"></view> -->
			<view class="share_box vflex">
				
				<view class="Poster1 pos_title2" data-etype="textarea" :data-enode="pageData.title">{{pageData.title}}</view>
				<view class="pos_title1">
					<view class="Poster1 pos_title1" data-etype="textarea" :data-enode="pageData.summary">{{pageData.summary}}</view>
				</view>
				<view class="hflex acenter jbetween">
					<view class="Poster1 left" :data-enode="'招标单位' + pageData.com_name">招标单位：{{pageData.com_name}}</view>
					<view class="Poster1 right" :data-enode="pageData.create_time">{{pageData.create_time}}</view>
				</view>
				<view class="hflex acenter share_text jcenter Poster1" style=" margin: 54rpx 190rpx 12rpx;" data-enode="长按或扫码查看">扫码查看招标详情</view>
				<view style="width: 100%;" class="vflex acenter jcenter">
					<image class="Poster1" style="width: 25rpx;height: 20rpx;" :data-enode="style.img1" data-etype="image" :src="style.img1"></image>
					<image class="Poster1" style="width: 100%;height: 2rpx;margin: 30rpx 0;" :data-enode="style.img2" data-etype="image" :src="style.img2"></image>
				</view>
				<view class="hflex acenter jbetween">
					<view class="vflex">
						<view class="share_name Poster1" style="margin: 54rpx 0 20rpx;" data-enode="船百知">船百知</view>
						<view class="share_text Poster1" style="margin: 0 0 36rpx;" data-enode="船百知伴你一起杨帆启航,驶向成功彼岸">船百知伴你一起杨帆启航,驶向成功彼岸</view>
					</view>
					<image class="Poster1" data-etype="image" :data-enode="style.code" :src="style.code" style="width: 136rpx;height: 136rpx;"></image>
					<!-- <image class="Poster1" data-etype="image" :data-enode="pageData.contact_headimg" :src="pageData.contact_headimg" style="width: 136rpx;height: 136rpx;"></image> -->
				</view>
			</view>
			<evils-el-poster width="325" height="467" @on-error="onError" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess" ref="Eposter"></evils-el-poster>
			<view class="share_bottom">
				<view class="hflex acenter jcenter">
					<button class="vflex acenter jcenter bottom_item" open-type="share">
						<image src="https://ship.shipcc.cn/common/wx.png" class="item_icon"></image>
						<view class="item_text">微信好友</view>
					</button>
					<!-- <button class="vflex acenter jcenter bottom_item" open-type="share">
						<image src="https://ship.shipcc.cn/common/moments.png" class="item_icon"></image>
						<view class="item_text">朋友圈</view>
					</button> -->
					<view class="vflex acenter jcenter bottom_item" @click="saveImg">
						<image src="https://ship.shipcc.cn/common/download.png" class="item_icon"></image>
						<view class="item_text">保存图片</view>
					</view>
				</view>
				<view class="share_cancel" @click="close">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				pageData: {
				},
				id: '',
				share_show: false,
				list: {},
				style: {
					img1: 'https://ship.shipcc.cn/common/down2.png',
					img2: 'https://ship.shipcc.cn/common/line.png',
					code: 'https://ship.shipcc.cn/common/code.jpg'
				},
				
			}
		},
		onLoad(options) {
			that = this
			that.id = options.id
			that.getData()
		},
		onShareAppMessage(res) {
			console.log(res);
		    if (res.from === 'button') {// 来自页面内分享按钮
		        console.log(res.target)
		    }
		    return {
		        title: '船百知', //分享的名称
		    }
		},
		onShareTimeline(res) {
			console.log(res);
		    return {
		        title: '船百知',
		        type: 0,
		        summary: "",
		    }
		},
		methods: {
			getData() {
				$api.req({
					url: '/data/api.Bidding/show',
					data: {
						id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						that.pageData = res.data
						var time=that.pageData.create_time.split(' ')
						var time2 = that.pageData.pl_time_start.split(' ')
						that.pageData.create_time = time[0]
						that.pageData.pl_time_start = time2[0]
						that.pageData.summary = that.pageData.summary.replace(/<.*?>/g,"")
						that.pageData.summary = that.pageData.summary.replace(/&ldquo;/g,"“")
						that.pageData.summary = that.pageData.summary.replace(/&rdquo;/g,"”")
						// var data = new Date((that.pageData.create_time).getTime()).format("yyyy-MM-dd")
					}
				})
			},
			down(url) {
				// $api.info('开始下载')
				uni.downloadFile({
					url: url, //仅为示例，并非真实的资源
					success: (res) => {
						console.log(res);
						if (res.statusCode === 200) {
							console.log(res.tempFilePath);
							uni.openDocument({
								filePath: res.tempFilePath, //临时路径
								showMenu: true,
								success: function(res2) {
									// uni.showToast({
									// 	icon: 'none',
									// 	mask: true,
									// 	title: '文件已保存：' + res2.savedFilePath, //保存路径
									// 	duration: 3000,
									// });
								}
							});
						}
					},
					fail: (err) => {
					}
				});
			},
			share(elClass) {
				let view = uni.createSelectorQuery().in(this).select(".Poster1");
				
				view.fields({
				  size: true,
				  rect: true,
				  scrollOffset: true
				}, data => {
				}).exec();
				that.share_show = true
				that.$refs.Eposter.createForElRect(elClass,false)
			},
			close() {
				that.share_show = false
			},
			onSuccess(e) {
				console.log(e);
				that.tempImage = e
			},
			onError(err) {
				console.log('发生错误');
				console.log(err);
			},
			saveImg() {
				console.log(that.tempImage);
				uni.authorize({
				    scope: 'scope.writePhotosAlbum',
				    success() {
				        uni.saveImageToPhotosAlbum({
				        	filePath: that.tempImage,
				        	success: function () {
				        		console.log('save success');
								$api.info('保存成功')
								that.close()
				        	}
				        });
				    }
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F5F5F5;
		.box {
			width: 100%;
			box-sizing: border-box;
			padding: 16rpx 30rpx;
			background: #FFFFFF;
			margin: 0 0 20rpx;
			.name {
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
			}
			.cell {
				padding: 10rpx 0;
			}
			.type {
				background: #F0F8F3;
				border-radius: 4rpx;
				box-sizing: border-box;
				padding: 4rpx 16rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #46A95C;
				line-height: 32rpx;
			}
			.city {
				background: #F4F8FB;
				border-radius: 4rpx;
				box-sizing: border-box;
				padding: 4rpx 16rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #506DFF;
				line-height: 32rpx;
				margin-left: 20rpx;
			}
			.text_style1 {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 28rpx;
			}
			.info_bg {
				margin: 20rpx 0;
				background: #F4F8FB;
				border-radius: 8rpx;
				box-sizing: border-box;
				padding: 20rpx;
				.info_title {
					font-size: 24rpx;
					font-weight: 500;
					color: #FF9C27;
					line-height: 34rpx;
					position: relative;
					padding-left: 24rpx;
				}
				.info_title::before {
					content: '';
					position: absolute;
					width: 12rpx;
					height: 12rpx;
					top: 21rpx;
					left: 0;
					background: #FF9C27;
				}
				.info_title2 {
					font-size: 24rpx;
					font-weight: 500;
					color: #506DFF;
					line-height: 34rpx;
					position: relative;
					padding-left: 24rpx;
				}
				.info_title2::before {
					content: '';
					position: absolute;
					width: 12rpx;
					height: 12rpx;
					top: 21rpx;
					left: 0;
					background: #506DFF;
				}
				.label {
					width: 136rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #9BA3AF;
					line-height: 34rpx;
				}
				.text_style2 {
					font-size: 24rpx;
					font-weight: 400;
					color: #3D4249;
					line-height: 34rpx;
				}
				
			}
			.blue {
				font-size: 24rpx;
				font-weight: 400;
				color: #506DFF;
				line-height: 28rpx;
				padding-left: 20rpx;
			}
			.box_title {
				font-size: 30rpx;
				font-weight: 500;
				color: #222222;
				line-height: 42rpx;
				position: relative;
			}
			.box_title::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100rpx;
				height: 12rpx;
				background: linear-gradient(270deg, rgba(255,255,255,0) 0%, #506DFF 100%);
				border-radius: 8rpx;
				opacity: 0.8;
			}
			.text {
				width: 100%;
				margin: 28rpx 0;
				// height: 760rpx;
				border: 1px solid #C6C6C6;
				box-sizing: border-box;
				padding: 20rpx;
				font-size: 24rpx;
				color: #222;
				line-height: 30rpx;
			}
			.text2 {
				font-size: 26rpx;
				font-weight: 400;
				color: #686868;
				line-height: 36rpx;
			}
			.down_img {
				width: 36rpx;
				height: 36rpx;
				padding-left: 16rpx;
			}
		}
		.bottom {
			width: 100%;
			z-index: 9;
			position: fixed;
			bottom: 0;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 8rpx 40rpx 74rpx;
			.bottom_btn {
				width: 100%;
				height: 84rpx;
				background: #506DFF;
				border-radius: 42rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 84rpx;
			}
			
		}
		.share_content {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100vw;
			height: 100vh;
			background: rgba(0,0,0,0.5);
			backdrop-filter: blur(5px);
			padding: 0 0 0;
			.pos_img {
				width: 112rpx;
				height: 112rpx;
				margin: 0 12rpx 0 0;
			}
			.pos_title {
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
				margin: 0 0 0 0;
			}
			.pos_subtitle {
				font-size: 32rpx;
				font-weight: 400;
				color: #506DFF;
				line-height: 40rpx;
				margin: 24rpx 0 0;
			}
			.pos_title1 {
				/* font-size: 24rpx;
				font-weight: 400;
				color: #777777;
				line-height: 34rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				box-orient: vertical;
				line-clamp: 3;
				-webkit-line-clamp: 3; */
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				box-orient: vertical;
				line-clamp: 5;
				-webkit-line-clamp: 5;
				max-width: 100%;
				height: 200rpx;
				overflow: hidden;
				margin: 16rpx 0 28rpx;
			}
			.left {
				font-size: 22rpx;
				font-weight: 400;
				color: #585F6A;
				line-height: 32rpx;
				padding: 4rpx 12rpx;
				background: #F2F2F2;
			}
			.right {
				font-size: 22rpx;
				font-weight: 300;
				color: #585F6A;
				line-height: 26rpx;
			}
			.pos_title2 {
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				box-orient: vertical;
				line-clamp: 2;
				-webkit-line-clamp: 2;
				max-width: 100%;
				font-size: 30rpx;
				font-weight: 500;
				color: #222222;
				line-height: 42rpx;
			}
			.label {
				width: 120rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #444444;
				line-height: 34rpx;
				margin: 0 0 20rpx;
			}
			.text {
				font-size: 24rpx;
				font-weight: 400;
				color: #444444;
				line-height: 34rpx;
				margin: 0 0 20rpx;
			}
			.share_box {
				margin: 130rpx auto 0;
				width: 650rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 48rpx 40rpx 0;
				.share_name {
					width: 100%;
					font-size: 32rpx;
					font-weight: 500;
					color: #222222;
					line-height: 44rpx;
				}
				.share_label {
					width: 100%;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
				}
				.share_text {
					width: 100%;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					box-orient: vertical;
					line-clamp: 5;
					-webkit-line-clamp: 5;
				}
				.box_bottom {
					width: 100%;
					padding: 34rpx 0 16rpx;
					border-top: 1rpx dashed #C3C3C3;
					
					.bottom_left1 {
						font-size: 32rpx;
						font-weight: 500;
						color: #222222;
						line-height: 44rpx;
						padding-bottom: 20rpx;
						
					}
					.bottom_left2 {
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						line-height: 32rpx;
					}
					.bottom_right {
						width: 136rpx;
						height: 136rpx;
					}
				}
			}
			.canvas {
				position: absolute;
				top: 188rpx;
				left: 50rpx;
				width: 650rpx;
				min-height: 494rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
			}
			.share_bottom {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 388rpx;
				background: #F5F7FF;
				border-radius: 40rpx 40rpx 0px 0px;
				.bottom_item {
					width: 33%;
					margin: 50rpx 0 90rpx;
					border: none !important;
					background-color: #F5F7FF !important;
					
					
					.item_icon {
						width: 76rpx;
						height: 76rpx;
					}
					.item_text {
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
						line-height: 36rpx;
						margin-top: 12rpx;
					}
				}
				button::after {
					border: none !important;
				}
				.share_cancel {
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					line-height: 44rpx;
				}
			}
		}
		.share_content1 {
			z-index: -99 !important;
		}
	}
</style>