<template>
	<view class="page">
		  <cu-custom :isBack="true" title="在线客服"></cu-custom>
			<view class="flex justify-center bg-white padding-tb-sm">
				 <view class="link" style="background-color:#9aed6f;">
					  <button class="button" open-type="contact" @contact="handleContact"></button>
					 	<!-- <image src="/static/imgs/mine/wechat.png" mode="widthFix"></image> -->
						<text class="iconfont" style="font-size:32px;">&#xe6c7;</text>
				 </view>
				 <view class="link" @tap="call" style="background-color:#5fcfe0;margin-left:160rpx;">
					 <!-- <image src="/static/imgs/mine/tel.png" mode="widthFix"></image> -->
					 <text class="iconfont" style="font-size:32px;">&#xe612;</text>
				 </view>
			</view>
			<scroll-view class="questions margin-top-sm pardding-lr-sm  bg-white">
				 <view class="cu-list menu">
					<view class="questions-title margin-top">热点问题</view>
					<view class="cu-item arrow solid-bottom" v-for="(item,index) in list" :key="index" @tap="answer(item)">
						<view class="content margin-left-sm">
							<text class="text-black">{{item.title}}</text>
						</view>
					</view>
				 </view>
			</scroll-view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '07592222030',
      list: [
        {
          id: 1,
          title: '报课注意事项？',
          content: '1、购买本课程后第三节课起不接受退课、退费申请；\n' +
            '2、因节假日冲突未上的课程，会进行调课补回；\n' +
            '3、请假两次以内可安排补课，第三次起不予补课及退费；\n' +
            '4、本平台对以上细则有最终解释权。'
        },
        { id: 2, title: '怎么得到报课结果？', content: '报课成功之后会有消息提醒，请您耐心等待即可' },
        { id: 3, title: '如何退课？', content: '发起退课之后，经过审核通过，退课金额会自动转到您的微信，请您放心就好了' },
        { id: 4, title: '如何接送？', content: '进入当天课程即可进行接送,还可以看到最新课堂动态喔' }
      ]
    }
  },
  methods: {
    answer(item) {
      uni.showModal({
        title: item.title,
        content: item.content,
        showCancel: false,
        success: res => {
          if (res.confirm) {

          }
        }
      })
    },
    call() {
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/common/css/mixin.scss';
.page{
	height:100vh;
}
.link{
	position:relative;
	width:60px;
	height:60px;
	line-height:60px;
	color:#fff;
	text-align:center;
	border-radius:40%;
	.button{
    height: 75px;
    width: 75px;
    text-align: center;
    position: absolute;
    z-index: 2;
    background: #fff;
    border: none;
    outline: none;
    opacity: 0;
	}
}
.questions{
	height:calc(100vh - 240px);
	&-title{
		@include title(0,16px);
		padding-left:40rpx;
	}
}
</style>
