aluminium-trading-uniapp-240925/components/config/customerServicePopup.vue

<template>
	<!-- 联系客服弹框 -->
	<uv-overlay :show="show" @click="close">
		<view class="warp">
			<view class="rect" @tap.stop>
				<view class="title">{{ $t('components.contactCustomerService') }}</view>
				<view class="center">{{ $t('components.confirmCallCustomerService') }}?</view>
				<view class="bottom">
					<view>
						<uv-button type="info" shape="circle" :text="$t('components.cancel')"
							:custom-style="customStyle1" @click="close"></uv-button>
					</view>
					<view>
						<uv-button type="info" shape="circle" :text="$t('components.confirmD')"
							:custom-style="customStyle2" @click="confirm"></uv-button>
					</view>
				</view>
			</view>
		</view>
	</uv-overlay>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				show: false,
				phone: '',
			}
		},
		computed: {
			customStyle1() {
				return {
					height: '60rpx',
					background: '#FFF',
					color: '#000000',
					fontSize: '36rpx',
					borderRadius: '40rpx', //圆角

					// nvue中必须是下方的写法
					'border-top-right-radius': '40rpx',
					'border-bottom-left-radius': '40rpx',
					'border-bottom-right-radius': '40rpx',
					'width': '150rpx',
				}
			},
			customStyle2() {
				return {
					height: '60rpx',
					background: '#1f1c39',
					color: '#FFF',
					fontSize: '34px',
					borderRadius: '40rpx', //圆角
					// nvue中必须是下方的写法
					'border-top-right-radius': '40rpx',
					'border-bottom-left-radius': '40rpx',
					'border-bottom-right-radius': '40rpx',
					'width': '150rpx',
				}
			},
			...mapState(['customerPhone']),
		},
		mounted() {
			// this.getCustomPhone()
		},
		methods: {
			getCustomPhone() {
				this.$api('getImagePhoneOther', res => {
					console.log(res)
					this.phone = res.result.phone
				})
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			// 拨打电话
			confirm() {
				var that = this;
				this.show = false
				
				uni.makePhoneCall({
					phoneNumber: that.customerPhone,
				})
				
				return
				
				// console.log('拨打电话', that.customerPhone)
				// const res = uni.getSystemInfoSync();
				// // ios系统默认有个模态框
				// if (res.platform == 'ios') {
				// 	uni.makePhoneCall({
				// 		phoneNumber: that.customerPhone,
				// 		success() {
				// 			console.log('ios拨打成功');
				// 		},
				// 		fail() {
				// 			console.log('ios拨打失败');
				// 		}
				// 	})
				// } else {
				// 	//安卓手机手动设置一个showActionSheet
				// 	uni.showActionSheet({
				// 		itemList: [that.customerPhone, '呼叫'],
				// 		success: function(res) {
				// 			if (res.tapIndex == 1) {
				// 				uni.makePhoneCall({
				// 					phoneNumber: that.customerPhone,
				// 				})
				// 			}
				// 		}
				// 	})
				// }
			},
		}
	}
</script>

<style scoped lang="scss">
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

	}

	.rect {
		width: 600rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.title {
			padding: 20rpx 0 10rpx 20rpx;
			background-color: $uni-color;
			color: #FFF;
			text-align: left;
			width: 100%;
			height: 18%;
			font-size: 36rpx;
		}

		.center {
			height: 40%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
		}

		.bottom {
			display: flex;
			justify-content: center;
			gap: 50rpx;
		}
	}
</style>