gubersail-shop-app/pages/home/insurance/rules.vue

<template>
	<view class="page flex-col justify-between">
		<view class="group_2 flex-col justify-end">
			<view class="group_3 flex-col">
				<text class="text_2">库比森报轮胎保服务规则</text>
				<view class="text-group_1 flex-col justify-between">
					<view class="text-wrapper_1">
						<text class="paragraph_1">
							一、什么是库比森“库比森轮胎宝”
							<br />
						</text>
						<text class="paragraph_2">
							库比森轮胎“库比森轮胎宝”是库比森轮胎为回馈广大车友对公司的信任与支持，针对于中国大陆地区销售的库比森轮胎、的指定规格，推出订单一项安全出行增值服务。
							<br />
							二、轮胎保保障范围”
							<br />
							针对于中国大陆地区销售的库比森轮胎的指定规格，不包括全钢轮胎
							<br />
						</text>
						<text class="paragraph_3">
							二、轮胎保保障范围
							<br />
						</text>
						<text class="paragraph_4">
							1、保障对象:购买库比森轮胎制定产品的7座以下(含7座)乘用车。
							<br />
							2、保障条件:只限于生产日期不超过75周的库比森出品的指定规格轮胎。
							<br />
							3、保障期限:非营运车辆轮胎安装后1年。
							<br />
							4、保障范围:行驶过程中轮胎撞击鼓包。
							<br />
							5、对付方式:符合保障要求的轮胎通过购买门店兑现给客户相同规格轮胎一条。(门店人工费、动平衡等费用不在赔付范围内)
							<br />
						</text>
						<text class="paragraph_5">
							四、如何申请赔付
							<br />
						</text>
						<text class="paragraph_6">
							用户登入“轮胎宝”微信小程序，选择“申请轮胎保障”，在参保的轮胎信息中找到要申请保障的轮胎并申请。用户持小程序记录，到库比森认证的购胎门店进行确认，确认后即可更换新胎。
							<br />
						</text>
						<text class="paragraph_7">
							五、轮胎保非赔付范围有哪些
							<br />
						</text>
						<text class="paragraph_8">
							1、权利人不能提供真实轮胎及购买信息或者信息有误的;
							<br />
							2、轮胎碾压损坏，导致没有完整的品牌标识，或者胎体不完整的。
							<br />
							2、申请保障时轮胎已超出轮胎保障有效期的;
							<br />
							3、地震、火灾、爆炸、暴雨、洪水、台风等自然灾害在内的不可抗力因素;
							<br />
							4、注册库比森“库比森轮胎宝”时已超出工厂质保期的轮胎;
							<br />
							5、受损轮胎与生成保障时所填写的车牌号码、轮胎规格、轮胎条形码等相关信息不匹配的;
							<br />
							6、受损轮胎非门店购买、被盗、被遗弃或其他任何原因导致无法回收到轮胎的;
							<br />
							7、轮胎的条形码、识别码、品牌型号等被破坏、移除、磨损或其他原因无法进行识别的;
							<br />
							8、7座以上车辆发生意外的轮胎损失;
							<br />
							9、受损轮胎非当地经销商下属网络店购买;
							<br />
							10、侧面补修过的轮胎;
							<br />
							11、因自然磨损、腐蚀、人为损害(包括但不限于人为刺扎、故意撞击等)等非意外原因导致的轮胎损坏;
							<br />
							13、申请保障时轮胎纹理磨损胎面剩余花纹磨损深度小于4mm的;
							<br />
							14、先出现鼓包等保障现象，后进行注册登记的;
							<br />
							15、发生在中华人民共和国境外(包含香港、澳门及台湾地区)的损失;
							<br />
							<!-- 等费用均不在保障范围
							<br /> -->
							16、库比森保留对提供信息主动造假所产生的各种纠纷采取法律措施的权益。
							<br />
							17、其他包含在标准条款里的除外条款
						</text>
					</view>
					<text class="text_3">本活动最终解释权归库比森轮胎所有</text>
				</view>
			</view>
			<view style="display: flex;justify-content: center;padding-bottom:40rpx;">

				<button class="button_1 flex-col" style="border-radius: 50px;" @click="inEdit" :disabled="counting">
					{{ buttonText }}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getList
	} from '@/api/home/insurance.js'
	export default {
		data() {
			return {
				counting: false,
				count: 5,
				timer: null
			}
		},
		onLoad() {
			this.startCountdown()
		},
		computed: {
			buttonText() {
				return this.counting ? `${this.count}秒后操作` : '清楚并同意'
			}
		},
		methods: {
			inEdit(row) {
				uni.redirectTo({
					url: '/pages/home/insurance/details',
				});
			},
			startCountdown() {
				if (this.counting) return

				this.counting = true
				this.timer = setInterval(() => {
					if (this.count <= 1) {
						this.resetCountdown()
						return
					}
					this.count--
				}, 1000)
			},
			resetCountdown() {
				clearInterval(this.timer)
				this.counting = false
				this.count = 5
			}
		},
		startCountdown() {
			if (this.counting) return

			this.counting = true
			this.timer = setInterval(() => {
				if (this.count <= 1) {
					this.resetCountdown()
					this.$emit('countdown-end') // 倒计时结束事件
					return
				}
				this.count--
			}, 1000)
		},
		resetCountdown() {
			clearInterval(this.timer)
			this.counting = false
			this.count = 5
		}
	}
</script>


<style lang="scss" scoped>
	.page {
		background-color: rgba(255, 255, 255, 1);
		position: relative;
		overflow: hidden;

		.group_1 {
			height: 128rpx;
			background: url(https://lanhu-oss-proxy.lanhuapp.com/5e17a28602008e9065022c5935c089de) -2rpx 0rpx no-repeat;
			background-size: 752rpx 128rpx;

			.image_1 {
				width: 686rpx;
				height: 24rpx;
				margin: 8rpx 0 0 32rpx;
			}

			.nav-bar_1 {
				width: 748rpx;
				height: 84rpx;
				margin: 14rpx 0 2rpx 0;

				.icon_1 {
					width: 22rpx;
					height: 41rpx;
					margin: 17rpx 0 0 32rpx;
				}

				.text_1 {
					width: 401rpx;
					height: 34rpx;
					overflow-wrap: break-word;
					color: rgba(255, 255, 255, 1);
					font-size: 36rpx;
					font-family: SourceHanSansCN-Regular;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 36rpx;
					margin: 21rpx 173rpx 0 120rpx;
				}
			}
		}

		.group_2 {
			background-color: rgba(244, 244, 244, 1);
			border-radius: 6px;

			.group_3 {
				background-color: rgba(255, 255, 255, 1);
				margin-top: 31rpx;

				.text_2 {
					width: 306rpx;
					height: 26rpx;
					overflow-wrap: break-word;
					color: rgba(95, 95, 95, 1);
					font-size: 28rpx;
					font-family: SourceHanSansCN-Bold;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 28rpx;
					margin: 45rpx 0 0 61rpx;
				}

				.image_2 {
					width: 684rpx;
					height: 2rpx;
					margin: 37rpx 0 0 33rpx;
				}

				.text-group_1 {
					width: 622rpx;
					margin: 39rpx 0 55rpx 62rpx;

					.text-wrapper_1 {
						width: 622rpx;
						overflow-wrap: break-word;
						font-size: 0;
						font-family: SourceHanSansCN-Regular;
						font-weight: normal;
						text-align: left;
						line-height: 40rpx;

						.paragraph_1 {
							width: 622rpx;
							overflow-wrap: break-word;
							color: rgba(3, 128, 59, 1);
							font-size: 24rpx;
							font-family: SourceHanSansCN-Regular;
							font-weight: normal;
							text-align: left;
							line-height: 40rpx;
						}

						.paragraph_2 {
							width: 622rpx;
							overflow-wrap: break-word;
							color: rgba(95, 95, 95, 1);
							font-size: 24rpx;
							font-family: SourceHanSansCN-Regular;
							font-weight: normal;
							text-align: left;
							line-height: 40rpx;
						}

						.paragraph_3 {
							width: 622rpx;
							overflow-wrap: break-word;
							color: rgba(3, 128, 59, 1);
							font-size: 24rpx;
							font-family: SourceHanSansCN-Regular;
							font-weight: normal;
							text-align: left;
							line-height: 40rpx;
						}

						.paragraph_4 {
							width: 622rpx;
							overflow-wrap: break-word;
							color: rgba(95, 95, 95, 1);
							font-size: 24rpx;
							font-family: SourceHanSansCN-Regular;
							font-weight: normal;
							text-align: left;
							line-height: 40rpx;
						}

						.paragraph_5 {
							width: 622rpx;
							overflow-wrap: break-word;
							color: rgba(3, 128, 59, 1);
							font-size: 24rpx;
							font-family: SourceHanSansCN-Regular;
							font-weight: normal;
							text-align: left;
							line-height: 40rpx;
						}

						.paragraph_6 {
							width: 622rpx;
							overflow-wrap: break-word;
							color: rgba(95, 95, 95, 1);
							font-size: 24rpx;
							font-family: SourceHanSansCN-Regular;
							font-weight: normal;
							text-align: left;
							line-height: 40rpx;
						}

						.paragraph_7 {
							width: 622rpx;
							overflow-wrap: break-word;
							color: rgba(3, 128, 59, 1);
							font-size: 24rpx;
							font-family: SourceHanSansCN-Regular;
							font-weight: normal;
							text-align: left;
							line-height: 40rpx;
						}

						.paragraph_8 {
							width: 622rpx;
							overflow-wrap: break-word;
							color: rgba(95, 95, 95, 1);
							font-size: 24rpx;
							font-family: SourceHanSansCN-Regular;
							font-weight: normal;
							text-align: left;
							line-height: 40rpx;
						}
					}

					.text_3 {
						width: 391rpx;
						height: 24rpx;
						overflow-wrap: break-word;
						color: rgba(190, 190, 190, 1);
						font-size: 24rpx;
						font-family: SourceHanSansCN-Regular;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 40rpx;
						margin-top: 51rpx;
					}
				}
			}

			.button_1 {
				background-color: rgba(3, 128, 59, 1);
				border-radius: 10px;
				width: 400rpx;
				color: rgba(255, 255, 255, 1);


			}

			::v-deep uni-button[disabled]:not([type]) {
				background-color: #03803bad !important;
				color: rgba(255, 255, 255, .3);
			}
		}
	}
</style>