下文提供了使用 Vue 实现购物车功能的方法，其他类似的功能如红包、答题器等功能也可以参考这个案例进行实现。完整代码请单击 这里 查看。
一、开发老师（主播）端
我们通过 useTask 创建一个 Task，当老师调用 updateTask 时，学生端会收到老师端发来的购物车弹窗请求。
<template> <div class="custom-shop-btn" @click="showShopCart"> <img src="../assets/shopcart.svg" alt=""> <span class="header__btn-text">购物车</span> </div></template><script setup>import useTask from '../hooks/useTask';const { updateTask } = useTask('custom-shop-cart-tool');const showShopCart = () => { updateTask({ type: 'show-shop-cart', });};</script><style lang="less">.custom-shop-btn { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; width: 60px; cursor: pointer; span{ font-size: 12px; color: #a3aec7; line-height: 19px; } img{ width: 24px; height: 24px; }}</style>
二、开发学生（观众）端
在学生端，我们监听custom-shop-cart-tool这个任务，当收到显示购物车的请求时，进行弹窗。
<template> <div class="shop-modal" v-if="showModal"> <div class="shop-modal__content"> <div class="shop-modal__header"> <h2>购物车</h2> <button @click="showModal = false">关闭</button> </div> <div class="shop-modal__body"> <p style="font-size: 30px;"></p> <p>1v1小班课</p> <p>优惠进行中</p> </div> <div class="shop-modal__footer"> <button @click="showModal = false">取消</button> <button @click="goDetail()">查看详情</button> </div> </div> </div></template><script setup>import { ref } from 'vue';import useTask from '../hooks/useTask';const showModal = ref(false);useTask('custom-shop-cart-tool', (data) => { // 任务更新回调 if (data.type === 'show-shop-cart') { // 展示购物车 if (localStorage.getItem('hasShown') === 'true') { return; } TCIC.SDK.instance.promiseState('TStateDeviceDetect', false).then(() => { // 设备检测完成后展示弹窗 showModal.value = true; localStorage.setItem('hasShown', 'true'); }); }});const goDetail = () => { showModal.value = false; // 自行实现跳转到详情页};</script>
注意：说明：
注意：完成开发后，我们可以通过 场景配置 将打包后的 JS 上传，并在创建该场景下的课堂中自动加载自定义JS。