digitalMen/pages/user/takenotes/takenotes.vue

<template>
	<view>
		<view style="color: #fff;">
			<tn-nav-bar backgroundColor="#26B3A0" :bottomShadow="false">问答记录</tn-nav-bar>
			<!-- <view :style="{height: tobheight+'px'}"></view> -->
		</view>
		<z-paging ref="paging" refresher-complete-delay="200" v-model="jobList" @query="queryList">
			<view slot="top" class="z_tabs" :style="{ marginTop: tobheight + 'px' }"></view>
			<view class="container">
				<!-- <view class="bg"></view> -->
				<view class="form">
					<!-- <view class="header">
						<view class="title">人工智能回答你需要的问题</view>
					</view> -->
					<block v-for="(item, index) in jobList" :key="index">
						<view class="panel">
							<view class="head">
								<!-- <view class="title">问：{{ item.question }}</view> -->
								<view class="title">
									<u-parse :content="item.question1" scrollTable selectable :tag-style="parse_style" style="width: 100%;"></u-parse>
								</view>
								
							</view>
							<u-read-more :toggle="true" :shadowStyle="shadowStyle" showHeight="200" color="#26B3A0">
								<!-- <zero-markdown-view v-if="item.answer.indexOf('```') != -1 || item.answer.indexOf('/*') != -1" :themeColor="themeColor" :markdown="item.answer"></zero-markdown-view> -->

								<!-- <text class="content">{{ item.answer.replace(/^\s+|\s+$/g, '') }}</text> -->
								<u-parse :content="item.answer1" scrollTable selectable :tag-style="parse_style" style="width: 100%;"></u-parse>
							</u-read-more>
							<view class="bottom">{{appInfo.site_name?appInfo.site_name:'AI智能问答机器人'}}回答时间：{{ item.create_time }}</view>
							<view class="tn-flex justify-between">
								<view @click="copyText(item.answer)" hover-class="hoversubmit" class="onekey">一键复制</view>
								<view @click="createPoster(index)" hover-class="hoversubmit" class="onekey" style="background: #FFC107;">生成海报</view>
							</view>
							
							<!-- <u-button color="" @click="copyText(item.answer)" type="primary" text="一键复制" ></u-button> --><view class="circle" @click.stop="gallerydel(index)">
					<u-icon name="close-circle-fill" color="#e83a30" size="24"></u-icon>
				</view>
						</view>
					</block>

					<!-- <view class="panel">
						<view class="head">
							<view class="title">问：量化交易怎么做呢？</view>
						</view>
						<view class="content">
							量化交易怎么做呢？量化交易怎么做呢？量化交易怎么做呢？量化交易怎么做呢？量化交易怎么做呢？量化交易怎么做呢？
						</view>
						<view class="bottom">
							ChatGPT回答时间：2022-12-12 14:00:00
						</view>
					</view> -->
				</view>
				
			</view>
		</z-paging>
		<u-popup :show="showPoster" mode="bottom" @close="showPoster = false">
			<scroll-view scroll-y="true" :style="{maxHeight: (posterheight) +'px'}">
				<wike-painter  :board="posterObj" @done="posterSuccess" ref="painter"></wike-painter>
				<view style="height: 78px;"></view>
				<view class="dygbhg" >
					<view class="whole" @click="showPoster = false">取消</view>
					<view class="distinguish" @click="toSave">保存/分享</view>
				</view>
			</scroll-view>
		</u-popup>
		<!-- <u-popup :show="showPoster" mode="bottom" :round="10" @close="close" @open="open">
			<view class="poster">
				<wike-painter  :board="posterObj" @success="posterSuccess" ref="painter"></wike-painter>
				<view class="footer-btn">
					<view class="" @click="showPoster = false">退出</view>
					<view class="save" @click="toSave">保存/分享</view>
				</view>
			</view>
		</u-popup> -->
		<wike-loading-page :isLoading="isLoading"></wike-loading-page>
		
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
const {
    marked
} = require('marked');
import hljs from "highlight.js";
import "highlight.js/scss/atom-one-dark.scss";
export default {
	data() {
		return {
			jobList: [],
			tobheight: 45,
			platform: this.$platform.get(),
			isLoading: true,
			themeColor: '#007AFF',
			showPoster:false,
			posterObj: {},
			qrcode:'',
			spmplatform: 0,
			showimg:true,
			imgPath:'http://img5.iqilu.com/c/u/2020/0409/1586401171483.jpg',
			posterheight:'',
			shadowStyle: {
				                backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 80%)',
				                    paddingTop: '100px',
				                    marginTop: '-100px',
			zIndex: 9
			},
			parse_style: {
			                   // 字符串的形式
							   p: 'margin-bottom:0rpx;',
			                   // 一级标题
			                   	h1: `
			                   margin:25px 0;
			                   font-size: 24px;
			                   text-align: center;
			                   font-weight: bold;
			                   color: #00ca88;
			                   padding:3px 10px 1px;
			                   border-bottom: 2px solid #00ca88;
			                   border-top-right-radius:3px;
			                   border-top-left-radius:3px;
			                   `,
			                   // 二级标题
			                   	h2: `
			                   margin:40px 0 20px 0;	
			                   font-size: 20px;
			                   text-align:center;
			                   color:#00ca88;
			                   font-weight:bolder;
			                   padding-left:10px;
			                   border:1px solid #00ca88;
			                   `,
			                   // 三级标题
			                   	h3: `
			                   margin:30px 0 10px 0;
			                   font-size: 18px;
			                   color: #00ca88;
			                   padding-left:10px;
			                   border-left:3px solid #00ca88;
			                   `,
			                   // 四级标题
			                   	h4: `
			                   margin:20px 0 10px 0;
			                   font-size: 16px;
			                   color: #00ca88;
			                   padding-left:10px;
			                   border-left:3px solid #00ca88;
			                   `,
			                   // 五级标题
			                   	h5: `
			                   margin:10px 0 10px 0;
			                   font-size: 14px;
			                   color: #00ca88;
			                   padding-left:10px;
			                   border-left:3px solid #00ca88;
			                   `,
			                   // 六级标题
			                   	h6: `
			                   margin:10px 0 10px 0;
			                   font-size: 12px;
			                   color: #00ca88;
			                   padding-left:10px;
			                   border-left:3px solid #00ca88;
			                   `,
			                   ul: 'margin:24rpx;color: #555;',
			                   ol: 'margin:12rpx;color:#555;',
			                   li: `
			                   margin: 12rpx 0;
			                   color: #555;
			                   `,
							   // 链接
							   	a: `
							   color: #00ca88;`,
							   // 加粗
							   	strong: `
							   font-weight: border;
							   color: #00ca88;
							   `,
							   // 斜体
							   	em: `
							   color: #00ca88;
							   letter-spacing:0.3em;
							   `,
			                   blockquote: 'padding: 15rpx;margin:0 0 12rpx 0;border-radius: 6rpx;color: #555;border-left: 4px solid #dddddd;',
			                   
							   hr: `height:1px;padding:0;border:none;text-align:center;background-image:linear-gradient(to right,rgba(248,57,41,0),${'#9e9e9e'},rgba(248,57,41,0));`,
			                   table: 'border-spacing:0;overflow:auto;min-width:100%;margin:10px 0;border-collapse: collapse;',
			                   th: 'background-color: whitesmoke;border: 1px solid #2d2d2d;padding:10rpx;',
			                   td: 'border: 1px solid #2d2d2d;padding:10rpx;',
							   pre: `
							   color: #c7254e;
							   padding: 20rpx;
							   border-radius: 5px;
							   white-space: pre;
							   overflow: auto;
							   margin:12rpx 0;
							   font-size:13px;
							   background: #2d2d2d;
							   `,
			               },
		};
	},
	computed: {
		...mapGetters(['appInfo', 'userInfo', 'isLogin'])
	},
	watch: {
		appInfo: function(e) {
			let that = this;
			// uni.setNavigationBarTitle({
			// 	title: that.appInfo.site_name
			// });
			// console.log(that.appInfo.site_logo_path);
			// that.$base64.imageUrlToBase64(that.appInfo.site_logo_path)
		}
	},
	onLoad() {
		const that = this;
		if (this.platform == 'wxMiniProgram') {
			var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight;
			var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop;
			this.tobheight = menumtop + paddingtop + uni.getMenuButtonBoundingClientRect().height;
		}
		this.posterheight = uni.$u.sys().windowHeight-this.tobheight
		this.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App'].indexOf(this.platform) + 1;
		this.commonqrcodePath();
		this.initHighLight();
		// this.questionlist()
	},
	methods: {
		queryList(pageNo, pageSize) {
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			var mylist = [];
			const params = {
				page: pageNo,
				limit: pageSize
			};
			this.$http('question.my', params).then(res => {
				if (res.code == 0) {
					uni.setNavigationBarTitle({
						title: this.appInfo.site_name
					});
					for (var i=0;i<res.data.data.length;i++) {
						mylist.push(res.data.data[i])
						mylist[i].question1 = marked(res.data.data[i].question)
						mylist[i].answer1 = marked(res.data.data[i].answer)
					}
					console.log(mylist);
					this.$refs.paging.complete(mylist);
					this.isLoading = false;
				}
			});
		},
		// questionlist(){
		// 	this.$http('question.list').then(res=>{
		// 		if(res.code == 0){

		// 		}
		// 	})
		// },
		initHighLight() {
		    hljs.configure({
		        useBR: true,
		        tabReplace: " ",
		    });
		    marked.setOptions({
		        renderer: new marked.Renderer(),
		        gfm: true,
		        tables: true,
		        breaks: false,
		        pedantic: false,
		        highlight: function(code, lang) {
		            if (lang && hljs.getLanguage(lang)) {
		                return hljs.highlight(lang, code, true).value;
		            } else {
		                return hljs.highlightAuto(code).value;
		            }
		        },
		    });
		},
		toSave() {
			uni.showLoading({
				title: '海报生成中'
			});
			this.$refs.painter.canvasToTempFilePathSync({
				// 在nvue里是jpeg
				fileType: 'jpg',
				quality: 1,
				success: res => {
					// this.path = res.tempFilePath;
					// this.$refs.posterImg.open();
					// this.show_poster = true;
					
					// console.log(res.tempFilePath);
					// 非H5 保存到相册
					// H5 提示用户长按图另存
					// #ifdef MP-WEIXIN
					// uni.saveImageToPhotosAlbum({
					// 	filePath: res.tempFilePath,
					// 	success: function() {
					// 		uni.showToast({
					// 			title: '保存成功'
					// 		});
					// 		that.showPoster = false;
					// 	}
					// });
					
					wx.showShareImageMenu({
					  path: res.tempFilePath
					})
					this.showPoster = false;
					uni.hideLoading();
					// #endif
					// #ifdef H5
					this.showPoster = false;
					uni.hideLoading();
					uni.showModal({
						confirmColor: '#26B3A0',
						confirmText: '查看图片',
						title: '提示',
						content: '查看图片后长按图片即可保存或分享',
						success(src) {
							if (src.confirm) {
								uni.previewImage({
									urls: [res.tempFilePath]
								});
							} else if (src.cancel) {
								this.showPoster = true;
							}
						}
					});
					// #endif
				}
			});
		},
		commonqrcodePath() {
			let spm = this.userInfo.id+'.1.0.'+this.spmplatform+'.1';
			this.$http('common.qrcodePath',{spm:spm}).then(res => {
				if (res.code == 0) {
					this.qrcode = res.data;
				}
			});
		},
		copyText(text) {
			uni.setClipboardData({
				data: text,
				success: function() {
					// console.log('success');
					uni.showToast({
						title: '复制成功'
					});
				}
			});
		},
		gallerydel(e){
			var that = this;
			uni.showModal({
				confirmText: '删除',
				content: '是否删除此问答记录',
				title: '提示',
				confirmColor: '#26B3A0',
				success(res) {
					// console.log(res);
					if (res.confirm) {
						that.$http('question.del', {id:that.jobList[e].id}).then(res => {
							if (res.code == 0) {
								uni.showToast({
									title:'删除成功'
								})
								// that.drawList = []
								that.$refs.paging.reload(true);
							}else{
								uni.showToast({
									title:'删除失败',
									icon:'none'
								})
							}
						});
					}
				}
			})
			
		},
		onSubmit() {
			uni.navigateTo({
				url: '/pages/main/answer/index'
			});
		},
		getdownload(e,type){
			return new Promise((resolve, reject) => {
			// uni.getImageInfo({
			// 	src: e,
			// 	success: res => {
			// 		uni.downloadFile({
			// 			url: e,
			// 			success: (res) => {
			// 				if (res.statusCode === 200) {
			// 					resolve(res.tempFilePath);
			// 				}
			// 				if(res.statusCode === 404){
			// 					let head = '/static/images/head.jpg',open = '/static/images/open.png';
			// 					if(type == 1){
			// 						resolve(head);
			// 					}else{
			// 						resolve(open);
			// 					}
			// 				}
			// 			}
			// 		});
			// 	},
			// 	fail: err => {
			// 		let head = '/static/images/head.jpg',open = '/static/images/open.png';
			// 		if(type == 1){
			// 			resolve(head);
			// 		}else{
			// 			resolve(open);
			// 		}
			// 	}
			// })
			uni.request({
			                        url: e,
			                        method:'GET',
			                        responseType:'arraybuffer',
			                        success: ress => {
			                            let base64 = wx.arrayBufferToBase64(ress.data); 
			                            base64 = 'data:image/jpeg;base64,' + base64
										resolve(base64);
			                        },
									fail: (e) => {
			                            let head = '/static/images/head.jpg',open = '/static/images/open.png';
			                            if(type == 1){
			                            	resolve(head);
			                            }else{
			                            	resolve(open);
			                            }
			                        }
			                    })
			});
		},
		posterSuccess(){
			uni.hideLoading();
		},
		async createPoster(e) {
			let that = this;
			let site_logo = '';
			uni.showLoading({
				title: '海报渲染中'
			});
			let avatar_logo = that.userInfo.avatar ? await this.getdownload(that.userInfo.avatar,1):'/static/images/head.jpg';
			if(that.appInfo.site_logo_path.indexOf("https") < 0){
				site_logo = that.appInfo.site_logo_path ? await that.getdownload(that.appInfo.site_logo_path.replace("http:", "https:"),2):'/static/images/open.png';
			}else{
				site_logo = that.appInfo.site_logo_path ? await that.getdownload(that.appInfo.site_logo_path,2):'/static/images/open.png';
			}
			(this.posterObj = {
				width: uni.$u.sys().windowWidth+ 'px',
				background: 'linear-gradient(to right, #00ca88 0%, #00BCD4 100%)',
				// borderRadius: '16rpx',
				css: {
					// 根节点若无尺寸，自动获取父级节点
					width: uni.$u.sys().windowWidth+ 'px'
				},
				views: [
					{
						type: 'view',
						css: {
							marginTop: '20rpx',
							paddingLeft: '10rpx',
							display: 'flex'
						},
						views: [
							{
								type: 'image',
								src: avatar_logo,
								css: {
									marginTop: '10rpx',
									marginLeft: '20rpx',
									borderRadius: '16rpx',
									width: '80rpx',
									height: '80rpx',
									border: '2rpx solid #fff',
									objectFit: 'cover'
								}
							},
							{
								type: 'view',
								css: {
									marginTop: '10rpx',
									marginLeft: '20rpx'
									// display:'flex',
									// flexDirection:'column'
								},
								views: [
									{
										type: 'view',
										views: [
											{
												type: 'text',
												text: this.userInfo.nickname?this.userInfo.nickname:'提问者',
												css: {
													marginTop: '10rpx',
													fontSize: '28rpx',
													fontWeight: 'bold',
													color: '#32324A',
													lineHeight: '28rpx'
												}
											}
										]
									},
									{
										type: 'view',
										views: [
											{
												type: 'text',
												text: '我的提问❓',
												css: {
													marginTop: '15rpx',
													fontSize: '20rpx',
													
													color: '#fff',
													lineHeight: '25rpx',
												}
											}
										]
									}
								]
							}
						]
					},
					{
						type: 'view',
						css: {
							marginTop: '20rpx',
							width: (uni.$u.sys().windowWidth - 48) + 'px',
							padding: '15rpx',
							background: '#fff',
							borderRadius: '16rpx',
							marginLeft: '30rpx',
							// marginRight: '10rpx'
						},
						views: [
							{
								type: 'text',
								text: that.jobList[e].question,
								css: {
									fontSize: '28rpx',
									color: '#000',
									// lineHeight: '45rpx',
									// lineClamp: 2,
									// padding: '10rpx',
									// paddingRight: '10rpx',
									width: (uni.$u.sys().windowWidth - 48) + 'px'
									// padding:'10rpx'
								}
							}
						]
					},
					{
						type: 'view',
						css: {
							marginTop: '20rpx',
							paddingLeft: '10rpx',
							display: 'flex'
						},
						views: [
							{
								type: 'image',
								src: site_logo,
								css: {
									marginTop: '10rpx',
									marginLeft: '20rpx',
									borderRadius: '16rpx',
									width: '80rpx',
									height: '80rpx',
									border: '2rpx solid #fff',
									objectFit: 'cover'
								}
							},
							{
								type: 'view',
								css: {
									marginTop: '10rpx',
									marginLeft: '20rpx'
									// display:'flex',
									// flexDirection:'column'
								},
								views: [
									{
										type: 'view',
										views: [
											{
												type: 'text',
												text: this.appInfo.site_name?this.appInfo.site_name:'AI智能问答机器人',
												css: {
													marginTop: '10rpx',
													fontSize: '28rpx',
													fontWeight: 'bold',
													color: '#32324A',
													lineHeight: '28rpx'
												}
											}
										]
									},
									{
										type: 'view',
										views: [
											{
												type: 'text',
												text: '回答结果📝',
												css: {
													marginTop: '15rpx',
													fontSize: '20rpx',
													
													color: '#fff',
													lineHeight: '25rpx',
													
												}
											}
										]
									}
								]
							}
						]
					},
					{
						type: 'view',
						css: {
							marginTop: '20rpx',
							width: (uni.$u.sys().windowWidth - 48) + 'px',
							padding: '15rpx',
							background: '#fff',
							borderRadius: '16rpx',
							marginLeft: '30rpx',
							
						},
						views: [
							{
								type: 'text',
								text: uni.$u.trim(that.jobList[e].answer),
								css: {
									fontSize: '28rpx',
									color: '#000',
									// lineHeight: '45rpx',
									// lineClamp: 12,
									width: (uni.$u.sys().windowWidth - 48) + 'px',
									// padding: '10rpx',
									// padding: '10rpx'
								}
							}
						]
					},
					{
						type: 'view',
						css: {
							marginTop: '30rpx',
							width: '100%',
							textAlign: 'center',
							
						},
						// #ifdef H5
						views: [
							{
								type: 'qrcode',
								text: this.qrcode,
								css: {
									width: '200rpx',
									height: '200rpx',
									borderRadius: '16rpx',
									// background: '#f5f6f8',
								}
							}
						],
						// #endif
						// #ifdef MP-WEIXIN
						views: [
							{
								type: 'image',
								src: this.qrcode,
								css: {
									width: '200rpx',
									height: '200rpx',
									borderRadius: '16rpx',
									// background: '#f5f6f8',
								}
							}
						]
						// #endif
					},
					{
						type: 'text',
						text: '————  ' + '长按识别 | 欢迎使用' + '  ————',
						css: {
							marginTop: '20rpx',
							marginBottom: '20rpx',
							width: '100%',
							textAlign: 'center',
							fontSize: '24rpx',
							color: '#fff',
							lineHeight: '33rpx'
						}
					}
				]
			}),
			(this.showPoster = true);
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f6f7fb;
}
.form {
	width: 90%;
	margin: 0 auto;
	z-index: 999;

	.header {
		margin-bottom: 30rpx;

		.title {
			text-align: center;
			color: #fff;
			margin: 30rpx 0rpx;
		}
	}

	.panel {
		padding: 30rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin: 30rpx 0;
		position: relative;
		// box-shadow: 0rpx 10rpx 10rpx #eee;
		// margin-bottom: 15rpx;
		.bottom {
			font-size: 24rpx;
		}
		.head {
			border-bottom: 1rpx solid #eee;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			.title {
				font-weight: bolder;
				font-size: 35rpx;
			}
		}
		.content {
			// margin: 30rpx 0rpx;
		}
		.bottom {
			background-color: #f0faf8;
			color: #26b3a0;
			padding: 15rpx;
			border-radius: 10rpx;
			margin: 30rpx 0;
		}
		.onekey {
			background: linear-gradient(to right, #00ca88, #00BCD4);
			color: #fff;
			padding: 15rpx;
			// font-weight: bold;
			border-radius: 10rpx;
			text-align: center;
			font-size: 24rpx;
			width: 48%;
		}
		.hoversubmit {
			background: #f7f7f7;
			color: #acacb3;
		}
	}
}

.bg {
	position: fixed;
	top: 0rpx;
	left: 0rpx;
	width: 100%;
	background-color: #26b3a0;
	min-height: 200rpx;
	border-radius: 0rpx 0rpx 140rpx 140rpx;
	z-index: -1;
}

.poster {
	padding: 40rpx;

	.footer-btn {
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			width: 319rpx;
			height: 66rpx;
			border-radius: 40rpx;
			border: 1px solid #4070ff;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4070ff;
			line-height: 66rpx;
			text-align: center;
		}

		.save {
			background: #4070ff;
			color: #ffffff;
		}
	}
}
.circle{
		position: absolute;
		right: -12rpx;
		top: -12rpx;
		background: #fff;
		border-radius: 50%;
	}
	
.popupimg{
	
	image{
		width: 375px;
		// height: 450px;
		border-radius: 20rpx;
		
	}
	
}

.dygbhg {
			background: #ffffff;
			border-radius: 15rpx 15rpx 0 0;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-shadow: 0px 0px 10px #00000024;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
		}
		.whole{
			width: 45%;
			height: 88rpx;
			display: flex;
			color: #ffffff;
			align-items: center;
			justify-content: center;
			background: #f3f3f3;
			font-weight: bold;
			border-radius: 60rpx;
			color: #3d7eff;
		}
		.distinguish {
			width: 45%;
			height: 88rpx;
			display: flex;
			color: #ffffff;
			align-items: center;
			justify-content: center;
			background: #3d7eff;
			font-weight: bold;
			border-radius: 60rpx;
			margin: 38rpx 0;
			margin-left: 4%;
		}
</style>