完成第一版

.drone.yml

@@ -0,0 +1,154 @@
+kind: pipeline
+type: docker
+name: default
+
+steps:
+  - name: 测试服-依赖安装&&编译打包
+    pull: if-not-exists
+    image: node:20
+    when:
+      branch:
+        - test
+    commands:
+      - npm config set registry https://registry.npmmirror.com/
+      - npm install -g pnpm
+      - pnpm install
+      - pnpm build:h5:test
+      - rm -rf dist.tar
+      - rm -rf node_modules
+      - tar -zcvf dist.tar ./dist ./default.conf ./Dockerfile
+
+  - name: 正式服-依赖安装&&编译打包
+    pull: if-not-exists
+    image: node:20
+    when:
+      branch:
+        - master
+    commands:
+      - npm config set registry https://registry.npmmirror.com/
+      - npm install -g pnpm
+      - pnpm install
+      - pnpm build:h5
+      - rm -rf dist.tar
+      - rm -rf node_modules
+      - tar -zcvf dist.tar ./dist ./default.conf ./Dockerfile
+
+  - name: 测试服-产物上传
+    pull: if-not-exists
+    image: appleboy/drone-scp
+    when:
+      branch:
+        - test
+    settings:
+      host:
+        from_secret: HOST_DEV
+      username:
+        from_secret: USER_DEV
+      password:
+        from_secret: PWD_DEV
+      port: 22
+      strip_components: 1
+      target: /www/builder
+      source:
+        - ./dist.tar
+
+  - name: 测试服-部署
+    pull: if-not-exists
+    image: appleboy/drone-ssh
+    when:
+      branch:
+        - test
+    settings:
+      host:
+        from_secret: HOST_DEV
+      username:
+        from_secret: USER_DEV
+      password:
+        from_secret: PWD_DEV
+      port: 22
+      script:
+        - cd /www/builder
+        - mkdir jdt-yq-dev
+        - tar -xzvf dist.tar -C /www/builder/jdt-yq-dev
+        - rm -rf dist.tar
+        - cd jdt-yq-dev
+        - docker build -t jdt-yq-dev .
+        - docker stop jdt-yq-dev
+        - docker rm jdt-yq-dev
+        - docker run -d -p 8260:80 --restart=always --name jdt-yq-dev jdt-yq-dev
+        - cd ..
+        - rm -rf jdt-yq-dev
+
+  - name: 正式服-产物上传
+    pull: if-not-exists
+    image: appleboy/drone-scp
+    when:
+      branch:
+        - master
+    settings:
+      host:
+        from_secret: HOST_PROD
+      username:
+        from_secret: USER_PROD
+      password:
+        from_secret: PWD_PROD
+      port: 22
+      strip_components: 1
+      target: /www/builder
+      source:
+        - ./dist.tar
+
+  - name: 正式服-部署
+    pull: if-not-exists
+    image: appleboy/drone-ssh
+    when:
+      branch:
+        - master
+    settings:
+      host:
+        from_secret: HOST_PROD
+      username:
+        from_secret: USER_PROD
+      password:
+        from_secret: PWD_PROD
+      port: 22
+      script:
+        - cd /www/builder
+        - mkdir jdt-yq-prod
+        - tar -xzvf dist.tar -C /www/builder/jdt-yq-prod
+        - rm -rf dist.tar
+        - cd jdt-yq-prod
+        - docker build -t jdt-yq-prod .
+        - docker stop jdt-yq-prod
+        - docker rm jdt-yq-prod
+        - docker run -d -p 8260:80 --restart=always --name jdt-yq-prod jdt-yq-prod
+        - cd ..
+        - rm -rf jdt-yq-prod
+
+  - name: 企业微信通知
+    pull: if-not-exists
+    image: plugins/webhook
+    when:
+      branch:
+        - test
+        - master
+      status:
+        - success
+        - failure
+    settings:
+      urls: https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=a2065e21-4f92-4f5b-a432-2c0cd1d965b5
+      content_type: application/json
+      template: |
+        {
+          "msgtype": "markdown",
+          "markdown": {
+              "content": "{{#success build.status}}✅{{else}}❌{{/success}}**{{ repo.owner }}/{{ repo.name }}** (Build #{{build.number}})\n
+                          >**构建结果**: {{ build.status }}
+                          >**构建详情**: [点击查看]({{ build.link }})
+                          >**代码分支**: {{ build.branch }}
+                          >**提交标识**: {{ build.commit }}
+                          >**提交发起**: {{ build.author }}
+                          >**提交信息**: {{ build.message }}
+        "
+          }
+        }

.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.env.development

@@ -0,0 +1,5 @@
+# 配置文档参考 https://taro-docs.jd.com/docs/next/env-mode-config
+# TARO_APP_ID="开发环境下的小程序appid"
+
+TARO_APP_API="https://shake.wanzhuanyongcheng.cn"
+TARO_APP_WS="shake.wanzhuanyongcheng.cn"

.env.production

@@ -0,0 +1,4 @@
+# TARO_APP_ID="生产环境下的小程序appid"
+
+TARO_APP_API="https://shake.jdt168.com"
+TARO_APP_WS="shake.jdt168.cn"

.env.test

@@ -0,0 +1 @@
+# TARO_APP_ID="测试环境下的小程序appid"

.eslintrc

@@ -0,0 +1,8 @@
+// ESLint 检查 .vue 文件需要单独配置编辑器：
+// https://eslint.vuejs.org/user-guide/#editor-integrations
+{
+  "extends": ["taro/vue3"],
+  "rules": {
+    "vue/multi-word-component-names": "off"
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store
+.swc

Dockerfile

@@ -0,0 +1,5 @@
+FROM nginx:alpine
+
+COPY dist/ /usr/share/nginx/html
+
+COPY default.conf /etc/nginx/conf.d/default.conf

__tests__/index.test.js

@@ -0,0 +1,12 @@
+import TestUtils from '@tarojs/test-utils-vue3'
+
+describe('Testing', () => {
+
+  test('Test', async () => {
+    const testUtils = new TestUtils()
+    await testUtils.createApp()
+    await testUtils.PageLifecycle.onShow('pages/index/index')
+    expect(testUtils.html()).toMatchSnapshot()
+  })
+
+})

babel.config.js

@@ -0,0 +1,10 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'vue3',
+      ts: false
+    }]
+  ]
+}

config/dev.js

@@ -0,0 +1,8 @@
+export default {
+   logger: {
+    quiet: false,
+    stats: true
+  },
+  mini: {},
+  h5: {}
+}

config/index.js

@@ -0,0 +1,131 @@
+import { defineConfig } from "@tarojs/cli";
+import { UnifiedWebpackPluginV5 } from "weapp-tailwindcss/webpack";
+import ComponentsPlugin from "unplugin-vue-components/webpack";
+import NutUIResolver from "@nutui/auto-import-resolver";
+
+import devConfig from "./dev";
+import prodConfig from "./prod";
+
+// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
+export default defineConfig(async (merge, { command, mode }) => {
+  const baseConfig = {
+    projectName: "swayBall",
+    date: "2024-7-4",
+    designWidth(input) {
+      // 配置 NutUI 375 尺寸
+      // if (input?.file?.replace(/\\+/g, "/").indexOf("@nutui") > -1) {
+      //   return 375;
+      // }
+      // 全局使用 Taro 默认的 750 尺寸
+      return 750;
+    },
+    deviceRatio: {
+      640: 2.34 / 2,
+      750: 1,
+      375: 2,
+      828: 1.81 / 2,
+    },
+    sourceRoot: "src",
+    outputRoot: "dist",
+    plugins: ["@tarojs/plugin-html"],
+    defineConstants: {},
+    copy: {
+      patterns: [],
+      options: {},
+    },
+    framework: "vue3",
+    compiler: {
+      type: "webpack5",
+      prebundle: { enable: false },
+    },
+    cache: {
+      enable: true, // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+    },
+    mini: {
+      postcss: {
+        pxtransform: {
+          enable: true,
+          config: {
+            removeCursorStyle: false,
+          },
+        },
+        url: {
+          enable: true,
+          config: {
+            limit: 1024, // 设定转换尺寸上限
+          },
+        },
+        cssModules: {
+          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+          config: {
+            namingPattern: "module", // 转换模式，取值为 global/module
+            generateScopedName: "[name]__[local]___[hash:base64:5]",
+          },
+        },
+      },
+      webpackChain(chain, webpack) {
+        chain.merge({
+          plugin: {
+            install: {
+              plugin: UnifiedWebpackPluginV5,
+              args: [
+                {
+                  appType: "taro",
+                },
+              ],
+            },
+          },
+        });
+      },
+    },
+    h5: {
+      publicPath: "/",
+      staticDirectory: "static",
+      output: {
+        filename: "js/[name].[hash:8].js",
+        chunkFilename: "js/[name].[chunkhash:8].js",
+      },
+      miniCssExtractPluginOption: {
+        ignoreOrder: true,
+        filename: "css/[name].[hash].css",
+        chunkFilename: "css/[name].[chunkhash].css",
+      },
+      postcss: {
+        autoprefixer: {
+          enable: true,
+          config: {
+            removeCursorStyle: false,
+          },
+        },
+        cssModules: {
+          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+          config: {
+            namingPattern: "module", // 转换模式，取值为 global/module
+            generateScopedName: "[name]__[local]___[hash:base64:5]",
+          },
+        },
+      },
+      webpackChain(chain) {
+        chain.plugin("unplugin-vue-components").use(
+          ComponentsPlugin({
+            resolvers: [NutUIResolver({ taro: true })],
+          })
+        );
+      },
+    },
+    rn: {
+      appName: "taroDemo",
+      postcss: {
+        cssModules: {
+          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        },
+      },
+    },
+  };
+  if (process.env.NODE_ENV === "development") {
+    // 本地开发构建配置（不混淆压缩）
+    return merge({}, baseConfig, devConfig);
+  }
+  // 生产构建配置（默认开启压缩混淆等）
+  return merge({}, baseConfig, prodConfig);
+});

config/prod.js

@@ -0,0 +1,31 @@
+export default {
+  mini: {},
+  h5: {
+    /**
+     * WebpackChain 插件配置
+     * @docs https://github.com/neutrinojs/webpack-chain
+     */
+    // webpackChain (chain) {
+    //   /**
+    //    * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
+    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //    */
+    //   chain.plugin('analyzer')
+    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+    //   /**
+    //    * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
+    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
+    //    */
+    //   const path = require('path')
+    //   const Prerender = require('prerender-spa-plugin')
+    //   const staticDir = path.join(__dirname, '..', 'dist')
+    //   chain
+    //     .plugin('prerender')
+    //     .use(new Prerender({
+    //       staticDir,
+    //       routes: [ '/pages/index/index' ],
+    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
+    //     }))
+    // }
+  }
+}

default.conf

@@ -0,0 +1,18 @@
+server {
+  # 监听ipv4
+  listen 80;
+  # 监听ipv6
+  listen [::]:80;
+  server_name localhost;
+
+  location / {
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+    try_files $uri $uri/ /index.html;
+  }
+
+  error_page 500 502 503 504 /50x.html;
+  location = /50x.html {
+    root /usr/share/nginx/html;
+  }
+}

jest.config.js

@@ -0,0 +1,6 @@
+const defineJestConfig = require('@tarojs/test-utils-vue3/dist/jest.js').default
+
+module.exports = defineJestConfig({
+  testEnvironment: 'jsdom',
+  testMatch: ['<rootDir>/__tests__/**/*.(spec|test).[jt]s?(x)']
+})

package.json

@@ -0,0 +1,100 @@
+{
+  "name": "swayBall",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "templateInfo": {
+    "name": "default",
+    "typescript": false,
+    "css": "Sass",
+    "framework": "Vue3"
+  },
+  "scripts": {
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:h5:test": "taro build --type h5 --mode test",
+    "build:rn": "taro build --type rn",
+    "build:qq": "taro build --type qq",
+    "build:jd": "taro build --type jd",
+    "build:quickapp": "taro build --type quickapp",
+    "build:harmony-hybrid": "taro build --type harmony-hybrid",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch",
+    "dev:qq": "npm run build:qq -- --watch",
+    "dev:jd": "npm run build:jd -- --watch",
+    "dev:quickapp": "npm run build:quickapp -- --watch",
+    "dev:harmony-hybrid": "npm run build:harmony-hybrid -- --watch",
+    "test": "jest",
+    "postinstall": "weapp-tw patch"
+  },
+  "browserslist": [
+    "last 3 versions",
+    "Android >= 4.1",
+    "ios >= 8"
+  ],
+  "author": "",
+  "dependencies": {
+    "@alova/adapter-taro": "^1.2.1",
+    "@babel/runtime": "^7.21.5",
+    "@icon-park/vue-next": "^1.4.2",
+    "@nutui/nutui-taro": "^4.3.11",
+    "@tarojs/components": "3.6.32",
+    "@tarojs/helper": "3.6.32",
+    "@tarojs/plugin-framework-vue3": "3.6.32",
+    "@tarojs/plugin-html": "^3.6.32",
+    "@tarojs/plugin-platform-alipay": "3.6.32",
+    "@tarojs/plugin-platform-h5": "3.6.32",
+    "@tarojs/plugin-platform-harmony-hybrid": "3.6.32",
+    "@tarojs/plugin-platform-jd": "3.6.32",
+    "@tarojs/plugin-platform-qq": "3.6.32",
+    "@tarojs/plugin-platform-swan": "3.6.32",
+    "@tarojs/plugin-platform-tt": "3.6.32",
+    "@tarojs/plugin-platform-weapp": "3.6.32",
+    "@tarojs/runtime": "3.6.32",
+    "@tarojs/shared": "3.6.32",
+    "@tarojs/taro": "3.6.32",
+    "alova": "^2.21.3",
+    "tcplayer.js": "^5.1.0",
+    "vue": "^3.0.0",
+    "xgplayer": "^3.0.18",
+    "xgplayer-flv": "^3.0.18"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.0",
+    "@nutui/auto-import-resolver": "^1.0.0",
+    "@tarojs/cli": "3.6.32",
+    "@tarojs/taro-loader": "3.6.32",
+    "@tarojs/test-utils-vue3": "^0.1.1",
+    "@tarojs/webpack5-runner": "3.6.32",
+    "@types/jest": "^29.3.1",
+    "@types/node": "^18.15.11",
+    "@types/webpack-env": "^1.13.6",
+    "@vue/babel-plugin-jsx": "^1.0.6",
+    "@vue/compiler-sfc": "^3.0.0",
+    "autoprefixer": "^10.4.19",
+    "babel-preset-taro": "3.6.32",
+    "css-loader": "3.4.2",
+    "eslint": "^8.12.0",
+    "eslint-config-taro": "3.6.32",
+    "eslint-plugin-vue": "^8.0.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.5.0",
+    "postcss": "^8.4.39",
+    "postcss-rem-to-responsive-pixel": "^6.0.1",
+    "style-loader": "1.3.0",
+    "stylelint": "^14.4.0",
+    "tailwindcss": "^3.4.4",
+    "ts-node": "^10.9.1",
+    "unplugin-vue-components": "^0.27.2",
+    "vue-loader": "^17.1.0",
+    "weapp-tailwindcss": "^3.3.3",
+    "webpack": "5.78.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,15 @@
+// postcss.config.js
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    "postcss-rem-to-responsive-pixel": {
+      // 32 意味着 1rem = 32rpx
+      rootValue: 32,
+      // 默认所有属性都转化
+      propList: ["*"],
+      // 转化的单位,可以变成 px / rpx
+      transformUnit: "rpx",
+    },
+  },
+};

project.config.json

@@ -0,0 +1,15 @@
+{
+  "miniprogramRoot": "./dist",
+  "projectname": "swayBall",
+  "description": "",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "enhance": false,
+    "compileHotReLoad": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}

project.tt.json

@@ -0,0 +1,9 @@
+{
+  "miniprogramRoot": "./",
+  "projectname": "swayBall",
+  "appid": "testAppId",
+  "setting": {
+    "es6": false,
+    "minified": false
+  }
+}

src/api/index.js

@@ -0,0 +1,10 @@
+import alovaInst from "../utils/request";
+
+export const GetBetOptList = async (type) =>
+  await alovaInst.Get(`/dice/shake?type=${type}`);
+export const GetUserInfo = async (uid) =>
+  await alovaInst.Get(`/dice/userShakeInfo?uid=${uid}`);
+export const GetBetRecord = async (uid) =>
+  await alovaInst.Get(`/dice/userShakeRecord?uid=${uid}`);
+export const GetLotteryRecord = async (uid) =>
+  await alovaInst.Get(`/dice/draw?uid=${uid}`);

src/app.config.js

@@ -0,0 +1,14 @@
+export default defineAppConfig({
+  pages: [
+    "pages/index/index",
+    "pages/about/index",
+    "pages/bet_record/index",
+    "pages/lottery_record/index",
+  ],
+  window: {
+    backgroundTextStyle: "light",
+    navigationBarBackgroundColor: "#fff",
+    navigationBarTitleText: "WeChat",
+    navigationBarTextStyle: "black",
+  },
+});

src/app.js

@@ -0,0 +1,10 @@
+import { createApp } from "vue";
+import '@icon-park/vue-next/styles/index.css';
+import "./app.scss";
+
+const App = createApp({
+  onShow(options) {},
+  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
+});
+
+export default App;

src/app.scss

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

src/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+    <meta
+      content="width=device-width,initial-scale=1,user-scalable=no"
+      name="viewport"
+    />
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-touch-fullscreen" content="yes" />
+    <meta name="format-detection" content="telephone=no,address=no" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="white" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css" />
+    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js"></script>
+    <title>实况摇球机</title>
+    <script>
+      <%= htmlWebpackPlugin.options.script %>
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

src/pages/about/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "玩法说明",
+});

src/pages/about/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <rich-text :nodes="nodes"></rich-text>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import "./index.scss";
+
+const nodes = ref(`<div>这里是说明</div>`);
+</script>
+
+<style lang="scss"></style>

src/pages/bet_record/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "投注记录",
+});

src/pages/bet_record/index.scss

@@ -0,0 +1,4 @@
+.line {
+  border-bottom: #f2f2f2 2px solid;
+  margin-bottom: 10px;
+}

src/pages/bet_record/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <view>
+    <view class="p-[30px]">
+      <view class="h-[155px] line" v-for="(item, index) in data" :key="index">
+        <view class="flex justify-between text-[#959BB1] text-[28px]">
+          <view>{{ item.qs }}</view>
+          <view>{{ item.t }}</view>
+        </view>
+        <view class="flex mt-[20px] justify-between items-center">
+          <view class="flex justify-between items-center">
+            <view
+              class="m-[5px] rounded-full w-[44px] h-[44px] text-[28px] text-center leading-[44px]"
+              v-for="(itm, index) in item.hm"
+              :key="index"
+            >
+              <view
+                class="mr-[10] text-[28px] text-[#959BB1]"
+                v-if="item.type !== 2"
+                >{{ itm }}
+              </view>
+              <view
+                v-else
+                class="rounded-full border-[1px] border-[#000] text-[28px] text-center leading-[44px]"
+                :style="{
+                  color: itm.color,
+                }"
+                >{{ itm.num }}</view
+              >
+            </view>
+          </view>
+          <view v-if="item.j" class="text-[#088207] text-[28px]"
+            >- {{ item.j }} 豆子</view
+          >
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Taro from "@tarojs/taro";
+import { GetBetRecord } from "../../api";
+import "./index.scss";
+
+const uid = ref("");
+
+// const data = ref([
+//   {
+//     type: 1,
+//     qs: "第2024157期",
+//     hm: ["头1", "头2"],
+//     t: "06-23  20:35:02",
+//     j: 2000,
+//   },
+//   {
+//     type: 2,
+//     qs: "第2024158期",
+//     hm: [
+//       {
+//         num: "04",
+//         color: "#0500FA",
+//       },
+//     ],
+//     t: "06-23  20:35:02",
+//     j: 200,
+//   },
+//   {
+//     type: 3,
+//     qs: "第2024159期",
+//     hm: ["单"],
+//     t: "06-23  20:35:02",
+//     j: 300,
+//   },
+// ]);
+const data = ref([]);
+
+Taro.useLoad((opt) => {
+  uid.value = opt.uid;
+  getList();
+});
+
+const getList = async () => {
+  const res = await GetBetRecord(uid.value);
+  // console.log(res);
+  data.value = res.data.map((item) => ({
+    type: 1,
+    qs: `第${item.Periods}期`,
+    hm: [item.Name],
+    t: item.DrawTime,
+    j: item.Number,
+  }))
+};
+</script>
+
+<style lang="scss"></style>

src/pages/index/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '实况摇球机'
+})

src/pages/index/index.scss

@@ -0,0 +1,34 @@
+// * {
+//   object-fit: cover;
+// }
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #fff;
+}
+
+.aft::before {
+  content: "";
+  width: 2px;
+  height: 90px;
+  background-color: #dbdbdb;
+  position: absolute;
+  top: 50%;
+  right: -30px;
+  transform: translateY(-50%);
+}
+
+.nut-popover-content {
+  width: 150px;
+  font-size: 30px;
+}
+
+.popover .nut-popover-content {
+  width: 1000px;
+  height: 700px;
+  font-size: 30px;
+  overflow: auto;
+  border-radius: 0px;
+}

src/pages/lottery_record/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "开奖记录",
+});

src/pages/lottery_record/index.scss

@@ -0,0 +1,4 @@
+.line {
+  border-bottom: #f2f2f2 2px solid;
+  margin-bottom: 10px;
+}

src/pages/lottery_record/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <view>
+    <view class="p-[30px]">
+      <view class="h-[155px] line" v-for="(item, index) in data" :key="index">
+        <view class="flex justify-between text-[#959BB1] text-[28px]">
+          <view>{{ item.qs }}</view>
+          <view>{{ item.t }}</view>
+        </view>
+        <view class="flex mt-[20px] justify-between items-center">
+          <view class="flex justify-between items-center">
+            <view
+              class="m-[5px] rounded-full w-[44px] h-[44px] text-white text-[28px] text-center leading-[44px]"
+              v-for="(itm, index) in item.hm"
+              :key="index"
+            >
+              <view v-if="!itm.num" class="m-[5px]">
+                <plus-cross theme="filled" size="20" fill="#333333" />
+              </view>
+              <view
+                class="rounded-full"
+                :style="{
+                  backgroundColor: itm.color,
+                }"
+                >{{ itm.num }}</view
+              >
+            </view>
+          </view>
+          <view v-if="item.w" class="text-[#EB1313] text-[28px]"
+            >得 {{ item.w }} 积分</view
+          >
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Taro from "@tarojs/taro";
+import { PlusCross } from "@icon-park/vue-next";
+import { GetLotteryRecord } from "../../api";
+import "./index.scss";
+
+const uid = ref("");
+
+const data = ref([]);
+
+Taro.useLoad((opt) => {
+  uid.value = opt.uid;
+  getList();
+});
+
+const getList = async () => {
+  const res = await GetLotteryRecord(uid.value);
+  data.value = res.data.map((item) => {
+    return {
+      qs: `第${item.Periods}期`,
+      hm: [
+        {
+          num: item.A,
+          color: "#088207",
+        },
+        { num: item.B, color: "#0500FA" },
+        { num: item.C, color: "#0500FA" },
+        { num: item.D, color: "#088207" },
+        { num: item.E, color: "#FF0204" },
+        { num: item.F, color: "#0500FA" },
+        {},
+        { num: item.G, color: "#FF0204" },
+      ],
+      t: item.DrawTime,
+      w: item.Win,
+    };
+  });
+};
+</script>
+
+<style lang="scss"></style>

src/utils/request.js

@@ -0,0 +1,28 @@
+import { getStorageSync, showToast } from "@tarojs/taro";
+import { createAlova } from "alova";
+import AdapterTaroVue from "@alova/adapter-taro/vue";
+
+const alovaInst = createAlova({
+  baseURL: process.env.TARO_APP_API,
+  ...AdapterTaroVue(),
+  beforeRequest: (instance) => {
+    instance.config.headers = {
+      "Content-Type": "application/json",
+      token: getStorageSync("token"),
+    };
+  },
+  responded: {
+    onSuccess({ data }) {
+      if (data.code === 200) return data.data;
+      return Promise.reject(data.msg);
+    },
+    onError() {
+      showToast({
+        title: "请求失败",
+        icon: "none",
+      });
+    },
+  },
+});
+
+export default alovaInst;

src/utils/srs.sdk.js

@@ -0,0 +1,764 @@
+import adapter from "webrtc-adapter";
+
+function SrsError(name, message) {
+  this.name = name;
+  this.message = message;
+  this.stack = new Error().stack;
+}
+SrsError.prototype = Object.create(Error.prototype);
+SrsError.prototype.constructor = SrsError;
+
+// Depends on adapter-7.4.0.min.js from https://github.com/webrtc/adapter
+// Async-awat-prmise based SRS RTC Publisher.
+function SrsRtcPublisherAsync() {
+  var self = {};
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
+  self.constraints = {
+    audio: true,
+    video: {
+      width: { ideal: 320, max: 576 },
+    },
+  };
+
+  // @see https://github.com/rtcdn/rtcdn-draft
+  // @url The WebRTC url to play with, for example:
+  //      webrtc://r.ossrs.net/live/livestream
+  // or specifies the API port:
+  //      webrtc://r.ossrs.net:11985/live/livestream
+  // or autostart the publish:
+  //      webrtc://r.ossrs.net/live/livestream?autostart=true
+  // or change the app from live to myapp:
+  //      webrtc://r.ossrs.net:11985/myapp/livestream
+  // or change the stream from livestream to mystream:
+  //      webrtc://r.ossrs.net:11985/live/mystream
+  // or set the api server to myapi.domain.com:
+  //      webrtc://myapi.domain.com/live/livestream
+  // or set the candidate(eip) of answer:
+  //      webrtc://r.ossrs.net/live/livestream?candidate=39.107.238.185
+  // or force to access https API:
+  //      webrtc://r.ossrs.net/live/livestream?schema=https
+  // or use plaintext, without SRTP:
+  //      webrtc://r.ossrs.net/live/livestream?encrypt=false
+  // or any other information, will pass-by in the query:
+  //      webrtc://r.ossrs.net/live/livestream?vhost=xxx
+  //      webrtc://r.ossrs.net/live/livestream?token=xxx
+  self.publish = async function (url) {
+    var conf = self.__internal.prepareUrl(url);
+    self.pc.addTransceiver("audio", { direction: "sendonly" });
+    self.pc.addTransceiver("video", { direction: "sendonly" });
+    //self.pc.addTransceiver("video", {direction: "sendonly"});
+    //self.pc.addTransceiver("audio", {direction: "sendonly"});
+
+    if (
+      !navigator.mediaDevices &&
+      window.location.protocol === "http:" &&
+      window.location.hostname !== "localhost"
+    ) {
+      throw new SrsError(
+        "HttpsRequiredError",
+        `Please use HTTPS or localhost to publish, read https://github.com/ossrs/srs/issues/2762#issuecomment-983147576`
+      );
+    }
+    var stream = await navigator.mediaDevices.getUserMedia(self.constraints);
+
+    // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+    stream.getTracks().forEach(function (track) {
+      self.pc.addTrack(track);
+
+      // Notify about local track when stream is ok.
+      self.ontrack && self.ontrack({ track: track });
+    });
+
+    var offer = await self.pc.createOffer();
+    await self.pc.setLocalDescription(offer);
+    var session = await new Promise(function (resolve, reject) {
+      // @see https://github.com/rtcdn/rtcdn-draft
+      var data = {
+        api: conf.apiUrl,
+        tid: conf.tid,
+        streamurl: conf.streamUrl,
+        clientip: null,
+        sdp: offer.sdp,
+      };
+      console.log("Generated offer: ", data);
+
+      const xhr = new XMLHttpRequest();
+      xhr.onload = function () {
+        if (xhr.readyState !== xhr.DONE) return;
+        if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);
+        const data = JSON.parse(xhr.responseText);
+        console.log("Got answer: ", data);
+        return data.code ? reject(xhr) : resolve(data);
+      };
+      xhr.open("POST", conf.apiUrl, true);
+      xhr.setRequestHeader("Content-type", "application/json");
+      xhr.send(JSON.stringify(data));
+    });
+    await self.pc.setRemoteDescription(
+      new RTCSessionDescription({ type: "answer", sdp: session.sdp })
+    );
+    session.simulator =
+      conf.schema +
+      "//" +
+      conf.urlObject.server +
+      ":" +
+      conf.port +
+      "/rtc/v1/nack/";
+
+    return session;
+  };
+
+  // Close the publisher.
+  self.close = function () {
+    self.pc && self.pc.close();
+    self.pc = null;
+  };
+
+  // The callback when got local stream.
+  // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+  self.ontrack = function (event) {
+    // Add track to stream of SDK.
+    self.stream.addTrack(event.track);
+  };
+
+  // Internal APIs.
+  self.__internal = {
+    defaultPath: "/rtc/v1/publish/",
+    prepareUrl: function (webrtcUrl) {
+      var urlObject = self.__internal.parse(webrtcUrl);
+
+      // If user specifies the schema, use it as API schema.
+      var schema = urlObject.user_query.schema;
+      schema = schema ? schema + ":" : window.location.protocol;
+
+      var port = urlObject.port || 1985;
+      if (schema === "https:") {
+        port = urlObject.port || 443;
+      }
+
+      // @see https://github.com/rtcdn/rtcdn-draft
+      var api = urlObject.user_query.play || self.__internal.defaultPath;
+      if (api.lastIndexOf("/") !== api.length - 1) {
+        api += "/";
+      }
+
+      var apiUrl = schema + "//" + urlObject.server + ":" + port + api;
+      for (var key in urlObject.user_query) {
+        if (key !== "api" && key !== "play") {
+          apiUrl += "&" + key + "=" + urlObject.user_query[key];
+        }
+      }
+      // Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
+      apiUrl = apiUrl.replace(api + "&", api + "?");
+
+      var streamUrl = urlObject.url;
+
+      return {
+        apiUrl: apiUrl,
+        streamUrl: streamUrl,
+        schema: schema,
+        urlObject: urlObject,
+        port: port,
+        tid: Number(parseInt(new Date().getTime() * Math.random() * 100))
+          .toString(16)
+          .slice(0, 7),
+      };
+    },
+    parse: function (url) {
+      // @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
+      var a = document.createElement("a");
+      a.href = url
+        .replace("rtmp://", "http://")
+        .replace("webrtc://", "http://")
+        .replace("rtc://", "http://");
+
+      var vhost = a.hostname;
+      var app = a.pathname.substring(1, a.pathname.lastIndexOf("/"));
+      var stream = a.pathname.slice(a.pathname.lastIndexOf("/") + 1);
+
+      // parse the vhost in the params of app, that srs supports.
+      app = app.replace("...vhost...", "?vhost=");
+      if (app.indexOf("?") >= 0) {
+        var params = app.slice(app.indexOf("?"));
+        app = app.slice(0, app.indexOf("?"));
+
+        if (params.indexOf("vhost=") > 0) {
+          vhost = params.slice(params.indexOf("vhost=") + "vhost=".length);
+          if (vhost.indexOf("&") > 0) {
+            vhost = vhost.slice(0, vhost.indexOf("&"));
+          }
+        }
+      }
+
+      // when vhost equals to server, and server is ip,
+      // the vhost is __defaultVhost__
+      if (a.hostname === vhost) {
+        var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
+        if (re.test(a.hostname)) {
+          vhost = "__defaultVhost__";
+        }
+      }
+
+      // parse the schema
+      var schema = "rtmp";
+      if (url.indexOf("://") > 0) {
+        schema = url.slice(0, url.indexOf("://"));
+      }
+
+      var port = a.port;
+      if (!port) {
+        // Finger out by webrtc url, if contains http or https port, to overwrite default 1985.
+        if (schema === "webrtc" && url.indexOf(`webrtc://${a.host}:`) === 0) {
+          port = url.indexOf(`webrtc://${a.host}:80`) === 0 ? 80 : 443;
+        }
+
+        // Guess by schema.
+        if (schema === "http") {
+          port = 80;
+        } else if (schema === "https") {
+          port = 443;
+        } else if (schema === "rtmp") {
+          port = 1935;
+        }
+      }
+
+      var ret = {
+        url: url,
+        schema: schema,
+        server: a.hostname,
+        port: port,
+        vhost: vhost,
+        app: app,
+        stream: stream,
+      };
+      self.__internal.fill_query(a.search, ret);
+
+      // For webrtc API, we use 443 if page is https, or schema specified it.
+      if (!ret.port) {
+        if (schema === "webrtc" || schema === "rtc") {
+          if (ret.user_query.schema === "https") {
+            ret.port = 443;
+          } else if (window.location.href.indexOf("https://") === 0) {
+            ret.port = 443;
+          } else {
+            // For WebRTC, SRS use 1985 as default API port.
+            ret.port = 1985;
+          }
+        }
+      }
+
+      return ret;
+    },
+    fill_query: function (query_string, obj) {
+      // pure user query object.
+      obj.user_query = {};
+
+      if (query_string.length === 0) {
+        return;
+      }
+
+      // split again for angularjs.
+      if (query_string.indexOf("?") >= 0) {
+        query_string = query_string.split("?")[1];
+      }
+
+      var queries = query_string.split("&");
+      for (var i = 0; i < queries.length; i++) {
+        var elem = queries[i];
+
+        var query = elem.split("=");
+        obj[query[0]] = query[1];
+        obj.user_query[query[0]] = query[1];
+      }
+
+      // alias domain for vhost.
+      if (obj.domain) {
+        obj.vhost = obj.domain;
+      }
+    },
+  };
+
+  self.pc = new RTCPeerConnection(null);
+
+  // To keep api consistent between player and publisher.
+  // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+  // @see https://webrtc.org/getting-started/media-devices
+  self.stream = new MediaStream();
+
+  return self;
+}
+
+// Depends on adapter-7.4.0.min.js from https://github.com/webrtc/adapter
+// Async-await-promise based SRS RTC Player.
+function SrsRtcPlayerAsync() {
+  var self = {};
+
+  // @see https://github.com/rtcdn/rtcdn-draft
+  // @url The WebRTC url to play with, for example:
+  //      webrtc://r.ossrs.net/live/livestream
+  // or specifies the API port:
+  //      webrtc://r.ossrs.net:11985/live/livestream
+  //      webrtc://r.ossrs.net:80/live/livestream
+  // or autostart the play:
+  //      webrtc://r.ossrs.net/live/livestream?autostart=true
+  // or change the app from live to myapp:
+  //      webrtc://r.ossrs.net:11985/myapp/livestream
+  // or change the stream from livestream to mystream:
+  //      webrtc://r.ossrs.net:11985/live/mystream
+  // or set the api server to myapi.domain.com:
+  //      webrtc://myapi.domain.com/live/livestream
+  // or set the candidate(eip) of answer:
+  //      webrtc://r.ossrs.net/live/livestream?candidate=39.107.238.185
+  // or force to access https API:
+  //      webrtc://r.ossrs.net/live/livestream?schema=https
+  // or use plaintext, without SRTP:
+  //      webrtc://r.ossrs.net/live/livestream?encrypt=false
+  // or any other information, will pass-by in the query:
+  //      webrtc://r.ossrs.net/live/livestream?vhost=xxx
+  //      webrtc://r.ossrs.net/live/livestream?token=xxx
+  self.play = async function (url) {
+    var conf = self.__internal.prepareUrl(url);
+    self.pc.addTransceiver("audio", { direction: "recvonly" });
+    self.pc.addTransceiver("video", { direction: "recvonly" });
+    //self.pc.addTransceiver("video", {direction: "recvonly"});
+    //self.pc.addTransceiver("audio", {direction: "recvonly"});
+
+    var offer = await self.pc.createOffer();
+    await self.pc.setLocalDescription(offer);
+    var session = await new Promise(function (resolve, reject) {
+      // @see https://github.com/rtcdn/rtcdn-draft
+      var data = {
+        api: conf.apiUrl,
+        tid: conf.tid,
+        streamurl: conf.streamUrl,
+        clientip: null,
+        sdp: offer.sdp,
+      };
+      console.log("Generated offer: ", data);
+
+      const xhr = new XMLHttpRequest();
+      xhr.onload = function () {
+        if (xhr.readyState !== xhr.DONE) return;
+        if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);
+        const data = JSON.parse(xhr.responseText);
+        console.log("Got answer: ", data);
+        return data.code ? reject(xhr) : resolve(data);
+      };
+      xhr.open("POST", conf.apiUrl, true);
+      xhr.setRequestHeader("Content-type", "application/json");
+      xhr.send(JSON.stringify(data));
+    });
+    await self.pc.setRemoteDescription(
+      new RTCSessionDescription({ type: "answer", sdp: session.sdp })
+    );
+    session.simulator =
+      conf.schema +
+      "//" +
+      conf.urlObject.server +
+      ":" +
+      conf.port +
+      "/rtc/v1/nack/";
+
+    return session;
+  };
+
+  // Close the player.
+  self.close = function () {
+    self.pc && self.pc.close();
+    self.pc = null;
+  };
+
+  // The callback when got remote track.
+  // Note that the onaddstream is deprecated, @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onaddstream
+  self.ontrack = function (event) {
+    // https://webrtc.org/getting-started/remote-streams
+    self.stream.addTrack(event.track);
+  };
+
+  // Internal APIs.
+  self.__internal = {
+    defaultPath: "/rtc/v1/play/",
+    prepareUrl: function (webrtcUrl) {
+      var urlObject = self.__internal.parse(webrtcUrl);
+      // If user specifies the schema, use it as API schema.
+      var schema = urlObject.user_query.schema;
+      schema = schema ? schema + ":" : window.location.protocol;
+
+      var port = urlObject.port || 1985;
+      if (schema === "https:") {
+        port = urlObject.port || 443;
+      }
+
+      // @see https://github.com/rtcdn/rtcdn-draft
+      var api = urlObject.user_query.play || self.__internal.defaultPath;
+      if (api.lastIndexOf("/") !== api.length - 1) {
+        api += "/";
+      }
+
+      var apiUrl = schema + "//" + urlObject.server + ":" + port + api;
+      for (var key in urlObject.user_query) {
+        if (key !== "api" && key !== "play") {
+          apiUrl += "&" + key + "=" + urlObject.user_query[key];
+        }
+      }
+      // Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
+      apiUrl = apiUrl.replace(api + "&", api + "?");
+
+      var streamUrl = urlObject.url;
+
+      return {
+        apiUrl: apiUrl,
+        streamUrl: streamUrl,
+        schema: schema,
+        urlObject: urlObject,
+        port: port,
+        tid: Number(parseInt(new Date().getTime() * Math.random() * 100))
+          .toString(16)
+          .slice(0, 7),
+      };
+    },
+    parse: function (url) {
+      // @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
+      var a = document.createElement("a");
+      a.href = url
+        .replace("rtmp://", "http://")
+        .replace("webrtc://", "http://")
+        .replace("rtc://", "http://");
+
+      var vhost = a.hostname;
+      var app = a.pathname.substring(1, a.pathname.lastIndexOf("/"));
+      var stream = a.pathname.slice(a.pathname.lastIndexOf("/") + 1);
+
+      // parse the vhost in the params of app, that srs supports.
+      app = app.replace("...vhost...", "?vhost=");
+      if (app.indexOf("?") >= 0) {
+        var params = app.slice(app.indexOf("?"));
+        app = app.slice(0, app.indexOf("?"));
+
+        if (params.indexOf("vhost=") > 0) {
+          vhost = params.slice(params.indexOf("vhost=") + "vhost=".length);
+          if (vhost.indexOf("&") > 0) {
+            vhost = vhost.slice(0, vhost.indexOf("&"));
+          }
+        }
+      }
+
+      // when vhost equals to server, and server is ip,
+      // the vhost is __defaultVhost__
+      if (a.hostname === vhost) {
+        var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
+        if (re.test(a.hostname)) {
+          vhost = "__defaultVhost__";
+        }
+      }
+
+      // parse the schema
+      var schema = "rtmp";
+      if (url.indexOf("://") > 0) {
+        schema = url.slice(0, url.indexOf("://"));
+      }
+
+      var port = a.port;
+      if (!port) {
+        // Finger out by webrtc url, if contains http or https port, to overwrite default 1985.
+        if (schema === "webrtc" && url.indexOf(`webrtc://${a.host}:`) === 0) {
+          port = url.indexOf(`webrtc://${a.host}:80`) === 0 ? 80 : 443;
+        }
+
+        // Guess by schema.
+        if (schema === "http") {
+          port = 80;
+        } else if (schema === "https") {
+          port = 443;
+        } else if (schema === "rtmp") {
+          port = 1935;
+        }
+      }
+
+      var ret = {
+        url: url,
+        schema: schema,
+        server: a.hostname,
+        port: port,
+        vhost: vhost,
+        app: app,
+        stream: stream,
+      };
+      self.__internal.fill_query(a.search, ret);
+
+      // For webrtc API, we use 443 if page is https, or schema specified it.
+      if (!ret.port) {
+        if (schema === "webrtc" || schema === "rtc") {
+          if (ret.user_query.schema === "https") {
+            ret.port = 443;
+          } else if (window.location.href.indexOf("https://") === 0) {
+            ret.port = 443;
+          } else {
+            // For WebRTC, SRS use 1985 as default API port.
+            ret.port = 1985;
+          }
+        }
+      }
+      return ret;
+    },
+    fill_query: function (query_string, obj) {
+      // pure user query object.
+      obj.user_query = {};
+
+      if (query_string.length === 0) {
+        return;
+      }
+
+      // split again for angularjs.
+      if (query_string.indexOf("?") >= 0) {
+        query_string = query_string.split("?")[1];
+      }
+
+      var queries = query_string.split("&");
+      for (var i = 0; i < queries.length; i++) {
+        var elem = queries[i];
+
+        var query = elem.split("=");
+        obj[query[0]] = query[1];
+        obj.user_query[query[0]] = query[1];
+      }
+
+      // alias domain for vhost.
+      if (obj.domain) {
+        obj.vhost = obj.domain;
+      }
+    },
+  };
+
+  self.pc = new RTCPeerConnection(null);
+
+  // Create a stream to add track to the stream, @see https://webrtc.org/getting-started/remote-streams
+  self.stream = new MediaStream();
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack
+  self.pc.ontrack = function (event) {
+    if (self.ontrack) {
+      self.ontrack(event);
+    }
+  };
+
+  return self;
+}
+
+// Depends on adapter-7.4.0.min.js from https://github.com/webrtc/adapter
+// Async-awat-prmise based SRS RTC Publisher by WHIP.
+function SrsRtcWhipWhepAsync() {
+  var self = {};
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
+  self.constraints = {
+    audio: true,
+    video: {
+      width: { ideal: 320, max: 576 },
+    },
+  };
+
+  // See https://datatracker.ietf.org/doc/draft-ietf-wish-whip/
+  // @url The WebRTC url to publish with, for example:
+  //      http://localhost:1985/rtc/v1/whip/?app=live&stream=livestream
+  // @options The options to control playing, supports:
+  //      videoOnly: boolean, whether only play video, default to false.
+  //      audioOnly: boolean, whether only play audio, default to false.
+  self.publish = async function (url, options) {
+    if (url.indexOf("/whip/") === -1)
+      throw new Error(`无效的 WHIP 链接 ${url}`);
+    if (options?.videoOnly && options?.audioOnly)
+      throw new Error(`选项中的videoOnly和audioOnly不能同时为true`);
+
+    if (!options?.videoOnly) {
+      self.pc.addTransceiver("audio", { direction: "sendonly" });
+    } else {
+      self.constraints.audio = false;
+    }
+
+    if (!options?.audioOnly) {
+      self.pc.addTransceiver("video", { direction: "sendonly" });
+    } else {
+      self.constraints.video = false;
+    }
+
+    if (
+      !navigator.mediaDevices &&
+      window.location.protocol === "http:" &&
+      window.location.hostname !== "localhost"
+    ) {
+      throw new SrsError(
+        "请求错误",
+        `请使用 HTTPS 或者 localhost 发布, 建议阅读 https://github.com/ossrs/srs/issues/2762#issuecomment-983147576`
+      );
+    }
+    var stream = await navigator.mediaDevices.getUserMedia(self.constraints);
+
+    // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+    stream.getTracks().forEach(function (track) {
+      self.pc.addTrack(track);
+
+      // Notify about local track when stream is ok.
+      self.ontrack && self.ontrack({ track: track });
+    });
+
+    var offer = await self.pc.createOffer();
+    await self.pc.setLocalDescription(offer);
+    const answer = await new Promise(function (resolve, reject) {
+      console.log(`生成 sdp: ${offer.sdp}`);
+
+      const xhr = new XMLHttpRequest();
+      xhr.onload = function () {
+        if (xhr.readyState !== xhr.DONE) return;
+        if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);
+        const data = xhr.responseText;
+        console.log("Got answer: ", data);
+        return data.code ? reject(xhr) : resolve(data);
+      };
+      xhr.open("POST", url, true);
+      xhr.setRequestHeader("Content-type", "application/sdp");
+      xhr.send(offer.sdp);
+    });
+    await self.pc.setRemoteDescription(
+      new RTCSessionDescription({ type: "answer", sdp: answer })
+    );
+
+    return self.__internal.parseId(url, offer.sdp, answer);
+  };
+
+  // See https://datatracker.ietf.org/doc/draft-ietf-wish-whip/
+  // @url The WebRTC url to play with, for example:
+  //      http://localhost:1985/rtc/v1/whep/?app=live&stream=livestream
+  // @options The options to control playing, supports:
+  //      videoOnly: boolean, whether only play video, default to false.
+  //      audioOnly: boolean, whether only play audio, default to false.
+  self.play = async function (url, options) {
+    if (url.indexOf("/whip-play/") === -1 && url.indexOf("/whep/") === -1)
+      throw new Error(`invalid WHEP url ${url}`);
+    if (options?.videoOnly && options?.audioOnly)
+      throw new Error(`选项中的videoOnly和audioOnly不能同时为true`);
+
+    if (!options?.videoOnly)
+      self.pc.addTransceiver("audio", { direction: "recvonly" });
+    if (!options?.audioOnly)
+      self.pc.addTransceiver("video", { direction: "recvonly" });
+
+    var offer = await self.pc.createOffer();
+    await self.pc.setLocalDescription(offer);
+    const answer = await new Promise(function (resolve, reject) {
+      console.log(`Generated offer: ${offer.sdp}`);
+
+      const xhr = new XMLHttpRequest();
+      xhr.onload = function () {
+        if (xhr.readyState !== xhr.DONE) return;
+        if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);
+        const data = xhr.responseText;
+        console.log("Got answer: ", data);
+        return data.code ? reject(xhr) : resolve(data);
+      };
+      xhr.open("POST", url, true);
+      xhr.setRequestHeader("Content-type", "application/sdp");
+      xhr.send(offer.sdp);
+    });
+    await self.pc.setRemoteDescription(
+      new RTCSessionDescription({ type: "answer", sdp: answer })
+    );
+
+    return self.__internal.parseId(url, offer.sdp, answer);
+  };
+
+  // Close the publisher.
+  self.close = function () {
+    self.pc && self.pc.close();
+    self.pc = null;
+  };
+
+  // The callback when got local stream.
+  // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+  self.ontrack = function (event) {
+    // Add track to stream of SDK.
+    self.stream.addTrack(event.track);
+  };
+
+  self.pc = new RTCPeerConnection(null);
+
+  // To keep api consistent between player and publisher.
+  // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+  // @see https://webrtc.org/getting-started/media-devices
+  self.stream = new MediaStream();
+
+  // Internal APIs.
+  self.__internal = {
+    parseId: (url, offer, answer) => {
+      let sessionid = offer.substr(
+        offer.indexOf("a=ice-ufrag:") + "a=ice-ufrag:".length
+      );
+      sessionid = sessionid.substr(0, sessionid.indexOf("\n") - 1) + ":";
+      sessionid += answer.substr(
+        answer.indexOf("a=ice-ufrag:") + "a=ice-ufrag:".length
+      );
+      sessionid = sessionid.substr(0, sessionid.indexOf("\n"));
+
+      const a = document.createElement("a");
+      a.href = url;
+      return {
+        sessionid: sessionid, // Should be ice-ufrag of answer:offer.
+        simulator: a.protocol + "//" + a.host + "/rtc/v1/nack/",
+      };
+    },
+  };
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack
+  self.pc.ontrack = function (event) {
+    if (self.ontrack) {
+      self.ontrack(event);
+    }
+  };
+
+  return self;
+}
+
+// Format the codec of RTCRtpSender, kind(audio/video) is optional filter.
+// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
+function SrsRtcFormatSenders(senders, kind) {
+  var codecs = [];
+  senders.forEach(function (sender) {
+    var params = sender.getParameters();
+    params &&
+      params.codecs &&
+      params.codecs.forEach(function (c) {
+        if (kind && sender.track.kind !== kind) {
+          return;
+        }
+
+        if (
+          c.mimeType.indexOf("/red") > 0 ||
+          c.mimeType.indexOf("/rtx") > 0 ||
+          c.mimeType.indexOf("/fec") > 0
+        ) {
+          return;
+        }
+
+        var s = "";
+
+        s += c.mimeType.replace("audio/", "").replace("video/", "");
+        s += ", " + c.clockRate + "HZ";
+        if (sender.track.kind === "audio") {
+          s += ", channels: " + c.channels;
+        }
+        s += ", pt: " + c.payloadType;
+
+        codecs.push(s);
+      });
+  });
+  return codecs.join(", ");
+}
+
+export default {
+  SrsRtcPublisherAsync,
+  SrsRtcWhipWhepAsync,
+  SrsRtcPlayerAsync,
+  SrsRtcFormatSenders,
+  SrsError,
+};

src/utils/webRtcPlugin.js

@@ -0,0 +1,312 @@
+import { BasePlugin, Events } from "xgplayer";
+// import adapter from "webrtc-adapter";
+
+function SrsError(name, message) {
+  this.name = name;
+  this.message = message;
+  this.stack = new Error().stack;
+}
+SrsError.prototype = Object.create(Error.prototype);
+SrsError.prototype.constructor = SrsError;
+
+export default class webRtcPlugin extends BasePlugin {
+  /**
+   * （必须声明）插件的名称，将作为插件实例的唯一key值
+   * 该参数还最为播放器上该插件的配置透传key值，例如：
+   * var p = new player({
+   *   webRtcPlugin: {
+   *     text: '这是插件webRtcPlugin的配置信息'
+   *   }
+   * })
+   * 在插件afterCreate之后可以通过this.config.text获取到改配置参数
+   **/
+  static get pluginName() {
+    return "webRtcPlugin";
+  }
+
+  static get defaultConfig() {
+    return {
+      text: "这是插件webRtcPlugin的默认Text",
+    };
+  }
+
+  constructor(args) {
+    super(args);
+  }
+
+  afterPlayerInit() {
+    // TODO 播放器调用start初始化播放源之后的逻辑
+  }
+
+  async afterCreate() {
+    // 在afterCreate中可以加入DOM的事件监听
+    console.log(this.player.config);
+    console.log(this.el);
+    const sdk = this.SrsRtcPlayerAsync();
+
+    this.player.root.ssrcObject = sdk.stream;
+
+    await sdk.play(this.player.config.url);
+
+    this.on(Events.PLAY, () => {
+      console.log("播放播放回调");
+    });
+  }
+
+  SrsRtcPlayerAsync() {
+    var self = {};
+
+    // @see https://github.com/rtcdn/rtcdn-draft
+    // @url The WebRTC url to play with, for example:
+    //      webrtc://r.ossrs.net/live/livestream
+    // or specifies the API port:
+    //      webrtc://r.ossrs.net:11985/live/livestream
+    //      webrtc://r.ossrs.net:80/live/livestream
+    // or autostart the play:
+    //      webrtc://r.ossrs.net/live/livestream?autostart=true
+    // or change the app from live to myapp:
+    //      webrtc://r.ossrs.net:11985/myapp/livestream
+    // or change the stream from livestream to mystream:
+    //      webrtc://r.ossrs.net:11985/live/mystream
+    // or set the api server to myapi.domain.com:
+    //      webrtc://myapi.domain.com/live/livestream
+    // or set the candidate(eip) of answer:
+    //      webrtc://r.ossrs.net/live/livestream?candidate=39.107.238.185
+    // or force to access https API:
+    //      webrtc://r.ossrs.net/live/livestream?schema=https
+    // or use plaintext, without SRTP:
+    //      webrtc://r.ossrs.net/live/livestream?encrypt=false
+    // or any other information, will pass-by in the query:
+    //      webrtc://r.ossrs.net/live/livestream?vhost=xxx
+    //      webrtc://r.ossrs.net/live/livestream?token=xxx
+    self.play = async function (url) {
+      var conf = self.__internal.prepareUrl(url);
+      self.pc.addTransceiver("audio", { direction: "recvonly" });
+      self.pc.addTransceiver("video", { direction: "recvonly" });
+
+      var offer = await self.pc.createOffer();
+      await self.pc.setLocalDescription(offer);
+      var session = await new Promise(function (resolve, reject) {
+        // @see https://github.com/rtcdn/rtcdn-draft
+        var data = {
+          api: conf.apiUrl,
+          tid: conf.tid,
+          streamurl: conf.streamUrl,
+          clientip: null,
+          sdp: offer.sdp,
+        };
+        console.log("Generated offer: ", data);
+
+        const xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+          if (xhr.readyState !== xhr.DONE) return;
+          if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);
+          const data = JSON.parse(xhr.responseText);
+          console.log("Got answer: ", data);
+          return data.code ? reject(xhr) : resolve(data);
+        };
+        xhr.open("POST", conf.apiUrl, true);
+        xhr.setRequestHeader("Content-type", "application/json");
+        xhr.send(JSON.stringify(data));
+      });
+      await self.pc.setRemoteDescription(
+        new RTCSessionDescription({ type: "answer", sdp: session.sdp })
+      );
+      session.simulator =
+        conf.schema +
+        "//" +
+        conf.urlObject.server +
+        ":" +
+        conf.port +
+        "/rtc/v1/nack/";
+
+      return session;
+    };
+
+    // Close the player.
+    self.close = function () {
+      self.pc && self.pc.close();
+      self.pc = null;
+    };
+
+    // The callback when got remote track.
+    // Note that the onaddstream is deprecated, @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onaddstream
+    self.ontrack = function (event) {
+      // https://webrtc.org/getting-started/remote-streams
+      self.stream.addTrack(event.track);
+    };
+
+    // Internal APIs.
+    self.__internal = {
+      defaultPath: "/rtc/v1/play/",
+      prepareUrl: function (webrtcUrl) {
+        var urlObject = self.__internal.parse(webrtcUrl);
+        // If user specifies the schema, use it as API schema.
+        var schema = urlObject.user_query.schema;
+        schema = schema ? schema + ":" : window.location.protocol;
+
+        var port = urlObject.port || 1985;
+        if (schema === "https:") {
+          port = urlObject.port || 443;
+        }
+
+        // @see https://github.com/rtcdn/rtcdn-draft
+        var api = urlObject.user_query.play || self.__internal.defaultPath;
+        if (api.lastIndexOf("/") !== api.length - 1) {
+          api += "/";
+        }
+
+        var apiUrl = schema + "//" + urlObject.server + ":" + port + api;
+        for (var key in urlObject.user_query) {
+          if (key !== "api" && key !== "play") {
+            apiUrl += "&" + key + "=" + urlObject.user_query[key];
+          }
+        }
+        // Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
+        apiUrl = apiUrl.replace(api + "&", api + "?");
+
+        var streamUrl = urlObject.url;
+
+        return {
+          apiUrl: apiUrl,
+          streamUrl: streamUrl,
+          schema: schema,
+          urlObject: urlObject,
+          port: port,
+          tid: Number(parseInt(new Date().getTime() * Math.random() * 100))
+            .toString(16)
+            .slice(0, 7),
+        };
+      },
+      parse: function (url) {
+        // @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
+        var a = document.createElement("a");
+        a.href = url
+          .replace("rtmp://", "http://")
+          .replace("webrtc://", "http://")
+          .replace("rtc://", "http://");
+
+        var vhost = a.hostname;
+        var app = a.pathname.substring(1, a.pathname.lastIndexOf("/"));
+        var stream = a.pathname.slice(a.pathname.lastIndexOf("/") + 1);
+
+        // parse the vhost in the params of app, that srs supports.
+        app = app.replace("...vhost...", "?vhost=");
+        if (app.indexOf("?") >= 0) {
+          var params = app.slice(app.indexOf("?"));
+          app = app.slice(0, app.indexOf("?"));
+
+          if (params.indexOf("vhost=") > 0) {
+            vhost = params.slice(params.indexOf("vhost=") + "vhost=".length);
+            if (vhost.indexOf("&") > 0) {
+              vhost = vhost.slice(0, vhost.indexOf("&"));
+            }
+          }
+        }
+
+        // when vhost equals to server, and server is ip,
+        // the vhost is __defaultVhost__
+        if (a.hostname === vhost) {
+          var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
+          if (re.test(a.hostname)) {
+            vhost = "__defaultVhost__";
+          }
+        }
+
+        // parse the schema
+        var schema = "rtmp";
+        if (url.indexOf("://") > 0) {
+          schema = url.slice(0, url.indexOf("://"));
+        }
+
+        var port = a.port;
+        if (!port) {
+          // Finger out by webrtc url, if contains http or https port, to overwrite default 1985.
+          if (schema === "webrtc" && url.indexOf(`webrtc://${a.host}:`) === 0) {
+            port = url.indexOf(`webrtc://${a.host}:80`) === 0 ? 80 : 443;
+          }
+
+          // Guess by schema.
+          if (schema === "http") {
+            port = 80;
+          } else if (schema === "https") {
+            port = 443;
+          } else if (schema === "rtmp") {
+            port = 1935;
+          }
+        }
+
+        var ret = {
+          url: url,
+          schema: schema,
+          server: a.hostname,
+          port: port,
+          vhost: vhost,
+          app: app,
+          stream: stream,
+        };
+        self.__internal.fill_query(a.search, ret);
+
+        // For webrtc API, we use 443 if page is https, or schema specified it.
+        if (!ret.port) {
+          if (schema === "webrtc" || schema === "rtc") {
+            if (ret.user_query.schema === "https") {
+              ret.port = 443;
+            } else if (window.location.href.indexOf("https://") === 0) {
+              ret.port = 443;
+            } else {
+              // For WebRTC, SRS use 1985 as default API port.
+              ret.port = 1985;
+            }
+          }
+        }
+        return ret;
+      },
+      fill_query: function (query_string, obj) {
+        // pure user query object.
+        obj.user_query = {};
+
+        if (query_string.length === 0) {
+          return;
+        }
+
+        // split again for angularjs.
+        if (query_string.indexOf("?") >= 0) {
+          query_string = query_string.split("?")[1];
+        }
+
+        var queries = query_string.split("&");
+        for (var i = 0; i < queries.length; i++) {
+          var elem = queries[i];
+
+          var query = elem.split("=");
+          obj[query[0]] = query[1];
+          obj.user_query[query[0]] = query[1];
+        }
+
+        // alias domain for vhost.
+        if (obj.domain) {
+          obj.vhost = obj.domain;
+        }
+      },
+    };
+
+    self.pc = new RTCPeerConnection(null);
+
+    // Create a stream to add track to the stream, @see https://webrtc.org/getting-started/remote-streams
+    self.stream = new MediaStream();
+
+    // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack
+    self.pc.ontrack = function (event) {
+      if (self.ontrack) {
+        self.ontrack(event);
+      }
+    };
+
+    return self;
+  }
+
+  destroy() {
+    // 播放器销毁的时候一些逻辑
+  }
+}

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // 这里给出了一份 taro 通用示例，具体要根据你自己项目的目录结构进行配置
+  // 比如你使用 vue3 项目，你就需要把 vue 这个格式也包括进来
+  // 不在 content glob表达式中包括的文件，在里面编写tailwindcss class，是不会生成对应的css工具类的
+  content: ["./public/index.html", "./src/**/*.{html,js,ts,jsx,tsx,vue}"],
+  // 其他配置项 ...
+  corePlugins: {
+    // 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发多端，你应该使用 process.env.TARO_ENV 环境变量来控制它
+    preflight: process.env.TARO_ENV === "h5",
+  },
+};