JP-ChargeTeam51/pages/service/service.vue

<template>
	<view>
		<view class="header">
			<ujp-navbar back-icon-color="#fff" title-color="#fff" title="联系客服"></ujp-navbar>
			<!-- 问题反馈 -->
			<view class="feedback">
				<view class="title">
					问题反馈
				</view>
				<view class="suggestion-feedback" @click="gotoUrl('pages/user/message')" >
					<view class="box">
						<img src="../../assets/img/riLine-edit-box-line@3x.png" alt="">
					</view>
					<view class="text">
						建议反馈
					</view>
				</view>
			</view>
		</view>
		<!-- 常见问题 -->
		<view class="common-problem">
			<view class="title">
				常见问题
			</view>
			<view class="tabs">
				<u-tabs active-color="#333333" inactive-color="#999999" :list="list" :is-scroll="false"
					:current="current" @change="change"></u-tabs>
			</view>
			<view class="collapse" v-for="(itemList,i) in newsList"  :key="i"  v-show="current==i">
						<!-- -->
						
						<u-collapse   v-if="itemList.length" >
							<u-collapse-item  v-for="(item, index) in itemList" :title="(index+1)+'.'+item.title"  :key="index">
			<!-- 					<textarea maxlength="-1" :auto-height="true" v-model="item.content" readonly ></textarea>
			 -->					<view v-html="item.content"></view> 
							</u-collapse-item>
						</u-collapse>
						
					</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<view class="service">
				<view class="icon">
					<u-icon name="server-fill" size="40"></u-icon>
				</view>
				<view class="text" @click="show = true">
					客服电话（7:00-24:00）
				</view>
			</view>
		</view>
		<u-action-sheet :list="serviceList" 
		@click="clickAcs"
		v-model="show"></u-action-sheet>
		
	</view>
</template>

<script>
	import * as newsApi from '@/apis/news.js'
	
	export default {
		data() {
			return {
				newsType: 'CJWT-GZ',
				
				list: [
					{name: '故障',type: 'CJWT-GZ'},
					{name: '软件使用',type: 'CJWT-RJSY'},
					{name: '活动优惠',type: 'CJWT-YHHD'},
				],
				serviceList: [{
					text: '平台服务 400-8899-619',
					tel:"400-8899-619",
					
				}, {
					text: '故障反馈 15607217777',
					tel:"15607217777",
				}, {
					text: '售后受理 15607217777',
					tel:"15607217777",
				}],

				newsList: [
					[],[],[]
				],
				current: 0,
				show:false
			}
		},
		onReady() {
			
			this.getNewsList();
		},
		methods: {
			getNewsList() {
				
				newsApi.newsInfoContentList({
					pageIndex: 1,
					pageSize: 100,
					shortName: this.newsType
				}).then((res) => {
					
					var newsList = res.data.data;
					this.newsList[this.current] = newsList.reverse()
					//this.recordsTotal = res.data.recordsTotal	
					this.$forceUpdate()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			clickAcs(i){
				
				uni.makePhoneCall({
					phoneNumber: this.serviceList[i].tel //仅为示例
				});
			},
			change(index) {
				this.current = index;
				this.newsType = this.list[index].type;
				if(this.newsList[this.current].length==0){
					this.getNewsList(true)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: 300px;
		z-index: 999;
		background: linear-gradient(180deg, rgba(0, 185, 98, 1) 43%, rgba(246, 246, 246, 1) 100%);

		/deep/.u-navbar {
			background: none !important;
			border-bottom: none !important;

		}

		/deep/.u-border-bottom:after {
			border-bottom-width: 0px !important;
		}

		.feedback {
			margin: 24rpx 32rpx;
			background-color: #fff;
			border-radius: 8px;
			padding: 20rpx 32rpx 48rpx;

			.title {
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
			}
		}

		.suggestion-feedback {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 48rpx 0 0 0;

			.box {
				width: 48rpx;
				height: 48rpx;
				border-radius: 4px;
				background-color: rgba(0, 185, 98, 1);
				text-align: center;

				img {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
				}
			}

			.text {
				color: rgba(51, 51, 51, 1);
				font-size: 40rpx;
				margin-left: 16rpx;
			}
		}


	}


	.common-problem {
		margin: -125px 32rpx 0;
		border-radius: 8px;
		background-color: #fff;
		padding: 20rpx 0;

		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid rgba(246, 246, 246, 1);
			padding-left: 32rpx;
		}

		.tabs {
			width: 400rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid rgba(246, 246, 246, 1);

			/deep/.u-tab-bar {
				background-color: #00B962 !important;
			}
		}

		.collapse {
			padding: 0 32rpx;
		}
	}


	.bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.05);
		padding: 24rpx 32rpx;

		.service {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 44px;
			border-radius: 8px;
			background-color: rgba(0, 185, 98, 1);
			text-align: center;
			color: #fff;
			font-size: 32rpx;

			.text {
				margin-left: 16rpx;
			}
		}
	}
</style>