antissoft / antissoft.shangten.wechar

<template>
	<view>
		<image src="../../static/beijing.png" class="background-s" mode=""></image>
		<!-- 全局大小 -->
		<view class="overallSituation">
			<!-- 车辆类型  车型/颜色-->
			<view class="VehicleType">
				<view class="textRight" style="border: 0;">
					车型
				</view>
				<view class="textRight">
					颜色
				</view>
				<view class="textLeft">
					划痕
				</view>
				<view class="textLeft">
					腐蚀
				</view>
				<view class="textLeft">
					破损
				</view>
				<view class="textLeft">
					飞漆
				</view>
			</view>
			<!-- 车辆详情列表 -->
			<view class="listOfVehicleDetails" v-for="(item,index) in VehicleList" :key="index">
				<!-- 详情列表1 -->
				<view class="listOfDetailsOne">
					<view class="listOfDetailsOne-1 textRight">
						{{item.CarModel}}
					</view>
					<view class="listOfDetailsOne-1 textRight">
						{{item.CarColour}}
					</view>
					<view class="listOfDetailsOne-1 textLeft">
						{{item.Scratch}}
					</view>
					<view class="listOfDetailsOne-1 textLeft">
						{{item.Corrosion}}
					</view>
					<view class="listOfDetailsOne-1 textLeft">
						{{item.BeDamaged}}
					</view>
					<view class="listOfDetailsOne-1 textLeft">
						{{item.FlyingPaint}}
					</view>
				</view>
				<!-- 设置默认车辆 -->
				<view class="setDefaultVehicle">
					<view class="otsSelected textRight" style="align-items: center;"
						@click="setAsDefaultVehicle(item,index)">
						<!-- 	<view class="otsSelectedImg">
						</view> -->
						<image class="otsSelectedImg" :src="item.CarDefault==true?defaultimg:nodefaultimg" mode="">
						</image>
						<view>设为默认车辆</view>
					</view>
					<view class="textRight"></view>
					<view class="textLeft" @click="modify(item)">修改</view>
					<view class="textLeft" @click="deleteVehicle(item)">删除</view>
				</view>
			</view>
		</view>
		<!-- ------------------------------------------------------------------- -->
		<!-- 修改弹出框 -->
		<wyb-popup ref="popup" negativeTop=0 showCloseIcon=false maskClickClose=false maskAlpha=0 type="center"
			width="650" height="1100" :showCloseIcon="true"
			style="overflow: hidden;border-radius: 30px;background-color: transparent;">
			<image src="../../static/beijing.png" class="background" mode=""></image>
			<view class="popup-content">
				<view class="input-ont">
					<!-- 车辆品牌型号 -->
					<view class="uni-form-item uni-column">
						<view class="title">车辆品牌型号</view>
						<!-- <input class="uni-input-1"  type="text" v-model="VehicleModel.CarModel"  placeholder="品牌型号"/> -->
						<input type="text" placeholder="品牌型号" v-model="VehicleModel.CarModel" />
					</view>
				</view>
				<!-- 温馨提示 -->
				<view class="reminder">
					<text class="reminder-one">温馨提示</text>
					<text>服务车型仅限7座以下非运营车辆和长</text>
					<text>不超过5米的SUV车</text>
				</view>
				<view class="input-two ">
					<!-- 车身颜色 -->
					<view class="uni-form-item uni-column">
						<view class="title">车身颜色</view>
						<!-- <input class="uni-input" focus v-model="VehicleModel.CarColour" /> -->
						<input type="text" placeholder="车身颜色" v-model="VehicleModel.CarColour" />
					</view>
				</view>
				<!-- 爱车车面状况 -->
				<view class="clickTick">
					<view class="clickTickText">
						爱车车面状况 (点击勾选)
					</view>
					<view class="carSurfaceCondition">
						<view class="uni-form-item uni-column">
							<view class="title scratch">漆面划痕</view>
							<view>
								<radio-group @change="SelectedScratch" :multiple="false"
									class="LL">
									<radio name="良好" value="良好" :checked="checkedScratch==0">良好</radio>
									<radio name="一般" value="一般" :checked="checkedScratch==1">一般</radio>
									<radio name="中等" value="中等" :checked="checkedScratch==2">中等</radio>
									<radio name="严重" value="严重" :checked="checkedScratch==3">严重</radio>
								</radio-group>
							</view>
						</view>
					</view>
					<view class="carSurfaceCondition">
						<view class="uni-form-item uni-column">
							<view class="title scratch">漆面腐蚀</view>
							<view>
								<radio-group @change="SelectedCorrosion" :multiple="false"
									 class="LL">
									<radio name="良好" value="良好" :checked="checkedCorrosion==0">良好</radio>
									<radio name="一般" value="一般" :checked="checkedCorrosion==1">一般</radio>
									<radio name="中等" value="中等" :checked="checkedCorrosion==2">中等</radio>
									<radio name="严重" value="严重" :checked="checkedCorrosion==3">严重</radio>
								</radio-group>
							</view>
						</view>
					</view>
					<view class="carSurfaceCondition">
						<view class="uni-form-item uni-column">
							<view class="title scratch">漆面破损</view>
							<view>
								<radio-group @change="SelectedBeDamaged" :multiple="false"
									class="LL">
									<radio name="良好" value="良好" :checked="checkedBeDamaged==0">良好</radio>
									<radio name="一般" value="一般" :checked="checkedBeDamaged==1">一般</radio>
									<radio name="中等" value="中等" :checked="checkedBeDamaged==2">中等</radio>
									<radio name="严重" value="严重" :checked="checkedBeDamaged==3">严重</radio>
								</radio-group>
							</view>
						</view>
					</view>
					<view class="carSurfaceCondition">
						<view class="uni-form-item uni-column">
							<view class="title scratch">漆面飞漆</view>
							<view>
								<radio-group @change="SelectedFlyingPaint" :multiple="false"
									class="LL">
									<radio name="良好" value="良好" :checked="checkedFlyingPaint==0">良好</radio>
									<radio name="一般" value="一般" :checked="checkedFlyingPaint==1">一般</radio>
									<radio name="中等" value="中等" :checked="checkedFlyingPaint==2">中等</radio>
									<radio name="严重" value="严重" :checked="checkedFlyingPaint==3">严重</radio>
								</radio-group>
							</view>

						</view>
					</view>
				</view>
				<view class="reminder">
					<text>温馨提示:爱车漆面氧化层、划痕严重，甚至还有严</text>
					<text>重漆面破损，建议您到维修店对破损部位进行修补，氧</text>
					<text>化和划痕部分进行机械抛光后再来体验套餐服务</text>
				</view>
				<view class="reminder-fatalFrame" >
					<text class="reminder-one" ></text>
				</view>
				<view class="cancel">
					<button class="button" type="info" @click="hide">取消</button>
					<button class="button" @click="Submit">确定</button>
				</view>
			</view>
		</wyb-popup>
		
		
		
		
		
		
		
		
		<view class="footer" style="position: fixed;bottom: 0px;width: 100%;display: flex;">
			<button @click="modify(null)"
				style="width: 50%;height: 35px;font-size: 13px;line-height: 35px;border-radius: 0px;"
				class="button-yuanjiao" hover-class="bg-click">添加</button>
			<button
				style="text-align: center;width: 50%;height: 35px;font-size: 13px;line-height: 35px;border-radius: 0px;"
				class="button-yuanjiao" hover-class="bg-click" @click="Saves">保存</button>
		</view>
	</view>
</template>
<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybPopup,
		},
		data() {
			return {
				// 未选中
				nodefaultimg: '../../static/110.png',
				// 选中
				defaultimg: '../../static/002.png',
				// 默认图片
				ImgStatus: '../../static/110.png',
				color: 'red',
				items: [{
					name: '劳斯莱斯幻影',
					colors: '蓝底白字白框线',
					scratch: '严重',
					corrosion: "严重",
					beBamaged: '严重',
					flyingPaint: '严重'
				}],
				colorList: [{
					good: '良好',
					commonly: '一般',
					serious: '严重',
					value: 'red'
				}],
				// -------------------------------------------------
				RadioList: [],
				// 用户车辆信息列表
				VehicleList: [],
				VehicleModel: {
					"id": 0,
					"UserId": 0,
					"CarModel": "",
					"CarColour": "",
					"Scratch": "良好",
					"Corrosion": "良好",
					"BeDamaged": "良好",
					"FlyingPaint": "良好",
					"CarDefault": true,
					"AddTime": "2021-12-31T02:29:14.609Z",
					"UpdateTime": "2021-12-31T02:29:14.609Z"
				},
				VeModel: {
					"UserId": 0,
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 20,
					"Sort": [{
						"Field": "",
						"Type": 0
					}]
				},
				// 漆面划痕 0--良好  1--一般 2--中等  3--严重 
				checkedScratch: 0,
				// 漆面腐蚀0--良好  1--一般 2--中等  3--严重 
				checkedCorrosion: 0,
				// 漆面破损 0--良好  1--一般 2--中等  3--严重 
				checkedBeDamaged: 0,
				// 沥青飞漆0--良好  1--一般 2--中等  3--严重 
				checkedFlyingPaint: 0,
				typeList: ['良好', '一般', '中等', '严重'],
				StatusModel: {
					"id": 0,
					"UserId": 0,
				},
				bl: true,
				// 车辆值  保存操作
				busitem: null,

			}
		},
		onLoad(data) {
			console.log('小程序二维码跳转参数',data)
			this.ShowVehicleListByUser()
		},
		onReachBottom() {
			var _this = this;
			if (_this.bl) {
				_this.bl = false;
				if (_this.VeModel.pageIndex <= _this.VeModel.TotalCount / _this.VeModel.PageSize) {
					_this.VeModel.pageIndex++;
					_this.ShowVehicleListByUser()
				}
			}
		},
		methods: {
			// 漆面划痕
			SelectedScratch(evt) {
				console.log('evt', evt)
				this.VehicleModel.Scratch = evt.detail.value
				console.log(this.VehicleModel.Scratch)
			},
			// 漆面腐蚀
			SelectedCorrosion(evt) {
				console.log('evtCorrosion', evt)
				this.VehicleModel.Corrosion = evt.detail.value
				console.log(this.VehicleModel.Corrosion)
			},
			// 漆面破损
			SelectedBeDamaged(evt) {
				console.log('evtSelectedBeDamaged', evt)
				this.VehicleModel.BeDamaged = evt.detail.value
				console.log(this.VehicleModel.BeDamaged)
			},
			// 沥青飞起
			SelectedFlyingPaint(evt) {
				console.log('SelectedFlyingPaint', evt)
				this.VehicleModel.FlyingPaint = evt.detail.value
				console.log(this.VehicleModel.FlyingPaint)
			},
			// 根据用户ID来获取该用户下面的所有车辆
			ShowVehicleListByUser() {
				let json_id = uni.getStorageSync('userinfo').data.id
				this.VeModel.UserId = json_id
				this.API.GetVehicleListByUser(this.VeModel).then(res => {
					console.log('返回的数据', res)
					if (res.data.code == 200) {
						res.data.data.rows.forEach((item,index)=>{
							if(item.CarDefault==true){
								this.busitem=item
							}else{
								this.busitem=null
							}
						})
						if (res.data.data.total > 0) {
							if (this.bl) {
								this.VehicleList = res.data.data.rows
							} else {
								this.VehicleList = this.VehicleList.concat(res.data.data.rows)
							}
							this.VeModel.TotalCount = res.data.data.total
						} else {
							uni.showToast({
								title: '暂无数据',
								icon: 'none'
							})
							this.$refs.popup.show() // 显示
							this.VehicleModel.CarDefault = 1

						}
					}
				})
			},


			// 展示车型编辑新增
			modify(obj) {
				this.$refs.popup.show() // 显示
				console.log('obj数据', obj)
				if (obj == null) {
					// 新增
					this.VehicleModel.id = 0
					let json_id = uni.getStorageSync('userinfo').data.id
					this.VehicleModel.UserId = json_id
					this.VehicleModel.CarModel = ''
					this.VehicleModel.CarColour = ''
					this.checkedScratch = this.checkedCorrosion = this.checkedBeDamaged = this.checkedFlyingPaint = 0
					this.VehicleModel.Scratch = '良好'
					this.VehicleModel.Corrosion = '良好'
					this.VehicleModel.BeDamaged = '良好'
					this.VehicleModel.FlyingPaint = '良好'
					this.VehicleModel.CarDefault = false
				} else {
					// 修改
					this.VehicleModel.id = obj.id
					this.VehicleModel.UserId = obj.UserId
					this.VehicleModel.CarModel = obj.CarModel
					this.VehicleModel.CarColour = obj.CarColour
					this.VehicleModel.Scratch = obj.Scratch
					this.checkedScratch = this.typeList.findIndex(t => t == this.VehicleModel.Scratch);
					this.VehicleModel.Corrosion = obj.Corrosion
					this.checkedCorrosion = this.typeList.findIndex(t => t == this.VehicleModel.Corrosion);
					this.VehicleModel.BeDamaged = obj.BeDamaged
					this.checkedBeDamaged = this.typeList.findIndex(t => t == this.VehicleModel.BeDamaged);
					this.VehicleModel.FlyingPaint = obj.FlyingPaint
					this.checkedFlyingPaint = this.typeList.findIndex(t => t == this.VehicleModel.FlyingPaint);
					this.VehicleModel.CarDefault = obj.CarDefault
				}
			},
			// 提交新增或者修改
			Submit() {
				let jsonstorage = uni.getStorageSync('userinfo').data
				this.VehicleModel.UserId = jsonstorage.id
				if(this.VehicleModel.CarModel==''){
					uni.showToast({
						title:'请输入品牌型号',
						icon:'none'
					})
				}else if(this.VehicleModel.CarColour==''){
					uni.showToast({
						title:'请输入颜色等',
						icon:'none'
					})
				}else if (this.VehicleModel.Scratch == '') {
					uni.showToast({
						title: '请选择漆面划痕',
						icon: 'none'
					})
				} else if (this.VehicleModel.Corrosion == '') {
					uni.showToast({
						title: '请选择漆面腐蚀',
						icon: 'none'
					})
				} else if (this.VehicleModel.BeDamaged == '') {
					uni.showToast({
						title: '请选择漆面破损',
						icon: 'none'
					})
				} else if (this.VehicleModel.FlyingPaint == '') {
					uni.showToast({
						title: '请选择漆面飞漆',
						icon: 'none'
					})
				} else {
					if (this.VehicleModel.id > 0) {
						// 修改
						this.API.UpdateManagement(this.VehicleModel).then(res => {
							console.log('修改', res)
							if (res.data.code == 200) {
								uni.showToast({
									title: '修改成功',
									icon: 'success'
								})
								this.hide()
								this.ShowVehicleListByUser()
							} else {
								uni.showToast({
									title: res.data.message,
									icon: 'none'
								})
							}
						})
					} else {
						// 新增
						this.API.CreateManagement(this.VehicleModel).then(res => {
							console.log('新增', res)
							if (res.data.code == 200) {
								uni.showToast({
									title: '新增成功',
									icon: 'success'
								})
								this.hide()
								this.ShowVehicleListByUser()
							} else {
								uni.showToast({
									title: res.data.message,
									icon: 'none'
								})
							}
						})
					}
				}
			},
			hide() {
				this.$refs.popup.hide() //隐藏
			},
			// 删除车辆信息
			deleteVehicle(item) {
				if (item.CarDefault) {
					uni.showToast({
						title: '默认车辆不可删除',
						icon: 'none'
					})
				} else {
					this.API.DeleteManagement({
						ids: item.id
					}).then(res => {
						console.log('删除返回数据', res)
						if (res.data.code == 200) {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							this.ShowVehicleListByUser()
						} else {
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							})
						}
					})
				}

			},
			// 切换单选按钮状态
			setAsDefaultVehicle(item, index) {
				let jsonstorage = uni.getStorageSync('userinfo')
				console.log('索引', index)
				console.log('数据', item)
				this.busitem = item
				console.log('busitem', this.busitem)
				if (item.CarDefault == true) {
					uni.showToast({
						title: '已是默认车辆',
						icon: 'none'
					})
				} else {
					this.StatusModel.id = item.id
					this.StatusModel.UserId = jsonstorage.data.id
					this.preservation()
				}
			},
			// 保存数据进行跳转
			Saves() {
				if (this.VeModel.TotalCount == 0) {
					uni.showToast({
						title: '请添加车辆',
						icon: 'none'
					})
				} else {
					uni.redirectTo({
						url: '../preservation/preservation?busmodel=' + encodeURIComponent(JSON.stringify(this
							.busitem))
					})
				}
			},
			// 保存状态
			preservation() {
				this.API.UpdateCarDefault(this.StatusModel).then(res => {
					console.log('修改状态进行保存', res)
					if (res.data.code == 200) {
						let that = this
						uni.showLoading({
							title: '正在更换',
						})
						that.ShowVehicleListByUser()
						setTimeout(() => {
							uni.hideLoading()
							uni.showToast({
								title: '已设置',
								icon: 'success'
							})
						}, 500)


					} else {
						uni.showToast({
							title: '更改默认车辆失败',
							icon: 'none'
						})
					}
				})
				// setTimeout(() => {
				// 	uni.redirectTo({
				// 		url: '../preservation/preservation'
				// 	})
				// }, 1000)

			}

		}

	}
</script>
<style>
	.wyb-popup-box {
		background-color: transparent !important;
	}
</style>
<style lang="scss">
	
	// ------
	.LL{
	display: flex;	
	justify-content: center;
	}
	
	.LL > radio{
		
		width: calc(100%/4 * 1.2);
		transform: scale(0.8);
		
		text-align: center;
	}
	
	
	
	/* 背景图片 */
	.bg-click {
		background-color: gray;
	}

	.button-yuanjiao {
		background: linear-gradient(to right, #E1E1E1, #9E9E9E)
	}


	.background-s {
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		z-index: -1;
	}

	// -----------------------------------
	.background {
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		border-radius: 30rpx;
		z-index: -1;
	}

	/* 全局大小 */
	.overallSituation {
		width: 100%;
		// height: 960rpx;
		// border: #007AFF 1rpx solid;
		background-color: #101010;

	}

	/* 车辆类型 */
	.VehicleType {
		width: 100%;
		height: 117rpx;
		background-color: #1f1f1f;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #007AFF;
		font-size: 22rpx;
		border-radius: 0 0 50rpx 50rpx;

		>view {
			text-align: center;
			// background-color: red;
			border-left: 2rpx solid #f8e2aa;
			width: 100%;
			color: #f8e2aa;
		}
	}

	// 车型颜色
	.textRight {
		flex: 3;
		// border: 2rpx solid red;

	}

	// 划痕腐蚀破损飞漆
	.textLeft {
		flex: 1;
		text-align: center;
		color: #f8e2aa;
		// border: 2rpx solid red;
	}

	// --------------------------------------------
	// 车辆详情列表
	.listOfVehicleDetails {
		width: 100%;
		height: 137rpx;
		font-size: 22rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #1f1f1f;
		margin-top: 6rpx;
		border-radius: 20rpx;
	}

	// 详情列表1
	.listOfDetailsOne {
		width: 100%;
		height: 50rpx;
		font-size: 22rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		color: #cedae3;
		// background-color: #E80080;
	}

	.listOfDetailsOne-1 {
		// border: 2rpx solid red;
		color: #cedae3;
	}

	// 设置默认车辆 
	.setDefaultVehicle {
		width: 100%;
		height: 50rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		color: #f8e2aa;
		font-size: 22rpx;
	}

	.otsSelected {
		display: flex;
		justify-content: center;
	}

	.otsSelectedImg {
		width: 23rpx;
		height: 23rpx;
		background-image: url(../../static/xiaoyuan.png);
		background-size: 100%;
		margin-right: 12rpx;
	}

	/* 点击图片 */
	.listOfDetailsTwo-1 {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	// --------------------------------------------
	// 背景图片
	.wyb-popup-box {
		background-color: transparent;
	}

	.popup-content {
		width: 100%;
		height: 100%;
		position: fixed;
		/* border-radius:50% 50% 0 0 ; */
		background-size: 100% 100%;
		border: 6rpx solid #e7b96e;
		border-radius: 30rpx;
		overflow: hidden;
		box-sizing: border-box;
		// z-index: -1;
	}

	.input-ont {
		width: 90%;
		margin: 50rpx auto;
		margin-bottom: 0;

	}

	// 第二个搜索框
	.input-two {
		width: 90%;
		margin: 70rpx auto;
		margin-bottom: 0;
	}

	// 点击勾选
	.clickTick {
		width: 90%;
		margin: 70rpx auto;
		margin-bottom: 0;
		color: #FFFFFF;
	}

	.tick {
		width: 70%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #FFFFFF;
		// background-color: #AD1212;
		// flex-direction: column;
		// justify-content: space-around;
		// align-items: ;

	}

	.label {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		// background-color: #007BFF;
	}

	.radio1 {
		// width: 100rpx;
		// height: 100rpx;
		color: #000 !important;
		transform: scale(0.6);
		// background-color: #00B26A;
		// display: flex;
		// justify-content: center;
		// align-items: center;
	}

	// 车辆品牌型号
	.uni-column {
		width: 100%;
		height: 60rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// background-color: #007AFF;
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.scratch {
		width: 22%;
		height: 100%;
		text-align: left;
		line-height: 60rpx;
		// line-height: ;
	}

	// input输入框
	.uni-input-1 {
		width: 380rpx;
		background-color: #FFFFFF;
		height: 100%;
		border-radius: 30rpx;
	}

	.uni-input {
		width: 450rpx;
		background-color: #FFFFFF;
		height: 100%;
		border-radius: 30rpx;
	}

	.clickTickText {
		color: #FFFFFF;
		font-size: 30rpx;


	}

	// 温馨提示
	.reminder {
		height: 110rpx;
		display: flex;
		margin-top: 25rpx;
		line-height: 50rpx;
		// background-color: #007AFF;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		>text {
			// line-height: 50rpx;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.reminder-fatalFrame {
		// width: 300rpx;
		// height: 200rpx;
		// border: 2rpx solid red;
		margin: 40rpx auto;
		text-align: center;
	}

	.reminder-one {
		font-weight: bold;
		color: #f8e2aa !important;
		font-size: 28rpx;

	}

	// 取消按钮
	.cancel {
		display: flex;
		justify-content: space-around;
	}

	.button {
		// color: #FFFFFF;
		// width: 50rpx;
		// height: 30rpx;
		// background-color: red;
		background-color: unset;
		color: #f7ebb4;
		font-size: 30rpx;
	}

	// 爱车车面状况
	.carSurfaceCondition {
		display: flex;
		justify-content: center;
	}

	// 漆面划痕
</style>