|
|
|
@ -4,7 +4,17 @@ |
|
|
|
<view class="card-box" v-for="(item, index) in list" :key="index"> |
|
|
|
<view class="header"> |
|
|
|
<view class="title">{{item.name}}</view> |
|
|
|
<view class="desc">近30天</view> |
|
|
|
<view class="desc"> |
|
|
|
<view class="bottom-btn" @tap="dropdownTap(index)"> |
|
|
|
{{dropdownName}} |
|
|
|
<uni-icons size="16" type="bottom"></uni-icons> |
|
|
|
</view> |
|
|
|
<view class="down-box" v-if="item.isShowSelect"> |
|
|
|
<view class="row" v-for="(citem, cindex) in dropdownList" :key="cindex" @tap="dropdownItemTap(cindex)"> |
|
|
|
<text :class="params.duration == cindex ? 'activeText' : ''">{{citem}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="content"> |
|
|
|
<view class="info"> |
|
|
|
@ -30,7 +40,7 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="shrink-box" v-if="seemoreFlag == index"> |
|
|
|
<view class="shrink-box" v-if="item.collapse"> |
|
|
|
<view class="row"> |
|
|
|
<view class="left"> |
|
|
|
<view class="title">设备图片：</view> |
|
|
|
@ -86,7 +96,7 @@ |
|
|
|
<view class="see-more"> |
|
|
|
<view class="" @tap="seemoreTap(index)"> |
|
|
|
<text>设备详情</text> |
|
|
|
<image class="icon" :src="!seemoreFlag ? '/static/imgs/client-detail/arrow-up-icon.png' : '/static/imgs/client-detail/arrow-down-icon.png'"></image> |
|
|
|
<image class="icon" :src="item.collapse ? '/static/imgs/client-detail/arrow-up-icon.png' : '/static/imgs/client-detail/arrow-down-icon.png'"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<uGap></uGap> |
|
|
|
@ -103,6 +113,8 @@ export default { |
|
|
|
components: { lvSelect, uGap }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
isShowSelect: false, |
|
|
|
dropdownList: ['近30天','近7天', '今日','全部'], // 0:近30天 1：近7天 2：今日 3：全部 |
|
|
|
option: { |
|
|
|
size: 10, |
|
|
|
auto: true, |
|
|
|
@ -127,6 +139,28 @@ export default { |
|
|
|
onLoad() { |
|
|
|
// this.getList() |
|
|
|
}, |
|
|
|
computed:{ |
|
|
|
dropdownName() { |
|
|
|
let text = '全部' |
|
|
|
switch (this.params.duration){ |
|
|
|
case 0: |
|
|
|
text = '近30天' |
|
|
|
break; |
|
|
|
case 1: |
|
|
|
text = '近7天' |
|
|
|
break; |
|
|
|
case 2: |
|
|
|
text = '今日' |
|
|
|
break; |
|
|
|
case 3: |
|
|
|
text = '全部' |
|
|
|
break; |
|
|
|
default: |
|
|
|
break; |
|
|
|
} |
|
|
|
return text |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
previewImg(img, list) { |
|
|
|
uni.previewImage({ |
|
|
|
@ -138,7 +172,11 @@ export default { |
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
getDeviceInfo({ ...this.params, ...this.pagination }) |
|
|
|
.then(res => { |
|
|
|
console.log('设备信息', res) |
|
|
|
res.records.forEach(el => { |
|
|
|
el.collapse = false |
|
|
|
el.isShowSelect = false |
|
|
|
}) |
|
|
|
// console.log('设备信息', res.records) |
|
|
|
if (res) { |
|
|
|
if (this.pagination.pageNum == 1) { |
|
|
|
this.list = res.records |
|
|
|
@ -156,7 +194,19 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
seemoreTap(index) { |
|
|
|
this.seemoreFlag = index |
|
|
|
this.list[index].collapse = !this.list[index].collapse |
|
|
|
}, |
|
|
|
dropdownTap(index) { |
|
|
|
this.list[index].isShowSelect = !this.list[index].isShowSelect |
|
|
|
this.list.forEach((el, i) => { |
|
|
|
if(i !== index) { |
|
|
|
this.list[i].isShowSelect = false |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
dropdownItemTap(index) { |
|
|
|
this.params.duration = index |
|
|
|
this.downCallback() |
|
|
|
}, |
|
|
|
downCallback() { |
|
|
|
this.pagination.pageNum = 1 |
|
|
|
@ -205,6 +255,51 @@ export default { |
|
|
|
letter-spacing: 0; |
|
|
|
text-align: right; |
|
|
|
font-weight: 400; |
|
|
|
.bottom-btn { |
|
|
|
position: relative; |
|
|
|
z-index: 8; |
|
|
|
|
|
|
|
} |
|
|
|
.down-box { |
|
|
|
position: absolute; |
|
|
|
margin-top: 14rpx; |
|
|
|
text-align: center; |
|
|
|
right: 15rpx; |
|
|
|
z-index: 10; |
|
|
|
width: 204rpx; |
|
|
|
height: 218.9rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 6rpx; |
|
|
|
padding: 0rpx 30rpx; |
|
|
|
.row { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 54rpx; |
|
|
|
font-size: 22rpx; |
|
|
|
color: #323233; |
|
|
|
text-align: center; |
|
|
|
font-weight: 400; |
|
|
|
border-bottom: 1.6rpx solid #EBEDF0; |
|
|
|
|
|
|
|
} |
|
|
|
.activeText { |
|
|
|
color: #007AFF; |
|
|
|
} |
|
|
|
} |
|
|
|
.down-box::before{ |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
width: 0; |
|
|
|
height: 0; |
|
|
|
border-bottom: solid 12rpx #ffffff; |
|
|
|
border-right: solid 12rpx transparent; |
|
|
|
border-left: solid 12rpx transparent; |
|
|
|
left: 80%; |
|
|
|
top: -12rpx; |
|
|
|
margin-left: -12rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.content { |
|
|
|
|
杨阁辉
4 years ago