universal-wechat-uniapp-241007/components/user/callPhone.vue

<template>
	<view>
        <!-- 普通模式 -->
        <view v-if="!showModel" class="phone" v-show="phone" @click.stop="callPhone">
            <image src="/static/image/home/phone.png" mode="widthFix"></image>
            {{ title || '联系' + ta[sexName] }}
        </view>
        
        <!-- 悬浮窗模式 -->
        <view v-else v-show="phone" class="phone-modal" @click.stop="callPhone">
            <view class="phone-modal-content">
                <image src="/static/image/home/phone.png" mode="widthFix"></image>
                <text class="phone-modal-text">{{ title || '联系' + ta[sexName] }}</text>
            </view>
        </view>
    </view>
</template>

<script>
	import mixinsSex from '@/mixins/sex.js'
	import rewardedVideoAdMixin from '@/mixins/rewardedVideoAd.js'
	import { mapState } from 'vuex'
	export default {
		mixins: [mixinsSex, rewardedVideoAdMixin],
		props: {
			phone: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			sexName: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: ''
			},
			phoneTitle: {
				type: String,
				default: ''
			},
			pid: {
				type: [String, Number],
				default: ''
			},
			// 显示模式：false-普通模式，true-悬浮窗模式
			showModel: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 视频广告相关数据已移至混入中
			}
		},
		computed : {
			...mapState(['priceMap']),
		},
		// mounted钩子已在混入中处理
		methods: {
			// 广告观看完成回调
			onAdWatchComplete() {
				console.log('用户看完广告，开始拨打电话')
				this.performCall()
			},

			// 广告观看取消回调
			onAdWatchCancel() {
				uni.showToast({
					title: '请观看完整广告才能拨打电话',
					icon: 'none'
				})
			},

			callPhone(){
				
				let data = {
					title : this.phoneTitle,
					type : this.type,
					id : this.pid
				}

                this.rewardedRecordConfig.type = this.type // 
                this.rewardedRecordConfig.formId = this.pid // 
				
				console.log(data);
				
				if(!data.id || !data.title){
					return uni.showToast({
						title: '缺少参数',
						icon: 'none'
					})
				}
				
				// 注释积分消耗逻辑，改为观看视频
				// uni.showModal({
				// 	title: `确定消耗${this.priceMap.phone}积分呼叫吗？`,
				// 	success : (r) => {
				// 		if(r.confirm){
				// 			this.$api('checkGivePhone', data, res => {
				// 				if(res.code == 200){
				// 					uni.makePhoneCall({
				// 						phoneNumber: this.phone
				// 					})
				// 				}
				// 			})
				// 		}
				// 	}
				// })
				
				// 改为观看视频后拨打电话
				uni.showModal({
					title: '观看广告后拨打电话',
					content: '观看完整视频广告后即可免费拨打电话',
					success : (r) => {
						if(r.confirm){
							// 使用混入的方法显示广告
							this.showRewardedVideoAd({
								onSuccess: this.onAdWatchComplete,
								onCancel: this.onAdWatchCancel,
								fallbackTitle: '广告加载失败',
								fallbackContent: '无法加载广告，是否直接拨打电话？'
							})
						}
					}
				})
			},

			// 执行拨打电话（观看广告后调用）
			performCall() {
				let data = {
					title : this.phoneTitle,
					type : this.type,
					id : this.pid
				}

				// 注释原有的积分检查接口调用
				// this.$api('checkGivePhone', data, res => {
				// 	if(res.code == 200){
				// 		uni.makePhoneCall({
				// 			phoneNumber: this.phone
				// 		})
				// 	}
				// })

				// 直接拨打电话，不再检查积分
				uni.makePhoneCall({
					phoneNumber: this.phone
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	// 普通模式样式
	.phone {
		background-color: rgba($uni-color, 0.2);
		color: $uni-color;
		padding: 8rpx 16rpx;
		border-radius: 10rpx;
		margin-left: auto;
		font-size: 26rpx;

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}
	
	// 悬浮窗模式样式
	.phone-modal {
		position: fixed;
		bottom: calc(140rpx + env(safe-area-inset-bottom));
		right: 30rpx;
		z-index: 999;
		
		.phone-modal-content {
			background: linear-gradient(135deg, $uni-color 0%, rgba($uni-color, 0.8) 100%);
			color: #ffffff;
			padding: 20rpx 30rpx;
			border-radius: 50rpx;
			box-shadow: 0 8rpx 24rpx rgba($uni-color, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 160rpx;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
				box-shadow: 0 4rpx 12rpx rgba($uni-color, 0.4);
			}
			
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 12rpx;
				filter: brightness(0) invert(1); // 将图标变为白色
			}
			
			.phone-modal-text {
				font-size: 28rpx;
				font-weight: 500;
				white-space: nowrap;
			}
		}
		
		// 悬浮窗呼吸动画效果
		&::before {
			content: '';
			position: absolute;
			top: -10rpx;
			left: -10rpx;
			right: -10rpx;
			bottom: -10rpx;
			background: rgba($uni-color, 0.2);
			border-radius: 60rpx;
			animation: pulse 2s infinite;
			z-index: -1;
		}
	}
	
	// 呼吸动画
	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 0.7;
		}
		50% {
			transform: scale(1.1);
			opacity: 0.3;
		}
		100% {
			transform: scale(1);
			opacity: 0.7;
		}
	}
</style>