meishidaYH/msdYongHu/components/dachexuancx/dachexuancx.vue

<template>
	<view class="contentColumnC">
		<view class="contentColumnC popViewctv">
			<view class="contentInRowS sizeSpace">
				<view class="contentColumnC" @click="luxianSelect(0)">
					<text class="xianluti" :style="xianluIndex==0?'background-color:#E86E48;':''">推荐线路</text>
					<text class="timeText">{{XChengObj.estimatedDuration}}</text>
					<text class="luchengText">{{XChengObj.distance}}Km</text>
				</view>
				<!-- <view class="contentColumnC" @click="luxianSelect(1)">
					<text class="xianluti" :style="xianluIndex==1?'background-color:#E86E48;':''">线路2</text>
					<text class="timeText">16分钟</text>
					<text class="luchengText">6.5Km</text>
				</view>
				<view class="contentColumnC" @click="luxianSelect(2)">
					<text class="xianluti" :style="xianluIndex==2?'background-color:#E86E48;':''">线路3</text>
					<text class="timeText">16分钟</text>
					<text class="luchengText">6.5Km</text>
				</view> -->
			</view>
			<view class="sizeSpace" style="margin-top: 26rpx;">
				<text class="textfontB5" >选择车型</text>
			</view>
			<view class="contentColumn">
				<view class="lineBackColor" @click="chexingSle(0)">
					<view class="contentInRowS sizeSpace" style="align-items: center;padding-top: 8rpx;padding-bottom: 16rpx;">
						<view class="contentInRowL" style="align-items: center;">
							<image style="width: 100rpx;height: 50rpx;" src="/static/images/dache/dachetb.png" mode="scaleToFill"></image>
							<text class="ztextfontB3" style="margin-left: 10rpx;">特惠快车</text>
						</view>
						<view class="contentInRowR" style="align-items: center;width: 300rpx;">
							<view class="contentInRowR" style="align-items:center;margin-right: 20rpx;">
								<text class="textfontS3">预估</text>
								<text class="ztextfontB1">{{XChengObj.amount}}</text>
								<text class="textfontS3">元</text>
							</view>
							<uni-icons v-if="selchexList[0]==1" custom-prefix="custom-icon" color="#FFFFFF" type="checkbox" size="30"></uni-icons>
						</view>
					</view>
				</view>
				<view class="lineBackColor" @click="chexingSle(1)">
					<view class="contentInRowS sizeSpace" style="align-items: center;padding-top: 16rpx;padding-bottom: 16rpx;">
						<view class="contentInRowL" style="align-items: center;">
							<image style="width: 100rpx;height: 50rpx;" src="/static/images/dache/dachetb.png" mode="scaleToFill"></image>
							<text class="ztextfontB3" style="margin-left: 10rpx;">特惠快车</text>
						</view>
						<view class="contentInRowR" style="align-items: center;width: 300rpx;">
							<view class="contentInRowR" style="align-items:center;margin-right: 20rpx;">
								<text class="textfontS3">预估</text>
								<text class="ztextfontB1">{{XChengObj.amount}}</text>
								<text class="textfontS3">元</text>
							</view>
							<uni-icons v-if="selchexList[1]==1" custom-prefix="custom-icon" color="#FFFFFF" type="checkbox" size="30"></uni-icons>
						</view>
					</view>
				</view>
				<view class="lineBackColor" @click="chexingSle(2)">
					<view class="contentInRowS sizeSpace" style="align-items: center;padding-top: 16rpx;padding-bottom: 16rpx;">
						<view class="contentInRowL" style="align-items: center;">
							<image style="width: 100rpx;height: 50rpx;" src="/static/images/dache/dachetb.png" mode="scaleToFill"></image>
							<text class="ztextfontB3" style="margin-left: 10rpx;">特惠快车</text>
						</view>
						<view class="contentInRowR" style="align-items: center;width: 300rpx;">
							<view class="contentInRowR" style="align-items:center;margin-right: 20rpx;">
								<text class="textfontS3">预估</text>
								<text class="ztextfontB1">{{XChengObj.amount}}</text>
								<text class="textfontS3">元</text>
							</view>
							<uni-icons v-if="selchexList[2]==1" custom-prefix="custom-icon" color="#FFFFFF" type="checkbox" size="30"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="contentInRowS sizeSpace bottomView">
				<view v-if="selSum==0" class="contentInRowL" style="align-items: center;color: white;width: 400rpx;">
					<text class="textfontS3" style="padding-left: 20rpx;color: white;">至少选择一种车型</text>
				</view>
				<view v-if="selSum>0" class="contentInRowL" style="align-items: center;color: white;width: 400rpx;">
					<text class="textfontS3" style="padding-left: 20rpx;color: white;">已选{{selSum}}种车型 | 预估</text>
					<text class="textfontS3" style="color: white;">{{XChengObj.amount}}</text>
					<text class="textfontS3" style="color: white;">元</text>
				</view>
				<text class="hujiaoBt ztextfontB4" @click="querenhj">确认呼叫</text>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		name:"dachexuancx",
		props: {
			XChengObj:''
		},
		data() {
			return {
				xianluIndex:0,
				chexIndex:0,
				selchexList:[1,0,0],
				selSum:1,
				obj:'',
			};
		},
		methods:{
			setxcObj(obj){
				console.log('setxcObj------',obj)
			},
			luxianSelect(index){
				this.xianluIndex=index;
			},
			chexingSle(index){
				if(this.selchexList[index]==1){
					this.selchexList[index]=0;
				}
				else{
					this.selchexList[index]=1;
				}
				this.obj=this.XChengObj;
				this.obj.taxiType='0';
				this.getShuliang();
			},
			getShuliang(){
				var index = 0;
				for(var i=0;i<this.selchexList.length;i++){
					if(this.selchexList[i]!=0){
						index=index+1;
					}
				}
				this.selSum=index;
			},
			querenhj(){
				if(this.obj==''){
					this.obj=this.XChengObj;
				}
				this.$emit('EQuerenhj',this.obj);
			},
		}
	}
</script>

<style>
.popViewctv{
	width: 700rpx;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	background-color:white
}
.sizeSpace{
	width: 660rpx;
}
.xianluti{
	font-size: 34rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	line-height: 50rpx;
	background-color: darkgray;
	color: black;
	border-radius: 0 0 20rpx 20rpx;
}

.timeText{
	font-size: 36rpx;
	color: black;
}

.luchengText{
	font-size: 28rpx;
	color: darkgray;
}
.lineBackColor{
	margin-top: 20rpx;
	align-items: center;
	background: linear-gradient(to right, #FFFFFF, #E86E48);
}

.bottomView{
	margin-top: 30rpx;
	background-color: #1a1a1a;
	height: 80rpx;
	border-radius: 40rpx;
}

.hujiaoBt{
	background-color: #E86E48;
	line-height: 80rpx;
	border-radius: 40rpx;
	padding-left: 60rpx;
	padding-right: 60rpx;
	text-align: center;
	color: white;
}
</style>