上传代码
This commit is contained in:
264
uniapp04/pages/talk/talk.vue
Normal file
264
uniapp04/pages/talk/talk.vue
Normal file
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<view class="chat">
|
||||
<scroll-view :style="{ height: `${windowHeight}rpx` }" id="scrollview" scroll-y="true" :scroll-top="scrollTop"
|
||||
:scroll-with-animation="true" class="scroll-view">
|
||||
|
||||
<view id="msglistview" class="chat-body">
|
||||
|
||||
<view v-for="(item, index) in msgList" :key="index">
|
||||
|
||||
<view class="item self" v-if="item.userContent != ''">
|
||||
|
||||
<view class="content right">
|
||||
{{ item.userContent }}
|
||||
</view>
|
||||
|
||||
<view class="avatar">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="item Ai" v-if="item.botContent != ''">
|
||||
|
||||
<view class="avatar">
|
||||
</view>
|
||||
|
||||
<view class="content left">
|
||||
{{ item.botContent }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="chat-bottom">
|
||||
<view class="send-msg">
|
||||
<view class="uni-textarea">
|
||||
<textarea v-model="chatMsg" maxlength="300" :show-confirm-bar="false" auto-height></textarea>
|
||||
</view>
|
||||
<button @click="handleSend" class="send-btn">发送</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
scrollTop: 0,
|
||||
userId: '',
|
||||
|
||||
chatMsg: "",
|
||||
msgList: [
|
||||
{
|
||||
botContent: "商家正在积极出餐吗，请问有什么问题嘛？",
|
||||
recordId: 0,
|
||||
titleId: 0,
|
||||
userContent: "",
|
||||
userId: 0
|
||||
},
|
||||
{
|
||||
botContent: "",
|
||||
recordId: 0,
|
||||
titleId: 0,
|
||||
userContent: "不要香菜",
|
||||
userId: 0
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
windowHeight() {
|
||||
return this.rpxTopx(uni.getSystemInfoSync().windowHeight)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
rpxTopx(px) {
|
||||
let deviceWidth = uni.getSystemInfoSync().windowWidth
|
||||
let rpx = (750 / deviceWidth) * Number(px)
|
||||
return Math.floor(rpx)
|
||||
},
|
||||
|
||||
handleSend() {
|
||||
|
||||
if (!this.chatMsg || !/^\s+$/.test(this.chatMsg)) {
|
||||
let obj = {
|
||||
botContent: "",
|
||||
recordId: 0,
|
||||
titleId: 0,
|
||||
userContent: this.chatMsg,
|
||||
userId: 0
|
||||
}
|
||||
this.msgList.push(obj);
|
||||
this.chatMsg = '';
|
||||
} else {
|
||||
this.$modal.showToast('不能发送空白消息')
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
$chatContentbgc: #4095e5;
|
||||
$sendBtnbgc: #4095e5;
|
||||
|
||||
view,
|
||||
button,
|
||||
text,
|
||||
input,
|
||||
textarea {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.chat {
|
||||
.scroll-view {
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
|
||||
background-color: #F6F6F6;
|
||||
|
||||
.chat-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 23rpx;
|
||||
|
||||
|
||||
.self {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 23rpx 30rpx;
|
||||
|
||||
.right {
|
||||
background-color: $chatContentbgc;
|
||||
}
|
||||
|
||||
.left {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.right::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: 100%;
|
||||
top: 10px;
|
||||
border: 12rpx solid transparent;
|
||||
border-left: 12rpx solid $chatContentbgc;
|
||||
}
|
||||
|
||||
.left::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 10px;
|
||||
right: 100%;
|
||||
border: 12rpx solid transparent;
|
||||
border-right: 12rpx solid #FFFFFF;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
max-width: 486rpx;
|
||||
border-radius: 8rpx;
|
||||
word-wrap: break-word;
|
||||
padding: 24rpx 24rpx;
|
||||
margin: 0 24rpx;
|
||||
border-radius: 5px;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 78rpx;
|
||||
height: 78rpx;
|
||||
background-image: url("https://pic2.zhimg.com/v2-45e3ca228438d1e4c3e98e38c8f8e4a4_r.jpg?source=1940ef5c");
|
||||
background-size: contain;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-bottom {
|
||||
width: 100%;
|
||||
height: 177rpx;
|
||||
background: #F4F5F7;
|
||||
|
||||
.send-msg {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 16rpx 30rpx;
|
||||
width: 100%;
|
||||
min-height: 177rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background: #EDEDED;
|
||||
}
|
||||
|
||||
.uni-textarea {
|
||||
padding-bottom: 70rpx;
|
||||
|
||||
textarea {
|
||||
width: 537rpx;
|
||||
min-height: 75rpx;
|
||||
max-height: 500rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
color: #333333;
|
||||
line-height: 43rpx;
|
||||
padding: 5rpx 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 70rpx;
|
||||
margin-left: 25rpx;
|
||||
width: 128rpx;
|
||||
height: 75rpx;
|
||||
background: $sendBtnbgc;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user