save
This commit is contained in:
hhh
parent
3c1fe5eeb1
commit
6b0731fff0
@ -17,7 +17,7 @@
|
||||
"mockjs": "1.1.0",
|
||||
"pinyin": "2.11.1",
|
||||
"vconsole": "^3.15.0",
|
||||
"vue": "3.2.31",
|
||||
"vue": "3.2.45",
|
||||
"vue-router": "4.0.14",
|
||||
"vue-switches": "2.0.1",
|
||||
"vuex": "4.0.2"
|
||||
|
||||
194
pnpm-lock.yaml
194
pnpm-lock.yaml
@ -16,13 +16,13 @@ specifiers:
|
||||
pinyin: 2.11.1
|
||||
vconsole: ^3.15.0
|
||||
vite: 4.0.4
|
||||
vue: 3.2.31
|
||||
vue: ^3.2.45
|
||||
vue-router: 4.0.14
|
||||
vue-switches: 2.0.1
|
||||
vuex: 4.0.2
|
||||
|
||||
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
|
||||
core-js: 3.21.1
|
||||
dayjs: 1.11.0
|
||||
@ -32,14 +32,14 @@ dependencies:
|
||||
mockjs: 1.1.0
|
||||
pinyin: 2.11.1
|
||||
vconsole: 3.15.0
|
||||
vue: 3.2.31
|
||||
vue-router: 4.0.14_vue@3.2.31
|
||||
vue: 3.2.45
|
||||
vue-router: 4.0.14_vue@3.2.45
|
||||
vue-switches: 2.0.1
|
||||
vuex: 4.0.2_vue@3.2.31
|
||||
vuex: 4.0.2_vue@3.2.45
|
||||
|
||||
devDependencies:
|
||||
'@vitejs/plugin-vue': 4.0.0_vite@4.0.4+vue@3.2.31
|
||||
'@vitejs/plugin-vue-jsx': 3.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.45
|
||||
less: 4.1.3
|
||||
mobile-select: 1.1.2
|
||||
vite: 4.0.4_less@4.1.3
|
||||
@ -75,10 +75,10 @@ packages:
|
||||
'@babel/generator': 7.20.7
|
||||
'@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.12
|
||||
'@babel/helper-module-transforms': 7.20.11
|
||||
'@babel/helpers': 7.20.7
|
||||
'@babel/parser': 7.20.7
|
||||
'@babel/helpers': 7.20.13
|
||||
'@babel/parser': 7.20.13
|
||||
'@babel/template': 7.20.7
|
||||
'@babel/traverse': 7.20.12
|
||||
'@babel/traverse': 7.20.13
|
||||
'@babel/types': 7.20.7
|
||||
convert-source-map: 1.9.0
|
||||
debug: 4.3.4
|
||||
@ -182,7 +182,7 @@ packages:
|
||||
'@babel/helper-split-export-declaration': 7.18.6
|
||||
'@babel/helper-validator-identifier': 7.19.1
|
||||
'@babel/template': 7.20.7
|
||||
'@babel/traverse': 7.20.12
|
||||
'@babel/traverse': 7.20.13
|
||||
'@babel/types': 7.20.7
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@ -208,7 +208,7 @@ packages:
|
||||
'@babel/helper-member-expression-to-functions': 7.20.7
|
||||
'@babel/helper-optimise-call-expression': 7.18.6
|
||||
'@babel/template': 7.20.7
|
||||
'@babel/traverse': 7.20.12
|
||||
'@babel/traverse': 7.20.13
|
||||
'@babel/types': 7.20.7
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@ -248,12 +248,12 @@ packages:
|
||||
engines: {node: '>=6.9.0'}
|
||||
dev: true
|
||||
|
||||
/@babel/helpers/7.20.7:
|
||||
resolution: {integrity: sha512-PBPjs5BppzsGaxHQCDKnZ6Gd9s6xl8bBCluz3vEInLGRJmnZan4F6BYCeqtyXqkk4W5IlPmjK4JlOuZkpJ3xZA==}
|
||||
/@babel/helpers/7.20.13:
|
||||
resolution: {integrity: sha512-nzJ0DWCL3gB5RCXbUO3KIMMsBY2Eqbx8mBpKGE/02PgyRQFcPQLbkQ1vyy596mZLaP+dAfD+R4ckASzNVmW3jg==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/template': 7.20.7
|
||||
'@babel/traverse': 7.20.12
|
||||
'@babel/traverse': 7.20.13
|
||||
'@babel/types': 7.20.7
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@ -268,8 +268,8 @@ packages:
|
||||
js-tokens: 4.0.0
|
||||
dev: true
|
||||
|
||||
/@babel/parser/7.20.7:
|
||||
resolution: {integrity: sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==}
|
||||
/@babel/parser/7.20.13:
|
||||
resolution: {integrity: sha512-gFDLKMfpiXCsjt4za2JA9oTMn70CeseCehb11kRZgvd7+F67Hih3OHOK24cRrWECJ/ljfPGac6ygXAs/C8kIvw==}
|
||||
engines: {node: '>=6.0.0'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
@ -295,8 +295,8 @@ packages:
|
||||
'@babel/helper-plugin-utils': 7.20.2
|
||||
dev: true
|
||||
|
||||
/@babel/plugin-transform-typescript/7.20.7_@babel+core@7.20.12:
|
||||
resolution: {integrity: sha512-m3wVKEvf6SoszD8pu4NZz3PvfKRCMgk6D6d0Qi9hNnlM5M6CFS92EgF4EiHVLKbU0r/r7ty1hg7NPZwE7WRbYw==}
|
||||
/@babel/plugin-transform-typescript/7.20.13_@babel+core@7.20.12:
|
||||
resolution: {integrity: sha512-O7I/THxarGcDZxkgWKMUrk7NK1/WbHAg3Xx86gqS6x9MTrNL6AwIluuZ96ms4xeDe6AVx6rjHbWHP7x26EPQBA==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
peerDependencies:
|
||||
'@babel/core': ^7.0.0-0
|
||||
@ -309,8 +309,8 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@babel/runtime/7.20.7:
|
||||
resolution: {integrity: sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==}
|
||||
/@babel/runtime/7.20.13:
|
||||
resolution: {integrity: sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
regenerator-runtime: 0.13.11
|
||||
@ -321,12 +321,12 @@ packages:
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/code-frame': 7.18.6
|
||||
'@babel/parser': 7.20.7
|
||||
'@babel/parser': 7.20.13
|
||||
'@babel/types': 7.20.7
|
||||
dev: true
|
||||
|
||||
/@babel/traverse/7.20.12:
|
||||
resolution: {integrity: sha512-MsIbFN0u+raeja38qboyF8TIT7K0BFzz/Yd/77ta4MsUsmP2RAnidIlwq7d5HFQrH/OZJecGV6B71C4zAgpoSQ==}
|
||||
/@babel/traverse/7.20.13:
|
||||
resolution: {integrity: sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/code-frame': 7.18.6
|
||||
@ -335,7 +335,7 @@ packages:
|
||||
'@babel/helper-function-name': 7.19.0
|
||||
'@babel/helper-hoist-variables': 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
|
||||
debug: 4.3.4
|
||||
globals: 11.12.0
|
||||
@ -549,13 +549,13 @@ packages:
|
||||
dev: 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==}
|
||||
engines: {node: '>=12.x'}
|
||||
peerDependencies:
|
||||
vue: ^3.0.11
|
||||
dependencies:
|
||||
vue: 3.2.31
|
||||
vue: 3.2.45
|
||||
dev: false
|
||||
|
||||
/@jridgewell/gen-mapping/0.1.1:
|
||||
@ -615,7 +615,7 @@ packages:
|
||||
dev: false
|
||||
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==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
@ -623,15 +623,15 @@ packages:
|
||||
vue: ^3.0.0
|
||||
dependencies:
|
||||
'@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
|
||||
vite: 4.0.4_less@4.1.3
|
||||
vue: 3.2.31
|
||||
vue: 3.2.45
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
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==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
@ -639,7 +639,7 @@ packages:
|
||||
vue: ^3.2.25
|
||||
dependencies:
|
||||
vite: 4.0.4_less@4.1.3
|
||||
vue: 3.2.31
|
||||
vue: 3.2.45
|
||||
dev: true
|
||||
|
||||
/@vue/babel-helper-vue-transform-on/1.0.2:
|
||||
@ -652,7 +652,7 @@ packages:
|
||||
'@babel/helper-module-imports': 7.18.6
|
||||
'@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.20.12
|
||||
'@babel/template': 7.20.7
|
||||
'@babel/traverse': 7.20.12
|
||||
'@babel/traverse': 7.20.13
|
||||
'@babel/types': 7.20.7
|
||||
'@vue/babel-helper-vue-transform-on': 1.0.2
|
||||
camelcase: 6.3.0
|
||||
@ -663,90 +663,90 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-core/3.2.31:
|
||||
resolution: {integrity: sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==}
|
||||
/@vue/compiler-core/3.2.45:
|
||||
resolution: {integrity: sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.20.7
|
||||
'@vue/shared': 3.2.31
|
||||
'@babel/parser': 7.20.13
|
||||
'@vue/shared': 3.2.45
|
||||
estree-walker: 2.0.2
|
||||
source-map: 0.6.1
|
||||
|
||||
/@vue/compiler-dom/3.2.31:
|
||||
resolution: {integrity: sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==}
|
||||
/@vue/compiler-dom/3.2.45:
|
||||
resolution: {integrity: sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==}
|
||||
dependencies:
|
||||
'@vue/compiler-core': 3.2.31
|
||||
'@vue/shared': 3.2.31
|
||||
'@vue/compiler-core': 3.2.45
|
||||
'@vue/shared': 3.2.45
|
||||
|
||||
/@vue/compiler-sfc/2.7.14:
|
||||
resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.20.7
|
||||
'@babel/parser': 7.20.13
|
||||
postcss: 8.4.21
|
||||
source-map: 0.6.1
|
||||
dev: false
|
||||
|
||||
/@vue/compiler-sfc/3.2.31:
|
||||
resolution: {integrity: sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==}
|
||||
/@vue/compiler-sfc/3.2.45:
|
||||
resolution: {integrity: sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.20.7
|
||||
'@vue/compiler-core': 3.2.31
|
||||
'@vue/compiler-dom': 3.2.31
|
||||
'@vue/compiler-ssr': 3.2.31
|
||||
'@vue/reactivity-transform': 3.2.31
|
||||
'@vue/shared': 3.2.31
|
||||
'@babel/parser': 7.20.13
|
||||
'@vue/compiler-core': 3.2.45
|
||||
'@vue/compiler-dom': 3.2.45
|
||||
'@vue/compiler-ssr': 3.2.45
|
||||
'@vue/reactivity-transform': 3.2.45
|
||||
'@vue/shared': 3.2.45
|
||||
estree-walker: 2.0.2
|
||||
magic-string: 0.25.9
|
||||
postcss: 8.4.21
|
||||
source-map: 0.6.1
|
||||
|
||||
/@vue/compiler-ssr/3.2.31:
|
||||
resolution: {integrity: sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==}
|
||||
/@vue/compiler-ssr/3.2.45:
|
||||
resolution: {integrity: sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==}
|
||||
dependencies:
|
||||
'@vue/compiler-dom': 3.2.31
|
||||
'@vue/shared': 3.2.31
|
||||
'@vue/compiler-dom': 3.2.45
|
||||
'@vue/shared': 3.2.45
|
||||
|
||||
/@vue/devtools-api/6.4.5:
|
||||
resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==}
|
||||
/@vue/devtools-api/6.5.0:
|
||||
resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
|
||||
dev: false
|
||||
|
||||
/@vue/reactivity-transform/3.2.31:
|
||||
resolution: {integrity: sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==}
|
||||
/@vue/reactivity-transform/3.2.45:
|
||||
resolution: {integrity: sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.20.7
|
||||
'@vue/compiler-core': 3.2.31
|
||||
'@vue/shared': 3.2.31
|
||||
'@babel/parser': 7.20.13
|
||||
'@vue/compiler-core': 3.2.45
|
||||
'@vue/shared': 3.2.45
|
||||
estree-walker: 2.0.2
|
||||
magic-string: 0.25.9
|
||||
|
||||
/@vue/reactivity/3.2.31:
|
||||
resolution: {integrity: sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==}
|
||||
/@vue/reactivity/3.2.45:
|
||||
resolution: {integrity: sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==}
|
||||
dependencies:
|
||||
'@vue/shared': 3.2.31
|
||||
'@vue/shared': 3.2.45
|
||||
|
||||
/@vue/runtime-core/3.2.31:
|
||||
resolution: {integrity: sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==}
|
||||
/@vue/runtime-core/3.2.45:
|
||||
resolution: {integrity: sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==}
|
||||
dependencies:
|
||||
'@vue/reactivity': 3.2.31
|
||||
'@vue/shared': 3.2.31
|
||||
'@vue/reactivity': 3.2.45
|
||||
'@vue/shared': 3.2.45
|
||||
|
||||
/@vue/runtime-dom/3.2.31:
|
||||
resolution: {integrity: sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==}
|
||||
/@vue/runtime-dom/3.2.45:
|
||||
resolution: {integrity: sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==}
|
||||
dependencies:
|
||||
'@vue/runtime-core': 3.2.31
|
||||
'@vue/shared': 3.2.31
|
||||
'@vue/runtime-core': 3.2.45
|
||||
'@vue/shared': 3.2.45
|
||||
csstype: 2.6.21
|
||||
|
||||
/@vue/server-renderer/3.2.31_vue@3.2.31:
|
||||
resolution: {integrity: sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg==}
|
||||
/@vue/server-renderer/3.2.45_vue@3.2.45:
|
||||
resolution: {integrity: sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==}
|
||||
peerDependencies:
|
||||
vue: 3.2.31
|
||||
vue: 3.2.45
|
||||
dependencies:
|
||||
'@vue/compiler-ssr': 3.2.31
|
||||
'@vue/shared': 3.2.31
|
||||
vue: 3.2.31
|
||||
'@vue/compiler-ssr': 3.2.45
|
||||
'@vue/shared': 3.2.45
|
||||
vue: 3.2.45
|
||||
|
||||
/@vue/shared/3.2.31:
|
||||
resolution: {integrity: sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==}
|
||||
/@vue/shared/3.2.45:
|
||||
resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
|
||||
|
||||
/abbrev/1.1.1:
|
||||
resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
|
||||
@ -1493,8 +1493,8 @@ packages:
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/rollup/3.10.0:
|
||||
resolution: {integrity: sha512-JmRYz44NjC1MjVF2VKxc0M1a97vn+cDxeqWmnwyAF4FvpjK8YFdHpaqvQB+3IxCvX05vJxKZkoMDU8TShhmJVA==}
|
||||
/rollup/3.10.1:
|
||||
resolution: {integrity: sha512-3Er+yel3bZbZX1g2kjVM+FW+RUWDxbG87fcqFM5/9HbPCTpbVp6JOLn7jlxnNlbu7s/N/uDA4EV/91E2gWnxzw==}
|
||||
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
|
||||
hasBin: true
|
||||
optionalDependencies:
|
||||
@ -1643,7 +1643,7 @@ packages:
|
||||
/vconsole/3.15.0:
|
||||
resolution: {integrity: sha512-8hq7wabPcRucSWQyN7/1tthMawP9JPvM95zgtMHpPknMMMCKj+abpoK7P7oKK4B0qw58C24Mdvo9+raUdpHyVQ==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.20.7
|
||||
'@babel/runtime': 7.20.13
|
||||
copy-text-to-clipboard: 3.0.1
|
||||
core-js: 3.21.1
|
||||
mutation-observer: 1.0.3
|
||||
@ -1678,18 +1678,18 @@ packages:
|
||||
less: 4.1.3
|
||||
postcss: 8.4.21
|
||||
resolve: 1.22.1
|
||||
rollup: 3.10.0
|
||||
rollup: 3.10.1
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.2
|
||||
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==}
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
dependencies:
|
||||
'@vue/devtools-api': 6.4.5
|
||||
vue: 3.2.31
|
||||
'@vue/devtools-api': 6.5.0
|
||||
vue: 3.2.45
|
||||
dev: false
|
||||
|
||||
/vue-switches/2.0.1:
|
||||
@ -1705,22 +1705,22 @@ packages:
|
||||
csstype: 3.1.1
|
||||
dev: false
|
||||
|
||||
/vue/3.2.31:
|
||||
resolution: {integrity: sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==}
|
||||
/vue/3.2.45:
|
||||
resolution: {integrity: sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==}
|
||||
dependencies:
|
||||
'@vue/compiler-dom': 3.2.31
|
||||
'@vue/compiler-sfc': 3.2.31
|
||||
'@vue/runtime-dom': 3.2.31
|
||||
'@vue/server-renderer': 3.2.31_vue@3.2.31
|
||||
'@vue/shared': 3.2.31
|
||||
'@vue/compiler-dom': 3.2.45
|
||||
'@vue/compiler-sfc': 3.2.45
|
||||
'@vue/runtime-dom': 3.2.45
|
||||
'@vue/server-renderer': 3.2.45_vue@3.2.45
|
||||
'@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==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.2
|
||||
dependencies:
|
||||
'@vue/devtools-api': 6.4.5
|
||||
vue: 3.2.31
|
||||
'@vue/devtools-api': 6.5.0
|
||||
vue: 3.2.45
|
||||
dev: false
|
||||
|
||||
/webidl-conversions/3.0.1:
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<from-bottom-dialog
|
||||
page-id="home-index"
|
||||
v-model="modelValue"
|
||||
:modelValue="modelValue"
|
||||
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||
@cancel="cancel"
|
||||
:show-heng-gang="false"
|
||||
maskMode="light"
|
||||
@ -35,7 +36,7 @@
|
||||
<img v-show="item.isLoved" src="../assets/img/icon/components/like-red-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 class="replies">
|
||||
@ -60,7 +61,7 @@
|
||||
<img v-if="child.isLoved" src="../assets/img/icon/components/like-red-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 class="more">
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<img class="poster" v-lazy="$imgPreview(i.cover)" alt="">
|
||||
<div class="num" v-if="mode === 'normal'">
|
||||
<img class="love" src="../assets/img/icon/love.svg" alt="">
|
||||
<span>{{ $likeNum(i.digg_count) }}</span>
|
||||
<span>{{ formatNumber(i.digg_count) }}</span>
|
||||
</div>
|
||||
<div class="date" v-if="mode === 'date'">
|
||||
<div class="day">{{ getDay(i.create_time) }}</div>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<from-bottom-dialog
|
||||
:page-id="pageId"
|
||||
v-model="modelValue"
|
||||
:modelValue="modelValue"
|
||||
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||
@cancel="closeShare"
|
||||
:show-heng-gang="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/loved.svg" class="love-image" v-if="lVideo.isLoved">
|
||||
</div>
|
||||
<span>{{ $likeNum(lVideo.digg_count) }}</span>
|
||||
<span>{{ formatNumber(lVideo.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>{{ $likeNum(lVideo.comment_count) }}</span>
|
||||
<span>{{ formatNumber(lVideo.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>{{ $likeNum(lVideo.share_count) }}</span>
|
||||
<span>{{ formatNumber(lVideo.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">
|
||||
@ -331,8 +331,8 @@ export default {
|
||||
this.$refs.video.pause()
|
||||
this.isPlaying = false
|
||||
},
|
||||
$likeNum(v) {
|
||||
return globalMethods.$likeNum(v)
|
||||
formatNumber(v) {
|
||||
return globalMethods.formatNumber(v)
|
||||
},
|
||||
$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/loved.svg" class="love-image" v-if="lVideo.isLoved">
|
||||
</div>
|
||||
<span>{{ $likeNum(lVideo.digg_count) }}</span>
|
||||
<span>{{ formatNumber(lVideo.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>{{ $likeNum(lVideo.comment_count) }}</span>
|
||||
<span>{{ formatNumber(lVideo.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>{{ $likeNum(lVideo.share_count) }}</span>
|
||||
<span>{{ formatNumber(lVideo.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">
|
||||
@ -310,8 +310,8 @@ export default {
|
||||
this.paused = true
|
||||
this.isPlaying = false
|
||||
},
|
||||
$likeNum(v) {
|
||||
return globalMethods.$likeNum(v)
|
||||
formatNumber(v) {
|
||||
return globalMethods.formatNumber(v)
|
||||
},
|
||||
$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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ItemDesc"
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/less/color";
|
||||
|
||||
.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>
|
||||
@ -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>
|
||||
<!--不知为啥touch事件，在下部20px的空间内不触发，加上click事件不好了 -->
|
||||
<div id="SlideImgs">
|
||||
<div class="img-slide-wrapper">
|
||||
<div class="img-slide-list"
|
||||
ref="wrapperEl"
|
||||
@touchstart="touchStart"
|
||||
@touchstart.passive="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd">
|
||||
<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 class="progress-bar" v-if="true">
|
||||
<div class="bar" v-for="(img,index) in modelValue.imgs">
|
||||
<div class="progress"
|
||||
:style="getProgressWidth(index)"></div>
|
||||
<template v-if="!state.isPreview">
|
||||
<template v-if="false">
|
||||
<ItemToolbar :item="props.modelValue"
|
||||
: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>
|
||||
@ -24,7 +56,7 @@
|
||||
import enums from "../../utils/enums";
|
||||
import Utils from '../../utils'
|
||||
import {mat4} from 'gl-matrix'
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import {onMounted, onBeforeUpdate, reactive, ref, watch} from "vue";
|
||||
import {
|
||||
getSlideDistance,
|
||||
slideInit,
|
||||
@ -34,6 +66,14 @@ import {
|
||||
slideTouchStart
|
||||
} from "../../pages/slideHooks/common";
|
||||
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([
|
||||
0, 0, 0, 0,
|
||||
@ -47,6 +87,7 @@ let ov = new Float32Array([
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1,
|
||||
]);
|
||||
let origin = cloneDeep(ov)
|
||||
const rectMap = new Map()
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
@ -59,6 +100,9 @@ const props = defineProps({
|
||||
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,
|
||||
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",
|
||||
video: 'http://douyin.ttentau.top/0.mp4',
|
||||
@ -154,6 +198,7 @@ const state = reactive({
|
||||
name: 'SlideHorizontal',
|
||||
localIndex: 0,
|
||||
needCheck: true,
|
||||
isPreview: false,
|
||||
isTwo: true,
|
||||
next: false,
|
||||
wrapper: {width: 0, height: 0, childrenLength: 0},
|
||||
@ -170,14 +215,17 @@ const state = reactive({
|
||||
},
|
||||
move: {x: 0, y: 0},
|
||||
itemRefs: [],
|
||||
previewImgs: [],
|
||||
status: 'play',//stop,custom
|
||||
progress: 0,
|
||||
cycleFn: null,
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
|
||||
|
||||
state.cycleFn = () => {
|
||||
return
|
||||
if (state.status !== 'play') return cancelAnimationFrame(state.cycleFn)
|
||||
if (state.progress < props.modelValue.imgs.length * 100) {
|
||||
state.progress += .4
|
||||
@ -195,11 +243,67 @@ onMounted(() => {
|
||||
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) {
|
||||
console.log('start', e.touches.length)
|
||||
// if (s.state !== 'custom') {
|
||||
// this.state = 'stop'
|
||||
// }
|
||||
if (e.touches.length === 1) {
|
||||
state.isTwo = false
|
||||
slideTouchStart(e, wrapperEl.value, state)
|
||||
@ -214,26 +318,30 @@ function touchStart(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) {
|
||||
state.status = 'pause'
|
||||
Utils.$stopPropagation(e)
|
||||
|
||||
// console.log('单手移动',)
|
||||
let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
||||
let movementX = current.x - state.last.point1.x
|
||||
let movementY = current.y - state.last.point1.y
|
||||
let movementX = current1.x - state.last.point1.x
|
||||
let movementY = current1.y - state.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);
|
||||
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
|
||||
state.last.point1 = current
|
||||
state.last.point1 = current1
|
||||
} else {
|
||||
if (e.touches.length === 1) {
|
||||
state.isTwo = false
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, () => {
|
||||
state.status = 'pause'
|
||||
}, SlideType.HORIZONTAL)
|
||||
if (state.isPreview) {
|
||||
// Utils.$stopPropagation(e)
|
||||
}else {
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, () => {
|
||||
state.status = 'pause'
|
||||
}, SlideType.HORIZONTAL)
|
||||
}
|
||||
} else {
|
||||
state.isTwo = true
|
||||
Utils.$stopPropagation(e)
|
||||
@ -249,7 +357,6 @@ function touchMove(e) {
|
||||
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}
|
||||
|
||||
// 双指缩放比例，就是对应的放大倍数
|
||||
@ -290,17 +397,18 @@ function touchMove(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) {
|
||||
Utils.$stopPropagation(e)
|
||||
state.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
||||
} else {
|
||||
if (state.isTwo) {
|
||||
ov = origin
|
||||
Utils.$stopPropagation(e)
|
||||
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 {
|
||||
slideTouchEnd(e, state, canNext,
|
||||
() => {
|
||||
@ -324,8 +432,8 @@ function getProgressWidth(index) {
|
||||
return {width: `${state.progress - index * 100 < 0 ? 0 : state.progress - index * 100}%`}
|
||||
}
|
||||
|
||||
function setItemRef(el) {
|
||||
el && state.itemRefs.push(el)
|
||||
function setItemRef(el, key) {
|
||||
el && state[key].push(el)
|
||||
}
|
||||
|
||||
function canNext(isNext) {
|
||||
@ -335,13 +443,9 @@ function canNext(isNext) {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
html {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
#SlideImgs {
|
||||
position: relative;
|
||||
background: black;
|
||||
background: blue;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@ -349,6 +453,7 @@ html {
|
||||
font-size: 14rem;
|
||||
|
||||
.img-slide-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@ -381,35 +486,66 @@ html {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 0 5rem;
|
||||
@h: 4rem;
|
||||
//height: @h;
|
||||
height: 30rem;
|
||||
background-color: red;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
|
||||
.bar {
|
||||
border-radius: 10rem;
|
||||
flex: 1;
|
||||
margin: 0 2rem;
|
||||
height: 2rem;
|
||||
height: @h;
|
||||
background: gray;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.progress {
|
||||
border-radius: 10rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 2rem;
|
||||
height: @h;
|
||||
background: white;
|
||||
//width: 100%;
|
||||
//animation: start 3s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes start {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
.preview {
|
||||
transition: opacity .3s;
|
||||
position: fixed;
|
||||
bottom: 20rem;
|
||||
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)"/>
|
||||
<div class="num">
|
||||
<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>
|
||||
|
||||
@ -30,16 +30,16 @@
|
||||
<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">
|
||||
</div>
|
||||
<span>{{ $likeNum(lVideo.digg_count) }}</span>
|
||||
<span>{{ formatNumber(lVideo.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>{{ $likeNum(lVideo.comment_count) }}</span>
|
||||
<span>{{ formatNumber(lVideo.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>{{ $likeNum(lVideo.share_count) }}</span>
|
||||
<span>{{ formatNumber(lVideo.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">
|
||||
@ -292,8 +292,8 @@ export default {
|
||||
this.$refs.video.pause()
|
||||
this.isPlaying = false
|
||||
},
|
||||
$likeNum(v) {
|
||||
return globalMethods.$likeNum(v)
|
||||
formatNumber(v) {
|
||||
return globalMethods.formatNumber(v)
|
||||
},
|
||||
$duration(v) {
|
||||
return globalMethods.$duration(v)
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<div class="name">{{ music.name }}</div>
|
||||
<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 class="collection" @click.stop="toggleCollect()">
|
||||
<img v-if="isCollect" src="../../assets/img/icon/star-yellow.png">
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
<div class="author">{{ item.author }}</div>
|
||||
<div class="desc-bottom">
|
||||
<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>
|
||||
@ -94,7 +94,7 @@
|
||||
<div class="author">{{ item.author }}</div>
|
||||
<div class="desc-bottom">
|
||||
<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>
|
||||
@ -142,7 +142,7 @@
|
||||
<div class="author">{{ item.author }}</div>
|
||||
<div class="desc-bottom">
|
||||
<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>
|
||||
|
||||
@ -120,7 +120,7 @@
|
||||
</div>
|
||||
<div class="count">
|
||||
<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>
|
||||
@ -153,7 +153,7 @@
|
||||
</div>
|
||||
<div class="count">
|
||||
<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>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<from-bottom-dialog
|
||||
page-id="home-index"
|
||||
v-model="modelValue"
|
||||
:modelValue="modelValue"
|
||||
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||
@cancel="cancel"
|
||||
maskMode="light"
|
||||
mode="light">
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<from-bottom-dialog
|
||||
page-id="home-index"
|
||||
v-model="modelValue"
|
||||
:modelValue="modelValue"
|
||||
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||
:show-heng-gang="false"
|
||||
maskMode="dark"
|
||||
@cancel="cancel()"
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<from-bottom-dialog
|
||||
page-id="home-index"
|
||||
v-model="modelValue"
|
||||
:modelValue="modelValue"
|
||||
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||
:show-heng-gang="false"
|
||||
maskMode="dark"
|
||||
@cancel="cancel()"
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<from-bottom-dialog
|
||||
:page-id="pageId"
|
||||
v-model="modelValue"
|
||||
:modelValue="modelValue"
|
||||
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||
@cancel="cancel"
|
||||
maskMode="light"
|
||||
:height="height">
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<from-bottom-dialog
|
||||
:page-id="pageId"
|
||||
v-model="modelValue"
|
||||
:modelValue="modelValue"
|
||||
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||
@cancel="closeShare1"
|
||||
:touch-moved="false"
|
||||
maskMode="light"
|
||||
|
||||
@ -35,15 +35,15 @@
|
||||
<div class="heat">
|
||||
<div class="text" @click="isShowStarCount = true">
|
||||
<span>获赞</span>
|
||||
<span class="num">{{ $likeNum(userinfo.aweme_count) }}</span>
|
||||
<span class="num">{{ formatNumber(userinfo.aweme_count) }}</span>
|
||||
</div>
|
||||
<div class="text" @click="$nav('/people/follow-and-fans',{type:0})">
|
||||
<span>关注</span>
|
||||
<span class="num">{{ $likeNum(userinfo.following_count) }}</span>
|
||||
<span class="num">{{ formatNumber(userinfo.following_count) }}</span>
|
||||
</div>
|
||||
<div class="text" @click="$nav('/people/follow-and-fans',{type:1})">
|
||||
<span>粉丝</span>
|
||||
<span class="num">{{ $likeNum(userinfo.follower_count) }}</span>
|
||||
<span class="num">{{ formatNumber(userinfo.follower_count) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -172,7 +172,7 @@
|
||||
<img class="poster" :src="$imgPreview(i.video+videoPoster)" alt="">
|
||||
<div class="num">
|
||||
<img class="love" src="../../assets/img/icon/love.svg" alt="">
|
||||
<span>{{ $likeNum(i.likeNum) }}</span>
|
||||
<span>{{ formatNumber(i.likeNum) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -323,7 +323,7 @@
|
||||
|
||||
<ConfirmDialog
|
||||
v-model:visible="isShowStarCount"
|
||||
:subtitle='`"${userinfo.nickname}"共获得${this.$likeNum(userinfo.aweme_count)}个赞`'
|
||||
:subtitle='`"${userinfo.nickname}"共获得${this.formatNumber(userinfo.aweme_count)}个赞`'
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
@ok="isShowStarCount = false"
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
<div class="heat">
|
||||
<div class="text">
|
||||
<span>获赞</span>
|
||||
<span class="num">{{ $likeNum(localAuthor.aweme_count) }}</span>
|
||||
<span class="num">{{ formatNumber(localAuthor.aweme_count) }}</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
<span>关注</span>
|
||||
@ -49,7 +49,7 @@
|
||||
</div>
|
||||
<div class="text">
|
||||
<span>粉丝</span>
|
||||
<span class="num">{{ $likeNum(localAuthor.follower_count) }}</span>
|
||||
<span class="num">{{ formatNumber(localAuthor.follower_count) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<from-bottom-dialog
|
||||
page-id="ChatDetail"
|
||||
v-model="modelValue"
|
||||
:modelValue="modelValue"
|
||||
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||
:show-heng-gang="false"
|
||||
height="20rem"
|
||||
@cancel='cancel'
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
<!-- <TestSlide></TestSlide>-->
|
||||
<!-- <SlideUser></SlideUser>-->
|
||||
<!-- <SlideImgs></SlideImgs>-->
|
||||
<!-- <TestImg/>-->
|
||||
<slideHooks></slideHooks>
|
||||
|
||||
<!-- <div class="body">-->
|
||||
|
||||
@ -265,7 +265,7 @@ export default {
|
||||
}
|
||||
return Config.filePreview + url
|
||||
},
|
||||
$likeNum(num) {
|
||||
formatNumber(num) {
|
||||
if (!num) return
|
||||
if (num < 10000) {
|
||||
return num
|
||||
|
||||
Loading…
Reference in New Issue
Block a user