tourist/subPackages/onlineService/index.vue

<template>
  <view class="bg">
	<view class="service-top">
		<view class="chat-top">
			<image :src="showImg('/uploads/20241202/2da555edc0420cfad68b0e7c6e90c99a.png')"></image>
			<view class="content">
				<view class="info" style="margin-bottom: 8rpx;">你好，欢迎来到苏州市导游协会，您可点击以 下问题列表自助查询相关信息~</view>
				<view class="info2">
					<view class="go-worker" @click="goBattle">前往在线人工 <uni-icons color="#96684F" type="right" size="14"></uni-icons></view>
					<view class="flex-between"><text>客服热线：12345678912</text><text>工作时间：9:00-17:00</text></view>
				</view>
			</view>
			
		</view>
		
		<view class="tag-container no-scrollbar">
			<view class="tag" v-for="(item,i) in tagList" :key="i" @click="goSerachByTag(item)">{{item.name}}</view>
		</view>
	</view>
  
	<view class="common-question">
		<view class="title">常见问题</view>
		<view class="tag-container type-container no-scrollbar">
			<view :class="['type',activeType==item.id?'active':'']" v-for="(item,i) in typeList" :key="i"
			@click="changeType(item)">
				{{item.name}}
				<view class="line" v-if="activeType==item.id"></view>
			</view>
		</view>
		
		<view class="question-list">
			<view class="item" v-for="(item,i) in questionList" :key="i" @click="viewDetail(item)">
				<view class="text-overflow" style="padding-right: 20rpx;">{{item.issue}}</view>
				<uni-icons color="#999999" type="right" size="14"></uni-icons>
			</view>
		</view>
		
		<view class="more-question" @click="goSearchByType()">更多景点问题 ></view>
	
	</view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
		tagList: [],
		typeList: [],
		questionList: [],
		activeType: null
    }
  },
  onLoad(option) {
	  this.getTags()
	  this.getTypes()
  },
  
  methods: {
	  getTags () {
		 this.Post({}, '/api/Answer/tag').then(res=>{
			 this.tagList = res.data || []
		 })
	  },
	  getTypes () {
		  this.Post({}, '/api/Answer/type').then(res=>{
			  this.typeList = res.data || []
			  if (this.typeList.length>0) {
				  this.activeType = this.typeList[0].id
				  this.getQuestionByTypeId()
			  }
			  
		  })
	  },
	  getQuestionByTypeId () {
		  this.Post({type_id: this.activeType}, '/api/Answer/getAnswerByType').then(res=>{
		  		this.questionList = (res.data || []).slice(0,5)
		  })
		  
	  },
	  
	  goSerachByTag (tag) {
		  uni.navigateTo({
		  	url: `/subPackages/onlineService/search?type=tag&id=${tag.id}`
		  })
	  },
	  changeType (type) {
		  this.activeType = type.id
		  this.getQuestionByTypeId()
	  },
	  viewDetail(item) {
		  uni.navigateTo({
		  	url: `/subPackages/onlineService/detail?id=${item.id}`
		  })
	  },
	  goSearchByType() {
		  uni.navigateTo({
		  	url: `/subPackages/onlineService/search?type=type&id=${this.activeType}`
		  })
	  },
	  goBattle() {
	  	window.open('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NTU1MzE2NQ==#wechat_redirect');
	  },
  }
}
</script>
 
<style lang="scss" scoped>
	*{
		box-sizing: border-box;
	}
	.bg{
		width: 100%;
		min-height: calc(100vh - 44px);
		background: #FFFFFF;
		
		
	}
	.service-top{
		padding: 30rpx;
		background-image: linear-gradient(180deg,#F1DDC9,#FFFFFF);
		.chat-top{
			display: flex;
		}
		image{
			width: 80rpx;
			height: 80rpx;
			flex-shrink: 0;
		}
		.content{
			flex: 1;
			width: 1rpx;
			padding-left: 20rpx;
			.info{
				padding: 25rpx;
				width: 100%;
				font-weight: 500;
				font-size: 27rpx;
				color: #000000;
				background: white;
				border-radius: 7rpx;
			}
			.info2{
				padding: 16rpx 25rpx;
				font-weight: 500;
				font-size: 23rpx;
				color: #666666;
				background: white;
				border-radius: 7rpx;
			}
			.go-worker{
				font-weight: bold;
				font-size: 27rpx;
				color: #96684F;
			}
		}
	}
	.tag-container{
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		padding-top: 40rpx;
		.tag{
			padding: 0 34rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #96684F;
			border-radius: 7rpx;
			font-weight: bold;
			font-size: 27rpx;
			color: #FFFFFF;
			margin-right: 13rpx;
			flex-shrink: 0;
		}
		
		.type{
			padding: 0 34rpx;
			font-weight: 500;
			font-size: 31rpx;
			color: #666666;
			position: relative;
			line-height: initial;
			flex-shrink: 0;
			&.active {
				font-weight: bold;
				color: #96684F;
			}
			.line {
			    width: 40rpx;
			    height: 6rpx;
			    background: #96684F;
			    border-radius: 6rpx;
			    position: absolute;
			    bottom: -16rpx;
			    left: 0;
			    right: 0;
			    margin: auto;
			}
		}
	}
	
	.common-question{
		padding: 20rpx 30rpx;
		.title{
			font-weight: bold;
			font-size: 31rpx;
			color: #333333;
			padding-bottom: 38rpx;
		}
		.type-container{
			padding:0 0 44rpx;
			border-bottom: 1px solid #D8D8D8;
		}
		.question-list{
			.item{
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 500;
				font-size: 31rpx;
				color: #000000;
				border-bottom: 1px solid #D8D8D8;;
			}
		}
	}
	.more-question{
		width: 300rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 7rpx;
		border: 1px solid #999999;
		font-weight: 500;
		font-size: 27rpx;
		color: #000000;
		margin: 54rpx auto 0;
	}
</style>