实时互动-教育版新增购物车

购物车是实时互动-教育版面向营销场景的客户，提供的一个营销工具。老师（主播）可在课堂（房间）中单击对应的按钮，学生端(观众)可在弹出的购物车弹窗，进行后续相关操作。
下文提供了使用 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。
新增购物车

本页目录：

开发老师（主播）端

开发学生（观众）端
