vue-insagent-app/pages/roadRescue/index.vue

<template>
	<view class="page">
		<service-widget @btnClick="btn_click"></service-widget>
		<image class="swiper" src="/static/image/rescue/swpier.png" mode=""></image>
		<view class="classification p-3 dis f-c ">
			<view class="module m-btn-15 p-3 dis j-s a-c" v-for="(item,index) in moduleList" :key="index"
				@click="moduleClick(item.path)">
				<view class="round dis a-c j-c">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="brief dis f-c ">
					<text>{{item.name}}</text>
					<text>{{item.text}}</text>
				</view>
				<u-icon name="arrow-right" color="#b0afb7" size="38"></u-icon>

			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="20" width="90%">
			<view class="Tips p-5 dis f-c ">
				<text>温馨提示</text>
				<text>1.台风、洪水、政府行为等极端天气或特殊情况，无法保证派工时效，但我们会尽最大努力，敬请谅解。</text>
				<text>2.有权益券的人保在保客户，下单时可以用券抵扣费用。</text>
				<text>3.无权益券的人保在保客户，请拨打95518转9申请免费故障救援服务。</text>
				<text>注:人保客户请优先使用以上两种方式救援，非以上两种情况，则该服务将收费!</text>
				<text>4.其他客户可以付费下单，使用救援服务。</text>
				<view class="dis j-s a-c mt-5">
					<u-button style="width: 45%;" type="primary" size="medium" shape="circle"
						@click="next">继续下单</u-button>
					<u-button style="width: 45%;" type="primary" size="medium" shape="circle" :plain="true"
						@click="mobileCall">95518救援</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				moduleList: [{
						name: "搭电救援",
						text: "由于车辆蓄电池(电瓶)亏电，无法启动，需要协助进行搭电启动",
						img: "/static/image/rescue/Grounding.png",
						path: "/pages/roadRescue/Grounding",
					},
					{
						name: "拖车救援",
						text: "因车辆无法正常行驶(非事故导致)需要拖车协助拖至维修点",
						img: "/static/image/rescue/trailer.png",
						path: "/pages/roadRescue/trailer",
					},
					{
						name: "换胎救援",
						text: "车辆单个轮胎损坏，需协助更换备胎",
						img: "/static/image/rescue/replacement.png",
						path: "/pages/roadRescue/replacement",
					}
				],
				path: "",
			}
		},
		onShow() {

		},
		onLoad() {

		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			moduleClick(path) {
				this.path = path;
				this.show = true;
			},
			next() {
				this.show = false;
				uni.navigateTo({
					url: this.path
				})
			},
			mobileCall() {
				uni.makePhoneCall({
					phoneNumber: "95518",
					success: () => {
						console.log("成功拨打电话")
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		height: 100vh;
		background-color: #f5f6f8;
	}

	.swiper {
		width: 100%;
		height: 400rpx;
	}

	.classification {
		.module {
			width: 100%;
			height: 250rpx;
			background: white;
			border-radius: 10px;
			box-shadow: 0 0 10px #efefef;

			.round {
				width: 70px;
				height: 70px;
				background-color: #e8f0fd;
				border-radius: 50%;

				image {
					width: 70%;
					height: 70%;
				}
			}

			.brief {
				width: 60%;

				text:first-child {
					font-size: 16px;
					font-weight: bold;
					color: #33313c;
				}

				text:last-child {
					color: #8687a6;
				}
			}
		}
	}

	.Tips {
		text:first-child {
			font-size: 20px;
			font-weight: bold;
		}
	}
</style>