|
|
<template>
|
|
|
<view>
|
|
|
<uni-popup
|
|
|
ref="popup"
|
|
|
background-color="#fff"
|
|
|
type="left"
|
|
|
class="history-popup"
|
|
|
@change="changeShow"
|
|
|
>
|
|
|
<view class="drawer-mask" :style="{paddingTop : statusBarHeight + 'px'}">
|
|
|
<view class="drawer">
|
|
|
<scroll-view class="drawer-scroll" scroll-y show-scrollbar="false">
|
|
|
<view v-for="g in historyGroups" :key="g.date" class="drawer-group">
|
|
|
<view class="drawer-date">{{ g.date }}</view>
|
|
|
<view
|
|
|
v-for="(t, idx) in g.items"
|
|
|
:key="idx"
|
|
|
class="drawer-item overflow-one"
|
|
|
@tap="onHistoryItemTap(t)"
|
|
|
@longpress="onLongPressHistory(t)"
|
|
|
>
|
|
|
{{ t }}
|
|
|
</view>
|
|
|
<view class="drawer-divider" />
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
<view class="drawer-footer">
|
|
|
<view @tap="onSettingTap">
|
|
|
<text class="user-icon">👤</text>
|
|
|
<text class="user-name">用户</text>
|
|
|
</view>
|
|
|
<view class="footer-gear" @tap="clearAllHistory">
|
|
|
<uni-icons type="trash" size="25" />
|
|
|
️</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
props : {
|
|
|
historyGroups : {
|
|
|
type : Array,
|
|
|
default() {
|
|
|
return []
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
statusBarHeight : 0
|
|
|
}
|
|
|
},
|
|
|
async mounted(){
|
|
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight / 2;
|
|
|
},
|
|
|
methods : {
|
|
|
onHistoryItemTap(text){
|
|
|
this.$emit('onHistoryItemTap',text)
|
|
|
},
|
|
|
onLongPressHistory(text) {
|
|
|
uni.showModal({
|
|
|
title: "删除记录",
|
|
|
content: "确定删除这条对话记录？",
|
|
|
success: (res) => {
|
|
|
if (res.confirm) {
|
|
|
this.$emit('removeFromHistory',text)
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
close() {
|
|
|
this.$refs.popup.close()
|
|
|
},
|
|
|
open() {
|
|
|
this.$refs.popup.open()
|
|
|
},
|
|
|
changeShow(e) {
|
|
|
this.$emit('changeShow',e.show)
|
|
|
},
|
|
|
clearAllHistory(){
|
|
|
this.$emit('clearAllHistory')
|
|
|
},
|
|
|
onSettingTap() {
|
|
|
uni.navigateTo({
|
|
|
url: "/pages/setting/index",
|
|
|
});
|
|
|
this.close();
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.history-popup{
|
|
|
z-index: 99999;
|
|
|
}
|
|
|
|
|
|
.drawer-mask {
|
|
|
width: 75vw;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
|
|
|
.drawer {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
background: #fff;
|
|
|
border-top-right-radius: 8px;
|
|
|
border-bottom-right-radius: 8px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.drawer.show {
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
|
|
|
.drawer-scroll {
|
|
|
height: calc(100vh - 64px);
|
|
|
padding: 12px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.drawer-group {
|
|
|
padding: 10px 8px 0;
|
|
|
}
|
|
|
|
|
|
.drawer-date {
|
|
|
color: #9aa3b2;
|
|
|
font-size: 14px;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
.drawer-item {
|
|
|
color: #333;
|
|
|
font-size: 16px;
|
|
|
line-height: 20px;
|
|
|
margin: 12px 0;
|
|
|
}
|
|
|
|
|
|
.drawer-divider {
|
|
|
height: 1px;
|
|
|
background: #eeeeee;
|
|
|
margin: 12px 0;
|
|
|
}
|
|
|
|
|
|
.drawer-footer {
|
|
|
padding: 12px 20px;
|
|
|
border-top: 1px solid #eeeeee;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.user-icon {
|
|
|
width: 24px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.user-name {
|
|
|
flex: 1;
|
|
|
font-size: 14px;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.footer-gear {
|
|
|
width: 24px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
// ::v-deep .drawer-scroll {
|
|
|
|
|
|
// }
|
|
|
</style>
|