txCar/pages/index/cailist.vue

<template>
	<view class="box">
		<view class="carlistBox">
			<view class="line" v-for="(item,index) in carList" @click="itemClick(item)">
				<view class="lineCont" >
					<view>
						<image :src="item.brandLogo" mode="widthFix" class="brandLogo"></image>
					</view>
					<view style="padding-left: 29rpx;">
						<view class="carName">
						   <span>{{item.brand}} {{item.series}}</span>
						   <view class="plateNumber">{{item.plateNumber}}</view>
						</view>
						<view class="carMS">{{item.carModel}}</view>
					</view>
				</view>
				<view class="lineBottom">
					<view class="lineDel" @click.stop="delCar(item.id)">删除</view>
					<view class="lineDel" @click.stop="editCar(item.id)">编辑</view>
					<view class="Default" v-show="item.isDefault!=1" @click.stop="defaultCar(item)">设为默认</view>
					<view class="DefaultYES" v-show="item.isDefault==1">已设为默认</view>
				</view>
				<view class="DefaultIcon" v-show="item.isDefault==1" >默认</view>
			</view>
		</view>
		<view v-if="carList==''&&loding" class="nodataBox">
			<image src="../../static/img/nodata.png" mode="widthFix" class="nodataImg"></image>
			<view class="noTxt">暂无数据</view>
		</view>
		
		<view class="addBtn" @click="addBtn">添加爱车</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			carList:'',
			loding:false,
			type:'',
			carId:'',
		}
	},
	onLoad(opt) {
		this.$common.isUserId()
       this.type=opt.type;
	  // console.log(this.type)
	},
	onShow() {
		this.getqueryMyBMemberCar();
		this.carId=uni.getStorageSync("maintainCarData").id
	},
	methods: {
		getqueryMyBMemberCar(){
			uni.showLoading({ });
			this.loding=false;
			this.$http('worldKeepCar/worldHome/queryMyTMemberCar', {
			  
			 },'GET').then(res => {
				uni.hideLoading();
				this.carList=res.data;
				this.loding=true;
			})
		},
        addBtn(){
			var length=this.carList.length
			if(length>4){
				uni.showToast({
				     title: '库最多放五辆车，如果想添加，请先删除',
				 	 icon:'none',
				     duration: 3000
				 });
			}else{
				uni.navigateTo({
					url:'addCar'
				})
			}
			
		},
		editCar(id){
			
			uni.navigateTo({
				url:'addCar?id='+id + '&isEditCar=1'
			})
		},
		delCar(id){
			var that=this;
			uni.showModal({
			    title: '提示',
			    content: '确定要删除车辆吗',
			    success: function (res) {
			        if (res.confirm) {
			          uni.showLoading({ });
			          that.$http('worldKeepCar/worldHome/deleteTMemberCar', {
			            id:id
			           },'POST').then(res => {
			          	uni.hideLoading();
						if(res.code==0){
							if(that.carId==id){
								uni.removeStorageSync('maintainCarData');
							}
						}
			            that.getqueryMyBMemberCar()
			          })
			        } else if (res.cancel) {
			           
			        }
			    }
			});
		},
		defaultCar(item){
			var that=this;
			uni.showLoading({ });
			that.$http('worldKeepCar/worldHome/updateTCarIsdefault', {
			  id:item.id
			 },'POST').then(res => {
				uni.hideLoading();
				if(res.code==0){
					uni.showToast({
					     title: '操作成功',
					 	 icon:'none',
					     duration: 3000
					 });
					
				}else{
					uni.showToast({
					     title: res.msg,
					 	 icon:'none',
					     duration: 3000
					 });
				}
			  that.getqueryMyBMemberCar()
			})
		},
		itemClick(item){
			uni.setStorage({
				key: 'maintainCarData',
				data: item,
				success: function () {
						uni.navigateBack({
							delta:1
						})
						
			     }
			}); 
		}
	}
}
</script>

<style scoped>
	.box{
		min-height: 100vh;
		background:#F4F5F7 ;
	}
	.nodataImg{
	  width: 400rpx;
	  padding-top: 100rpx;
	}
	.noTxt{
		font-size: 36rpx;
		color: #999999;
		padding-top: 50rpx;
	}
	.nodataBox{
		text-align: center;
	}
	.addBtn{
		width: 690rpx;
		height: 74rpx;
		background: linear-gradient(135deg, #FD5300 0%, #FF270A 100%);
		border-radius: 37rpx;
		line-height: 74rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
		position: fixed;
		bottom: 23rpx;
		left: 30rpx;
	}
	.carlistBox{
		padding-bottom: 120rpx;
	}
	.carlistBox{
		padding: 24rpx;
		padding-bottom: 120rpx;
	}
	.brandLogo{
		width: 63rpx;
	}
	.line{
		background: #FFFFFF;
		padding: 27rpx 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	    position: relative;
	}
	.lineCont{
			display: flex;
	}
	.carName{
		color: #3C3C3C;font-size: 30rpx;display: flex;
	}
	.plateNumber{
		border-radius: 4px;
		border: 1px solid #F19D01;
		height: 32rpx;
		line-height: 32rpx;
		padding: 0 10rpx;color: #F19D01;
		font-size: 22rpx;
		margin-left: 20rpx;
		margin-top: 5rpx;
	}
	.carMS{
		color: #666666;
		font-size: 26rpx;
		padding-top: 5px;
	}
	.lineBottom{
		display: flex;
		justify-content: flex-end;
		padding-top: 20rpx;
	}
	.lineDel{
		width: 94rpx;
		height: 50rpx;
		border-radius: 25rpx;
		border: 1px solid #DDDDDD;
		text-align: center;line-height: 50rpx;
		font-size: 26rpx;color: #3C3C3C;
		margin-right: 29rpx;
	}
	.Default{
		width: 148rpx;
		height: 50rpx;
		border-radius: 25rpx;
		border: 1px solid #FF4F00;
		line-height: 50rpx;
		text-align: center;
		color: #FF4F00;font-size: 26rpx;
	}
	.DefaultYES{
		width: 148rpx;
		height: 50rpx;
		border-radius: 25rpx;
		border: 1px solid #DDDDDD;
		line-height: 50rpx;
		text-align: center;
		color: #999999;font-size: 26rpx;
	}
	.DefaultIcon{
		position: absolute;
		top: 0;
		right: 0;
		width: 109rpx;
		height: 40rpx;
		background: linear-gradient(131deg, #FFA72C 0%, #FF450F 100%);
		border-radius: 0px 10rpx 0px 10rpx;
		text-align: center;
		line-height: 40rpx;
		color: #FFFFFF;
		font-size: 22rpx;
	}
</style>