You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
400 lines
9.6 KiB
400 lines
9.6 KiB
<template>
|
|
<view class="content">
|
|
<tn-avatar class="icon tn-icon-tel" size="xl"></tn-avatar>
|
|
<tn-list-view :card="true" unlined="all" class="listView">
|
|
<tn-list-cell class="listItem-1">
|
|
<view>Telephone number: {{ telInfo.TelPhoneNumber }}</view>
|
|
</tn-list-cell>
|
|
<tn-list-cell class="listItem">
|
|
<tn-grid align="center" :col="col">
|
|
<block>
|
|
<tn-grid-item class="toolItem" @click="addConnect()">
|
|
<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="call()">
|
|
<view class="tn-icon-tel"></view>
|
|
<view class="cutline"></view>
|
|
<view class="toolText">Call</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" @click="jumpToFeedback()">Feedback & Suggestion</text>
|
|
|
|
<tn-modal v-model="showStarTip" :custom="true" :backgroundColor="startTipColor">
|
|
<view class="startTipContent">
|
|
<view slot="left" class="tn-icon tn-icon-about-fill">
|
|
<view class="starTipText">Do you like this app?</view>
|
|
</view>
|
|
<view slot="center" class="tn-icon tn-icon-about-fill">
|
|
<tn-rate v-model="starRateValue" :size="80" :allowHalf="true" activeColor="#0186FF"></tn-rate>
|
|
</view>
|
|
<view slot="right" class="tn-icon tn-icon-about-fill">
|
|
<tn-button :fontSize="36" margin="30rpx" height="46rpx" backgroundColor="#0186FF" fontColor="tn-color-white" @click="starTipSubmit()">submit</tn-button>
|
|
</view>
|
|
</view>
|
|
</tn-modal>
|
|
<tn-toast ref="toast"></tn-toast>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { openSqlite,executeSql,closedb,isTable,addSql} from "@/utils/database";
|
|
export default {
|
|
data() {
|
|
return {
|
|
col: 4,
|
|
telInfo:{},
|
|
tableName: 'scan_code',
|
|
textImgUrl: '',
|
|
|
|
starRateValue: 5, //评分星星数量
|
|
showStarTip: false, //评分展示开关
|
|
startTipColor: '#706F6F', //评分弹窗背景色
|
|
startTipFontColor: '#fff' //评分文字色
|
|
}
|
|
},
|
|
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();
|
|
},
|
|
onShow() {
|
|
//uni.clearStorageSync();
|
|
},
|
|
onBackPress(e){
|
|
let that = this;
|
|
//判断评分弹窗条件是否达到要求
|
|
let starTipStatus = that.getStarTipStatus();
|
|
console.log('starTipStatus',starTipStatus)
|
|
if(starTipStatus === null || starTipStatus === ""){
|
|
//达到要求
|
|
that.showStarTip = true;
|
|
return true;
|
|
}else{
|
|
return false;
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
|
|
//获取弹窗状态结果
|
|
getStarTipStatus(){
|
|
return uni.getStorageSync('starTipStatus');
|
|
},
|
|
|
|
//设置弹窗状态结果
|
|
setStarTipStatus(value){
|
|
uni.setStorageSync('starTipStatus', value);
|
|
},
|
|
|
|
//提交反馈
|
|
starTipSubmit(){
|
|
let that = this;
|
|
that.$refs.toast.show({
|
|
title: 'Success',
|
|
content: 'Thanks for feedback!',
|
|
icon: 'success',
|
|
duration: 3000
|
|
})
|
|
that.showStarTip = false;
|
|
//更改starTipStatus状态
|
|
that.setStarTipStatus(false);
|
|
},
|
|
|
|
//跳转到反馈页面
|
|
jumpToFeedback(){
|
|
uni.navigateTo({
|
|
url: '/pages/feedback/Feedback'
|
|
});
|
|
},
|
|
|
|
//添加联系人
|
|
addConnect(){
|
|
let that = this;
|
|
uni.addPhoneContact({
|
|
firstName: 'edit user',
|
|
mobilePhoneNumber: that.telInfo.TelPhoneNumber,
|
|
success: function () {
|
|
that.$refs.toast.show({
|
|
title: 'Success',
|
|
content: 'add success!',
|
|
icon: 'success',
|
|
duration: 3000
|
|
})
|
|
},
|
|
fail: function () {
|
|
that.$refs.toast.show({
|
|
title: 'Fail',
|
|
content: 'added fail,please try it again!',
|
|
icon: 'fail',
|
|
duration: 3000
|
|
})
|
|
}
|
|
});
|
|
},
|
|
|
|
//打电话
|
|
call(){
|
|
uni.makePhoneCall({
|
|
phoneNumber: this.telInfo.TelPhoneNumber //仅为示例
|
|
});
|
|
},
|
|
|
|
//分享
|
|
share(){
|
|
uni.shareWithSystem({
|
|
summary: this.telInfo.TelPhoneNumber,
|
|
success(){
|
|
// 分享完成，请注意此时不一定是成功分享
|
|
uni.showToast({
|
|
title: 'share success!'
|
|
});
|
|
},
|
|
fail(){
|
|
// 分享失败
|
|
uni.showToast({
|
|
title: 'share fail!'
|
|
});
|
|
}
|
|
})
|
|
},
|
|
|
|
//copy结果值
|
|
copyValue(){
|
|
let that = this;
|
|
//console.log('点击复制关键词事件')
|
|
uni.setClipboardData({
|
|
data: that.telInfo.TelPhoneNumber,
|
|
success() {
|
|
uni.showToast({
|
|
title: 'copy success!'
|
|
});
|
|
}
|
|
})
|
|
},
|
|
|
|
// 打开数据库
|
|
async openSqlite(){
|
|
try{
|
|
let b = await openSqlite()
|
|
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)
|
|
console.log("新增表scancode",res)
|
|
}else{
|
|
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 = {
|
|
TelPhoneNumber : data.TelPhoneNumber,
|
|
imgUrl: data.imgUrl
|
|
}
|
|
that.telInfo = insertData;
|
|
that.textImgUrl = 'file://'+that.telInfo.imgUrl;
|
|
//写入db
|
|
await that.writeToDb("Tel",that.telInfo);
|
|
},
|
|
|
|
//获取历史信息
|
|
async getHistoryData(params){
|
|
//console.log('historyparams',params)
|
|
let that = this;
|
|
const data = JSON.parse(params);
|
|
//console.log('historydata',data)
|
|
that.telInfo = data;
|
|
that.textImgUrl = 'file://'+that.telInfo.imgUrl;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #1F222B;
|
|
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>
|
|
|