add new key

zhangzengfei

2021-09-16 38430ddb8612fce15a2f1c940f9bd57d4da3e70b

 pages/myCarList/myCarList.vue

@@ -1,173 +1,173 @@
<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>

         添加车辆

      <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'));

<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

   export default {
      components: {
         uniSwipeAction,uniSwipeActionItem
      },
      data() {
         return {
            options:[{

               text: '删除',

               style: {

                  backgroundColor: '#ff0000'

               }

            }],

            isShowEdit: false,

            isEditable: true,

            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))

      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;
					
            }
         },
         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'

            });

         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%;

<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;

         }

      }

   .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>