youngee_c_web_v2/pages/test/test.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></view>
		<view>
			<image></image>
			<p>
				2301.12023.pdf
			</p>
			<button @tap="downloadFile('https://arxiv.org/pdf/2301.12023.pdf')">下载附件</button>
		</view>
		<view class="pipline">
				<p>报名任务&nbsp;>&nbsp;商家反选&nbsp;>&nbsp;商家支付&nbsp;>&nbsp;报名成功&nbsp;>&nbsp;寄样&探店约档</p>
				<p>签收返稿&nbsp;>&nbsp;商家审核&nbsp;>&nbsp;作品发布&nbsp;>&nbsp;返回数据&nbsp;>&nbsp;结案&结算打款</p>
			<!-- <image :src="picture.icon_whole_pipline"></image> -->
		</view>
		<view class="pipline">
				<p>报名任务&nbsp;>&nbsp;商家反选&nbsp;>&nbsp;商家支付&nbsp;>&nbsp;报名成功&nbsp;>&nbsp;寄样&探店约档</p>
				<p>签收返稿&nbsp;>&nbsp;商家审核&nbsp;>&nbsp;作品发布&nbsp;>&nbsp;返回数据&nbsp;>&nbsp;结案&结算打款</p>
			<!-- <image :src="picture.icon_special_pipline"></image> -->
		</view>
		<!-- <view>
			<l-painter isRenderImage :width="'686rpx'" :height="'930rpx'"
				custom-style="position: fixed; top:10px; left: 500%;" ref="painter" @success="poster($event)" />
		</view> -->
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	// import lPainter from "@/components/lime-painter/index.vue"	
	// import lPainter from '@/utils/painter'

	export default {
		components: {
			mvBar,
			// 'l-painter': lPainter
		},
		data() {
			return {
				navH: getApp().globalData.navHeight,
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "测试页面",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: "/pages/mycenter/mycenter",
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
				picture: {
					icon_whole_pipline: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-whole-pipline.png',
					icon_special_pipline: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-special-pipline.png',
				}
			}
		},
		onLoad() {
			// this.onShareLoad();
		},
		methods: {
			/**
			 * 下载文件并预览
			 */
			// 删除本地文件
			deletContract() {
				try {
					let file = wx.getFileSystemManager();
					file.readdir({
						dirPath: `${wx.env.USER_DATA_PATH}/younggee_brief`,
						success: res => {
							console.log(res);
							if (res.files.length > 2) {
								file.unlink({
									filePath: `${wx.env.USER_DATA_PATH}/${res.files[0]}`,
									complete: res => {

									}
								})
							}
						}
					})
				} catch (error) {

				}
			},
			downloadFile(url) {
				let that = this
				console.log(url)
				const fileName = url.split('/').pop()
				const newPath = `${wx.env.USER_DATA_PATH}/younggee_brief/${fileName}`;
				console.log("new path: ", newPath);
				// that.deletContract();
				wx.downloadFile({
					url: url,
					filePath: newPath,
					header: {},
					success: function(res) {
						var filePath = res.filePath;
						console.log(filePath);
						wx.showLoading({
							title: '正在打开',
							mask: true
						})
						wx.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功')
								wx.hideLoading()
							},
							fail: function(res) {
								console.log(res);
								wx.hideLoading()
							},
							complete: function(res) {
								console.log(res);
							}
						})
					},
					fail: function(res) {
						console.log('文件下载失败');
						console.log(res)
					},
					complete: function(res) {},
				})
			},
			onShareLoad() {
				let that = this;
				let base = {
					width: '686rpx',
					height: '950rpx',
					views: [{
							css: {
								width: '686rpx',
								height: '500rpx',
								display: "inline-block",
							},
							views: [{
								type: 'image',
								src: '../../static/home.png',
								mode: 'scaleToFill',
								css: {
									radius: '32rpx 32rpx 0rpx 0rpx',
									left: '0rpx',
									top: '0rpx',
									width: '686rpx',
									height: '500rpx',
								}
							}],
							type: "view"
						},
						{
							css: {
								width: '686rpx',
								height: '190rpx',
								display: "inline-block",
								background: '#ffffff',
							},
							views: [{
									type: 'text',
									text: '￥',
									css: {
										color: '#FE4F02',
										left: '30rpx',
										top: '550rpx',
										fontSize: '26rpx',
										lineHeight: '45rpx'
									}
								},
								{
									type: 'text',
									text: '1688.00',
									css: {
										color: '#FE4F02',
										left: '60rpx',
										top: '550rpx',
										fontWerght: 'bold',
										fontSize: '52rpx',
										lineHeight: '45rpx'
									}
								},
								{
									type: 'text',
									text: 'uniapp使用l-painter画板,海报uniapp使用l-painter画板,海报',
									css: {
										maxLines: 1,
										width: '630rpx',
										color: '#1A1A1A',
										left: '32rpx',
										top: '620rpx',
										fontSize: '32rpx',
										fontWerght: 'bold',
										lineHeight: '45rpx'
									}
								}
							],
							type: "view"
						}, {
							css: {
								width: '686rpx',
								height: '52rpx',
								display: "inline-block",
							},
							views: [{
								type: 'image',
								src: '../../static/img/aimg1.png',
								mode: 'scaleToFill',
								css: {
									left: '0rpx',
									top: '690rpx',
									width: '686rpx',
									height: '52rpx',
								}
							}],
							type: "view"
						}, {
							css: {
								width: '686rpx',
								height: '180rpx',
								display: "inline-block",
								background: '#ffffff',
								radius: '0rpx 0rpx 32rpx 32rpx',
							},
							views: [{
									type: 'text',
									text: '购买热线',
									css: {
										left: '40rpx',
										top: '770rpx',
										fontSize: '28rpx',
										color: '#999999'
									}
								},
								{
									type: 'image',
									src: '../../static/img/icon4.png',
									mode: 'widthFix',
									css: {
										left: '184rpx',
										top: '770rpx',
										width: '36rpx',
										height: '36rpx',

									}
								},
								{
									type: 'text',
									text: '手机号码',
									css: {
										left: '240rpx',
										top: '770rpx',
										fontSize: '28rpx',
										fontWerght: 'bold',
									}
								},
								{
									type: 'text',
									text: '150-1234-4567',
									css: {
										left: '360rpx',
										top: '770rpx',
										fontSize: '28rpx',
										fontWerght: 'bold',
									}
								},
								{
									type: 'image',
									src: '../../static/img/sucess.png',
									mode: 'widthFix',
									css: {
										left: '184rpx',
										top: '840rpx',
										width: '36rpx',
										height: '36rpx',

									}
								},
								{
									type: 'text',
									text: '微信号码',
									css: {
										left: '240rpx',
										top: '840rpx',
										fontSize: '28rpx',
										fontWerght: 'bold',
									}
								},
								{
									type: 'text',
									text: 'csc1234',
									css: {
										left: '360rpx',
										top: '840rpx',
										fontSize: '28rpx',
										fontWerght: 'bold',
									}
								},
							],
							type: "view"
						},
						{
							css: {
								top: '360rpx',
								left: '480rpx',
								width: '170rpx',
								height: '220rpx',
								display: "inline-block",
								background: '#ffffff',
								borderRadius: '16rpx',
								boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
							},
							views: [{
									type: 'text',
									text: '产品详情二维码',
									css: {
										width: '280rpx',
										top: '540rpx',
										left: '488rpx',
										fontSize: '22rpx',
										color: '#1A1A1A'
									}
								},
								{
									type: 'image',
									src: '../../static/img/deng2.png',
									mode: 'widthFix',
									css: {
										top: '370rpx',
										left: '484rpx',
										width: '160rpx',
										height: '160rpx',
										borderRadius: '50%'
									}
								}
							],
							type: "view"
						}
					]
				}
				const painter = that.$refs.painter;
				painter.render(base);
			},
			poster(event) {
				console.info(event)
				let path = event;
				let that = this;
				// #ifdef H5
				var eleLink = document.createElement('a');
				eleLink.download = "filename";
				eleLink.style.display = 'none';
				eleLink.href = path;
				document.body.appendChild(eleLink);
				eleLink.click();
				// 然后移除
				document.body.removeChild(eleLink);
				// #endif
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: path,
					success(res) {
						that.painterShow = false;
						that.show = false;
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						})
					}
				})
				// #endif
			},
		}
	}
</script>

<style>
	.pipline{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 20rpx;
		border: #FCCF41 2rpx dashed;
	}
	
	.pipline p{
		font-size: 24rpx;
		height: 60rpx;
		line-height: 60rpx;
		transform: scale(1, 1.5);
		/* box-shadow: 10px 10px 5px #FCCF41; */
	}
	.pipline image{
		/* width: 600rpx; */
		height: 150rpx;
	}

</style>