<template>
	<view class="contact-page">
		<!-- 顶部导航栏 -->
		<custom-navbar 
		  title="联系客服" 
		  :show-back="true"
		  title-color="#000"
		  background-color="transparent"
		></custom-navbar>
		<view class="contact-cont">
			<image src="/static/images/concact_icon.png" class="contact-icon" mode="aspectFit"></image>
			<text class="contact-phone">{{phone}}</text>
			<text class="contact-time">工作时间：9:00-18:00</text>
		</view>
		<view class="btn-box" @click="callPhone">
			<text class="btn-text">拨打电话</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '19950079687'
			}
		},
		onLoad(options) {
			this.phone = options.phone || '19950079687'
		},
		methods: {
			// 拨打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.phone //仅为示例
				})
			}
		}
	}
</script>

<style>
.contact-cont {
	padding: 80rpx 0 132rpx;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	align-items: center;
}
.contact-icon {
	width: 145rpx;
	height: 165rpx;
}
.contact-phone {
	font-size: 45rpx;
	font-weight: 500;
	color: #333333;
	margin-top: 40rpx;
	margin-bottom: 24rpx;
}
.contact-time {
	font-size: 30rpx;
	font-weight: 400;
	color: #91908F;
}
.btn-box {
	background: linear-gradient( 180deg, #F52540 0%, #E8101E 100%);
	height: 88rpx;
	border-radius: 43rpx;
	font-weight: 500;
	font-size: 40rpx;
	color: #FFFFFF;
	line-height: 42rpx;
	text-align: left;
	font-style: normal;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
