chatGpt/pages/main/bottom-func.vue

<template>
	<view>
		<view class="cu-modal bottom-modal" :class="show ? 'show' : ''" @click="close">
			<view class="cu-dialog" @click.stop="() => {}">
				<view class="cu-bar bg-white justify-end">
					<view class="content">我的</view>
					<view class="action" @click="close">
						<text class="cuIcon-close"></text>
					</view>
				</view>
				<view class="padding-sm content">
					<view class="padding-lr-xs">
						<view class="flex align-start">
							<view class="cu-avatar lg">VIP</view>
							<view class="flex flex-direction align-start margin-xs margin-left">
								<view>普通用户</view>
								<view @click="usernameSimple && $squni.copy(usernameSimple)">ID：
									<text class="text-bold">{{ usernameSimple || '尚未登录' }}</text>
									<text class="cuIcon-copy text-cyan margin-left-xs"></text>
								</view>
							</view>
						</view>
						<view class="flex align-start margin-top">
<!--							<view class="cu-capsule">-->
<!--								<view class='cu-tag radius bg-cyan'>拥有额度</view>-->
<!--								<view class="cu-tag line-cyan">{{ chatAsset.n || 0 }}次</view>-->
<!--							</view>-->
							<view class="cu-capsule">
								<view class='cu-tag radius bg-cyan'>每日免费剩余额度</view>
								<view class="cu-tag line-cyan">{{ chatAsset.dfn || 0 }}次</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BottomDrawer from '@/components/bottom-drawer/bottom-drawer.vue'
	import { mapGetters } from 'vuex'
	import {
		rewardedVideoAdAssetApi
	} from '@/api/chat.js'
	let rewardedVideoAd = null
	export default {
		components: { BottomDrawer },
		props: {
			chatAsset: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				show: true,
				showVip: false,
				showNum: false,
				showCustomer: false,
				cuIconList: [{
					cuIcon: 'vip',
					color: 'orange',
					name: '开通会员',
					callback: () => {
						this.showVip = true
					}
				}, {
					cuIcon: 'baby',
					color: 'blue',
					name: '次数包',
					callback: () => {
						this.showNum = true
					}
				}, {
					cuIcon: 'service',
					color: 'cyan',
					name: '客服领次数',
					type: 'button',
					callback: () => {
						// #ifndef MP-WEIXIN
						this.showCustomer = true
						// #endif
					}
				}, {
					cuIcon: 'flashlightclose',
					color: 'red',
					name: '清除记忆',
					callback: () => {
						this.$squni.setStorageSync('chatHistory', [])
						this.$squni.toast('清除记忆成功', 'success')
					}
				}],
				rewardedCount: 0
			};
		},
		computed: {
			...mapGetters([
				'usernameSimple'
			]),
			showFuncList () {
				return this.showVip || this.showNum || this.showCustomer
			}
		},
		watch: {
			showFuncList (n, o) {
				if (n !== o) {
					this.show = !n
				}
			}
		},
		created() {
			// #ifdef MP-WEIXIN
			if (wx.createRewardedVideoAd) {
				rewardedVideoAd = wx.createRewardedVideoAd({
					adUnitId: this.$config.wxRewardedVideoAd
				})
				rewardedVideoAd.onLoad(() => {
					// 激励视频广告加载成功。用户观看完会重新加载新的广告并重新进入此方法
					console.log('onLoad event emit')
				})
				rewardedVideoAd.onClose(res => {
				    // 用户点击了【关闭广告】按钮
				    if (res && res.isEnded) {
				      // 正常播放结束，可以下发游戏奖励
					  rewardedVideoAdAssetApi().then(res => {
						  this.rewardedCount = res.data.rewardedCount
						  if(res.status === 'success') {
							  this.$squni.toast(`已增加次数${this.rewardedCount >= 5 ? '(今日次数已用完)' : ''}`, 'success')
							  this.$emit('rewarded-video-ad')
						  }
					  })
				    } else {
				      // 播放中途退出，不下发游戏奖励；退出前ad组件会自动进行confirm
				    }
				})
				rewardedVideoAd.onError((err) => {
					console.log('onError event emit', err)
				})
			}
			// #endif
		},
		methods: {
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			navigateTo(item) {
				if (item.callback) {
					item.callback(item)
				} else {
					uni.navigateTo({
						url: item.page
					})
				}
			},
			oepnRewardedVideoAd () {
				// #ifdef MP-WEIXIN
				if (rewardedVideoAd) {
					if(this.rewardedCount >= 5) {
						this.$squni.toast('今日次数已用完，明天再来吧~')
						return
					}
					rewardedVideoAd.show().catch(() => {
						// 失败重试
						rewardedVideoAd.load()
							.then(() => rewardedVideoAd.show())
							.catch(err => {
								// https://developers.weixin.qq.com/miniprogram/dev/api/ad/RewardedVideoAd.onError.html
								console.log('激励视频广告显示失败', err)
								this.$squni.toast('广告加载失败了，请稍后再试~')
							})
					})
				}
				// #endif
			}
		}
	};
</script>

<style lang="scss">
	.cu-dialog {
		border-radius: 20upx 20upx 0 0;
	}
	.content {
		background-color: #fff;
		padding-top: 16upx;
	}
	.cu-bar .content {
		color: #333333;
		font-weight: 700;
	}
	.cu-list {
		margin-bottom: 20upx;
	}
	.cu-list .func-list {
		margin: 0upx 20upx -20upx 0;
	}
	.cu-list .func-list .func-icon {
		border: 1px solid #eee;
		border-radius: 8upx;
		padding: 30upx;
		font-size: 80upx;
	}
	.cu-list.grid>.cu-item.item-button {
		padding: 0;
		.cu-btn {
			display: inline-block;
			background: transparent;
			height: 164upx;
			margin-top: 0;
			padding-right: 20upx;
			border-radius: 0;
			.button-icon {
				border: 1px solid #eee;
				padding: 30upx 0upx 36upx 0;
				margin-top: 28upx;
			}
			.cuIcon-service:before {
				/* #ifdef H5 */
				font-size: 84upx;
				/* #endif */
			}
		}
	}
</style>