2023.11.14
This commit is contained in:
202
pages/index/aikefu.vue
Normal file
202
pages/index/aikefu.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<script setup>
|
||||
// 引入依赖
|
||||
import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
|
||||
import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
|
||||
// import unCombox from '@/uni_modules/uni-combox/components/uni-combox/uni-combox.vue'
|
||||
import { onLoad,onShow } from "@dcloudio/uni-app"
|
||||
import mySwiper from "@/components/mySwiper.vue"
|
||||
import aikefu from "@/components/aikefu.vue"
|
||||
import {ref,onMounted,nextTick,watch,getCurrentInstance} from "vue"
|
||||
import api from '@/api/index.js'
|
||||
import {useStore} from '@/store/index.js'
|
||||
// import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
|
||||
const store = useStore()
|
||||
onLoad((e) => {
|
||||
uni.createSelectorQuery().in(instance).select('.show-part').boundingClientRect((res)=>{
|
||||
w_h.value = res.height
|
||||
// console.log(res)
|
||||
}).exec()
|
||||
})
|
||||
// 变量
|
||||
const w_h = ref(0)
|
||||
const records = ref([
|
||||
{
|
||||
content:'您好，很高兴为您服务！',
|
||||
type:1,//1-客服；2-我
|
||||
}
|
||||
])
|
||||
const scrollContainer = ref()
|
||||
const in_content = ref('')
|
||||
const scrollTop = ref(0.01) //注意：不要设置成0，不然无效
|
||||
const instance = getCurrentInstance(); // 获取组件实例
|
||||
const is_loading = ref(false)
|
||||
// 函数
|
||||
async function sendFunc() {
|
||||
if(is_loading.value) {
|
||||
return
|
||||
}
|
||||
is_loading.value = true
|
||||
if(!in_content.value) {
|
||||
uni.showToast({
|
||||
title:"请填写内容",
|
||||
icon:'error',
|
||||
duration:2000,
|
||||
mask:true
|
||||
})
|
||||
is_loading.value = false
|
||||
return
|
||||
}
|
||||
// 滚动条设置
|
||||
uni.createSelectorQuery().in(instance).select('#scroll-view-content').boundingClientRect((res)=>{
|
||||
let top = res.height-w_h.value+100;
|
||||
if(top>0){
|
||||
scrollTop.value = top;
|
||||
}
|
||||
// console.log(res.height,w_h.value)
|
||||
}).exec()
|
||||
records.value.push({
|
||||
content:in_content.value,
|
||||
type:2
|
||||
})
|
||||
const res = await api.getReply({msg:in_content.value})
|
||||
is_loading.value = false
|
||||
if(res.code === 0) {
|
||||
in_content.value = ''
|
||||
// 判断用户输入的关键字是否有效
|
||||
if(res.data.content) {
|
||||
records.value.push({
|
||||
content:res.data.content,
|
||||
type:1
|
||||
})
|
||||
}
|
||||
else{
|
||||
records.value.push({
|
||||
content:'请输入正确的关键词',
|
||||
type:-1
|
||||
})
|
||||
}
|
||||
}
|
||||
else{
|
||||
uni.showToast({
|
||||
title:res.msg,
|
||||
icon:"error",
|
||||
duration:2000
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view class="aikefuBox page-box page-bg-gray" style="height: 100%;">
|
||||
<!-- 信息展示区域 -->
|
||||
<!-- <view class="ac-part show-part" id="show-part" ref="scrollContainer" :style="{scrollTop:scrollTop}"> -->
|
||||
<scroll-view :scroll-with-animation="true" :scroll-y="true" class="ac-part show-part" scroll-y="true" :scroll-top="scrollTop">
|
||||
<view class="ac-listt-box" id="scroll-view-content">
|
||||
<view class="r_list-card" v-for="(item,i) in records">
|
||||
<view v-if="item.type!=-1" class="r-row" :class="item.type === 1?'row-left':'row-right'">
|
||||
<view class="r-avatar" v-if="item.type === 1">
|
||||
<image src="../../static/kefu.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="r-content" :class="{'r-content-right':item.type==2}">{{item.content}}</view>
|
||||
</view>
|
||||
<!-- 错误提示 -->
|
||||
<view class="r-row wrong-text" v-if="item.type==-1" style="color: #bfbfbf;text-align: center">
|
||||
{{item.content}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- </view> -->
|
||||
<!-- 输入区域 -->
|
||||
<view class="as-part input-part">
|
||||
<view class="input-box">
|
||||
<view class="ib-left">
|
||||
<input v-model="in_content" type="text" placeholder="输入您想咨询的内容">
|
||||
</view>
|
||||
<view class="ib-right">
|
||||
<view class="send_btn" @tap="sendFunc">发送</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.aikefuBox{
|
||||
height: 100%;
|
||||
.show-part{
|
||||
height: 88%;
|
||||
// overflow-y: auto;
|
||||
.ac-listt-box{
|
||||
padding: 20rpx;
|
||||
.r_list-card{
|
||||
margin: 40rpx 0;
|
||||
.r-row{
|
||||
overflow: hidden;
|
||||
.r-avatar{
|
||||
float: left;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
image{
|
||||
width: 100%;
|
||||
}
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.r-content{
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
padding: 20rpx;
|
||||
border-radius:0 20rpx 20rpx 20rpx;
|
||||
box-shadow: 10rpx 10rpx 10rpx #efefef;
|
||||
}
|
||||
.r-content-right{
|
||||
float: right;
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
background-color: #26758d;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-part{
|
||||
height: 12%;
|
||||
background: white;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
.input-box{
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
.ib-left{
|
||||
width: 88%;
|
||||
margin-right: 20rpx;
|
||||
input{
|
||||
width: 100%;
|
||||
border: 2rpx solid #c3c3c3;
|
||||
padding: 10rpx 8rpx;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.ib-right{
|
||||
width: 12%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.send_btn{
|
||||
padding: 10rpx;
|
||||
background: #26758d;
|
||||
color: white;
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ac-part{
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,6 +5,7 @@
|
||||
import unCombox from '@/uni_modules/uni-combox/components/uni-combox/uni-combox.vue'
|
||||
import { onLoad,onShow } from "@dcloudio/uni-app"
|
||||
import mySwiper from "@/components/mySwiper.vue"
|
||||
import aikefu from "@/components/aikefu.vue"
|
||||
import {ref,onMounted,nextTick,watch} from "vue"
|
||||
import api from '@/api/index.js'
|
||||
import {useStore} from '@/store/index.js'
|
||||
@@ -261,6 +262,7 @@
|
||||
<!-- <uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!"
|
||||
placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog> -->
|
||||
</uni-popup>
|
||||
<aikefu />
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -112,7 +112,7 @@
|
||||
// hospitals.value = null
|
||||
}
|
||||
async function sumbmitFunc() {
|
||||
console.log(choosed_h.value,h_info.value,userinfo.value)
|
||||
// console.log(choosed_h.value,h_info.value,userinfo.value)
|
||||
let obj = {
|
||||
id: userinfo.value.userId,
|
||||
// isSurgery: 1, //是否已经手术 0为手术，1已经手术
|
||||
@@ -123,6 +123,7 @@
|
||||
hospitalId:choosed_h.value?.ID
|
||||
}
|
||||
const res = await api.userinfoUpdae(obj)
|
||||
// console.log('res is ',res)
|
||||
if(res.code === 0) {
|
||||
uni.showToast({
|
||||
title:res.msg,
|
||||
|
||||
Reference in New Issue
Block a user