guosen-ldt-client/pagesD/comps/modal-checked.vue

<template>
	<view class="">
		<u-modal @confirm="confirm"  v-model="show" title="请选择服务方式" confirm-color="#EF9944">
			<view class="modal-content">
				<view v-for="(item,index) in list" :key="index"
				 @click="activeIndex=index" class="item" :class="{'active':activeIndex==index}">
					<view class="flex">
						<image class="img1" :src="item.icon" mode="widthFix"></image>
						<text class="center">{{item.name}}</text>
					</view>
					<view class="">
						<image v-if="activeIndex==index" class="img2 center" src="/pagesD/static/icon/checked.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	props:{
		list:Array
	},
	data() {
		return {
			show:false,
			activeIndex:0
		};
	},
	onLoad() {
		
	},
	methods:{
		showModal(){
			this.show=true
		},
		hideModal(){
			this.show=false
		},
		confirm(){
			this.$emit('confirm',this.activeIndex)
		}
	}
};
</script>

<style lang="scss" scoped>
	.modal-content{
		padding:70rpx 30rpx;
		
		.img1{
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
			margin-left: 20rpx;
		}
		.img2{
			width: 36rpx;
			height: 36rpx;
			margin-right: 20rpx;
		}
		.img3{
			width: 42rpx;
			height: 42rpx;
			margin-right: 20rpx;
			margin-left: 20rpx;
		}
		
		 .item{
			display: flex;
			justify-content: space-between;
			background-color: #f7f7f7;
			border-radius: 50rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #696969;
			
		}
		
		.active {
			color: #0b0100;
			// background-color:rgba(255, 148, 71,.3);
			background-color: #fef6e1;
			
			
			image{
				transform: scale(1.3);
			}
			
			text{
				transform: scale(1.1);
			}
		}
	}
</style>