192 lines
4.8 KiB
Vue
192 lines
4.8 KiB
Vue
<template>
|
||
<view class="aircraft-equipment" :style="{backgroundImage: `url(${fileUrl+banner})`}">
|
||
<view class="equipment-content">
|
||
<view class="top-abs" :style="{marginTop: CustomBar+'px'}">
|
||
我的设备
|
||
</view>
|
||
<view class="device-item" v-for="(item, index) in deviceList" :key="index">
|
||
<u-image class="device-image" :src="item.deviceImg||(ordFileUrl+defaultIcon)"
|
||
mode="widthFix" @click="preview(item.image||(ordFileUrl+defaultIcon))" />
|
||
<view class="device-info">
|
||
<text class="device-name">{{ item.name }}</text>
|
||
<text class="device-model">{{ item.model }}</text>
|
||
</view>
|
||
<u-button class="detail-btn" type="warning" :custom-style="customStyle"
|
||
:hair-line="false" @click="goToDetail(item.id)">查看详情</u-button>
|
||
</view>
|
||
<u-loadmore v-if="deviceList.length>0" @loadmore="getMore" :status="form.isFinish" color="#333333" marginTop="30" marginBottom="20" />
|
||
<view class="device-empty" :style="{marginTop: CustomBar+100+'px'}" v-else>
|
||
<u-empty text="暂无设备" mode="list"
|
||
src="/static/empty.png" icon-size="300" font-size="40"
|
||
margin-top="250"></u-empty>
|
||
</view>
|
||
</view>
|
||
<u-toast ref="uToast"></u-toast>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import configService from '@/common/config.service.js';
|
||
export default {
|
||
// #ifdef MP
|
||
options: {
|
||
styleIsolation: "shared"
|
||
},
|
||
// #endif
|
||
data() {
|
||
return {
|
||
// #ifdef MP
|
||
// 微信小程序自定义导航栏参数
|
||
StatusBar: this.StatusBar || 0,
|
||
CustomBar: this.CustomBar || 0,
|
||
// #endif
|
||
fileUrl: configService.fileUrl + 'aerocraft/equipment/', //静态资源基础路径
|
||
ordFileUrl: configService.fileUrl + 'aerocraft/order/',
|
||
// 飞行任务默认图片
|
||
defaultIcon: 'default.png',
|
||
banner: "devicebg.png",
|
||
deviceList: [],
|
||
// 翻页参数
|
||
form:{
|
||
current: 1,
|
||
size: 10,
|
||
// 是否结束——loadmore加载更多，loading加载中，nomore无更多
|
||
isFinish: 'nomore',
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
// 初始化
|
||
async init() {
|
||
this.form = {size: 10,current: 1,isFinish: 'nomore'};
|
||
await this.getDeviceList();
|
||
},
|
||
async getDeviceList(){
|
||
this.form.isFinish = 'loading';
|
||
let deviceRes = await this.$api.getDevices(this.form);
|
||
if(deviceRes){
|
||
const { records, size, total, current } = deviceRes;
|
||
if(current == 1) this.deviceList = records || [];
|
||
else this.deviceList.push(...records);
|
||
this.form.isFinish = size*current >= total ? 'nomore' : 'loadmore';
|
||
}else{
|
||
this.$refs.uToast.show({type:'error',title: "设备列表获取失败!"});
|
||
this.form.isFinish = 'loadmore';
|
||
}
|
||
},
|
||
// 加载更多
|
||
getMore(){
|
||
if(this.form.isFinish === 'nomore') return;
|
||
this.form.current++;
|
||
this.getDeviceList();
|
||
},
|
||
// 预览
|
||
preview(url){
|
||
console.log(url);
|
||
this.$util.tools.methods.lookImage(0,[url]);
|
||
},
|
||
// 跳转到设备详情
|
||
goToDetail(id) {
|
||
uni.navigateTo({
|
||
url: `/aircraft/server/equipment/equipmentDetail?id=${id}`,
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.aircraft-equipment {
|
||
height: 100%;
|
||
background-color: #f5f5f5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
padding-bottom: 30rpx;
|
||
|
||
.equipment-content {
|
||
width: 100%;
|
||
position: relative;
|
||
padding: 0 24rpx 0;
|
||
|
||
.top-abs {
|
||
// position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 800;
|
||
font-size: 44rpx;
|
||
color: #333333;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.device-item {
|
||
margin-top: 26rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
|
||
.device-image {
|
||
width: 142rpx;
|
||
height: 142rpx;
|
||
background: #f3f3f3;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #cccccc;
|
||
&::v-deep .u-image__image{
|
||
border-radius: 12rpx !important;
|
||
}
|
||
}
|
||
|
||
.device-info {
|
||
flex: 1;
|
||
margin-left: 24rpx;
|
||
margin-bottom: 32rpx;
|
||
|
||
.device-name {
|
||
font-family: Source Han Sans SC;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
display: block;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.device-model {
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #666666;
|
||
display: block;
|
||
}
|
||
|
||
}
|
||
.detail-btn {
|
||
&::v-deep .u-btn--warning{
|
||
border: none;
|
||
background: #fee547;
|
||
border-radius: 12rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
height: 72rpx !important;
|
||
line-height: 72rpx !important;
|
||
padding: 0 22rpx !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.device-empty{
|
||
width: 100%;
|
||
&::v-deep .u-icon__label{
|
||
margin-top: 24rpx !important;
|
||
font-weight: 500;
|
||
font-family: Source Han Sans SC;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |