<template>
<view class="gentfiling">
<view class="prompt" v-if="animation">
<section class="dots-container">
<view class="dot"></view>
<view class="dot"></view>
<view class="dot"></view>
<view class="dot"></view>
<view class="dot"></view>
</section>
<text>录音中...</text>
</view>
<!-- 初诊病历 -->
<view class="head">
<view class="item">
初诊病例
</view>
<view class="title">初步诊断</view>
<view class="textarea-post">
<textarea :auto-height="true" v-model="diagnose" class="textarea" :maxlength="-1" placeholder="请输入"/>
<img src="/static/yuy.png" alt="" @click="popupBtn(1)" />
</view>
<view class="title" style="margin-top: 60rpx;">既往史</view>
<view class="textarea-post">
<textarea :auto-height="true" v-model="caseHistory" :maxlength="-1" class="textarea" placeholder="请输入"/>
<img src="/static/yuy.png" alt="" @click="popupBtn(2)" />
</view>
</view>
<!--病历附件 -->
<view class="annex">
<view class="item" style="margin-bottom: 30rpx;" >
病例附件
</view>
<uni-file-picker
title="最多选择9张图片"
v-model="imageValue"
fileMediatype="image"
mode="grid"
limit="9"
@delete="delete1"
@select="select"
@progress="progress"
@success="success"
/>
</view>
<!-- 提交 -->
<view class="bottom">
<button type="default" class="button" @click="extractBtn">提交</button>
</view>
<!-- 抽屉的实现 -->
<uni-popup :mask="true" ref="popup" type="bottom" border-radius="10px 10px 0 0">
<view @touchstart="streamRecord" @touchend="endStreamRecord" style="height: 100rpx;width: 100rpx; margin: 100rpx auto; display: flex; align-items: center; justify-content: center; border-radius: 50%;background-color: #fff;">
<img style="height: 60rpx; width: 60rpx;" src="/static/yuy.png" alt="" />
</view>
</uni-popup>
</view>
</template>
<script>
import {request} from '../../request/request.js'
var plugin = requirePlugin("WechatSI")
let manager = plugin.getRecordRecognitionManager()
export default {
data(){
return{
newUrlsArray:[],
animation: false,
imageValue:[],
image:[],
imageString:'',
diagnose:'',
caseHistory:'',
typeIndex:'',
tempFilePaths:[],
userInfo1:{
},
}
},
onLoad({userInfo}) {
this.userInfo1 = JSON.parse(userInfo)
// this.ImageSet(this.userInfo1.img)
this.initRecord()
},
methods:{
popupBtn(type){
this.typeIndex = type
this.$refs.popup.open()
},
// 图片分隔
// ImageSet(img){
// this.newUrlsArray= img.split(',');
// },
// 语音录入
streamRecord: function() {
this.animation = true;
manager.start({
lang: 'zh_CN',
})
},
endStreamRecord: function() {
this.animation = false;
this.$refs.popup.close()
manager.stop()
},
initRecord: function() {
//有新的识别内容返回，则会调用此事件
// 识别结果处理逻辑
const handleRecognitionResult = (text) => {
if (text == '') {
uni.showToast({
icon: 'error',
title: '检测不到语音'
});
return;
}
if (this.typeIndex == 1) {
this.diagnose = text;
} else {
this.caseHistory = text;
}
};
// 有新的识别内容返回，则会调用此事件
manager.onRecognize = (res) => {
let text = res.result;
handleRecognitionResult(text);
};
// 识别结束事件
manager.onStop = (res) => {
let text = res.result;
handleRecognitionResult(text);
};
},
// 图片上传
delete1(e) {
this.tempFilePaths = this.tempFilePaths.filter(ele => ele !== e.tempFilePath);
},
async select(file) {
const tempFilePaths = file.tempFilePaths;
console.log(tempFilePaths[0], 'tempFilePaths');
this.tempFilePaths.push(tempFilePaths[0]);
},
async extractBtn() {
const sex = () =>{
if(this.userInfo1.gender === '男'){
return 0
} else {
return 1
}
}
for (const ele of this.tempFilePaths) {
try {
const loginRes = uni.getStorageSync('loginRes');
const res = await uni.uploadFile({
url: 'http://192.168.0.15:8080/wechat/img/upload',
filePath: ele,
name: 'imgFile',
header: {
"content-type": "multipart/form-data",
'Authorization': JSON.parse(loginRes).access_token
},
formData: {
'imgFile': ele
}
});
const data = JSON.parse(res.data);
console.log(data);
const url = 'http://192.168.0.15:8080/wechat' + data.data;
this.image.push(url);
this.imageString = this.image.join(',');
} catch (err) {
console.error(err);
}
}
const data = {
caseHistory: this.caseHistory,
diagnose: this.diagnose,
img: this.imageString,
id: this.userInfo1.id,
};
try {
await request({ url: '/patient/bookBuilding', method: 'POST', data });
uni.switchTab({
url: '/pages/home/index'
});
} catch (error) {
console.error(error);
}
}
},
}
</script>
<style scoped lang="scss">
.prompt {
width: 100%;
height: 160rpx;
position: fixed;
bottom: 70vh;
z-index: 99;
}
.prompt text {
position: absolute;
bottom: 2px;
color: white;
left: calc(45%);
animation: puls 1.5s infinite ease-in-out;
}
.dots-container {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
width: 45%;
position: absolute;
bottom: 0px;
left: calc(27.5%);
background-color: rgba(0, 0, 0, 0.5);
border-radius: 40rpx;
}
.dot {
height: 28rpx;
width: 28rpx;
margin-right: 20rpx;
border-radius: 20rpx;
background-image: linear-gradient(#5396FF, #AEDAFF);
animation: pulse 1.5s infinite ease-in-out;
}
.dot:last-child {
margin-right: 0;
}
.dot:nth-child(1) {
animation-delay: -0.3s;
}
.dot:nth-child(2) {
animation-delay: -0.1s;
}
.dot:nth-child(3) {
animation-delay: 0.1s;
}
@keyframes pulse {
0% {
transform: scale(0.8);
background-color: #66A3FF;
/* 更改为与.dot背景色相近的颜色 */
box-shadow: 0 0 0 0 rgba(102, 163, 255, 0.7);
/* 使用相同的颜色 */
}
50% {
transform: scale(1.2);
background-color: #ADD8FF;
/* 稍浅的颜色，增加对比度 */
box-shadow: 0 0 0 10px rgba(174, 218, 255, 0);
/* 使用.dot的结束颜色，但透明度为0 */
}
100% {
transform: scale(0.8);
background-color: #66A3FF;
/* 与0%时的颜色相同 */
box-shadow: 0 0 0 0 rgba(102, 163, 255, 0.7);
/* 与0%时的box-shadow相同 */
}
}
@keyframes puls {
0% {
transform: translateY(0px)
}
50% {
transform: translateY(-4px)
}
100% {
transform: translateY(0px)
}
}
.gentfiling{
// padding: 20rpx;
height: 100vh;
width: 100vw;
background-color: #eee;
.bottom{
margin-top: 50rpx;
height: 200rpx;
// background-color: #FFFFFF;
display: flex;
align-items: center;
.button{
width: 721rpx;
height: 100rpx;
background: #5581FF;
box-shadow: 8rpx 0rpx 16rpx 0rpx #2385FF;
border-radius: 44rpx 44rpx 44rpx 44rpx;
color: #FFFFFF;
}
}
.item{
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 400;
font-size: 30rpx;
color: #999999;
line-height: 32rpx;
text-align: left;
font-style: normal;
text-transform: none;
position: relative;
&::before{
content: '';
position: absolute;
top: 3rpx;
left: -20rpx;
width: 7rpx;
height: 30rpx;
background: #5581FF;
border-radius: 4rpx 4rpx 4rpx 4rpx;
}
}
.annex{
margin: 40rpx;
margin-top: 20rpx;
// height: 300rpx;
background: #FFFFFF;
box-shadow: 6rpx 0rpx 34rpx 0rpx #eee;
border-radius: 12rpx 12rpx 12rpx 12rpx;
padding: 40rpx;
}
.head{
margin: 40rpx;
background: #FFFFFF;
box-shadow: 6rpx 0rpx 34rpx 0rpx #eee;
border-radius: 12rpx 12rpx 12rpx 12rpx;
padding: 40rpx;
.title{
font-family: PingFang-SC, PingFang-SC;
font-weight: bold;
font-size: 30rpx;
color: #333333;
margin: 30rpx 0;
font-style: normal;
text-transform: none;
}
.textarea-post{
position: relative;
img{
position: absolute;
right: 0;
top: 23rpx;
width: 50rpx;
height: 50rpx;
}
}
.textarea{
background: #F3F3F3;
width:570rpx;
// height: 150rpx;
padding: 20rpx;
font-family: PingFang-SC, PingFang-SC;
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 0rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.caseHistory{
margin: 40rpx;
margin-top: -60rpx;
// height: 100%;
// height: 300rpx;
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
padding: 40rpx;
.item {
margin-top: 20rpx;
font-family: PingFang-SC, PingFang-SC;
font-weight: 400;
font-size: 24rpx;
color: #333333;
line-height: 36rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
.img{
.title1{
font-family: PingFang-SC, PingFang-SC;
font-weight: bold;
font-size: 30rpx;
color: #333333;
font-style: normal;
text-transform: none;
margin-top: 30rpx;
}
.img-info{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.img-item{
margin-top: 20rpx;
width: 162rpx;
height: 222rpx;
margin: 10rpx;
img{
width: 100%;
height: 90%;
}
view{
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 400;
font-size: 22rpx;
color: #343434;
line-height: 32rpx;
text-align: center;
font-style: normal;
text-transform: none;
}
}
}
}
.title{
font-family: PingFang-SC, PingFang-SC;
font-weight: bold;
font-size: 40rpx;
color: #333333;
font-style: normal;
text-transform: none;
position:relative;
&::before{
content: '';
position: absolute;
top: 10rpx;
left: -15rpx;
width: 6rpx;
height: 37rpx;
background: #5581FF;
border-radius: 4rpx 4rpx 4rpx 4rpx;
}
}
}
}
</style>