Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
709d6368 1 parent fc6a3e49

✨ feat(客户端): 完善书籍页，新增视频播放模块

Expand all
Inline Side-by-side
Showing 15 changed files with 187 additions and 19 deletions
...@@ -8,5 +8,9 @@ ...@@ -8,5 +8,9 @@
8 <body> 8 <body>
9 <div id="app"></div> 9 <div id="app"></div>
10 <script type="module" src="/src/main.js"></script> 10 <script type="module" src="/src/main.js"></script>
11 + <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
12 + <script>
13 + var vConsole = new VConsole();
14 + </script> -->
11 </body> 15 </body>
12 </html> 16 </html>
......
1 { 1 {
2 - "name": "vant4-template", 2 + "name": "tjws",
3 "version": "1.0.0", 3 "version": "1.0.0",
4 "lockfileVersion": 2, 4 "lockfileVersion": 2,
5 "requires": true, 5 "requires": true,
6 "packages": { 6 "packages": {
7 "": { 7 "": {
8 - "name": "vant4-template", 8 + "name": "tjws",
9 "version": "1.0.0", 9 "version": "1.0.0",
10 "dependencies": { 10 "dependencies": {
11 - "dom-to-image": "^2.6.0",
12 "html2canvas": "^1.4.1", 11 "html2canvas": "^1.4.1",
13 "jquery": "^3.6.0", 12 "jquery": "^3.6.0",
14 "lodash": "^4.17.21", 13 "lodash": "^4.17.21",
15 "moment": "^2.29.1", 14 "moment": "^2.29.1",
15 + "mui-player": "^1.6.0",
16 "vant": "^4.0.0-alpha.0", 16 "vant": "^4.0.0-alpha.0",
17 "vue": "^3.2.31" 17 "vue": "^3.2.31"
18 }, 18 },
19 "devDependencies": { 19 "devDependencies": {
20 "@types/jquery": "^3.5.14", 20 "@types/jquery": "^3.5.14",
21 + "@types/lodash": "^4.14.182",
21 "@vitejs/plugin-vue": "^2.2.4", 22 "@vitejs/plugin-vue": "^2.2.4",
22 "@vue/compiler-sfc": "^3.2.31", 23 "@vue/compiler-sfc": "^3.2.31",
23 "axios": "^0.26.1", 24 "axios": "^0.26.1",
...@@ -115,6 +116,12 @@ ...@@ -115,6 +116,12 @@
115 "@types/sizzle": "*" 116 "@types/sizzle": "*"
116 } 117 }
117 }, 118 },
119 + "node_modules/@types/lodash": {
120 + "version": "4.14.182",
121 + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
122 + "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
123 + "dev": true
124 + },
118 "node_modules/@types/sizzle": { 125 "node_modules/@types/sizzle": {
119 "version": "2.3.3", 126 "version": "2.3.3",
120 "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", 127 "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
...@@ -516,11 +523,6 @@ ...@@ -516,11 +523,6 @@
516 "node": ">=0.3.1" 523 "node": ">=0.3.1"
517 } 524 }
518 }, 525 },
519 - "node_modules/dom-to-image": {
520 - "version": "2.6.0",
521 - "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
522 - "integrity": "sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc="
523 - },
524 "node_modules/dot-case": { 526 "node_modules/dot-case": {
525 "version": "3.0.4", 527 "version": "3.0.4",
526 "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", 528 "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
...@@ -1038,6 +1040,11 @@ ...@@ -1038,6 +1040,11 @@
1038 "dev": true, 1040 "dev": true,
1039 "license": "MIT" 1041 "license": "MIT"
1040 }, 1042 },
1043 + "node_modules/mui-player": {
1044 + "version": "1.6.0",
1045 + "resolved": "https://registry.npmjs.org/mui-player/-/mui-player-1.6.0.tgz",
1046 + "integrity": "sha512-FAVzmNayqLl8LUNigBPWiNUOaLOIzPw0Z8JzjXkGyHK31IKJLxn3AQl5TYdTP0GjBcFfg7O8LFET1AjmRFXpuA=="
1047 + },
1041 "node_modules/nanoid": { 1048 "node_modules/nanoid": {
1042 "version": "3.3.1", 1049 "version": "3.3.1",
1043 "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", 1050 "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
...@@ -1761,6 +1768,12 @@ ...@@ -1761,6 +1768,12 @@
1761 "@types/sizzle": "*" 1768 "@types/sizzle": "*"
1762 } 1769 }
1763 }, 1770 },
1771 + "@types/lodash": {
1772 + "version": "4.14.182",
1773 + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
1774 + "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
1775 + "dev": true
1776 + },
1764 "@types/sizzle": { 1777 "@types/sizzle": {
1765 "version": "2.3.3", 1778 "version": "2.3.3",
1766 "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", 1779 "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
...@@ -2088,11 +2101,6 @@ ...@@ -2088,11 +2101,6 @@
2088 "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", 2101 "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
2089 "dev": true 2102 "dev": true
2090 }, 2103 },
2091 - "dom-to-image": {
2092 - "version": "2.6.0",
2093 - "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
2094 - "integrity": "sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc="
2095 - },
2096 "dot-case": { 2104 "dot-case": {
2097 "version": "3.0.4", 2105 "version": "3.0.4",
2098 "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", 2106 "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
...@@ -2450,6 +2458,11 @@ ...@@ -2450,6 +2458,11 @@
2450 "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", 2458 "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
2451 "dev": true 2459 "dev": true
2452 }, 2460 },
2461 + "mui-player": {
2462 + "version": "1.6.0",
2463 + "resolved": "https://registry.npmjs.org/mui-player/-/mui-player-1.6.0.tgz",
2464 + "integrity": "sha512-FAVzmNayqLl8LUNigBPWiNUOaLOIzPw0Z8JzjXkGyHK31IKJLxn3AQl5TYdTP0GjBcFfg7O8LFET1AjmRFXpuA=="
2465 + },
2453 "nanoid": { 2466 "nanoid": {
2454 "version": "3.3.1", 2467 "version": "3.3.1",
2455 "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", 2468 "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
......
...@@ -13,11 +13,13 @@ ...@@ -13,11 +13,13 @@
13 "jquery": "^3.6.0", 13 "jquery": "^3.6.0",
14 "lodash": "^4.17.21", 14 "lodash": "^4.17.21",
15 "moment": "^2.29.1", 15 "moment": "^2.29.1",
16 + "mui-player": "^1.6.0",
16 "vant": "^4.0.0-alpha.0", 17 "vant": "^4.0.0-alpha.0",
17 "vue": "^3.2.31" 18 "vue": "^3.2.31"
18 }, 19 },
19 "devDependencies": { 20 "devDependencies": {
20 "@types/jquery": "^3.5.14", 21 "@types/jquery": "^3.5.14",
22 + "@types/lodash": "^4.14.182",
21 "@vitejs/plugin-vue": "^2.2.4", 23 "@vitejs/plugin-vue": "^2.2.4",
22 "@vue/compiler-sfc": "^3.2.31", 24 "@vue/compiler-sfc": "^3.2.31",
23 "axios": "^0.26.1", 25 "axios": "^0.26.1",
......
1 +<template>
2 + <div
3 + style="margin: 1rem; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);">
4 + <div :id="'mui-player-' + item.case_id" style="border-top-left-radius: 5px; border-top-right-radius: 5px;"></div>
5 + <div style="color: #713610; padding: 1rem; padding-bottom: 0.5rem;">
6 + <van-row>
7 + <van-col span="12">
8 + <van-image round width="2rem" height="2rem" style="vertical-align: bottom;"
9 + src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />&nbsp;
10 + <span style="font-size: 1.05rem;">王忆慈</span>
11 + </van-col>
12 + <van-col span="12">
13 + <div style="padding: 0.25rem; padding-top: 0.75rem; text-align: right;">
14 + <span @click="setCommit">
15 + <van-icon :name="icon_liuyan" size="1.2rem" style="vertical-align: bottom;" />
16 + 67
17 + </span>
18 + &nbsp;&nbsp;&nbsp;
19 + <span @click="setLike()">
20 + <van-icon v-if="!detail.liked" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" />
21 + <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" />
22 + 10086
23 + </span>
24 + </div>
25 + </van-col>
26 + </van-row>
27 + </div>
28 + <div style="color: #999999; padding: 0px 1rem 0.5rem;">杨浦民办科技幼稚园 ｜ 藏语</div>
29 + </div>
30 +</template>
31 +
32 +<script setup>
33 +import icon_dianzan1 from '@images/icon-dianzan01@2x.png'
34 +import icon_dianzan2 from '@images/icon-dianzan02@2x.png'
35 +import icon_liuyan from '@images/icon-liuyan@2x.png'
36 +
37 +import { ref, reactive, onMounted } from 'vue'
38 +import 'mui-player/dist/mui-player.min.css'
39 +import MuiPlayer from 'mui-player'
40 +import _ from 'lodash';
41 +
42 +onMounted(() => {
43 +})
44 +
45 +</script>
46 +
47 +<script>
48 +export default {
49 + props: ['item'],
50 + data() {
51 + return {
52 + detail: {}
53 + }
54 + },
55 + created() {
56 + },
57 + mounted() {
58 + var mp = new MuiPlayer({
59 + container: '#mui-player-' + this.item.case_id,
60 + title: this.item.title,
61 + src: this.item.video.url,
62 + poster: this.item.cover.url,
63 + autoFit: false
64 + })
65 + this.detail = _.cloneDeep(this.item)
66 + },
67 + methods: {
68 + setLike() {
69 + this.detail.liked = !this.detail.liked
70 + },
71 + setCommit() {
72 + console.warn('跳转详情页，移动到留言页');
73 + console.warn(this.detail.case_id);
74 + }
75 + }
76 +}
77 +</script>
78 +
79 +<style lang="less" scoped>
80 +</style>
...\ No newline at end of file ...\ No newline at end of file
1 import { createApp } from 'vue'; 1 import { createApp } from 'vue';
2 -import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker } from 'vant'; 2 +import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky } from 'vant';
3 import router from './router'; 3 import router from './router';
4 import App from './App.vue'; 4 import App from './App.vue';
5 import axios from './utils/axios'; 5 import axios from './utils/axios';
...@@ -30,6 +30,7 @@ app.use(List); ...@@ -30,6 +30,7 @@ app.use(List);
30 app.use(PullRefresh); 30 app.use(PullRefresh);
31 app.use(Popup); 31 app.use(Popup);
32 app.use(Picker); 32 app.use(Picker);
33 +app.use(Sticky);
33 34
34 app.use(ConfigProvider); 35 app.use(ConfigProvider);
35 36
......
This diff is collapsed. Click to expand it.
...@@ -39,6 +39,14 @@ export default [{ ...@@ -39,6 +39,14 @@ export default [{
39 }, 39 },
40 children: [] 40 children: []
41 }, { 41 }, {
42 + path: '/client/videoDetail',
43 + name: '视频作品详情',
44 + component: () => import('./views/client/videoDetail.vue'),
45 + meta: {
46 + title: '作品'
47 + },
48 + children: []
49 +}, {
42 path: '/image', 50 path: '/image',
43 name: 'html转图片', 51 name: 'html转图片',
44 component: () => import('./views/html2canvas.vue'), 52 component: () => import('./views/html2canvas.vue'),
......
1 +<template>
2 + <div class="video-detail-page">
3 + <div style="padding: 1rem;">
4 + <div>
5 + <van-image
6 + round
7 + width="2rem"
8 + height="2rem"
9 + src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
10 + />
11 + <span style="color: #222222;">瑟日古娜</span>
12 + </div>
13 + </div>
14 + </div>
15 +</template>
16 +
17 +<script setup>
18 +import { ref, reactive, onMounted } from 'vue'
19 +import { useRoute, useRouter } from 'vue-router'
20 +import axios from '@/utils/axios';
21 +import $ from 'jquery'
22 +import { Toast } from 'vant';
23 +const $route = useRoute();
24 +const $router = useRouter();
25 +
26 + onMounted(() => {
27 +
28 + })
29 +</script>
30 +
31 +<script>
32 +import mixin from 'common/mixin';
33 +
34 +export default {
35 + mixins: [mixin.init],
36 + data () {
37 + return {
38 +
39 + }
40 + },
41 + mounted () {
42 +
43 + },
44 + methods: {
45 +
46 + }
47 +}
48 +</script>
49 +
50 +<style lang="less" scoped>
51 +.video-detail-page {
52 +
53 +}
54 +</style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -26,6 +26,7 @@ export default({ command, mode }) => { ...@@ -26,6 +26,7 @@ export default({ command, mode }) => {
26 "@utils": path.resolve(__dirname, "src/utils"), 26 "@utils": path.resolve(__dirname, "src/utils"),
27 "@images": path.resolve(__dirname, "src/assets/images"), 27 "@images": path.resolve(__dirname, "src/assets/images"),
28 "@css": path.resolve(__dirname, "src/assets/css"), 28 "@css": path.resolve(__dirname, "src/assets/css"),
29 + "@mock": path.resolve(__dirname, "src/assets/mock"),
29 "common": path.resolve(__dirname, "src/common"), 30 "common": path.resolve(__dirname, "src/common"),
30 }, 31 },
31 // dedupe: [''], // 如果你在你的应用程序中有相同依赖的副本（比如 monorepos），使用这个选项来强制 Vite 总是将列出的依赖关系解析到相同的副本（从项目根目录)。 32 // dedupe: [''], // 如果你在你的应用程序中有相同依赖的副本（比如 monorepos），使用这个选项来强制 Vite 总是将列出的依赖关系解析到相同的副本（从项目根目录)。
......
...@@ -48,6 +48,11 @@ ...@@ -48,6 +48,11 @@
48 dependencies: 48 dependencies:
49 "@types/sizzle" "*" 49 "@types/sizzle" "*"
50 50
51 +"@types/lodash@^4.14.182":
52 + "integrity" "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
53 + "resolved" "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz"
54 + "version" "4.14.182"
55 +
51 "@types/sizzle@*": 56 "@types/sizzle@*":
52 "integrity" "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==" 57 "integrity" "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
53 "resolved" "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz" 58 "resolved" "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz"
...@@ -335,11 +340,6 @@ ...@@ -335,11 +340,6 @@
335 "resolved" "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz" 340 "resolved" "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz"
336 "version" "4.0.2" 341 "version" "4.0.2"
337 342
338 -"dom-to-image@^2.6.0":
339 - "integrity" "sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc="
340 - "resolved" "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz"
341 - "version" "2.6.0"
342 -
343 "dot-case@^3.0.4": 343 "dot-case@^3.0.4":
344 "integrity" "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==" 344 "integrity" "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w=="
345 "resolved" "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz" 345 "resolved" "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz"
...@@ -641,6 +641,11 @@ ...@@ -641,6 +641,11 @@
641 "resolved" "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz" 641 "resolved" "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
642 "version" "2.1.2" 642 "version" "2.1.2"
643 643
644 +"mui-player@^1.6.0":
645 + "integrity" "sha512-FAVzmNayqLl8LUNigBPWiNUOaLOIzPw0Z8JzjXkGyHK31IKJLxn3AQl5TYdTP0GjBcFfg7O8LFET1AjmRFXpuA=="
646 + "resolved" "https://registry.npmjs.org/mui-player/-/mui-player-1.6.0.tgz"
647 + "version" "1.6.0"
648 +
644 "nanoid@^3.3.1": 649 "nanoid@^3.3.1":
645 "integrity" "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==" 650 "integrity" "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw=="
646 "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz" 651 "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz"
......