caimei-applets-caimei/pages/user/chats/components/chat-drawer.vue

<template>
    <view class="drawer-content">
        <!--右抽屉-->
        <tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
            <view class="drawer-container clearfix" scroll-y :style="{
					paddingTop: CustomBar + StatusBar/2 + 'px',
					paddingBottom: isIphoneX ? '180rpx' : '146rpx'
				}">
                <scroll-view class="tui-drawer-scroll" scroll-y :style="{ height: drawerH + 'px' }">
                    <view class="cm_ai_container_records">
                        <view class="cm_ai_records_btn">
                            <view class="records_btn" :class="disabled ? 'disabled' : 'show'"
                                @click="handleCreatedChat">
                                <text class="iconfont icon-jiahao"></text>
                                <text>新建对话</text>
                            </view>
                        </view>
                        <view class="cm_ai_records_list">
                            <view class="cm_ai_records_item" v-for="(chat, index) in chatHistory" :key="index"
                                @click="handleChatDetail(chat.id)">
                                <text class="content" v-text="chat.firstQuestion"></text>
                                <text class="time" v-text="chat.addTime"></text>
                            </view>
                        </view>
                    </view>
                </scroll-view>
                <view class="drawer-input btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
                    <view class="drawer-btn clear" @click="closeDrawer">
                        <text class="iconfont icon-iconfontguanbi"></text>
                    </view>
                </view>
            </view>
        </tui-drawer>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    export default {
        name: 'rightDrawer',
        props: {
            rightDrawer: {
                type: Boolean,
                default: false
            },
            probeIndex: {
                type: Number
            }
        },
        data() {
            return {
                CustomBar: this.CustomBar, // 顶部导航栏高度
                StatusBar: this.StatusBar,
                isIphoneX: this.$store.state.isIphoneX,
                height: 0,
                drawerH: 0, // 抽屉内部scrollview高度
                chatHistory: [],
                chatHistoryParams: {
                    userId: '',
                    pageNum: 1,
                    pageSize: 10
                },
            }
        },
        created() {
            this.setScrollHeight()
            this.userNewChatHistory()
        },
        computed: {
            disabled() {
                return !this.probeIndex
            }
        },
        methods: {
            async userNewChatHistory() {
                //获取组员协销列表
                try {
                    const userInfo = await this.$api.getStorage()
                    this.chatHistoryParams.userId = userInfo.userId
                    const res = await this.UserService.userNewChatHistory(this.chatHistoryParams)
                    this.chatHistory = res.data
                } catch (e) {
                    console.log('=========>获取AI记录异常')
                }
            },
            //新建对话
            handleCreatedChat(){
                this.$emit('chat-news')
                this.$parent.rightDrawer = false
            },
            // 查看记录
            handleChatDetail(chatId) {
                this.$emit('chat-detail', chatId)
                this.$parent.rightDrawer = false
            },
            closeDrawer() {
                this.$parent.rightDrawer = false
            },
            setScrollHeight() {
                let obj = {}
                const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
                uni.getSystemInfo({
                    success: res => {
                        this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
                        this.drawerH = res.windowHeight - uni.upx2px(180) - this.height
                    }
                })
                this.windowHeight = windowHeight - 1
                this.scrollHeight = windowHeight - 1
            }
        }
    }
</script>

<style lang="scss">
    /*screen*/
    .drawer-container {
        width: 580rpx;
        height: 100%;
        padding: 80rpx 0;
        overflow: hidden;
        box-sizing: border-box;
        background-image: linear-gradient(180deg, #f0edf7 .03%, #ebeaf5 32.19%, #e8e8f3 68.86%, #e4eaf7 99.12%);

        .cm_ai_container_records {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 0 40rpx;
            flex: 0 0 auto;

            .cm_ai_records_btn {
                padding: 0 50rpx;
                margin-bottom: 12px;
                box-sizing: border-box;
                display: flex;
                justify-content: center;

                .records_btn {
                    width: 100%;
                    height: 80rpx;
                    line-height: 80rpx;
                    flex-shrink: 0;
                    box-sizing: border-box;
                    background-color: rgba(255, 91, 0, 0.05);
                    text-align: center;
                    border-radius: 16rpx;
                    display: flex;
                    justify-content: center;
                    color: #ff5b00 !important;
                    opacity: 1;

                    &.disabled {
                        opacity: 0.7;
                    }

                    &.show:hover {
                        background-color: rgba(255, 91, 0, 0.1);
                    }
                }

            }

            .cm_ai_records_list {
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;

                .cm_ai_records_item {
                    display: flex;
                    align-items: flex-start;
                    height: 88rpx;
                    box-sizing: border-box;
                    flex-direction: row;
                    justify-content: space-between;
                    padding: 0 24rpx;
                    border-radius: 16rpx;
                    background-color: rgba(255,255,255,0.2);
                    margin: 10rpx 0;
                    .content {
                        width: 200rpx;
                        font-size: 30rpx;
                        font-weight: 500;
                        line-height: 88rpx;
                        color: #50525c;
                        display: -webkit-box;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                    }

                    .time {
                        font-size: 24rpx;
                        font-weight: 400;
                        line-height: 88rpx;
                        color: #848691;
                    }
                }
            }
        }
        .drawer-input {
        	width: 100%;
        	float: left;
        	box-sizing: border-box;
        	padding: 24rpx 50rpx 0 50rpx;
        	border: 1px solid rgba(0, 0, 0, 0.2);
        	border-radius: 4rpx;
        	position: relative;
        	&.btn {
        		border: none;
        		display: flex;
        		position: fixed;
        		left: 0;
        		bottom: 0;
        	}
        	.drawer-btn {
        		width: 84rpx;
        		height: 84rpx;
        		border-radius: 42rpx;
        		line-height: 84rpx;
        		text-align: center;
        		margin: 0 auto;
                background-color: rgba(255,255,255,0.4);
                .icon-iconfontguanbi{
                    font-size: $font-size-48;
                    color: #999999;
                }
        		
        	}
        }
    }
</style>