<template>
|
<view class="content">
|
<uniNavBar title="我的车辆" status-bar="true" class="header-bar" background-color="#fff" left-icon="back" :right-text="isShowEdit?'完成':'编辑'" color="#000" @clickLeft="goBack" @clickRight="edit">
|
</uniNavBar>
|
<!-- <div class="gap"></div> -->
|
<view>
|
<uni-swipe-action ref="swipeBar">
|
<uni-swipe-action-item :disabled="isShowEdit" :options="options" @click="onClick($event,i)" @change="change" v-for="(i,index) in myCarList" :key="index">
|
<view class='cont'>
|
<uni-icons class="del" v-show="isShowEdit" @click="delItem(i)" type="minus-filled" size="20" color="#ff0000"></uni-icons>
|
<text>{{i}}</text>
|
</view>
|
</uni-swipe-action-item>
|
</uni-swipe-action>
|
</view>
|
|
<button class="add" type="default" @click="toAddCar">
|
<uni-icons class="plus" type="plus" size="20" color="#fff"></uni-icons>
|
添加车辆
|
</button>
|
</view>
|
</template>
|
|
<script>
|
import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
|
import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
|
const {userId} = JSON.parse(uni.getStorageSync('user'));
|
console.log(JSON.parse(uni.getStorageSync('user')))
|
export default {
|
components: {
|
uniSwipeAction,uniSwipeActionItem
|
},
|
data() {
|
return {
|
options:[{
|
text: '删除',
|
style: {
|
backgroundColor: '#ff0000'
|
}
|
}],
|
isShowEdit: false,
|
isEditable: true,
|
myCarList:[]
|
}
|
},
|
mounted(){
|
//this.getCarList();
|
console.log(JSON.parse(uni.getStorageSync('user')))
|
this.getCarList();
|
},
|
onShow(){
|
console.log(JSON.parse(uni.getStorageSync('user')))
|
this.getCarList();
|
},
|
onBackPress(e){
|
console.log(e);
|
uni.navigateTo({
|
url:'/pages/mine/mine'
|
})
|
return true
|
},
|
methods: {
|
async getCarList(){
|
console.log(JSON.parse(uni.getStorageSync('user')));
|
let {userId} = JSON.parse(uni.getStorageSync('user'));
|
console.log(userId)
|
let res = await this.$api.syncRequest({
|
url: '/basic/api/user/myPlateNos?userId='+userId
|
});
|
if(res.data.success){
|
this.myCarList = res.data.data;
|
|
}
|
},
|
updateStorage(){
|
let user = JSON.parse(uni.getStorageSync('user'));
|
user.plateNos = this.myCarList;
|
debugger
|
//localStorage.setItem('user',JSON.stringify(user));
|
uni.setStorageSync('user',JSON.stringify(user))
|
},
|
goBack(){
|
uni.navigateBack({
|
delta: 1,
|
animationType: 'pop-out',
|
animationDuration: 200
|
});
|
},
|
edit(){
|
if(this.isEditable){
|
this.isShowEdit = !this.isShowEdit;
|
console.log(this.$refs['swipeBar'])
|
}
|
},
|
onClick(e,i){
|
debugger
|
console.log('当前点击的是第'+e.index+'个按钮，点击内容是'+e.content.text);
|
if(e.index==0){
|
this.delItem(i)
|
}
|
},
|
delItem(plateNo){
|
debugger
|
this.$api.syncRequest({
|
url:`/basic/api/user/delPlateNo?userId=${userId}&&plateNo=${plateNo}`,
|
method: 'DELETE'
|
}).then(res=>{
|
if(res.data.success){
|
uni.showToast({
|
icon: 'none',
|
title: '车辆已删除'
|
});
|
this.getCarList();
|
this.updateStorage();
|
}
|
})
|
},
|
change(open){
|
console.log('当前开启状态：'+ open);
|
|
if(open){
|
this.isEditable = false
|
}else{
|
this.isEditable = true
|
}
|
},
|
toAddCar(){
|
uni.navigateTo({
|
url: '/pages/addCar/addCar'
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
uni-page-wrapper,uni-page-body{
|
height: 100%;
|
}
|
.content{
|
height: 100%;
|
background-color: #fbfbfb;
|
.header-bar{
|
height: 200rpx;
|
}
|
|
/deep/.uni-swipe_box{
|
line-height: 90rpx;
|
padding-left: 30rpx;
|
box-sizing: border-box;
|
border-bottom: 1rpx solid #F1F1F1;
|
&:focus{
|
background-color: #F1F1F1;
|
}
|
.cont{
|
.del{
|
vertical-align: top;
|
padding: 0 10rpx 0;
|
}
|
font-size: 36rpx;
|
}
|
}
|
.add{
|
margin: 120rpx 30rpx 0;
|
background-color: #0bbf71;
|
color: #fff;
|
.plus{
|
padding-right:20rpx;
|
font-weight: bold;
|
}
|
}
|
}
|
</style>
|
