txCar/pages/index/cailist.vue

<template>
	<view class="box">
		<view class="carlistBox">
			<view class="line" v-for="(item,index) in carList" @click="lineClick(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="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('miniAppMyBMemberCar/queryMyBMemberCar', {
			  
			 },'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'
				})
			// }
			
		},
		delCar(id){
			var that=this;
			uni.showModal({
			    title: '提示',
			    content: '确定要删除车辆吗',
			    success: function (res) {
			        if (res.confirm) {
			          uni.showLoading({ });
			          that.$http('miniAppMyBMemberCar/deleteMemberCar', {
			            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('miniAppMyBMemberCar/updateCarIsdefault', {
			  id:item.id
			 },'POST').then(res => {
				uni.hideLoading();
				if(res.code==0){
					uni.showToast({
					     title: '操作成功',
					 	 icon:'none',
					     duration: 3000
					 });
					uni.setStorage({
						key: 'maintainCarData',
						data: item,
						success: function () {
								
					     }
					}); 
				}else{
					uni.showToast({
					     title: res.msg,
					 	 icon:'none',
					     duration: 3000
					 });
				}
			  that.getqueryMyBMemberCar()
			})
		},
		lineClick(item){
			/* var that=this;
			uni.showLoading({ });
			that.$http('miniAppMyBMemberCar/updateCarIsdefault', {
			  id:id
			 },'POST').then(res => {
				uni.hideLoading();
				if(res.code==0){
					uni.showToast({
					     title: '操作成功',
					 	 icon:'none',
					     duration: 3000
					 });
					uni.navigateBack({
						delta:1
					})
				}else{
					uni.showToast({
					     title: res.msg,
					 	 icon:'none',
					     duration: 3000
					 });
				}
			 
			}) */
			if(this.type==2){
				uni.setStorage({
					key: 'maintainCarData',
					data: item,
					success: function () {
							uni.navigateBack({
								delta:1
							})
							
				     }
				}); 
			}else{
				uni.removeStorageSync('carModelInfo');
				uni.navigateTo({
					url:'editCar?id='+item.id
				})
			}
			
		}
	}
}
</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>