jp-housekeep-hall/pages/mine/contactService.vue

<template>
	<view>
		<u-navbar title="联系客服"  title-color="#101010" ></u-navbar>
		<u-divider :isnone="queryList.length==0"   nonetext="没有找到相关内容"
			border-color="#CFD2D5">已经到底了</u-divider>
		<view class="background" v-if="false">
			<view class="common-problem">
				<view class="headline">
					常见问题
				</view>
				<!-- 标签 -->
				<view class="tabs">
					<u-tabs :list="list"  font-size="28" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				<!-- 问题 -->
				<view class="problems">
					<u-collapse accordion="false">
							<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :open="item.open" :key="index">
								{{item.body}}
							</u-collapse-item>
						</u-collapse>
				</view>
			</view>
		</view>
		<u-modal v-model="openModalBl" @confirm="confirmPhone" confirm-text="拨打电话" confirm-color="#606266"
			:show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" :content="content"
			:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
			
		<!-- 底部 -->
		<view class="bottom">
			<button class="service" @click="openModalBl=true" >
				<view>
					<image class="img" src="@/assets/img/riFill-customer-service-2-fill 1.svg" mode=""></image>
				</view>
				客服电话（7:00-24:00）
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: "400-8899-619",
				queryList:[],
				openModalBl:false,
				list: [{
					name: '软件使用'
				}, {
					name: '支付及退款'
				}, {
					name: '发票相关问题',
					
				}],
				itemList: [{
									head: "常见问题1",
									body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
									open: true,
									
								},{
									head: "常见问题2",
									body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
									open: false,
								},{
									head: "常见问题3",
									body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
									open: false,
								}],
				current: 0
			}
		},
		methods: {
			confirmPhone() {
				this.openModalBl = false;
				uni.makePhoneCall({
					phoneNumber: this.content //仅为示例
				});
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background{
		position: relative;
		height: 200px;
		background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
		.common-problem{
			position: absolute;
			top: 24rpx;
			left: 32rpx;
			right: 32rpx;
			background-color: #fff;
			border-radius: 8px;
			padding: 40rpx 32rpx;
			.headline{
				color: rgba(16,16,16,1);
				font-size: 36rpx;
			}
			// 标签
			.tabs{
				width: 524rpx;
				border-top: 1px solid rgba(232,232,232,1);
				margin-top: 28rpx;
			}
			.problems{
				margin-top: 8rpx;
			}
		}
	}
  // 底部
  .bottom{
	  background-color: #fff;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  padding: 24rpx 32rpx;
	  
	  .service{
		  display: flex;
		  justify-content: center;
		  align-items: center;	
		  
		  color: rgba(255,255,255,1);
		  font-size: 32rpx;
		  border-radius: 50px;
		  background: linear-gradient(-88.46deg, rgba(34,109,198,1) 2.59%,rgba(9,158,237,1) 97.02%);
	  }
	  .img{
		  width: 40rpx;
		  height: 40rpx;
		  vertical-align: middle;
		  margin-right: 16rpx;
	  }
  }
</style>