jp-housekeep-electric/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 {
				border-top: 1px solid rgba(232, 232, 232, 1);
				margin-top: 28rpx;
				width: 522rpx;

				::v-deep.u-tab-item {

					font-size: 24rpx !important;
				}
			}

			.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>