chatGpt/components/navbar/navbar.vue

<template>
	<view class="h100 relative">
		<view class="nav h100 relative" :style="{width: barActive ? '520rpx': '0px'}">
			<view class="fff flex p-10" :style="{visibility: barActive ? 'visible' : 'hidden'}">
				<view class="border-info w100 radius p-10 mr-10 flex item-center hover space-nowrap cursor-pointer"
					@click="getNewChat">
					+ New Chat
				</view>
				<view class="border-info radius p-10 flex item-center hover cursor-pointer" @click="getHidden">
					<uni-icons type="bars" size="24" :color="barActive ? '#FFF' : '#000'" />
				</view>
			</view>
			<view class="history-list fff p-10" :style="{visibility: barActive ? 'visible' : 'hidden'}">
				<view style="padding: 0 15px 10px; color: #8E8EA0;">History</view>
				<view :class="['w100 radius p-15 hover cursor-pointer flex item-center content-between', 
					index == active ? 'background-color-active' : '' ]" v-for="(item, index) in list" :key="index"
					@click="getHistory(index)">
					<view>
						{{ item.date }}
					</view>
					<uni-icons v-if="index == active" type="trash" color="#FFF" @click="getDelete(item, index)" />
				</view>
			</view>
			<view class="p-5 absolute b0 w100" style="border-top1px solid #FFF3"
				:style="{visibility: barActive ? 'visible' : 'hidden'}">
				<view class="flex item-center p-10 gap radius">
					<img src="@/static/logo-100.png" width="30" height="30" />
					<view class="space-nowrap overflow-ellipsis overflow-hidden grow fff">
						{{ usernameSimple || '尚未登录' }}
						<view class="fff">
							<text>每日免费剩余额度</text>
							<text>{{ chatAsset.dfn || 0 }}次</text>
						</view>
					</view>
					<!-- <uni-icons type="more-filled" size="24" color="#FFF" @click="getInfo" /> -->
				</view>
			</view>
		</view>
		<view class="cursor-pointer radius p-10 flex item-center hover z-index" style="left: 10px; top: 10px;"
			:style="{display: barActive ? 'none' : 'block', 'position': barActive ? 'relative' : 'absolute'}"
			@click="getHidden">
			<uni-icons type="bars" size="24" :color="barActive ? '#FFF' : '#000'" />
		</view>
	</view>
</template>

<script>
	import {
		msgList
	} from '@/api/chat.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			chatAsset: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				barActive: uni.getStorageSync("barActive") !== '' ? uni.getStorageSync("barActive") : true,
				list: [],
				active: -1,
			}
		},
		computed: {
			...mapGetters([
				'usernameSimple'
			])
		},
		mounted() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				this.list = []
				const dateArr = this.$squni.getStorageSync('chatHistory')
				let arr = []
				if (dateArr.length > 0) {
					dateArr.forEach(i => {
						arr[i.date.substr(0, 10)] = arr[i.date.substr(0, 10)] || []
						arr[i.date.substr(0, 10)].push(i)
					})
					for (let key in arr) {
						let obj = {}
						obj.date = key
						obj.children = arr[key]
						this.list.unshift(obj)
					}
				}
			},

			getHidden() {
				uni.setStorageSync("barActive", this.barActive = this.barActive ? false : true)
			},

			getNewChat() {
				this.active = -1
				msgList().then(res => {
					if (res.code === 20000) {
						this.$emit('click', res.data)
					}
				})
			},

			getHistory(e) {
				this.active = e
				this.$emit('history', this.list[e])
				this.getDetail()
			},

			// 删除历史记录
			getDelete(item, index) {
				this.list.splice(index, 1)
				let storage = this.$squni.getStorageSync('chatHistory').filter(i => i.date.substr(0, 10) !== item.date)
				this.$squni.setStorageSync('chatHistory', storage)
				this.$emit('delete')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		background-color: #202123;
		transition: width 0.2s;
	}

	.history-list {
		height: calc(100% - 130px);
		overflow-y: auto;
	}
</style>