380 lines
7.9 KiB
Vue
380 lines
7.9 KiB
Vue
<template>
|
||
<view class="container" :style="appThemeStyle">
|
||
<view class="addres-list">
|
||
<view class="address-item" v-for="(item, index) in list" :key="index">
|
||
<view class="title">
|
||
<text>设备编号：{{ item.equipmentCode }}</text>
|
||
<u-tag v-if="item.isCtive == '已激活'" :text="item.isCtive" plain size="mini" type="success"></u-tag>
|
||
<u-tag v-else :text="item.isCtive" plain size="mini" type="warning"></u-tag>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="contacts">
|
||
<view class="bms-info">
|
||
<text class="item">电池型号：{{ item.batteryModel }}</text>
|
||
<text class="item">BMS模块：{{ item.bms }}</text>
|
||
<text class="item">工作状态：{{ item.workingStatus }}</text>
|
||
<text class="item">设备电压：{{ item.totalVoltage }}</text>
|
||
<text class="item">剩余电量：{{ item.batteryPower }}</text>
|
||
</view>
|
||
<view class="bms-image">
|
||
<view class="bms-image-box">
|
||
<image class="image" src="/static/battery.png"></image>
|
||
<text class="bms-image-fbf">{{ item.batteryPower }}</text>
|
||
</view>
|
||
<u-tag text="离线" plain size="mini" type="info"></u-tag>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="item-option">
|
||
<view class="_left">
|
||
<u-icon label="操作" size="40" name="map"
|
||
@click="navTo('package/user/equipment/operation?equipmentId='+item.equipmentId)"></u-icon>
|
||
</view>
|
||
<view class="line-align"></view>
|
||
<view class="_right">
|
||
<view class="events">
|
||
<u-icon label="详情" size="40" name="file-text"
|
||
@click="navTo('package/user/equipment/detail?equipmentId='+item.equipmentId)"></u-icon>
|
||
<!-- <view class="event-item" @click="handleUpdate(item.address_id)">
|
||
<text class="iconfont icon-edit"></text>
|
||
<text class="title">编辑</text>
|
||
</view>
|
||
<view class="event-item" @click="handleRemove(item.address_id)">
|
||
<text class="iconfont icon-delete"></text>
|
||
<text class="title">删除</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<empty v-if="!list.length" tips="暂无设备" />
|
||
<!-- 底部操作按钮 -->
|
||
<!-- <view class="footer-fixed">
|
||
<view class="btn-wrapper">
|
||
<view class="btn-item btn-item-main" @click="handleCreate()">添加新地址</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as EquipmentApi from '@/websoft/api/equipment.js'
|
||
import Empty from '@/components/empty'
|
||
import storage from '../../../utils/storage';
|
||
export default {
|
||
components: {
|
||
Empty
|
||
},
|
||
data() {
|
||
return {
|
||
//当前页面参数
|
||
options: {},
|
||
// 正在加载
|
||
isLoading: true,
|
||
// 收货地址列表
|
||
list: [],
|
||
// 默认收货地址
|
||
defaultId: null
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
// 当前页面参数
|
||
this.options = options
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow() {
|
||
// 获取页面数据
|
||
this.getPageData()
|
||
},
|
||
|
||
methods: {
|
||
|
||
// 获取页面数据
|
||
getPageData() {
|
||
const app = this
|
||
app.isLoading = true
|
||
Promise.all([app.getDefaultId(), app.getEquipmentList()])
|
||
.then(() => {
|
||
// 列表排序把默认收货地址放到最前
|
||
app.onReorder()
|
||
})
|
||
.finally(() => app.isLoading = false)
|
||
},
|
||
|
||
// 获取收货地址列表
|
||
getEquipment() {
|
||
const app = this
|
||
EquipmentApi.getEquipment(this.options.equipmentId).then(res => {
|
||
this.list = [res.data]
|
||
console.log(res);
|
||
})
|
||
},
|
||
getEquipmentList() {
|
||
const app = this
|
||
EquipmentApi.pageEquipment({
|
||
userId: storage.get("userId"),
|
||
equipmentId: app.options.equipmentId
|
||
}).then(res => {
|
||
this.list = res.data.list
|
||
console.log(res);
|
||
})
|
||
},
|
||
// 获取默认的收货地址
|
||
getDefaultId() {
|
||
return new Promise((resolve, reject) => {
|
||
const app = this
|
||
// AddressApi.defaultId()
|
||
// .then(result => {
|
||
// app.defaultId = result.data.defaultId
|
||
// resolve(result)
|
||
// })
|
||
// .catch(reject)
|
||
})
|
||
},
|
||
|
||
// 列表排序把默认收货地址放到最前
|
||
onReorder() {
|
||
const app = this
|
||
app.list.sort(item => {
|
||
return item.address_id == app.defaultId ? -1 : 1
|
||
})
|
||
},
|
||
|
||
navTo(url) {
|
||
this.$navTo(url)
|
||
},
|
||
|
||
/**
|
||
* 添加新地址
|
||
*/
|
||
handleCreate() {
|
||
this.$navTo('pages/address/create')
|
||
},
|
||
|
||
/**
|
||
* 编辑地址
|
||
* @param {int} addressId 收货地址ID
|
||
*/
|
||
handleUpdate(addressId) {
|
||
this.$navTo('pages/address/update', {
|
||
addressId
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 删除收货地址
|
||
* @param {int} addressId 收货地址ID
|
||
*/
|
||
handleRemove(addressId) {
|
||
const app = this
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "您确定要删除当前收货地址吗?",
|
||
success({
|
||
confirm
|
||
}) {
|
||
confirm && app.onRemove(addressId)
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 确认删除收货地址
|
||
* @param {int} addressId 收货地址ID
|
||
*/
|
||
onRemove(addressId) {
|
||
const app = this
|
||
AddressApi.remove(addressId)
|
||
.then(result => {
|
||
app.getPageData()
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 设置为默认地址
|
||
* @param {Object} addressId
|
||
*/
|
||
handleSetDefault(addressId) {
|
||
const app = this
|
||
AddressApi.setDefault(addressId)
|
||
.then(result => {
|
||
app.defaultId = addressId
|
||
app.options.from === 'checkout' && uni.navigateBack()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.addres-list {
|
||
padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
|
||
padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
// 项目内容
|
||
.address-item {
|
||
margin: 0 auto 20rpx auto;
|
||
padding: 30rpx 40rpx;
|
||
width: 94%;
|
||
box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
|
||
border-radius: 16rpx;
|
||
background: #fff;
|
||
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.contacts {
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.bms-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #666666;
|
||
|
||
.item {
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.name {
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
|
||
.bms-image {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
width: 120rpx;
|
||
|
||
.bms-image-box {
|
||
display: flex;
|
||
font-size: 22rpx;
|
||
margin-bottom: 18rpx;
|
||
color: #00af00;
|
||
|
||
.bms-image-fbf {
|
||
margin-top: 22rpx;
|
||
}
|
||
}
|
||
|
||
.image {
|
||
width: 50rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.address {
|
||
font-size: 28rpx;
|
||
|
||
.region {
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
margin: 20rpx 0;
|
||
border-bottom: 1rpx solid #f3f3f3;
|
||
}
|
||
|
||
.line-align {
|
||
width: 6rpx;
|
||
height: 48rpx;
|
||
border-right: 1rpx solid #f3f3f3;
|
||
}
|
||
|
||
.item-option {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
height: 48rpx;
|
||
|
||
// 单选框
|
||
.item-radio {
|
||
font-size: 28rpx;
|
||
|
||
.radio {
|
||
vertical-align: middle;
|
||
transform: scale(0.76)
|
||
}
|
||
|
||
.text {
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
|
||
// 操作
|
||
.events {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 48rpx;
|
||
|
||
.event-item {
|
||
font-size: 28rpx;
|
||
margin-right: 26rpx;
|
||
color: #4c4c4c;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.title {
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
// 底部操作栏
|
||
.footer-fixed {
|
||
position: fixed;
|
||
bottom: var(--window-bottom);
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 11;
|
||
|
||
// 设置ios刘海屏底部横线安全区域
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.btn-wrapper {
|
||
height: 120rpx;
|
||
padding: 0 40rpx;
|
||
}
|
||
|
||
.btn-item {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
height: 86rpx;
|
||
color: #fff;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.btn-item-main {
|
||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||
}
|
||
|
||
}
|
||
</style> |