语音及分享
This commit is contained in:
parent
d1f6af0aee
commit
d638a2378e
|
|
@ -218,168 +218,21 @@
|
|||
|
||||
|
||||
|
||||
// init() { // 通过opt传参数
|
||||
|
||||
// let self = this
|
||||
// let ctx = uni.createCanvasContext('ctx')
|
||||
|
||||
|
||||
|
||||
// setTimeout(()=>{
|
||||
// self.drawBg(ctx, 330, this.cliceHeight, 8, '#fff')
|
||||
// self.drawTxtOne(ctx, '农业咨询小程序', 220, 35, 100,
|
||||
// '#222', 12, false)
|
||||
// // 绘制圆角头像 图片地址 距离左边 距离上边 宽度 高度 圆角
|
||||
// self.drawImg(ctx,
|
||||
// 'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091310.png',
|
||||
// 170, 10, 40, 40, 20)
|
||||
// self.drawImg(ctx,
|
||||
// 'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091059.png',
|
||||
// 10, 50, 40, 40, 20)
|
||||
|
||||
// self.drawImg(ctx,
|
||||
// 'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091310.png',
|
||||
// 10, 118, 40, 40, 20)
|
||||
|
||||
// // 绘制二维码 图片地址 距离左边 距离上边 宽度 高度 圆角
|
||||
// self.drawImg(ctx,
|
||||
// 'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/ai_qr_20231013091327.jpg',
|
||||
// 174, this.cliceHeight-125, 100, 100, 0)
|
||||
|
||||
// // 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||
// self.drawTxtOne(ctx, self.pext1, 60, 70, 100,
|
||||
// '#222', 12, false)
|
||||
|
||||
// // 绘制两行文字 图片地址 距离左边 距离上边 宽度 行高 颜色 字号
|
||||
// self.drawTxtFour(ctx,
|
||||
// self.pext2,
|
||||
// 60, 120,
|
||||
// 190, 20, '#222', 12)
|
||||
|
||||
// // 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||
// self.drawTxtOne(ctx, '下载二维码', 15, this.cliceHeight-85, 100,
|
||||
// '#666', 11, false)
|
||||
|
||||
// // 结束绘制
|
||||
// ctx.draw()
|
||||
// self.show = true
|
||||
// },1000)
|
||||
|
||||
|
||||
|
||||
// // 绘制背景 宽度 高度 圆角 颜色
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// // 需要用到的图片提前循环下载好，本地除外
|
||||
// // uni.downloadFile({
|
||||
// // url: 'http://banbai.oss-cn-beijing.aliyuncs.com/20230524/96e80fb572e35d4acebdce67dbd41f30.jpg',
|
||||
// // success: function(e) {
|
||||
// // let img = e.tempFilePath // 封面图
|
||||
// // uni.downloadFile({
|
||||
// // url: 'http://banbai.oss-cn-beijing.aliyuncs.com/20230524/96e80fb572e35d4acebdce67dbd41f30.jpg',
|
||||
// // success: function(e) {
|
||||
// // let photo = e.tempFilePath // 头像
|
||||
// // uni.downloadFile({
|
||||
// // url: 'http://banbai.oss-cn-beijing.aliyuncs.com/20230606/f0738e1ff432c08b369ca5e4b906a34a.png',
|
||||
// // success: function(e) {
|
||||
// // uni.hideLoading()
|
||||
// // let qrcode = e.tempFilePath // 二维码
|
||||
// // self.drawTxtOne(ctx, '农业咨询小程序', 220, 35, 100,
|
||||
// // '#222', 12, false)
|
||||
// // // 绘制圆角头像 图片地址 距离左边 距离上边 宽度 高度 圆角
|
||||
// // self.drawImg(ctx,
|
||||
// // 'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091310.png',
|
||||
// // 170, 10, 40, 40, 20)
|
||||
// // self.drawImg(ctx,
|
||||
// // 'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091059.png',
|
||||
// // 10, 50, 40, 40, 20)
|
||||
|
||||
// // self.drawImg(ctx,
|
||||
// // 'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091310.png',
|
||||
// // 10, 118, 40, 40, 20)
|
||||
|
||||
// // // 绘制封面图 图片地址 距离左边 距离上边 宽度 高度 圆角
|
||||
// // // self.drawImg(ctx, img, 10, 120, 210, 260, 8)
|
||||
|
||||
// // // 绘制二维码 图片地址 距离左边 距离上边 宽度 高度 圆角
|
||||
// // self.drawImg(ctx,
|
||||
// // 'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/ai_qr_20231013091327.jpg',
|
||||
// // 174, 195, 100, 100, 0)
|
||||
|
||||
// // // 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||
// // self.drawTxtOne(ctx, self.pext1, 60, 70, 100,
|
||||
// // '#222', 12, false)
|
||||
// // // self.drawTxtTwo(ctx, self.pext1, 60, 64, 80,
|
||||
// // // '#222', 13)
|
||||
// // // self.drawTxtTwo(ctx, self.pext1, 60,64,
|
||||
// // // 190, 20, '#222', 12)
|
||||
// // // 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||
// // // self.drawTxtOne(ctx, '邀请您一起购好物', 60, 80, 100,
|
||||
// // // '#666', 9, false)
|
||||
|
||||
// // // 绘制两行文字 图片地址 距离左边 距离上边 宽度 行高 颜色 字号
|
||||
// // self.drawTxtFour(ctx,
|
||||
// // self.pext2,
|
||||
// // 60, 120,
|
||||
// // 190, 20, '#222', 12)
|
||||
|
||||
// // // 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||
// // self.drawTxtOne(ctx, '下载二维码', 15, 250, 100,
|
||||
// // '#666', 11, false)
|
||||
|
||||
// // // 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||
// // // self.drawTxtOne(ctx, '今日特价：￥', 15, 350, 100,
|
||||
// // // '#ED3327', 11, false)
|
||||
|
||||
// // // 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||
// // // self.drawTxtOne(ctx, '86.00', 82, 350, 100,
|
||||
// // // '#ED3327', 11, true)
|
||||
|
||||
// // // 绘制删除文字 图片地址 距离左边 距离上边 行高 颜色 字号 加粗
|
||||
// // // self.drawTxtDel(ctx, '原价:20', 15, 370, 4,
|
||||
// // // '#818181', 10, false)
|
||||
|
||||
// // // 结束绘制
|
||||
// // ctx.draw()
|
||||
// // self.show = true
|
||||
// // }
|
||||
// // })
|
||||
// // }
|
||||
// // })
|
||||
// // }
|
||||
// // })
|
||||
|
||||
|
||||
|
||||
// },
|
||||
|
||||
down() {
|
||||
uni.showLoading({
|
||||
title: '保存中'
|
||||
})
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'ctx',
|
||||
quality: 1,
|
||||
success: (res) => {
|
||||
uni.hideLoading()
|
||||
console.log(res)
|
||||
this.$emit('down', res)
|
||||
this.show = false
|
||||
// 保存到相册 自定义实现
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
filePath: this.tempImage,
|
||||
success: (res) => {
|
||||
console.log('保存')
|
||||
uni.hideLoading()
|
||||
this.close()
|
||||
uni.showModal({
|
||||
title: '保存成功'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 绘制背景 宽度 高度 圆角 颜色
|
||||
drawBg(ctx, w, h, r, color) {
|
||||
|
|
|
|||
|
|
@ -1,444 +0,0 @@
|
|||
<template>
|
||||
<view class="qiqb-ctx" v-bind:class="{'on':show}">
|
||||
<view class="qiqb-ctx-box">
|
||||
<!-- <text @click="show=false"></text> -->
|
||||
<canvas canvas-id="ctx" style="width:330px;height:300px" v-show="img_show"></canvas>
|
||||
</view>
|
||||
<view class="qiqb-ctx-btns u-border-bottom">
|
||||
<view>分享至</view>
|
||||
<view>长按海报可转发分享</view>
|
||||
<view>
|
||||
<!-- <text>微信好友</text><text>分享朋友圈</text> -->
|
||||
<text @click="down">保存图片</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="qiqb-ctx-close" @click="show=false">取消</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- https://crmeb-test.shop.lihaink.cn/api/upload/image/field -->
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "share",
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
img_show: true,
|
||||
mode: 'img',
|
||||
list: [],
|
||||
pext1: '',
|
||||
pext2: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.$on('add', function(res) {
|
||||
console.log(res.listData) // 为 B 页面传过来的值
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.list,'222222')
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
//子组件接受参数
|
||||
refresh(index) {
|
||||
this.list = index;
|
||||
this.pext1 = index[index.length - 2].content
|
||||
this.pext2 = index[index.length - 1].content
|
||||
// console.log(this.list)
|
||||
},
|
||||
init() { // 通过opt传参数
|
||||
|
||||
uni.showLoading({
|
||||
title: '生成中'
|
||||
})
|
||||
let self = this
|
||||
let ctx = uni.createCanvasContext('ctx')
|
||||
// 绘制背景 宽度 高度 圆角 颜色
|
||||
self.drawBg(ctx, 330, 300, 8, '#fff')
|
||||
|
||||
// 需要用到的图片提前循环下载好，本地除外
|
||||
uni.downloadFile({
|
||||
url: 'http://banbai.oss-cn-beijing.aliyuncs.com/20230524/96e80fb572e35d4acebdce67dbd41f30.jpg',
|
||||
success: function(e) {
|
||||
let img = e.tempFilePath // 封面图
|
||||
uni.downloadFile({
|
||||
url: 'http://banbai.oss-cn-beijing.aliyuncs.com/20230524/96e80fb572e35d4acebdce67dbd41f30.jpg',
|
||||
success: function(e) {
|
||||
let photo = e.tempFilePath // 头像
|
||||
uni.downloadFile({
|
||||
url: 'http://banbai.oss-cn-beijing.aliyuncs.com/20230606/f0738e1ff432c08b369ca5e4b906a34a.png',
|
||||
success: function(e) {
|
||||
uni.hideLoading()
|
||||
let qrcode = e.tempFilePath // 二维码
|
||||
self.drawTxtOne(ctx, '农业咨询小程序', 220, 35, 100,
|
||||
'#222', 12, false)
|
||||
// 绘制圆角头像 图片地址 距离左边 距离上边 宽度 高度 圆角
|
||||
self.drawImg(ctx,
|
||||
'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091310.png',
|
||||
170, 10, 40, 40, 20)
|
||||
self.drawImg(ctx,
|
||||
'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091059.png',
|
||||
10, 50, 40, 40, 20)
|
||||
|
||||
self.drawImg(ctx,
|
||||
'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091310.png',
|
||||
10, 118, 40, 40, 20)
|
||||
|
||||
// 绘制封面图 图片地址 距离左边 距离上边 宽度 高度 圆角
|
||||
// self.drawImg(ctx, img, 10, 120, 210, 260, 8)
|
||||
|
||||
// 绘制二维码 图片地址 距离左边 距离上边 宽度 高度 圆角
|
||||
self.drawImg(ctx,
|
||||
'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/ai_qr_20231013091327.jpg',
|
||||
174, 195, 100, 100, 0)
|
||||
|
||||
// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||
self.drawTxtOne(ctx, self.pext1, 60, 70, 100,
|
||||
'#222', 12, false)
|
||||
// self.drawTxtTwo(ctx, self.pext1, 60, 64, 80,
|
||||
// '#222', 13)
|
||||
// self.drawTxtTwo(ctx, self.pext1, 60,64,
|
||||
// 190, 20, '#222', 12)
|
||||
// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||
// self.drawTxtOne(ctx, '邀请您一起购好物', 60, 80, 100,
|
||||
// '#666', 9, false)
|
||||
|
||||
// 绘制两行文字 图片地址 距离左边 距离上边 宽度 行高 颜色 字号
|
||||
self.drawTxtFour(ctx,
|
||||
self.pext2,
|
||||
60, 120,
|
||||
190, 20, '#222', 12)
|
||||
|
||||
// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||
self.drawTxtOne(ctx, '下载二维码', 15, 250, 100,
|
||||
'#666', 11, false)
|
||||
|
||||
// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||
// self.drawTxtOne(ctx, '今日特价：￥', 15, 350, 100,
|
||||
// '#ED3327', 11, false)
|
||||
|
||||
// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||
// self.drawTxtOne(ctx, '86.00', 82, 350, 100,
|
||||
// '#ED3327', 11, true)
|
||||
|
||||
// 绘制删除文字 图片地址 距离左边 距离上边 行高 颜色 字号 加粗
|
||||
// self.drawTxtDel(ctx, '原价:20', 15, 370, 4,
|
||||
// '#818181', 10, false)
|
||||
|
||||
// 结束绘制
|
||||
ctx.draw()
|
||||
self.show = true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
down() {
|
||||
uni.showLoading({
|
||||
title: '保存中'
|
||||
})
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'ctx',
|
||||
quality: 1,
|
||||
success: (res) => {
|
||||
uni.hideLoading()
|
||||
console.log(res)
|
||||
this.$emit('down', res)
|
||||
this.show = false
|
||||
// 保存到相册 自定义实现
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: (res) => {
|
||||
console.log('保存')
|
||||
uni.showModal({
|
||||
title: '保存成功'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 绘制背景 宽度 高度 圆角 颜色
|
||||
drawBg(ctx, w, h, r, color) {
|
||||
let x = 0
|
||||
let y = 0
|
||||
ctx.setFillStyle(color)
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x + r, y)
|
||||
ctx.arcTo(x + w, y, x + w, y + h, r)
|
||||
ctx.arcTo(x + w, y + h, x, y + h, r)
|
||||
ctx.arcTo(x, y + h, x, y, r)
|
||||
ctx.arcTo(x, y, x + w, y, r)
|
||||
ctx.closePath()
|
||||
ctx.fill()
|
||||
},
|
||||
// 绘制图片 图片地址 距离左边 距离上边 宽度 高度 圆角
|
||||
drawImg(ctx, img, x, y, w, h, r) {
|
||||
let self = this
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
|
||||
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
|
||||
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
|
||||
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
|
||||
ctx.clip()
|
||||
ctx.drawImage(img, x, y, w, h)
|
||||
ctx.restore()
|
||||
},
|
||||
// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||
drawTxtOne(ctx, text, x, y, maxWidth, color, size, bold) {
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
let chr = text.split("")
|
||||
let temp = ""
|
||||
let row = []
|
||||
ctx.setFontSize(size)
|
||||
ctx.setFillStyle(color)
|
||||
for (let a = 0; a < chr.length; a++) {
|
||||
if (ctx.measureText(temp).width < maxWidth) {
|
||||
temp += chr[a]
|
||||
}
|
||||
}
|
||||
row.push(temp)
|
||||
if (ctx.measureText(temp).width > maxWidth) row[0] = row[0] + '...'
|
||||
|
||||
for (var b = 0; b < row.length; b++) {
|
||||
ctx.fillStyle = color
|
||||
if (bold) {
|
||||
ctx.font = 'normal bold ' + size + 'px sans-serif'
|
||||
} else {
|
||||
ctx.font = 'normal ' + size + 'px sans-serif'
|
||||
}
|
||||
ctx.fillText(row[b], x, y)
|
||||
}
|
||||
},
|
||||
// 绘制两行文字 图片地址 距离左边 距离上边 宽度 行高 颜色 字号
|
||||
drawTxtTwo(ctx, text, x, y, maxWidth, lineHeight, color, size) {
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
let chr = text.split("")
|
||||
let temp = ""
|
||||
let row = []
|
||||
ctx.setFontSize(size)
|
||||
ctx.setFillStyle(color)
|
||||
for (let a = 0; a < chr.length; a++) {
|
||||
if (ctx.measureText(temp).width < maxWidth) {
|
||||
temp += chr[a];
|
||||
} else {
|
||||
a--
|
||||
row.push(temp)
|
||||
temp = ""
|
||||
}
|
||||
}
|
||||
row.push(temp)
|
||||
if (row.length > 2) {
|
||||
let rowCut = row.slice(0, 2)
|
||||
let rowPart = rowCut[1]
|
||||
let test = ""
|
||||
let empty = []
|
||||
for (var a = 0; a < rowPart.length; a++) {
|
||||
if (ctx.measureText(test).width < maxWidth) {
|
||||
test += rowPart[a]
|
||||
} else {
|
||||
break
|
||||
}
|
||||
}
|
||||
empty.push(test)
|
||||
var group = empty[0] + "..."
|
||||
rowCut.splice(1, 1, group)
|
||||
row = rowCut
|
||||
}
|
||||
for (var b = 0; b < row.length; b++) {
|
||||
ctx.fillStyle = color
|
||||
ctx.font = 'normal ' + size + 'px sans-serif'
|
||||
ctx.fillText(row[b], x, y + b * lineHeight, 300)
|
||||
}
|
||||
},
|
||||
drawTxtFour(ctx, text, x, y, maxWidth, lineHeight, color, size) {
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
let chr = text.split("")
|
||||
let temp = ""
|
||||
let row = []
|
||||
ctx.setFontSize(size)
|
||||
ctx.setFillStyle(color)
|
||||
for (let a = 0; a < chr.length; a++) {
|
||||
if (ctx.measureText(temp).width < maxWidth) {
|
||||
temp += chr[a];
|
||||
} else {
|
||||
a--
|
||||
row.push(temp)
|
||||
temp = ""
|
||||
}
|
||||
}
|
||||
row.push(temp)
|
||||
if (row.length > 4) {
|
||||
let rowCut = row.slice(0, 4)
|
||||
let rowPart = rowCut[1]
|
||||
let test = ""
|
||||
let empty = []
|
||||
for (var a = 0; a < rowPart.length; a++) {
|
||||
if (ctx.measureText(test).width < maxWidth) {
|
||||
test += rowPart[a]
|
||||
} else {
|
||||
break
|
||||
}
|
||||
}
|
||||
empty.push(test)
|
||||
var group = empty[0] + "..."
|
||||
rowCut.splice(1, 1, group)
|
||||
row = rowCut
|
||||
}
|
||||
for (var b = 0; b < row.length; b++) {
|
||||
ctx.fillStyle = color
|
||||
ctx.font = 'normal ' + size + 'px sans-serif'
|
||||
ctx.fillText(row[b], x, y + b * lineHeight, 300)
|
||||
}
|
||||
},
|
||||
// 绘制删除线文字 图片地址 距离左边 距离上边 行高 颜色 字号 加粗
|
||||
drawTxtDel(ctx, txt, x, y, h, color, size) {
|
||||
ctx.fillStyle = color
|
||||
ctx.font = 'normal ' + size + 'px sans-serif'
|
||||
ctx.fillText(txt, x, y)
|
||||
|
||||
ctx.beginPath()
|
||||
let width = ctx.measureText(txt).width;
|
||||
ctx.rect(x, y - h, width, 1)
|
||||
ctx.fillStyle = color
|
||||
ctx.fill()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.qiqb-ctx {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end
|
||||
}
|
||||
|
||||
.qiqb-ctx.on {
|
||||
z-index: 2000;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.qiqb-ctx-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 30upx 0 40upx;
|
||||
width: 750upx;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.qiqb-ctx-box text {
|
||||
position: absolute;
|
||||
top: -40upx;
|
||||
right: 145upx;
|
||||
display: inline-flex;
|
||||
width: 47upx;
|
||||
height: 47upx;
|
||||
background: url('img/close.png');
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.qiqb-ctx-btns {
|
||||
display: flex;
|
||||
width: 750upx;
|
||||
height: 330upx;
|
||||
border-radius: 20upx 20upx 0 0;
|
||||
background: #fff;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.qiqb-ctx-btns view:nth-child(1) {
|
||||
display: flex;
|
||||
padding-top: 10upx;
|
||||
height: 80upx;
|
||||
font-weight: 700;
|
||||
font-size: 30upx;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.qiqb-ctx-btns view:nth-child(2) {
|
||||
height: 80upx;
|
||||
color: #666;
|
||||
font-size: 24upx
|
||||
}
|
||||
|
||||
.qiqb-ctx-btns view:nth-child(3) {
|
||||
display: flex;
|
||||
padding-bottom: 30upx;
|
||||
font-size: 26upx;
|
||||
flex-direction: row;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.qiqb-ctx-btns view:nth-child(3) text {
|
||||
display: flex;
|
||||
width: 250upx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.qiqb-ctx-btns view:nth-child(3) text:nth-child(1)::before {
|
||||
display: inline-flex;
|
||||
margin-bottom: 20upx;
|
||||
width: 86upx;
|
||||
height: 86upx;
|
||||
background: url('img/3.png');
|
||||
background-size: 100% 100%;
|
||||
content: ''
|
||||
}
|
||||
|
||||
.qiqb-ctx-btns view:nth-child(3) text:nth-child(2)::before {
|
||||
display: inline-flex;
|
||||
margin-bottom: 20upx;
|
||||
width: 86upx;
|
||||
height: 86upx;
|
||||
background: url('img/1.png');
|
||||
background-size: 100% 100%;
|
||||
content: ''
|
||||
}
|
||||
|
||||
.qiqb-ctx-btns view:nth-child(3) text:nth-child(3)::before {
|
||||
display: inline-flex;
|
||||
margin-bottom: 20upx;
|
||||
width: 86upx;
|
||||
height: 86upx;
|
||||
background: url('img/2.png');
|
||||
background-size: 100% 100%;
|
||||
content: ''
|
||||
}
|
||||
|
||||
.qiqb-ctx-close {
|
||||
display: flex;
|
||||
padding-bottom: 50upx;
|
||||
width: 100%;
|
||||
height: 150upx;
|
||||
background: #fff;
|
||||
font-size: 32upx;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
</style>
|
||||
|
|
@ -36,9 +36,9 @@
|
|||
</view>
|
||||
<view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
|
||||
<view class="item flex_col" :class="item.type == 1 ? 'push':'pull' ">
|
||||
|
||||
<image :src="item.type==1?avatar:item.pic" mode="aspectFill" class="pic" v-if="item.pic">
|
||||
</image>
|
||||
|
||||
<view class="content" v-if="item.id=='@'">
|
||||
<!-- 加载中 -->
|
||||
<view class="blinking-box">
|
||||
|
|
@ -49,28 +49,34 @@
|
|||
<view class="" v-else>
|
||||
<view v-if="talkList.length-1==index" class="multiline-text">
|
||||
<view class="content">
|
||||
|
||||
<view class="" v-if="item.type==3" style="border: 1px solid #2573fb;margin-left: 20rpx;">
|
||||
<image :src="item.Image" mode="" style="width: 200rpx;height: 200rpx;" @click="previewImage(item.Image)"></image>
|
||||
<view class="">{{c_content}}</view>
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<bing-math v-if="c_content!=''" :key="`math-${item.id}`" class="bing-math1"
|
||||
:latex="c_content"></bing-math>
|
||||
<view v-else class="blinking-box">
|
||||
<image src="@/static/icon/ioc.gif" mode="aspectFit"></image>
|
||||
<view class="">正在快速生成答案</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
<view class="contenta" v-if="c_content!=''&&index==nums">
|
||||
<view class="contenta-img" v-if='palystatus' @click="palyaudio(item,index)">
|
||||
<view class="contenta-img" v-if='item.playStatus' @click="palyaudio(item,index)">
|
||||
<image src="@/static/icon/ai7.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="contenta-img" v-else @click="palyaudio(item,index)">
|
||||
<image src="@/static/icon/ai8.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="contenta-ai" v-show="palystatus==false">
|
||||
<view class="contenta-ai" v-show="item.playStatus==false">
|
||||
<image src="@/static/icon/ai.gif" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="contenta-imga" @tap="copyContent(c_content)"
|
||||
:style="{'margin-left':palystatus==false?'377rpx' :'427rpx','margin-right': '20rpx'}">
|
||||
:style="{'margin-left':item.playStatus==false?'377rpx' :'427rpx','margin-right': '20rpx'}">
|
||||
<image src="@/static/icon/ai10.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="contenta-imga" @click="Share">
|
||||
|
|
@ -78,13 +84,40 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="content multiline-text">
|
||||
|
||||
<view v-else>
|
||||
|
||||
|
||||
<!-- <rich-text :nodes="item.content"></rich-text> -->
|
||||
|
||||
<bing-math :key="`math-${item.id}`" class="bing-math" :latex="item.content"></bing-math>
|
||||
<view class="" v-if="item.type==3" style="border: 1px solid #2573fb;margin-left: 20rpx;">
|
||||
<image :src="item.Image" mode="" style="width: 200rpx;height: 200rpx;" @click="previewImage(item.Image)"></image>
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<view class="content multiline-text">
|
||||
<bing-math :key="`math-${item.id}`" class="bing-math"
|
||||
:latex="item.content"></bing-math>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contenta" v-if="!item.pic">
|
||||
<view class="contenta-img" v-if='item.playStatus' @click="palyaudio(item,index)">
|
||||
<image src="@/static/icon/ai7.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="contenta-img" v-else @click="palyaudio(item,index)">
|
||||
<image src="@/static/icon/ai8.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="contenta-ai" v-show="item.playStatus==false">
|
||||
<image src="@/static/icon/ai.gif" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="contenta-imga" @tap="copyContent(c_content)"
|
||||
:style="{'margin-left':item.playStatuss==false?'377rpx' :'427rpx','margin-right': '20rpx'}">
|
||||
<image src="@/static/icon/ai10.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="contenta-imga" @click="Share">
|
||||
<image src="@/static/icon/ai9.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -112,7 +145,7 @@
|
|||
</view>
|
||||
<view class="flex_c_txt" v-else>
|
||||
|
||||
<view class="con" @touchend="end" @touchmove="move" @touchstart="start">
|
||||
<view class="con" @touchend="end" @touchmove="move" @longpress="start">
|
||||
{{btnStatus==0? "按住说话":btnStatus==1? "说话中...": btnStatus==2? "松开手指发送录音": "上划取消"}}
|
||||
</view>
|
||||
<!-- <view :class=" btnStatus==0? 'footerBtn': btnStatus==1?'footerBtn_star':'footerBtn_move'">
|
||||
|
|
@ -144,7 +177,7 @@
|
|||
</uni-transition>
|
||||
|
||||
<uni-popup ref="popup" :mask-click="false">
|
||||
<view class="popup_box" @touchend="end" @touchmove="move" @touchstart="start">
|
||||
<view class="popup_box" @touchend="end" @touchmove="move" @longpress="start">
|
||||
<view class="move">
|
||||
|
||||
<view v-if="btnStatus!==0" :class="btnStatus==3? 'move_center_clear': 'move_center'">
|
||||
|
|
@ -195,6 +228,7 @@
|
|||
fileToBase64,
|
||||
dataURLtoBlob,
|
||||
ttWss,
|
||||
ttocr
|
||||
} from "@/api/api.js"
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
|
|
@ -212,10 +246,9 @@
|
|||
import BingMath from "@/components/bing-math/bing-math.vue"
|
||||
import qiqbshare from "@/components/qiqb-share/qiqb-share.vue"
|
||||
|
||||
// 获取 module
|
||||
const sr = uni.requireNativePlugin("YL-SpeechRecognition")
|
||||
const innerAudioContext = uni.createInnerAudioContext()
|
||||
|
||||
const recorderManager = uni.getRecorderManager()
|
||||
const innerAudioContext = uni.createInnerAudioContext()
|
||||
export default {
|
||||
components: {
|
||||
'bing-math': BingMath,
|
||||
|
|
@ -254,7 +287,6 @@
|
|||
isshow: true,
|
||||
shouldScrollToBottom: true,
|
||||
nums: 0,
|
||||
palystatus: true, //播放状态
|
||||
recordFlg: true, //录音锁
|
||||
btnStatus: 0, //按钮状态
|
||||
audioDuration: "",
|
||||
|
|
@ -280,7 +312,12 @@
|
|||
},
|
||||
audio_file: [],
|
||||
currentIndex: 0,
|
||||
wv: null
|
||||
kk: 1,
|
||||
wv: null,
|
||||
Imageurl: '',
|
||||
content1: '',
|
||||
audioContext: null, // 存储当前的innerAudioContext实例
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -300,21 +337,11 @@
|
|||
})
|
||||
})
|
||||
|
||||
//初始化
|
||||
sr.init("2eda6c2e");
|
||||
//创建文字转语音对象
|
||||
sr.createTts(code => {});
|
||||
//创建语音转文字对象
|
||||
sr.createIat(code => {
|
||||
console.log(code, '1111111111')
|
||||
});
|
||||
|
||||
sr.setVadBos(10 * 1000); //设置语音听写前端点超时时间ms（最大10s,一般按默认即可）
|
||||
sr.setVadEos(10 * 1000); //设置语音听写后端点超时时间ms（最大10s,一般按默认即可）
|
||||
},
|
||||
beforeDestroy() {
|
||||
sr.destroy();
|
||||
|
||||
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
let avatar = uni.getStorageSync('avatar');
|
||||
avatar ? this.avatar = avatar : null;
|
||||
|
|
@ -336,6 +363,23 @@
|
|||
this.getHistoryMsg();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 为了防止苹果手机静音无法播放
|
||||
// uni.setInnerAudioOption({
|
||||
// obeyMuteSwitch: false
|
||||
// })
|
||||
let that = this;
|
||||
|
||||
recorderManager.onStop(function(res) {
|
||||
// 解决第一次录音,挂实例挂载问题
|
||||
that.$nextTick(() => {
|
||||
// console.log('recorder stop' + JSON.stringify(res));
|
||||
that.audioDuration = res.duration;
|
||||
that.voicePath = res.tempFilePath;
|
||||
})
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
watch: {
|
||||
n_content(n, o) {
|
||||
|
|
@ -424,27 +468,57 @@
|
|||
},
|
||||
//打开相册
|
||||
album() {
|
||||
let that = this
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
|
||||
success: (res) => {
|
||||
// const tempFilePaths = res.tempFilePaths;
|
||||
this.imgfile(res.tempFilePaths)
|
||||
console.log(res.tempFilePaths,'2222222222')
|
||||
uni.uploadFile({
|
||||
url: HTTP_REQUEST_URL + '/api/upload/image', // 上传地址
|
||||
filePath: res.tempFilePaths[0], // 要上传的文件路径
|
||||
name: 'file', // 上传文件对应的 key 值
|
||||
header: {
|
||||
'content-type': 'multipart/form-data'
|
||||
},
|
||||
success: function(res) {
|
||||
|
||||
let data = {
|
||||
let data = JSON.parse(res.data)
|
||||
console.log(data,'222222222222')
|
||||
if (data.code == 1) {
|
||||
// this.File()
|
||||
let data1 = {
|
||||
"id": '@',
|
||||
"content": '',
|
||||
"type": 2,
|
||||
"pic": this.avatarType
|
||||
"pic": this.avatar
|
||||
}
|
||||
this.talkList.push(data);
|
||||
that.talkList.push(data1);
|
||||
that.Imageurl = data.data.uri
|
||||
that.imgfile(data.data.uri)
|
||||
}
|
||||
},
|
||||
|
||||
fail: function(error) {
|
||||
// 上传失败处理逻辑
|
||||
that.talkList = that.talkList.filter(item => item.id !== '@');
|
||||
console.log(error, 11);
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
//拍照
|
||||
camera() {
|
||||
let that = this
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
|
|
@ -452,14 +526,44 @@
|
|||
success: (res) => {
|
||||
console.log(res);
|
||||
// const tempFilePaths = res.tempFilePaths;
|
||||
this.imgfile(res.tempFilePaths)
|
||||
let data = {
|
||||
console.log(res.tempFilePaths)
|
||||
uni.uploadFile({
|
||||
url: HTTP_REQUEST_URL + '/api/upload/image', // 上传地址
|
||||
filePath: res.tempFilePaths[0], // 要上传的文件路径
|
||||
name: 'file', // 上传文件对应的 key 值
|
||||
header: {
|
||||
'content-type': 'multipart/form-data'
|
||||
},
|
||||
success: function(res) {
|
||||
|
||||
let data = JSON.parse(res.data)
|
||||
console.log(data, data.code)
|
||||
if (data.code == 1) {
|
||||
// this.File()
|
||||
let data1 = {
|
||||
"id": '@',
|
||||
"content": '',
|
||||
"type": 2,
|
||||
"pic": this.avatarType
|
||||
"pic": this.avatar
|
||||
}
|
||||
this.talkList.push(data);
|
||||
that.talkList.push(data1);
|
||||
that.Imageurl = data.data.uri
|
||||
that.imgfile(data.data.uri)
|
||||
}
|
||||
},
|
||||
|
||||
fail: function(error) {
|
||||
// 上传失败处理逻辑
|
||||
that.talkList = that.talkList.filter(item => item.id !== '@');
|
||||
console.log(error, 11);
|
||||
|
||||
}
|
||||
})
|
||||
// this.imgfile(res.tempFilePaths)
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -480,46 +584,93 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
|
||||
//图片预览
|
||||
previewImage(url){
|
||||
uni.previewImage({
|
||||
urls: [url], // 图片地址数组
|
||||
current: url, // 当前预览的图片地址
|
||||
success: function() {
|
||||
console.log('预览图片成功');
|
||||
},
|
||||
fail: function(error) {
|
||||
console.error('预览图片失败', error);
|
||||
}
|
||||
});
|
||||
},
|
||||
//图片转文字
|
||||
imgfile(tempFilePath) {
|
||||
let that = this
|
||||
console.log(tempFilePath, '2')
|
||||
uni.uploadFile({
|
||||
url: HTTP_REQUEST_URL + '/api/xun_fei/ocr', // 上传地址
|
||||
filePath: tempFilePath[0], // 要上传的文件路径
|
||||
name: 'image', // 上传文件对应的 key 值
|
||||
header: {
|
||||
'content-type': 'multipart/form-data'
|
||||
},
|
||||
success: function(res) {
|
||||
that.content1=''
|
||||
// console.log(tempFilePath, '2')
|
||||
ttocr({
|
||||
image: tempFilePath
|
||||
}).then(res => {
|
||||
|
||||
let data = JSON.parse(res.data)
|
||||
console.log(data)
|
||||
if (data.code == 1) {
|
||||
if (res.code == 1) {
|
||||
uni.showToast({
|
||||
title: '图片识别成功'
|
||||
});
|
||||
console.log(res.data.words)
|
||||
that.gnishow = false
|
||||
|
||||
that.talkList = that.talkList.filter(item => item.id !== '@');
|
||||
if (data.data.words.length > 0) {
|
||||
that.content = ''
|
||||
for (let i in data.data.words) {
|
||||
that.content = that.content + data.data.words[i]
|
||||
}
|
||||
|
||||
if (res.data.words.length > 0) {
|
||||
|
||||
for (let i in res.data.words) {
|
||||
that.content1 += res.data.words[i]
|
||||
if (res.data.words.length - 1 == i) {
|
||||
that.send1()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
fail: function(error) {
|
||||
// 上传失败处理逻辑
|
||||
}
|
||||
|
||||
}).catch((err) => {
|
||||
that.talkList = that.talkList.filter(item => item.id !== '@');
|
||||
console.log(error, 11);
|
||||
|
||||
|
||||
}
|
||||
console.log(err)
|
||||
})
|
||||
// uni.uploadFile({
|
||||
// url: HTTP_REQUEST_URL + '/api/xun_fei/ocr', // 上传地址
|
||||
// filePath: tempFilePath, // 要上传的文件路径
|
||||
// name: 'image', // 上传文件对应的 key 值
|
||||
// header: {
|
||||
// 'content-type': 'multipart/form-data'
|
||||
// },
|
||||
// success: function(res) {
|
||||
|
||||
// let data = JSON.parse(res.data)
|
||||
// console.log(data)
|
||||
// if (data.code == 1) {
|
||||
// uni.showToast({
|
||||
// title: '图片识别成功'
|
||||
// });
|
||||
|
||||
// that.talkList = that.talkList.filter(item => item.id !== '@');
|
||||
// if (data.data.words.length > 0) {
|
||||
// that.content = ''
|
||||
// for (let i in data.data.words) {
|
||||
// that.content = that.content + data.data.words[i]
|
||||
// }
|
||||
// that.send1()
|
||||
// }
|
||||
|
||||
// }
|
||||
// },
|
||||
|
||||
// fail: function(error) {
|
||||
// // 上传失败处理逻辑
|
||||
// that.talkList = that.talkList.filter(item => item.id !== '@');
|
||||
// console.log(error, 11);
|
||||
|
||||
|
||||
// }
|
||||
// })
|
||||
},
|
||||
|
||||
|
||||
|
|
@ -578,40 +729,51 @@
|
|||
|
||||
|
||||
|
||||
// 暂时不用
|
||||
// let arry1;
|
||||
// if (val.indexOf(',') == -1) {
|
||||
// arry1 = val.split(',')
|
||||
// } else if (val.indexOf('，') == -1) {
|
||||
// arry1 = val.split('，')
|
||||
// } else {
|
||||
// arry1.push(val)
|
||||
// }
|
||||
},
|
||||
//语音转文字
|
||||
uploadFile(tempFilePath) {
|
||||
|
||||
// const temp = []
|
||||
// for (let i = 0; i < arry1.length; i++) {
|
||||
// temp.push(
|
||||
// // 使用Promise用于异步计算
|
||||
// new Promise((resolve, reject) => {
|
||||
let that = this
|
||||
// console.log(tempFilePath)
|
||||
uni.uploadFile({
|
||||
url: HTTP_REQUEST_URL + '/api/xun_fei/iat', // 上传地址
|
||||
filePath: tempFilePath, // 要上传的文件路径
|
||||
name: 'audio', // 上传文件对应的 key 值
|
||||
header: {
|
||||
'content-type': 'multipart/form-data'
|
||||
},
|
||||
success: function(res) {
|
||||
|
||||
// ttWss({
|
||||
// data: arry1[i]
|
||||
// }).then(res => {
|
||||
|
||||
// return resolve(res.data.mp3)
|
||||
// }).catch(err => {
|
||||
// return reject(err)
|
||||
// })
|
||||
// })
|
||||
// )
|
||||
// }
|
||||
// Promise.all(temp).then(res => {
|
||||
// // console.log(res,'2222222')
|
||||
// this.audio_file = res
|
||||
let data = JSON.parse(res.data)
|
||||
if (data.code == 1) {
|
||||
uni.showToast({
|
||||
title: '语音识别成功'
|
||||
});
|
||||
|
||||
// this.ScanAudio(res, this.currentIndex, 0)
|
||||
// })
|
||||
that.talkList = that.talkList.filter(item => item.id !== '@');
|
||||
if (data.data.words.length > 0) {
|
||||
that.content = data.data.words
|
||||
that.send()
|
||||
}
|
||||
} else {
|
||||
that.talkList = that.talkList.filter(item => item.id !== '@');
|
||||
uni.showToast({
|
||||
title: '语音识别失败'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
fail: function(error) {
|
||||
// 上传失败处理逻辑
|
||||
that.deletespeech()
|
||||
console.log(error, 11);
|
||||
uni.hideLoading();
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//语音分段 数组 条数 延时
|
||||
|
|
@ -648,89 +810,114 @@
|
|||
},
|
||||
|
||||
|
||||
//开始录音
|
||||
voiceToText() {
|
||||
let that = this;
|
||||
|
||||
sr.voiceToText(data => {
|
||||
// console.log(JSON.stringify(data));
|
||||
if (data.code == 1001) {
|
||||
// that.toTextStatus = "倾听中，请说话..."
|
||||
} else if (data.code == 1006) {
|
||||
// this.toTextStatus = "倾听完毕"
|
||||
//文件地址
|
||||
// sr.getIatPath(path => {
|
||||
// that.path = path;
|
||||
// });
|
||||
} else if (data.code == 1007) {
|
||||
// this.toTextStatus = "停止倾听"
|
||||
} else if (data.code == 1008) {
|
||||
// this.volume = data.msg;
|
||||
} else if (data.code == 1009) { //结果
|
||||
//语音识别是分段的，你说一个词语或者一个句子识别一次，返回一次，再说再返回，不是一次性的，islast代表是否是最后一句话，可以理解为本次识别是否已结束
|
||||
// this.transText = data.msg;
|
||||
if (data.isLast) {
|
||||
|
||||
if (data.msg.length > 0 && this.risshow == false) {
|
||||
this.content = data.msg
|
||||
this.send()
|
||||
} else {
|
||||
this.content = ''
|
||||
this.stopVoiceToText()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} else if (data.code == 1010) { //error信息
|
||||
//如果data.msg不为空，则属于报错
|
||||
if (data.msg) {
|
||||
this.transText = data.msg;
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
//结束录音
|
||||
stopVoiceToText() {
|
||||
//你调这个方法后，安卓的回调会先1007，再1009 ios是 1007 1006 1009 1010
|
||||
sr.stopListening();
|
||||
},
|
||||
start(e) {
|
||||
// console.log(e.touches[0].pageX)
|
||||
|
||||
this.onFeedTap()
|
||||
this.touchT = new Date().getTime();
|
||||
this.islong = true
|
||||
this.risshow = false
|
||||
this.$refs.popup.open('center')
|
||||
// 限制时长
|
||||
this.timer = setInterval(() => {
|
||||
this.num++
|
||||
}, 1000)
|
||||
this.btnStatus = 1
|
||||
recorderManager.start({
|
||||
//时长5分钟,单位毫秒
|
||||
duration: 300000,
|
||||
|
||||
// format: "pcm",
|
||||
});
|
||||
|
||||
this.touchStartX = e.touches[0].pageX; // 获取触摸时的原点
|
||||
this.touchStartY = e.touches[0].pageY; // 获取触摸时的原点
|
||||
clearTimeout(this.timer); //再次清空定时器，防止重复注册定时器
|
||||
let that=this
|
||||
this.timer = setTimeout(function() {
|
||||
//执行的代码块
|
||||
// alert("执行了一次长按事件！！！")
|
||||
that.onFeedTap()
|
||||
|
||||
that.islong = true
|
||||
that.risshow = false
|
||||
that.$refs.popup.open('center')
|
||||
that.btnStatus = 1
|
||||
that.voiceToText()
|
||||
|
||||
}.bind(this), 1500);
|
||||
|
||||
},
|
||||
move(e) {
|
||||
|
||||
let that = this;
|
||||
let moveX = this.touchMoveX - e.touches[0].pageX;
|
||||
let moveY = this.touchMoveY - e.touches[0].pageY;
|
||||
// console.log(-115 > moveX && -240 < moveX,moveY)
|
||||
let platform = uni.getSystemInfoSync().platform;
|
||||
if (platform === 'ios') {
|
||||
if (-115 > moveX && -240 < moveX && moveY < -620 && moveY > -730) {
|
||||
this.risshow = true
|
||||
this.deletespeech()
|
||||
|
||||
} else {
|
||||
this.risshow = false
|
||||
}
|
||||
} else {
|
||||
|
||||
if (-115 > moveX && -240 < moveX && moveY < -359 && moveY > -480) {
|
||||
|
||||
this.risshow = true
|
||||
this.deletespeech()
|
||||
} else {
|
||||
this.risshow = false
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
end() {
|
||||
|
||||
|
||||
|
||||
this.touchE = new Date().getTime();
|
||||
|
||||
if (this.islong) {
|
||||
this.closePop()
|
||||
|
||||
this.islong = false
|
||||
clearInterval(this.timer) //清空定时器，防止重复注册定时器
|
||||
this.btnStatus = 0;
|
||||
this.stopVoiceToText()
|
||||
this.num = 0
|
||||
clearInterval(this.timer)
|
||||
this.btnStatus = 0
|
||||
recorderManager.stop();
|
||||
|
||||
// this.closePop()
|
||||
if (this.risshow == false && this.touchE - this.touchT > 3000) {
|
||||
let data = {
|
||||
"id": '@',
|
||||
"content": '加载完毕',
|
||||
"type": 2,
|
||||
}
|
||||
this.talkList.push(data);
|
||||
|
||||
// 异步,解决录音结束后,路径没赋值就传值,导致的路径为空
|
||||
setTimeout(() => {
|
||||
let obj = {
|
||||
status: false,
|
||||
path: [{
|
||||
src: this.voicePath,
|
||||
switchStatus: false,
|
||||
soundTime: this.num
|
||||
}]
|
||||
}
|
||||
|
||||
if (this.voicePath.length > 0 && this.risshow == false) {
|
||||
// this.huashow=true
|
||||
this.TabItemTap()
|
||||
|
||||
|
||||
throttle(this.uploadFile(this.voicePath), 1000)
|
||||
|
||||
}
|
||||
|
||||
this.num = 0
|
||||
}, 500)
|
||||
|
||||
} else {
|
||||
if (!this.risshow) {
|
||||
uni.showModal({
|
||||
title: "录音时长不超过3s"
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -778,10 +965,11 @@
|
|||
this.maskShow = false
|
||||
this.isshow = true
|
||||
},
|
||||
//音频播放
|
||||
//分段音频播放
|
||||
|
||||
palyaudio1(item, i) {
|
||||
this.palystatus = !this.palystatus
|
||||
|
||||
|
||||
console.log(this.audio_file, '111')
|
||||
if (!this.palystatus) {
|
||||
|
||||
|
|
@ -803,24 +991,59 @@
|
|||
},
|
||||
//音频播放
|
||||
|
||||
palyaudio(item, i) {
|
||||
this.palystatus = !this.palystatus
|
||||
if (!this.palystatus) {
|
||||
innerAudioContext.src = item.audio_file;
|
||||
palyaudio(items, i) {
|
||||
|
||||
// console.log(this.talkList,items.audio_file,'000000')
|
||||
if (this.audioContext) {
|
||||
// 停止上一段对话内容的播放
|
||||
this.audioContext.stop();
|
||||
this.audioContext = null;
|
||||
}
|
||||
|
||||
this.talkList.forEach((item, index) => {
|
||||
if (index != i) {
|
||||
item.playStatus = true
|
||||
|
||||
}
|
||||
// item.playStatus = (index == i);
|
||||
});
|
||||
this.$forceUpdate()
|
||||
|
||||
this.talkList[i].playStatus = !this.talkList[i].playStatus
|
||||
|
||||
if (!this.talkList[i].playStatus) {
|
||||
|
||||
if(items.audio_file.length>0){
|
||||
innerAudioContext.src = items.audio_file;
|
||||
innerAudioContext.play()
|
||||
this.talkList[i].playStatus = false
|
||||
}else{
|
||||
this.talkList[i].playStatus = true
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
innerAudioContext.pause()
|
||||
this.talkList[i].playStatus = true
|
||||
this.$forceUpdate()
|
||||
|
||||
}
|
||||
innerAudioContext.onError((res) => {
|
||||
console.log(res.errMsg);
|
||||
console.log(res.errCode);
|
||||
this.palystatus = true
|
||||
this.talkList[i].playStatus = true
|
||||
this.$forceUpdate()
|
||||
innerAudioContext.destroy()
|
||||
});
|
||||
|
||||
innerAudioContext.onEnded((res) => {
|
||||
this.palystatus = true
|
||||
});
|
||||
|
||||
this.talkList[i].playStatus = true
|
||||
this.$forceUpdate()
|
||||
|
||||
});
|
||||
this.audioContext = innerAudioContext;
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
|
||||
|
|
@ -957,8 +1180,11 @@
|
|||
},
|
||||
// 关闭连接
|
||||
closeSocketTask() {
|
||||
|
||||
try {
|
||||
this.talkList = this.talkList.filter(item => item.id !== '@');
|
||||
clearInterval(this.timer);
|
||||
this.talkList[this.talkList.length - 1].audio_file=''
|
||||
this.talkList[this.talkList.length - 1].content = this.c_content + '';
|
||||
// console.log(this.talkList[this.talkList.length - 1].content);
|
||||
// this.c_content = '';
|
||||
|
|
@ -974,36 +1200,10 @@
|
|||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
move(e) {
|
||||
|
||||
let that = this;
|
||||
let moveX = this.touchMoveX - e.touches[0].pageX;
|
||||
let moveY = this.touchMoveY - e.touches[0].pageY;
|
||||
// console.log(-115 > moveX && -240 < moveX,moveY)
|
||||
let platform = uni.getSystemInfoSync().platform;
|
||||
if (platform === 'ios') {
|
||||
if (-115 > moveX && -240 < moveX && moveY < -620 && moveY > -730) {
|
||||
this.risshow = true
|
||||
this.deletespeech()
|
||||
|
||||
} else {
|
||||
this.risshow = false
|
||||
}
|
||||
} else {
|
||||
|
||||
|
||||
if (-115 > moveX && -240 < moveX && moveY < -359 && moveY > -480) {
|
||||
|
||||
this.risshow = true
|
||||
|
||||
this.deletespeech()
|
||||
} else {
|
||||
this.risshow = false
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// 发送信息
|
||||
send() {
|
||||
if (!this.content) {
|
||||
|
|
@ -1013,14 +1213,16 @@
|
|||
})
|
||||
return;
|
||||
}
|
||||
this.showStop = true;
|
||||
|
||||
|
||||
// 将当前发送信息 添加到消息列表。
|
||||
let data = {
|
||||
"id": new Date().getTime(),
|
||||
"content": this.content,
|
||||
'Image': this.Imageurl,
|
||||
"type": 1,
|
||||
// "pic": this.avatar
|
||||
"pic": this.avatarType
|
||||
"pic": this.avatar
|
||||
}
|
||||
// console.log(data);
|
||||
this.TEXT = this.content;
|
||||
|
|
@ -1028,6 +1230,52 @@
|
|||
this.talkList.push({
|
||||
"id": new Date().getTime(),
|
||||
"content": '',
|
||||
'Image': '',
|
||||
"type": 2,
|
||||
// "pic": this.avatarType
|
||||
});
|
||||
this.n_content = '';
|
||||
this.c_content = '';
|
||||
this.socketing = true;
|
||||
// return ;
|
||||
this.$nextTick(() => {
|
||||
// 清空内容框中的内容
|
||||
this.content = '';
|
||||
// uni.pageScrollTo({
|
||||
// scrollTop: 999999, // 设置一个超大值，以保证滚动条滚动到底部
|
||||
// duration: 0
|
||||
// });
|
||||
})
|
||||
this.sendToSpark();
|
||||
|
||||
|
||||
},
|
||||
|
||||
send1() {
|
||||
if (!this.content1) {
|
||||
uni.showToast({
|
||||
title: '请重新上传图片',
|
||||
icon: 'none'
|
||||
})
|
||||
return;
|
||||
}
|
||||
this.showStop = true;
|
||||
// 将当前发送信息 添加到消息列表。
|
||||
let data = {
|
||||
"id": new Date().getTime(),
|
||||
"content": this.content1,
|
||||
'Image': this.Imageurl,
|
||||
"type": 3,
|
||||
// "pic": this.avatar
|
||||
"pic": this.avatar
|
||||
}
|
||||
// console.log(data);
|
||||
this.TEXT = this.content1;
|
||||
this.talkList.push(data);
|
||||
this.talkList.push({
|
||||
"id": new Date().getTime(),
|
||||
"content": '',
|
||||
'Image': '',
|
||||
"type": 2,
|
||||
// "pic": this.avatarType
|
||||
});
|
||||
|
|
@ -1087,6 +1335,7 @@
|
|||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
if (this.historyTextList.length > 9) this.params = JSON.parse(JSON.stringify(this
|
||||
.historyTextList
|
||||
.splice(-9)));
|
||||
|
|
@ -1109,10 +1358,17 @@
|
|||
let dataArray = obj.payload.choices.text;
|
||||
for (let i = 0; i < dataArray.length; i++) {
|
||||
this.talkList[this.talkList.length - 1].content += dataArray[i].content;
|
||||
this.talkList[this.talkList.length - 1].playStatus = true;
|
||||
this.n_content = this.talkList[this.talkList.length - 1].content;
|
||||
realThis.tempRes = realThis.tempRes + dataArray[i].content
|
||||
|
||||
}
|
||||
if(this.n_content.length>0){
|
||||
this.nums = this.talkList.length - 1
|
||||
this.txtspeech(this.n_content, this.talkList.length -
|
||||
1)
|
||||
this.showStop = true;
|
||||
}
|
||||
this.cavshare(this.talkList)
|
||||
let temp = JSON.parse(res.data)
|
||||
// console.log("0726",temp.header.code)
|
||||
|
|
@ -1136,9 +1392,7 @@
|
|||
"role": "assistant",
|
||||
"content": this.tempRes
|
||||
})
|
||||
this.nums = this.talkList.length - 1
|
||||
this.txtspeech(this.n_content, this.talkList.length -
|
||||
1)
|
||||
|
||||
setTimeout(() => {
|
||||
let that = this
|
||||
realThis.socketTask.close({
|
||||
|
|
@ -1222,7 +1476,7 @@
|
|||
page {
|
||||
// background-color: #f5f5f5;
|
||||
height: 100vh;
|
||||
// background: url('@/static/icon/bg1.png') no-repeat;
|
||||
background: url('@/static/icon/bg1.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -1339,7 +1593,7 @@
|
|||
width: 100%;
|
||||
padding-top: var(--status-bar-height);
|
||||
padding-bottom: 30rpx;
|
||||
// background: url('@/static/icon/bg1.png');
|
||||
background: url('@/static/icon/bg1.png');
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
|
|
|
|||
Loading…
Reference in New Issue