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() {
				this.show = false
				// console.log('拨打电话', phone)
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if (res.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: this.customerPhone,
						success() {
							console.log('ios拨打成功');
						},
						fail() {
							console.log('ios拨打失败');
						}
					})
				} else {
					//安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [phone, '呼叫'],
						success: function(res) {
							if (res.tapIndex == 1) {
								uni.makePhoneCall({
									phoneNumber: phone,
									success() {
										console.log('安卓拨打成功');
									},
									fail() {
										console.log('安卓拨打失败');
									}
								})
							}
						}
					})
				}
			},
		}
	}
</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>