JP-ChargeTeam51/pages/user/contactService.vue

<template>
	<view>
		<ujp-navbar title="联系客服" ></ujp-navbar>
		<view class="service" @click="servicePhone">
			<view class="left">
				<view class="text">
					平台服务
				</view>
				<view class="tel">
					{{telephone.serviceNumber}}
				</view>
			</view>
			<view class="img-box">
				<img src="../../assets/img/fas fa-phone@3x.png" alt="">
			</view>
		</view>
		
		<view class="service breakdown" @click="breakdownPhone">
			<view class="left">
				<view class="text">
					故障反馈
				</view>
				<view class="tel">
					{{telephone.breakdownNumber}}
				</view>
			</view>
			<view class="img-box">
				<img src="../../assets/img/fas fa-phone@3x.png" alt="">
			</view>
		</view>
		
		<view class="service after-sale" @click="afterPhone">
			<view class="left">
				<view class="text">
					售后处理
				</view>
				<view class="tel">
					{{telephone.afterNumber}}
				</view>
			</view>
			<view class="img-box">
				<img src="../../assets/img/fas fa-phone@3x.png" alt="">
			</view>
		</view>
		
		<!-- 意见反馈 -->
		<view class="feedback">
			<view class="title oldTextjp2" oldstyle="font-size: 16px;">
				您也可以在线提交反馈意见：
			</view>
			<u-button class="oldTextjp2" oldstyle="font-size: 18px;" @click="feedback">意见反馈</u-button>
		</view>
		
		<view>
			<u-modal v-model="show" @confirm="confirmPhone" :confirm-text="confirmText" confirm-color="#606266" :show-cancel-button="true" ref="uModal" 
				:asyncClose="true" :title="title" :content="content" :content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				telephone: {
					serviceNumber: '400-8899-619',
					breakdownNumber: '15607217777',
					afterNumber: '15607217777',
				},
				userId: '',
				show: false,
				title: '',
				content: '',
				confirmText: '拨打电话',
			}
		},
		onShow() {
			if(this.carhelp.getPersonInfo()) {
				this.userId = this.carhelp.getPersonInfo().id;
			}
		},
		methods: {
			servicePhone() {
				this.title = '平台服务';
				this.content = this.telephone.serviceNumber;
				this.show = true;
			},
			breakdownPhone() {
				this.title = '故障反馈';
				this.content = this.telephone.breakdownNumber;
				this.show = true;
			},
			afterPhone() {
				this.title = '售后处理';
				this.content = this.telephone.afterNumber;
				this.show = true;
			},
			confirmPhone(){
				this.show = false;
				uni.makePhoneCall({
					phoneNumber:this.content //仅为示例
				});
			},
			feedback() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/message'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}		
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.service{
		width: 91.4%;
		margin:12px auto 0;
		padding: 24px 20px;
		height: 100px;
		display: flex;
		justify-content: space-between;
		background:linear-gradient(to right,#39BCFD,#3F70E6);
		color: #fff;
		border-radius: 8px;
		
		.text{
			line-height: 28px;
			color: rgba(255, 255, 255, 100);
			font-size: 24px;
		}
		.tel{
			height: 24px;
			color: rgba(255, 255, 255, 100);
			font-size: 20px;
			margin-top: 4px;
		}
		.img-box{
			
			padding-top: 12px;
			
			img{
				width: 28px;
				height: 28px;
				
				
			}
		}
	}
// 故障处理
.breakdown{
	background:linear-gradient(to right,#F19063,#EA624C);
}
// 售后
.after-sale{
	background:linear-gradient(to right,#30CDBD,#04C08F);
}
.feedback{
	padding: 40px 18px;
}
  .u-btn{
	  background-color: rgba(244, 248, 255, 100);
	  color: rgba(16, 16, 16, 100);
	  font-size: 16px;
	  border-radius: 8px;
	  height: 44px;
	  margin-top: 12px;
	  border: 1px solid rgba(172, 203, 255, 100);
  }
</style>