|
@@ -1,257 +1,237 @@
|
|
|
-<template>
|
|
|
- <view class="drawer-content">
|
|
|
- <!--右抽屉-->
|
|
|
- <tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
|
|
|
- <view
|
|
|
- class="drawer-container clearfix"
|
|
|
- scroll-y
|
|
|
- :style="{
|
|
|
- paddingTop: CustomBar - StatusBar + 8 + 'px',
|
|
|
- paddingBottom: isIphoneX ? '180rpx' : '146rpx'
|
|
|
- }"
|
|
|
- >
|
|
|
- <scroll-view class="tui-drawer-scroll" scroll-y :style="{ height: drawerH + 'px' }">
|
|
|
-
|
|
|
- </scroll-view>
|
|
|
- <view class="drawer-input btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
|
|
|
- <view class="drawer-btn clear" @click="closeDrawer">取消</view>
|
|
|
- <view class="drawer-btn comfrim" @click="handSearchConfirm">确定</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </tui-drawer>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { mapState, mapMutations } from 'vuex'
|
|
|
-export default {
|
|
|
- name: 'rightDrawer',
|
|
|
- props: {
|
|
|
- rightDrawer: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- current:{
|
|
|
- type:Number
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- date: currentDate,
|
|
|
- CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
- StatusBar: this.StatusBar,
|
|
|
- isIphoneX: this.$store.state.isIphoneX,
|
|
|
- height: 0,
|
|
|
- drawerH: 0, // 抽屉内部scrollview高度
|
|
|
- list: [],
|
|
|
- chatHistoryParams: {
|
|
|
- userId: '',
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.setScrollHeight()
|
|
|
- },
|
|
|
- computed: {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async userNewChatHistory() {
|
|
|
- //获取组员协销列表
|
|
|
- try{
|
|
|
- const userInfo = await this.$api.getStorage()
|
|
|
- this.chatHistoryParams.userId = userInfo.userId
|
|
|
- const res = await this.UserService.userNewChatHistory({ spId: userInfo.serviceProviderId })
|
|
|
- this.list = res.data
|
|
|
- }catch(e){
|
|
|
- console.log('=========>获取AI记录异常')
|
|
|
- }
|
|
|
- },
|
|
|
- closeDrawer() {
|
|
|
- this.$parent.rightDrawer = false
|
|
|
- },
|
|
|
- handSearchConfirm() {
|
|
|
- //确定筛选
|
|
|
- this.$emit('handSearchConfirm', this.queryData)
|
|
|
- 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-color: #ffffff;
|
|
|
- .drawer-title {
|
|
|
- width: 100%;
|
|
|
- height: 72rpx;
|
|
|
- line-height: 72rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 30rpx;
|
|
|
- float: left;
|
|
|
- background-color: #f7f7f7;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #333333;
|
|
|
- font-weight: bold;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .drawer-main {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- float: left;
|
|
|
- .drawer-main-name {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- text-align: left;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #333333;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 20rpx;
|
|
|
- font-weight: bold;
|
|
|
- .small{
|
|
|
- font-weight: normal;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- .drawer-main-time{
|
|
|
- width: 100%;
|
|
|
- height: 56rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- .line{
|
|
|
- color: #999999;
|
|
|
- float: left;
|
|
|
- line-height: 56rpx;
|
|
|
- }
|
|
|
- .drawer-main-time-input{
|
|
|
- width: 228rpx;
|
|
|
- height: 56rpx;
|
|
|
- background: #F7F7F7;
|
|
|
- border-radius: 28rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 20rpx;
|
|
|
- line-height: 56rpx;
|
|
|
- float: left;
|
|
|
- margin: 0 20rpx;
|
|
|
- position: relative;
|
|
|
- .input-text{
|
|
|
- display: block;
|
|
|
- height: 56rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- .icon-riqi{
|
|
|
- color: #FF5B00;
|
|
|
- display: block;
|
|
|
- width: 40rpx;
|
|
|
- height: 56rpx;
|
|
|
- position: absolute;
|
|
|
- right: 10rpx;
|
|
|
- top: 0;
|
|
|
- line-height: 56rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .drawer-main-radiov {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 20rpx;
|
|
|
- .drawer-main-radio {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 10rpx;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
- border-radius: 6rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- position: relative;
|
|
|
- &.btn {
|
|
|
- border: none;
|
|
|
- margin-top: 40rpx;
|
|
|
- }
|
|
|
- .input {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- float: left;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #333333;
|
|
|
- padding: 0 10rpx;
|
|
|
- padding-right: 68rpx;
|
|
|
- }
|
|
|
- .iconfont {
|
|
|
- width: 50rpx;
|
|
|
- height: 80rpx;
|
|
|
- display: block;
|
|
|
- line-height: 80rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #999999;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .drawer-input {
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 24rpx 10rpx 0 10rpx;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
- border-radius: 4rpx;
|
|
|
- position: relative;
|
|
|
- background-color: #ffffff;
|
|
|
- &.btn {
|
|
|
- border: none;
|
|
|
- display: flex;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- }
|
|
|
- .drawer-btn {
|
|
|
- width: 210rpx;
|
|
|
- height: 84rpx;
|
|
|
- border-radius: 42rpx;
|
|
|
- background: $btn-confirm;
|
|
|
- line-height: 84rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #ffffff;
|
|
|
- flex: 1;
|
|
|
- margin: 0 10rpx;
|
|
|
- &.comfrim {
|
|
|
- background: $btn-confirm;
|
|
|
- }
|
|
|
- &.clear {
|
|
|
- background: #ffe6dc;
|
|
|
- color: $color-system;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+<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>
|