pretty再次格式化所有文件
This commit is contained in:
zyronon
parent
474859c309
commit
6f165f997a
@ -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
14
.eslintrc.cjs
Normal 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
11
.prettierrc
@ -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
8
.prettierrc.json
Normal 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
8
jsconfig.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
15
package.json
15
package.json
@ -6,7 +6,9 @@
|
||||
"build": "vite build --mode prod",
|
||||
"build-uni-app": "vite build --mode uni",
|
||||
"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": {
|
||||
"@jambonn/vue-lazyload": "1.0.9",
|
||||
@ -27,15 +29,18 @@
|
||||
"@iconify/vue": "^4.1.1",
|
||||
"@types/lodash-es": "^4.17.9",
|
||||
"@vitejs/plugin-vue": "4.0.0",
|
||||
"@vitejs/plugin-vue-jsx": "3.0.0",
|
||||
"less": "4.1.3",
|
||||
"prettier": "3.2.5",
|
||||
"rollup-plugin-visualizer": "^5.9.2",
|
||||
"unplugin-vue-define-options": "^1.4.1",
|
||||
"unplugin-vue-macros": "^2.7.10",
|
||||
"vite": "4.5.2",
|
||||
"vite-plugin-cdn-import": "0.3.5",
|
||||
"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
4903
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
87
src/App.vue
87
src/App.vue
@ -9,27 +9,27 @@
|
||||
<Call />
|
||||
</template>
|
||||
<script>
|
||||
/*
|
||||
/*
|
||||
* try {navigator.control.gesture(false);} catch (e) {} //UC浏览器关闭默认手势事件
|
||||
try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出菜单
|
||||
* */
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import routes from './router/routes'
|
||||
import Call from './components/Call'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import routes from './router/routes'
|
||||
import Call from './components/Call'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Call,
|
||||
Call
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
transitionName: 'go',
|
||||
transitionName: 'go'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['excludeRoutes']),
|
||||
...mapState(useBaseStore, ['excludeRoutes'])
|
||||
},
|
||||
// watch $route 决定使用哪种过渡
|
||||
watch: {
|
||||
@ -47,26 +47,23 @@ try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出
|
||||
'/publish',
|
||||
'/home/live',
|
||||
'slide',
|
||||
'/test',
|
||||
'/test'
|
||||
]
|
||||
if (
|
||||
noAnimation.indexOf(from.path) !== -1 &&
|
||||
noAnimation.indexOf(to.path) !== -1
|
||||
) {
|
||||
if (noAnimation.indexOf(from.path) !== -1 && noAnimation.indexOf(to.path) !== -1) {
|
||||
return (this.transitionName = '')
|
||||
}
|
||||
|
||||
const toDepth = routes.findIndex((v) => v.path === to.path)
|
||||
const fromDepth = routes.findIndex((v) => v.path === from.path)
|
||||
this.transitionName = toDepth > fromDepth ? 'go' : 'back'
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useBaseStore, ['init', 'setMaskDialog']),
|
||||
setVh() {
|
||||
let vh = window.innerHeight * 0.01
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`)
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
@ -84,57 +81,57 @@ try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出
|
||||
navigator.control.longpressMenu(false)
|
||||
} catch (e) {}
|
||||
document.onselectstart = new Function('return false') //禁止选中文字
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import './assets/less/index';
|
||||
@import './assets/less/index';
|
||||
|
||||
#app {
|
||||
#app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.go-enter-from {
|
||||
.go-enter-from {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
//最终状态
|
||||
.back-enter-to,
|
||||
.back-enter-from,
|
||||
.go-enter-to,
|
||||
.go-leave-from {
|
||||
//最终状态
|
||||
.back-enter-to,
|
||||
.back-enter-from,
|
||||
.go-enter-to,
|
||||
.go-leave-from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.go-leave-to {
|
||||
.go-leave-to {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.go-enter-active,
|
||||
.go-leave-active,
|
||||
.back-enter-active,
|
||||
.back-leave-active {
|
||||
.go-enter-active,
|
||||
.go-leave-active,
|
||||
.back-enter-active,
|
||||
.back-leave-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.back-enter-from {
|
||||
.back-enter-from {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.back-leave-to {
|
||||
.back-leave-to {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,8 +8,7 @@ export default {
|
||||
all: [
|
||||
{
|
||||
id: '224e9a00-ffa0-4bc1-bb07-c318c7b02fa5',
|
||||
avatar: new URL('../../assets/img/icon/avatar/1.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/1.png', import.meta.url).href,
|
||||
name: '何以为家',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -24,12 +23,11 @@ export default {
|
||||
account: '234',
|
||||
pinyin: 'H',
|
||||
select: false,
|
||||
type: CONST_VAR.RELATE_ENUM.REQUEST_FOLLOW,
|
||||
type: CONST_VAR.RELATE_ENUM.REQUEST_FOLLOW
|
||||
},
|
||||
{
|
||||
id: '2b446aa8-5d31-429a-8e39-d4705eb4e900',
|
||||
avatar: new URL('../../assets/img/icon/avatar/19.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/19.png', import.meta.url).href,
|
||||
name: '浅唱↘我们的歌',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -44,12 +42,11 @@ export default {
|
||||
account: '33453',
|
||||
pinyin: 'Q',
|
||||
select: false,
|
||||
type: CONST_VAR.RELATE_ENUM.FOLLOW_ME,
|
||||
type: CONST_VAR.RELATE_ENUM.FOLLOW_ME
|
||||
},
|
||||
{
|
||||
id: '2d8622b4-7112-4bc7-a0cf-00a268a85504',
|
||||
avatar: new URL('../../assets/img/icon/avatar/25.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/25.png', import.meta.url).href,
|
||||
name: '‘心’之天空',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -64,12 +61,11 @@ export default {
|
||||
account: '234234',
|
||||
pinyin: '#',
|
||||
select: false,
|
||||
type: CONST_VAR.RELATE_ENUM.FOLLOW_HE,
|
||||
type: CONST_VAR.RELATE_ENUM.FOLLOW_HE
|
||||
},
|
||||
{
|
||||
id: '2e38900b-65f7-426a-8e8b-edb403df35fb',
|
||||
avatar: new URL('../../assets/img/icon/avatar/18.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/18.png', import.meta.url).href,
|
||||
name: '◇、_保持微笑ゞ',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -84,12 +80,11 @@ export default {
|
||||
account: '1111',
|
||||
pinyin: '#',
|
||||
select: false,
|
||||
type: CONST_VAR.RELATE_ENUM.FOLLOW_EACH_OTHER,
|
||||
type: CONST_VAR.RELATE_ENUM.FOLLOW_EACH_OTHER
|
||||
},
|
||||
{
|
||||
id: '3cd53cb5-04f8-4439-ad2b-e57b3f9b8c73',
|
||||
avatar: new URL('../../assets/img/icon/avatar/26.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/26.png', import.meta.url).href,
|
||||
name: '好◇°我会Yi直在●',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -103,12 +98,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'sdfs',
|
||||
pinyin: 'H',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: '46c77017-9dc6-4a48-bf96-560c6e7db06f',
|
||||
avatar: new URL('../../assets/img/icon/avatar/4.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/4.png', import.meta.url).href,
|
||||
name: '甫韦茹',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -122,12 +116,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'dgfdfg',
|
||||
pinyin: 'F',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: '4df770d7-a414-4e02-8f9e-72ebd87eb93e',
|
||||
avatar: new URL('../../assets/img/icon/avatar/12.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/12.png', import.meta.url).href,
|
||||
name: '幸福泡泡',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -141,12 +134,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'df',
|
||||
pinyin: 'X',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: '5ebb4d7a-c7ad-43c7-a830-9eb3ee423cb7',
|
||||
avatar: new URL('../../assets/img/icon/avatar/3.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
|
||||
name: '蔡傲安',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -160,12 +152,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'ssss',
|
||||
pinyin: 'C',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: '7226092d-a2c5-4ffd-98d7-3b7ac814bca3',
|
||||
avatar: new URL('../../assets/img/icon/avatar/16.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/16.png', import.meta.url).href,
|
||||
name: '心若向阳无谓伤悲',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -179,12 +170,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'asdfasd',
|
||||
pinyin: 'X',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: '72aef2a9-5573-4205-9288-706e19bccc7f',
|
||||
avatar: new URL('../../assets/img/icon/avatar/10.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/10.png', import.meta.url).href,
|
||||
name: 'A倒影着稚嫩的少年',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -198,12 +188,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'wfghdf',
|
||||
pinyin: '#',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: '77c82d2e-9be1-45c2-a733-00445d2e7f2c',
|
||||
avatar: new URL('../../assets/img/icon/avatar/22.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/22.png', import.meta.url).href,
|
||||
name: '一只喵的旅行。',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -217,12 +206,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'sadf',
|
||||
pinyin: 'Y',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: '7b30566d-70eb-4a31-ae43-200917269a43',
|
||||
avatar: new URL('../../assets/img/icon/avatar/14.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/14.png', import.meta.url).href,
|
||||
name: '℉阳光下的小情绪',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -236,12 +224,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'asdfa',
|
||||
pinyin: '#',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: '90c6ccd8-0653-4789-9348-28fba06d6ae3',
|
||||
avatar: new URL('../../assets/img/icon/avatar/11.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/11.png', import.meta.url).href,
|
||||
name: '思念一直在',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -255,12 +242,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'as',
|
||||
pinyin: 'S',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'a2c1310f-1a3c-430f-9b7c-557b9ccdd33d',
|
||||
avatar: new URL('../../assets/img/icon/avatar/9.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/9.png', import.meta.url).href,
|
||||
name: '阎韶丽',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -274,12 +260,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'vbvd',
|
||||
pinyin: 'Y',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'a7443b4f-b0fa-4409-a693-5f090aa763ee',
|
||||
avatar: new URL('../../assets/img/icon/avatar/5.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/5.png', import.meta.url).href,
|
||||
name: '马佳婉清',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -293,12 +278,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'sdf',
|
||||
pinyin: 'M',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'b49fd828-f8a7-4be0-a3bc-0a8fa312b2e8',
|
||||
avatar: new URL('../../assets/img/icon/avatar/0.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/0.png', import.meta.url).href,
|
||||
name: '倒影着稚嫩的少年',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -312,12 +296,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'eeee',
|
||||
pinyin: 'D',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'b632bffe-1cfb-408a-8255-b558e2faf49a',
|
||||
avatar: new URL('../../assets/img/icon/avatar/8.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/8.png', import.meta.url).href,
|
||||
name: '买易槐',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -331,12 +314,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'xczxc',
|
||||
pinyin: 'M',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'c01f10dd-a270-42ab-876f-64a8beb22a69',
|
||||
avatar: new URL('../../assets/img/icon/avatar/7.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/7.png', import.meta.url).href,
|
||||
name: '章昊苍',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -350,12 +332,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'gggggggggr',
|
||||
pinyin: 'Z',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'd0bf11a3-a25b-4865-a047-c67de8e8af7b',
|
||||
avatar: new URL('../../assets/img/icon/avatar/2.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/2.png', import.meta.url).href,
|
||||
name: '凌依晨',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -369,12 +350,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: '12',
|
||||
pinyin: 'L',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'd300b7a5-115d-41ba-a071-7d1781da331f',
|
||||
avatar: new URL('../../assets/img/icon/avatar/23.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/23.png', import.meta.url).href,
|
||||
name: '为你锁住心',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -388,12 +368,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: '1629993515',
|
||||
pinyin: 'W',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'deceba30-80fc-45c2-bd56-8d65091bb104',
|
||||
avatar: new URL('../../assets/img/icon/avatar/13.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/13.png', import.meta.url).href,
|
||||
name: '原味青春',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -407,12 +386,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'werwe',
|
||||
pinyin: 'Y',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'e0c3d20d-5978-4339-962f-cffc6e29aff1',
|
||||
avatar: new URL('../../assets/img/icon/avatar/24.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/24.png', import.meta.url).href,
|
||||
name: '一起走过的日子°',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -426,12 +404,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'dfgdfg',
|
||||
pinyin: 'Y',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'e1fb6274-10fa-4d50-b9b1-6eefacfc2341',
|
||||
avatar: new URL('../../assets/img/icon/avatar/15.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/15.png', import.meta.url).href,
|
||||
name: '看，熟悉旳风景',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -445,12 +422,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'aasdasd',
|
||||
pinyin: 'K',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'eab1ef9b-70e6-4249-8d78-b4f6e1b0cb08',
|
||||
avatar: new URL('../../assets/img/icon/avatar/20.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/20.png', import.meta.url).href,
|
||||
name: 'dear°学会微笑',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -464,12 +440,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'gggggg',
|
||||
pinyin: '#',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'ecb405e2-d057-4c85-a12b-a5fe9a7b8a05',
|
||||
avatar: new URL('../../assets/img/icon/avatar/6.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/6.png', import.meta.url).href,
|
||||
name: '富察昕昕',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -483,12 +458,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'ghjg',
|
||||
pinyin: 'F',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'f09652a3-d6e1-4517-a15e-583a24a250e1',
|
||||
avatar: new URL('../../assets/img/icon/avatar/17.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/17.png', import.meta.url).href,
|
||||
name: '蓝天下的迷彩?',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -502,12 +476,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'yhjh',
|
||||
pinyin: 'L',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'f676cc30-cc81-487a-9450-cbb1f3c5cde8',
|
||||
avatar: new URL('../../assets/img/icon/avatar/21.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/21.png', import.meta.url).href,
|
||||
name: '伱的微笑',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -521,14 +494,13 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'ghj',
|
||||
pinyin: 'N',
|
||||
select: false,
|
||||
},
|
||||
select: false
|
||||
}
|
||||
],
|
||||
recent: [
|
||||
{
|
||||
id: '3cd53cb5-04f8-4439-ad2b-e57b3f9b8c73',
|
||||
avatar: new URL('../../assets/img/icon/avatar/26.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/26.png', import.meta.url).href,
|
||||
name: '好◇°我会Yi直在●',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -542,12 +514,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'sdfs',
|
||||
pinyin: 'H',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: '77c82d2e-9be1-45c2-a733-00445d2e7f2c',
|
||||
avatar: new URL('../../assets/img/icon/avatar/22.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/22.png', import.meta.url).href,
|
||||
name: '一只喵的旅行。',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -561,14 +532,13 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'sadf',
|
||||
pinyin: 'Y',
|
||||
select: false,
|
||||
},
|
||||
select: false
|
||||
}
|
||||
],
|
||||
eachOther: [
|
||||
{
|
||||
id: '2b446aa8-5d31-429a-8e39-d4705eb4e900',
|
||||
avatar: new URL('../../assets/img/icon/avatar/19.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/19.png', import.meta.url).href,
|
||||
name: '浅唱↘我们的歌',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -582,12 +552,11 @@ export default {
|
||||
isDelete: 0,
|
||||
account: '33453',
|
||||
pinyin: 'Q',
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
{
|
||||
id: 'eab1ef9b-70e6-4249-8d78-b4f6e1b0cb08',
|
||||
avatar: new URL('../../assets/img/icon/avatar/20.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/20.png', import.meta.url).href,
|
||||
name: 'dear°学会微笑',
|
||||
sex: '',
|
||||
age: 25,
|
||||
@ -601,208 +570,190 @@ export default {
|
||||
isDelete: 0,
|
||||
account: 'gggggg',
|
||||
pinyin: '#',
|
||||
select: false,
|
||||
},
|
||||
],
|
||||
select: false
|
||||
}
|
||||
]
|
||||
},
|
||||
music: [
|
||||
{
|
||||
name: '龙卷风',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 99,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '爱在西元前',
|
||||
mp3: 'http://m3.8js.net:99/1916/501204165042405.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '蜗牛',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '半岛铁盒',
|
||||
mp3: 'http://m3.8js.net:99/2016n/46/94745.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '轨迹',
|
||||
mp3: 'http://m3.8js.net:99/1832/411204324135934.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '七里香',
|
||||
mp3: 'http://m3.8js.net:99/2016n/14/53717.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '发如雪',
|
||||
mp3: 'http://m3.8js.net:99/2014/211204142150965.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '霍元甲',
|
||||
mp3: 'http://m3.8js.net:99/1921/261204212643140.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '千里之外(周杰伦/费玉清)',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '菊花台',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '不能说的秘密',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '牛仔很忙',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '给我一首歌的时间',
|
||||
mp3: 'http://m3.8js.net:99/1938/041204380445445.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '烟花易冷',
|
||||
mp3: 'http://m3.8js.net:99/1828/051204280535192.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '惊叹号',
|
||||
mp3: 'http://m3.8js.net:99/20111103/150.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '明明就',
|
||||
mp3: 'http://m3.8js.net:99/2016n/27/96537.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '算什么男人',
|
||||
mp3: 'http://m3.8js.net:99/20150107/429.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '告白气球',
|
||||
mp3: 'http://m3.8js.net:99/20161016/481.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
},
|
||||
],
|
||||
is_play: false
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -11,14 +11,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'AutoInput',
|
||||
props: {
|
||||
modelValue: String,
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '留下你的精彩评论吧',
|
||||
},
|
||||
default: '留下你的精彩评论吧'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.input.setAttribute("placeholder", "改变")
|
||||
@ -30,32 +30,32 @@
|
||||
methods: {
|
||||
changeText(e) {
|
||||
this.$emit('update:modelValue', this.$el.innerText)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.auto-input {
|
||||
.auto-input {
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
max-height: 70rem;
|
||||
overflow-y: scroll;
|
||||
padding: 0 5rem;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.auto-input::-webkit-scrollbar {
|
||||
.auto-input::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.auto-input:empty::before {
|
||||
.auto-input:empty::before {
|
||||
/*content: "留下你的精彩评论吧";*/
|
||||
content: attr(placeholder);
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.auto-input:focus::before {
|
||||
.auto-input:focus::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,50 +2,48 @@
|
||||
<img class="close" ref="img" :src="src" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'Back',
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'gray',
|
||||
default: 'gray'
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
default: 'back',
|
||||
default: 'back'
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'left',
|
||||
default: 'left'
|
||||
},
|
||||
scale: {
|
||||
type: [Number, String],
|
||||
default: 1,
|
||||
},
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
src() {
|
||||
return new URL(
|
||||
`../assets/img/icon/components/${this.mode}-${this.img}.png`,
|
||||
import.meta.url,
|
||||
).href
|
||||
},
|
||||
return new URL(`../assets/img/icon/components/${this.mode}-${this.img}.png`, import.meta.url)
|
||||
.href
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$setCss(
|
||||
this.$refs.img,
|
||||
'transform',
|
||||
`rotate(${this.direction === 'left' ? '0' : '180'}deg) scale(${this.scale})`,
|
||||
`rotate(${this.direction === 'left' ? '0' : '180'}deg) scale(${this.scale})`
|
||||
)
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
img {
|
||||
img {
|
||||
width: 20rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,54 +9,50 @@
|
||||
<slot name="prefix"></slot>
|
||||
<slot v-if="showText"></slot>
|
||||
<slot name="suffix"></slot>
|
||||
<div
|
||||
:style="{ width: progress + '%' }"
|
||||
v-if="$props.progress"
|
||||
class="progress"
|
||||
></div>
|
||||
<div :style="{ width: progress + '%' }" v-if="$props.progress" class="progress"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'BaseButton',
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
progress: {
|
||||
type: Number,
|
||||
default: null,
|
||||
default: null
|
||||
},
|
||||
loadingWithText: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '',
|
||||
default: ''
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
default: true
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
default: true
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
default: 'normal'
|
||||
//small
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: '3',
|
||||
},
|
||||
default: '3'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
@ -68,7 +64,7 @@
|
||||
this.active ? '' : 'no-active',
|
||||
this.border ? '' : 'no-border',
|
||||
this.disabled && 'disabled',
|
||||
this.size,
|
||||
this.size
|
||||
]
|
||||
},
|
||||
showText() {
|
||||
@ -76,7 +72,7 @@
|
||||
return this.loadingWithText
|
||||
}
|
||||
return true
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
@ -84,15 +80,15 @@
|
||||
if (this.disabled) return
|
||||
if (this.loading) return
|
||||
return this.$emit('click')
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.button {
|
||||
.button {
|
||||
color: white;
|
||||
height: 40rem;
|
||||
line-height: 40rem;
|
||||
@ -254,5 +250,5 @@
|
||||
width: 62rem;
|
||||
height: 26rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,7 @@
|
||||
<template>
|
||||
<div id="BaseHeader" :class="[isFixed ? 'fixed' : '']">
|
||||
<div class="header">
|
||||
<dy-back
|
||||
:mode="backMode"
|
||||
:img="backImg"
|
||||
@click="back()"
|
||||
class="left"
|
||||
direction="left"
|
||||
/>
|
||||
<dy-back :mode="backMode" :img="backImg" @click="back()" class="left" direction="left" />
|
||||
<slot name="center"><span></span></slot>
|
||||
<slot name="right"><span></span></slot>
|
||||
</div>
|
||||
@ -15,26 +9,26 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'BaseHeader',
|
||||
components: {},
|
||||
props: {
|
||||
backMode: {
|
||||
type: String,
|
||||
default: 'gray',
|
||||
default: 'gray'
|
||||
},
|
||||
backImg: {
|
||||
type: String,
|
||||
default: 'back',
|
||||
default: 'back'
|
||||
},
|
||||
isClose: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
isFixed: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
@ -48,15 +42,15 @@
|
||||
} else {
|
||||
this.$back()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
#BaseHeader {
|
||||
#BaseHeader {
|
||||
width: 100%;
|
||||
color: white;
|
||||
|
||||
@ -89,5 +83,5 @@
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,34 +7,34 @@
|
||||
@click.stop="
|
||||
bus.emit(EVENT_KEY.NAV, {
|
||||
path: '/home/music',
|
||||
query: { id: props.item.id },
|
||||
query: { id: props.item.id }
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, inject } from 'vue'
|
||||
import bus, { EVENT_KEY } from '@/utils/bus'
|
||||
import { computed, inject } from 'vue'
|
||||
import bus, { EVENT_KEY } from '@/utils/bus'
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const isPlaying = inject('isPlaying')
|
||||
const isPlaying = inject('isPlaying')
|
||||
|
||||
const style = computed(() => {
|
||||
const style = computed(() => {
|
||||
return { webkitAnimationPlayState: isPlaying.value ? 'running' : 'paused' }
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.music-wrapper {
|
||||
.music-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@w: 45rem;
|
||||
@ -59,5 +59,5 @@
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,11 +21,7 @@
|
||||
<div class="float">
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<img
|
||||
@click="isSmall = true"
|
||||
src="@/assets/img/icon/message/chat/narrow.png"
|
||||
alt=""
|
||||
/>
|
||||
<img @click="isSmall = true" src="@/assets/img/icon/message/chat/narrow.png" alt="" />
|
||||
</div>
|
||||
<span class="center">等待对方接听...</span>
|
||||
<div class="right">
|
||||
@ -60,22 +56,14 @@
|
||||
<span>免提</span>
|
||||
</div>
|
||||
<div class="option">
|
||||
<dy-back
|
||||
mode="light"
|
||||
@click="isExpand = !isExpand"
|
||||
img="back"
|
||||
class="shrink"
|
||||
/>
|
||||
<dy-back mode="light" @click="isExpand = !isExpand" img="back" class="shrink" />
|
||||
<!-- <img src="@/assets/img/icon/message/chat/narrow.png" alt="">-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="@/assets/img/icon/avatar/2.png" alt="" class="big-avatar" />
|
||||
<div class="footer">
|
||||
<img
|
||||
@click="isShowAudioCall = false"
|
||||
src="@/assets/img/icon/message/chat/call-end.png"
|
||||
/>
|
||||
<img @click="isShowAudioCall = false" src="@/assets/img/icon/message/chat/call-end.png" />
|
||||
<span>挂断</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -83,13 +71,13 @@
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import { inject } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'Call',
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: false,
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -103,7 +91,7 @@
|
||||
isSmall: false,
|
||||
isShowAudioCall: false,
|
||||
height: 0,
|
||||
width: 0,
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -111,9 +99,9 @@
|
||||
return {
|
||||
'transition-duration': this.callFloatTransitionTime + 'ms',
|
||||
left: this.callFloatLeft + 'px',
|
||||
top: this.callFloatTop + 'px',
|
||||
top: this.callFloatTop + 'px'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isShowAudioCall(newVal) {
|
||||
@ -121,7 +109,7 @@
|
||||
this.isOpenCamera = false
|
||||
this.isOpenAudio = true
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
@ -137,7 +125,7 @@
|
||||
} else {
|
||||
this.callFloatLeft = this.width - 15 - 70
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mitt.on('showAudioCall', () => {
|
||||
@ -149,24 +137,24 @@
|
||||
})
|
||||
this.height = document.body.clientHeight
|
||||
this.width = document.body.clientWidth
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.scale-enter-from,
|
||||
.scale-leave-to {
|
||||
.scale-enter-from,
|
||||
.scale-leave-to {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped lang="less">
|
||||
.call-float {
|
||||
.call-float {
|
||||
transition-property: all;
|
||||
z-index: 9;
|
||||
width: 70rem;
|
||||
@ -187,9 +175,9 @@
|
||||
width: 30rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.audio-call {
|
||||
.audio-call {
|
||||
color: white;
|
||||
position: fixed;
|
||||
z-index: 8;
|
||||
@ -320,5 +308,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div class="check" @click.stop="change">
|
||||
<img
|
||||
v-show="!modelValue"
|
||||
src="../assets/img/icon/components/check/round-gray.png"
|
||||
alt=""
|
||||
/>
|
||||
<img v-show="!modelValue" src="../assets/img/icon/components/check/round-gray.png" alt="" />
|
||||
<img
|
||||
v-show="modelValue && mode === 'gray'"
|
||||
src="../assets/img/icon/components/check/check-gray.png"
|
||||
@ -18,17 +14,17 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'Check',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'gray', //red
|
||||
},
|
||||
default: 'gray' //red
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
@ -39,15 +35,15 @@
|
||||
change() {
|
||||
this.$emit('update:modelValue', !this.modelValue)
|
||||
this.$emit('change', !this.modelValue)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.check {
|
||||
.check {
|
||||
@width: 14rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
@ -56,5 +52,5 @@
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,10 +15,7 @@
|
||||
<dy-back mode="dark" img="close" direction="right" style="opacity: 0" />
|
||||
<div class="num">{{ formatNumber(comments.length) }}条评论</div>
|
||||
<div class="right">
|
||||
<Icon
|
||||
icon="prime:arrow-up-right-and-arrow-down-left-from-center"
|
||||
@click.stop="$no"
|
||||
/>
|
||||
<Icon icon="prime:arrow-up-right-and-arrow-down-left-from-center" @click.stop="$no" />
|
||||
<Icon icon="ic:round-close" @click.stop="cancel" />
|
||||
</div>
|
||||
</div>
|
||||
@ -26,18 +23,10 @@
|
||||
<div class="comment">
|
||||
<div class="wrapper" v-if="comments.length">
|
||||
<div class="items">
|
||||
<div
|
||||
class="item"
|
||||
v-for="item in comments"
|
||||
v-longpress="(e) => showOptions(item)"
|
||||
>
|
||||
<div class="item" v-for="item in comments" v-longpress="(e) => showOptions(item)">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<img
|
||||
:src="_checkImgUrl(item.avatar)"
|
||||
alt=""
|
||||
class="head-image"
|
||||
/>
|
||||
<img :src="_checkImgUrl(item.avatar)" alt="" class="head-image" />
|
||||
<div class="comment-container">
|
||||
<div class="name">{{ item.nickname }}</div>
|
||||
<div class="detail" :class="item.user_buried && 'gray'">
|
||||
@ -52,11 +41,7 @@
|
||||
<div class="reply-text">回复</div>
|
||||
</div>
|
||||
<div class="right d-flex" style="gap: 10rem">
|
||||
<div
|
||||
class="love"
|
||||
:class="item.user_digged && 'loved'"
|
||||
@click="loved(item)"
|
||||
>
|
||||
<div class="love" :class="item.user_digged && 'loved'" @click="loved(item)">
|
||||
<Icon
|
||||
icon="icon-park-solid:like"
|
||||
v-show="item.user_digged"
|
||||
@ -67,24 +52,15 @@
|
||||
v-show="!item.user_digged"
|
||||
class="love-image"
|
||||
/>
|
||||
<span v-if="item.digg_count">{{
|
||||
_formatNumber(item.digg_count)
|
||||
}}</span>
|
||||
<span v-if="item.digg_count">{{ _formatNumber(item.digg_count) }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="love"
|
||||
@click="item.user_buried = !item.user_buried"
|
||||
>
|
||||
<div class="love" @click="item.user_buried = !item.user_buried">
|
||||
<Icon
|
||||
v-if="item.user_buried"
|
||||
icon="icon-park-solid:dislike-two"
|
||||
class="love-image"
|
||||
/>
|
||||
<Icon
|
||||
v-else
|
||||
icon="icon-park-outline:dislike"
|
||||
class="love-image"
|
||||
/>
|
||||
<Icon v-else icon="icon-park-outline:dislike" class="love-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -96,11 +72,7 @@
|
||||
<div class="reply" v-for="child in item.children">
|
||||
<!-- v-longpress="e => showOptions(child)"-->
|
||||
<div class="content">
|
||||
<img
|
||||
:src="_checkImgUrl(child.avatar)"
|
||||
alt=""
|
||||
class="head-image"
|
||||
/>
|
||||
<img :src="_checkImgUrl(child.avatar)" alt="" class="head-image" />
|
||||
<div class="comment-container">
|
||||
<div class="name">
|
||||
{{ child.nickname }}
|
||||
@ -112,9 +84,7 @@
|
||||
<div class="left">
|
||||
<div class="time">
|
||||
{{ $time(child.create_time)
|
||||
}}{{
|
||||
child.ip_location && ` · ${item.ip_location}`
|
||||
}}
|
||||
}}{{ child.ip_location && ` · ${item.ip_location}` }}
|
||||
</div>
|
||||
<div class="reply-text">回复</div>
|
||||
</div>
|
||||
@ -148,9 +118,7 @@
|
||||
<div class="more" v-else @click="handShowChildren(item)">
|
||||
<div class="gang"></div>
|
||||
<span
|
||||
>展开{{
|
||||
item.showChildren ? '更多' : `${item.sub_comment_count}条`
|
||||
}}回复</span
|
||||
>展开{{ item.showChildren ? '更多' : `${item.sub_comment_count}条` }}回复</span
|
||||
>
|
||||
<Icon icon="ep:arrow-down-bold" />
|
||||
</div>
|
||||
@ -166,11 +134,7 @@
|
||||
<div class="input-toolbar">
|
||||
<transition name="fade">
|
||||
<div class="call-friend" v-if="isCall">
|
||||
<div
|
||||
class="friend"
|
||||
v-for="item in friends.all"
|
||||
@click="toggleCall(item)"
|
||||
>
|
||||
<div class="friend" v-for="item in friends.all" @click="toggleCall(item)">
|
||||
<img
|
||||
:style="item.select ? 'opacity: .5;' : ''"
|
||||
class="avatar"
|
||||
@ -189,33 +153,16 @@
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="input-wrapper">
|
||||
<AutoInput
|
||||
v-model="comment"
|
||||
placeholder="善语结善缘，恶言伤人心"
|
||||
></AutoInput>
|
||||
<AutoInput v-model="comment" placeholder="善语结善缘，恶言伤人心"></AutoInput>
|
||||
<div class="right">
|
||||
<img
|
||||
src="../assets/img/icon/message/call.png"
|
||||
@click="isCall = !isCall"
|
||||
/>
|
||||
<img
|
||||
src="../assets/img/icon/message/emoji-black.png"
|
||||
@click="$no"
|
||||
/>
|
||||
<img src="../assets/img/icon/message/call.png" @click="isCall = !isCall" />
|
||||
<img src="../assets/img/icon/message/emoji-black.png" @click="$no" />
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
v-if="comment"
|
||||
src="../assets/img/icon/message/up.png"
|
||||
@click="send"
|
||||
/>
|
||||
<img v-if="comment" src="../assets/img/icon/message/up.png" @click="send" />
|
||||
</div>
|
||||
</div>
|
||||
<ConfirmDialog
|
||||
title="私信给"
|
||||
ok-text="发送"
|
||||
v-model:visible="showPrivateChat"
|
||||
>
|
||||
<ConfirmDialog title="私信给" ok-text="发送" v-model:visible="showPrivateChat">
|
||||
<Search mode="light" v-model="test" :isShowSearchIcon="false" />
|
||||
</ConfirmDialog>
|
||||
</div>
|
||||
@ -223,18 +170,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AutoInput from './AutoInput'
|
||||
import ConfirmDialog from './dialog/ConfirmDialog'
|
||||
import { mapState } from 'pinia'
|
||||
import FromBottomDialog from './dialog/FromBottomDialog'
|
||||
import Loading from './Loading'
|
||||
import Search from './Search'
|
||||
import { $no, _checkImgUrl, _formatNumber, sampleSize } from '@/utils'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { videoComments } from '@/api/videos'
|
||||
import Popover from '@/pages/login/components/Tooltip.vue'
|
||||
import AutoInput from './AutoInput'
|
||||
import ConfirmDialog from './dialog/ConfirmDialog'
|
||||
import { mapState } from 'pinia'
|
||||
import FromBottomDialog from './dialog/FromBottomDialog'
|
||||
import Loading from './Loading'
|
||||
import Search from './Search'
|
||||
import { $no, _checkImgUrl, _formatNumber, sampleSize } from '@/utils'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { videoComments } from '@/api/videos'
|
||||
import Popover from '@/pages/login/components/Tooltip.vue'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'Comment',
|
||||
components: {
|
||||
Popover,
|
||||
@ -242,25 +189,25 @@
|
||||
ConfirmDialog,
|
||||
FromBottomDialog,
|
||||
Loading,
|
||||
Search,
|
||||
Search
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
videoId: {
|
||||
type: String,
|
||||
default: null,
|
||||
default: null
|
||||
},
|
||||
pageId: {
|
||||
type: String,
|
||||
default: 'home-index',
|
||||
default: 'home-index'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(var(--vh, 1vh) * 70)',
|
||||
},
|
||||
default: 'calc(var(--vh, 1vh) * 70)'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
...mapState(useBaseStore, ['friends'])
|
||||
},
|
||||
watch: {
|
||||
modelValue(newVale) {
|
||||
@ -269,7 +216,7 @@
|
||||
} else {
|
||||
this.comments = []
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -280,14 +227,14 @@
|
||||
{ id: 1, name: '私信回复' },
|
||||
{ id: 2, name: '复制' },
|
||||
{ id: 3, name: '搜一搜' },
|
||||
{ id: 4, name: '举报' },
|
||||
{ id: 4, name: '举报' }
|
||||
],
|
||||
selectRow: {},
|
||||
showPrivateChat: false,
|
||||
isInput: false,
|
||||
isCall: false,
|
||||
loadChildren: false,
|
||||
loadChildrenItemCId: -1,
|
||||
loadChildrenItemCId: -1
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
@ -310,14 +257,13 @@
|
||||
send() {
|
||||
this.comments.push({
|
||||
id: '2',
|
||||
avatar: new URL('../assets/img/icon/avatar/4.png', import.meta.url)
|
||||
.href,
|
||||
avatar: new URL('../assets/img/icon/avatar/4.png', import.meta.url).href,
|
||||
name: '成都旅行',
|
||||
text: this.comment,
|
||||
loveNum: 27,
|
||||
isLoved: false,
|
||||
time: '2021-08-24 20:33',
|
||||
children: [],
|
||||
children: []
|
||||
})
|
||||
this.comment = ''
|
||||
this.isCall = false
|
||||
@ -368,15 +314,15 @@
|
||||
// }
|
||||
call() {
|
||||
console.log(this.commit)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.title {
|
||||
.title {
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@ -410,13 +356,13 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gray {
|
||||
.gray {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
.comment {
|
||||
width: 100vw;
|
||||
height: v-bind(height);
|
||||
background: #fff;
|
||||
@ -659,15 +605,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-enter-active,
|
||||
.comment-leave-active {
|
||||
.comment-enter-active,
|
||||
.comment-leave-active {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-enter-from,
|
||||
.comment-leave-to {
|
||||
.comment-enter-from,
|
||||
.comment-leave-to {
|
||||
transform: translateY(60vh);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,21 +3,14 @@
|
||||
<div class="DouyinCode" v-if="modelValue">
|
||||
<div class="content">
|
||||
<div class="video-poster">
|
||||
<img
|
||||
:src="_checkImgUrl(item.video.cover.url_list[0])"
|
||||
class="poster"
|
||||
/>
|
||||
<img :src="_checkImgUrl(item.video.cover.url_list[0])" class="poster" />
|
||||
</div>
|
||||
<div class="desc">
|
||||
<div class="left">
|
||||
<div class="user">@{{ item.author.nickname }}</div>
|
||||
<div class="title">{{ item.desc }}</div>
|
||||
</div>
|
||||
<img
|
||||
class="code"
|
||||
src="../assets/img/icon/components/video/douyin-code.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img class="code" src="../assets/img/icon/components/video/douyin-code.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
@ -32,24 +25,15 @@
|
||||
<span>QQ空间</span>
|
||||
</div>
|
||||
<div class="share-to" @click="$no">
|
||||
<img
|
||||
src="../assets/img/icon/components/video/towechatchat.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../assets/img/icon/components/video/towechatchat.webp" alt="" />
|
||||
<span>微信好友</span>
|
||||
</div>
|
||||
<div class="share-to" @click="$no">
|
||||
<img
|
||||
src="../assets/img/icon/components/video/towechat.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../assets/img/icon/components/video/towechat.webp" alt="" />
|
||||
<span>朋友圈</span>
|
||||
</div>
|
||||
<div class="share-to" @click="$no">
|
||||
<img
|
||||
src="../assets/img/icon/components/video/todownload.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../assets/img/icon/components/video/todownload.webp" alt="" />
|
||||
<span>保存到相册</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -59,13 +43,13 @@
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import { _checkImgUrl } from '@/utils'
|
||||
import { _checkImgUrl } from '@/utils'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'DouyinCode',
|
||||
props: {
|
||||
item: {},
|
||||
modelValue: false,
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
@ -76,15 +60,15 @@
|
||||
_checkImgUrl,
|
||||
cancel() {
|
||||
this.$emit('update:modelValue', false)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.DouyinCode {
|
||||
.DouyinCode {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -188,5 +172,5 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,21 +2,11 @@
|
||||
<div v-if="visible" class="footer" :class="{ isWhite }">
|
||||
<div class="l-button" @click="refresh(1)">
|
||||
<span v-if="!isRefresh1" :class="{ active: currentTab === 1 }">首页</span>
|
||||
<img
|
||||
v-if="isRefresh1"
|
||||
src="../assets/img/icon/refresh1.png"
|
||||
alt=""
|
||||
class="refresh"
|
||||
/>
|
||||
<img v-if="isRefresh1" src="../assets/img/icon/refresh1.png" alt="" class="refresh" />
|
||||
</div>
|
||||
<div class="l-button" @click="refresh(2)">
|
||||
<span v-if="!isRefresh2" :class="{ active: currentTab === 2 }">商城</span>
|
||||
<img
|
||||
v-if="isRefresh2"
|
||||
src="../assets/img/icon/refresh1.png"
|
||||
alt=""
|
||||
class="refresh"
|
||||
/>
|
||||
<img v-if="isRefresh2" src="../assets/img/icon/refresh1.png" alt="" class="refresh" />
|
||||
</div>
|
||||
<div class="l-button" @click="tab(3)">
|
||||
<div class="add-ctn">
|
||||
@ -34,9 +24,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus, { EVENT_KEY } from '../utils/bus'
|
||||
import bus, { EVENT_KEY } from '../utils/bus'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'Footer',
|
||||
props: ['initTab', 'isWhite'],
|
||||
data() {
|
||||
@ -44,7 +34,7 @@
|
||||
isRefresh1: false,
|
||||
isRefresh2: false,
|
||||
currentTab: this.initTab,
|
||||
visible: true,
|
||||
visible: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -85,15 +75,15 @@
|
||||
} else {
|
||||
this.tab(index)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.footer {
|
||||
.footer {
|
||||
font-size: 14rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
@ -171,5 +161,5 @@
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,25 +5,25 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'Loading',
|
||||
props: {
|
||||
isFullScreen: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
default: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
},
|
||||
},
|
||||
default: 'normal'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.Loading {
|
||||
.Loading {
|
||||
&.inline {
|
||||
width: 100%;
|
||||
height: 40rem;
|
||||
@ -82,5 +82,5 @@
|
||||
transform: translate3d(-10rem, 0, 0) scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,21 +2,21 @@
|
||||
<div class="Mask" :class="mode"></div>
|
||||
</template>
|
||||
<script>
|
||||
//未以组件的方式使用，FromBottomDialog.vue里面是用js append到dom里面去的，
|
||||
//以组件的方式使用，不好随意插位置，插到app下面，又会出现定位覆盖的问题
|
||||
export default {
|
||||
//未以组件的方式使用，FromBottomDialog.vue里面是用js append到dom里面去的，
|
||||
//以组件的方式使用，不好随意插位置，插到app下面，又会出现定位覆盖的问题
|
||||
export default {
|
||||
name: 'Mask',
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'dark',
|
||||
},
|
||||
},
|
||||
default: 'dark'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.Mask {
|
||||
.Mask {
|
||||
z-index: 3;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -40,5 +40,5 @@
|
||||
&.white {
|
||||
background: var(--mask-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,20 +5,20 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'NoMore',
|
||||
}
|
||||
export default {
|
||||
name: 'NoMore'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.NoMore {
|
||||
.NoMore {
|
||||
font-size: 12rem;
|
||||
height: 60rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,15 +1,7 @@
|
||||
<template>
|
||||
<div class="posters">
|
||||
<div
|
||||
class="poster-item"
|
||||
v-for="(i, index) in list"
|
||||
@click="goDetail(index)"
|
||||
>
|
||||
<img
|
||||
class="poster"
|
||||
v-lazy="_checkImgUrl(i.video.cover.url_list[0])"
|
||||
alt=""
|
||||
/>
|
||||
<div class="poster-item" 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'">
|
||||
<Icon icon="icon-park-outline:like" />
|
||||
<span>{{ _formatNumber(i.statistics.digg_count) }}</span>
|
||||
@ -26,41 +18,41 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { _checkImgUrl, _formatNumber } from '@/utils'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { cloneDeep } from '@/utils'
|
||||
import { _checkImgUrl, _formatNumber } from '@/utils'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { cloneDeep } from '@/utils'
|
||||
|
||||
const store = useBaseStore()
|
||||
const nav = useRouter()
|
||||
const props = defineProps({
|
||||
const store = useBaseStore()
|
||||
const nav = useRouter()
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: [Array, Number],
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
}
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'normal', //date,music
|
||||
},
|
||||
})
|
||||
default: 'normal' //date,music
|
||||
}
|
||||
})
|
||||
|
||||
defineOptions({
|
||||
name: 'Posters',
|
||||
})
|
||||
defineOptions({
|
||||
name: 'Posters'
|
||||
})
|
||||
|
||||
function goDetail(index) {
|
||||
function goDetail(index) {
|
||||
store.routeData = cloneDeep({ list: props.list, index })
|
||||
nav.push({ path: '/video-detail' })
|
||||
}
|
||||
}
|
||||
|
||||
function getDay(time) {
|
||||
function getDay(time) {
|
||||
let date = new Date(time * 1000)
|
||||
return date.getDate()
|
||||
}
|
||||
}
|
||||
|
||||
function getMonth(time) {
|
||||
function getMonth(time) {
|
||||
let date = new Date(time * 1000)
|
||||
let month = date.getMonth() + 1
|
||||
switch (month) {
|
||||
@ -89,16 +81,16 @@
|
||||
case 12:
|
||||
return '十二月'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.posters {
|
||||
.posters {
|
||||
display: grid;
|
||||
grid-template-columns: 33.33vw 33.33vw 33.33vw;
|
||||
}
|
||||
}
|
||||
|
||||
.poster-item {
|
||||
.poster-item {
|
||||
height: calc(33.33vw * 1.2);
|
||||
border: 0.5px solid black;
|
||||
overflow: hidden;
|
||||
@ -160,5 +152,5 @@
|
||||
font-size: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,12 +13,7 @@
|
||||
<Loading v-if="loading" :is-full-screen="false" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="scroll-wrapper scroll Scroll"
|
||||
ref="wrapper"
|
||||
@scroll="scroll"
|
||||
>
|
||||
<div v-else class="scroll-wrapper scroll Scroll" ref="wrapper" @scroll="scroll">
|
||||
<div class="scroll-content">
|
||||
<slot></slot>
|
||||
<Loading v-if="loading" :is-full-screen="fullLoading" />
|
||||
@ -26,47 +21,47 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Loading from './Loading'
|
||||
import { nextTick } from 'vue'
|
||||
import Loading from './Loading'
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'Scroll',
|
||||
components: {
|
||||
Loading,
|
||||
Loading
|
||||
},
|
||||
props: {
|
||||
fixedHeight: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
default: -1
|
||||
},
|
||||
useRefresh: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
fullLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
wrapper: null,
|
||||
startMoveY: null,
|
||||
distance: null,
|
||||
refresh: false,
|
||||
refresh: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pullUpStyle() {
|
||||
return {
|
||||
'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() {},
|
||||
mounted() {
|
||||
@ -108,10 +103,7 @@
|
||||
this.$emit('fixed', this.fixedHeight < this.wrapper.scrollTop)
|
||||
}
|
||||
if (this.$attrs.onPulldown) {
|
||||
if (
|
||||
this.wrapper.scrollHeight - this.wrapper.clientHeight <
|
||||
this.wrapper.scrollTop + 60
|
||||
) {
|
||||
if (this.wrapper.scrollHeight - this.wrapper.clientHeight < this.wrapper.scrollTop + 60) {
|
||||
this.$emit('pulldown')
|
||||
}
|
||||
}
|
||||
@ -119,22 +111,22 @@
|
||||
scrollBottom() {
|
||||
nextTick(() => {
|
||||
this.wrapper.scrollTo({
|
||||
top: this.wrapper.scrollHeight - this.wrapper.clientHeight,
|
||||
top: this.wrapper.scrollHeight - this.wrapper.clientHeight
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.scroll-wrapper {
|
||||
.scroll-wrapper {
|
||||
overflow: auto;
|
||||
|
||||
.scroll-content {
|
||||
padding-bottom: 30rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,44 +1,40 @@
|
||||
<template>
|
||||
<Scroll
|
||||
:loading="state.loading"
|
||||
:full-loading="!state.list.length"
|
||||
@pulldown="loadData"
|
||||
>
|
||||
<Scroll :loading="state.loading" :full-loading="!state.list.length" @pulldown="loadData">
|
||||
<slot :list="state.list"></slot>
|
||||
<NoMore v-if="state.total !== 0 && state.total === state.list.length" />
|
||||
</Scroll>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive } from 'vue'
|
||||
import { _notice } from '@/utils'
|
||||
import Scroll from '@/components/Scroll.vue'
|
||||
import NoMore from '@/components/NoMore.vue'
|
||||
import { onMounted, reactive } from 'vue'
|
||||
import { _notice } from '@/utils'
|
||||
import Scroll from '@/components/Scroll.vue'
|
||||
import NoMore from '@/components/NoMore.vue'
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
api: {
|
||||
type: Function,
|
||||
default() {
|
||||
return () => void 0
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
const state = reactive({
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
pageSize: 10,
|
||||
loading: false,
|
||||
})
|
||||
loading: false
|
||||
})
|
||||
|
||||
function loadData() {
|
||||
function loadData() {
|
||||
if (state.loading) return
|
||||
state.pageNo++
|
||||
getData()
|
||||
}
|
||||
}
|
||||
|
||||
async function getData(refresh = false) {
|
||||
async function getData(refresh = false) {
|
||||
if (refresh) {
|
||||
state.pageNo = 0
|
||||
} else {
|
||||
@ -48,7 +44,7 @@
|
||||
state.loading = true
|
||||
let res = await props.api({
|
||||
pageNo: state.pageNo,
|
||||
pageSize: state.pageSize,
|
||||
pageSize: state.pageSize
|
||||
})
|
||||
state.loading = false
|
||||
if (res.success) {
|
||||
@ -61,9 +57,9 @@
|
||||
} else {
|
||||
_notice('查询失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(getData)
|
||||
onMounted(getData)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
|
||||
@ -30,43 +30,43 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//TODO 背景颜色不对
|
||||
export default {
|
||||
//TODO 背景颜色不对
|
||||
export default {
|
||||
name: 'Search',
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '搜索',
|
||||
default: '搜索'
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
default: ''
|
||||
},
|
||||
rightTextColor: {
|
||||
type: String,
|
||||
default: 'red',
|
||||
default: 'red'
|
||||
},
|
||||
isShowRightText: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
isShowSearchIcon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
default: true
|
||||
},
|
||||
rightText: {
|
||||
type: String,
|
||||
default: '搜索',
|
||||
default: '搜索'
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'dark',
|
||||
},
|
||||
default: 'dark'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clear() {
|
||||
this.value = ''
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
computed: {
|
||||
@ -79,14 +79,14 @@
|
||||
if (!val) {
|
||||
this.$emit('clear')
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.search-ctn {
|
||||
.search-ctn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -153,5 +153,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,19 +13,10 @@
|
||||
<div class="share">
|
||||
<div class="title">
|
||||
<span>分享给朋友</span>
|
||||
<dy-back
|
||||
mode="light"
|
||||
img="close"
|
||||
direction="right"
|
||||
@click.stop="closeShare"
|
||||
></dy-back>
|
||||
<dy-back mode="light" img="close" direction="right" @click.stop="closeShare"></dy-back>
|
||||
</div>
|
||||
<div class="friends list">
|
||||
<div
|
||||
class="option"
|
||||
v-for="item in friends.all"
|
||||
@click.stop="toggleCall(item)"
|
||||
>
|
||||
<div class="option" v-for="item in friends.all" @click.stop="toggleCall(item)">
|
||||
<img
|
||||
:style="item.select ? 'opacity: .5;' : ''"
|
||||
class="avatar"
|
||||
@ -39,10 +30,7 @@
|
||||
src="../assets/img/icon/components/check/check-red-share.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="option"
|
||||
@click.stop="closeShare($nav('/message/share-to-friend'))"
|
||||
>
|
||||
<div class="option" @click.stop="closeShare($nav('/message/share-to-friend'))">
|
||||
<dy-back class="more" mode="light" direction="right"></dy-back>
|
||||
<span>更多朋友</span>
|
||||
</div>
|
||||
@ -50,11 +38,7 @@
|
||||
<div class="shares list">
|
||||
<template v-if="mode === 'video'">
|
||||
<div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
|
||||
<img
|
||||
class="avatar"
|
||||
src="../assets/img/icon/components/video/torichang.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="avatar" src="../assets/img/icon/components/video/torichang.png" alt="" />
|
||||
<span>转发</span>
|
||||
</div>
|
||||
<div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
|
||||
@ -66,67 +50,36 @@
|
||||
<span>复制链接</span>
|
||||
</div>
|
||||
<div class="option" @click.stop="$no">
|
||||
<img
|
||||
class="small"
|
||||
src="../assets/img/icon/components/video/comeonplay.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="small" src="../assets/img/icon/components/video/comeonplay.png" alt="" />
|
||||
<span>合拍</span>
|
||||
</div>
|
||||
<div class="option" @click.stop="$no">
|
||||
<img
|
||||
class="small"
|
||||
src="../assets/img/icon/components/video/dou.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img class="small" src="../assets/img/icon/components/video/dou.webp" alt="" />
|
||||
<span>帮上热门</span>
|
||||
</div>
|
||||
<div
|
||||
class="option"
|
||||
@click.stop="$nav('/home/report', { mode: this.mode })"
|
||||
>
|
||||
<img
|
||||
class="small"
|
||||
src="../assets/img/icon/components/video/warring.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="option" @click.stop="$nav('/home/report', { mode: this.mode })">
|
||||
<img class="small" src="../assets/img/icon/components/video/warring.png" alt="" />
|
||||
<span>举报</span>
|
||||
</div>
|
||||
<div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
|
||||
<Icon icon="ion:paper-plane" />
|
||||
<span>私信朋友</span>
|
||||
</div>
|
||||
<div
|
||||
class="option"
|
||||
v-if="canDownload"
|
||||
@click.stop="closeShare($emit('download'))"
|
||||
>
|
||||
<div class="option" v-if="canDownload" @click.stop="closeShare($emit('download'))">
|
||||
<Icon icon="mingcute:download-fill" />
|
||||
<span>保存本地</span>
|
||||
</div>
|
||||
<div class="option" @click.stop="$no">
|
||||
<!--TODO icon不对 -->
|
||||
<img
|
||||
class="small"
|
||||
src="../assets/img/icon/components/video/feedback.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img class="small" src="../assets/img/icon/components/video/feedback.webp" alt="" />
|
||||
<span>建群分享</span>
|
||||
</div>
|
||||
<div class="option" @click.stop="$no">
|
||||
<img
|
||||
class="small"
|
||||
src="../assets/img/icon/components/video/comeonlook.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img class="small" src="../assets/img/icon/components/video/comeonlook.webp" alt="" />
|
||||
<span>一起看视频</span>
|
||||
</div>
|
||||
<div class="option" @click.stop="closeShare($emit('dislike'))">
|
||||
<img
|
||||
class="small"
|
||||
src="../assets/img/icon/components/video/dislike.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="small" src="../assets/img/icon/components/video/dislike.png" alt="" />
|
||||
<span>不感兴趣</span>
|
||||
</div>
|
||||
<div class="option" @click.stop="closeShare($emit('showDouyinCode'))">
|
||||
@ -134,58 +87,31 @@
|
||||
<span>生成图片</span>
|
||||
</div>
|
||||
<div class="option" @click.stop="$no">
|
||||
<img
|
||||
class="small"
|
||||
src="../assets/img/icon/components/video/bizhi.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img class="small" src="../assets/img/icon/components/video/bizhi.webp" alt="" />
|
||||
<span>动态壁纸</span>
|
||||
</div>
|
||||
<div class="option" @click.stop="closeShare($emit('play-feedback'))">
|
||||
<img
|
||||
class="small"
|
||||
src="../assets/img/icon/components/video/feedback.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img class="small" src="../assets/img/icon/components/video/feedback.webp" alt="" />
|
||||
<span>播放反馈</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="mode === 'music'">
|
||||
<div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
|
||||
<img
|
||||
class="small"
|
||||
src="../assets/img/icon/components/video/tofriend.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img class="small" src="../assets/img/icon/components/video/tofriend.webp" alt="" />
|
||||
<span>私信朋友</span>
|
||||
</div>
|
||||
<div
|
||||
class="option"
|
||||
@click.stop="$nav('/home/report', { mode: this.mode })"
|
||||
>
|
||||
<img
|
||||
class="small"
|
||||
src="../assets/img/icon/components/video/warring.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="option" @click.stop="$nav('/home/report', { mode: this.mode })">
|
||||
<img class="small" src="../assets/img/icon/components/video/warring.png" alt="" />
|
||||
<span>举报音乐</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="mode === 'my-music'">
|
||||
<div class="option" @click.stop="$no">
|
||||
<img
|
||||
class="small"
|
||||
src="../assets/img/icon/components/video/torichang.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="small" src="../assets/img/icon/components/video/torichang.png" alt="" />
|
||||
<span>转发到日常</span>
|
||||
</div>
|
||||
<div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
|
||||
<img
|
||||
class="small"
|
||||
src="../assets/img/icon/components/video/tofriend.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img class="small" src="../assets/img/icon/components/video/tofriend.webp" alt="" />
|
||||
<span>私信朋友</span>
|
||||
</div>
|
||||
</template>
|
||||
@ -197,11 +123,7 @@
|
||||
<img class="poster" src="../assets/img/poster/1.jpg" alt="" />
|
||||
</div>
|
||||
<div class="btns">
|
||||
<dy-button
|
||||
type="dark2"
|
||||
radius="7"
|
||||
v-if="selectFriends.length > 1"
|
||||
@click.stop="$no"
|
||||
<dy-button type="dark2" radius="7" v-if="selectFriends.length > 1" @click.stop="$no"
|
||||
>建群并发送
|
||||
</dy-button>
|
||||
<dy-button type="primary" radius="7" @click.stop="$no"
|
||||
@ -214,47 +136,47 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'pinia'
|
||||
import Check from './Check'
|
||||
import FromBottomDialog from './dialog/FromBottomDialog'
|
||||
import DouyinCode from './DouyinCode'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { $no, _copy } from '@/utils'
|
||||
import { mapState } from 'pinia'
|
||||
import Check from './Check'
|
||||
import FromBottomDialog from './dialog/FromBottomDialog'
|
||||
import DouyinCode from './DouyinCode'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { $no, _copy } from '@/utils'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'Share',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Check,
|
||||
DouyinCode,
|
||||
DouyinCode
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
item: {},
|
||||
videoId: {
|
||||
type: String,
|
||||
default: null,
|
||||
default: null
|
||||
},
|
||||
pageId: {
|
||||
type: String,
|
||||
default: 'home-index',
|
||||
default: 'home-index'
|
||||
},
|
||||
canDownload: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
default: true
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'video',
|
||||
default: 'video'
|
||||
//music
|
||||
//qrcode
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
selectFriends() {
|
||||
return this.friends.all.filter((v) => v.select)
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
@ -266,9 +188,7 @@
|
||||
this.$showLoading()
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
_copy(
|
||||
this.item.share_info.share_link_desc + this.item.share_info.share_url,
|
||||
)
|
||||
_copy(this.item.share_info.share_link_desc + this.item.share_info.share_url)
|
||||
//TODO 抖音样式改了
|
||||
this.$notice('复制成功')
|
||||
},
|
||||
@ -282,15 +202,15 @@
|
||||
return v
|
||||
})
|
||||
this.$emit('update:modelValue', false)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.share {
|
||||
.share {
|
||||
width: 100%;
|
||||
background: black;
|
||||
border-radius: 10px 10px 0 0;
|
||||
@ -428,15 +348,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-enter-active,
|
||||
.share-leave-active {
|
||||
.share-enter-active,
|
||||
.share-leave-active {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.share-enter-from,
|
||||
.share-leave-to {
|
||||
.share-enter-from,
|
||||
.share-leave-to {
|
||||
transform: translateY(60vh);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,19 +2,11 @@
|
||||
<div id="UserPanel" @scroll="scroll" ref="page">
|
||||
<div ref="float" class="float" :class="state.floatFixed ? 'fixed' : ''">
|
||||
<div class="left">
|
||||
<Icon
|
||||
@click="$emit('back')"
|
||||
class="icon"
|
||||
icon="eva:arrow-ios-back-fill"
|
||||
/>
|
||||
<Icon @click="$emit('back')" class="icon" icon="eva:arrow-ios-back-fill" />
|
||||
<transition name="fade">
|
||||
<div class="float-user" v-if="state.floatFixed">
|
||||
<img
|
||||
v-lazy="
|
||||
_checkImgUrl(
|
||||
props.currentItem.author.avatar_168x168.url_list[0],
|
||||
)
|
||||
"
|
||||
v-lazy="_checkImgUrl(props.currentItem.author.avatar_168x168.url_list[0])"
|
||||
class="avatar"
|
||||
/>
|
||||
<img
|
||||
@ -31,10 +23,7 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<transition name="fade">
|
||||
<div
|
||||
class="request"
|
||||
v-if="!state.floatFixed && props.currentItem.author.is_follow"
|
||||
>
|
||||
<div class="request" v-if="!state.floatFixed && props.currentItem.author.is_follow">
|
||||
<img
|
||||
@click="$nav('/me/request-update')"
|
||||
src="@/assets/img/icon/me/finger-right.png"
|
||||
@ -44,11 +33,7 @@
|
||||
</div>
|
||||
</transition>
|
||||
<Icon class="icon" icon="ion:search" @click.stop="$no()" />
|
||||
<Icon
|
||||
class="icon"
|
||||
icon="ri:more-line"
|
||||
@click.stop="$emit('showFollowSetting')"
|
||||
/>
|
||||
<Icon class="icon" icon="ri:more-line" @click.stop="$emit('showFollowSetting')" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -62,38 +47,27 @@
|
||||
<header>
|
||||
<img
|
||||
:style="{
|
||||
opacity: props.currentItem.author.cover_url[0].url_list.length
|
||||
? 1
|
||||
: 0,
|
||||
opacity: props.currentItem.author.cover_url[0].url_list.length ? 1 : 0
|
||||
}"
|
||||
ref="cover"
|
||||
:src="_checkImgUrl(props.currentItem.author.cover_url[0].url_list[0])"
|
||||
@click="
|
||||
state.previewImg = _checkImgUrl(
|
||||
props.currentItem.author.cover_url[0].url_list[0],
|
||||
)
|
||||
state.previewImg = _checkImgUrl(props.currentItem.author.cover_url[0].url_list[0])
|
||||
"
|
||||
alt=""
|
||||
class="cover"
|
||||
/>
|
||||
<div class="avatar-wrapper">
|
||||
<img
|
||||
v-lazy="
|
||||
_checkImgUrl(props.currentItem.author.avatar_168x168.url_list[0])
|
||||
"
|
||||
v-lazy="_checkImgUrl(props.currentItem.author.avatar_168x168.url_list[0])"
|
||||
class="avatar"
|
||||
@click="
|
||||
state.previewImg = _checkImgUrl(
|
||||
props.currentItem.author.avatar_300x300.url_list[0],
|
||||
)
|
||||
state.previewImg = _checkImgUrl(props.currentItem.author.avatar_300x300.url_list[0])
|
||||
"
|
||||
/>
|
||||
<div class="description">
|
||||
<div class="name f22">{{ props.currentItem.author.nickname }}</div>
|
||||
<div
|
||||
class="certification"
|
||||
v-if="props.currentItem.author.certification"
|
||||
>
|
||||
<div class="certification" v-if="props.currentItem.author.certification">
|
||||
<img src="@/assets/img/icon/me/certification.webp" />
|
||||
{{ props.currentItem.author.certification }}
|
||||
</div>
|
||||
@ -124,9 +98,7 @@
|
||||
</div>
|
||||
<div class="text">
|
||||
<span class="num">{{
|
||||
Utils.formatNumber(
|
||||
props.currentItem.author.mplatform_followers_count,
|
||||
)
|
||||
Utils.formatNumber(props.currentItem.author.mplatform_followers_count)
|
||||
}}</span>
|
||||
<span>粉丝</span>
|
||||
</div>
|
||||
@ -154,17 +126,10 @@
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
v-if="
|
||||
props.currentItem.author.province || props.currentItem.author.city
|
||||
"
|
||||
v-if="props.currentItem.author.province || props.currentItem.author.city"
|
||||
>
|
||||
{{ props.currentItem.author.province }}
|
||||
<template
|
||||
v-if="
|
||||
props.currentItem.author.province &&
|
||||
props.currentItem.author.city
|
||||
"
|
||||
>
|
||||
<template v-if="props.currentItem.author.province && props.currentItem.author.city">
|
||||
·
|
||||
</template>
|
||||
{{ props.currentItem.author.city }}
|
||||
@ -176,10 +141,7 @@
|
||||
</div>
|
||||
<div class="other">
|
||||
<div class="scroll-x" @touchmove="stop">
|
||||
<div
|
||||
class="item"
|
||||
v-for="item in props.currentItem.author.card_entries"
|
||||
>
|
||||
<div class="item" v-for="item in props.currentItem.author.card_entries">
|
||||
<img :src="_checkImgUrl(item.icon_dark.url_list[0])" alt="" />
|
||||
<div class="right">
|
||||
<div class="top">{{ item.title }}</div>
|
||||
@ -193,16 +155,9 @@
|
||||
<div class="follow-display">
|
||||
<div
|
||||
class="follow-wrapper"
|
||||
:class="
|
||||
props.currentItem.author.follow_status
|
||||
? 'follow-wrapper-followed'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="no-follow"
|
||||
@click="props.currentItem.author.follow_status = 1"
|
||||
:class="props.currentItem.author.follow_status ? 'follow-wrapper-followed' : ''"
|
||||
>
|
||||
<div class="no-follow" @click="props.currentItem.author.follow_status = 1">
|
||||
<img src="@/assets/img/icon/add-white.png" alt="" />
|
||||
<span>关注</span>
|
||||
</div>
|
||||
@ -277,38 +232,38 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import Utils, { $no, _checkImgUrl, _getUserDouyinId } from '@/utils'
|
||||
import { useNav } from '@/utils/hooks/useNav'
|
||||
import Posters from '@/components/Posters'
|
||||
import { DefaultUser } from '@/utils/const_var'
|
||||
import Loading from '@/components/Loading.vue'
|
||||
import { FILE_URL } from '@/config'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { userinfo, userVideoList } from '@/api/user'
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import Utils, { $no, _checkImgUrl, _getUserDouyinId } from '@/utils'
|
||||
import { useNav } from '@/utils/hooks/useNav'
|
||||
import Posters from '@/components/Posters'
|
||||
import { DefaultUser } from '@/utils/const_var'
|
||||
import Loading from '@/components/Loading.vue'
|
||||
import { FILE_URL } from '@/config'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { userinfo, userVideoList } from '@/api/user'
|
||||
|
||||
const $nav = useNav()
|
||||
const baseStore = useBaseStore()
|
||||
const emit = defineEmits(['update:currentItem', 'back'])
|
||||
const props = defineProps({
|
||||
const $nav = useNav()
|
||||
const baseStore = useBaseStore()
|
||||
const emit = defineEmits(['update:currentItem', 'back'])
|
||||
const props = defineProps({
|
||||
currentItem: {
|
||||
type: Object,
|
||||
default: {
|
||||
author: DefaultUser,
|
||||
aweme_list: [],
|
||||
},
|
||||
aweme_list: []
|
||||
}
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
const main = ref(null)
|
||||
const page = ref(null)
|
||||
const cover = ref(null)
|
||||
const total = ref(null)
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const main = ref(null)
|
||||
const page = ref(null)
|
||||
const cover = ref(null)
|
||||
const total = ref(null)
|
||||
|
||||
const state = reactive({
|
||||
const state = reactive({
|
||||
isShowRecommend: false, //是否显示推荐
|
||||
previewImg: '',
|
||||
floatFixed: false,
|
||||
@ -317,7 +272,7 @@
|
||||
floatHeight: 52,
|
||||
|
||||
loadings: {
|
||||
showRecommend: false,
|
||||
showRecommend: false
|
||||
},
|
||||
acceleration: 1.2,
|
||||
start: { x: 0, y: 0, time: 0 },
|
||||
@ -328,10 +283,10 @@
|
||||
canMoveMaxHeight: document.body.clientHeight / 4,
|
||||
//是否自动放大Cover
|
||||
isAutoScaleCover: false,
|
||||
uid: null,
|
||||
})
|
||||
uid: null
|
||||
})
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => props.active,
|
||||
async (newVal) => {
|
||||
if (newVal && !props.currentItem.aweme_list.length) {
|
||||
@ -344,38 +299,32 @@
|
||||
a.author = props.currentItem.author
|
||||
return a
|
||||
})
|
||||
emit(
|
||||
'update:currentItem',
|
||||
Object.assign(props.currentItem, { aweme_list: r.data }),
|
||||
)
|
||||
emit('update:currentItem', Object.assign(props.currentItem, { aweme_list: r.data }))
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => props.currentItem.author.uid,
|
||||
async (newVal) => {
|
||||
if (props.currentItem.author.uid !== state.uid) {
|
||||
state.uid = props.currentItem.author.uid
|
||||
emit(
|
||||
'update:currentItem',
|
||||
Object.assign(props.currentItem, { aweme_list: [] }),
|
||||
)
|
||||
emit('update:currentItem', Object.assign(props.currentItem, { aweme_list: [] }))
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
function stop(e) {
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
}
|
||||
|
||||
function followButton() {}
|
||||
function followButton() {}
|
||||
|
||||
function back() {}
|
||||
function back() {}
|
||||
|
||||
function scroll(e) {
|
||||
function scroll(e) {
|
||||
// console.log('scroll', page.value.scrollTop)
|
||||
let scrollTop = page.value.scrollTop
|
||||
let totalY = total.value.getBoundingClientRect().y
|
||||
@ -390,9 +339,9 @@
|
||||
state.isAutoScaleCover = false
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function touchStart(e) {
|
||||
function touchStart(e) {
|
||||
state.start.x = e.touches[0].pageX
|
||||
state.start.y = e.touches[0].pageY
|
||||
state.start.time = Date.now()
|
||||
@ -401,27 +350,23 @@
|
||||
cover.value.style.transition = 'none'
|
||||
}
|
||||
// console.log('touchStart', page.value.scrollTop)
|
||||
}
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
function touchMove(e) {
|
||||
state.move.x = e.touches[0].pageX - state.start.x
|
||||
state.move.y = e.touches[0].pageY - state.start.y
|
||||
let isNext = state.move.y < 0
|
||||
|
||||
// console.log('touchMove', page.value.scrollTop)
|
||||
//todo 有空了加个，越滑越紧的效果
|
||||
if (
|
||||
state.isTop &&
|
||||
!isNext &&
|
||||
document.body.clientHeight / 4 > state.move.y
|
||||
) {
|
||||
if (state.isTop && !isNext && document.body.clientHeight / 4 > state.move.y) {
|
||||
// if (state.isTop && !isNext) {
|
||||
let scrollHeight = state.move.y
|
||||
cover.value.style.height = `calc(${state.coverHeight}rem + ${scrollHeight}px)`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
function touchEnd(e) {
|
||||
if (state.isTop) {
|
||||
state.isTop = false
|
||||
cover.value.style.transition = 'all .3s'
|
||||
@ -430,26 +375,26 @@
|
||||
let endTime = Date.now()
|
||||
state.isAutoScaleCover = endTime - state.start.time < 100
|
||||
// console.log('touchEnd')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.fade1-enter-active,
|
||||
.fade1-leave-active {
|
||||
.fade1-enter-active,
|
||||
.fade1-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.fade1-enter-from,
|
||||
.fade1-leave-to {
|
||||
.fade1-enter-from,
|
||||
.fade1-leave-to {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.FromBottomDialog {
|
||||
.FromBottomDialog {
|
||||
left: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
#UserPanel {
|
||||
#UserPanel {
|
||||
position: fixed;
|
||||
background: var(--color-user);
|
||||
height: 100%;
|
||||
@ -1100,5 +1045,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const leftList = computed(() => {
|
||||
const leftList = computed(() => {
|
||||
return props.list.filter((v, index) => index % 2 === 0)
|
||||
})
|
||||
const rightList = computed(() => {
|
||||
})
|
||||
const rightList = computed(() => {
|
||||
return props.list.filter((v, index) => index % 2 !== 0)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -30,7 +30,7 @@
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.waterfall {
|
||||
.waterfall {
|
||||
display: flex;
|
||||
gap: 10rem;
|
||||
|
||||
@ -39,5 +39,5 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,50 +19,50 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/*TODO 单独使用时，没有mark*/
|
||||
export default {
|
||||
/*TODO 单独使用时，没有mark*/
|
||||
export default {
|
||||
name: 'ConfirmDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
default: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
}
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
}
|
||||
},
|
||||
subtitleColor: {
|
||||
type: String,
|
||||
default() {
|
||||
return 'gray'
|
||||
},
|
||||
}
|
||||
},
|
||||
okText: {
|
||||
type: String,
|
||||
default() {
|
||||
return '确定'
|
||||
},
|
||||
}
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default() {
|
||||
return '取消'
|
||||
},
|
||||
}
|
||||
},
|
||||
cancelTextColor: {
|
||||
type: String,
|
||||
default() {
|
||||
return 'gray'
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
@ -76,15 +76,15 @@
|
||||
cancel() {
|
||||
this.$emit('cancel')
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.ConfirmDialog {
|
||||
.ConfirmDialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -150,5 +150,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,21 +4,21 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'FadeDialog',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {},
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.FadeDialog {
|
||||
.FadeDialog {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -31,5 +31,5 @@
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,47 +28,47 @@
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import Dom from '../../utils/dom'
|
||||
import bus, { EVENT_KEY } from '@/utils/bus'
|
||||
import Dom from '../../utils/dom'
|
||||
import bus, { EVENT_KEY } from '@/utils/bus'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'FromBottomDialog',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'dark',
|
||||
default: 'dark'
|
||||
// default: 'light'
|
||||
// default: 'white'
|
||||
},
|
||||
maskMode: {
|
||||
type: String,
|
||||
default: 'dark',
|
||||
default: 'dark'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(var(--vh, 1vh) * 70)',
|
||||
default: 'calc(var(--vh, 1vh) * 70)'
|
||||
},
|
||||
showHengGang: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
default: true
|
||||
},
|
||||
pageId: {
|
||||
type: String,
|
||||
default: null,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
borderRadius: {
|
||||
type: String,
|
||||
default: '15rem 15rem 0 0',
|
||||
default: '15rem 15rem 0 0'
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue(newVal) {
|
||||
@ -98,7 +98,7 @@
|
||||
mask.remove()
|
||||
}, 250)
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -106,7 +106,7 @@
|
||||
startLocationY: 0,
|
||||
moveYDistance: 0,
|
||||
startTime: 0,
|
||||
pagePosition: null,
|
||||
pagePosition: null
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -155,21 +155,14 @@
|
||||
if (this.moveYDistance > 0) {
|
||||
bus.emit(EVENT_KEY.DIALOG_MOVE, {
|
||||
tag: this.tag,
|
||||
e: this.moveYDistance,
|
||||
e: this.moveYDistance
|
||||
})
|
||||
this.$setCss(
|
||||
this.$refs.dialog,
|
||||
'transform',
|
||||
`translate3d(0,${this.moveYDistance}px,0)`,
|
||||
)
|
||||
this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${this.moveYDistance}px,0)`)
|
||||
}
|
||||
},
|
||||
end(e) {
|
||||
//点击
|
||||
if (
|
||||
Date.now() - this.startTime < 150 &&
|
||||
Math.abs(this.moveYDistance) < 30
|
||||
) {
|
||||
if (Date.now() - this.startTime < 150 && Math.abs(this.moveYDistance) < 30) {
|
||||
return
|
||||
}
|
||||
//滑动
|
||||
@ -177,11 +170,7 @@
|
||||
let clientHeight = this.$refs.dialog.clientHeight
|
||||
this.$setCss(this.$refs.dialog, 'transition-duration', `250ms`)
|
||||
if (Math.abs(this.moveYDistance) > clientHeight / 2) {
|
||||
this.$setCss(
|
||||
this.$refs.dialog,
|
||||
'transform',
|
||||
`translate3d(0,${clientHeight}px,0)`,
|
||||
)
|
||||
this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${clientHeight}px,0)`)
|
||||
bus.emit(EVENT_KEY.DIALOG_END, { tag: this.tag, isClose: true })
|
||||
setTimeout(this.hide, 250)
|
||||
} else {
|
||||
@ -193,15 +182,15 @@
|
||||
}, 250)
|
||||
}
|
||||
this.moveYDistance = 0
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.FromBottomDialog {
|
||||
.FromBottomDialog {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
@ -270,5 +259,5 @@
|
||||
width: 30rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,51 +14,51 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'NoticeDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
}
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
}
|
||||
},
|
||||
subtitleColor: {
|
||||
type: String,
|
||||
default() {
|
||||
return 'gray'
|
||||
},
|
||||
}
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default() {
|
||||
return '取消'
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
stop() {},
|
||||
},
|
||||
stop() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.NoticeDialog {
|
||||
.NoticeDialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -110,5 +110,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,28 +8,28 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'SelectDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.SelectDialog {
|
||||
.SelectDialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -58,5 +58,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,43 +10,43 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'SimpleConfirmDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
}
|
||||
},
|
||||
okText: {
|
||||
type: String,
|
||||
default() {
|
||||
return '保存'
|
||||
},
|
||||
}
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default() {
|
||||
return '放弃'
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
stop() {},
|
||||
},
|
||||
stop() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.SimpleConfirmDialog {
|
||||
.SimpleConfirmDialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -77,5 +77,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -148,18 +148,8 @@
|
||||
color-stop(rgba(255, 255, 255, 0)),
|
||||
to(#ffffff)
|
||||
);
|
||||
background: -webkit-linear-gradient(
|
||||
top,
|
||||
#ffffff,
|
||||
rgba(255, 255, 255, 0),
|
||||
#ffffff
|
||||
);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
rgba(255, 255, 255, 0),
|
||||
#ffffff
|
||||
);
|
||||
background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);
|
||||
background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);
|
||||
opacity: 0.9;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -39,23 +39,17 @@ MobileSelect.prototype = {
|
||||
var _this = this
|
||||
if (config.wheels[0].data.length == 0) {
|
||||
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
|
||||
}
|
||||
_this.keyMap = config.keyMap
|
||||
? config.keyMap
|
||||
: { id: 'id', value: 'value', childs: 'childs' }
|
||||
_this.keyMap = config.keyMap ? config.keyMap : { id: 'id', value: 'value', childs: 'childs' }
|
||||
_this.checkDataType()
|
||||
_this.renderWheels(
|
||||
_this.wheelsData,
|
||||
config.cancelBtnText,
|
||||
config.ensureBtnText,
|
||||
)
|
||||
_this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText)
|
||||
_this.trigger = document.querySelector(config.trigger)
|
||||
if (!_this.trigger) {
|
||||
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
|
||||
}
|
||||
@ -75,9 +69,7 @@ MobileSelect.prototype = {
|
||||
_this.initPosition = config.position || []
|
||||
_this.titleText = config.title || ''
|
||||
_this.connector = config.connector || ' '
|
||||
_this.triggerDisplayData = !(
|
||||
typeof config.triggerDisplayData == 'undefined'
|
||||
)
|
||||
_this.triggerDisplayData = !(typeof config.triggerDisplayData == 'undefined')
|
||||
? config.triggerDisplayData
|
||||
: true
|
||||
_this.trigger.style.cursor = 'pointer'
|
||||
@ -178,8 +170,7 @@ MobileSelect.prototype = {
|
||||
}
|
||||
if (!isNaN(config.maskOpacity)) {
|
||||
_this.grayMask = _this.mobileSelect.querySelector('.grayLayer')
|
||||
_this.grayMask.style.background =
|
||||
'rgba(0, 0, 0, ' + config.maskOpacity + ')'
|
||||
_this.grayMask.style.background = 'rgba(0, 0, 0, ' + config.maskOpacity + ')'
|
||||
}
|
||||
},
|
||||
|
||||
@ -194,16 +185,7 @@ MobileSelect.prototype = {
|
||||
var bIsAndroid = sUserAgent.match(/android/i) == 'android'
|
||||
var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce'
|
||||
var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile'
|
||||
if (
|
||||
bIsIpad ||
|
||||
bIsIphoneOs ||
|
||||
bIsMidp ||
|
||||
bIsUc7 ||
|
||||
bIsUc ||
|
||||
bIsAndroid ||
|
||||
bIsCE ||
|
||||
bIsWM
|
||||
) {
|
||||
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
|
||||
_this.isPC = false
|
||||
}
|
||||
},
|
||||
@ -297,21 +279,21 @@ MobileSelect.prototype = {
|
||||
function () {
|
||||
_this.touch(event, this.firstChild, index)
|
||||
},
|
||||
false,
|
||||
false
|
||||
)
|
||||
theWheel.addEventListener(
|
||||
'touchend',
|
||||
function () {
|
||||
_this.touch(event, this.firstChild, index)
|
||||
},
|
||||
false,
|
||||
false
|
||||
)
|
||||
theWheel.addEventListener(
|
||||
'touchmove',
|
||||
function () {
|
||||
_this.touch(event, this.firstChild, index)
|
||||
},
|
||||
false,
|
||||
false
|
||||
)
|
||||
|
||||
if (_this.isPC) {
|
||||
@ -321,21 +303,21 @@ MobileSelect.prototype = {
|
||||
function () {
|
||||
_this.dragClick(event, this.firstChild, index)
|
||||
},
|
||||
false,
|
||||
false
|
||||
)
|
||||
theWheel.addEventListener(
|
||||
'mousemove',
|
||||
function () {
|
||||
_this.dragClick(event, this.firstChild, index)
|
||||
},
|
||||
false,
|
||||
false
|
||||
)
|
||||
theWheel.addEventListener(
|
||||
'mouseup',
|
||||
function () {
|
||||
_this.dragClick(event, this.firstChild, index)
|
||||
},
|
||||
true,
|
||||
true
|
||||
)
|
||||
}
|
||||
},
|
||||
@ -352,10 +334,7 @@ MobileSelect.prototype = {
|
||||
if (_this.jsonType) {
|
||||
var node = _this.wheelsData[0].data
|
||||
for (var i = 0; i < node.length; i++) {
|
||||
if (
|
||||
_this.keyMap.childs in node[i] &&
|
||||
node[i][_this.keyMap.childs].length > 0
|
||||
) {
|
||||
if (_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0) {
|
||||
_this.cascade = true
|
||||
_this.cascadeJsonData = _this.wheelsData[0].data
|
||||
break
|
||||
@ -394,16 +373,10 @@ MobileSelect.prototype = {
|
||||
initCheckArrDeep: function (parent) {
|
||||
var _this = this
|
||||
if (parent) {
|
||||
if (
|
||||
_this.keyMap.childs in parent &&
|
||||
parent[_this.keyMap.childs].length > 0
|
||||
) {
|
||||
_this.displayJson.push(
|
||||
_this.generateArrData(parent[_this.keyMap.childs]),
|
||||
)
|
||||
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
|
||||
_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]))
|
||||
_this.initDeepCount++
|
||||
var nextNode =
|
||||
parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]]
|
||||
var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]]
|
||||
if (nextNode) {
|
||||
_this.initCheckArrDeep(nextNode)
|
||||
} else {
|
||||
@ -417,13 +390,8 @@ MobileSelect.prototype = {
|
||||
//检测子节点深度 修改 displayJson
|
||||
var _this = this
|
||||
if (parent) {
|
||||
if (
|
||||
_this.keyMap.childs in parent &&
|
||||
parent[_this.keyMap.childs].length > 0
|
||||
) {
|
||||
_this.displayJson.push(
|
||||
_this.generateArrData(parent[_this.keyMap.childs]),
|
||||
) //生成子节点数组
|
||||
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
|
||||
_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])) //生成子节点数组
|
||||
_this.checkArrDeep(parent[_this.keyMap.childs][0]) //检测下一个子节点
|
||||
}
|
||||
}
|
||||
@ -539,18 +507,12 @@ MobileSelect.prototype = {
|
||||
var _this = this
|
||||
var tempHTML = ''
|
||||
if (_this.cascade) {
|
||||
console.error(
|
||||
'级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源',
|
||||
)
|
||||
console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源')
|
||||
return false
|
||||
} else if (_this.jsonType) {
|
||||
for (var j = 0; j < data.length; j++) {
|
||||
tempHTML +=
|
||||
'<li data-id="' +
|
||||
data[j][_this.keyMap.id] +
|
||||
'">' +
|
||||
data[j][_this.keyMap.value] +
|
||||
'</li>'
|
||||
'<li data-id="' + data[j][_this.keyMap.id] + '">' + data[j][_this.keyMap.value] + '</li>'
|
||||
}
|
||||
_this.wheelsData[sliderIndex] = { data: data }
|
||||
} else {
|
||||
@ -593,9 +555,7 @@ MobileSelect.prototype = {
|
||||
}
|
||||
} else if (_this.jsonType) {
|
||||
for (var i = 0; i < _this.curDistance.length; i++) {
|
||||
temp.push(
|
||||
_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])],
|
||||
)
|
||||
temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])])
|
||||
}
|
||||
} else {
|
||||
for (var i = 0; i < _this.curDistance.length; i++) {
|
||||
@ -643,13 +603,9 @@ MobileSelect.prototype = {
|
||||
|
||||
updateCurDistance: function (theSlider, index) {
|
||||
if (theSlider.style.transform) {
|
||||
this.curDistance[index] = parseInt(
|
||||
theSlider.style.transform.split(',')[1],
|
||||
)
|
||||
this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1])
|
||||
} else {
|
||||
this.curDistance[index] = parseInt(
|
||||
theSlider.style.webkitTransform.split(',')[1],
|
||||
)
|
||||
this.curDistance[index] = parseInt(theSlider.style.webkitTransform.split(',')[1])
|
||||
}
|
||||
},
|
||||
|
||||
@ -680,22 +636,18 @@ MobileSelect.prototype = {
|
||||
case 'touchend':
|
||||
_this.moveEndY = parseInt(event.changedTouches[0].clientY)
|
||||
_this.offsetSum = _this.moveEndY - _this.startY
|
||||
_this.oversizeBorder =
|
||||
-(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight
|
||||
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight
|
||||
|
||||
if (_this.offsetSum == 0) {
|
||||
//offsetSum为0,相当于点击事件
|
||||
// 0 1 [2] 3 4
|
||||
var clickOffetNum = parseInt(
|
||||
(document.documentElement.clientHeight - _this.moveEndY) / 40,
|
||||
(document.documentElement.clientHeight - _this.moveEndY) / 40
|
||||
)
|
||||
if (clickOffetNum != 2) {
|
||||
var offset = clickOffetNum - 2
|
||||
var newDistance = _this.curDistance[index] + offset * _this.liHeight
|
||||
if (
|
||||
newDistance <= 2 * _this.liHeight &&
|
||||
newDistance >= _this.oversizeBorder
|
||||
) {
|
||||
if (newDistance <= 2 * _this.liHeight && newDistance >= _this.oversizeBorder) {
|
||||
_this.curDistance[index] = newDistance
|
||||
_this.movePosition(theSlider, _this.curDistance[index])
|
||||
_this.transitionEnd(_this.getIndexArr(), _this.getCurValue())
|
||||
@ -713,10 +665,7 @@ MobileSelect.prototype = {
|
||||
setTimeout(function () {
|
||||
_this.movePosition(theSlider, _this.curDistance[index])
|
||||
}, 100)
|
||||
} else if (
|
||||
_this.curDistance[index] + _this.offsetSum <
|
||||
_this.oversizeBorder
|
||||
) {
|
||||
} else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
|
||||
_this.curDistance[index] = _this.oversizeBorder
|
||||
setTimeout(function () {
|
||||
_this.movePosition(theSlider, _this.curDistance[index])
|
||||
@ -757,20 +706,16 @@ MobileSelect.prototype = {
|
||||
case 'mouseup':
|
||||
_this.moveEndY = event.clientY
|
||||
_this.offsetSum = _this.moveEndY - _this.startY
|
||||
_this.oversizeBorder =
|
||||
-(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight
|
||||
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight
|
||||
|
||||
if (_this.offsetSum == 0) {
|
||||
var clickOffetNum = parseInt(
|
||||
(document.documentElement.clientHeight - _this.moveEndY) / 40,
|
||||
(document.documentElement.clientHeight - _this.moveEndY) / 40
|
||||
)
|
||||
if (clickOffetNum != 2) {
|
||||
var offset = clickOffetNum - 2
|
||||
var newDistance = _this.curDistance[index] + offset * _this.liHeight
|
||||
if (
|
||||
newDistance <= 2 * _this.liHeight &&
|
||||
newDistance >= _this.oversizeBorder
|
||||
) {
|
||||
if (newDistance <= 2 * _this.liHeight && newDistance >= _this.oversizeBorder) {
|
||||
_this.curDistance[index] = newDistance
|
||||
_this.movePosition(theSlider, _this.curDistance[index])
|
||||
_this.transitionEnd(_this.getIndexArr(), _this.getCurValue())
|
||||
@ -788,10 +733,7 @@ MobileSelect.prototype = {
|
||||
setTimeout(function () {
|
||||
_this.movePosition(theSlider, _this.curDistance[index])
|
||||
}, 100)
|
||||
} else if (
|
||||
_this.curDistance[index] + _this.offsetSum <
|
||||
_this.oversizeBorder
|
||||
) {
|
||||
} else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
|
||||
_this.curDistance[index] = _this.oversizeBorder
|
||||
setTimeout(function () {
|
||||
_this.movePosition(theSlider, _this.curDistance[index])
|
||||
@ -818,7 +760,7 @@ MobileSelect.prototype = {
|
||||
}
|
||||
break
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default MobileSelect
|
||||
|
||||
@ -23,30 +23,18 @@
|
||||
<div class="float">
|
||||
<template v-if="isLive">
|
||||
<div class="living">点击进入直播间</div>
|
||||
<ItemDesc
|
||||
:is-live="true"
|
||||
v-model:item="localItem"
|
||||
:position="position"
|
||||
/>
|
||||
<ItemDesc :is-live="true" v-model:item="localItem" :position="position" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div :style="{ opacity: isMove ? 0 : 1 }" class="normal">
|
||||
<template v-if="!commentVisible">
|
||||
<ItemToolbar
|
||||
v-model:item="localItem"
|
||||
:position="position"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
<ItemToolbar v-model:item="localItem" :position="position" v-bind="$attrs" />
|
||||
<ItemDesc v-model:item="localItem" :position="position" />
|
||||
</template>
|
||||
<div v-if="isMy" class="comment-status">
|
||||
<div class="comment">
|
||||
<div class="type-comment">
|
||||
<img
|
||||
src="../../assets/img/icon/head-image.jpeg"
|
||||
alt=""
|
||||
class="avatar"
|
||||
/>
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar" />
|
||||
<div class="right">
|
||||
<p>
|
||||
<span class="name">zzzzz</span>
|
||||
@ -57,16 +45,8 @@
|
||||
</div>
|
||||
<transition-group name="comment-status" tag="div" class="loveds">
|
||||
<div class="type-loved" :key="i" v-for="i in test">
|
||||
<img
|
||||
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/head-image.jpeg" alt="" class="avatar" />
|
||||
<img src="../../assets/img/icon/love.svg" alt="" class="loved" />
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
@ -97,27 +77,27 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Utils, { _checkImgUrl } from '../../utils'
|
||||
import Loading from '../Loading'
|
||||
import ItemToolbar from './ItemToolbar'
|
||||
import ItemDesc from './ItemDesc'
|
||||
import bus, { EVENT_KEY } from '../../utils/bus'
|
||||
import { SlideItemPlayStatus } from '../../utils/const_var'
|
||||
import { computed } from 'vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import Utils, { _checkImgUrl } from '../../utils'
|
||||
import Loading from '../Loading'
|
||||
import ItemToolbar from './ItemToolbar'
|
||||
import ItemDesc from './ItemDesc'
|
||||
import bus, { EVENT_KEY } from '../../utils/bus'
|
||||
import { SlideItemPlayStatus } from '../../utils/const_var'
|
||||
import { computed } from 'vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'BVideo',
|
||||
components: {
|
||||
Loading,
|
||||
ItemToolbar,
|
||||
ItemDesc,
|
||||
Icon,
|
||||
Icon
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
// isPlaying: computed(() => this.status)
|
||||
isPlaying: computed(() => this.isPlaying),
|
||||
isPlaying: computed(() => this.isPlaying)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@ -125,33 +105,33 @@
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
},
|
||||
position: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
},
|
||||
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
|
||||
isPlay: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return true
|
||||
},
|
||||
}
|
||||
},
|
||||
isMy: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false
|
||||
},
|
||||
}
|
||||
},
|
||||
isLive: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
durationStyle() {
|
||||
@ -169,15 +149,13 @@
|
||||
},
|
||||
isPlaying() {
|
||||
return this.status === SlideItemPlayStatus.Play
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
paused: false,
|
||||
status: this.isPlay
|
||||
? SlideItemPlayStatus.Play
|
||||
: SlideItemPlayStatus.Pause,
|
||||
status: this.isPlay ? SlideItemPlayStatus.Play : SlideItemPlayStatus.Pause,
|
||||
duration: 0,
|
||||
step: 0,
|
||||
currentTime: -1,
|
||||
@ -193,7 +171,7 @@
|
||||
progressBarRect: {},
|
||||
videoScreenHeight: 0,
|
||||
commentVisible: false,
|
||||
LUtils: Utils,
|
||||
LUtils: Utils
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -208,8 +186,7 @@
|
||||
this.playX = (this.currentTime - 1) * this.step
|
||||
}
|
||||
video.addEventListener('loadedmetadata', (e) => {
|
||||
this.videoScreenHeight =
|
||||
video.videoHeight / (video.videoWidth / this.width)
|
||||
this.videoScreenHeight = video.videoHeight / (video.videoWidth / this.width)
|
||||
this.duration = video.duration
|
||||
this.progressBarRect = this.$refs.progress.getBoundingClientRect()
|
||||
this.step = this.progressBarRect.width / Math.floor(this.duration)
|
||||
@ -229,7 +206,7 @@
|
||||
}
|
||||
// console.log(e, t)
|
||||
},
|
||||
false,
|
||||
false
|
||||
)
|
||||
}
|
||||
|
||||
@ -288,11 +265,7 @@
|
||||
onDialogMove({ tag, e }) {
|
||||
if (this.commentVisible && tag === 'comment') {
|
||||
Utils.$setCss(this.$refs.video, 'transition-duration', `0ms`)
|
||||
Utils.$setCss(
|
||||
this.$refs.video,
|
||||
'height',
|
||||
`calc(var(--vh, 1vh) * 30 + ${e}px)`,
|
||||
)
|
||||
Utils.$setCss(this.$refs.video, 'height', `calc(var(--vh, 1vh) * 30 + ${e}px)`)
|
||||
}
|
||||
},
|
||||
onDialogEnd({ tag, isClose }) {
|
||||
@ -303,11 +276,7 @@
|
||||
this.commentVisible = false
|
||||
Utils.$setCss(this.$refs.video, 'height', '100%')
|
||||
} else {
|
||||
Utils.$setCss(
|
||||
this.$refs.video,
|
||||
'height',
|
||||
'calc(var(--vh, 1vh) * 30)',
|
||||
)
|
||||
Utils.$setCss(this.$refs.video, 'height', 'calc(var(--vh, 1vh) * 30)')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -326,15 +295,12 @@
|
||||
}
|
||||
},
|
||||
click({ uniqueId, index, type }) {
|
||||
if (
|
||||
this.position.uniqueId === uniqueId &&
|
||||
this.position.index === index
|
||||
) {
|
||||
if (this.position.uniqueId === uniqueId && this.position.index === index) {
|
||||
if (this.isLive) {
|
||||
if (type === EVENT_KEY.ITEM_TOGGLE) {
|
||||
bus.emit(EVENT_KEY.NAV, {
|
||||
path: '/home/live',
|
||||
query: { id: this.item.id },
|
||||
query: { id: this.item.id }
|
||||
})
|
||||
}
|
||||
} else {
|
||||
@ -393,23 +359,23 @@
|
||||
setTimeout(() => (this.isMove = false), 1000)
|
||||
this.$refs.video.currentTime = this.currentTime
|
||||
this.play()
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: transform 0.5s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
.video-wrapper {
|
||||
position: relative;
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
@ -751,9 +717,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.living {
|
||||
.living {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
font-size: 18rem;
|
||||
@ -764,5 +730,5 @@
|
||||
color: white;
|
||||
top: 70%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<script lang="jsx">
|
||||
import bus from '../../utils/bus'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import bus from '../../utils/bus'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'Indicator',
|
||||
setup() {
|
||||
const baseStore = useBaseStore()
|
||||
@ -11,31 +11,31 @@
|
||||
props: {
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
default: () => 0
|
||||
},
|
||||
tabStyleWidth: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
default: () => ''
|
||||
},
|
||||
tabTexts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
default: () => []
|
||||
},
|
||||
tabRender: {
|
||||
type: Function,
|
||||
default: null,
|
||||
default: null
|
||||
},
|
||||
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
|
||||
name: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
default: () => ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentSlideItemIndex: this.activeIndex,
|
||||
tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left,
|
||||
indicatorSpace: 0, //indicator之间的间距
|
||||
indicatorSpace: 0 //indicator之间的间距
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -51,22 +51,17 @@
|
||||
</div>
|
||||
* */
|
||||
return (
|
||||
<div className='indicator-ctn'>
|
||||
<div className="indicator-ctn">
|
||||
{this.tabRender ? (
|
||||
this.tabRender()
|
||||
) : (
|
||||
<div className='tabs' ref='tabs'>
|
||||
<div className="tabs" ref="tabs">
|
||||
{this.tabTexts.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
this.currentSlideItemIndex === index
|
||||
? 'active tab'
|
||||
: 'tab'
|
||||
}
|
||||
className={this.currentSlideItemIndex === index ? 'active tab' : 'tab'}
|
||||
style={{
|
||||
width:
|
||||
this.tabStyleWidth || 100 / this.tabTexts.length + '%',
|
||||
width: this.tabStyleWidth || 100 / this.tabTexts.length + '%'
|
||||
}}
|
||||
onClick={(e) => this.changeIndex(index)}
|
||||
>
|
||||
@ -77,10 +72,10 @@
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className='indicator'
|
||||
ref='indicator'
|
||||
className="indicator"
|
||||
ref="indicator"
|
||||
style={{
|
||||
width: this.tabStyleWidth || 100 / this.tabTexts.length + '%',
|
||||
width: this.tabStyleWidth || 100 / this.tabTexts.length + '%'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@ -100,9 +95,7 @@
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
},
|
||||
initTabs() {
|
||||
@ -114,30 +107,25 @@
|
||||
this.tabIndicatorRelationActiveIndexLefts.push(
|
||||
item.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.tabIndicatorRelationActiveIndexLefts[1] -
|
||||
this.tabIndicatorRelationActiveIndexLefts[0]
|
||||
this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
},
|
||||
move(e) {
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] -
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
|
||||
e.x.distance / (this.baseStore.bodyWidth / this.indicatorSpace) +
|
||||
'px',
|
||||
'px'
|
||||
)
|
||||
},
|
||||
end(index) {
|
||||
@ -147,22 +135,20 @@
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
setTimeout(() => {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
}, 300)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.indicator-ctn {
|
||||
.indicator-ctn {
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
height: var(--indicator-height);
|
||||
@ -207,5 +193,5 @@
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,37 +1,37 @@
|
||||
<script lang="jsx">
|
||||
import bus from '../../utils/bus'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import bus from '../../utils/bus'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'IndicatorLight',
|
||||
props: {
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
default: () => 0
|
||||
},
|
||||
tabStyleWidth: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
default: () => ''
|
||||
},
|
||||
tabTexts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
default: () => []
|
||||
},
|
||||
tabRender: {
|
||||
type: Function,
|
||||
default: null,
|
||||
default: null
|
||||
},
|
||||
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
|
||||
name: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
default: () => ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentSlideItemIndex: this.activeIndex,
|
||||
tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left,
|
||||
indicatorSpace: 0, //indicator之间的间距
|
||||
indicatorSpace: 0 //indicator之间的间距
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
@ -51,22 +51,17 @@
|
||||
</div>
|
||||
* */
|
||||
return (
|
||||
<div className='indicator-ctn'>
|
||||
<div className="indicator-ctn">
|
||||
{this.tabRender ? (
|
||||
this.tabRender()
|
||||
) : (
|
||||
<div className='tabs' ref='tabs'>
|
||||
<div className="tabs" ref="tabs">
|
||||
{this.tabTexts.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
this.currentSlideItemIndex === index
|
||||
? 'active tab'
|
||||
: 'tab'
|
||||
}
|
||||
className={this.currentSlideItemIndex === index ? 'active tab' : 'tab'}
|
||||
style={{
|
||||
width:
|
||||
this.tabStyleWidth || 100 / this.tabTexts.length + '%',
|
||||
width: this.tabStyleWidth || 100 / this.tabTexts.length + '%'
|
||||
}}
|
||||
onClick={(e) => this.changeIndex(index)}
|
||||
>
|
||||
@ -76,7 +71,7 @@
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div className='indicator' ref='indicator' />
|
||||
<div className="indicator" ref="indicator" />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
@ -94,9 +89,7 @@
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
},
|
||||
initTabs() {
|
||||
@ -109,31 +102,26 @@
|
||||
this.tabIndicatorRelationActiveIndexLefts.push(
|
||||
item.getBoundingClientRect().x -
|
||||
tabs.children[0].getBoundingClientRect().x +
|
||||
(this.tabWidth * 0.5 - indicatorWidth / 2),
|
||||
(this.tabWidth * 0.5 - indicatorWidth / 2)
|
||||
)
|
||||
}
|
||||
|
||||
this.indicatorSpace =
|
||||
this.tabIndicatorRelationActiveIndexLefts[1] -
|
||||
this.tabIndicatorRelationActiveIndexLefts[0]
|
||||
this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
},
|
||||
move(e) {
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] -
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
|
||||
e.x.distance / (this.baseStore.bodyWidth / this.indicatorSpace) +
|
||||
'px',
|
||||
'px'
|
||||
)
|
||||
},
|
||||
end(index) {
|
||||
@ -143,22 +131,20 @@
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
setTimeout(() => {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
}, 300)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.indicator-ctn {
|
||||
.indicator-ctn {
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
height: var(--indicator-height);
|
||||
@ -202,5 +188,5 @@
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,38 +1,38 @@
|
||||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
import bus from '../../utils/bus'
|
||||
import { reactive } from 'vue'
|
||||
import bus from '../../utils/bus'
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
},
|
||||
position: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
},
|
||||
isMy: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false
|
||||
},
|
||||
}
|
||||
},
|
||||
isLive: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
const state = reactive({
|
||||
isAttention: false,
|
||||
test: [1, 2],
|
||||
})
|
||||
test: [1, 2]
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="item-desc ml1r mb1r">
|
||||
@ -62,11 +62,7 @@
|
||||
<div v-else class="comment-status">
|
||||
<div class="comment">
|
||||
<div class="type-comment">
|
||||
<img
|
||||
src="../../assets/img/icon/head-image.jpeg"
|
||||
alt=""
|
||||
class="avatar"
|
||||
/>
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar" />
|
||||
<div class="right">
|
||||
<p>
|
||||
<span class="name">zzzzz</span>
|
||||
@ -77,11 +73,7 @@
|
||||
</div>
|
||||
<transition-group name="comment-status" tag="div" class="loveds">
|
||||
<div class="type-loved" :key="i" v-for="i in state.test">
|
||||
<img
|
||||
src="../../assets/img/icon/head-image.jpeg"
|
||||
alt=""
|
||||
class="avatar"
|
||||
/>
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar" />
|
||||
<img src="../../assets/img/icon/love.svg" alt="" class="loved" />
|
||||
</div>
|
||||
</transition-group>
|
||||
@ -91,7 +83,7 @@
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.item-desc {
|
||||
.item-desc {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
@ -223,5 +215,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,54 +1,48 @@
|
||||
<script setup>
|
||||
import BaseMusic from '../BaseMusic'
|
||||
import Utils from '../../utils'
|
||||
import { reactive } from 'vue'
|
||||
import bus, { EVENT_KEY } from '@/utils/bus'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import BaseMusic from '../BaseMusic'
|
||||
import Utils from '../../utils'
|
||||
import { reactive } from 'vue'
|
||||
import bus, { EVENT_KEY } from '@/utils/bus'
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
},
|
||||
position: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
},
|
||||
isMy: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
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')
|
||||
setTimeout(() => {
|
||||
Utils.updateItem(props, 'isAttention', true, emit)
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
function showComments() {
|
||||
function showComments() {
|
||||
// emit('showComments')
|
||||
bus.emit(EVENT_KEY.OPEN_COMMENTS, props.item.id)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -61,11 +55,7 @@
|
||||
@click.stop="bus.emit(EVENT_KEY.GO_USERINFO)"
|
||||
/>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="!props.item.isAttention"
|
||||
@click.stop="attention"
|
||||
class="options"
|
||||
>
|
||||
<div v-if="!props.item.isAttention" @click.stop="attention" class="options">
|
||||
<img class="no" src="../../assets/img/icon/add-light.png" alt="" />
|
||||
<img class="yes" src="../../assets/img/icon/ok-red.png" alt="" />
|
||||
</div>
|
||||
@ -73,61 +63,30 @@
|
||||
</div>
|
||||
<div class="love mb2r" @click.stop="loved($event)">
|
||||
<div>
|
||||
<img
|
||||
src="../../assets/img/icon/love.svg"
|
||||
class="love-image"
|
||||
v-if="!props.item.isLoved"
|
||||
/>
|
||||
<img
|
||||
src="../../assets/img/icon/loved.svg"
|
||||
class="love-image"
|
||||
v-if="props.item.isLoved"
|
||||
/>
|
||||
<img src="../../assets/img/icon/love.svg" class="love-image" v-if="!props.item.isLoved" />
|
||||
<img src="../../assets/img/icon/loved.svg" class="love-image" v-if="props.item.isLoved" />
|
||||
</div>
|
||||
<span>{{ Utils.formatNumber(props.item.statistics.digg_count) }}</span>
|
||||
</div>
|
||||
<div class="message mb2r" @click.stop="showComments">
|
||||
<Icon
|
||||
icon="mage:message-dots-round-fill"
|
||||
class="icon"
|
||||
style="color: white"
|
||||
/>
|
||||
<Icon icon="mage:message-dots-round-fill" class="icon" style="color: white" />
|
||||
<span>{{ Utils.formatNumber(props.item.statistics.comment_count) }}</span>
|
||||
</div>
|
||||
<!--TODO -->
|
||||
<div
|
||||
class="message mb2r"
|
||||
@click.stop="
|
||||
Utils.updateItem(props, 'isCollect', !props.item.isCollect, emit)
|
||||
"
|
||||
@click.stop="Utils.updateItem(props, 'isCollect', !props.item.isCollect, emit)"
|
||||
>
|
||||
<Icon
|
||||
v-if="props.item.isCollect"
|
||||
icon="ic:round-star"
|
||||
class="icon"
|
||||
style="color: yellow"
|
||||
/>
|
||||
<Icon 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" />
|
||||
<span>{{ Utils.formatNumber(props.item.statistics.comment_count) }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="!props.isMy"
|
||||
class="share mb2r"
|
||||
@click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)"
|
||||
>
|
||||
<img
|
||||
src="../../assets/img/icon/share-white-full.png"
|
||||
alt=""
|
||||
class="share-image"
|
||||
/>
|
||||
<div v-if="!props.isMy" 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>
|
||||
</div>
|
||||
<div v-else class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
|
||||
<img
|
||||
src="../../assets/img/icon/menu-white.png"
|
||||
alt=""
|
||||
class="share-image"
|
||||
/>
|
||||
<img src="../../assets/img/icon/menu-white.png" alt="" class="share-image" />
|
||||
</div>
|
||||
<!-- <BaseMusic-->
|
||||
<!-- :cover="props.item.music.cover"-->
|
||||
@ -138,7 +97,7 @@
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.toolbar {
|
||||
.toolbar {
|
||||
//width: 40px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -228,5 +187,5 @@
|
||||
.loved {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,10 +9,7 @@
|
||||
@touchend="touchEnd"
|
||||
>
|
||||
<div class="img-slide-item" v-for="(img, index) in item.imgs">
|
||||
<img
|
||||
:ref="(e) => setItemRef(e, 'itemRefs')"
|
||||
:src="img + '&d=' + index"
|
||||
/>
|
||||
<img :ref="(e) => setItemRef(e, 'itemRefs')" :src="img + '&d=' + index" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -32,19 +29,12 @@
|
||||
:position="position"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
<ItemDesc
|
||||
class="mb3r"
|
||||
v-model:item="state.localItem"
|
||||
:position="position"
|
||||
/>
|
||||
<ItemDesc class="mb3r" v-model:item="state.localItem" :position="position" />
|
||||
</template>
|
||||
<!--不知为啥touch事件，在下部20px的空间内不触发，加上click事件不好了 -->
|
||||
<div
|
||||
class="progress-bar"
|
||||
v-if="
|
||||
!state.isPreview &&
|
||||
state.operationStatus !== SlideAlbumOperationStatus.Zooming
|
||||
"
|
||||
v-if="!state.isPreview && state.operationStatus !== SlideAlbumOperationStatus.Zooming"
|
||||
@click="null"
|
||||
@touchstart="progressBarTouchStart"
|
||||
@touchmove="progressBarTouchMove"
|
||||
@ -70,10 +60,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
<Teleport
|
||||
to="#home-index"
|
||||
v-if="state.operationStatus !== SlideAlbumOperationStatus.Normal"
|
||||
>
|
||||
<Teleport to="#home-index" v-if="state.operationStatus !== SlideAlbumOperationStatus.Normal">
|
||||
<div class="album-toolbar">
|
||||
<div class="left">
|
||||
<Icon
|
||||
@ -90,10 +77,7 @@
|
||||
@click="startPlay"
|
||||
/>
|
||||
<Icon icon="bi:pause-fill" v-else class="pause" @click="stopPlay" />
|
||||
<Icon
|
||||
icon="system-uicons:push-down"
|
||||
@click="$notice('已保存到系统相册')"
|
||||
/>
|
||||
<Icon icon="system-uicons:push-down" @click="$notice('已保存到系统相册')" />
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
@ -101,11 +85,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import enums from '../../utils/enums'
|
||||
import Utils, { $no, $notice } from '../../utils'
|
||||
import { mat4 } from 'gl-matrix'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import {
|
||||
import enums from '../../utils/enums'
|
||||
import Utils, { $no, $notice } from '../../utils'
|
||||
import { mat4 } from 'gl-matrix'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import {
|
||||
onMounted,
|
||||
onBeforeUpdate,
|
||||
reactive,
|
||||
@ -114,35 +98,31 @@
|
||||
computed,
|
||||
provide,
|
||||
nextTick,
|
||||
onUnmounted,
|
||||
} from 'vue'
|
||||
import {
|
||||
onUnmounted
|
||||
} from 'vue'
|
||||
import {
|
||||
getSlideDistance,
|
||||
slideInit,
|
||||
slideReset,
|
||||
slideTouchEnd,
|
||||
slideTouchMove,
|
||||
slideTouchStart,
|
||||
} from './common'
|
||||
import {
|
||||
SlideAlbumOperationStatus,
|
||||
SlideItemPlayStatus,
|
||||
SlideType,
|
||||
} from '../../utils/const_var'
|
||||
import ItemToolbar from './ItemToolbar'
|
||||
import ItemDesc from './ItemDesc'
|
||||
import GM from '../../utils'
|
||||
import { cloneDeep } from '@/utils'
|
||||
import bus, { EVENT_KEY } from '../../utils/bus'
|
||||
slideTouchStart
|
||||
} from './common'
|
||||
import { SlideAlbumOperationStatus, SlideItemPlayStatus, SlideType } from '../../utils/const_var'
|
||||
import ItemToolbar from './ItemToolbar'
|
||||
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 ov = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1])
|
||||
let origin = cloneDeep(ov)
|
||||
const rectMap = new Map()
|
||||
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 origin = cloneDeep(ov)
|
||||
const rectMap = new Map()
|
||||
|
||||
// provide('isPlaying', computed(() => this.isPlaying))
|
||||
provide('isPlaying', false)
|
||||
const props = defineProps({
|
||||
// provide('isPlaying', computed(() => this.isPlaying))
|
||||
provide('isPlaying', false)
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
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'
|
||||
],
|
||||
id: '034ae83b-ca0a-401a-b7c6-cf78361bae7b',
|
||||
video: 'http://douyin.ttentau.top/0.mp4',
|
||||
@ -190,15 +170,15 @@
|
||||
name: '敬礼变装',
|
||||
creator_id: '93864497380',
|
||||
create_time: '1630423555',
|
||||
status: 1,
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: '85ceda30-898f-4b57-b891-0e58b3ab99a9',
|
||||
name: '宿舍',
|
||||
creator_id: '93864497380',
|
||||
create_time: '1630423555',
|
||||
status: 1,
|
||||
},
|
||||
status: 1
|
||||
}
|
||||
],
|
||||
music: {
|
||||
id: 'cde50af2-628c-4d28-b9c6-67237a62518e',
|
||||
@ -208,31 +188,27 @@
|
||||
title: '@穷电影创作的原声-小高快起来跳舞',
|
||||
creator_id: '93864497380',
|
||||
create_time: '1630423555',
|
||||
status: 1,
|
||||
status: 1
|
||||
},
|
||||
author: {
|
||||
id: '1',
|
||||
unique_id_modify_time: '1630393144',
|
||||
unique_id: '10040050',
|
||||
favoriting_count: 143,
|
||||
avatar: new URL(
|
||||
'../../assets/img/icon/avatar/3.png',
|
||||
import.meta.url,
|
||||
).href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
|
||||
school: {
|
||||
name: '中央戏剧学院',
|
||||
department: null,
|
||||
joinTime: null,
|
||||
education: null,
|
||||
displayType: enums.DISPLAY_TYPE.ALL,
|
||||
displayType: enums.DISPLAY_TYPE.ALL
|
||||
},
|
||||
city: '',
|
||||
province: '北京',
|
||||
country: '',
|
||||
location: '',
|
||||
birthday: '2002-01-01',
|
||||
cover:
|
||||
'https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172',
|
||||
cover: 'https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172',
|
||||
following_count: 66,
|
||||
follower_count: 235000,
|
||||
aweme_count: 1796000,
|
||||
@ -244,28 +220,28 @@
|
||||
create_time: '1630423555',
|
||||
status: 1,
|
||||
desc: `一个普普通通学表演的\n看到的人都能开开心心`,
|
||||
is_private: 0,
|
||||
},
|
||||
is_private: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
position: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
uniqueId: '',
|
||||
index: '',
|
||||
index: ''
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
const judgeValue = 20
|
||||
const wrapperEl = ref(null)
|
||||
}
|
||||
}
|
||||
})
|
||||
const judgeValue = 20
|
||||
const wrapperEl = ref(null)
|
||||
|
||||
//用于解决，touch事件触发startPlay,然后click事件又触发stopLoop的问题
|
||||
let lockDatetime = 0
|
||||
//用于解决，touch事件触发startPlay,然后click事件又触发stopLoop的问题
|
||||
let lockDatetime = 0
|
||||
|
||||
const state = reactive({
|
||||
const state = reactive({
|
||||
name: 'SlideHorizontal',
|
||||
localIndex: 0,
|
||||
needCheck: true,
|
||||
@ -276,7 +252,7 @@
|
||||
wrapper: { width: 0, height: 0, childrenLength: 0 },
|
||||
last: {
|
||||
point1: { x: 0, y: 0 },
|
||||
point2: { x: 0, y: 0 },
|
||||
point2: { x: 0, y: 0 }
|
||||
},
|
||||
start: {
|
||||
x: 0,
|
||||
@ -284,7 +260,7 @@
|
||||
point1: { x: 0, y: 0 },
|
||||
point2: { x: 0, y: 0 },
|
||||
center: { x: 0, y: 0 },
|
||||
time: 0,
|
||||
time: 0
|
||||
},
|
||||
move: { x: 0, y: 0 },
|
||||
itemRefs: [],
|
||||
@ -292,26 +268,26 @@
|
||||
cycleFn: -1,
|
||||
status: SlideItemPlayStatus.Play,
|
||||
isAutoPlay: true,
|
||||
localItem: props.item,
|
||||
})
|
||||
localItem: props.item
|
||||
})
|
||||
|
||||
function stopPlay() {
|
||||
function stopPlay() {
|
||||
state.status = SlideItemPlayStatus.Pause
|
||||
stopLoop()
|
||||
}
|
||||
}
|
||||
|
||||
function startPlay() {
|
||||
function startPlay() {
|
||||
state.isAutoPlay = true
|
||||
state.status = SlideItemPlayStatus.Play
|
||||
startLoop()
|
||||
}
|
||||
}
|
||||
|
||||
function stopLoop() {
|
||||
function stopLoop() {
|
||||
clearInterval(state.cycleFn)
|
||||
state.cycleFn = -1
|
||||
}
|
||||
}
|
||||
|
||||
function startLoop() {
|
||||
function startLoop() {
|
||||
if (state.cycleFn !== -1) return
|
||||
if (!state.isAutoPlay) return
|
||||
state.cycleFn = setInterval(() => {
|
||||
@ -322,9 +298,9 @@
|
||||
state.localIndex = 0
|
||||
}
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
|
||||
startPlay()
|
||||
@ -332,18 +308,15 @@
|
||||
// state.operationStatus = SlideAlbumOperationStatus.Zooming
|
||||
// }, 1000)
|
||||
bus.on(EVENT_KEY.SINGLE_CLICK_BROADCAST, click)
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
onUnmounted(() => {
|
||||
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)
|
||||
if (
|
||||
props.position.uniqueId === uniqueId &&
|
||||
props.position.index === index
|
||||
) {
|
||||
if (props.position.uniqueId === uniqueId && props.position.index === index) {
|
||||
// if (type === EVENT_KEY.ITEM_TOGGLE) {
|
||||
// if (state.status === SlideItemPlayStatus.Play) {
|
||||
// stopLoop()
|
||||
@ -365,27 +338,27 @@
|
||||
startPlay()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 确保在每次更新之前重置ref
|
||||
onBeforeUpdate(() => {
|
||||
// 确保在每次更新之前重置ref
|
||||
onBeforeUpdate(() => {
|
||||
state.itemRefs = []
|
||||
state.previewImgs = []
|
||||
})
|
||||
})
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => state.localIndex,
|
||||
(newVal) => {
|
||||
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
|
||||
GM.$setCss(
|
||||
wrapperEl.value,
|
||||
'transform',
|
||||
`translate3d(${getSlideDistance(state, SlideType.HORIZONTAL)}px, 0, 0)`,
|
||||
)
|
||||
},
|
||||
`translate3d(${getSlideDistance(state, SlideType.HORIZONTAL)}px, 0, 0)`
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => state.operationStatus,
|
||||
(newVal) => {
|
||||
if (newVal !== SlideAlbumOperationStatus.Normal) {
|
||||
@ -393,10 +366,10 @@
|
||||
} else {
|
||||
bus.emit(EVENT_KEY.EXIT_FULLSCREEN)
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
function calcCurrentIndex(e) {
|
||||
function calcCurrentIndex(e) {
|
||||
state.isPreview = true
|
||||
let x = e.touches[0].pageX
|
||||
|
||||
@ -412,23 +385,23 @@
|
||||
if (current > -1) {
|
||||
state.localIndex = current
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function progressBarTouchStart(e) {
|
||||
function progressBarTouchStart(e) {
|
||||
Utils.$stopPropagation(e)
|
||||
}
|
||||
}
|
||||
|
||||
function progressBarTouchMove(e) {
|
||||
function progressBarTouchMove(e) {
|
||||
Utils.$stopPropagation(e)
|
||||
calcCurrentIndex(e)
|
||||
}
|
||||
}
|
||||
|
||||
function progressBarTouchMEnd(e) {
|
||||
function progressBarTouchMEnd(e) {
|
||||
Utils.$stopPropagation(e)
|
||||
state.isPreview = false
|
||||
}
|
||||
}
|
||||
|
||||
function touchStart(e) {
|
||||
function touchStart(e) {
|
||||
lockDatetime = Date.now()
|
||||
|
||||
// Utils.$showNoticeDialog('start'+e.touches.length)
|
||||
@ -444,20 +417,17 @@
|
||||
state.itemRefs[state.localIndex].style['transition-duration'] = '0ms'
|
||||
state.last.point1 = state.start.point1 = {
|
||||
x: e.touches[0].pageX,
|
||||
y: e.touches[0].pageY,
|
||||
y: e.touches[0].pageY
|
||||
}
|
||||
state.last.point2 = state.start.point2 = {
|
||||
x: e.touches[1].pageX,
|
||||
y: e.touches[1].pageY,
|
||||
}
|
||||
state.start.center = Utils.getCenter(
|
||||
state.start.point1,
|
||||
state.start.point2,
|
||||
)
|
||||
y: e.touches[1].pageY
|
||||
}
|
||||
state.start.center = Utils.getCenter(state.start.point1, state.start.point2)
|
||||
}
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
function touchMove(e) {
|
||||
// Utils.$showNoticeDialog('move'+e.touches.length)
|
||||
// console.log('move', e.touches.length, state.operationStatus)
|
||||
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 movementY = current1.y - state.last.point1.y
|
||||
// console.log(movementX, movementY)
|
||||
const t = new Float32Array([
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
movementX,
|
||||
movementY,
|
||||
0,
|
||||
1,
|
||||
])
|
||||
const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1])
|
||||
ov = mat4.multiply(out, t, ov)
|
||||
state.itemRefs[state.localIndex].style.transform =
|
||||
`matrix3d(${ov.toString()})`
|
||||
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`
|
||||
state.last.point1 = current1
|
||||
} else {
|
||||
// console.log('m2')
|
||||
@ -519,7 +471,7 @@
|
||||
if (state.operationStatus !== SlideAlbumOperationStatus.Normal) {
|
||||
Utils.$stopPropagation(e)
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
} else {
|
||||
@ -554,24 +506,7 @@
|
||||
|
||||
let minX = Math.min(movementX, movement2X)
|
||||
let minY = Math.min(movementY, movement2Y)
|
||||
const t1 = new Float32Array([
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
minX,
|
||||
minY,
|
||||
0,
|
||||
1,
|
||||
])
|
||||
const t1 = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, minX, minY, 0, 1])
|
||||
ov = mat4.multiply(out, t1, ov)
|
||||
} else {
|
||||
let center = Utils.getCenter(current1, current2)
|
||||
@ -581,37 +516,19 @@
|
||||
let zoom = currentRatio / ov[0]
|
||||
const x = center.x * (1 - zoom)
|
||||
const y = center.y * (1 - zoom)
|
||||
const t = new Float32Array([
|
||||
zoom,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
zoom,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
x,
|
||||
y,
|
||||
0,
|
||||
1,
|
||||
])
|
||||
const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1])
|
||||
//如果zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵）
|
||||
//如果zoom是累加放大（比如每次都是0.15），第三个参数用ov。这里还是采用累加计算
|
||||
ov = mat4.multiply(out, t, ov)
|
||||
}
|
||||
|
||||
state.itemRefs[state.localIndex].style.transform =
|
||||
`matrix3d(${ov.toString()})`
|
||||
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`
|
||||
state.last.point1 = current1
|
||||
state.last.point2 = current2
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
function touchEnd(e) {
|
||||
// console.log('Date.now() - lockDatetime', Date.now() - lockDatetime,)
|
||||
if (
|
||||
Date.now() - lockDatetime < 300 &&
|
||||
@ -645,8 +562,7 @@
|
||||
Utils.$stopPropagation(e)
|
||||
ov = origin
|
||||
state.itemRefs[state.localIndex].style['transition-duration'] = '300ms'
|
||||
state.itemRefs[state.localIndex].style.transform =
|
||||
`matrix3d(${origin.toString()})`
|
||||
state.itemRefs[state.localIndex].style.transform = `matrix3d(${origin.toString()})`
|
||||
startLoop()
|
||||
state.operationStatus = SlideAlbumOperationStatus.Look
|
||||
} else {
|
||||
@ -663,32 +579,32 @@
|
||||
}
|
||||
console.log('doNotNextCb')
|
||||
startLoop()
|
||||
},
|
||||
}
|
||||
)
|
||||
slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, null)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getWidth(index) {
|
||||
function getWidth(index) {
|
||||
if (state.localIndex >= index) return { width: '100%' }
|
||||
}
|
||||
}
|
||||
|
||||
function setItemRef(el, key) {
|
||||
function setItemRef(el, key) {
|
||||
el && state[key].push(el)
|
||||
}
|
||||
}
|
||||
|
||||
function canNext(isNext, e) {
|
||||
function canNext(isNext, e) {
|
||||
let res = !(
|
||||
(state.localIndex === 0 && !isNext) ||
|
||||
(state.localIndex === props.item.imgs.length - 1 && isNext)
|
||||
)
|
||||
return res
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#SlideAlbum {
|
||||
#SlideAlbum {
|
||||
transition: height 0.3s;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -756,10 +672,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.preview {
|
||||
.preview {
|
||||
transition: opacity 0.3s;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@ -800,9 +716,9 @@
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.album-toolbar {
|
||||
.album-toolbar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
@ -835,5 +751,5 @@
|
||||
align-items: center;
|
||||
gap: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,49 +1,49 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
|
||||
import GM from '../../utils'
|
||||
import {
|
||||
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
|
||||
import GM from '../../utils'
|
||||
import {
|
||||
getSlideDistance,
|
||||
slideInit,
|
||||
slideReset,
|
||||
slideTouchEnd,
|
||||
slideTouchMove,
|
||||
slideTouchStart,
|
||||
} from './common'
|
||||
import { SlideType } from '@/utils/const_var'
|
||||
slideTouchStart
|
||||
} from './common'
|
||||
import { SlideType } from '@/utils/const_var'
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return 0
|
||||
},
|
||||
}
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
default: () => ''
|
||||
},
|
||||
//改变index，是否使用动画
|
||||
changeActiveIndexUseAnim: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:index'])
|
||||
default: true
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:index'])
|
||||
|
||||
let ob = null
|
||||
const judgeValue = 20
|
||||
const wrapperEl = ref(null)
|
||||
const state = reactive({
|
||||
let ob = null
|
||||
const judgeValue = 20
|
||||
const wrapperEl = ref(null)
|
||||
const state = reactive({
|
||||
name: props.name,
|
||||
localIndex: props.index,
|
||||
needCheck: true,
|
||||
next: false,
|
||||
start: { x: 0, y: 0, time: 0 },
|
||||
move: { x: 0, y: 0 },
|
||||
wrapper: { width: 0, height: 0, childrenLength: 0 },
|
||||
})
|
||||
wrapper: { width: 0, height: 0, childrenLength: 0 }
|
||||
})
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => props.index,
|
||||
(newVal) => {
|
||||
if (state.localIndex !== newVal) {
|
||||
@ -54,52 +54,44 @@
|
||||
GM.$setCss(
|
||||
wrapperEl.value,
|
||||
'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)
|
||||
|
||||
ob = new MutationObserver(() => {
|
||||
state.wrapper.childrenLength = wrapperEl.value.children.length
|
||||
})
|
||||
ob.observe(wrapperEl.value, { childList: true })
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
onUnmounted(() => {
|
||||
ob.disconnect()
|
||||
})
|
||||
})
|
||||
|
||||
function touchStart(e) {
|
||||
function touchStart(e) {
|
||||
slideTouchStart(e, wrapperEl.value, state)
|
||||
}
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
slideTouchMove(
|
||||
e,
|
||||
wrapperEl.value,
|
||||
state,
|
||||
judgeValue,
|
||||
canNext,
|
||||
null,
|
||||
SlideType.HORIZONTAL,
|
||||
)
|
||||
}
|
||||
function touchMove(e) {
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.HORIZONTAL)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
function touchEnd(e) {
|
||||
slideTouchEnd(e, state, canNext, () => {})
|
||||
slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, emit)
|
||||
}
|
||||
}
|
||||
|
||||
function canNext(isNext) {
|
||||
function canNext(isNext) {
|
||||
return !(
|
||||
(state.localIndex === 0 && !isNext) ||
|
||||
(state.localIndex === state.wrapper.childrenLength - 1 && isNext)
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -7,10 +7,10 @@
|
||||
<script setup></script>
|
||||
|
||||
<style lang="less">
|
||||
.slide-item {
|
||||
.slide-item {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
<template>
|
||||
<div id="base-slide-wrapper" ref="slideWrapper">
|
||||
<div
|
||||
class="indicator-bullets"
|
||||
v-if="indicatorType === 'bullets' && slideItems.length"
|
||||
>
|
||||
<div class="indicator-bullets" v-if="indicatorType === 'bullets' && slideItems.length">
|
||||
<div
|
||||
class="bullet"
|
||||
:class="{ active: currentSlideItemIndex === item - 1 }"
|
||||
@ -25,27 +22,27 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '../../utils/bus'
|
||||
import Loading from '../Loading'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import bus from '../../utils/bus'
|
||||
import Loading from '../Loading'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'BaseSlideList',
|
||||
components: {
|
||||
Loading,
|
||||
Loading
|
||||
},
|
||||
props: {
|
||||
canMove: {
|
||||
type: Boolean,
|
||||
default: () => true,
|
||||
default: () => true
|
||||
},
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
default: () => false
|
||||
},
|
||||
indicatorType: {
|
||||
type: String,
|
||||
default: '',
|
||||
default: ''
|
||||
//bullets
|
||||
//fraction
|
||||
//progressbar
|
||||
@ -53,16 +50,16 @@
|
||||
},
|
||||
useHomeLoading: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
default: () => false
|
||||
},
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
default: () => 0
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
default: () => ''
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const baseStore = useBaseStore()
|
||||
@ -77,7 +74,7 @@
|
||||
return {
|
||||
opacity: 1 - this.homeLoadingMoveYDistance / 20,
|
||||
'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() {
|
||||
@ -85,7 +82,7 @@
|
||||
return {
|
||||
opacity: this.homeLoadingMoveYDistance / 60,
|
||||
'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() {
|
||||
@ -93,17 +90,17 @@
|
||||
if (this.loading) {
|
||||
return {
|
||||
opacity: 1,
|
||||
'transition-duration': '300ms',
|
||||
'transition-duration': '300ms'
|
||||
}
|
||||
}
|
||||
if (this.homeLoadingMoveYDistance !== 0) {
|
||||
return {
|
||||
opacity: this.homeLoadingMoveYDistance / 60,
|
||||
'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() {
|
||||
return {
|
||||
@ -133,14 +130,14 @@
|
||||
tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left,
|
||||
indicatorSpace: 0, //indicator之间的间距
|
||||
toolbarStyleTransitionDuration: 0,
|
||||
homeLoadingMoveYDistance: 0, //homeLoading专用的MoveYDistance，因为MoveYDistance是一直更新的，左右划的时候也在更新，会造成
|
||||
homeLoadingMoveYDistance: 0 //homeLoading专用的MoveYDistance，因为MoveYDistance是一直更新的，左右划的时候也在更新，会造成
|
||||
//在往左划，但上面的toolbar开始往下移了，所以需要用一个专用的值来有条件的保存MoveYDistance，即只direction = row的时候
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeIndex() {
|
||||
this.changeIndex()
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted: async function () {
|
||||
await this.checkChildren(true)
|
||||
@ -165,15 +162,13 @@
|
||||
this.$setCss(
|
||||
this.slideList,
|
||||
'transform',
|
||||
`translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`,
|
||||
`translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`
|
||||
)
|
||||
if (this.isHome) {
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
}
|
||||
this.$attrs['onUpdate:activeIndex'] &&
|
||||
@ -189,21 +184,18 @@
|
||||
this.tabIndicatorRelationActiveIndexLefts.push(
|
||||
item.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)
|
||||
this.indicatorSpace =
|
||||
this.tabIndicatorRelationActiveIndexLefts[1] -
|
||||
this.tabIndicatorRelationActiveIndexLefts[0]
|
||||
this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
|
||||
if (this.isHome) {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
}
|
||||
},
|
||||
@ -219,8 +211,7 @@
|
||||
},
|
||||
touchStart(e) {
|
||||
this.$setCss(this.slideList, 'transition-duration', `0ms`)
|
||||
this.isHome &&
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.isHome && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.toolbarStyleTransitionDuration = 0
|
||||
|
||||
this.startLocationX = e.touches[0].pageX
|
||||
@ -241,22 +232,17 @@
|
||||
//多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移，
|
||||
//slideitem同时在左右移的情况，所以不能直接使用moveYDistance
|
||||
if (this.isCanDownWiping && this.isHome && !this.loading) {
|
||||
this.homeLoadingMoveYDistance =
|
||||
this.moveYDistance > 0 ? this.moveYDistance : 0
|
||||
this.homeLoadingMoveYDistance = this.moveYDistance > 0 ? this.moveYDistance : 0
|
||||
}
|
||||
|
||||
if (this.isCanRightWiping) {
|
||||
// //禁止在index=0页面的时候，向左划
|
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return
|
||||
//禁止在最后页面的时候，向右划
|
||||
if (
|
||||
this.currentSlideItemIndex === this.slideItems.length - 1 &&
|
||||
this.isDrawRight
|
||||
)
|
||||
return
|
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
|
||||
|
||||
bus.emit(this.name + '-moved', {
|
||||
x: { distance: this.moveXDistance, isDrawRight: this.isDrawRight },
|
||||
x: { distance: this.moveXDistance, isDrawRight: this.isDrawRight }
|
||||
})
|
||||
|
||||
this.$stopPropagation(e)
|
||||
@ -267,19 +253,16 @@
|
||||
-this.getWidth(this.currentSlideItemIndex) +
|
||||
this.moveXDistance +
|
||||
(this.isDrawRight ? this.judgeValue : -this.judgeValue)
|
||||
}px, 0px, 0px)`,
|
||||
}px, 0px, 0px)`
|
||||
)
|
||||
|
||||
this.isHome &&
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] -
|
||||
this.moveXDistance /
|
||||
(this.baseStore.bodyWidth / this.indicatorSpace) +
|
||||
'px',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
|
||||
this.moveXDistance / (this.baseStore.bodyWidth / this.indicatorSpace) +
|
||||
'px'
|
||||
)
|
||||
}
|
||||
},
|
||||
@ -294,15 +277,10 @@
|
||||
|
||||
if (this.isCanRightWiping) {
|
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return
|
||||
if (
|
||||
this.currentSlideItemIndex === this.slideItems.length - 1 &&
|
||||
this.isDrawRight
|
||||
)
|
||||
return
|
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
|
||||
|
||||
this.$setCss(this.slideList, 'transition-duration', `300ms`)
|
||||
this.isHome &&
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.isHome && this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
let endTime = Date.now()
|
||||
let gapTime = endTime - this.startTime
|
||||
|
||||
@ -313,8 +291,7 @@
|
||||
this.$stopPropagation(e)
|
||||
}
|
||||
if (Math.abs(this.moveXDistance) < 20) gapTime = 1000
|
||||
if (Math.abs(this.moveXDistance) > this.wrapperWidth / 3)
|
||||
gapTime = 100
|
||||
if (Math.abs(this.moveXDistance) > this.wrapperWidth / 3) gapTime = 100
|
||||
if (gapTime < 150) {
|
||||
if (this.isDrawRight) {
|
||||
this.currentSlideItemIndex += 1
|
||||
@ -325,15 +302,13 @@
|
||||
this.$setCss(
|
||||
this.slideList,
|
||||
'transform',
|
||||
`translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`,
|
||||
`translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`
|
||||
)
|
||||
if (this.isHome) {
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -374,9 +349,7 @@
|
||||
Math.abs(this.moveXDistance) > this.judgeValue ||
|
||||
Math.abs(this.moveYDistance) > this.judgeValue
|
||||
) {
|
||||
let angle =
|
||||
(Math.abs(this.moveXDistance) * 10) /
|
||||
(Math.abs(this.moveYDistance) * 10)
|
||||
let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
|
||||
if (angle > 1) {
|
||||
this.isCanDownWiping = false
|
||||
this.isCanRightWiping = true
|
||||
@ -390,15 +363,15 @@
|
||||
return (this.isNeedCheck = false)
|
||||
}
|
||||
return (this.isNeedCheck = true)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
#base-slide-wrapper {
|
||||
#base-slide-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@ -433,5 +406,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -36,15 +36,15 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Posters from '../Posters'
|
||||
import globalMethods from '../../utils'
|
||||
import BaseButton from '../BaseButton'
|
||||
import Posters from '../Posters'
|
||||
import globalMethods from '../../utils'
|
||||
import BaseButton from '../BaseButton'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'SlideUser',
|
||||
components: {
|
||||
Posters,
|
||||
BaseButton,
|
||||
BaseButton
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
@ -53,10 +53,7 @@
|
||||
return {
|
||||
type: 'user',
|
||||
id: '224e9a00-ffa0-4bc1-bb07-c318c7b02fa5',
|
||||
avatar: new URL(
|
||||
'../../assets/img/icon/avatar/1.png',
|
||||
import.meta.url,
|
||||
).href,
|
||||
avatar: new URL('../../assets/img/icon/avatar/1.png', import.meta.url).href,
|
||||
name: '何以为家',
|
||||
realName: '王小二',
|
||||
sex: '',
|
||||
@ -112,15 +109,15 @@
|
||||
name: '抖音电影',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 'c10178eb-441f-4dc7-93b6-eaae1b6248cc',
|
||||
name: '我的观影报告',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
},
|
||||
status: 1
|
||||
}
|
||||
],
|
||||
music: {
|
||||
id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21',
|
||||
@ -130,8 +127,8 @@
|
||||
title: '@喵嗷污说电影创作的原声',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
},
|
||||
status: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '1f6871da-73ab-40cc-9481-37ad83b63bde',
|
||||
@ -172,8 +169,8 @@
|
||||
name: '我的观影报告',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
},
|
||||
status: 1
|
||||
}
|
||||
],
|
||||
music: {
|
||||
id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21',
|
||||
@ -183,8 +180,8 @@
|
||||
title: '@喵嗷污说电影创作的原声',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
},
|
||||
status: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'f7657f21-5fee-4f1f-9d88-ec8411ea009b',
|
||||
@ -225,8 +222,8 @@
|
||||
name: '我的观影报告',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
},
|
||||
status: 1
|
||||
}
|
||||
],
|
||||
music: {
|
||||
id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21',
|
||||
@ -236,17 +233,17 @@
|
||||
title: '@喵嗷污说电影创作的原声',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
status: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
globalMethods,
|
||||
globalMethods
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -254,13 +251,13 @@
|
||||
created() {
|
||||
console.log('modelValue', this.modelValue)
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@p: 15rem;
|
||||
#SlideUser {
|
||||
@p: 15rem;
|
||||
#SlideUser {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//background: #e1e1e1;
|
||||
@ -380,5 +377,5 @@
|
||||
width: 48%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,44 +1,44 @@
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue'
|
||||
import GM from '../../utils'
|
||||
import {
|
||||
import { onMounted, reactive, ref, watch } from 'vue'
|
||||
import GM from '../../utils'
|
||||
import {
|
||||
getSlideDistance,
|
||||
slideInit,
|
||||
slideReset,
|
||||
slideTouchEnd,
|
||||
slideTouchMove,
|
||||
slideTouchStart,
|
||||
} from './common'
|
||||
import { SlideType } from '@/utils/const_var'
|
||||
slideTouchStart
|
||||
} from './common'
|
||||
import { SlideType } from '@/utils/const_var'
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return 0
|
||||
},
|
||||
}
|
||||
},
|
||||
//改变index，是否使用动画
|
||||
changeActiveIndexUseAnim: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:index'])
|
||||
default: true
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:index'])
|
||||
|
||||
const judgeValue = 20
|
||||
const wrapperEl = ref(null)
|
||||
const state = reactive({
|
||||
const judgeValue = 20
|
||||
const wrapperEl = ref(null)
|
||||
const state = reactive({
|
||||
name: 'SlideVertical',
|
||||
localIndex: props.index,
|
||||
needCheck: true,
|
||||
next: false,
|
||||
start: { x: 0, y: 0, time: 0 },
|
||||
move: { x: 0, y: 0 },
|
||||
wrapper: { width: 0, height: 0, childrenLength: 0 },
|
||||
})
|
||||
wrapper: { width: 0, height: 0, childrenLength: 0 }
|
||||
})
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => props.index,
|
||||
(newVal) => {
|
||||
if (state.localIndex !== newVal) {
|
||||
@ -49,43 +49,35 @@
|
||||
GM.$setCss(
|
||||
wrapperEl.value,
|
||||
'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)
|
||||
})
|
||||
})
|
||||
|
||||
function touchStart(e) {
|
||||
function touchStart(e) {
|
||||
slideTouchStart(e, wrapperEl.value, state)
|
||||
}
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
slideTouchMove(
|
||||
e,
|
||||
wrapperEl.value,
|
||||
state,
|
||||
judgeValue,
|
||||
canNext,
|
||||
null,
|
||||
SlideType.VERTICAL,
|
||||
)
|
||||
}
|
||||
function touchMove(e) {
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.VERTICAL)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
function touchEnd(e) {
|
||||
slideTouchEnd(e, state, canNext, null, null, SlideType.VERTICAL)
|
||||
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
|
||||
}
|
||||
}
|
||||
|
||||
function canNext(isNext) {
|
||||
function canNext(isNext) {
|
||||
return !(
|
||||
(state.localIndex === 0 && !isNext) ||
|
||||
(state.localIndex === state.wrapper.childrenLength - 1 && isNext)
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -1,77 +1,77 @@
|
||||
<script setup lang="jsx">
|
||||
import { createApp, onMounted, reactive, ref, render, watch } from 'vue'
|
||||
import GM from '../../utils'
|
||||
import {
|
||||
import { createApp, onMounted, reactive, ref, render, watch } from 'vue'
|
||||
import GM from '../../utils'
|
||||
import {
|
||||
getSlideDistance,
|
||||
slideInit,
|
||||
slideReset,
|
||||
slideTouchEnd,
|
||||
slideTouchMove,
|
||||
slideTouchStart,
|
||||
} from './common'
|
||||
import { SlideType } from '@/utils/const_var'
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import bus, { EVENT_KEY } from '../../utils/bus'
|
||||
import Loading from '@/components/Loading.vue'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
slideTouchStart
|
||||
} from './common'
|
||||
import { SlideType } from '@/utils/const_var'
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import bus, { EVENT_KEY } from '../../utils/bus'
|
||||
import Loading from '@/components/Loading.vue'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return -1
|
||||
},
|
||||
}
|
||||
},
|
||||
render: {
|
||||
type: Function,
|
||||
default: () => {
|
||||
return null
|
||||
},
|
||||
}
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
}
|
||||
},
|
||||
virtualTotal: {
|
||||
type: Number,
|
||||
default: () => 5,
|
||||
default: () => 5
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
default: () => ''
|
||||
},
|
||||
uniqueId: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
default: () => ''
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
default: () => false
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:index', 'loadMore', 'refresh'])
|
||||
default: () => false
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:index', 'loadMore', 'refresh'])
|
||||
|
||||
const appInsMap = new Map()
|
||||
const itemClassName = 'slide-item'
|
||||
const wrapperEl = ref(null)
|
||||
const state = reactive({
|
||||
const appInsMap = new Map()
|
||||
const itemClassName = 'slide-item'
|
||||
const wrapperEl = ref(null)
|
||||
const state = reactive({
|
||||
name: props.name,
|
||||
localIndex: props.index,
|
||||
needCheck: true,
|
||||
next: false,
|
||||
start: { x: 0, y: 0, time: 0 },
|
||||
move: { x: 0, y: 0 },
|
||||
wrapper: { width: 0, height: 0, childrenLength: 0 },
|
||||
})
|
||||
const baseStore = useBaseStore()
|
||||
wrapper: { width: 0, height: 0, childrenLength: 0 }
|
||||
})
|
||||
const baseStore = useBaseStore()
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => props.list,
|
||||
(newVal, oldVal) => {
|
||||
// console.log('watch-list', newVal.length, oldVal.length, newVal)
|
||||
@ -98,10 +98,10 @@
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => props.index,
|
||||
(newVal, oldVal) => {
|
||||
state.localIndex = newVal
|
||||
@ -111,19 +111,19 @@
|
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
|
||||
uniqueId: props.uniqueId,
|
||||
index: newVal,
|
||||
type: EVENT_KEY.ITEM_PLAY,
|
||||
type: EVENT_KEY.ITEM_PLAY
|
||||
})
|
||||
setTimeout(() => {
|
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
|
||||
uniqueId: props.uniqueId,
|
||||
index: oldVal,
|
||||
type: EVENT_KEY.ITEM_STOP,
|
||||
type: EVENT_KEY.ITEM_STOP
|
||||
})
|
||||
}, 200)
|
||||
},
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => props.active,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal && !props.list.length) {
|
||||
@ -136,18 +136,18 @@
|
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
|
||||
uniqueId: props.uniqueId,
|
||||
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)
|
||||
insertContent()
|
||||
})
|
||||
})
|
||||
|
||||
function insertContent(list = props.list) {
|
||||
function insertContent(list = props.list) {
|
||||
if (!list.length) return
|
||||
$(wrapperEl.value).empty()
|
||||
let half = (props.virtualTotal - 1) / 2
|
||||
@ -170,7 +170,7 @@
|
||||
GM.$setCss(
|
||||
wrapperEl.value,
|
||||
'transform',
|
||||
`translate3d(0px,${getSlideDistance(state, SlideType.VERTICAL)}px, 0px)`,
|
||||
`translate3d(0px,${getSlideDistance(state, SlideType.VERTICAL)}px, 0px)`
|
||||
)
|
||||
|
||||
if (state.localIndex > 2 && list.length > 5) {
|
||||
@ -187,20 +187,18 @@
|
||||
state.wrapper.childrenLength = wrapperEl.value.children.length
|
||||
// console.log('list[state.localIndex]',list[state.localIndex])
|
||||
bus.emit(EVENT_KEY.CURRENT_ITEM, list[state.localIndex])
|
||||
}
|
||||
}
|
||||
|
||||
function dislike(item) {
|
||||
let currentItem = $(wrapperEl.value).find(
|
||||
`.${itemClassName}[data-index=${state.localIndex}]`,
|
||||
)
|
||||
function dislike(item) {
|
||||
let currentItem = $(wrapperEl.value).find(`.${itemClassName}[data-index=${state.localIndex}]`)
|
||||
let replaceItem = getInsEl(item, state.localIndex, true)
|
||||
$(replaceItem).css('top', currentItem.css('top'))
|
||||
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)
|
||||
let slideVNode = props.render(item, index, play, props.uniqueId)
|
||||
const parent = document.createElement('div')
|
||||
@ -213,39 +211,31 @@
|
||||
unmount: () => {
|
||||
render(null, parent)
|
||||
parent.remove()
|
||||
},
|
||||
}
|
||||
})
|
||||
return parent
|
||||
} else {
|
||||
const app = createApp({
|
||||
render() {
|
||||
return <SlideItem data-index={index}>{slideVNode}</SlideItem>
|
||||
},
|
||||
}
|
||||
})
|
||||
const ins = app.mount(parent)
|
||||
appInsMap.set(index, app)
|
||||
return ins.$el
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function touchStart(e) {
|
||||
function touchStart(e) {
|
||||
slideTouchStart(e, wrapperEl.value, state)
|
||||
}
|
||||
}
|
||||
|
||||
//TODO 2022-3-28:在最顶部，反复滑动会抖动一下，初步猜测是因为方向变了，导致的加判断距离变成了减
|
||||
function touchMove(e) {
|
||||
slideTouchMove(
|
||||
e,
|
||||
wrapperEl.value,
|
||||
state,
|
||||
baseStore.judgeValue,
|
||||
canNext,
|
||||
null,
|
||||
SlideType.VERTICAL,
|
||||
)
|
||||
}
|
||||
//TODO 2022-3-28:在最顶部，反复滑动会抖动一下，初步猜测是因为方向变了，导致的加判断距离变成了减
|
||||
function touchMove(e) {
|
||||
slideTouchMove(e, wrapperEl.value, state, baseStore.judgeValue, canNext, null, SlideType.VERTICAL)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
function touchEnd(e) {
|
||||
let isNext = state.move.y < 0
|
||||
if (
|
||||
state.localIndex === 0 &&
|
||||
@ -269,14 +259,10 @@
|
||||
emit('loadMore')
|
||||
}
|
||||
let addItemIndex = state.localIndex + 2
|
||||
let res = $(wrapperEl.value).find(
|
||||
`.${itemClassName}[data-index=${addItemIndex}]`,
|
||||
)
|
||||
let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
|
||||
if (state.wrapper.childrenLength < props.virtualTotal) {
|
||||
if (res.length === 0) {
|
||||
wrapperEl.value.appendChild(
|
||||
getInsEl(props.list[addItemIndex], addItemIndex),
|
||||
)
|
||||
wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
|
||||
}
|
||||
}
|
||||
if (
|
||||
@ -285,24 +271,15 @@
|
||||
state.localIndex <= props.list.length - 3
|
||||
) {
|
||||
if (res.length === 0) {
|
||||
wrapperEl.value.appendChild(
|
||||
getInsEl(props.list[addItemIndex], addItemIndex),
|
||||
)
|
||||
wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
|
||||
appInsMap
|
||||
.get(
|
||||
$(wrapperEl.value)
|
||||
.find(`.${itemClassName}:first`)
|
||||
.data('index'),
|
||||
)
|
||||
.get($(wrapperEl.value).find(`.${itemClassName}:first`).data('index'))
|
||||
.unmount()
|
||||
// $(wrapperEl.value).find(".base-slide-item:first").remove()
|
||||
$(wrapperEl.value)
|
||||
.find(`.${itemClassName}`)
|
||||
.each(function () {
|
||||
$(this).css(
|
||||
'top',
|
||||
(state.localIndex - 2) * state.wrapper.height,
|
||||
)
|
||||
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -314,70 +291,47 @@
|
||||
if (index < state.localIndex - 2) {
|
||||
appInsMap.get(index).unmount()
|
||||
}
|
||||
$(this).css(
|
||||
'top',
|
||||
(state.localIndex - 2) * state.wrapper.height,
|
||||
)
|
||||
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
let addItemIndex = state.localIndex - 2
|
||||
let res = $(wrapperEl.value).find(
|
||||
`.${itemClassName}[data-index=${addItemIndex}]`,
|
||||
)
|
||||
let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
|
||||
|
||||
if (
|
||||
state.localIndex > 1 &&
|
||||
state.localIndex <= props.list.length - 4
|
||||
) {
|
||||
if (state.localIndex > 1 && state.localIndex <= props.list.length - 4) {
|
||||
if (res.length === 0) {
|
||||
wrapperEl.value.prepend(
|
||||
getInsEl(props.list[addItemIndex], addItemIndex),
|
||||
)
|
||||
wrapperEl.value.prepend(getInsEl(props.list[addItemIndex], addItemIndex))
|
||||
appInsMap
|
||||
.get(
|
||||
$(wrapperEl.value)
|
||||
.find(`.${itemClassName}:last`)
|
||||
.data('index'),
|
||||
)
|
||||
.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index'))
|
||||
.unmount()
|
||||
// $(wrapperEl.value).find(".base-slide-item:last").remove()
|
||||
$(wrapperEl.value)
|
||||
.find(`.${itemClassName}`)
|
||||
.each(function () {
|
||||
$(this).css(
|
||||
'top',
|
||||
(state.localIndex - 2) * state.wrapper.height,
|
||||
)
|
||||
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (state.wrapper.childrenLength > props.virtualTotal) {
|
||||
appInsMap
|
||||
.get(
|
||||
$(wrapperEl.value)
|
||||
.find(`.${itemClassName}:last`)
|
||||
.data('index'),
|
||||
)
|
||||
.unmount()
|
||||
appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount()
|
||||
}
|
||||
}
|
||||
state.wrapper.childrenLength = wrapperEl.value.children.length
|
||||
}
|
||||
},
|
||||
null,
|
||||
SlideType.VERTICAL,
|
||||
SlideType.VERTICAL
|
||||
)
|
||||
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
|
||||
}
|
||||
}
|
||||
|
||||
function canNext(isNext) {
|
||||
function canNext(isNext) {
|
||||
return !(
|
||||
(state.localIndex === 0 && !isNext) ||
|
||||
(state.localIndex === props.list.length - 1 && isNext)
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -29,10 +29,7 @@ export function slideTouchStart(e, el, state) {
|
||||
//检测能否滑动
|
||||
export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
|
||||
if (state.needCheck) {
|
||||
if (
|
||||
Math.abs(state.move.x) > judgeValue ||
|
||||
Math.abs(state.move.y) > judgeValue
|
||||
) {
|
||||
if (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)
|
||||
state.next = type === SlideType.HORIZONTAL ? angle > 1 : angle <= 1
|
||||
// console.log('angle', angle, state.next)
|
||||
@ -56,22 +53,16 @@ export function slideTouchMove(
|
||||
nextCb,
|
||||
type = SlideType.HORIZONTAL,
|
||||
notNextCb,
|
||||
slideOtherDirectionCb = null,
|
||||
slideOtherDirectionCb = null
|
||||
) {
|
||||
state.move.x = e.touches[0].pageX - state.start.x
|
||||
state.move.y = e.touches[0].pageY - state.start.y
|
||||
|
||||
let isNext =
|
||||
type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
|
||||
let isNext = type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
|
||||
|
||||
let canSlideRes = canSlide(state, judgeValue, type)
|
||||
|
||||
if (
|
||||
canSlideRes &&
|
||||
state.localIndex === 0 &&
|
||||
!isNext &&
|
||||
type === SlideType.VERTICAL
|
||||
) {
|
||||
if (canSlideRes && state.localIndex === 0 && !isNext && type === SlideType.VERTICAL) {
|
||||
bus.emit(state.name + '-moveY', state.move.y)
|
||||
}
|
||||
|
||||
@ -82,8 +73,7 @@ export function slideTouchMove(
|
||||
bus.emit(state.name + '-moveX', state.move.x)
|
||||
}
|
||||
Utils.$stopPropagation(e)
|
||||
let t =
|
||||
getSlideDistance(state, type, el) + (isNext ? judgeValue : -judgeValue)
|
||||
let t = getSlideDistance(state, type, el) + (isNext ? judgeValue : -judgeValue)
|
||||
let dx1 = 0
|
||||
let dx2 = 0
|
||||
if (type === SlideType.HORIZONTAL) {
|
||||
@ -107,7 +97,7 @@ export function slideTouchEnd(
|
||||
canNextCb,
|
||||
nextCb,
|
||||
doNotNextCb,
|
||||
type = SlideType.HORIZONTAL,
|
||||
type = SlideType.HORIZONTAL
|
||||
) {
|
||||
let isHorizontal = type === SlideType.HORIZONTAL
|
||||
let isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0
|
||||
@ -146,12 +136,7 @@ export function slideReset(el, state, type, emit) {
|
||||
dx2 = t
|
||||
}
|
||||
Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
|
||||
state.start.x =
|
||||
state.start.y =
|
||||
state.start.time =
|
||||
state.move.x =
|
||||
state.move.y =
|
||||
0
|
||||
state.start.x = state.start.y = state.start.time = state.move.x = state.move.y = 0
|
||||
state.next = false
|
||||
state.needCheck = true
|
||||
emit?.('update:index', state.localIndex)
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
export default {
|
||||
baseUrl: 'https://dy.ttentau.top/imgs/',
|
||||
imgPath: '/imgs/',
|
||||
filePreview: 'http://192.168.0.103/static/uploads/',
|
||||
filePreview: 'http://192.168.0.103/static/uploads/'
|
||||
}
|
||||
const BASE_URL_MAP = {
|
||||
DEV: '',
|
||||
PROD: '',
|
||||
UNI: 'https://dy.ttentau.top',
|
||||
UNI: 'https://dy.ttentau.top'
|
||||
}
|
||||
|
||||
export const BASE_URL = BASE_URL_MAP[import.meta.env.VITE_ENV]
|
||||
|
||||
@ -18,12 +18,11 @@ app.config.globalProperties.emitter = emitter
|
||||
app.config.unwrapInjectedRef = true
|
||||
app.provide('mitt', emitter)
|
||||
app.mixin(mixin)
|
||||
const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url)
|
||||
.href
|
||||
const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url).href
|
||||
app.use(VueLazyload, {
|
||||
preLoad: 1.3,
|
||||
loading: loadImage,
|
||||
attempt: 1,
|
||||
attempt: 1
|
||||
})
|
||||
app.use(router)
|
||||
app.use(pinia)
|
||||
|
||||
@ -29,23 +29,23 @@ let t = [
|
||||
type: 'imgs',
|
||||
src: `https://imgapi.cn/bing.php`,
|
||||
author: {
|
||||
unique_id: 1,
|
||||
},
|
||||
unique_id: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'user',
|
||||
src: `https://imgapi.cn/bing.php`,
|
||||
author: {
|
||||
unique_id: 2,
|
||||
},
|
||||
unique_id: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'img',
|
||||
src: `https://imgapi.cn/bing.php`,
|
||||
author: {
|
||||
unique_id: 3,
|
||||
},
|
||||
},
|
||||
unique_id: 3
|
||||
}
|
||||
}
|
||||
]
|
||||
// allRecommendVideos.unshift(...t)
|
||||
// {
|
||||
@ -74,9 +74,7 @@ async function fetchData() {
|
||||
}
|
||||
v = v.map((w) => {
|
||||
w.type = 'recommend-video'
|
||||
let item = userList.find(
|
||||
(a) => String(a.uid) === String(w.author_user_id),
|
||||
)
|
||||
let item = userList.find((a) => String(a.uid) === String(w.author_user_id))
|
||||
if (item) w.author = item
|
||||
return w
|
||||
})
|
||||
@ -89,21 +87,17 @@ async function fetchData() {
|
||||
export async function startMock() {
|
||||
mock.onGet(/video\/recommended/).reply(async (config) => {
|
||||
let page = getPage2(config.params)
|
||||
console.log(
|
||||
'allRecommendVideos',
|
||||
cloneDeep(allRecommendVideos.length),
|
||||
page,
|
||||
)
|
||||
console.log('allRecommendVideos', cloneDeep(allRecommendVideos.length), page)
|
||||
return [
|
||||
200,
|
||||
{
|
||||
data: {
|
||||
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,
|
||||
msg: '',
|
||||
},
|
||||
msg: ''
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@ -124,7 +118,7 @@ export async function startMock() {
|
||||
'7295697246132227343',
|
||||
'7270431418822446370',
|
||||
'6882368275695586568',
|
||||
'7000587983069957383',
|
||||
'7000587983069957383'
|
||||
]
|
||||
let id = config.params.id
|
||||
if (!videoIds.includes(String(id))) {
|
||||
@ -145,13 +139,11 @@ export async function startMock() {
|
||||
{
|
||||
data: {
|
||||
total: 10,
|
||||
list: allRecommendVideos
|
||||
.slice(100, 110)
|
||||
.slice(page.offset, page.limit),
|
||||
list: allRecommendVideos.slice(100, 110).slice(page.offset, page.limit)
|
||||
},
|
||||
code: 200,
|
||||
msg: '',
|
||||
},
|
||||
msg: ''
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@ -162,13 +154,11 @@ export async function startMock() {
|
||||
{
|
||||
data: {
|
||||
total: 150,
|
||||
list: allRecommendVideos
|
||||
.slice(200, 350)
|
||||
.slice(page.offset, page.limit),
|
||||
list: allRecommendVideos.slice(200, 350).slice(page.offset, page.limit)
|
||||
},
|
||||
code: 200,
|
||||
msg: '',
|
||||
},
|
||||
msg: ''
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@ -177,18 +167,14 @@ export async function startMock() {
|
||||
if (!userVideos.length) {
|
||||
// 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_video_list/user-12345xiaolaohu.json',
|
||||
)
|
||||
let r = await fetch(BASE_URL + '/data/user_video_list/user-12345xiaolaohu.json')
|
||||
let list = await r.json()
|
||||
const baseStore = useBaseStore()
|
||||
let userList = cloneDeep(baseStore.users)
|
||||
|
||||
userVideos = list.map((w) => {
|
||||
if (userList.length) {
|
||||
let item = userList.find(
|
||||
(a) => String(a.uid) === String(w.author_user_id),
|
||||
)
|
||||
let item = userList.find((a) => String(a.uid) === String(w.author_user_id))
|
||||
if (item) w.author = item
|
||||
}
|
||||
return w
|
||||
@ -201,11 +187,11 @@ export async function startMock() {
|
||||
data: {
|
||||
pageNo: page.pageNo,
|
||||
total: userVideos.length,
|
||||
list: userVideos.slice(page.offset, page.limit),
|
||||
list: userVideos.slice(page.offset, page.limit)
|
||||
},
|
||||
code: 200,
|
||||
msg: '',
|
||||
},
|
||||
msg: ''
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@ -216,13 +202,11 @@ export async function startMock() {
|
||||
{
|
||||
data: {
|
||||
total: 150,
|
||||
list: allRecommendVideos
|
||||
.slice(200, 350)
|
||||
.slice(page.offset, page.limit),
|
||||
list: allRecommendVideos.slice(200, 350).slice(page.offset, page.limit)
|
||||
},
|
||||
code: 200,
|
||||
msg: '',
|
||||
},
|
||||
msg: ''
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@ -233,16 +217,16 @@ export async function startMock() {
|
||||
data: {
|
||||
video: {
|
||||
total: 50,
|
||||
list: allRecommendVideos.slice(350, 400),
|
||||
list: allRecommendVideos.slice(350, 400)
|
||||
},
|
||||
music: {
|
||||
total: resource.music.length,
|
||||
list: resource.music,
|
||||
},
|
||||
list: resource.music
|
||||
}
|
||||
},
|
||||
code: 200,
|
||||
msg: '',
|
||||
},
|
||||
msg: ''
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@ -282,11 +266,11 @@ export async function startMock() {
|
||||
data: {
|
||||
pageNo: page.pageNo,
|
||||
total: 0,
|
||||
list: [],
|
||||
list: []
|
||||
},
|
||||
code: 200,
|
||||
msg: '',
|
||||
},
|
||||
msg: ''
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@ -303,11 +287,11 @@ export async function startMock() {
|
||||
data: {
|
||||
pageNo: page.pageNo,
|
||||
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,
|
||||
msg: '',
|
||||
},
|
||||
msg: ''
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@ -321,10 +305,10 @@ export async function startMock() {
|
||||
{
|
||||
data: {
|
||||
total: v.length,
|
||||
list: v.slice(page.offset, page.limit),
|
||||
},
|
||||
code: 200,
|
||||
list: v.slice(page.offset, page.limit)
|
||||
},
|
||||
code: 200
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mainScrollTop: 0,
|
||||
mainScrollTop: 0
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
@ -13,5 +13,5 @@ export default {
|
||||
if (this.$refs.mainScroll && this.$refs.mainScroll.wrapper) {
|
||||
this.mainScrollTop = this.$refs.mainScroll.wrapper.scrollTop
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,11 +22,7 @@
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<div class="liver">
|
||||
<img
|
||||
class="avatar"
|
||||
:src="_checkImgUrl(userinfo.avatar_168x168.url_list[0])"
|
||||
alt=""
|
||||
/>
|
||||
<img class="avatar" :src="_checkImgUrl(userinfo.avatar_168x168.url_list[0])" alt="" />
|
||||
<div class="desc">
|
||||
<div class="desc-wrapper">
|
||||
<div class="name">{{ userinfo.nickname }}</div>
|
||||
@ -48,40 +44,17 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="follower">
|
||||
<img
|
||||
src="../../assets/img/icon/avatar/1.png"
|
||||
alt=""
|
||||
class="round"
|
||||
/>
|
||||
<img
|
||||
src="../../assets/img/icon/avatar/2.png"
|
||||
alt=""
|
||||
class="round"
|
||||
/>
|
||||
<img
|
||||
src="../../assets/img/icon/avatar/3.png"
|
||||
alt=""
|
||||
class="round"
|
||||
/>
|
||||
<img src="../../assets/img/icon/avatar/1.png" alt="" 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>
|
||||
<dy-back
|
||||
class="round close"
|
||||
img="close"
|
||||
mode="light"
|
||||
@click="$back"
|
||||
/>
|
||||
<dy-back class="round close" img="close" mode="light" @click="$back" />
|
||||
</div>
|
||||
<div class="more">
|
||||
<div class="wrapper">
|
||||
<!-- 缺个icon-->
|
||||
<span>更多同城</span>
|
||||
<dy-back
|
||||
scale=".5"
|
||||
direction="right"
|
||||
class="back"
|
||||
img="back"
|
||||
mode="light"
|
||||
/>
|
||||
<dy-back scale=".5" direction="right" class="back" img="back" mode="light" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -112,46 +85,17 @@
|
||||
<span>说点什么</span>
|
||||
<img src="../../assets/img/icon/home/voice.png" alt="" />
|
||||
</div>
|
||||
<img
|
||||
src="../../assets/img/icon/home/more.png"
|
||||
alt=""
|
||||
class="more"
|
||||
/>
|
||||
<img
|
||||
src="../../assets/img/icon/home/love.webp"
|
||||
alt=""
|
||||
class="more"
|
||||
/>
|
||||
<img
|
||||
src="../../assets/img/icon/home/gift.webp"
|
||||
alt=""
|
||||
class="gift"
|
||||
/>
|
||||
<img src="../../assets/img/icon/home/more.png" alt="" 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 class="right">
|
||||
<div class="avatar-wrapper" :class="{ followed: isFollowed }">
|
||||
<img
|
||||
src="../../assets/img/icon/avatar/2.png"
|
||||
alt=""
|
||||
class="avatar"
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/avatar/2.png" alt="" class="avatar" />
|
||||
<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>
|
||||
<img
|
||||
v-if="isFollowed"
|
||||
@ -167,15 +111,15 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import BaseButton from '../../components/BaseButton'
|
||||
import Dom from '../../utils/dom'
|
||||
import { nextTick } from 'vue'
|
||||
import { mapState } from 'pinia'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { _checkImgUrl, random } from '@/utils'
|
||||
import Mock from 'mockjs'
|
||||
import BaseButton from '../../components/BaseButton'
|
||||
import Dom from '../../utils/dom'
|
||||
import { nextTick } from 'vue'
|
||||
import { mapState } from 'pinia'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { _checkImgUrl, random } from '@/utils'
|
||||
import Mock from 'mockjs'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'LivePage',
|
||||
components: { BaseButton },
|
||||
props: {},
|
||||
@ -222,7 +166,7 @@
|
||||
'/images/KwJ9N7yFjYylfwYeThWjx.png',
|
||||
'/images/EKkC06GI4yXC2mNHMrm46.png',
|
||||
'/images/rlkpmpGPdhYZRJl3J4Xl7.png',
|
||||
'/images/Ge4mMWQoICdpyTyixk3Sf.png',
|
||||
'/images/Ge4mMWQoICdpyTyixk3Sf.png'
|
||||
]
|
||||
let avatar = avatarList[random(0, avatarList.length - 1)]
|
||||
let gift = '/images/icon/love.webp'
|
||||
@ -250,11 +194,11 @@
|
||||
</div>
|
||||
`
|
||||
},
|
||||
page: null,
|
||||
page: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends', 'userinfo']),
|
||||
...mapState(useBaseStore, ['friends', 'userinfo'])
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
@ -325,13 +269,13 @@
|
||||
sendComment() {
|
||||
this.list.push({
|
||||
name: Mock.mock('@cname'),
|
||||
text: Mock.mock('@csentence'),
|
||||
text: Mock.mock('@csentence')
|
||||
})
|
||||
nextTick(() => {
|
||||
let comments = this.$refs['comments']
|
||||
comments.scrollTo({
|
||||
top: comments.scrollHeight - comments.clientHeight,
|
||||
behavior: 'smooth',
|
||||
behavior: 'smooth'
|
||||
})
|
||||
// comments.scrollTop = comments.scrollHeight - comments.clientHeight
|
||||
})
|
||||
@ -342,15 +286,15 @@
|
||||
setTimeout(() => {
|
||||
this.isFollowed = true
|
||||
}, 1000)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.send-gift {
|
||||
.send-gift {
|
||||
position: fixed;
|
||||
top: 63vh;
|
||||
left: 15rem;
|
||||
@ -378,11 +322,7 @@
|
||||
}
|
||||
|
||||
.left {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--primary-btn-color),
|
||||
rgba(252, 47, 86, 0.2)
|
||||
);
|
||||
background: linear-gradient(to right, var(--primary-btn-color), rgba(252, 47, 86, 0.2));
|
||||
padding: 5rem;
|
||||
border-radius: 50rem;
|
||||
display: flex;
|
||||
@ -430,9 +370,9 @@
|
||||
font-weight: bold;
|
||||
font-style: oblique;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.barrage {
|
||||
.barrage {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translateX(100vw);
|
||||
@ -456,9 +396,9 @@
|
||||
border-radius: 20rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-joined {
|
||||
.user-joined {
|
||||
@tag-bg: rgba(58, 58, 70, 0.3);
|
||||
font-size: 12rem;
|
||||
position: absolute;
|
||||
@ -520,12 +460,12 @@
|
||||
.text {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.LivePage {
|
||||
.LivePage {
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
color: white;
|
||||
@ -805,11 +745,7 @@
|
||||
@width: 35rem;
|
||||
|
||||
.avatar-wrapper {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#000000,
|
||||
var(--primary-btn-color)
|
||||
);
|
||||
background: linear-gradient(to bottom, #000000, var(--primary-btn-color));
|
||||
border-radius: 20rem;
|
||||
width: calc(@width + 2rem);
|
||||
display: flex;
|
||||
@ -818,11 +754,7 @@
|
||||
justify-content: center;
|
||||
|
||||
&.followed {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(240, 183, 31, 0.2),
|
||||
rgb(240, 183, 31)
|
||||
);
|
||||
background: linear-gradient(to bottom, rgba(240, 183, 31, 0.2), rgb(240, 183, 31));
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@ -874,5 +806,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,18 +23,8 @@
|
||||
@click.stop="toggleCollect()"
|
||||
/>
|
||||
</template>
|
||||
<div
|
||||
class="logo"
|
||||
v-if="!isFixed"
|
||||
@click="$nav('/home/music-rank-list')"
|
||||
>
|
||||
抖音音乐榜
|
||||
</div>
|
||||
<img
|
||||
class="share"
|
||||
src="../../assets/img/icon/share-white.png"
|
||||
@click="isSharing = true"
|
||||
/>
|
||||
<div class="logo" 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 class="content">
|
||||
@ -47,32 +37,17 @@
|
||||
<div class="desc">
|
||||
<div class="cover-wrapper" @click="togglePlay()">
|
||||
<img class="cover" :src="$imgPreview(music.cover)" alt="" />
|
||||
<img
|
||||
v-if="!isPlay"
|
||||
src="../../assets/img/icon/play-white.png"
|
||||
alt=""
|
||||
class="play"
|
||||
/>
|
||||
<img
|
||||
v-if="isPlay"
|
||||
src="../../assets/img/icon/pause-white.png"
|
||||
alt=""
|
||||
class="play"
|
||||
/>
|
||||
<img v-if="!isPlay" 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 class="info">
|
||||
<div class="name">{{ music.name }}</div>
|
||||
<div>
|
||||
<div class="user">{{ music.author }}</div>
|
||||
<div class="peoples">
|
||||
>{{ formatNumber(music.use_count) }} 人使用
|
||||
</div>
|
||||
<div class="peoples">>{{ formatNumber(music.use_count) }} 人使用</div>
|
||||
</div>
|
||||
<div class="collection" @click.stop="toggleCollect()">
|
||||
<img
|
||||
v-if="isCollect"
|
||||
src="../../assets/img/icon/star-yellow.png"
|
||||
/>
|
||||
<img v-if="isCollect" src="../../assets/img/icon/star-yellow.png" />
|
||||
<img v-else src="../../assets/img/icon/star-white.png" />
|
||||
<span>{{ isCollect ? '已' : '' }}收藏</span>
|
||||
</div>
|
||||
@ -120,11 +95,7 @@
|
||||
@cancel="shareType = -1"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<img
|
||||
style="width: 100%"
|
||||
src="../../assets/img/icon/share-password.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img style="width: 100%" src="../../assets/img/icon/share-password.webp" alt="" />
|
||||
</template>
|
||||
</ConfirmDialog>
|
||||
|
||||
@ -132,17 +103,17 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Posters from '../../components/Posters'
|
||||
import Scroll from '../../components/Scroll'
|
||||
import Loading from '../../components/Loading'
|
||||
import Share from '../../components/Share'
|
||||
import DouyinCode from '../../components/DouyinCode'
|
||||
import ConfirmDialog from '../../components/dialog/ConfirmDialog'
|
||||
import ShareToFriend from './components/ShareToFriend'
|
||||
import resource from '../../assets/data/resource'
|
||||
import { myVideo } from '@/api/videos'
|
||||
import Posters from '../../components/Posters'
|
||||
import Scroll from '../../components/Scroll'
|
||||
import Loading from '../../components/Loading'
|
||||
import Share from '../../components/Share'
|
||||
import DouyinCode from '../../components/DouyinCode'
|
||||
import ConfirmDialog from '../../components/dialog/ConfirmDialog'
|
||||
import ShareToFriend from './components/ShareToFriend'
|
||||
import resource from '../../assets/data/resource'
|
||||
import { myVideo } from '@/api/videos'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'Music',
|
||||
components: {
|
||||
Scroll,
|
||||
@ -151,7 +122,7 @@
|
||||
Share,
|
||||
DouyinCode,
|
||||
ConfirmDialog,
|
||||
ShareToFriend,
|
||||
ShareToFriend
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -176,14 +147,13 @@
|
||||
music: {
|
||||
name: '发如雪',
|
||||
mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
},
|
||||
is_play: false
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -200,7 +170,7 @@
|
||||
case 8:
|
||||
return (this.okText = '去微博粘贴')
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.name) {
|
||||
@ -224,7 +194,7 @@
|
||||
this.loading = true
|
||||
let res = await myVideo({
|
||||
pageNo: this.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
this.loading = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
@ -252,21 +222,21 @@
|
||||
stopPlay() {
|
||||
this.audio.pause()
|
||||
this.audio.removeEventListener('ended', null)
|
||||
},
|
||||
}
|
||||
},
|
||||
unmounted() {
|
||||
this.stopPlay()
|
||||
},
|
||||
deactivated() {
|
||||
this.stopPlay()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
#Music {
|
||||
#Music {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -428,5 +398,5 @@
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,6 @@
|
||||
<template>
|
||||
<div class="MusicRankList" @scroll="scroll">
|
||||
<dy-back
|
||||
mode="light"
|
||||
img="back"
|
||||
@click="$back()"
|
||||
class="fixed-back"
|
||||
direction="left"
|
||||
/>
|
||||
<dy-back mode="light" img="back" @click="$back()" class="fixed-back" direction="left" />
|
||||
<div class="fixed-header" :style="fixedStyle">
|
||||
<span class="f16">抖音音乐榜</span>
|
||||
</div>
|
||||
@ -14,9 +8,7 @@
|
||||
<div class="content">
|
||||
<div class="l-header">
|
||||
<img src="../../assets/img/icon/music-rank-list.webp" alt="" />
|
||||
<div class="update-time">
|
||||
更新于：{{ $dateFormat(updateTime, 'D') }}
|
||||
</div>
|
||||
<div class="update-time">更新于：{{ $dateFormat(updateTime, 'D') }}</div>
|
||||
</div>
|
||||
<Indicator
|
||||
name="musicRankList"
|
||||
@ -28,11 +20,7 @@
|
||||
<SlideHorizontal name="musicRankList" v-model:index="contentIndex">
|
||||
<SlideItem>
|
||||
<div class="list">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(item, index) in hotList"
|
||||
@click="togglePlay(item, hotList)"
|
||||
>
|
||||
<div class="item" v-for="(item, index) in hotList" @click="togglePlay(item, hotList)">
|
||||
<div class="top">
|
||||
<div class="rank-wrapper">
|
||||
<img
|
||||
@ -58,11 +46,7 @@
|
||||
<div class="right">
|
||||
<div class="music">
|
||||
<div class="cover-wrapper">
|
||||
<img
|
||||
v-lazy="$imgPreview(item.cover)"
|
||||
alt=""
|
||||
class="cover"
|
||||
/>
|
||||
<img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
|
||||
<img
|
||||
v-if="!item.is_play"
|
||||
src="../../assets/img/icon/play-white.png"
|
||||
@ -83,9 +67,7 @@
|
||||
<div class="duration">
|
||||
{{ $duration(item.duration) }}
|
||||
</div>
|
||||
<div class="use_count">
|
||||
{{ formatNumber(item.use_count) }}人使用
|
||||
</div>
|
||||
<div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -112,11 +94,7 @@
|
||||
</div>
|
||||
<div class="bottom" v-if="item.is_collect">
|
||||
<div class="left">
|
||||
<img
|
||||
src="../../assets/img/music-cover/2.jpg"
|
||||
alt=""
|
||||
class="avatar"
|
||||
/>
|
||||
<img src="../../assets/img/music-cover/2.jpg" alt="" class="avatar" />
|
||||
<div class="desc">
|
||||
<div class="name">{{ item.author }}</div>
|
||||
<div class="follow_count">粉丝：83.4w</div>
|
||||
@ -130,11 +108,7 @@
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<div class="list">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(item, index) in hotList"
|
||||
@click="togglePlay(item, hotList)"
|
||||
>
|
||||
<div class="item" v-for="(item, index) in hotList" @click="togglePlay(item, hotList)">
|
||||
<div class="top">
|
||||
<div class="rank-wrapper">
|
||||
<img
|
||||
@ -160,11 +134,7 @@
|
||||
<div class="right">
|
||||
<div class="music">
|
||||
<div class="cover-wrapper">
|
||||
<img
|
||||
v-lazy="$imgPreview(item.cover)"
|
||||
alt=""
|
||||
class="cover"
|
||||
/>
|
||||
<img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
|
||||
<img
|
||||
v-if="!item.is_play"
|
||||
src="../../assets/img/icon/play-white.png"
|
||||
@ -185,9 +155,7 @@
|
||||
<div class="duration">
|
||||
{{ $duration(item.duration) }}
|
||||
</div>
|
||||
<div class="use_count">
|
||||
{{ formatNumber(item.use_count) }}人使用
|
||||
</div>
|
||||
<div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -214,11 +182,7 @@
|
||||
</div>
|
||||
<div class="bottom" v-if="item.is_collect">
|
||||
<div class="left">
|
||||
<img
|
||||
src="../../assets/img/music-cover/2.jpg"
|
||||
alt=""
|
||||
class="avatar"
|
||||
/>
|
||||
<img src="../../assets/img/music-cover/2.jpg" alt="" class="avatar" />
|
||||
<div class="desc">
|
||||
<div class="name">{{ item.author }}</div>
|
||||
<div class="follow_count">粉丝：83.4w</div>
|
||||
@ -232,11 +196,7 @@
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<div class="list">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(item, index) in hotList"
|
||||
@click="togglePlay(item, hotList)"
|
||||
>
|
||||
<div class="item" v-for="(item, index) in hotList" @click="togglePlay(item, hotList)">
|
||||
<div class="top">
|
||||
<div class="rank-wrapper">
|
||||
<img
|
||||
@ -262,11 +222,7 @@
|
||||
<div class="right">
|
||||
<div class="music">
|
||||
<div class="cover-wrapper">
|
||||
<img
|
||||
v-lazy="$imgPreview(item.cover)"
|
||||
alt=""
|
||||
class="cover"
|
||||
/>
|
||||
<img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
|
||||
<img
|
||||
v-if="!item.is_play"
|
||||
src="../../assets/img/icon/play-white.png"
|
||||
@ -287,9 +243,7 @@
|
||||
<div class="duration">
|
||||
{{ $duration(item.duration) }}
|
||||
</div>
|
||||
<div class="use_count">
|
||||
{{ formatNumber(item.use_count) }}人使用
|
||||
</div>
|
||||
<div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -316,11 +270,7 @@
|
||||
</div>
|
||||
<div class="bottom" v-if="item.is_collect">
|
||||
<div class="left">
|
||||
<img
|
||||
src="../../assets/img/music-cover/2.jpg"
|
||||
alt=""
|
||||
class="avatar"
|
||||
/>
|
||||
<img src="../../assets/img/music-cover/2.jpg" alt="" class="avatar" />
|
||||
<div class="desc">
|
||||
<div class="name">{{ item.author }}</div>
|
||||
<div class="follow_count">粉丝：83.4w</div>
|
||||
@ -337,7 +287,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'MusicRankList',
|
||||
components: {},
|
||||
data() {
|
||||
@ -347,255 +297,198 @@
|
||||
{
|
||||
name: '龙卷风',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/1.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 99,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '爱在西元前',
|
||||
mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/2.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '蜗牛',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/3.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '半岛铁盒',
|
||||
mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/4.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '轨迹',
|
||||
mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/5.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '七里香',
|
||||
mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/6.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '发如雪',
|
||||
mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/7.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '霍元甲',
|
||||
mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/8.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '千里之外(周杰伦/费玉清)',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/9.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '菊花台',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/10.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '不能说的秘密',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/11.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '牛仔很忙',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/12.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '给我一首歌的时间',
|
||||
mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/13.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '烟花易冷',
|
||||
mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/14.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '惊叹号',
|
||||
mp3: 'https://m3.8js.net:99/20111103/150.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/15.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '明明就',
|
||||
mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/16.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '算什么男人',
|
||||
mp3: 'https://m3.8js.net:99/20150107/429.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/17.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '告白气球',
|
||||
mp3: 'https://m3.8js.net:99/20161016/481.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/18.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
},
|
||||
is_play: false
|
||||
}
|
||||
],
|
||||
updateTime: Date.now(),
|
||||
audio: new Audio(),
|
||||
scrollTop: -1,
|
||||
scrollTop: -1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fixedStyle() {
|
||||
return {
|
||||
opacity: this.scrollTop / 120 > 1 ? 1 : this.scrollTop / 120,
|
||||
opacity: this.scrollTop / 120 > 1 ? 1 : this.scrollTop / 120
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.hotList = this.hotList
|
||||
.concat(this.hotList)
|
||||
.concat(this.hotList)
|
||||
.concat(this.hotList)
|
||||
this.hotList = this.hotList.concat(this.hotList).concat(this.hotList).concat(this.hotList)
|
||||
this.hotList = this.hotList.slice(0, 50)
|
||||
},
|
||||
methods: {
|
||||
@ -631,21 +524,21 @@
|
||||
this.audio.pause()
|
||||
this.audio.currentTime = 0
|
||||
this.audio.removeEventListener('ended', null)
|
||||
},
|
||||
}
|
||||
},
|
||||
unmounted() {
|
||||
this.stopPlay()
|
||||
},
|
||||
deactivated() {
|
||||
this.stopPlay()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.MusicRankList {
|
||||
.MusicRankList {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -841,5 +734,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div class="Publish">
|
||||
<video
|
||||
id="video"
|
||||
autoplay="autoplay"
|
||||
style="width: 100%; height: calc(100% - 60rem)"
|
||||
></video>
|
||||
<video id="video" autoplay="autoplay" style="width: 100%; height: calc(100% - 60rem)"></video>
|
||||
<div class="footer">
|
||||
<SlideHorizontal style="height: 60rem" v-model:index="activeIndex">
|
||||
<SlideItem style="width: 20vw"></SlideItem>
|
||||
@ -53,11 +49,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'pinia'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { mapState } from 'pinia'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
|
||||
//访问用户媒体设备的兼容方法
|
||||
function getUserMedia(constrains, success, error) {
|
||||
//访问用户媒体设备的兼容方法
|
||||
function getUserMedia(constrains, success, error) {
|
||||
if (navigator.mediaDevices.getUserMedia) {
|
||||
//最新标准API
|
||||
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error)
|
||||
@ -71,18 +67,18 @@
|
||||
//旧版API
|
||||
navigator.getUserMedia(constrains).then(success).catch(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'Publish',
|
||||
data() {
|
||||
return {
|
||||
video: null,
|
||||
activeIndex: 1,
|
||||
activeIndex: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['bodyHeight', 'bodyWidth']),
|
||||
...mapState(useBaseStore, ['bodyHeight', 'bodyWidth'])
|
||||
},
|
||||
mounted() {
|
||||
//获得video摄像头区域
|
||||
@ -103,20 +99,20 @@
|
||||
},
|
||||
function (PermissionDeniedError) {
|
||||
console.log(PermissionDeniedError)
|
||||
},
|
||||
}
|
||||
)
|
||||
} catch (e) {
|
||||
console.log('e', e)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.Publish {
|
||||
.Publish {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -189,5 +185,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,75 +13,43 @@
|
||||
<div class="title">
|
||||
<span>内容违规</span>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '色情低俗', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '色情低俗', mode })">
|
||||
<span>色情低俗</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '时政不实信息', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '时政不实信息', mode })">
|
||||
<span>时政不实信息</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '违法犯罪', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '违法犯罪', mode })">
|
||||
<span>违法犯罪</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="
|
||||
$nav('/home/submit-report', { type: '垃圾广告、售卖假货等', mode })
|
||||
"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '垃圾广告、售卖假货等', mode })">
|
||||
<span>垃圾广告、售卖假货等</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '造谣传播', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '造谣传播', mode })">
|
||||
<span>造谣传播</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '涉嫌欺诈', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '涉嫌欺诈', mode })">
|
||||
<span>涉嫌欺诈</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '侮辱漫骂', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '侮辱漫骂', mode })">
|
||||
<span>侮辱漫骂</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '危险行为', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '危险行为', mode })">
|
||||
<span>危险行为</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '涉嫌非法集资', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '涉嫌非法集资', mode })">
|
||||
<span>涉嫌非法集资</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '价值观导向不良', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '价值观导向不良', mode })">
|
||||
<span>价值观导向不良</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
@ -95,24 +63,18 @@
|
||||
@click="
|
||||
$nav('/home/submit-report', {
|
||||
type: '侵犯名誉、隐私、肖像权等',
|
||||
mode,
|
||||
mode
|
||||
})
|
||||
"
|
||||
>
|
||||
<span>侵犯名誉、隐私、肖像权等</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '内容盗用本人作品', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '内容盗用本人作品', mode })">
|
||||
<span>内容盗用本人作品</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '内容盗用他人作品', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '内容盗用他人作品', mode })">
|
||||
<span>内容盗用他人作品</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
@ -120,19 +82,11 @@
|
||||
<div class="title">
|
||||
<span>未成年</span>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '未成年人不当行为', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '未成年人不当行为', mode })">
|
||||
<span>未成年人不当行为</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="
|
||||
$nav('/home/submit-report', { type: '内容不适合未成年观看', mode })
|
||||
"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '内容不适合未成年观看', mode })">
|
||||
<span>内容不适合未成年观看</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
@ -140,33 +94,19 @@
|
||||
<div class="title">
|
||||
<span>其他</span>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '引人不适', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '引人不适', mode })">
|
||||
<span>引人不适</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '疑似自我伤害', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '疑似自我伤害', mode })">
|
||||
<span>疑似自我伤害</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="
|
||||
$nav('/home/submit-report', { type: '诱导点赞、分享、关注', mode })
|
||||
"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '诱导点赞、分享、关注', mode })">
|
||||
<span>诱导点赞、分享、关注</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
@click="$nav('/home/submit-report', { type: '其他', mode })"
|
||||
>
|
||||
<div class="row" @click="$nav('/home/submit-report', { type: '其他', mode })">
|
||||
<span>其他</span>
|
||||
<dy-back scale=".8" direction="right"></dy-back>
|
||||
</div>
|
||||
@ -174,12 +114,12 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'Report',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
mode: 'video',
|
||||
mode: 'video'
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -187,14 +127,14 @@
|
||||
this.mode = this.$route.query.mode
|
||||
},
|
||||
activated() {},
|
||||
methods: {},
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.Report {
|
||||
.Report {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -225,5 +165,5 @@
|
||||
margin-left: 15rem;
|
||||
background: var(--line-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,12 +2,7 @@
|
||||
<div class="Search">
|
||||
<div class="header">
|
||||
<dy-back mode="light" @click="$back" class="mr1r"></dy-back>
|
||||
<BSearch
|
||||
placeholder="搜索用户名字/抖音号"
|
||||
:isShowRightText="true"
|
||||
@notice="$no"
|
||||
>
|
||||
</BSearch>
|
||||
<BSearch placeholder="搜索用户名字/抖音号" :isShowRightText="true" @notice="$no"> </BSearch>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="history">
|
||||
@ -16,12 +11,7 @@
|
||||
<img src="../../assets/img/icon/home/time-white.png" alt="" />
|
||||
<span> {{ item }}</span>
|
||||
</div>
|
||||
<dy-back
|
||||
img="close"
|
||||
mode="gray"
|
||||
@click="history.splice(index, 1)"
|
||||
scale=".7"
|
||||
></dy-back>
|
||||
<dy-back img="close" mode="gray" @click="history.splice(index, 1)" scale=".7"></dy-back>
|
||||
</div>
|
||||
<div v-if="history.length > 2" class="history-expand" @click="toggle">
|
||||
{{ isExpand ? '清除全部搜索记录' : '展开全部' }}
|
||||
@ -31,10 +21,7 @@
|
||||
<div class="title">
|
||||
<div class="left">猜你想搜</div>
|
||||
<div class="right" @click.stop="refresh">
|
||||
<img
|
||||
class="scan"
|
||||
src="../../assets/img/icon/home/refresh-gray.png"
|
||||
/>
|
||||
<img class="scan" src="../../assets/img/icon/home/refresh-gray.png" />
|
||||
<span>换一换</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,32 +39,16 @@
|
||||
</div>
|
||||
<div class="rank-list">
|
||||
<div class="indicator">
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: slideIndex === 0 }"
|
||||
@click="slideIndex = 0"
|
||||
>
|
||||
<div class="tab" :class="{ active: slideIndex === 0 }" @click="slideIndex = 0">
|
||||
抖音热榜
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: slideIndex === 1 }"
|
||||
@click="slideIndex = 1"
|
||||
>
|
||||
<div class="tab" :class="{ active: slideIndex === 1 }" @click="slideIndex = 1">
|
||||
直播榜
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: slideIndex === 2 }"
|
||||
@click="slideIndex = 2"
|
||||
>
|
||||
<div class="tab" :class="{ active: slideIndex === 2 }" @click="slideIndex = 2">
|
||||
音乐榜
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: slideIndex === 3 }"
|
||||
@click="slideIndex = 3"
|
||||
>
|
||||
<div class="tab" :class="{ active: slideIndex === 3 }" @click="slideIndex = 3">
|
||||
品牌榜
|
||||
</div>
|
||||
</div>
|
||||
@ -87,10 +58,7 @@
|
||||
<div class="slide0" ref="slide0">
|
||||
<div class="l-row">
|
||||
<div class="rank-wrapper">
|
||||
<img
|
||||
src="../../assets/img/icon/home/to-top-yellow.png"
|
||||
class="rank"
|
||||
/>
|
||||
<img src="../../assets/img/icon/home/to-top-yellow.png" class="rank" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="center">
|
||||
@ -153,25 +121,15 @@
|
||||
<div class="right">
|
||||
<div class="center">
|
||||
<div class="avatar-wrapper">
|
||||
<img
|
||||
src="../../assets/img/icon/avatar/1.png"
|
||||
alt=""
|
||||
class="avatar"
|
||||
/>
|
||||
<img src="../../assets/img/icon/avatar/1.png" alt="" class="avatar" />
|
||||
</div>
|
||||
<div class="desc">{{ item.name }}</div>
|
||||
<div v-if="item.type === 0" class="live-type">
|
||||
<img
|
||||
class="type1"
|
||||
src="../../assets/img/icon/home/pk.webp"
|
||||
/>
|
||||
<img class="type1" src="../../assets/img/icon/home/pk.webp" />
|
||||
<span>PK</span>
|
||||
</div>
|
||||
<div v-if="item.type === 1" class="live-type">
|
||||
<img
|
||||
class="type2"
|
||||
src="../../assets/img/icon/home/redpack.png"
|
||||
/>
|
||||
<img class="type2" src="../../assets/img/icon/home/redpack.png" />
|
||||
<span>红包</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -196,11 +154,7 @@
|
||||
<div class="right">
|
||||
<div class="center">
|
||||
<div class="avatar-wrapper">
|
||||
<img
|
||||
v-lazy="$imgPreview(item.cover)"
|
||||
alt=""
|
||||
class="avatar"
|
||||
/>
|
||||
<img v-lazy="$imgPreview(item.cover)" alt="" class="avatar" />
|
||||
</div>
|
||||
<div class="desc">{{ item.name }}</div>
|
||||
</div>
|
||||
@ -210,9 +164,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more" @click="$nav('/home/music-rank-list')">
|
||||
查看完整音乐榜 >
|
||||
</div>
|
||||
<div class="more" @click="$nav('/home/music-rank-list')">查看完整音乐榜 ></div>
|
||||
</div>
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
@ -236,25 +188,15 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="center">
|
||||
<div
|
||||
class="avatar-wrapper"
|
||||
:class="item.living ? 'living' : ''"
|
||||
>
|
||||
<div class="avatar-wrapper" :class="item.living ? 'living' : ''">
|
||||
<div class="avatar-out-line"></div>
|
||||
<img
|
||||
v-lazy="$imgPreview(item.logo)"
|
||||
alt=""
|
||||
class="avatar"
|
||||
/>
|
||||
<img v-lazy="$imgPreview(item.logo)" alt="" class="avatar" />
|
||||
<!-- <img :src="item.logo" class="avatar">-->
|
||||
</div>
|
||||
<div class="desc">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="count">
|
||||
<img
|
||||
src="../../assets/img/icon/home/hot-gray.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/home/hot-gray.png" alt="" />
|
||||
<span>{{ formatNumber(item.hot_count) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -296,15 +238,15 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Search from '../../components/Search'
|
||||
import Dom from '../../utils/dom'
|
||||
import { nextTick } from 'vue'
|
||||
import { sampleSize } from '@/utils'
|
||||
import Search from '../../components/Search'
|
||||
import Dom from '../../utils/dom'
|
||||
import { nextTick } from 'vue'
|
||||
import { sampleSize } from '@/utils'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'SearchPage',
|
||||
components: {
|
||||
BSearch: Search,
|
||||
BSearch: Search
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -319,7 +261,7 @@
|
||||
'历史记录7',
|
||||
'历史记录8',
|
||||
'历史记录9',
|
||||
'历史记录10',
|
||||
'历史记录10'
|
||||
],
|
||||
guess: [
|
||||
{ name: '少年透明人', type: -1 },
|
||||
@ -335,7 +277,7 @@
|
||||
{ name: '一公司放假通知走红', type: -1 },
|
||||
{ name: '成都新全优教育倒闭', type: -1 },
|
||||
{ name: '当代女生社交现状', type: -1 },
|
||||
{ name: '恒大集团凌晨发公告', type: -1 },
|
||||
{ name: '恒大集团凌晨发公告', type: -1 }
|
||||
],
|
||||
randomGuess: [],
|
||||
hotRankList: [
|
||||
@ -357,30 +299,30 @@
|
||||
{ name: '得鼻炎了, 说下症状和应对吧', type: 1 },
|
||||
{
|
||||
name: '打翻了一瓶矿泉水在 MacBook Pro 上，赶紧用鼠标关机了，等多久可以尝试开机？',
|
||||
type: 0,
|
||||
type: 0
|
||||
},
|
||||
{ name: '筋膜枪哪个牌子好啊？', type: -1 },
|
||||
{
|
||||
name: '最近在学理财小白基础知识，然后请教大家办哪个证券账户比较好呀',
|
||||
type: -1,
|
||||
type: -1
|
||||
},
|
||||
{
|
||||
name: '有没有长期使用 sidecar 功能的 V 友，这个东西长期的稳定性如何？',
|
||||
type: 0,
|
||||
type: 0
|
||||
},
|
||||
{ name: '犹豫是否要年年焕新', type: -1 },
|
||||
{ name: '请问如何在国内给 AppStore HK/TW 区充值.', type: 0 },
|
||||
{ name: '最近感觉一个妹子不错，不过我比她大 5 岁', type: 1 },
|
||||
{
|
||||
name: '12mini 1 月 20 号购入，现在电池健康 92%，正常现象？',
|
||||
type: -1,
|
||||
type: -1
|
||||
},
|
||||
{ name: '现在新 iphone12/128 啥价格比较合适啊？', type: -1 },
|
||||
{ name: 'iOS 15 不改地区就能看到全球所有交通卡', type: -1 },
|
||||
{ name: '求推荐拼车/打车软件', type: 1 },
|
||||
{ name: '如何比较方便的杀死 nohup 起的进程及其所有子进程?', type: 0 },
|
||||
{ name: '换了新工作，好像又掉坑里了。', type: 0 },
|
||||
{ name: '有没有这样一款记账软件？', type: 1 },
|
||||
{ name: '有没有这样一款记账软件？', type: 1 }
|
||||
],
|
||||
liveRankList: [
|
||||
{ name: '毛三岁（收女徒弟）', type: 0 },
|
||||
@ -412,243 +354,189 @@
|
||||
{ name: 'pigff', type: -1 },
|
||||
{ name: '正经人令北', type: -1 },
|
||||
{ name: '雨神丶', type: -1 },
|
||||
{ name: '智勋勋勋勋', type: 0 },
|
||||
{ name: '智勋勋勋勋', type: 0 }
|
||||
],
|
||||
musicRankList: [
|
||||
{
|
||||
name: '龙卷风',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/1.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 99,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '爱在西元前',
|
||||
mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/2.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '蜗牛',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/3.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '半岛铁盒',
|
||||
mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/4.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '轨迹',
|
||||
mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/5.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '七里香',
|
||||
mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/6.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '发如雪',
|
||||
mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/7.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '霍元甲',
|
||||
mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/8.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '千里之外(周杰伦/费玉清)',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/9.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '菊花台',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/10.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '不能说的秘密',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/11.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '牛仔很忙',
|
||||
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/12.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '给我一首歌的时间',
|
||||
mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/13.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '烟花易冷',
|
||||
mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/14.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '惊叹号',
|
||||
mp3: 'https://m3.8js.net:99/20111103/150.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/15.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '明明就',
|
||||
mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/16.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '算什么男人',
|
||||
mp3: 'https://m3.8js.net:99/20150107/429.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/17.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
{
|
||||
name: '告白气球',
|
||||
mp3: 'https://m3.8js.net:99/20161016/481.mp3',
|
||||
cover: new URL(
|
||||
'../../assets/img/music-cover/18.jpg',
|
||||
import.meta.url,
|
||||
).href,
|
||||
cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
},
|
||||
is_play: false
|
||||
}
|
||||
],
|
||||
brandRankList: {
|
||||
汽车: [
|
||||
@ -656,103 +544,103 @@
|
||||
name: '五菱汽车',
|
||||
logo: 'https://www.wuling.com/favicon.ico',
|
||||
hot_count: 1395,
|
||||
living: false,
|
||||
living: false
|
||||
},
|
||||
{
|
||||
name: '宝马',
|
||||
logo: 'https://www.bmw.com.cn/etc/clientlibs/digitals2/clientlib/media/img/BMW_Grey_Logo.svg',
|
||||
hot_count: 1395,
|
||||
living: true,
|
||||
living: true
|
||||
},
|
||||
{
|
||||
name: '吉利汽车',
|
||||
logo: 'http://www.cargc.com/uploads/allimg/200828/1401364511-2.jpg',
|
||||
hot_count: 1395,
|
||||
living: false,
|
||||
living: false
|
||||
},
|
||||
{
|
||||
name: '一汽大众-奥迪',
|
||||
logo: 'https://www.audi.cn/bin/nemo.static.20210916063431/cms4i-nemo/assets/icons/favicon/favicon-v4.ico',
|
||||
hot_count: 1395,
|
||||
living: false,
|
||||
living: false
|
||||
},
|
||||
{
|
||||
name: '一汽-大众',
|
||||
logo: 'https://www.vw.com.cn/favicon.ico',
|
||||
hot_count: 1395,
|
||||
living: false,
|
||||
},
|
||||
living: false
|
||||
}
|
||||
],
|
||||
手机: [
|
||||
{
|
||||
name: '华为',
|
||||
logo: 'https://isesglobal.com/wp-content/uploads/2021/01/Huawei.jpg',
|
||||
hot_count: 1395,
|
||||
living: false,
|
||||
living: false
|
||||
},
|
||||
{
|
||||
name: '小米',
|
||||
logo: 'https://s01.mifile.cn/favicon.ico',
|
||||
hot_count: 1395,
|
||||
living: true,
|
||||
living: true
|
||||
},
|
||||
{
|
||||
name: 'vivo',
|
||||
logo: 'http://wwwstatic.vivo.com.cn/vivoportal/web/dist/img/common/favicon_ecf768e.ico',
|
||||
hot_count: 1395,
|
||||
living: false,
|
||||
living: false
|
||||
},
|
||||
{
|
||||
name: 'oppo',
|
||||
logo: 'https://code.oppo.com/etc.clientlibs/global-site/clientlibs/clientlib-design/resources/icons/favicon.ico',
|
||||
hot_count: 1395,
|
||||
living: false,
|
||||
living: false
|
||||
},
|
||||
{
|
||||
name: '三星',
|
||||
logo: 'https://www.samsung.com/etc.clientlibs/samsung/clientlibs/consumer/global/clientlib-common/resources/images/Favicon.png',
|
||||
hot_count: 1395,
|
||||
living: false,
|
||||
},
|
||||
living: false
|
||||
}
|
||||
],
|
||||
美妆: [
|
||||
{
|
||||
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',
|
||||
hot_count: 1395,
|
||||
living: false,
|
||||
living: false
|
||||
},
|
||||
{
|
||||
name: '花西子',
|
||||
logo: 'https://www.haoyunbb.com/img/allimg/210607/001I43462-0.png',
|
||||
hot_count: 1395,
|
||||
living: false,
|
||||
living: false
|
||||
},
|
||||
{
|
||||
name: '完美日记',
|
||||
logo: 'http://5b0988e595225.cdn.sohucs.com/images/20200412/9c6caafca79e438f98d98d3986ebce4d.png',
|
||||
hot_count: 1395,
|
||||
living: false,
|
||||
living: false
|
||||
},
|
||||
{
|
||||
name: '雅诗兰黛',
|
||||
logo: 'https://vipyidiancom.oss-cn-beijing.aliyuncs.com/vipyidian.com/article/1_150918143107_1.png',
|
||||
hot_count: 1395,
|
||||
living: false,
|
||||
living: false
|
||||
},
|
||||
{
|
||||
name: 'COLORKEY珂拉琪',
|
||||
logo: 'https://www.80wzbk.com/uploads/logo/20210129/20210129104015_541.jpg',
|
||||
hot_count: 1395,
|
||||
living: false,
|
||||
},
|
||||
],
|
||||
living: false
|
||||
}
|
||||
]
|
||||
},
|
||||
selectBrandKey: '汽车',
|
||||
selectBrandKeyIndex: 0,
|
||||
slideIndex: 0,
|
||||
timer: null,
|
||||
slideItemHeight: null,
|
||||
slideItemHeight: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -773,9 +661,9 @@
|
||||
},
|
||||
slideListHeight() {
|
||||
return {
|
||||
height: this.slideItemHeight ? this.slideItemHeight + 'px' : '100%',
|
||||
height: this.slideItemHeight ? this.slideItemHeight + 'px' : '100%'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
slideIndex: {
|
||||
@ -799,8 +687,8 @@
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.history = this.history.reverse()
|
||||
@ -823,20 +711,20 @@
|
||||
},
|
||||
null,
|
||||
'确定',
|
||||
'取消',
|
||||
'取消'
|
||||
)
|
||||
} else {
|
||||
this.isExpand = true
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.Search {
|
||||
.Search {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -970,11 +858,7 @@
|
||||
&:nth-child(1) {
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgb(255, 165, 71),
|
||||
rgb(218, 77, 115)
|
||||
);
|
||||
background: linear-gradient(to right, rgb(255, 165, 71), rgb(218, 77, 115));
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
@ -985,11 +869,7 @@
|
||||
.slide0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0 var(--page-padding) 50rem var(--page-padding);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgb(32, 29, 36),
|
||||
rgb(50, 29, 38)
|
||||
);
|
||||
background: linear-gradient(to right, rgb(32, 29, 36), rgb(50, 29, 38));
|
||||
padding: var(--page-padding);
|
||||
border-radius: 10rem;
|
||||
|
||||
@ -1416,5 +1296,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'Report',
|
||||
props: {},
|
||||
data() {
|
||||
@ -61,7 +61,7 @@
|
||||
type: '色情低俗',
|
||||
mode: 'video',
|
||||
desc: '',
|
||||
photos: [],
|
||||
photos: []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -75,20 +75,17 @@
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
this.photos.push(
|
||||
new URL(
|
||||
`../../assets/img/poster/${this.photos.length}.jpg`,
|
||||
import.meta.url,
|
||||
).href,
|
||||
new URL(`../../assets/img/poster/${this.photos.length}.jpg`, import.meta.url).href
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.Report {
|
||||
.Report {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -203,5 +200,5 @@
|
||||
right: 15rem;
|
||||
bottom: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,47 +13,25 @@
|
||||
<div class="dialog-header">
|
||||
<div class="title-wrapper">
|
||||
<span class="title">{{ currentItem.author.nickname }}</span>
|
||||
<span class="subtitle"
|
||||
>抖音号：{{ _getUserDouyinId(currentItem) }}</span
|
||||
>
|
||||
<span class="subtitle">抖音号：{{ _getUserDouyinId(currentItem) }}</span>
|
||||
</div>
|
||||
<dy-back
|
||||
mode="dark"
|
||||
img="close"
|
||||
direction="right"
|
||||
@click="cancel()"
|
||||
></dy-back>
|
||||
<dy-back mode="dark" img="close" direction="right" @click="cancel()"></dy-back>
|
||||
</div>
|
||||
<div class="options">
|
||||
<div class="option" @click="cancel((e) => $emit('showShare'))">
|
||||
<img
|
||||
src="../../../assets/img/icon/components/follow/share.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/follow/share.png" alt="" />
|
||||
<span>分享主页</span>
|
||||
</div>
|
||||
<div class="option" @click="cancel((e) => $nav('/message/chat'))">
|
||||
<img
|
||||
src="../../../assets/img/icon/components/follow/private-chat.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/follow/private-chat.png" alt="" />
|
||||
<span>发私信</span>
|
||||
</div>
|
||||
<div
|
||||
class="option"
|
||||
@click="cancel((e) => $nav('/home/report', { mode: 'chat' }))"
|
||||
>
|
||||
<img
|
||||
src="../../../assets/img/icon/components/follow/report.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="option" @click="cancel((e) => $nav('/home/report', { mode: 'chat' }))">
|
||||
<img src="../../../assets/img/icon/components/follow/report.png" alt="" />
|
||||
<span>举报</span>
|
||||
</div>
|
||||
<div class="option" @click="cancel((e) => $emit('showBlockDialog'))">
|
||||
<img
|
||||
src="../../../assets/img/icon/components/follow/forbid.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/follow/forbid.png" alt="" />
|
||||
<span>拉黑</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -61,19 +39,13 @@
|
||||
<div class="l-row" @click="cancel((e) => $emit('showChangeNote'))">
|
||||
<div class="left">设置分组</div>
|
||||
<div class="right">
|
||||
<img
|
||||
src="../../../assets/img/icon/components/follow/write.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/follow/write.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-row" @click="cancel((e) => $emit('showChangeNote'))">
|
||||
<div class="left">设置备注名</div>
|
||||
<div class="right">
|
||||
<img
|
||||
src="../../../assets/img/icon/components/follow/write.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/follow/write.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-row">
|
||||
@ -85,30 +57,19 @@
|
||||
<div class="l-row">
|
||||
<div class="left">在关注列表中置顶</div>
|
||||
<div class="right">
|
||||
<switches
|
||||
v-model="switches1"
|
||||
theme="bootstrap"
|
||||
color="success"
|
||||
></switches>
|
||||
<switches v-model="switches1" theme="bootstrap" color="success"></switches>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-row">
|
||||
<div class="left">不让TA看</div>
|
||||
<div class="right">
|
||||
<switches
|
||||
v-model="switches1"
|
||||
theme="bootstrap"
|
||||
color="success"
|
||||
></switches>
|
||||
<switches v-model="switches1" theme="bootstrap" color="success"></switches>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-row" @click="cancel((e) => $emit('cancelFollow'))">
|
||||
<div class="left" style="color: red">取消关注</div>
|
||||
<div class="right">
|
||||
<img
|
||||
src="../../../assets/img/icon/components/follow/reduce.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/follow/reduce.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -116,16 +77,16 @@
|
||||
</from-bottom-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import Switches from '../../message/components/swtich/switches'
|
||||
import { DefaultUser } from '@/utils/const_var'
|
||||
import { _getUserDouyinId } from '@/utils'
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import Switches from '../../message/components/swtich/switches'
|
||||
import { DefaultUser } from '@/utils/const_var'
|
||||
import { _getUserDouyinId } from '@/utils'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'FollowSetting',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Switches,
|
||||
Switches
|
||||
},
|
||||
props: {
|
||||
currentItem: {
|
||||
@ -133,15 +94,15 @@
|
||||
default: {
|
||||
user: DefaultUser,
|
||||
isRequest: false,
|
||||
post: [],
|
||||
post: []
|
||||
}
|
||||
},
|
||||
},
|
||||
modelValue: false,
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
switches1: false,
|
||||
switches2: false,
|
||||
switches2: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -151,15 +112,15 @@
|
||||
cancel(cb) {
|
||||
this.$emit('update:modelValue', false)
|
||||
cb && cb()
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.follow-setting-dialog {
|
||||
.follow-setting-dialog {
|
||||
padding: 15rem;
|
||||
font-size: 14rem;
|
||||
|
||||
@ -248,5 +209,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,45 +13,27 @@
|
||||
<div class="dialog-header">
|
||||
<div class="title-wrapper">
|
||||
<span class="title">{{ currentItem.author.nickname }}</span>
|
||||
<span class="subtitle"
|
||||
>抖音号：{{ _getUserDouyinId(currentItem) }}</span
|
||||
>
|
||||
<span class="subtitle">抖音号：{{ _getUserDouyinId(currentItem) }}</span>
|
||||
</div>
|
||||
<dy-back
|
||||
mode="dark"
|
||||
img="close"
|
||||
direction="right"
|
||||
@click="cancel()"
|
||||
></dy-back>
|
||||
<dy-back mode="dark" img="close" direction="right" @click="cancel()"></dy-back>
|
||||
</div>
|
||||
<div class="l-rows">
|
||||
<div class="l-row">
|
||||
<div class="left">不让TA看</div>
|
||||
<div class="right">
|
||||
<switches
|
||||
v-model="switches1"
|
||||
theme="bootstrap"
|
||||
color="success"
|
||||
></switches>
|
||||
<switches v-model="switches1" theme="bootstrap" color="success"></switches>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-row">
|
||||
<div class="left">在关注列表中置顶</div>
|
||||
<div class="right">
|
||||
<switches
|
||||
v-model="switches1"
|
||||
theme="bootstrap"
|
||||
color="success"
|
||||
></switches>
|
||||
<switches v-model="switches1" theme="bootstrap" color="success"></switches>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-row" @click="cancel((e) => $emit('cancelFollow'))">
|
||||
<div class="left">取消关注</div>
|
||||
<div class="right">
|
||||
<img
|
||||
src="../../../assets/img/icon/components/follow/reduce.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/follow/reduce.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -59,16 +41,16 @@
|
||||
</from-bottom-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import Switches from '../../message/components/swtich/switches'
|
||||
import { DefaultUser } from '@/utils/const_var'
|
||||
import { _getUserDouyinId } from '@/utils'
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import Switches from '../../message/components/swtich/switches'
|
||||
import { DefaultUser } from '@/utils/const_var'
|
||||
import { _getUserDouyinId } from '@/utils'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'FollowSetting',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Switches,
|
||||
Switches
|
||||
},
|
||||
props: {
|
||||
currentItem: {
|
||||
@ -76,15 +58,15 @@
|
||||
default: {
|
||||
user: DefaultUser,
|
||||
isRequest: false,
|
||||
post: [],
|
||||
post: []
|
||||
}
|
||||
},
|
||||
},
|
||||
modelValue: false,
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
switches1: false,
|
||||
switches2: false,
|
||||
switches2: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -94,15 +76,15 @@
|
||||
cancel(cb) {
|
||||
this.$emit('update:modelValue', false)
|
||||
cb && cb()
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.follow-setting-dialog {
|
||||
.follow-setting-dialog {
|
||||
padding: 15rem;
|
||||
font-size: 14rem;
|
||||
|
||||
@ -191,5 +173,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,108 +21,62 @@
|
||||
class="tab1-img"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: index === 1 }"
|
||||
@click.stop="change(1)"
|
||||
>
|
||||
<div class="tab" :class="{ active: index === 1 }" @click.stop="change(1)">
|
||||
<span>长视频</span>
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: index === 2 }"
|
||||
@click.stop="change(2)"
|
||||
>
|
||||
<div class="tab" :class="{ active: index === 2 }" @click.stop="change(2)">
|
||||
<span>关注</span>
|
||||
<img src="../../../assets/img/icon/live.webp" class="tab2-img" />
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: index === 3 }"
|
||||
@click.stop="change(3)"
|
||||
>
|
||||
<div class="tab" :class="{ active: index === 3 }" @click.stop="change(3)">
|
||||
<span>经验</span>
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: index === 4 }"
|
||||
@click.stop="change(4)"
|
||||
>
|
||||
<div class="tab" :class="{ active: index === 4 }" @click.stop="change(4)">
|
||||
<span>推荐</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="indicator" ref="indicator"></div>
|
||||
</div>
|
||||
<Icon
|
||||
v-hide="loading"
|
||||
icon="ion:search"
|
||||
class="search"
|
||||
@click="$nav('/home/search')"
|
||||
/>
|
||||
<Icon v-hide="loading" icon="ion:search" class="search" @click="$nav('/home/search')" />
|
||||
</div>
|
||||
<div class="toggle-type" :class="{ open }">
|
||||
<div
|
||||
class="l-button"
|
||||
:class="{ active: type === 0 }"
|
||||
@click="toggleType(0)"
|
||||
>
|
||||
<div class="l-button" :class="{ active: type === 0 }" @click="toggleType(0)">
|
||||
<span>同城</span>
|
||||
<img
|
||||
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)"
|
||||
>
|
||||
热点
|
||||
<img 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>
|
||||
|
||||
<Loading
|
||||
:style="loadingStyle"
|
||||
class="loading"
|
||||
style="width: 40rem"
|
||||
:is-full-screen="false"
|
||||
/>
|
||||
<Loading :style="loadingStyle" class="loading" style="width: 40rem" :is-full-screen="false" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Loading from '../../../components/Loading.vue'
|
||||
import bus from '../../../utils/bus'
|
||||
import { mapState } from 'pinia'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import Loading from '../../../components/Loading.vue'
|
||||
import bus from '../../../utils/bus'
|
||||
import { mapState } from 'pinia'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'IndicatorHome',
|
||||
components: {
|
||||
Loading,
|
||||
Loading
|
||||
},
|
||||
props: {
|
||||
loading: false,
|
||||
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
|
||||
name: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
default: () => ''
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
default: () => 0
|
||||
},
|
||||
isLight: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
default: () => false
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const baseStore = useBaseStore()
|
||||
@ -135,7 +89,7 @@
|
||||
indicatorSpace: 0,
|
||||
open: false,
|
||||
type: 1,
|
||||
moveY: 0,
|
||||
moveY: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -151,20 +105,19 @@
|
||||
return {
|
||||
opacity: 1,
|
||||
'transition-duration': '300ms',
|
||||
transform: `translate3d(0, 0, 0)`,
|
||||
transform: `translate3d(0, 0, 0)`
|
||||
}
|
||||
}
|
||||
if (this.moveY) {
|
||||
return {
|
||||
opacity:
|
||||
1 - (this.moveY - this.judgeValue) / (this.homeRefresh / 2),
|
||||
transform: this.transform,
|
||||
opacity: 1 - (this.moveY - this.judgeValue) / (this.homeRefresh / 2),
|
||||
transform: this.transform
|
||||
}
|
||||
}
|
||||
return {
|
||||
opacity: 1,
|
||||
'transition-duration': '300ms',
|
||||
transform: `translate3d(0, 0, 0)`,
|
||||
transform: `translate3d(0, 0, 0)`
|
||||
}
|
||||
},
|
||||
noticeStyle() {
|
||||
@ -173,9 +126,8 @@
|
||||
}
|
||||
if (this.moveY) {
|
||||
return {
|
||||
opacity:
|
||||
(this.moveY - this.judgeValue) / (this.homeRefresh / 2) - 0.5,
|
||||
transform: this.transform,
|
||||
opacity: (this.moveY - this.judgeValue) / (this.homeRefresh / 2) - 0.5,
|
||||
transform: this.transform
|
||||
}
|
||||
}
|
||||
return { opacity: 0 }
|
||||
@ -186,12 +138,11 @@
|
||||
}
|
||||
if (this.moveY) {
|
||||
return {
|
||||
opacity:
|
||||
(this.moveY - this.judgeValue) / (this.homeRefresh / 2) - 0.5,
|
||||
transform: this.transform,
|
||||
opacity: (this.moveY - this.judgeValue) / (this.homeRefresh / 2) - 0.5,
|
||||
transform: this.transform
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
@ -235,7 +186,7 @@
|
||||
this.lefts.push(
|
||||
item.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]
|
||||
@ -247,9 +198,7 @@
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.lefts[this.index] -
|
||||
e / (this.baseStore.bodyWidth / this.indicatorSpace) +
|
||||
'px',
|
||||
this.lefts[this.index] - e / (this.baseStore.bodyWidth / this.indicatorSpace) + 'px'
|
||||
)
|
||||
},
|
||||
end(index) {
|
||||
@ -259,13 +208,13 @@
|
||||
setTimeout(() => {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
}, 300)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.indicator-home {
|
||||
.indicator-home {
|
||||
position: absolute;
|
||||
font-size: 16rem;
|
||||
top: 0;
|
||||
@ -425,5 +374,5 @@
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
background: #00000066;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,6 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 400 400">
|
||||
<circle
|
||||
:r="150"
|
||||
cx="200"
|
||||
cy="200"
|
||||
:stroke="'darkgrey'"
|
||||
:stroke-width="40"
|
||||
fill="none"
|
||||
/>
|
||||
<circle :r="150" cx="200" cy="200" :stroke="'darkgrey'" :stroke-width="40" fill="none" />
|
||||
<circle
|
||||
transform="rotate(-90)"
|
||||
transform-origin="center"
|
||||
@ -23,20 +16,20 @@
|
||||
</svg>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'LoadingCircle',
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 50,
|
||||
},
|
||||
default: 50
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
progress() {
|
||||
return 300 * 3.14 * (this.modelValue / 100)
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -154,23 +154,21 @@
|
||||
</div>
|
||||
<div class="text-num">{{ desc.length }}/300</div>
|
||||
</div>
|
||||
<dy-button type="primary" :disabled="!disabled" @click="submit"
|
||||
>提交</dy-button
|
||||
>
|
||||
<dy-button type="primary" :disabled="!disabled" @click="submit">提交</dy-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import Check from '../../../components/Check'
|
||||
import Check from '../../../components/Check'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'Test',
|
||||
props: {
|
||||
modelValue: false,
|
||||
modelValue: false
|
||||
},
|
||||
components: {
|
||||
Check,
|
||||
Check
|
||||
},
|
||||
watch: {
|
||||
modelValue(newVal) {
|
||||
@ -182,7 +180,7 @@
|
||||
this.type6 = false
|
||||
this.type7 = false
|
||||
this.desc = ''
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -193,21 +191,14 @@
|
||||
type5: false,
|
||||
type6: false,
|
||||
type7: false,
|
||||
desc: '',
|
||||
desc: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
if (this.type7 && this.desc) return true
|
||||
return (
|
||||
this.type1 ||
|
||||
this.type2 ||
|
||||
this.type3 ||
|
||||
this.type4 ||
|
||||
this.type5 ||
|
||||
this.type6
|
||||
)
|
||||
},
|
||||
return this.type1 || this.type2 || this.type3 || this.type4 || this.type5 || this.type6
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
@ -230,15 +221,15 @@
|
||||
await this.$sleep(1000)
|
||||
this.$hideLoading()
|
||||
this.$notice('感谢你的反馈，我们会尽快答复！')
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.play-feedback {
|
||||
.play-feedback {
|
||||
max-height: 490rem;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
@ -320,5 +311,5 @@
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,62 +9,39 @@
|
||||
>
|
||||
<div class="option-dialog">
|
||||
<div class="buttons">
|
||||
<dy-button
|
||||
v-if="downloading"
|
||||
class="mb1r"
|
||||
:border="false"
|
||||
:progress="progress"
|
||||
>
|
||||
<img
|
||||
src="../../../assets/img/icon/components/video/download-gray.png"
|
||||
alt=""
|
||||
/>
|
||||
<dy-button v-if="downloading" 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>
|
||||
</dy-button>
|
||||
|
||||
<template v-if="canDownload">
|
||||
<dy-button type="green" v-if="showShare2WeChatZone" @click="$no">
|
||||
<template v-slot:prefix>
|
||||
<img
|
||||
src="../../../assets/img/icon/components/video/wechatzone-white.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/video/wechatzone-white.webp" alt="" />
|
||||
</template>
|
||||
发送视频到朋友圈
|
||||
</dy-button>
|
||||
<dy-button type="green" v-if="showShare2WeChat" @click="$no">
|
||||
<template v-slot:prefix>
|
||||
<img
|
||||
src="../../../assets/img/icon/components/video/wechat-white.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/video/wechat-white.webp" alt="" />
|
||||
</template>
|
||||
发送视频到微信
|
||||
</dy-button>
|
||||
<dy-button type="qqzone" v-if="showShare2QQZone" @click="$no">
|
||||
<template v-slot:prefix>
|
||||
<img
|
||||
src="../../../assets/img/icon/components/video/qqzone-white.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/video/qqzone-white.png" alt="" />
|
||||
</template>
|
||||
发送视频到QQ空间
|
||||
</dy-button>
|
||||
<dy-button type="qq" v-if="showShare2QQ" @click="$no">
|
||||
<template v-slot:prefix>
|
||||
<img
|
||||
src="../../../assets/img/icon/components/video/qq-white.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/video/qq-white.webp" alt="" />
|
||||
</template>
|
||||
发送视频到QQ
|
||||
</dy-button>
|
||||
<dy-button type="webo" v-if="showShare2Webo" @click="$no">
|
||||
<template v-slot:prefix>
|
||||
<img
|
||||
src="../../../assets/img/icon/components/video/webo-white.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/video/webo-white.webp" alt="" />
|
||||
</template>
|
||||
发送视频到微博
|
||||
</dy-button>
|
||||
@ -76,46 +53,31 @@
|
||||
<template v-else>
|
||||
<dy-button type="green" v-if="showShare2WeChatZone" @click="$no">
|
||||
<template v-slot:prefix>
|
||||
<img
|
||||
src="../../../assets/img/icon/components/video/wechatzone-white.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/video/wechatzone-white.webp" alt="" />
|
||||
</template>
|
||||
复制口令发给好友
|
||||
</dy-button>
|
||||
<dy-button type="green" v-if="showShare2WeChat" @click="$no">
|
||||
<template v-slot:prefix>
|
||||
<img
|
||||
src="../../../assets/img/icon/components/video/wechat-white.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/video/wechat-white.webp" alt="" />
|
||||
</template>
|
||||
复制口令发给好友
|
||||
</dy-button>
|
||||
<dy-button type="qqzone" v-if="showShare2QQZone" @click="$no">
|
||||
<template v-slot:prefix>
|
||||
<img
|
||||
src="../../../assets/img/icon/components/video/qqzone-white.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/video/qqzone-white.png" alt="" />
|
||||
</template>
|
||||
复制口令发给好友
|
||||
</dy-button>
|
||||
<dy-button type="qq" v-if="showShare2QQ" @click="$no">
|
||||
<template v-slot:prefix>
|
||||
<img
|
||||
src="../../../assets/img/icon/components/video/qq-white.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/video/qq-white.webp" alt="" />
|
||||
</template>
|
||||
复制口令发给好友
|
||||
</dy-button>
|
||||
<dy-button type="webo" v-if="showShare2Webo" @click="$no">
|
||||
<template v-slot:prefix>
|
||||
<img
|
||||
src="../../../assets/img/icon/components/video/webo-white.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/video/webo-white.webp" alt="" />
|
||||
</template>
|
||||
复制口令发给好友
|
||||
</dy-button>
|
||||
@ -128,20 +90,13 @@
|
||||
</dy-button>
|
||||
|
||||
<dy-button class="mt1r" type="white" @click="$no">
|
||||
<img
|
||||
src="../../../assets/img/icon/components/video/wechat.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/img/icon/components/video/wechat.webp" alt="" />
|
||||
发送视频到微信
|
||||
</dy-button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="dialog-friends">
|
||||
<div
|
||||
class="dialog-friend"
|
||||
v-for="item in localFriends.all"
|
||||
@click="share(item)"
|
||||
>
|
||||
<div class="dialog-friend" v-for="item in localFriends.all" @click="share(item)">
|
||||
<img :src="$imgPreview(item.avatar)" alt="" />
|
||||
<div class="right">
|
||||
<span>{{ item.name }}</span>
|
||||
@ -160,30 +115,30 @@
|
||||
</from-bottom-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import { mapState } from 'pinia'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
/*
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import { mapState } from 'pinia'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
/*
|
||||
* 分享到各种工具
|
||||
* */
|
||||
export default {
|
||||
export default {
|
||||
name: 'ShareTo',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
FromBottomDialog
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
default: -1
|
||||
},
|
||||
videoId: {
|
||||
type: String,
|
||||
default: null,
|
||||
default: null
|
||||
},
|
||||
canDownload: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
default: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type(newVal, oldVal) {
|
||||
@ -191,7 +146,7 @@
|
||||
},
|
||||
showShareDialog() {
|
||||
this.localFriends = this.$clone(this.friends)
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -205,11 +160,11 @@
|
||||
showShare2QQZone: false,
|
||||
showShare2QQ: false,
|
||||
showShare2Webo: false,
|
||||
localFriends: [],
|
||||
localFriends: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
...mapState(useBaseStore, ['friends'])
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
@ -218,10 +173,7 @@
|
||||
this.showShareDialog = true
|
||||
if (this.canDownload) {
|
||||
let downloadedVideo = this.$storageGet('downloadedVideo', [])
|
||||
if (
|
||||
!downloadedVideo.find((v) => v === this.videoId) &&
|
||||
!this.downloading
|
||||
) {
|
||||
if (!downloadedVideo.find((v) => v === this.videoId) && !this.downloading) {
|
||||
await this.downloadVideo()
|
||||
}
|
||||
}
|
||||
@ -273,15 +225,15 @@
|
||||
this.$notice('已分享给朋友')
|
||||
}
|
||||
item.select = true
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.option-dialog {
|
||||
.option-dialog {
|
||||
.buttons {
|
||||
padding: 0 15rem;
|
||||
|
||||
@ -357,5 +309,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,11 +20,7 @@
|
||||
/>
|
||||
<template v-if="searchKey">
|
||||
<div class="friend-list" v-if="searchResult.length">
|
||||
<div
|
||||
class="friend-item"
|
||||
v-for="item in searchResult"
|
||||
@click="handleClick2(item)"
|
||||
>
|
||||
<div class="friend-item" v-for="item in searchResult" @click="handleClick2(item)">
|
||||
<img class="left" v-lazy="$imgPreview(item.avatar)" alt="" />
|
||||
<div class="right">
|
||||
<div class="info">
|
||||
@ -32,19 +28,12 @@
|
||||
<span v-if="item.name.indexOf(searchKey) > -1">
|
||||
{{ item.name.substr(0, item.name.indexOf(searchKey))
|
||||
}}<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 v-else>{{ item.name }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<dy-button
|
||||
:type="item.shared ? 'dark' : 'primary'"
|
||||
@click="item.shared = true"
|
||||
>
|
||||
<dy-button :type="item.shared ? 'dark' : 'primary'" @click="item.shared = true">
|
||||
{{ item.shared ? '已' : '' }}分享
|
||||
</dy-button>
|
||||
</div>
|
||||
@ -57,11 +46,7 @@
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="joined-chat-group-nav" @click="showJoinedChat = true">
|
||||
<img
|
||||
class="left"
|
||||
src="../../../assets/img/icon/people-gray.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="left" src="../../../assets/img/icon/people-gray.png" alt="" />
|
||||
<div class="right">
|
||||
<span>已加入的群聊</span>
|
||||
<dy-back direction="right" mode="gray" scale=".7" />
|
||||
@ -73,10 +58,7 @@
|
||||
<img class="left" v-lazy="$imgPreview(item.avatar)" alt="" />
|
||||
<div class="right">
|
||||
<span>{{ item.name }}</span>
|
||||
<dy-button
|
||||
:type="item.shared ? 'dark' : 'primary'"
|
||||
@click="item.shared = true"
|
||||
>
|
||||
<dy-button :type="item.shared ? 'dark' : 'primary'" @click="item.shared = true">
|
||||
{{ item.shared ? '已' : '' }}分享
|
||||
</dy-button>
|
||||
</div>
|
||||
@ -86,11 +68,7 @@
|
||||
</div>
|
||||
<div class="joined-chat-group" v-show="showJoinedChat">
|
||||
<div class="nav">
|
||||
<dy-back
|
||||
@click="showJoinedChat = false"
|
||||
mode="light"
|
||||
scale="1"
|
||||
></dy-back>
|
||||
<dy-back @click="showJoinedChat = false" mode="light" scale="1"></dy-back>
|
||||
<span>已加入的群聊</span>
|
||||
<span> </span>
|
||||
</div>
|
||||
@ -103,10 +81,7 @@
|
||||
<div class="name">{{ text }}</div>
|
||||
<div class="num">(3)</div>
|
||||
</div>
|
||||
<dy-button
|
||||
:type="item.shared ? 'dark' : 'primary'"
|
||||
@click="item.shared = true"
|
||||
>
|
||||
<dy-button :type="item.shared ? 'dark' : 'primary'" @click="item.shared = true">
|
||||
{{ item.shared ? '已' : '' }}分享
|
||||
</dy-button>
|
||||
</div>
|
||||
@ -117,27 +92,27 @@
|
||||
</from-bottom-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import { mapState } from 'pinia'
|
||||
import Search from '../../../components/Search'
|
||||
import Check from '../../../components/Check'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
/*
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import { mapState } from 'pinia'
|
||||
import Search from '../../../components/Search'
|
||||
import Check from '../../../components/Check'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
/*
|
||||
分享给朋友
|
||||
* */
|
||||
export default {
|
||||
export default {
|
||||
name: 'ShareTo',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Search,
|
||||
Check,
|
||||
Check
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
pageId: {
|
||||
type: String,
|
||||
default: 'home-index',
|
||||
},
|
||||
default: 'home-index'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -147,7 +122,7 @@
|
||||
text: 'AAAAAAA、BBBBBBBB、CCCCCCCCCCCCC',
|
||||
localFriends: [],
|
||||
searchResult: [],
|
||||
searchKey: '',
|
||||
searchKey: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -172,13 +147,13 @@
|
||||
this.isShowRightText = false
|
||||
this.showJoinedChat = false
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
selectFriends() {
|
||||
return this.localFriends.filter((v) => v.shared)
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
@ -198,22 +173,22 @@
|
||||
cancel() {
|
||||
this.height = '70vh'
|
||||
this.$emit('update:modelValue', false)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.button {
|
||||
.button {
|
||||
width: 64rem;
|
||||
height: 26rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@avatar-width: 38rem;
|
||||
@avatar-width: 38rem;
|
||||
|
||||
.friend-list {
|
||||
.friend-list {
|
||||
padding: 0 15rem;
|
||||
|
||||
.index {
|
||||
@ -252,9 +227,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.content {
|
||||
color: white;
|
||||
|
||||
.create-chat {
|
||||
@ -402,5 +377,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -38,15 +38,9 @@
|
||||
:can-download="canDownload"
|
||||
@click="closeShare()"
|
||||
/>
|
||||
<to-share
|
||||
item-type="report"
|
||||
@click="$nav('/home/report', { mode: this.mode })"
|
||||
/>
|
||||
<to-share item-type="report" @click="$nav('/home/report', { mode: this.mode })" />
|
||||
<to-share item-type="copyPassword" @click="copyLink" />
|
||||
<to-share
|
||||
:item-type="isCollect ? 'collectYellow' : 'collect'"
|
||||
@click="toggleCollect"
|
||||
/>
|
||||
<to-share :item-type="isCollect ? 'collectYellow' : 'collect'" @click="toggleCollect" />
|
||||
<to-share item-type="comeon" @click="$no" />
|
||||
<to-share item-type="dou" @click="$no" />
|
||||
<to-share item-type="copyLink" @click="copyLink" />
|
||||
@ -74,10 +68,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="more" @click="closeShare($nav('/message/share-to-friend'))">
|
||||
<img
|
||||
class="left"
|
||||
src="../../../assets/img/icon/components/video/more-dark.png"
|
||||
/>
|
||||
<img class="left" src="../../../assets/img/icon/components/video/more-dark.png" />
|
||||
<span>更多朋友</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -86,13 +77,13 @@
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { mapState } from 'pinia'
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import LoadingCircle from './LoadingCircle'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
// import DouyinCode from "./DouyinCode";
|
||||
import { mapState } from 'pinia'
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import LoadingCircle from './LoadingCircle'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
// import DouyinCode from "./DouyinCode";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'Share',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
@ -100,21 +91,21 @@
|
||||
// DouyinCode,
|
||||
ToShare: {
|
||||
components: {
|
||||
LoadingCircle,
|
||||
LoadingCircle
|
||||
},
|
||||
props: {
|
||||
itemType: {
|
||||
type: String,
|
||||
default: 'weChat',
|
||||
default: 'weChat'
|
||||
},
|
||||
needDown: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
canDownload: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -137,8 +128,8 @@
|
||||
totoutiao: '今日头条',
|
||||
dislike: '不感兴趣',
|
||||
bizhi: '动态壁纸',
|
||||
code: '抖音码',
|
||||
},
|
||||
code: '抖音码'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -147,7 +138,7 @@
|
||||
return this.itemType !== 'download'
|
||||
}
|
||||
return true
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
displayText() {
|
||||
@ -184,65 +175,59 @@
|
||||
}
|
||||
}, 10)
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
className='to'
|
||||
className="to"
|
||||
onClick={this.click}
|
||||
style={{ opacity: this.styleCanDownload ? '1' : '0.5' }}
|
||||
>
|
||||
<div className='wrapper'>
|
||||
<div className="wrapper">
|
||||
{this.loading ? (
|
||||
<div
|
||||
className='loading-wrapper'
|
||||
style='width: 80%;height: 80%;'
|
||||
>
|
||||
<div className="loading-wrapper" style="width: 80%;height: 80%;">
|
||||
<LoadingCircle v-model={this.progress} />
|
||||
</div>
|
||||
) : (
|
||||
<img
|
||||
src={`/src/assets/img/icon/components/share/${this.itemType}.png`}
|
||||
alt=''
|
||||
/>
|
||||
<img src={`/src/assets/img/icon/components/share/${this.itemType}.png`} alt="" />
|
||||
)}
|
||||
</div>
|
||||
<span>{this.displayText()}</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
videoId: {
|
||||
type: String,
|
||||
default: null,
|
||||
default: null
|
||||
},
|
||||
pageId: {
|
||||
type: String,
|
||||
default: 'home-index',
|
||||
default: 'home-index'
|
||||
},
|
||||
canDownload: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
...mapState(useBaseStore, ['friends'])
|
||||
},
|
||||
watch: {
|
||||
modelValue(newVal) {
|
||||
if (!newVal) {
|
||||
this.loading = {
|
||||
weChat: false,
|
||||
weChatZone: false,
|
||||
weChatZone: false
|
||||
}
|
||||
this.progress = 0
|
||||
this.isShowMore = false
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -250,13 +235,13 @@
|
||||
isShowMore: false,
|
||||
loading: {
|
||||
weChat: false,
|
||||
weChatZone: false,
|
||||
weChatZone: false
|
||||
},
|
||||
text: {
|
||||
weChat: '微信',
|
||||
weChatZone: '朋友圈',
|
||||
weChatZone: '朋友圈'
|
||||
},
|
||||
progress: 0,
|
||||
progress: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -290,13 +275,13 @@
|
||||
},
|
||||
closeShare1() {
|
||||
this.$emit('update:modelValue', false)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.video-share {
|
||||
.video-share {
|
||||
height: 60vh;
|
||||
width: 100%;
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
@ -423,5 +408,5 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -113,16 +113,12 @@
|
||||
<!-- <SlideItem></SlideItem>-->
|
||||
<Slide0 :active="state.navIndex === 0 && state.baseIndex === 1" />
|
||||
<SlideItem>
|
||||
<LongVideo
|
||||
:active="state.navIndex === 1 && state.baseIndex === 1"
|
||||
/>
|
||||
<LongVideo :active="state.navIndex === 1 && state.baseIndex === 1" />
|
||||
</SlideItem>
|
||||
<!-- <SlideItem></SlideItem>-->
|
||||
<Slide2 :active="state.navIndex === 2 && state.baseIndex === 1" />
|
||||
<SlideItem>
|
||||
<Community
|
||||
:active="state.navIndex === 3 && state.baseIndex === 1"
|
||||
/>
|
||||
<Community :active="state.navIndex === 3 && state.baseIndex === 1" />
|
||||
</SlideItem>
|
||||
<Slide4 :active="state.navIndex === 4 && state.baseIndex === 1" />
|
||||
</SlideHorizontal>
|
||||
@ -195,11 +191,7 @@
|
||||
|
||||
<BlockDialog v-model="state.showBlockDialog" />
|
||||
|
||||
<ConfirmDialog
|
||||
title="设置备注名"
|
||||
ok-text="确认"
|
||||
v-model:visible="state.showChangeNote"
|
||||
>
|
||||
<ConfirmDialog title="设置备注名" ok-text="确认" v-model:visible="state.showChangeNote">
|
||||
<Search mode="light" v-model="state.test" :isShowSearchIcon="false" />
|
||||
</ConfirmDialog>
|
||||
|
||||
@ -208,43 +200,37 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import SlideHorizontal from '@/components/slide/SlideHorizontal.vue'
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import Comment from '../../components/Comment.vue'
|
||||
import Share from '../../components/Share.vue'
|
||||
import IndicatorHome from './components/IndicatorHome.vue'
|
||||
import {
|
||||
onActivated,
|
||||
onDeactivated,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
reactive,
|
||||
} from 'vue'
|
||||
import bus, { EVENT_KEY } from '../../utils/bus'
|
||||
import { useNav } from '@/utils/hooks/useNav'
|
||||
import PlayFeedback from '@/pages/home/components/PlayFeedback.vue'
|
||||
import ShareTo from '@/pages/home/components/ShareTo.vue'
|
||||
import DouyinCode from '../../components/DouyinCode.vue'
|
||||
import FollowSetting from '@/pages/home/components/FollowSetting.vue'
|
||||
import BlockDialog from '../message/components/BlockDialog.vue'
|
||||
import Search from '../../components/Search.vue'
|
||||
import ConfirmDialog from '../../components/dialog/ConfirmDialog.vue'
|
||||
import FollowSetting2 from '@/pages/home/components/FollowSetting2.vue'
|
||||
import ShareToFriend from '@/pages/home/components/ShareToFriend.vue'
|
||||
import UserPanel from '@/components/UserPanel.vue'
|
||||
import Community from '@/pages/home/slide/Community.vue'
|
||||
import Slide0 from '@/pages/home/slide/Slide0.vue'
|
||||
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'
|
||||
import SlideHorizontal from '@/components/slide/SlideHorizontal.vue'
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import Comment from '../../components/Comment.vue'
|
||||
import Share from '../../components/Share.vue'
|
||||
import IndicatorHome from './components/IndicatorHome.vue'
|
||||
import { onActivated, onDeactivated, onMounted, onUnmounted, reactive } from 'vue'
|
||||
import bus, { EVENT_KEY } from '../../utils/bus'
|
||||
import { useNav } from '@/utils/hooks/useNav'
|
||||
import PlayFeedback from '@/pages/home/components/PlayFeedback.vue'
|
||||
import ShareTo from '@/pages/home/components/ShareTo.vue'
|
||||
import DouyinCode from '../../components/DouyinCode.vue'
|
||||
import FollowSetting from '@/pages/home/components/FollowSetting.vue'
|
||||
import BlockDialog from '../message/components/BlockDialog.vue'
|
||||
import Search from '../../components/Search.vue'
|
||||
import ConfirmDialog from '../../components/dialog/ConfirmDialog.vue'
|
||||
import FollowSetting2 from '@/pages/home/components/FollowSetting2.vue'
|
||||
import ShareToFriend from '@/pages/home/components/ShareToFriend.vue'
|
||||
import UserPanel from '@/components/UserPanel.vue'
|
||||
import Community from '@/pages/home/slide/Community.vue'
|
||||
import Slide0 from '@/pages/home/slide/Slide0.vue'
|
||||
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 baseStore = useBaseStore()
|
||||
const nav = useNav()
|
||||
const baseStore = useBaseStore()
|
||||
|
||||
const state = reactive({
|
||||
const state = reactive({
|
||||
active: true,
|
||||
baseIndex: 1,
|
||||
navIndex: 4,
|
||||
@ -269,15 +255,15 @@
|
||||
currentItem: {
|
||||
author: DefaultUser,
|
||||
isRequest: false,
|
||||
aweme_list: [],
|
||||
},
|
||||
})
|
||||
|
||||
function delayShowDialog(cb) {
|
||||
setTimeout(cb, 400)
|
||||
aweme_list: []
|
||||
}
|
||||
})
|
||||
|
||||
function setCurrentItem(item) {
|
||||
function delayShowDialog(cb) {
|
||||
setTimeout(cb, 400)
|
||||
}
|
||||
|
||||
function setCurrentItem(item) {
|
||||
if (!state.active) return
|
||||
// console.log('sss',item,state.baseIndex)
|
||||
if (state.baseIndex !== 1) return
|
||||
@ -285,13 +271,13 @@
|
||||
state.currentItem = {
|
||||
...item,
|
||||
isRequest: false,
|
||||
aweme_list: [],
|
||||
aweme_list: []
|
||||
}
|
||||
}
|
||||
// console.log('item', item)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
bus.on(EVENT_KEY.ENTER_FULLSCREEN, (e) => {
|
||||
if (!state.active) return
|
||||
state.fullScreen = true
|
||||
@ -323,33 +309,33 @@
|
||||
state.baseIndex = 2
|
||||
})
|
||||
bus.on(EVENT_KEY.CURRENT_ITEM, setCurrentItem)
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
onUnmounted(() => {
|
||||
bus.offAll()
|
||||
})
|
||||
})
|
||||
|
||||
onActivated(() => {
|
||||
onActivated(() => {
|
||||
state.active = true
|
||||
})
|
||||
})
|
||||
|
||||
onDeactivated(() => {
|
||||
onDeactivated(() => {
|
||||
state.active = false
|
||||
})
|
||||
})
|
||||
|
||||
function closeComments() {
|
||||
function closeComments() {
|
||||
bus.emit(EVENT_KEY.CLOSE_COMMENTS)
|
||||
}
|
||||
}
|
||||
|
||||
function dislike() {
|
||||
function dislike() {
|
||||
// listRef.value.dislike(state.list[1])
|
||||
// state.list[state.index] = state.list[1]
|
||||
// Utils.$notice('操作成功，将减少此类视频的推荐')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.test-slide-wrapper {
|
||||
.test-slide-wrapper {
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -455,14 +441,14 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.first-horizontal-item {
|
||||
.first-horizontal-item {
|
||||
//width: 90vw;
|
||||
//height: 80vh;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100 - var(--footer-height)) !important;
|
||||
overflow: hidden;
|
||||
border-radius: 10rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,20 +12,14 @@
|
||||
<WaterfallList :list="list" class="list">
|
||||
<template v-slot="{ item }">
|
||||
<div class="card" @click="(e) => test(e, item)">
|
||||
<img
|
||||
class="poster"
|
||||
v-lazy="_checkImgUrl(item.note_card?.cover?.url_default)"
|
||||
/>
|
||||
<img class="poster" v-lazy="_checkImgUrl(item.note_card?.cover?.url_default)" />
|
||||
<div class="bottom">
|
||||
<div class="title">
|
||||
{{ item.note_card?.display_title }}
|
||||
</div>
|
||||
<div class="b2">
|
||||
<div class="user">
|
||||
<img
|
||||
class="avatar"
|
||||
:src="_checkImgUrl(item.note_card?.user?.avatar)"
|
||||
/>
|
||||
<img class="avatar" :src="_checkImgUrl(item.note_card?.user?.avatar)" />
|
||||
<div class="name">{{ item.note_card?.user?.nickname }}</div>
|
||||
</div>
|
||||
<div class="star">
|
||||
@ -52,29 +46,29 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import { $no, _checkImgUrl, cloneDeep } from '@/utils'
|
||||
import { recommendedPost } from '@/api/user'
|
||||
import { useNav } from '@/utils/hooks/useNav'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import WaterfallList from '@/components/WaterfallList.vue'
|
||||
import ScrollList from '@/components/ScrollList.vue'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import AlbumDetail from '@/pages/other/AlbumDetail.vue'
|
||||
import Mock from 'mockjs'
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import { $no, _checkImgUrl, cloneDeep } from '@/utils'
|
||||
import { recommendedPost } from '@/api/user'
|
||||
import { useNav } from '@/utils/hooks/useNav'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import WaterfallList from '@/components/WaterfallList.vue'
|
||||
import ScrollList from '@/components/ScrollList.vue'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import AlbumDetail from '@/pages/other/AlbumDetail.vue'
|
||||
import Mock from 'mockjs'
|
||||
|
||||
//@click="nav('album-detail',{},item)"
|
||||
//@click="nav('album-detail',{},item)"
|
||||
|
||||
const nav = useNav()
|
||||
const baseStore = useBaseStore()
|
||||
const props = defineProps({
|
||||
const nav = useNav()
|
||||
const baseStore = useBaseStore()
|
||||
const props = defineProps({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
const state = reactive({
|
||||
show: false,
|
||||
current: {
|
||||
id: '',
|
||||
@ -85,24 +79,24 @@
|
||||
display_title: '',
|
||||
user: {},
|
||||
comment_list: [],
|
||||
createTime: '',
|
||||
createTime: ''
|
||||
}
|
||||
},
|
||||
},
|
||||
d: false,
|
||||
})
|
||||
let rect = ref({})
|
||||
d: false
|
||||
})
|
||||
let rect = ref({})
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => props.active,
|
||||
(n) => {
|
||||
if (n && !state.show) {
|
||||
state.show = true
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
function close() {
|
||||
function close() {
|
||||
let s = $('.shadow ')
|
||||
let domRect = rect.value
|
||||
let t = '.3'
|
||||
@ -130,16 +124,16 @@
|
||||
s.css('transition', 'all 0s')
|
||||
s.css('top', '-200vh')
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
|
||||
function test(e, item) {
|
||||
function test(e, item) {
|
||||
let data = Mock.mock({
|
||||
'comment_list|3-50': [
|
||||
{
|
||||
name: '@cname',
|
||||
text: '@cparagraph(3)',
|
||||
},
|
||||
],
|
||||
text: '@cparagraph(3)'
|
||||
}
|
||||
]
|
||||
})
|
||||
item.note_card.comment_list = data.comment_list
|
||||
item.note_card.createTime = Mock.Random.date('MM-dd')
|
||||
@ -196,11 +190,11 @@
|
||||
a.css('transform', `scale(1,1)`)
|
||||
a.css('transform-origin', `0 0`)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#Community {
|
||||
#Community {
|
||||
font-size: 14rem;
|
||||
color: white;
|
||||
padding-top: var(--home-header-height);
|
||||
@ -243,9 +237,9 @@
|
||||
margin-left: 2vw;
|
||||
width: 96vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
.card {
|
||||
border-radius: 4rem;
|
||||
overflow: hidden;
|
||||
background: var(--main-bg);
|
||||
@ -297,9 +291,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shadow {
|
||||
.shadow {
|
||||
background: var(--color-message);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -313,5 +307,5 @@
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue'
|
||||
import { _checkImgUrl, _duration, _formatNumber } from '@/utils'
|
||||
import { recommendedVideo } from '@/api/videos'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import ScrollList from '@/components/ScrollList.vue'
|
||||
import { useNav } from '@/utils/hooks/useNav'
|
||||
import { onMounted, reactive, ref, watch } from 'vue'
|
||||
import { _checkImgUrl, _duration, _formatNumber } from '@/utils'
|
||||
import { recommendedVideo } from '@/api/videos'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import ScrollList from '@/components/ScrollList.vue'
|
||||
import { useNav } from '@/utils/hooks/useNav'
|
||||
|
||||
const baseStore = useBaseStore()
|
||||
const baseStore = useBaseStore()
|
||||
|
||||
const props = defineProps({
|
||||
active: Boolean,
|
||||
})
|
||||
const props = defineProps({
|
||||
active: Boolean
|
||||
})
|
||||
|
||||
const p = {
|
||||
const p = {
|
||||
onShowComments() {
|
||||
console.log('onShowComments')
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const playingEl = ref()
|
||||
const state = reactive({
|
||||
const playingEl = ref()
|
||||
const state = reactive({
|
||||
show: false,
|
||||
muted: true,
|
||||
danmu: false,
|
||||
})
|
||||
danmu: false
|
||||
})
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => props.active,
|
||||
(n) => {
|
||||
if (n) {
|
||||
@ -46,12 +46,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const obList = []
|
||||
const obList = []
|
||||
|
||||
const vIsCanPlay = {
|
||||
const vIsCanPlay = {
|
||||
mounted(el, binding, vnode, prevVnode) {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
@ -71,7 +71,7 @@
|
||||
el.pause()
|
||||
}
|
||||
},
|
||||
{ threshold: 0.5 },
|
||||
{ threshold: 0.5 }
|
||||
)
|
||||
observer.observe(el)
|
||||
obList.push(observer)
|
||||
@ -80,10 +80,10 @@
|
||||
obList.map((v) => {
|
||||
v.disconnect()
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const nav = useNav()
|
||||
const nav = useNav()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -97,7 +97,7 @@
|
||||
:class="[
|
||||
i % 9 === 0 && 'big',
|
||||
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"
|
||||
>
|
||||
@ -120,10 +120,7 @@
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div class="option" @click.stop="state.danmu = !state.danmu">
|
||||
<img
|
||||
v-if="state.danmu"
|
||||
src="@/assets/img/icon/danmu-open.svg"
|
||||
/>
|
||||
<img v-if="state.danmu" src="@/assets/img/icon/danmu-open.svg" />
|
||||
<img v-else src="@/assets/img/icon/danmu-close.svg" />
|
||||
</div>
|
||||
<div class="option" @click.stop="state.muted = !state.muted">
|
||||
@ -136,12 +133,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
v-else
|
||||
v-lazy="_checkImgUrl(item.video.cover.url_list[0])"
|
||||
alt=""
|
||||
class="poster"
|
||||
/>
|
||||
<img v-else v-lazy="_checkImgUrl(item.video.cover.url_list[0])" alt="" class="poster" />
|
||||
<div class="duration">{{ _duration(item.duration / 1000) }}</div>
|
||||
<div class="title">
|
||||
{{ item.desc }}
|
||||
@ -170,7 +162,7 @@
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.long-video {
|
||||
.long-video {
|
||||
font-size: 14rem;
|
||||
color: white;
|
||||
padding-top: var(--home-header-height);
|
||||
@ -181,9 +173,9 @@
|
||||
var(--vh, 1vh) * 100 - var(--home-header-height) - var(--footer-height)
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
row-gap: 15rem;
|
||||
@ -341,5 +333,5 @@
|
||||
margin-left: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<SlideItem class="slide-item-class">
|
||||
<div
|
||||
class="sub-type"
|
||||
:class="state.subTypeIsTop ? 'top' : ''"
|
||||
ref="subTypeRef"
|
||||
>
|
||||
<div class="sub-type" :class="state.subTypeIsTop ? 'top' : ''" ref="subTypeRef">
|
||||
<div class="local">
|
||||
<div class="card" @touchmove.capture="stop">
|
||||
<div class="nav-item">
|
||||
@ -53,7 +49,7 @@
|
||||
:active="props.active"
|
||||
:style="{
|
||||
background: 'black',
|
||||
marginTop: state.subTypeVisible ? state.subTypeHeight : 0,
|
||||
marginTop: state.subTypeVisible ? state.subTypeHeight : 0
|
||||
}"
|
||||
:api="recommendedVideo"
|
||||
@touchstart="pageClick"
|
||||
@ -62,79 +58,73 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||
import bus, { EVENT_KEY } from '@/utils/bus'
|
||||
import Utils from '@/utils'
|
||||
import SlideList from './SlideList.vue'
|
||||
import { recommendedVideo } from '@/api/videos'
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||
import bus, { EVENT_KEY } from '@/utils/bus'
|
||||
import Utils from '@/utils'
|
||||
import SlideList from './SlideList.vue'
|
||||
import { recommendedVideo } from '@/api/videos'
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
cbs: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'update:item',
|
||||
'goUserInfo',
|
||||
'showComments',
|
||||
'showShare',
|
||||
'goMusic',
|
||||
])
|
||||
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:item', 'goUserInfo', 'showComments', 'showShare', 'goMusic'])
|
||||
|
||||
const p = {
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
const p = {
|
||||
onShowComments() {
|
||||
console.log('onShowComments')
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const subTypeRef = ref(null)
|
||||
const state = reactive({
|
||||
const subTypeRef = ref(null)
|
||||
const state = reactive({
|
||||
index: 0,
|
||||
subType: -1,
|
||||
subTypeVisible: false,
|
||||
subTypeHeight: '0',
|
||||
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
|
||||
subTypeIsTop: false,
|
||||
})
|
||||
subTypeIsTop: false
|
||||
})
|
||||
|
||||
function showSubType(e) {
|
||||
function showSubType(e) {
|
||||
Utils.$stopPropagation(e)
|
||||
console.log('subTypeRef')
|
||||
state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
|
||||
state.subTypeVisible = true
|
||||
setTimeout(() => (state.subTypeIsTop = true), 300)
|
||||
bus.emit(EVENT_KEY.OPEN_SUB_TYPE)
|
||||
}
|
||||
}
|
||||
|
||||
function pageClick(e) {
|
||||
function pageClick(e) {
|
||||
// console.log('pageClick')
|
||||
if (state.subTypeVisible) {
|
||||
state.subTypeIsTop = state.subTypeVisible = false
|
||||
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE)
|
||||
Utils.$stopPropagation(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
// getData()
|
||||
})
|
||||
onUnmounted(() => {})
|
||||
})
|
||||
onUnmounted(() => {})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.slide-item-class {
|
||||
.slide-item-class {
|
||||
position: relative;
|
||||
|
||||
.sub-type {
|
||||
@ -164,11 +154,7 @@
|
||||
border-radius: 8rem;
|
||||
width: 100%;
|
||||
//background: white;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgb(53, 51, 110),
|
||||
rgb(29, 21, 66)
|
||||
);
|
||||
background: linear-gradient(to right, rgb(53, 51, 110), rgb(29, 21, 66));
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@ -205,5 +191,5 @@
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<SlideItem class="slide-item-class">
|
||||
<div
|
||||
class="sub-type"
|
||||
:class="state.subTypeIsTop ? 'top' : ''"
|
||||
ref="subTypeRef"
|
||||
>
|
||||
<div class="sub-type" :class="state.subTypeIsTop ? 'top' : ''" ref="subTypeRef">
|
||||
<div class="card" @touchmove.capture="stop">
|
||||
<div class="nav-item" v-for="i in store.users">
|
||||
<img :src="_checkImgUrl(i.avatar_168x168.url_list[0])" alt="" />
|
||||
@ -24,7 +20,7 @@
|
||||
:active="props.active"
|
||||
:style="{
|
||||
background: 'black',
|
||||
marginTop: state.subTypeVisible ? state.subTypeHeight : 0,
|
||||
marginTop: state.subTypeVisible ? state.subTypeHeight : 0
|
||||
}"
|
||||
:api="recommendedVideo"
|
||||
@touchstart="pageClick"
|
||||
@ -33,62 +29,62 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||
import bus, { EVENT_KEY } from '@/utils/bus'
|
||||
import Utils, { _checkImgUrl } from '@/utils'
|
||||
import SlideList from './SlideList.vue'
|
||||
import { recommendedVideo } from '@/api/videos'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||
import bus, { EVENT_KEY } from '@/utils/bus'
|
||||
import Utils, { _checkImgUrl } from '@/utils'
|
||||
import SlideList from './SlideList.vue'
|
||||
import { recommendedVideo } from '@/api/videos'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
|
||||
const store = useBaseStore()
|
||||
const props = defineProps({
|
||||
const store = useBaseStore()
|
||||
const props = defineProps({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const subTypeRef = ref(null)
|
||||
const state = reactive({
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
const subTypeRef = ref(null)
|
||||
const state = reactive({
|
||||
index: 0,
|
||||
subType: -1,
|
||||
subTypeVisible: false,
|
||||
subTypeHeight: '0',
|
||||
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
|
||||
subTypeIsTop: false,
|
||||
})
|
||||
subTypeIsTop: false
|
||||
})
|
||||
|
||||
function showSubType(e) {
|
||||
function showSubType(e) {
|
||||
Utils.$stopPropagation(e)
|
||||
console.log('subTypeRef')
|
||||
state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
|
||||
state.subTypeVisible = true
|
||||
setTimeout(() => (state.subTypeIsTop = true), 300)
|
||||
bus.emit(EVENT_KEY.OPEN_SUB_TYPE)
|
||||
}
|
||||
}
|
||||
|
||||
function pageClick(e) {
|
||||
function pageClick(e) {
|
||||
// console.log('pageClick')
|
||||
if (state.subTypeVisible) {
|
||||
state.subTypeIsTop = state.subTypeVisible = false
|
||||
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE)
|
||||
Utils.$stopPropagation(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
// getData()
|
||||
})
|
||||
onUnmounted(() => {})
|
||||
})
|
||||
onUnmounted(() => {})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.slide-item-class {
|
||||
.slide-item-class {
|
||||
position: relative;
|
||||
|
||||
.sub-type {
|
||||
@ -151,5 +147,5 @@
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,22 +1,18 @@
|
||||
<template>
|
||||
<SlideItem>
|
||||
<SlideList
|
||||
style="background: #000"
|
||||
:active="props.active"
|
||||
:api="recommendedVideo"
|
||||
/>
|
||||
<SlideList style="background: #000" :active="props.active" :api="recommendedVideo" />
|
||||
</SlideItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import SlideList from './SlideList.vue'
|
||||
import { recommendedVideo } from '@/api/videos'
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import SlideList from './SlideList.vue'
|
||||
import { recommendedVideo } from '@/api/videos'
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
default: false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -16,70 +16,70 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import SlideVerticalInfinite from '@/components/slide/SlideVerticalInfinite.vue'
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||
import bus, { EVENT_KEY } from '@/utils/bus'
|
||||
import { $notice } from '@/utils'
|
||||
import { useSlideListItemRender } from '@/utils/hooks/useSlideListItemRender'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import SlideVerticalInfinite from '@/components/slide/SlideVerticalInfinite.vue'
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||
import bus, { EVENT_KEY } from '@/utils/bus'
|
||||
import { $notice } from '@/utils'
|
||||
import { useSlideListItemRender } from '@/utils/hooks/useSlideListItemRender'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
cbs: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
api: {
|
||||
type: Function,
|
||||
default: void 0,
|
||||
default: void 0
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
default: 0
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
})
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
const baseStore = useBaseStore()
|
||||
const baseStore = useBaseStore()
|
||||
|
||||
const p = {
|
||||
const p = {
|
||||
onShowComments() {
|
||||
console.log('onShowComments')
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const render = useSlideListItemRender({ ...props.cbs, ...p })
|
||||
const listRef = ref(null)
|
||||
const state = reactive({
|
||||
const render = useSlideListItemRender({ ...props.cbs, ...p })
|
||||
const listRef = ref(null)
|
||||
const state = reactive({
|
||||
index: props.index,
|
||||
list: props.list,
|
||||
uniqueId: 'uniqueId1',
|
||||
totalSize: 0,
|
||||
pageSize: 10,
|
||||
pageNo: 0,
|
||||
})
|
||||
pageNo: 0
|
||||
})
|
||||
|
||||
function loadMore() {
|
||||
function loadMore() {
|
||||
if (!baseStore.loading) {
|
||||
state.pageNo++
|
||||
getData()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function getData(refresh = false) {
|
||||
async function getData(refresh = false) {
|
||||
if (baseStore.loading) return
|
||||
baseStore.loading = true
|
||||
let res = await props.api({
|
||||
pageNo: refresh ? 0 : state.pageNo,
|
||||
pageSize: state.pageSize,
|
||||
pageSize: state.pageSize
|
||||
})
|
||||
// console.log('getSlide4Data-', 'refresh', refresh, res)
|
||||
baseStore.loading = false
|
||||
@ -92,39 +92,39 @@
|
||||
} else {
|
||||
state.pageNo--
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function dislike() {
|
||||
function dislike() {
|
||||
listRef.value.dislike(state.list[1])
|
||||
state.list[state.index] = state.list[1]
|
||||
$notice('操作成功，将减少此类视频的推荐')
|
||||
}
|
||||
}
|
||||
|
||||
function end() {
|
||||
function end() {
|
||||
// this.$notice('暂时没有更多了')
|
||||
}
|
||||
}
|
||||
|
||||
function click(uniqueId) {
|
||||
function click(uniqueId) {
|
||||
if (uniqueId !== state.uniqueId) return
|
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
|
||||
uniqueId,
|
||||
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) {
|
||||
state.list[position.index] = item
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
bus.on(EVENT_KEY.SINGLE_CLICK, click)
|
||||
bus.on(EVENT_KEY.UPDATE_ITEM, updateItem)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
})
|
||||
onUnmounted(() => {
|
||||
bus.off(EVENT_KEY.SINGLE_CLICK, click)
|
||||
bus.on(EVENT_KEY.UPDATE_ITEM, updateItem)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -7,7 +7,7 @@ export default {
|
||||
isOtherLogin: false,
|
||||
showAnim: false,
|
||||
showTooltip: false,
|
||||
loading: false,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -30,6 +30,6 @@ export default {
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'Help',
|
||||
props: {},
|
||||
data() {
|
||||
@ -22,14 +22,14 @@
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {},
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.Help {
|
||||
.Help {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -51,5 +51,5 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -33,24 +33,16 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
我已阅读并同意
|
||||
<span
|
||||
class="link"
|
||||
@click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
|
||||
<span class="link" @click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
|
||||
>用户协议</span
|
||||
>
|
||||
和
|
||||
<span
|
||||
class="link"
|
||||
@click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
|
||||
<span class="link" @click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
|
||||
>隐私政策</span
|
||||
>
|
||||
<div>
|
||||
以及
|
||||
<span
|
||||
class="link"
|
||||
@click="
|
||||
$nav('/service-protocol', { type: '中国移动认证服务协议' })
|
||||
"
|
||||
<span class="link" @click="$nav('/service-protocol', { type: '中国移动认证服务协议' })"
|
||||
>《中国移动认证服务条款》</span
|
||||
>
|
||||
，同时登录并使用抖音火山版（原“火山小视频”）和抖音
|
||||
@ -61,26 +53,10 @@
|
||||
<div class="other-login">
|
||||
<transition name="fade">
|
||||
<div v-if="isOtherLogin" class="icons">
|
||||
<img
|
||||
@click="$no"
|
||||
src="../../assets/img/icon/login/toutiao-round.png"
|
||||
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=""
|
||||
/>
|
||||
<img @click="$no" src="../../assets/img/icon/login/toutiao-round.png" 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>
|
||||
</transition>
|
||||
</div>
|
||||
@ -96,16 +72,16 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Check from '../../components/Check'
|
||||
import Tooltip from './components/Tooltip'
|
||||
import Loading from '../../components/Loading'
|
||||
import Check from '../../components/Check'
|
||||
import Tooltip from './components/Tooltip'
|
||||
import Loading from '../../components/Loading'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'login',
|
||||
components: {
|
||||
Check,
|
||||
Tooltip,
|
||||
Loading,
|
||||
Loading
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -115,8 +91,8 @@
|
||||
showTooltip: false,
|
||||
loading: {
|
||||
login: false,
|
||||
getPhone: false,
|
||||
},
|
||||
getPhone: false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -144,15 +120,15 @@
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.login {
|
||||
.login {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -237,5 +213,5 @@
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,12 +11,7 @@
|
||||
<div class="sub-title">未注册的手机号验证通过后将自动注册</div>
|
||||
</div>
|
||||
|
||||
<LoginInput
|
||||
autofocus
|
||||
type="phone"
|
||||
v-model="phone"
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
<LoginInput autofocus type="phone" v-model="phone" placeholder="请输入手机号" />
|
||||
|
||||
<div class="notice" v-if="notice">
|
||||
{{ notice }}
|
||||
@ -29,15 +24,11 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
已阅读并同意
|
||||
<span
|
||||
class="link"
|
||||
@click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
|
||||
<span class="link" @click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
|
||||
>用户协议</span
|
||||
>
|
||||
和
|
||||
<span
|
||||
class="link"
|
||||
@click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
|
||||
<span class="link" @click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
|
||||
>隐私政策</span
|
||||
>
|
||||
，同时登录并使用抖音火山版（原“火山小视频”）和抖音
|
||||
@ -91,25 +82,25 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Check from '../../components/Check'
|
||||
import Tooltip from './components/Tooltip'
|
||||
import LoginInput from './components/LoginInput'
|
||||
import Base from './Base.js'
|
||||
import FromBottomDialog from '../../components/dialog/FromBottomDialog'
|
||||
import Check from '../../components/Check'
|
||||
import Tooltip from './components/Tooltip'
|
||||
import LoginInput from './components/LoginInput'
|
||||
import Base from './Base.js'
|
||||
import FromBottomDialog from '../../components/dialog/FromBottomDialog'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'OtherLogin',
|
||||
extends: Base,
|
||||
components: {
|
||||
Check,
|
||||
Tooltip,
|
||||
LoginInput,
|
||||
FromBottomDialog,
|
||||
FromBottomDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
notice: '',
|
||||
notice: ''
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -129,16 +120,16 @@
|
||||
if (res) {
|
||||
this.isOtherLogin = true
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import 'Base.less';
|
||||
@import '../../assets/less/index';
|
||||
@import 'Base.less';
|
||||
|
||||
.other-login {
|
||||
.other-login {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -174,5 +165,5 @@
|
||||
background: whitesmoke;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,12 +10,7 @@
|
||||
<div class="title">手机号密码登录</div>
|
||||
</div>
|
||||
|
||||
<LoginInput
|
||||
autofocus
|
||||
type="phone"
|
||||
v-model="phone"
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
<LoginInput autofocus type="phone" v-model="phone" placeholder="请输入手机号" />
|
||||
<LoginInput
|
||||
autofocus
|
||||
class="mt1r"
|
||||
@ -31,15 +26,11 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
已阅读并同意
|
||||
<span
|
||||
class="link"
|
||||
@click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
|
||||
<span class="link" @click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
|
||||
>用户协议</span
|
||||
>
|
||||
和
|
||||
<span
|
||||
class="link"
|
||||
@click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
|
||||
<span class="link" @click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
|
||||
>隐私政策</span
|
||||
>
|
||||
，同时登录并使用抖音火山版（原“火山小视频”）和抖音
|
||||
@ -62,40 +53,38 @@
|
||||
|
||||
<div class="options">
|
||||
<span>
|
||||
忘记了？<span class="link" @click="$nav('/login/retrieve-password')"
|
||||
>找回密码</span
|
||||
>
|
||||
忘记了？<span class="link" @click="$nav('/login/retrieve-password')">找回密码</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Check from '../../components/Check'
|
||||
import LoginInput from './components/LoginInput'
|
||||
import Tooltip from './components/Tooltip'
|
||||
import Base from './Base'
|
||||
import Check from '../../components/Check'
|
||||
import LoginInput from './components/LoginInput'
|
||||
import Tooltip from './components/Tooltip'
|
||||
import Base from './Base'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'PasswordLogin',
|
||||
extends: Base,
|
||||
components: {
|
||||
Check,
|
||||
Tooltip,
|
||||
LoginInput,
|
||||
LoginInput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
password: '',
|
||||
code: '',
|
||||
notice: '',
|
||||
notice: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
return !(this.phone && this.password)
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
@ -104,16 +93,16 @@
|
||||
if (res) {
|
||||
this.loading = true
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import 'Base.less';
|
||||
@import '../../assets/less/index';
|
||||
@import 'Base.less';
|
||||
|
||||
.PasswordLogin {
|
||||
.PasswordLogin {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -123,5 +112,5 @@
|
||||
color: black;
|
||||
font-size: 14rem;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,8 +5,7 @@
|
||||
<div class="desc">
|
||||
<div class="title">找回密码</div>
|
||||
<div class="sub-title">
|
||||
验证码已通过短信发送到+86 13800138000。 密码为8 -
|
||||
20位，至少包含字母、数字、符号2种组合
|
||||
验证码已通过短信发送到+86 13800138000。 密码为8 - 20位，至少包含字母、数字、符号2种组合
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -33,15 +32,11 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
已阅读并同意
|
||||
<span
|
||||
class="link"
|
||||
@click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
|
||||
<span class="link" @click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
|
||||
>用户协议</span
|
||||
>
|
||||
和
|
||||
<span
|
||||
class="link"
|
||||
@click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
|
||||
<span class="link" @click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
|
||||
>隐私政策</span
|
||||
>
|
||||
，同时登录并使用抖音火山版（原“火山小视频”）和抖音
|
||||
@ -64,28 +59,24 @@
|
||||
</dy-button>
|
||||
|
||||
<div class="options" v-if="showVoiceCode">
|
||||
<span>
|
||||
收不到短信？<span class="link" @click="getVoiceCode"
|
||||
>获取语音验证码</span
|
||||
>
|
||||
</span>
|
||||
<span> 收不到短信？<span class="link" @click="getVoiceCode">获取语音验证码</span> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Check from '../../components/Check'
|
||||
import LoginInput from './components/LoginInput'
|
||||
import Tooltip from './components/Tooltip'
|
||||
import Base from './Base'
|
||||
import Check from '../../components/Check'
|
||||
import LoginInput from './components/LoginInput'
|
||||
import Tooltip from './components/Tooltip'
|
||||
import Base from './Base'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'RetrievePassword',
|
||||
extends: Base,
|
||||
components: {
|
||||
Check,
|
||||
Tooltip,
|
||||
LoginInput,
|
||||
LoginInput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -94,13 +85,13 @@
|
||||
code: '',
|
||||
notice: '',
|
||||
isSendVerificationCode: true,
|
||||
showVoiceCode: false,
|
||||
showVoiceCode: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
return !(this.code && this.password)
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
@ -124,11 +115,11 @@
|
||||
null,
|
||||
'找回账号',
|
||||
'返回',
|
||||
'',
|
||||
''
|
||||
)
|
||||
}, 2000)
|
||||
},
|
||||
'知道了',
|
||||
'知道了'
|
||||
)
|
||||
},
|
||||
//TODO loading样式不对
|
||||
@ -143,16 +134,16 @@
|
||||
if (res) {
|
||||
this.loading = true
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import 'Base.less';
|
||||
@import '../../assets/less/index';
|
||||
@import 'Base.less';
|
||||
|
||||
.RetrievePassword {
|
||||
.RetrievePassword {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -162,5 +153,5 @@
|
||||
color: black;
|
||||
font-size: 14rem;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,11 +20,7 @@
|
||||
@send="sendCode"
|
||||
/>
|
||||
<div class="options" v-if="showVoiceCode">
|
||||
<span>
|
||||
收不到短信？<span class="link" @click="getVoiceCode"
|
||||
>获取语音验证码</span
|
||||
>
|
||||
</span>
|
||||
<span> 收不到短信？<span class="link" @click="getVoiceCode">获取语音验证码</span> </span>
|
||||
</div>
|
||||
|
||||
<dy-button
|
||||
@ -40,14 +36,14 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Check from '../../components/Check'
|
||||
import LoginInput from './components/LoginInput'
|
||||
import Check from '../../components/Check'
|
||||
import LoginInput from './components/LoginInput'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'VerificationCode',
|
||||
components: {
|
||||
Check,
|
||||
LoginInput,
|
||||
LoginInput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -58,7 +54,7 @@
|
||||
password: '',
|
||||
code: '',
|
||||
isSendVerificationCode: true,
|
||||
showVoiceCode: false,
|
||||
showVoiceCode: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -83,11 +79,11 @@
|
||||
null,
|
||||
'找回账号',
|
||||
'返回',
|
||||
'',
|
||||
''
|
||||
)
|
||||
}, 2000)
|
||||
},
|
||||
'知道了',
|
||||
'知道了'
|
||||
)
|
||||
},
|
||||
//TODO loading样式不对
|
||||
@ -103,16 +99,16 @@
|
||||
this.isSendVerificationCode = true
|
||||
this.loading = false
|
||||
}, 1000)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import 'Base.less';
|
||||
@import '../../assets/less/index';
|
||||
@import 'Base.less';
|
||||
|
||||
.VerificationCode {
|
||||
.VerificationCode {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -130,5 +126,5 @@
|
||||
.button {
|
||||
margin-top: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -59,36 +59,34 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="right" @click="send">
|
||||
<span :class="isSendVerificationCode && 'disabled'">{{
|
||||
verificationCodeBtnText
|
||||
}}</span>
|
||||
<span :class="isSendVerificationCode && 'disabled'">{{ verificationCodeBtnText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'LoginInput',
|
||||
props: {
|
||||
modelValue: '',
|
||||
placeholder: '',
|
||||
type: {
|
||||
type: String,
|
||||
default: 'phone',
|
||||
default: 'phone'
|
||||
},
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
isSendVerificationCode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isTyping: false,
|
||||
verificationCodeBtnText: 60,
|
||||
verificationCodeBtnText: 60
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -98,8 +96,8 @@
|
||||
},
|
||||
set(e) {
|
||||
this.$emit('update:modelValue', e)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isSendVerificationCode: {
|
||||
@ -117,8 +115,8 @@
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
delaySetTypingFalse() {
|
||||
@ -130,15 +128,15 @@
|
||||
if (!this.isSendVerificationCode) {
|
||||
this.$emit('send')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.input-number {
|
||||
.input-number {
|
||||
display: flex;
|
||||
background: whitesmoke;
|
||||
padding: 15rem 10rem;
|
||||
@ -224,5 +222,5 @@
|
||||
//letter-spacing: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,38 +7,38 @@
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'Popover',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {},
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.scale-enter-from,
|
||||
.scale-leave-to {
|
||||
.scale-enter-from,
|
||||
.scale-leave-to {
|
||||
//transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.Tooltip {
|
||||
.Tooltip {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
font-size: 12rem;
|
||||
@ -56,5 +56,5 @@
|
||||
left: 10rem;
|
||||
bottom: -14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div class="Me">
|
||||
<SlideRowList
|
||||
name="baseSlide"
|
||||
style="width: 100vw"
|
||||
v-model:active-index="baseActiveIndex"
|
||||
>
|
||||
<SlideRowList name="baseSlide" style="width: 100vw" v-model:active-index="baseActiveIndex">
|
||||
<SlideItem>
|
||||
<div ref="float" class="float" :class="floatFixed ? 'fixed' : ''">
|
||||
<div
|
||||
@ -26,10 +22,7 @@
|
||||
:style="floatFixed ? 'opacity: 0;' : ''"
|
||||
@click="$nav('/me/request-update')"
|
||||
>
|
||||
<Icon
|
||||
class="finger"
|
||||
icon="fluent-emoji-high-contrast:middle-finger"
|
||||
/>
|
||||
<Icon class="finger" icon="fluent-emoji-high-contrast:middle-finger" />
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
@ -57,33 +50,21 @@
|
||||
<header
|
||||
ref="header"
|
||||
:style="{
|
||||
backgroundImage: `url(${_checkImgUrl(userinfo.cover_url[0].url_list[0])})`,
|
||||
backgroundImage: `url(${_checkImgUrl(userinfo.cover_url[0].url_list[0])})`
|
||||
}"
|
||||
@click="
|
||||
previewImg = _checkImgUrl(userinfo.cover_url[0].url_list[0])
|
||||
"
|
||||
@click="previewImg = _checkImgUrl(userinfo.cover_url[0].url_list[0])"
|
||||
>
|
||||
<div class="info">
|
||||
<img
|
||||
:src="_checkImgUrl(userinfo.avatar_168x168.url_list[0])"
|
||||
class="avatar"
|
||||
@click.stop="
|
||||
previewImg = _checkImgUrl(
|
||||
userinfo.avatar_300x300.url_list[0],
|
||||
)
|
||||
"
|
||||
@click.stop="previewImg = _checkImgUrl(userinfo.avatar_300x300.url_list[0])"
|
||||
/>
|
||||
<div class="right">
|
||||
<p class="name">{{ userinfo.nickname }}</p>
|
||||
<div class="number mb1r">
|
||||
<span class="mr1r" v-if="userinfo.is_private"
|
||||
>私密账号</span
|
||||
>
|
||||
<span
|
||||
>抖音号：{{
|
||||
_getUserDouyinId({ author: userinfo })
|
||||
}}</span
|
||||
>
|
||||
<span class="mr1r" v-if="userinfo.is_private">私密账号</span>
|
||||
<span>抖音号：{{ _getUserDouyinId({ author: userinfo }) }}</span>
|
||||
<img
|
||||
src="../../assets/img/icon/me/qrcode-gray.png"
|
||||
alt=""
|
||||
@ -97,47 +78,25 @@
|
||||
<div class="head">
|
||||
<div class="heat">
|
||||
<div class="text" @click="isShowStarCount = true">
|
||||
<span class="num">{{
|
||||
_formatNumber(userinfo.aweme_count)
|
||||
}}</span>
|
||||
<span class="num">{{ _formatNumber(userinfo.aweme_count) }}</span>
|
||||
<span>获赞</span>
|
||||
</div>
|
||||
<div
|
||||
class="text"
|
||||
@click="$nav('/people/follow-and-fans', { type: 0 })"
|
||||
>
|
||||
<span class="num">{{
|
||||
_formatNumber(userinfo.following_count)
|
||||
}}</span>
|
||||
<div class="text" @click="$nav('/people/follow-and-fans', { type: 0 })">
|
||||
<span class="num">{{ _formatNumber(userinfo.following_count) }}</span>
|
||||
<span>朋友</span>
|
||||
</div>
|
||||
<div
|
||||
class="text"
|
||||
@click="$nav('/people/follow-and-fans', { type: 0 })"
|
||||
>
|
||||
<span class="num">{{
|
||||
_formatNumber(userinfo.following_count)
|
||||
}}</span>
|
||||
<div class="text" @click="$nav('/people/follow-and-fans', { type: 0 })">
|
||||
<span class="num">{{ _formatNumber(userinfo.following_count) }}</span>
|
||||
<span>关注</span>
|
||||
</div>
|
||||
<div
|
||||
class="text"
|
||||
@click="$nav('/people/follow-and-fans', { type: 1 })"
|
||||
>
|
||||
<span class="num">{{
|
||||
_formatNumber(userinfo.follower_count)
|
||||
}}</span>
|
||||
<div class="text" @click="$nav('/people/follow-and-fans', { type: 1 })">
|
||||
<span class="num">{{ _formatNumber(userinfo.follower_count) }}</span>
|
||||
<span>粉丝</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button" @click="$nav('/people/find-acquaintance')">
|
||||
添加朋友
|
||||
<div class="button" @click="$nav('/people/find-acquaintance')">添加朋友</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">
|
||||
<span>点击添加介绍，让大家认识你...</span>
|
||||
<img src="../../assets/img/icon/me/write-gray.png" alt="" />
|
||||
@ -151,18 +110,12 @@
|
||||
src="../../assets/img/icon/me/woman.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-if="userinfo.gender == 1"
|
||||
src="../../assets/img/icon/me/man.png"
|
||||
alt=""
|
||||
/>
|
||||
<img v-if="userinfo.gender == 1" src="../../assets/img/icon/me/man.png" alt="" />
|
||||
<span>{{ userinfo.user_age }}岁</span>
|
||||
</div>
|
||||
<div class="item" v-if="userinfo.province || userinfo.city">
|
||||
{{ userinfo.province }}
|
||||
<template v-if="userinfo.province && userinfo.city">
|
||||
-
|
||||
</template>
|
||||
<template v-if="userinfo.province && userinfo.city"> - </template>
|
||||
{{ userinfo.city }}
|
||||
</div>
|
||||
<div class="item" v-if="userinfo.school?.name">
|
||||
@ -202,26 +155,12 @@
|
||||
:style="videoSlideRowListStyle"
|
||||
v-model:active-index="contentIndex"
|
||||
>
|
||||
<SlideItem
|
||||
class="SlideItem"
|
||||
@scroll="scroll"
|
||||
:style="SlideItemStyle"
|
||||
>
|
||||
<Posters
|
||||
v-if="videos.my.total !== -1"
|
||||
:list="videos.my.list"
|
||||
></Posters>
|
||||
<Loading
|
||||
v-if="loadings.loading0"
|
||||
:is-full-screen="false"
|
||||
></Loading>
|
||||
<SlideItem class="SlideItem" @scroll="scroll" :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 />
|
||||
</SlideItem>
|
||||
<SlideItem
|
||||
class="SlideItem"
|
||||
@scroll="scroll"
|
||||
:style="SlideItemStyle"
|
||||
>
|
||||
<SlideItem class="SlideItem" @scroll="scroll" :style="SlideItemStyle">
|
||||
<div class="notice">
|
||||
<img src="../../assets/img/icon/me/lock-gray.png" alt="" />
|
||||
<span>只有你能看到设为私密的作品和日常</span>
|
||||
@ -231,36 +170,19 @@
|
||||
mode="date"
|
||||
:list="videos.private.list"
|
||||
></Posters>
|
||||
<Loading
|
||||
v-if="loadings.loading1"
|
||||
:is-full-screen="false"
|
||||
></Loading>
|
||||
<Loading v-if="loadings.loading1" :is-full-screen="false"></Loading>
|
||||
<no-more v-else />
|
||||
</SlideItem>
|
||||
<SlideItem
|
||||
class="SlideItem"
|
||||
@scroll="scroll"
|
||||
:style="SlideItemStyle"
|
||||
>
|
||||
<SlideItem class="SlideItem" @scroll="scroll" :style="SlideItemStyle">
|
||||
<div class="notice">
|
||||
<img src="../../assets/img/icon/me/lock-gray.png" alt="" />
|
||||
<span>只有你能看到自己的喜欢列表</span>
|
||||
</div>
|
||||
<Posters
|
||||
v-if="videos.like.total !== -1"
|
||||
:list="videos.like.list"
|
||||
></Posters>
|
||||
<Loading
|
||||
v-if="loadings.loading2"
|
||||
:is-full-screen="false"
|
||||
></Loading>
|
||||
<Posters v-if="videos.like.total !== -1" :list="videos.like.list"></Posters>
|
||||
<Loading v-if="loadings.loading2" :is-full-screen="false"></Loading>
|
||||
<no-more v-else />
|
||||
</SlideItem>
|
||||
<SlideItem
|
||||
class="SlideItem"
|
||||
@scroll="scroll"
|
||||
:style="SlideItemStyle"
|
||||
>
|
||||
<SlideItem class="SlideItem" @scroll="scroll" :style="SlideItemStyle">
|
||||
<div class="notice">
|
||||
<img src="../../assets/img/icon/me/lock-gray.png" alt="" />
|
||||
<span>只有你能看到自己的收藏列表</span>
|
||||
@ -269,10 +191,7 @@
|
||||
<div class="video" v-if="videos.collect.video.total !== -1">
|
||||
<div class="top" @click="$nav('/me/collect/video-collect')">
|
||||
<div class="left">
|
||||
<img
|
||||
src="../../assets/img/icon/me/video-whitegray.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/me/video-whitegray.png" alt="" />
|
||||
<span>视频</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
@ -289,10 +208,7 @@
|
||||
<div class="music" v-if="videos.collect.music.total !== -1">
|
||||
<div class="top" @click="$nav('/me/collect/music-collect')">
|
||||
<div class="left">
|
||||
<img
|
||||
src="../../assets/img/icon/me/music-whitegray.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/me/music-whitegray.png" alt="" />
|
||||
<span>音乐</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
@ -312,109 +228,66 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Loading
|
||||
v-if="loadings.loading3"
|
||||
:is-full-screen="false"
|
||||
></Loading>
|
||||
<Loading v-if="loadings.loading3" :is-full-screen="false"></Loading>
|
||||
<no-more v-else />
|
||||
</SlideItem>
|
||||
</SlideRowList>
|
||||
</div>
|
||||
<Footer v-bind:init-tab="5" />
|
||||
<transition name="fade">
|
||||
<div
|
||||
class="mask"
|
||||
v-if="baseActiveIndex === 1"
|
||||
@click="baseActiveIndex = 0"
|
||||
></div>
|
||||
<div class="mask" v-if="baseActiveIndex === 1" @click="baseActiveIndex = 0"></div>
|
||||
</transition>
|
||||
</SlideItem>
|
||||
<SlideItem style="width: 70vw; overflow: auto">
|
||||
<transition name="fade1">
|
||||
<div class="ul" v-if="!isMoreFunction">
|
||||
<div class="li" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/shopping.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/shopping.png" alt="" />
|
||||
<span>我的订单</span>
|
||||
</div>
|
||||
<div class="li" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/wallet.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/wallet.png" alt="" />
|
||||
<span>钱包</span>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="li" @click="$nav('/me/my-card')">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/qrcode.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/qrcode.png" alt="" />
|
||||
<span>我的二维码</span>
|
||||
</div>
|
||||
<div class="li" @click="$nav('/me/right-menu/look-history')">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/time.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/time.png" alt="" />
|
||||
<span>观看历史</span>
|
||||
</div>
|
||||
<div class="li" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/clock.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/clock.png" alt="" />
|
||||
<span>时间管理</span>
|
||||
</div>
|
||||
<div class="li" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/workbench.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/workbench.png" alt="" />
|
||||
<span>创作者服务中心</span>
|
||||
</div>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="li" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/bytedance-mini-app.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/bytedance-mini-app.png" alt="" />
|
||||
<span>小程序</span>
|
||||
</div>
|
||||
<div class="li" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/gongyi.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/gongyi.png" alt="" />
|
||||
<span>抖音公益</span>
|
||||
</div>
|
||||
<div
|
||||
class="li"
|
||||
@click="$nav('/me/right-menu/minor-protection/index')"
|
||||
>
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/umbrella.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="li" @click="$nav('/me/right-menu/minor-protection/index')">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/umbrella.png" alt="" />
|
||||
<span>未成年保护工具</span>
|
||||
</div>
|
||||
<div class="li" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/headset.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/headset.png" alt="" />
|
||||
<span>我的客服</span>
|
||||
</div>
|
||||
<div class="li" @click="$nav('/me/right-menu/setting')">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/setting-one.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/setting-one.png" alt="" />
|
||||
<span>设置</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -422,84 +295,49 @@
|
||||
<div class="title">生活服务</div>
|
||||
<div class="functions">
|
||||
<div class="function" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/quan.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/quan.png" alt="" />
|
||||
<span>卡券</span>
|
||||
</div>
|
||||
<div class="function" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/sd-card.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/sd-card.png" alt="" />
|
||||
<span>免流量</span>
|
||||
</div>
|
||||
<div class="function" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/alarmmmmmmmmmmmm.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/alarmmmmmmmmmmmm.png" alt="" />
|
||||
<span>视频彩铃</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">拓展功能</div>
|
||||
<div class="functions">
|
||||
<div class="function" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/sun-one.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/sun-one.png" alt="" />
|
||||
<span>我的动态</span>
|
||||
</div>
|
||||
<div class="function" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/download.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/download.png" alt="" />
|
||||
<span>我的缓存</span>
|
||||
</div>
|
||||
<div class="function" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/hot.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/hot.png" alt="" />
|
||||
<span>上热门</span>
|
||||
</div>
|
||||
<div class="function" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/shop.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/shop.png" alt="" />
|
||||
<span>小店随心推</span>
|
||||
</div>
|
||||
<div class="function" @click="$no">
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/yuandi.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/img/icon/newicon/left_menu/yuandi.png" alt="" />
|
||||
<span>投教园地</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="button-ctn">
|
||||
<div
|
||||
class="button"
|
||||
v-if="!isMoreFunction"
|
||||
@click="isMoreFunction = true"
|
||||
>
|
||||
<img
|
||||
src="../../assets/img/icon/newicon/left_menu/more.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="button" v-if="!isMoreFunction" @click="isMoreFunction = true">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/more.png" alt="" />
|
||||
<span>更多功能</span>
|
||||
</div>
|
||||
<div
|
||||
class="button"
|
||||
v-if="isMoreFunction"
|
||||
@click="isMoreFunction = false"
|
||||
>
|
||||
<div class="button" v-if="isMoreFunction" @click="isMoreFunction = false">
|
||||
<span>返回</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -526,31 +364,27 @@
|
||||
@cancel="isShowStarCount = false"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<img
|
||||
style="width: 100%"
|
||||
src="../../assets/img/icon/star-bg.png"
|
||||
alt=""
|
||||
/>
|
||||
<img style="width: 100%" src="../../assets/img/icon/star-bg.png" alt="" />
|
||||
</template>
|
||||
</ConfirmDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Posters from '../../components/Posters'
|
||||
import Footer from '../../components/Footer'
|
||||
import Indicator from '../../components/slide/Indicator'
|
||||
import { nextTick } from 'vue'
|
||||
import { mapState } from 'pinia'
|
||||
import Posters from '../../components/Posters'
|
||||
import Footer from '../../components/Footer'
|
||||
import Indicator from '../../components/slide/Indicator'
|
||||
import { nextTick } from 'vue'
|
||||
import { mapState } from 'pinia'
|
||||
|
||||
import bus from '../../utils/bus'
|
||||
import ConfirmDialog from '../../components/dialog/ConfirmDialog'
|
||||
import { $no, _checkImgUrl, _formatNumber, _getUserDouyinId } from '@/utils'
|
||||
import SlideHorizontal from '@/components/slide/SlideHorizontal.vue'
|
||||
import { likeVideo, myVideo, privateVideo } from '@/api/videos'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { userCollect } from '@/api/user'
|
||||
import bus from '../../utils/bus'
|
||||
import ConfirmDialog from '../../components/dialog/ConfirmDialog'
|
||||
import { $no, _checkImgUrl, _formatNumber, _getUserDouyinId } from '@/utils'
|
||||
import SlideHorizontal from '@/components/slide/SlideHorizontal.vue'
|
||||
import { likeVideo, myVideo, privateVideo } from '@/api/videos'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { userCollect } from '@/api/user'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'Me',
|
||||
components: { Posters, Footer, Indicator, ConfirmDialog, SlideHorizontal },
|
||||
data() {
|
||||
@ -569,7 +403,7 @@
|
||||
headerHeight: 0,
|
||||
descHeight: 0,
|
||||
videoSlideHeight: 0,
|
||||
maxSlideHeight: 0,
|
||||
maxSlideHeight: 0
|
||||
},
|
||||
videoItemHeight: 0,
|
||||
startLocationY: 0,
|
||||
@ -582,28 +416,28 @@
|
||||
my: {
|
||||
list: [],
|
||||
total: -1,
|
||||
pageNo: 0,
|
||||
pageNo: 0
|
||||
},
|
||||
private: {
|
||||
list: [],
|
||||
total: -1,
|
||||
pageNo: 0,
|
||||
pageNo: 0
|
||||
},
|
||||
like: {
|
||||
list: [],
|
||||
total: -1,
|
||||
pageNo: 0,
|
||||
pageNo: 0
|
||||
},
|
||||
collect: {
|
||||
video: {
|
||||
list: [],
|
||||
total: -1,
|
||||
total: -1
|
||||
},
|
||||
music: {
|
||||
list: [],
|
||||
total: -1,
|
||||
},
|
||||
},
|
||||
total: -1
|
||||
}
|
||||
}
|
||||
},
|
||||
pageSize: 15,
|
||||
initSlideHeight: 0,
|
||||
@ -611,12 +445,12 @@
|
||||
loading0: false,
|
||||
loading1: false,
|
||||
loading2: false,
|
||||
loading3: false,
|
||||
loading3: false
|
||||
},
|
||||
tempScroll: false,
|
||||
acceleration: 1.2,
|
||||
sprint: 15,
|
||||
canScroll: true,
|
||||
canScroll: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -625,19 +459,19 @@
|
||||
height:
|
||||
this.refs.videoSlideHeight !== 0
|
||||
? this.refs.videoSlideHeight + 'px'
|
||||
: 'calc(var(--vh, 1vh) * 100 - 146rem)',
|
||||
: 'calc(var(--vh, 1vh) * 100 - 146rem)'
|
||||
}
|
||||
},
|
||||
SlideItemStyle() {
|
||||
if (this.tempScroll || this.isScroll) return { overflow: 'auto' }
|
||||
return { overflow: 'hidden' }
|
||||
},
|
||||
...mapState(useBaseStore, ['userinfo', 'bodyHeight', 'bodyWidth']),
|
||||
...mapState(useBaseStore, ['userinfo', 'bodyHeight', 'bodyWidth'])
|
||||
},
|
||||
watch: {
|
||||
contentIndex(newVal, oldVal) {
|
||||
this.changeIndex(newVal, oldVal)
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
@ -679,9 +513,8 @@
|
||||
})
|
||||
} else {
|
||||
scrollAreaHeight =
|
||||
Math.ceil(
|
||||
this.videos[Object.keys(this.videos)[index]].list.length / 3,
|
||||
) * this.videoItemHeight
|
||||
Math.ceil(this.videos[Object.keys(this.videos)[index]].list.length / 3) *
|
||||
this.videoItemHeight
|
||||
switch (index) {
|
||||
case 0:
|
||||
scrollAreaHeight += 60
|
||||
@ -715,21 +548,21 @@
|
||||
case 0:
|
||||
res = await myVideo({
|
||||
pageNo: this.videos.my.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
if (res.code === this.SUCCESS) this.videos.my = res.data
|
||||
break
|
||||
case 1:
|
||||
res = await privateVideo({
|
||||
pageNo: this.videos.private.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
if (res.code === this.SUCCESS) this.videos.private = res.data
|
||||
break
|
||||
case 2:
|
||||
res = await likeVideo({
|
||||
pageNo: this.videos.like.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
if (res.code === this.SUCCESS) this.videos.like = res.data
|
||||
break
|
||||
@ -772,25 +605,25 @@
|
||||
case 0:
|
||||
res = await myVideo({
|
||||
pageNo: videoOb.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
break
|
||||
case 1:
|
||||
res = await privateVideo({
|
||||
pageNo: videoOb.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
break
|
||||
case 2:
|
||||
res = await likeVideo({
|
||||
pageNo: videoOb.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
break
|
||||
case 3:
|
||||
res = await userCollect({
|
||||
pageNo: videoOb.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
break
|
||||
}
|
||||
@ -812,10 +645,7 @@
|
||||
if (this.isScroll) {
|
||||
let SlideItems = document.querySelectorAll('.SlideItem')
|
||||
let SlideItem = SlideItems[this.contentIndex]
|
||||
if (
|
||||
SlideItem.scrollHeight - SlideItem.clientHeight <
|
||||
SlideItem.scrollTop + 60
|
||||
) {
|
||||
if (SlideItem.scrollHeight - SlideItem.clientHeight < SlideItem.scrollTop + 60) {
|
||||
this.loadMoreData()
|
||||
}
|
||||
}
|
||||
@ -823,8 +653,7 @@
|
||||
async touchMove(e) {
|
||||
if (!this.canScroll) return
|
||||
let moveDistance = e.touches[0].pageY - this.startLocationY
|
||||
let pageMoveDistance =
|
||||
this.lastMoveYDistance + moveDistance * this.acceleration
|
||||
let pageMoveDistance = this.lastMoveYDistance + moveDistance * this.acceleration
|
||||
// console.log('move-pageMoveDistance', pageMoveDistance)
|
||||
// console.log('move-moveDistance', moveDistance)
|
||||
//手指往上划，是负
|
||||
@ -844,16 +673,12 @@
|
||||
this.$refs.scroll.style.transform = `translate3d(0,0,0)`
|
||||
if (pageMoveDistance < 400) {
|
||||
this.refs.header.style.transition = 'all 0s'
|
||||
this.refs.header.style.height =
|
||||
this.refs.headerHeight + pageMoveDistance / 2 + 'px'
|
||||
this.refs.header.style.height = this.refs.headerHeight + pageMoveDistance / 2 + 'px'
|
||||
}
|
||||
} else {
|
||||
let scrollAreaHeight = await this.getScrollAreaHeight()
|
||||
//如果可滚动区的高度大于posterHeight，并且移动超过30，就直接滚到顶
|
||||
if (
|
||||
this.refs.videoSlideHeight > scrollAreaHeight &&
|
||||
Math.abs(moveDistance) > 20
|
||||
) {
|
||||
if (this.refs.videoSlideHeight > scrollAreaHeight && Math.abs(moveDistance) > 20) {
|
||||
this.$refs.scroll.style.transition = 'all .2s'
|
||||
this.$refs.scroll.style.transform = `translate3d(0,0,0)`
|
||||
let SlideItems = document.querySelectorAll('.SlideItem')
|
||||
@ -909,14 +734,9 @@
|
||||
if (!this.isScroll) {
|
||||
this.tempScroll = true
|
||||
SlideItem.scrollTop =
|
||||
Math.abs(pageMoveDistance) -
|
||||
this.refs.descHeight +
|
||||
this.floatHeight
|
||||
Math.abs(pageMoveDistance) - this.refs.descHeight + this.floatHeight
|
||||
}
|
||||
if (
|
||||
SlideItem.scrollHeight - SlideItem.clientHeight <
|
||||
SlideItem.scrollTop + 60
|
||||
) {
|
||||
if (SlideItem.scrollHeight - SlideItem.clientHeight < SlideItem.scrollTop + 60) {
|
||||
this.loadMoreData()
|
||||
}
|
||||
}
|
||||
@ -926,8 +746,7 @@
|
||||
async touchEnd(e) {
|
||||
if (!this.canScroll) return
|
||||
let moveDistance = e.changedTouches[0].pageY - this.startLocationY
|
||||
let pageMoveDistance =
|
||||
this.lastMoveYDistance + moveDistance * this.acceleration
|
||||
let pageMoveDistance = this.lastMoveYDistance + moveDistance * this.acceleration
|
||||
|
||||
// console.log('end-pageMoveDistance', pageMoveDistance)
|
||||
// console.log('end-moveDistance', moveDistance)
|
||||
@ -941,8 +760,7 @@
|
||||
|
||||
// console.log('end-gapTime', gapTime)
|
||||
let endTransformY =
|
||||
Math.abs(this.canTransformY) -
|
||||
(this.refs.maxSlideHeight - this.refs.videoSlideHeight)
|
||||
Math.abs(this.canTransformY) - (this.refs.maxSlideHeight - this.refs.videoSlideHeight)
|
||||
|
||||
//手指往下划，页面向上动
|
||||
if (moveDistance >= 0) {
|
||||
@ -950,18 +768,10 @@
|
||||
this.refs.header.style.transition = 'all .3s'
|
||||
this.refs.header.style.height = this.refs.headerHeight + 'px'
|
||||
this.lastMoveYDistance = 0
|
||||
this.floatShowName =
|
||||
this.floatFixed =
|
||||
this.isScroll =
|
||||
this.tempScroll =
|
||||
false
|
||||
this.floatShowName = this.floatFixed = this.isScroll = this.tempScroll = false
|
||||
} else {
|
||||
//猛的划一下
|
||||
if (
|
||||
Math.abs(moveDistance) > 100 &&
|
||||
gapTime > 100 &&
|
||||
gapTime < 150
|
||||
) {
|
||||
if (Math.abs(moveDistance) > 100 && gapTime > 100 && gapTime < 150) {
|
||||
this.floatShowName = this.floatFixed = this.isScroll = false
|
||||
|
||||
//用cancelAnimationFrame快速滚动到顶部，要比transition = 'all .3s'快
|
||||
@ -987,8 +797,7 @@
|
||||
timer = requestAnimationFrame(fn)
|
||||
} else {
|
||||
this.refs.header.style.transition = 'all .6s'
|
||||
this.refs.header.style.height =
|
||||
this.refs.headerHeight + 'px'
|
||||
this.refs.header.style.height = this.refs.headerHeight + 'px'
|
||||
this.lastMoveYDistance = 0
|
||||
cancelAnimationFrame(timer)
|
||||
}
|
||||
@ -1000,11 +809,7 @@
|
||||
}
|
||||
}
|
||||
timer = requestAnimationFrame(fn)
|
||||
} else if (
|
||||
Math.abs(moveDistance) > 100 &&
|
||||
gapTime > 150 &&
|
||||
gapTime < 300
|
||||
) {
|
||||
} else if (Math.abs(moveDistance) > 100 && gapTime > 150 && gapTime < 300) {
|
||||
// //用cancelAnimationFrame快速滚动到顶部，要比transition = 'all .3s'快
|
||||
this.$refs.scroll.style.transition = 'all .3s'
|
||||
this.$refs.scroll.style.transform = `translate3d(0,0,0)`
|
||||
@ -1071,7 +876,7 @@
|
||||
// console.log('transform',transform)
|
||||
let transformY = transform.substring(
|
||||
transform.indexOf('0px') + 5,
|
||||
transform.lastIndexOf('0px') - 4,
|
||||
transform.lastIndexOf('0px') - 4
|
||||
)
|
||||
// console.log('transformY',transformY)
|
||||
//当前的transformY
|
||||
@ -1081,11 +886,11 @@
|
||||
filterAge(age) {
|
||||
let date = new Date(age)
|
||||
return new Date().getFullYear() - date.getFullYear()
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import 'Me';
|
||||
@import 'Me';
|
||||
</style>
|
||||
|
||||
@ -3,24 +3,12 @@
|
||||
<div class="header">
|
||||
<dy-back mode="light" @click="$back" />
|
||||
<!-- todo 差一-->
|
||||
<img
|
||||
class="share"
|
||||
src="../../assets/img/icon/share-white.png"
|
||||
@click="isSharing = true"
|
||||
/>
|
||||
<img class="share" src="../../assets/img/icon/share-white.png" @click="isSharing = true" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="qrcode">
|
||||
<img
|
||||
class="qrcode-bg"
|
||||
src="../../assets/img/icon/me/code-bg.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
:src="_checkImgUrl(userinfo.cover_url[0].url_list[0])"
|
||||
alt=""
|
||||
/>
|
||||
<img class="qrcode-bg" src="../../assets/img/icon/me/code-bg.png" alt="" />
|
||||
<img class="avatar" :src="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" />
|
||||
</div>
|
||||
|
||||
<span class="name">ZZZZZZZZZZ</span>
|
||||
@ -46,15 +34,15 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Share from '../../components/Share'
|
||||
import { mapState } from 'pinia'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { _checkImgUrl } from '@/utils'
|
||||
import Share from '../../components/Share'
|
||||
import { mapState } from 'pinia'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { _checkImgUrl } from '@/utils'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'MyCard',
|
||||
components: {
|
||||
Share,
|
||||
Share
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -66,7 +54,7 @@
|
||||
shareToFriend: false,
|
||||
shareType: -1,
|
||||
|
||||
showDouyinCode: false,
|
||||
showDouyinCode: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -83,11 +71,11 @@
|
||||
case 8:
|
||||
return (this.okText = '去微博粘贴')
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['userinfo']),
|
||||
...mapState(useBaseStore, ['userinfo'])
|
||||
},
|
||||
methods: {
|
||||
_checkImgUrl,
|
||||
@ -95,15 +83,15 @@
|
||||
setTimeout(() => {
|
||||
cb()
|
||||
}, 100)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
#MyCard {
|
||||
#MyCard {
|
||||
background: rgb(136, 132, 133);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@ -200,5 +188,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,25 +24,13 @@
|
||||
<span>播放全部</span>
|
||||
<span class="num">(2)</span>
|
||||
</div>
|
||||
<img
|
||||
class="menu"
|
||||
src="../../assets/img/icon/menu-white.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="menu" src="../../assets/img/icon/menu-white.png" alt="" />
|
||||
</div>
|
||||
<div class="collect-list">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(item, index) in collectMusic"
|
||||
@click="page2PlayMusic(item)"
|
||||
>
|
||||
<div class="item" v-for="(item, index) in collectMusic" @click="page2PlayMusic(item)">
|
||||
<div class="left">
|
||||
<div class="cover-wrapper">
|
||||
<img
|
||||
v-lazy="$imgPreview(item.cover)"
|
||||
alt=""
|
||||
class="cover"
|
||||
/>
|
||||
<img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
|
||||
</div>
|
||||
<div class="desc">
|
||||
<span class="name">{{ item.name }}</span>
|
||||
@ -66,11 +54,7 @@
|
||||
<span>推荐收藏</span>
|
||||
<div class="right">
|
||||
<span class="auto-play">自动播放</span>
|
||||
<switches
|
||||
v-model="isAutoPlay"
|
||||
theme="bootstrap"
|
||||
color="success"
|
||||
></switches>
|
||||
<switches v-model="isAutoPlay" theme="bootstrap" color="success"></switches>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommend-list">
|
||||
@ -81,11 +65,7 @@
|
||||
>
|
||||
<div class="left">
|
||||
<div class="cover-wrapper">
|
||||
<img
|
||||
v-lazy="$imgPreview(item.cover)"
|
||||
alt=""
|
||||
class="cover"
|
||||
/>
|
||||
<img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
|
||||
</div>
|
||||
<div class="desc">
|
||||
<span class="name">{{ item.name }}</span>
|
||||
@ -119,18 +99,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<transition name="float-play">
|
||||
<div
|
||||
v-if="isShowFloatPlay"
|
||||
class="playing"
|
||||
@click="isShowCollectDialog = true"
|
||||
>
|
||||
<div v-if="isShowFloatPlay" class="playing" @click="isShowCollectDialog = true">
|
||||
<div class="playing-wrapper">
|
||||
<div class="cover-wrapper">
|
||||
<img
|
||||
v-lazy="$imgPreview(currentMusic.cover)"
|
||||
alt=""
|
||||
class="cover"
|
||||
/>
|
||||
<img v-lazy="$imgPreview(currentMusic.cover)" alt="" class="cover" />
|
||||
</div>
|
||||
<div class="name">{{ currentMusic.name }}</div>
|
||||
<img
|
||||
@ -162,12 +134,7 @@
|
||||
<transition name="my-collect-dialog">
|
||||
<div class="my-collect-dialog" v-show="isShowCollectDialog">
|
||||
<div class="dialog-header">
|
||||
<dy-back
|
||||
class="close"
|
||||
mode="light"
|
||||
img="back"
|
||||
@click="isShowCollectDialog = false"
|
||||
/>
|
||||
<dy-back class="close" mode="light" img="back" @click="isShowCollectDialog = false" />
|
||||
<span>我的收藏</span>
|
||||
<dy-back style="opacity: 0" mode="light" img="back" />
|
||||
</div>
|
||||
@ -181,19 +148,19 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'pinia'
|
||||
import Switches from '../message/components/swtich/switches'
|
||||
import SlideItemMusic from './components/SlideItemMusic'
|
||||
import IndicatorLight from '../../components/slide/IndicatorLight'
|
||||
import FromBottomDialog from '../../components/dialog/FromBottomDialog'
|
||||
import GuessMusic from './components/GuessMusic'
|
||||
import CollectMusic from './components/CollectMusic'
|
||||
import Loading from '../../components/Loading'
|
||||
import { userCollect } from '@/api/user'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { mapState } from 'pinia'
|
||||
import Switches from '../message/components/swtich/switches'
|
||||
import SlideItemMusic from './components/SlideItemMusic'
|
||||
import IndicatorLight from '../../components/slide/IndicatorLight'
|
||||
import FromBottomDialog from '../../components/dialog/FromBottomDialog'
|
||||
import GuessMusic from './components/GuessMusic'
|
||||
import CollectMusic from './components/CollectMusic'
|
||||
import Loading from '../../components/Loading'
|
||||
import { userCollect } from '@/api/user'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
|
||||
//TODO 两个page页面的播放冲突未做
|
||||
export default {
|
||||
//TODO 两个page页面的播放冲突未做
|
||||
export default {
|
||||
name: 'MyMusic',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
@ -202,7 +169,7 @@
|
||||
IndicatorLight,
|
||||
GuessMusic,
|
||||
CollectMusic,
|
||||
Loading,
|
||||
Loading
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -211,13 +178,12 @@
|
||||
currentMusic: {
|
||||
name: '告白气球',
|
||||
mp3: 'https://mp32.9ku.com/upload/128/2017/02/05/858423.mp3',
|
||||
cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url)
|
||||
.href,
|
||||
cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
is_play: false
|
||||
},
|
||||
collectMusic: [],
|
||||
recommendMusic: [],
|
||||
@ -230,14 +196,14 @@
|
||||
isCollect: false,
|
||||
|
||||
page2SlideIndex: -1,
|
||||
page2IsPlay: false,
|
||||
page2IsPlay: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['bodyWidth']),
|
||||
page2Music() {
|
||||
return this.collectMusic.concat(this.recommendMusic)
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCollectMusic()
|
||||
@ -255,9 +221,7 @@
|
||||
this.currentMusic = item
|
||||
this.isShowFloatPlay = true
|
||||
this.page2IsPlay = true
|
||||
this.page2SlideIndex = this.page2Music.findIndex(
|
||||
(v) => v.name === item.name,
|
||||
)
|
||||
this.page2SlideIndex = this.page2Music.findIndex((v) => v.name === item.name)
|
||||
this.isShowCollectDialog = true
|
||||
this.$refs.CollectMusic.play(this.page2SlideIndex)
|
||||
},
|
||||
@ -267,20 +231,17 @@
|
||||
this.loading = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.collectMusic = res.data.music.list.slice(0, 2)
|
||||
this.guessMusic = this.recommendMusic = res.data.music.list.slice(
|
||||
2,
|
||||
-1,
|
||||
)
|
||||
this.guessMusic = this.recommendMusic = res.data.music.list.slice(2, -1)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.MyMusic {
|
||||
.MyMusic {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -552,5 +513,5 @@
|
||||
transition-duration: 200ms;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,28 +21,28 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'pinia'
|
||||
import FromBottomDialog from '../../components/dialog/FromBottomDialog'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { mapState } from 'pinia'
|
||||
import FromBottomDialog from '../../components/dialog/FromBottomDialog'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'MyRequestUpdate',
|
||||
components: { FromBottomDialog },
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
...mapState(useBaseStore, ['friends'])
|
||||
},
|
||||
created() {},
|
||||
methods: {},
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.RequestUpdate {
|
||||
.RequestUpdate {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -85,5 +85,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,9 +24,7 @@
|
||||
<div class="request">
|
||||
<!-- <div class="title">近7天收到1次求更新</div>-->
|
||||
<!-- <div class="subtitle f12">上次发布作品：2020-08-01 上次开播：昨天23:12</div>-->
|
||||
<div class="subtitle f12">
|
||||
历史求更新（粉丝送礼后7天未开播则退还礼物）
|
||||
</div>
|
||||
<div class="subtitle f12">历史求更新（粉丝送礼后7天未开播则退还礼物）</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="item in friends.all">
|
||||
<div class="left">
|
||||
@ -40,11 +38,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<dy-button
|
||||
type="white"
|
||||
:border="false"
|
||||
:active="false"
|
||||
@click="$nav('/publish')"
|
||||
<dy-button type="white" :border="false" :active="false" @click="$nav('/publish')"
|
||||
>发布作品</dy-button
|
||||
>
|
||||
<dy-button type="primary" :active="false" @click="$no">去直播</dy-button>
|
||||
@ -60,31 +54,29 @@
|
||||
<div class="l-row" @click="toggleRequestUpdate">
|
||||
{{ openRequestUpdate ? '关闭' : '开启' }}求更新提醒
|
||||
</div>
|
||||
<div class="l-row" @click="$nav('/me/my-request-update')">
|
||||
我的求更新提醒
|
||||
</div>
|
||||
<div class="l-row" @click="$nav('/me/my-request-update')">我的求更新提醒</div>
|
||||
<div class="space"></div>
|
||||
<div class="l-row" @click="isShowOption = false">取消</div>
|
||||
</from-bottom-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'pinia'
|
||||
import FromBottomDialog from '../../components/dialog/FromBottomDialog'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { mapState } from 'pinia'
|
||||
import FromBottomDialog from '../../components/dialog/FromBottomDialog'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'RequestUpdate',
|
||||
components: { FromBottomDialog },
|
||||
data() {
|
||||
return {
|
||||
isShowOption: false,
|
||||
loading: false,
|
||||
openRequestUpdate: true,
|
||||
openRequestUpdate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
...mapState(useBaseStore, ['friends'])
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
@ -103,15 +95,15 @@
|
||||
} else {
|
||||
this.$notice('提醒已关闭，再次点击可开启')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.RequestUpdate {
|
||||
.RequestUpdate {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -216,5 +208,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,11 +7,7 @@
|
||||
</BaseHeader>
|
||||
<div class="content">
|
||||
<div class="list">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(item, index) in list"
|
||||
@click="togglePlay(item, list)"
|
||||
>
|
||||
<div class="item" v-for="(item, index) in list" @click="togglePlay(item, list)">
|
||||
<div class="music">
|
||||
<div class="cover-wrapper">
|
||||
<img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
|
||||
@ -82,11 +78,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'pinia'
|
||||
import { userCollect } from '@/api/user'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
import { mapState } from 'pinia'
|
||||
import { userCollect } from '@/api/user'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'MusicCollect',
|
||||
components: {},
|
||||
props: {},
|
||||
@ -97,11 +93,11 @@
|
||||
audio: new Audio(),
|
||||
currentItem: null,
|
||||
step: null,
|
||||
process: 0,
|
||||
process: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['bodyWidth']),
|
||||
...mapState(useBaseStore, ['bodyWidth'])
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
@ -154,16 +150,16 @@
|
||||
this.audio.pause()
|
||||
// this.audio.currentTime = 0
|
||||
this.audio.removeEventListener('ended', null)
|
||||
},
|
||||
}
|
||||
},
|
||||
unmounted() {
|
||||
this.stopPlay()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.MusicCollect {
|
||||
.MusicCollect {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -335,5 +331,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,16 +15,16 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import resource from '../../../assets/data/resource'
|
||||
import Posters from '../../../components/Posters'
|
||||
import Scroll from '../../../components/Scroll'
|
||||
import { myVideo } from '@/api/videos'
|
||||
import resource from '../../../assets/data/resource'
|
||||
import Posters from '../../../components/Posters'
|
||||
import Scroll from '../../../components/Scroll'
|
||||
import { myVideo } from '@/api/videos'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'VideoCollect',
|
||||
components: {
|
||||
Posters,
|
||||
Scroll,
|
||||
Scroll
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -32,7 +32,7 @@
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
pageSize: 15,
|
||||
videos: [],
|
||||
videos: []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -51,22 +51,22 @@
|
||||
this.loading = true
|
||||
let res = await myVideo({
|
||||
pageNo: this.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
this.loading = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.videos = this.videos.concat(res.data.list)
|
||||
this.total = res.data.total
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.VideoCollect {
|
||||
.VideoCollect {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -80,10 +80,8 @@
|
||||
padding-top: var(--common-header-height);
|
||||
|
||||
.Scroll {
|
||||
height: calc(
|
||||
var(--vh, 1vh) * 100 - var(--common-header-height)
|
||||
) !important;
|
||||
}
|
||||
height: calc(var(--vh, 1vh) * 100 - var(--common-header-height)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,11 +30,7 @@
|
||||
<div class="left">待播清单</div>
|
||||
<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/play-normal.png"
|
||||
alt=""
|
||||
/>
|
||||
<img v-show="!isLoop" src="@/assets/img/icon/me/play-normal.png" alt="" />
|
||||
<span>{{ isLoop ? '单曲循环' : '顺序播放' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,15 +70,15 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import Switches from '../../message/components/swtich/switches'
|
||||
import SlideItemMusic from './SlideItemMusic'
|
||||
import IndicatorLight from '../../../components/slide/IndicatorLight'
|
||||
import Share from '../../../components/Share'
|
||||
import ShareToFriend from '../../home/components/ShareToFriend'
|
||||
import SlideVertical from '@/components/slide/SlideVertical.vue'
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import Switches from '../../message/components/swtich/switches'
|
||||
import SlideItemMusic from './SlideItemMusic'
|
||||
import IndicatorLight from '../../../components/slide/IndicatorLight'
|
||||
import Share from '../../../components/Share'
|
||||
import ShareToFriend from '../../home/components/ShareToFriend'
|
||||
import SlideVertical from '@/components/slide/SlideVertical.vue'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'GuessMusic',
|
||||
components: {
|
||||
SlideVertical,
|
||||
@ -91,17 +87,17 @@
|
||||
SlideItemMusic,
|
||||
IndicatorLight,
|
||||
Share,
|
||||
ShareToFriend,
|
||||
ShareToFriend
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: [],
|
||||
default: []
|
||||
},
|
||||
page2SlideIndex: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -112,7 +108,7 @@
|
||||
isLoop: false,
|
||||
collectSlideIndex: 0,
|
||||
isShowCollectDialog: false,
|
||||
itemRefs: [],
|
||||
itemRefs: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -122,8 +118,8 @@
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:page2SlideIndex', val)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
@ -132,7 +128,7 @@
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
this.itemRefs[newVal].togglePlay(true, true)
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previous() {
|
||||
@ -166,12 +162,12 @@
|
||||
this.itemRefs.map((ref) => {
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
#CollectMusic {
|
||||
#CollectMusic {
|
||||
//width: 100vw;
|
||||
//height: calc(var(--vh, 1vh) * 100);
|
||||
position: fixed;
|
||||
@ -182,9 +178,9 @@
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
}
|
||||
}
|
||||
|
||||
.music-list-dialog {
|
||||
.music-list-dialog {
|
||||
height: 70vh;
|
||||
@bg-color: #1e1d1d;
|
||||
background: @bg-color;
|
||||
@ -276,5 +272,5 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,11 +30,7 @@
|
||||
<div class="left">待播清单</div>
|
||||
<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/play-normal.png"
|
||||
alt=""
|
||||
/>
|
||||
<img v-show="!isLoop" src="@/assets/img/icon/me/play-normal.png" alt="" />
|
||||
<span>{{ isLoop ? '单曲循环' : '顺序播放' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,15 +70,15 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import Switches from '../../message/components/swtich/switches'
|
||||
import SlideItemMusic from './SlideItemMusic'
|
||||
import IndicatorLight from '../../../components/slide/IndicatorLight'
|
||||
import Share from '../../../components/Share'
|
||||
import ShareToFriend from '../../home/components/ShareToFriend'
|
||||
import SlideVertical from '@/components/slide/SlideVertical.vue'
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import Switches from '../../message/components/swtich/switches'
|
||||
import SlideItemMusic from './SlideItemMusic'
|
||||
import IndicatorLight from '../../../components/slide/IndicatorLight'
|
||||
import Share from '../../../components/Share'
|
||||
import ShareToFriend from '../../home/components/ShareToFriend'
|
||||
import SlideVertical from '@/components/slide/SlideVertical.vue'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'GuessMusic',
|
||||
components: {
|
||||
SlideVertical,
|
||||
@ -91,13 +87,13 @@
|
||||
SlideItemMusic,
|
||||
IndicatorLight,
|
||||
Share,
|
||||
ShareToFriend,
|
||||
ShareToFriend
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -108,7 +104,7 @@
|
||||
isLoop: false,
|
||||
guessSlideIndex: 0,
|
||||
isShowCollectDialog: false,
|
||||
itemRefs: [],
|
||||
itemRefs: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -117,7 +113,7 @@
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
this.itemRefs[newVal].togglePlay(true, true)
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
@ -148,12 +144,12 @@
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
this.itemRefs[index].togglePlay(true, true)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
#GuessMusic {
|
||||
#GuessMusic {
|
||||
//width: 100vw;
|
||||
//height: calc(var(--vh, 1vh) * 100);
|
||||
position: fixed;
|
||||
@ -164,9 +160,9 @@
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
}
|
||||
}
|
||||
|
||||
.music-list-dialog {
|
||||
.music-list-dialog {
|
||||
height: 70vh;
|
||||
@bg-color: #1e1d1d;
|
||||
background: @bg-color;
|
||||
@ -258,5 +254,5 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,22 +4,14 @@
|
||||
<div class="cover">
|
||||
<img v-lazy="$imgPreview(modelValue.cover)" alt="" />
|
||||
</div>
|
||||
<div
|
||||
class="lyrics-wrapper"
|
||||
ref="lyrics-wrapper"
|
||||
@click="isFullLyrics = true"
|
||||
>
|
||||
<div class="lyrics-wrapper" ref="lyrics-wrapper" @click="isFullLyrics = true">
|
||||
<div class="container">
|
||||
<div class="lyrics" v-for="item in lyricsFullTexts">{{ item.c }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="lyrics-mask" @click="isFullLyrics = true"></div>-->
|
||||
</div>
|
||||
<div
|
||||
class="lyrics-full"
|
||||
v-show="isFullLyrics"
|
||||
@click="isFullLyrics = false"
|
||||
>
|
||||
<div class="lyrics-full" v-show="isFullLyrics" @click="isFullLyrics = false">
|
||||
<div
|
||||
class="list"
|
||||
style="overflow: auto"
|
||||
@ -82,10 +74,7 @@
|
||||
@click="$emit('update:isLoop', true)"
|
||||
/>
|
||||
<div class="center">
|
||||
<img
|
||||
src="@/assets/img/icon/me/previous.png"
|
||||
@click="slide('previous')"
|
||||
/>
|
||||
<img src="@/assets/img/icon/me/previous.png" @click="slide('previous')" />
|
||||
<img
|
||||
v-show="isPlay"
|
||||
class="control"
|
||||
@ -100,21 +89,18 @@
|
||||
/>
|
||||
<img src="@/assets/img/icon/me/next.png" @click="slide('next')" />
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/img/icon/me/music-list.png"
|
||||
@click="$emit('showList')"
|
||||
/>
|
||||
<img src="@/assets/img/icon/me/music-list.png" @click="$emit('showList')" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { nextTick } from 'vue'
|
||||
import globalMethods from '../../../utils'
|
||||
import gaobaiqiqiu from '../../../assets/data/lyrics/gaobaiqiqiu.lrc?raw'
|
||||
import { userCollect } from '@/api/user'
|
||||
import { nextTick } from 'vue'
|
||||
import globalMethods from '../../../utils'
|
||||
import gaobaiqiqiu from '../../../assets/data/lyrics/gaobaiqiqiu.lrc?raw'
|
||||
import { userCollect } from '@/api/user'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'SlideItemMusic',
|
||||
components: {},
|
||||
props: {
|
||||
@ -122,12 +108,12 @@
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
},
|
||||
isLoop: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -146,7 +132,7 @@
|
||||
currentTime: 0,
|
||||
step: 0,
|
||||
startX: 0,
|
||||
slideBarWidth: 0,
|
||||
slideBarWidth: 0
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -187,10 +173,7 @@
|
||||
// }
|
||||
if (!this.isMove) {
|
||||
this.currentTime = currentTime
|
||||
if (
|
||||
Math.ceil(e.target.currentTime) * this.step >
|
||||
this.slideBarWidth - 5
|
||||
) {
|
||||
if (Math.ceil(e.target.currentTime) * this.step > this.slideBarWidth - 5) {
|
||||
this.pageX = this.slideBarWidth - 5
|
||||
} else {
|
||||
this.pageX = Math.ceil(e.target.currentTime) * this.step
|
||||
@ -232,10 +215,7 @@
|
||||
this.loading = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.collectMusic = res.data.music.list.slice(0, 2)
|
||||
this.guessMusic = this.recommendMusic = res.data.music.list.slice(
|
||||
2,
|
||||
-1,
|
||||
)
|
||||
this.guessMusic = this.recommendMusic = res.data.music.list.slice(2, -1)
|
||||
}
|
||||
},
|
||||
createLrcObj(lrc) {
|
||||
@ -245,17 +225,14 @@
|
||||
al: '', //专辑名
|
||||
by: '', //歌词制作人
|
||||
offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
|
||||
ms: [], //歌词数组{t:时间,c:歌词}
|
||||
ms: [] //歌词数组{t:时间,c:歌词}
|
||||
}
|
||||
if (lrc.length === 0) return
|
||||
let lrcs = lrc.split('\n') //用回车拆分成数组
|
||||
for (let i in lrcs) {
|
||||
//遍历歌词数组
|
||||
lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, '') //去除前后空格
|
||||
let t = lrcs[i].substring(
|
||||
lrcs[i].indexOf('[') + 1,
|
||||
lrcs[i].indexOf(']'),
|
||||
) //取[]间的内容
|
||||
let t = lrcs[i].substring(lrcs[i].indexOf('[') + 1, lrcs[i].indexOf(']')) //取[]间的内容
|
||||
let s = t.split(':') //分离:前后文字
|
||||
if (isNaN(parseInt(s[0]))) {
|
||||
//不是数值
|
||||
@ -278,7 +255,7 @@
|
||||
oLRC.ms.push({
|
||||
//对象{t:时间,c:歌词}加入ms数组
|
||||
t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
|
||||
c: content,
|
||||
c: content
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -300,7 +277,7 @@
|
||||
let comments = this.$refs['lyrics-wrapper']
|
||||
comments.scrollTo({
|
||||
top: comments.scrollHeight - comments.clientHeight,
|
||||
behavior: 'smooth',
|
||||
behavior: 'smooth'
|
||||
})
|
||||
})
|
||||
},
|
||||
@ -335,15 +312,15 @@
|
||||
return { width: this.pageX + 'px' }
|
||||
}
|
||||
return { left: this.pageX + 'px' }
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '@/assets/less/index.less';
|
||||
@import '@/assets/less/index.less';
|
||||
|
||||
.SlideItemMusic {
|
||||
.SlideItemMusic {
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
min-width: 100vw;
|
||||
@ -352,11 +329,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
rgba(136, 132, 133, 1),
|
||||
rgba(136, 132, 133, 0.7)
|
||||
);
|
||||
background: linear-gradient(to bottom right, rgba(136, 132, 133, 1), rgba(136, 132, 133, 0.7));
|
||||
|
||||
.cover {
|
||||
margin-top: 80rem;
|
||||
@ -540,5 +513,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,16 +16,10 @@
|
||||
v-model:active-index="currentSlideItemIndex"
|
||||
>
|
||||
</Indicator>
|
||||
<SlideHorizontal
|
||||
v-model:index="currentSlideItemIndex"
|
||||
class="SlideRowList"
|
||||
>
|
||||
<SlideHorizontal v-model:index="currentSlideItemIndex" class="SlideRowList">
|
||||
<SlideItem class="tab1" style="overflow: auto">
|
||||
<Scroll class="Scroll" @pulldown="getHistoryVideo">
|
||||
<Posters
|
||||
:list="historyVideo.list"
|
||||
v-if="historyVideo.total"
|
||||
></Posters>
|
||||
<Posters :list="historyVideo.list" v-if="historyVideo.total"></Posters>
|
||||
<Loading :is-full-screen="false" v-if="loadingVideo" />
|
||||
<template v-else>
|
||||
<NoMore v-if="historyVideo.list.length" />
|
||||
@ -47,17 +41,17 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Posters from '../../../components/Posters'
|
||||
import Scroll from '../../../components/Scroll'
|
||||
import NoMore from '../../../components/NoMore'
|
||||
import { historyOther, historyVideo } from '@/api/videos'
|
||||
import Posters from '../../../components/Posters'
|
||||
import Scroll from '../../../components/Scroll'
|
||||
import NoMore from '../../../components/NoMore'
|
||||
import { historyOther, historyVideo } from '@/api/videos'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'lookHistory',
|
||||
components: {
|
||||
NoMore,
|
||||
Posters,
|
||||
Scroll,
|
||||
Scroll
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -70,13 +64,13 @@
|
||||
historyVideo: {
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
list: [],
|
||||
list: []
|
||||
},
|
||||
historyOther: {
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
list: [],
|
||||
},
|
||||
list: []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -85,7 +79,7 @@
|
||||
return this.historyVideo.list.length
|
||||
}
|
||||
return this.historyOther.list.length
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getHistoryVideo(true)
|
||||
@ -102,7 +96,7 @@
|
||||
this.loadingVideo = true
|
||||
let res = await historyVideo({
|
||||
pageNo: this.historyVideo.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
console.log(res)
|
||||
this.loadingVideo = false
|
||||
@ -120,7 +114,7 @@
|
||||
}
|
||||
let res = await historyOther({
|
||||
pageNo: this.historyOther.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
this.loadingOther = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
@ -129,11 +123,7 @@
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
this.$showConfirmDialog(
|
||||
'确定清空？',
|
||||
'清空后，以往观看记录不再展示',
|
||||
'gray',
|
||||
() => {
|
||||
this.$showConfirmDialog('确定清空？', '清空后，以往观看记录不再展示', 'gray', () => {
|
||||
if (this.currentSlideItemIndex === 0) {
|
||||
this.historyVideo.list = []
|
||||
this.isClearHistoryVideo = true
|
||||
@ -141,17 +131,16 @@
|
||||
}
|
||||
this.historyOther.list = []
|
||||
this.isClearHistoryVideo = true
|
||||
},
|
||||
)
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.lookHistory {
|
||||
.lookHistory {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -167,8 +156,7 @@
|
||||
.SlideRowList,
|
||||
.Scroll {
|
||||
height: calc(
|
||||
var(--vh, 1vh) * 100 - var(--indicator-height) -
|
||||
var(--common-header-height)
|
||||
var(--vh, 1vh) * 100 - var(--indicator-height) - var(--common-header-height)
|
||||
) !important;
|
||||
}
|
||||
|
||||
@ -190,5 +178,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,41 +3,25 @@
|
||||
<BaseHeader />
|
||||
<div class="content type1" v-if="type === 0">
|
||||
<div class="notice">
|
||||
<img
|
||||
src="../../../../assets/img/icon/newicon/left_menu/lock.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../../assets/img/icon/newicon/left_menu/lock.png" alt="" />
|
||||
<span>时间锁已关闭</span>
|
||||
</div>
|
||||
<div class="row mt1r no-active">
|
||||
<div class="left">
|
||||
<img
|
||||
src="../../../../assets/img/icon/newicon/left_menu/hourglass.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../../assets/img/icon/newicon/left_menu/hourglass.png" alt="" />
|
||||
<span>可为时间锁设置一个触发时间</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt1r no-active">
|
||||
<div class="left">
|
||||
<img
|
||||
src="../../../../assets/img/icon/newicon/left_menu/clock.png"
|
||||
alt=""
|
||||
/>
|
||||
<span
|
||||
>开启时间锁后，单日使用时长超过触发时间，需输入密码才能继续使用</span
|
||||
>
|
||||
<img src="../../../../assets/img/icon/newicon/left_menu/clock.png" alt="" />
|
||||
<span>开启时间锁后，单日使用时长超过触发时间，需输入密码才能继续使用</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt1r mb1r no-active">
|
||||
<div class="left">
|
||||
<img
|
||||
src="../../../../assets/img/icon/newicon/left_menu/lock.png"
|
||||
alt=""
|
||||
/>
|
||||
<span
|
||||
>开启时间锁，需先设置独立密码；忘记密码后可通过申诉重置密码</span
|
||||
>
|
||||
<img src="../../../../assets/img/icon/newicon/left_menu/lock.png" alt="" />
|
||||
<span>开启时间锁，需先设置独立密码；忘记密码后可通过申诉重置密码</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt1r mb1r" @click="$nav('trigger-time', { triggerTime })">
|
||||
@ -72,11 +56,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="content type2" v-if="type === 2">
|
||||
<img
|
||||
class="desc"
|
||||
src="../../../../assets/img/icon/newicon/left_menu/img-type3.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="desc" src="../../../../assets/img/icon/newicon/left_menu/img-type3.png" alt="" />
|
||||
<div class="footer">
|
||||
<div class="notice">
|
||||
<!-- TODO 有个勾选没做-->
|
||||
@ -94,15 +74,15 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import enums from '../../../../utils/enums'
|
||||
import enums from '../../../../utils/enums'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'DetailSetting',
|
||||
data() {
|
||||
return {
|
||||
type: 0,
|
||||
enums,
|
||||
triggerTime: enums.TRIGGER_TIME.TIME60,
|
||||
triggerTime: enums.TRIGGER_TIME.TIME60
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -111,14 +91,14 @@
|
||||
let triggerTime = localStorage.getItem('changeTriggerTime')
|
||||
if (triggerTime !== null) this.triggerTime = triggerTime
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../../assets/less/index';
|
||||
@import '../../../../assets/less/index';
|
||||
|
||||
.DetailSetting {
|
||||
.DetailSetting {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -167,5 +147,5 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -31,21 +31,21 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'index',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {},
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../../assets/less/index';
|
||||
@import '../../../../assets/less/index';
|
||||
|
||||
.index {
|
||||
.index {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -58,5 +58,5 @@
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -34,14 +34,14 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import enums from '../../../../utils/enums'
|
||||
import enums from '../../../../utils/enums'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'TriggerTime',
|
||||
data() {
|
||||
return {
|
||||
enums,
|
||||
triggerTime: enums.TRIGGER_TIME.TIME60,
|
||||
triggerTime: enums.TRIGGER_TIME.TIME60
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -51,15 +51,15 @@
|
||||
setTriggerTime(type) {
|
||||
this.triggerTime = type
|
||||
localStorage.setItem('changeTriggerTime', type)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../../assets/less/index';
|
||||
@import '../../../../assets/less/index';
|
||||
|
||||
.TriggerTime {
|
||||
.TriggerTime {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -70,5 +70,5 @@
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user