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 @@
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script> -->
</body>
</html>
......
{
"name": "vant4-template",
"name": "tjws",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "vant4-template",
"name": "tjws",
"version": "1.0.0",
"dependencies": {
"dom-to-image": "^2.6.0",
"html2canvas": "^1.4.1",
"jquery": "^3.6.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"mui-player": "^1.6.0",
"vant": "^4.0.0-alpha.0",
"vue": "^3.2.31"
},
"devDependencies": {
"@types/jquery": "^3.5.14",
"@types/lodash": "^4.14.182",
"@vitejs/plugin-vue": "^2.2.4",
"@vue/compiler-sfc": "^3.2.31",
"axios": "^0.26.1",
......@@ -115,6 +116,12 @@
"@types/sizzle": "*"
}
},
"node_modules/@types/lodash": {
"version": "4.14.182",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
"integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
"dev": true
},
"node_modules/@types/sizzle": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
......@@ -516,11 +523,6 @@
"node": ">=0.3.1"
}
},
"node_modules/dom-to-image": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
"integrity": "sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc="
},
"node_modules/dot-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
......@@ -1038,6 +1040,11 @@
"dev": true,
"license": "MIT"
},
"node_modules/mui-player": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mui-player/-/mui-player-1.6.0.tgz",
"integrity": "sha512-FAVzmNayqLl8LUNigBPWiNUOaLOIzPw0Z8JzjXkGyHK31IKJLxn3AQl5TYdTP0GjBcFfg7O8LFET1AjmRFXpuA=="
},
"node_modules/nanoid": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
......@@ -1761,6 +1768,12 @@
"@types/sizzle": "*"
}
},
"@types/lodash": {
"version": "4.14.182",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
"integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
"dev": true
},
"@types/sizzle": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
......@@ -2088,11 +2101,6 @@
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
"dev": true
},
"dom-to-image": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
"integrity": "sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc="
},
"dot-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
......@@ -2450,6 +2458,11 @@
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
},
"mui-player": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mui-player/-/mui-player-1.6.0.tgz",
"integrity": "sha512-FAVzmNayqLl8LUNigBPWiNUOaLOIzPw0Z8JzjXkGyHK31IKJLxn3AQl5TYdTP0GjBcFfg7O8LFET1AjmRFXpuA=="
},
"nanoid": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
......
......@@ -13,11 +13,13 @@
"jquery": "^3.6.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"mui-player": "^1.6.0",
"vant": "^4.0.0-alpha.0",
"vue": "^3.2.31"
},
"devDependencies": {
"@types/jquery": "^3.5.14",
"@types/lodash": "^4.14.182",
"@vitejs/plugin-vue": "^2.2.4",
"@vue/compiler-sfc": "^3.2.31",
"axios": "^0.26.1",
......
<template>
<div
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);">
<div :id="'mui-player-' + item.case_id" style="border-top-left-radius: 5px; border-top-right-radius: 5px;"></div>
<div style="color: #713610; padding: 1rem; padding-bottom: 0.5rem;">
<van-row>
<van-col span="12">
<van-image round width="2rem" height="2rem" style="vertical-align: bottom;"
src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />&nbsp;
<span style="font-size: 1.05rem;">王忆慈</span>
</van-col>
<van-col span="12">
<div style="padding: 0.25rem; padding-top: 0.75rem; text-align: right;">
<span @click="setCommit">
<van-icon :name="icon_liuyan" size="1.2rem" style="vertical-align: bottom;" />
67
</span>
&nbsp;&nbsp;&nbsp;
<span @click="setLike()">
<van-icon v-if="!detail.liked" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" />
<van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" />
10086
</span>
</div>
</van-col>
</van-row>
</div>
<div style="color: #999999; padding: 0px 1rem 0.5rem;">杨浦民办科技幼稚园 ｜ 藏语</div>
</div>
</template>
<script setup>
import icon_dianzan1 from '@images/icon-dianzan01@2x.png'
import icon_dianzan2 from '@images/icon-dianzan02@2x.png'
import icon_liuyan from '@images/icon-liuyan@2x.png'
import { ref, reactive, onMounted } from 'vue'
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
import _ from 'lodash';
onMounted(() => {
})
</script>
<script>
export default {
props: ['item'],
data() {
return {
detail: {}
}
},
created() {
},
mounted() {
var mp = new MuiPlayer({
container: '#mui-player-' + this.item.case_id,
title: this.item.title,
src: this.item.video.url,
poster: this.item.cover.url,
autoFit: false
})
this.detail = _.cloneDeep(this.item)
},
methods: {
setLike() {
this.detail.liked = !this.detail.liked
},
setCommit() {
console.warn('跳转详情页，移动到留言页');
console.warn(this.detail.case_id);
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
import { createApp } from 'vue';
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';
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';
import router from './router';
import App from './App.vue';
import axios from './utils/axios';
......@@ -30,6 +30,7 @@ app.use(List);
app.use(PullRefresh);
app.use(Popup);
app.use(Picker);
app.use(Sticky);
app.use(ConfigProvider);
......
This diff is collapsed. Click to expand it.
......@@ -39,6 +39,14 @@ export default [{
},
children: []
}, {
path: '/client/videoDetail',
name: '视频作品详情',
component: () => import('./views/client/videoDetail.vue'),
meta: {
title: '作品'
},
children: []
}, {
path: '/image',
name: 'html转图片',
component: () => import('./views/html2canvas.vue'),
......
<template>
<div class="video-detail-page">
<div style="padding: 1rem;">
<div>
<van-image
round
width="2rem"
height="2rem"
src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<span style="color: #222222;">瑟日古娜</span>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();
onMounted(() => {
})
</script>
<script>
import mixin from 'common/mixin';
export default {
mixins: [mixin.init],
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.video-detail-page {
}
</style>
\ No newline at end of file
......@@ -26,6 +26,7 @@ export default({ command, mode }) => {
"@utils": path.resolve(__dirname, "src/utils"),
"@images": path.resolve(__dirname, "src/assets/images"),
"@css": path.resolve(__dirname, "src/assets/css"),
"@mock": path.resolve(__dirname, "src/assets/mock"),
"common": path.resolve(__dirname, "src/common"),
},
// dedupe: [''], // 如果你在你的应用程序中有相同依赖的副本（比如 monorepos），使用这个选项来强制 Vite 总是将列出的依赖关系解析到相同的副本（从项目根目录)。
......
......@@ -48,6 +48,11 @@
dependencies:
"@types/sizzle" "*"
"@types/lodash@^4.14.182":
"integrity" "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
"resolved" "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz"
"version" "4.14.182"
"@types/sizzle@*":
"integrity" "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
"resolved" "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz"
......@@ -335,11 +340,6 @@
"resolved" "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz"
"version" "4.0.2"
"dom-to-image@^2.6.0":
"integrity" "sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc="
"resolved" "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz"
"version" "2.6.0"
"dot-case@^3.0.4":
"integrity" "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w=="
"resolved" "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz"
......@@ -641,6 +641,11 @@
"resolved" "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
"version" "2.1.2"
"mui-player@^1.6.0":
"integrity" "sha512-FAVzmNayqLl8LUNigBPWiNUOaLOIzPw0Z8JzjXkGyHK31IKJLxn3AQl5TYdTP0GjBcFfg7O8LFET1AjmRFXpuA=="
"resolved" "https://registry.npmjs.org/mui-player/-/mui-player-1.6.0.tgz"
"version" "1.6.0"
"nanoid@^3.3.1":
"integrity" "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw=="
"resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz"
......