<template> <view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}"> <image class="topbg" src="http://106.54.209.120:8188/static/home_topbg.png"></image> <template v-if="list.length"> <div class="list" :style="{'margin-top':(360-mt-61)+'px'}"> <u-list> <u-list-item v-for="(item, index) in list" :key="index"> <device-box :item="item" :showInfo="true" @unbindSuccess="unbindSuccess"></device-box> </u-list-item> </u-list> </div> </template> <template v-else> <div class="empty box"> <image src="http://106.54.209.120:8188/static/empty_device.png"></image> <p>暂无设备,快去添加开始聊天吧~</p> <div class="zt_btn" @tap="addDevice"> + 添加新设备</div> </div> </template> <cus-tabbar :tabbarIndex="0"></cus-tabbar> <bind-device ref="bdRef"></bind-device> </view> </template> <script> import cusTabbar from '@/components/CusTabbar/index.vue' import bindDevice from '@/components/bindDevice/index.vue' import deviceBox from '@/components/deviceBox/index.vue' export default { components:{ cusTabbar, bindDevice, deviceBox }, data(){ return { list:[], modelMap:new Map() } }, async onShow() { await this.getAgentModelList() this.getDeviceList(); }, async onPullDownRefresh() { await this.getAgentModelList() this.getDeviceList(); }, methods:{ getAgentModelList(){ return new Promise((resolve,reject)=>{ this.$api.get('/agent/template').then(res=>{ if(res.data.code!==0) return this.$showToast(res.data.msg) if(res.data.data.length){ let map = new Map(); res.data.data.forEach(l=>{ map.set(l.systemPrompt,l) }) this.modelMap = map; } resolve() }) }) }, getDeviceList(){ this.$api.get(`/device/bind/${null}`).then(res=>{ if(res.data.code!==0) return this.$showToast(res.data.msg) this.list = res.data.data; this.list.forEach(l=>{ l.roleModelName = this.modelMap.get(l.agent.systemPrompt).agentName; }) }) }, addDevice(){ this.$refs.bdRef.show = true; }, unbindSuccess(){ this.getDeviceList(); } } } </script> <style scoped lang="less"> .tabPage{ background: #FFFFFF; padding-bottom: 192rpx; box-sizing: border-box; .topbg{ width: 100%; height: 720rpx; position: fixed; top: 0; left: 0; } .box{ position: relative; width: calc(100% - 60rpx); background: #FFFFFF; box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.04); border-radius: 32rpx; border: 1rpx solid #D9F159; box-sizing: border-box; } .list{ position: relative; margin: 0 30rpx 0; width: calc(100% - 60rpx); height: calc(100vh - 740rpx); ::v-deep .u-list{ width: 100%; height: 100% !important; } ::v-deep .u-list-item{ width: 100%; } .l_box{ width: 100%; padding: 49rpx 30rpx 40rpx; margin-top: 20rpx; .l_top{ .lt_l{ font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 32rpx; color: #111111; line-height: 40rpx; } .lt_r{ image{ width: 42rpx; height: 42rpx; margin-right: 34rpx; } .ltr_zt{ font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; line-height: 37rpx; padding-left: 22rpx; position: relative; &::before{ content: ''; width: 12rpx; height: 12rpx; border-radius: 50%; position: absolute; left: 0; top: 50%; margin-top: -6rpx; } &.zx{ color: #1B50FF; &::before{ background: #1B50FF; } } &.lx{ color: #C7C7C7; &::before{ background: #C7C7C7; } } } } } .l_content{ border-top: 1rpx solid #E2E2E2; margin-top: 37rpx; padding-top: 36rpx; overflow: hidden; .lc_role{ .lcr_l{ width: 148rpx; height: 148rpx; border-radius: 50%; } .lcr_r{ width: calc(100% - 148rpx); padding-left: 30rpx; box-sizing: border-box; p{ font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 32rpx; color: #111111; line-height: 32rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .text{ font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #7C8592; line-height: 24rpx; margin-top: 24rpx; } } } .lc_info{ margin-top: 36rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #7C8592; line-height: 40rpx; } .lc_btns{ margin-top: 62rpx; margin-left: -1rpx; overflow: hidden; .lcb_pre{ width: calc(100% / 3); height: 37rpx; border-left: 1rpx solid #72832B; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 26rpx; color: #72832B; line-height: 37rpx; text-align: center; } } } } } .empty{ display: flex; flex-direction: column; align-items: center; margin: 392rpx 30rpx 0; padding: 84rpx 40rpx 64rpx; image{ width: 64rpx; height: 66rpx; } p{ font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 30rpx; color: #A6A6A6; line-height: 42rpx; text-align: center; margin-top: 30rpx; } .zt_btn{ margin-top: 80rpx; } } } </style>