lanan-app/pages/rescue/order.vue

<!-- 选择页 -->
<template>
	<view class="content">
		<v-navigation-bar-vue title="立即救援"></v-navigation-bar-vue>
		<view class="bil">
			<view class="top-white">
				请选择您需要的业务
			</view>
			<view class="box">
				<template v-for="(item, index) in busiTypeList">
					<view v-if="index !== 4 || role[0] == 'jjdd'" :key="index" class="xz-box" :class="{ checked: busiType === index + 1 }" @click="getsx(index + 1)">
						<image class="xz-box-icon" :src="item.icon" mode="aspectFit"></image>
						<view class="box-wenzi">{{item.label}}</view>
						<view class="checkedFlag">
						</view>
						<!-- <uni-icons type="plus"></uni-icons> -->
						<uni-icons class="checkedFlagIcon" type="checkmarkempty" size="22" color="#fff"></uni-icons>
					</view>
				</template>
				<!-- <view class="xz-box" :class="{ checked: busiType === 1 }" id="y1" @click="getsx(1)">
					<image class="xz-box-icon" src="@/static/icons/order/tuoche.png" mode="aspectFit"></image>
					<view class="box-wenzi">拖车</view>
				</view> -->
				<!-- <view class="xz-box" :class="{ checked: busiType === 2 }" id="y2" @click="getsx(2)">
					<image class="xz-box-icon" src="@/static/icons/order/songyou.png" mode="aspectFit"></image>
					<view class="box-wenzi">送油</view>
				</view>
				<view class="xz-box" :class="{ checked: busiType === 3 }" id="y3" @click="getsx(3)">
					<image class="xz-box-icon" src="@/static/icons/order/dadian.png" mode="aspectFit"></image>
					<view class="box-wenzi">搭电</view>
				</view>
				<view class="xz-box" :class="{ checked: busiType === 4 }" id="y4" @click="getsx(4)">
					<image class="xz-box-icon" src="@/static/icons/order/huantai.png" mode="aspectFit"></image>
					<view class="box-wenzi">换胎</view>
				</view>
				<view class="xz-box" :class="{ checked: busiType === 5 }" v-if="role[0] == 'jjdd' " id="y5" @click="getsx(5)">
					<view class="box-wenzi">扣车</view>
				</view> -->
			</view>
			<!-- 			<view class="anniu" @click="goindex()">
				<view class="">立即进入</view>
			</view> -->
			<view class="submitBtn" @click="hanleOkBusiType">下一步</view>
		</view>
		<tabBar msg="1"></tabBar>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import tabBar from '../../components/tabBar/tabBar.vue'
	import VNavigationBarVue from '../../components/VNavigationBar.vue';

	export default {
		data() {
			return {
				sx1: true,
				sx2: false,
				isAppointment: '',
				role: '',
				busiType: '',
				busiTypeList: [{
						label: '拖车',
						icon: require('@/static/icons/order/tuoche.png')
					},
					{
						label: '送油',
						icon: require('@/static/icons/order/songyou.png')
					},
					{
						label: '搭电',
						icon: require('@/static/icons/order/dadian.png')
					},
					{
						label: '换胎',
						icon: require('@/static/icons/order/huantai.png')
					},
					{
						label: '扣车',
						icon: require('@/static/icons/order/tuoche.png')
					},
				]
			}
		},
		components: {
			tabBar,
			VNavigationBarVue
		},
		onLoad(option) {
			this.isAppointment = option.isAppointment
			this.role = uni.getStorageSync('role')
		},
		methods: {
			getback() {
				uni.navigateBack({
					delta: 1,
				})
			},
			getsx(id) {
				this.busiType = id
				// uni.navigateTo({
				// 	url: '/pages/rescue/initiate?id=' + id + '&isAppointment=' + this.isAppointment
				// })
			},
			hanleOkBusiType() {
				uni.navigateTo({
					url: '/pages/rescue/initiate?id=' + this.busiType + '&isAppointment=' + this.isAppointment
				})
			},
			goindex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background: #F7F8FC;
		display: flex;
		flex-direction: column;
	}

	.bil {
		flex: 1;
		height: 0;
		box-sizing: border-box;
		padding: 30rpx 36rpx;
		overflow: auto;
		padding-bottom: 120rpx;
	}

	.top-icon {
		display: flex;
		color: #999999;
		margin-bottom: 25px;
	}

	.top-white {
		color: #333333;
		font-size: 19px;
		font-weight: bold;
		// margin-top: 40px;
	}

	.box {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.xz-box {
		width: 330rpx;
		height: 396rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 36rpx;
		transition: all ease 400ms;
		overflow: hidden;

		.checkedFlagIcon {
			display: none;
		}

		&.checked {
			box-sizing: border-box;
			position: relative;
			border: 2rpx solid #478AFA;

			.checkedFlag {
				background-color: #478AFA;
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				right: -60rpx;
				bottom: -60rpx;
				transform: rotate(45deg);
				z-index: 1;
			}

			.checkedFlagIcon {
				display: inline-block;
				position: absolute;
				z-index: 2;
				bottom: 0;
				right: 0;
			}
		}

		.xz-box-icon {
			width: 130rpx;
			height: 130rpx;
			margin-bottom: 26rpx;
		}

		.box-wenzi {
			font-size: 28rpx;
			color: #000000;
		}
	}

	.submitBtn {
		margin-top: 30rpx;
		background: #327DFB;
		border-radius: 12rpx;
		padding: 24rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
	}

	.anniu {
		background: linear-gradient(105deg, #FFE3AC 0%, #F3BA60 98%);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-weight: 400;
		color: #542F0E;
		width: 100%;
		border-radius: 10rpx;
		height: 45px;
		margin-top: 40px;
	}

	// #y1 {
	// 	background-image: url('../../static/tc.png');
	// }

	// #y2 {
	// 	background-image: url('../../static/sy.png');
	// }

	// #y3 {
	// 	background-image: url('../../static/dd.png');
	// }

	// #y4 {
	// 	background-image: url('../../static/ht.png');
	// }

	// #y5 {
	// 	background-image: url('../../static/kc.png');
	// }
</style>