shuquAi/pages/user/takenotes/takenotes.vue

<template>
	<view>
		<view style="color: #fff;">
			<tn-nav-bar backgroundColor="#26B3A0" :bottomShadow="false">问答记录</tn-nav-bar>
		</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="form">
					<block v-for="(item, index) in jobList" :key="index">
						<view class="panel">
							<view class="head">
								<view class="title">问：{{ item.question }}</view>
							</view>
							<u-read-more :toggle="true" showHeight="200" color="#26B3A0">
								<text class="content">{{ item.answer.replace(/^\s+|\s+$/g, '') }}</text>
							</u-read-more>
							<view class="bottom">
								{{appInfo.site_name?appInfo.site_name:'AI智能问答机器人'}}回答时间：{{ item.created_at }}
							</view>
							<view class="tn-flex justify-between">
								<view @click="copyText(item.answer)" hover-class="hoversubmit" class="onekey">一键复制
								</view>
							</view>
							<!-- <view class="circle" @click.stop="gallerydel(index)">
								<u-icon name="close-circle-fill" color="#e83a30" size="24"></u-icon>
							</view> -->
						</view>
					</block>
				</view>
			</view>
		</z-paging>
		<u-popup :show="showPoster" mode="bottom" :round="10" @close="close" @open="open">
			<view class="poster">
				<wike-painter isH5PathToBase64 :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';

	import {
		quesRecord
	} from '@/api/my/index.js'
	export default {
		data() {
			return {
				recordList: [],

				jobList: [],
				tobheight: 45,
				// platform: this.$platform.get(),
				isLoading: true,
				themeColor: '#007AFF',
				showPoster: false,
				posterObj: {},
				qrcode: '',
				spmplatform: 0,

				appInfo: {
					site_name: 'AI助手'
				}
			};
		},
		computed: {
			// ...mapGetters(['appInfo', 'userInfo', 'hasLogin'])
		},
		async onLoad() {
			const that = this;
		},
		methods: {
			async queryList(pageNo, pageSize) {
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				const params = {
					page: pageNo,
					per_page: pageSize
				};

				let res = await quesRecord(params)
				if (res.code == 0) {
					// this.jobList = res.data.data
					this.$refs.paging.complete(res.data.data);
					this.isLoading = false;
				}
				console.log('问答记录返回值', res, this.jobList);
				// this.$http('question.my', params).then(res => {
				// 	if (res.code == 0) {
				// uni.setNavigationBarTitle({
				// 	title: this.appInfo.site_name
				// });

				// 	}
				// });
			},
			// questionlist(){
			// 	this.$http('question.list').then(res=>{
			// 		if(res.code == 0){

			// 		}
			// 	})
			// },
			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'
				});
			},
			createPoster(e) {
				let that = this;
				(this.posterObj = {
					width: '670rpx',
					background: '#fff',
					borderRadius: '16rpx',
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: '670rpx'
					},
					views: [{
							type: 'view',
							css: {
								marginTop: '20rpx',
								paddingLeft: '10rpx',
								display: 'flex'
							},
							views: [{
									type: 'image',
									src: this.userInfo.avatar ? this.userInfo.avatar :
										'/static/images/head.jpg',
									css: {
										marginTop: '10rpx',
										marginLeft: '10rpx',
										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: '#1A2033',
													lineHeight: '28rpx'
												}
											}]
										},
										{
											type: 'view',
											views: [{
												type: 'text',
												text: '我的提问',
												css: {
													marginTop: '15rpx',
													fontSize: '22rpx',
													// fontWeight: 'bold',
													color: '#999',
													lineHeight: '25rpx'
												}
											}]
										}
									]
								}
							]
						},
						{
							type: 'view',
							css: {
								marginTop: '20rpx',
								width: '610rpx',
								padding: '10rpx',
								background: '#d2f8d3',
								borderRadius: '16rpx',
								marginLeft: '20rpx',
								marginRight: '10rpx'
							},
							views: [{
								type: 'text',
								text: that.jobList[e].question,
								css: {
									fontSize: '28rpx',
									color: '#1A2033',
									lineHeight: '45rpx',
									lineClamp: 2,
									paddingLeft: '10rpx',
									paddingRight: '10rpx',
									width: '590rpx'
									// padding:'10rpx'
								}
							}]
						},
						{
							type: 'view',
							css: {
								marginTop: '20rpx',
								paddingLeft: '10rpx',
								display: 'flex'
							},
							views: [{
									type: 'image',
									src: '/static/images/open.png',
									css: {
										marginTop: '10rpx',
										marginLeft: '10rpx',
										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: '#1A2033',
													lineHeight: '28rpx'
												}
											}]
										},
										{
											type: 'view',
											views: [{
												type: 'text',
												text: '回答结果',
												css: {
													marginTop: '15rpx',
													fontSize: '22rpx',
													// fontWeight: 'bold',
													color: '#999',
													lineHeight: '25rpx'
												}
											}]
										}
									]
								}
							]
						},
						{
							type: 'view',
							css: {
								marginTop: '20rpx',
								width: '610rpx',
								padding: '10rpx',
								background: '#f5f6f8',
								borderRadius: '16rpx',
								marginLeft: '20rpx',
								marginRight: '10rpx'
							},
							views: [{
								type: 'text',
								text: uni.$u.trim(that.jobList[e].answer),
								css: {
									fontSize: '28rpx',
									color: '#1A2033',
									lineHeight: '45rpx',
									lineClamp: 11,
									width: '590rpx',
									// paddingLeft: '10rpx',
									// paddingTop: '10rpx',
									padding: '10rpx'
								}
							}]
						},
						{
							type: 'view',
							css: {
								marginTop: '20rpx',
								width: '100%',
								textAlign: 'center'
							},
							// #ifdef H5
							views: [{
								type: 'qrcode',
								text: this.qrcode,
								css: {
									width: '200rpx',
									height: '200rpx'
								}
							}],
							// #endif
							// #ifdef MP-WEIXIN
							views: [{
								type: 'image',
								src: this.qrcode,
								css: {
									width: '200rpx',
									height: '200rpx'
								}
							}]
							// #endif
						},
						{
							type: 'text',
							text: '————  ' + '长按识别 | 欢迎使用' + '  ————',
							css: {
								marginTop: '20rpx',
								width: '100%',
								textAlign: 'center',
								fontSize: '24rpx',
								color: '#989FB3',
								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-color: #26b3a0;
				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: 24rpx 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%;
	}
</style>