MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pretty再次格式化所有文件

Browse Source
This commit is contained in:
zyronon 2024-04-02 15:40:18 +08:00
parent 474859c309
commit 6f165f997a
157 changed files with 26249 additions and 30541 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.editorconfig
View File

@ -1,12 +0,0 @@
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = tab
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120

14
.eslintrc.cjs Normal file
View File

@ -0,0 +1,14 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
}
}

11
.prettierrc
View File

@ -1,11 +0,0 @@
{
"singleQuote": true,
"semi": false,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"quoteProps": "as-needed",
"jsxSingleQuote": true,
"vueIndentScriptAndStyle": true,
"endOfLine": "lf"
}

8
.prettierrc.json Normal file
View File

@ -0,0 +1,8 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}

8
jsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}

15
package.json
View File

@ -6,7 +6,9 @@
"build": "vite build --mode prod", "build": "vite build --mode prod",
"build-uni-app": "vite build --mode uni", "build-uni-app": "vite build --mode uni",
"report": "vite build", "report": "vite build",
"preview": "vite preview" "preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/"
}, },
"dependencies": { "dependencies": {
"@jambonn/vue-lazyload": "1.0.9", "@jambonn/vue-lazyload": "1.0.9",
@ -27,15 +29,18 @@
"@iconify/vue": "^4.1.1", "@iconify/vue": "^4.1.1",
"@types/lodash-es": "^4.17.9", "@types/lodash-es": "^4.17.9",
"@vitejs/plugin-vue": "4.0.0", "@vitejs/plugin-vue": "4.0.0",
"@vitejs/plugin-vue-jsx": "3.0.0",
"less": "4.1.3", "less": "4.1.3",
"prettier": "3.2.5",
"rollup-plugin-visualizer": "^5.9.2", "rollup-plugin-visualizer": "^5.9.2",
"unplugin-vue-define-options": "^1.4.1", "unplugin-vue-define-options": "^1.4.1",
"unplugin-vue-macros": "^2.7.10",
"vite": "4.5.2", "vite": "4.5.2",
"vite-plugin-cdn-import": "0.3.5", "vite-plugin-cdn-import": "0.3.5",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-imagemin": "^0.6.1" "vite-plugin-imagemin": "^0.6.1",
"@rushstack/eslint-patch": "^1.3.3",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"@vue/eslint-config-prettier": "^8.0.0",
"eslint": "^8.49.0",
"eslint-plugin-vue": "^9.17.0",
"prettier": "^3.0.3"
} }
} }

4903
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

87
src/App.vue
View File

@ -9,27 +9,27 @@
<Call /> <Call />
</template> </template>
<script> <script>
/* /*
* try {navigator.control.gesture(false);} catch (e) {} //UC浏览器关闭默认手势事件 * try {navigator.control.gesture(false);} catch (e) {} //UC浏览器关闭默认手势事件
try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出菜单 try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出菜单
* */ * */
import { mapActions, mapState } from 'pinia' import { mapActions, mapState } from 'pinia'
import routes from './router/routes' import routes from './router/routes'
import Call from './components/Call' import Call from './components/Call'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
export default { export default {
name: 'App', name: 'App',
components: { components: {
Call, Call
}, },
data() { data() {
return { return {
transitionName: 'go', transitionName: 'go'
} }
}, },
computed: { computed: {
...mapState(useBaseStore, ['excludeRoutes']), ...mapState(useBaseStore, ['excludeRoutes'])
}, },
// watch $route 决定使用哪种过渡 // watch $route 决定使用哪种过渡
watch: { watch: {
@ -47,26 +47,23 @@ try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出
'/publish', '/publish',
'/home/live', '/home/live',
'slide', 'slide',
'/test', '/test'
] ]
if ( if (noAnimation.indexOf(from.path) !== -1 && noAnimation.indexOf(to.path) !== -1) {
noAnimation.indexOf(from.path) !== -1 &&
noAnimation.indexOf(to.path) !== -1
) {
return (this.transitionName = '') return (this.transitionName = '')
} }
const toDepth = routes.findIndex((v) => v.path === to.path) const toDepth = routes.findIndex((v) => v.path === to.path)
const fromDepth = routes.findIndex((v) => v.path === from.path) const fromDepth = routes.findIndex((v) => v.path === from.path)
this.transitionName = toDepth > fromDepth ? 'go' : 'back' this.transitionName = toDepth > fromDepth ? 'go' : 'back'
}, }
}, },
methods: { methods: {
...mapActions(useBaseStore, ['init', 'setMaskDialog']), ...mapActions(useBaseStore, ['init', 'setMaskDialog']),
setVh() { setVh() {
let vh = window.innerHeight * 0.01 let vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`) document.documentElement.style.setProperty('--vh', `${vh}px`)
}, }
}, },
mounted() { mounted() {
this.init() this.init()
@ -84,57 +81,57 @@ try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出
navigator.control.longpressMenu(false) navigator.control.longpressMenu(false)
} catch (e) {} } catch (e) {}
document.onselectstart = new Function('return false') //禁止选中文字 document.onselectstart = new Function('return false') //禁止选中文字
},
} }
}
</script> </script>
<style lang="less"> <style lang="less">
@import './assets/less/index'; @import './assets/less/index';
#app { #app {
height: 100%; height: 100%;
width: 100%; width: 100%;
position: relative; position: relative;
} }
.go-enter-from { .go-enter-from {
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }
//最终状态 //最终状态
.back-enter-to, .back-enter-to,
.back-enter-from, .back-enter-from,
.go-enter-to, .go-enter-to,
.go-leave-from { .go-leave-from {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.go-leave-to { .go-leave-to {
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
} }
.go-enter-active, .go-enter-active,
.go-leave-active, .go-leave-active,
.back-enter-active, .back-enter-active,
.back-leave-active { .back-leave-active {
transition: all 0.3s; transition: all 0.3s;
} }
.back-enter-from { .back-enter-from {
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
} }
.back-leave-to { .back-leave-to {
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
.fade-enter-from, .fade-enter-from,
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }
</style> </style>

257
src/assets/data/resource.js
View File

@ -8,8 +8,7 @@ export default {
all: [ all: [
{ {
id: '224e9a00-ffa0-4bc1-bb07-c318c7b02fa5', id: '224e9a00-ffa0-4bc1-bb07-c318c7b02fa5',
avatar: new URL('../../assets/img/icon/avatar/1.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/1.png', import.meta.url).href,
.href,
name: '何以为家', name: '何以为家',
sex: '', sex: '',
age: 25, age: 25,
@ -24,12 +23,11 @@ export default {
account: '234', account: '234',
pinyin: 'H', pinyin: 'H',
select: false, select: false,
type: CONST_VAR.RELATE_ENUM.REQUEST_FOLLOW, type: CONST_VAR.RELATE_ENUM.REQUEST_FOLLOW
}, },
{ {
id: '2b446aa8-5d31-429a-8e39-d4705eb4e900', id: '2b446aa8-5d31-429a-8e39-d4705eb4e900',
avatar: new URL('../../assets/img/icon/avatar/19.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/19.png', import.meta.url).href,
.href,
name: '浅唱↘我们的歌', name: '浅唱↘我们的歌',
sex: '', sex: '',
age: 25, age: 25,
@ -44,12 +42,11 @@ export default {
account: '33453', account: '33453',
pinyin: 'Q', pinyin: 'Q',
select: false, select: false,
type: CONST_VAR.RELATE_ENUM.FOLLOW_ME, type: CONST_VAR.RELATE_ENUM.FOLLOW_ME
}, },
{ {
id: '2d8622b4-7112-4bc7-a0cf-00a268a85504', id: '2d8622b4-7112-4bc7-a0cf-00a268a85504',
avatar: new URL('../../assets/img/icon/avatar/25.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/25.png', import.meta.url).href,
.href,
name: '‘心’之天空', name: '‘心’之天空',
sex: '', sex: '',
age: 25, age: 25,
@ -64,12 +61,11 @@ export default {
account: '234234', account: '234234',
pinyin: '#', pinyin: '#',
select: false, select: false,
type: CONST_VAR.RELATE_ENUM.FOLLOW_HE, type: CONST_VAR.RELATE_ENUM.FOLLOW_HE
}, },
{ {
id: '2e38900b-65f7-426a-8e8b-edb403df35fb', id: '2e38900b-65f7-426a-8e8b-edb403df35fb',
avatar: new URL('../../assets/img/icon/avatar/18.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/18.png', import.meta.url).href,
.href,
name: '◇、_保持微笑ゞ', name: '◇、_保持微笑ゞ',
sex: '', sex: '',
age: 25, age: 25,
@ -84,12 +80,11 @@ export default {
account: '1111', account: '1111',
pinyin: '#', pinyin: '#',
select: false, select: false,
type: CONST_VAR.RELATE_ENUM.FOLLOW_EACH_OTHER, type: CONST_VAR.RELATE_ENUM.FOLLOW_EACH_OTHER
}, },
{ {
id: '3cd53cb5-04f8-4439-ad2b-e57b3f9b8c73', id: '3cd53cb5-04f8-4439-ad2b-e57b3f9b8c73',
avatar: new URL('../../assets/img/icon/avatar/26.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/26.png', import.meta.url).href,
.href,
name: '好◇°我会Yi直在●', name: '好◇°我会Yi直在●',
sex: '', sex: '',
age: 25, age: 25,
@ -103,12 +98,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'sdfs', account: 'sdfs',
pinyin: 'H', pinyin: 'H',
select: false, select: false
}, },
{ {
id: '46c77017-9dc6-4a48-bf96-560c6e7db06f', id: '46c77017-9dc6-4a48-bf96-560c6e7db06f',
avatar: new URL('../../assets/img/icon/avatar/4.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/4.png', import.meta.url).href,
.href,
name: '甫韦茹', name: '甫韦茹',
sex: '', sex: '',
age: 25, age: 25,
@ -122,12 +116,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'dgfdfg', account: 'dgfdfg',
pinyin: 'F', pinyin: 'F',
select: false, select: false
}, },
{ {
id: '4df770d7-a414-4e02-8f9e-72ebd87eb93e', id: '4df770d7-a414-4e02-8f9e-72ebd87eb93e',
avatar: new URL('../../assets/img/icon/avatar/12.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/12.png', import.meta.url).href,
.href,
name: '幸福泡泡', name: '幸福泡泡',
sex: '', sex: '',
age: 25, age: 25,
@ -141,12 +134,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'df', account: 'df',
pinyin: 'X', pinyin: 'X',
select: false, select: false
}, },
{ {
id: '5ebb4d7a-c7ad-43c7-a830-9eb3ee423cb7', id: '5ebb4d7a-c7ad-43c7-a830-9eb3ee423cb7',
avatar: new URL('../../assets/img/icon/avatar/3.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
.href,
name: '蔡傲安', name: '蔡傲安',
sex: '', sex: '',
age: 25, age: 25,
@ -160,12 +152,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'ssss', account: 'ssss',
pinyin: 'C', pinyin: 'C',
select: false, select: false
}, },
{ {
id: '7226092d-a2c5-4ffd-98d7-3b7ac814bca3', id: '7226092d-a2c5-4ffd-98d7-3b7ac814bca3',
avatar: new URL('../../assets/img/icon/avatar/16.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/16.png', import.meta.url).href,
.href,
name: '心若向阳无谓伤悲', name: '心若向阳无谓伤悲',
sex: '', sex: '',
age: 25, age: 25,
@ -179,12 +170,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'asdfasd', account: 'asdfasd',
pinyin: 'X', pinyin: 'X',
select: false, select: false
}, },
{ {
id: '72aef2a9-5573-4205-9288-706e19bccc7f', id: '72aef2a9-5573-4205-9288-706e19bccc7f',
avatar: new URL('../../assets/img/icon/avatar/10.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/10.png', import.meta.url).href,
.href,
name: 'A倒影着稚嫩的少年', name: 'A倒影着稚嫩的少年',
sex: '', sex: '',
age: 25, age: 25,
@ -198,12 +188,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'wfghdf', account: 'wfghdf',
pinyin: '#', pinyin: '#',
select: false, select: false
}, },
{ {
id: '77c82d2e-9be1-45c2-a733-00445d2e7f2c', id: '77c82d2e-9be1-45c2-a733-00445d2e7f2c',
avatar: new URL('../../assets/img/icon/avatar/22.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/22.png', import.meta.url).href,
.href,
name: '一只喵的旅行。', name: '一只喵的旅行。',
sex: '', sex: '',
age: 25, age: 25,
@ -217,12 +206,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'sadf', account: 'sadf',
pinyin: 'Y', pinyin: 'Y',
select: false, select: false
}, },
{ {
id: '7b30566d-70eb-4a31-ae43-200917269a43', id: '7b30566d-70eb-4a31-ae43-200917269a43',
avatar: new URL('../../assets/img/icon/avatar/14.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/14.png', import.meta.url).href,
.href,
name: '℉阳光下的小情绪', name: '℉阳光下的小情绪',
sex: '', sex: '',
age: 25, age: 25,
@ -236,12 +224,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'asdfa', account: 'asdfa',
pinyin: '#', pinyin: '#',
select: false, select: false
}, },
{ {
id: '90c6ccd8-0653-4789-9348-28fba06d6ae3', id: '90c6ccd8-0653-4789-9348-28fba06d6ae3',
avatar: new URL('../../assets/img/icon/avatar/11.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/11.png', import.meta.url).href,
.href,
name: '思念一直在', name: '思念一直在',
sex: '', sex: '',
age: 25, age: 25,
@ -255,12 +242,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'as', account: 'as',
pinyin: 'S', pinyin: 'S',
select: false, select: false
}, },
{ {
id: 'a2c1310f-1a3c-430f-9b7c-557b9ccdd33d', id: 'a2c1310f-1a3c-430f-9b7c-557b9ccdd33d',
avatar: new URL('../../assets/img/icon/avatar/9.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/9.png', import.meta.url).href,
.href,
name: '阎韶丽', name: '阎韶丽',
sex: '', sex: '',
age: 25, age: 25,
@ -274,12 +260,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'vbvd', account: 'vbvd',
pinyin: 'Y', pinyin: 'Y',
select: false, select: false
}, },
{ {
id: 'a7443b4f-b0fa-4409-a693-5f090aa763ee', id: 'a7443b4f-b0fa-4409-a693-5f090aa763ee',
avatar: new URL('../../assets/img/icon/avatar/5.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/5.png', import.meta.url).href,
.href,
name: '马佳婉清', name: '马佳婉清',
sex: '', sex: '',
age: 25, age: 25,
@ -293,12 +278,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'sdf', account: 'sdf',
pinyin: 'M', pinyin: 'M',
select: false, select: false
}, },
{ {
id: 'b49fd828-f8a7-4be0-a3bc-0a8fa312b2e8', id: 'b49fd828-f8a7-4be0-a3bc-0a8fa312b2e8',
avatar: new URL('../../assets/img/icon/avatar/0.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/0.png', import.meta.url).href,
.href,
name: '倒影着稚嫩的少年', name: '倒影着稚嫩的少年',
sex: '', sex: '',
age: 25, age: 25,
@ -312,12 +296,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'eeee', account: 'eeee',
pinyin: 'D', pinyin: 'D',
select: false, select: false
}, },
{ {
id: 'b632bffe-1cfb-408a-8255-b558e2faf49a', id: 'b632bffe-1cfb-408a-8255-b558e2faf49a',
avatar: new URL('../../assets/img/icon/avatar/8.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/8.png', import.meta.url).href,
.href,
name: '买易槐', name: '买易槐',
sex: '', sex: '',
age: 25, age: 25,
@ -331,12 +314,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'xczxc', account: 'xczxc',
pinyin: 'M', pinyin: 'M',
select: false, select: false
}, },
{ {
id: 'c01f10dd-a270-42ab-876f-64a8beb22a69', id: 'c01f10dd-a270-42ab-876f-64a8beb22a69',
avatar: new URL('../../assets/img/icon/avatar/7.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/7.png', import.meta.url).href,
.href,
name: '章昊苍', name: '章昊苍',
sex: '', sex: '',
age: 25, age: 25,
@ -350,12 +332,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'gggggggggr', account: 'gggggggggr',
pinyin: 'Z', pinyin: 'Z',
select: false, select: false
}, },
{ {
id: 'd0bf11a3-a25b-4865-a047-c67de8e8af7b', id: 'd0bf11a3-a25b-4865-a047-c67de8e8af7b',
avatar: new URL('../../assets/img/icon/avatar/2.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/2.png', import.meta.url).href,
.href,
name: '凌依晨', name: '凌依晨',
sex: '', sex: '',
age: 25, age: 25,
@ -369,12 +350,11 @@ export default {
isDelete: 0, isDelete: 0,
account: '12', account: '12',
pinyin: 'L', pinyin: 'L',
select: false, select: false
}, },
{ {
id: 'd300b7a5-115d-41ba-a071-7d1781da331f', id: 'd300b7a5-115d-41ba-a071-7d1781da331f',
avatar: new URL('../../assets/img/icon/avatar/23.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/23.png', import.meta.url).href,
.href,
name: '为你锁住心', name: '为你锁住心',
sex: '', sex: '',
age: 25, age: 25,
@ -388,12 +368,11 @@ export default {
isDelete: 0, isDelete: 0,
account: '1629993515', account: '1629993515',
pinyin: 'W', pinyin: 'W',
select: false, select: false
}, },
{ {
id: 'deceba30-80fc-45c2-bd56-8d65091bb104', id: 'deceba30-80fc-45c2-bd56-8d65091bb104',
avatar: new URL('../../assets/img/icon/avatar/13.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/13.png', import.meta.url).href,
.href,
name: '原味青春', name: '原味青春',
sex: '', sex: '',
age: 25, age: 25,
@ -407,12 +386,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'werwe', account: 'werwe',
pinyin: 'Y', pinyin: 'Y',
select: false, select: false
}, },
{ {
id: 'e0c3d20d-5978-4339-962f-cffc6e29aff1', id: 'e0c3d20d-5978-4339-962f-cffc6e29aff1',
avatar: new URL('../../assets/img/icon/avatar/24.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/24.png', import.meta.url).href,
.href,
name: '一起走过的日子°', name: '一起走过的日子°',
sex: '', sex: '',
age: 25, age: 25,
@ -426,12 +404,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'dfgdfg', account: 'dfgdfg',
pinyin: 'Y', pinyin: 'Y',
select: false, select: false
}, },
{ {
id: 'e1fb6274-10fa-4d50-b9b1-6eefacfc2341', id: 'e1fb6274-10fa-4d50-b9b1-6eefacfc2341',
avatar: new URL('../../assets/img/icon/avatar/15.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/15.png', import.meta.url).href,
.href,
name: '看，熟悉旳风景', name: '看，熟悉旳风景',
sex: '', sex: '',
age: 25, age: 25,
@ -445,12 +422,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'aasdasd', account: 'aasdasd',
pinyin: 'K', pinyin: 'K',
select: false, select: false
}, },
{ {
id: 'eab1ef9b-70e6-4249-8d78-b4f6e1b0cb08', id: 'eab1ef9b-70e6-4249-8d78-b4f6e1b0cb08',
avatar: new URL('../../assets/img/icon/avatar/20.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/20.png', import.meta.url).href,
.href,
name: 'dear°学会微笑', name: 'dear°学会微笑',
sex: '', sex: '',
age: 25, age: 25,
@ -464,12 +440,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'gggggg', account: 'gggggg',
pinyin: '#', pinyin: '#',
select: false, select: false
}, },
{ {
id: 'ecb405e2-d057-4c85-a12b-a5fe9a7b8a05', id: 'ecb405e2-d057-4c85-a12b-a5fe9a7b8a05',
avatar: new URL('../../assets/img/icon/avatar/6.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/6.png', import.meta.url).href,
.href,
name: '富察昕昕', name: '富察昕昕',
sex: '', sex: '',
age: 25, age: 25,
@ -483,12 +458,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'ghjg', account: 'ghjg',
pinyin: 'F', pinyin: 'F',
select: false, select: false
}, },
{ {
id: 'f09652a3-d6e1-4517-a15e-583a24a250e1', id: 'f09652a3-d6e1-4517-a15e-583a24a250e1',
avatar: new URL('../../assets/img/icon/avatar/17.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/17.png', import.meta.url).href,
.href,
name: '蓝天下的迷彩?', name: '蓝天下的迷彩?',
sex: '', sex: '',
age: 25, age: 25,
@ -502,12 +476,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'yhjh', account: 'yhjh',
pinyin: 'L', pinyin: 'L',
select: false, select: false
}, },
{ {
id: 'f676cc30-cc81-487a-9450-cbb1f3c5cde8', id: 'f676cc30-cc81-487a-9450-cbb1f3c5cde8',
avatar: new URL('../../assets/img/icon/avatar/21.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/21.png', import.meta.url).href,
.href,
name: '伱的微笑', name: '伱的微笑',
sex: '', sex: '',
age: 25, age: 25,
@ -521,14 +494,13 @@ export default {
isDelete: 0, isDelete: 0,
account: 'ghj', account: 'ghj',
pinyin: 'N', pinyin: 'N',
select: false, select: false
}, }
], ],
recent: [ recent: [
{ {
id: '3cd53cb5-04f8-4439-ad2b-e57b3f9b8c73', id: '3cd53cb5-04f8-4439-ad2b-e57b3f9b8c73',
avatar: new URL('../../assets/img/icon/avatar/26.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/26.png', import.meta.url).href,
.href,
name: '好◇°我会Yi直在●', name: '好◇°我会Yi直在●',
sex: '', sex: '',
age: 25, age: 25,
@ -542,12 +514,11 @@ export default {
isDelete: 0, isDelete: 0,
account: 'sdfs', account: 'sdfs',
pinyin: 'H', pinyin: 'H',
select: false, select: false
}, },
{ {
id: '77c82d2e-9be1-45c2-a733-00445d2e7f2c', id: '77c82d2e-9be1-45c2-a733-00445d2e7f2c',
avatar: new URL('../../assets/img/icon/avatar/22.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/22.png', import.meta.url).href,
.href,
name: '一只喵的旅行。', name: '一只喵的旅行。',
sex: '', sex: '',
age: 25, age: 25,
@ -561,14 +532,13 @@ export default {
isDelete: 0, isDelete: 0,
account: 'sadf', account: 'sadf',
pinyin: 'Y', pinyin: 'Y',
select: false, select: false
}, }
], ],
eachOther: [ eachOther: [
{ {
id: '2b446aa8-5d31-429a-8e39-d4705eb4e900', id: '2b446aa8-5d31-429a-8e39-d4705eb4e900',
avatar: new URL('../../assets/img/icon/avatar/19.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/19.png', import.meta.url).href,
.href,
name: '浅唱↘我们的歌', name: '浅唱↘我们的歌',
sex: '', sex: '',
age: 25, age: 25,
@ -582,12 +552,11 @@ export default {
isDelete: 0, isDelete: 0,
account: '33453', account: '33453',
pinyin: 'Q', pinyin: 'Q',
select: false, select: false
}, },
{ {
id: 'eab1ef9b-70e6-4249-8d78-b4f6e1b0cb08', id: 'eab1ef9b-70e6-4249-8d78-b4f6e1b0cb08',
avatar: new URL('../../assets/img/icon/avatar/20.png', import.meta.url) avatar: new URL('../../assets/img/icon/avatar/20.png', import.meta.url).href,
.href,
name: 'dear°学会微笑', name: 'dear°学会微笑',
sex: '', sex: '',
age: 25, age: 25,
@ -601,208 +570,190 @@ export default {
isDelete: 0, isDelete: 0,
account: 'gggggg', account: 'gggggg',
pinyin: '#', pinyin: '#',
select: false, select: false
}, }
], ]
}, },
music: [ music: [
{ {
name: '龙卷风', name: '龙卷风',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3',
cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 99, duration: 99,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '爱在西元前', name: '爱在西元前',
mp3: 'http://m3.8js.net:99/1916/501204165042405.mp3', mp3: 'http://m3.8js.net:99/1916/501204165042405.mp3',
cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '蜗牛', name: '蜗牛',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '半岛铁盒', name: '半岛铁盒',
mp3: 'http://m3.8js.net:99/2016n/46/94745.mp3', mp3: 'http://m3.8js.net:99/2016n/46/94745.mp3',
cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '轨迹', name: '轨迹',
mp3: 'http://m3.8js.net:99/1832/411204324135934.mp3', mp3: 'http://m3.8js.net:99/1832/411204324135934.mp3',
cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '七里香', name: '七里香',
mp3: 'http://m3.8js.net:99/2016n/14/53717.mp3', mp3: 'http://m3.8js.net:99/2016n/14/53717.mp3',
cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '发如雪', name: '发如雪',
mp3: 'http://m3.8js.net:99/2014/211204142150965.mp3', mp3: 'http://m3.8js.net:99/2014/211204142150965.mp3',
cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '霍元甲', name: '霍元甲',
mp3: 'http://m3.8js.net:99/1921/261204212643140.mp3', mp3: 'http://m3.8js.net:99/1921/261204212643140.mp3',
cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '千里之外(周杰伦/费玉清)', name: '千里之外(周杰伦/费玉清)',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '菊花台', name: '菊花台',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '不能说的秘密', name: '不能说的秘密',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '牛仔很忙', name: '牛仔很忙',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '给我一首歌的时间', name: '给我一首歌的时间',
mp3: 'http://m3.8js.net:99/1938/041204380445445.mp3', mp3: 'http://m3.8js.net:99/1938/041204380445445.mp3',
cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '烟花易冷', name: '烟花易冷',
mp3: 'http://m3.8js.net:99/1828/051204280535192.mp3', mp3: 'http://m3.8js.net:99/1828/051204280535192.mp3',
cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '惊叹号', name: '惊叹号',
mp3: 'http://m3.8js.net:99/20111103/150.mp3', mp3: 'http://m3.8js.net:99/20111103/150.mp3',
cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '明明就', name: '明明就',
mp3: 'http://m3.8js.net:99/2016n/27/96537.mp3', mp3: 'http://m3.8js.net:99/2016n/27/96537.mp3',
cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '算什么男人', name: '算什么男人',
mp3: 'http://m3.8js.net:99/20150107/429.mp3', mp3: 'http://m3.8js.net:99/20150107/429.mp3',
cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '告白气球', name: '告白气球',
mp3: 'http://m3.8js.net:99/20161016/481.mp3', mp3: 'http://m3.8js.net:99/20161016/481.mp3',
cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, }
], ]
} }

26
src/components/AutoInput.vue
View File

@ -11,14 +11,14 @@
</template> </template>
<script> <script>
export default { export default {
name: 'AutoInput', name: 'AutoInput',
props: { props: {
modelValue: String, modelValue: String,
placeholder: { placeholder: {
type: String, type: String,
default: '留下你的精彩评论吧', default: '留下你的精彩评论吧'
}, }
}, },
mounted() { mounted() {
// this.$refs.input.setAttribute("placeholder", "改变") // this.$refs.input.setAttribute("placeholder", "改变")
@ -30,32 +30,32 @@
methods: { methods: {
changeText(e) { changeText(e) {
this.$emit('update:modelValue', this.$el.innerText) this.$emit('update:modelValue', this.$el.innerText)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.auto-input { .auto-input {
font-size: 14rem; font-size: 14rem;
width: 100%; width: 100%;
max-height: 70rem; max-height: 70rem;
overflow-y: scroll; overflow-y: scroll;
padding: 0 5rem; padding: 0 5rem;
outline: none; outline: none;
} }
.auto-input::-webkit-scrollbar { .auto-input::-webkit-scrollbar {
width: 0 !important; width: 0 !important;
} }
.auto-input:empty::before { .auto-input:empty::before {
/*content: "留下你的精彩评论吧";*/ /*content: "留下你的精彩评论吧";*/
content: attr(placeholder); content: attr(placeholder);
color: #999999; color: #999999;
} }
.auto-input:focus::before { .auto-input:focus::before {
content: none; content: none;
} }
</style> </style>

30
src/components/Back.vue
View File

@ -2,50 +2,48 @@
<img class="close" ref="img" :src="src" /> <img class="close" ref="img" :src="src" />
</template> </template>
<script> <script>
export default { export default {
name: 'Back', name: 'Back',
props: { props: {
mode: { mode: {
type: String, type: String,
default: 'gray', default: 'gray'
}, },
img: { img: {
type: String, type: String,
default: 'back', default: 'back'
}, },
direction: { direction: {
type: String, type: String,
default: 'left', default: 'left'
}, },
scale: { scale: {
type: [Number, String], type: [Number, String],
default: 1, default: 1
}, }
}, },
data() { data() {
return {} return {}
}, },
computed: { computed: {
src() { src() {
return new URL( return new URL(`../assets/img/icon/components/${this.mode}-${this.img}.png`, import.meta.url)
`../assets/img/icon/components/${this.mode}-${this.img}.png`, .href
import.meta.url, }
).href
},
}, },
mounted() { mounted() {
this.$setCss( this.$setCss(
this.$refs.img, this.$refs.img,
'transform', 'transform',
`rotate(${this.direction === 'left' ? '0' : '180'}deg) scale(${this.scale})`, `rotate(${this.direction === 'left' ? '0' : '180'}deg) scale(${this.scale})`
) )
}, },
methods: {}, methods: {}
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
img { img {
width: 20rem; width: 20rem;
} }
</style> </style>

42
src/components/BaseButton.vue
View File

@ -9,54 +9,50 @@
<slot name="prefix"></slot> <slot name="prefix"></slot>
<slot v-if="showText"></slot> <slot v-if="showText"></slot>
<slot name="suffix"></slot> <slot name="suffix"></slot>
<div <div :style="{ width: progress + '%' }" v-if="$props.progress" class="progress"></div>
:style="{ width: progress + '%' }"
v-if="$props.progress"
class="progress"
></div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'BaseButton', name: 'BaseButton',
props: { props: {
loading: { loading: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
progress: { progress: {
type: Number, type: Number,
default: null, default: null
}, },
loadingWithText: { loadingWithText: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
type: { type: {
type: String, type: String,
default: '', default: ''
}, },
active: { active: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
border: { border: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
size: { size: {
type: String, type: String,
default: 'normal', default: 'normal'
//small //small
}, },
radius: { radius: {
type: String, type: String,
default: '3', default: '3'
}, }
}, },
data() { data() {
return {} return {}
@ -68,7 +64,7 @@
this.active ? '' : 'no-active', this.active ? '' : 'no-active',
this.border ? '' : 'no-border', this.border ? '' : 'no-border',
this.disabled && 'disabled', this.disabled && 'disabled',
this.size, this.size
] ]
}, },
showText() { showText() {
@ -76,7 +72,7 @@
return this.loadingWithText return this.loadingWithText
} }
return true return true
}, }
}, },
created() {}, created() {},
methods: { methods: {
@ -84,15 +80,15 @@
if (this.disabled) return if (this.disabled) return
if (this.loading) return if (this.loading) return
return this.$emit('click') return this.$emit('click')
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../assets/less/index'; @import '../assets/less/index';
.button { .button {
color: white; color: white;
height: 40rem; height: 40rem;
line-height: 40rem; line-height: 40rem;
@ -254,5 +250,5 @@
width: 62rem; width: 62rem;
height: 26rem; height: 26rem;
} }
} }
</style> </style>

30
src/components/BaseHeader.vue
View File

@ -1,13 +1,7 @@
<template> <template>
<div id="BaseHeader" :class="[isFixed ? 'fixed' : '']"> <div id="BaseHeader" :class="[isFixed ? 'fixed' : '']">
<div class="header"> <div class="header">
<dy-back <dy-back :mode="backMode" :img="backImg" @click="back()" class="left" direction="left" />
:mode="backMode"
:img="backImg"
@click="back()"
class="left"
direction="left"
/>
<slot name="center"><span></span></slot> <slot name="center"><span></span></slot>
<slot name="right"><span></span></slot> <slot name="right"><span></span></slot>
</div> </div>
@ -15,26 +9,26 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'BaseHeader', name: 'BaseHeader',
components: {}, components: {},
props: { props: {
backMode: { backMode: {
type: String, type: String,
default: 'gray', default: 'gray'
}, },
backImg: { backImg: {
type: String, type: String,
default: 'back', default: 'back'
}, },
isClose: { isClose: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
isFixed: { isFixed: {
type: Boolean, type: Boolean,
default: true, default: true
}, }
}, },
data() { data() {
return {} return {}
@ -48,15 +42,15 @@
} else { } else {
this.$back() this.$back()
} }
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../assets/less/index'; @import '../assets/less/index';
#BaseHeader { #BaseHeader {
width: 100%; width: 100%;
color: white; color: white;
@ -89,5 +83,5 @@
align-items: center; align-items: center;
} }
} }
} }
</style> </style>

24
src/components/BaseMusic.vue
View File

@ -7,34 +7,34 @@
@click.stop=" @click.stop="
bus.emit(EVENT_KEY.NAV, { bus.emit(EVENT_KEY.NAV, {
path: '/home/music', path: '/home/music',
query: { id: props.item.id }, query: { id: props.item.id }
}) })
" "
/> />
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed, inject } from 'vue' import { computed, inject } from 'vue'
import bus, { EVENT_KEY } from '@/utils/bus' import bus, { EVENT_KEY } from '@/utils/bus'
const props = defineProps({ const props = defineProps({
item: { item: {
type: Object, type: Object,
default: () => { default: () => {
return {} return {}
}, }
}, }
}) })
const isPlaying = inject('isPlaying') const isPlaying = inject('isPlaying')
const style = computed(() => { const style = computed(() => {
return { webkitAnimationPlayState: isPlaying.value ? 'running' : 'paused' } return { webkitAnimationPlayState: isPlaying.value ? 'running' : 'paused' }
}) })
</script> </script>
<style lang="less"> <style lang="less">
.music-wrapper { .music-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
@w: 45rem; @w: 45rem;
@ -59,5 +59,5 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
} }
</style> </style>

56
src/components/Call.vue
View File

@ -21,11 +21,7 @@
<div class="float"> <div class="float">
<div class="header"> <div class="header">
<div class="left"> <div class="left">
<img <img @click="isSmall = true" src="@/assets/img/icon/message/chat/narrow.png" alt="" />
@click="isSmall = true"
src="@/assets/img/icon/message/chat/narrow.png"
alt=""
/>
</div> </div>
<span class="center">等待对方接听...</span> <span class="center">等待对方接听...</span>
<div class="right"> <div class="right">
@ -60,22 +56,14 @@
<span>免提</span> <span>免提</span>
</div> </div>
<div class="option"> <div class="option">
<dy-back <dy-back mode="light" @click="isExpand = !isExpand" img="back" class="shrink" />
mode="light"
@click="isExpand = !isExpand"
img="back"
class="shrink"
/>
<!-- <img src="@/assets/img/icon/message/chat/narrow.png" alt="">--> <!-- <img src="@/assets/img/icon/message/chat/narrow.png" alt="">-->
</div> </div>
</div> </div>
</div> </div>
<img src="@/assets/img/icon/avatar/2.png" alt="" class="big-avatar" /> <img src="@/assets/img/icon/avatar/2.png" alt="" class="big-avatar" />
<div class="footer"> <div class="footer">
<img <img @click="isShowAudioCall = false" src="@/assets/img/icon/message/chat/call-end.png" />
@click="isShowAudioCall = false"
src="@/assets/img/icon/message/chat/call-end.png"
/>
<span>挂断</span> <span>挂断</span>
</div> </div>
</div> </div>
@ -83,13 +71,13 @@
</transition> </transition>
</template> </template>
<script> <script>
import { inject } from 'vue' import { inject } from 'vue'
export default { export default {
name: 'Call', name: 'Call',
components: {}, components: {},
props: { props: {
modelValue: false, modelValue: false
}, },
data() { data() {
return { return {
@ -103,7 +91,7 @@
isSmall: false, isSmall: false,
isShowAudioCall: false, isShowAudioCall: false,
height: 0, height: 0,
width: 0, width: 0
} }
}, },
computed: { computed: {
@ -111,9 +99,9 @@
return { return {
'transition-duration': this.callFloatTransitionTime + 'ms', 'transition-duration': this.callFloatTransitionTime + 'ms',
left: this.callFloatLeft + 'px', left: this.callFloatLeft + 'px',
top: this.callFloatTop + 'px', top: this.callFloatTop + 'px'
}
} }
},
}, },
watch: { watch: {
isShowAudioCall(newVal) { isShowAudioCall(newVal) {
@ -121,7 +109,7 @@
this.isOpenCamera = false this.isOpenCamera = false
this.isOpenAudio = true this.isOpenAudio = true
} }
}, }
}, },
created() {}, created() {},
methods: { methods: {
@ -137,7 +125,7 @@
} else { } else {
this.callFloatLeft = this.width - 15 - 70 this.callFloatLeft = this.width - 15 - 70
} }
}, }
}, },
mounted() { mounted() {
this.mitt.on('showAudioCall', () => { this.mitt.on('showAudioCall', () => {
@ -149,24 +137,24 @@
}) })
this.height = document.body.clientHeight this.height = document.body.clientHeight
this.width = document.body.clientWidth this.width = document.body.clientWidth
},
} }
}
</script> </script>
<style> <style>
.scale-enter-active, .scale-enter-active,
.scale-leave-active { .scale-leave-active {
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
.scale-enter-from, .scale-enter-from,
.scale-leave-to { .scale-leave-to {
transform: scale(0); transform: scale(0);
} }
</style> </style>
<style scoped lang="less"> <style scoped lang="less">
.call-float { .call-float {
transition-property: all; transition-property: all;
z-index: 9; z-index: 9;
width: 70rem; width: 70rem;
@ -187,9 +175,9 @@
width: 30rem; width: 30rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
.audio-call { .audio-call {
color: white; color: white;
position: fixed; position: fixed;
z-index: 8; z-index: 8;
@ -320,5 +308,5 @@
} }
} }
} }
} }
</style> </style>

24
src/components/Check.vue
View File

@ -1,10 +1,6 @@
<template> <template>
<div class="check" @click.stop="change"> <div class="check" @click.stop="change">
<img <img v-show="!modelValue" src="../assets/img/icon/components/check/round-gray.png" alt="" />
v-show="!modelValue"
src="../assets/img/icon/components/check/round-gray.png"
alt=""
/>
<img <img
v-show="modelValue && mode === 'gray'" v-show="modelValue && mode === 'gray'"
src="../assets/img/icon/components/check/check-gray.png" src="../assets/img/icon/components/check/check-gray.png"
@ -18,17 +14,17 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'Check', name: 'Check',
props: { props: {
modelValue: { modelValue: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
mode: { mode: {
type: String, type: String,
default: 'gray', //red default: 'gray' //red
}, }
}, },
data() { data() {
return {} return {}
@ -39,15 +35,15 @@
change() { change() {
this.$emit('update:modelValue', !this.modelValue) this.$emit('update:modelValue', !this.modelValue)
this.$emit('change', !this.modelValue) this.$emit('change', !this.modelValue)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../assets/less/index'; @import '../assets/less/index';
.check { .check {
@width: 14rem; @width: 14rem;
width: @width; width: @width;
height: @width; height: @width;
@ -56,5 +52,5 @@
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
} }
} }
</style> </style>

160
src/components/Comment.vue
View File

@ -15,10 +15,7 @@
<dy-back mode="dark" img="close" direction="right" style="opacity: 0" /> <dy-back mode="dark" img="close" direction="right" style="opacity: 0" />
<div class="num">{{ formatNumber(comments.length) }}条评论</div> <div class="num">{{ formatNumber(comments.length) }}条评论</div>
<div class="right"> <div class="right">
<Icon <Icon icon="prime:arrow-up-right-and-arrow-down-left-from-center" @click.stop="$no" />
icon="prime:arrow-up-right-and-arrow-down-left-from-center"
@click.stop="$no"
/>
<Icon icon="ic:round-close" @click.stop="cancel" /> <Icon icon="ic:round-close" @click.stop="cancel" />
</div> </div>
</div> </div>
@ -26,18 +23,10 @@
<div class="comment"> <div class="comment">
<div class="wrapper" v-if="comments.length"> <div class="wrapper" v-if="comments.length">
<div class="items"> <div class="items">
<div <div class="item" v-for="item in comments" v-longpress="(e) => showOptions(item)">
class="item"
v-for="item in comments"
v-longpress="(e) => showOptions(item)"
>
<div class="main"> <div class="main">
<div class="content"> <div class="content">
<img <img :src="_checkImgUrl(item.avatar)" alt="" class="head-image" />
:src="_checkImgUrl(item.avatar)"
alt=""
class="head-image"
/>
<div class="comment-container"> <div class="comment-container">
<div class="name">{{ item.nickname }}</div> <div class="name">{{ item.nickname }}</div>
<div class="detail" :class="item.user_buried && 'gray'"> <div class="detail" :class="item.user_buried && 'gray'">
@ -52,11 +41,7 @@
<div class="reply-text">回复</div> <div class="reply-text">回复</div>
</div> </div>
<div class="right d-flex" style="gap: 10rem"> <div class="right d-flex" style="gap: 10rem">
<div <div class="love" :class="item.user_digged && 'loved'" @click="loved(item)">
class="love"
:class="item.user_digged && 'loved'"
@click="loved(item)"
>
<Icon <Icon
icon="icon-park-solid:like" icon="icon-park-solid:like"
v-show="item.user_digged" v-show="item.user_digged"
@ -67,24 +52,15 @@
v-show="!item.user_digged" v-show="!item.user_digged"
class="love-image" class="love-image"
/> />
<span v-if="item.digg_count">{{ <span v-if="item.digg_count">{{ _formatNumber(item.digg_count) }}</span>
_formatNumber(item.digg_count)
}}</span>
</div> </div>
<div <div class="love" @click="item.user_buried = !item.user_buried">
class="love"
@click="item.user_buried = !item.user_buried"
>
<Icon <Icon
v-if="item.user_buried" v-if="item.user_buried"
icon="icon-park-solid:dislike-two" icon="icon-park-solid:dislike-two"
class="love-image" class="love-image"
/> />
<Icon <Icon v-else icon="icon-park-outline:dislike" class="love-image" />
v-else
icon="icon-park-outline:dislike"
class="love-image"
/>
</div> </div>
</div> </div>
</div> </div>
@ -96,11 +72,7 @@
<div class="reply" v-for="child in item.children"> <div class="reply" v-for="child in item.children">
<!-- v-longpress="e => showOptions(child)"--> <!-- v-longpress="e => showOptions(child)"-->
<div class="content"> <div class="content">
<img <img :src="_checkImgUrl(child.avatar)" alt="" class="head-image" />
:src="_checkImgUrl(child.avatar)"
alt=""
class="head-image"
/>
<div class="comment-container"> <div class="comment-container">
<div class="name"> <div class="name">
{{ child.nickname }} {{ child.nickname }}
@ -112,9 +84,7 @@
<div class="left"> <div class="left">
<div class="time"> <div class="time">
{{ $time(child.create_time) {{ $time(child.create_time)
}}{{ }}{{ child.ip_location && ` · ${item.ip_location}` }}
child.ip_location && ` · ${item.ip_location}`
}}
</div> </div>
<div class="reply-text">回复</div> <div class="reply-text">回复</div>
</div> </div>
@ -148,9 +118,7 @@
<div class="more" v-else @click="handShowChildren(item)"> <div class="more" v-else @click="handShowChildren(item)">
<div class="gang"></div> <div class="gang"></div>
<span <span
>展开{{ >展开{{ item.showChildren ? '更多' : `${item.sub_comment_count}条` }}回复</span
item.showChildren ? '更多' : `${item.sub_comment_count}条`
}}回复</span
> >
<Icon icon="ep:arrow-down-bold" /> <Icon icon="ep:arrow-down-bold" />
</div> </div>
@ -166,11 +134,7 @@
<div class="input-toolbar"> <div class="input-toolbar">
<transition name="fade"> <transition name="fade">
<div class="call-friend" v-if="isCall"> <div class="call-friend" v-if="isCall">
<div <div class="friend" v-for="item in friends.all" @click="toggleCall(item)">
class="friend"
v-for="item in friends.all"
@click="toggleCall(item)"
>
<img <img
:style="item.select ? 'opacity: .5;' : ''" :style="item.select ? 'opacity: .5;' : ''"
class="avatar" class="avatar"
@ -189,33 +153,16 @@
<div class="toolbar"> <div class="toolbar">
<div class="input-wrapper"> <div class="input-wrapper">
<AutoInput <AutoInput v-model="comment" placeholder="善语结善缘，恶言伤人心"></AutoInput>
v-model="comment"
placeholder="善语结善缘，恶言伤人心"
></AutoInput>
<div class="right"> <div class="right">
<img <img src="../assets/img/icon/message/call.png" @click="isCall = !isCall" />
src="../assets/img/icon/message/call.png" <img src="../assets/img/icon/message/emoji-black.png" @click="$no" />
@click="isCall = !isCall"
/>
<img
src="../assets/img/icon/message/emoji-black.png"
@click="$no"
/>
</div> </div>
</div> </div>
<img <img v-if="comment" src="../assets/img/icon/message/up.png" @click="send" />
v-if="comment"
src="../assets/img/icon/message/up.png"
@click="send"
/>
</div> </div>
</div> </div>
<ConfirmDialog <ConfirmDialog title="私信给" ok-text="发送" v-model:visible="showPrivateChat">
title="私信给"
ok-text="发送"
v-model:visible="showPrivateChat"
>
<Search mode="light" v-model="test" :isShowSearchIcon="false" /> <Search mode="light" v-model="test" :isShowSearchIcon="false" />
</ConfirmDialog> </ConfirmDialog>
</div> </div>
@ -223,18 +170,18 @@
</template> </template>
<script> <script>
import AutoInput from './AutoInput' import AutoInput from './AutoInput'
import ConfirmDialog from './dialog/ConfirmDialog' import ConfirmDialog from './dialog/ConfirmDialog'
import { mapState } from 'pinia' import { mapState } from 'pinia'
import FromBottomDialog from './dialog/FromBottomDialog' import FromBottomDialog from './dialog/FromBottomDialog'
import Loading from './Loading' import Loading from './Loading'
import Search from './Search' import Search from './Search'
import { $no, _checkImgUrl, _formatNumber, sampleSize } from '@/utils' import { $no, _checkImgUrl, _formatNumber, sampleSize } from '@/utils'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
import { videoComments } from '@/api/videos' import { videoComments } from '@/api/videos'
import Popover from '@/pages/login/components/Tooltip.vue' import Popover from '@/pages/login/components/Tooltip.vue'
export default { export default {
name: 'Comment', name: 'Comment',
components: { components: {
Popover, Popover,
@ -242,25 +189,25 @@
ConfirmDialog, ConfirmDialog,
FromBottomDialog, FromBottomDialog,
Loading, Loading,
Search, Search
}, },
props: { props: {
modelValue: false, modelValue: false,
videoId: { videoId: {
type: String, type: String,
default: null, default: null
}, },
pageId: { pageId: {
type: String, type: String,
default: 'home-index', default: 'home-index'
}, },
height: { height: {
type: String, type: String,
default: 'calc(var(--vh, 1vh) * 70)', default: 'calc(var(--vh, 1vh) * 70)'
}, }
}, },
computed: { computed: {
...mapState(useBaseStore, ['friends']), ...mapState(useBaseStore, ['friends'])
}, },
watch: { watch: {
modelValue(newVale) { modelValue(newVale) {
@ -269,7 +216,7 @@
} else { } else {
this.comments = [] this.comments = []
} }
}, }
}, },
data() { data() {
return { return {
@ -280,14 +227,14 @@
{ id: 1, name: '私信回复' }, { id: 1, name: '私信回复' },
{ id: 2, name: '复制' }, { id: 2, name: '复制' },
{ id: 3, name: '搜一搜' }, { id: 3, name: '搜一搜' },
{ id: 4, name: '举报' }, { id: 4, name: '举报' }
], ],
selectRow: {}, selectRow: {},
showPrivateChat: false, showPrivateChat: false,
isInput: false, isInput: false,
isCall: false, isCall: false,
loadChildren: false, loadChildren: false,
loadChildrenItemCId: -1, loadChildrenItemCId: -1
} }
}, },
mounted() {}, mounted() {},
@ -310,14 +257,13 @@
send() { send() {
this.comments.push({ this.comments.push({
id: '2', id: '2',
avatar: new URL('../assets/img/icon/avatar/4.png', import.meta.url) avatar: new URL('../assets/img/icon/avatar/4.png', import.meta.url).href,
.href,
name: '成都旅行', name: '成都旅行',
text: this.comment, text: this.comment,
loveNum: 27, loveNum: 27,
isLoved: false, isLoved: false,
time: '2021-08-24 20:33', time: '2021-08-24 20:33',
children: [], children: []
}) })
this.comment = '' this.comment = ''
this.isCall = false this.isCall = false
@ -368,15 +314,15 @@
// } // }
call() { call() {
console.log(this.commit) console.log(this.commit)
},
},
} }
}
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '../assets/less/index'; @import '../assets/less/index';
.title { .title {
z-index: 2; z-index: 2;
position: fixed; position: fixed;
left: 0; left: 0;
@ -410,13 +356,13 @@
border-radius: 50%; border-radius: 50%;
} }
} }
} }
.gray { .gray {
color: var(--second-text-color); color: var(--second-text-color);
} }
.comment { .comment {
width: 100vw; width: 100vw;
height: v-bind(height); height: v-bind(height);
background: #fff; background: #fff;
@ -659,15 +605,15 @@
} }
} }
} }
} }
.comment-enter-active, .comment-enter-active,
.comment-leave-active { .comment-leave-active {
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.comment-enter-from, .comment-enter-from,
.comment-leave-to { .comment-leave-to {
transform: translateY(60vh); transform: translateY(60vh);
} }
</style> </style>

42
src/components/DouyinCode.vue
View File

@ -3,21 +3,14 @@
<div class="DouyinCode" v-if="modelValue"> <div class="DouyinCode" v-if="modelValue">
<div class="content"> <div class="content">
<div class="video-poster"> <div class="video-poster">
<img <img :src="_checkImgUrl(item.video.cover.url_list[0])" class="poster" />
:src="_checkImgUrl(item.video.cover.url_list[0])"
class="poster"
/>
</div> </div>
<div class="desc"> <div class="desc">
<div class="left"> <div class="left">
<div class="user">@{{ item.author.nickname }}</div> <div class="user">@{{ item.author.nickname }}</div>
<div class="title">{{ item.desc }}</div> <div class="title">{{ item.desc }}</div>
</div> </div>
<img <img class="code" src="../assets/img/icon/components/video/douyin-code.jpg" alt="" />
class="code"
src="../assets/img/icon/components/video/douyin-code.jpg"
alt=""
/>
</div> </div>
</div> </div>
<div class="toolbar"> <div class="toolbar">
@ -32,24 +25,15 @@
<span>QQ空间</span> <span>QQ空间</span>
</div> </div>
<div class="share-to" @click="$no"> <div class="share-to" @click="$no">
<img <img src="../assets/img/icon/components/video/towechatchat.webp" alt="" />
src="../assets/img/icon/components/video/towechatchat.webp"
alt=""
/>
<span>微信好友</span> <span>微信好友</span>
</div> </div>
<div class="share-to" @click="$no"> <div class="share-to" @click="$no">
<img <img src="../assets/img/icon/components/video/towechat.webp" alt="" />
src="../assets/img/icon/components/video/towechat.webp"
alt=""
/>
<span>朋友圈</span> <span>朋友圈</span>
</div> </div>
<div class="share-to" @click="$no"> <div class="share-to" @click="$no">
<img <img src="../assets/img/icon/components/video/todownload.webp" alt="" />
src="../assets/img/icon/components/video/todownload.webp"
alt=""
/>
<span>保存到相册</span> <span>保存到相册</span>
</div> </div>
</div> </div>
@ -59,13 +43,13 @@
</transition> </transition>
</template> </template>
<script> <script>
import { _checkImgUrl } from '@/utils' import { _checkImgUrl } from '@/utils'
export default { export default {
name: 'DouyinCode', name: 'DouyinCode',
props: { props: {
item: {}, item: {},
modelValue: false, modelValue: false
}, },
data() { data() {
return {} return {}
@ -76,15 +60,15 @@
_checkImgUrl, _checkImgUrl,
cancel() { cancel() {
this.$emit('update:modelValue', false) this.$emit('update:modelValue', false)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../assets/less/index'; @import '../assets/less/index';
.DouyinCode { .DouyinCode {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -188,5 +172,5 @@
text-align: center; text-align: center;
} }
} }
} }
</style> </style>

30
src/components/Footer.vue
View File

@ -2,21 +2,11 @@
<div v-if="visible" class="footer" :class="{ isWhite }"> <div v-if="visible" class="footer" :class="{ isWhite }">
<div class="l-button" @click="refresh(1)"> <div class="l-button" @click="refresh(1)">
<span v-if="!isRefresh1" :class="{ active: currentTab === 1 }">首页</span> <span v-if="!isRefresh1" :class="{ active: currentTab === 1 }">首页</span>
<img <img v-if="isRefresh1" src="../assets/img/icon/refresh1.png" alt="" class="refresh" />
v-if="isRefresh1"
src="../assets/img/icon/refresh1.png"
alt=""
class="refresh"
/>
</div> </div>
<div class="l-button" @click="refresh(2)"> <div class="l-button" @click="refresh(2)">
<span v-if="!isRefresh2" :class="{ active: currentTab === 2 }">商城</span> <span v-if="!isRefresh2" :class="{ active: currentTab === 2 }">商城</span>
<img <img v-if="isRefresh2" src="../assets/img/icon/refresh1.png" alt="" class="refresh" />
v-if="isRefresh2"
src="../assets/img/icon/refresh1.png"
alt=""
class="refresh"
/>
</div> </div>
<div class="l-button" @click="tab(3)"> <div class="l-button" @click="tab(3)">
<div class="add-ctn"> <div class="add-ctn">
@ -34,9 +24,9 @@
</template> </template>
<script> <script>
import bus, { EVENT_KEY } from '../utils/bus' import bus, { EVENT_KEY } from '../utils/bus'
export default { export default {
name: 'Footer', name: 'Footer',
props: ['initTab', 'isWhite'], props: ['initTab', 'isWhite'],
data() { data() {
@ -44,7 +34,7 @@
isRefresh1: false, isRefresh1: false,
isRefresh2: false, isRefresh2: false,
currentTab: this.initTab, currentTab: this.initTab,
visible: true, visible: true
} }
}, },
created() { created() {
@ -85,15 +75,15 @@
} else { } else {
this.tab(index) this.tab(index)
} }
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../assets/less/index'; @import '../assets/less/index';
.footer { .footer {
font-size: 14rem; font-size: 14rem;
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -171,5 +161,5 @@
position: absolute; position: absolute;
} }
} }
} }
</style> </style>

16
src/components/Loading.vue
View File

@ -5,25 +5,25 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'Loading', name: 'Loading',
props: { props: {
isFullScreen: { isFullScreen: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
type: { type: {
type: String, type: String,
default: 'normal', default: 'normal'
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../assets/less/index'; @import '../assets/less/index';
.Loading { .Loading {
&.inline { &.inline {
width: 100%; width: 100%;
height: 40rem; height: 40rem;
@ -82,5 +82,5 @@
transform: translate3d(-10rem, 0, 0) scale(1.2); transform: translate3d(-10rem, 0, 0) scale(1.2);
} }
} }
} }
</style> </style>

16
src/components/Mask.vue
View File

@ -2,21 +2,21 @@
<div class="Mask" :class="mode"></div> <div class="Mask" :class="mode"></div>
</template> </template>
<script> <script>
//未以组件的方式使用，FromBottomDialog.vue里面是用js append到dom里面去的， //未以组件的方式使用，FromBottomDialog.vue里面是用js append到dom里面去的，
//以组件的方式使用，不好随意插位置，插到app下面，又会出现定位覆盖的问题 //以组件的方式使用，不好随意插位置，插到app下面，又会出现定位覆盖的问题
export default { export default {
name: 'Mask', name: 'Mask',
props: { props: {
mode: { mode: {
type: String, type: String,
default: 'dark', default: 'dark'
},
},
} }
}
}
</script> </script>
<style lang="less"> <style lang="less">
.Mask { .Mask {
z-index: 3; z-index: 3;
position: fixed; position: fixed;
top: 0; top: 0;
@ -40,5 +40,5 @@
&.white { &.white {
background: var(--mask-white); background: var(--mask-white);
} }
} }
</style> </style>

12
src/components/NoMore.vue
View File

@ -5,20 +5,20 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'NoMore', name: 'NoMore'
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../assets/less/index'; @import '../assets/less/index';
.NoMore { .NoMore {
font-size: 12rem; font-size: 12rem;
height: 60rem; height: 60rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--second-text-color); color: var(--second-text-color);
} }
</style> </style>

60
src/components/Posters.vue
View File

@ -1,15 +1,7 @@
<template> <template>
<div class="posters"> <div class="posters">
<div <div class="poster-item" v-for="(i, index) in list" @click="goDetail(index)">
class="poster-item" <img class="poster" v-lazy="_checkImgUrl(i.video.cover.url_list[0])" alt="" />
v-for="(i, index) in list"
@click="goDetail(index)"
>
<img
class="poster"
v-lazy="_checkImgUrl(i.video.cover.url_list[0])"
alt=""
/>
<div class="num" v-if="mode === 'normal'"> <div class="num" v-if="mode === 'normal'">
<Icon icon="icon-park-outline:like" /> <Icon icon="icon-park-outline:like" />
<span>{{ _formatNumber(i.statistics.digg_count) }}</span> <span>{{ _formatNumber(i.statistics.digg_count) }}</span>
@ -26,41 +18,41 @@
</template> </template>
<script setup> <script setup>
import { _checkImgUrl, _formatNumber } from '@/utils' import { _checkImgUrl, _formatNumber } from '@/utils'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { cloneDeep } from '@/utils' import { cloneDeep } from '@/utils'
const store = useBaseStore() const store = useBaseStore()
const nav = useRouter() const nav = useRouter()
const props = defineProps({ const props = defineProps({
list: { list: {
type: [Array, Number], type: [Array, Number],
default: () => { default: () => {
return [] return []
}, }
}, },
mode: { mode: {
type: String, type: String,
default: 'normal', //date,music default: 'normal' //date,music
}, }
}) })
defineOptions({ defineOptions({
name: 'Posters', name: 'Posters'
}) })
function goDetail(index) { function goDetail(index) {
store.routeData = cloneDeep({ list: props.list, index }) store.routeData = cloneDeep({ list: props.list, index })
nav.push({ path: '/video-detail' }) nav.push({ path: '/video-detail' })
} }
function getDay(time) { function getDay(time) {
let date = new Date(time * 1000) let date = new Date(time * 1000)
return date.getDate() return date.getDate()
} }
function getMonth(time) { function getMonth(time) {
let date = new Date(time * 1000) let date = new Date(time * 1000)
let month = date.getMonth() + 1 let month = date.getMonth() + 1
switch (month) { switch (month) {
@ -89,16 +81,16 @@
case 12: case 12:
return '十二月' return '十二月'
} }
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.posters { .posters {
display: grid; display: grid;
grid-template-columns: 33.33vw 33.33vw 33.33vw; grid-template-columns: 33.33vw 33.33vw 33.33vw;
} }
.poster-item { .poster-item {
height: calc(33.33vw * 1.2); height: calc(33.33vw * 1.2);
border: 0.5px solid black; border: 0.5px solid black;
overflow: hidden; overflow: hidden;
@ -160,5 +152,5 @@
font-size: 10rem; font-size: 10rem;
} }
} }
} }
</style> </style>

48
src/components/Scroll.vue
View File

@ -13,12 +13,7 @@
<Loading v-if="loading" :is-full-screen="false" /> <Loading v-if="loading" :is-full-screen="false" />
</div> </div>
</div> </div>
<div <div v-else class="scroll-wrapper scroll Scroll" ref="wrapper" @scroll="scroll">
v-else
class="scroll-wrapper scroll Scroll"
ref="wrapper"
@scroll="scroll"
>
<div class="scroll-content"> <div class="scroll-content">
<slot></slot> <slot></slot>
<Loading v-if="loading" :is-full-screen="fullLoading" /> <Loading v-if="loading" :is-full-screen="fullLoading" />
@ -26,47 +21,47 @@
</div> </div>
</template> </template>
<script> <script>
import Loading from './Loading' import Loading from './Loading'
import { nextTick } from 'vue' import { nextTick } from 'vue'
export default { export default {
name: 'Scroll', name: 'Scroll',
components: { components: {
Loading, Loading
}, },
props: { props: {
fixedHeight: { fixedHeight: {
type: Number, type: Number,
default: -1, default: -1
}, },
useRefresh: { useRefresh: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
loading: { loading: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
fullLoading: { fullLoading: {
type: Boolean, type: Boolean,
default: false, default: false
}, }
}, },
data() { data() {
return { return {
wrapper: null, wrapper: null,
startMoveY: null, startMoveY: null,
distance: null, distance: null,
refresh: false, refresh: false
} }
}, },
computed: { computed: {
pullUpStyle() { pullUpStyle() {
return { return {
'transition-duration': this.refresh ? '300ms' : '0ms', 'transition-duration': this.refresh ? '300ms' : '0ms',
transform: `translate3d(0px, ${this.distance !== null ? this.distance : -40}px,0`, transform: `translate3d(0px, ${this.distance !== null ? this.distance : -40}px,0`
}
} }
},
}, },
created() {}, created() {},
mounted() { mounted() {
@ -108,10 +103,7 @@
this.$emit('fixed', this.fixedHeight < this.wrapper.scrollTop) this.$emit('fixed', this.fixedHeight < this.wrapper.scrollTop)
} }
if (this.$attrs.onPulldown) { if (this.$attrs.onPulldown) {
if ( if (this.wrapper.scrollHeight - this.wrapper.clientHeight < this.wrapper.scrollTop + 60) {
this.wrapper.scrollHeight - this.wrapper.clientHeight <
this.wrapper.scrollTop + 60
) {
this.$emit('pulldown') this.$emit('pulldown')
} }
} }
@ -119,22 +111,22 @@
scrollBottom() { scrollBottom() {
nextTick(() => { nextTick(() => {
this.wrapper.scrollTo({ this.wrapper.scrollTo({
top: this.wrapper.scrollHeight - this.wrapper.clientHeight, top: this.wrapper.scrollHeight - this.wrapper.clientHeight
}) })
}) })
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../assets/less/index'; @import '../assets/less/index';
.scroll-wrapper { .scroll-wrapper {
overflow: auto; overflow: auto;
.scroll-content { .scroll-content {
padding-bottom: 30rem; padding-bottom: 30rem;
} }
} }
</style> </style>

40
src/components/ScrollList.vue
View File

@ -1,44 +1,40 @@
<template> <template>
<Scroll <Scroll :loading="state.loading" :full-loading="!state.list.length" @pulldown="loadData">
:loading="state.loading"
:full-loading="!state.list.length"
@pulldown="loadData"
>
<slot :list="state.list"></slot> <slot :list="state.list"></slot>
<NoMore v-if="state.total !== 0 && state.total === state.list.length" /> <NoMore v-if="state.total !== 0 && state.total === state.list.length" />
</Scroll> </Scroll>
</template> </template>
<script setup> <script setup>
import { onMounted, reactive } from 'vue' import { onMounted, reactive } from 'vue'
import { _notice } from '@/utils' import { _notice } from '@/utils'
import Scroll from '@/components/Scroll.vue' import Scroll from '@/components/Scroll.vue'
import NoMore from '@/components/NoMore.vue' import NoMore from '@/components/NoMore.vue'
const props = defineProps({ const props = defineProps({
api: { api: {
type: Function, type: Function,
default() { default() {
return () => void 0 return () => void 0
}, }
}, }
}) })
const state = reactive({ const state = reactive({
list: [], list: [],
total: 0, total: 0,
pageNo: 0, pageNo: 0,
pageSize: 10, pageSize: 10,
loading: false, loading: false
}) })
function loadData() { function loadData() {
if (state.loading) return if (state.loading) return
state.pageNo++ state.pageNo++
getData() getData()
} }
async function getData(refresh = false) { async function getData(refresh = false) {
if (refresh) { if (refresh) {
state.pageNo = 0 state.pageNo = 0
} else { } else {
@ -48,7 +44,7 @@
state.loading = true state.loading = true
let res = await props.api({ let res = await props.api({
pageNo: state.pageNo, pageNo: state.pageNo,
pageSize: state.pageSize, pageSize: state.pageSize
}) })
state.loading = false state.loading = false
if (res.success) { if (res.success) {
@ -61,9 +57,9 @@
} else { } else {
_notice('查询失败') _notice('查询失败')
} }
} }
onMounted(getData) onMounted(getData)
</script> </script>
<style scoped lang="less"></style> <style scoped lang="less"></style>

32
src/components/Search.vue
View File

@ -30,43 +30,43 @@
</template> </template>
<script> <script>
//TODO　背景颜色不对 //TODO　背景颜色不对
export default { export default {
name: 'Search', name: 'Search',
props: { props: {
placeholder: { placeholder: {
type: String, type: String,
default: '搜索', default: '搜索'
}, },
modelValue: { modelValue: {
type: String, type: String,
default: '', default: ''
}, },
rightTextColor: { rightTextColor: {
type: String, type: String,
default: 'red', default: 'red'
}, },
isShowRightText: { isShowRightText: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
isShowSearchIcon: { isShowSearchIcon: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
rightText: { rightText: {
type: String, type: String,
default: '搜索', default: '搜索'
}, },
mode: { mode: {
type: String, type: String,
default: 'dark', default: 'dark'
}, }
}, },
methods: { methods: {
clear() { clear() {
this.value = '' this.value = ''
}, }
}, },
mounted() {}, mounted() {},
computed: { computed: {
@ -79,14 +79,14 @@
if (!val) { if (!val) {
this.$emit('clear') this.$emit('clear')
} }
},
},
},
} }
}
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.search-ctn { .search-ctn {
display: flex; display: flex;
align-items: center; align-items: center;
@ -153,5 +153,5 @@
} }
} }
} }
} }
</style> </style>

172
src/components/Share.vue
View File

@ -13,19 +13,10 @@
<div class="share"> <div class="share">
<div class="title"> <div class="title">
<span>分享给朋友</span> <span>分享给朋友</span>
<dy-back <dy-back mode="light" img="close" direction="right" @click.stop="closeShare"></dy-back>
mode="light"
img="close"
direction="right"
@click.stop="closeShare"
></dy-back>
</div> </div>
<div class="friends list"> <div class="friends list">
<div <div class="option" v-for="item in friends.all" @click.stop="toggleCall(item)">
class="option"
v-for="item in friends.all"
@click.stop="toggleCall(item)"
>
<img <img
:style="item.select ? 'opacity: .5;' : ''" :style="item.select ? 'opacity: .5;' : ''"
class="avatar" class="avatar"
@ -39,10 +30,7 @@
src="../assets/img/icon/components/check/check-red-share.png" src="../assets/img/icon/components/check/check-red-share.png"
/> />
</div> </div>
<div <div class="option" @click.stop="closeShare($nav('/message/share-to-friend'))">
class="option"
@click.stop="closeShare($nav('/message/share-to-friend'))"
>
<dy-back class="more" mode="light" direction="right"></dy-back> <dy-back class="more" mode="light" direction="right"></dy-back>
<span>更多朋友</span> <span>更多朋友</span>
</div> </div>
@ -50,11 +38,7 @@
<div class="shares list"> <div class="shares list">
<template v-if="mode === 'video'"> <template v-if="mode === 'video'">
<div class="option" @click.stop="closeShare($emit('ShareToFriend'))"> <div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
<img <img class="avatar" src="../assets/img/icon/components/video/torichang.png" alt="" />
class="avatar"
src="../assets/img/icon/components/video/torichang.png"
alt=""
/>
<span>转发</span> <span>转发</span>
</div> </div>
<div class="option" @click.stop="closeShare($emit('ShareToFriend'))"> <div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
@ -66,67 +50,36 @@
<span>复制链接</span> <span>复制链接</span>
</div> </div>
<div class="option" @click.stop="$no"> <div class="option" @click.stop="$no">
<img <img class="small" src="../assets/img/icon/components/video/comeonplay.png" alt="" />
class="small"
src="../assets/img/icon/components/video/comeonplay.png"
alt=""
/>
<span>合拍</span> <span>合拍</span>
</div> </div>
<div class="option" @click.stop="$no"> <div class="option" @click.stop="$no">
<img <img class="small" src="../assets/img/icon/components/video/dou.webp" alt="" />
class="small"
src="../assets/img/icon/components/video/dou.webp"
alt=""
/>
<span>帮上热门</span> <span>帮上热门</span>
</div> </div>
<div <div class="option" @click.stop="$nav('/home/report', { mode: this.mode })">
class="option" <img class="small" src="../assets/img/icon/components/video/warring.png" alt="" />
@click.stop="$nav('/home/report', { mode: this.mode })"
>
<img
class="small"
src="../assets/img/icon/components/video/warring.png"
alt=""
/>
<span>举报</span> <span>举报</span>
</div> </div>
<div class="option" @click.stop="closeShare($emit('ShareToFriend'))"> <div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
<Icon icon="ion:paper-plane" /> <Icon icon="ion:paper-plane" />
<span>私信朋友</span> <span>私信朋友</span>
</div> </div>
<div <div class="option" v-if="canDownload" @click.stop="closeShare($emit('download'))">
class="option"
v-if="canDownload"
@click.stop="closeShare($emit('download'))"
>
<Icon icon="mingcute:download-fill" /> <Icon icon="mingcute:download-fill" />
<span>保存本地</span> <span>保存本地</span>
</div> </div>
<div class="option" @click.stop="$no"> <div class="option" @click.stop="$no">
<!--TODO icon不对 --> <!--TODO icon不对 -->
<img <img class="small" src="../assets/img/icon/components/video/feedback.webp" alt="" />
class="small"
src="../assets/img/icon/components/video/feedback.webp"
alt=""
/>
<span>建群分享</span> <span>建群分享</span>
</div> </div>
<div class="option" @click.stop="$no"> <div class="option" @click.stop="$no">
<img <img class="small" src="../assets/img/icon/components/video/comeonlook.webp" alt="" />
class="small"
src="../assets/img/icon/components/video/comeonlook.webp"
alt=""
/>
<span>一起看视频</span> <span>一起看视频</span>
</div> </div>
<div class="option" @click.stop="closeShare($emit('dislike'))"> <div class="option" @click.stop="closeShare($emit('dislike'))">
<img <img class="small" src="../assets/img/icon/components/video/dislike.png" alt="" />
class="small"
src="../assets/img/icon/components/video/dislike.png"
alt=""
/>
<span>不感兴趣</span> <span>不感兴趣</span>
</div> </div>
<div class="option" @click.stop="closeShare($emit('showDouyinCode'))"> <div class="option" @click.stop="closeShare($emit('showDouyinCode'))">
@ -134,58 +87,31 @@
<span>生成图片</span> <span>生成图片</span>
</div> </div>
<div class="option" @click.stop="$no"> <div class="option" @click.stop="$no">
<img <img class="small" src="../assets/img/icon/components/video/bizhi.webp" alt="" />
class="small"
src="../assets/img/icon/components/video/bizhi.webp"
alt=""
/>
<span>动态壁纸</span> <span>动态壁纸</span>
</div> </div>
<div class="option" @click.stop="closeShare($emit('play-feedback'))"> <div class="option" @click.stop="closeShare($emit('play-feedback'))">
<img <img class="small" src="../assets/img/icon/components/video/feedback.webp" alt="" />
class="small"
src="../assets/img/icon/components/video/feedback.webp"
alt=""
/>
<span>播放反馈</span> <span>播放反馈</span>
</div> </div>
</template> </template>
<template v-if="mode === 'music'"> <template v-if="mode === 'music'">
<div class="option" @click.stop="closeShare($emit('ShareToFriend'))"> <div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
<img <img class="small" src="../assets/img/icon/components/video/tofriend.webp" alt="" />
class="small"
src="../assets/img/icon/components/video/tofriend.webp"
alt=""
/>
<span>私信朋友</span> <span>私信朋友</span>
</div> </div>
<div <div class="option" @click.stop="$nav('/home/report', { mode: this.mode })">
class="option" <img class="small" src="../assets/img/icon/components/video/warring.png" alt="" />
@click.stop="$nav('/home/report', { mode: this.mode })"
>
<img
class="small"
src="../assets/img/icon/components/video/warring.png"
alt=""
/>
<span>举报音乐</span> <span>举报音乐</span>
</div> </div>
</template> </template>
<template v-if="mode === 'my-music'"> <template v-if="mode === 'my-music'">
<div class="option" @click.stop="$no"> <div class="option" @click.stop="$no">
<img <img class="small" src="../assets/img/icon/components/video/torichang.png" alt="" />
class="small"
src="../assets/img/icon/components/video/torichang.png"
alt=""
/>
<span>转发到日常</span> <span>转发到日常</span>
</div> </div>
<div class="option" @click.stop="closeShare($emit('ShareToFriend'))"> <div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
<img <img class="small" src="../assets/img/icon/components/video/tofriend.webp" alt="" />
class="small"
src="../assets/img/icon/components/video/tofriend.webp"
alt=""
/>
<span>私信朋友</span> <span>私信朋友</span>
</div> </div>
</template> </template>
@ -197,11 +123,7 @@
<img class="poster" src="../assets/img/poster/1.jpg" alt="" /> <img class="poster" src="../assets/img/poster/1.jpg" alt="" />
</div> </div>
<div class="btns"> <div class="btns">
<dy-button <dy-button type="dark2" radius="7" v-if="selectFriends.length > 1" @click.stop="$no"
type="dark2"
radius="7"
v-if="selectFriends.length > 1"
@click.stop="$no"
>建群并发送 >建群并发送
</dy-button> </dy-button>
<dy-button type="primary" radius="7" @click.stop="$no" <dy-button type="primary" radius="7" @click.stop="$no"
@ -214,47 +136,47 @@
</template> </template>
<script> <script>
import { mapState } from 'pinia' import { mapState } from 'pinia'
import Check from './Check' import Check from './Check'
import FromBottomDialog from './dialog/FromBottomDialog' import FromBottomDialog from './dialog/FromBottomDialog'
import DouyinCode from './DouyinCode' import DouyinCode from './DouyinCode'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
import { $no, _copy } from '@/utils' import { $no, _copy } from '@/utils'
export default { export default {
name: 'Share', name: 'Share',
components: { components: {
FromBottomDialog, FromBottomDialog,
Check, Check,
DouyinCode, DouyinCode
}, },
props: { props: {
modelValue: false, modelValue: false,
item: {}, item: {},
videoId: { videoId: {
type: String, type: String,
default: null, default: null
}, },
pageId: { pageId: {
type: String, type: String,
default: 'home-index', default: 'home-index'
}, },
canDownload: { canDownload: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
mode: { mode: {
type: String, type: String,
default: 'video', default: 'video'
//music //music
//qrcode //qrcode
}, }
}, },
computed: { computed: {
...mapState(useBaseStore, ['friends']), ...mapState(useBaseStore, ['friends']),
selectFriends() { selectFriends() {
return this.friends.all.filter((v) => v.select) return this.friends.all.filter((v) => v.select)
}, }
}, },
data() { data() {
return {} return {}
@ -266,9 +188,7 @@
this.$showLoading() this.$showLoading()
await this.$sleep(500) await this.$sleep(500)
this.$hideLoading() this.$hideLoading()
_copy( _copy(this.item.share_info.share_link_desc + this.item.share_info.share_url)
this.item.share_info.share_link_desc + this.item.share_info.share_url,
)
//TODO 抖音样式改了 //TODO 抖音样式改了
this.$notice('复制成功') this.$notice('复制成功')
}, },
@ -282,15 +202,15 @@
return v return v
}) })
this.$emit('update:modelValue', false) this.$emit('update:modelValue', false)
},
},
} }
}
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '../assets/less/index'; @import '../assets/less/index';
.share { .share {
width: 100%; width: 100%;
background: black; background: black;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
@ -428,15 +348,15 @@
} }
} }
} }
} }
.share-enter-active, .share-enter-active,
.share-leave-active { .share-leave-active {
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.share-enter-from, .share-enter-from,
.share-leave-to { .share-leave-to {
transform: translateY(60vh); transform: translateY(60vh);
} }
</style> </style>

199
src/components/UserPanel.vue
View File

@ -2,19 +2,11 @@
<div id="UserPanel" @scroll="scroll" ref="page"> <div id="UserPanel" @scroll="scroll" ref="page">
<div ref="float" class="float" :class="state.floatFixed ? 'fixed' : ''"> <div ref="float" class="float" :class="state.floatFixed ? 'fixed' : ''">
<div class="left"> <div class="left">
<Icon <Icon @click="$emit('back')" class="icon" icon="eva:arrow-ios-back-fill" />
@click="$emit('back')"
class="icon"
icon="eva:arrow-ios-back-fill"
/>
<transition name="fade"> <transition name="fade">
<div class="float-user" v-if="state.floatFixed"> <div class="float-user" v-if="state.floatFixed">
<img <img
v-lazy=" v-lazy="_checkImgUrl(props.currentItem.author.avatar_168x168.url_list[0])"
_checkImgUrl(
props.currentItem.author.avatar_168x168.url_list[0],
)
"
class="avatar" class="avatar"
/> />
<img <img
@ -31,10 +23,7 @@
</div> </div>
<div class="right"> <div class="right">
<transition name="fade"> <transition name="fade">
<div <div class="request" v-if="!state.floatFixed && props.currentItem.author.is_follow">
class="request"
v-if="!state.floatFixed && props.currentItem.author.is_follow"
>
<img <img
@click="$nav('/me/request-update')" @click="$nav('/me/request-update')"
src="@/assets/img/icon/me/finger-right.png" src="@/assets/img/icon/me/finger-right.png"
@ -44,11 +33,7 @@
</div> </div>
</transition> </transition>
<Icon class="icon" icon="ion:search" @click.stop="$no()" /> <Icon class="icon" icon="ion:search" @click.stop="$no()" />
<Icon <Icon class="icon" icon="ri:more-line" @click.stop="$emit('showFollowSetting')" />
class="icon"
icon="ri:more-line"
@click.stop="$emit('showFollowSetting')"
/>
</div> </div>
</div> </div>
<div <div
@ -62,38 +47,27 @@
<header> <header>
<img <img
:style="{ :style="{
opacity: props.currentItem.author.cover_url[0].url_list.length opacity: props.currentItem.author.cover_url[0].url_list.length ? 1 : 0
? 1
: 0,
}" }"
ref="cover" ref="cover"
:src="_checkImgUrl(props.currentItem.author.cover_url[0].url_list[0])" :src="_checkImgUrl(props.currentItem.author.cover_url[0].url_list[0])"
@click=" @click="
state.previewImg = _checkImgUrl( state.previewImg = _checkImgUrl(props.currentItem.author.cover_url[0].url_list[0])
props.currentItem.author.cover_url[0].url_list[0],
)
" "
alt="" alt=""
class="cover" class="cover"
/> />
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img <img
v-lazy=" v-lazy="_checkImgUrl(props.currentItem.author.avatar_168x168.url_list[0])"
_checkImgUrl(props.currentItem.author.avatar_168x168.url_list[0])
"
class="avatar" class="avatar"
@click=" @click="
state.previewImg = _checkImgUrl( state.previewImg = _checkImgUrl(props.currentItem.author.avatar_300x300.url_list[0])
props.currentItem.author.avatar_300x300.url_list[0],
)
" "
/> />
<div class="description"> <div class="description">
<div class="name f22">{{ props.currentItem.author.nickname }}</div> <div class="name f22">{{ props.currentItem.author.nickname }}</div>
<div <div class="certification" v-if="props.currentItem.author.certification">
class="certification"
v-if="props.currentItem.author.certification"
>
<img src="@/assets/img/icon/me/certification.webp" /> <img src="@/assets/img/icon/me/certification.webp" />
{{ props.currentItem.author.certification }} {{ props.currentItem.author.certification }}
</div> </div>
@ -124,9 +98,7 @@
</div> </div>
<div class="text"> <div class="text">
<span class="num">{{ <span class="num">{{
Utils.formatNumber( Utils.formatNumber(props.currentItem.author.mplatform_followers_count)
props.currentItem.author.mplatform_followers_count,
)
}}</span> }}</span>
<span>粉丝</span> <span>粉丝</span>
</div> </div>
@ -154,17 +126,10 @@
</div> </div>
<div <div
class="item" class="item"
v-if=" v-if="props.currentItem.author.province || props.currentItem.author.city"
props.currentItem.author.province || props.currentItem.author.city
"
> >
{{ props.currentItem.author.province }} {{ props.currentItem.author.province }}
<template <template v-if="props.currentItem.author.province && props.currentItem.author.city">
v-if="
props.currentItem.author.province &&
props.currentItem.author.city
"
>
· ·
</template> </template>
{{ props.currentItem.author.city }} {{ props.currentItem.author.city }}
@ -176,10 +141,7 @@
</div> </div>
<div class="other"> <div class="other">
<div class="scroll-x" @touchmove="stop"> <div class="scroll-x" @touchmove="stop">
<div <div class="item" v-for="item in props.currentItem.author.card_entries">
class="item"
v-for="item in props.currentItem.author.card_entries"
>
<img :src="_checkImgUrl(item.icon_dark.url_list[0])" alt="" /> <img :src="_checkImgUrl(item.icon_dark.url_list[0])" alt="" />
<div class="right"> <div class="right">
<div class="top">{{ item.title }}</div> <div class="top">{{ item.title }}</div>
@ -193,16 +155,9 @@
<div class="follow-display"> <div class="follow-display">
<div <div
class="follow-wrapper" class="follow-wrapper"
:class=" :class="props.currentItem.author.follow_status ? 'follow-wrapper-followed' : ''"
props.currentItem.author.follow_status
? 'follow-wrapper-followed'
: ''
"
>
<div
class="no-follow"
@click="props.currentItem.author.follow_status = 1"
> >
<div class="no-follow" @click="props.currentItem.author.follow_status = 1">
<img src="@/assets/img/icon/add-white.png" alt="" /> <img src="@/assets/img/icon/add-white.png" alt="" />
<span>关注</span> <span>关注</span>
</div> </div>
@ -277,38 +232,38 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref, watch } from 'vue' import { reactive, ref, watch } from 'vue'
import Utils, { $no, _checkImgUrl, _getUserDouyinId } from '@/utils' import Utils, { $no, _checkImgUrl, _getUserDouyinId } from '@/utils'
import { useNav } from '@/utils/hooks/useNav' import { useNav } from '@/utils/hooks/useNav'
import Posters from '@/components/Posters' import Posters from '@/components/Posters'
import { DefaultUser } from '@/utils/const_var' import { DefaultUser } from '@/utils/const_var'
import Loading from '@/components/Loading.vue' import Loading from '@/components/Loading.vue'
import { FILE_URL } from '@/config' import { FILE_URL } from '@/config'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
import { userinfo, userVideoList } from '@/api/user' import { userinfo, userVideoList } from '@/api/user'
const $nav = useNav() const $nav = useNav()
const baseStore = useBaseStore() const baseStore = useBaseStore()
const emit = defineEmits(['update:currentItem', 'back']) const emit = defineEmits(['update:currentItem', 'back'])
const props = defineProps({ const props = defineProps({
currentItem: { currentItem: {
type: Object, type: Object,
default: { default: {
author: DefaultUser, author: DefaultUser,
aweme_list: [], aweme_list: []
}, }
}, },
active: { active: {
type: Boolean, type: Boolean,
default: false, default: false
}, }
}) })
const main = ref(null) const main = ref(null)
const page = ref(null) const page = ref(null)
const cover = ref(null) const cover = ref(null)
const total = ref(null) const total = ref(null)
const state = reactive({ const state = reactive({
isShowRecommend: false, //是否显示推荐 isShowRecommend: false, //是否显示推荐
previewImg: '', previewImg: '',
floatFixed: false, floatFixed: false,
@ -317,7 +272,7 @@
floatHeight: 52, floatHeight: 52,
loadings: { loadings: {
showRecommend: false, showRecommend: false
}, },
acceleration: 1.2, acceleration: 1.2,
start: { x: 0, y: 0, time: 0 }, start: { x: 0, y: 0, time: 0 },
@ -328,10 +283,10 @@
canMoveMaxHeight: document.body.clientHeight / 4, canMoveMaxHeight: document.body.clientHeight / 4,
//是否自动放大Cover //是否自动放大Cover
isAutoScaleCover: false, isAutoScaleCover: false,
uid: null, uid: null
}) })
watch( watch(
() => props.active, () => props.active,
async (newVal) => { async (newVal) => {
if (newVal && !props.currentItem.aweme_list.length) { if (newVal && !props.currentItem.aweme_list.length) {
@ -344,38 +299,32 @@
a.author = props.currentItem.author a.author = props.currentItem.author
return a return a
}) })
emit( emit('update:currentItem', Object.assign(props.currentItem, { aweme_list: r.data }))
'update:currentItem',
Object.assign(props.currentItem, { aweme_list: r.data }),
)
}, 300) }, 300)
} }
} }
}, }
) )
watch( watch(
() => props.currentItem.author.uid, () => props.currentItem.author.uid,
async (newVal) => { async (newVal) => {
if (props.currentItem.author.uid !== state.uid) { if (props.currentItem.author.uid !== state.uid) {
state.uid = props.currentItem.author.uid state.uid = props.currentItem.author.uid
emit( emit('update:currentItem', Object.assign(props.currentItem, { aweme_list: [] }))
'update:currentItem',
Object.assign(props.currentItem, { aweme_list: [] }),
)
} }
}, }
) )
function stop(e) { function stop(e) {
e.stopPropagation() e.stopPropagation()
} }
function followButton() {} function followButton() {}
function back() {} function back() {}
function scroll(e) { function scroll(e) {
// console.log('scroll', page.value.scrollTop) // console.log('scroll', page.value.scrollTop)
let scrollTop = page.value.scrollTop let scrollTop = page.value.scrollTop
let totalY = total.value.getBoundingClientRect().y let totalY = total.value.getBoundingClientRect().y
@ -390,9 +339,9 @@
state.isAutoScaleCover = false state.isAutoScaleCover = false
}, 200) }, 200)
} }
} }
function touchStart(e) { function touchStart(e) {
state.start.x = e.touches[0].pageX state.start.x = e.touches[0].pageX
state.start.y = e.touches[0].pageY state.start.y = e.touches[0].pageY
state.start.time = Date.now() state.start.time = Date.now()
@ -401,27 +350,23 @@
cover.value.style.transition = 'none' cover.value.style.transition = 'none'
} }
// console.log('touchStart', page.value.scrollTop) // console.log('touchStart', page.value.scrollTop)
} }
function touchMove(e) { function touchMove(e) {
state.move.x = e.touches[0].pageX - state.start.x state.move.x = e.touches[0].pageX - state.start.x
state.move.y = e.touches[0].pageY - state.start.y state.move.y = e.touches[0].pageY - state.start.y
let isNext = state.move.y < 0 let isNext = state.move.y < 0
// console.log('touchMove', page.value.scrollTop) // console.log('touchMove', page.value.scrollTop)
//todo 有空了加个，越滑越紧的效果 //todo 有空了加个，越滑越紧的效果
if ( if (state.isTop && !isNext && document.body.clientHeight / 4 > state.move.y) {
state.isTop &&
!isNext &&
document.body.clientHeight / 4 > state.move.y
) {
// if (state.isTop && !isNext) { // if (state.isTop && !isNext) {
let scrollHeight = state.move.y let scrollHeight = state.move.y
cover.value.style.height = `calc(${state.coverHeight}rem + ${scrollHeight}px)` cover.value.style.height = `calc(${state.coverHeight}rem + ${scrollHeight}px)`
} }
} }
function touchEnd(e) { function touchEnd(e) {
if (state.isTop) { if (state.isTop) {
state.isTop = false state.isTop = false
cover.value.style.transition = 'all .3s' cover.value.style.transition = 'all .3s'
@ -430,26 +375,26 @@
let endTime = Date.now() let endTime = Date.now()
state.isAutoScaleCover = endTime - state.start.time < 100 state.isAutoScaleCover = endTime - state.start.time < 100
// console.log('touchEnd') // console.log('touchEnd')
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.fade1-enter-active, .fade1-enter-active,
.fade1-leave-active { .fade1-leave-active {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.fade1-enter-from, .fade1-enter-from,
.fade1-leave-to { .fade1-leave-to {
transform: translateY(10px); transform: translateY(10px);
opacity: 0; opacity: 0;
} }
.FromBottomDialog { .FromBottomDialog {
left: inherit; left: inherit;
} }
#UserPanel { #UserPanel {
position: fixed; position: fixed;
background: var(--color-user); background: var(--color-user);
height: 100%; height: 100%;
@ -1100,5 +1045,5 @@
} }
} }
} }
} }
</style> </style>

22
src/components/WaterfallList.vue
View File

@ -1,21 +1,21 @@
<script setup> <script setup>
import { computed } from 'vue' import { computed } from 'vue'
const props = defineProps({ const props = defineProps({
list: { list: {
type: Array, type: Array,
default() { default() {
return [] return []
}, }
}, }
}) })
const leftList = computed(() => { const leftList = computed(() => {
return props.list.filter((v, index) => index % 2 === 0) return props.list.filter((v, index) => index % 2 === 0)
}) })
const rightList = computed(() => { const rightList = computed(() => {
return props.list.filter((v, index) => index % 2 !== 0) return props.list.filter((v, index) => index % 2 !== 0)
}) })
</script> </script>
<template> <template>
@ -30,7 +30,7 @@
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.waterfall { .waterfall {
display: flex; display: flex;
gap: 10rem; gap: 10rem;
@ -39,5 +39,5 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }
</style> </style>

30
src/components/dialog/ConfirmDialog.vue
View File

@ -19,50 +19,50 @@
</div> </div>
</template> </template>
<script> <script>
/*TODO 单独使用时，没有mark*/ /*TODO 单独使用时，没有mark*/
export default { export default {
name: 'ConfirmDialog', name: 'ConfirmDialog',
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
title: { title: {
type: String, type: String,
default() { default() {
return '' return ''
}, }
}, },
subtitle: { subtitle: {
type: String, type: String,
default() { default() {
return '' return ''
}, }
}, },
subtitleColor: { subtitleColor: {
type: String, type: String,
default() { default() {
return 'gray' return 'gray'
}, }
}, },
okText: { okText: {
type: String, type: String,
default() { default() {
return '确定' return '确定'
}, }
}, },
cancelText: { cancelText: {
type: String, type: String,
default() { default() {
return '取消' return '取消'
}, }
}, },
cancelTextColor: { cancelTextColor: {
type: String, type: String,
default() { default() {
return 'gray' return 'gray'
}, }
}, }
}, },
data() { data() {
return {} return {}
@ -76,15 +76,15 @@
cancel() { cancel() {
this.$emit('cancel') this.$emit('cancel')
this.$emit('update:visible', false) this.$emit('update:visible', false)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.ConfirmDialog { .ConfirmDialog {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0; top: 0;
@ -150,5 +150,5 @@
} }
} }
} }
} }
</style> </style>

12
src/components/dialog/FadeDialog.vue
View File

@ -4,21 +4,21 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'FadeDialog', name: 'FadeDialog',
data() { data() {
return {} return {}
}, },
computed: {}, computed: {},
created() {}, created() {},
methods: {}, methods: {}
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.FadeDialog { .FadeDialog {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -31,5 +31,5 @@
.content { .content {
padding-top: 60rem; padding-top: 60rem;
} }
} }
</style> </style>

57
src/components/dialog/FromBottomDialog.vue
View File

@ -28,47 +28,47 @@
</transition> </transition>
</template> </template>
<script> <script>
import Dom from '../../utils/dom' import Dom from '../../utils/dom'
import bus, { EVENT_KEY } from '@/utils/bus' import bus, { EVENT_KEY } from '@/utils/bus'
export default { export default {
name: 'FromBottomDialog', name: 'FromBottomDialog',
props: { props: {
modelValue: { modelValue: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
mode: { mode: {
type: String, type: String,
default: 'dark', default: 'dark'
// default: 'light' // default: 'light'
// default: 'white' // default: 'white'
}, },
maskMode: { maskMode: {
type: String, type: String,
default: 'dark', default: 'dark'
}, },
height: { height: {
type: String, type: String,
default: 'calc(var(--vh, 1vh) * 70)', default: 'calc(var(--vh, 1vh) * 70)'
}, },
showHengGang: { showHengGang: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
pageId: { pageId: {
type: String, type: String,
default: null, default: null,
required: true, required: true
}, },
borderRadius: { borderRadius: {
type: String, type: String,
default: '15rem 15rem 0 0', default: '15rem 15rem 0 0'
}, },
tag: { tag: {
type: String, type: String,
default: '', default: ''
}, }
}, },
watch: { watch: {
modelValue(newVal) { modelValue(newVal) {
@ -98,7 +98,7 @@
mask.remove() mask.remove()
}, 250) }, 250)
} }
}, }
}, },
data() { data() {
return { return {
@ -106,7 +106,7 @@
startLocationY: 0, startLocationY: 0,
moveYDistance: 0, moveYDistance: 0,
startTime: 0, startTime: 0,
pagePosition: null, pagePosition: null
} }
}, },
computed: {}, computed: {},
@ -155,21 +155,14 @@
if (this.moveYDistance > 0) { if (this.moveYDistance > 0) {
bus.emit(EVENT_KEY.DIALOG_MOVE, { bus.emit(EVENT_KEY.DIALOG_MOVE, {
tag: this.tag, tag: this.tag,
e: this.moveYDistance, e: this.moveYDistance
}) })
this.$setCss( this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${this.moveYDistance}px,0)`)
this.$refs.dialog,
'transform',
`translate3d(0,${this.moveYDistance}px,0)`,
)
} }
}, },
end(e) { end(e) {
//点击 //点击
if ( if (Date.now() - this.startTime < 150 && Math.abs(this.moveYDistance) < 30) {
Date.now() - this.startTime < 150 &&
Math.abs(this.moveYDistance) < 30
) {
return return
} }
//滑动 //滑动
@ -177,11 +170,7 @@
let clientHeight = this.$refs.dialog.clientHeight let clientHeight = this.$refs.dialog.clientHeight
this.$setCss(this.$refs.dialog, 'transition-duration', `250ms`) this.$setCss(this.$refs.dialog, 'transition-duration', `250ms`)
if (Math.abs(this.moveYDistance) > clientHeight / 2) { if (Math.abs(this.moveYDistance) > clientHeight / 2) {
this.$setCss( this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${clientHeight}px,0)`)
this.$refs.dialog,
'transform',
`translate3d(0,${clientHeight}px,0)`,
)
bus.emit(EVENT_KEY.DIALOG_END, { tag: this.tag, isClose: true }) bus.emit(EVENT_KEY.DIALOG_END, { tag: this.tag, isClose: true })
setTimeout(this.hide, 250) setTimeout(this.hide, 250)
} else { } else {
@ -193,15 +182,15 @@
}, 250) }, 250)
} }
this.moveYDistance = 0 this.moveYDistance = 0
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.FromBottomDialog { .FromBottomDialog {
z-index: 9; z-index: 9;
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -270,5 +259,5 @@
width: 30rem; width: 30rem;
} }
} }
} }
</style> </style>

24
src/components/dialog/NoticeDialog.vue
View File

@ -14,51 +14,51 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'NoticeDialog', name: 'NoticeDialog',
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
title: { title: {
type: String, type: String,
default() { default() {
return '' return ''
}, }
}, },
subtitle: { subtitle: {
type: String, type: String,
default() { default() {
return '' return ''
}, }
}, },
subtitleColor: { subtitleColor: {
type: String, type: String,
default() { default() {
return 'gray' return 'gray'
}, }
}, },
cancelText: { cancelText: {
type: String, type: String,
default() { default() {
return '取消' return '取消'
}, }
}, }
}, },
data() { data() {
return {} return {}
}, },
methods: { methods: {
stop() {}, stop() {}
},
} }
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.NoticeDialog { .NoticeDialog {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0; top: 0;
@ -110,5 +110,5 @@
} }
} }
} }
} }
</style> </style>

14
src/components/dialog/SelectDialog.vue
View File

@ -8,28 +8,28 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'SelectDialog', name: 'SelectDialog',
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
list: { list: {
type: Array, type: Array,
default() { default() {
return [] return []
}, }
}, }
}, },
data() { data() {
return {} return {}
},
} }
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.SelectDialog { .SelectDialog {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0; top: 0;
@ -58,5 +58,5 @@
} }
} }
} }
} }
</style> </style>

20
src/components/dialog/SimpleConfirmDialog.vue
View File

@ -10,43 +10,43 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'SimpleConfirmDialog', name: 'SimpleConfirmDialog',
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
title: { title: {
type: String, type: String,
default() { default() {
return '' return ''
}, }
}, },
okText: { okText: {
type: String, type: String,
default() { default() {
return '保存' return '保存'
}, }
}, },
cancelText: { cancelText: {
type: String, type: String,
default() { default() {
return '放弃' return '放弃'
}, }
}, }
}, },
data() { data() {
return {} return {}
}, },
methods: { methods: {
stop() {}, stop() {}
},
} }
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.SimpleConfirmDialog { .SimpleConfirmDialog {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0; top: 0;
@ -77,5 +77,5 @@
} }
} }
} }
} }
</style> </style>

14
src/components/mobile-select/mobile-select.css
View File

@ -148,18 +148,8 @@
color-stop(rgba(255, 255, 255, 0)), color-stop(rgba(255, 255, 255, 0)),
to(#ffffff) to(#ffffff)
); );
background: -webkit-linear-gradient( background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);
top, background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);
#ffffff,
rgba(255, 255, 255, 0),
#ffffff
);
background: linear-gradient(
to bottom,
#ffffff,
rgba(255, 255, 255, 0),
#ffffff
);
opacity: 0.9; opacity: 0.9;
pointer-events: none; pointer-events: none;
} }

124
src/components/mobile-select/mobile-select.js
View File

@ -39,23 +39,17 @@ MobileSelect.prototype = {
var _this = this var _this = this
if (config.wheels[0].data.length == 0) { if (config.wheels[0].data.length == 0) {
console.error( console.error(
'mobileSelect has been successfully installed, but the data is empty and cannot be initialized.', 'mobileSelect has been successfully installed, but the data is empty and cannot be initialized.'
) )
return false return false
} }
_this.keyMap = config.keyMap _this.keyMap = config.keyMap ? config.keyMap : { id: 'id', value: 'value', childs: 'childs' }
? config.keyMap
: { id: 'id', value: 'value', childs: 'childs' }
_this.checkDataType() _this.checkDataType()
_this.renderWheels( _this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText)
_this.wheelsData,
config.cancelBtnText,
config.ensureBtnText,
)
_this.trigger = document.querySelector(config.trigger) _this.trigger = document.querySelector(config.trigger)
if (!_this.trigger) { if (!_this.trigger) {
console.error( console.error(
'mobileSelect has been successfully installed, but no trigger found on your page.', 'mobileSelect has been successfully installed, but no trigger found on your page.'
) )
return false return false
} }
@ -75,9 +69,7 @@ MobileSelect.prototype = {
_this.initPosition = config.position || [] _this.initPosition = config.position || []
_this.titleText = config.title || '' _this.titleText = config.title || ''
_this.connector = config.connector || ' ' _this.connector = config.connector || ' '
_this.triggerDisplayData = !( _this.triggerDisplayData = !(typeof config.triggerDisplayData == 'undefined')
typeof config.triggerDisplayData == 'undefined'
)
? config.triggerDisplayData ? config.triggerDisplayData
: true : true
_this.trigger.style.cursor = 'pointer' _this.trigger.style.cursor = 'pointer'
@ -178,8 +170,7 @@ MobileSelect.prototype = {
} }
if (!isNaN(config.maskOpacity)) { if (!isNaN(config.maskOpacity)) {
_this.grayMask = _this.mobileSelect.querySelector('.grayLayer') _this.grayMask = _this.mobileSelect.querySelector('.grayLayer')
_this.grayMask.style.background = _this.grayMask.style.background = 'rgba(0, 0, 0, ' + config.maskOpacity + ')'
'rgba(0, 0, 0, ' + config.maskOpacity + ')'
} }
}, },
@ -194,16 +185,7 @@ MobileSelect.prototype = {
var bIsAndroid = sUserAgent.match(/android/i) == 'android' var bIsAndroid = sUserAgent.match(/android/i) == 'android'
var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce' var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce'
var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile' var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile'
if ( if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
bIsIpad ||
bIsIphoneOs ||
bIsMidp ||
bIsUc7 ||
bIsUc ||
bIsAndroid ||
bIsCE ||
bIsWM
) {
_this.isPC = false _this.isPC = false
} }
}, },
@ -297,21 +279,21 @@ MobileSelect.prototype = {
function () { function () {
_this.touch(event, this.firstChild, index) _this.touch(event, this.firstChild, index)
}, },
false, false
) )
theWheel.addEventListener( theWheel.addEventListener(
'touchend', 'touchend',
function () { function () {
_this.touch(event, this.firstChild, index) _this.touch(event, this.firstChild, index)
}, },
false, false
) )
theWheel.addEventListener( theWheel.addEventListener(
'touchmove', 'touchmove',
function () { function () {
_this.touch(event, this.firstChild, index) _this.touch(event, this.firstChild, index)
}, },
false, false
) )
if (_this.isPC) { if (_this.isPC) {
@ -321,21 +303,21 @@ MobileSelect.prototype = {
function () { function () {
_this.dragClick(event, this.firstChild, index) _this.dragClick(event, this.firstChild, index)
}, },
false, false
) )
theWheel.addEventListener( theWheel.addEventListener(
'mousemove', 'mousemove',
function () { function () {
_this.dragClick(event, this.firstChild, index) _this.dragClick(event, this.firstChild, index)
}, },
false, false
) )
theWheel.addEventListener( theWheel.addEventListener(
'mouseup', 'mouseup',
function () { function () {
_this.dragClick(event, this.firstChild, index) _this.dragClick(event, this.firstChild, index)
}, },
true, true
) )
} }
}, },
@ -352,10 +334,7 @@ MobileSelect.prototype = {
if (_this.jsonType) { if (_this.jsonType) {
var node = _this.wheelsData[0].data var node = _this.wheelsData[0].data
for (var i = 0; i < node.length; i++) { for (var i = 0; i < node.length; i++) {
if ( if (_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0) {
_this.keyMap.childs in node[i] &&
node[i][_this.keyMap.childs].length > 0
) {
_this.cascade = true _this.cascade = true
_this.cascadeJsonData = _this.wheelsData[0].data _this.cascadeJsonData = _this.wheelsData[0].data
break break
@ -394,16 +373,10 @@ MobileSelect.prototype = {
initCheckArrDeep: function (parent) { initCheckArrDeep: function (parent) {
var _this = this var _this = this
if (parent) { if (parent) {
if ( if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
_this.keyMap.childs in parent && _this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]))
parent[_this.keyMap.childs].length > 0
) {
_this.displayJson.push(
_this.generateArrData(parent[_this.keyMap.childs]),
)
_this.initDeepCount++ _this.initDeepCount++
var nextNode = var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]]
parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]]
if (nextNode) { if (nextNode) {
_this.initCheckArrDeep(nextNode) _this.initCheckArrDeep(nextNode)
} else { } else {
@ -417,13 +390,8 @@ MobileSelect.prototype = {
//检测子节点深度 修改 displayJson //检测子节点深度 修改 displayJson
var _this = this var _this = this
if (parent) { if (parent) {
if ( if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
_this.keyMap.childs in parent && _this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])) //生成子节点数组
parent[_this.keyMap.childs].length > 0
) {
_this.displayJson.push(
_this.generateArrData(parent[_this.keyMap.childs]),
) //生成子节点数组
_this.checkArrDeep(parent[_this.keyMap.childs][0]) //检测下一个子节点 _this.checkArrDeep(parent[_this.keyMap.childs][0]) //检测下一个子节点
} }
} }
@ -539,18 +507,12 @@ MobileSelect.prototype = {
var _this = this var _this = this
var tempHTML = '' var tempHTML = ''
if (_this.cascade) { if (_this.cascade) {
console.error( console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源')
'级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源',
)
return false return false
} else if (_this.jsonType) { } else if (_this.jsonType) {
for (var j = 0; j < data.length; j++) { for (var j = 0; j < data.length; j++) {
tempHTML += tempHTML +=
'<li data-id="' + '<li data-id="' + data[j][_this.keyMap.id] + '">' + data[j][_this.keyMap.value] + '</li>'
data[j][_this.keyMap.id] +
'">' +
data[j][_this.keyMap.value] +
'</li>'
} }
_this.wheelsData[sliderIndex] = { data: data } _this.wheelsData[sliderIndex] = { data: data }
} else { } else {
@ -593,9 +555,7 @@ MobileSelect.prototype = {
} }
} else if (_this.jsonType) { } else if (_this.jsonType) {
for (var i = 0; i < _this.curDistance.length; i++) { for (var i = 0; i < _this.curDistance.length; i++) {
temp.push( temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])])
_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])],
)
} }
} else { } else {
for (var i = 0; i < _this.curDistance.length; i++) { for (var i = 0; i < _this.curDistance.length; i++) {
@ -643,13 +603,9 @@ MobileSelect.prototype = {
updateCurDistance: function (theSlider, index) { updateCurDistance: function (theSlider, index) {
if (theSlider.style.transform) { if (theSlider.style.transform) {
this.curDistance[index] = parseInt( this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1])
theSlider.style.transform.split(',')[1],
)
} else { } else {
this.curDistance[index] = parseInt( this.curDistance[index] = parseInt(theSlider.style.webkitTransform.split(',')[1])
theSlider.style.webkitTransform.split(',')[1],
)
} }
}, },
@ -680,22 +636,18 @@ MobileSelect.prototype = {
case 'touchend': case 'touchend':
_this.moveEndY = parseInt(event.changedTouches[0].clientY) _this.moveEndY = parseInt(event.changedTouches[0].clientY)
_this.offsetSum = _this.moveEndY - _this.startY _this.offsetSum = _this.moveEndY - _this.startY
_this.oversizeBorder = _this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight
-(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight
if (_this.offsetSum == 0) { if (_this.offsetSum == 0) {
//offsetSum为0,相当于点击事件 //offsetSum为0,相当于点击事件
// 0 1 [2] 3 4 // 0 1 [2] 3 4
var clickOffetNum = parseInt( var clickOffetNum = parseInt(
(document.documentElement.clientHeight - _this.moveEndY) / 40, (document.documentElement.clientHeight - _this.moveEndY) / 40
) )
if (clickOffetNum != 2) { if (clickOffetNum != 2) {
var offset = clickOffetNum - 2 var offset = clickOffetNum - 2
var newDistance = _this.curDistance[index] + offset * _this.liHeight var newDistance = _this.curDistance[index] + offset * _this.liHeight
if ( if (newDistance <= 2 * _this.liHeight && newDistance >= _this.oversizeBorder) {
newDistance <= 2 * _this.liHeight &&
newDistance >= _this.oversizeBorder
) {
_this.curDistance[index] = newDistance _this.curDistance[index] = newDistance
_this.movePosition(theSlider, _this.curDistance[index]) _this.movePosition(theSlider, _this.curDistance[index])
_this.transitionEnd(_this.getIndexArr(), _this.getCurValue()) _this.transitionEnd(_this.getIndexArr(), _this.getCurValue())
@ -713,10 +665,7 @@ MobileSelect.prototype = {
setTimeout(function () { setTimeout(function () {
_this.movePosition(theSlider, _this.curDistance[index]) _this.movePosition(theSlider, _this.curDistance[index])
}, 100) }, 100)
} else if ( } else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
_this.curDistance[index] + _this.offsetSum <
_this.oversizeBorder
) {
_this.curDistance[index] = _this.oversizeBorder _this.curDistance[index] = _this.oversizeBorder
setTimeout(function () { setTimeout(function () {
_this.movePosition(theSlider, _this.curDistance[index]) _this.movePosition(theSlider, _this.curDistance[index])
@ -757,20 +706,16 @@ MobileSelect.prototype = {
case 'mouseup': case 'mouseup':
_this.moveEndY = event.clientY _this.moveEndY = event.clientY
_this.offsetSum = _this.moveEndY - _this.startY _this.offsetSum = _this.moveEndY - _this.startY
_this.oversizeBorder = _this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight
-(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight
if (_this.offsetSum == 0) { if (_this.offsetSum == 0) {
var clickOffetNum = parseInt( var clickOffetNum = parseInt(
(document.documentElement.clientHeight - _this.moveEndY) / 40, (document.documentElement.clientHeight - _this.moveEndY) / 40
) )
if (clickOffetNum != 2) { if (clickOffetNum != 2) {
var offset = clickOffetNum - 2 var offset = clickOffetNum - 2
var newDistance = _this.curDistance[index] + offset * _this.liHeight var newDistance = _this.curDistance[index] + offset * _this.liHeight
if ( if (newDistance <= 2 * _this.liHeight && newDistance >= _this.oversizeBorder) {
newDistance <= 2 * _this.liHeight &&
newDistance >= _this.oversizeBorder
) {
_this.curDistance[index] = newDistance _this.curDistance[index] = newDistance
_this.movePosition(theSlider, _this.curDistance[index]) _this.movePosition(theSlider, _this.curDistance[index])
_this.transitionEnd(_this.getIndexArr(), _this.getCurValue()) _this.transitionEnd(_this.getIndexArr(), _this.getCurValue())
@ -788,10 +733,7 @@ MobileSelect.prototype = {
setTimeout(function () { setTimeout(function () {
_this.movePosition(theSlider, _this.curDistance[index]) _this.movePosition(theSlider, _this.curDistance[index])
}, 100) }, 100)
} else if ( } else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
_this.curDistance[index] + _this.offsetSum <
_this.oversizeBorder
) {
_this.curDistance[index] = _this.oversizeBorder _this.curDistance[index] = _this.oversizeBorder
setTimeout(function () { setTimeout(function () {
_this.movePosition(theSlider, _this.curDistance[index]) _this.movePosition(theSlider, _this.curDistance[index])
@ -818,7 +760,7 @@ MobileSelect.prototype = {
} }
break break
} }
}, }
} }
export default MobileSelect export default MobileSelect

120
src/components/slide/BVideo.vue
View File

@ -23,30 +23,18 @@
<div class="float"> <div class="float">
<template v-if="isLive"> <template v-if="isLive">
<div class="living">点击进入直播间</div> <div class="living">点击进入直播间</div>
<ItemDesc <ItemDesc :is-live="true" v-model:item="localItem" :position="position" />
:is-live="true"
v-model:item="localItem"
:position="position"
/>
</template> </template>
<template v-else> <template v-else>
<div :style="{ opacity: isMove ? 0 : 1 }" class="normal"> <div :style="{ opacity: isMove ? 0 : 1 }" class="normal">
<template v-if="!commentVisible"> <template v-if="!commentVisible">
<ItemToolbar <ItemToolbar v-model:item="localItem" :position="position" v-bind="$attrs" />
v-model:item="localItem"
:position="position"
v-bind="$attrs"
/>
<ItemDesc v-model:item="localItem" :position="position" /> <ItemDesc v-model:item="localItem" :position="position" />
</template> </template>
<div v-if="isMy" class="comment-status"> <div v-if="isMy" class="comment-status">
<div class="comment"> <div class="comment">
<div class="type-comment"> <div class="type-comment">
<img <img src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar" />
src="../../assets/img/icon/head-image.jpeg"
alt=""
class="avatar"
/>
<div class="right"> <div class="right">
<p> <p>
<span class="name">zzzzz</span> <span class="name">zzzzz</span>
@ -57,16 +45,8 @@
</div> </div>
<transition-group name="comment-status" tag="div" class="loveds"> <transition-group name="comment-status" tag="div" class="loveds">
<div class="type-loved" :key="i" v-for="i in test"> <div class="type-loved" :key="i" v-for="i in test">
<img <img src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar" />
src="../../assets/img/icon/head-image.jpeg" <img src="../../assets/img/icon/love.svg" alt="" class="loved" />
alt=""
class="avatar"
/>
<img
src="../../assets/img/icon/love.svg"
alt=""
class="loved"
/>
</div> </div>
</transition-group> </transition-group>
</div> </div>
@ -97,27 +77,27 @@
</template> </template>
<script> <script>
import Utils, { _checkImgUrl } from '../../utils' import Utils, { _checkImgUrl } from '../../utils'
import Loading from '../Loading' import Loading from '../Loading'
import ItemToolbar from './ItemToolbar' import ItemToolbar from './ItemToolbar'
import ItemDesc from './ItemDesc' import ItemDesc from './ItemDesc'
import bus, { EVENT_KEY } from '../../utils/bus' import bus, { EVENT_KEY } from '../../utils/bus'
import { SlideItemPlayStatus } from '../../utils/const_var' import { SlideItemPlayStatus } from '../../utils/const_var'
import { computed } from 'vue' import { computed } from 'vue'
import { Icon } from '@iconify/vue' import { Icon } from '@iconify/vue'
export default { export default {
name: 'BVideo', name: 'BVideo',
components: { components: {
Loading, Loading,
ItemToolbar, ItemToolbar,
ItemDesc, ItemDesc,
Icon, Icon
}, },
provide() { provide() {
return { return {
// isPlaying: computed(() => this.status) // isPlaying: computed(() => this.status)
isPlaying: computed(() => this.isPlaying), isPlaying: computed(() => this.isPlaying)
} }
}, },
props: { props: {
@ -125,33 +105,33 @@
type: Object, type: Object,
default: () => { default: () => {
return {} return {}
}, }
}, },
position: { position: {
type: Object, type: Object,
default: () => { default: () => {
return {} return {}
}, }
}, },
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟 //用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
isPlay: { isPlay: {
type: Boolean, type: Boolean,
default: () => { default: () => {
return true return true
}, }
}, },
isMy: { isMy: {
type: Boolean, type: Boolean,
default: () => { default: () => {
return false return false
}, }
}, },
isLive: { isLive: {
type: Boolean, type: Boolean,
default: () => { default: () => {
return false return false
}, }
}, }
}, },
computed: { computed: {
durationStyle() { durationStyle() {
@ -169,15 +149,13 @@
}, },
isPlaying() { isPlaying() {
return this.status === SlideItemPlayStatus.Play return this.status === SlideItemPlayStatus.Play
}, }
}, },
data() { data() {
return { return {
loading: false, loading: false,
paused: false, paused: false,
status: this.isPlay status: this.isPlay ? SlideItemPlayStatus.Play : SlideItemPlayStatus.Pause,
? SlideItemPlayStatus.Play
: SlideItemPlayStatus.Pause,
duration: 0, duration: 0,
step: 0, step: 0,
currentTime: -1, currentTime: -1,
@ -193,7 +171,7 @@
progressBarRect: {}, progressBarRect: {},
videoScreenHeight: 0, videoScreenHeight: 0,
commentVisible: false, commentVisible: false,
LUtils: Utils, LUtils: Utils
} }
}, },
mounted() { mounted() {
@ -208,8 +186,7 @@
this.playX = (this.currentTime - 1) * this.step this.playX = (this.currentTime - 1) * this.step
} }
video.addEventListener('loadedmetadata', (e) => { video.addEventListener('loadedmetadata', (e) => {
this.videoScreenHeight = this.videoScreenHeight = video.videoHeight / (video.videoWidth / this.width)
video.videoHeight / (video.videoWidth / this.width)
this.duration = video.duration this.duration = video.duration
this.progressBarRect = this.$refs.progress.getBoundingClientRect() this.progressBarRect = this.$refs.progress.getBoundingClientRect()
this.step = this.progressBarRect.width / Math.floor(this.duration) this.step = this.progressBarRect.width / Math.floor(this.duration)
@ -229,7 +206,7 @@
} }
// console.log(e, t) // console.log(e, t)
}, },
false, false
) )
} }
@ -288,11 +265,7 @@
onDialogMove({ tag, e }) { onDialogMove({ tag, e }) {
if (this.commentVisible && tag === 'comment') { if (this.commentVisible && tag === 'comment') {
Utils.$setCss(this.$refs.video, 'transition-duration', `0ms`) Utils.$setCss(this.$refs.video, 'transition-duration', `0ms`)
Utils.$setCss( Utils.$setCss(this.$refs.video, 'height', `calc(var(--vh, 1vh) * 30 + ${e}px)`)
this.$refs.video,
'height',
`calc(var(--vh, 1vh) * 30 + ${e}px)`,
)
} }
}, },
onDialogEnd({ tag, isClose }) { onDialogEnd({ tag, isClose }) {
@ -303,11 +276,7 @@
this.commentVisible = false this.commentVisible = false
Utils.$setCss(this.$refs.video, 'height', '100%') Utils.$setCss(this.$refs.video, 'height', '100%')
} else { } else {
Utils.$setCss( Utils.$setCss(this.$refs.video, 'height', 'calc(var(--vh, 1vh) * 30)')
this.$refs.video,
'height',
'calc(var(--vh, 1vh) * 30)',
)
} }
} }
}, },
@ -326,15 +295,12 @@
} }
}, },
click({ uniqueId, index, type }) { click({ uniqueId, index, type }) {
if ( if (this.position.uniqueId === uniqueId && this.position.index === index) {
this.position.uniqueId === uniqueId &&
this.position.index === index
) {
if (this.isLive) { if (this.isLive) {
if (type === EVENT_KEY.ITEM_TOGGLE) { if (type === EVENT_KEY.ITEM_TOGGLE) {
bus.emit(EVENT_KEY.NAV, { bus.emit(EVENT_KEY.NAV, {
path: '/home/live', path: '/home/live',
query: { id: this.item.id }, query: { id: this.item.id }
}) })
} }
} else { } else {
@ -393,23 +359,23 @@
setTimeout(() => (this.isMove = false), 1000) setTimeout(() => (this.isMove = false), 1000)
this.$refs.video.currentTime = this.currentTime this.$refs.video.currentTime = this.currentTime
this.play() this.play()
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: transform 0.5s linear; transition: transform 0.5s linear;
} }
.fade-enter-from, .fade-enter-from,
.fade-leave-to { .fade-leave-to {
transform: scale(0); transform: scale(0);
} }
.video-wrapper { .video-wrapper {
position: relative; position: relative;
font-size: 14rem; font-size: 14rem;
width: 100%; width: 100%;
@ -751,9 +717,9 @@
} }
} }
} }
} }
.living { .living {
position: absolute; position: absolute;
left: 50%; left: 50%;
font-size: 18rem; font-size: 18rem;
@ -764,5 +730,5 @@
color: white; color: white;
top: 70%; top: 70%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
</style> </style>

72
src/components/slide/Indicator.vue
View File

@ -1,8 +1,8 @@
<script lang="jsx"> <script lang="jsx">
import bus from '../../utils/bus' import bus from '../../utils/bus'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
export default { export default {
name: 'Indicator', name: 'Indicator',
setup() { setup() {
const baseStore = useBaseStore() const baseStore = useBaseStore()
@ -11,31 +11,31 @@
props: { props: {
activeIndex: { activeIndex: {
type: Number, type: Number,
default: () => 0, default: () => 0
}, },
tabStyleWidth: { tabStyleWidth: {
type: String, type: String,
default: () => '', default: () => ''
}, },
tabTexts: { tabTexts: {
type: Array, type: Array,
default: () => [], default: () => []
}, },
tabRender: { tabRender: {
type: Function, type: Function,
default: null, default: null
}, },
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件 //用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
name: { name: {
type: String, type: String,
default: () => '', default: () => ''
}, }
}, },
data() { data() {
return { return {
currentSlideItemIndex: this.activeIndex, currentSlideItemIndex: this.activeIndex,
tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left, tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left,
indicatorSpace: 0, //indicator之间的间距 indicatorSpace: 0 //indicator之间的间距
} }
}, },
computed: {}, computed: {},
@ -51,22 +51,17 @@
</div> </div>
* */ * */
return ( return (
<div className='indicator-ctn'> <div className="indicator-ctn">
{this.tabRender ? ( {this.tabRender ? (
this.tabRender() this.tabRender()
) : ( ) : (
<div className='tabs' ref='tabs'> <div className="tabs" ref="tabs">
{this.tabTexts.map((item, index) => { {this.tabTexts.map((item, index) => {
return ( return (
<div <div
className={ className={this.currentSlideItemIndex === index ? 'active tab' : 'tab'}
this.currentSlideItemIndex === index
? 'active tab'
: 'tab'
}
style={{ style={{
width: width: this.tabStyleWidth || 100 / this.tabTexts.length + '%'
this.tabStyleWidth || 100 / this.tabTexts.length + '%',
}} }}
onClick={(e) => this.changeIndex(index)} onClick={(e) => this.changeIndex(index)}
> >
@ -77,10 +72,10 @@
</div> </div>
)} )}
<div <div
className='indicator' className="indicator"
ref='indicator' ref="indicator"
style={{ style={{
width: this.tabStyleWidth || 100 / this.tabTexts.length + '%', width: this.tabStyleWidth || 100 / this.tabTexts.length + '%'
}} }}
/> />
</div> </div>
@ -100,9 +95,7 @@
this.$setCss( this.$setCss(
this.indicatorRef, this.indicatorRef,
'left', 'left',
this.tabIndicatorRelationActiveIndexLefts[ this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
this.currentSlideItemIndex
] + 'px',
) )
}, },
initTabs() { initTabs() {
@ -114,30 +107,25 @@
this.tabIndicatorRelationActiveIndexLefts.push( this.tabIndicatorRelationActiveIndexLefts.push(
item.getBoundingClientRect().x - item.getBoundingClientRect().x -
tabs.children[0].getBoundingClientRect().x + tabs.children[0].getBoundingClientRect().x +
(this.indicatorType === 'home' ? this.tabWidth * 0.15 : 0), (this.indicatorType === 'home' ? this.tabWidth * 0.15 : 0)
) )
} }
this.indicatorSpace = this.indicatorSpace =
this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
this.tabIndicatorRelationActiveIndexLefts[0]
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`) this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
this.$setCss( this.$setCss(
this.indicatorRef, this.indicatorRef,
'left', 'left',
this.tabIndicatorRelationActiveIndexLefts[ this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
this.currentSlideItemIndex
] + 'px',
) )
}, },
move(e) { move(e) {
this.$setCss( this.$setCss(
this.indicatorRef, this.indicatorRef,
'left', 'left',
this.tabIndicatorRelationActiveIndexLefts[ this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
this.currentSlideItemIndex
] -
e.x.distance / (this.baseStore.bodyWidth / this.indicatorSpace) + e.x.distance / (this.baseStore.bodyWidth / this.indicatorSpace) +
'px', 'px'
) )
}, },
end(index) { end(index) {
@ -147,22 +135,20 @@
this.$setCss( this.$setCss(
this.indicatorRef, this.indicatorRef,
'left', 'left',
this.tabIndicatorRelationActiveIndexLefts[ this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
this.currentSlideItemIndex
] + 'px',
) )
setTimeout(() => { setTimeout(() => {
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`) this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
}, 300) }, 300)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.indicator-ctn { .indicator-ctn {
font-size: 14rem; font-size: 14rem;
width: 100%; width: 100%;
height: var(--indicator-height); height: var(--indicator-height);
@ -207,5 +193,5 @@
position: relative; position: relative;
transition: all 0.3s; transition: all 0.3s;
} }
} }
</style> </style>

68
src/components/slide/IndicatorLight.vue
View File

@ -1,37 +1,37 @@
<script lang="jsx"> <script lang="jsx">
import bus from '../../utils/bus' import bus from '../../utils/bus'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
export default { export default {
name: 'IndicatorLight', name: 'IndicatorLight',
props: { props: {
activeIndex: { activeIndex: {
type: Number, type: Number,
default: () => 0, default: () => 0
}, },
tabStyleWidth: { tabStyleWidth: {
type: String, type: String,
default: () => '', default: () => ''
}, },
tabTexts: { tabTexts: {
type: Array, type: Array,
default: () => [], default: () => []
}, },
tabRender: { tabRender: {
type: Function, type: Function,
default: null, default: null
}, },
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件 //用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
name: { name: {
type: String, type: String,
default: () => '', default: () => ''
}, }
}, },
data() { data() {
return { return {
currentSlideItemIndex: this.activeIndex, currentSlideItemIndex: this.activeIndex,
tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left, tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left,
indicatorSpace: 0, //indicator之间的间距 indicatorSpace: 0 //indicator之间的间距
} }
}, },
setup() { setup() {
@ -51,22 +51,17 @@
</div> </div>
* */ * */
return ( return (
<div className='indicator-ctn'> <div className="indicator-ctn">
{this.tabRender ? ( {this.tabRender ? (
this.tabRender() this.tabRender()
) : ( ) : (
<div className='tabs' ref='tabs'> <div className="tabs" ref="tabs">
{this.tabTexts.map((item, index) => { {this.tabTexts.map((item, index) => {
return ( return (
<div <div
className={ className={this.currentSlideItemIndex === index ? 'active tab' : 'tab'}
this.currentSlideItemIndex === index
? 'active tab'
: 'tab'
}
style={{ style={{
width: width: this.tabStyleWidth || 100 / this.tabTexts.length + '%'
this.tabStyleWidth || 100 / this.tabTexts.length + '%',
}} }}
onClick={(e) => this.changeIndex(index)} onClick={(e) => this.changeIndex(index)}
> >
@ -76,7 +71,7 @@
})} })}
</div> </div>
)} )}
<div className='indicator' ref='indicator' /> <div className="indicator" ref="indicator" />
</div> </div>
) )
}, },
@ -94,9 +89,7 @@
this.$setCss( this.$setCss(
this.indicatorRef, this.indicatorRef,
'left', 'left',
this.tabIndicatorRelationActiveIndexLefts[ this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
this.currentSlideItemIndex
] + 'px',
) )
}, },
initTabs() { initTabs() {
@ -109,31 +102,26 @@
this.tabIndicatorRelationActiveIndexLefts.push( this.tabIndicatorRelationActiveIndexLefts.push(
item.getBoundingClientRect().x - item.getBoundingClientRect().x -
tabs.children[0].getBoundingClientRect().x + tabs.children[0].getBoundingClientRect().x +
(this.tabWidth * 0.5 - indicatorWidth / 2), (this.tabWidth * 0.5 - indicatorWidth / 2)
) )
} }
this.indicatorSpace = this.indicatorSpace =
this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
this.tabIndicatorRelationActiveIndexLefts[0]
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`) this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
this.$setCss( this.$setCss(
this.indicatorRef, this.indicatorRef,
'left', 'left',
this.tabIndicatorRelationActiveIndexLefts[ this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
this.currentSlideItemIndex
] + 'px',
) )
}, },
move(e) { move(e) {
this.$setCss( this.$setCss(
this.indicatorRef, this.indicatorRef,
'left', 'left',
this.tabIndicatorRelationActiveIndexLefts[ this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
this.currentSlideItemIndex
] -
e.x.distance / (this.baseStore.bodyWidth / this.indicatorSpace) + e.x.distance / (this.baseStore.bodyWidth / this.indicatorSpace) +
'px', 'px'
) )
}, },
end(index) { end(index) {
@ -143,22 +131,20 @@
this.$setCss( this.$setCss(
this.indicatorRef, this.indicatorRef,
'left', 'left',
this.tabIndicatorRelationActiveIndexLefts[ this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
this.currentSlideItemIndex
] + 'px',
) )
setTimeout(() => { setTimeout(() => {
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`) this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
}, 300) }, 300)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.indicator-ctn { .indicator-ctn {
font-size: 14rem; font-size: 14rem;
width: 100%; width: 100%;
height: var(--indicator-height); height: var(--indicator-height);
@ -202,5 +188,5 @@
position: relative; position: relative;
transition: all 0.3s; transition: all 0.3s;
} }
} }
</style> </style>

40
src/components/slide/ItemDesc.vue
View File

@ -1,38 +1,38 @@
<script setup> <script setup>
import { reactive } from 'vue' import { reactive } from 'vue'
import bus from '../../utils/bus' import bus from '../../utils/bus'
const props = defineProps({ const props = defineProps({
item: { item: {
type: Object, type: Object,
default: () => { default: () => {
return {} return {}
}, }
}, },
position: { position: {
type: Object, type: Object,
default: () => { default: () => {
return {} return {}
}, }
}, },
isMy: { isMy: {
type: Boolean, type: Boolean,
default: () => { default: () => {
return false return false
}, }
}, },
isLive: { isLive: {
type: Boolean, type: Boolean,
default: () => { default: () => {
return false return false
}, }
}, }
}) })
const state = reactive({ const state = reactive({
isAttention: false, isAttention: false,
test: [1, 2], test: [1, 2]
}) })
</script> </script>
<template> <template>
<div class="item-desc ml1r mb1r"> <div class="item-desc ml1r mb1r">
@ -62,11 +62,7 @@
<div v-else class="comment-status"> <div v-else class="comment-status">
<div class="comment"> <div class="comment">
<div class="type-comment"> <div class="type-comment">
<img <img src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar" />
src="../../assets/img/icon/head-image.jpeg"
alt=""
class="avatar"
/>
<div class="right"> <div class="right">
<p> <p>
<span class="name">zzzzz</span> <span class="name">zzzzz</span>
@ -77,11 +73,7 @@
</div> </div>
<transition-group name="comment-status" tag="div" class="loveds"> <transition-group name="comment-status" tag="div" class="loveds">
<div class="type-loved" :key="i" v-for="i in state.test"> <div class="type-loved" :key="i" v-for="i in state.test">
<img <img src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar" />
src="../../assets/img/icon/head-image.jpeg"
alt=""
class="avatar"
/>
<img src="../../assets/img/icon/love.svg" alt="" class="loved" /> <img src="../../assets/img/icon/love.svg" alt="" class="loved" />
</div> </div>
</transition-group> </transition-group>
@ -91,7 +83,7 @@
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.item-desc { .item-desc {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -223,5 +215,5 @@
} }
} }
} }
} }
</style> </style>

103
src/components/slide/ItemToolbar.vue
View File

@ -1,54 +1,48 @@
<script setup> <script setup>
import BaseMusic from '../BaseMusic' import BaseMusic from '../BaseMusic'
import Utils from '../../utils' import Utils from '../../utils'
import { reactive } from 'vue' import { reactive } from 'vue'
import bus, { EVENT_KEY } from '@/utils/bus' import bus, { EVENT_KEY } from '@/utils/bus'
import { Icon } from '@iconify/vue' import { Icon } from '@iconify/vue'
const props = defineProps({ const props = defineProps({
item: { item: {
type: Object, type: Object,
default: () => { default: () => {
return {} return {}
}, }
}, },
position: { position: {
type: Object, type: Object,
default: () => { default: () => {
return {} return {}
}, }
}, },
isMy: { isMy: {
type: Boolean, type: Boolean,
default: () => { default: () => {
return false return false
},
},
})
const emit = defineEmits([
'update:item',
'goUserInfo',
'showComments',
'showShare',
'goMusic',
])
const state = reactive({})
function loved() {
Utils.updateItem(props, 'isLoved', !props.item.isLoved, emit)
} }
}
})
const emit = defineEmits(['update:item', 'goUserInfo', 'showComments', 'showShare', 'goMusic'])
const state = reactive({})
function attention(e) { function loved() {
Utils.updateItem(props, 'isLoved', !props.item.isLoved, emit)
}
function attention(e) {
e.currentTarget.classList.add('attention') e.currentTarget.classList.add('attention')
setTimeout(() => { setTimeout(() => {
Utils.updateItem(props, 'isAttention', true, emit) Utils.updateItem(props, 'isAttention', true, emit)
}, 1000) }, 1000)
} }
function showComments() { function showComments() {
// emit('showComments') // emit('showComments')
bus.emit(EVENT_KEY.OPEN_COMMENTS, props.item.id) bus.emit(EVENT_KEY.OPEN_COMMENTS, props.item.id)
} }
</script> </script>
<template> <template>
@ -61,11 +55,7 @@
@click.stop="bus.emit(EVENT_KEY.GO_USERINFO)" @click.stop="bus.emit(EVENT_KEY.GO_USERINFO)"
/> />
<transition name="fade"> <transition name="fade">
<div <div v-if="!props.item.isAttention" @click.stop="attention" class="options">
v-if="!props.item.isAttention"
@click.stop="attention"
class="options"
>
<img class="no" src="../../assets/img/icon/add-light.png" alt="" /> <img class="no" src="../../assets/img/icon/add-light.png" alt="" />
<img class="yes" src="../../assets/img/icon/ok-red.png" alt="" /> <img class="yes" src="../../assets/img/icon/ok-red.png" alt="" />
</div> </div>
@ -73,61 +63,30 @@
</div> </div>
<div class="love mb2r" @click.stop="loved($event)"> <div class="love mb2r" @click.stop="loved($event)">
<div> <div>
<img <img src="../../assets/img/icon/love.svg" class="love-image" v-if="!props.item.isLoved" />
src="../../assets/img/icon/love.svg" <img src="../../assets/img/icon/loved.svg" class="love-image" v-if="props.item.isLoved" />
class="love-image"
v-if="!props.item.isLoved"
/>
<img
src="../../assets/img/icon/loved.svg"
class="love-image"
v-if="props.item.isLoved"
/>
</div> </div>
<span>{{ Utils.formatNumber(props.item.statistics.digg_count) }}</span> <span>{{ Utils.formatNumber(props.item.statistics.digg_count) }}</span>
</div> </div>
<div class="message mb2r" @click.stop="showComments"> <div class="message mb2r" @click.stop="showComments">
<Icon <Icon icon="mage:message-dots-round-fill" class="icon" style="color: white" />
icon="mage:message-dots-round-fill"
class="icon"
style="color: white"
/>
<span>{{ Utils.formatNumber(props.item.statistics.comment_count) }}</span> <span>{{ Utils.formatNumber(props.item.statistics.comment_count) }}</span>
</div> </div>
<!--TODO --> <!--TODO -->
<div <div
class="message mb2r" class="message mb2r"
@click.stop=" @click.stop="Utils.updateItem(props, 'isCollect', !props.item.isCollect, emit)"
Utils.updateItem(props, 'isCollect', !props.item.isCollect, emit)
"
> >
<Icon <Icon v-if="props.item.isCollect" icon="ic:round-star" class="icon" style="color: yellow" />
v-if="props.item.isCollect"
icon="ic:round-star"
class="icon"
style="color: yellow"
/>
<Icon v-else icon="ic:round-star" class="icon" style="color: white" /> <Icon v-else icon="ic:round-star" class="icon" style="color: white" />
<span>{{ Utils.formatNumber(props.item.statistics.comment_count) }}</span> <span>{{ Utils.formatNumber(props.item.statistics.comment_count) }}</span>
</div> </div>
<div <div v-if="!props.isMy" class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
v-if="!props.isMy" <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image" />
class="share mb2r"
@click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)"
>
<img
src="../../assets/img/icon/share-white-full.png"
alt=""
class="share-image"
/>
<span>{{ Utils.formatNumber(props.item.statistics.share_count) }}</span> <span>{{ Utils.formatNumber(props.item.statistics.share_count) }}</span>
</div> </div>
<div v-else class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)"> <div v-else class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
<img <img src="../../assets/img/icon/menu-white.png" alt="" class="share-image" />
src="../../assets/img/icon/menu-white.png"
alt=""
class="share-image"
/>
</div> </div>
<!-- <BaseMusic--> <!-- <BaseMusic-->
<!-- :cover="props.item.music.cover"--> <!-- :cover="props.item.music.cover"-->
@ -138,7 +97,7 @@
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.toolbar { .toolbar {
//width: 40px; //width: 40px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -228,5 +187,5 @@
.loved { .loved {
background: red; background: red;
} }
} }
</style> </style>

312
src/components/slide/SlideAlbum.vue
View File

@ -9,10 +9,7 @@
@touchend="touchEnd" @touchend="touchEnd"
> >
<div class="img-slide-item" v-for="(img, index) in item.imgs"> <div class="img-slide-item" v-for="(img, index) in item.imgs">
<img <img :ref="(e) => setItemRef(e, 'itemRefs')" :src="img + '&d=' + index" />
:ref="(e) => setItemRef(e, 'itemRefs')"
:src="img + '&d=' + index"
/>
</div> </div>
</div> </div>
</div> </div>
@ -32,19 +29,12 @@
:position="position" :position="position"
v-bind="$attrs" v-bind="$attrs"
/> />
<ItemDesc <ItemDesc class="mb3r" v-model:item="state.localItem" :position="position" />
class="mb3r"
v-model:item="state.localItem"
:position="position"
/>
</template> </template>
<!--不知为啥touch事件，在下部20px的空间内不触发，加上click事件不好了 --> <!--不知为啥touch事件，在下部20px的空间内不触发，加上click事件不好了 -->
<div <div
class="progress-bar" class="progress-bar"
v-if=" v-if="!state.isPreview && state.operationStatus !== SlideAlbumOperationStatus.Zooming"
!state.isPreview &&
state.operationStatus !== SlideAlbumOperationStatus.Zooming
"
@click="null" @click="null"
@touchstart="progressBarTouchStart" @touchstart="progressBarTouchStart"
@touchmove="progressBarTouchMove" @touchmove="progressBarTouchMove"
@ -70,10 +60,7 @@
</div> </div>
</div> </div>
</Teleport> </Teleport>
<Teleport <Teleport to="#home-index" v-if="state.operationStatus !== SlideAlbumOperationStatus.Normal">
to="#home-index"
v-if="state.operationStatus !== SlideAlbumOperationStatus.Normal"
>
<div class="album-toolbar"> <div class="album-toolbar">
<div class="left"> <div class="left">
<Icon <Icon
@ -90,10 +77,7 @@
@click="startPlay" @click="startPlay"
/> />
<Icon icon="bi:pause-fill" v-else class="pause" @click="stopPlay" /> <Icon icon="bi:pause-fill" v-else class="pause" @click="stopPlay" />
<Icon <Icon icon="system-uicons:push-down" @click="$notice('已保存到系统相册')" />
icon="system-uicons:push-down"
@click="$notice('已保存到系统相册')"
/>
</div> </div>
</div> </div>
</Teleport> </Teleport>
@ -101,11 +85,11 @@
</template> </template>
<script setup lang="jsx"> <script setup lang="jsx">
import enums from '../../utils/enums' import enums from '../../utils/enums'
import Utils, { $no, $notice } from '../../utils' import Utils, { $no, $notice } from '../../utils'
import { mat4 } from 'gl-matrix' import { mat4 } from 'gl-matrix'
import { Icon } from '@iconify/vue' import { Icon } from '@iconify/vue'
import { import {
onMounted, onMounted,
onBeforeUpdate, onBeforeUpdate,
reactive, reactive,
@ -114,35 +98,31 @@
computed, computed,
provide, provide,
nextTick, nextTick,
onUnmounted, onUnmounted
} from 'vue' } from 'vue'
import { import {
getSlideDistance, getSlideDistance,
slideInit, slideInit,
slideReset, slideReset,
slideTouchEnd, slideTouchEnd,
slideTouchMove, slideTouchMove,
slideTouchStart, slideTouchStart
} from './common' } from './common'
import { import { SlideAlbumOperationStatus, SlideItemPlayStatus, SlideType } from '../../utils/const_var'
SlideAlbumOperationStatus, import ItemToolbar from './ItemToolbar'
SlideItemPlayStatus, import ItemDesc from './ItemDesc'
SlideType, import GM from '../../utils'
} from '../../utils/const_var' import { cloneDeep } from '@/utils'
import ItemToolbar from './ItemToolbar' import bus, { EVENT_KEY } from '../../utils/bus'
import ItemDesc from './ItemDesc'
import GM from '../../utils'
import { cloneDeep } from '@/utils'
import bus, { EVENT_KEY } from '../../utils/bus'
let out = new Float32Array([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]) 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 ov = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1])
let origin = cloneDeep(ov) let origin = cloneDeep(ov)
const rectMap = new Map() const rectMap = new Map()
// provide('isPlaying', computed(() => this.isPlaying)) // provide('isPlaying', computed(() => this.isPlaying))
provide('isPlaying', false) provide('isPlaying', false)
const props = defineProps({ const props = defineProps({
item: { item: {
type: Object, type: Object,
default() { default() {
@ -156,7 +136,7 @@
'https://cdn.seovx.com/?mom=302', 'https://cdn.seovx.com/?mom=302',
'https://cdn.seovx.com/?mom=302', 'https://cdn.seovx.com/?mom=302',
'https://cdn.seovx.com/?mom=302', 'https://cdn.seovx.com/?mom=302',
'https://cdn.seovx.com/?mom=302', 'https://cdn.seovx.com/?mom=302'
], ],
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',
@ -190,15 +170,15 @@
name: '敬礼变装', name: '敬礼变装',
creator_id: '93864497380', creator_id: '93864497380',
create_time: '1630423555', create_time: '1630423555',
status: 1, status: 1
}, },
{ {
id: '85ceda30-898f-4b57-b891-0e58b3ab99a9', id: '85ceda30-898f-4b57-b891-0e58b3ab99a9',
name: '宿舍', name: '宿舍',
creator_id: '93864497380', creator_id: '93864497380',
create_time: '1630423555', create_time: '1630423555',
status: 1, status: 1
}, }
], ],
music: { music: {
id: 'cde50af2-628c-4d28-b9c6-67237a62518e', id: 'cde50af2-628c-4d28-b9c6-67237a62518e',
@ -208,31 +188,27 @@
title: '@穷电影创作的原声-小高快起来跳舞', title: '@穷电影创作的原声-小高快起来跳舞',
creator_id: '93864497380', creator_id: '93864497380',
create_time: '1630423555', create_time: '1630423555',
status: 1, status: 1
}, },
author: { author: {
id: '1', id: '1',
unique_id_modify_time: '1630393144', unique_id_modify_time: '1630393144',
unique_id: '10040050', unique_id: '10040050',
favoriting_count: 143, favoriting_count: 143,
avatar: new URL( avatar: new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
'../../assets/img/icon/avatar/3.png',
import.meta.url,
).href,
school: { school: {
name: '中央戏剧学院', name: '中央戏剧学院',
department: null, department: null,
joinTime: null, joinTime: null,
education: null, education: null,
displayType: enums.DISPLAY_TYPE.ALL, displayType: enums.DISPLAY_TYPE.ALL
}, },
city: '', city: '',
province: '北京', province: '北京',
country: '', country: '',
location: '', location: '',
birthday: '2002-01-01', birthday: '2002-01-01',
cover: cover: 'https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172',
'https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172',
following_count: 66, following_count: 66,
follower_count: 235000, follower_count: 235000,
aweme_count: 1796000, aweme_count: 1796000,
@ -244,28 +220,28 @@
create_time: '1630423555', create_time: '1630423555',
status: 1, status: 1,
desc: `一个普普通通学表演的\n看到的人都能开开心心`, desc: `一个普普通通学表演的\n看到的人都能开开心心`,
is_private: 0, is_private: 0
}, }
}
} }
},
}, },
position: { position: {
type: Object, type: Object,
default: () => { default: () => {
return { return {
uniqueId: '', uniqueId: '',
index: '', index: ''
} }
}, }
}, }
}) })
const judgeValue = 20 const judgeValue = 20
const wrapperEl = ref(null) const wrapperEl = ref(null)
//用于解决，touch事件触发startPlay,然后click事件又触发stopLoop的问题 //用于解决，touch事件触发startPlay,然后click事件又触发stopLoop的问题
let lockDatetime = 0 let lockDatetime = 0
const state = reactive({ const state = reactive({
name: 'SlideHorizontal', name: 'SlideHorizontal',
localIndex: 0, localIndex: 0,
needCheck: true, needCheck: true,
@ -276,7 +252,7 @@
wrapper: { width: 0, height: 0, childrenLength: 0 }, wrapper: { width: 0, height: 0, childrenLength: 0 },
last: { last: {
point1: { x: 0, y: 0 }, point1: { x: 0, y: 0 },
point2: { x: 0, y: 0 }, point2: { x: 0, y: 0 }
}, },
start: { start: {
x: 0, x: 0,
@ -284,7 +260,7 @@
point1: { x: 0, y: 0 }, point1: { x: 0, y: 0 },
point2: { x: 0, y: 0 }, point2: { x: 0, y: 0 },
center: { x: 0, y: 0 }, center: { x: 0, y: 0 },
time: 0, time: 0
}, },
move: { x: 0, y: 0 }, move: { x: 0, y: 0 },
itemRefs: [], itemRefs: [],
@ -292,26 +268,26 @@
cycleFn: -1, cycleFn: -1,
status: SlideItemPlayStatus.Play, status: SlideItemPlayStatus.Play,
isAutoPlay: true, isAutoPlay: true,
localItem: props.item, localItem: props.item
}) })
function stopPlay() { function stopPlay() {
state.status = SlideItemPlayStatus.Pause state.status = SlideItemPlayStatus.Pause
stopLoop() stopLoop()
} }
function startPlay() { function startPlay() {
state.isAutoPlay = true state.isAutoPlay = true
state.status = SlideItemPlayStatus.Play state.status = SlideItemPlayStatus.Play
startLoop() startLoop()
} }
function stopLoop() { function stopLoop() {
clearInterval(state.cycleFn) clearInterval(state.cycleFn)
state.cycleFn = -1 state.cycleFn = -1
} }
function startLoop() { function startLoop() {
if (state.cycleFn !== -1) return if (state.cycleFn !== -1) return
if (!state.isAutoPlay) return if (!state.isAutoPlay) return
state.cycleFn = setInterval(() => { state.cycleFn = setInterval(() => {
@ -322,9 +298,9 @@
state.localIndex = 0 state.localIndex = 0
} }
}, 2000) }, 2000)
} }
onMounted(async () => { onMounted(async () => {
await nextTick() await nextTick()
slideInit(wrapperEl.value, state, SlideType.HORIZONTAL) slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
startPlay() startPlay()
@ -332,18 +308,15 @@
// state.operationStatus = SlideAlbumOperationStatus.Zooming // state.operationStatus = SlideAlbumOperationStatus.Zooming
// }, 1000) // }, 1000)
bus.on(EVENT_KEY.SINGLE_CLICK_BROADCAST, click) bus.on(EVENT_KEY.SINGLE_CLICK_BROADCAST, click)
}) })
onUnmounted(() => { onUnmounted(() => {
bus.off(EVENT_KEY.SINGLE_CLICK_BROADCAST, click) bus.off(EVENT_KEY.SINGLE_CLICK_BROADCAST, click)
}) })
function click({ uniqueId, index, type }) { function click({ uniqueId, index, type }) {
// console.log('position,', type, Date.now() - lockDatetime) // console.log('position,', type, Date.now() - lockDatetime)
if ( if (props.position.uniqueId === uniqueId && props.position.index === index) {
props.position.uniqueId === uniqueId &&
props.position.index === index
) {
// if (type === EVENT_KEY.ITEM_TOGGLE) { // if (type === EVENT_KEY.ITEM_TOGGLE) {
// if (state.status === SlideItemPlayStatus.Play) { // if (state.status === SlideItemPlayStatus.Play) {
// stopLoop() // stopLoop()
@ -365,27 +338,27 @@
startPlay() startPlay()
} }
} }
} }
// 确保在每次更新之前重置ref // 确保在每次更新之前重置ref
onBeforeUpdate(() => { onBeforeUpdate(() => {
state.itemRefs = [] state.itemRefs = []
state.previewImgs = [] state.previewImgs = []
}) })
watch( watch(
() => state.localIndex, () => state.localIndex,
(newVal) => { (newVal) => {
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`) GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
GM.$setCss( GM.$setCss(
wrapperEl.value, wrapperEl.value,
'transform', 'transform',
`translate3d(${getSlideDistance(state, SlideType.HORIZONTAL)}px, 0, 0)`, `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL)}px, 0, 0)`
)
},
) )
}
)
watch( watch(
() => state.operationStatus, () => state.operationStatus,
(newVal) => { (newVal) => {
if (newVal !== SlideAlbumOperationStatus.Normal) { if (newVal !== SlideAlbumOperationStatus.Normal) {
@ -393,10 +366,10 @@
} else { } else {
bus.emit(EVENT_KEY.EXIT_FULLSCREEN) bus.emit(EVENT_KEY.EXIT_FULLSCREEN)
} }
}, }
) )
function calcCurrentIndex(e) { function calcCurrentIndex(e) {
state.isPreview = true state.isPreview = true
let x = e.touches[0].pageX let x = e.touches[0].pageX
@ -412,23 +385,23 @@
if (current > -1) { if (current > -1) {
state.localIndex = current state.localIndex = current
} }
} }
function progressBarTouchStart(e) { function progressBarTouchStart(e) {
Utils.$stopPropagation(e) Utils.$stopPropagation(e)
} }
function progressBarTouchMove(e) { function progressBarTouchMove(e) {
Utils.$stopPropagation(e) Utils.$stopPropagation(e)
calcCurrentIndex(e) calcCurrentIndex(e)
} }
function progressBarTouchMEnd(e) { function progressBarTouchMEnd(e) {
Utils.$stopPropagation(e) Utils.$stopPropagation(e)
state.isPreview = false state.isPreview = false
} }
function touchStart(e) { function touchStart(e) {
lockDatetime = Date.now() lockDatetime = Date.now()
// Utils.$showNoticeDialog('start'+e.touches.length) // Utils.$showNoticeDialog('start'+e.touches.length)
@ -444,20 +417,17 @@
state.itemRefs[state.localIndex].style['transition-duration'] = '0ms' state.itemRefs[state.localIndex].style['transition-duration'] = '0ms'
state.last.point1 = state.start.point1 = { state.last.point1 = state.start.point1 = {
x: e.touches[0].pageX, x: e.touches[0].pageX,
y: e.touches[0].pageY, y: e.touches[0].pageY
} }
state.last.point2 = state.start.point2 = { state.last.point2 = state.start.point2 = {
x: e.touches[1].pageX, x: e.touches[1].pageX,
y: e.touches[1].pageY, y: e.touches[1].pageY
}
state.start.center = Utils.getCenter(
state.start.point1,
state.start.point2,
)
} }
state.start.center = Utils.getCenter(state.start.point1, state.start.point2)
} }
}
function touchMove(e) { function touchMove(e) {
// Utils.$showNoticeDialog('move'+e.touches.length) // Utils.$showNoticeDialog('move'+e.touches.length)
// console.log('move', e.touches.length, state.operationStatus) // console.log('move', e.touches.length, state.operationStatus)
let current1 = { x: e.touches[0].pageX, y: e.touches[0].pageY } let current1 = { x: e.touches[0].pageX, y: e.touches[0].pageY }
@ -473,27 +443,9 @@
let movementX = current1.x - state.last.point1.x let movementX = current1.x - state.last.point1.x
let movementY = current1.y - state.last.point1.y let movementY = current1.y - state.last.point1.y
// console.log(movementX, movementY) // console.log(movementX, movementY)
const t = new Float32Array([ const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1])
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 = state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`
`matrix3d(${ov.toString()})`
state.last.point1 = current1 state.last.point1 = current1
} else { } else {
// console.log('m2') // console.log('m2')
@ -519,7 +471,7 @@
if (state.operationStatus !== SlideAlbumOperationStatus.Normal) { if (state.operationStatus !== SlideAlbumOperationStatus.Normal) {
Utils.$stopPropagation(e) Utils.$stopPropagation(e)
} }
}, }
) )
} }
} else { } else {
@ -554,24 +506,7 @@
let minX = Math.min(movementX, movement2X) let minX = Math.min(movementX, movement2X)
let minY = Math.min(movementY, movement2Y) let minY = Math.min(movementY, movement2Y)
const t1 = new Float32Array([ const t1 = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, minX, minY, 0, 1])
1,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1,
0,
minX,
minY,
0,
1,
])
ov = mat4.multiply(out, t1, ov) ov = mat4.multiply(out, t1, ov)
} else { } else {
let center = Utils.getCenter(current1, current2) let center = Utils.getCenter(current1, current2)
@ -581,37 +516,19 @@
let zoom = currentRatio / ov[0] let zoom = currentRatio / ov[0]
const x = center.x * (1 - zoom) const x = center.x * (1 - zoom)
const y = center.y * (1 - zoom) const y = center.y * (1 - zoom)
const t = new Float32Array([ const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1])
zoom,
0,
0,
0,
0,
zoom,
0,
0,
0,
0,
1,
0,
x,
y,
0,
1,
])
//如果zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵） //如果zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵）
//如果zoom是累加放大（比如每次都是0.15），第三个参数用ov。这里还是采用累加计算 //如果zoom是累加放大（比如每次都是0.15），第三个参数用ov。这里还是采用累加计算
ov = mat4.multiply(out, t, ov) ov = mat4.multiply(out, t, ov)
} }
state.itemRefs[state.localIndex].style.transform = state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`
`matrix3d(${ov.toString()})`
state.last.point1 = current1 state.last.point1 = current1
state.last.point2 = current2 state.last.point2 = current2
} }
} }
function touchEnd(e) { function touchEnd(e) {
// console.log('Date.now() - lockDatetime', Date.now() - lockDatetime,) // console.log('Date.now() - lockDatetime', Date.now() - lockDatetime,)
if ( if (
Date.now() - lockDatetime < 300 && Date.now() - lockDatetime < 300 &&
@ -645,8 +562,7 @@
Utils.$stopPropagation(e) Utils.$stopPropagation(e)
ov = origin ov = origin
state.itemRefs[state.localIndex].style['transition-duration'] = '300ms' state.itemRefs[state.localIndex].style['transition-duration'] = '300ms'
state.itemRefs[state.localIndex].style.transform = state.itemRefs[state.localIndex].style.transform = `matrix3d(${origin.toString()})`
`matrix3d(${origin.toString()})`
startLoop() startLoop()
state.operationStatus = SlideAlbumOperationStatus.Look state.operationStatus = SlideAlbumOperationStatus.Look
} else { } else {
@ -663,32 +579,32 @@
} }
console.log('doNotNextCb') console.log('doNotNextCb')
startLoop() startLoop()
}, }
) )
slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, null) slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, null)
} }
} }
} }
function getWidth(index) { function getWidth(index) {
if (state.localIndex >= index) return { width: '100%' } if (state.localIndex >= index) return { width: '100%' }
} }
function setItemRef(el, key) { function setItemRef(el, key) {
el && state[key].push(el) el && state[key].push(el)
} }
function canNext(isNext, e) { function canNext(isNext, e) {
let res = !( let res = !(
(state.localIndex === 0 && !isNext) || (state.localIndex === 0 && !isNext) ||
(state.localIndex === props.item.imgs.length - 1 && isNext) (state.localIndex === props.item.imgs.length - 1 && isNext)
) )
return res return res
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
#SlideAlbum { #SlideAlbum {
transition: height 0.3s; transition: height 0.3s;
position: relative; position: relative;
width: 100%; width: 100%;
@ -756,10 +672,10 @@
} }
} }
} }
} }
</style> </style>
<style lang="less"> <style lang="less">
.preview { .preview {
transition: opacity 0.3s; transition: opacity 0.3s;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -800,9 +716,9 @@
color: white; color: white;
} }
} }
} }
.album-toolbar { .album-toolbar {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
color: white; color: white;
@ -835,5 +751,5 @@
align-items: center; align-items: center;
gap: 20rem; gap: 20rem;
} }
} }
</style> </style>

80
src/components/slide/SlideHorizontal.vue
View File

@ -1,49 +1,49 @@
<script setup> <script setup>
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue' import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import GM from '../../utils' import GM from '../../utils'
import { import {
getSlideDistance, getSlideDistance,
slideInit, slideInit,
slideReset, slideReset,
slideTouchEnd, slideTouchEnd,
slideTouchMove, slideTouchMove,
slideTouchStart, slideTouchStart
} from './common' } from './common'
import { SlideType } from '@/utils/const_var' import { SlideType } from '@/utils/const_var'
const props = defineProps({ const props = defineProps({
index: { index: {
type: Number, type: Number,
default: () => { default: () => {
return 0 return 0
}, }
}, },
name: { name: {
type: String, type: String,
default: () => '', default: () => ''
}, },
//改变index，是否使用动画 //改变index，是否使用动画
changeActiveIndexUseAnim: { changeActiveIndexUseAnim: {
type: Boolean, type: Boolean,
default: true, default: true
}, }
}) })
const emit = defineEmits(['update:index']) const emit = defineEmits(['update:index'])
let ob = null let ob = null
const judgeValue = 20 const judgeValue = 20
const wrapperEl = ref(null) const wrapperEl = ref(null)
const state = reactive({ const state = reactive({
name: props.name, name: props.name,
localIndex: props.index, localIndex: props.index,
needCheck: true, needCheck: true,
next: false, next: false,
start: { x: 0, y: 0, time: 0 }, start: { x: 0, y: 0, time: 0 },
move: { x: 0, y: 0 }, move: { x: 0, y: 0 },
wrapper: { width: 0, height: 0, childrenLength: 0 }, wrapper: { width: 0, height: 0, childrenLength: 0 }
}) })
watch( watch(
() => props.index, () => props.index,
(newVal) => { (newVal) => {
if (state.localIndex !== newVal) { if (state.localIndex !== newVal) {
@ -54,52 +54,44 @@
GM.$setCss( GM.$setCss(
wrapperEl.value, wrapperEl.value,
'transform', 'transform',
`translate3d(${getSlideDistance(state, SlideType.HORIZONTAL, wrapperEl.value)}px, 0, 0)`, `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL, wrapperEl.value)}px, 0, 0)`
) )
} }
}, }
) )
onMounted(() => { onMounted(() => {
slideInit(wrapperEl.value, state, SlideType.HORIZONTAL) slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
ob = new MutationObserver(() => { ob = new MutationObserver(() => {
state.wrapper.childrenLength = wrapperEl.value.children.length state.wrapper.childrenLength = wrapperEl.value.children.length
}) })
ob.observe(wrapperEl.value, { childList: true }) ob.observe(wrapperEl.value, { childList: true })
}) })
onUnmounted(() => { onUnmounted(() => {
ob.disconnect() ob.disconnect()
}) })
function touchStart(e) { function touchStart(e) {
slideTouchStart(e, wrapperEl.value, state) slideTouchStart(e, wrapperEl.value, state)
} }
function touchMove(e) { function touchMove(e) {
slideTouchMove( slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.HORIZONTAL)
e, }
wrapperEl.value,
state,
judgeValue,
canNext,
null,
SlideType.HORIZONTAL,
)
}
function touchEnd(e) { function touchEnd(e) {
slideTouchEnd(e, state, canNext, () => {}) slideTouchEnd(e, state, canNext, () => {})
slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, emit) slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, emit)
} }
function canNext(isNext) { function canNext(isNext) {
return !( return !(
(state.localIndex === 0 && !isNext) || (state.localIndex === 0 && !isNext) ||
(state.localIndex === state.wrapper.childrenLength - 1 && isNext) (state.localIndex === state.wrapper.childrenLength - 1 && isNext)
) )
} }
</script> </script>
<template> <template>

4
src/components/slide/SlideItem.vue
View File

@ -7,10 +7,10 @@
<script setup></script> <script setup></script>
<style lang="less"> <style lang="less">
.slide-item { .slide-item {
height: 100%; height: 100%;
width: 100%; width: 100%;
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
} }
</style> </style>

115
src/components/slide/SlideRowList.vue
View File

@ -1,9 +1,6 @@
<template> <template>
<div id="base-slide-wrapper" ref="slideWrapper"> <div id="base-slide-wrapper" ref="slideWrapper">
<div <div class="indicator-bullets" v-if="indicatorType === 'bullets' && slideItems.length">
class="indicator-bullets"
v-if="indicatorType === 'bullets' && slideItems.length"
>
<div <div
class="bullet" class="bullet"
:class="{ active: currentSlideItemIndex === item - 1 }" :class="{ active: currentSlideItemIndex === item - 1 }"
@ -25,27 +22,27 @@
</template> </template>
<script> <script>
import bus from '../../utils/bus' import bus from '../../utils/bus'
import Loading from '../Loading' import Loading from '../Loading'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
export default { export default {
name: 'BaseSlideList', name: 'BaseSlideList',
components: { components: {
Loading, Loading
}, },
props: { props: {
canMove: { canMove: {
type: Boolean, type: Boolean,
default: () => true, default: () => true
}, },
autoplay: { autoplay: {
type: Boolean, type: Boolean,
default: () => false, default: () => false
}, },
indicatorType: { indicatorType: {
type: String, type: String,
default: '', default: ''
//bullets //bullets
//fraction //fraction
//progressbar //progressbar
@ -53,16 +50,16 @@
}, },
useHomeLoading: { useHomeLoading: {
type: Boolean, type: Boolean,
default: () => false, default: () => false
}, },
activeIndex: { activeIndex: {
type: Number, type: Number,
default: () => 0, default: () => 0
}, },
name: { name: {
type: String, type: String,
default: () => '', default: () => ''
}, }
}, },
setup() { setup() {
const baseStore = useBaseStore() const baseStore = useBaseStore()
@ -77,7 +74,7 @@
return { return {
opacity: 1 - this.homeLoadingMoveYDistance / 20, opacity: 1 - this.homeLoadingMoveYDistance / 20,
'transition-duration': this.toolbarStyleTransitionDuration + 'ms', 'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`, transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`
} }
}, },
noticeStyle() { noticeStyle() {
@ -85,7 +82,7 @@
return { return {
opacity: this.homeLoadingMoveYDistance / 60, opacity: this.homeLoadingMoveYDistance / 60,
'transition-duration': this.toolbarStyleTransitionDuration + 'ms', 'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`, transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`
} }
}, },
loadingStyle() { loadingStyle() {
@ -93,17 +90,17 @@
if (this.loading) { if (this.loading) {
return { return {
opacity: 1, opacity: 1,
'transition-duration': '300ms', 'transition-duration': '300ms'
} }
} }
if (this.homeLoadingMoveYDistance !== 0) { if (this.homeLoadingMoveYDistance !== 0) {
return { return {
opacity: this.homeLoadingMoveYDistance / 60, opacity: this.homeLoadingMoveYDistance / 60,
'transition-duration': this.toolbarStyleTransitionDuration + 'ms', 'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`, transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`
}
} }
} }
},
}, },
data() { data() {
return { return {
@ -133,14 +130,14 @@
tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left, tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left,
indicatorSpace: 0, //indicator之间的间距 indicatorSpace: 0, //indicator之间的间距
toolbarStyleTransitionDuration: 0, toolbarStyleTransitionDuration: 0,
homeLoadingMoveYDistance: 0, //homeLoading专用的MoveYDistance，因为MoveYDistance是一直更新的，左右划的时候也在更新，会造成 homeLoadingMoveYDistance: 0 //homeLoading专用的MoveYDistance，因为MoveYDistance是一直更新的，左右划的时候也在更新，会造成
//在往左划，但上面的toolbar开始往下移了，所以需要用一个专用的值来有条件的保存MoveYDistance，即只direction = row的时候 //在往左划，但上面的toolbar开始往下移了，所以需要用一个专用的值来有条件的保存MoveYDistance，即只direction = row的时候
} }
}, },
watch: { watch: {
activeIndex() { activeIndex() {
this.changeIndex() this.changeIndex()
}, }
}, },
mounted: async function () { mounted: async function () {
await this.checkChildren(true) await this.checkChildren(true)
@ -165,15 +162,13 @@
this.$setCss( this.$setCss(
this.slideList, this.slideList,
'transform', 'transform',
`translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`, `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`
) )
if (this.isHome) { if (this.isHome) {
this.$setCss( this.$setCss(
this.indicatorRef, this.indicatorRef,
'left', 'left',
this.tabIndicatorRelationActiveIndexLefts[ this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
this.currentSlideItemIndex
] + 'px',
) )
} }
this.$attrs['onUpdate:activeIndex'] && this.$attrs['onUpdate:activeIndex'] &&
@ -189,21 +184,18 @@
this.tabIndicatorRelationActiveIndexLefts.push( this.tabIndicatorRelationActiveIndexLefts.push(
item.getBoundingClientRect().x - item.getBoundingClientRect().x -
tabs.children[0].getBoundingClientRect().x + tabs.children[0].getBoundingClientRect().x +
(this.isHome ? this.tabWidth * 0.15 : 0), (this.isHome ? this.tabWidth * 0.15 : 0)
) )
} }
// console.log(this.lefts) // console.log(this.lefts)
this.indicatorSpace = this.indicatorSpace =
this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
this.tabIndicatorRelationActiveIndexLefts[0]
if (this.isHome) { if (this.isHome) {
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`) this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
this.$setCss( this.$setCss(
this.indicatorRef, this.indicatorRef,
'left', 'left',
this.tabIndicatorRelationActiveIndexLefts[ this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
this.currentSlideItemIndex
] + 'px',
) )
} }
}, },
@ -219,8 +211,7 @@
}, },
touchStart(e) { touchStart(e) {
this.$setCss(this.slideList, 'transition-duration', `0ms`) this.$setCss(this.slideList, 'transition-duration', `0ms`)
this.isHome && this.isHome && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
this.toolbarStyleTransitionDuration = 0 this.toolbarStyleTransitionDuration = 0
this.startLocationX = e.touches[0].pageX this.startLocationX = e.touches[0].pageX
@ -241,22 +232,17 @@
//多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移， //多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移，
//slideitem同时在左右移的情况，所以不能直接使用moveYDistance //slideitem同时在左右移的情况，所以不能直接使用moveYDistance
if (this.isCanDownWiping && this.isHome && !this.loading) { if (this.isCanDownWiping && this.isHome && !this.loading) {
this.homeLoadingMoveYDistance = this.homeLoadingMoveYDistance = this.moveYDistance > 0 ? this.moveYDistance : 0
this.moveYDistance > 0 ? this.moveYDistance : 0
} }
if (this.isCanRightWiping) { if (this.isCanRightWiping) {
// //禁止在index=0页面的时候，向左划 // //禁止在index=0页面的时候，向左划
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return
//禁止在最后页面的时候，向右划 //禁止在最后页面的时候，向右划
if ( if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
this.currentSlideItemIndex === this.slideItems.length - 1 &&
this.isDrawRight
)
return
bus.emit(this.name + '-moved', { bus.emit(this.name + '-moved', {
x: { distance: this.moveXDistance, isDrawRight: this.isDrawRight }, x: { distance: this.moveXDistance, isDrawRight: this.isDrawRight }
}) })
this.$stopPropagation(e) this.$stopPropagation(e)
@ -267,19 +253,16 @@
-this.getWidth(this.currentSlideItemIndex) + -this.getWidth(this.currentSlideItemIndex) +
this.moveXDistance + this.moveXDistance +
(this.isDrawRight ? this.judgeValue : -this.judgeValue) (this.isDrawRight ? this.judgeValue : -this.judgeValue)
}px, 0px, 0px)`, }px, 0px, 0px)`
) )
this.isHome && this.isHome &&
this.$setCss( this.$setCss(
this.indicatorRef, this.indicatorRef,
'left', 'left',
this.tabIndicatorRelationActiveIndexLefts[ this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
this.currentSlideItemIndex this.moveXDistance / (this.baseStore.bodyWidth / this.indicatorSpace) +
] - 'px'
this.moveXDistance /
(this.baseStore.bodyWidth / this.indicatorSpace) +
'px',
) )
} }
}, },
@ -294,15 +277,10 @@
if (this.isCanRightWiping) { if (this.isCanRightWiping) {
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return
if ( if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
this.currentSlideItemIndex === this.slideItems.length - 1 &&
this.isDrawRight
)
return
this.$setCss(this.slideList, 'transition-duration', `300ms`) this.$setCss(this.slideList, 'transition-duration', `300ms`)
this.isHome && this.isHome && this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
let endTime = Date.now() let endTime = Date.now()
let gapTime = endTime - this.startTime let gapTime = endTime - this.startTime
@ -313,8 +291,7 @@
this.$stopPropagation(e) this.$stopPropagation(e)
} }
if (Math.abs(this.moveXDistance) < 20) gapTime = 1000 if (Math.abs(this.moveXDistance) < 20) gapTime = 1000
if (Math.abs(this.moveXDistance) > this.wrapperWidth / 3) if (Math.abs(this.moveXDistance) > this.wrapperWidth / 3) gapTime = 100
gapTime = 100
if (gapTime < 150) { if (gapTime < 150) {
if (this.isDrawRight) { if (this.isDrawRight) {
this.currentSlideItemIndex += 1 this.currentSlideItemIndex += 1
@ -325,15 +302,13 @@
this.$setCss( this.$setCss(
this.slideList, this.slideList,
'transform', 'transform',
`translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`, `translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`
) )
if (this.isHome) { if (this.isHome) {
this.$setCss( this.$setCss(
this.indicatorRef, this.indicatorRef,
'left', 'left',
this.tabIndicatorRelationActiveIndexLefts[ this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
this.currentSlideItemIndex
] + 'px',
) )
} }
} }
@ -374,9 +349,7 @@
Math.abs(this.moveXDistance) > this.judgeValue || Math.abs(this.moveXDistance) > this.judgeValue ||
Math.abs(this.moveYDistance) > this.judgeValue Math.abs(this.moveYDistance) > this.judgeValue
) { ) {
let angle = let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
(Math.abs(this.moveXDistance) * 10) /
(Math.abs(this.moveYDistance) * 10)
if (angle > 1) { if (angle > 1) {
this.isCanDownWiping = false this.isCanDownWiping = false
this.isCanRightWiping = true this.isCanRightWiping = true
@ -390,15 +363,15 @@
return (this.isNeedCheck = false) return (this.isNeedCheck = false)
} }
return (this.isNeedCheck = true) return (this.isNeedCheck = true)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
#base-slide-wrapper { #base-slide-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@ -433,5 +406,5 @@
} }
} }
} }
} }
</style> </style>

61
src/components/slide/SlideUser.vue
View File

@ -36,15 +36,15 @@
</div> </div>
</template> </template>
<script> <script>
import Posters from '../Posters' import Posters from '../Posters'
import globalMethods from '../../utils' import globalMethods from '../../utils'
import BaseButton from '../BaseButton' import BaseButton from '../BaseButton'
export default { export default {
name: 'SlideUser', name: 'SlideUser',
components: { components: {
Posters, Posters,
BaseButton, BaseButton
}, },
props: { props: {
modelValue: { modelValue: {
@ -53,10 +53,7 @@
return { return {
type: 'user', type: 'user',
id: '224e9a00-ffa0-4bc1-bb07-c318c7b02fa5', id: '224e9a00-ffa0-4bc1-bb07-c318c7b02fa5',
avatar: new URL( avatar: new URL('../../assets/img/icon/avatar/1.png', import.meta.url).href,
'../../assets/img/icon/avatar/1.png',
import.meta.url,
).href,
name: '何以为家', name: '何以为家',
realName: '王小二', realName: '王小二',
sex: '', sex: '',
@ -112,15 +109,15 @@
name: '抖音电影', name: '抖音电影',
creator_id: '54884802577', creator_id: '54884802577',
create_time: '1630391758', create_time: '1630391758',
status: 1, status: 1
}, },
{ {
id: 'c10178eb-441f-4dc7-93b6-eaae1b6248cc', id: 'c10178eb-441f-4dc7-93b6-eaae1b6248cc',
name: '我的观影报告', name: '我的观影报告',
creator_id: '54884802577', creator_id: '54884802577',
create_time: '1630391758', create_time: '1630391758',
status: 1, status: 1
}, }
], ],
music: { music: {
id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21', id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21',
@ -130,8 +127,8 @@
title: '@喵嗷污说电影创作的原声', title: '@喵嗷污说电影创作的原声',
creator_id: '54884802577', creator_id: '54884802577',
create_time: '1630391758', create_time: '1630391758',
status: 1, status: 1
}, }
}, },
{ {
id: '1f6871da-73ab-40cc-9481-37ad83b63bde', id: '1f6871da-73ab-40cc-9481-37ad83b63bde',
@ -172,8 +169,8 @@
name: '我的观影报告', name: '我的观影报告',
creator_id: '54884802577', creator_id: '54884802577',
create_time: '1630391758', create_time: '1630391758',
status: 1, status: 1
}, }
], ],
music: { music: {
id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21', id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21',
@ -183,8 +180,8 @@
title: '@喵嗷污说电影创作的原声', title: '@喵嗷污说电影创作的原声',
creator_id: '54884802577', creator_id: '54884802577',
create_time: '1630391758', create_time: '1630391758',
status: 1, status: 1
}, }
}, },
{ {
id: 'f7657f21-5fee-4f1f-9d88-ec8411ea009b', id: 'f7657f21-5fee-4f1f-9d88-ec8411ea009b',
@ -225,8 +222,8 @@
name: '我的观影报告', name: '我的观影报告',
creator_id: '54884802577', creator_id: '54884802577',
create_time: '1630391758', create_time: '1630391758',
status: 1, status: 1
}, }
], ],
music: { music: {
id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21', id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21',
@ -236,17 +233,17 @@
title: '@喵嗷污说电影创作的原声', title: '@喵嗷污说电影创作的原声',
creator_id: '54884802577', creator_id: '54884802577',
create_time: '1630391758', create_time: '1630391758',
status: 1, status: 1
}, }
}, }
], ]
}
}
} }
},
},
}, },
data() { data() {
return { return {
globalMethods, globalMethods
} }
}, },
computed: {}, computed: {},
@ -254,13 +251,13 @@
created() { created() {
console.log('modelValue', this.modelValue) console.log('modelValue', this.modelValue)
}, },
methods: {}, methods: {}
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@p: 15rem; @p: 15rem;
#SlideUser { #SlideUser {
width: 100%; width: 100%;
height: 100%; height: 100%;
//background: #e1e1e1; //background: #e1e1e1;
@ -380,5 +377,5 @@
width: 48%; width: 48%;
} }
} }
} }
</style> </style>

72
src/components/slide/SlideVertical.vue
View File

@ -1,44 +1,44 @@
<script setup> <script setup>
import { onMounted, reactive, ref, watch } from 'vue' import { onMounted, reactive, ref, watch } from 'vue'
import GM from '../../utils' import GM from '../../utils'
import { import {
getSlideDistance, getSlideDistance,
slideInit, slideInit,
slideReset, slideReset,
slideTouchEnd, slideTouchEnd,
slideTouchMove, slideTouchMove,
slideTouchStart, slideTouchStart
} from './common' } from './common'
import { SlideType } from '@/utils/const_var' import { SlideType } from '@/utils/const_var'
const props = defineProps({ const props = defineProps({
index: { index: {
type: Number, type: Number,
default: () => { default: () => {
return 0 return 0
}, }
}, },
//改变index，是否使用动画 //改变index，是否使用动画
changeActiveIndexUseAnim: { changeActiveIndexUseAnim: {
type: Boolean, type: Boolean,
default: true, default: true
}, }
}) })
const emit = defineEmits(['update:index']) const emit = defineEmits(['update:index'])
const judgeValue = 20 const judgeValue = 20
const wrapperEl = ref(null) const wrapperEl = ref(null)
const state = reactive({ const state = reactive({
name: 'SlideVertical', name: 'SlideVertical',
localIndex: props.index, localIndex: props.index,
needCheck: true, needCheck: true,
next: false, next: false,
start: { x: 0, y: 0, time: 0 }, start: { x: 0, y: 0, time: 0 },
move: { x: 0, y: 0 }, move: { x: 0, y: 0 },
wrapper: { width: 0, height: 0, childrenLength: 0 }, wrapper: { width: 0, height: 0, childrenLength: 0 }
}) })
watch( watch(
() => props.index, () => props.index,
(newVal) => { (newVal) => {
if (state.localIndex !== newVal) { if (state.localIndex !== newVal) {
@ -49,43 +49,35 @@
GM.$setCss( GM.$setCss(
wrapperEl.value, wrapperEl.value,
'transform', 'transform',
`translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`, `translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`
) )
} }
}, }
) )
onMounted(() => { onMounted(() => {
slideInit(wrapperEl.value, state, SlideType.VERTICAL) slideInit(wrapperEl.value, state, SlideType.VERTICAL)
}) })
function touchStart(e) { function touchStart(e) {
slideTouchStart(e, wrapperEl.value, state) slideTouchStart(e, wrapperEl.value, state)
} }
function touchMove(e) { function touchMove(e) {
slideTouchMove( slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.VERTICAL)
e, }
wrapperEl.value,
state,
judgeValue,
canNext,
null,
SlideType.VERTICAL,
)
}
function touchEnd(e) { function touchEnd(e) {
slideTouchEnd(e, state, canNext, null, null, SlideType.VERTICAL) slideTouchEnd(e, state, canNext, null, null, SlideType.VERTICAL)
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit) slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
} }
function canNext(isNext) { function canNext(isNext) {
return !( return !(
(state.localIndex === 0 && !isNext) || (state.localIndex === 0 && !isNext) ||
(state.localIndex === state.wrapper.childrenLength - 1 && isNext) (state.localIndex === state.wrapper.childrenLength - 1 && isNext)
) )
} }
</script> </script>
<template> <template>

200
src/components/slide/SlideVerticalInfinite.vue
View File

@ -1,77 +1,77 @@
<script setup lang="jsx"> <script setup lang="jsx">
import { createApp, onMounted, reactive, ref, render, watch } from 'vue' import { createApp, onMounted, reactive, ref, render, watch } from 'vue'
import GM from '../../utils' import GM from '../../utils'
import { import {
getSlideDistance, getSlideDistance,
slideInit, slideInit,
slideReset, slideReset,
slideTouchEnd, slideTouchEnd,
slideTouchMove, slideTouchMove,
slideTouchStart, slideTouchStart
} from './common' } from './common'
import { SlideType } from '@/utils/const_var' import { SlideType } from '@/utils/const_var'
import SlideItem from '@/components/slide/SlideItem.vue' import SlideItem from '@/components/slide/SlideItem.vue'
import bus, { EVENT_KEY } from '../../utils/bus' import bus, { EVENT_KEY } from '../../utils/bus'
import Loading from '@/components/Loading.vue' import Loading from '@/components/Loading.vue'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
const props = defineProps({ const props = defineProps({
index: { index: {
type: Number, type: Number,
default: () => { default: () => {
return -1 return -1
}, }
}, },
render: { render: {
type: Function, type: Function,
default: () => { default: () => {
return null return null
}, }
}, },
list: { list: {
type: Array, type: Array,
default: () => { default: () => {
return [] return []
}, }
}, },
virtualTotal: { virtualTotal: {
type: Number, type: Number,
default: () => 5, default: () => 5
}, },
name: { name: {
type: String, type: String,
default: () => '', default: () => ''
}, },
uniqueId: { uniqueId: {
type: String, type: String,
default: () => '', default: () => ''
}, },
loading: { loading: {
type: Boolean, type: Boolean,
default: () => false, default: () => false
}, },
active: { active: {
type: Boolean, type: Boolean,
default: () => false, default: () => false
}, }
}) })
const emit = defineEmits(['update:index', 'loadMore', 'refresh']) const emit = defineEmits(['update:index', 'loadMore', 'refresh'])
const appInsMap = new Map() const appInsMap = new Map()
const itemClassName = 'slide-item' const itemClassName = 'slide-item'
const wrapperEl = ref(null) const wrapperEl = ref(null)
const state = reactive({ const state = reactive({
name: props.name, name: props.name,
localIndex: props.index, localIndex: props.index,
needCheck: true, needCheck: true,
next: false, next: false,
start: { x: 0, y: 0, time: 0 }, start: { x: 0, y: 0, time: 0 },
move: { x: 0, y: 0 }, move: { x: 0, y: 0 },
wrapper: { width: 0, height: 0, childrenLength: 0 }, wrapper: { width: 0, height: 0, childrenLength: 0 }
}) })
const baseStore = useBaseStore() const baseStore = useBaseStore()
watch( watch(
() => props.list, () => props.list,
(newVal, oldVal) => { (newVal, oldVal) => {
// console.log('watch-list', newVal.length, oldVal.length, newVal) // console.log('watch-list', newVal.length, oldVal.length, newVal)
@ -98,10 +98,10 @@
}) })
} }
} }
}, }
) )
watch( watch(
() => props.index, () => props.index,
(newVal, oldVal) => { (newVal, oldVal) => {
state.localIndex = newVal state.localIndex = newVal
@ -111,19 +111,19 @@
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
uniqueId: props.uniqueId, uniqueId: props.uniqueId,
index: newVal, index: newVal,
type: EVENT_KEY.ITEM_PLAY, type: EVENT_KEY.ITEM_PLAY
}) })
setTimeout(() => { setTimeout(() => {
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
uniqueId: props.uniqueId, uniqueId: props.uniqueId,
index: oldVal, index: oldVal,
type: EVENT_KEY.ITEM_STOP, type: EVENT_KEY.ITEM_STOP
}) })
}, 200) }, 200)
}, }
) )
watch( watch(
() => props.active, () => props.active,
(newVal, oldVal) => { (newVal, oldVal) => {
if (newVal && !props.list.length) { if (newVal && !props.list.length) {
@ -136,18 +136,18 @@
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
uniqueId: props.uniqueId, uniqueId: props.uniqueId,
index: state.localIndex, index: state.localIndex,
type: newVal === false ? EVENT_KEY.ITEM_STOP : EVENT_KEY.ITEM_PLAY, type: newVal === false ? EVENT_KEY.ITEM_STOP : EVENT_KEY.ITEM_PLAY
}) })
}, },
{ immediate: true }, { immediate: true }
) )
onMounted(() => { onMounted(() => {
slideInit(wrapperEl.value, state, SlideType.VERTICAL) slideInit(wrapperEl.value, state, SlideType.VERTICAL)
insertContent() insertContent()
}) })
function insertContent(list = props.list) { function insertContent(list = props.list) {
if (!list.length) return if (!list.length) return
$(wrapperEl.value).empty() $(wrapperEl.value).empty()
let half = (props.virtualTotal - 1) / 2 let half = (props.virtualTotal - 1) / 2
@ -170,7 +170,7 @@
GM.$setCss( GM.$setCss(
wrapperEl.value, wrapperEl.value,
'transform', 'transform',
`translate3d(0px,${getSlideDistance(state, SlideType.VERTICAL)}px, 0px)`, `translate3d(0px,${getSlideDistance(state, SlideType.VERTICAL)}px, 0px)`
) )
if (state.localIndex > 2 && list.length > 5) { if (state.localIndex > 2 && list.length > 5) {
@ -187,20 +187,18 @@
state.wrapper.childrenLength = wrapperEl.value.children.length state.wrapper.childrenLength = wrapperEl.value.children.length
// console.log('list[state.localIndex]',list[state.localIndex]) // console.log('list[state.localIndex]',list[state.localIndex])
bus.emit(EVENT_KEY.CURRENT_ITEM, list[state.localIndex]) bus.emit(EVENT_KEY.CURRENT_ITEM, list[state.localIndex])
} }
function dislike(item) { function dislike(item) {
let currentItem = $(wrapperEl.value).find( let currentItem = $(wrapperEl.value).find(`.${itemClassName}[data-index=${state.localIndex}]`)
`.${itemClassName}[data-index=${state.localIndex}]`,
)
let replaceItem = getInsEl(item, state.localIndex, true) let replaceItem = getInsEl(item, state.localIndex, true)
$(replaceItem).css('top', currentItem.css('top')) $(replaceItem).css('top', currentItem.css('top'))
currentItem.replaceWith(replaceItem) currentItem.replaceWith(replaceItem)
} }
defineExpose({ dislike }) defineExpose({ dislike })
function getInsEl(item, index, play = false) { function getInsEl(item, index, play = false) {
// console.log('index', cloneDeep(item), index, play) // console.log('index', cloneDeep(item), index, play)
let slideVNode = props.render(item, index, play, props.uniqueId) let slideVNode = props.render(item, index, play, props.uniqueId)
const parent = document.createElement('div') const parent = document.createElement('div')
@ -213,39 +211,31 @@
unmount: () => { unmount: () => {
render(null, parent) render(null, parent)
parent.remove() parent.remove()
}, }
}) })
return parent return parent
} else { } else {
const app = createApp({ const app = createApp({
render() { render() {
return <SlideItem data-index={index}>{slideVNode}</SlideItem> return <SlideItem data-index={index}>{slideVNode}</SlideItem>
}, }
}) })
const ins = app.mount(parent) const ins = app.mount(parent)
appInsMap.set(index, app) appInsMap.set(index, app)
return ins.$el return ins.$el
} }
} }
function touchStart(e) { function touchStart(e) {
slideTouchStart(e, wrapperEl.value, state) slideTouchStart(e, wrapperEl.value, state)
} }
//TODO 2022-3-28:在最顶部，反复滑动会抖动一下，初步猜测是因为方向变了，导致的加判断距离变成了减 //TODO 2022-3-28:在最顶部，反复滑动会抖动一下，初步猜测是因为方向变了，导致的加判断距离变成了减
function touchMove(e) { function touchMove(e) {
slideTouchMove( slideTouchMove(e, wrapperEl.value, state, baseStore.judgeValue, canNext, null, SlideType.VERTICAL)
e, }
wrapperEl.value,
state,
baseStore.judgeValue,
canNext,
null,
SlideType.VERTICAL,
)
}
function touchEnd(e) { function touchEnd(e) {
let isNext = state.move.y < 0 let isNext = state.move.y < 0
if ( if (
state.localIndex === 0 && state.localIndex === 0 &&
@ -269,14 +259,10 @@
emit('loadMore') emit('loadMore')
} }
let addItemIndex = state.localIndex + 2 let addItemIndex = state.localIndex + 2
let res = $(wrapperEl.value).find( let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
`.${itemClassName}[data-index=${addItemIndex}]`,
)
if (state.wrapper.childrenLength < props.virtualTotal) { if (state.wrapper.childrenLength < props.virtualTotal) {
if (res.length === 0) { if (res.length === 0) {
wrapperEl.value.appendChild( wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
getInsEl(props.list[addItemIndex], addItemIndex),
)
} }
} }
if ( if (
@ -285,24 +271,15 @@
state.localIndex <= props.list.length - 3 state.localIndex <= props.list.length - 3
) { ) {
if (res.length === 0) { if (res.length === 0) {
wrapperEl.value.appendChild( wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
getInsEl(props.list[addItemIndex], addItemIndex),
)
appInsMap appInsMap
.get( .get($(wrapperEl.value).find(`.${itemClassName}:first`).data('index'))
$(wrapperEl.value)
.find(`.${itemClassName}:first`)
.data('index'),
)
.unmount() .unmount()
// $(wrapperEl.value).find(".base-slide-item:first").remove() // $(wrapperEl.value).find(".base-slide-item:first").remove()
$(wrapperEl.value) $(wrapperEl.value)
.find(`.${itemClassName}`) .find(`.${itemClassName}`)
.each(function () { .each(function () {
$(this).css( $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
'top',
(state.localIndex - 2) * state.wrapper.height,
)
}) })
} }
} }
@ -314,70 +291,47 @@
if (index < state.localIndex - 2) { if (index < state.localIndex - 2) {
appInsMap.get(index).unmount() appInsMap.get(index).unmount()
} }
$(this).css( $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
'top',
(state.localIndex - 2) * state.wrapper.height,
)
}) })
} }
} else { } else {
let addItemIndex = state.localIndex - 2 let addItemIndex = state.localIndex - 2
let res = $(wrapperEl.value).find( let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
`.${itemClassName}[data-index=${addItemIndex}]`,
)
if ( if (state.localIndex > 1 && state.localIndex <= props.list.length - 4) {
state.localIndex > 1 &&
state.localIndex <= props.list.length - 4
) {
if (res.length === 0) { if (res.length === 0) {
wrapperEl.value.prepend( wrapperEl.value.prepend(getInsEl(props.list[addItemIndex], addItemIndex))
getInsEl(props.list[addItemIndex], addItemIndex),
)
appInsMap appInsMap
.get( .get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index'))
$(wrapperEl.value)
.find(`.${itemClassName}:last`)
.data('index'),
)
.unmount() .unmount()
// $(wrapperEl.value).find(".base-slide-item:last").remove() // $(wrapperEl.value).find(".base-slide-item:last").remove()
$(wrapperEl.value) $(wrapperEl.value)
.find(`.${itemClassName}`) .find(`.${itemClassName}`)
.each(function () { .each(function () {
$(this).css( $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
'top',
(state.localIndex - 2) * state.wrapper.height,
)
}) })
} }
} }
if (state.wrapper.childrenLength > props.virtualTotal) { if (state.wrapper.childrenLength > props.virtualTotal) {
appInsMap appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount()
.get(
$(wrapperEl.value)
.find(`.${itemClassName}:last`)
.data('index'),
)
.unmount()
} }
} }
state.wrapper.childrenLength = wrapperEl.value.children.length state.wrapper.childrenLength = wrapperEl.value.children.length
} }
}, },
null, null,
SlideType.VERTICAL, SlideType.VERTICAL
) )
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit) slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
} }
function canNext(isNext) { function canNext(isNext) {
return !( return !(
(state.localIndex === 0 && !isNext) || (state.localIndex === 0 && !isNext) ||
(state.localIndex === props.list.length - 1 && isNext) (state.localIndex === props.list.length - 1 && isNext)
) )
} }
</script> </script>
<template> <template>

29
src/components/slide/common.js
View File

@ -29,10 +29,7 @@ export function slideTouchStart(e, el, state) {
//检测能否滑动 //检测能否滑动
export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) { export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
if (state.needCheck) { if (state.needCheck) {
if ( if (Math.abs(state.move.x) > judgeValue || Math.abs(state.move.y) > judgeValue) {
Math.abs(state.move.x) > judgeValue ||
Math.abs(state.move.y) > judgeValue
) {
let angle = (Math.abs(state.move.x) * 10) / (Math.abs(state.move.y) * 10) let angle = (Math.abs(state.move.x) * 10) / (Math.abs(state.move.y) * 10)
state.next = type === SlideType.HORIZONTAL ? angle > 1 : angle <= 1 state.next = type === SlideType.HORIZONTAL ? angle > 1 : angle <= 1
// console.log('angle', angle, state.next) // console.log('angle', angle, state.next)
@ -56,22 +53,16 @@ export function slideTouchMove(
nextCb, nextCb,
type = SlideType.HORIZONTAL, type = SlideType.HORIZONTAL,
notNextCb, notNextCb,
slideOtherDirectionCb = null, slideOtherDirectionCb = null
) { ) {
state.move.x = e.touches[0].pageX - state.start.x state.move.x = e.touches[0].pageX - state.start.x
state.move.y = e.touches[0].pageY - state.start.y state.move.y = e.touches[0].pageY - state.start.y
let isNext = let isNext = type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
let canSlideRes = canSlide(state, judgeValue, type) let canSlideRes = canSlide(state, judgeValue, type)
if ( if (canSlideRes && state.localIndex === 0 && !isNext && type === SlideType.VERTICAL) {
canSlideRes &&
state.localIndex === 0 &&
!isNext &&
type === SlideType.VERTICAL
) {
bus.emit(state.name + '-moveY', state.move.y) bus.emit(state.name + '-moveY', state.move.y)
} }
@ -82,8 +73,7 @@ export function slideTouchMove(
bus.emit(state.name + '-moveX', state.move.x) bus.emit(state.name + '-moveX', state.move.x)
} }
Utils.$stopPropagation(e) Utils.$stopPropagation(e)
let t = let t = getSlideDistance(state, type, el) + (isNext ? judgeValue : -judgeValue)
getSlideDistance(state, type, el) + (isNext ? judgeValue : -judgeValue)
let dx1 = 0 let dx1 = 0
let dx2 = 0 let dx2 = 0
if (type === SlideType.HORIZONTAL) { if (type === SlideType.HORIZONTAL) {
@ -107,7 +97,7 @@ export function slideTouchEnd(
canNextCb, canNextCb,
nextCb, nextCb,
doNotNextCb, doNotNextCb,
type = SlideType.HORIZONTAL, type = SlideType.HORIZONTAL
) { ) {
let isHorizontal = type === SlideType.HORIZONTAL let isHorizontal = type === SlideType.HORIZONTAL
let isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0 let isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0
@ -146,12 +136,7 @@ export function slideReset(el, state, type, emit) {
dx2 = t dx2 = t
} }
Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`) Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
state.start.x = state.start.x = state.start.y = state.start.time = state.move.x = state.move.y = 0
state.start.y =
state.start.time =
state.move.x =
state.move.y =
0
state.next = false state.next = false
state.needCheck = true state.needCheck = true
emit?.('update:index', state.localIndex) emit?.('update:index', state.localIndex)

4
src/config/index.js
View File

@ -1,12 +1,12 @@
export default { export default {
baseUrl: 'https://dy.ttentau.top/imgs/', baseUrl: 'https://dy.ttentau.top/imgs/',
imgPath: '/imgs/', imgPath: '/imgs/',
filePreview: 'http://192.168.0.103/static/uploads/', filePreview: 'http://192.168.0.103/static/uploads/'
} }
const BASE_URL_MAP = { const BASE_URL_MAP = {
DEV: '', DEV: '',
PROD: '', PROD: '',
UNI: 'https://dy.ttentau.top', UNI: 'https://dy.ttentau.top'
} }
export const BASE_URL = BASE_URL_MAP[import.meta.env.VITE_ENV] export const BASE_URL = BASE_URL_MAP[import.meta.env.VITE_ENV]

5
src/main.js
View File

@ -18,12 +18,11 @@ app.config.globalProperties.emitter = emitter
app.config.unwrapInjectedRef = true app.config.unwrapInjectedRef = true
app.provide('mitt', emitter) app.provide('mitt', emitter)
app.mixin(mixin) app.mixin(mixin)
const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url) const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url).href
.href
app.use(VueLazyload, { app.use(VueLazyload, {
preLoad: 1.3, preLoad: 1.3,
loading: loadImage, loading: loadImage,
attempt: 1, attempt: 1
}) })
app.use(router) app.use(router)
app.use(pinia) app.use(pinia)

98
src/mock/index.js
View File

@ -29,23 +29,23 @@ let t = [
type: 'imgs', type: 'imgs',
src: `https://imgapi.cn/bing.php`, src: `https://imgapi.cn/bing.php`,
author: { author: {
unique_id: 1, unique_id: 1
}, }
}, },
{ {
type: 'user', type: 'user',
src: `https://imgapi.cn/bing.php`, src: `https://imgapi.cn/bing.php`,
author: { author: {
unique_id: 2, unique_id: 2
}, }
}, },
{ {
type: 'img', type: 'img',
src: `https://imgapi.cn/bing.php`, src: `https://imgapi.cn/bing.php`,
author: { author: {
unique_id: 3, unique_id: 3
}, }
}, }
] ]
// allRecommendVideos.unshift(...t) // allRecommendVideos.unshift(...t)
// { // {
@ -74,9 +74,7 @@ async function fetchData() {
} }
v = v.map((w) => { v = v.map((w) => {
w.type = 'recommend-video' w.type = 'recommend-video'
let item = userList.find( let item = userList.find((a) => String(a.uid) === String(w.author_user_id))
(a) => String(a.uid) === String(w.author_user_id),
)
if (item) w.author = item if (item) w.author = item
return w return w
}) })
@ -89,21 +87,17 @@ async function fetchData() {
export async function startMock() { export async function startMock() {
mock.onGet(/video\/recommended/).reply(async (config) => { mock.onGet(/video\/recommended/).reply(async (config) => {
let page = getPage2(config.params) let page = getPage2(config.params)
console.log( console.log('allRecommendVideos', cloneDeep(allRecommendVideos.length), page)
'allRecommendVideos',
cloneDeep(allRecommendVideos.length),
page,
)
return [ return [
200, 200,
{ {
data: { data: {
total: 844, total: 844,
list: allRecommendVideos.slice(page.offset, page.limit), // list: allRecommendVideos.slice(0, 6), list: allRecommendVideos.slice(page.offset, page.limit) // list: allRecommendVideos.slice(0, 6),
}, },
code: 200, code: 200,
msg: '', msg: ''
}, }
] ]
}) })
@ -124,7 +118,7 @@ export async function startMock() {
'7295697246132227343', '7295697246132227343',
'7270431418822446370', '7270431418822446370',
'6882368275695586568', '6882368275695586568',
'7000587983069957383', '7000587983069957383'
] ]
let id = config.params.id let id = config.params.id
if (!videoIds.includes(String(id))) { if (!videoIds.includes(String(id))) {
@ -145,13 +139,11 @@ export async function startMock() {
{ {
data: { data: {
total: 10, total: 10,
list: allRecommendVideos list: allRecommendVideos.slice(100, 110).slice(page.offset, page.limit)
.slice(100, 110)
.slice(page.offset, page.limit),
}, },
code: 200, code: 200,
msg: '', msg: ''
}, }
] ]
}) })
@ -162,13 +154,11 @@ export async function startMock() {
{ {
data: { data: {
total: 150, total: 150,
list: allRecommendVideos list: allRecommendVideos.slice(200, 350).slice(page.offset, page.limit)
.slice(200, 350)
.slice(page.offset, page.limit),
}, },
code: 200, code: 200,
msg: '', msg: ''
}, }
] ]
}) })
@ -177,18 +167,14 @@ export async function startMock() {
if (!userVideos.length) { if (!userVideos.length) {
// let r = await fetch(BASE_URL + '/data/user-71158770.json') // let r = await fetch(BASE_URL + '/data/user-71158770.json')
// let r = await fetch(BASE_URL + '/data/user-8357999.json') // let r = await fetch(BASE_URL + '/data/user-8357999.json')
let r = await fetch( let r = await fetch(BASE_URL + '/data/user_video_list/user-12345xiaolaohu.json')
BASE_URL + '/data/user_video_list/user-12345xiaolaohu.json',
)
let list = await r.json() let list = await r.json()
const baseStore = useBaseStore() const baseStore = useBaseStore()
let userList = cloneDeep(baseStore.users) let userList = cloneDeep(baseStore.users)
userVideos = list.map((w) => { userVideos = list.map((w) => {
if (userList.length) { if (userList.length) {
let item = userList.find( let item = userList.find((a) => String(a.uid) === String(w.author_user_id))
(a) => String(a.uid) === String(w.author_user_id),
)
if (item) w.author = item if (item) w.author = item
} }
return w return w
@ -201,11 +187,11 @@ export async function startMock() {
data: { data: {
pageNo: page.pageNo, pageNo: page.pageNo,
total: userVideos.length, total: userVideos.length,
list: userVideos.slice(page.offset, page.limit), list: userVideos.slice(page.offset, page.limit)
}, },
code: 200, code: 200,
msg: '', msg: ''
}, }
] ]
}) })
@ -216,13 +202,11 @@ export async function startMock() {
{ {
data: { data: {
total: 150, total: 150,
list: allRecommendVideos list: allRecommendVideos.slice(200, 350).slice(page.offset, page.limit)
.slice(200, 350)
.slice(page.offset, page.limit),
}, },
code: 200, code: 200,
msg: '', msg: ''
}, }
] ]
}) })
@ -233,16 +217,16 @@ export async function startMock() {
data: { data: {
video: { video: {
total: 50, total: 50,
list: allRecommendVideos.slice(350, 400), list: allRecommendVideos.slice(350, 400)
}, },
music: { music: {
total: resource.music.length, total: resource.music.length,
list: resource.music, list: resource.music
}, }
}, },
code: 200, code: 200,
msg: '', msg: ''
}, }
] ]
}) })
@ -282,11 +266,11 @@ export async function startMock() {
data: { data: {
pageNo: page.pageNo, pageNo: page.pageNo,
total: 0, total: 0,
list: [], list: []
}, },
code: 200, code: 200,
msg: '', msg: ''
}, }
] ]
}) })
@ -303,11 +287,11 @@ export async function startMock() {
data: { data: {
pageNo: page.pageNo, pageNo: page.pageNo,
total: allRecommendPosts.length, total: allRecommendPosts.length,
list: allRecommendPosts.slice(0, 1000).slice(page.offset, page.limit), list: allRecommendPosts.slice(0, 1000).slice(page.offset, page.limit)
}, },
code: 200, code: 200,
msg: '', msg: ''
}, }
] ]
}) })
@ -321,10 +305,10 @@ export async function startMock() {
{ {
data: { data: {
total: v.length, total: v.length,
list: v.slice(page.offset, page.limit), list: v.slice(page.offset, page.limit)
},
code: 200,
}, },
code: 200
}
] ]
}) })

4
src/pages/BasePage.js
View File

@ -1,7 +1,7 @@
export default { export default {
data() { data() {
return { return {
mainScrollTop: 0, mainScrollTop: 0
} }
}, },
activated() { activated() {
@ -13,5 +13,5 @@ export default {
if (this.$refs.mainScroll && this.$refs.mainScroll.wrapper) { if (this.$refs.mainScroll && this.$refs.mainScroll.wrapper) {
this.mainScrollTop = this.$refs.mainScroll.wrapper.scrollTop this.mainScrollTop = this.$refs.mainScroll.wrapper.scrollTop
} }
}, }
} }

150
src/pages/home/LivePage.vue
View File

@ -22,11 +22,7 @@
<div class="top"> <div class="top">
<div class="left"> <div class="left">
<div class="liver"> <div class="liver">
<img <img class="avatar" :src="_checkImgUrl(userinfo.avatar_168x168.url_list[0])" alt="" />
class="avatar"
:src="_checkImgUrl(userinfo.avatar_168x168.url_list[0])"
alt=""
/>
<div class="desc"> <div class="desc">
<div class="desc-wrapper"> <div class="desc-wrapper">
<div class="name">{{ userinfo.nickname }}</div> <div class="name">{{ userinfo.nickname }}</div>
@ -48,40 +44,17 @@
</div> </div>
<div class="right"> <div class="right">
<div class="follower"> <div class="follower">
<img <img src="../../assets/img/icon/avatar/1.png" alt="" class="round" />
src="../../assets/img/icon/avatar/1.png" <img src="../../assets/img/icon/avatar/2.png" alt="" class="round" />
alt="" <img src="../../assets/img/icon/avatar/3.png" alt="" class="round" />
class="round"
/>
<img
src="../../assets/img/icon/avatar/2.png"
alt=""
class="round"
/>
<img
src="../../assets/img/icon/avatar/3.png"
alt=""
class="round"
/>
<div class="round count">107</div> <div class="round count">107</div>
<dy-back <dy-back class="round close" img="close" mode="light" @click="$back" />
class="round close"
img="close"
mode="light"
@click="$back"
/>
</div> </div>
<div class="more"> <div class="more">
<div class="wrapper"> <div class="wrapper">
<!-- 缺个icon--> <!-- 缺个icon-->
<span>更多同城</span> <span>更多同城</span>
<dy-back <dy-back scale=".5" direction="right" class="back" img="back" mode="light" />
scale=".5"
direction="right"
class="back"
img="back"
mode="light"
/>
</div> </div>
</div> </div>
</div> </div>
@ -112,46 +85,17 @@
<span>说点什么</span> <span>说点什么</span>
<img src="../../assets/img/icon/home/voice.png" alt="" /> <img src="../../assets/img/icon/home/voice.png" alt="" />
</div> </div>
<img <img src="../../assets/img/icon/home/more.png" alt="" class="more" />
src="../../assets/img/icon/home/more.png" <img src="../../assets/img/icon/home/love.webp" alt="" class="more" />
alt="" <img src="../../assets/img/icon/home/gift.webp" alt="" class="gift" />
class="more"
/>
<img
src="../../assets/img/icon/home/love.webp"
alt=""
class="more"
/>
<img
src="../../assets/img/icon/home/gift.webp"
alt=""
class="gift"
/>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div class="avatar-wrapper" :class="{ followed: isFollowed }"> <div class="avatar-wrapper" :class="{ followed: isFollowed }">
<img <img src="../../assets/img/icon/avatar/2.png" alt="" class="avatar" />
src="../../assets/img/icon/avatar/2.png" <div v-if="!isFollowed" @click.stop="attention" class="options" ref="attention-option">
alt="" <img class="no" src="../../assets/img/icon/add-light.png" alt="" />
class="avatar" <img class="yes" src="../../assets/img/icon/ok-white.png" alt="" />
/>
<div
v-if="!isFollowed"
@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-white.png"
alt=""
/>
</div> </div>
<img <img
v-if="isFollowed" v-if="isFollowed"
@ -167,15 +111,15 @@
</div> </div>
</template> </template>
<script> <script>
import BaseButton from '../../components/BaseButton' import BaseButton from '../../components/BaseButton'
import Dom from '../../utils/dom' import Dom from '../../utils/dom'
import { nextTick } from 'vue' import { nextTick } from 'vue'
import { mapState } from 'pinia' import { mapState } from 'pinia'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
import { _checkImgUrl, random } from '@/utils' import { _checkImgUrl, random } from '@/utils'
import Mock from 'mockjs' import Mock from 'mockjs'
export default { export default {
name: 'LivePage', name: 'LivePage',
components: { BaseButton }, components: { BaseButton },
props: {}, props: {},
@ -222,7 +166,7 @@
'/images/KwJ9N7yFjYylfwYeThWjx.png', '/images/KwJ9N7yFjYylfwYeThWjx.png',
'/images/EKkC06GI4yXC2mNHMrm46.png', '/images/EKkC06GI4yXC2mNHMrm46.png',
'/images/rlkpmpGPdhYZRJl3J4Xl7.png', '/images/rlkpmpGPdhYZRJl3J4Xl7.png',
'/images/Ge4mMWQoICdpyTyixk3Sf.png', '/images/Ge4mMWQoICdpyTyixk3Sf.png'
] ]
let avatar = avatarList[random(0, avatarList.length - 1)] let avatar = avatarList[random(0, avatarList.length - 1)]
let gift = '/images/icon/love.webp' let gift = '/images/icon/love.webp'
@ -250,11 +194,11 @@
</div> </div>
` `
}, },
page: null, page: null
} }
}, },
computed: { computed: {
...mapState(useBaseStore, ['friends', 'userinfo']), ...mapState(useBaseStore, ['friends', 'userinfo'])
}, },
created() {}, created() {},
mounted() { mounted() {
@ -325,13 +269,13 @@
sendComment() { sendComment() {
this.list.push({ this.list.push({
name: Mock.mock('@cname'), name: Mock.mock('@cname'),
text: Mock.mock('@csentence'), text: Mock.mock('@csentence')
}) })
nextTick(() => { nextTick(() => {
let comments = this.$refs['comments'] let comments = this.$refs['comments']
comments.scrollTo({ comments.scrollTo({
top: comments.scrollHeight - comments.clientHeight, top: comments.scrollHeight - comments.clientHeight,
behavior: 'smooth', behavior: 'smooth'
}) })
// comments.scrollTop = comments.scrollHeight - comments.clientHeight // comments.scrollTop = comments.scrollHeight - comments.clientHeight
}) })
@ -342,15 +286,15 @@
setTimeout(() => { setTimeout(() => {
this.isFollowed = true this.isFollowed = true
}, 1000) }, 1000)
},
},
} }
}
}
</script> </script>
<style lang="less"> <style lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.send-gift { .send-gift {
position: fixed; position: fixed;
top: 63vh; top: 63vh;
left: 15rem; left: 15rem;
@ -378,11 +322,7 @@
} }
.left { .left {
background: linear-gradient( background: linear-gradient(to right, var(--primary-btn-color), rgba(252, 47, 86, 0.2));
to right,
var(--primary-btn-color),
rgba(252, 47, 86, 0.2)
);
padding: 5rem; padding: 5rem;
border-radius: 50rem; border-radius: 50rem;
display: flex; display: flex;
@ -430,9 +370,9 @@
font-weight: bold; font-weight: bold;
font-style: oblique; font-style: oblique;
} }
} }
.barrage { .barrage {
position: fixed; position: fixed;
top: 50%; top: 50%;
transform: translateX(100vw); transform: translateX(100vw);
@ -456,9 +396,9 @@
border-radius: 20rem; border-radius: 20rem;
margin-right: 5rem; margin-right: 5rem;
} }
} }
.user-joined { .user-joined {
@tag-bg: rgba(58, 58, 70, 0.3); @tag-bg: rgba(58, 58, 70, 0.3);
font-size: 12rem; font-size: 12rem;
position: absolute; position: absolute;
@ -520,12 +460,12 @@
.text { .text {
word-break: break-all; word-break: break-all;
} }
} }
</style> </style>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.LivePage { .LivePage {
width: 100vw; width: 100vw;
height: calc(var(--vh, 1vh) * 100); height: calc(var(--vh, 1vh) * 100);
color: white; color: white;
@ -805,11 +745,7 @@
@width: 35rem; @width: 35rem;
.avatar-wrapper { .avatar-wrapper {
background: linear-gradient( background: linear-gradient(to bottom, #000000, var(--primary-btn-color));
to bottom,
#000000,
var(--primary-btn-color)
);
border-radius: 20rem; border-radius: 20rem;
width: calc(@width + 2rem); width: calc(@width + 2rem);
display: flex; display: flex;
@ -818,11 +754,7 @@
justify-content: center; justify-content: center;
&.followed { &.followed {
background: linear-gradient( background: linear-gradient(to bottom, rgba(240, 183, 31, 0.2), rgb(240, 183, 31));
to bottom,
rgba(240, 183, 31, 0.2),
rgb(240, 183, 31)
);
} }
.avatar { .avatar {
@ -874,5 +806,5 @@
} }
} }
} }
} }
</style> </style>

86
src/pages/home/Music.vue
View File

@ -23,18 +23,8 @@
@click.stop="toggleCollect()" @click.stop="toggleCollect()"
/> />
</template> </template>
<div <div class="logo" v-if="!isFixed" @click="$nav('/home/music-rank-list')">抖音音乐榜</div>
class="logo" <img class="share" src="../../assets/img/icon/share-white.png" @click="isSharing = true" />
v-if="!isFixed"
@click="$nav('/home/music-rank-list')"
>
抖音音乐榜
</div>
<img
class="share"
src="../../assets/img/icon/share-white.png"
@click="isSharing = true"
/>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
@ -47,32 +37,17 @@
<div class="desc"> <div class="desc">
<div class="cover-wrapper" @click="togglePlay()"> <div class="cover-wrapper" @click="togglePlay()">
<img class="cover" :src="$imgPreview(music.cover)" alt="" /> <img class="cover" :src="$imgPreview(music.cover)" alt="" />
<img <img v-if="!isPlay" src="../../assets/img/icon/play-white.png" alt="" class="play" />
v-if="!isPlay" <img v-if="isPlay" src="../../assets/img/icon/pause-white.png" alt="" class="play" />
src="../../assets/img/icon/play-white.png"
alt=""
class="play"
/>
<img
v-if="isPlay"
src="../../assets/img/icon/pause-white.png"
alt=""
class="play"
/>
</div> </div>
<div class="info"> <div class="info">
<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"> <div class="peoples">>{{ formatNumber(music.use_count) }} 人使用</div>
>{{ formatNumber(music.use_count) }} 人使用
</div>
</div> </div>
<div class="collection" @click.stop="toggleCollect()"> <div class="collection" @click.stop="toggleCollect()">
<img <img v-if="isCollect" src="../../assets/img/icon/star-yellow.png" />
v-if="isCollect"
src="../../assets/img/icon/star-yellow.png"
/>
<img v-else src="../../assets/img/icon/star-white.png" /> <img v-else src="../../assets/img/icon/star-white.png" />
<span>{{ isCollect ? '已' : '' }}收藏</span> <span>{{ isCollect ? '已' : '' }}收藏</span>
</div> </div>
@ -120,11 +95,7 @@
@cancel="shareType = -1" @cancel="shareType = -1"
> >
<template v-slot:header> <template v-slot:header>
<img <img style="width: 100%" src="../../assets/img/icon/share-password.webp" alt="" />
style="width: 100%"
src="../../assets/img/icon/share-password.webp"
alt=""
/>
</template> </template>
</ConfirmDialog> </ConfirmDialog>
@ -132,17 +103,17 @@
</div> </div>
</template> </template>
<script> <script>
import Posters from '../../components/Posters' import Posters from '../../components/Posters'
import Scroll from '../../components/Scroll' import Scroll from '../../components/Scroll'
import Loading from '../../components/Loading' import Loading from '../../components/Loading'
import Share from '../../components/Share' import Share from '../../components/Share'
import DouyinCode from '../../components/DouyinCode' import DouyinCode from '../../components/DouyinCode'
import ConfirmDialog from '../../components/dialog/ConfirmDialog' import ConfirmDialog from '../../components/dialog/ConfirmDialog'
import ShareToFriend from './components/ShareToFriend' import ShareToFriend from './components/ShareToFriend'
import resource from '../../assets/data/resource' import resource from '../../assets/data/resource'
import { myVideo } from '@/api/videos' import { myVideo } from '@/api/videos'
export default { export default {
name: 'Music', name: 'Music',
components: { components: {
Scroll, Scroll,
@ -151,7 +122,7 @@
Share, Share,
DouyinCode, DouyinCode,
ConfirmDialog, ConfirmDialog,
ShareToFriend, ShareToFriend
}, },
data() { data() {
return { return {
@ -176,14 +147,13 @@
music: { music: {
name: '发如雪', name: '发如雪',
mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3', mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, }
} }
}, },
watch: { watch: {
@ -200,7 +170,7 @@
case 8: case 8:
return (this.okText = '去微博粘贴') return (this.okText = '去微博粘贴')
} }
}, }
}, },
created() { created() {
if (this.$route.query.name) { if (this.$route.query.name) {
@ -224,7 +194,7 @@
this.loading = true this.loading = true
let res = await myVideo({ let res = await myVideo({
pageNo: this.pageNo, pageNo: this.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize
}) })
this.loading = false this.loading = false
if (res.code === this.SUCCESS) { if (res.code === this.SUCCESS) {
@ -252,21 +222,21 @@
stopPlay() { stopPlay() {
this.audio.pause() this.audio.pause()
this.audio.removeEventListener('ended', null) this.audio.removeEventListener('ended', null)
}, }
}, },
unmounted() { unmounted() {
this.stopPlay() this.stopPlay()
}, },
deactivated() { deactivated() {
this.stopPlay() this.stopPlay()
},
} }
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
#Music { #Music {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -428,5 +398,5 @@
color: white; color: white;
} }
} }
} }
</style> </style>

229
src/pages/home/MusicRankList.vue
View File

@ -1,12 +1,6 @@
<template> <template>
<div class="MusicRankList" @scroll="scroll"> <div class="MusicRankList" @scroll="scroll">
<dy-back <dy-back mode="light" img="back" @click="$back()" class="fixed-back" direction="left" />
mode="light"
img="back"
@click="$back()"
class="fixed-back"
direction="left"
/>
<div class="fixed-header" :style="fixedStyle"> <div class="fixed-header" :style="fixedStyle">
<span class="f16">抖音音乐榜</span> <span class="f16">抖音音乐榜</span>
</div> </div>
@ -14,9 +8,7 @@
<div class="content"> <div class="content">
<div class="l-header"> <div class="l-header">
<img src="../../assets/img/icon/music-rank-list.webp" alt="" /> <img src="../../assets/img/icon/music-rank-list.webp" alt="" />
<div class="update-time"> <div class="update-time">更新于：{{ $dateFormat(updateTime, 'D') }}</div>
更新于：{{ $dateFormat(updateTime, 'D') }}
</div>
</div> </div>
<Indicator <Indicator
name="musicRankList" name="musicRankList"
@ -28,11 +20,7 @@
<SlideHorizontal name="musicRankList" v-model:index="contentIndex"> <SlideHorizontal name="musicRankList" v-model:index="contentIndex">
<SlideItem> <SlideItem>
<div class="list"> <div class="list">
<div <div class="item" v-for="(item, index) in hotList" @click="togglePlay(item, hotList)">
class="item"
v-for="(item, index) in hotList"
@click="togglePlay(item, hotList)"
>
<div class="top"> <div class="top">
<div class="rank-wrapper"> <div class="rank-wrapper">
<img <img
@ -58,11 +46,7 @@
<div class="right"> <div class="right">
<div class="music"> <div class="music">
<div class="cover-wrapper"> <div class="cover-wrapper">
<img <img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
v-lazy="$imgPreview(item.cover)"
alt=""
class="cover"
/>
<img <img
v-if="!item.is_play" v-if="!item.is_play"
src="../../assets/img/icon/play-white.png" src="../../assets/img/icon/play-white.png"
@ -83,9 +67,7 @@
<div class="duration"> <div class="duration">
{{ $duration(item.duration) }} {{ $duration(item.duration) }}
</div> </div>
<div class="use_count"> <div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
{{ formatNumber(item.use_count) }}人使用
</div>
</div> </div>
</div> </div>
</div> </div>
@ -112,11 +94,7 @@
</div> </div>
<div class="bottom" v-if="item.is_collect"> <div class="bottom" v-if="item.is_collect">
<div class="left"> <div class="left">
<img <img src="../../assets/img/music-cover/2.jpg" alt="" class="avatar" />
src="../../assets/img/music-cover/2.jpg"
alt=""
class="avatar"
/>
<div class="desc"> <div class="desc">
<div class="name">{{ item.author }}</div> <div class="name">{{ item.author }}</div>
<div class="follow_count">粉丝：83.4w</div> <div class="follow_count">粉丝：83.4w</div>
@ -130,11 +108,7 @@
</SlideItem> </SlideItem>
<SlideItem> <SlideItem>
<div class="list"> <div class="list">
<div <div class="item" v-for="(item, index) in hotList" @click="togglePlay(item, hotList)">
class="item"
v-for="(item, index) in hotList"
@click="togglePlay(item, hotList)"
>
<div class="top"> <div class="top">
<div class="rank-wrapper"> <div class="rank-wrapper">
<img <img
@ -160,11 +134,7 @@
<div class="right"> <div class="right">
<div class="music"> <div class="music">
<div class="cover-wrapper"> <div class="cover-wrapper">
<img <img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
v-lazy="$imgPreview(item.cover)"
alt=""
class="cover"
/>
<img <img
v-if="!item.is_play" v-if="!item.is_play"
src="../../assets/img/icon/play-white.png" src="../../assets/img/icon/play-white.png"
@ -185,9 +155,7 @@
<div class="duration"> <div class="duration">
{{ $duration(item.duration) }} {{ $duration(item.duration) }}
</div> </div>
<div class="use_count"> <div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
{{ formatNumber(item.use_count) }}人使用
</div>
</div> </div>
</div> </div>
</div> </div>
@ -214,11 +182,7 @@
</div> </div>
<div class="bottom" v-if="item.is_collect"> <div class="bottom" v-if="item.is_collect">
<div class="left"> <div class="left">
<img <img src="../../assets/img/music-cover/2.jpg" alt="" class="avatar" />
src="../../assets/img/music-cover/2.jpg"
alt=""
class="avatar"
/>
<div class="desc"> <div class="desc">
<div class="name">{{ item.author }}</div> <div class="name">{{ item.author }}</div>
<div class="follow_count">粉丝：83.4w</div> <div class="follow_count">粉丝：83.4w</div>
@ -232,11 +196,7 @@
</SlideItem> </SlideItem>
<SlideItem> <SlideItem>
<div class="list"> <div class="list">
<div <div class="item" v-for="(item, index) in hotList" @click="togglePlay(item, hotList)">
class="item"
v-for="(item, index) in hotList"
@click="togglePlay(item, hotList)"
>
<div class="top"> <div class="top">
<div class="rank-wrapper"> <div class="rank-wrapper">
<img <img
@ -262,11 +222,7 @@
<div class="right"> <div class="right">
<div class="music"> <div class="music">
<div class="cover-wrapper"> <div class="cover-wrapper">
<img <img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
v-lazy="$imgPreview(item.cover)"
alt=""
class="cover"
/>
<img <img
v-if="!item.is_play" v-if="!item.is_play"
src="../../assets/img/icon/play-white.png" src="../../assets/img/icon/play-white.png"
@ -287,9 +243,7 @@
<div class="duration"> <div class="duration">
{{ $duration(item.duration) }} {{ $duration(item.duration) }}
</div> </div>
<div class="use_count"> <div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
{{ formatNumber(item.use_count) }}人使用
</div>
</div> </div>
</div> </div>
</div> </div>
@ -316,11 +270,7 @@
</div> </div>
<div class="bottom" v-if="item.is_collect"> <div class="bottom" v-if="item.is_collect">
<div class="left"> <div class="left">
<img <img src="../../assets/img/music-cover/2.jpg" alt="" class="avatar" />
src="../../assets/img/music-cover/2.jpg"
alt=""
class="avatar"
/>
<div class="desc"> <div class="desc">
<div class="name">{{ item.author }}</div> <div class="name">{{ item.author }}</div>
<div class="follow_count">粉丝：83.4w</div> <div class="follow_count">粉丝：83.4w</div>
@ -337,7 +287,7 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'MusicRankList', name: 'MusicRankList',
components: {}, components: {},
data() { data() {
@ -347,255 +297,198 @@
{ {
name: '龙卷风', name: '龙卷风',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url).href,
'../../assets/img/music-cover/1.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 99, duration: 99,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '爱在西元前', name: '爱在西元前',
mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3', mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url).href,
'../../assets/img/music-cover/2.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '蜗牛', name: '蜗牛',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url).href,
'../../assets/img/music-cover/3.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '半岛铁盒', name: '半岛铁盒',
mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3', mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url).href,
'../../assets/img/music-cover/4.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '轨迹', name: '轨迹',
mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3', mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url).href,
'../../assets/img/music-cover/5.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '七里香', name: '七里香',
mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3', mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url).href,
'../../assets/img/music-cover/6.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '发如雪', name: '发如雪',
mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3', mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
'../../assets/img/music-cover/7.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '霍元甲', name: '霍元甲',
mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3', mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url).href,
'../../assets/img/music-cover/8.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '千里之外(周杰伦/费玉清)', name: '千里之外(周杰伦/费玉清)',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url).href,
'../../assets/img/music-cover/9.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '菊花台', name: '菊花台',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url).href,
'../../assets/img/music-cover/10.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '不能说的秘密', name: '不能说的秘密',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url).href,
'../../assets/img/music-cover/11.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '牛仔很忙', name: '牛仔很忙',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url).href,
'../../assets/img/music-cover/12.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '给我一首歌的时间', name: '给我一首歌的时间',
mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3', mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url).href,
'../../assets/img/music-cover/13.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '烟花易冷', name: '烟花易冷',
mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3', mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url).href,
'../../assets/img/music-cover/14.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '惊叹号', name: '惊叹号',
mp3: 'https://m3.8js.net:99/20111103/150.mp3', mp3: 'https://m3.8js.net:99/20111103/150.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url).href,
'../../assets/img/music-cover/15.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '明明就', name: '明明就',
mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3', mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url).href,
'../../assets/img/music-cover/16.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '算什么男人', name: '算什么男人',
mp3: 'https://m3.8js.net:99/20150107/429.mp3', mp3: 'https://m3.8js.net:99/20150107/429.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url).href,
'../../assets/img/music-cover/17.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '告白气球', name: '告白气球',
mp3: 'https://m3.8js.net:99/20161016/481.mp3', mp3: 'https://m3.8js.net:99/20161016/481.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url).href,
'../../assets/img/music-cover/18.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, }
], ],
updateTime: Date.now(), updateTime: Date.now(),
audio: new Audio(), audio: new Audio(),
scrollTop: -1, scrollTop: -1
} }
}, },
computed: { computed: {
fixedStyle() { fixedStyle() {
return { return {
opacity: this.scrollTop / 120 > 1 ? 1 : this.scrollTop / 120, opacity: this.scrollTop / 120 > 1 ? 1 : this.scrollTop / 120
}
} }
}, },
},
created() { created() {
this.hotList = this.hotList this.hotList = this.hotList.concat(this.hotList).concat(this.hotList).concat(this.hotList)
.concat(this.hotList)
.concat(this.hotList)
.concat(this.hotList)
this.hotList = this.hotList.slice(0, 50) this.hotList = this.hotList.slice(0, 50)
}, },
methods: { methods: {
@ -631,21 +524,21 @@
this.audio.pause() this.audio.pause()
this.audio.currentTime = 0 this.audio.currentTime = 0
this.audio.removeEventListener('ended', null) this.audio.removeEventListener('ended', null)
}, }
}, },
unmounted() { unmounted() {
this.stopPlay() this.stopPlay()
}, },
deactivated() { deactivated() {
this.stopPlay() this.stopPlay()
},
} }
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.MusicRankList { .MusicRankList {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -841,5 +734,5 @@
} }
} }
} }
} }
</style> </style>

34
src/pages/home/Publish.vue
View File

@ -1,10 +1,6 @@
<template> <template>
<div class="Publish"> <div class="Publish">
<video <video id="video" autoplay="autoplay" style="width: 100%; height: calc(100% - 60rem)"></video>
id="video"
autoplay="autoplay"
style="width: 100%; height: calc(100% - 60rem)"
></video>
<div class="footer"> <div class="footer">
<SlideHorizontal style="height: 60rem" v-model:index="activeIndex"> <SlideHorizontal style="height: 60rem" v-model:index="activeIndex">
<SlideItem style="width: 20vw"></SlideItem> <SlideItem style="width: 20vw"></SlideItem>
@ -53,11 +49,11 @@
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'pinia' import { mapState } from 'pinia'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
//访问用户媒体设备的兼容方法 //访问用户媒体设备的兼容方法
function getUserMedia(constrains, success, error) { function getUserMedia(constrains, success, error) {
if (navigator.mediaDevices.getUserMedia) { if (navigator.mediaDevices.getUserMedia) {
//最新标准API //最新标准API
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error) navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error)
@ -71,18 +67,18 @@
//旧版API //旧版API
navigator.getUserMedia(constrains).then(success).catch(error) navigator.getUserMedia(constrains).then(success).catch(error)
} }
} }
export default { export default {
name: 'Publish', name: 'Publish',
data() { data() {
return { return {
video: null, video: null,
activeIndex: 1, activeIndex: 1
} }
}, },
computed: { computed: {
...mapState(useBaseStore, ['bodyHeight', 'bodyWidth']), ...mapState(useBaseStore, ['bodyHeight', 'bodyWidth'])
}, },
mounted() { mounted() {
//获得video摄像头区域 //获得video摄像头区域
@ -103,20 +99,20 @@
}, },
function (PermissionDeniedError) { function (PermissionDeniedError) {
console.log(PermissionDeniedError) console.log(PermissionDeniedError)
}, }
) )
} catch (e) { } catch (e) {
console.log('e', e) console.log('e', e)
} }
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.Publish { .Publish {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -189,5 +185,5 @@
} }
} }
} }
} }
</style> </style>

112
src/pages/home/Report.vue
View File

@ -13,75 +13,43 @@
<div class="title"> <div class="title">
<span>内容违规</span> <span>内容违规</span>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '色情低俗', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '色情低俗', mode })"
>
<span>色情低俗</span> <span>色情低俗</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '时政不实信息', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '时政不实信息', mode })"
>
<span>时政不实信息</span> <span>时政不实信息</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '违法犯罪', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '违法犯罪', mode })"
>
<span>违法犯罪</span> <span>违法犯罪</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '垃圾广告、售卖假货等', mode })">
class="row"
@click="
$nav('/home/submit-report', { type: '垃圾广告、售卖假货等', mode })
"
>
<span>垃圾广告、售卖假货等</span> <span>垃圾广告、售卖假货等</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '造谣传播', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '造谣传播', mode })"
>
<span>造谣传播</span> <span>造谣传播</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '涉嫌欺诈', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '涉嫌欺诈', mode })"
>
<span>涉嫌欺诈</span> <span>涉嫌欺诈</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '侮辱漫骂', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '侮辱漫骂', mode })"
>
<span>侮辱漫骂</span> <span>侮辱漫骂</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '危险行为', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '危险行为', mode })"
>
<span>危险行为</span> <span>危险行为</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '涉嫌非法集资', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '涉嫌非法集资', mode })"
>
<span>涉嫌非法集资</span> <span>涉嫌非法集资</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '价值观导向不良', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '价值观导向不良', mode })"
>
<span>价值观导向不良</span> <span>价值观导向不良</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
@ -95,24 +63,18 @@
@click=" @click="
$nav('/home/submit-report', { $nav('/home/submit-report', {
type: '侵犯名誉、隐私、肖像权等', type: '侵犯名誉、隐私、肖像权等',
mode, mode
}) })
" "
> >
<span>侵犯名誉、隐私、肖像权等</span> <span>侵犯名誉、隐私、肖像权等</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '内容盗用本人作品', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '内容盗用本人作品', mode })"
>
<span>内容盗用本人作品</span> <span>内容盗用本人作品</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '内容盗用他人作品', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '内容盗用他人作品', mode })"
>
<span>内容盗用他人作品</span> <span>内容盗用他人作品</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
@ -120,19 +82,11 @@
<div class="title"> <div class="title">
<span>未成年</span> <span>未成年</span>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '未成年人不当行为', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '未成年人不当行为', mode })"
>
<span>未成年人不当行为</span> <span>未成年人不当行为</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '内容不适合未成年观看', mode })">
class="row"
@click="
$nav('/home/submit-report', { type: '内容不适合未成年观看', mode })
"
>
<span>内容不适合未成年观看</span> <span>内容不适合未成年观看</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
@ -140,33 +94,19 @@
<div class="title"> <div class="title">
<span>其他</span> <span>其他</span>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '引人不适', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '引人不适', mode })"
>
<span>引人不适</span> <span>引人不适</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '疑似自我伤害', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '疑似自我伤害', mode })"
>
<span>疑似自我伤害</span> <span>疑似自我伤害</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '诱导点赞、分享、关注', mode })">
class="row"
@click="
$nav('/home/submit-report', { type: '诱导点赞、分享、关注', mode })
"
>
<span>诱导点赞、分享、关注</span> <span>诱导点赞、分享、关注</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
<div <div class="row" @click="$nav('/home/submit-report', { type: '其他', mode })">
class="row"
@click="$nav('/home/submit-report', { type: '其他', mode })"
>
<span>其他</span> <span>其他</span>
<dy-back scale=".8" direction="right"></dy-back> <dy-back scale=".8" direction="right"></dy-back>
</div> </div>
@ -174,12 +114,12 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'Report', name: 'Report',
props: {}, props: {},
data() { data() {
return { return {
mode: 'video', mode: 'video'
} }
}, },
computed: {}, computed: {},
@ -187,14 +127,14 @@
this.mode = this.$route.query.mode this.mode = this.$route.query.mode
}, },
activated() {}, activated() {},
methods: {}, methods: {}
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.Report { .Report {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -225,5 +165,5 @@
margin-left: 15rem; margin-left: 15rem;
background: var(--line-color); background: var(--line-color);
} }
} }
</style> </style>

318
src/pages/home/SearchPage.vue
View File

@ -2,12 +2,7 @@
<div class="Search"> <div class="Search">
<div class="header"> <div class="header">
<dy-back mode="light" @click="$back" class="mr1r"></dy-back> <dy-back mode="light" @click="$back" class="mr1r"></dy-back>
<BSearch <BSearch placeholder="搜索用户名字/抖音号" :isShowRightText="true" @notice="$no"> </BSearch>
placeholder="搜索用户名字/抖音号"
:isShowRightText="true"
@notice="$no"
>
</BSearch>
</div> </div>
<div class="content"> <div class="content">
<div class="history"> <div class="history">
@ -16,12 +11,7 @@
<img src="../../assets/img/icon/home/time-white.png" alt="" /> <img src="../../assets/img/icon/home/time-white.png" alt="" />
<span> {{ item }}</span> <span> {{ item }}</span>
</div> </div>
<dy-back <dy-back img="close" mode="gray" @click="history.splice(index, 1)" scale=".7"></dy-back>
img="close"
mode="gray"
@click="history.splice(index, 1)"
scale=".7"
></dy-back>
</div> </div>
<div v-if="history.length > 2" class="history-expand" @click="toggle"> <div v-if="history.length > 2" class="history-expand" @click="toggle">
{{ isExpand ? '清除全部搜索记录' : '展开全部' }} {{ isExpand ? '清除全部搜索记录' : '展开全部' }}
@ -31,10 +21,7 @@
<div class="title"> <div class="title">
<div class="left">猜你想搜</div> <div class="left">猜你想搜</div>
<div class="right" @click.stop="refresh"> <div class="right" @click.stop="refresh">
<img <img class="scan" src="../../assets/img/icon/home/refresh-gray.png" />
class="scan"
src="../../assets/img/icon/home/refresh-gray.png"
/>
<span>换一换</span> <span>换一换</span>
</div> </div>
</div> </div>
@ -52,32 +39,16 @@
</div> </div>
<div class="rank-list"> <div class="rank-list">
<div class="indicator"> <div class="indicator">
<div <div class="tab" :class="{ active: slideIndex === 0 }" @click="slideIndex = 0">
class="tab"
:class="{ active: slideIndex === 0 }"
@click="slideIndex = 0"
>
抖音热榜 抖音热榜
</div> </div>
<div <div class="tab" :class="{ active: slideIndex === 1 }" @click="slideIndex = 1">
class="tab"
:class="{ active: slideIndex === 1 }"
@click="slideIndex = 1"
>
直播榜 直播榜
</div> </div>
<div <div class="tab" :class="{ active: slideIndex === 2 }" @click="slideIndex = 2">
class="tab"
:class="{ active: slideIndex === 2 }"
@click="slideIndex = 2"
>
音乐榜 音乐榜
</div> </div>
<div <div class="tab" :class="{ active: slideIndex === 3 }" @click="slideIndex = 3">
class="tab"
:class="{ active: slideIndex === 3 }"
@click="slideIndex = 3"
>
品牌榜 品牌榜
</div> </div>
</div> </div>
@ -87,10 +58,7 @@
<div class="slide0" ref="slide0"> <div class="slide0" ref="slide0">
<div class="l-row"> <div class="l-row">
<div class="rank-wrapper"> <div class="rank-wrapper">
<img <img src="../../assets/img/icon/home/to-top-yellow.png" class="rank" />
src="../../assets/img/icon/home/to-top-yellow.png"
class="rank"
/>
</div> </div>
<div class="right"> <div class="right">
<div class="center"> <div class="center">
@ -153,25 +121,15 @@
<div class="right"> <div class="right">
<div class="center"> <div class="center">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img <img src="../../assets/img/icon/avatar/1.png" alt="" class="avatar" />
src="../../assets/img/icon/avatar/1.png"
alt=""
class="avatar"
/>
</div> </div>
<div class="desc">{{ item.name }}</div> <div class="desc">{{ item.name }}</div>
<div v-if="item.type === 0" class="live-type"> <div v-if="item.type === 0" class="live-type">
<img <img class="type1" src="../../assets/img/icon/home/pk.webp" />
class="type1"
src="../../assets/img/icon/home/pk.webp"
/>
<span>PK</span> <span>PK</span>
</div> </div>
<div v-if="item.type === 1" class="live-type"> <div v-if="item.type === 1" class="live-type">
<img <img class="type2" src="../../assets/img/icon/home/redpack.png" />
class="type2"
src="../../assets/img/icon/home/redpack.png"
/>
<span>红包</span> <span>红包</span>
</div> </div>
</div> </div>
@ -196,11 +154,7 @@
<div class="right"> <div class="right">
<div class="center"> <div class="center">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img <img v-lazy="$imgPreview(item.cover)" alt="" class="avatar" />
v-lazy="$imgPreview(item.cover)"
alt=""
class="avatar"
/>
</div> </div>
<div class="desc">{{ item.name }}</div> <div class="desc">{{ item.name }}</div>
</div> </div>
@ -210,9 +164,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="more" @click="$nav('/home/music-rank-list')"> <div class="more" @click="$nav('/home/music-rank-list')">查看完整音乐榜 ></div>
查看完整音乐榜 >
</div>
</div> </div>
</SlideItem> </SlideItem>
<SlideItem> <SlideItem>
@ -236,25 +188,15 @@
</div> </div>
<div class="right"> <div class="right">
<div class="center"> <div class="center">
<div <div class="avatar-wrapper" :class="item.living ? 'living' : ''">
class="avatar-wrapper"
:class="item.living ? 'living' : ''"
>
<div class="avatar-out-line"></div> <div class="avatar-out-line"></div>
<img <img v-lazy="$imgPreview(item.logo)" alt="" class="avatar" />
v-lazy="$imgPreview(item.logo)"
alt=""
class="avatar"
/>
<!-- <img :src="item.logo" class="avatar">--> <!-- <img :src="item.logo" class="avatar">-->
</div> </div>
<div class="desc">{{ item.name }}</div> <div class="desc">{{ item.name }}</div>
</div> </div>
<div class="count"> <div class="count">
<img <img src="../../assets/img/icon/home/hot-gray.png" alt="" />
src="../../assets/img/icon/home/hot-gray.png"
alt=""
/>
<span>{{ formatNumber(item.hot_count) }}</span> <span>{{ formatNumber(item.hot_count) }}</span>
</div> </div>
</div> </div>
@ -296,15 +238,15 @@
</div> </div>
</template> </template>
<script> <script>
import Search from '../../components/Search' import Search from '../../components/Search'
import Dom from '../../utils/dom' import Dom from '../../utils/dom'
import { nextTick } from 'vue' import { nextTick } from 'vue'
import { sampleSize } from '@/utils' import { sampleSize } from '@/utils'
export default { export default {
name: 'SearchPage', name: 'SearchPage',
components: { components: {
BSearch: Search, BSearch: Search
}, },
data() { data() {
return { return {
@ -319,7 +261,7 @@
'历史记录7', '历史记录7',
'历史记录8', '历史记录8',
'历史记录9', '历史记录9',
'历史记录10', '历史记录10'
], ],
guess: [ guess: [
{ name: '少年透明人', type: -1 }, { name: '少年透明人', type: -1 },
@ -335,7 +277,7 @@
{ name: '一公司放假通知走红', type: -1 }, { name: '一公司放假通知走红', type: -1 },
{ name: '成都新全优教育倒闭', type: -1 }, { name: '成都新全优教育倒闭', type: -1 },
{ name: '当代女生社交现状', type: -1 }, { name: '当代女生社交现状', type: -1 },
{ name: '恒大集团凌晨发公告', type: -1 }, { name: '恒大集团凌晨发公告', type: -1 }
], ],
randomGuess: [], randomGuess: [],
hotRankList: [ hotRankList: [
@ -357,30 +299,30 @@
{ name: '得鼻炎了, 说下症状和应对吧', type: 1 }, { name: '得鼻炎了, 说下症状和应对吧', type: 1 },
{ {
name: '打翻了一瓶矿泉水在 MacBook Pro 上，赶紧用鼠标关机了，等多久可以尝试开机？', name: '打翻了一瓶矿泉水在 MacBook Pro 上，赶紧用鼠标关机了，等多久可以尝试开机？',
type: 0, type: 0
}, },
{ name: '筋膜枪哪个牌子好啊？', type: -1 }, { name: '筋膜枪哪个牌子好啊？', type: -1 },
{ {
name: '最近在学理财小白基础知识，然后请教大家办哪个证券账户比较好呀', name: '最近在学理财小白基础知识，然后请教大家办哪个证券账户比较好呀',
type: -1, type: -1
}, },
{ {
name: '有没有长期使用 sidecar 功能的 V 友，这个东西长期的稳定性如何？', name: '有没有长期使用 sidecar 功能的 V 友，这个东西长期的稳定性如何？',
type: 0, type: 0
}, },
{ name: '犹豫是否要年年焕新', type: -1 }, { name: '犹豫是否要年年焕新', type: -1 },
{ name: '请问如何在国内给 AppStore HK/TW 区充值.', type: 0 }, { name: '请问如何在国内给 AppStore HK/TW 区充值.', type: 0 },
{ name: '最近感觉一个妹子不错，不过我比她大 5 岁', type: 1 }, { name: '最近感觉一个妹子不错，不过我比她大 5 岁', type: 1 },
{ {
name: '12mini 1 月 20 号购入，现在电池健康 92%，正常现象？', name: '12mini 1 月 20 号购入，现在电池健康 92%，正常现象？',
type: -1, type: -1
}, },
{ name: '现在新 iphone12/128 啥价格比较合适啊？', type: -1 }, { name: '现在新 iphone12/128 啥价格比较合适啊？', type: -1 },
{ name: 'iOS 15 不改地区就能看到全球所有交通卡', type: -1 }, { name: 'iOS 15 不改地区就能看到全球所有交通卡', type: -1 },
{ name: '求推荐拼车/打车软件', type: 1 }, { name: '求推荐拼车/打车软件', type: 1 },
{ name: '如何比较方便的杀死 nohup 起的进程及其所有子进程?', type: 0 }, { name: '如何比较方便的杀死 nohup 起的进程及其所有子进程?', type: 0 },
{ name: '换了新工作，好像又掉坑里了。', type: 0 }, { name: '换了新工作，好像又掉坑里了。', type: 0 },
{ name: '有没有这样一款记账软件？', type: 1 }, { name: '有没有这样一款记账软件？', type: 1 }
], ],
liveRankList: [ liveRankList: [
{ name: '毛三岁（收女徒弟）', type: 0 }, { name: '毛三岁（收女徒弟）', type: 0 },
@ -412,243 +354,189 @@
{ name: 'pigff', type: -1 }, { name: 'pigff', type: -1 },
{ name: '正经人令北', type: -1 }, { name: '正经人令北', type: -1 },
{ name: '雨神丶', type: -1 }, { name: '雨神丶', type: -1 },
{ name: '智勋勋勋勋', type: 0 }, { name: '智勋勋勋勋', type: 0 }
], ],
musicRankList: [ musicRankList: [
{ {
name: '龙卷风', name: '龙卷风',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url).href,
'../../assets/img/music-cover/1.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 99, duration: 99,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '爱在西元前', name: '爱在西元前',
mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3', mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url).href,
'../../assets/img/music-cover/2.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '蜗牛', name: '蜗牛',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url).href,
'../../assets/img/music-cover/3.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '半岛铁盒', name: '半岛铁盒',
mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3', mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url).href,
'../../assets/img/music-cover/4.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '轨迹', name: '轨迹',
mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3', mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url).href,
'../../assets/img/music-cover/5.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '七里香', name: '七里香',
mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3', mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url).href,
'../../assets/img/music-cover/6.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '发如雪', name: '发如雪',
mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3', mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
'../../assets/img/music-cover/7.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '霍元甲', name: '霍元甲',
mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3', mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url).href,
'../../assets/img/music-cover/8.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '千里之外(周杰伦/费玉清)', name: '千里之外(周杰伦/费玉清)',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url).href,
'../../assets/img/music-cover/9.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '菊花台', name: '菊花台',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url).href,
'../../assets/img/music-cover/10.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '不能说的秘密', name: '不能说的秘密',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url).href,
'../../assets/img/music-cover/11.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '牛仔很忙', name: '牛仔很忙',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3', mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url).href,
'../../assets/img/music-cover/12.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '给我一首歌的时间', name: '给我一首歌的时间',
mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3', mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url).href,
'../../assets/img/music-cover/13.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '烟花易冷', name: '烟花易冷',
mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3', mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url).href,
'../../assets/img/music-cover/14.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '惊叹号', name: '惊叹号',
mp3: 'https://m3.8js.net:99/20111103/150.mp3', mp3: 'https://m3.8js.net:99/20111103/150.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url).href,
'../../assets/img/music-cover/15.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '明明就', name: '明明就',
mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3', mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url).href,
'../../assets/img/music-cover/16.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '算什么男人', name: '算什么男人',
mp3: 'https://m3.8js.net:99/20150107/429.mp3', mp3: 'https://m3.8js.net:99/20150107/429.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url).href,
'../../assets/img/music-cover/17.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
{ {
name: '告白气球', name: '告白气球',
mp3: 'https://m3.8js.net:99/20161016/481.mp3', mp3: 'https://m3.8js.net:99/20161016/481.mp3',
cover: new URL( cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url).href,
'../../assets/img/music-cover/18.jpg',
import.meta.url,
).href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, }
], ],
brandRankList: { brandRankList: {
汽车: [ 汽车: [
@ -656,103 +544,103 @@
name: '五菱汽车', name: '五菱汽车',
logo: 'https://www.wuling.com/favicon.ico', logo: 'https://www.wuling.com/favicon.ico',
hot_count: 1395, hot_count: 1395,
living: false, living: false
}, },
{ {
name: '宝马', name: '宝马',
logo: 'https://www.bmw.com.cn/etc/clientlibs/digitals2/clientlib/media/img/BMW_Grey_Logo.svg', logo: 'https://www.bmw.com.cn/etc/clientlibs/digitals2/clientlib/media/img/BMW_Grey_Logo.svg',
hot_count: 1395, hot_count: 1395,
living: true, living: true
}, },
{ {
name: '吉利汽车', name: '吉利汽车',
logo: 'http://www.cargc.com/uploads/allimg/200828/1401364511-2.jpg', logo: 'http://www.cargc.com/uploads/allimg/200828/1401364511-2.jpg',
hot_count: 1395, hot_count: 1395,
living: false, living: false
}, },
{ {
name: '一汽大众-奥迪', name: '一汽大众-奥迪',
logo: 'https://www.audi.cn/bin/nemo.static.20210916063431/cms4i-nemo/assets/icons/favicon/favicon-v4.ico', logo: 'https://www.audi.cn/bin/nemo.static.20210916063431/cms4i-nemo/assets/icons/favicon/favicon-v4.ico',
hot_count: 1395, hot_count: 1395,
living: false, living: false
}, },
{ {
name: '一汽-大众', name: '一汽-大众',
logo: 'https://www.vw.com.cn/favicon.ico', logo: 'https://www.vw.com.cn/favicon.ico',
hot_count: 1395, hot_count: 1395,
living: false, living: false
}, }
], ],
手机: [ 手机: [
{ {
name: '华为', name: '华为',
logo: 'https://isesglobal.com/wp-content/uploads/2021/01/Huawei.jpg', logo: 'https://isesglobal.com/wp-content/uploads/2021/01/Huawei.jpg',
hot_count: 1395, hot_count: 1395,
living: false, living: false
}, },
{ {
name: '小米', name: '小米',
logo: 'https://s01.mifile.cn/favicon.ico', logo: 'https://s01.mifile.cn/favicon.ico',
hot_count: 1395, hot_count: 1395,
living: true, living: true
}, },
{ {
name: 'vivo', name: 'vivo',
logo: 'http://wwwstatic.vivo.com.cn/vivoportal/web/dist/img/common/favicon_ecf768e.ico', logo: 'http://wwwstatic.vivo.com.cn/vivoportal/web/dist/img/common/favicon_ecf768e.ico',
hot_count: 1395, hot_count: 1395,
living: false, living: false
}, },
{ {
name: 'oppo', name: 'oppo',
logo: 'https://code.oppo.com/etc.clientlibs/global-site/clientlibs/clientlib-design/resources/icons/favicon.ico', logo: 'https://code.oppo.com/etc.clientlibs/global-site/clientlibs/clientlib-design/resources/icons/favicon.ico',
hot_count: 1395, hot_count: 1395,
living: false, living: false
}, },
{ {
name: '三星', name: '三星',
logo: 'https://www.samsung.com/etc.clientlibs/samsung/clientlibs/consumer/global/clientlib-common/resources/images/Favicon.png', logo: 'https://www.samsung.com/etc.clientlibs/samsung/clientlibs/consumer/global/clientlib-common/resources/images/Favicon.png',
hot_count: 1395, hot_count: 1395,
living: false, living: false
}, }
], ],
美妆: [ 美妆: [
{ {
name: '巴黎欧莱雅', name: '巴黎欧莱雅',
logo: 'https://oap-cn-prd-cd.e-loreal.cn/-/media/project/loreal/brand-sites/oap/apac/cn/identity/image-2020-06-19-20-48-00-996.png', logo: 'https://oap-cn-prd-cd.e-loreal.cn/-/media/project/loreal/brand-sites/oap/apac/cn/identity/image-2020-06-19-20-48-00-996.png',
hot_count: 1395, hot_count: 1395,
living: false, living: false
}, },
{ {
name: '花西子', name: '花西子',
logo: 'https://www.haoyunbb.com/img/allimg/210607/001I43462-0.png', logo: 'https://www.haoyunbb.com/img/allimg/210607/001I43462-0.png',
hot_count: 1395, hot_count: 1395,
living: false, living: false
}, },
{ {
name: '完美日记', name: '完美日记',
logo: 'http://5b0988e595225.cdn.sohucs.com/images/20200412/9c6caafca79e438f98d98d3986ebce4d.png', logo: 'http://5b0988e595225.cdn.sohucs.com/images/20200412/9c6caafca79e438f98d98d3986ebce4d.png',
hot_count: 1395, hot_count: 1395,
living: false, living: false
}, },
{ {
name: '雅诗兰黛', name: '雅诗兰黛',
logo: 'https://vipyidiancom.oss-cn-beijing.aliyuncs.com/vipyidian.com/article/1_150918143107_1.png', logo: 'https://vipyidiancom.oss-cn-beijing.aliyuncs.com/vipyidian.com/article/1_150918143107_1.png',
hot_count: 1395, hot_count: 1395,
living: false, living: false
}, },
{ {
name: 'COLORKEY珂拉琪', name: 'COLORKEY珂拉琪',
logo: 'https://www.80wzbk.com/uploads/logo/20210129/20210129104015_541.jpg', logo: 'https://www.80wzbk.com/uploads/logo/20210129/20210129104015_541.jpg',
hot_count: 1395, hot_count: 1395,
living: false, living: false
}, }
], ]
}, },
selectBrandKey: '汽车', selectBrandKey: '汽车',
selectBrandKeyIndex: 0, selectBrandKeyIndex: 0,
slideIndex: 0, slideIndex: 0,
timer: null, timer: null,
slideItemHeight: null, slideItemHeight: null
} }
}, },
computed: { computed: {
@ -773,9 +661,9 @@
}, },
slideListHeight() { slideListHeight() {
return { return {
height: this.slideItemHeight ? this.slideItemHeight + 'px' : '100%', height: this.slideItemHeight ? this.slideItemHeight + 'px' : '100%'
}
} }
},
}, },
watch: { watch: {
slideIndex: { slideIndex: {
@ -799,8 +687,8 @@
clearInterval(this.timer) clearInterval(this.timer)
} }
}, },
immediate: true, immediate: true
}, }
}, },
created() { created() {
this.history = this.history.reverse() this.history = this.history.reverse()
@ -823,20 +711,20 @@
}, },
null, null,
'确定', '确定',
'取消', '取消'
) )
} else { } else {
this.isExpand = true this.isExpand = true
} }
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.Search { .Search {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -970,11 +858,7 @@
&:nth-child(1) { &:nth-child(1) {
&.active { &.active {
font-weight: bold; font-weight: bold;
background: linear-gradient( background: linear-gradient(to right, rgb(255, 165, 71), rgb(218, 77, 115));
to right,
rgb(255, 165, 71),
rgb(218, 77, 115)
);
-webkit-background-clip: text; -webkit-background-clip: text;
color: transparent; color: transparent;
} }
@ -985,11 +869,7 @@
.slide0 { .slide0 {
box-sizing: border-box; box-sizing: border-box;
margin: 0 var(--page-padding) 50rem var(--page-padding); margin: 0 var(--page-padding) 50rem var(--page-padding);
background: linear-gradient( background: linear-gradient(to right, rgb(32, 29, 36), rgb(50, 29, 38));
to right,
rgb(32, 29, 36),
rgb(50, 29, 38)
);
padding: var(--page-padding); padding: var(--page-padding);
border-radius: 10rem; border-radius: 10rem;
@ -1416,5 +1296,5 @@
} }
} }
} }
} }
</style> </style>

19
src/pages/home/SubmitReport.vue
View File

@ -53,7 +53,7 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'Report', name: 'Report',
props: {}, props: {},
data() { data() {
@ -61,7 +61,7 @@
type: '色情低俗', type: '色情低俗',
mode: 'video', mode: 'video',
desc: '', desc: '',
photos: [], photos: []
} }
}, },
computed: {}, computed: {},
@ -75,20 +75,17 @@
await this.$sleep(500) await this.$sleep(500)
this.$hideLoading() this.$hideLoading()
this.photos.push( this.photos.push(
new URL( new URL(`../../assets/img/poster/${this.photos.length}.jpg`, import.meta.url).href
`../../assets/img/poster/${this.photos.length}.jpg`,
import.meta.url,
).href,
) )
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.Report { .Report {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -203,5 +200,5 @@
right: 15rem; right: 15rem;
bottom: 15rem; bottom: 15rem;
} }
} }
</style> </style>

93
src/pages/home/components/FollowSetting.vue
View File

@ -13,47 +13,25 @@
<div class="dialog-header"> <div class="dialog-header">
<div class="title-wrapper"> <div class="title-wrapper">
<span class="title">{{ currentItem.author.nickname }}</span> <span class="title">{{ currentItem.author.nickname }}</span>
<span class="subtitle" <span class="subtitle">抖音号：{{ _getUserDouyinId(currentItem) }}</span>
>抖音号：{{ _getUserDouyinId(currentItem) }}</span
>
</div> </div>
<dy-back <dy-back mode="dark" img="close" direction="right" @click="cancel()"></dy-back>
mode="dark"
img="close"
direction="right"
@click="cancel()"
></dy-back>
</div> </div>
<div class="options"> <div class="options">
<div class="option" @click="cancel((e) => $emit('showShare'))"> <div class="option" @click="cancel((e) => $emit('showShare'))">
<img <img src="../../../assets/img/icon/components/follow/share.png" alt="" />
src="../../../assets/img/icon/components/follow/share.png"
alt=""
/>
<span>分享主页</span> <span>分享主页</span>
</div> </div>
<div class="option" @click="cancel((e) => $nav('/message/chat'))"> <div class="option" @click="cancel((e) => $nav('/message/chat'))">
<img <img src="../../../assets/img/icon/components/follow/private-chat.png" alt="" />
src="../../../assets/img/icon/components/follow/private-chat.png"
alt=""
/>
<span>发私信</span> <span>发私信</span>
</div> </div>
<div <div class="option" @click="cancel((e) => $nav('/home/report', { mode: 'chat' }))">
class="option" <img src="../../../assets/img/icon/components/follow/report.png" alt="" />
@click="cancel((e) => $nav('/home/report', { mode: 'chat' }))"
>
<img
src="../../../assets/img/icon/components/follow/report.png"
alt=""
/>
<span>举报</span> <span>举报</span>
</div> </div>
<div class="option" @click="cancel((e) => $emit('showBlockDialog'))"> <div class="option" @click="cancel((e) => $emit('showBlockDialog'))">
<img <img src="../../../assets/img/icon/components/follow/forbid.png" alt="" />
src="../../../assets/img/icon/components/follow/forbid.png"
alt=""
/>
<span>拉黑</span> <span>拉黑</span>
</div> </div>
</div> </div>
@ -61,19 +39,13 @@
<div class="l-row" @click="cancel((e) => $emit('showChangeNote'))"> <div class="l-row" @click="cancel((e) => $emit('showChangeNote'))">
<div class="left">设置分组</div> <div class="left">设置分组</div>
<div class="right"> <div class="right">
<img <img src="../../../assets/img/icon/components/follow/write.png" alt="" />
src="../../../assets/img/icon/components/follow/write.png"
alt=""
/>
</div> </div>
</div> </div>
<div class="l-row" @click="cancel((e) => $emit('showChangeNote'))"> <div class="l-row" @click="cancel((e) => $emit('showChangeNote'))">
<div class="left">设置备注名</div> <div class="left">设置备注名</div>
<div class="right"> <div class="right">
<img <img src="../../../assets/img/icon/components/follow/write.png" alt="" />
src="../../../assets/img/icon/components/follow/write.png"
alt=""
/>
</div> </div>
</div> </div>
<div class="l-row"> <div class="l-row">
@ -85,30 +57,19 @@
<div class="l-row"> <div class="l-row">
<div class="left">在关注列表中置顶</div> <div class="left">在关注列表中置顶</div>
<div class="right"> <div class="right">
<switches <switches v-model="switches1" theme="bootstrap" color="success"></switches>
v-model="switches1"
theme="bootstrap"
color="success"
></switches>
</div> </div>
</div> </div>
<div class="l-row"> <div class="l-row">
<div class="left">不让TA看</div> <div class="left">不让TA看</div>
<div class="right"> <div class="right">
<switches <switches v-model="switches1" theme="bootstrap" color="success"></switches>
v-model="switches1"
theme="bootstrap"
color="success"
></switches>
</div> </div>
</div> </div>
<div class="l-row" @click="cancel((e) => $emit('cancelFollow'))"> <div class="l-row" @click="cancel((e) => $emit('cancelFollow'))">
<div class="left" style="color: red">取消关注</div> <div class="left" style="color: red">取消关注</div>
<div class="right"> <div class="right">
<img <img src="../../../assets/img/icon/components/follow/reduce.png" alt="" />
src="../../../assets/img/icon/components/follow/reduce.png"
alt=""
/>
</div> </div>
</div> </div>
</div> </div>
@ -116,16 +77,16 @@
</from-bottom-dialog> </from-bottom-dialog>
</template> </template>
<script> <script>
import FromBottomDialog from '../../../components/dialog/FromBottomDialog' import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
import Switches from '../../message/components/swtich/switches' import Switches from '../../message/components/swtich/switches'
import { DefaultUser } from '@/utils/const_var' import { DefaultUser } from '@/utils/const_var'
import { _getUserDouyinId } from '@/utils' import { _getUserDouyinId } from '@/utils'
export default { export default {
name: 'FollowSetting', name: 'FollowSetting',
components: { components: {
FromBottomDialog, FromBottomDialog,
Switches, Switches
}, },
props: { props: {
currentItem: { currentItem: {
@ -133,15 +94,15 @@
default: { default: {
user: DefaultUser, user: DefaultUser,
isRequest: false, isRequest: false,
post: [], post: []
}
}, },
}, modelValue: false
modelValue: false,
}, },
data() { data() {
return { return {
switches1: false, switches1: false,
switches2: false, switches2: false
} }
}, },
computed: {}, computed: {},
@ -151,15 +112,15 @@
cancel(cb) { cancel(cb) {
this.$emit('update:modelValue', false) this.$emit('update:modelValue', false)
cb && cb() cb && cb()
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../../assets/less/index'; @import '../../../assets/less/index';
.follow-setting-dialog { .follow-setting-dialog {
padding: 15rem; padding: 15rem;
font-size: 14rem; font-size: 14rem;
@ -248,5 +209,5 @@
} }
} }
} }
} }
</style> </style>

58
src/pages/home/components/FollowSetting2.vue
View File

@ -13,45 +13,27 @@
<div class="dialog-header"> <div class="dialog-header">
<div class="title-wrapper"> <div class="title-wrapper">
<span class="title">{{ currentItem.author.nickname }}</span> <span class="title">{{ currentItem.author.nickname }}</span>
<span class="subtitle" <span class="subtitle">抖音号：{{ _getUserDouyinId(currentItem) }}</span>
>抖音号：{{ _getUserDouyinId(currentItem) }}</span
>
</div> </div>
<dy-back <dy-back mode="dark" img="close" direction="right" @click="cancel()"></dy-back>
mode="dark"
img="close"
direction="right"
@click="cancel()"
></dy-back>
</div> </div>
<div class="l-rows"> <div class="l-rows">
<div class="l-row"> <div class="l-row">
<div class="left">不让TA看</div> <div class="left">不让TA看</div>
<div class="right"> <div class="right">
<switches <switches v-model="switches1" theme="bootstrap" color="success"></switches>
v-model="switches1"
theme="bootstrap"
color="success"
></switches>
</div> </div>
</div> </div>
<div class="l-row"> <div class="l-row">
<div class="left">在关注列表中置顶</div> <div class="left">在关注列表中置顶</div>
<div class="right"> <div class="right">
<switches <switches v-model="switches1" theme="bootstrap" color="success"></switches>
v-model="switches1"
theme="bootstrap"
color="success"
></switches>
</div> </div>
</div> </div>
<div class="l-row" @click="cancel((e) => $emit('cancelFollow'))"> <div class="l-row" @click="cancel((e) => $emit('cancelFollow'))">
<div class="left">取消关注</div> <div class="left">取消关注</div>
<div class="right"> <div class="right">
<img <img src="../../../assets/img/icon/components/follow/reduce.png" alt="" />
src="../../../assets/img/icon/components/follow/reduce.png"
alt=""
/>
</div> </div>
</div> </div>
</div> </div>
@ -59,16 +41,16 @@
</from-bottom-dialog> </from-bottom-dialog>
</template> </template>
<script> <script>
import FromBottomDialog from '../../../components/dialog/FromBottomDialog' import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
import Switches from '../../message/components/swtich/switches' import Switches from '../../message/components/swtich/switches'
import { DefaultUser } from '@/utils/const_var' import { DefaultUser } from '@/utils/const_var'
import { _getUserDouyinId } from '@/utils' import { _getUserDouyinId } from '@/utils'
export default { export default {
name: 'FollowSetting', name: 'FollowSetting',
components: { components: {
FromBottomDialog, FromBottomDialog,
Switches, Switches
}, },
props: { props: {
currentItem: { currentItem: {
@ -76,15 +58,15 @@
default: { default: {
user: DefaultUser, user: DefaultUser,
isRequest: false, isRequest: false,
post: [], post: []
}
}, },
}, modelValue: false
modelValue: false,
}, },
data() { data() {
return { return {
switches1: false, switches1: false,
switches2: false, switches2: false
} }
}, },
computed: {}, computed: {},
@ -94,15 +76,15 @@
cancel(cb) { cancel(cb) {
this.$emit('update:modelValue', false) this.$emit('update:modelValue', false)
cb && cb() cb && cb()
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../../assets/less/index'; @import '../../../assets/less/index';
.follow-setting-dialog { .follow-setting-dialog {
padding: 15rem; padding: 15rem;
font-size: 14rem; font-size: 14rem;
@ -191,5 +173,5 @@
} }
} }
} }
} }
</style> </style>

123
src/pages/home/components/IndicatorHome.vue
View File

@ -21,108 +21,62 @@
class="tab1-img" class="tab1-img"
/> />
</div> </div>
<div <div class="tab" :class="{ active: index === 1 }" @click.stop="change(1)">
class="tab"
:class="{ active: index === 1 }"
@click.stop="change(1)"
>
<span>长视频</span> <span>长视频</span>
</div> </div>
<div <div class="tab" :class="{ active: index === 2 }" @click.stop="change(2)">
class="tab"
:class="{ active: index === 2 }"
@click.stop="change(2)"
>
<span>关注</span> <span>关注</span>
<img src="../../../assets/img/icon/live.webp" class="tab2-img" /> <img src="../../../assets/img/icon/live.webp" class="tab2-img" />
</div> </div>
<div <div class="tab" :class="{ active: index === 3 }" @click.stop="change(3)">
class="tab"
:class="{ active: index === 3 }"
@click.stop="change(3)"
>
<span>经验</span> <span>经验</span>
</div> </div>
<div <div class="tab" :class="{ active: index === 4 }" @click.stop="change(4)">
class="tab"
:class="{ active: index === 4 }"
@click.stop="change(4)"
>
<span>推荐</span> <span>推荐</span>
</div> </div>
</div> </div>
<div class="indicator" ref="indicator"></div> <div class="indicator" ref="indicator"></div>
</div> </div>
<Icon <Icon v-hide="loading" icon="ion:search" class="search" @click="$nav('/home/search')" />
v-hide="loading"
icon="ion:search"
class="search"
@click="$nav('/home/search')"
/>
</div> </div>
<div class="toggle-type" :class="{ open }"> <div class="toggle-type" :class="{ open }">
<div <div class="l-button" :class="{ active: type === 0 }" @click="toggleType(0)">
class="l-button"
:class="{ active: type === 0 }"
@click="toggleType(0)"
>
<span>同城</span> <span>同城</span>
<img <img v-if="type === 0" src="../../../assets/img/icon/switch.png" alt="" />
v-if="type === 0"
src="../../../assets/img/icon/switch.png"
alt=""
/>
</div>
<div
class="l-button"
:class="{ active: type === 1 }"
@click="toggleType(1)"
>
学习
</div>
<div
class="l-button"
:class="{ active: type === 2 }"
@click="toggleType(2)"
>
热点
</div> </div>
<div class="l-button" :class="{ active: type === 1 }" @click="toggleType(1)">学习</div>
<div class="l-button" :class="{ active: type === 2 }" @click="toggleType(2)">热点</div>
</div> </div>
<Loading <Loading :style="loadingStyle" class="loading" style="width: 40rem" :is-full-screen="false" />
:style="loadingStyle"
class="loading"
style="width: 40rem"
:is-full-screen="false"
/>
</div> </div>
</template> </template>
<script> <script>
import Loading from '../../../components/Loading.vue' import Loading from '../../../components/Loading.vue'
import bus from '../../../utils/bus' import bus from '../../../utils/bus'
import { mapState } from 'pinia' import { mapState } from 'pinia'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
export default { export default {
name: 'IndicatorHome', name: 'IndicatorHome',
components: { components: {
Loading, Loading
}, },
props: { props: {
loading: false, loading: false,
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件 //用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
name: { name: {
type: String, type: String,
default: () => '', default: () => ''
}, },
index: { index: {
type: Number, type: Number,
default: () => 0, default: () => 0
}, },
isLight: { isLight: {
type: Boolean, type: Boolean,
default: () => false, default: () => false
}, }
}, },
setup() { setup() {
const baseStore = useBaseStore() const baseStore = useBaseStore()
@ -135,7 +89,7 @@
indicatorSpace: 0, indicatorSpace: 0,
open: false, open: false,
type: 1, type: 1,
moveY: 0, moveY: 0
} }
}, },
computed: { computed: {
@ -151,20 +105,19 @@
return { return {
opacity: 1, opacity: 1,
'transition-duration': '300ms', 'transition-duration': '300ms',
transform: `translate3d(0, 0, 0)`, transform: `translate3d(0, 0, 0)`
} }
} }
if (this.moveY) { if (this.moveY) {
return { return {
opacity: opacity: 1 - (this.moveY - this.judgeValue) / (this.homeRefresh / 2),
1 - (this.moveY - this.judgeValue) / (this.homeRefresh / 2), transform: this.transform
transform: this.transform,
} }
} }
return { return {
opacity: 1, opacity: 1,
'transition-duration': '300ms', 'transition-duration': '300ms',
transform: `translate3d(0, 0, 0)`, transform: `translate3d(0, 0, 0)`
} }
}, },
noticeStyle() { noticeStyle() {
@ -173,9 +126,8 @@
} }
if (this.moveY) { if (this.moveY) {
return { return {
opacity: opacity: (this.moveY - this.judgeValue) / (this.homeRefresh / 2) - 0.5,
(this.moveY - this.judgeValue) / (this.homeRefresh / 2) - 0.5, transform: this.transform
transform: this.transform,
} }
} }
return { opacity: 0 } return { opacity: 0 }
@ -186,12 +138,11 @@
} }
if (this.moveY) { if (this.moveY) {
return { return {
opacity: opacity: (this.moveY - this.judgeValue) / (this.homeRefresh / 2) - 0.5,
(this.moveY - this.judgeValue) / (this.homeRefresh / 2) - 0.5, transform: this.transform
transform: this.transform, }
} }
} }
},
}, },
created() {}, created() {},
mounted() { mounted() {
@ -235,7 +186,7 @@
this.lefts.push( this.lefts.push(
item.getBoundingClientRect().x - item.getBoundingClientRect().x -
tabs.children[0].getBoundingClientRect().x + tabs.children[0].getBoundingClientRect().x +
(tabWidth * 0.5 - indicatorWidth / 2), (tabWidth * 0.5 - indicatorWidth / 2)
) )
} }
this.indicatorSpace = this.lefts[1] - this.lefts[0] this.indicatorSpace = this.lefts[1] - this.lefts[0]
@ -247,9 +198,7 @@
this.$setCss( this.$setCss(
this.indicatorRef, this.indicatorRef,
'left', 'left',
this.lefts[this.index] - this.lefts[this.index] - e / (this.baseStore.bodyWidth / this.indicatorSpace) + 'px'
e / (this.baseStore.bodyWidth / this.indicatorSpace) +
'px',
) )
}, },
end(index) { end(index) {
@ -259,13 +208,13 @@
setTimeout(() => { setTimeout(() => {
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`) this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
}, 300) }, 300)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.indicator-home { .indicator-home {
position: absolute; position: absolute;
font-size: 16rem; font-size: 16rem;
top: 0; top: 0;
@ -425,5 +374,5 @@
height: calc(var(--vh, 1vh) * 100); height: calc(var(--vh, 1vh) * 100);
background: #00000066; background: #00000066;
} }
} }
</style> </style>

21
src/pages/home/components/LoadingCircle.vue
View File

@ -1,13 +1,6 @@
<template> <template>
<svg viewBox="0 0 400 400"> <svg viewBox="0 0 400 400">
<circle <circle :r="150" cx="200" cy="200" :stroke="'darkgrey'" :stroke-width="40" fill="none" />
:r="150"
cx="200"
cy="200"
:stroke="'darkgrey'"
:stroke-width="40"
fill="none"
/>
<circle <circle
transform="rotate(-90)" transform="rotate(-90)"
transform-origin="center" transform-origin="center"
@ -23,20 +16,20 @@
</svg> </svg>
</template> </template>
<script> <script>
export default { export default {
name: 'LoadingCircle', name: 'LoadingCircle',
components: {}, components: {},
props: { props: {
modelValue: { modelValue: {
type: Number, type: Number,
default: 50, default: 50
}, }
}, },
computed: { computed: {
progress() { progress() {
return 300 * 3.14 * (this.modelValue / 100) return 300 * 3.14 * (this.modelValue / 100)
},
},
methods: {},
} }
},
methods: {}
}
</script> </script>

37
src/pages/home/components/PlayFeedback.vue
View File

@ -154,23 +154,21 @@
</div> </div>
<div class="text-num">{{ desc.length }}/300</div> <div class="text-num">{{ desc.length }}/300</div>
</div> </div>
<dy-button type="primary" :disabled="!disabled" @click="submit" <dy-button type="primary" :disabled="!disabled" @click="submit">提交</dy-button>
>提交</dy-button
>
</div> </div>
</div> </div>
</transition> </transition>
</template> </template>
<script> <script>
import Check from '../../../components/Check' import Check from '../../../components/Check'
export default { export default {
name: 'Test', name: 'Test',
props: { props: {
modelValue: false, modelValue: false
}, },
components: { components: {
Check, Check
}, },
watch: { watch: {
modelValue(newVal) { modelValue(newVal) {
@ -182,7 +180,7 @@
this.type6 = false this.type6 = false
this.type7 = false this.type7 = false
this.desc = '' this.desc = ''
}, }
}, },
data() { data() {
return { return {
@ -193,21 +191,14 @@
type5: false, type5: false,
type6: false, type6: false,
type7: false, type7: false,
desc: '', desc: ''
} }
}, },
computed: { computed: {
disabled() { disabled() {
if (this.type7 && this.desc) return true if (this.type7 && this.desc) return true
return ( return this.type1 || this.type2 || this.type3 || this.type4 || this.type5 || this.type6
this.type1 || }
this.type2 ||
this.type3 ||
this.type4 ||
this.type5 ||
this.type6
)
},
}, },
created() {}, created() {},
methods: { methods: {
@ -230,15 +221,15 @@
await this.$sleep(1000) await this.$sleep(1000)
this.$hideLoading() this.$hideLoading()
this.$notice('感谢你的反馈，我们会尽快答复！') this.$notice('感谢你的反馈，我们会尽快答复！')
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../../assets/less/index'; @import '../../../assets/less/index';
.play-feedback { .play-feedback {
max-height: 490rem; max-height: 490rem;
overflow: auto; overflow: auto;
background: #fff; background: #fff;
@ -320,5 +311,5 @@
text-align: right; text-align: right;
} }
} }
} }
</style> </style>

114
src/pages/home/components/ShareTo.vue
View File

@ -9,62 +9,39 @@
> >
<div class="option-dialog"> <div class="option-dialog">
<div class="buttons"> <div class="buttons">
<dy-button <dy-button v-if="downloading" class="mb1r" :border="false" :progress="progress">
v-if="downloading" <img src="../../../assets/img/icon/components/video/download-gray.png" alt="" />
class="mb1r"
:border="false"
:progress="progress"
>
<img
src="../../../assets/img/icon/components/video/download-gray.png"
alt=""
/>
<span class="second-text-color">下载中 9.2MB/{{ progress }}%</span> <span class="second-text-color">下载中 9.2MB/{{ progress }}%</span>
</dy-button> </dy-button>
<template v-if="canDownload"> <template v-if="canDownload">
<dy-button type="green" v-if="showShare2WeChatZone" @click="$no"> <dy-button type="green" v-if="showShare2WeChatZone" @click="$no">
<template v-slot:prefix> <template v-slot:prefix>
<img <img src="../../../assets/img/icon/components/video/wechatzone-white.webp" alt="" />
src="../../../assets/img/icon/components/video/wechatzone-white.webp"
alt=""
/>
</template> </template>
发送视频到朋友圈 发送视频到朋友圈
</dy-button> </dy-button>
<dy-button type="green" v-if="showShare2WeChat" @click="$no"> <dy-button type="green" v-if="showShare2WeChat" @click="$no">
<template v-slot:prefix> <template v-slot:prefix>
<img <img src="../../../assets/img/icon/components/video/wechat-white.webp" alt="" />
src="../../../assets/img/icon/components/video/wechat-white.webp"
alt=""
/>
</template> </template>
发送视频到微信 发送视频到微信
</dy-button> </dy-button>
<dy-button type="qqzone" v-if="showShare2QQZone" @click="$no"> <dy-button type="qqzone" v-if="showShare2QQZone" @click="$no">
<template v-slot:prefix> <template v-slot:prefix>
<img <img src="../../../assets/img/icon/components/video/qqzone-white.png" alt="" />
src="../../../assets/img/icon/components/video/qqzone-white.png"
alt=""
/>
</template> </template>
发送视频到QQ空间 发送视频到QQ空间
</dy-button> </dy-button>
<dy-button type="qq" v-if="showShare2QQ" @click="$no"> <dy-button type="qq" v-if="showShare2QQ" @click="$no">
<template v-slot:prefix> <template v-slot:prefix>
<img <img src="../../../assets/img/icon/components/video/qq-white.webp" alt="" />
src="../../../assets/img/icon/components/video/qq-white.webp"
alt=""
/>
</template> </template>
发送视频到QQ 发送视频到QQ
</dy-button> </dy-button>
<dy-button type="webo" v-if="showShare2Webo" @click="$no"> <dy-button type="webo" v-if="showShare2Webo" @click="$no">
<template v-slot:prefix> <template v-slot:prefix>
<img <img src="../../../assets/img/icon/components/video/webo-white.webp" alt="" />
src="../../../assets/img/icon/components/video/webo-white.webp"
alt=""
/>
</template> </template>
发送视频到微博 发送视频到微博
</dy-button> </dy-button>
@ -76,46 +53,31 @@
<template v-else> <template v-else>
<dy-button type="green" v-if="showShare2WeChatZone" @click="$no"> <dy-button type="green" v-if="showShare2WeChatZone" @click="$no">
<template v-slot:prefix> <template v-slot:prefix>
<img <img src="../../../assets/img/icon/components/video/wechatzone-white.webp" alt="" />
src="../../../assets/img/icon/components/video/wechatzone-white.webp"
alt=""
/>
</template> </template>
复制口令发给好友 复制口令发给好友
</dy-button> </dy-button>
<dy-button type="green" v-if="showShare2WeChat" @click="$no"> <dy-button type="green" v-if="showShare2WeChat" @click="$no">
<template v-slot:prefix> <template v-slot:prefix>
<img <img src="../../../assets/img/icon/components/video/wechat-white.webp" alt="" />
src="../../../assets/img/icon/components/video/wechat-white.webp"
alt=""
/>
</template> </template>
复制口令发给好友 复制口令发给好友
</dy-button> </dy-button>
<dy-button type="qqzone" v-if="showShare2QQZone" @click="$no"> <dy-button type="qqzone" v-if="showShare2QQZone" @click="$no">
<template v-slot:prefix> <template v-slot:prefix>
<img <img src="../../../assets/img/icon/components/video/qqzone-white.png" alt="" />
src="../../../assets/img/icon/components/video/qqzone-white.png"
alt=""
/>
</template> </template>
复制口令发给好友 复制口令发给好友
</dy-button> </dy-button>
<dy-button type="qq" v-if="showShare2QQ" @click="$no"> <dy-button type="qq" v-if="showShare2QQ" @click="$no">
<template v-slot:prefix> <template v-slot:prefix>
<img <img src="../../../assets/img/icon/components/video/qq-white.webp" alt="" />
src="../../../assets/img/icon/components/video/qq-white.webp"
alt=""
/>
</template> </template>
复制口令发给好友 复制口令发给好友
</dy-button> </dy-button>
<dy-button type="webo" v-if="showShare2Webo" @click="$no"> <dy-button type="webo" v-if="showShare2Webo" @click="$no">
<template v-slot:prefix> <template v-slot:prefix>
<img <img src="../../../assets/img/icon/components/video/webo-white.webp" alt="" />
src="../../../assets/img/icon/components/video/webo-white.webp"
alt=""
/>
</template> </template>
复制口令发给好友 复制口令发给好友
</dy-button> </dy-button>
@ -128,20 +90,13 @@
</dy-button> </dy-button>
<dy-button class="mt1r" type="white" @click="$no"> <dy-button class="mt1r" type="white" @click="$no">
<img <img src="../../../assets/img/icon/components/video/wechat.webp" alt="" />
src="../../../assets/img/icon/components/video/wechat.webp"
alt=""
/>
发送视频到微信 发送视频到微信
</dy-button> </dy-button>
</template> </template>
</div> </div>
<div class="dialog-friends"> <div class="dialog-friends">
<div <div class="dialog-friend" v-for="item in localFriends.all" @click="share(item)">
class="dialog-friend"
v-for="item in localFriends.all"
@click="share(item)"
>
<img :src="$imgPreview(item.avatar)" alt="" /> <img :src="$imgPreview(item.avatar)" alt="" />
<div class="right"> <div class="right">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
@ -160,30 +115,30 @@
</from-bottom-dialog> </from-bottom-dialog>
</template> </template>
<script> <script>
import FromBottomDialog from '../../../components/dialog/FromBottomDialog' import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
import { mapState } from 'pinia' import { mapState } from 'pinia'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
/* /*
* 分享到各种工具 * 分享到各种工具
* */ * */
export default { export default {
name: 'ShareTo', name: 'ShareTo',
components: { components: {
FromBottomDialog, FromBottomDialog
}, },
props: { props: {
type: { type: {
type: Number, type: Number,
default: -1, default: -1
}, },
videoId: { videoId: {
type: String, type: String,
default: null, default: null
}, },
canDownload: { canDownload: {
type: Boolean, type: Boolean,
default: true, default: true
}, }
}, },
watch: { watch: {
type(newVal, oldVal) { type(newVal, oldVal) {
@ -191,7 +146,7 @@
}, },
showShareDialog() { showShareDialog() {
this.localFriends = this.$clone(this.friends) this.localFriends = this.$clone(this.friends)
}, }
}, },
data() { data() {
return { return {
@ -205,11 +160,11 @@
showShare2QQZone: false, showShare2QQZone: false,
showShare2QQ: false, showShare2QQ: false,
showShare2Webo: false, showShare2Webo: false,
localFriends: [], localFriends: []
} }
}, },
computed: { computed: {
...mapState(useBaseStore, ['friends']), ...mapState(useBaseStore, ['friends'])
}, },
created() {}, created() {},
methods: { methods: {
@ -218,10 +173,7 @@
this.showShareDialog = true this.showShareDialog = true
if (this.canDownload) { if (this.canDownload) {
let downloadedVideo = this.$storageGet('downloadedVideo', []) let downloadedVideo = this.$storageGet('downloadedVideo', [])
if ( if (!downloadedVideo.find((v) => v === this.videoId) && !this.downloading) {
!downloadedVideo.find((v) => v === this.videoId) &&
!this.downloading
) {
await this.downloadVideo() await this.downloadVideo()
} }
} }
@ -273,15 +225,15 @@
this.$notice('已分享给朋友') this.$notice('已分享给朋友')
} }
item.select = true item.select = true
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../../assets/less/index'; @import '../../../assets/less/index';
.option-dialog { .option-dialog {
.buttons { .buttons {
padding: 0 15rem; padding: 0 15rem;
@ -357,5 +309,5 @@
} }
} }
} }
} }
</style> </style>

85
src/pages/home/components/ShareToFriend.vue
View File

@ -20,11 +20,7 @@
/> />
<template v-if="searchKey"> <template v-if="searchKey">
<div class="friend-list" v-if="searchResult.length"> <div class="friend-list" v-if="searchResult.length">
<div <div class="friend-item" v-for="item in searchResult" @click="handleClick2(item)">
class="friend-item"
v-for="item in searchResult"
@click="handleClick2(item)"
>
<img class="left" v-lazy="$imgPreview(item.avatar)" alt="" /> <img class="left" v-lazy="$imgPreview(item.avatar)" alt="" />
<div class="right"> <div class="right">
<div class="info"> <div class="info">
@ -32,19 +28,12 @@
<span v-if="item.name.indexOf(searchKey) > -1"> <span v-if="item.name.indexOf(searchKey) > -1">
{{ item.name.substr(0, item.name.indexOf(searchKey)) {{ item.name.substr(0, item.name.indexOf(searchKey))
}}<span style="color: #fc2f56">{{ searchKey }}</span }}<span style="color: #fc2f56">{{ searchKey }}</span
>{{ >{{ item.name.substr(item.name.indexOf(searchKey) + searchKey.length) }}
item.name.substr(
item.name.indexOf(searchKey) + searchKey.length,
)
}}
</span> </span>
<span v-else>{{ item.name }}</span> <span v-else>{{ item.name }}</span>
</span> </span>
</div> </div>
<dy-button <dy-button :type="item.shared ? 'dark' : 'primary'" @click="item.shared = true">
:type="item.shared ? 'dark' : 'primary'"
@click="item.shared = true"
>
{{ item.shared ? '已' : '' }}分享 {{ item.shared ? '已' : '' }}分享
</dy-button> </dy-button>
</div> </div>
@ -57,11 +46,7 @@
</template> </template>
<template v-else> <template v-else>
<div class="joined-chat-group-nav" @click="showJoinedChat = true"> <div class="joined-chat-group-nav" @click="showJoinedChat = true">
<img <img class="left" src="../../../assets/img/icon/people-gray.png" alt="" />
class="left"
src="../../../assets/img/icon/people-gray.png"
alt=""
/>
<div class="right"> <div class="right">
<span>已加入的群聊</span> <span>已加入的群聊</span>
<dy-back direction="right" mode="gray" scale=".7" /> <dy-back direction="right" mode="gray" scale=".7" />
@ -73,10 +58,7 @@
<img class="left" v-lazy="$imgPreview(item.avatar)" alt="" /> <img class="left" v-lazy="$imgPreview(item.avatar)" alt="" />
<div class="right"> <div class="right">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<dy-button <dy-button :type="item.shared ? 'dark' : 'primary'" @click="item.shared = true">
:type="item.shared ? 'dark' : 'primary'"
@click="item.shared = true"
>
{{ item.shared ? '已' : '' }}分享 {{ item.shared ? '已' : '' }}分享
</dy-button> </dy-button>
</div> </div>
@ -86,11 +68,7 @@
</div> </div>
<div class="joined-chat-group" v-show="showJoinedChat"> <div class="joined-chat-group" v-show="showJoinedChat">
<div class="nav"> <div class="nav">
<dy-back <dy-back @click="showJoinedChat = false" mode="light" scale="1"></dy-back>
@click="showJoinedChat = false"
mode="light"
scale="1"
></dy-back>
<span>已加入的群聊</span> <span>已加入的群聊</span>
<span>&nbsp;</span> <span>&nbsp;</span>
</div> </div>
@ -103,10 +81,7 @@
<div class="name">{{ text }}</div> <div class="name">{{ text }}</div>
<div class="num">(3)</div> <div class="num">(3)</div>
</div> </div>
<dy-button <dy-button :type="item.shared ? 'dark' : 'primary'" @click="item.shared = true">
:type="item.shared ? 'dark' : 'primary'"
@click="item.shared = true"
>
{{ item.shared ? '已' : '' }}分享 {{ item.shared ? '已' : '' }}分享
</dy-button> </dy-button>
</div> </div>
@ -117,27 +92,27 @@
</from-bottom-dialog> </from-bottom-dialog>
</template> </template>
<script> <script>
import FromBottomDialog from '../../../components/dialog/FromBottomDialog' import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
import { mapState } from 'pinia' import { mapState } from 'pinia'
import Search from '../../../components/Search' import Search from '../../../components/Search'
import Check from '../../../components/Check' import Check from '../../../components/Check'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
/* /*
分享给朋友 分享给朋友
* */ * */
export default { export default {
name: 'ShareTo', name: 'ShareTo',
components: { components: {
FromBottomDialog, FromBottomDialog,
Search, Search,
Check, Check
}, },
props: { props: {
modelValue: false, modelValue: false,
pageId: { pageId: {
type: String, type: String,
default: 'home-index', default: 'home-index'
}, }
}, },
data() { data() {
return { return {
@ -147,7 +122,7 @@
text: 'AAAAAAA、BBBBBBBB、CCCCCCCCCCCCC', text: 'AAAAAAA、BBBBBBBB、CCCCCCCCCCCCC',
localFriends: [], localFriends: [],
searchResult: [], searchResult: [],
searchKey: '', searchKey: ''
} }
}, },
watch: { watch: {
@ -172,13 +147,13 @@
this.isShowRightText = false this.isShowRightText = false
this.showJoinedChat = false this.showJoinedChat = false
} }
}, }
}, },
computed: { computed: {
...mapState(useBaseStore, ['friends']), ...mapState(useBaseStore, ['friends']),
selectFriends() { selectFriends() {
return this.localFriends.filter((v) => v.shared) return this.localFriends.filter((v) => v.shared)
}, }
}, },
created() {}, created() {},
methods: { methods: {
@ -198,22 +173,22 @@
cancel() { cancel() {
this.height = '70vh' this.height = '70vh'
this.$emit('update:modelValue', false) this.$emit('update:modelValue', false)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../../assets/less/index'; @import '../../../assets/less/index';
.button { .button {
width: 64rem; width: 64rem;
height: 26rem !important; height: 26rem !important;
} }
@avatar-width: 38rem; @avatar-width: 38rem;
.friend-list { .friend-list {
padding: 0 15rem; padding: 0 15rem;
.index { .index {
@ -252,9 +227,9 @@
} }
} }
} }
} }
.content { .content {
color: white; color: white;
.create-chat { .create-chat {
@ -402,5 +377,5 @@
} }
} }
} }
} }
</style> </style>

91
src/pages/home/components/VideoShare.vue
View File

@ -38,15 +38,9 @@
:can-download="canDownload" :can-download="canDownload"
@click="closeShare()" @click="closeShare()"
/> />
<to-share <to-share item-type="report" @click="$nav('/home/report', { mode: this.mode })" />
item-type="report"
@click="$nav('/home/report', { mode: this.mode })"
/>
<to-share item-type="copyPassword" @click="copyLink" /> <to-share item-type="copyPassword" @click="copyLink" />
<to-share <to-share :item-type="isCollect ? 'collectYellow' : 'collect'" @click="toggleCollect" />
:item-type="isCollect ? 'collectYellow' : 'collect'"
@click="toggleCollect"
/>
<to-share item-type="comeon" @click="$no" /> <to-share item-type="comeon" @click="$no" />
<to-share item-type="dou" @click="$no" /> <to-share item-type="dou" @click="$no" />
<to-share item-type="copyLink" @click="copyLink" /> <to-share item-type="copyLink" @click="copyLink" />
@ -74,10 +68,7 @@
</div> </div>
</div> </div>
<div class="more" @click="closeShare($nav('/message/share-to-friend'))"> <div class="more" @click="closeShare($nav('/message/share-to-friend'))">
<img <img class="left" src="../../../assets/img/icon/components/video/more-dark.png" />
class="left"
src="../../../assets/img/icon/components/video/more-dark.png"
/>
<span>更多朋友</span> <span>更多朋友</span>
</div> </div>
</div> </div>
@ -86,13 +77,13 @@
</template> </template>
<script lang="jsx"> <script lang="jsx">
import { mapState } from 'pinia' import { mapState } from 'pinia'
import FromBottomDialog from '../../../components/dialog/FromBottomDialog' import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
import LoadingCircle from './LoadingCircle' import LoadingCircle from './LoadingCircle'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
// import DouyinCode from "./DouyinCode"; // import DouyinCode from "./DouyinCode";
export default { export default {
name: 'Share', name: 'Share',
components: { components: {
FromBottomDialog, FromBottomDialog,
@ -100,21 +91,21 @@
// DouyinCode, // DouyinCode,
ToShare: { ToShare: {
components: { components: {
LoadingCircle, LoadingCircle
}, },
props: { props: {
itemType: { itemType: {
type: String, type: String,
default: 'weChat', default: 'weChat'
}, },
needDown: { needDown: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
canDownload: { canDownload: {
type: Boolean, type: Boolean,
default: true, default: true
}, }
}, },
data() { data() {
return { return {
@ -137,8 +128,8 @@
totoutiao: '今日头条', totoutiao: '今日头条',
dislike: '不感兴趣', dislike: '不感兴趣',
bizhi: '动态壁纸', bizhi: '动态壁纸',
code: '抖音码', code: '抖音码'
}, }
} }
}, },
computed: { computed: {
@ -147,7 +138,7 @@
return this.itemType !== 'download' return this.itemType !== 'download'
} }
return true return true
}, }
}, },
methods: { methods: {
displayText() { displayText() {
@ -184,65 +175,59 @@
} }
}, 10) }, 10)
} }
}, }
}, },
render() { render() {
return ( return (
<div <div
className='to' className="to"
onClick={this.click} onClick={this.click}
style={{ opacity: this.styleCanDownload ? '1' : '0.5' }} style={{ opacity: this.styleCanDownload ? '1' : '0.5' }}
> >
<div className='wrapper'> <div className="wrapper">
{this.loading ? ( {this.loading ? (
<div <div className="loading-wrapper" style="width: 80%;height: 80%;">
className='loading-wrapper'
style='width: 80%;height: 80%;'
>
<LoadingCircle v-model={this.progress} /> <LoadingCircle v-model={this.progress} />
</div> </div>
) : ( ) : (
<img <img src={`/src/assets/img/icon/components/share/${this.itemType}.png`} alt="" />
src={`/src/assets/img/icon/components/share/${this.itemType}.png`}
alt=''
/>
)} )}
</div> </div>
<span>{this.displayText()}</span> <span>{this.displayText()}</span>
</div> </div>
) )
}, }
}, }
}, },
props: { props: {
modelValue: false, modelValue: false,
videoId: { videoId: {
type: String, type: String,
default: null, default: null
}, },
pageId: { pageId: {
type: String, type: String,
default: 'home-index', default: 'home-index'
}, },
canDownload: { canDownload: {
type: Boolean, type: Boolean,
default: false, default: false
}, }
}, },
computed: { computed: {
...mapState(useBaseStore, ['friends']), ...mapState(useBaseStore, ['friends'])
}, },
watch: { watch: {
modelValue(newVal) { modelValue(newVal) {
if (!newVal) { if (!newVal) {
this.loading = { this.loading = {
weChat: false, weChat: false,
weChatZone: false, weChatZone: false
} }
this.progress = 0 this.progress = 0
this.isShowMore = false this.isShowMore = false
} }
}, }
}, },
data() { data() {
return { return {
@ -250,13 +235,13 @@
isShowMore: false, isShowMore: false,
loading: { loading: {
weChat: false, weChat: false,
weChatZone: false, weChatZone: false
}, },
text: { text: {
weChat: '微信', weChat: '微信',
weChatZone: '朋友圈', weChatZone: '朋友圈'
}, },
progress: 0, progress: 0
} }
}, },
methods: { methods: {
@ -290,13 +275,13 @@
}, },
closeShare1() { closeShare1() {
this.$emit('update:modelValue', false) this.$emit('update:modelValue', false)
},
},
} }
}
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.video-share { .video-share {
height: 60vh; height: 60vh;
width: 100%; width: 100%;
border-radius: 10rem 10rem 0 0; border-radius: 10rem 10rem 0 0;
@ -423,5 +408,5 @@
border-radius: 50%; border-radius: 50%;
} }
} }
} }
</style> </style>

128
src/pages/home/index.vue
View File

@ -113,16 +113,12 @@
<!-- <SlideItem></SlideItem>--> <!-- <SlideItem></SlideItem>-->
<Slide0 :active="state.navIndex === 0 && state.baseIndex === 1" /> <Slide0 :active="state.navIndex === 0 && state.baseIndex === 1" />
<SlideItem> <SlideItem>
<LongVideo <LongVideo :active="state.navIndex === 1 && state.baseIndex === 1" />
:active="state.navIndex === 1 && state.baseIndex === 1"
/>
</SlideItem> </SlideItem>
<!-- <SlideItem></SlideItem>--> <!-- <SlideItem></SlideItem>-->
<Slide2 :active="state.navIndex === 2 && state.baseIndex === 1" /> <Slide2 :active="state.navIndex === 2 && state.baseIndex === 1" />
<SlideItem> <SlideItem>
<Community <Community :active="state.navIndex === 3 && state.baseIndex === 1" />
:active="state.navIndex === 3 && state.baseIndex === 1"
/>
</SlideItem> </SlideItem>
<Slide4 :active="state.navIndex === 4 && state.baseIndex === 1" /> <Slide4 :active="state.navIndex === 4 && state.baseIndex === 1" />
</SlideHorizontal> </SlideHorizontal>
@ -195,11 +191,7 @@
<BlockDialog v-model="state.showBlockDialog" /> <BlockDialog v-model="state.showBlockDialog" />
<ConfirmDialog <ConfirmDialog title="设置备注名" ok-text="确认" v-model:visible="state.showChangeNote">
title="设置备注名"
ok-text="确认"
v-model:visible="state.showChangeNote"
>
<Search mode="light" v-model="state.test" :isShowSearchIcon="false" /> <Search mode="light" v-model="state.test" :isShowSearchIcon="false" />
</ConfirmDialog> </ConfirmDialog>
@ -208,43 +200,37 @@
</template> </template>
<script setup lang="jsx"> <script setup lang="jsx">
import SlideHorizontal from '@/components/slide/SlideHorizontal.vue' import SlideHorizontal from '@/components/slide/SlideHorizontal.vue'
import SlideItem from '@/components/slide/SlideItem.vue' import SlideItem from '@/components/slide/SlideItem.vue'
import Comment from '../../components/Comment.vue' import Comment from '../../components/Comment.vue'
import Share from '../../components/Share.vue' import Share from '../../components/Share.vue'
import IndicatorHome from './components/IndicatorHome.vue' import IndicatorHome from './components/IndicatorHome.vue'
import { import { onActivated, onDeactivated, onMounted, onUnmounted, reactive } from 'vue'
onActivated, import bus, { EVENT_KEY } from '../../utils/bus'
onDeactivated, import { useNav } from '@/utils/hooks/useNav'
onMounted, import PlayFeedback from '@/pages/home/components/PlayFeedback.vue'
onUnmounted, import ShareTo from '@/pages/home/components/ShareTo.vue'
reactive, import DouyinCode from '../../components/DouyinCode.vue'
} from 'vue' import FollowSetting from '@/pages/home/components/FollowSetting.vue'
import bus, { EVENT_KEY } from '../../utils/bus' import BlockDialog from '../message/components/BlockDialog.vue'
import { useNav } from '@/utils/hooks/useNav' import Search from '../../components/Search.vue'
import PlayFeedback from '@/pages/home/components/PlayFeedback.vue' import ConfirmDialog from '../../components/dialog/ConfirmDialog.vue'
import ShareTo from '@/pages/home/components/ShareTo.vue' import FollowSetting2 from '@/pages/home/components/FollowSetting2.vue'
import DouyinCode from '../../components/DouyinCode.vue' import ShareToFriend from '@/pages/home/components/ShareToFriend.vue'
import FollowSetting from '@/pages/home/components/FollowSetting.vue' import UserPanel from '@/components/UserPanel.vue'
import BlockDialog from '../message/components/BlockDialog.vue' import Community from '@/pages/home/slide/Community.vue'
import Search from '../../components/Search.vue' import Slide0 from '@/pages/home/slide/Slide0.vue'
import ConfirmDialog from '../../components/dialog/ConfirmDialog.vue' import Slide2 from '@/pages/home/slide/Slide2.vue'
import FollowSetting2 from '@/pages/home/components/FollowSetting2.vue' import Slide4 from '@/pages/home/slide/Slide4.vue'
import ShareToFriend from '@/pages/home/components/ShareToFriend.vue' import { DefaultUser } from '@/utils/const_var'
import UserPanel from '@/components/UserPanel.vue' import { $no } from '@/utils'
import Community from '@/pages/home/slide/Community.vue' import LongVideo from '@/pages/home/slide/LongVideo.vue'
import Slide0 from '@/pages/home/slide/Slide0.vue' import { useBaseStore } from '@/store/pinia'
import Slide2 from '@/pages/home/slide/Slide2.vue'
import Slide4 from '@/pages/home/slide/Slide4.vue'
import { DefaultUser } from '@/utils/const_var'
import { $no } from '@/utils'
import LongVideo from '@/pages/home/slide/LongVideo.vue'
import { useBaseStore } from '@/store/pinia'
const nav = useNav() const nav = useNav()
const baseStore = useBaseStore() const baseStore = useBaseStore()
const state = reactive({ const state = reactive({
active: true, active: true,
baseIndex: 1, baseIndex: 1,
navIndex: 4, navIndex: 4,
@ -269,15 +255,15 @@
currentItem: { currentItem: {
author: DefaultUser, author: DefaultUser,
isRequest: false, isRequest: false,
aweme_list: [], aweme_list: []
},
})
function delayShowDialog(cb) {
setTimeout(cb, 400)
} }
})
function setCurrentItem(item) { function delayShowDialog(cb) {
setTimeout(cb, 400)
}
function setCurrentItem(item) {
if (!state.active) return if (!state.active) return
// console.log('sss',item,state.baseIndex) // console.log('sss',item,state.baseIndex)
if (state.baseIndex !== 1) return if (state.baseIndex !== 1) return
@ -285,13 +271,13 @@
state.currentItem = { state.currentItem = {
...item, ...item,
isRequest: false, isRequest: false,
aweme_list: [], aweme_list: []
} }
} }
// console.log('item', item) // console.log('item', item)
} }
onMounted(() => { onMounted(() => {
bus.on(EVENT_KEY.ENTER_FULLSCREEN, (e) => { bus.on(EVENT_KEY.ENTER_FULLSCREEN, (e) => {
if (!state.active) return if (!state.active) return
state.fullScreen = true state.fullScreen = true
@ -323,33 +309,33 @@
state.baseIndex = 2 state.baseIndex = 2
}) })
bus.on(EVENT_KEY.CURRENT_ITEM, setCurrentItem) bus.on(EVENT_KEY.CURRENT_ITEM, setCurrentItem)
}) })
onUnmounted(() => { onUnmounted(() => {
bus.offAll() bus.offAll()
}) })
onActivated(() => { onActivated(() => {
state.active = true state.active = true
}) })
onDeactivated(() => { onDeactivated(() => {
state.active = false state.active = false
}) })
function closeComments() { function closeComments() {
bus.emit(EVENT_KEY.CLOSE_COMMENTS) bus.emit(EVENT_KEY.CLOSE_COMMENTS)
} }
function dislike() { function dislike() {
// listRef.value.dislike(state.list[1]) // listRef.value.dislike(state.list[1])
// state.list[state.index] = state.list[1] // state.list[state.index] = state.list[1]
// Utils.$notice('操作成功，将减少此类视频的推荐') // Utils.$notice('操作成功，将减少此类视频的推荐')
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.test-slide-wrapper { .test-slide-wrapper {
font-size: 14rem; font-size: 14rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -455,14 +441,14 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.first-horizontal-item { .first-horizontal-item {
//width: 90vw; //width: 90vw;
//height: 80vh; //height: 80vh;
width: 100vw; width: 100vw;
height: calc(var(--vh, 1vh) * 100 - var(--footer-height)) !important; height: calc(var(--vh, 1vh) * 100 - var(--footer-height)) !important;
overflow: hidden; overflow: hidden;
border-radius: 10rem; border-radius: 10rem;
} }
</style> </style>

88
src/pages/home/slide/Community.vue
View File

@ -12,20 +12,14 @@
<WaterfallList :list="list" class="list"> <WaterfallList :list="list" class="list">
<template v-slot="{ item }"> <template v-slot="{ item }">
<div class="card" @click="(e) => test(e, item)"> <div class="card" @click="(e) => test(e, item)">
<img <img class="poster" v-lazy="_checkImgUrl(item.note_card?.cover?.url_default)" />
class="poster"
v-lazy="_checkImgUrl(item.note_card?.cover?.url_default)"
/>
<div class="bottom"> <div class="bottom">
<div class="title"> <div class="title">
{{ item.note_card?.display_title }} {{ item.note_card?.display_title }}
</div> </div>
<div class="b2"> <div class="b2">
<div class="user"> <div class="user">
<img <img class="avatar" :src="_checkImgUrl(item.note_card?.user?.avatar)" />
class="avatar"
:src="_checkImgUrl(item.note_card?.user?.avatar)"
/>
<div class="name">{{ item.note_card?.user?.nickname }}</div> <div class="name">{{ item.note_card?.user?.nickname }}</div>
</div> </div>
<div class="star"> <div class="star">
@ -52,29 +46,29 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref, watch } from 'vue' import { reactive, ref, watch } from 'vue'
import { $no, _checkImgUrl, cloneDeep } from '@/utils' import { $no, _checkImgUrl, cloneDeep } from '@/utils'
import { recommendedPost } from '@/api/user' import { recommendedPost } from '@/api/user'
import { useNav } from '@/utils/hooks/useNav' import { useNav } from '@/utils/hooks/useNav'
import { Icon } from '@iconify/vue' import { Icon } from '@iconify/vue'
import WaterfallList from '@/components/WaterfallList.vue' import WaterfallList from '@/components/WaterfallList.vue'
import ScrollList from '@/components/ScrollList.vue' import ScrollList from '@/components/ScrollList.vue'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
import AlbumDetail from '@/pages/other/AlbumDetail.vue' import AlbumDetail from '@/pages/other/AlbumDetail.vue'
import Mock from 'mockjs' import Mock from 'mockjs'
//@click="nav('album-detail',{},item)" //@click="nav('album-detail',{},item)"
const nav = useNav() const nav = useNav()
const baseStore = useBaseStore() const baseStore = useBaseStore()
const props = defineProps({ const props = defineProps({
active: { active: {
type: Boolean, type: Boolean,
default: false, default: false
}, }
}) })
const state = reactive({ const state = reactive({
show: false, show: false,
current: { current: {
id: '', id: '',
@ -85,24 +79,24 @@
display_title: '', display_title: '',
user: {}, user: {},
comment_list: [], comment_list: [],
createTime: '', createTime: ''
}
}, },
}, d: false
d: false, })
}) let rect = ref({})
let rect = ref({})
watch( watch(
() => props.active, () => props.active,
(n) => { (n) => {
if (n && !state.show) { if (n && !state.show) {
state.show = true state.show = true
} }
}, },
{ immediate: true }, { immediate: true }
) )
function close() { function close() {
let s = $('.shadow ') let s = $('.shadow ')
let domRect = rect.value let domRect = rect.value
let t = '.3' let t = '.3'
@ -130,16 +124,16 @@
s.css('transition', 'all 0s') s.css('transition', 'all 0s')
s.css('top', '-200vh') s.css('top', '-200vh')
}, 300) }, 300)
} }
function test(e, item) { function test(e, item) {
let data = Mock.mock({ let data = Mock.mock({
'comment_list|3-50': [ 'comment_list|3-50': [
{ {
name: '@cname', name: '@cname',
text: '@cparagraph(3)', text: '@cparagraph(3)'
}, }
], ]
}) })
item.note_card.comment_list = data.comment_list item.note_card.comment_list = data.comment_list
item.note_card.createTime = Mock.Random.date('MM-dd') item.note_card.createTime = Mock.Random.date('MM-dd')
@ -196,11 +190,11 @@
a.css('transform', `scale(1,1)`) a.css('transform', `scale(1,1)`)
a.css('transform-origin', `0 0`) a.css('transform-origin', `0 0`)
}) })
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
#Community { #Community {
font-size: 14rem; font-size: 14rem;
color: white; color: white;
padding-top: var(--home-header-height); padding-top: var(--home-header-height);
@ -243,9 +237,9 @@
margin-left: 2vw; margin-left: 2vw;
width: 96vw; width: 96vw;
} }
} }
.card { .card {
border-radius: 4rem; border-radius: 4rem;
overflow: hidden; overflow: hidden;
background: var(--main-bg); background: var(--main-bg);
@ -297,9 +291,9 @@
} }
} }
} }
} }
.shadow { .shadow {
background: var(--color-message); background: var(--color-message);
position: absolute; position: absolute;
left: 0; left: 0;
@ -313,5 +307,5 @@
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
} }
} }
</style> </style>

70
src/pages/home/slide/LongVideo.vue
View File

@ -1,31 +1,31 @@
<script setup> <script setup>
import { onMounted, reactive, ref, watch } from 'vue' import { onMounted, reactive, ref, watch } from 'vue'
import { _checkImgUrl, _duration, _formatNumber } from '@/utils' import { _checkImgUrl, _duration, _formatNumber } from '@/utils'
import { recommendedVideo } from '@/api/videos' import { recommendedVideo } from '@/api/videos'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
import ScrollList from '@/components/ScrollList.vue' import ScrollList from '@/components/ScrollList.vue'
import { useNav } from '@/utils/hooks/useNav' import { useNav } from '@/utils/hooks/useNav'
const baseStore = useBaseStore() const baseStore = useBaseStore()
const props = defineProps({ const props = defineProps({
active: Boolean, active: Boolean
}) })
const p = { const p = {
onShowComments() { onShowComments() {
console.log('onShowComments') console.log('onShowComments')
},
} }
}
const playingEl = ref() const playingEl = ref()
const state = reactive({ const state = reactive({
show: false, show: false,
muted: true, muted: true,
danmu: false, danmu: false
}) })
watch( watch(
() => props.active, () => props.active,
(n) => { (n) => {
if (n) { if (n) {
@ -46,12 +46,12 @@
} }
} }
}, },
{ immediate: true }, { immediate: true }
) )
const obList = [] const obList = []
const vIsCanPlay = { const vIsCanPlay = {
mounted(el, binding, vnode, prevVnode) { mounted(el, binding, vnode, prevVnode) {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
(entries) => { (entries) => {
@ -71,7 +71,7 @@
el.pause() el.pause()
} }
}, },
{ threshold: 0.5 }, { threshold: 0.5 }
) )
observer.observe(el) observer.observe(el)
obList.push(observer) obList.push(observer)
@ -80,10 +80,10 @@
obList.map((v) => { obList.map((v) => {
v.disconnect() v.disconnect()
}) })
},
} }
}
const nav = useNav() const nav = useNav()
</script> </script>
<template> <template>
@ -97,7 +97,7 @@
:class="[ :class="[
i % 9 === 0 && 'big', i % 9 === 0 && 'big',
i % 9 === 0 ? '' : i % 2 === 1 && 'l', i % 9 === 0 ? '' : i % 2 === 1 && 'l',
i % 9 === 0 ? '' : i % 2 === 0 && 'r', i % 9 === 0 ? '' : i % 2 === 0 && 'r'
]" ]"
v-for="(item, i) in list" v-for="(item, i) in list"
> >
@ -120,10 +120,7 @@
<div class="left"></div> <div class="left"></div>
<div class="right"> <div class="right">
<div class="option" @click.stop="state.danmu = !state.danmu"> <div class="option" @click.stop="state.danmu = !state.danmu">
<img <img v-if="state.danmu" src="@/assets/img/icon/danmu-open.svg" />
v-if="state.danmu"
src="@/assets/img/icon/danmu-open.svg"
/>
<img v-else src="@/assets/img/icon/danmu-close.svg" /> <img v-else src="@/assets/img/icon/danmu-close.svg" />
</div> </div>
<div class="option" @click.stop="state.muted = !state.muted"> <div class="option" @click.stop="state.muted = !state.muted">
@ -136,12 +133,7 @@
</div> </div>
</div> </div>
</div> </div>
<img <img v-else v-lazy="_checkImgUrl(item.video.cover.url_list[0])" alt="" class="poster" />
v-else
v-lazy="_checkImgUrl(item.video.cover.url_list[0])"
alt=""
class="poster"
/>
<div class="duration">{{ _duration(item.duration / 1000) }}</div> <div class="duration">{{ _duration(item.duration / 1000) }}</div>
<div class="title"> <div class="title">
{{ item.desc }} {{ item.desc }}
@ -170,7 +162,7 @@
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.long-video { .long-video {
font-size: 14rem; font-size: 14rem;
color: white; color: white;
padding-top: var(--home-header-height); padding-top: var(--home-header-height);
@ -181,9 +173,9 @@
var(--vh, 1vh) * 100 - var(--home-header-height) - var(--footer-height) var(--vh, 1vh) * 100 - var(--home-header-height) - var(--footer-height)
) !important; ) !important;
} }
} }
.list { .list {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
row-gap: 15rem; row-gap: 15rem;
@ -341,5 +333,5 @@
margin-left: 5rem; margin-left: 5rem;
} }
} }
} }
</style> </style>

80
src/pages/home/slide/Slide0.vue
View File

@ -1,10 +1,6 @@
<template> <template>
<SlideItem class="slide-item-class"> <SlideItem class="slide-item-class">
<div <div class="sub-type" :class="state.subTypeIsTop ? 'top' : ''" ref="subTypeRef">
class="sub-type"
:class="state.subTypeIsTop ? 'top' : ''"
ref="subTypeRef"
>
<div class="local"> <div class="local">
<div class="card" @touchmove.capture="stop"> <div class="card" @touchmove.capture="stop">
<div class="nav-item"> <div class="nav-item">
@ -53,7 +49,7 @@
:active="props.active" :active="props.active"
:style="{ :style="{
background: 'black', background: 'black',
marginTop: state.subTypeVisible ? state.subTypeHeight : 0, marginTop: state.subTypeVisible ? state.subTypeHeight : 0
}" }"
:api="recommendedVideo" :api="recommendedVideo"
@touchstart="pageClick" @touchstart="pageClick"
@ -62,79 +58,73 @@
</template> </template>
<script setup lang="jsx"> <script setup lang="jsx">
import SlideItem from '@/components/slide/SlideItem.vue' import SlideItem from '@/components/slide/SlideItem.vue'
import { onMounted, onUnmounted, reactive, ref } from 'vue' import { onMounted, onUnmounted, reactive, ref } from 'vue'
import bus, { EVENT_KEY } from '@/utils/bus' import bus, { EVENT_KEY } from '@/utils/bus'
import Utils from '@/utils' import Utils from '@/utils'
import SlideList from './SlideList.vue' import SlideList from './SlideList.vue'
import { recommendedVideo } from '@/api/videos' import { recommendedVideo } from '@/api/videos'
const props = defineProps({ const props = defineProps({
cbs: { cbs: {
type: Object, type: Object,
default() { default() {
return {} return {}
}, }
}, },
active: { active: {
type: Boolean, type: Boolean,
default: false, default: false
},
})
const emit = defineEmits([
'update:item',
'goUserInfo',
'showComments',
'showShare',
'goMusic',
])
function stop(e) {
e.stopPropagation()
} }
})
const emit = defineEmits(['update:item', 'goUserInfo', 'showComments', 'showShare', 'goMusic'])
const p = { function stop(e) {
e.stopPropagation()
}
const p = {
onShowComments() { onShowComments() {
console.log('onShowComments') console.log('onShowComments')
},
} }
}
const subTypeRef = ref(null) const subTypeRef = ref(null)
const state = reactive({ const state = reactive({
index: 0, index: 0,
subType: -1, subType: -1,
subTypeVisible: false, subTypeVisible: false,
subTypeHeight: '0', subTypeHeight: '0',
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType. //用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
subTypeIsTop: false, subTypeIsTop: false
}) })
function showSubType(e) { function showSubType(e) {
Utils.$stopPropagation(e) Utils.$stopPropagation(e)
console.log('subTypeRef') console.log('subTypeRef')
state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px' state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
state.subTypeVisible = true state.subTypeVisible = true
setTimeout(() => (state.subTypeIsTop = true), 300) setTimeout(() => (state.subTypeIsTop = true), 300)
bus.emit(EVENT_KEY.OPEN_SUB_TYPE) bus.emit(EVENT_KEY.OPEN_SUB_TYPE)
} }
function pageClick(e) { function pageClick(e) {
// console.log('pageClick') // console.log('pageClick')
if (state.subTypeVisible) { if (state.subTypeVisible) {
state.subTypeIsTop = state.subTypeVisible = false state.subTypeIsTop = state.subTypeVisible = false
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE) bus.emit(EVENT_KEY.CLOSE_SUB_TYPE)
Utils.$stopPropagation(e) Utils.$stopPropagation(e)
} }
} }
onMounted(() => { onMounted(() => {
// getData() // getData()
}) })
onUnmounted(() => {}) onUnmounted(() => {})
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.slide-item-class { .slide-item-class {
position: relative; position: relative;
.sub-type { .sub-type {
@ -164,11 +154,7 @@
border-radius: 8rem; border-radius: 8rem;
width: 100%; width: 100%;
//background: white; //background: white;
background: linear-gradient( background: linear-gradient(to right, rgb(53, 51, 110), rgb(29, 21, 66));
to right,
rgb(53, 51, 110),
rgb(29, 21, 66)
);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@ -205,5 +191,5 @@
font-size: 12rem; font-size: 12rem;
color: white; color: white;
} }
} }
</style> </style>

64
src/pages/home/slide/Slide2.vue
View File

@ -1,10 +1,6 @@
<template> <template>
<SlideItem class="slide-item-class"> <SlideItem class="slide-item-class">
<div <div class="sub-type" :class="state.subTypeIsTop ? 'top' : ''" ref="subTypeRef">
class="sub-type"
:class="state.subTypeIsTop ? 'top' : ''"
ref="subTypeRef"
>
<div class="card" @touchmove.capture="stop"> <div class="card" @touchmove.capture="stop">
<div class="nav-item" v-for="i in store.users"> <div class="nav-item" v-for="i in store.users">
<img :src="_checkImgUrl(i.avatar_168x168.url_list[0])" alt="" /> <img :src="_checkImgUrl(i.avatar_168x168.url_list[0])" alt="" />
@ -24,7 +20,7 @@
:active="props.active" :active="props.active"
:style="{ :style="{
background: 'black', background: 'black',
marginTop: state.subTypeVisible ? state.subTypeHeight : 0, marginTop: state.subTypeVisible ? state.subTypeHeight : 0
}" }"
:api="recommendedVideo" :api="recommendedVideo"
@touchstart="pageClick" @touchstart="pageClick"
@ -33,62 +29,62 @@
</template> </template>
<script setup lang="jsx"> <script setup lang="jsx">
import SlideItem from '@/components/slide/SlideItem.vue' import SlideItem from '@/components/slide/SlideItem.vue'
import { onMounted, onUnmounted, reactive, ref } from 'vue' import { onMounted, onUnmounted, reactive, ref } from 'vue'
import bus, { EVENT_KEY } from '@/utils/bus' import bus, { EVENT_KEY } from '@/utils/bus'
import Utils, { _checkImgUrl } from '@/utils' import Utils, { _checkImgUrl } from '@/utils'
import SlideList from './SlideList.vue' import SlideList from './SlideList.vue'
import { recommendedVideo } from '@/api/videos' import { recommendedVideo } from '@/api/videos'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
const store = useBaseStore() const store = useBaseStore()
const props = defineProps({ const props = defineProps({
active: { active: {
type: Boolean, type: Boolean,
default: false, default: false
},
})
function stop(e) {
e.stopPropagation()
} }
})
const subTypeRef = ref(null) function stop(e) {
const state = reactive({ e.stopPropagation()
}
const subTypeRef = ref(null)
const state = reactive({
index: 0, index: 0,
subType: -1, subType: -1,
subTypeVisible: false, subTypeVisible: false,
subTypeHeight: '0', subTypeHeight: '0',
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType. //用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
subTypeIsTop: false, subTypeIsTop: false
}) })
function showSubType(e) { function showSubType(e) {
Utils.$stopPropagation(e) Utils.$stopPropagation(e)
console.log('subTypeRef') console.log('subTypeRef')
state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px' state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
state.subTypeVisible = true state.subTypeVisible = true
setTimeout(() => (state.subTypeIsTop = true), 300) setTimeout(() => (state.subTypeIsTop = true), 300)
bus.emit(EVENT_KEY.OPEN_SUB_TYPE) bus.emit(EVENT_KEY.OPEN_SUB_TYPE)
} }
function pageClick(e) { function pageClick(e) {
// console.log('pageClick') // console.log('pageClick')
if (state.subTypeVisible) { if (state.subTypeVisible) {
state.subTypeIsTop = state.subTypeVisible = false state.subTypeIsTop = state.subTypeVisible = false
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE) bus.emit(EVENT_KEY.CLOSE_SUB_TYPE)
Utils.$stopPropagation(e) Utils.$stopPropagation(e)
} }
} }
onMounted(() => { onMounted(() => {
// getData() // getData()
}) })
onUnmounted(() => {}) onUnmounted(() => {})
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.slide-item-class { .slide-item-class {
position: relative; position: relative;
.sub-type { .sub-type {
@ -151,5 +147,5 @@
font-size: 12rem; font-size: 12rem;
color: white; color: white;
} }
} }
</style> </style>

20
src/pages/home/slide/Slide4.vue
View File

@ -1,22 +1,18 @@
<template> <template>
<SlideItem> <SlideItem>
<SlideList <SlideList style="background: #000" :active="props.active" :api="recommendedVideo" />
style="background: #000"
:active="props.active"
:api="recommendedVideo"
/>
</SlideItem> </SlideItem>
</template> </template>
<script setup lang="jsx"> <script setup lang="jsx">
import SlideItem from '@/components/slide/SlideItem.vue' import SlideItem from '@/components/slide/SlideItem.vue'
import SlideList from './SlideList.vue' import SlideList from './SlideList.vue'
import { recommendedVideo } from '@/api/videos' import { recommendedVideo } from '@/api/videos'
const props = defineProps({ const props = defineProps({
active: { active: {
type: Boolean, type: Boolean,
default: false, default: false
}, }
}) })
</script> </script>

80
src/pages/home/slide/SlideList.vue
View File

@ -16,70 +16,70 @@
</template> </template>
<script setup lang="jsx"> <script setup lang="jsx">
import SlideVerticalInfinite from '@/components/slide/SlideVerticalInfinite.vue' import SlideVerticalInfinite from '@/components/slide/SlideVerticalInfinite.vue'
import { onMounted, onUnmounted, reactive, ref } from 'vue' import { onMounted, onUnmounted, reactive, ref } from 'vue'
import bus, { EVENT_KEY } from '@/utils/bus' import bus, { EVENT_KEY } from '@/utils/bus'
import { $notice } from '@/utils' import { $notice } from '@/utils'
import { useSlideListItemRender } from '@/utils/hooks/useSlideListItemRender' import { useSlideListItemRender } from '@/utils/hooks/useSlideListItemRender'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
const props = defineProps({ const props = defineProps({
cbs: { cbs: {
type: Object, type: Object,
default() { default() {
return {} return {}
}, }
}, },
active: { active: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
api: { api: {
type: Function, type: Function,
default: void 0, default: void 0
}, },
index: { index: {
type: Number, type: Number,
default: 0, default: 0
}, },
list: { list: {
type: Array, type: Array,
default: [], default: []
}, }
}) })
const baseStore = useBaseStore() const baseStore = useBaseStore()
const p = { const p = {
onShowComments() { onShowComments() {
console.log('onShowComments') console.log('onShowComments')
},
} }
}
const render = useSlideListItemRender({ ...props.cbs, ...p }) const render = useSlideListItemRender({ ...props.cbs, ...p })
const listRef = ref(null) const listRef = ref(null)
const state = reactive({ const state = reactive({
index: props.index, index: props.index,
list: props.list, list: props.list,
uniqueId: 'uniqueId1', uniqueId: 'uniqueId1',
totalSize: 0, totalSize: 0,
pageSize: 10, pageSize: 10,
pageNo: 0, pageNo: 0
}) })
function loadMore() { function loadMore() {
if (!baseStore.loading) { if (!baseStore.loading) {
state.pageNo++ state.pageNo++
getData() getData()
} }
} }
async function getData(refresh = false) { async function getData(refresh = false) {
if (baseStore.loading) return if (baseStore.loading) return
baseStore.loading = true baseStore.loading = true
let res = await props.api({ let res = await props.api({
pageNo: refresh ? 0 : state.pageNo, pageNo: refresh ? 0 : state.pageNo,
pageSize: state.pageSize, pageSize: state.pageSize
}) })
// console.log('getSlide4Data-', 'refresh', refresh, res) // console.log('getSlide4Data-', 'refresh', refresh, res)
baseStore.loading = false baseStore.loading = false
@ -92,39 +92,39 @@
} else { } else {
state.pageNo-- state.pageNo--
} }
} }
function dislike() { function dislike() {
listRef.value.dislike(state.list[1]) listRef.value.dislike(state.list[1])
state.list[state.index] = state.list[1] state.list[state.index] = state.list[1]
$notice('操作成功，将减少此类视频的推荐') $notice('操作成功，将减少此类视频的推荐')
} }
function end() { function end() {
// this.$notice('暂时没有更多了') // this.$notice('暂时没有更多了')
} }
function click(uniqueId) { function click(uniqueId) {
if (uniqueId !== state.uniqueId) return if (uniqueId !== state.uniqueId) return
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
uniqueId, uniqueId,
index: state.index, index: state.index,
type: EVENT_KEY.ITEM_TOGGLE, type: EVENT_KEY.ITEM_TOGGLE
}) })
} }
function updateItem({ position, item }) { function updateItem({ position, item }) {
if (position.uniqueId === state.uniqueId) { if (position.uniqueId === state.uniqueId) {
state.list[position.index] = item state.list[position.index] = item
} }
} }
onMounted(() => { onMounted(() => {
bus.on(EVENT_KEY.SINGLE_CLICK, click) bus.on(EVENT_KEY.SINGLE_CLICK, click)
bus.on(EVENT_KEY.UPDATE_ITEM, updateItem) bus.on(EVENT_KEY.UPDATE_ITEM, updateItem)
}) })
onUnmounted(() => { onUnmounted(() => {
bus.off(EVENT_KEY.SINGLE_CLICK, click) bus.off(EVENT_KEY.SINGLE_CLICK, click)
bus.on(EVENT_KEY.UPDATE_ITEM, updateItem) bus.on(EVENT_KEY.UPDATE_ITEM, updateItem)
}) })
</script> </script>

6
src/pages/login/Base.js
View File

@ -7,7 +7,7 @@ export default {
isOtherLogin: false, isOtherLogin: false,
showAnim: false, showAnim: false,
showTooltip: false, showTooltip: false,
loading: false, loading: false
} }
}, },
computed: {}, computed: {},
@ -30,6 +30,6 @@ export default {
} }
} }
}) })
}, }
}, }
} }

12
src/pages/login/Help.vue
View File

@ -14,7 +14,7 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'Help', name: 'Help',
props: {}, props: {},
data() { data() {
@ -22,14 +22,14 @@
}, },
computed: {}, computed: {},
created() {}, created() {},
methods: {}, methods: {}
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.Help { .Help {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -51,5 +51,5 @@
height: 100%; height: 100%;
} }
} }
} }
</style> </style>

62
src/pages/login/Login.vue
View File

@ -33,24 +33,16 @@
</div> </div>
<div class="right"> <div class="right">
我已阅读并同意 我已阅读并同意
<span <span class="link" @click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
class="link"
@click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
>用户协议</span >用户协议</span
> >
和 和
<span <span class="link" @click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
class="link"
@click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
>隐私政策</span >隐私政策</span
> >
<div> <div>
以及 以及
<span <span class="link" @click="$nav('/service-protocol', { type: '中国移动认证服务协议' })"
class="link"
@click="
$nav('/service-protocol', { type: '中国移动认证服务协议' })
"
>《中国移动认证服务条款》</span >《中国移动认证服务条款》</span
> >
，同时登录并使用抖音火山版（原“火山小视频”）和抖音 ，同时登录并使用抖音火山版（原“火山小视频”）和抖音
@ -61,26 +53,10 @@
<div class="other-login"> <div class="other-login">
<transition name="fade"> <transition name="fade">
<div v-if="isOtherLogin" class="icons"> <div v-if="isOtherLogin" class="icons">
<img <img @click="$no" src="../../assets/img/icon/login/toutiao-round.png" alt="" />
@click="$no" <img @click="$no" src="../../assets/img/icon/login/qq-round.webp" alt="" />
src="../../assets/img/icon/login/toutiao-round.png" <img @click="$no" src="../../assets/img/icon/login/wechat-round.png" alt="" />
alt="" <img @click="$no" src="../../assets/img/icon/login/weibo-round.webp" alt="" />
/>
<img
@click="$no"
src="../../assets/img/icon/login/qq-round.webp"
alt=""
/>
<img
@click="$no"
src="../../assets/img/icon/login/wechat-round.png"
alt=""
/>
<img
@click="$no"
src="../../assets/img/icon/login/weibo-round.webp"
alt=""
/>
</div> </div>
</transition> </transition>
</div> </div>
@ -96,16 +72,16 @@
</div> </div>
</template> </template>
<script> <script>
import Check from '../../components/Check' import Check from '../../components/Check'
import Tooltip from './components/Tooltip' import Tooltip from './components/Tooltip'
import Loading from '../../components/Loading' import Loading from '../../components/Loading'
export default { export default {
name: 'login', name: 'login',
components: { components: {
Check, Check,
Tooltip, Tooltip,
Loading, Loading
}, },
data() { data() {
return { return {
@ -115,8 +91,8 @@
showTooltip: false, showTooltip: false,
loading: { loading: {
login: false, login: false,
getPhone: false, getPhone: false
}, }
} }
}, },
computed: {}, computed: {},
@ -144,15 +120,15 @@
}, 3000) }, 3000)
} }
} }
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.login { .login {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -237,5 +213,5 @@
left: 50%; left: 50%;
} }
} }
} }
</style> </style>

43
src/pages/login/OtherLogin.vue
View File

@ -11,12 +11,7 @@
<div class="sub-title">未注册的手机号验证通过后将自动注册</div> <div class="sub-title">未注册的手机号验证通过后将自动注册</div>
</div> </div>
<LoginInput <LoginInput autofocus type="phone" v-model="phone" placeholder="请输入手机号" />
autofocus
type="phone"
v-model="phone"
placeholder="请输入手机号"
/>
<div class="notice" v-if="notice"> <div class="notice" v-if="notice">
{{ notice }} {{ notice }}
@ -29,15 +24,11 @@
</div> </div>
<div class="right"> <div class="right">
已阅读并同意 已阅读并同意
<span <span class="link" @click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
class="link"
@click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
>用户协议</span >用户协议</span
> >
和 和
<span <span class="link" @click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
class="link"
@click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
>隐私政策</span >隐私政策</span
> >
，同时登录并使用抖音火山版（原“火山小视频”）和抖音 ，同时登录并使用抖音火山版（原“火山小视频”）和抖音
@ -91,25 +82,25 @@
</div> </div>
</template> </template>
<script> <script>
import Check from '../../components/Check' import Check from '../../components/Check'
import Tooltip from './components/Tooltip' import Tooltip from './components/Tooltip'
import LoginInput from './components/LoginInput' import LoginInput from './components/LoginInput'
import Base from './Base.js' import Base from './Base.js'
import FromBottomDialog from '../../components/dialog/FromBottomDialog' import FromBottomDialog from '../../components/dialog/FromBottomDialog'
export default { export default {
name: 'OtherLogin', name: 'OtherLogin',
extends: Base, extends: Base,
components: { components: {
Check, Check,
Tooltip, Tooltip,
LoginInput, LoginInput,
FromBottomDialog, FromBottomDialog
}, },
data() { data() {
return { return {
phone: '', phone: '',
notice: '', notice: ''
} }
}, },
computed: {}, computed: {},
@ -129,16 +120,16 @@
if (res) { if (res) {
this.isOtherLogin = true this.isOtherLogin = true
} }
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
@import 'Base.less'; @import 'Base.less';
.other-login { .other-login {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -174,5 +165,5 @@
background: whitesmoke; background: whitesmoke;
} }
} }
} }
</style> </style>

47
src/pages/login/PasswordLogin.vue
View File

@ -10,12 +10,7 @@
<div class="title">手机号密码登录</div> <div class="title">手机号密码登录</div>
</div> </div>
<LoginInput <LoginInput autofocus type="phone" v-model="phone" placeholder="请输入手机号" />
autofocus
type="phone"
v-model="phone"
placeholder="请输入手机号"
/>
<LoginInput <LoginInput
autofocus autofocus
class="mt1r" class="mt1r"
@ -31,15 +26,11 @@
</div> </div>
<div class="right"> <div class="right">
已阅读并同意 已阅读并同意
<span <span class="link" @click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
class="link"
@click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
>用户协议</span >用户协议</span
> >
和 和
<span <span class="link" @click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
class="link"
@click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
>隐私政策</span >隐私政策</span
> >
，同时登录并使用抖音火山版（原“火山小视频”）和抖音 ，同时登录并使用抖音火山版（原“火山小视频”）和抖音
@ -62,40 +53,38 @@
<div class="options"> <div class="options">
<span> <span>
忘记了？<span class="link" @click="$nav('/login/retrieve-password')" 忘记了？<span class="link" @click="$nav('/login/retrieve-password')">找回密码</span>
>找回密码</span
>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Check from '../../components/Check' import Check from '../../components/Check'
import LoginInput from './components/LoginInput' import LoginInput from './components/LoginInput'
import Tooltip from './components/Tooltip' import Tooltip from './components/Tooltip'
import Base from './Base' import Base from './Base'
export default { export default {
name: 'PasswordLogin', name: 'PasswordLogin',
extends: Base, extends: Base,
components: { components: {
Check, Check,
Tooltip, Tooltip,
LoginInput, LoginInput
}, },
data() { data() {
return { return {
phone: '', phone: '',
password: '', password: '',
code: '', code: '',
notice: '', notice: ''
} }
}, },
computed: { computed: {
disabled() { disabled() {
return !(this.phone && this.password) return !(this.phone && this.password)
}, }
}, },
created() {}, created() {},
methods: { methods: {
@ -104,16 +93,16 @@
if (res) { if (res) {
this.loading = true this.loading = true
} }
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
@import 'Base.less'; @import 'Base.less';
.PasswordLogin { .PasswordLogin {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -123,5 +112,5 @@
color: black; color: black;
font-size: 14rem; font-size: 14rem;
background: white; background: white;
} }
</style> </style>

49
src/pages/login/RetrievePassword.vue
View File

@ -5,8 +5,7 @@
<div class="desc"> <div class="desc">
<div class="title">找回密码</div> <div class="title">找回密码</div>
<div class="sub-title"> <div class="sub-title">
验证码已通过短信发送到+86 13800138000。 密码为8 - 验证码已通过短信发送到+86 13800138000。 密码为8 - 20位，至少包含字母、数字、符号2种组合
20位，至少包含字母、数字、符号2种组合
</div> </div>
</div> </div>
@ -33,15 +32,11 @@
</div> </div>
<div class="right"> <div class="right">
已阅读并同意 已阅读并同意
<span <span class="link" @click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
class="link"
@click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
>用户协议</span >用户协议</span
> >
和 和
<span <span class="link" @click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
class="link"
@click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
>隐私政策</span >隐私政策</span
> >
，同时登录并使用抖音火山版（原“火山小视频”）和抖音 ，同时登录并使用抖音火山版（原“火山小视频”）和抖音
@ -64,28 +59,24 @@
</dy-button> </dy-button>
<div class="options" v-if="showVoiceCode"> <div class="options" v-if="showVoiceCode">
<span> <span> 收不到短信？<span class="link" @click="getVoiceCode">获取语音验证码</span> </span>
收不到短信？<span class="link" @click="getVoiceCode"
>获取语音验证码</span
>
</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Check from '../../components/Check' import Check from '../../components/Check'
import LoginInput from './components/LoginInput' import LoginInput from './components/LoginInput'
import Tooltip from './components/Tooltip' import Tooltip from './components/Tooltip'
import Base from './Base' import Base from './Base'
export default { export default {
name: 'RetrievePassword', name: 'RetrievePassword',
extends: Base, extends: Base,
components: { components: {
Check, Check,
Tooltip, Tooltip,
LoginInput, LoginInput
}, },
data() { data() {
return { return {
@ -94,13 +85,13 @@
code: '', code: '',
notice: '', notice: '',
isSendVerificationCode: true, isSendVerificationCode: true,
showVoiceCode: false, showVoiceCode: false
} }
}, },
computed: { computed: {
disabled() { disabled() {
return !(this.code && this.password) return !(this.code && this.password)
}, }
}, },
created() { created() {
setTimeout(() => { setTimeout(() => {
@ -124,11 +115,11 @@
null, null,
'找回账号', '找回账号',
'返回', '返回',
'', ''
) )
}, 2000) }, 2000)
}, },
'知道了', '知道了'
) )
}, },
//TODO loading样式不对 //TODO loading样式不对
@ -143,16 +134,16 @@
if (res) { if (res) {
this.loading = true this.loading = true
} }
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
@import 'Base.less'; @import 'Base.less';
.RetrievePassword { .RetrievePassword {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -162,5 +153,5 @@
color: black; color: black;
font-size: 14rem; font-size: 14rem;
background: white; background: white;
} }
</style> </style>

32
src/pages/login/VerificationCode.vue
View File

@ -20,11 +20,7 @@
@send="sendCode" @send="sendCode"
/> />
<div class="options" v-if="showVoiceCode"> <div class="options" v-if="showVoiceCode">
<span> <span> 收不到短信？<span class="link" @click="getVoiceCode">获取语音验证码</span> </span>
收不到短信？<span class="link" @click="getVoiceCode"
>获取语音验证码</span
>
</span>
</div> </div>
<dy-button <dy-button
@ -40,14 +36,14 @@
</div> </div>
</template> </template>
<script> <script>
import Check from '../../components/Check' import Check from '../../components/Check'
import LoginInput from './components/LoginInput' import LoginInput from './components/LoginInput'
export default { export default {
name: 'VerificationCode', name: 'VerificationCode',
components: { components: {
Check, Check,
LoginInput, LoginInput
}, },
data() { data() {
return { return {
@ -58,7 +54,7 @@
password: '', password: '',
code: '', code: '',
isSendVerificationCode: true, isSendVerificationCode: true,
showVoiceCode: false, showVoiceCode: false
} }
}, },
created() { created() {
@ -83,11 +79,11 @@
null, null,
'找回账号', '找回账号',
'返回', '返回',
'', ''
) )
}, 2000) }, 2000)
}, },
'知道了', '知道了'
) )
}, },
//TODO loading样式不对 //TODO loading样式不对
@ -103,16 +99,16 @@
this.isSendVerificationCode = true this.isSendVerificationCode = true
this.loading = false this.loading = false
}, 1000) }, 1000)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
@import 'Base.less'; @import 'Base.less';
.VerificationCode { .VerificationCode {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -130,5 +126,5 @@
.button { .button {
margin-top: 20rem; margin-top: 20rem;
} }
} }
</style> </style>

34
src/pages/login/components/LoginInput.vue
View File

@ -59,36 +59,34 @@
/> />
</div> </div>
<div class="right" @click="send"> <div class="right" @click="send">
<span :class="isSendVerificationCode && 'disabled'">{{ <span :class="isSendVerificationCode && 'disabled'">{{ verificationCodeBtnText }}</span>
verificationCodeBtnText
}}</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'LoginInput', name: 'LoginInput',
props: { props: {
modelValue: '', modelValue: '',
placeholder: '', placeholder: '',
type: { type: {
type: String, type: String,
default: 'phone', default: 'phone'
}, },
autofocus: { autofocus: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
isSendVerificationCode: { isSendVerificationCode: {
type: Boolean, type: Boolean,
default: false, default: false
}, }
}, },
data() { data() {
return { return {
isTyping: false, isTyping: false,
verificationCodeBtnText: 60, verificationCodeBtnText: 60
} }
}, },
computed: { computed: {
@ -98,8 +96,8 @@
}, },
set(e) { set(e) {
this.$emit('update:modelValue', e) this.$emit('update:modelValue', e)
}, }
}, }
}, },
watch: { watch: {
isSendVerificationCode: { isSendVerificationCode: {
@ -117,8 +115,8 @@
} }
}, 1000) }, 1000)
} }
}, }
}, }
}, },
methods: { methods: {
delaySetTypingFalse() { delaySetTypingFalse() {
@ -130,15 +128,15 @@
if (!this.isSendVerificationCode) { if (!this.isSendVerificationCode) {
this.$emit('send') this.$emit('send')
} }
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../../assets/less/index'; @import '../../../assets/less/index';
.input-number { .input-number {
display: flex; display: flex;
background: whitesmoke; background: whitesmoke;
padding: 15rem 10rem; padding: 15rem 10rem;
@ -224,5 +222,5 @@
//letter-spacing: 10rem; //letter-spacing: 10rem;
} }
} }
} }
</style> </style>

28
src/pages/login/components/Tooltip.vue
View File

@ -7,38 +7,38 @@
</transition> </transition>
</template> </template>
<script> <script>
export default { export default {
name: 'Popover', name: 'Popover',
props: { props: {
modelValue: { modelValue: {
type: Boolean, type: Boolean,
default: false, default: false
}, }
}, },
data() { data() {
return {} return {}
}, },
computed: {}, computed: {},
created() {}, created() {},
methods: {}, methods: {}
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../../assets/less/index'; @import '../../../assets/less/index';
.scale-enter-active, .scale-enter-active,
.scale-leave-active { .scale-leave-active {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.scale-enter-from, .scale-enter-from,
.scale-leave-to { .scale-leave-to {
//transform: scale(0); //transform: scale(0);
opacity: 0; opacity: 0;
} }
.Tooltip { .Tooltip {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
font-size: 12rem; font-size: 12rem;
@ -56,5 +56,5 @@
left: 10rem; left: 10rem;
bottom: -14rem; bottom: -14rem;
} }
} }
</style> </style>

951
src/pages/login/countryChoose.vue
View File

File diff suppressed because it is too large Load Diff

407
src/pages/me/Me.vue
View File

@ -1,10 +1,6 @@
<template> <template>
<div class="Me"> <div class="Me">
<SlideRowList <SlideRowList name="baseSlide" style="width: 100vw" v-model:active-index="baseActiveIndex">
name="baseSlide"
style="width: 100vw"
v-model:active-index="baseActiveIndex"
>
<SlideItem> <SlideItem>
<div ref="float" class="float" :class="floatFixed ? 'fixed' : ''"> <div ref="float" class="float" :class="floatFixed ? 'fixed' : ''">
<div <div
@ -26,10 +22,7 @@
:style="floatFixed ? 'opacity: 0;' : ''" :style="floatFixed ? 'opacity: 0;' : ''"
@click="$nav('/me/request-update')" @click="$nav('/me/request-update')"
> >
<Icon <Icon class="finger" icon="fluent-emoji-high-contrast:middle-finger" />
class="finger"
icon="fluent-emoji-high-contrast:middle-finger"
/>
</div> </div>
<div <div
class="item" class="item"
@ -57,33 +50,21 @@
<header <header
ref="header" ref="header"
:style="{ :style="{
backgroundImage: `url(${_checkImgUrl(userinfo.cover_url[0].url_list[0])})`, backgroundImage: `url(${_checkImgUrl(userinfo.cover_url[0].url_list[0])})`
}" }"
@click=" @click="previewImg = _checkImgUrl(userinfo.cover_url[0].url_list[0])"
previewImg = _checkImgUrl(userinfo.cover_url[0].url_list[0])
"
> >
<div class="info"> <div class="info">
<img <img
:src="_checkImgUrl(userinfo.avatar_168x168.url_list[0])" :src="_checkImgUrl(userinfo.avatar_168x168.url_list[0])"
class="avatar" class="avatar"
@click.stop=" @click.stop="previewImg = _checkImgUrl(userinfo.avatar_300x300.url_list[0])"
previewImg = _checkImgUrl(
userinfo.avatar_300x300.url_list[0],
)
"
/> />
<div class="right"> <div class="right">
<p class="name">{{ userinfo.nickname }}</p> <p class="name">{{ userinfo.nickname }}</p>
<div class="number mb1r"> <div class="number mb1r">
<span class="mr1r" v-if="userinfo.is_private" <span class="mr1r" v-if="userinfo.is_private">私密账号</span>
>私密账号</span <span>抖音号：{{ _getUserDouyinId({ author: userinfo }) }}</span>
>
<span
>抖音号：{{
_getUserDouyinId({ author: userinfo })
}}</span
>
<img <img
src="../../assets/img/icon/me/qrcode-gray.png" src="../../assets/img/icon/me/qrcode-gray.png"
alt="" alt=""
@ -97,47 +78,25 @@
<div class="head"> <div class="head">
<div class="heat"> <div class="heat">
<div class="text" @click="isShowStarCount = true"> <div class="text" @click="isShowStarCount = true">
<span class="num">{{ <span class="num">{{ _formatNumber(userinfo.aweme_count) }}</span>
_formatNumber(userinfo.aweme_count)
}}</span>
<span>获赞</span> <span>获赞</span>
</div> </div>
<div <div class="text" @click="$nav('/people/follow-and-fans', { type: 0 })">
class="text" <span class="num">{{ _formatNumber(userinfo.following_count) }}</span>
@click="$nav('/people/follow-and-fans', { type: 0 })"
>
<span class="num">{{
_formatNumber(userinfo.following_count)
}}</span>
<span>朋友</span> <span>朋友</span>
</div> </div>
<div <div class="text" @click="$nav('/people/follow-and-fans', { type: 0 })">
class="text" <span class="num">{{ _formatNumber(userinfo.following_count) }}</span>
@click="$nav('/people/follow-and-fans', { type: 0 })"
>
<span class="num">{{
_formatNumber(userinfo.following_count)
}}</span>
<span>关注</span> <span>关注</span>
</div> </div>
<div <div class="text" @click="$nav('/people/follow-and-fans', { type: 1 })">
class="text" <span class="num">{{ _formatNumber(userinfo.follower_count) }}</span>
@click="$nav('/people/follow-and-fans', { type: 1 })"
>
<span class="num">{{
_formatNumber(userinfo.follower_count)
}}</span>
<span>粉丝</span> <span>粉丝</span>
</div> </div>
</div> </div>
<div class="button" @click="$nav('/people/find-acquaintance')"> <div class="button" @click="$nav('/people/find-acquaintance')">添加朋友</div>
添加朋友
</div> </div>
</div> <div class="signature" @click="$nav('/me/edit-userinfo-item', { type: 3 })">
<div
class="signature"
@click="$nav('/me/edit-userinfo-item', { type: 3 })"
>
<template v-if="!userinfo.signature"> <template v-if="!userinfo.signature">
<span>点击添加介绍，让大家认识你...</span> <span>点击添加介绍，让大家认识你...</span>
<img src="../../assets/img/icon/me/write-gray.png" alt="" /> <img src="../../assets/img/icon/me/write-gray.png" alt="" />
@ -151,18 +110,12 @@
src="../../assets/img/icon/me/woman.png" src="../../assets/img/icon/me/woman.png"
alt="" alt=""
/> />
<img <img v-if="userinfo.gender == 1" src="../../assets/img/icon/me/man.png" alt="" />
v-if="userinfo.gender == 1"
src="../../assets/img/icon/me/man.png"
alt=""
/>
<span>{{ userinfo.user_age }}岁</span> <span>{{ userinfo.user_age }}岁</span>
</div> </div>
<div class="item" v-if="userinfo.province || userinfo.city"> <div class="item" v-if="userinfo.province || userinfo.city">
{{ userinfo.province }} {{ userinfo.province }}
<template v-if="userinfo.province && userinfo.city"> <template v-if="userinfo.province && userinfo.city"> - </template>
-
</template>
{{ userinfo.city }} {{ userinfo.city }}
</div> </div>
<div class="item" v-if="userinfo.school?.name"> <div class="item" v-if="userinfo.school?.name">
@ -202,26 +155,12 @@
:style="videoSlideRowListStyle" :style="videoSlideRowListStyle"
v-model:active-index="contentIndex" v-model:active-index="contentIndex"
> >
<SlideItem <SlideItem class="SlideItem" @scroll="scroll" :style="SlideItemStyle">
class="SlideItem" <Posters v-if="videos.my.total !== -1" :list="videos.my.list"></Posters>
@scroll="scroll" <Loading v-if="loadings.loading0" :is-full-screen="false"></Loading>
:style="SlideItemStyle"
>
<Posters
v-if="videos.my.total !== -1"
:list="videos.my.list"
></Posters>
<Loading
v-if="loadings.loading0"
:is-full-screen="false"
></Loading>
<no-more v-else /> <no-more v-else />
</SlideItem> </SlideItem>
<SlideItem <SlideItem class="SlideItem" @scroll="scroll" :style="SlideItemStyle">
class="SlideItem"
@scroll="scroll"
:style="SlideItemStyle"
>
<div class="notice"> <div class="notice">
<img src="../../assets/img/icon/me/lock-gray.png" alt="" /> <img src="../../assets/img/icon/me/lock-gray.png" alt="" />
<span>只有你能看到设为私密的作品和日常</span> <span>只有你能看到设为私密的作品和日常</span>
@ -231,36 +170,19 @@
mode="date" mode="date"
:list="videos.private.list" :list="videos.private.list"
></Posters> ></Posters>
<Loading <Loading v-if="loadings.loading1" :is-full-screen="false"></Loading>
v-if="loadings.loading1"
:is-full-screen="false"
></Loading>
<no-more v-else /> <no-more v-else />
</SlideItem> </SlideItem>
<SlideItem <SlideItem class="SlideItem" @scroll="scroll" :style="SlideItemStyle">
class="SlideItem"
@scroll="scroll"
:style="SlideItemStyle"
>
<div class="notice"> <div class="notice">
<img src="../../assets/img/icon/me/lock-gray.png" alt="" /> <img src="../../assets/img/icon/me/lock-gray.png" alt="" />
<span>只有你能看到自己的喜欢列表</span> <span>只有你能看到自己的喜欢列表</span>
</div> </div>
<Posters <Posters v-if="videos.like.total !== -1" :list="videos.like.list"></Posters>
v-if="videos.like.total !== -1" <Loading v-if="loadings.loading2" :is-full-screen="false"></Loading>
:list="videos.like.list"
></Posters>
<Loading
v-if="loadings.loading2"
:is-full-screen="false"
></Loading>
<no-more v-else /> <no-more v-else />
</SlideItem> </SlideItem>
<SlideItem <SlideItem class="SlideItem" @scroll="scroll" :style="SlideItemStyle">
class="SlideItem"
@scroll="scroll"
:style="SlideItemStyle"
>
<div class="notice"> <div class="notice">
<img src="../../assets/img/icon/me/lock-gray.png" alt="" /> <img src="../../assets/img/icon/me/lock-gray.png" alt="" />
<span>只有你能看到自己的收藏列表</span> <span>只有你能看到自己的收藏列表</span>
@ -269,10 +191,7 @@
<div class="video" v-if="videos.collect.video.total !== -1"> <div class="video" v-if="videos.collect.video.total !== -1">
<div class="top" @click="$nav('/me/collect/video-collect')"> <div class="top" @click="$nav('/me/collect/video-collect')">
<div class="left"> <div class="left">
<img <img src="../../assets/img/icon/me/video-whitegray.png" alt="" />
src="../../assets/img/icon/me/video-whitegray.png"
alt=""
/>
<span>视频</span> <span>视频</span>
</div> </div>
<div class="right"> <div class="right">
@ -289,10 +208,7 @@
<div class="music" v-if="videos.collect.music.total !== -1"> <div class="music" v-if="videos.collect.music.total !== -1">
<div class="top" @click="$nav('/me/collect/music-collect')"> <div class="top" @click="$nav('/me/collect/music-collect')">
<div class="left"> <div class="left">
<img <img src="../../assets/img/icon/me/music-whitegray.png" alt="" />
src="../../assets/img/icon/me/music-whitegray.png"
alt=""
/>
<span>音乐</span> <span>音乐</span>
</div> </div>
<div class="right"> <div class="right">
@ -312,109 +228,66 @@
</div> </div>
</div> </div>
</div> </div>
<Loading <Loading v-if="loadings.loading3" :is-full-screen="false"></Loading>
v-if="loadings.loading3"
:is-full-screen="false"
></Loading>
<no-more v-else /> <no-more v-else />
</SlideItem> </SlideItem>
</SlideRowList> </SlideRowList>
</div> </div>
<Footer v-bind:init-tab="5" /> <Footer v-bind:init-tab="5" />
<transition name="fade"> <transition name="fade">
<div <div class="mask" v-if="baseActiveIndex === 1" @click="baseActiveIndex = 0"></div>
class="mask"
v-if="baseActiveIndex === 1"
@click="baseActiveIndex = 0"
></div>
</transition> </transition>
</SlideItem> </SlideItem>
<SlideItem style="width: 70vw; overflow: auto"> <SlideItem style="width: 70vw; overflow: auto">
<transition name="fade1"> <transition name="fade1">
<div class="ul" v-if="!isMoreFunction"> <div class="ul" v-if="!isMoreFunction">
<div class="li" @click="$no"> <div class="li" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/shopping.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/shopping.png"
alt=""
/>
<span>我的订单</span> <span>我的订单</span>
</div> </div>
<div class="li" @click="$no"> <div class="li" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/wallet.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/wallet.png"
alt=""
/>
<span>钱包</span> <span>钱包</span>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="li" @click="$nav('/me/my-card')"> <div class="li" @click="$nav('/me/my-card')">
<img <img src="../../assets/img/icon/newicon/left_menu/qrcode.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/qrcode.png"
alt=""
/>
<span>我的二维码</span> <span>我的二维码</span>
</div> </div>
<div class="li" @click="$nav('/me/right-menu/look-history')"> <div class="li" @click="$nav('/me/right-menu/look-history')">
<img <img src="../../assets/img/icon/newicon/left_menu/time.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/time.png"
alt=""
/>
<span>观看历史</span> <span>观看历史</span>
</div> </div>
<div class="li" @click="$no"> <div class="li" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/clock.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/clock.png"
alt=""
/>
<span>时间管理</span> <span>时间管理</span>
</div> </div>
<div class="li" @click="$no"> <div class="li" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/workbench.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/workbench.png"
alt=""
/>
<span>创作者服务中心</span> <span>创作者服务中心</span>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="li" @click="$no"> <div class="li" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/bytedance-mini-app.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/bytedance-mini-app.png"
alt=""
/>
<span>小程序</span> <span>小程序</span>
</div> </div>
<div class="li" @click="$no"> <div class="li" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/gongyi.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/gongyi.png"
alt=""
/>
<span>抖音公益</span> <span>抖音公益</span>
</div> </div>
<div <div class="li" @click="$nav('/me/right-menu/minor-protection/index')">
class="li" <img src="../../assets/img/icon/newicon/left_menu/umbrella.png" alt="" />
@click="$nav('/me/right-menu/minor-protection/index')"
>
<img
src="../../assets/img/icon/newicon/left_menu/umbrella.png"
alt=""
/>
<span>未成年保护工具</span> <span>未成年保护工具</span>
</div> </div>
<div class="li" @click="$no"> <div class="li" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/headset.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/headset.png"
alt=""
/>
<span>我的客服</span> <span>我的客服</span>
</div> </div>
<div class="li" @click="$nav('/me/right-menu/setting')"> <div class="li" @click="$nav('/me/right-menu/setting')">
<img <img src="../../assets/img/icon/newicon/left_menu/setting-one.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/setting-one.png"
alt=""
/>
<span>设置</span> <span>设置</span>
</div> </div>
</div> </div>
@ -422,84 +295,49 @@
<div class="title">生活服务</div> <div class="title">生活服务</div>
<div class="functions"> <div class="functions">
<div class="function" @click="$no"> <div class="function" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/quan.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/quan.png"
alt=""
/>
<span>卡券</span> <span>卡券</span>
</div> </div>
<div class="function" @click="$no"> <div class="function" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/sd-card.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/sd-card.png"
alt=""
/>
<span>免流量</span> <span>免流量</span>
</div> </div>
<div class="function" @click="$no"> <div class="function" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/alarmmmmmmmmmmmm.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/alarmmmmmmmmmmmm.png"
alt=""
/>
<span>视频彩铃</span> <span>视频彩铃</span>
</div> </div>
</div> </div>
<div class="title">拓展功能</div> <div class="title">拓展功能</div>
<div class="functions"> <div class="functions">
<div class="function" @click="$no"> <div class="function" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/sun-one.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/sun-one.png"
alt=""
/>
<span>我的动态</span> <span>我的动态</span>
</div> </div>
<div class="function" @click="$no"> <div class="function" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/download.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/download.png"
alt=""
/>
<span>我的缓存</span> <span>我的缓存</span>
</div> </div>
<div class="function" @click="$no"> <div class="function" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/hot.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/hot.png"
alt=""
/>
<span>上热门</span> <span>上热门</span>
</div> </div>
<div class="function" @click="$no"> <div class="function" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/shop.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/shop.png"
alt=""
/>
<span>小店随心推</span> <span>小店随心推</span>
</div> </div>
<div class="function" @click="$no"> <div class="function" @click="$no">
<img <img src="../../assets/img/icon/newicon/left_menu/yuandi.png" alt="" />
src="../../assets/img/icon/newicon/left_menu/yuandi.png"
alt=""
/>
<span>投教园地</span> <span>投教园地</span>
</div> </div>
</div> </div>
</div> </div>
</transition> </transition>
<div class="button-ctn"> <div class="button-ctn">
<div <div class="button" v-if="!isMoreFunction" @click="isMoreFunction = true">
class="button" <img src="../../assets/img/icon/newicon/left_menu/more.png" alt="" />
v-if="!isMoreFunction"
@click="isMoreFunction = true"
>
<img
src="../../assets/img/icon/newicon/left_menu/more.png"
alt=""
/>
<span>更多功能</span> <span>更多功能</span>
</div> </div>
<div <div class="button" v-if="isMoreFunction" @click="isMoreFunction = false">
class="button"
v-if="isMoreFunction"
@click="isMoreFunction = false"
>
<span>返回</span> <span>返回</span>
</div> </div>
</div> </div>
@ -526,31 +364,27 @@
@cancel="isShowStarCount = false" @cancel="isShowStarCount = false"
> >
<template v-slot:header> <template v-slot:header>
<img <img style="width: 100%" src="../../assets/img/icon/star-bg.png" alt="" />
style="width: 100%"
src="../../assets/img/icon/star-bg.png"
alt=""
/>
</template> </template>
</ConfirmDialog> </ConfirmDialog>
</div> </div>
</template> </template>
<script> <script>
import Posters from '../../components/Posters' import Posters from '../../components/Posters'
import Footer from '../../components/Footer' import Footer from '../../components/Footer'
import Indicator from '../../components/slide/Indicator' import Indicator from '../../components/slide/Indicator'
import { nextTick } from 'vue' import { nextTick } from 'vue'
import { mapState } from 'pinia' import { mapState } from 'pinia'
import bus from '../../utils/bus' import bus from '../../utils/bus'
import ConfirmDialog from '../../components/dialog/ConfirmDialog' import ConfirmDialog from '../../components/dialog/ConfirmDialog'
import { $no, _checkImgUrl, _formatNumber, _getUserDouyinId } from '@/utils' import { $no, _checkImgUrl, _formatNumber, _getUserDouyinId } from '@/utils'
import SlideHorizontal from '@/components/slide/SlideHorizontal.vue' import SlideHorizontal from '@/components/slide/SlideHorizontal.vue'
import { likeVideo, myVideo, privateVideo } from '@/api/videos' import { likeVideo, myVideo, privateVideo } from '@/api/videos'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
import { userCollect } from '@/api/user' import { userCollect } from '@/api/user'
export default { export default {
name: 'Me', name: 'Me',
components: { Posters, Footer, Indicator, ConfirmDialog, SlideHorizontal }, components: { Posters, Footer, Indicator, ConfirmDialog, SlideHorizontal },
data() { data() {
@ -569,7 +403,7 @@
headerHeight: 0, headerHeight: 0,
descHeight: 0, descHeight: 0,
videoSlideHeight: 0, videoSlideHeight: 0,
maxSlideHeight: 0, maxSlideHeight: 0
}, },
videoItemHeight: 0, videoItemHeight: 0,
startLocationY: 0, startLocationY: 0,
@ -582,28 +416,28 @@
my: { my: {
list: [], list: [],
total: -1, total: -1,
pageNo: 0, pageNo: 0
}, },
private: { private: {
list: [], list: [],
total: -1, total: -1,
pageNo: 0, pageNo: 0
}, },
like: { like: {
list: [], list: [],
total: -1, total: -1,
pageNo: 0, pageNo: 0
}, },
collect: { collect: {
video: { video: {
list: [], list: [],
total: -1, total: -1
}, },
music: { music: {
list: [], list: [],
total: -1, total: -1
}, }
}, }
}, },
pageSize: 15, pageSize: 15,
initSlideHeight: 0, initSlideHeight: 0,
@ -611,12 +445,12 @@
loading0: false, loading0: false,
loading1: false, loading1: false,
loading2: false, loading2: false,
loading3: false, loading3: false
}, },
tempScroll: false, tempScroll: false,
acceleration: 1.2, acceleration: 1.2,
sprint: 15, sprint: 15,
canScroll: true, canScroll: true
} }
}, },
computed: { computed: {
@ -625,19 +459,19 @@
height: height:
this.refs.videoSlideHeight !== 0 this.refs.videoSlideHeight !== 0
? this.refs.videoSlideHeight + 'px' ? this.refs.videoSlideHeight + 'px'
: 'calc(var(--vh, 1vh) * 100 - 146rem)', : 'calc(var(--vh, 1vh) * 100 - 146rem)'
} }
}, },
SlideItemStyle() { SlideItemStyle() {
if (this.tempScroll || this.isScroll) return { overflow: 'auto' } if (this.tempScroll || this.isScroll) return { overflow: 'auto' }
return { overflow: 'hidden' } return { overflow: 'hidden' }
}, },
...mapState(useBaseStore, ['userinfo', 'bodyHeight', 'bodyWidth']), ...mapState(useBaseStore, ['userinfo', 'bodyHeight', 'bodyWidth'])
}, },
watch: { watch: {
contentIndex(newVal, oldVal) { contentIndex(newVal, oldVal) {
this.changeIndex(newVal, oldVal) this.changeIndex(newVal, oldVal)
}, }
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
@ -679,9 +513,8 @@
}) })
} else { } else {
scrollAreaHeight = scrollAreaHeight =
Math.ceil( Math.ceil(this.videos[Object.keys(this.videos)[index]].list.length / 3) *
this.videos[Object.keys(this.videos)[index]].list.length / 3, this.videoItemHeight
) * this.videoItemHeight
switch (index) { switch (index) {
case 0: case 0:
scrollAreaHeight += 60 scrollAreaHeight += 60
@ -715,21 +548,21 @@
case 0: case 0:
res = await myVideo({ res = await myVideo({
pageNo: this.videos.my.pageNo, pageNo: this.videos.my.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize
}) })
if (res.code === this.SUCCESS) this.videos.my = res.data if (res.code === this.SUCCESS) this.videos.my = res.data
break break
case 1: case 1:
res = await privateVideo({ res = await privateVideo({
pageNo: this.videos.private.pageNo, pageNo: this.videos.private.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize
}) })
if (res.code === this.SUCCESS) this.videos.private = res.data if (res.code === this.SUCCESS) this.videos.private = res.data
break break
case 2: case 2:
res = await likeVideo({ res = await likeVideo({
pageNo: this.videos.like.pageNo, pageNo: this.videos.like.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize
}) })
if (res.code === this.SUCCESS) this.videos.like = res.data if (res.code === this.SUCCESS) this.videos.like = res.data
break break
@ -772,25 +605,25 @@
case 0: case 0:
res = await myVideo({ res = await myVideo({
pageNo: videoOb.pageNo, pageNo: videoOb.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize
}) })
break break
case 1: case 1:
res = await privateVideo({ res = await privateVideo({
pageNo: videoOb.pageNo, pageNo: videoOb.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize
}) })
break break
case 2: case 2:
res = await likeVideo({ res = await likeVideo({
pageNo: videoOb.pageNo, pageNo: videoOb.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize
}) })
break break
case 3: case 3:
res = await userCollect({ res = await userCollect({
pageNo: videoOb.pageNo, pageNo: videoOb.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize
}) })
break break
} }
@ -812,10 +645,7 @@
if (this.isScroll) { if (this.isScroll) {
let SlideItems = document.querySelectorAll('.SlideItem') let SlideItems = document.querySelectorAll('.SlideItem')
let SlideItem = SlideItems[this.contentIndex] let SlideItem = SlideItems[this.contentIndex]
if ( if (SlideItem.scrollHeight - SlideItem.clientHeight < SlideItem.scrollTop + 60) {
SlideItem.scrollHeight - SlideItem.clientHeight <
SlideItem.scrollTop + 60
) {
this.loadMoreData() this.loadMoreData()
} }
} }
@ -823,8 +653,7 @@
async touchMove(e) { async touchMove(e) {
if (!this.canScroll) return if (!this.canScroll) return
let moveDistance = e.touches[0].pageY - this.startLocationY let moveDistance = e.touches[0].pageY - this.startLocationY
let pageMoveDistance = let pageMoveDistance = this.lastMoveYDistance + moveDistance * this.acceleration
this.lastMoveYDistance + moveDistance * this.acceleration
// console.log('move-pageMoveDistance', pageMoveDistance) // console.log('move-pageMoveDistance', pageMoveDistance)
// console.log('move-moveDistance', moveDistance) // console.log('move-moveDistance', moveDistance)
//手指往上划，是负 //手指往上划，是负
@ -844,16 +673,12 @@
this.$refs.scroll.style.transform = `translate3d(0,0,0)` this.$refs.scroll.style.transform = `translate3d(0,0,0)`
if (pageMoveDistance < 400) { if (pageMoveDistance < 400) {
this.refs.header.style.transition = 'all 0s' this.refs.header.style.transition = 'all 0s'
this.refs.header.style.height = this.refs.header.style.height = this.refs.headerHeight + pageMoveDistance / 2 + 'px'
this.refs.headerHeight + pageMoveDistance / 2 + 'px'
} }
} else { } else {
let scrollAreaHeight = await this.getScrollAreaHeight() let scrollAreaHeight = await this.getScrollAreaHeight()
//如果可滚动区的高度大于posterHeight，并且移动超过30，就直接滚到顶 //如果可滚动区的高度大于posterHeight，并且移动超过30，就直接滚到顶
if ( if (this.refs.videoSlideHeight > scrollAreaHeight && Math.abs(moveDistance) > 20) {
this.refs.videoSlideHeight > scrollAreaHeight &&
Math.abs(moveDistance) > 20
) {
this.$refs.scroll.style.transition = 'all .2s' this.$refs.scroll.style.transition = 'all .2s'
this.$refs.scroll.style.transform = `translate3d(0,0,0)` this.$refs.scroll.style.transform = `translate3d(0,0,0)`
let SlideItems = document.querySelectorAll('.SlideItem') let SlideItems = document.querySelectorAll('.SlideItem')
@ -909,14 +734,9 @@
if (!this.isScroll) { if (!this.isScroll) {
this.tempScroll = true this.tempScroll = true
SlideItem.scrollTop = SlideItem.scrollTop =
Math.abs(pageMoveDistance) - Math.abs(pageMoveDistance) - this.refs.descHeight + this.floatHeight
this.refs.descHeight +
this.floatHeight
} }
if ( if (SlideItem.scrollHeight - SlideItem.clientHeight < SlideItem.scrollTop + 60) {
SlideItem.scrollHeight - SlideItem.clientHeight <
SlideItem.scrollTop + 60
) {
this.loadMoreData() this.loadMoreData()
} }
} }
@ -926,8 +746,7 @@
async touchEnd(e) { async touchEnd(e) {
if (!this.canScroll) return if (!this.canScroll) return
let moveDistance = e.changedTouches[0].pageY - this.startLocationY let moveDistance = e.changedTouches[0].pageY - this.startLocationY
let pageMoveDistance = let pageMoveDistance = this.lastMoveYDistance + moveDistance * this.acceleration
this.lastMoveYDistance + moveDistance * this.acceleration
// console.log('end-pageMoveDistance', pageMoveDistance) // console.log('end-pageMoveDistance', pageMoveDistance)
// console.log('end-moveDistance', moveDistance) // console.log('end-moveDistance', moveDistance)
@ -941,8 +760,7 @@
// console.log('end-gapTime', gapTime) // console.log('end-gapTime', gapTime)
let endTransformY = let endTransformY =
Math.abs(this.canTransformY) - Math.abs(this.canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
(this.refs.maxSlideHeight - this.refs.videoSlideHeight)
//手指往下划，页面向上动 //手指往下划，页面向上动
if (moveDistance >= 0) { if (moveDistance >= 0) {
@ -950,18 +768,10 @@
this.refs.header.style.transition = 'all .3s' this.refs.header.style.transition = 'all .3s'
this.refs.header.style.height = this.refs.headerHeight + 'px' this.refs.header.style.height = this.refs.headerHeight + 'px'
this.lastMoveYDistance = 0 this.lastMoveYDistance = 0
this.floatShowName = this.floatShowName = this.floatFixed = this.isScroll = this.tempScroll = false
this.floatFixed =
this.isScroll =
this.tempScroll =
false
} else { } else {
//猛的划一下 //猛的划一下
if ( if (Math.abs(moveDistance) > 100 && gapTime > 100 && gapTime < 150) {
Math.abs(moveDistance) > 100 &&
gapTime > 100 &&
gapTime < 150
) {
this.floatShowName = this.floatFixed = this.isScroll = false this.floatShowName = this.floatFixed = this.isScroll = false
//用cancelAnimationFrame快速滚动到顶部，要比transition = 'all .3s'快 //用cancelAnimationFrame快速滚动到顶部，要比transition = 'all .3s'快
@ -987,8 +797,7 @@
timer = requestAnimationFrame(fn) timer = requestAnimationFrame(fn)
} else { } else {
this.refs.header.style.transition = 'all .6s' this.refs.header.style.transition = 'all .6s'
this.refs.header.style.height = this.refs.header.style.height = this.refs.headerHeight + 'px'
this.refs.headerHeight + 'px'
this.lastMoveYDistance = 0 this.lastMoveYDistance = 0
cancelAnimationFrame(timer) cancelAnimationFrame(timer)
} }
@ -1000,11 +809,7 @@
} }
} }
timer = requestAnimationFrame(fn) timer = requestAnimationFrame(fn)
} else if ( } else if (Math.abs(moveDistance) > 100 && gapTime > 150 && gapTime < 300) {
Math.abs(moveDistance) > 100 &&
gapTime > 150 &&
gapTime < 300
) {
// //用cancelAnimationFrame快速滚动到顶部，要比transition = 'all .3s'快 // //用cancelAnimationFrame快速滚动到顶部，要比transition = 'all .3s'快
this.$refs.scroll.style.transition = 'all .3s' this.$refs.scroll.style.transition = 'all .3s'
this.$refs.scroll.style.transform = `translate3d(0,0,0)` this.$refs.scroll.style.transform = `translate3d(0,0,0)`
@ -1071,7 +876,7 @@
// console.log('transform',transform) // console.log('transform',transform)
let transformY = transform.substring( let transformY = transform.substring(
transform.indexOf('0px') + 5, transform.indexOf('0px') + 5,
transform.lastIndexOf('0px') - 4, transform.lastIndexOf('0px') - 4
) )
// console.log('transformY',transformY) // console.log('transformY',transformY)
//当前的transformY //当前的transformY
@ -1081,11 +886,11 @@
filterAge(age) { filterAge(age) {
let date = new Date(age) let date = new Date(age)
return new Date().getFullYear() - date.getFullYear() return new Date().getFullYear() - date.getFullYear()
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import 'Me'; @import 'Me';
</style> </style>

46
src/pages/me/MyCard.vue
View File

@ -3,24 +3,12 @@
<div class="header"> <div class="header">
<dy-back mode="light" @click="$back" /> <dy-back mode="light" @click="$back" />
<!-- todo 差一--> <!-- todo 差一-->
<img <img class="share" src="../../assets/img/icon/share-white.png" @click="isSharing = true" />
class="share"
src="../../assets/img/icon/share-white.png"
@click="isSharing = true"
/>
</div> </div>
<div class="content"> <div class="content">
<div class="qrcode"> <div class="qrcode">
<img <img class="qrcode-bg" src="../../assets/img/icon/me/code-bg.png" alt="" />
class="qrcode-bg" <img class="avatar" :src="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" />
src="../../assets/img/icon/me/code-bg.png"
alt=""
/>
<img
class="avatar"
:src="_checkImgUrl(userinfo.cover_url[0].url_list[0])"
alt=""
/>
</div> </div>
<span class="name">ZZZZZZZZZZ</span> <span class="name">ZZZZZZZZZZ</span>
@ -46,15 +34,15 @@
</div> </div>
</template> </template>
<script> <script>
import Share from '../../components/Share' import Share from '../../components/Share'
import { mapState } from 'pinia' import { mapState } from 'pinia'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
import { _checkImgUrl } from '@/utils' import { _checkImgUrl } from '@/utils'
export default { export default {
name: 'MyCard', name: 'MyCard',
components: { components: {
Share, Share
}, },
data() { data() {
@ -66,7 +54,7 @@
shareToFriend: false, shareToFriend: false,
shareType: -1, shareType: -1,
showDouyinCode: false, showDouyinCode: false
} }
}, },
watch: { watch: {
@ -83,11 +71,11 @@
case 8: case 8:
return (this.okText = '去微博粘贴') return (this.okText = '去微博粘贴')
} }
}, }
}, },
created() {}, created() {},
computed: { computed: {
...mapState(useBaseStore, ['userinfo']), ...mapState(useBaseStore, ['userinfo'])
}, },
methods: { methods: {
_checkImgUrl, _checkImgUrl,
@ -95,15 +83,15 @@
setTimeout(() => { setTimeout(() => {
cb() cb()
}, 100) }, 100)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
#MyCard { #MyCard {
background: rgb(136, 132, 133); background: rgb(136, 132, 133);
position: fixed; position: fixed;
left: 0; left: 0;
@ -200,5 +188,5 @@
} }
} }
} }
} }
</style> </style>

103
src/pages/me/MyMusic.vue
View File

@ -24,25 +24,13 @@
<span>播放全部</span> <span>播放全部</span>
<span class="num">(2)</span> <span class="num">(2)</span>
</div> </div>
<img <img class="menu" src="../../assets/img/icon/menu-white.png" alt="" />
class="menu"
src="../../assets/img/icon/menu-white.png"
alt=""
/>
</div> </div>
<div class="collect-list"> <div class="collect-list">
<div <div class="item" v-for="(item, index) in collectMusic" @click="page2PlayMusic(item)">
class="item"
v-for="(item, index) in collectMusic"
@click="page2PlayMusic(item)"
>
<div class="left"> <div class="left">
<div class="cover-wrapper"> <div class="cover-wrapper">
<img <img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
v-lazy="$imgPreview(item.cover)"
alt=""
class="cover"
/>
</div> </div>
<div class="desc"> <div class="desc">
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
@ -66,11 +54,7 @@
<span>推荐收藏</span> <span>推荐收藏</span>
<div class="right"> <div class="right">
<span class="auto-play">自动播放</span> <span class="auto-play">自动播放</span>
<switches <switches v-model="isAutoPlay" theme="bootstrap" color="success"></switches>
v-model="isAutoPlay"
theme="bootstrap"
color="success"
></switches>
</div> </div>
</div> </div>
<div class="recommend-list"> <div class="recommend-list">
@ -81,11 +65,7 @@
> >
<div class="left"> <div class="left">
<div class="cover-wrapper"> <div class="cover-wrapper">
<img <img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
v-lazy="$imgPreview(item.cover)"
alt=""
class="cover"
/>
</div> </div>
<div class="desc"> <div class="desc">
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
@ -119,18 +99,10 @@
</div> </div>
</div> </div>
<transition name="float-play"> <transition name="float-play">
<div <div v-if="isShowFloatPlay" class="playing" @click="isShowCollectDialog = true">
v-if="isShowFloatPlay"
class="playing"
@click="isShowCollectDialog = true"
>
<div class="playing-wrapper"> <div class="playing-wrapper">
<div class="cover-wrapper"> <div class="cover-wrapper">
<img <img v-lazy="$imgPreview(currentMusic.cover)" alt="" class="cover" />
v-lazy="$imgPreview(currentMusic.cover)"
alt=""
class="cover"
/>
</div> </div>
<div class="name">{{ currentMusic.name }}</div> <div class="name">{{ currentMusic.name }}</div>
<img <img
@ -162,12 +134,7 @@
<transition name="my-collect-dialog"> <transition name="my-collect-dialog">
<div class="my-collect-dialog" v-show="isShowCollectDialog"> <div class="my-collect-dialog" v-show="isShowCollectDialog">
<div class="dialog-header"> <div class="dialog-header">
<dy-back <dy-back class="close" mode="light" img="back" @click="isShowCollectDialog = false" />
class="close"
mode="light"
img="back"
@click="isShowCollectDialog = false"
/>
<span>我的收藏</span> <span>我的收藏</span>
<dy-back style="opacity: 0" mode="light" img="back" /> <dy-back style="opacity: 0" mode="light" img="back" />
</div> </div>
@ -181,19 +148,19 @@
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'pinia' import { mapState } from 'pinia'
import Switches from '../message/components/swtich/switches' import Switches from '../message/components/swtich/switches'
import SlideItemMusic from './components/SlideItemMusic' import SlideItemMusic from './components/SlideItemMusic'
import IndicatorLight from '../../components/slide/IndicatorLight' import IndicatorLight from '../../components/slide/IndicatorLight'
import FromBottomDialog from '../../components/dialog/FromBottomDialog' import FromBottomDialog from '../../components/dialog/FromBottomDialog'
import GuessMusic from './components/GuessMusic' import GuessMusic from './components/GuessMusic'
import CollectMusic from './components/CollectMusic' import CollectMusic from './components/CollectMusic'
import Loading from '../../components/Loading' import Loading from '../../components/Loading'
import { userCollect } from '@/api/user' import { userCollect } from '@/api/user'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
//TODO 两个page页面的播放冲突未做 //TODO 两个page页面的播放冲突未做
export default { export default {
name: 'MyMusic', name: 'MyMusic',
components: { components: {
FromBottomDialog, FromBottomDialog,
@ -202,7 +169,7 @@
IndicatorLight, IndicatorLight,
GuessMusic, GuessMusic,
CollectMusic, CollectMusic,
Loading, Loading
}, },
data() { data() {
return { return {
@ -211,13 +178,12 @@
currentMusic: { currentMusic: {
name: '告白气球', name: '告白气球',
mp3: 'https://mp32.9ku.com/upload/128/2017/02/05/858423.mp3', mp3: 'https://mp32.9ku.com/upload/128/2017/02/05/858423.mp3',
cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url) cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
.href,
author: '周杰伦', author: '周杰伦',
duration: 60, duration: 60,
use_count: 37441000, use_count: 37441000,
is_collect: false, is_collect: false,
is_play: false, is_play: false
}, },
collectMusic: [], collectMusic: [],
recommendMusic: [], recommendMusic: [],
@ -230,14 +196,14 @@
isCollect: false, isCollect: false,
page2SlideIndex: -1, page2SlideIndex: -1,
page2IsPlay: false, page2IsPlay: false
} }
}, },
computed: { computed: {
...mapState(useBaseStore, ['bodyWidth']), ...mapState(useBaseStore, ['bodyWidth']),
page2Music() { page2Music() {
return this.collectMusic.concat(this.recommendMusic) return this.collectMusic.concat(this.recommendMusic)
}, }
}, },
created() { created() {
this.getCollectMusic() this.getCollectMusic()
@ -255,9 +221,7 @@
this.currentMusic = item this.currentMusic = item
this.isShowFloatPlay = true this.isShowFloatPlay = true
this.page2IsPlay = true this.page2IsPlay = true
this.page2SlideIndex = this.page2Music.findIndex( this.page2SlideIndex = this.page2Music.findIndex((v) => v.name === item.name)
(v) => v.name === item.name,
)
this.isShowCollectDialog = true this.isShowCollectDialog = true
this.$refs.CollectMusic.play(this.page2SlideIndex) this.$refs.CollectMusic.play(this.page2SlideIndex)
}, },
@ -267,20 +231,17 @@
this.loading = false this.loading = false
if (res.code === this.SUCCESS) { if (res.code === this.SUCCESS) {
this.collectMusic = res.data.music.list.slice(0, 2) this.collectMusic = res.data.music.list.slice(0, 2)
this.guessMusic = this.recommendMusic = res.data.music.list.slice( this.guessMusic = this.recommendMusic = res.data.music.list.slice(2, -1)
2,
-1,
)
} }
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.MyMusic { .MyMusic {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -552,5 +513,5 @@
transition-duration: 200ms; transition-duration: 200ms;
transform: translateY(100%); transform: translateY(100%);
} }
} }
</style> </style>

20
src/pages/me/MyRequestUpdate.vue
View File

@ -21,28 +21,28 @@
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'pinia' import { mapState } from 'pinia'
import FromBottomDialog from '../../components/dialog/FromBottomDialog' import FromBottomDialog from '../../components/dialog/FromBottomDialog'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
export default { export default {
name: 'MyRequestUpdate', name: 'MyRequestUpdate',
components: { FromBottomDialog }, components: { FromBottomDialog },
data() { data() {
return {} return {}
}, },
computed: { computed: {
...mapState(useBaseStore, ['friends']), ...mapState(useBaseStore, ['friends'])
}, },
created() {}, created() {},
methods: {}, methods: {}
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.RequestUpdate { .RequestUpdate {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -85,5 +85,5 @@
} }
} }
} }
} }
</style> </style>

36
src/pages/me/RequestUpdate.vue
View File

@ -24,9 +24,7 @@
<div class="request"> <div class="request">
<!-- <div class="title">近7天收到1次求更新</div>--> <!-- <div class="title">近7天收到1次求更新</div>-->
<!-- <div class="subtitle f12">上次发布作品：2020-08-01 上次开播：昨天23:12</div>--> <!-- <div class="subtitle f12">上次发布作品：2020-08-01 上次开播：昨天23:12</div>-->
<div class="subtitle f12"> <div class="subtitle f12">历史求更新（粉丝送礼后7天未开播则退还礼物）</div>
历史求更新（粉丝送礼后7天未开播则退还礼物）
</div>
<div class="list"> <div class="list">
<div class="item" v-for="item in friends.all"> <div class="item" v-for="item in friends.all">
<div class="left"> <div class="left">
@ -40,11 +38,7 @@
</div> </div>
</div> </div>
<div class="buttons"> <div class="buttons">
<dy-button <dy-button type="white" :border="false" :active="false" @click="$nav('/publish')"
type="white"
:border="false"
:active="false"
@click="$nav('/publish')"
>发布作品</dy-button >发布作品</dy-button
> >
<dy-button type="primary" :active="false" @click="$no">去直播</dy-button> <dy-button type="primary" :active="false" @click="$no">去直播</dy-button>
@ -60,31 +54,29 @@
<div class="l-row" @click="toggleRequestUpdate"> <div class="l-row" @click="toggleRequestUpdate">
{{ openRequestUpdate ? '关闭' : '开启' }}求更新提醒 {{ openRequestUpdate ? '关闭' : '开启' }}求更新提醒
</div> </div>
<div class="l-row" @click="$nav('/me/my-request-update')"> <div class="l-row" @click="$nav('/me/my-request-update')">我的求更新提醒</div>
我的求更新提醒
</div>
<div class="space"></div> <div class="space"></div>
<div class="l-row" @click="isShowOption = false">取消</div> <div class="l-row" @click="isShowOption = false">取消</div>
</from-bottom-dialog> </from-bottom-dialog>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'pinia' import { mapState } from 'pinia'
import FromBottomDialog from '../../components/dialog/FromBottomDialog' import FromBottomDialog from '../../components/dialog/FromBottomDialog'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
export default { export default {
name: 'RequestUpdate', name: 'RequestUpdate',
components: { FromBottomDialog }, components: { FromBottomDialog },
data() { data() {
return { return {
isShowOption: false, isShowOption: false,
loading: false, loading: false,
openRequestUpdate: true, openRequestUpdate: true
} }
}, },
computed: { computed: {
...mapState(useBaseStore, ['friends']), ...mapState(useBaseStore, ['friends'])
}, },
created() { created() {
this.getData() this.getData()
@ -103,15 +95,15 @@
} else { } else {
this.$notice('提醒已关闭，再次点击可开启') this.$notice('提醒已关闭，再次点击可开启')
} }
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../assets/less/index'; @import '../../assets/less/index';
.RequestUpdate { .RequestUpdate {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -216,5 +208,5 @@
} }
} }
} }
} }
</style> </style>

26
src/pages/me/collect/MusicCollect.vue
View File

@ -7,11 +7,7 @@
</BaseHeader> </BaseHeader>
<div class="content"> <div class="content">
<div class="list"> <div class="list">
<div <div class="item" v-for="(item, index) in list" @click="togglePlay(item, list)">
class="item"
v-for="(item, index) in list"
@click="togglePlay(item, list)"
>
<div class="music"> <div class="music">
<div class="cover-wrapper"> <div class="cover-wrapper">
<img v-lazy="$imgPreview(item.cover)" alt="" class="cover" /> <img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
@ -82,11 +78,11 @@
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'pinia' import { mapState } from 'pinia'
import { userCollect } from '@/api/user' import { userCollect } from '@/api/user'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
export default { export default {
name: 'MusicCollect', name: 'MusicCollect',
components: {}, components: {},
props: {}, props: {},
@ -97,11 +93,11 @@
audio: new Audio(), audio: new Audio(),
currentItem: null, currentItem: null,
step: null, step: null,
process: 0, process: 0
} }
}, },
computed: { computed: {
...mapState(useBaseStore, ['bodyWidth']), ...mapState(useBaseStore, ['bodyWidth'])
}, },
created() { created() {
this.getData() this.getData()
@ -154,16 +150,16 @@
this.audio.pause() this.audio.pause()
// this.audio.currentTime = 0 // this.audio.currentTime = 0
this.audio.removeEventListener('ended', null) this.audio.removeEventListener('ended', null)
}, }
}, },
unmounted() { unmounted() {
this.stopPlay() this.stopPlay()
},
} }
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.MusicCollect { .MusicCollect {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -335,5 +331,5 @@
} }
} }
} }
} }
</style> </style>

30
src/pages/me/collect/VideoCollect.vue
View File

@ -15,16 +15,16 @@
</div> </div>
</template> </template>
<script> <script>
import resource from '../../../assets/data/resource' import resource from '../../../assets/data/resource'
import Posters from '../../../components/Posters' import Posters from '../../../components/Posters'
import Scroll from '../../../components/Scroll' import Scroll from '../../../components/Scroll'
import { myVideo } from '@/api/videos' import { myVideo } from '@/api/videos'
export default { export default {
name: 'VideoCollect', name: 'VideoCollect',
components: { components: {
Posters, Posters,
Scroll, Scroll
}, },
data() { data() {
return { return {
@ -32,7 +32,7 @@
total: 0, total: 0,
pageNo: 0, pageNo: 0,
pageSize: 15, pageSize: 15,
videos: [], videos: []
} }
}, },
computed: {}, computed: {},
@ -51,22 +51,22 @@
this.loading = true this.loading = true
let res = await myVideo({ let res = await myVideo({
pageNo: this.pageNo, pageNo: this.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize
}) })
this.loading = false this.loading = false
if (res.code === this.SUCCESS) { if (res.code === this.SUCCESS) {
this.videos = this.videos.concat(res.data.list) this.videos = this.videos.concat(res.data.list)
this.total = res.data.total this.total = res.data.total
} }
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../../assets/less/index'; @import '../../../assets/less/index';
.VideoCollect { .VideoCollect {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -80,10 +80,8 @@
padding-top: var(--common-header-height); padding-top: var(--common-header-height);
.Scroll { .Scroll {
height: calc( height: calc(var(--vh, 1vh) * 100 - var(--common-header-height)) !important;
var(--vh, 1vh) * 100 - var(--common-header-height)
) !important;
}
} }
} }
}
</style> </style>

50
src/pages/me/components/CollectMusic.vue
View File

@ -30,11 +30,7 @@
<div class="left">待播清单</div> <div class="left">待播清单</div>
<div class="right" @click="isLoop = !isLoop"> <div class="right" @click="isLoop = !isLoop">
<img v-show="isLoop" src="@/assets/img/icon/me/loop.png" alt="" /> <img v-show="isLoop" src="@/assets/img/icon/me/loop.png" alt="" />
<img <img v-show="!isLoop" src="@/assets/img/icon/me/play-normal.png" alt="" />
v-show="!isLoop"
src="@/assets/img/icon/me/play-normal.png"
alt=""
/>
<span>{{ isLoop ? '单曲循环' : '顺序播放' }}</span> <span>{{ isLoop ? '单曲循环' : '顺序播放' }}</span>
</div> </div>
</div> </div>
@ -74,15 +70,15 @@
</div> </div>
</template> </template>
<script> <script>
import FromBottomDialog from '../../../components/dialog/FromBottomDialog' import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
import Switches from '../../message/components/swtich/switches' import Switches from '../../message/components/swtich/switches'
import SlideItemMusic from './SlideItemMusic' import SlideItemMusic from './SlideItemMusic'
import IndicatorLight from '../../../components/slide/IndicatorLight' import IndicatorLight from '../../../components/slide/IndicatorLight'
import Share from '../../../components/Share' import Share from '../../../components/Share'
import ShareToFriend from '../../home/components/ShareToFriend' import ShareToFriend from '../../home/components/ShareToFriend'
import SlideVertical from '@/components/slide/SlideVertical.vue' import SlideVertical from '@/components/slide/SlideVertical.vue'
export default { export default {
name: 'GuessMusic', name: 'GuessMusic',
components: { components: {
SlideVertical, SlideVertical,
@ -91,17 +87,17 @@
SlideItemMusic, SlideItemMusic,
IndicatorLight, IndicatorLight,
Share, Share,
ShareToFriend, ShareToFriend
}, },
props: { props: {
list: { list: {
type: Array, type: Array,
default: [], default: []
}, },
page2SlideIndex: { page2SlideIndex: {
type: Number, type: Number,
default: 0, default: 0
}, }
}, },
data() { data() {
return { return {
@ -112,7 +108,7 @@
isLoop: false, isLoop: false,
collectSlideIndex: 0, collectSlideIndex: 0,
isShowCollectDialog: false, isShowCollectDialog: false,
itemRefs: [], itemRefs: []
} }
}, },
computed: { computed: {
@ -122,8 +118,8 @@
}, },
set(val) { set(val) {
this.$emit('update:page2SlideIndex', val) this.$emit('update:page2SlideIndex', val)
}, }
}, }
}, },
created() {}, created() {},
watch: { watch: {
@ -132,7 +128,7 @@
ref.togglePlay(false) ref.togglePlay(false)
}) })
this.itemRefs[newVal].togglePlay(true, true) this.itemRefs[newVal].togglePlay(true, true)
}, }
}, },
methods: { methods: {
previous() { previous() {
@ -166,12 +162,12 @@
this.itemRefs.map((ref) => { this.itemRefs.map((ref) => {
ref.togglePlay(false) ref.togglePlay(false)
}) })
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
#CollectMusic { #CollectMusic {
//width: 100vw; //width: 100vw;
//height: calc(var(--vh, 1vh) * 100); //height: calc(var(--vh, 1vh) * 100);
position: fixed; position: fixed;
@ -182,9 +178,9 @@
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 14rem; font-size: 14rem;
} }
.music-list-dialog { .music-list-dialog {
height: 70vh; height: 70vh;
@bg-color: #1e1d1d; @bg-color: #1e1d1d;
background: @bg-color; background: @bg-color;
@ -276,5 +272,5 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }
</style> </style>

44
src/pages/me/components/GuessMusic.vue
View File

@ -30,11 +30,7 @@
<div class="left">待播清单</div> <div class="left">待播清单</div>
<div class="right" @click="isLoop = !isLoop"> <div class="right" @click="isLoop = !isLoop">
<img v-show="isLoop" src="@/assets/img/icon/me/loop.png" alt="" /> <img v-show="isLoop" src="@/assets/img/icon/me/loop.png" alt="" />
<img <img v-show="!isLoop" src="@/assets/img/icon/me/play-normal.png" alt="" />
v-show="!isLoop"
src="@/assets/img/icon/me/play-normal.png"
alt=""
/>
<span>{{ isLoop ? '单曲循环' : '顺序播放' }}</span> <span>{{ isLoop ? '单曲循环' : '顺序播放' }}</span>
</div> </div>
</div> </div>
@ -74,15 +70,15 @@
</div> </div>
</template> </template>
<script> <script>
import FromBottomDialog from '../../../components/dialog/FromBottomDialog' import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
import Switches from '../../message/components/swtich/switches' import Switches from '../../message/components/swtich/switches'
import SlideItemMusic from './SlideItemMusic' import SlideItemMusic from './SlideItemMusic'
import IndicatorLight from '../../../components/slide/IndicatorLight' import IndicatorLight from '../../../components/slide/IndicatorLight'
import Share from '../../../components/Share' import Share from '../../../components/Share'
import ShareToFriend from '../../home/components/ShareToFriend' import ShareToFriend from '../../home/components/ShareToFriend'
import SlideVertical from '@/components/slide/SlideVertical.vue' import SlideVertical from '@/components/slide/SlideVertical.vue'
export default { export default {
name: 'GuessMusic', name: 'GuessMusic',
components: { components: {
SlideVertical, SlideVertical,
@ -91,13 +87,13 @@
SlideItemMusic, SlideItemMusic,
IndicatorLight, IndicatorLight,
Share, Share,
ShareToFriend, ShareToFriend
}, },
props: { props: {
list: { list: {
type: Array, type: Array,
default: [], default: []
}, }
}, },
data() { data() {
return { return {
@ -108,7 +104,7 @@
isLoop: false, isLoop: false,
guessSlideIndex: 0, guessSlideIndex: 0,
isShowCollectDialog: false, isShowCollectDialog: false,
itemRefs: [], itemRefs: []
} }
}, },
watch: { watch: {
@ -117,7 +113,7 @@
ref.togglePlay(false) ref.togglePlay(false)
}) })
this.itemRefs[newVal].togglePlay(true, true) this.itemRefs[newVal].togglePlay(true, true)
}, }
}, },
computed: {}, computed: {},
created() {}, created() {},
@ -148,12 +144,12 @@
ref.togglePlay(false) ref.togglePlay(false)
}) })
this.itemRefs[index].togglePlay(true, true) this.itemRefs[index].togglePlay(true, true)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
#GuessMusic { #GuessMusic {
//width: 100vw; //width: 100vw;
//height: calc(var(--vh, 1vh) * 100); //height: calc(var(--vh, 1vh) * 100);
position: fixed; position: fixed;
@ -164,9 +160,9 @@
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 14rem; font-size: 14rem;
} }
.music-list-dialog { .music-list-dialog {
height: 70vh; height: 70vh;
@bg-color: #1e1d1d; @bg-color: #1e1d1d;
background: @bg-color; background: @bg-color;
@ -258,5 +254,5 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }
</style> </style>

77
src/pages/me/components/SlideItemMusic.vue
View File

@ -4,22 +4,14 @@
<div class="cover"> <div class="cover">
<img v-lazy="$imgPreview(modelValue.cover)" alt="" /> <img v-lazy="$imgPreview(modelValue.cover)" alt="" />
</div> </div>
<div <div class="lyrics-wrapper" ref="lyrics-wrapper" @click="isFullLyrics = true">
class="lyrics-wrapper"
ref="lyrics-wrapper"
@click="isFullLyrics = true"
>
<div class="container"> <div class="container">
<div class="lyrics" v-for="item in lyricsFullTexts">{{ item.c }}</div> <div class="lyrics" v-for="item in lyricsFullTexts">{{ item.c }}</div>
</div> </div>
</div> </div>
<!-- <div class="lyrics-mask" @click="isFullLyrics = true"></div>--> <!-- <div class="lyrics-mask" @click="isFullLyrics = true"></div>-->
</div> </div>
<div <div class="lyrics-full" v-show="isFullLyrics" @click="isFullLyrics = false">
class="lyrics-full"
v-show="isFullLyrics"
@click="isFullLyrics = false"
>
<div <div
class="list" class="list"
style="overflow: auto" style="overflow: auto"
@ -82,10 +74,7 @@
@click="$emit('update:isLoop', true)" @click="$emit('update:isLoop', true)"
/> />
<div class="center"> <div class="center">
<img <img src="@/assets/img/icon/me/previous.png" @click="slide('previous')" />
src="@/assets/img/icon/me/previous.png"
@click="slide('previous')"
/>
<img <img
v-show="isPlay" v-show="isPlay"
class="control" class="control"
@ -100,21 +89,18 @@
/> />
<img src="@/assets/img/icon/me/next.png" @click="slide('next')" /> <img src="@/assets/img/icon/me/next.png" @click="slide('next')" />
</div> </div>
<img <img src="@/assets/img/icon/me/music-list.png" @click="$emit('showList')" />
src="@/assets/img/icon/me/music-list.png"
@click="$emit('showList')"
/>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { nextTick } from 'vue' import { nextTick } from 'vue'
import globalMethods from '../../../utils' import globalMethods from '../../../utils'
import gaobaiqiqiu from '../../../assets/data/lyrics/gaobaiqiqiu.lrc?raw' import gaobaiqiqiu from '../../../assets/data/lyrics/gaobaiqiqiu.lrc?raw'
import { userCollect } from '@/api/user' import { userCollect } from '@/api/user'
export default { export default {
name: 'SlideItemMusic', name: 'SlideItemMusic',
components: {}, components: {},
props: { props: {
@ -122,12 +108,12 @@
type: Object, type: Object,
default: function () { default: function () {
return {} return {}
}, }
}, },
isLoop: { isLoop: {
type: Boolean, type: Boolean,
default: false, default: false
}, }
}, },
data() { data() {
return { return {
@ -146,7 +132,7 @@
currentTime: 0, currentTime: 0,
step: 0, step: 0,
startX: 0, startX: 0,
slideBarWidth: 0, slideBarWidth: 0
} }
}, },
computed: {}, computed: {},
@ -187,10 +173,7 @@
// } // }
if (!this.isMove) { if (!this.isMove) {
this.currentTime = currentTime this.currentTime = currentTime
if ( if (Math.ceil(e.target.currentTime) * this.step > this.slideBarWidth - 5) {
Math.ceil(e.target.currentTime) * this.step >
this.slideBarWidth - 5
) {
this.pageX = this.slideBarWidth - 5 this.pageX = this.slideBarWidth - 5
} else { } else {
this.pageX = Math.ceil(e.target.currentTime) * this.step this.pageX = Math.ceil(e.target.currentTime) * this.step
@ -232,10 +215,7 @@
this.loading = false this.loading = false
if (res.code === this.SUCCESS) { if (res.code === this.SUCCESS) {
this.collectMusic = res.data.music.list.slice(0, 2) this.collectMusic = res.data.music.list.slice(0, 2)
this.guessMusic = this.recommendMusic = res.data.music.list.slice( this.guessMusic = this.recommendMusic = res.data.music.list.slice(2, -1)
2,
-1,
)
} }
}, },
createLrcObj(lrc) { createLrcObj(lrc) {
@ -245,17 +225,14 @@
al: '', //专辑名 al: '', //专辑名
by: '', //歌词制作人 by: '', //歌词制作人
offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置 offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
ms: [], //歌词数组{t:时间,c:歌词} ms: [] //歌词数组{t:时间,c:歌词}
} }
if (lrc.length === 0) return if (lrc.length === 0) return
let lrcs = lrc.split('\n') //用回车拆分成数组 let lrcs = lrc.split('\n') //用回车拆分成数组
for (let i in lrcs) { for (let i in lrcs) {
//遍历歌词数组 //遍历歌词数组
lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, '') //去除前后空格 lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, '') //去除前后空格
let t = lrcs[i].substring( let t = lrcs[i].substring(lrcs[i].indexOf('[') + 1, lrcs[i].indexOf(']')) //取[]间的内容
lrcs[i].indexOf('[') + 1,
lrcs[i].indexOf(']'),
) //取[]间的内容
let s = t.split(':') //分离:前后文字 let s = t.split(':') //分离:前后文字
if (isNaN(parseInt(s[0]))) { if (isNaN(parseInt(s[0]))) {
//不是数值 //不是数值
@ -278,7 +255,7 @@
oLRC.ms.push({ oLRC.ms.push({
//对象{t:时间,c:歌词}加入ms数组 //对象{t:时间,c:歌词}加入ms数组
t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3), t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
c: content, c: content
}) })
} }
} }
@ -300,7 +277,7 @@
let comments = this.$refs['lyrics-wrapper'] let comments = this.$refs['lyrics-wrapper']
comments.scrollTo({ comments.scrollTo({
top: comments.scrollHeight - comments.clientHeight, top: comments.scrollHeight - comments.clientHeight,
behavior: 'smooth', behavior: 'smooth'
}) })
}) })
}, },
@ -335,15 +312,15 @@
return { width: this.pageX + 'px' } return { width: this.pageX + 'px' }
} }
return { left: this.pageX + 'px' } return { left: this.pageX + 'px' }
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '@/assets/less/index.less'; @import '@/assets/less/index.less';
.SlideItemMusic { .SlideItemMusic {
color: white; color: white;
font-size: 14rem; font-size: 14rem;
min-width: 100vw; min-width: 100vw;
@ -352,11 +329,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; position: relative;
background: linear-gradient( background: linear-gradient(to bottom right, rgba(136, 132, 133, 1), rgba(136, 132, 133, 0.7));
to bottom right,
rgba(136, 132, 133, 1),
rgba(136, 132, 133, 0.7)
);
.cover { .cover {
margin-top: 80rem; margin-top: 80rem;
@ -540,5 +513,5 @@
} }
} }
} }
} }
</style> </style>

56
src/pages/me/rightMenu/LookHistory.vue
View File

@ -16,16 +16,10 @@
v-model:active-index="currentSlideItemIndex" v-model:active-index="currentSlideItemIndex"
> >
</Indicator> </Indicator>
<SlideHorizontal <SlideHorizontal v-model:index="currentSlideItemIndex" class="SlideRowList">
v-model:index="currentSlideItemIndex"
class="SlideRowList"
>
<SlideItem class="tab1" style="overflow: auto"> <SlideItem class="tab1" style="overflow: auto">
<Scroll class="Scroll" @pulldown="getHistoryVideo"> <Scroll class="Scroll" @pulldown="getHistoryVideo">
<Posters <Posters :list="historyVideo.list" v-if="historyVideo.total"></Posters>
:list="historyVideo.list"
v-if="historyVideo.total"
></Posters>
<Loading :is-full-screen="false" v-if="loadingVideo" /> <Loading :is-full-screen="false" v-if="loadingVideo" />
<template v-else> <template v-else>
<NoMore v-if="historyVideo.list.length" /> <NoMore v-if="historyVideo.list.length" />
@ -47,17 +41,17 @@
</div> </div>
</template> </template>
<script> <script>
import Posters from '../../../components/Posters' import Posters from '../../../components/Posters'
import Scroll from '../../../components/Scroll' import Scroll from '../../../components/Scroll'
import NoMore from '../../../components/NoMore' import NoMore from '../../../components/NoMore'
import { historyOther, historyVideo } from '@/api/videos' import { historyOther, historyVideo } from '@/api/videos'
export default { export default {
name: 'lookHistory', name: 'lookHistory',
components: { components: {
NoMore, NoMore,
Posters, Posters,
Scroll, Scroll
}, },
data() { data() {
return { return {
@ -70,13 +64,13 @@
historyVideo: { historyVideo: {
total: 0, total: 0,
pageNo: 0, pageNo: 0,
list: [], list: []
}, },
historyOther: { historyOther: {
total: 0, total: 0,
pageNo: 0, pageNo: 0,
list: [], list: []
}, }
} }
}, },
computed: { computed: {
@ -85,7 +79,7 @@
return this.historyVideo.list.length return this.historyVideo.list.length
} }
return this.historyOther.list.length return this.historyOther.list.length
}, }
}, },
created() { created() {
this.getHistoryVideo(true) this.getHistoryVideo(true)
@ -102,7 +96,7 @@
this.loadingVideo = true this.loadingVideo = true
let res = await historyVideo({ let res = await historyVideo({
pageNo: this.historyVideo.pageNo, pageNo: this.historyVideo.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize
}) })
console.log(res) console.log(res)
this.loadingVideo = false this.loadingVideo = false
@ -120,7 +114,7 @@
} }
let res = await historyOther({ let res = await historyOther({
pageNo: this.historyOther.pageNo, pageNo: this.historyOther.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize
}) })
this.loadingOther = false this.loadingOther = false
if (res.code === this.SUCCESS) { if (res.code === this.SUCCESS) {
@ -129,11 +123,7 @@
} }
}, },
clear() { clear() {
this.$showConfirmDialog( this.$showConfirmDialog('确定清空？', '清空后，以往观看记录不再展示', 'gray', () => {
'确定清空？',
'清空后，以往观看记录不再展示',
'gray',
() => {
if (this.currentSlideItemIndex === 0) { if (this.currentSlideItemIndex === 0) {
this.historyVideo.list = [] this.historyVideo.list = []
this.isClearHistoryVideo = true this.isClearHistoryVideo = true
@ -141,17 +131,16 @@
} }
this.historyOther.list = [] this.historyOther.list = []
this.isClearHistoryVideo = true this.isClearHistoryVideo = true
}, })
)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../../assets/less/index'; @import '../../../assets/less/index';
.lookHistory { .lookHistory {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -167,8 +156,7 @@
.SlideRowList, .SlideRowList,
.Scroll { .Scroll {
height: calc( height: calc(
var(--vh, 1vh) * 100 - var(--indicator-height) - var(--vh, 1vh) * 100 - var(--indicator-height) - var(--common-header-height)
var(--common-header-height)
) !important; ) !important;
} }
@ -190,5 +178,5 @@
} }
} }
} }
} }
</style> </style>

50
src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
View File

@ -3,41 +3,25 @@
<BaseHeader /> <BaseHeader />
<div class="content type1" v-if="type === 0"> <div class="content type1" v-if="type === 0">
<div class="notice"> <div class="notice">
<img <img src="../../../../assets/img/icon/newicon/left_menu/lock.png" alt="" />
src="../../../../assets/img/icon/newicon/left_menu/lock.png"
alt=""
/>
<span>时间锁已关闭</span> <span>时间锁已关闭</span>
</div> </div>
<div class="row mt1r no-active"> <div class="row mt1r no-active">
<div class="left"> <div class="left">
<img <img src="../../../../assets/img/icon/newicon/left_menu/hourglass.png" alt="" />
src="../../../../assets/img/icon/newicon/left_menu/hourglass.png"
alt=""
/>
<span>可为时间锁设置一个触发时间</span> <span>可为时间锁设置一个触发时间</span>
</div> </div>
</div> </div>
<div class="row mt1r no-active"> <div class="row mt1r no-active">
<div class="left"> <div class="left">
<img <img src="../../../../assets/img/icon/newicon/left_menu/clock.png" alt="" />
src="../../../../assets/img/icon/newicon/left_menu/clock.png" <span>开启时间锁后，单日使用时长超过触发时间，需输入密码才能继续使用</span>
alt=""
/>
<span
>开启时间锁后，单日使用时长超过触发时间，需输入密码才能继续使用</span
>
</div> </div>
</div> </div>
<div class="row mt1r mb1r no-active"> <div class="row mt1r mb1r no-active">
<div class="left"> <div class="left">
<img <img src="../../../../assets/img/icon/newicon/left_menu/lock.png" alt="" />
src="../../../../assets/img/icon/newicon/left_menu/lock.png" <span>开启时间锁，需先设置独立密码；忘记密码后可通过申诉重置密码</span>
alt=""
/>
<span
>开启时间锁，需先设置独立密码；忘记密码后可通过申诉重置密码</span
>
</div> </div>
</div> </div>
<div class="row mt1r mb1r" @click="$nav('trigger-time', { triggerTime })"> <div class="row mt1r mb1r" @click="$nav('trigger-time', { triggerTime })">
@ -72,11 +56,7 @@
</div> </div>
</div> </div>
<div class="content type2" v-if="type === 2"> <div class="content type2" v-if="type === 2">
<img <img class="desc" src="../../../../assets/img/icon/newicon/left_menu/img-type3.png" alt="" />
class="desc"
src="../../../../assets/img/icon/newicon/left_menu/img-type3.png"
alt=""
/>
<div class="footer"> <div class="footer">
<div class="notice"> <div class="notice">
<!-- TODO 有个勾选没做--> <!-- TODO 有个勾选没做-->
@ -94,15 +74,15 @@
</div> </div>
</template> </template>
<script> <script>
import enums from '../../../../utils/enums' import enums from '../../../../utils/enums'
export default { export default {
name: 'DetailSetting', name: 'DetailSetting',
data() { data() {
return { return {
type: 0, type: 0,
enums, enums,
triggerTime: enums.TRIGGER_TIME.TIME60, triggerTime: enums.TRIGGER_TIME.TIME60
} }
}, },
computed: {}, computed: {},
@ -111,14 +91,14 @@
let triggerTime = localStorage.getItem('changeTriggerTime') let triggerTime = localStorage.getItem('changeTriggerTime')
if (triggerTime !== null) this.triggerTime = triggerTime if (triggerTime !== null) this.triggerTime = triggerTime
}, },
methods: {}, methods: {}
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../../../assets/less/index'; @import '../../../../assets/less/index';
.DetailSetting { .DetailSetting {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -167,5 +147,5 @@
width: 100%; width: 100%;
} }
} }
} }
</style> </style>

12
src/pages/me/rightMenu/MinorProtection/Index.vue
View File

@ -31,21 +31,21 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'index', name: 'index',
data() { data() {
return {} return {}
}, },
computed: {}, computed: {},
created() {}, created() {},
methods: {}, methods: {}
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../../../assets/less/index'; @import '../../../../assets/less/index';
.index { .index {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -58,5 +58,5 @@
.content { .content {
padding-top: 60rem; padding-top: 60rem;
} }
} }
</style> </style>

16
src/pages/me/rightMenu/MinorProtection/TriggerTime.vue
View File

@ -34,14 +34,14 @@
</div> </div>
</template> </template>
<script> <script>
import enums from '../../../../utils/enums' import enums from '../../../../utils/enums'
export default { export default {
name: 'TriggerTime', name: 'TriggerTime',
data() { data() {
return { return {
enums, enums,
triggerTime: enums.TRIGGER_TIME.TIME60, triggerTime: enums.TRIGGER_TIME.TIME60
} }
}, },
created() { created() {
@ -51,15 +51,15 @@
setTriggerTime(type) { setTriggerTime(type) {
this.triggerTime = type this.triggerTime = type
localStorage.setItem('changeTriggerTime', type) localStorage.setItem('changeTriggerTime', type)
},
},
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import '../../../../assets/less/index'; @import '../../../../assets/less/index';
.TriggerTime { .TriggerTime {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -70,5 +70,5 @@
.content { .content {
padding-top: 60rem; padding-top: 60rem;
} }
} }
</style> </style>

Some files were not shown because too many files have changed in this diff Show More