save
This commit is contained in:
hhh
parent
3c1fe5eeb1
commit
6b0731fff0
@ -17,7 +17,7 @@
|
|||||||
"mockjs": "1.1.0",
|
"mockjs": "1.1.0",
|
||||||
"pinyin": "2.11.1",
|
"pinyin": "2.11.1",
|
||||||
"vconsole": "^3.15.0",
|
"vconsole": "^3.15.0",
|
||||||
"vue": "3.2.31",
|
"vue": "3.2.45",
|
||||||
"vue-router": "4.0.14",
|
"vue-router": "4.0.14",
|
||||||
"vue-switches": "2.0.1",
|
"vue-switches": "2.0.1",
|
||||||
"vuex": "4.0.2"
|
"vuex": "4.0.2"
|
||||||
|
|||||||
194
pnpm-lock.yaml
194
pnpm-lock.yaml
@ -16,13 +16,13 @@ specifiers:
|
|||||||
pinyin: 2.11.1
|
pinyin: 2.11.1
|
||||||
vconsole: ^3.15.0
|
vconsole: ^3.15.0
|
||||||
vite: 4.0.4
|
vite: 4.0.4
|
||||||
vue: 3.2.31
|
vue: ^3.2.45
|
||||||
vue-router: 4.0.14
|
vue-router: 4.0.14
|
||||||
vue-switches: 2.0.1
|
vue-switches: 2.0.1
|
||||||
vuex: 4.0.2
|
vuex: 4.0.2
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
'@jambonn/vue-lazyload': 1.0.9_vue@3.2.31
|
'@jambonn/vue-lazyload': 1.0.9_vue@3.2.45
|
||||||
axios: 0.26.1
|
axios: 0.26.1
|
||||||
core-js: 3.21.1
|
core-js: 3.21.1
|
||||||
dayjs: 1.11.0
|
dayjs: 1.11.0
|
||||||
@ -32,14 +32,14 @@ dependencies:
|
|||||||
mockjs: 1.1.0
|
mockjs: 1.1.0
|
||||||
pinyin: 2.11.1
|
pinyin: 2.11.1
|
||||||
vconsole: 3.15.0
|
vconsole: 3.15.0
|
||||||
vue: 3.2.31
|
vue: 3.2.45
|
||||||
vue-router: 4.0.14_vue@3.2.31
|
vue-router: 4.0.14_vue@3.2.45
|
||||||
vue-switches: 2.0.1
|
vue-switches: 2.0.1
|
||||||
vuex: 4.0.2_vue@3.2.31
|
vuex: 4.0.2_vue@3.2.45
|
||||||
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@vitejs/plugin-vue': 4.0.0_vite@4.0.4+vue@3.2.31
|
'@vitejs/plugin-vue': 4.0.0_vite@4.0.4+vue@3.2.45
|
||||||
'@vitejs/plugin-vue-jsx': 3.0.0_vite@4.0.4+vue@3.2.31
|
'@vitejs/plugin-vue-jsx': 3.0.0_vite@4.0.4+vue@3.2.45
|
||||||
less: 4.1.3
|
less: 4.1.3
|
||||||
mobile-select: 1.1.2
|
mobile-select: 1.1.2
|
||||||
vite: 4.0.4_less@4.1.3
|
vite: 4.0.4_less@4.1.3
|
||||||
@ -75,10 +75,10 @@ packages:
|
|||||||
'@babel/generator': 7.20.7
|
'@babel/generator': 7.20.7
|
||||||
'@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.12
|
'@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.12
|
||||||
'@babel/helper-module-transforms': 7.20.11
|
'@babel/helper-module-transforms': 7.20.11
|
||||||
'@babel/helpers': 7.20.7
|
'@babel/helpers': 7.20.13
|
||||||
'@babel/parser': 7.20.7
|
'@babel/parser': 7.20.13
|
||||||
'@babel/template': 7.20.7
|
'@babel/template': 7.20.7
|
||||||
'@babel/traverse': 7.20.12
|
'@babel/traverse': 7.20.13
|
||||||
'@babel/types': 7.20.7
|
'@babel/types': 7.20.7
|
||||||
convert-source-map: 1.9.0
|
convert-source-map: 1.9.0
|
||||||
debug: 4.3.4
|
debug: 4.3.4
|
||||||
@ -182,7 +182,7 @@ packages:
|
|||||||
'@babel/helper-split-export-declaration': 7.18.6
|
'@babel/helper-split-export-declaration': 7.18.6
|
||||||
'@babel/helper-validator-identifier': 7.19.1
|
'@babel/helper-validator-identifier': 7.19.1
|
||||||
'@babel/template': 7.20.7
|
'@babel/template': 7.20.7
|
||||||
'@babel/traverse': 7.20.12
|
'@babel/traverse': 7.20.13
|
||||||
'@babel/types': 7.20.7
|
'@babel/types': 7.20.7
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
@ -208,7 +208,7 @@ packages:
|
|||||||
'@babel/helper-member-expression-to-functions': 7.20.7
|
'@babel/helper-member-expression-to-functions': 7.20.7
|
||||||
'@babel/helper-optimise-call-expression': 7.18.6
|
'@babel/helper-optimise-call-expression': 7.18.6
|
||||||
'@babel/template': 7.20.7
|
'@babel/template': 7.20.7
|
||||||
'@babel/traverse': 7.20.12
|
'@babel/traverse': 7.20.13
|
||||||
'@babel/types': 7.20.7
|
'@babel/types': 7.20.7
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
@ -248,12 +248,12 @@ packages:
|
|||||||
engines: {node: '>=6.9.0'}
|
engines: {node: '>=6.9.0'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@babel/helpers/7.20.7:
|
/@babel/helpers/7.20.13:
|
||||||
resolution: {integrity: sha512-PBPjs5BppzsGaxHQCDKnZ6Gd9s6xl8bBCluz3vEInLGRJmnZan4F6BYCeqtyXqkk4W5IlPmjK4JlOuZkpJ3xZA==}
|
resolution: {integrity: sha512-nzJ0DWCL3gB5RCXbUO3KIMMsBY2Eqbx8mBpKGE/02PgyRQFcPQLbkQ1vyy596mZLaP+dAfD+R4ckASzNVmW3jg==}
|
||||||
engines: {node: '>=6.9.0'}
|
engines: {node: '>=6.9.0'}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/template': 7.20.7
|
'@babel/template': 7.20.7
|
||||||
'@babel/traverse': 7.20.12
|
'@babel/traverse': 7.20.13
|
||||||
'@babel/types': 7.20.7
|
'@babel/types': 7.20.7
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
@ -268,8 +268,8 @@ packages:
|
|||||||
js-tokens: 4.0.0
|
js-tokens: 4.0.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@babel/parser/7.20.7:
|
/@babel/parser/7.20.13:
|
||||||
resolution: {integrity: sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==}
|
resolution: {integrity: sha512-gFDLKMfpiXCsjt4za2JA9oTMn70CeseCehb11kRZgvd7+F67Hih3OHOK24cRrWECJ/ljfPGac6ygXAs/C8kIvw==}
|
||||||
engines: {node: '>=6.0.0'}
|
engines: {node: '>=6.0.0'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -295,8 +295,8 @@ packages:
|
|||||||
'@babel/helper-plugin-utils': 7.20.2
|
'@babel/helper-plugin-utils': 7.20.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@babel/plugin-transform-typescript/7.20.7_@babel+core@7.20.12:
|
/@babel/plugin-transform-typescript/7.20.13_@babel+core@7.20.12:
|
||||||
resolution: {integrity: sha512-m3wVKEvf6SoszD8pu4NZz3PvfKRCMgk6D6d0Qi9hNnlM5M6CFS92EgF4EiHVLKbU0r/r7ty1hg7NPZwE7WRbYw==}
|
resolution: {integrity: sha512-O7I/THxarGcDZxkgWKMUrk7NK1/WbHAg3Xx86gqS6x9MTrNL6AwIluuZ96ms4xeDe6AVx6rjHbWHP7x26EPQBA==}
|
||||||
engines: {node: '>=6.9.0'}
|
engines: {node: '>=6.9.0'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
'@babel/core': ^7.0.0-0
|
'@babel/core': ^7.0.0-0
|
||||||
@ -309,8 +309,8 @@ packages:
|
|||||||
- supports-color
|
- supports-color
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@babel/runtime/7.20.7:
|
/@babel/runtime/7.20.13:
|
||||||
resolution: {integrity: sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==}
|
resolution: {integrity: sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==}
|
||||||
engines: {node: '>=6.9.0'}
|
engines: {node: '>=6.9.0'}
|
||||||
dependencies:
|
dependencies:
|
||||||
regenerator-runtime: 0.13.11
|
regenerator-runtime: 0.13.11
|
||||||
@ -321,12 +321,12 @@ packages:
|
|||||||
engines: {node: '>=6.9.0'}
|
engines: {node: '>=6.9.0'}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/code-frame': 7.18.6
|
'@babel/code-frame': 7.18.6
|
||||||
'@babel/parser': 7.20.7
|
'@babel/parser': 7.20.13
|
||||||
'@babel/types': 7.20.7
|
'@babel/types': 7.20.7
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@babel/traverse/7.20.12:
|
/@babel/traverse/7.20.13:
|
||||||
resolution: {integrity: sha512-MsIbFN0u+raeja38qboyF8TIT7K0BFzz/Yd/77ta4MsUsmP2RAnidIlwq7d5HFQrH/OZJecGV6B71C4zAgpoSQ==}
|
resolution: {integrity: sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==}
|
||||||
engines: {node: '>=6.9.0'}
|
engines: {node: '>=6.9.0'}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/code-frame': 7.18.6
|
'@babel/code-frame': 7.18.6
|
||||||
@ -335,7 +335,7 @@ packages:
|
|||||||
'@babel/helper-function-name': 7.19.0
|
'@babel/helper-function-name': 7.19.0
|
||||||
'@babel/helper-hoist-variables': 7.18.6
|
'@babel/helper-hoist-variables': 7.18.6
|
||||||
'@babel/helper-split-export-declaration': 7.18.6
|
'@babel/helper-split-export-declaration': 7.18.6
|
||||||
'@babel/parser': 7.20.7
|
'@babel/parser': 7.20.13
|
||||||
'@babel/types': 7.20.7
|
'@babel/types': 7.20.7
|
||||||
debug: 4.3.4
|
debug: 4.3.4
|
||||||
globals: 11.12.0
|
globals: 11.12.0
|
||||||
@ -549,13 +549,13 @@ packages:
|
|||||||
dev: true
|
dev: true
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
/@jambonn/vue-lazyload/1.0.9_vue@3.2.31:
|
/@jambonn/vue-lazyload/1.0.9_vue@3.2.45:
|
||||||
resolution: {integrity: sha512-V9AnxDTAS1+q5LpTWtvyEN2bo1skvSzPRbFfP7Z1qhfEQRQouSwReEkbEb5B5M4MDEM1UIE0kxlsvOcCkon8DQ==}
|
resolution: {integrity: sha512-V9AnxDTAS1+q5LpTWtvyEN2bo1skvSzPRbFfP7Z1qhfEQRQouSwReEkbEb5B5M4MDEM1UIE0kxlsvOcCkon8DQ==}
|
||||||
engines: {node: '>=12.x'}
|
engines: {node: '>=12.x'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
vue: ^3.0.11
|
vue: ^3.0.11
|
||||||
dependencies:
|
dependencies:
|
||||||
vue: 3.2.31
|
vue: 3.2.45
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@jridgewell/gen-mapping/0.1.1:
|
/@jridgewell/gen-mapping/0.1.1:
|
||||||
@ -615,7 +615,7 @@ packages:
|
|||||||
dev: false
|
dev: false
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
/@vitejs/plugin-vue-jsx/3.0.0_vite@4.0.4+vue@3.2.31:
|
/@vitejs/plugin-vue-jsx/3.0.0_vite@4.0.4+vue@3.2.45:
|
||||||
resolution: {integrity: sha512-vurkuzgac5SYuxd2HUZqAFAWGTF10diKBwJNbCvnWijNZfXd+7jMtqjPFbGt7idOJUn584fP1Ar9j/GN2jQ3Ew==}
|
resolution: {integrity: sha512-vurkuzgac5SYuxd2HUZqAFAWGTF10diKBwJNbCvnWijNZfXd+7jMtqjPFbGt7idOJUn584fP1Ar9j/GN2jQ3Ew==}
|
||||||
engines: {node: ^14.18.0 || >=16.0.0}
|
engines: {node: ^14.18.0 || >=16.0.0}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@ -623,15 +623,15 @@ packages:
|
|||||||
vue: ^3.0.0
|
vue: ^3.0.0
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/core': 7.20.12
|
'@babel/core': 7.20.12
|
||||||
'@babel/plugin-transform-typescript': 7.20.7_@babel+core@7.20.12
|
'@babel/plugin-transform-typescript': 7.20.13_@babel+core@7.20.12
|
||||||
'@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.20.12
|
'@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.20.12
|
||||||
vite: 4.0.4_less@4.1.3
|
vite: 4.0.4_less@4.1.3
|
||||||
vue: 3.2.31
|
vue: 3.2.45
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@vitejs/plugin-vue/4.0.0_vite@4.0.4+vue@3.2.31:
|
/@vitejs/plugin-vue/4.0.0_vite@4.0.4+vue@3.2.45:
|
||||||
resolution: {integrity: sha512-e0X4jErIxAB5oLtDqbHvHpJe/uWNkdpYV83AOG2xo2tEVSzCzewgJMtREZM30wXnM5ls90hxiOtAuVU6H5JgbA==}
|
resolution: {integrity: sha512-e0X4jErIxAB5oLtDqbHvHpJe/uWNkdpYV83AOG2xo2tEVSzCzewgJMtREZM30wXnM5ls90hxiOtAuVU6H5JgbA==}
|
||||||
engines: {node: ^14.18.0 || >=16.0.0}
|
engines: {node: ^14.18.0 || >=16.0.0}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@ -639,7 +639,7 @@ packages:
|
|||||||
vue: ^3.2.25
|
vue: ^3.2.25
|
||||||
dependencies:
|
dependencies:
|
||||||
vite: 4.0.4_less@4.1.3
|
vite: 4.0.4_less@4.1.3
|
||||||
vue: 3.2.31
|
vue: 3.2.45
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@vue/babel-helper-vue-transform-on/1.0.2:
|
/@vue/babel-helper-vue-transform-on/1.0.2:
|
||||||
@ -652,7 +652,7 @@ packages:
|
|||||||
'@babel/helper-module-imports': 7.18.6
|
'@babel/helper-module-imports': 7.18.6
|
||||||
'@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.20.12
|
'@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.20.12
|
||||||
'@babel/template': 7.20.7
|
'@babel/template': 7.20.7
|
||||||
'@babel/traverse': 7.20.12
|
'@babel/traverse': 7.20.13
|
||||||
'@babel/types': 7.20.7
|
'@babel/types': 7.20.7
|
||||||
'@vue/babel-helper-vue-transform-on': 1.0.2
|
'@vue/babel-helper-vue-transform-on': 1.0.2
|
||||||
camelcase: 6.3.0
|
camelcase: 6.3.0
|
||||||
@ -663,90 +663,90 @@ packages:
|
|||||||
- supports-color
|
- supports-color
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@vue/compiler-core/3.2.31:
|
/@vue/compiler-core/3.2.45:
|
||||||
resolution: {integrity: sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==}
|
resolution: {integrity: sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/parser': 7.20.7
|
'@babel/parser': 7.20.13
|
||||||
'@vue/shared': 3.2.31
|
'@vue/shared': 3.2.45
|
||||||
estree-walker: 2.0.2
|
estree-walker: 2.0.2
|
||||||
source-map: 0.6.1
|
source-map: 0.6.1
|
||||||
|
|
||||||
/@vue/compiler-dom/3.2.31:
|
/@vue/compiler-dom/3.2.45:
|
||||||
resolution: {integrity: sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==}
|
resolution: {integrity: sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vue/compiler-core': 3.2.31
|
'@vue/compiler-core': 3.2.45
|
||||||
'@vue/shared': 3.2.31
|
'@vue/shared': 3.2.45
|
||||||
|
|
||||||
/@vue/compiler-sfc/2.7.14:
|
/@vue/compiler-sfc/2.7.14:
|
||||||
resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
|
resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/parser': 7.20.7
|
'@babel/parser': 7.20.13
|
||||||
postcss: 8.4.21
|
postcss: 8.4.21
|
||||||
source-map: 0.6.1
|
source-map: 0.6.1
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@vue/compiler-sfc/3.2.31:
|
/@vue/compiler-sfc/3.2.45:
|
||||||
resolution: {integrity: sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==}
|
resolution: {integrity: sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/parser': 7.20.7
|
'@babel/parser': 7.20.13
|
||||||
'@vue/compiler-core': 3.2.31
|
'@vue/compiler-core': 3.2.45
|
||||||
'@vue/compiler-dom': 3.2.31
|
'@vue/compiler-dom': 3.2.45
|
||||||
'@vue/compiler-ssr': 3.2.31
|
'@vue/compiler-ssr': 3.2.45
|
||||||
'@vue/reactivity-transform': 3.2.31
|
'@vue/reactivity-transform': 3.2.45
|
||||||
'@vue/shared': 3.2.31
|
'@vue/shared': 3.2.45
|
||||||
estree-walker: 2.0.2
|
estree-walker: 2.0.2
|
||||||
magic-string: 0.25.9
|
magic-string: 0.25.9
|
||||||
postcss: 8.4.21
|
postcss: 8.4.21
|
||||||
source-map: 0.6.1
|
source-map: 0.6.1
|
||||||
|
|
||||||
/@vue/compiler-ssr/3.2.31:
|
/@vue/compiler-ssr/3.2.45:
|
||||||
resolution: {integrity: sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==}
|
resolution: {integrity: sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vue/compiler-dom': 3.2.31
|
'@vue/compiler-dom': 3.2.45
|
||||||
'@vue/shared': 3.2.31
|
'@vue/shared': 3.2.45
|
||||||
|
|
||||||
/@vue/devtools-api/6.4.5:
|
/@vue/devtools-api/6.5.0:
|
||||||
resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==}
|
resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@vue/reactivity-transform/3.2.31:
|
/@vue/reactivity-transform/3.2.45:
|
||||||
resolution: {integrity: sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==}
|
resolution: {integrity: sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/parser': 7.20.7
|
'@babel/parser': 7.20.13
|
||||||
'@vue/compiler-core': 3.2.31
|
'@vue/compiler-core': 3.2.45
|
||||||
'@vue/shared': 3.2.31
|
'@vue/shared': 3.2.45
|
||||||
estree-walker: 2.0.2
|
estree-walker: 2.0.2
|
||||||
magic-string: 0.25.9
|
magic-string: 0.25.9
|
||||||
|
|
||||||
/@vue/reactivity/3.2.31:
|
/@vue/reactivity/3.2.45:
|
||||||
resolution: {integrity: sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==}
|
resolution: {integrity: sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vue/shared': 3.2.31
|
'@vue/shared': 3.2.45
|
||||||
|
|
||||||
/@vue/runtime-core/3.2.31:
|
/@vue/runtime-core/3.2.45:
|
||||||
resolution: {integrity: sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==}
|
resolution: {integrity: sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vue/reactivity': 3.2.31
|
'@vue/reactivity': 3.2.45
|
||||||
'@vue/shared': 3.2.31
|
'@vue/shared': 3.2.45
|
||||||
|
|
||||||
/@vue/runtime-dom/3.2.31:
|
/@vue/runtime-dom/3.2.45:
|
||||||
resolution: {integrity: sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==}
|
resolution: {integrity: sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vue/runtime-core': 3.2.31
|
'@vue/runtime-core': 3.2.45
|
||||||
'@vue/shared': 3.2.31
|
'@vue/shared': 3.2.45
|
||||||
csstype: 2.6.21
|
csstype: 2.6.21
|
||||||
|
|
||||||
/@vue/server-renderer/3.2.31_vue@3.2.31:
|
/@vue/server-renderer/3.2.45_vue@3.2.45:
|
||||||
resolution: {integrity: sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg==}
|
resolution: {integrity: sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
vue: 3.2.31
|
vue: 3.2.45
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vue/compiler-ssr': 3.2.31
|
'@vue/compiler-ssr': 3.2.45
|
||||||
'@vue/shared': 3.2.31
|
'@vue/shared': 3.2.45
|
||||||
vue: 3.2.31
|
vue: 3.2.45
|
||||||
|
|
||||||
/@vue/shared/3.2.31:
|
/@vue/shared/3.2.45:
|
||||||
resolution: {integrity: sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==}
|
resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
|
||||||
|
|
||||||
/abbrev/1.1.1:
|
/abbrev/1.1.1:
|
||||||
resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
|
resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
|
||||||
@ -1493,8 +1493,8 @@ packages:
|
|||||||
dev: false
|
dev: false
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
/rollup/3.10.0:
|
/rollup/3.10.1:
|
||||||
resolution: {integrity: sha512-JmRYz44NjC1MjVF2VKxc0M1a97vn+cDxeqWmnwyAF4FvpjK8YFdHpaqvQB+3IxCvX05vJxKZkoMDU8TShhmJVA==}
|
resolution: {integrity: sha512-3Er+yel3bZbZX1g2kjVM+FW+RUWDxbG87fcqFM5/9HbPCTpbVp6JOLn7jlxnNlbu7s/N/uDA4EV/91E2gWnxzw==}
|
||||||
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
|
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
@ -1643,7 +1643,7 @@ packages:
|
|||||||
/vconsole/3.15.0:
|
/vconsole/3.15.0:
|
||||||
resolution: {integrity: sha512-8hq7wabPcRucSWQyN7/1tthMawP9JPvM95zgtMHpPknMMMCKj+abpoK7P7oKK4B0qw58C24Mdvo9+raUdpHyVQ==}
|
resolution: {integrity: sha512-8hq7wabPcRucSWQyN7/1tthMawP9JPvM95zgtMHpPknMMMCKj+abpoK7P7oKK4B0qw58C24Mdvo9+raUdpHyVQ==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/runtime': 7.20.7
|
'@babel/runtime': 7.20.13
|
||||||
copy-text-to-clipboard: 3.0.1
|
copy-text-to-clipboard: 3.0.1
|
||||||
core-js: 3.21.1
|
core-js: 3.21.1
|
||||||
mutation-observer: 1.0.3
|
mutation-observer: 1.0.3
|
||||||
@ -1678,18 +1678,18 @@ packages:
|
|||||||
less: 4.1.3
|
less: 4.1.3
|
||||||
postcss: 8.4.21
|
postcss: 8.4.21
|
||||||
resolve: 1.22.1
|
resolve: 1.22.1
|
||||||
rollup: 3.10.0
|
rollup: 3.10.1
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
fsevents: 2.3.2
|
fsevents: 2.3.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/vue-router/4.0.14_vue@3.2.31:
|
/vue-router/4.0.14_vue@3.2.45:
|
||||||
resolution: {integrity: sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==}
|
resolution: {integrity: sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
vue: ^3.2.0
|
vue: ^3.2.0
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vue/devtools-api': 6.4.5
|
'@vue/devtools-api': 6.5.0
|
||||||
vue: 3.2.31
|
vue: 3.2.45
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/vue-switches/2.0.1:
|
/vue-switches/2.0.1:
|
||||||
@ -1705,22 +1705,22 @@ packages:
|
|||||||
csstype: 3.1.1
|
csstype: 3.1.1
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/vue/3.2.31:
|
/vue/3.2.45:
|
||||||
resolution: {integrity: sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==}
|
resolution: {integrity: sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vue/compiler-dom': 3.2.31
|
'@vue/compiler-dom': 3.2.45
|
||||||
'@vue/compiler-sfc': 3.2.31
|
'@vue/compiler-sfc': 3.2.45
|
||||||
'@vue/runtime-dom': 3.2.31
|
'@vue/runtime-dom': 3.2.45
|
||||||
'@vue/server-renderer': 3.2.31_vue@3.2.31
|
'@vue/server-renderer': 3.2.45_vue@3.2.45
|
||||||
'@vue/shared': 3.2.31
|
'@vue/shared': 3.2.45
|
||||||
|
|
||||||
/vuex/4.0.2_vue@3.2.31:
|
/vuex/4.0.2_vue@3.2.45:
|
||||||
resolution: {integrity: sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==}
|
resolution: {integrity: sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
vue: ^3.0.2
|
vue: ^3.0.2
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vue/devtools-api': 6.4.5
|
'@vue/devtools-api': 6.5.0
|
||||||
vue: 3.2.31
|
vue: 3.2.45
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/webidl-conversions/3.0.1:
|
/webidl-conversions/3.0.1:
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<from-bottom-dialog
|
<from-bottom-dialog
|
||||||
page-id="home-index"
|
page-id="home-index"
|
||||||
v-model="modelValue"
|
:modelValue="modelValue"
|
||||||
|
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||||
@cancel="cancel"
|
@cancel="cancel"
|
||||||
:show-heng-gang="false"
|
:show-heng-gang="false"
|
||||||
maskMode="light"
|
maskMode="light"
|
||||||
@ -35,7 +36,7 @@
|
|||||||
<img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
|
<img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
|
||||||
class="love-image">
|
class="love-image">
|
||||||
<img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt="" class="love-image">
|
<img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt="" class="love-image">
|
||||||
<span>{{ $likeNum(item.loveNum) }}</span>
|
<span>{{ formatNumber(item.loveNum) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="replies">
|
<div class="replies">
|
||||||
@ -60,7 +61,7 @@
|
|||||||
<img v-if="child.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
|
<img v-if="child.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
|
||||||
class="love-image">
|
class="love-image">
|
||||||
<img v-else src="../assets/img/icon/components/like-gray-small.png" alt="" class="love-image">
|
<img v-else src="../assets/img/icon/components/like-gray-small.png" alt="" class="love-image">
|
||||||
<span>{{ $likeNum(child.loveNum) }}</span>
|
<span>{{ formatNumber(child.loveNum) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="more">
|
<div class="more">
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<img class="poster" v-lazy="$imgPreview(i.cover)" alt="">
|
<img class="poster" v-lazy="$imgPreview(i.cover)" alt="">
|
||||||
<div class="num" v-if="mode === 'normal'">
|
<div class="num" v-if="mode === 'normal'">
|
||||||
<img class="love" src="../assets/img/icon/love.svg" alt="">
|
<img class="love" src="../assets/img/icon/love.svg" alt="">
|
||||||
<span>{{ $likeNum(i.digg_count) }}</span>
|
<span>{{ formatNumber(i.digg_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="date" v-if="mode === 'date'">
|
<div class="date" v-if="mode === 'date'">
|
||||||
<div class="day">{{ getDay(i.create_time) }}</div>
|
<div class="day">{{ getDay(i.create_time) }}</div>
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<from-bottom-dialog
|
<from-bottom-dialog
|
||||||
:page-id="pageId"
|
:page-id="pageId"
|
||||||
v-model="modelValue"
|
:modelValue="modelValue"
|
||||||
|
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||||
@cancel="closeShare"
|
@cancel="closeShare"
|
||||||
:show-heng-gang="false"
|
:show-heng-gang="false"
|
||||||
:touch-moved="false"
|
:touch-moved="false"
|
||||||
|
|||||||
@ -31,16 +31,16 @@
|
|||||||
<img src="../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
|
<img src="../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
|
||||||
<img src="../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved">
|
<img src="../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved">
|
||||||
</div>
|
</div>
|
||||||
<span>{{ $likeNum(lVideo.digg_count) }}</span>
|
<span>{{ formatNumber(lVideo.digg_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="message mb2r" @click.stop="$emit('showComments')">
|
<div class="message mb2r" @click.stop="$emit('showComments')">
|
||||||
<!-- <div class="message mb15p" @click.stop="showComment">-->
|
<!-- <div class="message mb15p" @click.stop="showComment">-->
|
||||||
<img src="../assets/img/icon/message.svg" alt="" class="message-image">
|
<img src="../assets/img/icon/message.svg" alt="" class="message-image">
|
||||||
<span>{{ $likeNum(lVideo.comment_count) }}</span>
|
<span>{{ formatNumber(lVideo.comment_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
|
<div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
|
||||||
<img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
<img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
||||||
<span>{{ $likeNum(lVideo.share_count) }}</span>
|
<span>{{ formatNumber(lVideo.share_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="share mb4r" @click.stop="$emit('showShare')">
|
<div v-else class="share mb4r" @click.stop="$emit('showShare')">
|
||||||
<img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
<img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
||||||
@ -331,8 +331,8 @@ export default {
|
|||||||
this.$refs.video.pause()
|
this.$refs.video.pause()
|
||||||
this.isPlaying = false
|
this.isPlaying = false
|
||||||
},
|
},
|
||||||
$likeNum(v) {
|
formatNumber(v) {
|
||||||
return globalMethods.$likeNum(v)
|
return globalMethods.formatNumber(v)
|
||||||
},
|
},
|
||||||
$duration(v) {
|
$duration(v) {
|
||||||
return globalMethods.$duration(v)
|
return globalMethods.$duration(v)
|
||||||
|
|||||||
@ -30,16 +30,16 @@
|
|||||||
<img src="../../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
|
<img src="../../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
|
||||||
<img src="../../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved">
|
<img src="../../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved">
|
||||||
</div>
|
</div>
|
||||||
<span>{{ $likeNum(lVideo.digg_count) }}</span>
|
<span>{{ formatNumber(lVideo.digg_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="message mb2r" @click.stop="$emit('showComments')">
|
<div class="message mb2r" @click.stop="$emit('showComments')">
|
||||||
<!-- <div class="message mb15p" @click.stop="showComment">-->
|
<!-- <div class="message mb15p" @click.stop="showComment">-->
|
||||||
<img src="../../assets/img/icon/message.svg" alt="" class="message-image">
|
<img src="../../assets/img/icon/message.svg" alt="" class="message-image">
|
||||||
<span>{{ $likeNum(lVideo.comment_count) }}</span>
|
<span>{{ formatNumber(lVideo.comment_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
|
<div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
|
||||||
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
||||||
<span>{{ $likeNum(lVideo.share_count) }}</span>
|
<span>{{ formatNumber(lVideo.share_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="share mb4r" @click.stop="$emit('showShare')">
|
<div v-else class="share mb4r" @click.stop="$emit('showShare')">
|
||||||
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
||||||
@ -310,8 +310,8 @@ export default {
|
|||||||
this.paused = true
|
this.paused = true
|
||||||
this.isPlaying = false
|
this.isPlaying = false
|
||||||
},
|
},
|
||||||
$likeNum(v) {
|
formatNumber(v) {
|
||||||
return globalMethods.$likeNum(v)
|
return globalMethods.formatNumber(v)
|
||||||
},
|
},
|
||||||
$duration(v) {
|
$duration(v) {
|
||||||
return globalMethods.$duration(v)
|
return globalMethods.$duration(v)
|
||||||
|
|||||||
@ -1,13 +1,235 @@
|
|||||||
<template>
|
<script setup>
|
||||||
|
|
||||||
|
import {reactive} from "vue";
|
||||||
|
import BaseMarquee from "../BaseMarquee";
|
||||||
|
|
||||||
|
const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
index: {
|
||||||
|
type: Number,
|
||||||
|
default: () => {
|
||||||
|
return -1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
prefix: {
|
||||||
|
type: String,
|
||||||
|
default: () => {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isMy: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isUp: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
|
||||||
|
isPlay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
isAttention: false,
|
||||||
|
name: `v-${prefix}-${index}-video`,
|
||||||
|
test: [1, 2],
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="item-desc">
|
||||||
|
<div class="content ml1r mb2r" v-if="!isMy">
|
||||||
|
<div class="location-wrapper" v-if=" item.city || item.address">
|
||||||
|
<div class="location">
|
||||||
|
<img src="../../assets/img/icon/location.webp" alt="">
|
||||||
|
<span>{{ item.city }}</span>
|
||||||
|
<template v-if="item.address">
|
||||||
|
<div class="gang"></div>
|
||||||
|
</template>
|
||||||
|
<span>{{ item.address }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name mb1r fb" @click.stop="$emit('goUserInfo')">@{{ item.author.nickname }}</div>
|
||||||
|
<div class="description mb1r">
|
||||||
|
{{ item.desc }}
|
||||||
|
</div>
|
||||||
|
<div class="music" @click.stop="$nav('/music')">
|
||||||
|
<img src="../../assets/img/icon/music.svg" alt="" class="music-image">
|
||||||
|
<BaseMarquee :key="state.name"
|
||||||
|
:name="state.name"
|
||||||
|
:isPlay="isPlay"
|
||||||
|
:text="item.music.title"
|
||||||
|
@click.stop="$emit('goMusic')"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="comment-status">
|
||||||
|
<div class="comment">
|
||||||
|
<div class="type-comment">
|
||||||
|
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
|
||||||
|
<div class="right">
|
||||||
|
<p>
|
||||||
|
<span class="name">zzzzz</span>
|
||||||
|
<span class="time">2020-01-20</span>
|
||||||
|
</p>
|
||||||
|
<p class="text">北京</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<transition-group name="comment-status" tag="div" class="loveds">
|
||||||
|
<div class="type-loved" :key="i" v-for="i in state.test">
|
||||||
|
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
|
||||||
|
<img src="../../assets/img/icon/love.svg" alt="" class="loved">
|
||||||
|
</div>
|
||||||
|
</transition-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<style scoped lang="less">
|
||||||
export default {
|
@import "../../assets/less/color";
|
||||||
name: "ItemDesc"
|
|
||||||
|
.item-desc {
|
||||||
|
|
||||||
|
.content {
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 75%;
|
||||||
|
//display: flex;
|
||||||
|
//flex-direction: column;
|
||||||
|
|
||||||
|
.location-wrapper {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.location {
|
||||||
|
margin-bottom: 10rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 12rem;
|
||||||
|
padding: 4rem;
|
||||||
|
border-radius: 3rem;
|
||||||
|
background: @second-btn-color-tran;
|
||||||
|
|
||||||
|
.gang {
|
||||||
|
height: 8rem;
|
||||||
|
width: 1.5px;
|
||||||
|
margin: 0 5rem;
|
||||||
|
background: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-right: 7rem;
|
||||||
|
width: 18rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.music {
|
||||||
|
position: relative;
|
||||||
|
width: 60%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.music-image {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.comment {
|
||||||
|
|
||||||
|
.type-comment {
|
||||||
|
display: flex;
|
||||||
|
background: rgb(130, 21, 44);
|
||||||
|
border-radius: 50px;
|
||||||
|
padding: 3px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
margin: 0 10px;
|
||||||
|
color: @second-text-color;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.loveds {
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-loved {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
animation: test 1s;
|
||||||
|
animation-delay: .5s;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loved {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 20px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: red;
|
||||||
|
padding: 3px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes test {
|
||||||
|
from {
|
||||||
|
display: block;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
display: none;
|
||||||
|
transform: translate3d(0, -60px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<template>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "ItemOptions"
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
193
src/components/slide/ItemToolbar.vue
Normal file
193
src/components/slide/ItemToolbar.vue
Normal file
@ -0,0 +1,193 @@
|
|||||||
|
<script setup>
|
||||||
|
import BaseMusic from "../BaseMusic";
|
||||||
|
import Utils from "../../utils";
|
||||||
|
import {reactive} from "vue";
|
||||||
|
|
||||||
|
const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
index: {
|
||||||
|
type: Number,
|
||||||
|
default: () => {
|
||||||
|
return -1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
prefix: {
|
||||||
|
type: String,
|
||||||
|
default: () => {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isMy: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isUp: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
|
||||||
|
isPlay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
isAttention: false,
|
||||||
|
name: `v-${prefix}-${index}-video`,
|
||||||
|
})
|
||||||
|
|
||||||
|
function loved(e, index) {
|
||||||
|
// this.lVideo.isLoved = !this.lVideo.isLoved
|
||||||
|
// this.$emit('update:video', this.lVideo)
|
||||||
|
}
|
||||||
|
|
||||||
|
function attention() {
|
||||||
|
// let option = this.$refs['attention-option']
|
||||||
|
// option.classList.add('attention')
|
||||||
|
// setTimeout(() => {
|
||||||
|
// this.isAttention = true
|
||||||
|
// }, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="toolbar mb1r">
|
||||||
|
<div class="avatar-ctn mb4r">
|
||||||
|
<img class="avatar" :src="item.author.avatar" alt=""
|
||||||
|
@click.stop="$emit('goUserInfo')">
|
||||||
|
<transition name="fade">
|
||||||
|
<div v-if="!state.isAttention" @click.stop="attention" class="options" ref="attention-option">
|
||||||
|
<img class="no" src="../../assets/img/icon/add-light.png" alt="">
|
||||||
|
<img class="yes" src="../../assets/img/icon/ok-red.png" alt="">
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="love mb2r" @click.stop="loved($event)">
|
||||||
|
<div>
|
||||||
|
<img src="../../assets/img/icon/love.svg" class="love-image" v-if="!item.isLoved">
|
||||||
|
<img src="../../assets/img/icon/loved.svg" class="love-image" v-if="item.isLoved">
|
||||||
|
</div>
|
||||||
|
<span>{{ Utils.formatNumber(item.digg_count) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="message mb2r" @click.stop="$emit('showComments')">
|
||||||
|
<!-- <div class="message mb15p" @click.stop="showComment">-->
|
||||||
|
<img src="../../assets/img/icon/message.svg" alt="" class="message-image">
|
||||||
|
<span>{{ Utils.formatNumber(item.comment_count) }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
|
||||||
|
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
||||||
|
<span>{{ Utils.formatNumber(item.share_count) }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-else class="share mb4r" @click.stop="$emit('showShare')">
|
||||||
|
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
||||||
|
</div>
|
||||||
|
<BaseMusic
|
||||||
|
:cover="item.music.cover"
|
||||||
|
:key="state.name"
|
||||||
|
:name="state.name"
|
||||||
|
:isPlay="state.isPlay"
|
||||||
|
@click.stop="$emit('goMusic')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.toolbar {
|
||||||
|
//width: 40px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 5px;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
.avatar-ctn {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 55px;
|
||||||
|
height: 55px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: auto;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: -5px;
|
||||||
|
background: red;
|
||||||
|
//background: black;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 1s;
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yes {
|
||||||
|
opacity: 0;
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.attention {
|
||||||
|
background: white;
|
||||||
|
|
||||||
|
.no {
|
||||||
|
opacity: 0;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yes {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.love, .message, .share {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@width: 35rem;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: @width;
|
||||||
|
height: @width;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 12rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loved {
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,20 +1,52 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<!--不知为啥touch事件，在下部20px的空间内不触发，加上click事件不好了 -->
|
||||||
<div id="SlideImgs">
|
<div id="SlideImgs">
|
||||||
<div class="img-slide-wrapper">
|
<div class="img-slide-wrapper">
|
||||||
<div class="img-slide-list"
|
<div class="img-slide-list"
|
||||||
ref="wrapperEl"
|
ref="wrapperEl"
|
||||||
@touchstart="touchStart"
|
@touchstart.passive="touchStart"
|
||||||
@touchmove="touchMove"
|
@touchmove="touchMove"
|
||||||
@touchend="touchEnd">
|
@touchend="touchEnd">
|
||||||
<div class="img-slide-item" v-for="img in props.modelValue.imgs">
|
<div class="img-slide-item" v-for="img in props.modelValue.imgs">
|
||||||
<img :ref="setItemRef" :src="img">
|
<img :ref="e=>setItemRef(e,'itemRefs')"
|
||||||
|
:src="img">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-bar" v-if="true">
|
<template v-if="!state.isPreview">
|
||||||
<div class="bar" v-for="(img,index) in modelValue.imgs">
|
<template v-if="false">
|
||||||
<div class="progress"
|
<ItemToolbar :item="props.modelValue"
|
||||||
:style="getProgressWidth(index)"></div>
|
:index="0"
|
||||||
|
prefix="sadfa"
|
||||||
|
/>
|
||||||
|
<ItemDesc
|
||||||
|
:item="props.modelValue"
|
||||||
|
:index="0"
|
||||||
|
prefix="sadfa"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<div class="progress-bar"
|
||||||
|
@touchstart="progressBarTouchStart"
|
||||||
|
@touchmove="progressBarTouchMove"
|
||||||
|
@touchend="progressBarTouchMEnd"
|
||||||
|
>
|
||||||
|
<div class="bar" v-for="(img,index) in modelValue.imgs">
|
||||||
|
<div class="progress"
|
||||||
|
:style="getProgressWidth(index)"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<div class="preview" v-if="state.isPreview">
|
||||||
|
<div class="preview-wrapper">
|
||||||
|
<img :src="img"
|
||||||
|
:class="{'preview-img':index === state.localIndex}"
|
||||||
|
v-for="(img,index) in props.modelValue.imgs"
|
||||||
|
:ref="e=>setItemRef(e,'previewImgs')"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="indicator">
|
||||||
|
<span class="index">{{ state.localIndex + 1 }}</span> / {{ props.modelValue.imgs.length }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -24,7 +56,7 @@
|
|||||||
import enums from "../../utils/enums";
|
import enums from "../../utils/enums";
|
||||||
import Utils from '../../utils'
|
import Utils from '../../utils'
|
||||||
import {mat4} from 'gl-matrix'
|
import {mat4} from 'gl-matrix'
|
||||||
import {onMounted, reactive, ref} from "vue";
|
import {onMounted, onBeforeUpdate, reactive, ref, watch} from "vue";
|
||||||
import {
|
import {
|
||||||
getSlideDistance,
|
getSlideDistance,
|
||||||
slideInit,
|
slideInit,
|
||||||
@ -34,6 +66,14 @@ import {
|
|||||||
slideTouchStart
|
slideTouchStart
|
||||||
} from "../../pages/slideHooks/common";
|
} from "../../pages/slideHooks/common";
|
||||||
import {SlideType} from "../../utils/const_var";
|
import {SlideType} from "../../utils/const_var";
|
||||||
|
import ItemToolbar from "./ItemToolbar";
|
||||||
|
import ItemDesc from "./ItemDesc";
|
||||||
|
import GM from "../../utils";
|
||||||
|
import {cloneDeep} from "lodash";
|
||||||
|
|
||||||
|
function c() {
|
||||||
|
console.log('console.log()')
|
||||||
|
}
|
||||||
|
|
||||||
let out = new Float32Array([
|
let out = new Float32Array([
|
||||||
0, 0, 0, 0,
|
0, 0, 0, 0,
|
||||||
@ -47,6 +87,7 @@ let ov = new Float32Array([
|
|||||||
0, 0, 1, 0,
|
0, 0, 1, 0,
|
||||||
0, 0, 0, 1,
|
0, 0, 0, 1,
|
||||||
]);
|
]);
|
||||||
|
let origin = cloneDeep(ov)
|
||||||
const rectMap = new Map()
|
const rectMap = new Map()
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: {
|
modelValue: {
|
||||||
@ -59,6 +100,9 @@ const props = defineProps({
|
|||||||
new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
|
new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
|
||||||
new URL('../../assets/img/poster/2.jpg', import.meta.url).href,
|
new URL('../../assets/img/poster/2.jpg', import.meta.url).href,
|
||||||
new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
|
new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
|
||||||
|
new URL('../../assets/img/poster/4.jpg', import.meta.url).href,
|
||||||
|
new URL('../../assets/img/poster/5.jpg', import.meta.url).href,
|
||||||
|
new URL('../../assets/img/poster/6.jpg', import.meta.url).href,
|
||||||
],
|
],
|
||||||
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
|
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
|
||||||
video: 'http://douyin.ttentau.top/0.mp4',
|
video: 'http://douyin.ttentau.top/0.mp4',
|
||||||
@ -154,6 +198,7 @@ const state = reactive({
|
|||||||
name: 'SlideHorizontal',
|
name: 'SlideHorizontal',
|
||||||
localIndex: 0,
|
localIndex: 0,
|
||||||
needCheck: true,
|
needCheck: true,
|
||||||
|
isPreview: false,
|
||||||
isTwo: true,
|
isTwo: true,
|
||||||
next: false,
|
next: false,
|
||||||
wrapper: {width: 0, height: 0, childrenLength: 0},
|
wrapper: {width: 0, height: 0, childrenLength: 0},
|
||||||
@ -170,14 +215,17 @@ const state = reactive({
|
|||||||
},
|
},
|
||||||
move: {x: 0, y: 0},
|
move: {x: 0, y: 0},
|
||||||
itemRefs: [],
|
itemRefs: [],
|
||||||
|
previewImgs: [],
|
||||||
status: 'play',//stop,custom
|
status: 'play',//stop,custom
|
||||||
progress: 0,
|
progress: 0,
|
||||||
cycleFn: null,
|
cycleFn: null,
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
|
slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
|
||||||
|
|
||||||
state.cycleFn = () => {
|
state.cycleFn = () => {
|
||||||
|
return
|
||||||
if (state.status !== 'play') return cancelAnimationFrame(state.cycleFn)
|
if (state.status !== 'play') return cancelAnimationFrame(state.cycleFn)
|
||||||
if (state.progress < props.modelValue.imgs.length * 100) {
|
if (state.progress < props.modelValue.imgs.length * 100) {
|
||||||
state.progress += .4
|
state.progress += .4
|
||||||
@ -195,11 +243,67 @@ onMounted(() => {
|
|||||||
requestAnimationFrame(state.cycleFn)
|
requestAnimationFrame(state.cycleFn)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 确保在每次更新之前重置ref
|
||||||
|
onBeforeUpdate(() => {
|
||||||
|
state.itemRefs = []
|
||||||
|
state.previewImgs = []
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => state.localIndex,
|
||||||
|
(newVal) => {
|
||||||
|
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
|
||||||
|
GM.$setCss(wrapperEl.value, 'transform', `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL)}px, 0, 0)`)
|
||||||
|
state.progress = (state.localIndex + 1) * 100
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function calcCurrentIndex(e) {
|
||||||
|
state.isPreview = true
|
||||||
|
let x = e.touches[0].pageX
|
||||||
|
|
||||||
|
let current = -1
|
||||||
|
let length = state.previewImgs.length
|
||||||
|
for (let i = length - 1; i >= 0; i--) {
|
||||||
|
let rect = state.previewImgs[i].getBoundingClientRect()
|
||||||
|
if (rect.x < x) {
|
||||||
|
current = i
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (current > -1) {
|
||||||
|
state.localIndex = current
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function progressBarTouchStart(e) {
|
||||||
|
console.log('progressBarTouchStart')
|
||||||
|
Utils.$stopPropagation(e)
|
||||||
|
}
|
||||||
|
|
||||||
|
function progressBarTouchMove(e) {
|
||||||
|
console.log('progressBarTouchMove')
|
||||||
|
let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
||||||
|
// let rect = wrapperEl.value.getBoundingClientRect()
|
||||||
|
// if (rect.height - 15 < current1.y && current1.y < rect.height) {
|
||||||
|
// console.log('在')
|
||||||
|
// state.isPreview = true
|
||||||
|
// // Utils.$stopPropagation(e)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// calcCurrentIndex(e)
|
||||||
|
}
|
||||||
|
|
||||||
|
function progressBarTouchMEnd(e) {
|
||||||
|
console.log('progressBarTouchEnd')
|
||||||
|
if (state.isPreview){
|
||||||
|
Utils.$stopPropagation(e)
|
||||||
|
}
|
||||||
|
state.isPreview = false
|
||||||
|
}
|
||||||
|
|
||||||
function touchStart(e) {
|
function touchStart(e) {
|
||||||
console.log('start', e.touches.length)
|
console.log('start', e.touches.length)
|
||||||
// if (s.state !== 'custom') {
|
|
||||||
// this.state = 'stop'
|
|
||||||
// }
|
|
||||||
if (e.touches.length === 1) {
|
if (e.touches.length === 1) {
|
||||||
state.isTwo = false
|
state.isTwo = false
|
||||||
slideTouchStart(e, wrapperEl.value, state)
|
slideTouchStart(e, wrapperEl.value, state)
|
||||||
@ -214,26 +318,30 @@ function touchStart(e) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function touchMove(e) {
|
function touchMove(e) {
|
||||||
// console.log('move', e.touches.length)
|
console.log('move', e.touches.length)
|
||||||
|
let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
||||||
if (state.isTwo && e.touches.length === 1) {
|
if (state.isTwo && e.touches.length === 1) {
|
||||||
state.status = 'pause'
|
state.status = 'pause'
|
||||||
Utils.$stopPropagation(e)
|
Utils.$stopPropagation(e)
|
||||||
|
|
||||||
// console.log('单手移动',)
|
// console.log('单手移动',)
|
||||||
let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
let movementX = current1.x - state.last.point1.x
|
||||||
let movementX = current.x - state.last.point1.x
|
let movementY = current1.y - state.last.point1.y
|
||||||
let movementY = current.y - state.last.point1.y
|
|
||||||
// console.log(movementX, movementY)
|
// console.log(movementX, movementY)
|
||||||
const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
|
const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
|
||||||
ov = mat4.multiply(out, t, ov);
|
ov = mat4.multiply(out, t, ov);
|
||||||
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
|
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
|
||||||
state.last.point1 = current
|
state.last.point1 = current1
|
||||||
} else {
|
} else {
|
||||||
if (e.touches.length === 1) {
|
if (e.touches.length === 1) {
|
||||||
state.isTwo = false
|
state.isTwo = false
|
||||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, () => {
|
if (state.isPreview) {
|
||||||
state.status = 'pause'
|
// Utils.$stopPropagation(e)
|
||||||
}, SlideType.HORIZONTAL)
|
}else {
|
||||||
|
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, () => {
|
||||||
|
state.status = 'pause'
|
||||||
|
}, SlideType.HORIZONTAL)
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
state.isTwo = true
|
state.isTwo = true
|
||||||
Utils.$stopPropagation(e)
|
Utils.$stopPropagation(e)
|
||||||
@ -249,7 +357,6 @@ function touchMove(e) {
|
|||||||
rectMap.set(state.localIndex, rect)
|
rectMap.set(state.localIndex, rect)
|
||||||
}
|
}
|
||||||
|
|
||||||
let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
|
||||||
let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
|
let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
|
||||||
|
|
||||||
// 双指缩放比例，就是对应的放大倍数
|
// 双指缩放比例，就是对应的放大倍数
|
||||||
@ -290,17 +397,18 @@ function touchMove(e) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function touchEnd(e) {
|
function touchEnd(e) {
|
||||||
console.log('end', e.touches.length, state.isTwo)
|
state.isPreview = false
|
||||||
|
// console.log('end', e.touches.length, state.isTwo)
|
||||||
//双指缩放，但只松开了一只手
|
//双指缩放，但只松开了一只手
|
||||||
if (state.isTwo && e.touches.length === 1) {
|
if (state.isTwo && e.touches.length === 1) {
|
||||||
Utils.$stopPropagation(e)
|
Utils.$stopPropagation(e)
|
||||||
state.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
state.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
||||||
} else {
|
} else {
|
||||||
if (state.isTwo) {
|
if (state.isTwo) {
|
||||||
|
ov = origin
|
||||||
Utils.$stopPropagation(e)
|
Utils.$stopPropagation(e)
|
||||||
state.itemRefs[state.localIndex].style['transition-duration'] = '300ms';
|
state.itemRefs[state.localIndex].style['transition-duration'] = '300ms';
|
||||||
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
|
state.itemRefs[state.localIndex].style.transform = `matrix3d(${origin.toString()})`;
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
slideTouchEnd(e, state, canNext,
|
slideTouchEnd(e, state, canNext,
|
||||||
() => {
|
() => {
|
||||||
@ -324,8 +432,8 @@ function getProgressWidth(index) {
|
|||||||
return {width: `${state.progress - index * 100 < 0 ? 0 : state.progress - index * 100}%`}
|
return {width: `${state.progress - index * 100 < 0 ? 0 : state.progress - index * 100}%`}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setItemRef(el) {
|
function setItemRef(el, key) {
|
||||||
el && state.itemRefs.push(el)
|
el && state[key].push(el)
|
||||||
}
|
}
|
||||||
|
|
||||||
function canNext(isNext) {
|
function canNext(isNext) {
|
||||||
@ -335,13 +443,9 @@ function canNext(isNext) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
html {
|
|
||||||
touch-action: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#SlideImgs {
|
#SlideImgs {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: black;
|
background: blue;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -349,6 +453,7 @@ html {
|
|||||||
font-size: 14rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
.img-slide-wrapper {
|
.img-slide-wrapper {
|
||||||
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@ -381,35 +486,66 @@ html {
|
|||||||
display: flex;
|
display: flex;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0 5rem;
|
padding: 0 5rem;
|
||||||
|
@h: 4rem;
|
||||||
|
//height: @h;
|
||||||
|
height: 30rem;
|
||||||
|
background-color: red;
|
||||||
|
align-items: flex-end;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.bar {
|
.bar {
|
||||||
border-radius: 10rem;
|
border-radius: 10rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin: 0 2rem;
|
margin: 0 2rem;
|
||||||
height: 2rem;
|
height: @h;
|
||||||
background: gray;
|
background: gray;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.progress {
|
.progress {
|
||||||
border-radius: 10rem;
|
border-radius: 10rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 2rem;
|
height: @h;
|
||||||
background: white;
|
background: white;
|
||||||
//width: 100%;
|
}
|
||||||
//animation: start 3s linear;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes start {
|
.preview {
|
||||||
0% {
|
transition: opacity .3s;
|
||||||
width: 0;
|
position: fixed;
|
||||||
}
|
bottom: 20rem;
|
||||||
100% {
|
width: 100%;
|
||||||
width: 100%;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.preview-wrapper {
|
||||||
|
img {
|
||||||
|
transition: width .3s;
|
||||||
|
margin: 0 5rem;
|
||||||
|
width: 30rem;
|
||||||
|
height: 50rem;
|
||||||
|
background-color: black;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 3rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&.preview-img {
|
||||||
|
width: 40rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator {
|
||||||
|
margin-top: 10rem;
|
||||||
|
color: gray;
|
||||||
|
|
||||||
|
.index {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,478 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="SlideImgs">
|
|
||||||
<div class="img-slide-wrapper">
|
|
||||||
<div class="img-slide-list"
|
|
||||||
ref="list"
|
|
||||||
@touchstart="touchstart"
|
|
||||||
@touchmove="touchmove"
|
|
||||||
@touchend="touchend">
|
|
||||||
<div class="img-slide-item" v-for="img in modelValue.imgs">
|
|
||||||
<img :ref="setItemRef" :src="img">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="progress-bar" v-if="true">
|
|
||||||
<div class="bar" v-for="(img,index) in modelValue.imgs">
|
|
||||||
<div class="progress"
|
|
||||||
:style="getProgressWidth(index)"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import enums from "../../utils/enums";
|
|
||||||
import Utils from '../../utils'
|
|
||||||
import GM from '../../utils'
|
|
||||||
import {mat4} from 'gl-matrix'
|
|
||||||
import {cloneDeep} from "lodash";
|
|
||||||
|
|
||||||
let out = new Float32Array([
|
|
||||||
0, 0, 0, 0,
|
|
||||||
0, 0, 0, 0,
|
|
||||||
0, 0, 0, 0,
|
|
||||||
0, 0, 0, 0
|
|
||||||
])
|
|
||||||
let ov = new Float32Array([
|
|
||||||
1, 0, 0, 0,
|
|
||||||
0, 1, 0, 0,
|
|
||||||
0, 0, 1, 0,
|
|
||||||
0, 0, 0, 1,
|
|
||||||
]);
|
|
||||||
let original = cloneDeep(ov)
|
|
||||||
const rectMap = new Map()
|
|
||||||
export default {
|
|
||||||
name: "SlideImgs",
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
modelValue: {
|
|
||||||
type: Object,
|
|
||||||
default() {
|
|
||||||
return {
|
|
||||||
type: 'imgs',
|
|
||||||
imgs: [
|
|
||||||
new URL('../../assets/img/poster/0.jpg', import.meta.url).href,
|
|
||||||
new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
|
|
||||||
new URL('../../assets/img/poster/2.jpg', import.meta.url).href,
|
|
||||||
new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
|
|
||||||
],
|
|
||||||
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
|
|
||||||
video: 'http://douyin.ttentau.top/0.mp4',
|
|
||||||
"video_data_size": 26829508,
|
|
||||||
"duration": 427780,
|
|
||||||
"desc": "我不管我们宿舍第一好看",
|
|
||||||
"allow_download": 0,
|
|
||||||
"allow_duet": 0,
|
|
||||||
"allow_react": 0,
|
|
||||||
"allow_music": 1,
|
|
||||||
"allow_douplus": 1,
|
|
||||||
"allow_share": 1,
|
|
||||||
"digg_count": 10480000,
|
|
||||||
"comment_count": 79000,
|
|
||||||
"download_count": 6,
|
|
||||||
"play_count": 0,
|
|
||||||
"share_count": 119000,
|
|
||||||
"forward_count": 0,
|
|
||||||
"collect_count": 3,
|
|
||||||
"sort": 195,
|
|
||||||
"is_top": 0,
|
|
||||||
"city": "北京",
|
|
||||||
address: '中央戏剧学院',
|
|
||||||
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
|
|
||||||
"create_time": "1630423555",
|
|
||||||
"creator_id": "93864497380",
|
|
||||||
"status": 1,
|
|
||||||
"topics": [
|
|
||||||
{
|
|
||||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
|
||||||
"name": "敬礼变装",
|
|
||||||
"creator_id": "93864497380",
|
|
||||||
"create_time": "1630423555",
|
|
||||||
"status": 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
|
||||||
"name": "宿舍",
|
|
||||||
"creator_id": "93864497380",
|
|
||||||
"create_time": "1630423555",
|
|
||||||
"status": 1
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"music": {
|
|
||||||
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
|
|
||||||
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
|
|
||||||
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
|
|
||||||
"title": "@穷电影创作的原声-小高快起来跳舞",
|
|
||||||
"creator_id": "93864497380",
|
|
||||||
"create_time": "1630423555",
|
|
||||||
"status": 1
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"id": "1",
|
|
||||||
"unique_id_modify_time": "1630393144",
|
|
||||||
"unique_id": "10040050",
|
|
||||||
"favoriting_count": 143,
|
|
||||||
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
|
|
||||||
school: {
|
|
||||||
name: '中央戏剧学院',
|
|
||||||
department: null,
|
|
||||||
joinTime: null,
|
|
||||||
education: null,
|
|
||||||
displayType: enums.DISPLAY_TYPE.ALL,
|
|
||||||
},
|
|
||||||
"city": "",
|
|
||||||
"province": '北京',
|
|
||||||
"country": "",
|
|
||||||
"location": "",
|
|
||||||
"birthday": "2002-01-01",
|
|
||||||
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
|
|
||||||
"following_count": 66,
|
|
||||||
"follower_count": 235000,
|
|
||||||
"aweme_count": 1796000,
|
|
||||||
"nickname": "我是小睿耶",
|
|
||||||
certification: '',
|
|
||||||
"phone": "",
|
|
||||||
"sex": "",
|
|
||||||
"last_login_time": "1630423555",
|
|
||||||
"create_time": "1630423555",
|
|
||||||
"status": 1,
|
|
||||||
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
|
|
||||||
"is_private": 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
itemRefs: [],
|
|
||||||
baseActiveIndex: 0,
|
|
||||||
progress: 0,
|
|
||||||
cycleFn: null,
|
|
||||||
state: 'play',//stop,custom
|
|
||||||
|
|
||||||
index: 0,
|
|
||||||
isNext: false,
|
|
||||||
isTwo: false,
|
|
||||||
last: {
|
|
||||||
ratio: 1,
|
|
||||||
point1: {x: 0, y: 0},
|
|
||||||
point2: {x: 0, y: 0},
|
|
||||||
},
|
|
||||||
start: {
|
|
||||||
point1: {x: 0, y: 0},
|
|
||||||
point2: {x: 0, y: 0},
|
|
||||||
center: {x: 0, y: 0},
|
|
||||||
time: 0
|
|
||||||
},
|
|
||||||
move: {x: 0, y: 0},
|
|
||||||
wrapper: {
|
|
||||||
width: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
state(newVal, oldVal) {
|
|
||||||
return
|
|
||||||
console.log('newVal', newVal)
|
|
||||||
if (newVal === 'play') requestAnimationFrame(this.cycleFn)
|
|
||||||
if (newVal === 'stop') cancelAnimationFrame(this.cycleFn)
|
|
||||||
if (newVal === 'custom') cancelAnimationFrame(this.cycleFn)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.cycleFn = () => {
|
|
||||||
if (this.state !== 'play') return cancelAnimationFrame(this.cycleFn)
|
|
||||||
if (this.progress < this.modelValue.imgs.length * 100) {
|
|
||||||
this.progress += .4
|
|
||||||
this.index = parseInt(this.progress / 100)
|
|
||||||
if (this.$refs.list) {
|
|
||||||
Utils.$setCss(this.$refs.list, 'transition-duration', `300ms`)
|
|
||||||
Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance()}px, 0px, 0px)`)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.progress = 0
|
|
||||||
// cancelAnimationFrame(this.cycleFn)
|
|
||||||
}
|
|
||||||
requestAnimationFrame(this.cycleFn)
|
|
||||||
}
|
|
||||||
this.wrapper.width = GM.$getCss(this.$refs.list, 'width')
|
|
||||||
return
|
|
||||||
// requestAnimationFrame(this.cycleFn)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getCenter(a, b) {
|
|
||||||
const x = (a.x + b.x) / 2;
|
|
||||||
const y = (a.y + b.y) / 2;
|
|
||||||
return {x, y}
|
|
||||||
},
|
|
||||||
// 获取坐标之间的举例
|
|
||||||
getDistance(start, stop) {
|
|
||||||
return Math.hypot(stop.x - start.x, stop.y - start.y);
|
|
||||||
},
|
|
||||||
touchstart(e) {
|
|
||||||
console.log('start', e.touches.length)
|
|
||||||
if (this.state !== 'custom') {
|
|
||||||
this.state = 'stop'
|
|
||||||
}
|
|
||||||
if (e.touches.length === 1) {
|
|
||||||
this.isTwo = false
|
|
||||||
Utils.$setCss(this.$refs.list, 'transition-duration', `0ms`)
|
|
||||||
this.start = {
|
|
||||||
point1: {
|
|
||||||
x: e.touches[0].pageX,
|
|
||||||
y: e.touches[0].pageY,
|
|
||||||
},
|
|
||||||
time: Date.now()
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (this.isTwo) return
|
|
||||||
|
|
||||||
this.isTwo = true
|
|
||||||
this.itemRefs[this.index].style['transition-duration'] = '0ms';
|
|
||||||
|
|
||||||
this.last.point1 = this.start.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
|
|
||||||
this.last.point2 = this.start.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
|
|
||||||
this.start.center = this.getCenter(this.start.point1, this.start.point2)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
touchmove(e) {
|
|
||||||
console.log('move', e.touches.length)
|
|
||||||
if (this.isTwo && e.touches.length === 1) {
|
|
||||||
Utils.$stopPropagation(e)
|
|
||||||
|
|
||||||
// console.log('单手移动',)
|
|
||||||
let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
|
||||||
let movementX = current.x - this.last.point1.x
|
|
||||||
let movementY = current.y - this.last.point1.y
|
|
||||||
console.log(movementX, movementY)
|
|
||||||
const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
|
|
||||||
ov = mat4.multiply(out, t, ov);
|
|
||||||
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
|
|
||||||
this.last.point1 = current
|
|
||||||
} else {
|
|
||||||
if (e.touches.length === 1) {
|
|
||||||
this.isTwo = false
|
|
||||||
this.move.x = e.touches[0].pageX - this.start.point1.x
|
|
||||||
this.move.y = e.touches[0].pageY - this.start.point1.y
|
|
||||||
this.isNext = this.move.x < 0
|
|
||||||
if (!this.canNext(this.isNext)) return
|
|
||||||
Utils.$stopPropagation(e)
|
|
||||||
Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance() + this.move.x}px, 0px, 0px)`)
|
|
||||||
} else {
|
|
||||||
Utils.$stopPropagation(e)
|
|
||||||
this.isTwo = true
|
|
||||||
|
|
||||||
let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
|
||||||
let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
|
|
||||||
|
|
||||||
// 双指缩放比例，就是对应的放大倍数
|
|
||||||
let ratio = this.getDistance(current1, current2) / this.getDistance(this.start.point1, this.start.point2);
|
|
||||||
|
|
||||||
let rect = {x: 0, y: 0}
|
|
||||||
if (rectMap.has(this.index)) {
|
|
||||||
rect = rectMap.get(this.index)
|
|
||||||
} else {
|
|
||||||
//getBoundingClientRect在手机上获取不到值
|
|
||||||
let offset = $(this.itemRefs[this.index]).offset()
|
|
||||||
rect.x = offset.left
|
|
||||||
rect.y = offset.top
|
|
||||||
rectMap.set(this.index, rect)
|
|
||||||
}
|
|
||||||
|
|
||||||
let center = this.getCenter(current1, current2)
|
|
||||||
center.x -= rect.x
|
|
||||||
center.y -= rect.y
|
|
||||||
//用最新的放大倍数ratio除以之前的放大ov[0]倍数，算出本次要累加放大的倍数
|
|
||||||
let zoom = ratio / ov[0]
|
|
||||||
const x = center.x * (1 - zoom);
|
|
||||||
const y = center.y * (1 - zoom);
|
|
||||||
const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1,]);
|
|
||||||
//如果zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵）
|
|
||||||
//如果zoom是累加放大（比如每次都是0.15），第三个参数用ov。这里还是采用累加计算
|
|
||||||
ov = mat4.multiply(out, t, ov);
|
|
||||||
|
|
||||||
let dRatio = this.last.ratio - ratio
|
|
||||||
//如果本次比例和上次的不超过0.02。那么判定为平移
|
|
||||||
if (Math.abs(dRatio) <= 0.02) {
|
|
||||||
let movementX = current1.x - this.last.point1.x
|
|
||||||
let movementY = current1.y - this.last.point1.y
|
|
||||||
let movement2X = current2.x - this.last.point2.x
|
|
||||||
let movement2Y = current2.y - this.last.point2.y
|
|
||||||
|
|
||||||
let minX = Math.min(movementX, movement2X)
|
|
||||||
let minY = Math.min(movementY, movement2Y)
|
|
||||||
const t1 = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, minX, minY, 0, 1,]);
|
|
||||||
ov = mat4.multiply(out, t1, ov);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
|
|
||||||
this.last.point1 = current1
|
|
||||||
this.last.point2 = current2
|
|
||||||
this.last.ratio = ratio
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
touchend(e) {
|
|
||||||
console.log('end', e.touches.length, this.isTwo)
|
|
||||||
if (this.isTwo && e.touches.length === 1) {
|
|
||||||
Utils.$stopPropagation(e)
|
|
||||||
|
|
||||||
//双指缩放，但只松开了一只手
|
|
||||||
this.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
|
||||||
} else {
|
|
||||||
if (this.isTwo) {
|
|
||||||
Utils.$stopPropagation(e)
|
|
||||||
|
|
||||||
ov = original
|
|
||||||
this.itemRefs[this.index].style['transition-duration'] = '300ms';
|
|
||||||
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
|
|
||||||
// if (this.state !== 'custom') {
|
|
||||||
// this.state = 'play'
|
|
||||||
// }
|
|
||||||
// if (e.touches.length) {
|
|
||||||
// this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
|
||||||
// }
|
|
||||||
|
|
||||||
} else {
|
|
||||||
if (!this.canNext(this.isNext)) return
|
|
||||||
Utils.$stopPropagation(e)
|
|
||||||
|
|
||||||
let canSlide = this.wrapper.width / 5 < Math.abs(this.move.x);
|
|
||||||
if (Date.now() - this.start.time < 40) canSlide = false
|
|
||||||
|
|
||||||
if (canSlide) {
|
|
||||||
if (this.isNext) {
|
|
||||||
this.index += 1
|
|
||||||
} else {
|
|
||||||
this.index -= 1
|
|
||||||
}
|
|
||||||
this.state = 'custom'
|
|
||||||
this.progress = (this.index + 1) * 100
|
|
||||||
} else {
|
|
||||||
if (this.state !== 'custom') {
|
|
||||||
this.state = 'play'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Utils.$setCss(this.$refs.list, 'transition-duration', `300ms`)
|
|
||||||
Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance()}px, 0px, 0px)`)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
canNext(isNext) {
|
|
||||||
return !((this.index === 0 && !isNext) || (this.index === this.modelValue.imgs.length - 1 && isNext));
|
|
||||||
},
|
|
||||||
getSlideDistance() {
|
|
||||||
return -this.index * this.wrapper.width
|
|
||||||
},
|
|
||||||
setItemRef(el) {
|
|
||||||
if (el) {
|
|
||||||
this.itemRefs.push(el)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeUpdate() {
|
|
||||||
this.itemRefs = []
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
console.log(this.itemRefs)
|
|
||||||
},
|
|
||||||
toggle() {
|
|
||||||
return
|
|
||||||
if (this.state === 'stop') {
|
|
||||||
this.state = 'play'
|
|
||||||
requestAnimationFrame(this.cycleFn)
|
|
||||||
} else {
|
|
||||||
this.state = 'stop'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getProgressWidth(index) {
|
|
||||||
if (this.progress >= (index + 1) * 100) return {width: '100%'}
|
|
||||||
return {width: `${this.progress - index * 100 < 0 ? 0 : this.progress - index * 100}%`}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
html {
|
|
||||||
touch-action: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#SlideImgs {
|
|
||||||
position: relative;
|
|
||||||
background: black;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
color: white;
|
|
||||||
font-size: 14rem;
|
|
||||||
|
|
||||||
.img-slide-wrapper {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.img-slide-list {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.img-slide-item {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
transform-origin: 0 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 5rem;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.bar {
|
|
||||||
border-radius: 10rem;
|
|
||||||
flex: 1;
|
|
||||||
margin: 0 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
background: gray;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
border-radius: 10rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
height: 2rem;
|
|
||||||
background: white;
|
|
||||||
//width: 100%;
|
|
||||||
//animation: start 3s linear;
|
|
||||||
|
|
||||||
@keyframes start {
|
|
||||||
0% {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -11,7 +11,7 @@
|
|||||||
<img class="poster" :src="globalMethods.$imgPreview(i.cover)"/>
|
<img class="poster" :src="globalMethods.$imgPreview(i.cover)"/>
|
||||||
<div class="num">
|
<div class="num">
|
||||||
<img class="love" src="../../assets/img/icon/love.svg" alt="">
|
<img class="love" src="../../assets/img/icon/love.svg" alt="">
|
||||||
<span>{{ globalMethods.$likeNum(i.digg_count) }}</span>
|
<span>{{ globalMethods.formatNumber(i.digg_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -30,16 +30,16 @@
|
|||||||
<img src="../../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
|
<img src="../../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
|
||||||
<img src="../../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved">
|
<img src="../../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved">
|
||||||
</div>
|
</div>
|
||||||
<span>{{ $likeNum(lVideo.digg_count) }}</span>
|
<span>{{ formatNumber(lVideo.digg_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="message mb2r" @click.stop="$emit('showComments')">
|
<div class="message mb2r" @click.stop="$emit('showComments')">
|
||||||
<!-- <div class="message mb15p" @click.stop="showComment">-->
|
<!-- <div class="message mb15p" @click.stop="showComment">-->
|
||||||
<img src="../../assets/img/icon/message.svg" alt="" class="message-image">
|
<img src="../../assets/img/icon/message.svg" alt="" class="message-image">
|
||||||
<span>{{ $likeNum(lVideo.comment_count) }}</span>
|
<span>{{ formatNumber(lVideo.comment_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
|
<div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
|
||||||
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
||||||
<span>{{ $likeNum(lVideo.share_count) }}</span>
|
<span>{{ formatNumber(lVideo.share_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="share mb4r" @click.stop="$emit('showShare')">
|
<div v-else class="share mb4r" @click.stop="$emit('showShare')">
|
||||||
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
||||||
@ -292,8 +292,8 @@ export default {
|
|||||||
this.$refs.video.pause()
|
this.$refs.video.pause()
|
||||||
this.isPlaying = false
|
this.isPlaying = false
|
||||||
},
|
},
|
||||||
$likeNum(v) {
|
formatNumber(v) {
|
||||||
return globalMethods.$likeNum(v)
|
return globalMethods.formatNumber(v)
|
||||||
},
|
},
|
||||||
$duration(v) {
|
$duration(v) {
|
||||||
return globalMethods.$duration(v)
|
return globalMethods.$duration(v)
|
||||||
|
|||||||
@ -32,7 +32,7 @@
|
|||||||
<div class="name">{{ music.name }}</div>
|
<div class="name">{{ music.name }}</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="user">{{ music.author }}</div>
|
<div class="user">{{ music.author }}</div>
|
||||||
<div class="peoples">>{{ $likeNum(music.use_count) }} 人使用</div>
|
<div class="peoples">>{{ formatNumber(music.use_count) }} 人使用</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="collection" @click.stop="toggleCollect()">
|
<div class="collection" @click.stop="toggleCollect()">
|
||||||
<img v-if="isCollect" src="../../assets/img/icon/star-yellow.png">
|
<img v-if="isCollect" src="../../assets/img/icon/star-yellow.png">
|
||||||
|
|||||||
@ -46,7 +46,7 @@
|
|||||||
<div class="author">{{ item.author }}</div>
|
<div class="author">{{ item.author }}</div>
|
||||||
<div class="desc-bottom">
|
<div class="desc-bottom">
|
||||||
<div class="duration">{{ $duration(item.duration) }}</div>
|
<div class="duration">{{ $duration(item.duration) }}</div>
|
||||||
<div class="use_count">{{ $likeNum(item.use_count) }}人使用</div>
|
<div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -94,7 +94,7 @@
|
|||||||
<div class="author">{{ item.author }}</div>
|
<div class="author">{{ item.author }}</div>
|
||||||
<div class="desc-bottom">
|
<div class="desc-bottom">
|
||||||
<div class="duration">{{ $duration(item.duration) }}</div>
|
<div class="duration">{{ $duration(item.duration) }}</div>
|
||||||
<div class="use_count">{{ $likeNum(item.use_count) }}人使用</div>
|
<div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -142,7 +142,7 @@
|
|||||||
<div class="author">{{ item.author }}</div>
|
<div class="author">{{ item.author }}</div>
|
||||||
<div class="desc-bottom">
|
<div class="desc-bottom">
|
||||||
<div class="duration">{{ $duration(item.duration) }}</div>
|
<div class="duration">{{ $duration(item.duration) }}</div>
|
||||||
<div class="use_count">{{ $likeNum(item.use_count) }}人使用</div>
|
<div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -120,7 +120,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="count">
|
<div class="count">
|
||||||
<img src="../../assets/img/icon/home/hot-gray.png" alt="">
|
<img src="../../assets/img/icon/home/hot-gray.png" alt="">
|
||||||
<span>{{ $likeNum(item.use_count) }}</span>
|
<span>{{ formatNumber(item.use_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -153,7 +153,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="count">
|
<div class="count">
|
||||||
<img src="../../assets/img/icon/home/hot-gray.png" alt="">
|
<img src="../../assets/img/icon/home/hot-gray.png" alt="">
|
||||||
<span>{{ $likeNum(item.hot_count) }}</span>
|
<span>{{ formatNumber(item.hot_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<from-bottom-dialog
|
<from-bottom-dialog
|
||||||
page-id="home-index"
|
page-id="home-index"
|
||||||
v-model="modelValue"
|
:modelValue="modelValue"
|
||||||
|
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||||
@cancel="cancel"
|
@cancel="cancel"
|
||||||
maskMode="light"
|
maskMode="light"
|
||||||
mode="light">
|
mode="light">
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<from-bottom-dialog
|
<from-bottom-dialog
|
||||||
page-id="home-index"
|
page-id="home-index"
|
||||||
v-model="modelValue"
|
:modelValue="modelValue"
|
||||||
|
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||||
:show-heng-gang="false"
|
:show-heng-gang="false"
|
||||||
maskMode="dark"
|
maskMode="dark"
|
||||||
@cancel="cancel()"
|
@cancel="cancel()"
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<from-bottom-dialog
|
<from-bottom-dialog
|
||||||
page-id="home-index"
|
page-id="home-index"
|
||||||
v-model="modelValue"
|
:modelValue="modelValue"
|
||||||
|
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||||
:show-heng-gang="false"
|
:show-heng-gang="false"
|
||||||
maskMode="dark"
|
maskMode="dark"
|
||||||
@cancel="cancel()"
|
@cancel="cancel()"
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<from-bottom-dialog
|
<from-bottom-dialog
|
||||||
:page-id="pageId"
|
:page-id="pageId"
|
||||||
v-model="modelValue"
|
:modelValue="modelValue"
|
||||||
|
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||||
@cancel="cancel"
|
@cancel="cancel"
|
||||||
maskMode="light"
|
maskMode="light"
|
||||||
:height="height">
|
:height="height">
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<from-bottom-dialog
|
<from-bottom-dialog
|
||||||
:page-id="pageId"
|
:page-id="pageId"
|
||||||
v-model="modelValue"
|
:modelValue="modelValue"
|
||||||
|
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||||
@cancel="closeShare1"
|
@cancel="closeShare1"
|
||||||
:touch-moved="false"
|
:touch-moved="false"
|
||||||
maskMode="light"
|
maskMode="light"
|
||||||
|
|||||||
@ -35,15 +35,15 @@
|
|||||||
<div class="heat">
|
<div class="heat">
|
||||||
<div class="text" @click="isShowStarCount = true">
|
<div class="text" @click="isShowStarCount = true">
|
||||||
<span>获赞</span>
|
<span>获赞</span>
|
||||||
<span class="num">{{ $likeNum(userinfo.aweme_count) }}</span>
|
<span class="num">{{ formatNumber(userinfo.aweme_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text" @click="$nav('/people/follow-and-fans',{type:0})">
|
<div class="text" @click="$nav('/people/follow-and-fans',{type:0})">
|
||||||
<span>关注</span>
|
<span>关注</span>
|
||||||
<span class="num">{{ $likeNum(userinfo.following_count) }}</span>
|
<span class="num">{{ formatNumber(userinfo.following_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text" @click="$nav('/people/follow-and-fans',{type:1})">
|
<div class="text" @click="$nav('/people/follow-and-fans',{type:1})">
|
||||||
<span>粉丝</span>
|
<span>粉丝</span>
|
||||||
<span class="num">{{ $likeNum(userinfo.follower_count) }}</span>
|
<span class="num">{{ formatNumber(userinfo.follower_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -172,7 +172,7 @@
|
|||||||
<img class="poster" :src="$imgPreview(i.video+videoPoster)" alt="">
|
<img class="poster" :src="$imgPreview(i.video+videoPoster)" alt="">
|
||||||
<div class="num">
|
<div class="num">
|
||||||
<img class="love" src="../../assets/img/icon/love.svg" alt="">
|
<img class="love" src="../../assets/img/icon/love.svg" alt="">
|
||||||
<span>{{ $likeNum(i.likeNum) }}</span>
|
<span>{{ formatNumber(i.likeNum) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -323,7 +323,7 @@
|
|||||||
|
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
v-model:visible="isShowStarCount"
|
v-model:visible="isShowStarCount"
|
||||||
:subtitle='`"${userinfo.nickname}"共获得${this.$likeNum(userinfo.aweme_count)}个赞`'
|
:subtitle='`"${userinfo.nickname}"共获得${this.formatNumber(userinfo.aweme_count)}个赞`'
|
||||||
okText="确认"
|
okText="确认"
|
||||||
cancelText="取消"
|
cancelText="取消"
|
||||||
@ok="isShowStarCount = false"
|
@ok="isShowStarCount = false"
|
||||||
|
|||||||
@ -41,7 +41,7 @@
|
|||||||
<div class="heat">
|
<div class="heat">
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<span>获赞</span>
|
<span>获赞</span>
|
||||||
<span class="num">{{ $likeNum(localAuthor.aweme_count) }}</span>
|
<span class="num">{{ formatNumber(localAuthor.aweme_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<span>关注</span>
|
<span>关注</span>
|
||||||
@ -49,7 +49,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<span>粉丝</span>
|
<span>粉丝</span>
|
||||||
<span class="num">{{ $likeNum(localAuthor.follower_count) }}</span>
|
<span class="num">{{ formatNumber(localAuthor.follower_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<from-bottom-dialog
|
<from-bottom-dialog
|
||||||
page-id="ChatDetail"
|
page-id="ChatDetail"
|
||||||
v-model="modelValue"
|
:modelValue="modelValue"
|
||||||
|
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||||
:show-heng-gang="false"
|
:show-heng-gang="false"
|
||||||
height="20rem"
|
height="20rem"
|
||||||
@cancel='cancel'
|
@cancel='cancel'
|
||||||
|
|||||||
@ -2,7 +2,6 @@
|
|||||||
<!-- <TestSlide></TestSlide>-->
|
<!-- <TestSlide></TestSlide>-->
|
||||||
<!-- <SlideUser></SlideUser>-->
|
<!-- <SlideUser></SlideUser>-->
|
||||||
<!-- <SlideImgs></SlideImgs>-->
|
<!-- <SlideImgs></SlideImgs>-->
|
||||||
<!-- <TestImg/>-->
|
|
||||||
<slideHooks></slideHooks>
|
<slideHooks></slideHooks>
|
||||||
|
|
||||||
<!-- <div class="body">-->
|
<!-- <div class="body">-->
|
||||||
|
|||||||
@ -265,7 +265,7 @@ export default {
|
|||||||
}
|
}
|
||||||
return Config.filePreview + url
|
return Config.filePreview + url
|
||||||
},
|
},
|
||||||
$likeNum(num) {
|
formatNumber(num) {
|
||||||
if (!num) return
|
if (!num) return
|
||||||
if (num < 10000) {
|
if (num < 10000) {
|
||||||
return num
|
return num
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user