customer.vue 1.16 KB
Newer Older
潘永坪's avatar
潘永坪 committed
1 2
<template>
	<!-- 客服 -->
潘永坪's avatar
潘永坪 committed
3
	<u-popup :show="showPop" :round="20" @close="showPop = false" closeable>
潘永坪's avatar
潘永坪 committed
4
		<view class="son-wrap">
潘永坪's avatar
潘永坪 committed
5
			<view class="title">
潘永坪's avatar
潘永坪 committed
6
				 客服电话
潘永坪's avatar
潘永坪 committed
7 8
			</view>
			<view class="middle">
潘永坪's avatar
潘永坪 committed
9 10
				<view class="list" v-for="(item, index) in scenicList" :key="index" @click="makePhone(item.phone)">
					<text> {{ item.name }}: </text>
潘永坪's avatar
潘永坪 committed
11
					<text>
潘永坪's avatar
潘永坪 committed
12
						{{ item.phone }}
潘永坪's avatar
潘永坪 committed
13 14 15 16 17 18 19 20
					</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
潘永坪's avatar
潘永坪 committed
21 22 23 24 25
export default {
  props: ['scenicList'],
  data() {
    return {
      showPop: false //控制弹窗显示隐藏
潘永坪's avatar
潘永坪 committed
26 27
    }
  },
潘永坪's avatar
潘永坪 committed
28
  methods: {
潘永坪's avatar
潘永坪 committed
29
    //---拨打电话
潘永坪's avatar
潘永坪 committed
30
    makePhone(phoneNumber) {
潘永坪's avatar
潘永坪 committed
31 32 33 34 35 36 37 38 39
      uni.makePhoneCall({
        phoneNumber
      })
    }
  }
}
</script>

<style scoped lang="scss">
潘永坪's avatar
潘永坪 committed
40 41 42 43 44 45 46
.son-wrap {
	position: relative;
	height: 65vh;
	display: flex;
	flex-direction: column;
}
.title {
潘永坪's avatar
潘永坪 committed
47
	text-align: center;
潘永坪's avatar
潘永坪 committed
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
	font-size: 32rpx;
	font-weight: bold;
	padding: 30rpx;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
}
.middle {
	flex: 1;
	overflow-y: scroll;
}
.list {
	height: 100rpx;
	border-bottom: 1px solid #e6e6e6;
	padding: 0 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>