<template>
|
<view class="box">
|
<view class="search">
|
<view class="search_sou">
|
<image src="/static/icon/ic_search@2x.png" mode="widthFix"></image>
|
<input type="text" v-model="form.code" placeholder="搜索车辆编号" @confirm="getList(1)" />
|
</view>
|
<view class="search_shai" @click="show = true">
|
<text>筛选</text>
|
<image src="/static/icon/ic_shaixuan@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="list">
|
<view class="list_item" v-for="(item, index) in list" :key="index">
|
<view class="list_item_title">
|
<view class="list_item_title_left">车辆编号：{{item.code}}</view>
|
<view class="list_item_title_cate">
|
<view class="list_item_title_cate_row" :style="{ background: item.isOnline === 1 ? '#E7F8F7' : 'rgba(255, 90, 49, 0.10)', color: item.isOnline === 1 ? '#01B6AD' : '#FF5A31' }">{{item.isOnline === 1 ? '在线' : '离线'}}</view>
|
<view class="list_item_title_cate_row" :style="{ background: item.lockStatus === 1 ? '#E7F8F7' : 'rgba(255, 90, 49, 0.10)', color: item.lockStatus === 1 ? '#01B6AD' : '#FF5A31' }">{{item.lockStatus === 1 ? '开锁' : '关锁'}}</view>
|
<view class="list_item_title_cate_row" :style="{ background: item.status === 0 ? '#E7F8F7' : item.status === 1 ? '#D9EBFF' : 'rgba(255, 90, 49, 0.10)', color: item.status === 0 ? '#01B6AD' : item.status === 1 ? '#1185FF' : '#FF5A31' }">{{item.status === 0 ? '空闲' : item.status === 1 ? '骑行中' : '禁用'}}</view>
|
</view>
|
</view>
|
<view class="list_item_infos">
|
<view class="list_item_infos_row">
|
<view class="list_item_infos_row_label">车辆类型：</view>
|
<view class="list_item_infos_row_val">{{item.type === 1 ? '电车' : '自行车'}}</view>
|
</view>
|
<view class="list_item_infos_row">
|
<view class="list_item_infos_row_label">运营情况：</view>
|
<view class="list_item_infos_row_val">{{item.bikeStatus === 1 ? '运营中' : '已停运'}}</view>
|
</view>
|
<view class="list_item_infos_row">
|
<view class="list_item_infos_row_label">电压电量：</view>
|
<view class="list_item_infos_row_val">{{item.voltage}}V</view>
|
</view>
|
<view class="list_item_infos_row">
|
<view class="list_item_infos_row_label">当前站点：</view>
|
<view class="list_item_infos_row_val">{{item.siteName}}</view>
|
</view>
|
<view class="list_item_infos_row">
|
<view class="list_item_infos_row_label">最后通讯：</view>
|
<view class="list_item_infos_row_val">{{item.heartDate}}</view>
|
</view>
|
</view>
|
<view class="list_item_x"></view>
|
<view class="list_item_btns">
|
<image :src="selectIds.includes(item.id) ? '/static/icon/list_checkbox_sel@2x.png' : '/static/icon/list_checkbox@2x.png'" mode="widthFix" @click="seleRow(index)"></image>
|
<view class="list_item_btns_list">
|
<view class="list_item_btns_list_item" @click="openMap(item)">地图</view>
|
<view class="list_item_btns_list_item" @click="bikeChangeStatus(item.id, item.bikeStatus, index)">{{item.bikeStatus === 0 ? '上架' : '下架'}}</view>
|
<view class="list_item_btns_list_item active" @click="bikeChangeLockStatus(item.id, item.lockStatus, index)">{{item.lockStatus === 0 ? '开锁' : '关锁'}}</view>
|
</view>
|
</view>
|
</view>
|
<view class="list_wu" v-if="!next">没有更多数据了~</view>
|
</view>
|
<view style="width: 100%; height: calc(env(safe-area-inset-bottom) + 130rpx);"></view>
|
<view class="footer">
|
<view class="footer_hz">
|
<view class="footer_hz_left" @click="quanxuan">
|
<image :src="selectAll ? '/static/icon/list_checkbox_sel@2x.png' : '/static/icon/list_checkbox@2x.png'" mode="widthFix"></image>
|
<text>全选</text>
|
</view>
|
<view class="footer_hz_btn" @click="show1 = true">批量操作</view>
|
</view>
|
<view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
|
</view>
|
<!-- 筛选 -->
|
<u-popup :show="show" :round="10" mode="bottom">
|
<view class="shaixuan">
|
<view class="shaixuan_head">
|
<text></text>
|
<text>筛选</text>
|
<image @click="show = false" src="/static/icon/ic_close@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="shaixuan_item">
|
<view class="shaixuan_item_label">车辆状态</view>
|
<view class="shaixuan_item_val">
|
<view :class="form.isOnline === 1 ? 'shaixuan_item_val_row active' : 'shaixuan_item_val_row'" @click="form.isOnline = 1">在线</view>
|
<view :class="form.isOnline === 0 ? 'shaixuan_item_val_row active' : 'shaixuan_item_val_row'" @click="form.isOnline = 0">离线</view>
|
<view class="shaixuan_item_val_zw"></view>
|
</view>
|
</view>
|
<view class="shaixuan_item">
|
<view class="shaixuan_item_label">运营状态</view>
|
<view class="shaixuan_item_val">
|
<view :class="form.bikeStatus === 1 ? 'shaixuan_item_val_row active' : 'shaixuan_item_val_row'" @click="form.bikeStatus = 1">运营中</view>
|
<view :class="form.bikeStatus === 0 ? 'shaixuan_item_val_row active' : 'shaixuan_item_val_row'" @click="form.bikeStatus = 0">已停运</view>
|
<view class="shaixuan_item_val_zw"></view>
|
</view>
|
</view>
|
<view class="shaixuan_item">
|
<view class="shaixuan_item_label">锁头状态</view>
|
<view class="shaixuan_item_val">
|
<view :class="form.lockStatus === 1 ? 'shaixuan_item_val_row active' : 'shaixuan_item_val_row'" @click="form.lockStatus = 1">开锁</view>
|
<view :class="form.lockStatus === 0 ? 'shaixuan_item_val_row active' : 'shaixuan_item_val_row'" @click="form.lockStatus = 0">关锁</view>
|
<view class="shaixuan_item_val_zw"></view>
|
</view>
|
</view>
|
<view class="shaixuan_item">
|
<view class="shaixuan_item_label">骑行状态</view>
|
<view class="shaixuan_item_val">
|
<view :class="form.status === 1 ? 'shaixuan_item_val_row active' : 'shaixuan_item_val_row'" @click="form.status = 1">骑行中</view>
|
<view :class="form.status === 0 ? 'shaixuan_item_val_row active' : 'shaixuan_item_val_row'" @click="form.status = 0">空闲中</view>
|
<view class="shaixuan_item_val_zw"></view>
|
</view>
|
</view>
|
<view class="shaixuan_footer">
|
<view class="shaixuan_footer_btn" @click="show = false">取消</view>
|
<view class="shaixuan_footer_btn1" @click="getList(1)">确定</view>
|
</view>
|
</view>
|
</u-popup>
|
<!-- 选择操作 -->
|
<u-popup :show="show1" :round="10" mode="bottom">
|
<view class="shaixuan">
|
<view class="shaixuan_head">
|
<text></text>
|
<text>选择操作</text>
|
<image @click="show1 = false" src="/static/icon/ic_close@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="shaixuan_row" @click="bikeChangeStatusBatch(0)">
|
<image src="/static/icon/ic_shangjia@2x.png" mode="widthFix"></image>
|
<text>批量上架</text>
|
</view>
|
<view class="shaixuan_row" @click="bikeChangeStatusBatch(1)">
|
<image src="/static/icon/ic_xiajia@2x.png" mode="widthFix"></image>
|
<text>批量下架</text>
|
</view>
|
<view class="shaixuan_row" @click="bikeChangeLockStatusBatch(0)">
|
<image src="/static/icon/ic_kaisuo@2x.png" mode="widthFix"></image>
|
<text>批量开锁</text>
|
</view>
|
<view class="shaixuan_row" @click="bikeChangeLockStatusBatch(1)">
|
<image src="/static/icon/ic_guansuo@2x.png" mode="widthFix"></image>
|
<text>批量关锁</text>
|
</view>
|
</view>
|
</u-popup>
|
<!-- 温馨提示 -->
|
<u-popup :show="show2" :round="10" mode="bottom">
|
<view class="shaixuan">
|
<view class="shaixuan_head">
|
<text></text>
|
<text>温馨提示</text>
|
<text></text>
|
</view>
|
<view class="shaixuan_info">确定开始运营选中车辆吗？</view>
|
<view class="shaixuan_footer" style="margin-top: 94rpx;">
|
<view class="shaixuan_footer_btn" @click="show2 = false">取消</view>
|
<view class="shaixuan_footer_btn1">确定</view>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
show: false,
|
show1: false,
|
show2: false,
|
page: 1,
|
form: {
|
code: '',
|
isOnline: '',
|
status: '',
|
lockStatus: '',
|
bikeStatus: ''
|
},
|
list: [],
|
selectIds: [],
|
next: true
|
};
|
},
|
computed: {
|
selectAll() {
|
return this.selectIds.length === this.list.length
|
}
|
},
|
onLoad() {
|
this.getList()
|
},
|
onReachBottom() {
|
this.getList()
|
},
|
methods: {
|
getList(type) {
|
if (type === 1) {
|
this.page = 1
|
this.list = []
|
this.show = false
|
this.next = true
|
}
|
if (!this.next) return;
|
uni.showLoading({ title: '加载中' });
|
this.$u.api.pageBikes({
|
capacity: 10,
|
page: this.page,
|
model: this.form
|
}).then(res => {
|
if (res.code === 200) {
|
uni.hideLoading();
|
this.list.push(...res.data.records)
|
this.page += 1
|
if (Number(res.data.total) === this.list.length) {
|
this.next = false
|
}
|
}
|
})
|
},
|
seleRow(index) {
|
if (!this.selectIds.includes(this.list[index].id)) {
|
this.selectIds.push(this.list[index].id)
|
} else {
|
this.selectIds.forEach((item, i) => {
|
if (item === this.list[index].id) {
|
this.selectIds.splice(i, 1)
|
}
|
})
|
}
|
},
|
quanxuan() {
|
if (this.selectAll) {
|
this.selectIds = []
|
} else {
|
this.selectIds = this.list.map(item => item.id)
|
}
|
},
|
openMap(item) {
|
uni.openLocation({
|
latitude: item.latitude,
|
longitude: item.longitude,
|
name: item.siteName,
|
success: () => {
|
console.log('打开成功');
|
},
|
fail: () => {
|
console.log('打开失败');
|
}
|
});
|
},
|
bikeChangeStatusBatch(bikeStatus) {
|
var that = this;
|
uni.showModal({
|
title: '提示',
|
content: `是否确认批量${bikeStatus === 0 ? '上架' : '下架'}车辆`,
|
success: function (res) {
|
if (res.confirm) {
|
that.$u.api.updateBikeStatus({
|
ids: that.selectIds.join(','),
|
bikeStatus: bikeStatus === 0 ? 1 : 0
|
}).then(res => {
|
if (res.code === 200) {
|
that.show1 = false
|
that.selectIds = []
|
that.getList(1)
|
}
|
})
|
} else if (res.cancel) {
|
|
}
|
}
|
});
|
},
|
bikeChangeStatus(id, bikeStatus, index) {
|
var that = this;
|
uni.showModal({
|
title: '提示',
|
content: `是否确认${bikeStatus === 0 ? '上架' : '下架'}该车辆`,
|
success: function (res) {
|
if (res.confirm) {
|
that.$u.api.updateBikeStatus({
|
ids: id,
|
bikeStatus: bikeStatus === 0 ? 1 : 0
|
}).then(res => {
|
if (res.code === 200) {
|
that.getList(1)
|
}
|
})
|
} else if (res.cancel) {
|
|
}
|
}
|
});
|
},
|
bikeChangeLockStatus(id, lockStatus, index) {
|
var that = this;
|
uni.showModal({
|
title: '提示',
|
content: `是否确认${lockStatus === 0 ? '开锁' : '关锁'}该车辆`,
|
success: function (res) {
|
if (res.confirm) {
|
that.$u.api.updateLockStatus({
|
ids: id,
|
lockStatus: lockStatus === 0 ? 1 : 0
|
}).then(res => {
|
if (res.code === 200) {
|
that.getList(1)
|
}
|
})
|
} else if (res.cancel) {
|
|
}
|
}
|
});
|
},
|
bikeChangeLockStatusBatch(lockStatus) {
|
var that = this;
|
uni.showModal({
|
title: '提示',
|
content: `是否确认批量${lockStatus === 0 ? '开锁' : '关锁'}车辆`,
|
success: function (res) {
|
if (res.confirm) {
|
that.$u.api.updateLockStatus({
|
ids: that.selectIds.join(','),
|
lockStatus: lockStatus === 0 ? 1 : 0
|
}).then(res => {
|
if (res.code === 200) {
|
that.show1 = false
|
that.selectIds = []
|
that.getList(1)
|
}
|
})
|
} else if (res.cancel) {
|
|
}
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background-color: #F7F7F7;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.shaixuan {
|
width: 100%;
|
.shaixuan_head {
|
padding: 40rpx;
|
width: 100%;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
image {
|
width: 32rpx;
|
height: 32rpx;
|
}
|
}
|
.shaixuan_info {
|
width: 100%;
|
text-align: center;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #333333;
|
margin-top: 76rpx;
|
}
|
|
.shaixuan_row {
|
width: calc(100% - 60rpx);
|
margin: 0 auto;
|
height: 88rpx;
|
background: rgba(1,182,173,0.14);
|
border-radius: 44rpx;
|
border: 1rpx solid #01B6AD;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 30rpx;
|
image {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 16rpx;
|
}
|
text {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #01B6AD;
|
}
|
}
|
.shaixuan_item {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 48rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.shaixuan_item_label {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #111111;
|
margin-bottom: 30rpx;
|
}
|
.shaixuan_item_val {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.shaixuan_item_val_zw {
|
width: 208rpx;
|
height: 0;
|
}
|
.active {
|
background-color: #01B6AD !important;
|
color: #FFFFFF !important;
|
}
|
.shaixuan_item_val_row {
|
width: 208rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
background: #F7F7F7;
|
border-radius: 36rpx;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
}
|
}
|
.shaixuan_footer {
|
width: 100%;
|
height: 96rpx;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 60rpx;
|
.shaixuan_footer_btn {
|
width: 344rpx;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #01B6AD;
|
border-radius: 46rpx;
|
border: 1rpx solid #01B6AD;
|
}
|
.shaixuan_footer_btn1 {
|
width: 344rpx;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
background: #01B6AD;
|
border-radius: 46rpx;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
}
|
}
|
.footer {
|
width: 100%;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
z-index: 9;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
height: calc(100rpx + env(safe-area-inset-bottom));
|
background: #FFFFFF;
|
box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(0,0,0,0.06);
|
.footer_hz {
|
width: 100%;
|
height: 100rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.footer_hz_left {
|
display: flex;
|
align-items: center;
|
image {
|
width: 40rpx;
|
height: 40rpx;
|
margin-right: 20rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
}
|
.footer_hz_btn {
|
width: 160rpx;
|
height: 68rpx;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #FFFFFF;
|
line-height: 68rpx;
|
text-align: center;
|
background: #01B6AD;
|
border-radius: 34rpx;
|
}
|
}
|
}
|
.search {
|
width: 100%;
|
height: 96rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
position: sticky;
|
top: 0;
|
left: 0;
|
z-index: 9;
|
.search_sou {
|
flex: 1;
|
height: 72rpx;
|
background: #F7F7F7;
|
border-radius: 36rpx;
|
padding: 0 40rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
image {
|
width: 28rpx;
|
height: 28rpx;
|
flex-shrink: 0;
|
margin-right: 16rpx;
|
}
|
input {
|
flex: 1;
|
height: 100%;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #222222;
|
}
|
}
|
.search_shai {
|
flex-shrink: 0;
|
margin-left: 30rpx;
|
display: flex;
|
align-items: center;
|
text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #666666;
|
}
|
image {
|
width: 28rpx;
|
height: 28rpx;
|
}
|
}
|
}
|
.list {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
.list_wu {
|
width: 100%;
|
text-align: center;
|
margin-top: 30rpx;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
}
|
.list_item {
|
width: 100%;
|
background: #FFFFFF;
|
border-radius: 20rpx;
|
margin-top: 30rpx;
|
.list_item_x {
|
width: 100%;
|
height: 1rpx;
|
background-color: #E5E5E5;
|
margin-top: 30rpx;
|
}
|
.list_item_btns {
|
width: 100%;
|
margin-top: 14rpx;
|
padding: 0 30rpx 18rpx 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
image {
|
width: 40rpx;
|
height: 40rpx;
|
flex-shrink: 0;
|
}
|
.list_item_btns_list {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
.active {
|
background-color: rgba(1, 182, 173, 1) !important;
|
color: #FFFFFF !important;
|
}
|
.list_item_btns_list_item {
|
width: 120rpx;
|
height: 68rpx;
|
line-height: 68rpx;
|
text-align: center;
|
border-radius: 34rpx;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #01B6AD;
|
border: 1rpx solid #01B6AD;
|
margin-left: 20rpx;
|
}
|
}
|
}
|
.list_item_infos {
|
margin-top: 16rpx;
|
padding: 0 30rpx 0 30rpx;
|
box-sizing: border-box;
|
.list_item_infos_row {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.list_item_infos_row_label {
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
}
|
.list_item_infos_row_val {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
}
|
}
|
}
|
.list_item_title {
|
width: 100%;
|
padding: 30rpx 30rpx 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.list_item_title_left {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
.list_item_title_cate {
|
display: flex;
|
align-items: center;
|
.list_item_title_cate_row {
|
padding: 6rpx 12rpx;
|
border-radius: 8rpx;
|
font-weight: 400;
|
font-size: 24rpx;
|
background: #E7F8F7;
|
color: #01B6AD;
|
margin-left: 10rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
