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

<template>
	<view class="phone" v-if="phone" @click.stop="callPhone">
		<image src="/static/image/home/phone.png" mode="widthFix"></image>
		{{ title || '联系' + ta[sexName] }}
	</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', 'title', 'sexName', 'type', 'phoneTitle', 'pid'],
		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
				}
				
				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;
		}
	}
</style>