uav-uniapp-demo-24-8-18/components/serviceList/serviceList.vue

<!-- 客服列表页面 -->
<template>
	<view class="service-list">
		<u-popup :show="show" mode="bottom" round="20rpx" @close="$emit('close');$play()">
			<view class="list">
				<view @click="toServer(item.url)" v-for="(item,index) in serverList" :key="index" class="server">{{ item.name }}</view>
			</view>
			<view @click="$emit('close');$play()" class="cancel">{{ $t('page.serviceList.cancel') }}</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props : {
			show : {
				type : Boolean,
				default : false
			},
			// serverList : {
			// 	type : Array,
			// 	default : function(){
			// 		return []
			// 	}
			// }
		},
		data(){
			return {
				serverList : []
			}
		},
		created(){
			this.forgetPass()
		},
		methods : {
			
			//跳转客服网址
			toServer(url){
				this.$play()
				window.open(url)
				this.$emit('close')
			},
			
			//获取客服列表
			forgetPass() {
				this.request('forgetPass').then(res => {
					if (res.code == 200) {
						this.serverList = res.result
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.service-list{
		.list{
			border: 1px solid #ccc;
			width: 96%;
			margin: 20rpx auto 20rpx auto;
			
			.server{
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				color: $uni-text-color;
				height: 100rpx;
				border-bottom: 1px solid #ccc;
				
				&:last-child{
					border: none;
				}
			}
		}
		
		.cancel{
			width: 96%;
			margin: 0rpx auto 20rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			color: $uni-text-color;
			height: 100rpx;
			border: 1px solid #ccc;
		}
	}
</style>