scanCode/pages/scan/Email.vue

<template>
	<view class="content">
		<tn-avatar class="icon tn-icon-email" size="xl"></tn-avatar>
		<tn-list-view :card="true" unlined="all" class="listView">
		   <tn-list-cell class="listItem-1">
			   <view>To: {{ emailInfo.addressInfo }}</view>
			   <view>Subject: {{ emailInfo.SubjectInfo }}</view>
			   <view>Content: {{ emailInfo.BodyInfo }}</view>
		   </tn-list-cell>
		   <tn-list-cell class="listItem">
			   <tn-grid align="center" :col="col">
				    <block>
						<tn-grid-item class="toolItem" @click="sendEmail()">
						    <view class="tn-icon-email"></view>
							<view class="cutline"></view>
							<view class="toolText">Send email</view>
						</tn-grid-item>
						<tn-grid-item class="toolItem" @click="addContact()">
						    <view class="tn-icon-my-circle-fill"></view>
							<view class="cutline"></view>
							<view class="toolText">Add to contacts</view>
						</tn-grid-item>
						<tn-grid-item class="toolItem" @click="share()">
						    <view class="tn-icon-share-triangle"></view>
							<view class="cutline"></view>
							<view class="toolText">Share</view>
						</tn-grid-item>
						<tn-grid-item class="toolItem" @click="copyValue()">
						    <view class="tn-icon-copy-fill"></view>
							<view class="cutline"></view>
							<view class="toolText">Copy</view>
						</tn-grid-item>
					</block>
			   </tn-grid>
		   </tn-list-cell>
		   <view class="cutline"></view>
		   <tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
		   <tn-list-cell class="listItemBottom">
			   <image :src="textImgUrl" class="buttomImg"/>
		   </tn-list-cell>
		</tn-list-view>
		<text class="bottomText">Feedback or Suggestion</text>
	</view>
</template>

<script>
	import { openSqlite,executeSql,closedb,isTable,addSql} from "@/utils/database";
	export default {
		data() {
			return {
				col: 4,
				emailInfo:{},
				tableName: 'scan_code',
				textImgUrl: '',
			}
		},
		async onLoad(option) {
			console.log('onLoadOption',option)
			let that = this;
			//打开db
			await that.openSqlite();
			//判断是否存在表
			await that.createTable();
			//scan为写入,history为历史页面
			if(option.category === 'scan'){
				//获取初始化数据并写入db
				await that.initData(option.data);
			}else{
				//查看历史页面
				await that.getHistoryData(option.data);
			}
		},
		onHide() {
			let that = this;
			that.closedb();
		},
		methods: {
			
			//发送邮件
			sendEmail(){
				
			},
			
			//添加联系人
			addContact(){
				
			},
			
			//分享
			share(){
				uni.shareWithSystem({
				  summary: '',
				  href: 'https://uniapp.dcloud.io',
				  success(){
				    // 分享完成，请注意此时不一定是成功分享
					uni.showToast({
						title: 'share success!'
					});
				  },
				  fail(){
				    // 分享失败
					uni.showToast({
						title: 'share fail!'
					});
				  }
				})
			},
			
			//copy结果值
			copyValue(){
				let that = this;
				//console.log('点击复制关键词事件')
				uni.setClipboardData({
					data: that.emailInfo,
					success() {
						uni.showToast({
							title: 'copy success!'
						});
					}
				})
			},
			
			// 打开数据库
			async openSqlite(){
			    try{
			        let b = await openSqlite()
			        // uni.showToast({
			        //     title:"open db success",
			        //     icon:"none"
			        // })
					console.log('db打开了');
			    }catch(e){
			        console.error("open db error",e)
			    }
			},
			
			// 关闭数据库
			closedb(){
			    try{
			        closedb()
					console.log('db关闭了');
			    }catch(e){
			        console.error("close db error",e)
			    }
			
			},
			
			// 创建表
			async createTable(){
			    let sql = this.createTableSql_outbound()
			    try{
			        let exist = await isTable(this.tableName)
			        console.log("表是否存在",exist)
			        if(!exist){
			            let res = await executeSql(sql)
			            // uni.showToast({
			            //     title:"insert table ok",
			            //     icon:"none"
			            // })
			            console.log("新增表scancode",res)
			        }else{
			            // uni.showToast({
			            //     title:"table exist",
			            //     icon:"none"
			            // })
						console.log("表scancode已存在")
			        }
			    }catch(e){
			        uni.showToast({
			            title:"insert table error",
			            icon:"none"
			        })
			        console.error("新增表报错scancode",e)
			    }
			},
			
			//写入扫描记录
			async writeToDb(type,params){
				try{
					let data = {
						category: type,
						content: params
					}
				    let b = await addSql(this.tableName,data)
					console.log("数据添加成功!")
				}catch(e){
				    console.error("insert data error!",e)
				}
			},
			
			//创建表语句
			createTableSql_outbound(){
			    return "CREATE TABLE IF NOT EXISTS `scan_code` (" +
			        "  `id` INTEGER PRIMARY KEY AUTOINCREMENT," +
			        "  `category` varchar(50) DEFAULT NULL ," +
			        "  `content` text DEFAULT NULL ," +
			        "  `createTime` datetime DEFAULT CURRENT_TIMESTAMP ," +
			        "  `updateTime` datetime DEFAULT NULL default(datetime('now','localtime'))" +
			        "); "
			},
			
			//加载数据
			async initData(option){
				//console.log('initoption',option)
				let that = this;
				let data = JSON.parse(option);
				let insertData = {
					addressInfo : data.addressInfo,
					SubjectInfo: data.SubjectInfo,
					BodyInfo: data.BodyInfo,
					imgUrl: data.imgUrl
				}
				that.emailInfo = insertData;
				that.textImgUrl = 'file://'+that.emailInfo.imgUrl;
				//写入db
				await that.writeToDb("Email",that.emailInfo);
			},
			
			//获取历史信息
			async getHistoryData(params){
				//console.log('historyparams',params)
				let that = this;
				const data = JSON.parse(params);
				that.emailInfo = data;
				that.textImgUrl = 'file://'+that.emailInfo.imgUrl;
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #000000;
		height:100vh;
		
		.listView{
			z-index: 0;
			position: relative;
			width: 660rpx;
			height: 1300rpx;
			margin-top: 100rpx;
			background-color: #141b29;
			
			.listItem-1{
				margin-top: 120rpx;
				background-color: #141b29;
				color: #fff;
				//border: 2px solid yellow;
				height: 160rpx;
				text-align: start;
			}
			
			.listItem{
				//border: 2px solid yellow;
				height: 160rpx;
				//margin-top: 30px;	
				//padding-top: 30px;	
				background-color: #141b29;
				color: #fff;
				
				.toolItem{
					//border: 2px solid red;
					background-color: #141b29;
					font-size: 60rpx;
					color: #8f8f94;
					height: 120rpx;
					text-align: center;
					
					
					.toolText{
						font-size: 24rpx;
						color: #8f8f94;
					}
				}
				
			}
			
			.listItem-ad{
				background-color: #141b29;
				text-align: center;
				color: #fff;
				//border: 2px solid red;
				height: 160rpx;
			}
			
			.listItemBottom{
				height: 400rpx;
				margin-top: 20rpx;
				background-color: #141b29;
				color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				.buttomImg{
					width: 300rpx;
					height: 300rpx;
				}
				
			}
		}
		.icon{
			z-index: 1;
			position: absolute;
			margin-top: -620rpx;
			background-color: #3e444d;
			font-size: 120rpx;
			color: #fff;
			text-align: center;
		}
		
		.bottomText{
			color: #fff;
			text-align: center;
			font-size: 24rpx;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
		}
		.cutline{
			border: 1px solid #8f8f94;
		}
	}
</style>