duantuihe/pages/my/huiBen_record/index.vue

<template>
	<view class="container">
		<navBar title="绘本记录" :back="true" color="#333333" background="#FFFFFF" />
		<view class="bgBox" :style="{'background-image':`url(${picBase+'jl_bg.png'})`}">
			<view class="empty" style="margin-top: 50%;" v-if="cusumerList.length==0">
				<u-empty mode="data" />
			</view>

			<view class="" v-else>
				<view class="item" v-for="(item,index) in cusumerList">
					<image class="mainPic" :src="'https://'+item.sd_image" mode="widthFix"></image>
					<view class="name">
						{{item.title}}
					</view>
					<view class="des">
						主角：{{item.role?item.role.name:''}}
					</view>
					<view class="time">
						创建时间：{{item.created_at}}
					</view>


					<view class="btnBox">
						<view class="item1" @click="downPdf(item.id,item)">
							<!-- 绘本下载 -->
							PDF生成
						</view>
						<view class="item1 bg" @click="toDetail(item)">
							绘本详情
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-modal showCancelButton @cancel="showLead=false" :show="showLead" title="PDF下载提示" confirmText="去预览" content=""
			@confirm="prePdf">
			<view class="slot-content">
				<view class="txt1">
					下载PDF,请先点击预览页面右上角...菜单按钮,如图1:
				</view>
				<image src="../../../static/other/caidan.jpg" mode="widthFix" class="caidan"></image>
				,再点击弹框中的保存到手机按钮，如图2：
				<image src="../../../static/other/caidan_s.jpg" mode="widthFix" class="caidan"></image>
			</view>
		</u-modal>
	</view>
</template>

<script>
	// import navBar from '@/components/navBar/index.vue'

	import {
		// getChargeRecord,
		getConsumerRecord,
		genPdf
	} from '@/api/index/index.js'
	export default {
		// components: {
		// 	navBar
		// },
		data() {
			return {
				picBase: this.$picBase2,
				cusumerList: [],

				huibenItem: null,

				tempPdfile: '',
				showLead: false
			}
		},
		onLoad() {
			this.getConsumerRecord()
		},
		methods: {
			prePdf() {
				this.showLead = false
				uni.openDocument({
					filePath: this.tempPdfile,
					showMenu: true, //是否可以分享
					success: (res) => {
						uni.hideLoading()
						console.log(res);
					},
					fail: (e) => {
						uni.showToast({
							title: '打开失败',
							icon: "error"
						})
					}
				})
			},
			async downPdf(id, item) {
				uni.showLoading({
					title: '生成中'
				});
				this.huibenItem = item
				console.log('downPdf-------------');
				let res1 = await genPdf({
					// id:this.taskId
					id
				})
				console.log('获取pdfurl返回值--------2', res1);

				if (res1.code == 0) {

					console.log('pdf地址：', res1.data.url);

					this.download(res1.data.url, 1)
				} else {
					uni.hideLoading()
					this.$toast(res1.message)
				}
			},
			toDetail(item) {
				getApp().huibenDetail = item
				uni.navigateTo({
					url: '/pages/index/genRes/index'
				})
			},
			download(file, type) {
				let _this = this

				//下载文件
				uni.downloadFile({ //只能是GET请求
					url: file, //请求地址(后台返回的码流地址)
					success: (res) => {
						//下载成功
						if (res.statusCode === 200) {
							//保存文件
							let tempFile = res.tempFilePath;

							if (type == 2) {
								uni.hideLoading()
								return _this.pictureReview(tempFile)
							}
							//保存成功之后 打开文件
							uni.getFileSystemManager().saveFile({
								tempFilePath: tempFile,
								filePath: wx.env.USER_DATA_PATH + '/' + this.huibenItem.title +
									'.pdf', //自定义文件名
								success(res) {
									console.log(res)
									uni.hideLoading()
									_this.tempPdfile = res.savedFilePath
									_this.showLead = true
									// uni.openDocument({
									// 	filePath: res.savedFilePath,
									// 	showMenu: true, //是否可以分享
									// 	success: (res) => {
									// 		uni.hideLoading()


									// 		console.log(res);
									// 	},
									// 	fail: (e) => {
									// 		uni.showToast({
									// 			title: '打开失败',
									// 			icon: "error"
									// 		})
									// 	}
									// })

								}
							})
						}
					},
					fail: (e) => {
						uni.hideLoading()
						console.log(e, '文件下载失败')
						uni.showToast({
							title: '文件下载失败',
							icon: "error",
						})
					}
				});


			},

			async getConsumerRecord() {
				let res1 = await getConsumerRecord()
				console.log('绘画记录返回值--------2', res1);
				if (res1.code == 0) {
					this.cusumerList = res1.data.data
					// this.cusumerList = [1]
				} else {
					this.$toast(res1.message)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>