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
211
src/App.vue
211
src/App.vue
@ -9,132 +9,129 @@
|
||||
<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 {
|
||||
name: 'App',
|
||||
components: {
|
||||
Call,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
transitionName: 'go',
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Call
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
transitionName: 'go'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['excludeRoutes'])
|
||||
},
|
||||
// watch $route 决定使用哪种过渡
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
this.setMaskDialog({ state: false, mode: this.maskDialogMode })
|
||||
|
||||
//footer下面的5个按钮，对跳不要用动画
|
||||
let noAnimation = [
|
||||
'/',
|
||||
'/home',
|
||||
'/slide',
|
||||
'/me',
|
||||
'/shop',
|
||||
'/message',
|
||||
'/publish',
|
||||
'/home/live',
|
||||
'slide',
|
||||
'/test'
|
||||
]
|
||||
if (noAnimation.indexOf(from.path) !== -1 && noAnimation.indexOf(to.path) !== -1) {
|
||||
return (this.transitionName = '')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['excludeRoutes']),
|
||||
},
|
||||
// watch $route 决定使用哪种过渡
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
this.setMaskDialog({ state: false, mode: this.maskDialogMode })
|
||||
|
||||
//footer下面的5个按钮，对跳不要用动画
|
||||
let noAnimation = [
|
||||
'/',
|
||||
'/home',
|
||||
'/slide',
|
||||
'/me',
|
||||
'/shop',
|
||||
'/message',
|
||||
'/publish',
|
||||
'/home/live',
|
||||
'slide',
|
||||
'/test',
|
||||
]
|
||||
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()
|
||||
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()
|
||||
this.setVh()
|
||||
// 监听resize事件 视图大小发生变化就重新计算1vh的值
|
||||
window.addEventListener('resize', () => {
|
||||
location.reload()
|
||||
this.setVh()
|
||||
// 监听resize事件 视图大小发生变化就重新计算1vh的值
|
||||
window.addEventListener('resize', () => {
|
||||
location.reload()
|
||||
this.setVh()
|
||||
})
|
||||
})
|
||||
|
||||
try {
|
||||
navigator.control.gesture(false)
|
||||
} catch (e) {}
|
||||
try {
|
||||
navigator.control.longpressMenu(false)
|
||||
} catch (e) {}
|
||||
document.onselectstart = new Function('return false') //禁止选中文字
|
||||
},
|
||||
try {
|
||||
navigator.control.gesture(false)
|
||||
} catch (e) {}
|
||||
try {
|
||||
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 {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
#app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.go-enter-from {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
.go-enter-from {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
//最终状态
|
||||
.back-enter-to,
|
||||
.back-enter-from,
|
||||
.go-enter-to,
|
||||
.go-leave-from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
//最终状态
|
||||
.back-enter-to,
|
||||
.back-enter-from,
|
||||
.go-enter-to,
|
||||
.go-leave-from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.go-leave-to {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.go-leave-to {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
.go-enter-active,
|
||||
.go-leave-active,
|
||||
.back-enter-active,
|
||||
.back-leave-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.go-enter-active,
|
||||
.go-leave-active,
|
||||
.back-enter-active,
|
||||
.back-leave-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.back-enter-from {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.back-enter-from {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
.back-leave-to {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
.back-leave-to {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.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,51 +11,51 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AutoInput',
|
||||
props: {
|
||||
modelValue: String,
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '留下你的精彩评论吧',
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.input.setAttribute("placeholder", "改变")
|
||||
},
|
||||
computed: {},
|
||||
data: function () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
changeText(e) {
|
||||
this.$emit('update:modelValue', this.$el.innerText)
|
||||
},
|
||||
},
|
||||
export default {
|
||||
name: 'AutoInput',
|
||||
props: {
|
||||
modelValue: String,
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '留下你的精彩评论吧'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.input.setAttribute("placeholder", "改变")
|
||||
},
|
||||
computed: {},
|
||||
data: function () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
changeText(e) {
|
||||
this.$emit('update:modelValue', this.$el.innerText)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.auto-input {
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
max-height: 70rem;
|
||||
overflow-y: scroll;
|
||||
padding: 0 5rem;
|
||||
outline: none;
|
||||
}
|
||||
.auto-input {
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
max-height: 70rem;
|
||||
overflow-y: scroll;
|
||||
padding: 0 5rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.auto-input::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
.auto-input::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.auto-input:empty::before {
|
||||
/*content: "留下你的精彩评论吧";*/
|
||||
content: attr(placeholder);
|
||||
color: #999999;
|
||||
}
|
||||
.auto-input:empty::before {
|
||||
/*content: "留下你的精彩评论吧";*/
|
||||
content: attr(placeholder);
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.auto-input:focus::before {
|
||||
content: none;
|
||||
}
|
||||
.auto-input:focus::before {
|
||||
content: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,50 +2,48 @@
|
||||
<img class="close" ref="img" :src="src" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Back',
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'gray',
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
default: 'back',
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'left',
|
||||
},
|
||||
scale: {
|
||||
type: [Number, String],
|
||||
default: 1,
|
||||
},
|
||||
export default {
|
||||
name: 'Back',
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'gray'
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
img: {
|
||||
type: String,
|
||||
default: 'back'
|
||||
},
|
||||
computed: {
|
||||
src() {
|
||||
return new URL(
|
||||
`../assets/img/icon/components/${this.mode}-${this.img}.png`,
|
||||
import.meta.url,
|
||||
).href
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
mounted() {
|
||||
this.$setCss(
|
||||
this.$refs.img,
|
||||
'transform',
|
||||
`rotate(${this.direction === 'left' ? '0' : '180'}deg) scale(${this.scale})`,
|
||||
)
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
scale: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
src() {
|
||||
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})`
|
||||
)
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
img {
|
||||
width: 20rem;
|
||||
}
|
||||
img {
|
||||
width: 20rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,250 +9,246 @@
|
||||
<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 {
|
||||
name: 'BaseButton',
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
progress: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
loadingWithText: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
//small
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: '3',
|
||||
},
|
||||
export default {
|
||||
name: 'BaseButton',
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
progress: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
computed: {
|
||||
class1() {
|
||||
return [
|
||||
this.type,
|
||||
this.active ? '' : 'no-active',
|
||||
this.border ? '' : 'no-border',
|
||||
this.disabled && 'disabled',
|
||||
this.size,
|
||||
]
|
||||
},
|
||||
showText() {
|
||||
if (this.loading) {
|
||||
return this.loadingWithText
|
||||
}
|
||||
return true
|
||||
},
|
||||
loadingWithText: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
check() {
|
||||
if (this.disabled) return
|
||||
if (this.loading) return
|
||||
return this.$emit('click')
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal'
|
||||
//small
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: '3'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
class1() {
|
||||
return [
|
||||
this.type,
|
||||
this.active ? '' : 'no-active',
|
||||
this.border ? '' : 'no-border',
|
||||
this.disabled && 'disabled',
|
||||
this.size
|
||||
]
|
||||
},
|
||||
showText() {
|
||||
if (this.loading) {
|
||||
return this.loadingWithText
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
check() {
|
||||
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 {
|
||||
color: white;
|
||||
height: 40rem;
|
||||
line-height: 40rem;
|
||||
//width: 100%;
|
||||
font-size: 14rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.button {
|
||||
color: white;
|
||||
height: 40rem;
|
||||
line-height: 40rem;
|
||||
//width: 100%;
|
||||
font-size: 14rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.progress {
|
||||
border-radius: 3rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: rgb(80 80 80 / 10%);
|
||||
}
|
||||
.progress {
|
||||
border-radius: 3rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: rgb(80 80 80 / 10%);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 16rem;
|
||||
margin-right: 5rem;
|
||||
animation: animal 0.8s infinite linear;
|
||||
img {
|
||||
height: 16rem;
|
||||
margin-right: 5rem;
|
||||
animation: animal 0.8s infinite linear;
|
||||
|
||||
@keyframes animal {
|
||||
0% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
@keyframes animal {
|
||||
0% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: var(--primary-btn-color);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: var(--second-btn-color);
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
|
||||
&.dark2 {
|
||||
background: rgb(36, 36, 36);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background: rgb(9, 184, 91);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.qqzone {
|
||||
background: rgb(240, 179, 2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.qq {
|
||||
background: rgb(27, 177, 228);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.webo {
|
||||
background: rgb(242, 95, 67);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: white;
|
||||
color: black;
|
||||
border: 1px solid gainsboro;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: rgba(161, 139, 129, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
&.primary {
|
||||
background: var(--primary-btn-color);
|
||||
background: var(--disable-primary-btn-color);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: var(--second-btn-color);
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
|
||||
&.dark2 {
|
||||
background: rgb(36, 36, 36);
|
||||
color: #fff;
|
||||
background: var(--second-btn-color-tran);
|
||||
}
|
||||
|
||||
&.green {
|
||||
background: rgb(9, 184, 91);
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.qqzone {
|
||||
background: rgb(240, 179, 2);
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.qq {
|
||||
background: rgb(27, 177, 228);
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.webo {
|
||||
background: rgb(242, 95, 67);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-active {
|
||||
&:active {
|
||||
&.primary {
|
||||
background: var(--primary-btn-color);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: var(--second-btn-color);
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: white;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background: rgb(9, 184, 91);
|
||||
}
|
||||
|
||||
&.qqzone {
|
||||
background: rgb(27, 177, 228);
|
||||
}
|
||||
|
||||
&.qq {
|
||||
background: rgb(27, 177, 228);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
&.primary {
|
||||
background: gainsboro;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: white;
|
||||
color: black;
|
||||
border: 1px solid gainsboro;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: rgba(161, 139, 129, 0.3);
|
||||
color: white;
|
||||
background: lightgray;
|
||||
}
|
||||
|
||||
&:active {
|
||||
&.primary {
|
||||
background: var(--disable-primary-btn-color);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: var(--second-btn-color-tran);
|
||||
}
|
||||
|
||||
&.green {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.qqzone {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.qq {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.webo {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-active {
|
||||
&:active {
|
||||
&.primary {
|
||||
background: var(--primary-btn-color);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: var(--second-btn-color);
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: white;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background: rgb(9, 184, 91);
|
||||
}
|
||||
|
||||
&.qqzone {
|
||||
background: rgb(27, 177, 228);
|
||||
}
|
||||
|
||||
&.qq {
|
||||
background: rgb(27, 177, 228);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
&.primary {
|
||||
background: gainsboro;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: lightgray;
|
||||
}
|
||||
|
||||
&:active {
|
||||
&.primary {
|
||||
background: gainsboro;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.no-border {
|
||||
border: none !important;
|
||||
background: rgb(212 212 212 / 36%);
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-size: 12rem;
|
||||
width: 62rem;
|
||||
height: 26rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-border {
|
||||
border: none !important;
|
||||
background: rgb(212 212 212 / 36%);
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-size: 12rem;
|
||||
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,79 +9,79 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseHeader',
|
||||
components: {},
|
||||
props: {
|
||||
backMode: {
|
||||
type: String,
|
||||
default: 'gray',
|
||||
},
|
||||
backImg: {
|
||||
type: String,
|
||||
default: 'back',
|
||||
},
|
||||
isClose: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isFixed: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
export default {
|
||||
name: 'BaseHeader',
|
||||
components: {},
|
||||
props: {
|
||||
backMode: {
|
||||
type: String,
|
||||
default: 'gray'
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
backImg: {
|
||||
type: String,
|
||||
default: 'back'
|
||||
},
|
||||
created() {},
|
||||
computed: {},
|
||||
methods: {
|
||||
back() {
|
||||
if (this.$attrs.onBack) {
|
||||
this.$attrs.onBack()
|
||||
} else {
|
||||
this.$back()
|
||||
}
|
||||
},
|
||||
isClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isFixed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
computed: {},
|
||||
methods: {
|
||||
back() {
|
||||
if (this.$attrs.onBack) {
|
||||
this.$attrs.onBack()
|
||||
} else {
|
||||
this.$back()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
#BaseHeader {
|
||||
width: 100%;
|
||||
color: white;
|
||||
#BaseHeader {
|
||||
width: 100%;
|
||||
color: white;
|
||||
|
||||
&.fixed {
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
&.fixed {
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: var(--common-header-height);
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #cccccc11;
|
||||
position: relative;
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 10rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
& > :nth-last-child(1) {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 17px;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: var(--common-header-height);
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #cccccc11;
|
||||
position: relative;
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 10rem;
|
||||
}
|
||||
|
||||
& > :nth-last-child(1) {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 17px;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,57 +7,57 @@
|
||||
@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({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
})
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const isPlaying = inject('isPlaying')
|
||||
const isPlaying = inject('isPlaying')
|
||||
|
||||
const style = computed(() => {
|
||||
return { webkitAnimationPlayState: isPlaying.value ? 'running' : 'paused' }
|
||||
})
|
||||
const style = computed(() => {
|
||||
return { webkitAnimationPlayState: isPlaying.value ? 'running' : 'paused' }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.music-wrapper {
|
||||
.music-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@w: 45rem;
|
||||
|
||||
.music {
|
||||
border-radius: 50%;
|
||||
width: @w;
|
||||
height: @w;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@w: 45rem;
|
||||
align-items: center;
|
||||
animation: animations 5s linear forwards infinite;
|
||||
//animation-play-state:paused;
|
||||
//display: none;
|
||||
}
|
||||
|
||||
.music {
|
||||
border-radius: 50%;
|
||||
width: @w;
|
||||
height: @w;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: animations 5s linear forwards infinite;
|
||||
//animation-play-state:paused;
|
||||
//display: none;
|
||||
@keyframes animations {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
@keyframes animations {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
100% {
|
||||
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,242 +71,242 @@
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import { inject } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'Call',
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: false,
|
||||
},
|
||||
data() {
|
||||
export default {
|
||||
name: 'Call',
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mitt: inject('mitt'),
|
||||
callFloatTransitionTime: 300,
|
||||
callFloatLeft: 15,
|
||||
callFloatTop: 100,
|
||||
isOpenCamera: false,
|
||||
isOpenAudio: true,
|
||||
isExpand: true,
|
||||
isSmall: false,
|
||||
isShowAudioCall: false,
|
||||
height: 0,
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
callFloatStyle() {
|
||||
return {
|
||||
mitt: inject('mitt'),
|
||||
callFloatTransitionTime: 300,
|
||||
callFloatLeft: 15,
|
||||
callFloatTop: 100,
|
||||
isOpenCamera: false,
|
||||
isOpenAudio: true,
|
||||
isExpand: true,
|
||||
isSmall: false,
|
||||
isShowAudioCall: false,
|
||||
height: 0,
|
||||
width: 0,
|
||||
'transition-duration': this.callFloatTransitionTime + 'ms',
|
||||
left: this.callFloatLeft + 'px',
|
||||
top: this.callFloatTop + 'px'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isShowAudioCall(newVal) {
|
||||
if (!newVal) {
|
||||
this.isOpenCamera = false
|
||||
this.isOpenAudio = true
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
touchmove(e) {
|
||||
this.callFloatTransitionTime = 0
|
||||
this.callFloatLeft = e.touches[0].pageX - 35
|
||||
this.callFloatTop = e.touches[0].pageY - 40
|
||||
},
|
||||
computed: {
|
||||
callFloatStyle() {
|
||||
return {
|
||||
'transition-duration': this.callFloatTransitionTime + 'ms',
|
||||
left: this.callFloatLeft + 'px',
|
||||
top: this.callFloatTop + 'px',
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isShowAudioCall(newVal) {
|
||||
if (!newVal) {
|
||||
this.isOpenCamera = false
|
||||
this.isOpenAudio = true
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
touchmove(e) {
|
||||
this.callFloatTransitionTime = 0
|
||||
this.callFloatLeft = e.touches[0].pageX - 35
|
||||
this.callFloatTop = e.touches[0].pageY - 40
|
||||
},
|
||||
touchend(e) {
|
||||
this.callFloatTransitionTime = 300
|
||||
if (this.callFloatLeft < this.width / 2) {
|
||||
this.callFloatLeft = 15
|
||||
} else {
|
||||
this.callFloatLeft = this.width - 15 - 70
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.mitt.on('showAudioCall', () => {
|
||||
if (this.isShowAudioCall) {
|
||||
this.isSmall = false
|
||||
} else {
|
||||
this.isShowAudioCall = true
|
||||
}
|
||||
})
|
||||
this.height = document.body.clientHeight
|
||||
this.width = document.body.clientWidth
|
||||
},
|
||||
touchend(e) {
|
||||
this.callFloatTransitionTime = 300
|
||||
if (this.callFloatLeft < this.width / 2) {
|
||||
this.callFloatLeft = 15
|
||||
} else {
|
||||
this.callFloatLeft = this.width - 15 - 70
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mitt.on('showAudioCall', () => {
|
||||
if (this.isShowAudioCall) {
|
||||
this.isSmall = false
|
||||
} else {
|
||||
this.isShowAudioCall = true
|
||||
}
|
||||
})
|
||||
this.height = document.body.clientHeight
|
||||
this.width = document.body.clientWidth
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.scale-enter-from,
|
||||
.scale-leave-to {
|
||||
transform: scale(0);
|
||||
}
|
||||
.scale-enter-from,
|
||||
.scale-leave-to {
|
||||
transform: scale(0);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped lang="less">
|
||||
.call-float {
|
||||
transition-property: all;
|
||||
z-index: 9;
|
||||
.call-float {
|
||||
transition-property: all;
|
||||
z-index: 9;
|
||||
width: 70rem;
|
||||
height: 90rem;
|
||||
position: fixed;
|
||||
top: 20vh;
|
||||
left: var(--page-padding);
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 6rem;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #14bf5f;
|
||||
font-size: 12rem;
|
||||
|
||||
img {
|
||||
width: 30rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.audio-call {
|
||||
color: white;
|
||||
position: fixed;
|
||||
z-index: 8;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
background: linear-gradient(to bottom, #262626, black);
|
||||
transition: all 0.3s;
|
||||
font-size: 12rem;
|
||||
|
||||
.float {
|
||||
transition: all 0.3s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
> .header {
|
||||
transition: all 0.3s;
|
||||
width: 100%;
|
||||
padding: var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
width: 12%;
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
max-width: 24rem;
|
||||
max-height: 24rem;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
word-break: keep-all;
|
||||
font-size: 14rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 12%;
|
||||
max-width: 40rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
max-width: 24rem;
|
||||
max-height: 24rem;
|
||||
}
|
||||
|
||||
.option {
|
||||
margin-bottom: 55%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
word-break: keep-all;
|
||||
margin-top: 20%;
|
||||
font-size: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.shrink {
|
||||
transform: rotate(90deg) scale(0.6) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.big-avatar {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
width: 25%;
|
||||
max-width: 100rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
margin-bottom: 10%;
|
||||
|
||||
img {
|
||||
width: 15%;
|
||||
max-width: 50rem;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: 70rem;
|
||||
height: 90rem;
|
||||
position: fixed;
|
||||
top: 20vh;
|
||||
left: var(--page-padding);
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 6rem;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #14bf5f;
|
||||
font-size: 12rem;
|
||||
|
||||
img {
|
||||
width: 30rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.audio-call {
|
||||
color: white;
|
||||
position: fixed;
|
||||
z-index: 8;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
background: linear-gradient(to bottom, #262626, black);
|
||||
transition: all 0.3s;
|
||||
font-size: 12rem;
|
||||
|
||||
.float {
|
||||
transition: all 0.3s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
> .header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
> .header {
|
||||
transition: all 0.3s;
|
||||
width: 100%;
|
||||
padding: var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
width: 12%;
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
max-width: 24rem;
|
||||
max-height: 24rem;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
word-break: keep-all;
|
||||
font-size: 14rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 12%;
|
||||
max-width: 40rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
max-width: 24rem;
|
||||
max-height: 24rem;
|
||||
}
|
||||
|
||||
.option {
|
||||
margin-bottom: 55%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
word-break: keep-all;
|
||||
margin-top: 20%;
|
||||
font-size: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.shrink {
|
||||
transform: rotate(90deg) scale(0.6) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.big-avatar {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
width: 25%;
|
||||
max-width: 100rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
margin-bottom: 10%;
|
||||
|
||||
img {
|
||||
width: 15%;
|
||||
max-width: 50rem;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: 70rem;
|
||||
height: 90rem;
|
||||
position: fixed;
|
||||
top: 20vh;
|
||||
left: var(--page-padding);
|
||||
border-radius: 6rem;
|
||||
|
||||
.float {
|
||||
> .header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
transform: scale(0.2);
|
||||
}
|
||||
transform: scale(0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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,43 +14,43 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Check',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'gray', //red
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
change() {
|
||||
this.$emit('update:modelValue', !this.modelValue)
|
||||
this.$emit('change', !this.modelValue)
|
||||
},
|
||||
export default {
|
||||
name: 'Check',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'gray' //red
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
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 {
|
||||
@width: 14rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
.check {
|
||||
@width: 14rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
|
||||
> img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
> img {
|
||||
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,223 +170,242 @@
|
||||
</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 {
|
||||
name: 'Comment',
|
||||
components: {
|
||||
Popover,
|
||||
AutoInput,
|
||||
ConfirmDialog,
|
||||
FromBottomDialog,
|
||||
Loading,
|
||||
Search,
|
||||
export default {
|
||||
name: 'Comment',
|
||||
components: {
|
||||
Popover,
|
||||
AutoInput,
|
||||
ConfirmDialog,
|
||||
FromBottomDialog,
|
||||
Loading,
|
||||
Search
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
videoId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
videoId: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
pageId: {
|
||||
type: String,
|
||||
default: 'home-index',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(var(--vh, 1vh) * 70)',
|
||||
},
|
||||
pageId: {
|
||||
type: String,
|
||||
default: 'home-index'
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
},
|
||||
watch: {
|
||||
modelValue(newVale) {
|
||||
if (newVale) {
|
||||
this.getData()
|
||||
} else {
|
||||
this.comments = []
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
comment: '',
|
||||
test: '',
|
||||
comments: [],
|
||||
options: [
|
||||
{ id: 1, name: '私信回复' },
|
||||
{ id: 2, name: '复制' },
|
||||
{ id: 3, name: '搜一搜' },
|
||||
{ id: 4, name: '举报' },
|
||||
],
|
||||
selectRow: {},
|
||||
showPrivateChat: false,
|
||||
isInput: false,
|
||||
isCall: false,
|
||||
loadChildren: false,
|
||||
loadChildrenItemCId: -1,
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(var(--vh, 1vh) * 70)'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends'])
|
||||
},
|
||||
watch: {
|
||||
modelValue(newVale) {
|
||||
if (newVale) {
|
||||
this.getData()
|
||||
} else {
|
||||
this.comments = []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
comment: '',
|
||||
test: '',
|
||||
comments: [],
|
||||
options: [
|
||||
{ id: 1, name: '私信回复' },
|
||||
{ id: 2, name: '复制' },
|
||||
{ id: 3, name: '搜一搜' },
|
||||
{ id: 4, name: '举报' }
|
||||
],
|
||||
selectRow: {},
|
||||
showPrivateChat: false,
|
||||
isInput: false,
|
||||
isCall: false,
|
||||
loadChildren: false,
|
||||
loadChildrenItemCId: -1
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
_formatNumber,
|
||||
_checkImgUrl,
|
||||
$no,
|
||||
async handShowChildren(item) {
|
||||
this.loadChildrenItemCId = item.comment_id
|
||||
this.loadChildren = true
|
||||
await this.$sleep(500)
|
||||
this.loadChildren = false
|
||||
if (item.showChildren) {
|
||||
item.children = item.children.concat(sampleSize(this.comments, 10))
|
||||
} else {
|
||||
item.children = sampleSize(this.comments, 3)
|
||||
item.showChildren = true
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
_formatNumber,
|
||||
_checkImgUrl,
|
||||
$no,
|
||||
async handShowChildren(item) {
|
||||
this.loadChildrenItemCId = item.comment_id
|
||||
this.loadChildren = true
|
||||
await this.$sleep(500)
|
||||
this.loadChildren = false
|
||||
if (item.showChildren) {
|
||||
item.children = item.children.concat(sampleSize(this.comments, 10))
|
||||
} else {
|
||||
item.children = sampleSize(this.comments, 3)
|
||||
item.showChildren = true
|
||||
}
|
||||
},
|
||||
send() {
|
||||
this.comments.push({
|
||||
id: '2',
|
||||
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: [],
|
||||
})
|
||||
this.comment = ''
|
||||
this.isCall = false
|
||||
},
|
||||
async getData() {
|
||||
let res = await videoComments({ id: this.videoId })
|
||||
if (res.success) {
|
||||
res.data.map((v) => {
|
||||
v.showChildren = false
|
||||
v.digg_count = Number(v.digg_count)
|
||||
})
|
||||
this.comments = res.data
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('update:modelValue', false)
|
||||
this.$emit('close')
|
||||
},
|
||||
toggleCall(item) {
|
||||
item.select = !item.select
|
||||
let name = item.name
|
||||
if (this.comment.includes('@' + name)) {
|
||||
this.comment = this.comment.replace(`@${name} `, '')
|
||||
} else {
|
||||
this.comment += `@${name} `
|
||||
}
|
||||
},
|
||||
loved(row) {
|
||||
if (row.isLoved) {
|
||||
row.digg_count--
|
||||
} else {
|
||||
row.digg_count++
|
||||
}
|
||||
row.user_digged = !row.user_digged
|
||||
},
|
||||
showOptions(row) {
|
||||
return
|
||||
this.$showSelectDialog(this.options, (e) => {
|
||||
if (e.id === 1) {
|
||||
this.selectRow = row
|
||||
this.showPrivateChat = true
|
||||
}
|
||||
})
|
||||
},
|
||||
// showComment() {
|
||||
// this.isCommenting = !this.isCommenting;
|
||||
// console.log(666)
|
||||
// }
|
||||
call() {
|
||||
console.log(this.commit)
|
||||
},
|
||||
send() {
|
||||
this.comments.push({
|
||||
id: '2',
|
||||
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: []
|
||||
})
|
||||
this.comment = ''
|
||||
this.isCall = false
|
||||
},
|
||||
async getData() {
|
||||
let res = await videoComments({ id: this.videoId })
|
||||
if (res.success) {
|
||||
res.data.map((v) => {
|
||||
v.showChildren = false
|
||||
v.digg_count = Number(v.digg_count)
|
||||
})
|
||||
this.comments = res.data
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('update:modelValue', false)
|
||||
this.$emit('close')
|
||||
},
|
||||
toggleCall(item) {
|
||||
item.select = !item.select
|
||||
let name = item.name
|
||||
if (this.comment.includes('@' + name)) {
|
||||
this.comment = this.comment.replace(`@${name} `, '')
|
||||
} else {
|
||||
this.comment += `@${name} `
|
||||
}
|
||||
},
|
||||
loved(row) {
|
||||
if (row.isLoved) {
|
||||
row.digg_count--
|
||||
} else {
|
||||
row.digg_count++
|
||||
}
|
||||
row.user_digged = !row.user_digged
|
||||
},
|
||||
showOptions(row) {
|
||||
return
|
||||
this.$showSelectDialog(this.options, (e) => {
|
||||
if (e.id === 1) {
|
||||
this.selectRow = row
|
||||
this.showPrivateChat = true
|
||||
}
|
||||
})
|
||||
},
|
||||
// showComment() {
|
||||
// this.isCommenting = !this.isCommenting;
|
||||
// console.log(666)
|
||||
// }
|
||||
call() {
|
||||
console.log(this.commit)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.title {
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40rem;
|
||||
padding: 0 15rem;
|
||||
background: white;
|
||||
.title {
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40rem;
|
||||
padding: 0 15rem;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
|
||||
.num {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
font-size: 12rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
gap: 12rem;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.num {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
font-size: 12rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
gap: 12rem;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
svg {
|
||||
background: rgb(242, 242, 242);
|
||||
padding: 4rem;
|
||||
font-size: 16rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
svg {
|
||||
background: rgb(242, 242, 242);
|
||||
padding: 4rem;
|
||||
font-size: 16rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: var(--second-text-color);
|
||||
.gray {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
|
||||
.comment {
|
||||
width: 100vw;
|
||||
height: v-bind(height);
|
||||
background: #fff;
|
||||
z-index: 5;
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-top: 40rem;
|
||||
padding-bottom: 60rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
width: 100vw;
|
||||
height: v-bind(height);
|
||||
background: #fff;
|
||||
z-index: 5;
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
.items {
|
||||
width: 100%;
|
||||
|
||||
.wrapper {
|
||||
.item {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-top: 40rem;
|
||||
padding-bottom: 60rem;
|
||||
}
|
||||
margin-bottom: 15rem;
|
||||
|
||||
.items {
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
.main {
|
||||
width: 100%;
|
||||
margin-bottom: 15rem;
|
||||
padding: 5rem 0;
|
||||
display: flex;
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
padding: 5rem 0;
|
||||
&:active {
|
||||
background: #53535321;
|
||||
}
|
||||
|
||||
.head-image {
|
||||
margin-left: 15rem;
|
||||
margin-right: 10rem;
|
||||
width: 37rem;
|
||||
height: 37rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.replies {
|
||||
padding-left: 55rem;
|
||||
|
||||
.reply {
|
||||
padding: 5rem 0 5rem 5rem;
|
||||
display: flex;
|
||||
|
||||
&:active {
|
||||
@ -447,227 +413,207 @@
|
||||
}
|
||||
|
||||
.head-image {
|
||||
margin-left: 15rem;
|
||||
margin-right: 10rem;
|
||||
width: 37rem;
|
||||
height: 37rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.replies {
|
||||
padding-left: 55rem;
|
||||
|
||||
.reply {
|
||||
padding: 5rem 0 5rem 5rem;
|
||||
display: flex;
|
||||
|
||||
&:active {
|
||||
background: #53535321;
|
||||
}
|
||||
|
||||
.head-image {
|
||||
margin-right: 10rem;
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
font-size: 13rem;
|
||||
margin: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: gray;
|
||||
|
||||
.gang {
|
||||
background: #d5d5d5;
|
||||
width: 20rem;
|
||||
margin-right: 10rem;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 5rem;
|
||||
}
|
||||
svg {
|
||||
font-size: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
font-size: 14rem;
|
||||
|
||||
.comment-container {
|
||||
flex: 1;
|
||||
margin-right: 20rem;
|
||||
|
||||
.name {
|
||||
color: var(--second-text-color);
|
||||
margin-bottom: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.reply-user {
|
||||
margin-left: 5rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5rem solid transparent;
|
||||
border-left: 6rem solid gray;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.time-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 13rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
|
||||
.time {
|
||||
color: #c4c3c3;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
.reply-text {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.love {
|
||||
color: gray;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.loved {
|
||||
color: rgb(231, 58, 87);
|
||||
}
|
||||
|
||||
.love-image {
|
||||
font-size: 17rem;
|
||||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
span {
|
||||
word-break: keep-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@normal-bg-color: rgb(35, 38, 47);
|
||||
@chat-bg-color: rgb(105, 143, 244);
|
||||
|
||||
.input-toolbar {
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
background: white;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
|
||||
@space-width: 18rem;
|
||||
@icon-width: 48rem;
|
||||
|
||||
.call-friend {
|
||||
padding-top: 30rem;
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
padding-right: @space-width;
|
||||
|
||||
.friend {
|
||||
width: @icon-width;
|
||||
position: relative;
|
||||
margin-left: @space-width;
|
||||
margin-bottom: @space-width;
|
||||
font-size: 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: @icon-width;
|
||||
height: @icon-width;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 5rem;
|
||||
text-align: center;
|
||||
width: @icon-width;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.checked {
|
||||
position: absolute;
|
||||
top: @icon-width - 1.5;
|
||||
right: -2px;
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
@icon-width: 25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rem 15rem;
|
||||
border-top: 1px solid #e2e1e1;
|
||||
|
||||
.input-wrapper {
|
||||
flex: 1;
|
||||
.more {
|
||||
font-size: 13rem;
|
||||
margin: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 5rem 10rem;
|
||||
background: #eee;
|
||||
border-radius: 20rem;
|
||||
color: gray;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.gang {
|
||||
background: #d5d5d5;
|
||||
width: 20rem;
|
||||
margin-right: 10rem;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.auto-input {
|
||||
width: calc(100vw - 180rem);
|
||||
span {
|
||||
margin-right: 5rem;
|
||||
}
|
||||
svg {
|
||||
font-size: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: @icon-width;
|
||||
height: @icon-width;
|
||||
border-radius: 50%;
|
||||
margin-left: 15rem;
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
font-size: 14rem;
|
||||
|
||||
.comment-container {
|
||||
flex: 1;
|
||||
margin-right: 20rem;
|
||||
|
||||
.name {
|
||||
color: var(--second-text-color);
|
||||
margin-bottom: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.reply-user {
|
||||
margin-left: 5rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5rem solid transparent;
|
||||
border-left: 6rem solid gray;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.time-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 13rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
|
||||
.time {
|
||||
color: #c4c3c3;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
.reply-text {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.love {
|
||||
color: gray;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.loved {
|
||||
color: rgb(231, 58, 87);
|
||||
}
|
||||
|
||||
.love-image {
|
||||
font-size: 17rem;
|
||||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
span {
|
||||
word-break: keep-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-enter-active,
|
||||
.comment-leave-active {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
@normal-bg-color: rgb(35, 38, 47);
|
||||
@chat-bg-color: rgb(105, 143, 244);
|
||||
|
||||
.comment-enter-from,
|
||||
.comment-leave-to {
|
||||
transform: translateY(60vh);
|
||||
.input-toolbar {
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
background: white;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
|
||||
@space-width: 18rem;
|
||||
@icon-width: 48rem;
|
||||
|
||||
.call-friend {
|
||||
padding-top: 30rem;
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
padding-right: @space-width;
|
||||
|
||||
.friend {
|
||||
width: @icon-width;
|
||||
position: relative;
|
||||
margin-left: @space-width;
|
||||
margin-bottom: @space-width;
|
||||
font-size: 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: @icon-width;
|
||||
height: @icon-width;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 5rem;
|
||||
text-align: center;
|
||||
width: @icon-width;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.checked {
|
||||
position: absolute;
|
||||
top: @icon-width - 1.5;
|
||||
right: -2px;
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
@icon-width: 25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rem 15rem;
|
||||
border-top: 1px solid #e2e1e1;
|
||||
|
||||
.input-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 5rem 10rem;
|
||||
background: #eee;
|
||||
border-radius: 20rem;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auto-input {
|
||||
width: calc(100vw - 180rem);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: @icon-width;
|
||||
height: @icon-width;
|
||||
border-radius: 50%;
|
||||
margin-left: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-enter-active,
|
||||
.comment-leave-active {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.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,134 +43,134 @@
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import { _checkImgUrl } from '@/utils'
|
||||
import { _checkImgUrl } from '@/utils'
|
||||
|
||||
export default {
|
||||
name: 'DouyinCode',
|
||||
props: {
|
||||
item: {},
|
||||
modelValue: false,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
_checkImgUrl,
|
||||
cancel() {
|
||||
this.$emit('update:modelValue', false)
|
||||
},
|
||||
},
|
||||
export default {
|
||||
name: 'DouyinCode',
|
||||
props: {
|
||||
item: {},
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
_checkImgUrl,
|
||||
cancel() {
|
||||
this.$emit('update:modelValue', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.DouyinCode {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
background: transparent;
|
||||
@w: 70vw;
|
||||
.DouyinCode {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
background: transparent;
|
||||
@w: 70vw;
|
||||
|
||||
.content {
|
||||
background: white;
|
||||
width: @w;
|
||||
margin-bottom: 40rem;
|
||||
position: relative;
|
||||
border-radius: 10rem;
|
||||
overflow: hidden;
|
||||
.content {
|
||||
background: white;
|
||||
width: @w;
|
||||
margin-bottom: 40rem;
|
||||
position: relative;
|
||||
border-radius: 10rem;
|
||||
overflow: hidden;
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
gap: 20rem;
|
||||
padding: 10rem;
|
||||
.desc {
|
||||
display: flex;
|
||||
gap: 20rem;
|
||||
padding: 10rem;
|
||||
|
||||
.left {
|
||||
font-size: 18rem;
|
||||
.left {
|
||||
font-size: 18rem;
|
||||
|
||||
.title {
|
||||
margin-top: 10rem;
|
||||
font-size: 14rem;
|
||||
color: var(--second-text-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
||||
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||||
-webkit-line-clamp: 1; //显示的行
|
||||
}
|
||||
}
|
||||
.code {
|
||||
width: 60rem;
|
||||
.title {
|
||||
margin-top: 10rem;
|
||||
font-size: 14rem;
|
||||
color: var(--second-text-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
||||
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||||
-webkit-line-clamp: 1; //显示的行
|
||||
}
|
||||
}
|
||||
|
||||
.video-poster {
|
||||
width: @w;
|
||||
height: @w;
|
||||
overflow: hidden;
|
||||
|
||||
.poster {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.code {
|
||||
width: 60rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
width: 100vw;
|
||||
background: black;
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
color: white;
|
||||
.video-poster {
|
||||
width: @w;
|
||||
height: @w;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
font-size: 12rem;
|
||||
padding: 14rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@space-width: 18rem;
|
||||
@icon-width: 45rem;
|
||||
|
||||
.shares {
|
||||
display: flex;
|
||||
margin-bottom: @space-width;
|
||||
gap: 20rem;
|
||||
padding-left: 20rem;
|
||||
|
||||
.share-to {
|
||||
img {
|
||||
width: @icon-width;
|
||||
height: @icon-width;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--second-text-color);
|
||||
font-size: 10rem;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cancel {
|
||||
font-size: 16rem;
|
||||
background: rgb(38, 38, 38);
|
||||
color: rgba(white, 0.8);
|
||||
padding: 15rem;
|
||||
text-align: center;
|
||||
.poster {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
width: 100vw;
|
||||
background: black;
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
color: white;
|
||||
|
||||
.title {
|
||||
font-size: 12rem;
|
||||
padding: 14rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@space-width: 18rem;
|
||||
@icon-width: 45rem;
|
||||
|
||||
.shares {
|
||||
display: flex;
|
||||
margin-bottom: @space-width;
|
||||
gap: 20rem;
|
||||
padding-left: 20rem;
|
||||
|
||||
.share-to {
|
||||
img {
|
||||
width: @icon-width;
|
||||
height: @icon-width;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--second-text-color);
|
||||
font-size: 10rem;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cancel {
|
||||
font-size: 16rem;
|
||||
background: rgb(38, 38, 38);
|
||||
color: rgba(white, 0.8);
|
||||
padding: 15rem;
|
||||
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,142 +24,142 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus, { EVENT_KEY } from '../utils/bus'
|
||||
import bus, { EVENT_KEY } from '../utils/bus'
|
||||
|
||||
export default {
|
||||
name: 'Footer',
|
||||
props: ['initTab', 'isWhite'],
|
||||
data() {
|
||||
return {
|
||||
isRefresh1: false,
|
||||
isRefresh2: false,
|
||||
currentTab: this.initTab,
|
||||
visible: true,
|
||||
export default {
|
||||
name: 'Footer',
|
||||
props: ['initTab', 'isWhite'],
|
||||
data() {
|
||||
return {
|
||||
isRefresh1: false,
|
||||
isRefresh2: false,
|
||||
currentTab: this.initTab,
|
||||
visible: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
bus.on('setFooterVisible', (e) => (this.visible = e))
|
||||
bus.on(EVENT_KEY.ENTER_FULLSCREEN, (e) => (this.visible = false))
|
||||
bus.on(EVENT_KEY.EXIT_FULLSCREEN, (e) => (this.visible = true))
|
||||
},
|
||||
unmounted() {
|
||||
bus.off(EVENT_KEY.ENTER_FULLSCREEN)
|
||||
bus.off(EVENT_KEY.EXIT_FULLSCREEN)
|
||||
},
|
||||
methods: {
|
||||
tab(index) {
|
||||
switch (index) {
|
||||
case 1:
|
||||
this.$nav('/')
|
||||
break
|
||||
case 2:
|
||||
this.$nav('/shop')
|
||||
break
|
||||
case 3:
|
||||
this.$nav('/publish')
|
||||
break
|
||||
case 4:
|
||||
this.$nav('/message')
|
||||
break
|
||||
case 5:
|
||||
this.$nav('/me')
|
||||
break
|
||||
}
|
||||
},
|
||||
created() {
|
||||
bus.on('setFooterVisible', (e) => (this.visible = e))
|
||||
bus.on(EVENT_KEY.ENTER_FULLSCREEN, (e) => (this.visible = false))
|
||||
bus.on(EVENT_KEY.EXIT_FULLSCREEN, (e) => (this.visible = true))
|
||||
},
|
||||
unmounted() {
|
||||
bus.off(EVENT_KEY.ENTER_FULLSCREEN)
|
||||
bus.off(EVENT_KEY.EXIT_FULLSCREEN)
|
||||
},
|
||||
methods: {
|
||||
tab(index) {
|
||||
switch (index) {
|
||||
case 1:
|
||||
this.$nav('/')
|
||||
break
|
||||
case 2:
|
||||
this.$nav('/shop')
|
||||
break
|
||||
case 3:
|
||||
this.$nav('/publish')
|
||||
break
|
||||
case 4:
|
||||
this.$nav('/message')
|
||||
break
|
||||
case 5:
|
||||
this.$nav('/me')
|
||||
break
|
||||
}
|
||||
},
|
||||
refresh(index) {
|
||||
if (this.currentTab === index) {
|
||||
refresh(index) {
|
||||
if (this.currentTab === index) {
|
||||
this['isRefresh' + index] = !this['isRefresh' + index]
|
||||
setTimeout(() => {
|
||||
this['isRefresh' + index] = !this['isRefresh' + index]
|
||||
setTimeout(() => {
|
||||
this['isRefresh' + index] = !this['isRefresh' + index]
|
||||
}, 2000)
|
||||
} else {
|
||||
this.tab(index)
|
||||
}
|
||||
},
|
||||
},
|
||||
}, 2000)
|
||||
} else {
|
||||
this.tab(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.footer {
|
||||
font-size: 14rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: var(--footer-height);
|
||||
//border-top: 1px solid #7b7878;
|
||||
z-index: 2;
|
||||
//不用bottom：0是因为，在进行页面切换的时候，vue的transition
|
||||
// 会使footer的bottom：0失效，不能准确定位
|
||||
top: calc(var(--vh, 1vh) * 100 - var(--footer-height));
|
||||
//bottom: 0;
|
||||
background: var(--footer-color);
|
||||
color: white;
|
||||
.footer {
|
||||
font-size: 14rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: var(--footer-height);
|
||||
//border-top: 1px solid #7b7878;
|
||||
z-index: 2;
|
||||
//不用bottom：0是因为，在进行页面切换的时候，vue的transition
|
||||
// 会使footer的bottom：0失效，不能准确定位
|
||||
top: calc(var(--vh, 1vh) * 100 - var(--footer-height));
|
||||
//bottom: 0;
|
||||
background: var(--footer-color);
|
||||
color: white;
|
||||
display: flex;
|
||||
//justify-content: space-between;
|
||||
|
||||
&.isWhite {
|
||||
background: white !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.l-button {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
//justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
font-size: 16rem;
|
||||
|
||||
&.isWhite {
|
||||
background: white !important;
|
||||
color: #000 !important;
|
||||
.refresh {
|
||||
width: 25%;
|
||||
animation: rotate 0.5s linear infinite;
|
||||
}
|
||||
|
||||
.l-button {
|
||||
width: 20%;
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.add-ctn {
|
||||
@height: 27rem;
|
||||
@width: 36rem;
|
||||
height: @height;
|
||||
width: @width;
|
||||
border-radius: 6rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 2rem;
|
||||
border: 3rem solid white;
|
||||
background: black;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
font-size: 16rem;
|
||||
justify-content: center;
|
||||
|
||||
.refresh {
|
||||
width: 25%;
|
||||
animation: rotate 0.5s linear infinite;
|
||||
img {
|
||||
width: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
span {
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.add-ctn {
|
||||
@height: 27rem;
|
||||
@width: 36rem;
|
||||
height: @height;
|
||||
width: @width;
|
||||
border-radius: 6rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 2rem;
|
||||
border: 3rem solid white;
|
||||
background: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
right: 10rem;
|
||||
top: 6rem;
|
||||
position: absolute;
|
||||
}
|
||||
.badge {
|
||||
right: 10rem;
|
||||
top: 6rem;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,82 +5,82 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Loading',
|
||||
props: {
|
||||
isFullScreen: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
},
|
||||
export default {
|
||||
name: 'Loading',
|
||||
props: {
|
||||
isFullScreen: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'normal'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.Loading {
|
||||
&.inline {
|
||||
width: 100%;
|
||||
height: 40rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.small {
|
||||
.circle {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.full {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 22rem;
|
||||
}
|
||||
.Loading {
|
||||
&.inline {
|
||||
width: 100%;
|
||||
height: 40rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.small {
|
||||
.circle {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: cadetblue;
|
||||
animation: anim-blue 0.4s ease-in-out 0s infinite alternate;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: var(--primary-btn-color);
|
||||
animation: anim-red 0.4s ease-in-out 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes anim-blue {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(10rem, 0, 0) scale(1.2);
|
||||
}
|
||||
}
|
||||
@keyframes anim-red {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(-10rem, 0, 0) scale(1.2);
|
||||
}
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.full {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 22rem;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: cadetblue;
|
||||
animation: anim-blue 0.4s ease-in-out 0s infinite alternate;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: var(--primary-btn-color);
|
||||
animation: anim-red 0.4s ease-in-out 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes anim-blue {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(10rem, 0, 0) scale(1.2);
|
||||
}
|
||||
}
|
||||
@keyframes anim-red {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(-10rem, 0, 0) scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,43 +2,43 @@
|
||||
<div class="Mask" :class="mode"></div>
|
||||
</template>
|
||||
<script>
|
||||
//未以组件的方式使用，FromBottomDialog.vue里面是用js append到dom里面去的，
|
||||
//以组件的方式使用，不好随意插位置，插到app下面，又会出现定位覆盖的问题
|
||||
export default {
|
||||
name: 'Mask',
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'dark',
|
||||
},
|
||||
},
|
||||
//未以组件的方式使用，FromBottomDialog.vue里面是用js append到dom里面去的，
|
||||
//以组件的方式使用，不好随意插位置，插到app下面，又会出现定位覆盖的问题
|
||||
export default {
|
||||
name: 'Mask',
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'dark'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.Mask {
|
||||
z-index: 3;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
.Mask {
|
||||
z-index: 3;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--mask-dark);
|
||||
|
||||
&.dark {
|
||||
background: var(--mask-dark);
|
||||
|
||||
&.dark {
|
||||
background: var(--mask-dark);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: var(--mask-light);
|
||||
}
|
||||
|
||||
&.lightgray {
|
||||
background: var(--mask-lightgray);
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: var(--mask-white);
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: var(--mask-light);
|
||||
}
|
||||
|
||||
&.lightgray {
|
||||
background: var(--mask-lightgray);
|
||||
}
|
||||
|
||||
&.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 {
|
||||
font-size: 12rem;
|
||||
height: 60rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
.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,139 +18,139 @@
|
||||
</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({
|
||||
list: {
|
||||
type: [Array, Number],
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'normal', //date,music
|
||||
},
|
||||
})
|
||||
|
||||
defineOptions({
|
||||
name: 'Posters',
|
||||
})
|
||||
|
||||
function goDetail(index) {
|
||||
store.routeData = cloneDeep({ list: props.list, index })
|
||||
nav.push({ path: '/video-detail' })
|
||||
}
|
||||
|
||||
function getDay(time) {
|
||||
let date = new Date(time * 1000)
|
||||
return date.getDate()
|
||||
}
|
||||
|
||||
function getMonth(time) {
|
||||
let date = new Date(time * 1000)
|
||||
let month = date.getMonth() + 1
|
||||
switch (month) {
|
||||
case 1:
|
||||
return '一月'
|
||||
case 2:
|
||||
return '二月'
|
||||
case 3:
|
||||
return '三月'
|
||||
case 4:
|
||||
return '四月'
|
||||
case 5:
|
||||
return '五月'
|
||||
case 6:
|
||||
return '六月'
|
||||
case 7:
|
||||
return '七月'
|
||||
case 8:
|
||||
return '八月'
|
||||
case 9:
|
||||
return '九月'
|
||||
case 10:
|
||||
return '十月'
|
||||
case 11:
|
||||
return '十一月'
|
||||
case 12:
|
||||
return '十二月'
|
||||
const store = useBaseStore()
|
||||
const nav = useRouter()
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: [Array, Number],
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'normal' //date,music
|
||||
}
|
||||
})
|
||||
|
||||
defineOptions({
|
||||
name: 'Posters'
|
||||
})
|
||||
|
||||
function goDetail(index) {
|
||||
store.routeData = cloneDeep({ list: props.list, index })
|
||||
nav.push({ path: '/video-detail' })
|
||||
}
|
||||
|
||||
function getDay(time) {
|
||||
let date = new Date(time * 1000)
|
||||
return date.getDate()
|
||||
}
|
||||
|
||||
function getMonth(time) {
|
||||
let date = new Date(time * 1000)
|
||||
let month = date.getMonth() + 1
|
||||
switch (month) {
|
||||
case 1:
|
||||
return '一月'
|
||||
case 2:
|
||||
return '二月'
|
||||
case 3:
|
||||
return '三月'
|
||||
case 4:
|
||||
return '四月'
|
||||
case 5:
|
||||
return '五月'
|
||||
case 6:
|
||||
return '六月'
|
||||
case 7:
|
||||
return '七月'
|
||||
case 8:
|
||||
return '八月'
|
||||
case 9:
|
||||
return '九月'
|
||||
case 10:
|
||||
return '十月'
|
||||
case 11:
|
||||
return '十一月'
|
||||
case 12:
|
||||
return '十二月'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.posters {
|
||||
display: grid;
|
||||
grid-template-columns: 33.33vw 33.33vw 33.33vw;
|
||||
.posters {
|
||||
display: grid;
|
||||
grid-template-columns: 33.33vw 33.33vw 33.33vw;
|
||||
}
|
||||
|
||||
.poster-item {
|
||||
height: calc(33.33vw * 1.2);
|
||||
border: 0.5px solid black;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.poster {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.poster-item {
|
||||
height: calc(33.33vw * 1.2);
|
||||
border: 0.5px solid black;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.music {
|
||||
position: absolute;
|
||||
font-size: 12rem;
|
||||
background: gold;
|
||||
color: black;
|
||||
padding: 2rem 3rem;
|
||||
border-radius: 2rem;
|
||||
top: 7rem;
|
||||
left: 7rem;
|
||||
}
|
||||
|
||||
.poster {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
.num {
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 5rem;
|
||||
left: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14rem;
|
||||
gap: 3rem;
|
||||
|
||||
.music {
|
||||
position: absolute;
|
||||
font-size: 12rem;
|
||||
background: gold;
|
||||
color: black;
|
||||
padding: 2rem 3rem;
|
||||
border-radius: 2rem;
|
||||
top: 7rem;
|
||||
left: 7rem;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 5rem;
|
||||
left: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14rem;
|
||||
gap: 3rem;
|
||||
|
||||
.love {
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
left: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 14rem;
|
||||
color: black;
|
||||
background: white;
|
||||
padding: 6rem;
|
||||
border-radius: 6rem;
|
||||
|
||||
.day {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.month {
|
||||
font-size: 10rem;
|
||||
}
|
||||
.love {
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
left: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 14rem;
|
||||
color: black;
|
||||
background: white;
|
||||
padding: 6rem;
|
||||
border-radius: 6rem;
|
||||
|
||||
.day {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.month {
|
||||
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,115 +21,112 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Loading from './Loading'
|
||||
import { nextTick } from 'vue'
|
||||
import Loading from './Loading'
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'Scroll',
|
||||
components: {
|
||||
Loading,
|
||||
export default {
|
||||
name: 'Scroll',
|
||||
components: {
|
||||
Loading
|
||||
},
|
||||
props: {
|
||||
fixedHeight: {
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
props: {
|
||||
fixedHeight: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
useRefresh: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
fullLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
useRefresh: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data() {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fullLoading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
wrapper: null,
|
||||
startMoveY: null,
|
||||
distance: null,
|
||||
refresh: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pullUpStyle() {
|
||||
return {
|
||||
wrapper: null,
|
||||
startMoveY: null,
|
||||
distance: null,
|
||||
refresh: false,
|
||||
'transition-duration': this.refresh ? '300ms' : '0ms',
|
||||
transform: `translate3d(0px, ${this.distance !== null ? this.distance : -40}px,0`
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
nextTick(() => {
|
||||
this.wrapper = this.$refs.wrapper
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
move(e) {
|
||||
// console.log(this.wrapper)
|
||||
// console.log(this.wrapper.scrollTop)
|
||||
if (this.refresh) return
|
||||
if (this.wrapper.scrollTop > 0) return
|
||||
if (this.wrapper.scrollTop === 0 && this.startMoveY === null) {
|
||||
this.startMoveY = e.touches[0].pageY
|
||||
}
|
||||
let distance = e.touches[0].pageY - this.startMoveY
|
||||
this.distance = distance - 40 < 10 ? distance - 40 : 10
|
||||
},
|
||||
end() {
|
||||
this.startMoveY = null
|
||||
if (this.distance !== null && this.wrapper.scrollTop === 0) {
|
||||
this.refresh = true
|
||||
this.distance = 10
|
||||
this.$emit('refresh')
|
||||
} else {
|
||||
this.distance = null
|
||||
}
|
||||
// console.log('end')
|
||||
},
|
||||
refreshEnd() {
|
||||
this.distance = null
|
||||
setTimeout(() => {
|
||||
this.refresh = false
|
||||
}, 300)
|
||||
},
|
||||
async scroll() {
|
||||
if (this.fixedHeight !== -1) {
|
||||
this.$emit('fixed', this.fixedHeight < this.wrapper.scrollTop)
|
||||
}
|
||||
if (this.$attrs.onPulldown) {
|
||||
if (this.wrapper.scrollHeight - this.wrapper.clientHeight < this.wrapper.scrollTop + 60) {
|
||||
this.$emit('pulldown')
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pullUpStyle() {
|
||||
return {
|
||||
'transition-duration': this.refresh ? '300ms' : '0ms',
|
||||
transform: `translate3d(0px, ${this.distance !== null ? this.distance : -40}px,0`,
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
scrollBottom() {
|
||||
nextTick(() => {
|
||||
this.wrapper = this.$refs.wrapper
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
move(e) {
|
||||
// console.log(this.wrapper)
|
||||
// console.log(this.wrapper.scrollTop)
|
||||
if (this.refresh) return
|
||||
if (this.wrapper.scrollTop > 0) return
|
||||
if (this.wrapper.scrollTop === 0 && this.startMoveY === null) {
|
||||
this.startMoveY = e.touches[0].pageY
|
||||
}
|
||||
let distance = e.touches[0].pageY - this.startMoveY
|
||||
this.distance = distance - 40 < 10 ? distance - 40 : 10
|
||||
},
|
||||
end() {
|
||||
this.startMoveY = null
|
||||
if (this.distance !== null && this.wrapper.scrollTop === 0) {
|
||||
this.refresh = true
|
||||
this.distance = 10
|
||||
this.$emit('refresh')
|
||||
} else {
|
||||
this.distance = null
|
||||
}
|
||||
// console.log('end')
|
||||
},
|
||||
refreshEnd() {
|
||||
this.distance = null
|
||||
setTimeout(() => {
|
||||
this.refresh = false
|
||||
}, 300)
|
||||
},
|
||||
async scroll() {
|
||||
if (this.fixedHeight !== -1) {
|
||||
this.$emit('fixed', this.fixedHeight < this.wrapper.scrollTop)
|
||||
}
|
||||
if (this.$attrs.onPulldown) {
|
||||
if (
|
||||
this.wrapper.scrollHeight - this.wrapper.clientHeight <
|
||||
this.wrapper.scrollTop + 60
|
||||
) {
|
||||
this.$emit('pulldown')
|
||||
}
|
||||
}
|
||||
},
|
||||
scrollBottom() {
|
||||
nextTick(() => {
|
||||
this.wrapper.scrollTo({
|
||||
top: this.wrapper.scrollHeight - this.wrapper.clientHeight,
|
||||
})
|
||||
this.wrapper.scrollTo({
|
||||
top: this.wrapper.scrollHeight - this.wrapper.clientHeight
|
||||
})
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.scroll-wrapper {
|
||||
overflow: auto;
|
||||
.scroll-wrapper {
|
||||
overflow: auto;
|
||||
|
||||
.scroll-content {
|
||||
padding-bottom: 30rem;
|
||||
}
|
||||
.scroll-content {
|
||||
padding-bottom: 30rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,69 +1,65 @@
|
||||
<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({
|
||||
api: {
|
||||
type: Function,
|
||||
default() {
|
||||
return () => void 0
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
pageSize: 10,
|
||||
loading: false,
|
||||
})
|
||||
|
||||
function loadData() {
|
||||
if (state.loading) return
|
||||
state.pageNo++
|
||||
getData()
|
||||
const props = defineProps({
|
||||
api: {
|
||||
type: Function,
|
||||
default() {
|
||||
return () => void 0
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
async function getData(refresh = false) {
|
||||
const state = reactive({
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
pageSize: 10,
|
||||
loading: false
|
||||
})
|
||||
|
||||
function loadData() {
|
||||
if (state.loading) return
|
||||
state.pageNo++
|
||||
getData()
|
||||
}
|
||||
|
||||
async function getData(refresh = false) {
|
||||
if (refresh) {
|
||||
state.pageNo = 0
|
||||
} else {
|
||||
if (state.total !== 0 && state.total === state.list.length) return
|
||||
}
|
||||
if (state.loading) return
|
||||
state.loading = true
|
||||
let res = await props.api({
|
||||
pageNo: state.pageNo,
|
||||
pageSize: state.pageSize
|
||||
})
|
||||
state.loading = false
|
||||
if (res.success) {
|
||||
if (refresh) {
|
||||
state.pageNo = 0
|
||||
state.list = res.data.list
|
||||
} else {
|
||||
if (state.total !== 0 && state.total === state.list.length) return
|
||||
}
|
||||
if (state.loading) return
|
||||
state.loading = true
|
||||
let res = await props.api({
|
||||
pageNo: state.pageNo,
|
||||
pageSize: state.pageSize,
|
||||
})
|
||||
state.loading = false
|
||||
if (res.success) {
|
||||
if (refresh) {
|
||||
state.list = res.data.list
|
||||
} else {
|
||||
state.list = state.list.concat(res.data.list)
|
||||
}
|
||||
state.total = res.data.total
|
||||
} else {
|
||||
_notice('查询失败')
|
||||
state.list = state.list.concat(res.data.list)
|
||||
}
|
||||
state.total = res.data.total
|
||||
} else {
|
||||
_notice('查询失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(getData)
|
||||
onMounted(getData)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
|
||||
@ -30,128 +30,128 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//TODO 背景颜色不对
|
||||
export default {
|
||||
name: 'Search',
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '搜索',
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
rightTextColor: {
|
||||
type: String,
|
||||
default: 'red',
|
||||
},
|
||||
isShowRightText: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isShowSearchIcon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
rightText: {
|
||||
type: String,
|
||||
default: '搜索',
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'dark',
|
||||
},
|
||||
//TODO 背景颜色不对
|
||||
export default {
|
||||
name: 'Search',
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '搜索'
|
||||
},
|
||||
methods: {
|
||||
clear() {
|
||||
this.value = ''
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
mounted() {},
|
||||
computed: {
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:modelValue', val)
|
||||
if (!val) {
|
||||
this.$emit('clear')
|
||||
}
|
||||
},
|
||||
},
|
||||
rightTextColor: {
|
||||
type: String,
|
||||
default: 'red'
|
||||
},
|
||||
isShowRightText: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isShowSearchIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
rightText: {
|
||||
type: String,
|
||||
default: '搜索'
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'dark'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clear() {
|
||||
this.value = ''
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
computed: {
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:modelValue', val)
|
||||
if (!val) {
|
||||
this.$emit('clear')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.search-ctn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.dark {
|
||||
.search {
|
||||
background: var(--second-btn-color-tran);
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
.search {
|
||||
background: whitesmoke;
|
||||
|
||||
input {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rightTextColor {
|
||||
margin-left: 15rem;
|
||||
font-size: 14rem;
|
||||
}
|
||||
.search-ctn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.dark {
|
||||
.search {
|
||||
font-size: 14rem;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 36rem;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--second-btn-color-tran);
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
height: 22rem;
|
||||
width: 22rem;
|
||||
margin-left: 7rem;
|
||||
}
|
||||
&.light {
|
||||
.search {
|
||||
background: whitesmoke;
|
||||
|
||||
input {
|
||||
//margin-top: .4rem;
|
||||
color: white;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0 0 0 7rem;
|
||||
background: transparent;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 15rem;
|
||||
|
||||
img {
|
||||
width: 15rem;
|
||||
}
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rightTextColor {
|
||||
margin-left: 15rem;
|
||||
font-size: 14rem;
|
||||
}
|
||||
|
||||
.search {
|
||||
font-size: 14rem;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 36rem;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.search-icon {
|
||||
height: 22rem;
|
||||
width: 22rem;
|
||||
margin-left: 7rem;
|
||||
}
|
||||
|
||||
input {
|
||||
//margin-top: .4rem;
|
||||
color: white;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0 0 0 7rem;
|
||||
background: transparent;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 15rem;
|
||||
|
||||
img {
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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,229 +136,227 @@
|
||||
</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 {
|
||||
name: 'Share',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Check,
|
||||
DouyinCode,
|
||||
export default {
|
||||
name: 'Share',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Check,
|
||||
DouyinCode
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
item: {},
|
||||
videoId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
item: {},
|
||||
videoId: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
pageId: {
|
||||
type: String,
|
||||
default: 'home-index',
|
||||
},
|
||||
canDownload: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'video',
|
||||
//music
|
||||
//qrcode
|
||||
},
|
||||
pageId: {
|
||||
type: String,
|
||||
default: 'home-index'
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
selectFriends() {
|
||||
return this.friends.all.filter((v) => v.select)
|
||||
},
|
||||
canDownload: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'video'
|
||||
//music
|
||||
//qrcode
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
selectFriends() {
|
||||
return this.friends.all.filter((v) => v.select)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
$no,
|
||||
async copyLink() {
|
||||
this.closeShare()
|
||||
this.$showLoading()
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
_copy(this.item.share_info.share_link_desc + this.item.share_info.share_url)
|
||||
//TODO 抖音样式改了
|
||||
this.$notice('复制成功')
|
||||
},
|
||||
methods: {
|
||||
$no,
|
||||
async copyLink() {
|
||||
this.closeShare()
|
||||
this.$showLoading()
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
_copy(
|
||||
this.item.share_info.share_link_desc + this.item.share_info.share_url,
|
||||
)
|
||||
//TODO 抖音样式改了
|
||||
this.$notice('复制成功')
|
||||
},
|
||||
|
||||
toggleCall(item) {
|
||||
item.select = !item.select
|
||||
},
|
||||
closeShare() {
|
||||
this.friends.all = this.friends.all.map((v) => {
|
||||
v.select = false
|
||||
return v
|
||||
})
|
||||
this.$emit('update:modelValue', false)
|
||||
},
|
||||
toggleCall(item) {
|
||||
item.select = !item.select
|
||||
},
|
||||
closeShare() {
|
||||
this.friends.all = this.friends.all.map((v) => {
|
||||
v.select = false
|
||||
return v
|
||||
})
|
||||
this.$emit('update:modelValue', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../assets/less/index';
|
||||
@import '../assets/less/index';
|
||||
|
||||
.share {
|
||||
width: 100%;
|
||||
background: black;
|
||||
border-radius: 10px 10px 0 0;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
.share {
|
||||
width: 100%;
|
||||
background: black;
|
||||
border-radius: 10px 10px 0 0;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
|
||||
@space-width: 26rem;
|
||||
@avatar-width: 58rem;
|
||||
@icon-width: 30rem;
|
||||
@space-width: 26rem;
|
||||
@avatar-width: 58rem;
|
||||
@icon-width: 30rem;
|
||||
|
||||
.title {
|
||||
font-size: 14rem;
|
||||
padding: 10rem 20rem 30rem 20rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.title {
|
||||
font-size: 14rem;
|
||||
padding: 10rem 20rem 30rem 20rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
padding: 6rem;
|
||||
border-radius: 50%;
|
||||
background: var(--second-btn-color-tran);
|
||||
//background: rgb(56, 58, 57);
|
||||
}
|
||||
img {
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
padding: 6rem;
|
||||
border-radius: 50%;
|
||||
background: var(--second-btn-color-tran);
|
||||
//background: rgb(56, 58, 57);
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
padding: 0 20rem;
|
||||
gap: 22rem;
|
||||
padding-bottom: 50rem;
|
||||
}
|
||||
.list {
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
padding: 0 20rem;
|
||||
gap: 22rem;
|
||||
padding-bottom: 50rem;
|
||||
}
|
||||
|
||||
@c: rgb(51, 51, 51);
|
||||
@c: rgb(51, 51, 51);
|
||||
|
||||
.option {
|
||||
.option {
|
||||
width: @avatar-width;
|
||||
position: relative;
|
||||
font-size: 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: @avatar-width;
|
||||
position: relative;
|
||||
font-size: 10rem;
|
||||
height: @avatar-width;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.checked {
|
||||
position: absolute;
|
||||
top: @avatar-width - 1.5;
|
||||
right: -2px;
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 8rem;
|
||||
text-align: center;
|
||||
width: @avatar-width;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.more {
|
||||
width: 20rem;
|
||||
padding: 19rem;
|
||||
border-radius: 50%;
|
||||
background: @c;
|
||||
//background: rgb(56, 58, 57);
|
||||
}
|
||||
|
||||
svg {
|
||||
.more;
|
||||
width: unset;
|
||||
padding: 16rem;
|
||||
font-size: 26rem;
|
||||
color: rgb(205, 205, 205);
|
||||
}
|
||||
|
||||
.small {
|
||||
width: @icon-width;
|
||||
height: @icon-width;
|
||||
padding: 14rem;
|
||||
border-radius: 50%;
|
||||
background: @c;
|
||||
}
|
||||
}
|
||||
|
||||
.share2friend {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding: 20rem;
|
||||
box-sizing: border-box;
|
||||
width: 100vw;
|
||||
height: 180rem;
|
||||
background: black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.comment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.avatar {
|
||||
width: @avatar-width;
|
||||
height: @avatar-width;
|
||||
border-radius: 50%;
|
||||
textarea {
|
||||
flex: 1;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checked {
|
||||
position: absolute;
|
||||
top: @avatar-width - 1.5;
|
||||
right: -2px;
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 8rem;
|
||||
text-align: center;
|
||||
width: @avatar-width;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.more {
|
||||
width: 20rem;
|
||||
padding: 19rem;
|
||||
border-radius: 50%;
|
||||
background: @c;
|
||||
//background: rgb(56, 58, 57);
|
||||
}
|
||||
|
||||
svg {
|
||||
.more;
|
||||
width: unset;
|
||||
padding: 16rem;
|
||||
font-size: 26rem;
|
||||
color: rgb(205, 205, 205);
|
||||
}
|
||||
|
||||
.small {
|
||||
width: @icon-width;
|
||||
height: @icon-width;
|
||||
padding: 14rem;
|
||||
border-radius: 50%;
|
||||
background: @c;
|
||||
.poster {
|
||||
margin-left: 20rem;
|
||||
height: 40rem;
|
||||
width: 40rem;
|
||||
}
|
||||
}
|
||||
|
||||
.share2friend {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding: 20rem;
|
||||
box-sizing: border-box;
|
||||
width: 100vw;
|
||||
height: 180rem;
|
||||
background: black;
|
||||
.btns {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.comment {
|
||||
display: flex;
|
||||
.button {
|
||||
flex: 1;
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.poster {
|
||||
margin-left: 20rem;
|
||||
height: 40rem;
|
||||
width: 40rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
gap: 10rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-enter-active,
|
||||
.share-leave-active {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.share-enter-active,
|
||||
.share-leave-active {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.share-enter-from,
|
||||
.share-leave-to {
|
||||
transform: translateY(60vh);
|
||||
}
|
||||
.share-enter-from,
|
||||
.share-leave-to {
|
||||
transform: translateY(60vh);
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,21 +1,21 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
},
|
||||
},
|
||||
})
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const leftList = computed(() => {
|
||||
return props.list.filter((v, index) => index % 2 === 0)
|
||||
})
|
||||
const rightList = computed(() => {
|
||||
return props.list.filter((v, index) => index % 2 !== 0)
|
||||
})
|
||||
const leftList = computed(() => {
|
||||
return props.list.filter((v, index) => index % 2 === 0)
|
||||
})
|
||||
const rightList = computed(() => {
|
||||
return props.list.filter((v, index) => index % 2 !== 0)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -30,14 +30,14 @@
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.waterfall {
|
||||
display: flex;
|
||||
gap: 10rem;
|
||||
.waterfall {
|
||||
display: flex;
|
||||
gap: 10rem;
|
||||
|
||||
.waterfall-row {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.waterfall-row {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,136 +19,136 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/*TODO 单独使用时，没有mark*/
|
||||
export default {
|
||||
name: 'ConfirmDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
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'
|
||||
},
|
||||
},
|
||||
/*TODO 单独使用时，没有mark*/
|
||||
export default {
|
||||
name: 'ConfirmDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
title: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
stop() {},
|
||||
ok() {
|
||||
this.$emit('ok')
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('cancel')
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
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 {}
|
||||
},
|
||||
methods: {
|
||||
stop() {},
|
||||
ok() {
|
||||
this.$emit('ok')
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('cancel')
|
||||
this.$emit('update:visible', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.ConfirmDialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000000bb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: black;
|
||||
.ConfirmDialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000000bb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: black;
|
||||
|
||||
.content {
|
||||
background: white;
|
||||
width: 70%;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
font-size: 15rem;
|
||||
text-align: center;
|
||||
.content {
|
||||
background: white;
|
||||
width: 70%;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
font-size: 15rem;
|
||||
text-align: center;
|
||||
|
||||
.body {
|
||||
padding: 25rem;
|
||||
.body {
|
||||
padding: 25rem;
|
||||
|
||||
.title {
|
||||
font-size: 15rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 10rem;
|
||||
font-size: 13rem;
|
||||
|
||||
&.gray {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 15rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 46rem;
|
||||
.subtitle {
|
||||
margin-top: 10rem;
|
||||
font-size: 13rem;
|
||||
|
||||
&.gray {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 46rem;
|
||||
display: flex;
|
||||
border-top: 1px solid whitesmoke;
|
||||
font-size: 14rem;
|
||||
|
||||
.cancel,
|
||||
.ok {
|
||||
display: flex;
|
||||
border-top: 1px solid whitesmoke;
|
||||
font-size: 14rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.cancel,
|
||||
.ok {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 49%;
|
||||
}
|
||||
.ok {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ok {
|
||||
font-weight: bold;
|
||||
}
|
||||
.cancel {
|
||||
border-right: 1px solid whitesmoke;
|
||||
|
||||
.cancel {
|
||||
border-right: 1px solid whitesmoke;
|
||||
|
||||
&.gray {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
&.gray {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,32 +4,32 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'FadeDialog',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {},
|
||||
}
|
||||
export default {
|
||||
name: 'FadeDialog',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.FadeDialog {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
.FadeDialog {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
}
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,247 +28,236 @@
|
||||
</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 {
|
||||
name: 'FromBottomDialog',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'dark',
|
||||
// default: 'light'
|
||||
// default: 'white'
|
||||
},
|
||||
maskMode: {
|
||||
type: String,
|
||||
default: 'dark',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(var(--vh, 1vh) * 70)',
|
||||
},
|
||||
showHengGang: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
pageId: {
|
||||
type: String,
|
||||
default: null,
|
||||
required: true,
|
||||
},
|
||||
borderRadius: {
|
||||
type: String,
|
||||
default: '15rem 15rem 0 0',
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
export default {
|
||||
name: 'FromBottomDialog',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
watch: {
|
||||
modelValue(newVal) {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'dark'
|
||||
// default: 'light'
|
||||
// default: 'white'
|
||||
},
|
||||
maskMode: {
|
||||
type: String,
|
||||
default: 'dark'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(var(--vh, 1vh) * 70)'
|
||||
},
|
||||
showHengGang: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
pageId: {
|
||||
type: String,
|
||||
default: null,
|
||||
required: true
|
||||
},
|
||||
borderRadius: {
|
||||
type: String,
|
||||
default: '15rem 15rem 0 0'
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue(newVal) {
|
||||
let page = document.getElementById(this.pageId)
|
||||
if (newVal) {
|
||||
this.pagePosition = this.$getCss2(page, 'position')
|
||||
page.style.position = 'absolute'
|
||||
this.scroll = document.documentElement.scrollTop
|
||||
document.body.style.position = 'fixed'
|
||||
document.body.style.top = -this.scroll + 'px'
|
||||
|
||||
let maskTemplate = `<div class="Mask fade-in ${this.maskMode}"></div>`
|
||||
let mask = new Dom().create(maskTemplate)
|
||||
mask.on('click', (e) => {
|
||||
this.$stopPropagation(e)
|
||||
this.hide(false)
|
||||
})
|
||||
page.appendChild(mask.els[0])
|
||||
} else {
|
||||
let page = document.getElementById(this.pageId)
|
||||
if (newVal) {
|
||||
this.pagePosition = this.$getCss2(page, 'position')
|
||||
page.style.position = 'absolute'
|
||||
this.scroll = document.documentElement.scrollTop
|
||||
document.body.style.position = 'fixed'
|
||||
document.body.style.top = -this.scroll + 'px'
|
||||
page.style.position = this.pagePosition || 'fixed'
|
||||
document.body.style.position = 'static'
|
||||
document.documentElement.scrollTop = this.scroll
|
||||
|
||||
let maskTemplate = `<div class="Mask fade-in ${this.maskMode}"></div>`
|
||||
let mask = new Dom().create(maskTemplate)
|
||||
mask.on('click', (e) => {
|
||||
this.$stopPropagation(e)
|
||||
this.hide(false)
|
||||
})
|
||||
page.appendChild(mask.els[0])
|
||||
} else {
|
||||
let page = document.getElementById(this.pageId)
|
||||
page.style.position = this.pagePosition || 'fixed'
|
||||
document.body.style.position = 'static'
|
||||
document.documentElement.scrollTop = this.scroll
|
||||
|
||||
let mask = new Dom('.Mask').replaceClass('fade-in', 'fade-out')
|
||||
setTimeout(() => {
|
||||
mask.remove()
|
||||
}, 250)
|
||||
}
|
||||
},
|
||||
let mask = new Dom('.Mask').replaceClass('fade-in', 'fade-out')
|
||||
setTimeout(() => {
|
||||
mask.remove()
|
||||
}, 250)
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scroll: 0,
|
||||
startLocationY: 0,
|
||||
moveYDistance: 0,
|
||||
startTime: 0,
|
||||
pagePosition: null
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
beforeEnter(el) {
|
||||
this.$setCss(el, 'transition-duration', `250ms`)
|
||||
this.$setCss(el, 'transform', `translate3d(0,${this.height},0)`)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scroll: 0,
|
||||
startLocationY: 0,
|
||||
moveYDistance: 0,
|
||||
startTime: 0,
|
||||
pagePosition: null,
|
||||
enter(el, done) {
|
||||
setTimeout(() => {
|
||||
this.$setCss(el, 'transform', `translate3d(0,0,0)`)
|
||||
}, 0)
|
||||
setTimeout(() => {
|
||||
// this.$setCss(el, 'transition-duration', `0ms`)
|
||||
this.$setCss(el, 'transform', `none`)
|
||||
done()
|
||||
}, 250)
|
||||
},
|
||||
afterEnter() {},
|
||||
beforeLeave(el) {
|
||||
this.$setCss(el, 'transition-duration', `250ms`)
|
||||
this.$setCss(el, 'transform', `translate3d(0,0,0)`)
|
||||
},
|
||||
leave(el, done) {
|
||||
//ref获取不到
|
||||
let maxHeight = new Dom('.FromBottomDialog').css('max-height')
|
||||
this.$setCss(el, 'transform', `translate3d(0,${maxHeight},0)`)
|
||||
setTimeout(done, 250)
|
||||
},
|
||||
afterLeave() {},
|
||||
|
||||
hide(val = false) {
|
||||
this.$emit('update:modelValue', val)
|
||||
this.$emit('cancel')
|
||||
},
|
||||
start(e) {
|
||||
if (this.$refs.dialog.scrollTop !== 0) return
|
||||
this.startLocationY = e.touches[0].pageY
|
||||
this.startTime = Date.now()
|
||||
this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
|
||||
},
|
||||
move(e) {
|
||||
if (this.$refs.dialog.scrollTop !== 0) return
|
||||
this.moveYDistance = e.touches[0].pageY - this.startLocationY
|
||||
if (this.moveYDistance > 0) {
|
||||
bus.emit(EVENT_KEY.DIALOG_MOVE, {
|
||||
tag: this.tag,
|
||||
e: this.moveYDistance
|
||||
})
|
||||
this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${this.moveYDistance}px,0)`)
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
beforeEnter(el) {
|
||||
this.$setCss(el, 'transition-duration', `250ms`)
|
||||
this.$setCss(el, 'transform', `translate3d(0,${this.height},0)`)
|
||||
},
|
||||
enter(el, done) {
|
||||
end(e) {
|
||||
//点击
|
||||
if (Date.now() - this.startTime < 150 && Math.abs(this.moveYDistance) < 30) {
|
||||
return
|
||||
}
|
||||
//滑动
|
||||
if (this.$refs.dialog.scrollTop !== 0) return
|
||||
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)`)
|
||||
bus.emit(EVENT_KEY.DIALOG_END, { tag: this.tag, isClose: true })
|
||||
setTimeout(this.hide, 250)
|
||||
} else {
|
||||
this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,0,0)`)
|
||||
bus.emit(EVENT_KEY.DIALOG_END, { tag: this.tag, isClose: false })
|
||||
setTimeout(() => {
|
||||
this.$setCss(el, 'transform', `translate3d(0,0,0)`)
|
||||
}, 0)
|
||||
setTimeout(() => {
|
||||
// this.$setCss(el, 'transition-duration', `0ms`)
|
||||
this.$setCss(el, 'transform', `none`)
|
||||
done()
|
||||
this.$setCss(this.$refs.dialog, 'transform', 'none')
|
||||
// this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
|
||||
}, 250)
|
||||
},
|
||||
afterEnter() {},
|
||||
beforeLeave(el) {
|
||||
this.$setCss(el, 'transition-duration', `250ms`)
|
||||
this.$setCss(el, 'transform', `translate3d(0,0,0)`)
|
||||
},
|
||||
leave(el, done) {
|
||||
//ref获取不到
|
||||
let maxHeight = new Dom('.FromBottomDialog').css('max-height')
|
||||
this.$setCss(el, 'transform', `translate3d(0,${maxHeight},0)`)
|
||||
setTimeout(done, 250)
|
||||
},
|
||||
afterLeave() {},
|
||||
|
||||
hide(val = false) {
|
||||
this.$emit('update:modelValue', val)
|
||||
this.$emit('cancel')
|
||||
},
|
||||
start(e) {
|
||||
if (this.$refs.dialog.scrollTop !== 0) return
|
||||
this.startLocationY = e.touches[0].pageY
|
||||
this.startTime = Date.now()
|
||||
this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
|
||||
},
|
||||
move(e) {
|
||||
if (this.$refs.dialog.scrollTop !== 0) return
|
||||
this.moveYDistance = e.touches[0].pageY - this.startLocationY
|
||||
if (this.moveYDistance > 0) {
|
||||
bus.emit(EVENT_KEY.DIALOG_MOVE, {
|
||||
tag: this.tag,
|
||||
e: this.moveYDistance,
|
||||
})
|
||||
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
|
||||
) {
|
||||
return
|
||||
}
|
||||
//滑动
|
||||
if (this.$refs.dialog.scrollTop !== 0) return
|
||||
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)`,
|
||||
)
|
||||
bus.emit(EVENT_KEY.DIALOG_END, { tag: this.tag, isClose: true })
|
||||
setTimeout(this.hide, 250)
|
||||
} else {
|
||||
this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,0,0)`)
|
||||
bus.emit(EVENT_KEY.DIALOG_END, { tag: this.tag, isClose: false })
|
||||
setTimeout(() => {
|
||||
this.$setCss(this.$refs.dialog, 'transform', 'none')
|
||||
// this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
|
||||
}, 250)
|
||||
}
|
||||
this.moveYDistance = 0
|
||||
},
|
||||
},
|
||||
}
|
||||
this.moveYDistance = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.FromBottomDialog {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
.FromBottomDialog {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
padding-top: 24rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: v-bind(borderRadius);
|
||||
transition: all 0.3s;
|
||||
|
||||
&.dark {
|
||||
background: var(--main-bg);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: whitesmoke;
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: white;
|
||||
}
|
||||
|
||||
&.no-heng-gang {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.heng-gang {
|
||||
border-radius: 15rem 15rem 0 0;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
padding-top: 24rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: v-bind(borderRadius);
|
||||
transition: all 0.3s;
|
||||
position: fixed;
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
transform: translateY(-24rem);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.dark {
|
||||
background: var(--main-bg);
|
||||
|
||||
.content {
|
||||
background: var(--second-btn-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: whitesmoke;
|
||||
|
||||
.content {
|
||||
background: darkgray;
|
||||
}
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: white;
|
||||
}
|
||||
|
||||
&.no-heng-gang {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.heng-gang {
|
||||
border-radius: 15rem 15rem 0 0;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
transform: translateY(-24rem);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.dark {
|
||||
background: var(--main-bg);
|
||||
|
||||
.content {
|
||||
background: var(--second-btn-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: whitesmoke;
|
||||
|
||||
.content {
|
||||
background: darkgray;
|
||||
}
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: white;
|
||||
|
||||
.content {
|
||||
background: darkgray;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
border-radius: 2px;
|
||||
height: 4rem;
|
||||
width: 30rem;
|
||||
background: darkgray;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
border-radius: 2px;
|
||||
height: 4rem;
|
||||
width: 30rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,101 +14,101 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'NoticeDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
},
|
||||
subtitleColor: {
|
||||
type: String,
|
||||
default() {
|
||||
return 'gray'
|
||||
},
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default() {
|
||||
return '取消'
|
||||
},
|
||||
},
|
||||
export default {
|
||||
name: 'NoticeDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
title: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
stop() {},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
subtitleColor: {
|
||||
type: String,
|
||||
default() {
|
||||
return 'gray'
|
||||
}
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default() {
|
||||
return '取消'
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
stop() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.NoticeDialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000000bb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: black;
|
||||
.NoticeDialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000000bb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: black;
|
||||
|
||||
.content {
|
||||
background: white;
|
||||
width: 70%;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
font-size: 15rem;
|
||||
text-align: center;
|
||||
.content {
|
||||
background: white;
|
||||
width: 70%;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
font-size: 15rem;
|
||||
text-align: center;
|
||||
|
||||
.body {
|
||||
padding: 25rem;
|
||||
.body {
|
||||
padding: 25rem;
|
||||
|
||||
.title {
|
||||
font-size: 15rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 10rem;
|
||||
font-size: 13rem;
|
||||
|
||||
&.gray {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 15rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 46rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top: 1px solid whitesmoke;
|
||||
font-size: 14rem;
|
||||
.subtitle {
|
||||
margin-top: 10rem;
|
||||
font-size: 13rem;
|
||||
|
||||
.cancel {
|
||||
font-weight: bold;
|
||||
&.gray {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 46rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top: 1px solid whitesmoke;
|
||||
font-size: 14rem;
|
||||
|
||||
.cancel {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,55 +8,55 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'SelectDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
export default {
|
||||
name: 'SelectDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.SelectDialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000000bb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.SelectDialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000000bb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.content {
|
||||
background: white;
|
||||
width: 80%;
|
||||
padding: 5rem 0;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
.content {
|
||||
background: white;
|
||||
width: 80%;
|
||||
padding: 5rem 0;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
font-size: 15rem;
|
||||
padding: 15rem 20rem;
|
||||
transition: all 0.2s;
|
||||
.item {
|
||||
font-size: 15rem;
|
||||
padding: 15rem 20rem;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:active {
|
||||
background: darkgray;
|
||||
}
|
||||
&:active {
|
||||
background: darkgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,72 +10,72 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'SimpleConfirmDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
},
|
||||
okText: {
|
||||
type: String,
|
||||
default() {
|
||||
return '保存'
|
||||
},
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default() {
|
||||
return '放弃'
|
||||
},
|
||||
},
|
||||
export default {
|
||||
name: 'SimpleConfirmDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
title: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
stop() {},
|
||||
okText: {
|
||||
type: String,
|
||||
default() {
|
||||
return '保存'
|
||||
}
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default() {
|
||||
return '放弃'
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
stop() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.SimpleConfirmDialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000000bb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: black;
|
||||
.SimpleConfirmDialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000000bb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: black;
|
||||
|
||||
.content {
|
||||
background: white;
|
||||
width: 80%;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
padding: 15rem 20rem;
|
||||
font-size: 15rem;
|
||||
.content {
|
||||
background: white;
|
||||
width: 80%;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
padding: 15rem 20rem;
|
||||
font-size: 15rem;
|
||||
|
||||
.footer {
|
||||
margin-top: 20rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.footer {
|
||||
margin-top: 20rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.cancel {
|
||||
margin-right: 25rem;
|
||||
}
|
||||
.cancel {
|
||||
margin-right: 25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,46 +1,46 @@
|
||||
<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 {
|
||||
name: 'Indicator',
|
||||
setup() {
|
||||
const baseStore = useBaseStore()
|
||||
return { baseStore }
|
||||
export default {
|
||||
name: 'Indicator',
|
||||
setup() {
|
||||
const baseStore = useBaseStore()
|
||||
return { baseStore }
|
||||
},
|
||||
props: {
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
props: {
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
tabStyleWidth: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
tabTexts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tabRender: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
|
||||
name: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
tabStyleWidth: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentSlideItemIndex: this.activeIndex,
|
||||
tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left,
|
||||
indicatorSpace: 0, //indicator之间的间距
|
||||
}
|
||||
tabTexts: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
computed: {},
|
||||
render() {
|
||||
/*
|
||||
tabRender: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
|
||||
name: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentSlideItemIndex: this.activeIndex,
|
||||
tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left,
|
||||
indicatorSpace: 0 //indicator之间的间距
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
render() {
|
||||
/*
|
||||
* <div class="tabs" ref="tabs">
|
||||
<div class="tab"
|
||||
style="{width : tabStyleWidth}"
|
||||
@ -50,162 +50,148 @@
|
||||
<span>{{ item }}</span></div>
|
||||
</div>
|
||||
* */
|
||||
return (
|
||||
<div className='indicator-ctn'>
|
||||
{this.tabRender ? (
|
||||
this.tabRender()
|
||||
) : (
|
||||
<div className='tabs' ref='tabs'>
|
||||
{this.tabTexts.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
this.currentSlideItemIndex === index
|
||||
? 'active tab'
|
||||
: 'tab'
|
||||
}
|
||||
style={{
|
||||
width:
|
||||
this.tabStyleWidth || 100 / this.tabTexts.length + '%',
|
||||
}}
|
||||
onClick={(e) => this.changeIndex(index)}
|
||||
>
|
||||
<span> {item}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className='indicator'
|
||||
ref='indicator'
|
||||
style={{
|
||||
width: this.tabStyleWidth || 100 / this.tabTexts.length + '%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
return (
|
||||
<div className="indicator-ctn">
|
||||
{this.tabRender ? (
|
||||
this.tabRender()
|
||||
) : (
|
||||
<div className="tabs" ref="tabs">
|
||||
{this.tabTexts.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
className={this.currentSlideItemIndex === index ? 'active tab' : 'tab'}
|
||||
style={{
|
||||
width: this.tabStyleWidth || 100 / this.tabTexts.length + '%'
|
||||
}}
|
||||
onClick={(e) => this.changeIndex(index)}
|
||||
>
|
||||
<span> {item}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="indicator"
|
||||
ref="indicator"
|
||||
style={{
|
||||
width: this.tabStyleWidth || 100 / this.tabTexts.length + '%'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
mounted() {
|
||||
this.initTabs()
|
||||
bus.on(this.name + '-moved', this.move)
|
||||
bus.on(this.name + '-end', this.end)
|
||||
},
|
||||
methods: {
|
||||
changeIndex(index) {
|
||||
this.currentSlideItemIndex = index
|
||||
this.$attrs['onUpdate:activeIndex'] &&
|
||||
this.$emit('update:active-index', this.currentSlideItemIndex)
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
},
|
||||
mounted() {
|
||||
this.initTabs()
|
||||
bus.on(this.name + '-moved', this.move)
|
||||
bus.on(this.name + '-end', this.end)
|
||||
},
|
||||
methods: {
|
||||
changeIndex(index) {
|
||||
this.currentSlideItemIndex = index
|
||||
this.$attrs['onUpdate:activeIndex'] &&
|
||||
this.$emit('update:active-index', this.currentSlideItemIndex)
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
initTabs() {
|
||||
let tabs = this.$refs.tabs
|
||||
this.indicatorRef = this.$refs.indicator
|
||||
for (let i = 0; i < tabs.children.length; i++) {
|
||||
let item = tabs.children[i]
|
||||
this.tabWidth = this.$getCss(item, 'width')
|
||||
this.tabIndicatorRelationActiveIndexLefts.push(
|
||||
item.getBoundingClientRect().x -
|
||||
tabs.children[0].getBoundingClientRect().x +
|
||||
(this.indicatorType === 'home' ? this.tabWidth * 0.15 : 0)
|
||||
)
|
||||
},
|
||||
initTabs() {
|
||||
let tabs = this.$refs.tabs
|
||||
this.indicatorRef = this.$refs.indicator
|
||||
for (let i = 0; i < tabs.children.length; i++) {
|
||||
let item = tabs.children[i]
|
||||
this.tabWidth = this.$getCss(item, 'width')
|
||||
this.tabIndicatorRelationActiveIndexLefts.push(
|
||||
item.getBoundingClientRect().x -
|
||||
tabs.children[0].getBoundingClientRect().x +
|
||||
(this.indicatorType === 'home' ? this.tabWidth * 0.15 : 0),
|
||||
)
|
||||
}
|
||||
this.indicatorSpace =
|
||||
this.tabIndicatorRelationActiveIndexLefts[1] -
|
||||
this.tabIndicatorRelationActiveIndexLefts[0]
|
||||
}
|
||||
this.indicatorSpace =
|
||||
this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
},
|
||||
move(e) {
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
|
||||
e.x.distance / (this.baseStore.bodyWidth / this.indicatorSpace) +
|
||||
'px'
|
||||
)
|
||||
},
|
||||
end(index) {
|
||||
// console.log(index)
|
||||
this.currentSlideItemIndex = index
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
setTimeout(() => {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
)
|
||||
},
|
||||
move(e) {
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] -
|
||||
e.x.distance / (this.baseStore.bodyWidth / this.indicatorSpace) +
|
||||
'px',
|
||||
)
|
||||
},
|
||||
end(index) {
|
||||
// console.log(index)
|
||||
this.currentSlideItemIndex = index
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
)
|
||||
setTimeout(() => {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
}, 300)
|
||||
},
|
||||
},
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.indicator-ctn {
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
height: var(--indicator-height);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background: var(--main-bg);
|
||||
.indicator-ctn {
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
height: var(--indicator-height);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background: var(--main-bg);
|
||||
|
||||
.tabs {
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
|
||||
.tab {
|
||||
height: 40rem;
|
||||
width: 45%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: gray;
|
||||
transition: color 0.3s;
|
||||
font-size: 16rem;
|
||||
|
||||
.tab {
|
||||
height: 40rem;
|
||||
width: 45%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: gray;
|
||||
transition: color 0.3s;
|
||||
font-size: 16rem;
|
||||
&.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: 5rem;
|
||||
@width: 12rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
img {
|
||||
margin-left: 5rem;
|
||||
@width: 12rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
height: 2px;
|
||||
background: gold;
|
||||
width: 45%;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
height: 2px;
|
||||
background: gold;
|
||||
width: 45%;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,46 +1,46 @@
|
||||
<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 {
|
||||
name: 'IndicatorLight',
|
||||
props: {
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
tabStyleWidth: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
tabTexts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tabRender: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
|
||||
name: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
export default {
|
||||
name: 'IndicatorLight',
|
||||
props: {
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentSlideItemIndex: this.activeIndex,
|
||||
tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left,
|
||||
indicatorSpace: 0, //indicator之间的间距
|
||||
}
|
||||
tabStyleWidth: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
setup() {
|
||||
const baseStore = useBaseStore()
|
||||
return { baseStore }
|
||||
tabTexts: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
computed: {},
|
||||
render() {
|
||||
/*
|
||||
tabRender: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
|
||||
name: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentSlideItemIndex: this.activeIndex,
|
||||
tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left,
|
||||
indicatorSpace: 0 //indicator之间的间距
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const baseStore = useBaseStore()
|
||||
return { baseStore }
|
||||
},
|
||||
computed: {},
|
||||
render() {
|
||||
/*
|
||||
* <div class="tabs" ref="tabs">
|
||||
<div class="tab"
|
||||
style="{width : tabStyleWidth}"
|
||||
@ -50,157 +50,143 @@
|
||||
<span>{{ item }}</span></div>
|
||||
</div>
|
||||
* */
|
||||
return (
|
||||
<div className='indicator-ctn'>
|
||||
{this.tabRender ? (
|
||||
this.tabRender()
|
||||
) : (
|
||||
<div className='tabs' ref='tabs'>
|
||||
{this.tabTexts.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
this.currentSlideItemIndex === index
|
||||
? 'active tab'
|
||||
: 'tab'
|
||||
}
|
||||
style={{
|
||||
width:
|
||||
this.tabStyleWidth || 100 / this.tabTexts.length + '%',
|
||||
}}
|
||||
onClick={(e) => this.changeIndex(index)}
|
||||
>
|
||||
<span> {item}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div className='indicator' ref='indicator' />
|
||||
</div>
|
||||
return (
|
||||
<div className="indicator-ctn">
|
||||
{this.tabRender ? (
|
||||
this.tabRender()
|
||||
) : (
|
||||
<div className="tabs" ref="tabs">
|
||||
{this.tabTexts.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
className={this.currentSlideItemIndex === index ? 'active tab' : 'tab'}
|
||||
style={{
|
||||
width: this.tabStyleWidth || 100 / this.tabTexts.length + '%'
|
||||
}}
|
||||
onClick={(e) => this.changeIndex(index)}
|
||||
>
|
||||
<span> {item}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div className="indicator" ref="indicator" />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
mounted() {
|
||||
this.initTabs()
|
||||
bus.on(this.name + '-moved', this.move)
|
||||
bus.on(this.name + '-end', this.end)
|
||||
},
|
||||
methods: {
|
||||
changeIndex(index) {
|
||||
this.currentSlideItemIndex = index
|
||||
this.$attrs['onUpdate:activeIndex'] &&
|
||||
this.$emit('update:active-index', this.currentSlideItemIndex)
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
},
|
||||
mounted() {
|
||||
this.initTabs()
|
||||
bus.on(this.name + '-moved', this.move)
|
||||
bus.on(this.name + '-end', this.end)
|
||||
},
|
||||
methods: {
|
||||
changeIndex(index) {
|
||||
this.currentSlideItemIndex = index
|
||||
this.$attrs['onUpdate:activeIndex'] &&
|
||||
this.$emit('update:active-index', this.currentSlideItemIndex)
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
initTabs() {
|
||||
let tabs = this.$refs.tabs
|
||||
this.indicatorRef = this.$refs.indicator
|
||||
let indicatorWidth = this.$getCss(this.indicatorRef, 'width')
|
||||
for (let i = 0; i < tabs.children.length; i++) {
|
||||
let item = tabs.children[i]
|
||||
this.tabWidth = this.$getCss(item, 'width')
|
||||
this.tabIndicatorRelationActiveIndexLefts.push(
|
||||
item.getBoundingClientRect().x -
|
||||
tabs.children[0].getBoundingClientRect().x +
|
||||
(this.tabWidth * 0.5 - indicatorWidth / 2)
|
||||
)
|
||||
},
|
||||
initTabs() {
|
||||
let tabs = this.$refs.tabs
|
||||
this.indicatorRef = this.$refs.indicator
|
||||
let indicatorWidth = this.$getCss(this.indicatorRef, 'width')
|
||||
for (let i = 0; i < tabs.children.length; i++) {
|
||||
let item = tabs.children[i]
|
||||
this.tabWidth = this.$getCss(item, 'width')
|
||||
this.tabIndicatorRelationActiveIndexLefts.push(
|
||||
item.getBoundingClientRect().x -
|
||||
tabs.children[0].getBoundingClientRect().x +
|
||||
(this.tabWidth * 0.5 - indicatorWidth / 2),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
this.indicatorSpace =
|
||||
this.tabIndicatorRelationActiveIndexLefts[1] -
|
||||
this.tabIndicatorRelationActiveIndexLefts[0]
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
)
|
||||
},
|
||||
move(e) {
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] -
|
||||
e.x.distance / (this.baseStore.bodyWidth / this.indicatorSpace) +
|
||||
'px',
|
||||
)
|
||||
},
|
||||
end(index) {
|
||||
// console.log(index)
|
||||
this.currentSlideItemIndex = index
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
)
|
||||
setTimeout(() => {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
}, 300)
|
||||
},
|
||||
this.indicatorSpace =
|
||||
this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
},
|
||||
move(e) {
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
|
||||
e.x.distance / (this.baseStore.bodyWidth / this.indicatorSpace) +
|
||||
'px'
|
||||
)
|
||||
},
|
||||
end(index) {
|
||||
// console.log(index)
|
||||
this.currentSlideItemIndex = index
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
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 {
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
height: var(--indicator-height);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
.indicator-ctn {
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
height: var(--indicator-height);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
|
||||
.tabs {
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
|
||||
.tab {
|
||||
height: 45rem;
|
||||
width: 45%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--second-text-color);
|
||||
transition: color 0.3s;
|
||||
|
||||
.tab {
|
||||
height: 45rem;
|
||||
width: 45%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--second-text-color);
|
||||
transition: color 0.3s;
|
||||
&.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: 5rem;
|
||||
@width: 12rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
img {
|
||||
margin-left: 5rem;
|
||||
@width: 12rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
height: 3px;
|
||||
width: 25rem;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
height: 3px;
|
||||
width: 25rem;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
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({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
position: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
isMy: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false
|
||||
},
|
||||
},
|
||||
isLive: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false
|
||||
},
|
||||
},
|
||||
})
|
||||
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({
|
||||
isAttention: false,
|
||||
test: [1, 2],
|
||||
})
|
||||
const state = reactive({
|
||||
isAttention: false,
|
||||
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,137 +83,137 @@
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.item-desc {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
.item-desc {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
.content {
|
||||
color: #fff;
|
||||
width: 75vw;
|
||||
text-align: left;
|
||||
.content {
|
||||
color: #fff;
|
||||
width: 75vw;
|
||||
text-align: left;
|
||||
|
||||
.location-wrapper {
|
||||
display: flex;
|
||||
.location-wrapper {
|
||||
display: flex;
|
||||
|
||||
.location {
|
||||
margin-bottom: 10rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
padding: 4rem;
|
||||
border-radius: 3rem;
|
||||
background: var(--second-btn-color-tran);
|
||||
|
||||
.gang {
|
||||
height: 8rem;
|
||||
width: 1.5px;
|
||||
margin: 0 5rem;
|
||||
background: gray;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: 7rem;
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.live {
|
||||
border-radius: 3rem;
|
||||
.location {
|
||||
margin-bottom: 10rem;
|
||||
padding: 3rem 6rem;
|
||||
font-size: 11rem;
|
||||
display: inline-flex;
|
||||
background: var(--primary-btn-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.music {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
padding: 4rem;
|
||||
border-radius: 3rem;
|
||||
background: var(--second-btn-color-tran);
|
||||
|
||||
.music-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
.gang {
|
||||
height: 8rem;
|
||||
width: 1.5px;
|
||||
margin: 0 5rem;
|
||||
background: gray;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: 7rem;
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-status {
|
||||
.live {
|
||||
border-radius: 3rem;
|
||||
margin-bottom: 10rem;
|
||||
padding: 3rem 6rem;
|
||||
font-size: 11rem;
|
||||
display: inline-flex;
|
||||
background: var(--primary-btn-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.music {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.comment {
|
||||
.type-comment {
|
||||
display: flex;
|
||||
background: rgb(130, 21, 44);
|
||||
border-radius: 50px;
|
||||
.music-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.comment {
|
||||
.type-comment {
|
||||
display: flex;
|
||||
background: rgb(130, 21, 44);
|
||||
border-radius: 50px;
|
||||
padding: 3px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin: 0 10px;
|
||||
color: var(--second-text-color);
|
||||
|
||||
.name {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loveds {
|
||||
}
|
||||
|
||||
.type-loved {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
animation: test 1s;
|
||||
animation-delay: 0.5s;
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.loved {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: red;
|
||||
padding: 3px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin: 0 10px;
|
||||
color: var(--second-text-color);
|
||||
|
||||
.name {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
border-radius: 50%;
|
||||
border: 2px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
.loveds {
|
||||
@keyframes test {
|
||||
from {
|
||||
display: block;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.type-loved {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
animation: test 1s;
|
||||
animation-delay: 0.5s;
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.loved {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: red;
|
||||
padding: 3px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes test {
|
||||
from {
|
||||
display: block;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
to {
|
||||
display: none;
|
||||
transform: translate3d(0, -60px, 0);
|
||||
}
|
||||
to {
|
||||
display: none;
|
||||
transform: translate3d(0, -60px, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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({
|
||||
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 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 attention(e) {
|
||||
e.currentTarget.classList.add('attention')
|
||||
setTimeout(() => {
|
||||
Utils.updateItem(props, 'isAttention', true, emit)
|
||||
}, 1000)
|
||||
}
|
||||
function loved() {
|
||||
Utils.updateItem(props, 'isLoved', !props.item.isLoved, emit)
|
||||
}
|
||||
|
||||
function showComments() {
|
||||
// emit('showComments')
|
||||
bus.emit(EVENT_KEY.OPEN_COMMENTS, props.item.id)
|
||||
}
|
||||
function attention(e) {
|
||||
e.currentTarget.classList.add('attention')
|
||||
setTimeout(() => {
|
||||
Utils.updateItem(props, 'isAttention', true, emit)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
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,95 +97,95 @@
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.toolbar {
|
||||
//width: 40px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 5px;
|
||||
color: #fff;
|
||||
.toolbar {
|
||||
//width: 40px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 5px;
|
||||
color: #fff;
|
||||
|
||||
.avatar-ctn {
|
||||
position: relative;
|
||||
.avatar-ctn {
|
||||
position: relative;
|
||||
|
||||
@w: 45rem;
|
||||
@w: 45rem;
|
||||
|
||||
.avatar {
|
||||
width: @w;
|
||||
height: @w;
|
||||
border: 3rem solid white;
|
||||
border-radius: 50%;
|
||||
.avatar {
|
||||
width: @w;
|
||||
height: @w;
|
||||
border: 3rem solid white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -5px;
|
||||
background: red;
|
||||
//background: black;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 1s;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -5px;
|
||||
background: red;
|
||||
//background: black;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 1s;
|
||||
.yes {
|
||||
opacity: 0;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transition: all 1s;
|
||||
&.attention {
|
||||
background: white;
|
||||
|
||||
.no {
|
||||
opacity: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.yes {
|
||||
opacity: 0;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
&.attention {
|
||||
background: white;
|
||||
|
||||
.no {
|
||||
opacity: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.yes {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
opacity: 1;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.love,
|
||||
.message,
|
||||
.share {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@width: 35rem;
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 40rem;
|
||||
}
|
||||
|
||||
.loved {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
|
||||
.love,
|
||||
.message,
|
||||
.share {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@width: 35rem;
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 40rem;
|
||||
}
|
||||
|
||||
.loved {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,105 +1,97 @@
|
||||
<script setup>
|
||||
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'
|
||||
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'
|
||||
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return 0
|
||||
},
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
//改变index，是否使用动画
|
||||
changeActiveIndexUseAnim: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:index'])
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
//改变index，是否使用动画
|
||||
changeActiveIndexUseAnim: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:index'])
|
||||
|
||||
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 },
|
||||
})
|
||||
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 }
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.index,
|
||||
(newVal) => {
|
||||
if (state.localIndex !== newVal) {
|
||||
state.localIndex = newVal
|
||||
if (props.changeActiveIndexUseAnim) {
|
||||
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
|
||||
}
|
||||
GM.$setCss(
|
||||
wrapperEl.value,
|
||||
'transform',
|
||||
`translate3d(${getSlideDistance(state, SlideType.HORIZONTAL, wrapperEl.value)}px, 0, 0)`,
|
||||
)
|
||||
watch(
|
||||
() => props.index,
|
||||
(newVal) => {
|
||||
if (state.localIndex !== newVal) {
|
||||
state.localIndex = newVal
|
||||
if (props.changeActiveIndexUseAnim) {
|
||||
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
|
||||
}
|
||||
},
|
||||
GM.$setCss(
|
||||
wrapperEl.value,
|
||||
'transform',
|
||||
`translate3d(${getSlideDistance(state, SlideType.HORIZONTAL, wrapperEl.value)}px, 0, 0)`
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
|
||||
|
||||
ob = new MutationObserver(() => {
|
||||
state.wrapper.childrenLength = wrapperEl.value.children.length
|
||||
})
|
||||
ob.observe(wrapperEl.value, { childList: true })
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
ob.disconnect()
|
||||
})
|
||||
|
||||
function touchStart(e) {
|
||||
slideTouchStart(e, wrapperEl.value, state)
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.HORIZONTAL)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
slideTouchEnd(e, state, canNext, () => {})
|
||||
slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, emit)
|
||||
}
|
||||
|
||||
function canNext(isNext) {
|
||||
return !(
|
||||
(state.localIndex === 0 && !isNext) ||
|
||||
(state.localIndex === state.wrapper.childrenLength - 1 && isNext)
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
|
||||
|
||||
ob = new MutationObserver(() => {
|
||||
state.wrapper.childrenLength = wrapperEl.value.children.length
|
||||
})
|
||||
ob.observe(wrapperEl.value, { childList: true })
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
ob.disconnect()
|
||||
})
|
||||
|
||||
function touchStart(e) {
|
||||
slideTouchStart(e, wrapperEl.value, state)
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
slideTouchMove(
|
||||
e,
|
||||
wrapperEl.value,
|
||||
state,
|
||||
judgeValue,
|
||||
canNext,
|
||||
null,
|
||||
SlideType.HORIZONTAL,
|
||||
)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
slideTouchEnd(e, state, canNext, () => {})
|
||||
slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, emit)
|
||||
}
|
||||
|
||||
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 {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.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,413 +22,389 @@
|
||||
</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 {
|
||||
name: 'BaseSlideList',
|
||||
components: {
|
||||
Loading,
|
||||
export default {
|
||||
name: 'BaseSlideList',
|
||||
components: {
|
||||
Loading
|
||||
},
|
||||
props: {
|
||||
canMove: {
|
||||
type: Boolean,
|
||||
default: () => true
|
||||
},
|
||||
props: {
|
||||
canMove: {
|
||||
type: Boolean,
|
||||
default: () => true,
|
||||
},
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
indicatorType: {
|
||||
type: String,
|
||||
default: '',
|
||||
//bullets
|
||||
//fraction
|
||||
//progressbar
|
||||
//custom
|
||||
},
|
||||
useHomeLoading: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
setup() {
|
||||
const baseStore = useBaseStore()
|
||||
return { baseStore }
|
||||
indicatorType: {
|
||||
type: String,
|
||||
default: ''
|
||||
//bullets
|
||||
//fraction
|
||||
//progressbar
|
||||
//custom
|
||||
},
|
||||
computed: {
|
||||
isHome() {
|
||||
return this.indicatorType === 'home'
|
||||
},
|
||||
toolbarStyle() {
|
||||
if (!this.isHome) return
|
||||
useHomeLoading: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const baseStore = useBaseStore()
|
||||
return { baseStore }
|
||||
},
|
||||
computed: {
|
||||
isHome() {
|
||||
return this.indicatorType === 'home'
|
||||
},
|
||||
toolbarStyle() {
|
||||
if (!this.isHome) return
|
||||
return {
|
||||
opacity: 1 - this.homeLoadingMoveYDistance / 20,
|
||||
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`
|
||||
}
|
||||
},
|
||||
noticeStyle() {
|
||||
if (!this.isHome) return
|
||||
return {
|
||||
opacity: this.homeLoadingMoveYDistance / 60,
|
||||
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`
|
||||
}
|
||||
},
|
||||
loadingStyle() {
|
||||
if (!this.isHome) return
|
||||
if (this.loading) {
|
||||
return {
|
||||
opacity: 1 - this.homeLoadingMoveYDistance / 20,
|
||||
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
|
||||
opacity: 1,
|
||||
'transition-duration': '300ms'
|
||||
}
|
||||
},
|
||||
noticeStyle() {
|
||||
if (!this.isHome) return
|
||||
}
|
||||
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)`
|
||||
}
|
||||
},
|
||||
loadingStyle() {
|
||||
if (!this.isHome) return
|
||||
if (this.loading) {
|
||||
return {
|
||||
opacity: 1,
|
||||
'transition-duration': '300ms',
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
wrapperWidth: 0,
|
||||
|
||||
startLocationX: 0,
|
||||
startLocationY: 0,
|
||||
|
||||
moveXDistance: 0,
|
||||
moveYDistance: 0,
|
||||
|
||||
judgeValue: 10,
|
||||
startTime: 0,
|
||||
|
||||
currentSlideItemIndex: 0,
|
||||
isDrawRight: true,
|
||||
isDrawDown: true,
|
||||
isCanRightWiping: false,
|
||||
isCanDownWiping: false,
|
||||
isNeedCheck: true,
|
||||
|
||||
slideList: null,
|
||||
slideItems: [],
|
||||
indicatorRef: null,
|
||||
slideItemsWidths: [],
|
||||
tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left,
|
||||
indicatorSpace: 0, //indicator之间的间距
|
||||
toolbarStyleTransitionDuration: 0,
|
||||
homeLoadingMoveYDistance: 0 //homeLoading专用的MoveYDistance，因为MoveYDistance是一直更新的，左右划的时候也在更新，会造成
|
||||
//在往左划，但上面的toolbar开始往下移了，所以需要用一个专用的值来有条件的保存MoveYDistance，即只direction = row的时候
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeIndex() {
|
||||
this.changeIndex()
|
||||
}
|
||||
},
|
||||
mounted: async function () {
|
||||
await this.checkChildren(true)
|
||||
this.isHome && this.initTabs()
|
||||
this.changeIndex(true)
|
||||
|
||||
if (this.autoplay) {
|
||||
setInterval(() => {
|
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1) {
|
||||
this.currentSlideItemIndex = 0
|
||||
} else {
|
||||
this.currentSlideItemIndex++
|
||||
}
|
||||
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)`,
|
||||
}
|
||||
}
|
||||
},
|
||||
this.changeIndex(false, this.currentSlideItemIndex)
|
||||
}, 3000)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeIndex(init = false, index = null) {
|
||||
this.currentSlideItemIndex = index !== null ? index : this.activeIndex
|
||||
!init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
|
||||
this.$setCss(
|
||||
this.slideList,
|
||||
'transform',
|
||||
`translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`
|
||||
)
|
||||
if (this.isHome) {
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
|
||||
)
|
||||
}
|
||||
this.$attrs['onUpdate:activeIndex'] &&
|
||||
this.$emit('update:active-index', this.currentSlideItemIndex)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
wrapperWidth: 0,
|
||||
|
||||
startLocationX: 0,
|
||||
startLocationY: 0,
|
||||
|
||||
moveXDistance: 0,
|
||||
moveYDistance: 0,
|
||||
|
||||
judgeValue: 10,
|
||||
startTime: 0,
|
||||
|
||||
currentSlideItemIndex: 0,
|
||||
isDrawRight: true,
|
||||
isDrawDown: true,
|
||||
isCanRightWiping: false,
|
||||
isCanDownWiping: false,
|
||||
isNeedCheck: true,
|
||||
|
||||
slideList: null,
|
||||
slideItems: [],
|
||||
indicatorRef: null,
|
||||
slideItemsWidths: [],
|
||||
tabIndicatorRelationActiveIndexLefts: [], //指标和slideItem的index的对应left,
|
||||
indicatorSpace: 0, //indicator之间的间距
|
||||
toolbarStyleTransitionDuration: 0,
|
||||
homeLoadingMoveYDistance: 0, //homeLoading专用的MoveYDistance，因为MoveYDistance是一直更新的，左右划的时候也在更新，会造成
|
||||
//在往左划，但上面的toolbar开始往下移了，所以需要用一个专用的值来有条件的保存MoveYDistance，即只direction = row的时候
|
||||
initTabs() {
|
||||
let tabs = this.$refs.tabs
|
||||
this.indicatorRef = this.$refs.indicator
|
||||
for (let i = 0; i < tabs.children.length; i++) {
|
||||
let item = tabs.children[i]
|
||||
this.tabWidth = this.$getCss(item, 'width')
|
||||
//TODO 这里算得不对，两个字时正常，字一多就会出问题，修改参考IndicatorLight.vue
|
||||
this.tabIndicatorRelationActiveIndexLefts.push(
|
||||
item.getBoundingClientRect().x -
|
||||
tabs.children[0].getBoundingClientRect().x +
|
||||
(this.isHome ? this.tabWidth * 0.15 : 0)
|
||||
)
|
||||
}
|
||||
// console.log(this.lefts)
|
||||
this.indicatorSpace =
|
||||
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'
|
||||
)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeIndex() {
|
||||
this.changeIndex()
|
||||
},
|
||||
},
|
||||
mounted: async function () {
|
||||
await this.checkChildren(true)
|
||||
this.isHome && this.initTabs()
|
||||
this.changeIndex(true)
|
||||
|
||||
if (this.autoplay) {
|
||||
setInterval(() => {
|
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1) {
|
||||
this.currentSlideItemIndex = 0
|
||||
} else {
|
||||
this.currentSlideItemIndex++
|
||||
}
|
||||
this.changeIndex(false, this.currentSlideItemIndex)
|
||||
}, 3000)
|
||||
async checkChildren(init) {
|
||||
this.slideList = this.$refs.slideList
|
||||
this.slideItems = this.slideList.children
|
||||
this.wrapperWidth = this.$getCss(this.slideList, 'width')
|
||||
this.wrapperHeight = this.$getCss(this.slideList, 'height')
|
||||
for (let i = 0; i < this.slideItems.length; i++) {
|
||||
let el = this.slideItems[i]
|
||||
this.slideItemsWidths.push(this.$getCss(el, 'width'))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeIndex(init = false, index = null) {
|
||||
this.currentSlideItemIndex = index !== null ? index : this.activeIndex
|
||||
!init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
|
||||
touchStart(e) {
|
||||
this.$setCss(this.slideList, 'transition-duration', `0ms`)
|
||||
this.isHome && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.toolbarStyleTransitionDuration = 0
|
||||
|
||||
this.startLocationX = e.touches[0].pageX
|
||||
this.startLocationY = e.touches[0].pageY
|
||||
this.startTime = Date.now()
|
||||
},
|
||||
touchMove(e) {
|
||||
// this.$stopPropagation(e)
|
||||
if (!this.canMove) return
|
||||
this.moveXDistance = e.touches[0].pageX - this.startLocationX
|
||||
this.moveYDistance = e.touches[0].pageY - this.startLocationY
|
||||
|
||||
this.isDrawRight = this.moveXDistance < 0
|
||||
this.isDrawDown = this.moveYDistance < 0
|
||||
|
||||
this.checkDirection()
|
||||
|
||||
//多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移，
|
||||
//slideitem同时在左右移的情况，所以不能直接使用moveYDistance
|
||||
if (this.isCanDownWiping && this.isHome && !this.loading) {
|
||||
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
|
||||
|
||||
bus.emit(this.name + '-moved', {
|
||||
x: { distance: this.moveXDistance, isDrawRight: this.isDrawRight }
|
||||
})
|
||||
|
||||
this.$stopPropagation(e)
|
||||
this.$setCss(
|
||||
this.slideList,
|
||||
'transform',
|
||||
`translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`,
|
||||
`translate3d(${
|
||||
-this.getWidth(this.currentSlideItemIndex) +
|
||||
this.moveXDistance +
|
||||
(this.isDrawRight ? this.judgeValue : -this.judgeValue)
|
||||
}px, 0px, 0px)`
|
||||
)
|
||||
|
||||
this.isHome &&
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
|
||||
this.moveXDistance / (this.baseStore.bodyWidth / this.indicatorSpace) +
|
||||
'px'
|
||||
)
|
||||
}
|
||||
},
|
||||
touchEnd(e) {
|
||||
if (this.isHome) {
|
||||
if (this.homeLoadingMoveYDistance > 60) {
|
||||
this.getData()
|
||||
}
|
||||
this.toolbarStyleTransitionDuration = 300
|
||||
this.homeLoadingMoveYDistance = 0
|
||||
}
|
||||
|
||||
if (this.isCanRightWiping) {
|
||||
if (this.currentSlideItemIndex === 0 && !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`)
|
||||
let endTime = Date.now()
|
||||
let gapTime = endTime - this.startTime
|
||||
|
||||
//21/06/28 发现一个bug，就是会把所有的点击事件，给失效了。。。//已解决
|
||||
// this.$stopPropagation(e)//todo 如果是嵌套竖状的slide，会出问题,会到moveYDistance停下，不会移到
|
||||
//this.getWidth(this.currentSlideItemIndex)位置，但是不禁示冒泡的话，又会出现划动过快，把父级也会移动。
|
||||
if (this.moveXDistance !== 0) {
|
||||
this.$stopPropagation(e)
|
||||
}
|
||||
if (Math.abs(this.moveXDistance) < 20) gapTime = 1000
|
||||
if (Math.abs(this.moveXDistance) > this.wrapperWidth / 3) gapTime = 100
|
||||
if (gapTime < 150) {
|
||||
if (this.isDrawRight) {
|
||||
this.currentSlideItemIndex += 1
|
||||
} else {
|
||||
this.currentSlideItemIndex -= 1
|
||||
}
|
||||
}
|
||||
this.$setCss(
|
||||
this.slideList,
|
||||
'transform',
|
||||
`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'
|
||||
)
|
||||
}
|
||||
this.$attrs['onUpdate:activeIndex'] &&
|
||||
this.$emit('update:active-index', this.currentSlideItemIndex)
|
||||
},
|
||||
initTabs() {
|
||||
let tabs = this.$refs.tabs
|
||||
this.indicatorRef = this.$refs.indicator
|
||||
for (let i = 0; i < tabs.children.length; i++) {
|
||||
let item = tabs.children[i]
|
||||
this.tabWidth = this.$getCss(item, 'width')
|
||||
//TODO 这里算得不对，两个字时正常，字一多就会出问题，修改参考IndicatorLight.vue
|
||||
this.tabIndicatorRelationActiveIndexLefts.push(
|
||||
item.getBoundingClientRect().x -
|
||||
tabs.children[0].getBoundingClientRect().x +
|
||||
(this.isHome ? this.tabWidth * 0.15 : 0),
|
||||
)
|
||||
}
|
||||
// console.log(this.lefts)
|
||||
this.indicatorSpace =
|
||||
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',
|
||||
)
|
||||
}
|
||||
},
|
||||
async checkChildren(init) {
|
||||
this.slideList = this.$refs.slideList
|
||||
this.slideItems = this.slideList.children
|
||||
this.wrapperWidth = this.$getCss(this.slideList, 'width')
|
||||
this.wrapperHeight = this.$getCss(this.slideList, 'height')
|
||||
for (let i = 0; i < this.slideItems.length; i++) {
|
||||
let el = this.slideItems[i]
|
||||
this.slideItemsWidths.push(this.$getCss(el, 'width'))
|
||||
}
|
||||
},
|
||||
touchStart(e) {
|
||||
this.$setCss(this.slideList, 'transition-duration', `0ms`)
|
||||
this.isHome &&
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.toolbarStyleTransitionDuration = 0
|
||||
|
||||
this.startLocationX = e.touches[0].pageX
|
||||
this.startLocationY = e.touches[0].pageY
|
||||
this.startTime = Date.now()
|
||||
},
|
||||
touchMove(e) {
|
||||
// this.$stopPropagation(e)
|
||||
if (!this.canMove) return
|
||||
this.moveXDistance = e.touches[0].pageX - this.startLocationX
|
||||
this.moveYDistance = e.touches[0].pageY - this.startLocationY
|
||||
|
||||
this.isDrawRight = this.moveXDistance < 0
|
||||
this.isDrawDown = this.moveYDistance < 0
|
||||
|
||||
this.checkDirection()
|
||||
|
||||
//多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移，
|
||||
//slideitem同时在左右移的情况，所以不能直接使用moveYDistance
|
||||
if (this.isCanDownWiping && this.isHome && !this.loading) {
|
||||
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
|
||||
|
||||
bus.emit(this.name + '-moved', {
|
||||
x: { distance: this.moveXDistance, isDrawRight: this.isDrawRight },
|
||||
})
|
||||
|
||||
this.$stopPropagation(e)
|
||||
this.$setCss(
|
||||
this.slideList,
|
||||
'transform',
|
||||
`translate3d(${
|
||||
-this.getWidth(this.currentSlideItemIndex) +
|
||||
this.moveXDistance +
|
||||
(this.isDrawRight ? this.judgeValue : -this.judgeValue)
|
||||
}px, 0px, 0px)`,
|
||||
)
|
||||
|
||||
this.isHome &&
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] -
|
||||
this.moveXDistance /
|
||||
(this.baseStore.bodyWidth / this.indicatorSpace) +
|
||||
'px',
|
||||
)
|
||||
}
|
||||
},
|
||||
touchEnd(e) {
|
||||
if (this.isHome) {
|
||||
if (this.homeLoadingMoveYDistance > 60) {
|
||||
this.getData()
|
||||
}
|
||||
this.toolbarStyleTransitionDuration = 300
|
||||
this.homeLoadingMoveYDistance = 0
|
||||
}
|
||||
|
||||
if (this.isCanRightWiping) {
|
||||
if (this.currentSlideItemIndex === 0 && !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`)
|
||||
let endTime = Date.now()
|
||||
let gapTime = endTime - this.startTime
|
||||
|
||||
//21/06/28 发现一个bug，就是会把所有的点击事件，给失效了。。。//已解决
|
||||
// this.$stopPropagation(e)//todo 如果是嵌套竖状的slide，会出问题,会到moveYDistance停下，不会移到
|
||||
//this.getWidth(this.currentSlideItemIndex)位置，但是不禁示冒泡的话，又会出现划动过快，把父级也会移动。
|
||||
if (this.moveXDistance !== 0) {
|
||||
this.$stopPropagation(e)
|
||||
}
|
||||
if (Math.abs(this.moveXDistance) < 20) gapTime = 1000
|
||||
if (Math.abs(this.moveXDistance) > this.wrapperWidth / 3)
|
||||
gapTime = 100
|
||||
if (gapTime < 150) {
|
||||
if (this.isDrawRight) {
|
||||
this.currentSlideItemIndex += 1
|
||||
} else {
|
||||
this.currentSlideItemIndex -= 1
|
||||
}
|
||||
}
|
||||
this.$setCss(
|
||||
this.slideList,
|
||||
'transform',
|
||||
`translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`,
|
||||
)
|
||||
if (this.isHome) {
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[
|
||||
this.currentSlideItemIndex
|
||||
] + 'px',
|
||||
)
|
||||
}
|
||||
}
|
||||
this.resetConfig()
|
||||
this.$attrs['onUpdate:activeIndex'] &&
|
||||
this.$emit('update:active-index', this.currentSlideItemIndex)
|
||||
this.$attrs['onEnd'] && this.$emit('end')
|
||||
bus.emit(this.name + '-end', this.currentSlideItemIndex)
|
||||
},
|
||||
resetConfig() {
|
||||
this.isCanRightWiping = false
|
||||
this.isNeedCheck = true
|
||||
this.moveXDistance = 0
|
||||
this.moveYDistance = 0
|
||||
},
|
||||
getData() {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 1500)
|
||||
},
|
||||
getWidth(index) {
|
||||
return this.slideItemsWidths.reduce((p, c, i) => {
|
||||
if (i < index) {
|
||||
//最后一页，如果宽度不够屏幕宽度，那不能拉完
|
||||
if (this.slideItemsWidths.length - 1 === i + 1) {
|
||||
p = p + c - (this.wrapperWidth - this.slideItemsWidths[index])
|
||||
} else {
|
||||
p += c
|
||||
}
|
||||
}
|
||||
return p
|
||||
}, 0)
|
||||
},
|
||||
checkDirection() {
|
||||
if (!this.isNeedCheck) return
|
||||
if (
|
||||
Math.abs(this.moveXDistance) > this.judgeValue ||
|
||||
Math.abs(this.moveYDistance) > this.judgeValue
|
||||
) {
|
||||
let angle =
|
||||
(Math.abs(this.moveXDistance) * 10) /
|
||||
(Math.abs(this.moveYDistance) * 10)
|
||||
if (angle > 1) {
|
||||
this.isCanDownWiping = false
|
||||
this.isCanRightWiping = true
|
||||
// console.log('横划')
|
||||
} else {
|
||||
this.isCanDownWiping = true
|
||||
this.isCanRightWiping = false
|
||||
// console.log('竖划')
|
||||
}
|
||||
// console.log(angle)
|
||||
return (this.isNeedCheck = false)
|
||||
}
|
||||
return (this.isNeedCheck = true)
|
||||
},
|
||||
}
|
||||
this.resetConfig()
|
||||
this.$attrs['onUpdate:activeIndex'] &&
|
||||
this.$emit('update:active-index', this.currentSlideItemIndex)
|
||||
this.$attrs['onEnd'] && this.$emit('end')
|
||||
bus.emit(this.name + '-end', this.currentSlideItemIndex)
|
||||
},
|
||||
resetConfig() {
|
||||
this.isCanRightWiping = false
|
||||
this.isNeedCheck = true
|
||||
this.moveXDistance = 0
|
||||
this.moveYDistance = 0
|
||||
},
|
||||
getData() {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 1500)
|
||||
},
|
||||
getWidth(index) {
|
||||
return this.slideItemsWidths.reduce((p, c, i) => {
|
||||
if (i < index) {
|
||||
//最后一页，如果宽度不够屏幕宽度，那不能拉完
|
||||
if (this.slideItemsWidths.length - 1 === i + 1) {
|
||||
p = p + c - (this.wrapperWidth - this.slideItemsWidths[index])
|
||||
} else {
|
||||
p += c
|
||||
}
|
||||
}
|
||||
return p
|
||||
}, 0)
|
||||
},
|
||||
checkDirection() {
|
||||
if (!this.isNeedCheck) return
|
||||
if (
|
||||
Math.abs(this.moveXDistance) > this.judgeValue ||
|
||||
Math.abs(this.moveYDistance) > this.judgeValue
|
||||
) {
|
||||
let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
|
||||
if (angle > 1) {
|
||||
this.isCanDownWiping = false
|
||||
this.isCanRightWiping = true
|
||||
// console.log('横划')
|
||||
} else {
|
||||
this.isCanDownWiping = true
|
||||
this.isCanRightWiping = false
|
||||
// console.log('竖划')
|
||||
}
|
||||
// console.log(angle)
|
||||
return (this.isNeedCheck = false)
|
||||
}
|
||||
return (this.isNeedCheck = true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
#base-slide-wrapper {
|
||||
width: 100%;
|
||||
#base-slide-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
#base-slide-list {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#base-slide-list {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.indicator-bullets {
|
||||
position: absolute;
|
||||
bottom: 10rem;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
.indicator-bullets {
|
||||
position: absolute;
|
||||
bottom: 10rem;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
.bullet {
|
||||
@width: 5rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin: 0 3rem;
|
||||
border-radius: 50%;
|
||||
background: var(--second-btn-color);
|
||||
|
||||
.bullet {
|
||||
@width: 5rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin: 0 3rem;
|
||||
border-radius: 50%;
|
||||
background: var(--second-btn-color);
|
||||
|
||||
&.active {
|
||||
background: white;
|
||||
}
|
||||
&.active {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -36,349 +36,346 @@
|
||||
</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 {
|
||||
name: 'SlideUser',
|
||||
components: {
|
||||
Posters,
|
||||
BaseButton,
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
type: 'user',
|
||||
id: '224e9a00-ffa0-4bc1-bb07-c318c7b02fa5',
|
||||
avatar: new URL(
|
||||
'../../assets/img/icon/avatar/1.png',
|
||||
import.meta.url,
|
||||
).href,
|
||||
name: '何以为家',
|
||||
realName: '王小二',
|
||||
sex: '',
|
||||
age: 25,
|
||||
idCard: null,
|
||||
phone: '',
|
||||
address: null,
|
||||
wechat: '',
|
||||
password: null,
|
||||
lastLoginTime: '1629993515',
|
||||
createTime: '1630035089',
|
||||
isDelete: 0,
|
||||
account: '234',
|
||||
pinyin: 'H',
|
||||
select: false,
|
||||
videos: [
|
||||
{
|
||||
id: '13b462dd-8d81-4744-93ed-815941f4ed3e',
|
||||
cover:
|
||||
'http://p6.douyinpic.com/img/tos-cn-p-0015/efebaff8e1df46928522e1ac5583d059~c5_300x400.jpeg?from=4257465056_large',
|
||||
dynamic_cover:
|
||||
'http://p29.douyinpic.com/obj/tos-cn-p-0015/efebaff8e1df46928522e1ac5583d059?from=4257465056_large',
|
||||
origin_cover:
|
||||
'http://p3.douyinpic.com/tos-cn-p-0015/d834cf36d4be462f92206543306ff362_1623571220~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=2021083114303701021217008258017B39&biz_tag=feed_cover',
|
||||
video:
|
||||
'http://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c32rloe8vall584jaad0&line=1&file_id=d6daaa72874445f5a71c2a671ec9abd4&sign=62621a8cd9f89bab74fb31daa201e148&is_play_url=1&source=PackSourceEnum_PUBLISH',
|
||||
video_data_size: 8569489,
|
||||
duration: 148612,
|
||||
desc: '几分钟看科幻片《徐福》 #我的观影报告 #抖音电影',
|
||||
allow_download: 1,
|
||||
allow_duet: 0,
|
||||
allow_react: 0,
|
||||
allow_music: 1,
|
||||
allow_douplus: 1,
|
||||
allow_share: 1,
|
||||
digg_count: 55,
|
||||
comment_count: 0,
|
||||
download_count: 0,
|
||||
play_count: 0,
|
||||
share_count: 0,
|
||||
forward_count: 0,
|
||||
collect_count: 0,
|
||||
sort: 24,
|
||||
is_top: 0,
|
||||
city: '350100',
|
||||
musicId: '286f9f80-d497-4914-a5be-65686916e3fe',
|
||||
create_time: '1630391775',
|
||||
creator_id: '54884802577',
|
||||
status: 1,
|
||||
topics: [
|
||||
{
|
||||
id: '41821c6d-e14f-47f1-a391-f0b1f42afbe1',
|
||||
name: '抖音电影',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 'c10178eb-441f-4dc7-93b6-eaae1b6248cc',
|
||||
name: '我的观影报告',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
},
|
||||
],
|
||||
music: {
|
||||
id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21',
|
||||
cover:
|
||||
'http://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172',
|
||||
mp3: 'http://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3',
|
||||
title: '@喵嗷污说电影创作的原声',
|
||||
export default {
|
||||
name: 'SlideUser',
|
||||
components: {
|
||||
Posters,
|
||||
BaseButton
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
type: 'user',
|
||||
id: '224e9a00-ffa0-4bc1-bb07-c318c7b02fa5',
|
||||
avatar: new URL('../../assets/img/icon/avatar/1.png', import.meta.url).href,
|
||||
name: '何以为家',
|
||||
realName: '王小二',
|
||||
sex: '',
|
||||
age: 25,
|
||||
idCard: null,
|
||||
phone: '',
|
||||
address: null,
|
||||
wechat: '',
|
||||
password: null,
|
||||
lastLoginTime: '1629993515',
|
||||
createTime: '1630035089',
|
||||
isDelete: 0,
|
||||
account: '234',
|
||||
pinyin: 'H',
|
||||
select: false,
|
||||
videos: [
|
||||
{
|
||||
id: '13b462dd-8d81-4744-93ed-815941f4ed3e',
|
||||
cover:
|
||||
'http://p6.douyinpic.com/img/tos-cn-p-0015/efebaff8e1df46928522e1ac5583d059~c5_300x400.jpeg?from=4257465056_large',
|
||||
dynamic_cover:
|
||||
'http://p29.douyinpic.com/obj/tos-cn-p-0015/efebaff8e1df46928522e1ac5583d059?from=4257465056_large',
|
||||
origin_cover:
|
||||
'http://p3.douyinpic.com/tos-cn-p-0015/d834cf36d4be462f92206543306ff362_1623571220~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=2021083114303701021217008258017B39&biz_tag=feed_cover',
|
||||
video:
|
||||
'http://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c32rloe8vall584jaad0&line=1&file_id=d6daaa72874445f5a71c2a671ec9abd4&sign=62621a8cd9f89bab74fb31daa201e148&is_play_url=1&source=PackSourceEnum_PUBLISH',
|
||||
video_data_size: 8569489,
|
||||
duration: 148612,
|
||||
desc: '几分钟看科幻片《徐福》 #我的观影报告 #抖音电影',
|
||||
allow_download: 1,
|
||||
allow_duet: 0,
|
||||
allow_react: 0,
|
||||
allow_music: 1,
|
||||
allow_douplus: 1,
|
||||
allow_share: 1,
|
||||
digg_count: 55,
|
||||
comment_count: 0,
|
||||
download_count: 0,
|
||||
play_count: 0,
|
||||
share_count: 0,
|
||||
forward_count: 0,
|
||||
collect_count: 0,
|
||||
sort: 24,
|
||||
is_top: 0,
|
||||
city: '350100',
|
||||
musicId: '286f9f80-d497-4914-a5be-65686916e3fe',
|
||||
create_time: '1630391775',
|
||||
creator_id: '54884802577',
|
||||
status: 1,
|
||||
topics: [
|
||||
{
|
||||
id: '41821c6d-e14f-47f1-a391-f0b1f42afbe1',
|
||||
name: '抖音电影',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
status: 1
|
||||
},
|
||||
},
|
||||
{
|
||||
id: '1f6871da-73ab-40cc-9481-37ad83b63bde',
|
||||
cover:
|
||||
'http://p3.douyinpic.com/img/tos-cn-p-0015/ba34a7304d6e44cfb159b838e1a6c980~c5_300x400.jpeg?from=4257465056_large',
|
||||
dynamic_cover:
|
||||
'http://p3.douyinpic.com/obj/tos-cn-p-0015/ba34a7304d6e44cfb159b838e1a6c980?from=4257465056_large',
|
||||
origin_cover:
|
||||
'http://p26.douyinpic.com/tos-cn-p-0015/25898d01cf9c44c2ae63874546d75640_1623570870~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=2021083114303701021217008258017B39&biz_tag=feed_cover',
|
||||
video:
|
||||
'http://api.amemv.com/aweme/v1/play/?video_id=v0d00fg10000c32rhslhtod769sv81r0&line=1&file_id=b16315d063594519a6b9102905da92a7&sign=eef97e748e50854547d9cd10b29e2ead&is_play_url=1&source=PackSourceEnum_PUBLISH',
|
||||
video_data_size: 10901859,
|
||||
duration: 188250,
|
||||
desc: '科学家为永生改造人类基因，结果创造出能力逆天的新物种完虐人类 #我的观影报告',
|
||||
allow_download: 1,
|
||||
allow_duet: 0,
|
||||
allow_react: 0,
|
||||
allow_music: 1,
|
||||
allow_douplus: 1,
|
||||
allow_share: 1,
|
||||
digg_count: 24,
|
||||
comment_count: 0,
|
||||
download_count: 0,
|
||||
play_count: 0,
|
||||
share_count: 0,
|
||||
forward_count: 0,
|
||||
collect_count: 0,
|
||||
sort: 25,
|
||||
is_top: 0,
|
||||
city: '350100',
|
||||
musicId: '5ce6dd54-62eb-46d4-8d71-40b3776bee50',
|
||||
create_time: '1630391775',
|
||||
creator_id: '54884802577',
|
||||
status: 1,
|
||||
topics: [
|
||||
{
|
||||
id: 'c10178eb-441f-4dc7-93b6-eaae1b6248cc',
|
||||
name: '我的观影报告',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
},
|
||||
],
|
||||
music: {
|
||||
id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21',
|
||||
cover:
|
||||
'http://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172',
|
||||
mp3: 'http://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3',
|
||||
title: '@喵嗷污说电影创作的原声',
|
||||
{
|
||||
id: 'c10178eb-441f-4dc7-93b6-eaae1b6248cc',
|
||||
name: '我的观影报告',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'f7657f21-5fee-4f1f-9d88-ec8411ea009b',
|
||||
status: 1
|
||||
}
|
||||
],
|
||||
music: {
|
||||
id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21',
|
||||
cover:
|
||||
'http://p3.douyinpic.com/img/tos-cn-p-0015/ef15ae6839104e80871f521447a97b0a~c5_300x400.jpeg?from=4257465056_large',
|
||||
dynamic_cover:
|
||||
'http://p11.douyinpic.com/obj/tos-cn-p-0015/ef15ae6839104e80871f521447a97b0a?from=4257465056_large',
|
||||
origin_cover:
|
||||
'http://p5-ipv6.douyinpic.com/tos-cn-p-0015/70f6b5f352d4425e8944c038b932c8fd_1623570188~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=2021083114303701021217008258017B39&biz_tag=feed_cover',
|
||||
video:
|
||||
'http://api.amemv.com/aweme/v1/play/?video_id=v0d00fg10000c32rdevdoca093n6gtn0&line=1&file_id=6bd8e6e959b44d83b5ebbd486134aafc&sign=f592f3089c2a3ddae2042ff85bf9ec6f&is_play_url=1&source=PackSourceEnum_PUBLISH',
|
||||
video_data_size: 19324714,
|
||||
duration: 300655,
|
||||
desc: '科学家为永生改造人类基因，结果创造出能力逆天的新物种完虐人类 #我的观影报告',
|
||||
allow_download: 0,
|
||||
allow_duet: 0,
|
||||
allow_react: 0,
|
||||
allow_music: 1,
|
||||
allow_douplus: 1,
|
||||
allow_share: 1,
|
||||
digg_count: 19,
|
||||
comment_count: 1,
|
||||
download_count: 0,
|
||||
play_count: 0,
|
||||
share_count: 0,
|
||||
forward_count: 0,
|
||||
collect_count: 0,
|
||||
sort: 26,
|
||||
is_top: 0,
|
||||
city: '350100',
|
||||
musicId: '8170be64-2950-425d-aa7f-b8b6100ed51b',
|
||||
create_time: '1630391775',
|
||||
'http://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172',
|
||||
mp3: 'http://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3',
|
||||
title: '@喵嗷污说电影创作的原声',
|
||||
creator_id: '54884802577',
|
||||
status: 1,
|
||||
topics: [
|
||||
{
|
||||
id: 'c10178eb-441f-4dc7-93b6-eaae1b6248cc',
|
||||
name: '我的观影报告',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
},
|
||||
],
|
||||
music: {
|
||||
id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21',
|
||||
cover:
|
||||
'http://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172',
|
||||
mp3: 'http://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3',
|
||||
title: '@喵嗷污说电影创作的原声',
|
||||
create_time: '1630391758',
|
||||
status: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '1f6871da-73ab-40cc-9481-37ad83b63bde',
|
||||
cover:
|
||||
'http://p3.douyinpic.com/img/tos-cn-p-0015/ba34a7304d6e44cfb159b838e1a6c980~c5_300x400.jpeg?from=4257465056_large',
|
||||
dynamic_cover:
|
||||
'http://p3.douyinpic.com/obj/tos-cn-p-0015/ba34a7304d6e44cfb159b838e1a6c980?from=4257465056_large',
|
||||
origin_cover:
|
||||
'http://p26.douyinpic.com/tos-cn-p-0015/25898d01cf9c44c2ae63874546d75640_1623570870~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=2021083114303701021217008258017B39&biz_tag=feed_cover',
|
||||
video:
|
||||
'http://api.amemv.com/aweme/v1/play/?video_id=v0d00fg10000c32rhslhtod769sv81r0&line=1&file_id=b16315d063594519a6b9102905da92a7&sign=eef97e748e50854547d9cd10b29e2ead&is_play_url=1&source=PackSourceEnum_PUBLISH',
|
||||
video_data_size: 10901859,
|
||||
duration: 188250,
|
||||
desc: '科学家为永生改造人类基因，结果创造出能力逆天的新物种完虐人类 #我的观影报告',
|
||||
allow_download: 1,
|
||||
allow_duet: 0,
|
||||
allow_react: 0,
|
||||
allow_music: 1,
|
||||
allow_douplus: 1,
|
||||
allow_share: 1,
|
||||
digg_count: 24,
|
||||
comment_count: 0,
|
||||
download_count: 0,
|
||||
play_count: 0,
|
||||
share_count: 0,
|
||||
forward_count: 0,
|
||||
collect_count: 0,
|
||||
sort: 25,
|
||||
is_top: 0,
|
||||
city: '350100',
|
||||
musicId: '5ce6dd54-62eb-46d4-8d71-40b3776bee50',
|
||||
create_time: '1630391775',
|
||||
creator_id: '54884802577',
|
||||
status: 1,
|
||||
topics: [
|
||||
{
|
||||
id: 'c10178eb-441f-4dc7-93b6-eaae1b6248cc',
|
||||
name: '我的观影报告',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
globalMethods,
|
||||
status: 1
|
||||
}
|
||||
],
|
||||
music: {
|
||||
id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21',
|
||||
cover:
|
||||
'http://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172',
|
||||
mp3: 'http://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3',
|
||||
title: '@喵嗷污说电影创作的原声',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'f7657f21-5fee-4f1f-9d88-ec8411ea009b',
|
||||
cover:
|
||||
'http://p3.douyinpic.com/img/tos-cn-p-0015/ef15ae6839104e80871f521447a97b0a~c5_300x400.jpeg?from=4257465056_large',
|
||||
dynamic_cover:
|
||||
'http://p11.douyinpic.com/obj/tos-cn-p-0015/ef15ae6839104e80871f521447a97b0a?from=4257465056_large',
|
||||
origin_cover:
|
||||
'http://p5-ipv6.douyinpic.com/tos-cn-p-0015/70f6b5f352d4425e8944c038b932c8fd_1623570188~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=2021083114303701021217008258017B39&biz_tag=feed_cover',
|
||||
video:
|
||||
'http://api.amemv.com/aweme/v1/play/?video_id=v0d00fg10000c32rdevdoca093n6gtn0&line=1&file_id=6bd8e6e959b44d83b5ebbd486134aafc&sign=f592f3089c2a3ddae2042ff85bf9ec6f&is_play_url=1&source=PackSourceEnum_PUBLISH',
|
||||
video_data_size: 19324714,
|
||||
duration: 300655,
|
||||
desc: '科学家为永生改造人类基因，结果创造出能力逆天的新物种完虐人类 #我的观影报告',
|
||||
allow_download: 0,
|
||||
allow_duet: 0,
|
||||
allow_react: 0,
|
||||
allow_music: 1,
|
||||
allow_douplus: 1,
|
||||
allow_share: 1,
|
||||
digg_count: 19,
|
||||
comment_count: 1,
|
||||
download_count: 0,
|
||||
play_count: 0,
|
||||
share_count: 0,
|
||||
forward_count: 0,
|
||||
collect_count: 0,
|
||||
sort: 26,
|
||||
is_top: 0,
|
||||
city: '350100',
|
||||
musicId: '8170be64-2950-425d-aa7f-b8b6100ed51b',
|
||||
create_time: '1630391775',
|
||||
creator_id: '54884802577',
|
||||
status: 1,
|
||||
topics: [
|
||||
{
|
||||
id: 'c10178eb-441f-4dc7-93b6-eaae1b6248cc',
|
||||
name: '我的观影报告',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1
|
||||
}
|
||||
],
|
||||
music: {
|
||||
id: '8ce2cb26-4772-4c7b-91d9-a2580c667c21',
|
||||
cover:
|
||||
'http://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172',
|
||||
mp3: 'http://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3',
|
||||
title: '@喵嗷污说电影创作的原声',
|
||||
creator_id: '54884802577',
|
||||
create_time: '1630391758',
|
||||
status: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
console.log('modelValue', this.modelValue)
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
globalMethods
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
console.log('modelValue', this.modelValue)
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@p: 15rem;
|
||||
#SlideUser {
|
||||
@p: 15rem;
|
||||
#SlideUser {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//background: #e1e1e1;
|
||||
background: linear-gradient(to bottom, rgb(49, 75, 98), rgb(65, 48, 40));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 0 @p;
|
||||
box-sizing: border-box;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//background: #e1e1e1;
|
||||
background: linear-gradient(to bottom, rgb(49, 75, 98), rgb(65, 48, 40));
|
||||
background: linear-gradient(to bottom, rgb(71, 90, 110), rgb(97, 84, 75));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 15rem;
|
||||
//box-shadow: 0 0 2rem 0 #b3b3b3;
|
||||
padding: 15rem;
|
||||
color: black;
|
||||
position: relative;
|
||||
padding: 0 @p;
|
||||
box-sizing: border-box;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
background: linear-gradient(to bottom, rgb(71, 90, 110), rgb(97, 84, 75));
|
||||
.close {
|
||||
top: 15rem;
|
||||
right: 15rem;
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 20rem;
|
||||
margin-bottom: 20rem;
|
||||
font-size: 20rem;
|
||||
letter-spacing: 4rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 15rem;
|
||||
//box-shadow: 0 0 2rem 0 #b3b3b3;
|
||||
padding: 15rem;
|
||||
color: black;
|
||||
position: relative;
|
||||
|
||||
.close {
|
||||
top: 15rem;
|
||||
right: 15rem;
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 20rem;
|
||||
margin-bottom: 20rem;
|
||||
font-size: 20rem;
|
||||
letter-spacing: 4rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
|
||||
.tag {
|
||||
margin: 0 3rem;
|
||||
font-size: 10rem;
|
||||
background: rgba(161, 158, 156, 0.3);
|
||||
color: gainsboro;
|
||||
padding: 3rem 5rem;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.realName {
|
||||
text-align: center;
|
||||
.tag {
|
||||
margin: 0 3rem;
|
||||
font-size: 10rem;
|
||||
background: rgba(161, 158, 156, 0.3);
|
||||
color: gainsboro;
|
||||
border-top: 1px solid #5e5a5a;
|
||||
border-bottom: 1px solid #5e5a5a;
|
||||
padding: 10rem 0;
|
||||
margin: 15rem 0;
|
||||
font-size: 14rem;
|
||||
letter-spacing: 1.5rem;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.poster-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 31%);
|
||||
|
||||
grid-column-gap: 3.5%;
|
||||
grid-row-gap: 2%;
|
||||
}
|
||||
|
||||
.poster-item {
|
||||
border-radius: 8rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.poster {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 5rem;
|
||||
left: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
|
||||
.love {
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
padding: 3rem 5rem;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
bottom: 20rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
left: @p;
|
||||
right: @p;
|
||||
.realName {
|
||||
text-align: center;
|
||||
color: gainsboro;
|
||||
border-top: 1px solid #5e5a5a;
|
||||
border-bottom: 1px solid #5e5a5a;
|
||||
padding: 10rem 0;
|
||||
margin: 15rem 0;
|
||||
font-size: 14rem;
|
||||
letter-spacing: 1.5rem;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 48%;
|
||||
.poster-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 31%);
|
||||
|
||||
grid-column-gap: 3.5%;
|
||||
grid-row-gap: 2%;
|
||||
}
|
||||
|
||||
.poster-item {
|
||||
border-radius: 8rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.poster {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 5rem;
|
||||
left: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
|
||||
.love {
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
bottom: 20rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
left: @p;
|
||||
right: @p;
|
||||
|
||||
.button {
|
||||
width: 48%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,91 +1,83 @@
|
||||
<script setup>
|
||||
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'
|
||||
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'
|
||||
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return 0
|
||||
},
|
||||
},
|
||||
//改变index，是否使用动画
|
||||
changeActiveIndexUseAnim: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:index'])
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
//改变index，是否使用动画
|
||||
changeActiveIndexUseAnim: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:index'])
|
||||
|
||||
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 },
|
||||
})
|
||||
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 }
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.index,
|
||||
(newVal) => {
|
||||
if (state.localIndex !== newVal) {
|
||||
state.localIndex = newVal
|
||||
if (props.changeActiveIndexUseAnim) {
|
||||
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
|
||||
}
|
||||
GM.$setCss(
|
||||
wrapperEl.value,
|
||||
'transform',
|
||||
`translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`,
|
||||
)
|
||||
watch(
|
||||
() => props.index,
|
||||
(newVal) => {
|
||||
if (state.localIndex !== newVal) {
|
||||
state.localIndex = newVal
|
||||
if (props.changeActiveIndexUseAnim) {
|
||||
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
|
||||
}
|
||||
},
|
||||
GM.$setCss(
|
||||
wrapperEl.value,
|
||||
'transform',
|
||||
`translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
slideInit(wrapperEl.value, state, SlideType.VERTICAL)
|
||||
})
|
||||
|
||||
function touchStart(e) {
|
||||
slideTouchStart(e, wrapperEl.value, state)
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.VERTICAL)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
slideTouchEnd(e, state, canNext, null, null, SlideType.VERTICAL)
|
||||
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
|
||||
}
|
||||
|
||||
function canNext(isNext) {
|
||||
return !(
|
||||
(state.localIndex === 0 && !isNext) ||
|
||||
(state.localIndex === state.wrapper.childrenLength - 1 && isNext)
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
slideInit(wrapperEl.value, state, SlideType.VERTICAL)
|
||||
})
|
||||
|
||||
function touchStart(e) {
|
||||
slideTouchStart(e, wrapperEl.value, state)
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
slideTouchMove(
|
||||
e,
|
||||
wrapperEl.value,
|
||||
state,
|
||||
judgeValue,
|
||||
canNext,
|
||||
null,
|
||||
SlideType.VERTICAL,
|
||||
)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
slideTouchEnd(e, state, canNext, null, null, SlideType.VERTICAL)
|
||||
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
|
||||
}
|
||||
|
||||
function canNext(isNext) {
|
||||
return !(
|
||||
(state.localIndex === 0 && !isNext) ||
|
||||
(state.localIndex === state.wrapper.childrenLength - 1 && isNext)
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -1,383 +1,337 @@
|
||||
<script setup lang="jsx">
|
||||
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'
|
||||
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'
|
||||
|
||||
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,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
uniqueId: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:index', 'loadMore', 'refresh'])
|
||||
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
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
uniqueId: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:index', 'loadMore', 'refresh'])
|
||||
|
||||
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()
|
||||
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()
|
||||
|
||||
watch(
|
||||
() => props.list,
|
||||
(newVal, oldVal) => {
|
||||
// console.log('watch-list', newVal.length, oldVal.length, newVal)
|
||||
//新数据比老数据小，是刷新
|
||||
if (newVal.length < oldVal.length) {
|
||||
watch(
|
||||
() => props.list,
|
||||
(newVal, oldVal) => {
|
||||
// console.log('watch-list', newVal.length, oldVal.length, newVal)
|
||||
//新数据比老数据小，是刷新
|
||||
if (newVal.length < oldVal.length) {
|
||||
insertContent()
|
||||
} else {
|
||||
if (oldVal.length === 0) {
|
||||
insertContent()
|
||||
} else {
|
||||
if (oldVal.length === 0) {
|
||||
insertContent()
|
||||
} else {
|
||||
let lastSlideItem = $(wrapperEl.value).find(`.${itemClassName}:last`)
|
||||
let top = lastSlideItem.css('top')
|
||||
let lastIndex = Number(lastSlideItem.attr('data-index')) + 1
|
||||
console.log('lastIndex', lastIndex)
|
||||
newVal.slice(lastIndex, lastIndex + 3).map((item, index) => {
|
||||
let el = getInsEl(item, lastIndex + index)
|
||||
//这里必须要设置个top值，不然会把前面的条目给覆盖掉
|
||||
//2022-3-27，这里不用计算，直接用已用slide-item最后一条的top值，
|
||||
//因为有一条情况：当滑动最后一条和二条的时候top值不会继续加。此时新增的数据如果还
|
||||
// 计算top值的，会和前面的对不上
|
||||
$(el).css('top', top)
|
||||
wrapperEl.value.appendChild(el)
|
||||
state.wrapper.childrenLength++
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.index,
|
||||
(newVal, oldVal) => {
|
||||
state.localIndex = newVal
|
||||
// console.log('watch-index', newVal, oldVal)
|
||||
if (!props.list.length) return
|
||||
bus.emit(EVENT_KEY.CURRENT_ITEM, props.list[newVal])
|
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
|
||||
uniqueId: props.uniqueId,
|
||||
index: newVal,
|
||||
type: EVENT_KEY.ITEM_PLAY,
|
||||
})
|
||||
setTimeout(() => {
|
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
|
||||
uniqueId: props.uniqueId,
|
||||
index: oldVal,
|
||||
type: EVENT_KEY.ITEM_STOP,
|
||||
let lastSlideItem = $(wrapperEl.value).find(`.${itemClassName}:last`)
|
||||
let top = lastSlideItem.css('top')
|
||||
let lastIndex = Number(lastSlideItem.attr('data-index')) + 1
|
||||
console.log('lastIndex', lastIndex)
|
||||
newVal.slice(lastIndex, lastIndex + 3).map((item, index) => {
|
||||
let el = getInsEl(item, lastIndex + index)
|
||||
//这里必须要设置个top值，不然会把前面的条目给覆盖掉
|
||||
//2022-3-27，这里不用计算，直接用已用slide-item最后一条的top值，
|
||||
//因为有一条情况：当滑动最后一条和二条的时候top值不会继续加。此时新增的数据如果还
|
||||
// 计算top值的，会和前面的对不上
|
||||
$(el).css('top', top)
|
||||
wrapperEl.value.appendChild(el)
|
||||
state.wrapper.childrenLength++
|
||||
})
|
||||
}, 200)
|
||||
},
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.active,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal && !props.list.length) {
|
||||
return emit('refresh')
|
||||
}
|
||||
// console.log('active', 'newVal', newVal, 'oldVal', oldVal)
|
||||
if (newVal) {
|
||||
bus.emit(EVENT_KEY.CURRENT_ITEM, props.list[state.localIndex])
|
||||
}
|
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
|
||||
uniqueId: props.uniqueId,
|
||||
index: state.localIndex,
|
||||
type: newVal === false ? EVENT_KEY.ITEM_STOP : EVENT_KEY.ITEM_PLAY,
|
||||
})
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
slideInit(wrapperEl.value, state, SlideType.VERTICAL)
|
||||
insertContent()
|
||||
})
|
||||
|
||||
function insertContent(list = props.list) {
|
||||
if (!list.length) return
|
||||
$(wrapperEl.value).empty()
|
||||
let half = (props.virtualTotal - 1) / 2
|
||||
let start = 0
|
||||
if (state.localIndex >= half) {
|
||||
start = state.localIndex - half
|
||||
}
|
||||
let end = start + props.virtualTotal
|
||||
if (end >= list.length) {
|
||||
end = list.length
|
||||
start = end - props.virtualTotal
|
||||
}
|
||||
if (start < 0) start = 0
|
||||
// console.log('start', start, end)
|
||||
list.slice(start, end).map((item, index) => {
|
||||
//自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样
|
||||
let el = getInsEl(item, start + index, start + index === state.localIndex)
|
||||
wrapperEl.value.appendChild(el)
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.index,
|
||||
(newVal, oldVal) => {
|
||||
state.localIndex = newVal
|
||||
// console.log('watch-index', newVal, oldVal)
|
||||
if (!props.list.length) return
|
||||
bus.emit(EVENT_KEY.CURRENT_ITEM, props.list[newVal])
|
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
|
||||
uniqueId: props.uniqueId,
|
||||
index: newVal,
|
||||
type: EVENT_KEY.ITEM_PLAY
|
||||
})
|
||||
GM.$setCss(
|
||||
wrapperEl.value,
|
||||
'transform',
|
||||
`translate3d(0px,${getSlideDistance(state, SlideType.VERTICAL)}px, 0px)`,
|
||||
)
|
||||
setTimeout(() => {
|
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
|
||||
uniqueId: props.uniqueId,
|
||||
index: oldVal,
|
||||
type: EVENT_KEY.ITEM_STOP
|
||||
})
|
||||
}, 200)
|
||||
}
|
||||
)
|
||||
|
||||
if (state.localIndex > 2 && list.length > 5) {
|
||||
$(wrapperEl.value)
|
||||
.find(`.${itemClassName}`)
|
||||
.each(function () {
|
||||
if (list.length - state.localIndex > 2) {
|
||||
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
|
||||
} else {
|
||||
$(this).css('top', start * state.wrapper.height)
|
||||
watch(
|
||||
() => props.active,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal && !props.list.length) {
|
||||
return emit('refresh')
|
||||
}
|
||||
// console.log('active', 'newVal', newVal, 'oldVal', oldVal)
|
||||
if (newVal) {
|
||||
bus.emit(EVENT_KEY.CURRENT_ITEM, props.list[state.localIndex])
|
||||
}
|
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
|
||||
uniqueId: props.uniqueId,
|
||||
index: state.localIndex,
|
||||
type: newVal === false ? EVENT_KEY.ITEM_STOP : EVENT_KEY.ITEM_PLAY
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
slideInit(wrapperEl.value, state, SlideType.VERTICAL)
|
||||
insertContent()
|
||||
})
|
||||
|
||||
function insertContent(list = props.list) {
|
||||
if (!list.length) return
|
||||
$(wrapperEl.value).empty()
|
||||
let half = (props.virtualTotal - 1) / 2
|
||||
let start = 0
|
||||
if (state.localIndex >= half) {
|
||||
start = state.localIndex - half
|
||||
}
|
||||
let end = start + props.virtualTotal
|
||||
if (end >= list.length) {
|
||||
end = list.length
|
||||
start = end - props.virtualTotal
|
||||
}
|
||||
if (start < 0) start = 0
|
||||
// console.log('start', start, end)
|
||||
list.slice(start, end).map((item, index) => {
|
||||
//自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样
|
||||
let el = getInsEl(item, start + index, start + index === state.localIndex)
|
||||
wrapperEl.value.appendChild(el)
|
||||
})
|
||||
GM.$setCss(
|
||||
wrapperEl.value,
|
||||
'transform',
|
||||
`translate3d(0px,${getSlideDistance(state, SlideType.VERTICAL)}px, 0px)`
|
||||
)
|
||||
|
||||
if (state.localIndex > 2 && list.length > 5) {
|
||||
$(wrapperEl.value)
|
||||
.find(`.${itemClassName}`)
|
||||
.each(function () {
|
||||
if (list.length - state.localIndex > 2) {
|
||||
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
|
||||
} else {
|
||||
$(this).css('top', start * state.wrapper.height)
|
||||
}
|
||||
})
|
||||
}
|
||||
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}]`)
|
||||
let replaceItem = getInsEl(item, state.localIndex, true)
|
||||
$(replaceItem).css('top', currentItem.css('top'))
|
||||
currentItem.replaceWith(replaceItem)
|
||||
}
|
||||
|
||||
defineExpose({ dislike })
|
||||
|
||||
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')
|
||||
//TODO 打包到线上时用这个，这个在开发时任何修改都会刷新页面
|
||||
if (import.meta.env.PROD) {
|
||||
parent.classList.add('slide-item')
|
||||
parent.setAttribute('data-index', index)
|
||||
render(slideVNode, parent)
|
||||
appInsMap.set(index, {
|
||||
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) {
|
||||
slideTouchStart(e, wrapperEl.value, state)
|
||||
}
|
||||
|
||||
//TODO 2022-3-28:在最顶部，反复滑动会抖动一下，初步猜测是因为方向变了，导致的加判断距离变成了减
|
||||
function touchMove(e) {
|
||||
slideTouchMove(e, wrapperEl.value, state, baseStore.judgeValue, canNext, null, SlideType.VERTICAL)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
let isNext = state.move.y < 0
|
||||
if (
|
||||
state.localIndex === 0 &&
|
||||
!isNext &&
|
||||
state.move.y > baseStore.homeRefresh + baseStore.judgeValue
|
||||
) {
|
||||
emit('refresh')
|
||||
}
|
||||
slideTouchEnd(
|
||||
e,
|
||||
state,
|
||||
canNext,
|
||||
(isNext) => {
|
||||
let half = (props.virtualTotal + 1) / 2
|
||||
if (props.list.length > props.virtualTotal) {
|
||||
if (isNext) {
|
||||
if (
|
||||
state.localIndex > props.list.length - props.virtualTotal &&
|
||||
state.localIndex >= half
|
||||
) {
|
||||
emit('loadMore')
|
||||
}
|
||||
})
|
||||
}
|
||||
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}]`,
|
||||
)
|
||||
let replaceItem = getInsEl(item, state.localIndex, true)
|
||||
$(replaceItem).css('top', currentItem.css('top'))
|
||||
currentItem.replaceWith(replaceItem)
|
||||
}
|
||||
|
||||
defineExpose({ dislike })
|
||||
|
||||
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')
|
||||
//TODO 打包到线上时用这个，这个在开发时任何修改都会刷新页面
|
||||
if (import.meta.env.PROD) {
|
||||
parent.classList.add('slide-item')
|
||||
parent.setAttribute('data-index', index)
|
||||
render(slideVNode, parent)
|
||||
appInsMap.set(index, {
|
||||
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) {
|
||||
slideTouchStart(e, wrapperEl.value, state)
|
||||
}
|
||||
|
||||
//TODO 2022-3-28:在最顶部，反复滑动会抖动一下，初步猜测是因为方向变了，导致的加判断距离变成了减
|
||||
function touchMove(e) {
|
||||
slideTouchMove(
|
||||
e,
|
||||
wrapperEl.value,
|
||||
state,
|
||||
baseStore.judgeValue,
|
||||
canNext,
|
||||
null,
|
||||
SlideType.VERTICAL,
|
||||
)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
let isNext = state.move.y < 0
|
||||
if (
|
||||
state.localIndex === 0 &&
|
||||
!isNext &&
|
||||
state.move.y > baseStore.homeRefresh + baseStore.judgeValue
|
||||
) {
|
||||
emit('refresh')
|
||||
}
|
||||
slideTouchEnd(
|
||||
e,
|
||||
state,
|
||||
canNext,
|
||||
(isNext) => {
|
||||
let half = (props.virtualTotal + 1) / 2
|
||||
if (props.list.length > props.virtualTotal) {
|
||||
if (isNext) {
|
||||
if (
|
||||
state.localIndex > props.list.length - props.virtualTotal &&
|
||||
state.localIndex >= half
|
||||
) {
|
||||
emit('loadMore')
|
||||
let addItemIndex = state.localIndex + 2
|
||||
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))
|
||||
}
|
||||
let addItemIndex = state.localIndex + 2
|
||||
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),
|
||||
)
|
||||
}
|
||||
}
|
||||
if (
|
||||
state.wrapper.childrenLength === props.virtualTotal &&
|
||||
state.localIndex >= (props.virtualTotal + 1) / 2 &&
|
||||
state.localIndex <= props.list.length - 3
|
||||
) {
|
||||
if (res.length === 0) {
|
||||
wrapperEl.value.appendChild(
|
||||
getInsEl(props.list[addItemIndex], addItemIndex),
|
||||
)
|
||||
appInsMap
|
||||
.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,
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
if (state.wrapper.childrenLength > props.virtualTotal) {
|
||||
}
|
||||
if (
|
||||
state.wrapper.childrenLength === props.virtualTotal &&
|
||||
state.localIndex >= (props.virtualTotal + 1) / 2 &&
|
||||
state.localIndex <= props.list.length - 3
|
||||
) {
|
||||
if (res.length === 0) {
|
||||
wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
|
||||
appInsMap
|
||||
.get($(wrapperEl.value).find(`.${itemClassName}:first`).data('index'))
|
||||
.unmount()
|
||||
// $(wrapperEl.value).find(".base-slide-item:first").remove()
|
||||
$(wrapperEl.value)
|
||||
.find(`.${itemClassName}`)
|
||||
.each(function () {
|
||||
let index = $(this).data('index')
|
||||
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}]`,
|
||||
)
|
||||
}
|
||||
if (state.wrapper.childrenLength > props.virtualTotal) {
|
||||
$(wrapperEl.value)
|
||||
.find(`.${itemClassName}`)
|
||||
.each(function () {
|
||||
let index = $(this).data('index')
|
||||
if (index < state.localIndex - 2) {
|
||||
appInsMap.get(index).unmount()
|
||||
}
|
||||
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
let addItemIndex = state.localIndex - 2
|
||||
let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
|
||||
|
||||
if (
|
||||
state.localIndex > 1 &&
|
||||
state.localIndex <= props.list.length - 4
|
||||
) {
|
||||
if (res.length === 0) {
|
||||
wrapperEl.value.prepend(
|
||||
getInsEl(props.list[addItemIndex], addItemIndex),
|
||||
)
|
||||
appInsMap
|
||||
.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,
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (state.wrapper.childrenLength > props.virtualTotal) {
|
||||
if (state.localIndex > 1 && state.localIndex <= props.list.length - 4) {
|
||||
if (res.length === 0) {
|
||||
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)
|
||||
})
|
||||
}
|
||||
}
|
||||
state.wrapper.childrenLength = wrapperEl.value.children.length
|
||||
}
|
||||
},
|
||||
null,
|
||||
SlideType.VERTICAL,
|
||||
)
|
||||
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
|
||||
}
|
||||
|
||||
function canNext(isNext) {
|
||||
return !(
|
||||
(state.localIndex === 0 && !isNext) ||
|
||||
(state.localIndex === props.list.length - 1 && isNext)
|
||||
)
|
||||
}
|
||||
if (state.wrapper.childrenLength > props.virtualTotal) {
|
||||
appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount()
|
||||
}
|
||||
}
|
||||
state.wrapper.childrenLength = wrapperEl.value.children.length
|
||||
}
|
||||
},
|
||||
null,
|
||||
SlideType.VERTICAL
|
||||
)
|
||||
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
|
||||
}
|
||||
|
||||
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),
|
||||
list: v.slice(page.offset, page.limit)
|
||||
},
|
||||
code: 200,
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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,301 +103,300 @@
|
||||
</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 {
|
||||
name: 'Music',
|
||||
components: {
|
||||
Scroll,
|
||||
Posters,
|
||||
Loading,
|
||||
Share,
|
||||
DouyinCode,
|
||||
ConfirmDialog,
|
||||
ShareToFriend,
|
||||
export default {
|
||||
name: 'Music',
|
||||
components: {
|
||||
Scroll,
|
||||
Posters,
|
||||
Loading,
|
||||
Share,
|
||||
DouyinCode,
|
||||
ConfirmDialog,
|
||||
ShareToFriend
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
isFixed: false,
|
||||
isCollect: false,
|
||||
isPlay: false,
|
||||
isSharing: false,
|
||||
okText: '',
|
||||
|
||||
showSharePassword: false,
|
||||
shareToFriend: false,
|
||||
shareType: -1,
|
||||
|
||||
showDouyinCode: false,
|
||||
audio: new Audio(),
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
pageSize: 15,
|
||||
videos: [],
|
||||
|
||||
music: {
|
||||
name: '发如雪',
|
||||
mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
shareType(newVal, oldVal) {
|
||||
if (newVal === -1) return
|
||||
this.showSharePassword = true
|
||||
switch (newVal) {
|
||||
case 2:
|
||||
case 3:
|
||||
return (this.okText = '去微信粘贴')
|
||||
case 4:
|
||||
case 5:
|
||||
return (this.okText = '去QQ粘贴')
|
||||
case 8:
|
||||
return (this.okText = '去微博粘贴')
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.name) {
|
||||
this.music = this.$route.query
|
||||
}
|
||||
this.loadData(true)
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
toggleCollect() {
|
||||
this.isCollect = !this.isCollect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
isFixed: false,
|
||||
isCollect: false,
|
||||
isPlay: false,
|
||||
isSharing: false,
|
||||
okText: '',
|
||||
|
||||
showSharePassword: false,
|
||||
shareToFriend: false,
|
||||
shareType: -1,
|
||||
|
||||
showDouyinCode: false,
|
||||
audio: new Audio(),
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
pageSize: 15,
|
||||
videos: [],
|
||||
|
||||
music: {
|
||||
name: '发如雪',
|
||||
mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
|
||||
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,
|
||||
},
|
||||
async loadData(init = false) {
|
||||
if (this.loading) return
|
||||
if (!init) {
|
||||
if (this.total <= this.videos.length) {
|
||||
return this.$notice('暂时没有更多了')
|
||||
}
|
||||
this.pageNo++
|
||||
}
|
||||
this.loading = true
|
||||
let res = await myVideo({
|
||||
pageNo: this.pageNo,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
this.loading = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.videos = this.videos.concat(res.data.list)
|
||||
this.total = res.data.total
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
shareType(newVal, oldVal) {
|
||||
if (newVal === -1) return
|
||||
this.showSharePassword = true
|
||||
switch (newVal) {
|
||||
case 2:
|
||||
case 3:
|
||||
return (this.okText = '去微信粘贴')
|
||||
case 4:
|
||||
case 5:
|
||||
return (this.okText = '去QQ粘贴')
|
||||
case 8:
|
||||
return (this.okText = '去微博粘贴')
|
||||
togglePlay() {
|
||||
this.isPlay = !this.isPlay
|
||||
if (this.isPlay) {
|
||||
if (!this.audio.src) {
|
||||
this.audio.src = this.music.mp3
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.name) {
|
||||
this.music = this.$route.query
|
||||
this.audio.play()
|
||||
this.audio.addEventListener('ended', () => (this.isPlay = false))
|
||||
} else {
|
||||
this.stopPlay()
|
||||
}
|
||||
this.loadData(true)
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
toggleCollect() {
|
||||
this.isCollect = !this.isCollect
|
||||
},
|
||||
async loadData(init = false) {
|
||||
if (this.loading) return
|
||||
if (!init) {
|
||||
if (this.total <= this.videos.length) {
|
||||
return this.$notice('暂时没有更多了')
|
||||
}
|
||||
this.pageNo++
|
||||
}
|
||||
this.loading = true
|
||||
let res = await myVideo({
|
||||
pageNo: this.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
})
|
||||
this.loading = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.videos = this.videos.concat(res.data.list)
|
||||
this.total = res.data.total
|
||||
}
|
||||
},
|
||||
togglePlay() {
|
||||
this.isPlay = !this.isPlay
|
||||
if (this.isPlay) {
|
||||
if (!this.audio.src) {
|
||||
this.audio.src = this.music.mp3
|
||||
}
|
||||
this.audio.play()
|
||||
this.audio.addEventListener('ended', () => (this.isPlay = false))
|
||||
} else {
|
||||
this.stopPlay()
|
||||
}
|
||||
},
|
||||
delayShowDialog(cb) {
|
||||
setTimeout(() => {
|
||||
cb()
|
||||
}, 100)
|
||||
},
|
||||
stopPlay() {
|
||||
this.audio.pause()
|
||||
this.audio.removeEventListener('ended', null)
|
||||
},
|
||||
},
|
||||
unmounted() {
|
||||
this.stopPlay()
|
||||
},
|
||||
deactivated() {
|
||||
this.stopPlay()
|
||||
delayShowDialog(cb) {
|
||||
setTimeout(() => {
|
||||
cb()
|
||||
}, 100)
|
||||
},
|
||||
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;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
background: var(--main-bg);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15rem;
|
||||
height: 60rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
top: 0;
|
||||
background: var(--main-bg);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15rem;
|
||||
height: 60rem;
|
||||
.center {
|
||||
font-size: 13rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.center {
|
||||
font-size: 13rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo {
|
||||
background: linear-gradient(to bottom, #794cff 5%, #4c3efe 50%);
|
||||
//padding: .2rem 1rem;
|
||||
width: 80rem;
|
||||
height: 20rem;
|
||||
border-radius: 10rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 24rem;
|
||||
height: 24rem;
|
||||
margin-left: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
|
||||
.Scroll {
|
||||
height: calc(var(--vh, 1vh) * 100 - 60rem);
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding: 10rem 15rem 30rem 15rem;
|
||||
display: flex;
|
||||
height: 120rem;
|
||||
|
||||
.cover-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.play {
|
||||
width: 40rem;
|
||||
height: 40rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 120rem;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 15rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: 18rem;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.user,
|
||||
.peoples {
|
||||
font-size: 12rem;
|
||||
margin-bottom: 5rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.collection {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 25rem;
|
||||
width: 70rem;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
background: var(--second-btn-color);
|
||||
border-radius: 2rem;
|
||||
font-size: 13rem;
|
||||
|
||||
img {
|
||||
margin-right: 5rem;
|
||||
width: 13rem;
|
||||
height: 13rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
font-size: 14rem;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
bottom: 20rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
.logo {
|
||||
background: linear-gradient(to bottom, #794cff 5%, #4c3efe 50%);
|
||||
//padding: .2rem 1rem;
|
||||
width: 80rem;
|
||||
height: 20rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
|
||||
.l-button {
|
||||
margin-left: 5rem;
|
||||
margin-right: 5rem;
|
||||
width: 140rem;
|
||||
border-radius: 50rem;
|
||||
border-radius: 10rem;
|
||||
display: flex;
|
||||
padding: 15rem 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10rem;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.primary {
|
||||
background: var(--primary-btn-color);
|
||||
color: white;
|
||||
img {
|
||||
width: 24rem;
|
||||
height: 24rem;
|
||||
margin-left: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
|
||||
.Scroll {
|
||||
height: calc(var(--vh, 1vh) * 100 - 60rem);
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding: 10rem 15rem 30rem 15rem;
|
||||
display: flex;
|
||||
height: 120rem;
|
||||
|
||||
.cover-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.play {
|
||||
width: 40rem;
|
||||
height: 40rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 120rem;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 15rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: 18rem;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.user,
|
||||
.peoples {
|
||||
font-size: 12rem;
|
||||
margin-bottom: 5rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.collection {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 25rem;
|
||||
width: 70rem;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
background: var(--second-btn-color);
|
||||
border-radius: 2rem;
|
||||
font-size: 13rem;
|
||||
|
||||
img {
|
||||
margin-right: 5rem;
|
||||
width: 13rem;
|
||||
height: 13rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
font-size: 14rem;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
bottom: 20rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
|
||||
.l-button {
|
||||
margin-left: 5rem;
|
||||
margin-right: 5rem;
|
||||
width: 140rem;
|
||||
border-radius: 50rem;
|
||||
display: flex;
|
||||
padding: 15rem 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.primary {
|
||||
background: var(--primary-btn-color);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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,141 +49,141 @@
|
||||
</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) {
|
||||
if (navigator.mediaDevices.getUserMedia) {
|
||||
//最新标准API
|
||||
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error)
|
||||
} else if (navigator.webkitGetUserMedia) {
|
||||
//webkit内核浏览器
|
||||
navigator.webkitGetUserMedia(constrains).then(success).catch(error)
|
||||
} else if (navigator.mozGetUserMedia) {
|
||||
//Firefox浏览器
|
||||
navagator.mozGetUserMedia(constrains).then(success).catch(error)
|
||||
} else if (navigator.getUserMedia) {
|
||||
//旧版API
|
||||
navigator.getUserMedia(constrains).then(success).catch(error)
|
||||
//访问用户媒体设备的兼容方法
|
||||
function getUserMedia(constrains, success, error) {
|
||||
if (navigator.mediaDevices.getUserMedia) {
|
||||
//最新标准API
|
||||
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error)
|
||||
} else if (navigator.webkitGetUserMedia) {
|
||||
//webkit内核浏览器
|
||||
navigator.webkitGetUserMedia(constrains).then(success).catch(error)
|
||||
} else if (navigator.mozGetUserMedia) {
|
||||
//Firefox浏览器
|
||||
navagator.mozGetUserMedia(constrains).then(success).catch(error)
|
||||
} else if (navigator.getUserMedia) {
|
||||
//旧版API
|
||||
navigator.getUserMedia(constrains).then(success).catch(error)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Publish',
|
||||
data() {
|
||||
return {
|
||||
video: null,
|
||||
activeIndex: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['bodyHeight', 'bodyWidth'])
|
||||
},
|
||||
mounted() {
|
||||
//获得video摄像头区域
|
||||
this.video = document.getElementById('video')
|
||||
this.getMedia()
|
||||
},
|
||||
methods: {
|
||||
getMedia() {
|
||||
// let constraints = {video: {width: this.bodyWidth, height: this.bodyHeight - 60}, audio: false};
|
||||
// let constraints = {video:{width:480,height:320}, audio: false};
|
||||
let constraints = { video: true, audio: false }
|
||||
try {
|
||||
getUserMedia(
|
||||
constraints,
|
||||
(MediaStream) => {
|
||||
this.video.srcObject = MediaStream
|
||||
this.video.play()
|
||||
},
|
||||
function (PermissionDeniedError) {
|
||||
console.log(PermissionDeniedError)
|
||||
}
|
||||
)
|
||||
} catch (e) {
|
||||
console.log('e', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Publish',
|
||||
data() {
|
||||
return {
|
||||
video: null,
|
||||
activeIndex: 1,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['bodyHeight', 'bodyWidth']),
|
||||
},
|
||||
mounted() {
|
||||
//获得video摄像头区域
|
||||
this.video = document.getElementById('video')
|
||||
this.getMedia()
|
||||
},
|
||||
methods: {
|
||||
getMedia() {
|
||||
// let constraints = {video: {width: this.bodyWidth, height: this.bodyHeight - 60}, audio: false};
|
||||
// let constraints = {video:{width:480,height:320}, audio: false};
|
||||
let constraints = { video: true, audio: false }
|
||||
try {
|
||||
getUserMedia(
|
||||
constraints,
|
||||
(MediaStream) => {
|
||||
this.video.srcObject = MediaStream
|
||||
this.video.play()
|
||||
},
|
||||
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;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
background: black;
|
||||
|
||||
.footer {
|
||||
font-size: 15rem;
|
||||
font-weight: bold;
|
||||
color: var(--second-text-color);
|
||||
|
||||
.base-slide-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.float {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
background: black;
|
||||
height: calc(100% - 60px);
|
||||
|
||||
.footer {
|
||||
font-size: 15rem;
|
||||
font-weight: bold;
|
||||
color: var(--second-text-color);
|
||||
.close {
|
||||
font-size: 28rem;
|
||||
position: absolute;
|
||||
left: 20rem;
|
||||
top: 20rem;
|
||||
}
|
||||
|
||||
.base-slide-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.choose-music {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 20rem;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 20rem;
|
||||
background: #333333;
|
||||
padding: 5rem 15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14rem;
|
||||
|
||||
.active {
|
||||
color: white;
|
||||
svg {
|
||||
font-size: 30rem;
|
||||
margin-right: 5rem;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.float {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: calc(100% - 60px);
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: 20rem;
|
||||
right: 10rem;
|
||||
|
||||
.close {
|
||||
font-size: 28rem;
|
||||
position: absolute;
|
||||
left: 20rem;
|
||||
top: 20rem;
|
||||
}
|
||||
|
||||
.choose-music {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 20rem;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 20rem;
|
||||
background: #333333;
|
||||
padding: 5rem 15rem;
|
||||
.tool {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 14rem;
|
||||
|
||||
svg {
|
||||
font-size: 30rem;
|
||||
margin-right: 5rem;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: 20rem;
|
||||
right: 10rem;
|
||||
|
||||
.tool {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20rem;
|
||||
font-size: 26rem;
|
||||
}
|
||||
margin-bottom: 20rem;
|
||||
font-size: 26rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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,56 +114,56 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Report',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
mode: 'video',
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.mode = this.$route.query.mode
|
||||
},
|
||||
activated() {},
|
||||
methods: {},
|
||||
}
|
||||
export default {
|
||||
name: 'Report',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
mode: 'video'
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.mode = this.$route.query.mode
|
||||
},
|
||||
activated() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.Report {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
.Report {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
|
||||
.title {
|
||||
font-size: 12rem;
|
||||
padding: 10rem 15rem;
|
||||
color: var(--second-text-color);
|
||||
.title {
|
||||
font-size: 12rem;
|
||||
padding: 10rem 15rem;
|
||||
color: var(--second-text-color);
|
||||
|
||||
img {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
img {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: calc(100% - 30rem);
|
||||
margin-left: 15rem;
|
||||
background: var(--line-color);
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: calc(100% - 30rem);
|
||||
margin-left: 15rem;
|
||||
background: var(--line-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -53,155 +53,152 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Report',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
type: '色情低俗',
|
||||
mode: 'video',
|
||||
desc: '',
|
||||
photos: [],
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.type = this.$route.query.type
|
||||
this.mode = this.$route.query.mode
|
||||
},
|
||||
methods: {
|
||||
async upload() {
|
||||
this.$showLoading()
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
this.photos.push(
|
||||
new URL(
|
||||
`../../assets/img/poster/${this.photos.length}.jpg`,
|
||||
import.meta.url,
|
||||
).href,
|
||||
)
|
||||
},
|
||||
},
|
||||
export default {
|
||||
name: 'Report',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
type: '色情低俗',
|
||||
mode: 'video',
|
||||
desc: '',
|
||||
photos: []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.type = this.$route.query.type
|
||||
this.mode = this.$route.query.mode
|
||||
},
|
||||
methods: {
|
||||
async upload() {
|
||||
this.$showLoading()
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
this.photos.push(
|
||||
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 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
.Report {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
|
||||
.title {
|
||||
font-size: 12rem;
|
||||
padding: 10rem 15rem;
|
||||
.title {
|
||||
font-size: 12rem;
|
||||
padding: 10rem 15rem;
|
||||
color: var(--second-text-color);
|
||||
border-bottom: 1px solid #cccccc11;
|
||||
|
||||
img {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.l-row {
|
||||
padding: 0 15rem;
|
||||
|
||||
.textarea-ctn {
|
||||
width: 100%;
|
||||
background: var(--active-main-bg);
|
||||
padding: 15rem;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10rem;
|
||||
border-radius: 2px;
|
||||
|
||||
textarea {
|
||||
font-family: 'Microsoft YaHei UI';
|
||||
outline: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: white;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-num {
|
||||
margin-top: 5rem;
|
||||
font-size: 10rem;
|
||||
color: var(--second-text-color);
|
||||
border-bottom: 1px solid #cccccc11;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
.upload-photo {
|
||||
margin-top: 5rem;
|
||||
display: flex;
|
||||
padding: 0 15rem;
|
||||
|
||||
@width: calc((100vw - 3vw - 30rem) / 4);
|
||||
|
||||
.photo-wrapper {
|
||||
width: @width;
|
||||
height: @width;
|
||||
position: relative;
|
||||
margin-right: 1vw;
|
||||
|
||||
.photo {
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: var(--second-btn-color);
|
||||
padding: 3rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.l-row {
|
||||
padding: 0 15rem;
|
||||
|
||||
.textarea-ctn {
|
||||
width: 100%;
|
||||
background: var(--active-main-bg);
|
||||
padding: 15rem;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10rem;
|
||||
border-radius: 2px;
|
||||
|
||||
textarea {
|
||||
font-family: 'Microsoft YaHei UI';
|
||||
outline: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: white;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-num {
|
||||
margin-top: 5rem;
|
||||
font-size: 10rem;
|
||||
color: var(--second-text-color);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-photo {
|
||||
margin-top: 5rem;
|
||||
.upload {
|
||||
width: @width;
|
||||
height: @width;
|
||||
display: flex;
|
||||
padding: 0 15rem;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: var(--second-text-color);
|
||||
font-size: 12rem;
|
||||
align-items: center;
|
||||
background: var(--second-btn-color-tran);
|
||||
|
||||
@width: calc((100vw - 3vw - 30rem) / 4);
|
||||
|
||||
.photo-wrapper {
|
||||
width: @width;
|
||||
height: @width;
|
||||
position: relative;
|
||||
margin-right: 1vw;
|
||||
|
||||
.photo {
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: var(--second-btn-color);
|
||||
padding: 3rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.upload {
|
||||
width: @width;
|
||||
height: @width;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: var(--second-text-color);
|
||||
font-size: 12rem;
|
||||
align-items: center;
|
||||
background: var(--second-btn-color-tran);
|
||||
|
||||
img {
|
||||
width: 35rem;
|
||||
height: 35rem;
|
||||
}
|
||||
img {
|
||||
width: 35rem;
|
||||
height: 35rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
position: absolute;
|
||||
left: 15rem;
|
||||
right: 15rem;
|
||||
bottom: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
position: absolute;
|
||||
left: 15rem;
|
||||
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,137 +77,137 @@
|
||||
</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 {
|
||||
name: 'FollowSetting',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Switches,
|
||||
},
|
||||
props: {
|
||||
currentItem: {
|
||||
type: Object,
|
||||
default: {
|
||||
user: DefaultUser,
|
||||
isRequest: false,
|
||||
post: [],
|
||||
},
|
||||
},
|
||||
modelValue: false,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
switches1: false,
|
||||
switches2: false,
|
||||
export default {
|
||||
name: 'FollowSetting',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Switches
|
||||
},
|
||||
props: {
|
||||
currentItem: {
|
||||
type: Object,
|
||||
default: {
|
||||
user: DefaultUser,
|
||||
isRequest: false,
|
||||
post: []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
_getUserDouyinId,
|
||||
cancel(cb) {
|
||||
this.$emit('update:modelValue', false)
|
||||
cb && cb()
|
||||
},
|
||||
},
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
switches1: false,
|
||||
switches2: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
_getUserDouyinId,
|
||||
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 {
|
||||
padding: 15rem;
|
||||
.follow-setting-dialog {
|
||||
padding: 15rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.dialog-header {
|
||||
color: rgb(81, 81, 89);
|
||||
font-size: 14rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
.dialog-header {
|
||||
color: rgb(81, 81, 89);
|
||||
font-size: 14rem;
|
||||
position: relative;
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.title {
|
||||
font-size: 18rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18rem;
|
||||
}
|
||||
.subtitle {
|
||||
margin-top: 5rem;
|
||||
color: var(--second-text-color);
|
||||
font-size: 13rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 5rem;
|
||||
color: var(--second-text-color);
|
||||
font-size: 13rem;
|
||||
}
|
||||
img {
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
padding: 6rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(187, 187, 194, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
margin-top: 20rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.option {
|
||||
box-sizing: border-box;
|
||||
padding: 10rem;
|
||||
display: flex;
|
||||
background: white;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 23%;
|
||||
font-size: 12rem;
|
||||
border-radius: 8rem;
|
||||
|
||||
img {
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
padding: 6rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(187, 187, 194, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
margin-top: 20rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.option {
|
||||
box-sizing: border-box;
|
||||
padding: 10rem;
|
||||
display: flex;
|
||||
background: white;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 23%;
|
||||
font-size: 12rem;
|
||||
border-radius: 8rem;
|
||||
|
||||
img {
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 10rem;
|
||||
@width: 20rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-rows {
|
||||
margin-top: 20rem;
|
||||
|
||||
.l-row {
|
||||
height: 45rem;
|
||||
padding: 0 20rem;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(222, 222, 222, 0.42);
|
||||
|
||||
&:first-child {
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
border-radius: 0 0 10rem 10rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
}
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 10rem;
|
||||
@width: 20rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-rows {
|
||||
margin-top: 20rem;
|
||||
|
||||
.l-row {
|
||||
height: 45rem;
|
||||
padding: 0 20rem;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(222, 222, 222, 0.42);
|
||||
|
||||
&:first-child {
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
border-radius: 0 0 10rem 10rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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,137 +41,137 @@
|
||||
</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 {
|
||||
name: 'FollowSetting',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Switches,
|
||||
},
|
||||
props: {
|
||||
currentItem: {
|
||||
type: Object,
|
||||
default: {
|
||||
user: DefaultUser,
|
||||
isRequest: false,
|
||||
post: [],
|
||||
},
|
||||
},
|
||||
modelValue: false,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
switches1: false,
|
||||
switches2: false,
|
||||
export default {
|
||||
name: 'FollowSetting',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Switches
|
||||
},
|
||||
props: {
|
||||
currentItem: {
|
||||
type: Object,
|
||||
default: {
|
||||
user: DefaultUser,
|
||||
isRequest: false,
|
||||
post: []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
_getUserDouyinId,
|
||||
cancel(cb) {
|
||||
this.$emit('update:modelValue', false)
|
||||
cb && cb()
|
||||
},
|
||||
},
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
switches1: false,
|
||||
switches2: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
_getUserDouyinId,
|
||||
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 {
|
||||
padding: 15rem;
|
||||
.follow-setting-dialog {
|
||||
padding: 15rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.dialog-header {
|
||||
color: rgb(81, 81, 89);
|
||||
font-size: 14rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
.dialog-header {
|
||||
color: rgb(81, 81, 89);
|
||||
font-size: 14rem;
|
||||
position: relative;
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.title {
|
||||
font-size: 18rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18rem;
|
||||
}
|
||||
.subtitle {
|
||||
margin-top: 5rem;
|
||||
color: var(--second-text-color);
|
||||
font-size: 13rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 5rem;
|
||||
color: var(--second-text-color);
|
||||
font-size: 13rem;
|
||||
}
|
||||
img {
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
padding: 6rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(187, 187, 194, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
margin-top: 20rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.option {
|
||||
box-sizing: border-box;
|
||||
padding: 10rem;
|
||||
display: flex;
|
||||
background: white;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 23%;
|
||||
font-size: 12rem;
|
||||
border-radius: 8rem;
|
||||
|
||||
img {
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
padding: 6rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(187, 187, 194, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
margin-top: 20rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.option {
|
||||
box-sizing: border-box;
|
||||
padding: 10rem;
|
||||
display: flex;
|
||||
background: white;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 23%;
|
||||
font-size: 12rem;
|
||||
border-radius: 8rem;
|
||||
|
||||
img {
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 10rem;
|
||||
@width: 20rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-rows {
|
||||
margin-top: 20rem;
|
||||
|
||||
.l-row {
|
||||
height: 45rem;
|
||||
padding: 0 20rem;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(222, 222, 222, 0.42);
|
||||
|
||||
&:nth-child(1) {
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
border-bottom: none;
|
||||
border-radius: 0 0 10rem 10rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
}
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 10rem;
|
||||
@width: 20rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-rows {
|
||||
margin-top: 20rem;
|
||||
|
||||
.l-row {
|
||||
height: 45rem;
|
||||
padding: 0 20rem;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(222, 222, 222, 0.42);
|
||||
|
||||
&:nth-child(1) {
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
border-bottom: none;
|
||||
border-radius: 0 0 10rem 10rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,409 +21,358 @@
|
||||
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 {
|
||||
name: 'IndicatorHome',
|
||||
components: {
|
||||
Loading,
|
||||
export default {
|
||||
name: 'IndicatorHome',
|
||||
components: {
|
||||
Loading
|
||||
},
|
||||
props: {
|
||||
loading: false,
|
||||
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
|
||||
name: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
props: {
|
||||
loading: false,
|
||||
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
|
||||
name: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
isLight: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
setup() {
|
||||
const baseStore = useBaseStore()
|
||||
return { baseStore }
|
||||
isLight: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const baseStore = useBaseStore()
|
||||
return { baseStore }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorRef: null,
|
||||
lefts: [],
|
||||
indicatorSpace: 0,
|
||||
open: false,
|
||||
type: 1,
|
||||
moveY: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['judgeValue', 'homeRefresh']),
|
||||
tabOneClass() {
|
||||
return { active: this.index === 0, open: this.open }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorRef: null,
|
||||
lefts: [],
|
||||
indicatorSpace: 0,
|
||||
open: false,
|
||||
type: 1,
|
||||
moveY: 0,
|
||||
}
|
||||
transform() {
|
||||
return `translate3d(0, ${this.moveY - this.judgeValue > this.homeRefresh ? this.homeRefresh : this.moveY - this.judgeValue}px, 0)`
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['judgeValue', 'homeRefresh']),
|
||||
tabOneClass() {
|
||||
return { active: this.index === 0, open: this.open }
|
||||
},
|
||||
transform() {
|
||||
return `translate3d(0, ${this.moveY - this.judgeValue > this.homeRefresh ? this.homeRefresh : this.moveY - this.judgeValue}px, 0)`
|
||||
},
|
||||
toolbarStyle() {
|
||||
if (this.loading) {
|
||||
return {
|
||||
opacity: 1,
|
||||
'transition-duration': '300ms',
|
||||
transform: `translate3d(0, 0, 0)`,
|
||||
}
|
||||
}
|
||||
if (this.moveY) {
|
||||
return {
|
||||
opacity:
|
||||
1 - (this.moveY - this.judgeValue) / (this.homeRefresh / 2),
|
||||
transform: this.transform,
|
||||
}
|
||||
}
|
||||
toolbarStyle() {
|
||||
if (this.loading) {
|
||||
return {
|
||||
opacity: 1,
|
||||
'transition-duration': '300ms',
|
||||
transform: `translate3d(0, 0, 0)`,
|
||||
transform: `translate3d(0, 0, 0)`
|
||||
}
|
||||
},
|
||||
noticeStyle() {
|
||||
if (this.loading) {
|
||||
return { opacity: 0 }
|
||||
}
|
||||
if (this.moveY) {
|
||||
return {
|
||||
opacity:
|
||||
(this.moveY - this.judgeValue) / (this.homeRefresh / 2) - 0.5,
|
||||
transform: this.transform,
|
||||
}
|
||||
}
|
||||
if (this.moveY) {
|
||||
return {
|
||||
opacity: 1 - (this.moveY - this.judgeValue) / (this.homeRefresh / 2),
|
||||
transform: this.transform
|
||||
}
|
||||
}
|
||||
return {
|
||||
opacity: 1,
|
||||
'transition-duration': '300ms',
|
||||
transform: `translate3d(0, 0, 0)`
|
||||
}
|
||||
},
|
||||
noticeStyle() {
|
||||
if (this.loading) {
|
||||
return { opacity: 0 }
|
||||
},
|
||||
loadingStyle() {
|
||||
if (this.loading) {
|
||||
return { opacity: 1, 'transition-duration': '300ms' }
|
||||
}
|
||||
if (this.moveY) {
|
||||
return {
|
||||
opacity: (this.moveY - this.judgeValue) / (this.homeRefresh / 2) - 0.5,
|
||||
transform: this.transform
|
||||
}
|
||||
if (this.moveY) {
|
||||
return {
|
||||
opacity:
|
||||
(this.moveY - this.judgeValue) / (this.homeRefresh / 2) - 0.5,
|
||||
transform: this.transform,
|
||||
}
|
||||
}
|
||||
return { opacity: 0 }
|
||||
},
|
||||
loadingStyle() {
|
||||
if (this.loading) {
|
||||
return { opacity: 1, 'transition-duration': '300ms' }
|
||||
}
|
||||
if (this.moveY) {
|
||||
return {
|
||||
opacity: (this.moveY - this.judgeValue) / (this.homeRefresh / 2) - 0.5,
|
||||
transform: this.transform
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.initTabs()
|
||||
bus.on(this.name + '-moveX', this.move)
|
||||
bus.on(this.name + '-moveY', (e) => {
|
||||
this.moveY = e
|
||||
})
|
||||
bus.on(this.name + '-end', this.end)
|
||||
},
|
||||
unmounted() {
|
||||
bus.off(this.name + '-moveX', this.move)
|
||||
bus.off(this.name + '-moveY')
|
||||
bus.off(this.name + '-end', this.end)
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.initTabs()
|
||||
bus.on(this.name + '-moveX', this.move)
|
||||
bus.on(this.name + '-moveY', (e) => {
|
||||
this.moveY = e
|
||||
})
|
||||
bus.on(this.name + '-end', this.end)
|
||||
},
|
||||
unmounted() {
|
||||
bus.off(this.name + '-moveX', this.move)
|
||||
bus.off(this.name + '-moveY')
|
||||
bus.off(this.name + '-end', this.end)
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleType(type) {
|
||||
if (type !== this.type) {
|
||||
this.type = type
|
||||
this.open = false
|
||||
}
|
||||
},
|
||||
change(index) {
|
||||
if (this.index === 0 && index === 0) {
|
||||
this.open = !this.open
|
||||
} else {
|
||||
this.open = false
|
||||
}
|
||||
this.$emit('update:index', index)
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(this.indicatorRef, 'left', this.lefts[index] + 'px')
|
||||
},
|
||||
initTabs() {
|
||||
let tabs = this.$refs.tabs
|
||||
this.indicatorRef = this.$refs.indicator
|
||||
let indicatorWidth = this.$getCss(this.indicatorRef, 'width')
|
||||
for (let i = 0; i < tabs.children.length; i++) {
|
||||
let item = tabs.children[i]
|
||||
let tabWidth = this.$getCss(item, 'width')
|
||||
this.lefts.push(
|
||||
item.getBoundingClientRect().x -
|
||||
tabs.children[0].getBoundingClientRect().x +
|
||||
(tabWidth * 0.5 - indicatorWidth / 2),
|
||||
)
|
||||
}
|
||||
this.indicatorSpace = this.lefts[1] - this.lefts[0]
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(this.indicatorRef, 'left', this.lefts[this.index] + 'px')
|
||||
},
|
||||
move(e) {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.lefts[this.index] -
|
||||
e / (this.baseStore.bodyWidth / this.indicatorSpace) +
|
||||
'px',
|
||||
)
|
||||
},
|
||||
end(index) {
|
||||
this.moveY = 0
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(this.indicatorRef, 'left', this.lefts[index] + 'px')
|
||||
setTimeout(() => {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
}, 300)
|
||||
},
|
||||
methods: {
|
||||
toggleType(type) {
|
||||
if (type !== this.type) {
|
||||
this.type = type
|
||||
this.open = false
|
||||
}
|
||||
},
|
||||
change(index) {
|
||||
if (this.index === 0 && index === 0) {
|
||||
this.open = !this.open
|
||||
} else {
|
||||
this.open = false
|
||||
}
|
||||
this.$emit('update:index', index)
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(this.indicatorRef, 'left', this.lefts[index] + 'px')
|
||||
},
|
||||
initTabs() {
|
||||
let tabs = this.$refs.tabs
|
||||
this.indicatorRef = this.$refs.indicator
|
||||
let indicatorWidth = this.$getCss(this.indicatorRef, 'width')
|
||||
for (let i = 0; i < tabs.children.length; i++) {
|
||||
let item = tabs.children[i]
|
||||
let tabWidth = this.$getCss(item, 'width')
|
||||
this.lefts.push(
|
||||
item.getBoundingClientRect().x -
|
||||
tabs.children[0].getBoundingClientRect().x +
|
||||
(tabWidth * 0.5 - indicatorWidth / 2)
|
||||
)
|
||||
}
|
||||
this.indicatorSpace = this.lefts[1] - this.lefts[0]
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(this.indicatorRef, 'left', this.lefts[this.index] + 'px')
|
||||
},
|
||||
move(e) {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.$setCss(
|
||||
this.indicatorRef,
|
||||
'left',
|
||||
this.lefts[this.index] - e / (this.baseStore.bodyWidth / this.indicatorSpace) + 'px'
|
||||
)
|
||||
},
|
||||
end(index) {
|
||||
this.moveY = 0
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(this.indicatorRef, 'left', this.lefts[index] + 'px')
|
||||
setTimeout(() => {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.indicator-home {
|
||||
position: absolute;
|
||||
font-size: 16rem;
|
||||
.indicator-home {
|
||||
position: absolute;
|
||||
font-size: 16rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
color: white;
|
||||
height: var(--home-header-height);
|
||||
transition: all 0.3s;
|
||||
font-weight: bold;
|
||||
|
||||
.notice {
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading {
|
||||
opacity: 0;
|
||||
top: 7rem;
|
||||
right: 7rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
color: white;
|
||||
height: var(--home-header-height);
|
||||
transition: all 0.3s;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.notice {
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading {
|
||||
opacity: 0;
|
||||
top: 7rem;
|
||||
right: 7rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
z-index: 2;
|
||||
.tab-ctn {
|
||||
width: 80%;
|
||||
position: relative;
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.tab-ctn {
|
||||
width: 80%;
|
||||
position: relative;
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.tab {
|
||||
transition: color 0.3s;
|
||||
color: rgba(white, 0.7);
|
||||
position: relative;
|
||||
font-size: 17rem;
|
||||
|
||||
.tab {
|
||||
transition: color 0.3s;
|
||||
color: rgba(white, 0.7);
|
||||
position: relative;
|
||||
font-size: 17rem;
|
||||
.tab1-img {
|
||||
position: absolute;
|
||||
@width: 1rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin-left: 4rem;
|
||||
transition: all 0.3s;
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
.tab2-img {
|
||||
position: absolute;
|
||||
height: 15rem;
|
||||
left: 24rem;
|
||||
top: -5rem;
|
||||
}
|
||||
|
||||
&.open {
|
||||
.tab1-img {
|
||||
position: absolute;
|
||||
@width: 1rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin-left: 4rem;
|
||||
transition: all 0.3s;
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
.tab2-img {
|
||||
position: absolute;
|
||||
height: 15rem;
|
||||
left: 24rem;
|
||||
top: -5rem;
|
||||
}
|
||||
|
||||
&.open {
|
||||
.tab1-img {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
//transition: left .3s;
|
||||
position: absolute;
|
||||
bottom: -6rem;
|
||||
height: 2rem;
|
||||
width: 20rem;
|
||||
//width: calc(100% / 5);
|
||||
background: #fff;
|
||||
border-radius: 5rem;
|
||||
&.active {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
color: white;
|
||||
font-size: 24rem;
|
||||
.indicator {
|
||||
//transition: left .3s;
|
||||
position: absolute;
|
||||
bottom: -6rem;
|
||||
height: 2rem;
|
||||
width: 20rem;
|
||||
//width: calc(100% / 5);
|
||||
background: #fff;
|
||||
border-radius: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-type {
|
||||
@height: 100rem;
|
||||
position: absolute;
|
||||
height: @height;
|
||||
//padding-top: @height;
|
||||
padding-left: 10rem;
|
||||
padding-right: 10rem;
|
||||
padding-bottom: 10rem;
|
||||
width: 100%;
|
||||
background: var(--main-bg);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
font-size: 12rem;
|
||||
top: -@height;
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
|
||||
&.open {
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.l-button {
|
||||
flex: 1;
|
||||
margin: 0 3rem;
|
||||
height: 28rem;
|
||||
background: rgb(33, 36, 45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 20rem;
|
||||
color: rgb(157, 161, 170);
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
background: rgb(57, 57, 65);
|
||||
color: white;
|
||||
}
|
||||
|
||||
img {
|
||||
@width: 9rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin-left: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
background: #00000066;
|
||||
.search {
|
||||
color: white;
|
||||
font-size: 24rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-type {
|
||||
@height: 100rem;
|
||||
position: absolute;
|
||||
height: @height;
|
||||
//padding-top: @height;
|
||||
padding-left: 10rem;
|
||||
padding-right: 10rem;
|
||||
padding-bottom: 10rem;
|
||||
width: 100%;
|
||||
background: var(--main-bg);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
font-size: 12rem;
|
||||
top: -@height;
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
|
||||
&.open {
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.l-button {
|
||||
flex: 1;
|
||||
margin: 0 3rem;
|
||||
height: 28rem;
|
||||
background: rgb(33, 36, 45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 20rem;
|
||||
color: rgb(157, 161, 170);
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
background: rgb(57, 57, 65);
|
||||
color: white;
|
||||
}
|
||||
|
||||
img {
|
||||
@width: 9rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin-left: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
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 {
|
||||
name: 'LoadingCircle',
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 50,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
progress() {
|
||||
return 300 * 3.14 * (this.modelValue / 100)
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
export default {
|
||||
name: 'LoadingCircle',
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 50
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
progress() {
|
||||
return 300 * 3.14 * (this.modelValue / 100)
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -154,171 +154,162 @@
|
||||
</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 {
|
||||
name: 'Test',
|
||||
props: {
|
||||
modelValue: false,
|
||||
export default {
|
||||
name: 'Test',
|
||||
props: {
|
||||
modelValue: false
|
||||
},
|
||||
components: {
|
||||
Check
|
||||
},
|
||||
watch: {
|
||||
modelValue(newVal) {
|
||||
this.type1 = false
|
||||
this.type2 = false
|
||||
this.type3 = false
|
||||
this.type4 = false
|
||||
this.type5 = false
|
||||
this.type6 = false
|
||||
this.type7 = false
|
||||
this.desc = ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type1: false,
|
||||
type2: false,
|
||||
type3: false,
|
||||
type4: false,
|
||||
type5: false,
|
||||
type6: false,
|
||||
type7: false,
|
||||
desc: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
if (this.type7 && this.desc) return true
|
||||
return this.type1 || this.type2 || this.type3 || this.type4 || this.type5 || this.type6
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
falseOther(cb) {
|
||||
this.type1 = false
|
||||
this.type2 = false
|
||||
this.type3 = false
|
||||
this.type4 = false
|
||||
this.type5 = false
|
||||
this.type6 = false
|
||||
this.type7 = false
|
||||
cb()
|
||||
},
|
||||
components: {
|
||||
Check,
|
||||
},
|
||||
watch: {
|
||||
modelValue(newVal) {
|
||||
this.type1 = false
|
||||
this.type2 = false
|
||||
this.type3 = false
|
||||
this.type4 = false
|
||||
this.type5 = false
|
||||
this.type6 = false
|
||||
this.type7 = false
|
||||
this.desc = ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type1: false,
|
||||
type2: false,
|
||||
type3: false,
|
||||
type4: false,
|
||||
type5: false,
|
||||
type6: false,
|
||||
type7: false,
|
||||
desc: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
if (this.type7 && this.desc) return true
|
||||
return (
|
||||
this.type1 ||
|
||||
this.type2 ||
|
||||
this.type3 ||
|
||||
this.type4 ||
|
||||
this.type5 ||
|
||||
this.type6
|
||||
)
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
falseOther(cb) {
|
||||
this.type1 = false
|
||||
this.type2 = false
|
||||
this.type3 = false
|
||||
this.type4 = false
|
||||
this.type5 = false
|
||||
this.type6 = false
|
||||
this.type7 = false
|
||||
cb()
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('update:modelValue', false)
|
||||
},
|
||||
async submit() {
|
||||
this.cancel()
|
||||
this.$showLoading()
|
||||
await this.$sleep(1000)
|
||||
this.$hideLoading()
|
||||
this.$notice('感谢你的反馈，我们会尽快答复！')
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('update:modelValue', false)
|
||||
},
|
||||
async submit() {
|
||||
this.cancel()
|
||||
this.$showLoading()
|
||||
await this.$sleep(1000)
|
||||
this.$hideLoading()
|
||||
this.$notice('感谢你的反馈，我们会尽快答复！')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.play-feedback {
|
||||
max-height: 490rem;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
color: black;
|
||||
.play-feedback {
|
||||
max-height: 490rem;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
color: black;
|
||||
position: fixed;
|
||||
bottom: 50rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.feedback-header {
|
||||
position: fixed;
|
||||
bottom: 50rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
height: 30rem;
|
||||
padding: 15rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
font-weight: bold;
|
||||
font-size: 18rem;
|
||||
}
|
||||
|
||||
.feedback-header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
height: 30rem;
|
||||
padding: 15rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
font-weight: bold;
|
||||
font-size: 18rem;
|
||||
}
|
||||
.content {
|
||||
padding: 60rem 15rem 15rem 15rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 60rem 15rem 15rem 15rem;
|
||||
}
|
||||
.notice {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
|
||||
.notice {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
.l-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 50rem;
|
||||
font-size: 14rem;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
|
||||
.l-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 50rem;
|
||||
font-size: 14rem;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
|
||||
.check {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.no-border {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.other {
|
||||
.textarea-ctn {
|
||||
width: 100%;
|
||||
background: #eae8e8;
|
||||
padding: 15rem;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10rem;
|
||||
border-radius: 2px;
|
||||
|
||||
textarea {
|
||||
font-family: 'Microsoft YaHei UI';
|
||||
outline: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: black;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-num {
|
||||
margin-top: 8rem;
|
||||
margin-bottom: 8rem;
|
||||
font-size: 10rem;
|
||||
color: var(--second-text-color);
|
||||
text-align: right;
|
||||
}
|
||||
.check {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.no-border {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.other {
|
||||
.textarea-ctn {
|
||||
width: 100%;
|
||||
background: #eae8e8;
|
||||
padding: 15rem;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10rem;
|
||||
border-radius: 2px;
|
||||
|
||||
textarea {
|
||||
font-family: 'Microsoft YaHei UI';
|
||||
outline: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: black;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-num {
|
||||
margin-top: 8rem;
|
||||
margin-bottom: 8rem;
|
||||
font-size: 10rem;
|
||||
color: var(--second-text-color);
|
||||
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,202 +115,199 @@
|
||||
</from-bottom-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import { mapState } from 'pinia'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
/*
|
||||
* 分享到各种工具
|
||||
* */
|
||||
export default {
|
||||
name: 'ShareTo',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
|
||||
import { mapState } from 'pinia'
|
||||
import { useBaseStore } from '@/store/pinia'
|
||||
/*
|
||||
* 分享到各种工具
|
||||
* */
|
||||
export default {
|
||||
name: 'ShareTo',
|
||||
components: {
|
||||
FromBottomDialog
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
videoId: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
canDownload: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
videoId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
watch: {
|
||||
type(newVal, oldVal) {
|
||||
this.change(newVal)
|
||||
},
|
||||
showShareDialog() {
|
||||
this.localFriends = this.$clone(this.friends)
|
||||
},
|
||||
canDownload: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type(newVal, oldVal) {
|
||||
this.change(newVal)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
progress: 0,
|
||||
downloading: false,
|
||||
showShareDialog() {
|
||||
this.localFriends = this.$clone(this.friends)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
progress: 0,
|
||||
downloading: false,
|
||||
|
||||
showShareDialog: false,
|
||||
showDownload: false,
|
||||
showShare2WeChatZone: false,
|
||||
showShare2WeChat: false,
|
||||
showShare2QQZone: false,
|
||||
showShare2QQ: false,
|
||||
showShare2Webo: false,
|
||||
localFriends: [],
|
||||
showShareDialog: false,
|
||||
showDownload: false,
|
||||
showShare2WeChatZone: false,
|
||||
showShare2WeChat: false,
|
||||
showShare2QQZone: false,
|
||||
showShare2QQ: false,
|
||||
showShare2Webo: false,
|
||||
localFriends: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends'])
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
async change(newVal) {
|
||||
if (newVal === -1) return
|
||||
this.showShareDialog = true
|
||||
if (this.canDownload) {
|
||||
let downloadedVideo = this.$storageGet('downloadedVideo', [])
|
||||
if (!downloadedVideo.find((v) => v === this.videoId) && !this.downloading) {
|
||||
await this.downloadVideo()
|
||||
}
|
||||
}
|
||||
switch (newVal) {
|
||||
case 2:
|
||||
return (this.showShare2WeChatZone = true)
|
||||
case 3:
|
||||
return (this.showShare2WeChat = true)
|
||||
case 4:
|
||||
return (this.showShare2QQZone = true)
|
||||
case 5:
|
||||
return (this.showShare2QQ = true)
|
||||
case 8:
|
||||
return (this.showShare2Webo = true)
|
||||
case 9:
|
||||
return (this.showDownload = true)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
cancel() {
|
||||
this.showShareDialog = false
|
||||
this.showDownload = false
|
||||
this.showShare2WeChatZone = false
|
||||
this.showShare2WeChat = false
|
||||
this.showShare2QQZone = false
|
||||
this.showShare2QQ = false
|
||||
this.showShare2Webo = false
|
||||
this.$emit('update:type', -1)
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
async change(newVal) {
|
||||
if (newVal === -1) return
|
||||
this.showShareDialog = true
|
||||
if (this.canDownload) {
|
||||
let downloadedVideo = this.$storageGet('downloadedVideo', [])
|
||||
if (
|
||||
!downloadedVideo.find((v) => v === this.videoId) &&
|
||||
!this.downloading
|
||||
) {
|
||||
await this.downloadVideo()
|
||||
downloadVideo() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.progress = 0
|
||||
this.downloading = true
|
||||
let time = setInterval(() => {
|
||||
if (this.progress >= 100) {
|
||||
let downloadedVideo = this.$storageGet('downloadedVideo', [])
|
||||
downloadedVideo.push(this.videoId)
|
||||
this.$storageSet('downloadedVideo', downloadedVideo)
|
||||
clearInterval(time)
|
||||
this.downloading = false
|
||||
resolve()
|
||||
} else {
|
||||
this.progress++
|
||||
}
|
||||
}
|
||||
switch (newVal) {
|
||||
case 2:
|
||||
return (this.showShare2WeChatZone = true)
|
||||
case 3:
|
||||
return (this.showShare2WeChat = true)
|
||||
case 4:
|
||||
return (this.showShare2QQZone = true)
|
||||
case 5:
|
||||
return (this.showShare2QQ = true)
|
||||
case 8:
|
||||
return (this.showShare2Webo = true)
|
||||
case 9:
|
||||
return (this.showDownload = true)
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.showShareDialog = false
|
||||
this.showDownload = false
|
||||
this.showShare2WeChatZone = false
|
||||
this.showShare2WeChat = false
|
||||
this.showShare2QQZone = false
|
||||
this.showShare2QQ = false
|
||||
this.showShare2Webo = false
|
||||
this.$emit('update:type', -1)
|
||||
},
|
||||
downloadVideo() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.progress = 0
|
||||
this.downloading = true
|
||||
let time = setInterval(() => {
|
||||
if (this.progress >= 100) {
|
||||
let downloadedVideo = this.$storageGet('downloadedVideo', [])
|
||||
downloadedVideo.push(this.videoId)
|
||||
this.$storageSet('downloadedVideo', downloadedVideo)
|
||||
clearInterval(time)
|
||||
this.downloading = false
|
||||
resolve()
|
||||
} else {
|
||||
this.progress++
|
||||
}
|
||||
}, 5)
|
||||
})
|
||||
},
|
||||
share(item) {
|
||||
if (item.select) {
|
||||
this.$notice('已分享给朋友')
|
||||
}
|
||||
item.select = true
|
||||
},
|
||||
}, 5)
|
||||
})
|
||||
},
|
||||
share(item) {
|
||||
if (item.select) {
|
||||
this.$notice('已分享给朋友')
|
||||
}
|
||||
item.select = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.option-dialog {
|
||||
.buttons {
|
||||
padding: 0 15rem;
|
||||
.option-dialog {
|
||||
.buttons {
|
||||
padding: 0 15rem;
|
||||
|
||||
img {
|
||||
height: 22rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-friends {
|
||||
color: black;
|
||||
margin: 10rem 10rem 0 10rem;
|
||||
width: calc(100% - 20rem);
|
||||
background: white;
|
||||
border-radius: 6px 6px 0 0;
|
||||
|
||||
> .dialog-friend {
|
||||
box-sizing: border-box;
|
||||
padding: 8rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #efefef;
|
||||
|
||||
img {
|
||||
height: 22rem;
|
||||
margin-right: 5rem;
|
||||
border-radius: 50%;
|
||||
width: 38rem;
|
||||
height: 38rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-friends {
|
||||
color: black;
|
||||
margin: 10rem 10rem 0 10rem;
|
||||
width: calc(100% - 20rem);
|
||||
background: white;
|
||||
border-radius: 6px 6px 0 0;
|
||||
|
||||
> .dialog-friend {
|
||||
box-sizing: border-box;
|
||||
padding: 8rem;
|
||||
.right {
|
||||
margin: 0 5rem 0 15rem;
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #efefef;
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 38rem;
|
||||
height: 38rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin: 0 5rem 0 15rem;
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
.share-btn {
|
||||
font-size: 13rem;
|
||||
color: white;
|
||||
height: 25rem;
|
||||
width: 60rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
background: var(--primary-btn-color);
|
||||
border-radius: 2px;
|
||||
|
||||
.share-btn {
|
||||
font-size: 13rem;
|
||||
color: white;
|
||||
height: 25rem;
|
||||
width: 60rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--primary-btn-color);
|
||||
border-radius: 2px;
|
||||
|
||||
&.shared {
|
||||
background: lightgray;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
&.shared {
|
||||
background: lightgray;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
box-sizing: border-box;
|
||||
height: 55rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #efefef;
|
||||
font-size: 14rem;
|
||||
margin-bottom: 15rem;
|
||||
.more {
|
||||
box-sizing: border-box;
|
||||
height: 55rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #efefef;
|
||||
font-size: 14rem;
|
||||
margin-bottom: 15rem;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
margin: 0 22rem 0 15rem;
|
||||
}
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
margin: 0 22rem 0 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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,127 +92,165 @@
|
||||
</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 {
|
||||
name: 'ShareTo',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Search,
|
||||
Check,
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
pageId: {
|
||||
type: String,
|
||||
default: 'home-index',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: '70vh',
|
||||
showJoinedChat: false,
|
||||
isShowRightText: false,
|
||||
text: 'AAAAAAA、BBBBBBBB、CCCCCCCCCCCCC',
|
||||
localFriends: [],
|
||||
searchResult: [],
|
||||
searchKey: '',
|
||||
export default {
|
||||
name: 'ShareTo',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Search,
|
||||
Check
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
pageId: {
|
||||
type: String,
|
||||
default: 'home-index'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: '70vh',
|
||||
showJoinedChat: false,
|
||||
isShowRightText: false,
|
||||
text: 'AAAAAAA、BBBBBBBB、CCCCCCCCCCCCC',
|
||||
localFriends: [],
|
||||
searchResult: [],
|
||||
searchKey: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
searchKey(newVal) {
|
||||
if (newVal) {
|
||||
let temp = this.$clone(this.localFriends)
|
||||
this.searchResult = temp.filter((v) => {
|
||||
// return v.name.includes(newVal) || v.account.includes(newVal);
|
||||
return v.name.includes(newVal)
|
||||
})
|
||||
} else {
|
||||
this.searchResult = []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
searchKey(newVal) {
|
||||
if (newVal) {
|
||||
let temp = this.$clone(this.localFriends)
|
||||
this.searchResult = temp.filter((v) => {
|
||||
// return v.name.includes(newVal) || v.account.includes(newVal);
|
||||
return v.name.includes(newVal)
|
||||
})
|
||||
} else {
|
||||
this.searchResult = []
|
||||
}
|
||||
},
|
||||
modelValue(newVal) {
|
||||
if (newVal) {
|
||||
this.localFriends = this.$clone(this.friends.all)
|
||||
this.localFriends.map((v) => (v.shared = false))
|
||||
} else {
|
||||
this.searchKey = ''
|
||||
this.height = '70vh'
|
||||
this.isShowRightText = false
|
||||
this.showJoinedChat = false
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
selectFriends() {
|
||||
return this.localFriends.filter((v) => v.shared)
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.isShowRightText = true
|
||||
this.height = 'calc(var(--vh, 1vh) * 100)'
|
||||
},
|
||||
handleClick2(item) {
|
||||
item.select = !item.select
|
||||
modelValue(newVal) {
|
||||
if (newVal) {
|
||||
this.localFriends = this.$clone(this.friends.all)
|
||||
this.localFriends.map((v) => (v.shared = false))
|
||||
} else {
|
||||
this.searchKey = ''
|
||||
},
|
||||
onNotice() {
|
||||
this.height = '70vh'
|
||||
this.isShowRightText = false
|
||||
this.searchKey = ''
|
||||
this.height = '70vh'
|
||||
},
|
||||
cancel() {
|
||||
this.height = '70vh'
|
||||
this.$emit('update:modelValue', false)
|
||||
},
|
||||
this.showJoinedChat = false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
selectFriends() {
|
||||
return this.localFriends.filter((v) => v.shared)
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.isShowRightText = true
|
||||
this.height = 'calc(var(--vh, 1vh) * 100)'
|
||||
},
|
||||
handleClick2(item) {
|
||||
item.select = !item.select
|
||||
this.searchKey = ''
|
||||
},
|
||||
onNotice() {
|
||||
this.isShowRightText = false
|
||||
this.searchKey = ''
|
||||
this.height = '70vh'
|
||||
},
|
||||
cancel() {
|
||||
this.height = '70vh'
|
||||
this.$emit('update:modelValue', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.button {
|
||||
width: 64rem;
|
||||
height: 26rem !important;
|
||||
.button {
|
||||
width: 64rem;
|
||||
height: 26rem !important;
|
||||
}
|
||||
|
||||
@avatar-width: 38rem;
|
||||
|
||||
.friend-list {
|
||||
padding: 0 15rem;
|
||||
|
||||
.index {
|
||||
color: var(--second-text-color);
|
||||
height: 60rem;
|
||||
line-height: 60rem;
|
||||
font-size: 13rem;
|
||||
}
|
||||
|
||||
@avatar-width: 38rem;
|
||||
.friend-item {
|
||||
margin-bottom: 20rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//background: #fff;
|
||||
|
||||
.friend-list {
|
||||
padding: 0 15rem;
|
||||
|
||||
.index {
|
||||
color: var(--second-text-color);
|
||||
height: 60rem;
|
||||
line-height: 60rem;
|
||||
font-size: 13rem;
|
||||
&:nth-child(1) {
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.friend-item {
|
||||
margin-bottom: 20rem;
|
||||
.left {
|
||||
width: @avatar-width;
|
||||
height: @avatar-width;
|
||||
border-radius: 50%;
|
||||
margin-right: 15rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 14rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//background: #fff;
|
||||
justify-content: space-between;
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-top: 10rem;
|
||||
img {
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
color: white;
|
||||
|
||||
.create-chat {
|
||||
padding-bottom: 40rem;
|
||||
background: var(--main-bg);
|
||||
|
||||
.search-ctn {
|
||||
padding: 0 15rem;
|
||||
}
|
||||
|
||||
.joined-chat-group-nav {
|
||||
border-bottom: 1px solid var(--line-color);
|
||||
height: 50rem;
|
||||
padding: 0 15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
width: @avatar-width;
|
||||
height: @avatar-width;
|
||||
border-radius: 50%;
|
||||
margin-right: 15rem;
|
||||
width: 22rem;
|
||||
height: 22rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
@ -246,36 +259,89 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 20rem;
|
||||
.btn-wrapper {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--main-bg);
|
||||
//background: red;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
margin-bottom: 20rem;
|
||||
width: calc(100% - 40rem);
|
||||
height: 40rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14rem;
|
||||
justify-content: center;
|
||||
background: #3f445c;
|
||||
border-radius: 2rem;
|
||||
|
||||
&.primary {
|
||||
background: var(--primary-btn-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-result {
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.notice-h1 {
|
||||
font-size: 16rem;
|
||||
}
|
||||
|
||||
.notice-h2 {
|
||||
margin-top: 10rem;
|
||||
font-size: 14rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
color: white;
|
||||
.joined-chat-group {
|
||||
background: var(--main-bg);
|
||||
|
||||
.create-chat {
|
||||
padding-bottom: 40rem;
|
||||
background: var(--main-bg);
|
||||
.nav {
|
||||
font-size: 16rem;
|
||||
padding: 15rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search-ctn {
|
||||
padding: 0 15rem;
|
||||
}
|
||||
.chat-list {
|
||||
padding: 0 15rem;
|
||||
|
||||
.joined-chat-group-nav {
|
||||
border-bottom: 1px solid var(--line-color);
|
||||
height: 50rem;
|
||||
padding: 0 15rem;
|
||||
.chat-item {
|
||||
margin-bottom: 20rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 22rem;
|
||||
height: 22rem;
|
||||
margin-right: 10rem;
|
||||
width: @avatar-width;
|
||||
height: @avatar-width;
|
||||
border-radius: 50%;
|
||||
margin-right: 15rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
@ -284,123 +350,32 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--main-bg);
|
||||
//background: red;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
margin-bottom: 20rem;
|
||||
width: calc(100% - 40rem);
|
||||
height: 40rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14rem;
|
||||
justify-content: center;
|
||||
background: #3f445c;
|
||||
border-radius: 2rem;
|
||||
|
||||
&.primary {
|
||||
background: var(--primary-btn-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-result {
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.notice-h1 {
|
||||
font-size: 16rem;
|
||||
}
|
||||
|
||||
.notice-h2 {
|
||||
margin-top: 10rem;
|
||||
font-size: 14rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.joined-chat-group {
|
||||
background: var(--main-bg);
|
||||
|
||||
.nav {
|
||||
font-size: 16rem;
|
||||
padding: 15rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chat-list {
|
||||
padding: 0 15rem;
|
||||
|
||||
.chat-item {
|
||||
margin-bottom: 20rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: @avatar-width;
|
||||
height: @avatar-width;
|
||||
border-radius: 50%;
|
||||
margin-right: 15rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 14rem;
|
||||
flex: 1;
|
||||
.title {
|
||||
width: 55vw;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
width: 55vw;
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.num {
|
||||
margin-left: 5rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 15rem;
|
||||
.num {
|
||||
margin-left: 5rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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,342 +77,336 @@
|
||||
</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 {
|
||||
name: 'Share',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
LoadingCircle,
|
||||
// DouyinCode,
|
||||
ToShare: {
|
||||
components: {
|
||||
LoadingCircle,
|
||||
export default {
|
||||
name: 'Share',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
LoadingCircle,
|
||||
// DouyinCode,
|
||||
ToShare: {
|
||||
components: {
|
||||
LoadingCircle
|
||||
},
|
||||
props: {
|
||||
itemType: {
|
||||
type: String,
|
||||
default: 'weChat'
|
||||
},
|
||||
props: {
|
||||
itemType: {
|
||||
type: String,
|
||||
default: 'weChat',
|
||||
},
|
||||
needDown: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
canDownload: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
needDown: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
progress: 0,
|
||||
loading: false,
|
||||
text: {
|
||||
weChat: '微信',
|
||||
weChatZone: '朋友圈',
|
||||
qq: 'QQ',
|
||||
download: '保存本地',
|
||||
report: '举报',
|
||||
copyPassword: '复制口令',
|
||||
copyLink: '复制链接',
|
||||
collect: '收藏',
|
||||
collectYellow: '取消收藏',
|
||||
comeon: '一起看',
|
||||
dou: '帮上热门',
|
||||
share: '更多分享',
|
||||
duoshan: '多闪',
|
||||
totoutiao: '今日头条',
|
||||
dislike: '不感兴趣',
|
||||
bizhi: '动态壁纸',
|
||||
code: '抖音码',
|
||||
},
|
||||
canDownload: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
progress: 0,
|
||||
loading: false,
|
||||
text: {
|
||||
weChat: '微信',
|
||||
weChatZone: '朋友圈',
|
||||
qq: 'QQ',
|
||||
download: '保存本地',
|
||||
report: '举报',
|
||||
copyPassword: '复制口令',
|
||||
copyLink: '复制链接',
|
||||
collect: '收藏',
|
||||
collectYellow: '取消收藏',
|
||||
comeon: '一起看',
|
||||
dou: '帮上热门',
|
||||
share: '更多分享',
|
||||
duoshan: '多闪',
|
||||
totoutiao: '今日头条',
|
||||
dislike: '不感兴趣',
|
||||
bizhi: '动态壁纸',
|
||||
code: '抖音码'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
styleCanDownload() {
|
||||
if (!this.canDownload) {
|
||||
return this.itemType !== 'download'
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
displayText() {
|
||||
if (this.loading) {
|
||||
return this.progress !== 100 ? '下载中' : this.text[this.itemType]
|
||||
}
|
||||
return this.text[this.itemType]
|
||||
},
|
||||
computed: {
|
||||
styleCanDownload() {
|
||||
if (!this.canDownload) {
|
||||
return this.itemType !== 'download'
|
||||
}
|
||||
return true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
displayText() {
|
||||
if (this.loading) {
|
||||
return this.progress !== 100 ? '下载中' : this.text[this.itemType]
|
||||
}
|
||||
return this.text[this.itemType]
|
||||
},
|
||||
click(e) {
|
||||
if (!this.canDownload) {
|
||||
if (this.itemType === 'download') {
|
||||
this.$stopPropagation(e)
|
||||
} else {
|
||||
this.$notice('作者已关闭下载功能')
|
||||
this.$emit('copy')
|
||||
}
|
||||
return
|
||||
}
|
||||
if (this.needDown) this.$stopPropagation(e)
|
||||
else return
|
||||
if (this.progress === 100) {
|
||||
this.$notice('未实现分享跳转到其他App')
|
||||
click(e) {
|
||||
if (!this.canDownload) {
|
||||
if (this.itemType === 'download') {
|
||||
this.$stopPropagation(e)
|
||||
} else {
|
||||
this.loading = true
|
||||
let interval = setInterval(() => {
|
||||
if (this.progress < 100) {
|
||||
this.progress++
|
||||
} else {
|
||||
clearInterval(interval)
|
||||
this.loading = false
|
||||
this.$emit('click')
|
||||
this.$emit('click')
|
||||
this.$notice('未实现分享跳转到其他App')
|
||||
}
|
||||
}, 10)
|
||||
this.$notice('作者已关闭下载功能')
|
||||
this.$emit('copy')
|
||||
}
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
className='to'
|
||||
onClick={this.click}
|
||||
style={{ opacity: this.styleCanDownload ? '1' : '0.5' }}
|
||||
>
|
||||
<div className='wrapper'>
|
||||
{this.loading ? (
|
||||
<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=''
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<span>{this.displayText()}</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
videoId: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
pageId: {
|
||||
type: String,
|
||||
default: 'home-index',
|
||||
},
|
||||
canDownload: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
},
|
||||
watch: {
|
||||
modelValue(newVal) {
|
||||
if (!newVal) {
|
||||
this.loading = {
|
||||
weChat: false,
|
||||
weChatZone: false,
|
||||
return
|
||||
}
|
||||
if (this.needDown) this.$stopPropagation(e)
|
||||
else return
|
||||
if (this.progress === 100) {
|
||||
this.$notice('未实现分享跳转到其他App')
|
||||
} else {
|
||||
this.loading = true
|
||||
let interval = setInterval(() => {
|
||||
if (this.progress < 100) {
|
||||
this.progress++
|
||||
} else {
|
||||
clearInterval(interval)
|
||||
this.loading = false
|
||||
this.$emit('click')
|
||||
this.$emit('click')
|
||||
this.$notice('未实现分享跳转到其他App')
|
||||
}
|
||||
}, 10)
|
||||
}
|
||||
this.progress = 0
|
||||
this.isShowMore = false
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isCollect: false,
|
||||
isShowMore: false,
|
||||
loading: {
|
||||
weChat: false,
|
||||
weChatZone: false,
|
||||
},
|
||||
text: {
|
||||
weChat: '微信',
|
||||
weChatZone: '朋友圈',
|
||||
},
|
||||
progress: 0,
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
className="to"
|
||||
onClick={this.click}
|
||||
style={{ opacity: this.styleCanDownload ? '1' : '0.5' }}
|
||||
>
|
||||
<div className="wrapper">
|
||||
{this.loading ? (
|
||||
<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="" />
|
||||
)}
|
||||
</div>
|
||||
<span>{this.displayText()}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
videoId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
methods: {
|
||||
displayText(type) {
|
||||
if (this.loading[type]) {
|
||||
return this.progress !== 100 ? '下载中' : this.text[type]
|
||||
}
|
||||
return this.text[type]
|
||||
},
|
||||
async copyLink() {
|
||||
this.closeShare()
|
||||
this.$showLoading()
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
this.$notice('复制成功')
|
||||
},
|
||||
toggleCollect() {
|
||||
this.closeShare()
|
||||
if (this.isCollect) {
|
||||
this.$notice('取消收藏成功')
|
||||
} else {
|
||||
this.$notice('收藏成功')
|
||||
}
|
||||
this.isCollect = !this.isCollect
|
||||
},
|
||||
toggleCall(item) {
|
||||
item.select = !item.select
|
||||
},
|
||||
closeShare() {
|
||||
this.$emit('update:modelValue', false)
|
||||
},
|
||||
closeShare1() {
|
||||
this.$emit('update:modelValue', false)
|
||||
},
|
||||
pageId: {
|
||||
type: String,
|
||||
default: 'home-index'
|
||||
},
|
||||
canDownload: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends'])
|
||||
},
|
||||
watch: {
|
||||
modelValue(newVal) {
|
||||
if (!newVal) {
|
||||
this.loading = {
|
||||
weChat: false,
|
||||
weChatZone: false
|
||||
}
|
||||
this.progress = 0
|
||||
this.isShowMore = false
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isCollect: false,
|
||||
isShowMore: false,
|
||||
loading: {
|
||||
weChat: false,
|
||||
weChatZone: false
|
||||
},
|
||||
text: {
|
||||
weChat: '微信',
|
||||
weChatZone: '朋友圈'
|
||||
},
|
||||
progress: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
displayText(type) {
|
||||
if (this.loading[type]) {
|
||||
return this.progress !== 100 ? '下载中' : this.text[type]
|
||||
}
|
||||
return this.text[type]
|
||||
},
|
||||
async copyLink() {
|
||||
this.closeShare()
|
||||
this.$showLoading()
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
this.$notice('复制成功')
|
||||
},
|
||||
toggleCollect() {
|
||||
this.closeShare()
|
||||
if (this.isCollect) {
|
||||
this.$notice('取消收藏成功')
|
||||
} else {
|
||||
this.$notice('收藏成功')
|
||||
}
|
||||
this.isCollect = !this.isCollect
|
||||
},
|
||||
toggleCall(item) {
|
||||
item.select = !item.select
|
||||
},
|
||||
closeShare() {
|
||||
this.$emit('update:modelValue', false)
|
||||
},
|
||||
closeShare1() {
|
||||
this.$emit('update:modelValue', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.video-share {
|
||||
height: 60vh;
|
||||
width: 100%;
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
.video-share {
|
||||
height: 60vh;
|
||||
width: 100%;
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
|
||||
.friends {
|
||||
border-radius: 10rem;
|
||||
margin: 10rem;
|
||||
padding: 0 var(--page-padding);
|
||||
@avatar-width: 38rem;
|
||||
font-size: 14rem;
|
||||
background: white;
|
||||
.friends {
|
||||
border-radius: 10rem;
|
||||
margin: 10rem;
|
||||
padding: 0 var(--page-padding);
|
||||
@avatar-width: 38rem;
|
||||
font-size: 14rem;
|
||||
background: white;
|
||||
|
||||
@item-width: 55rem;
|
||||
@item-width: 55rem;
|
||||
|
||||
.item {
|
||||
height: @item-width;
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
|
||||
.left {
|
||||
width: @avatar-width;
|
||||
height: @avatar-width;
|
||||
border-radius: 50%;
|
||||
margin-right: 15rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 14rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
height: @item-width;
|
||||
color: black;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
|
||||
.left {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
border-radius: 50%;
|
||||
margin-left: 10rem;
|
||||
margin-right: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@icon-width: 58rem;
|
||||
|
||||
:deep(.shares) {
|
||||
@space-width: 15rem;
|
||||
|
||||
overflow-x: scroll;
|
||||
.item {
|
||||
height: @item-width;
|
||||
color: black;
|
||||
display: flex;
|
||||
padding-right: @space-width * 2;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
|
||||
.to {
|
||||
margin-left: @space-width;
|
||||
margin-bottom: @space-width;
|
||||
.left {
|
||||
width: @avatar-width;
|
||||
height: @avatar-width;
|
||||
border-radius: 50%;
|
||||
margin-right: 15rem;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
width: @icon-width;
|
||||
height: @icon-width;
|
||||
padding: 12rem;
|
||||
border-radius: 15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.right {
|
||||
font-size: 14rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
//height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 7rem;
|
||||
color: black;
|
||||
font-size: 10rem;
|
||||
display: block;
|
||||
text-align: center;
|
||||
img {
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
position: relative;
|
||||
.more {
|
||||
height: @item-width;
|
||||
color: black;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
|
||||
@border-width: 3.1px;
|
||||
|
||||
.quan1 {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: @border-width solid darkgrey;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.quan2 {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: @border-width solid #514f56;
|
||||
.left {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
border-radius: 50%;
|
||||
margin-left: 10rem;
|
||||
margin-right: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@icon-width: 58rem;
|
||||
|
||||
:deep(.shares) {
|
||||
@space-width: 15rem;
|
||||
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
padding-right: @space-width * 2;
|
||||
|
||||
.to {
|
||||
margin-left: @space-width;
|
||||
margin-bottom: @space-width;
|
||||
|
||||
.wrapper {
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
width: @icon-width;
|
||||
height: @icon-width;
|
||||
padding: 12rem;
|
||||
border-radius: 15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
//height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 7rem;
|
||||
color: black;
|
||||
font-size: 10rem;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
position: relative;
|
||||
|
||||
@border-width: 3.1px;
|
||||
|
||||
.quan1 {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: @border-width solid darkgrey;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.quan2 {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: @border-width solid #514f56;
|
||||
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,261 +200,255 @@
|
||||
</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({
|
||||
active: true,
|
||||
baseIndex: 1,
|
||||
navIndex: 4,
|
||||
test: '',
|
||||
recommendList: [],
|
||||
isSharing: false,
|
||||
canMove: true,
|
||||
shareType: -1,
|
||||
showPlayFeedback: false,
|
||||
showShareDuoshan: false,
|
||||
showShareDialog: false,
|
||||
showShare2WeChatZone: false,
|
||||
showDouyinCode: false,
|
||||
showFollowSetting: false,
|
||||
showFollowSetting2: false,
|
||||
showBlockDialog: false,
|
||||
showChangeNote: false,
|
||||
shareToFriend: false,
|
||||
const state = reactive({
|
||||
active: true,
|
||||
baseIndex: 1,
|
||||
navIndex: 4,
|
||||
test: '',
|
||||
recommendList: [],
|
||||
isSharing: false,
|
||||
canMove: true,
|
||||
shareType: -1,
|
||||
showPlayFeedback: false,
|
||||
showShareDuoshan: false,
|
||||
showShareDialog: false,
|
||||
showShare2WeChatZone: false,
|
||||
showDouyinCode: false,
|
||||
showFollowSetting: false,
|
||||
showFollowSetting2: false,
|
||||
showBlockDialog: false,
|
||||
showChangeNote: false,
|
||||
shareToFriend: false,
|
||||
|
||||
commentVisible: false,
|
||||
fullScreen: false,
|
||||
currentItem: {
|
||||
author: DefaultUser,
|
||||
commentVisible: false,
|
||||
fullScreen: false,
|
||||
currentItem: {
|
||||
author: DefaultUser,
|
||||
isRequest: false,
|
||||
aweme_list: []
|
||||
}
|
||||
})
|
||||
|
||||
function delayShowDialog(cb) {
|
||||
setTimeout(cb, 400)
|
||||
}
|
||||
|
||||
function setCurrentItem(item) {
|
||||
if (!state.active) return
|
||||
// console.log('sss',item,state.baseIndex)
|
||||
if (state.baseIndex !== 1) return
|
||||
if (state.currentItem.author.uid !== item.author.uid) {
|
||||
state.currentItem = {
|
||||
...item,
|
||||
isRequest: false,
|
||||
aweme_list: [],
|
||||
},
|
||||
})
|
||||
|
||||
function delayShowDialog(cb) {
|
||||
setTimeout(cb, 400)
|
||||
}
|
||||
|
||||
function setCurrentItem(item) {
|
||||
if (!state.active) return
|
||||
// console.log('sss',item,state.baseIndex)
|
||||
if (state.baseIndex !== 1) return
|
||||
if (state.currentItem.author.uid !== item.author.uid) {
|
||||
state.currentItem = {
|
||||
...item,
|
||||
isRequest: false,
|
||||
aweme_list: [],
|
||||
}
|
||||
aweme_list: []
|
||||
}
|
||||
// console.log('item', item)
|
||||
}
|
||||
// console.log('item', item)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
bus.on(EVENT_KEY.ENTER_FULLSCREEN, (e) => {
|
||||
if (!state.active) return
|
||||
state.fullScreen = true
|
||||
})
|
||||
bus.on(EVENT_KEY.EXIT_FULLSCREEN, (e) => {
|
||||
if (!state.active) return
|
||||
state.fullScreen = false
|
||||
})
|
||||
bus.on(EVENT_KEY.OPEN_COMMENTS, (e) => {
|
||||
if (!state.active) return
|
||||
bus.emit(EVENT_KEY.ENTER_FULLSCREEN)
|
||||
state.commentVisible = true
|
||||
})
|
||||
bus.on(EVENT_KEY.CLOSE_COMMENTS, (e) => {
|
||||
if (!state.active) return
|
||||
bus.emit(EVENT_KEY.EXIT_FULLSCREEN)
|
||||
state.commentVisible = false
|
||||
})
|
||||
bus.on(EVENT_KEY.SHOW_SHARE, (e) => {
|
||||
if (!state.active) return
|
||||
state.isSharing = true
|
||||
})
|
||||
bus.on(EVENT_KEY.NAV, ({ path, query }) => {
|
||||
if (!state.active) return
|
||||
nav(path, query)
|
||||
})
|
||||
bus.on(EVENT_KEY.GO_USERINFO, () => {
|
||||
if (!state.active) return
|
||||
state.baseIndex = 2
|
||||
})
|
||||
bus.on(EVENT_KEY.CURRENT_ITEM, setCurrentItem)
|
||||
onMounted(() => {
|
||||
bus.on(EVENT_KEY.ENTER_FULLSCREEN, (e) => {
|
||||
if (!state.active) return
|
||||
state.fullScreen = true
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
bus.offAll()
|
||||
bus.on(EVENT_KEY.EXIT_FULLSCREEN, (e) => {
|
||||
if (!state.active) return
|
||||
state.fullScreen = false
|
||||
})
|
||||
|
||||
onActivated(() => {
|
||||
state.active = true
|
||||
bus.on(EVENT_KEY.OPEN_COMMENTS, (e) => {
|
||||
if (!state.active) return
|
||||
bus.emit(EVENT_KEY.ENTER_FULLSCREEN)
|
||||
state.commentVisible = true
|
||||
})
|
||||
|
||||
onDeactivated(() => {
|
||||
state.active = false
|
||||
bus.on(EVENT_KEY.CLOSE_COMMENTS, (e) => {
|
||||
if (!state.active) return
|
||||
bus.emit(EVENT_KEY.EXIT_FULLSCREEN)
|
||||
state.commentVisible = false
|
||||
})
|
||||
bus.on(EVENT_KEY.SHOW_SHARE, (e) => {
|
||||
if (!state.active) return
|
||||
state.isSharing = true
|
||||
})
|
||||
bus.on(EVENT_KEY.NAV, ({ path, query }) => {
|
||||
if (!state.active) return
|
||||
nav(path, query)
|
||||
})
|
||||
bus.on(EVENT_KEY.GO_USERINFO, () => {
|
||||
if (!state.active) return
|
||||
state.baseIndex = 2
|
||||
})
|
||||
bus.on(EVENT_KEY.CURRENT_ITEM, setCurrentItem)
|
||||
})
|
||||
|
||||
function closeComments() {
|
||||
bus.emit(EVENT_KEY.CLOSE_COMMENTS)
|
||||
}
|
||||
onUnmounted(() => {
|
||||
bus.offAll()
|
||||
})
|
||||
|
||||
function dislike() {
|
||||
// listRef.value.dislike(state.list[1])
|
||||
// state.list[state.index] = state.list[1]
|
||||
// Utils.$notice('操作成功，将减少此类视频的推荐')
|
||||
}
|
||||
onActivated(() => {
|
||||
state.active = true
|
||||
})
|
||||
|
||||
onDeactivated(() => {
|
||||
state.active = false
|
||||
})
|
||||
|
||||
function closeComments() {
|
||||
bus.emit(EVENT_KEY.CLOSE_COMMENTS)
|
||||
}
|
||||
|
||||
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 {
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
overflow: hidden;
|
||||
.test-slide-wrapper {
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
overflow: hidden;
|
||||
|
||||
.sidebar {
|
||||
width: 80vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
overflow: auto;
|
||||
background: rgb(22, 22, 22);
|
||||
padding: 10rem;
|
||||
padding-bottom: 20rem;
|
||||
box-sizing: border-box;
|
||||
.sidebar {
|
||||
width: 80vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
overflow: auto;
|
||||
background: rgb(22, 22, 22);
|
||||
padding: 10rem;
|
||||
padding-bottom: 20rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > .header {
|
||||
font-size: 16rem;
|
||||
& > .header {
|
||||
font-size: 16rem;
|
||||
display: flex;
|
||||
color: white;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.right {
|
||||
border-radius: 20rem;
|
||||
padding: 8rem 15rem;
|
||||
background: rgb(36, 36, 36);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14rem;
|
||||
gap: 10rem;
|
||||
|
||||
svg {
|
||||
font-size: 18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: 10rem;
|
||||
border-radius: 12rem;
|
||||
padding: 15rem;
|
||||
background: rgb(29, 29, 29);
|
||||
|
||||
.header {
|
||||
margin-bottom: 8rem;
|
||||
font-size: 14rem;
|
||||
display: flex;
|
||||
color: white;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.right {
|
||||
border-radius: 20rem;
|
||||
padding: 8rem 15rem;
|
||||
background: rgb(36, 36, 36);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14rem;
|
||||
gap: 10rem;
|
||||
font-size: 12rem;
|
||||
gap: 4rem;
|
||||
color: gray;
|
||||
|
||||
svg {
|
||||
font-size: 18rem;
|
||||
font-size: 16rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: 10rem;
|
||||
border-radius: 12rem;
|
||||
padding: 15rem;
|
||||
background: rgb(29, 29, 29);
|
||||
.content {
|
||||
color: white;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
||||
.header {
|
||||
margin-bottom: 8rem;
|
||||
font-size: 14rem;
|
||||
.item {
|
||||
min-height: 20vw;
|
||||
display: flex;
|
||||
color: white;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14rem;
|
||||
gap: 8rem;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
gap: 4rem;
|
||||
color: gray;
|
||||
svg {
|
||||
font-size: 28rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 16rem;
|
||||
}
|
||||
.xcx {
|
||||
border-radius: 12rem;
|
||||
width: 50rem;
|
||||
height: 50rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
color: white;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
.avatar {
|
||||
height: 25vw;
|
||||
|
||||
.item {
|
||||
min-height: 20vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14rem;
|
||||
gap: 8rem;
|
||||
|
||||
svg {
|
||||
font-size: 28rem;
|
||||
}
|
||||
|
||||
.xcx {
|
||||
border-radius: 12rem;
|
||||
width: 50rem;
|
||||
height: 50rem;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 25vw;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 50rem;
|
||||
}
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 50rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.first-horizontal-item {
|
||||
//width: 90vw;
|
||||
//height: 80vh;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100 - var(--footer-height)) !important;
|
||||
overflow: hidden;
|
||||
border-radius: 10rem;
|
||||
.slide-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.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,266 +46,266 @@
|
||||
</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({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
const nav = useNav()
|
||||
const baseStore = useBaseStore()
|
||||
const props = defineProps({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
show: false,
|
||||
current: {
|
||||
id: '',
|
||||
note_card: {
|
||||
interact_info: {},
|
||||
cover: {},
|
||||
image_list: [],
|
||||
display_title: '',
|
||||
user: {},
|
||||
comment_list: [],
|
||||
createTime: '',
|
||||
},
|
||||
},
|
||||
d: false,
|
||||
})
|
||||
let rect = ref({})
|
||||
const state = reactive({
|
||||
show: false,
|
||||
current: {
|
||||
id: '',
|
||||
note_card: {
|
||||
interact_info: {},
|
||||
cover: {},
|
||||
image_list: [],
|
||||
display_title: '',
|
||||
user: {},
|
||||
comment_list: [],
|
||||
createTime: ''
|
||||
}
|
||||
},
|
||||
d: false
|
||||
})
|
||||
let rect = ref({})
|
||||
|
||||
watch(
|
||||
() => props.active,
|
||||
(n) => {
|
||||
if (n && !state.show) {
|
||||
state.show = true
|
||||
watch(
|
||||
() => props.active,
|
||||
(n) => {
|
||||
if (n && !state.show) {
|
||||
state.show = true
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
function close() {
|
||||
let s = $('.shadow ')
|
||||
let domRect = rect.value
|
||||
let t = '.3'
|
||||
s.css('transition', `all ${t}s`)
|
||||
s.css('top', domRect.top)
|
||||
s.css('left', domRect.left)
|
||||
s.css('width', domRect.width)
|
||||
s.css('height', domRect.height)
|
||||
|
||||
let a = $('.goods-detail')
|
||||
a.css('transition', `all ${t}s`)
|
||||
a.css('opacity', '0')
|
||||
a.css('width', '100vw')
|
||||
a.css('height', '100vh')
|
||||
a.css('transform', `scale(${domRect.sw},${domRect.sh})`)
|
||||
a.css('transform-origin', `0 0`)
|
||||
|
||||
let d = $('.shadow .wrap')
|
||||
d.css('transition', `all ${t}s`)
|
||||
d.css('opacity', '1')
|
||||
|
||||
// state.d = false
|
||||
setTimeout(() => {
|
||||
s.css('z-index', '-100')
|
||||
s.css('transition', 'all 0s')
|
||||
s.css('top', '-200vh')
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function test(e, item) {
|
||||
let data = Mock.mock({
|
||||
'comment_list|3-50': [
|
||||
{
|
||||
name: '@cname',
|
||||
text: '@cparagraph(3)'
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
]
|
||||
})
|
||||
item.note_card.comment_list = data.comment_list
|
||||
item.note_card.createTime = Mock.Random.date('MM-dd')
|
||||
item.note_card.interact_info.collect_count = Mock.Random.integer(60, 3000)
|
||||
item.note_card.interact_info.share_count = Mock.Random.integer(60, 3000)
|
||||
state.current = cloneDeep(item)
|
||||
// console.log(state.current)
|
||||
|
||||
function close() {
|
||||
let s = $('.shadow ')
|
||||
let domRect = rect.value
|
||||
let t = '.3'
|
||||
state.d = true
|
||||
let domRect = e.currentTarget.getBoundingClientRect()
|
||||
// console.log('e', domRect)
|
||||
let s = $('.shadow ')
|
||||
|
||||
s.css('z-index', '1')
|
||||
s.css('transition', '0s')
|
||||
s.css('top', domRect.top)
|
||||
s.css('left', domRect.left)
|
||||
s.css('width', domRect.width)
|
||||
s.css('height', domRect.height)
|
||||
|
||||
let t = '.3'
|
||||
let d = $('.shadow .wrap')
|
||||
d.empty()
|
||||
d.show()
|
||||
d.append($(e.currentTarget).clone())
|
||||
d.css('transition', `all ${t}s`)
|
||||
d.css('opacity', '1')
|
||||
|
||||
let sw = domRect.width / baseStore.bodyWidth
|
||||
let sh = domRect.height / baseStore.bodyHeight
|
||||
domRect.sw = sw
|
||||
domRect.sh = sh
|
||||
|
||||
let a = $('.goods-detail')
|
||||
a.css('opacity', '0')
|
||||
a.css('width', '100vw')
|
||||
a.css('height', '100vh')
|
||||
a.css('transform', `scale(${domRect.sw},${domRect.sh})`)
|
||||
a.css('transform-origin', `0 0`)
|
||||
|
||||
rect.value = domRect
|
||||
setTimeout(() => {
|
||||
s.css('transition', `all ${t}s`)
|
||||
s.css('top', domRect.top)
|
||||
s.css('left', domRect.left)
|
||||
s.css('width', domRect.width)
|
||||
s.css('height', domRect.height)
|
||||
s.css('top', 0)
|
||||
s.css('left', 0)
|
||||
s.css('width', '100vw')
|
||||
s.css('height', '100vh')
|
||||
|
||||
d.css('opacity', '0')
|
||||
d.css('z-index', '-1')
|
||||
|
||||
let a = $('.goods-detail')
|
||||
a.css('transition', `all ${t}s`)
|
||||
a.css('opacity', '0')
|
||||
a.css('width', '100vw')
|
||||
a.css('height', '100vh')
|
||||
a.css('transform', `scale(${domRect.sw},${domRect.sh})`)
|
||||
a.css('opacity', '1')
|
||||
a.css('transform', `scale(1,1)`)
|
||||
a.css('transform-origin', `0 0`)
|
||||
|
||||
let d = $('.shadow .wrap')
|
||||
d.css('transition', `all ${t}s`)
|
||||
d.css('opacity', '1')
|
||||
|
||||
// state.d = false
|
||||
setTimeout(() => {
|
||||
s.css('z-index', '-100')
|
||||
s.css('transition', 'all 0s')
|
||||
s.css('top', '-200vh')
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function test(e, item) {
|
||||
let data = Mock.mock({
|
||||
'comment_list|3-50': [
|
||||
{
|
||||
name: '@cname',
|
||||
text: '@cparagraph(3)',
|
||||
},
|
||||
],
|
||||
})
|
||||
item.note_card.comment_list = data.comment_list
|
||||
item.note_card.createTime = Mock.Random.date('MM-dd')
|
||||
item.note_card.interact_info.collect_count = Mock.Random.integer(60, 3000)
|
||||
item.note_card.interact_info.share_count = Mock.Random.integer(60, 3000)
|
||||
state.current = cloneDeep(item)
|
||||
// console.log(state.current)
|
||||
|
||||
state.d = true
|
||||
let domRect = e.currentTarget.getBoundingClientRect()
|
||||
// console.log('e', domRect)
|
||||
let s = $('.shadow ')
|
||||
|
||||
s.css('z-index', '1')
|
||||
s.css('transition', '0s')
|
||||
s.css('top', domRect.top)
|
||||
s.css('left', domRect.left)
|
||||
s.css('width', domRect.width)
|
||||
s.css('height', domRect.height)
|
||||
|
||||
let t = '.3'
|
||||
let d = $('.shadow .wrap')
|
||||
d.empty()
|
||||
d.show()
|
||||
d.append($(e.currentTarget).clone())
|
||||
d.css('transition', `all ${t}s`)
|
||||
d.css('opacity', '1')
|
||||
|
||||
let sw = domRect.width / baseStore.bodyWidth
|
||||
let sh = domRect.height / baseStore.bodyHeight
|
||||
domRect.sw = sw
|
||||
domRect.sh = sh
|
||||
|
||||
let a = $('.goods-detail')
|
||||
a.css('opacity', '0')
|
||||
a.css('width', '100vw')
|
||||
a.css('height', '100vh')
|
||||
a.css('transform', `scale(${domRect.sw},${domRect.sh})`)
|
||||
a.css('transform-origin', `0 0`)
|
||||
|
||||
rect.value = domRect
|
||||
setTimeout(() => {
|
||||
s.css('transition', `all ${t}s`)
|
||||
s.css('top', 0)
|
||||
s.css('left', 0)
|
||||
s.css('width', '100vw')
|
||||
s.css('height', '100vh')
|
||||
|
||||
d.css('opacity', '0')
|
||||
d.css('z-index', '-1')
|
||||
|
||||
a.css('transition', `all ${t}s`)
|
||||
a.css('opacity', '1')
|
||||
a.css('transform', `scale(1,1)`)
|
||||
a.css('transform-origin', `0 0`)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#Community {
|
||||
font-size: 14rem;
|
||||
color: white;
|
||||
padding-top: var(--home-header-height);
|
||||
background: rgb(21, 23, 36);
|
||||
#Community {
|
||||
font-size: 14rem;
|
||||
color: white;
|
||||
padding-top: var(--home-header-height);
|
||||
background: rgb(21, 23, 36);
|
||||
|
||||
.Scroll {
|
||||
height: calc(
|
||||
var(--vh, 1vh) * 100 - var(--home-header-height) - var(--footer-height)
|
||||
) !important;
|
||||
.Scroll {
|
||||
height: calc(
|
||||
var(--vh, 1vh) * 100 - var(--home-header-height) - var(--footer-height)
|
||||
) !important;
|
||||
}
|
||||
|
||||
@p: 1rem;
|
||||
|
||||
.search {
|
||||
margin-left: 2vw;
|
||||
width: 96vw;
|
||||
box-sizing: border-box;
|
||||
padding: 10rem;
|
||||
border: 1px solid #646464;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16rem;
|
||||
margin-bottom: 10rem;
|
||||
border-radius: 8rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5rem;
|
||||
color: gray;
|
||||
|
||||
svg {
|
||||
font-size: 16rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-left: 2vw;
|
||||
width: 96vw;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 4rem;
|
||||
overflow: hidden;
|
||||
background: var(--main-bg);
|
||||
|
||||
.poster {
|
||||
display: block;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
//height: 33vh;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
color: gainsboro;
|
||||
padding: 10rem;
|
||||
|
||||
.title {
|
||||
font-size: 14rem;
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
|
||||
@p: 1rem;
|
||||
|
||||
.search {
|
||||
margin-left: 2vw;
|
||||
width: 96vw;
|
||||
box-sizing: border-box;
|
||||
padding: 10rem;
|
||||
border: 1px solid #646464;
|
||||
.b2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16rem;
|
||||
margin-bottom: 10rem;
|
||||
border-radius: 8rem;
|
||||
|
||||
.left {
|
||||
.user {
|
||||
display: flex;
|
||||
font-size: 12rem;
|
||||
|
||||
img {
|
||||
width: 15rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5rem;
|
||||
color: gray;
|
||||
gap: 3rem;
|
||||
|
||||
svg {
|
||||
font-size: 16rem;
|
||||
font-size: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-left: 2vw;
|
||||
width: 96vw;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 4rem;
|
||||
overflow: hidden;
|
||||
background: var(--main-bg);
|
||||
|
||||
.poster {
|
||||
display: block;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
//height: 33vh;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
color: gainsboro;
|
||||
padding: 10rem;
|
||||
|
||||
.title {
|
||||
font-size: 14rem;
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
|
||||
.b2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
.num {
|
||||
font-size: 12rem;
|
||||
|
||||
img {
|
||||
width: 15rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
|
||||
svg {
|
||||
font-size: 15rem;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shadow {
|
||||
background: var(--color-message);
|
||||
.shadow {
|
||||
background: var(--color-message);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -200vh;
|
||||
width: 100vw;
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
z-index: -100;
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -200vh;
|
||||
width: 100vw;
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
z-index: -100;
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
}
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,89 +1,89 @@
|
||||
<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 = {
|
||||
onShowComments() {
|
||||
console.log('onShowComments')
|
||||
},
|
||||
const p = {
|
||||
onShowComments() {
|
||||
console.log('onShowComments')
|
||||
}
|
||||
}
|
||||
|
||||
const playingEl = ref()
|
||||
const state = reactive({
|
||||
show: false,
|
||||
muted: true,
|
||||
danmu: false,
|
||||
})
|
||||
const playingEl = ref()
|
||||
const state = reactive({
|
||||
show: false,
|
||||
muted: true,
|
||||
danmu: false
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.active,
|
||||
(n) => {
|
||||
if (n) {
|
||||
if (state.show) {
|
||||
let el = playingEl.value
|
||||
if (el) {
|
||||
el.parentNode.parentNode.classList.remove('pause')
|
||||
el.play()
|
||||
}
|
||||
} else {
|
||||
state.show = true
|
||||
}
|
||||
} else {
|
||||
watch(
|
||||
() => props.active,
|
||||
(n) => {
|
||||
if (n) {
|
||||
if (state.show) {
|
||||
let el = playingEl.value
|
||||
if (el) {
|
||||
el.parentNode.parentNode.classList.remove('pause')
|
||||
el.play()
|
||||
}
|
||||
} else {
|
||||
state.show = true
|
||||
}
|
||||
} else {
|
||||
let el = playingEl.value
|
||||
if (el) {
|
||||
el.parentNode.parentNode.classList.add('pause')
|
||||
el.pause()
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const obList = []
|
||||
|
||||
const vIsCanPlay = {
|
||||
mounted(el, binding, vnode, prevVnode) {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting) {
|
||||
let videoEls = document.querySelectorAll('.long-video video')
|
||||
videoEls.forEach((item) => {
|
||||
item.pause()
|
||||
if (item.parentNode?.parentNode) {
|
||||
item.parentNode.parentNode.classList.add('pause')
|
||||
}
|
||||
})
|
||||
el.parentNode.parentNode.classList.remove('pause')
|
||||
el.play()
|
||||
playingEl.value = el
|
||||
} else {
|
||||
el.parentNode.parentNode.classList.add('pause')
|
||||
el.pause()
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const obList = []
|
||||
|
||||
const vIsCanPlay = {
|
||||
mounted(el, binding, vnode, prevVnode) {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting) {
|
||||
let videoEls = document.querySelectorAll('.long-video video')
|
||||
videoEls.forEach((item) => {
|
||||
item.pause()
|
||||
if (item.parentNode?.parentNode) {
|
||||
item.parentNode.parentNode.classList.add('pause')
|
||||
}
|
||||
})
|
||||
el.parentNode.parentNode.classList.remove('pause')
|
||||
el.play()
|
||||
playingEl.value = el
|
||||
} else {
|
||||
el.parentNode.parentNode.classList.add('pause')
|
||||
el.pause()
|
||||
}
|
||||
},
|
||||
{ threshold: 0.5 },
|
||||
)
|
||||
observer.observe(el)
|
||||
obList.push(observer)
|
||||
},
|
||||
unmounted(el, binding, vnode, prevVnode) {
|
||||
obList.map((v) => {
|
||||
v.disconnect()
|
||||
})
|
||||
},
|
||||
},
|
||||
{ threshold: 0.5 }
|
||||
)
|
||||
observer.observe(el)
|
||||
obList.push(observer)
|
||||
},
|
||||
unmounted(el, binding, vnode, prevVnode) {
|
||||
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,176 +162,176 @@
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.long-video {
|
||||
font-size: 14rem;
|
||||
color: white;
|
||||
padding-top: var(--home-header-height);
|
||||
background: rgb(21, 23, 36);
|
||||
.long-video {
|
||||
font-size: 14rem;
|
||||
color: white;
|
||||
padding-top: var(--home-header-height);
|
||||
background: rgb(21, 23, 36);
|
||||
|
||||
.Scroll {
|
||||
height: calc(
|
||||
var(--vh, 1vh) * 100 - var(--home-header-height) - var(--footer-height)
|
||||
) !important;
|
||||
}
|
||||
.Scroll {
|
||||
height: calc(
|
||||
var(--vh, 1vh) * 100 - var(--home-header-height) - var(--footer-height)
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
row-gap: 15rem;
|
||||
box-sizing: border-box;
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
row-gap: 15rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
margin: 0 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rem;
|
||||
.item {
|
||||
margin: 0 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rem;
|
||||
position: relative;
|
||||
|
||||
.poster {
|
||||
border-radius: 12rem;
|
||||
width: 100%;
|
||||
height: 140rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
height: 220rem;
|
||||
position: relative;
|
||||
|
||||
.poster {
|
||||
border-radius: 12rem;
|
||||
video {
|
||||
width: 100%;
|
||||
height: 140rem;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
height: 220rem;
|
||||
position: relative;
|
||||
.options {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 12rem;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 8rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: white;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 36rem;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
||||
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||||
-webkit-line-clamp: 2; //显示的行
|
||||
}
|
||||
|
||||
.f {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
.duration {
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 80rem;
|
||||
right: 10rem;
|
||||
font-size: 13rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
color: gray;
|
||||
.f;
|
||||
font-size: 13rem;
|
||||
|
||||
.l {
|
||||
.f;
|
||||
justify-content: flex-start;
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
||||
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||||
-webkit-line-clamp: 1; //显示的行
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@w: 20rem;
|
||||
width: @w;
|
||||
height: @w;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.r {
|
||||
word-break: keep-all;
|
||||
.f;
|
||||
|
||||
svg {
|
||||
font-size: 16rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.big {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
margin: 0;
|
||||
|
||||
&.pause {
|
||||
.duration {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.options {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 12rem;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 8rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: white;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 20rem;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 36rem;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
||||
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||||
-webkit-line-clamp: 2; //显示的行
|
||||
}
|
||||
|
||||
.f {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
.duration {
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 80rem;
|
||||
right: 10rem;
|
||||
font-size: 13rem;
|
||||
display: none;
|
||||
bottom: 67rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: unset;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.title,
|
||||
.bottom {
|
||||
color: gray;
|
||||
.f;
|
||||
font-size: 13rem;
|
||||
|
||||
.l {
|
||||
.f;
|
||||
justify-content: flex-start;
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
||||
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||||
-webkit-line-clamp: 1; //显示的行
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@w: 20rem;
|
||||
width: @w;
|
||||
height: @w;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.r {
|
||||
word-break: keep-all;
|
||||
.f;
|
||||
|
||||
svg {
|
||||
font-size: 16rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.big {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
margin: 0;
|
||||
|
||||
&.pause {
|
||||
.duration {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.duration {
|
||||
display: none;
|
||||
bottom: 67rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: unset;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.title,
|
||||
.bottom {
|
||||
padding: 0 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.l {
|
||||
margin-right: 5rem;
|
||||
}
|
||||
|
||||
&.r {
|
||||
margin-left: 5rem;
|
||||
padding: 0 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.l {
|
||||
margin-right: 5rem;
|
||||
}
|
||||
|
||||
&.r {
|
||||
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,148 +58,138 @@
|
||||
</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({
|
||||
cbs: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'update:item',
|
||||
'goUserInfo',
|
||||
'showComments',
|
||||
'showShare',
|
||||
'goMusic',
|
||||
])
|
||||
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
const p = {
|
||||
onShowComments() {
|
||||
console.log('onShowComments')
|
||||
},
|
||||
}
|
||||
|
||||
const subTypeRef = ref(null)
|
||||
const state = reactive({
|
||||
index: 0,
|
||||
subType: -1,
|
||||
subTypeVisible: false,
|
||||
subTypeHeight: '0',
|
||||
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
|
||||
subTypeIsTop: false,
|
||||
})
|
||||
|
||||
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) {
|
||||
// console.log('pageClick')
|
||||
if (state.subTypeVisible) {
|
||||
state.subTypeIsTop = state.subTypeVisible = false
|
||||
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE)
|
||||
Utils.$stopPropagation(e)
|
||||
const props = defineProps({
|
||||
cbs: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:item', 'goUserInfo', 'showComments', 'showShare', 'goMusic'])
|
||||
|
||||
onMounted(() => {
|
||||
// getData()
|
||||
})
|
||||
onUnmounted(() => {})
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
const p = {
|
||||
onShowComments() {
|
||||
console.log('onShowComments')
|
||||
}
|
||||
}
|
||||
|
||||
const subTypeRef = ref(null)
|
||||
const state = reactive({
|
||||
index: 0,
|
||||
subType: -1,
|
||||
subTypeVisible: false,
|
||||
subTypeHeight: '0',
|
||||
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
|
||||
subTypeIsTop: false
|
||||
})
|
||||
|
||||
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) {
|
||||
// console.log('pageClick')
|
||||
if (state.subTypeVisible) {
|
||||
state.subTypeIsTop = state.subTypeVisible = false
|
||||
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE)
|
||||
Utils.$stopPropagation(e)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// getData()
|
||||
})
|
||||
onUnmounted(() => {})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.slide-item-class {
|
||||
position: relative;
|
||||
.slide-item-class {
|
||||
position: relative;
|
||||
|
||||
.sub-type {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
.sub-type {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
&.top {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.local {
|
||||
transition: all 0.3s;
|
||||
font-size: 14rem;
|
||||
color: gray;
|
||||
//background: #f9f9f9;
|
||||
background: linear-gradient(to right, rgb(36, 34, 84), rgb(7, 5, 16));
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.card {
|
||||
margin: 20rem;
|
||||
margin-top: var(--common-header-height);
|
||||
padding: 20rem;
|
||||
border-radius: 8rem;
|
||||
width: 100%;
|
||||
//background: white;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgb(53, 51, 110),
|
||||
rgb(29, 21, 66)
|
||||
);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@width: 35rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: 17vw;
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.top {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sub-type-notice {
|
||||
position: absolute;
|
||||
background: rgba(black, 0.4);
|
||||
top: 100rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 3rem 12rem;
|
||||
border-radius: 10rem;
|
||||
z-index: 3;
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
.local {
|
||||
transition: all 0.3s;
|
||||
font-size: 14rem;
|
||||
color: gray;
|
||||
//background: #f9f9f9;
|
||||
background: linear-gradient(to right, rgb(36, 34, 84), rgb(7, 5, 16));
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.card {
|
||||
margin: 20rem;
|
||||
margin-top: var(--common-header-height);
|
||||
padding: 20rem;
|
||||
border-radius: 8rem;
|
||||
width: 100%;
|
||||
//background: white;
|
||||
background: linear-gradient(to right, rgb(53, 51, 110), rgb(29, 21, 66));
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@width: 35rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: 17vw;
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-type-notice {
|
||||
position: absolute;
|
||||
background: rgba(black, 0.4);
|
||||
top: 100rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 3rem 12rem;
|
||||
border-radius: 10rem;
|
||||
z-index: 3;
|
||||
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,123 +29,123 @@
|
||||
</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({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
const store = useBaseStore()
|
||||
const props = defineProps({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const subTypeRef = ref(null)
|
||||
const state = reactive({
|
||||
index: 0,
|
||||
subType: -1,
|
||||
subTypeVisible: false,
|
||||
subTypeHeight: '0',
|
||||
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
|
||||
subTypeIsTop: false,
|
||||
})
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
function showSubType(e) {
|
||||
const subTypeRef = ref(null)
|
||||
const state = reactive({
|
||||
index: 0,
|
||||
subType: -1,
|
||||
subTypeVisible: false,
|
||||
subTypeHeight: '0',
|
||||
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
|
||||
subTypeIsTop: false
|
||||
})
|
||||
|
||||
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) {
|
||||
// console.log('pageClick')
|
||||
if (state.subTypeVisible) {
|
||||
state.subTypeIsTop = state.subTypeVisible = false
|
||||
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE)
|
||||
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) {
|
||||
// console.log('pageClick')
|
||||
if (state.subTypeVisible) {
|
||||
state.subTypeIsTop = state.subTypeVisible = false
|
||||
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE)
|
||||
Utils.$stopPropagation(e)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// getData()
|
||||
})
|
||||
onUnmounted(() => {})
|
||||
onMounted(() => {
|
||||
// getData()
|
||||
})
|
||||
onUnmounted(() => {})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.slide-item-class {
|
||||
position: relative;
|
||||
.slide-item-class {
|
||||
position: relative;
|
||||
|
||||
.sub-type {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
.sub-type {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
|
||||
&.top {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: var(--common-header-height);
|
||||
padding: 20rem 5rem;
|
||||
width: 100%;
|
||||
background: rgba(black, 0.4);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
gap: 10rem;
|
||||
padding-left: 20rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@width: 50rem;
|
||||
width: @width + 5rem;
|
||||
margin: 0 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&.top {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sub-type-notice {
|
||||
position: absolute;
|
||||
.card {
|
||||
margin-top: var(--common-header-height);
|
||||
padding: 20rem 5rem;
|
||||
width: 100%;
|
||||
background: rgba(black, 0.4);
|
||||
top: 100rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 3rem 12rem;
|
||||
border-radius: 10rem;
|
||||
z-index: 3;
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
gap: 10rem;
|
||||
padding-left: 20rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@width: 50rem;
|
||||
width: @width + 5rem;
|
||||
margin: 0 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-type-notice {
|
||||
position: absolute;
|
||||
background: rgba(black, 0.4);
|
||||
top: 100rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 3rem 12rem;
|
||||
border-radius: 10rem;
|
||||
z-index: 3;
|
||||
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({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
const props = defineProps({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -16,115 +16,115 @@
|
||||
</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({
|
||||
cbs: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
api: {
|
||||
type: Function,
|
||||
default: void 0,
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
})
|
||||
|
||||
const baseStore = useBaseStore()
|
||||
|
||||
const p = {
|
||||
onShowComments() {
|
||||
console.log('onShowComments')
|
||||
},
|
||||
}
|
||||
|
||||
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,
|
||||
})
|
||||
|
||||
function loadMore() {
|
||||
if (!baseStore.loading) {
|
||||
state.pageNo++
|
||||
getData()
|
||||
const props = defineProps({
|
||||
cbs: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
api: {
|
||||
type: Function,
|
||||
default: void 0
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
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,
|
||||
})
|
||||
// console.log('getSlide4Data-', 'refresh', refresh, res)
|
||||
baseStore.loading = false
|
||||
if (res.code === 200) {
|
||||
state.totalSize = res.data.total
|
||||
if (refresh) {
|
||||
state.list = []
|
||||
}
|
||||
state.list = state.list.concat(res.data.list)
|
||||
} else {
|
||||
state.pageNo--
|
||||
}
|
||||
const baseStore = useBaseStore()
|
||||
|
||||
const p = {
|
||||
onShowComments() {
|
||||
console.log('onShowComments')
|
||||
}
|
||||
}
|
||||
|
||||
function dislike() {
|
||||
listRef.value.dislike(state.list[1])
|
||||
state.list[state.index] = state.list[1]
|
||||
$notice('操作成功，将减少此类视频的推荐')
|
||||
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
|
||||
})
|
||||
|
||||
function loadMore() {
|
||||
if (!baseStore.loading) {
|
||||
state.pageNo++
|
||||
getData()
|
||||
}
|
||||
}
|
||||
|
||||
function end() {
|
||||
// this.$notice('暂时没有更多了')
|
||||
}
|
||||
|
||||
function click(uniqueId) {
|
||||
if (uniqueId !== state.uniqueId) return
|
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
|
||||
uniqueId,
|
||||
index: state.index,
|
||||
type: EVENT_KEY.ITEM_TOGGLE,
|
||||
})
|
||||
}
|
||||
|
||||
function updateItem({ position, item }) {
|
||||
if (position.uniqueId === state.uniqueId) {
|
||||
state.list[position.index] = item
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
bus.on(EVENT_KEY.SINGLE_CLICK, click)
|
||||
bus.on(EVENT_KEY.UPDATE_ITEM, updateItem)
|
||||
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
|
||||
})
|
||||
onUnmounted(() => {
|
||||
bus.off(EVENT_KEY.SINGLE_CLICK, click)
|
||||
bus.on(EVENT_KEY.UPDATE_ITEM, updateItem)
|
||||
// console.log('getSlide4Data-', 'refresh', refresh, res)
|
||||
baseStore.loading = false
|
||||
if (res.code === 200) {
|
||||
state.totalSize = res.data.total
|
||||
if (refresh) {
|
||||
state.list = []
|
||||
}
|
||||
state.list = state.list.concat(res.data.list)
|
||||
} else {
|
||||
state.pageNo--
|
||||
}
|
||||
}
|
||||
|
||||
function dislike() {
|
||||
listRef.value.dislike(state.list[1])
|
||||
state.list[state.index] = state.list[1]
|
||||
$notice('操作成功，将减少此类视频的推荐')
|
||||
}
|
||||
|
||||
function end() {
|
||||
// this.$notice('暂时没有更多了')
|
||||
}
|
||||
|
||||
function click(uniqueId) {
|
||||
if (uniqueId !== state.uniqueId) return
|
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
|
||||
uniqueId,
|
||||
index: state.index,
|
||||
type: EVENT_KEY.ITEM_TOGGLE
|
||||
})
|
||||
}
|
||||
|
||||
function updateItem({ position, item }) {
|
||||
if (position.uniqueId === state.uniqueId) {
|
||||
state.list[position.index] = item
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
bus.on(EVENT_KEY.SINGLE_CLICK, click)
|
||||
bus.on(EVENT_KEY.UPDATE_ITEM, updateItem)
|
||||
})
|
||||
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,42 +14,42 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Help',
|
||||
props: {},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {},
|
||||
}
|
||||
export default {
|
||||
name: 'Help',
|
||||
props: {},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.Help {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
.Help {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
margin-top: 60rem;
|
||||
height: calc(var(--vh, 1vh) * 100 - 60rem);
|
||||
.content {
|
||||
margin-top: 60rem;
|
||||
height: calc(var(--vh, 1vh) * 100 - 60rem);
|
||||
|
||||
iframe {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
iframe {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
width: 100%;
|
||||
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,146 +72,146 @@
|
||||
</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 {
|
||||
name: 'login',
|
||||
components: {
|
||||
Check,
|
||||
Tooltip,
|
||||
Loading,
|
||||
export default {
|
||||
name: 'login',
|
||||
components: {
|
||||
Check,
|
||||
Tooltip,
|
||||
Loading
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isAgree: false,
|
||||
isOtherLogin: false,
|
||||
showAnim: false,
|
||||
showTooltip: false,
|
||||
loading: {
|
||||
login: false,
|
||||
getPhone: false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.getPhone()
|
||||
},
|
||||
methods: {
|
||||
async getPhone() {
|
||||
this.loading.getPhone = true
|
||||
await this.$sleep(1000)
|
||||
this.loading.getPhone = false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isAgree: false,
|
||||
isOtherLogin: false,
|
||||
showAnim: false,
|
||||
showTooltip: false,
|
||||
loading: {
|
||||
login: false,
|
||||
getPhone: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.getPhone()
|
||||
},
|
||||
methods: {
|
||||
async getPhone() {
|
||||
this.loading.getPhone = true
|
||||
await this.$sleep(1000)
|
||||
this.loading.getPhone = false
|
||||
},
|
||||
login() {
|
||||
if (this.isAgree) {
|
||||
this.loading.login = true
|
||||
} else {
|
||||
if (!this.showAnim && !this.showTooltip) {
|
||||
this.showAnim = true
|
||||
setTimeout(() => {
|
||||
this.showAnim = false
|
||||
this.showTooltip = true
|
||||
}, 500)
|
||||
setTimeout(() => {
|
||||
this.showTooltip = false
|
||||
}, 3000)
|
||||
}
|
||||
login() {
|
||||
if (this.isAgree) {
|
||||
this.loading.login = true
|
||||
} else {
|
||||
if (!this.showAnim && !this.showTooltip) {
|
||||
this.showAnim = true
|
||||
setTimeout(() => {
|
||||
this.showAnim = false
|
||||
this.showTooltip = true
|
||||
}, 500)
|
||||
setTimeout(() => {
|
||||
this.showTooltip = false
|
||||
}, 3000)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.login {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: black;
|
||||
font-size: 14rem;
|
||||
background: white;
|
||||
|
||||
.content {
|
||||
padding: 60rem 30rem;
|
||||
|
||||
.desc {
|
||||
margin-bottom: 60rem;
|
||||
margin-top: 120rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
margin-bottom: 20rem;
|
||||
}
|
||||
|
||||
.phone-number {
|
||||
letter-spacing: 3rem;
|
||||
font-size: 30rem;
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.protocol {
|
||||
position: relative;
|
||||
color: gray;
|
||||
margin-top: 20rem;
|
||||
font-size: 12rem;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
padding-top: 1rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.other-login {
|
||||
position: absolute;
|
||||
bottom: 40rem;
|
||||
font-size: 12rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: calc(100vw - 60rem);
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
|
||||
.icons {
|
||||
img {
|
||||
width: 40rem;
|
||||
margin-right: 15rem;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.other-login-text {
|
||||
position: absolute;
|
||||
bottom: 55rem;
|
||||
font-size: 12rem;
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.login {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: black;
|
||||
font-size: 14rem;
|
||||
background: white;
|
||||
|
||||
.content {
|
||||
padding: 60rem 30rem;
|
||||
|
||||
.desc {
|
||||
margin-bottom: 60rem;
|
||||
margin-top: 120rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
margin-bottom: 20rem;
|
||||
}
|
||||
|
||||
.phone-number {
|
||||
letter-spacing: 3rem;
|
||||
font-size: 30rem;
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.protocol {
|
||||
position: relative;
|
||||
color: gray;
|
||||
margin-top: 20rem;
|
||||
font-size: 12rem;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
padding-top: 1rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.other-login {
|
||||
position: absolute;
|
||||
bottom: 40rem;
|
||||
font-size: 12rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: calc(100vw - 60rem);
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
|
||||
.icons {
|
||||
img {
|
||||
width: 40rem;
|
||||
margin-right: 15rem;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.other-login-text {
|
||||
position: absolute;
|
||||
bottom: 55rem;
|
||||
font-size: 12rem;
|
||||
transform: translateX(-50%);
|
||||
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,88 +82,88 @@
|
||||
</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 {
|
||||
name: 'OtherLogin',
|
||||
extends: Base,
|
||||
components: {
|
||||
Check,
|
||||
Tooltip,
|
||||
LoginInput,
|
||||
FromBottomDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
notice: '',
|
||||
export default {
|
||||
name: 'OtherLogin',
|
||||
extends: Base,
|
||||
components: {
|
||||
Check,
|
||||
Tooltip,
|
||||
LoginInput,
|
||||
FromBottomDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
notice: ''
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
async getCode() {
|
||||
let res = await this.check()
|
||||
if (res) {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.$nav('/login/verification-code')
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
async getCode() {
|
||||
let res = await this.check()
|
||||
if (res) {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.$nav('/login/verification-code')
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
async otherLogin() {
|
||||
let res = await this.check()
|
||||
if (res) {
|
||||
this.isOtherLogin = true
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import 'Base.less';
|
||||
|
||||
.other-login {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: black;
|
||||
font-size: 14rem;
|
||||
background: white;
|
||||
|
||||
.block-dialog {
|
||||
color: black;
|
||||
|
||||
.item {
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top: 1px solid gainsboro;
|
||||
|
||||
img {
|
||||
height: 25rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
&:nth-last-child(1) {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.space {
|
||||
height: 10rem;
|
||||
background: whitesmoke;
|
||||
async otherLogin() {
|
||||
let res = await this.check()
|
||||
if (res) {
|
||||
this.isOtherLogin = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import 'Base.less';
|
||||
|
||||
.other-login {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: black;
|
||||
font-size: 14rem;
|
||||
background: white;
|
||||
|
||||
.block-dialog {
|
||||
color: black;
|
||||
|
||||
.item {
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top: 1px solid gainsboro;
|
||||
|
||||
img {
|
||||
height: 25rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
&:nth-last-child(1) {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.space {
|
||||
height: 10rem;
|
||||
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,66 +53,64 @@
|
||||
|
||||
<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 {
|
||||
name: 'PasswordLogin',
|
||||
extends: Base,
|
||||
components: {
|
||||
Check,
|
||||
Tooltip,
|
||||
LoginInput,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
password: '',
|
||||
code: '',
|
||||
notice: '',
|
||||
export default {
|
||||
name: 'PasswordLogin',
|
||||
extends: Base,
|
||||
components: {
|
||||
Check,
|
||||
Tooltip,
|
||||
LoginInput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
password: '',
|
||||
code: '',
|
||||
notice: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
return !(this.phone && this.password)
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
async login() {
|
||||
let res = await this.check()
|
||||
if (res) {
|
||||
this.loading = true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
return !(this.phone && this.password)
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
async login() {
|
||||
let res = await this.check()
|
||||
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 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: black;
|
||||
font-size: 14rem;
|
||||
background: white;
|
||||
}
|
||||
.PasswordLogin {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
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,103 +59,99 @@
|
||||
</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 {
|
||||
name: 'RetrievePassword',
|
||||
extends: Base,
|
||||
components: {
|
||||
Check,
|
||||
Tooltip,
|
||||
LoginInput,
|
||||
export default {
|
||||
name: 'RetrievePassword',
|
||||
extends: Base,
|
||||
components: {
|
||||
Check,
|
||||
Tooltip,
|
||||
LoginInput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
password: '',
|
||||
code: '',
|
||||
notice: '',
|
||||
isSendVerificationCode: true,
|
||||
showVoiceCode: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
return !(this.code && this.password)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
this.showVoiceCode = true
|
||||
}, 3000)
|
||||
},
|
||||
methods: {
|
||||
getVoiceCode() {
|
||||
return this.$showNoticeDialog(
|
||||
'语音验证码',
|
||||
'我们将以电话的方式告知你验证码，请注意接听',
|
||||
'',
|
||||
() => {
|
||||
setTimeout(() => {
|
||||
this.$showConfirmDialog(
|
||||
'',
|
||||
'您的手机可能由于空号/欠费/停机无法收到验证码，请恢复手机号状态，如果' +
|
||||
'您因为换号无法收到验证码，可以尝试找回账号',
|
||||
'',
|
||||
() => {},
|
||||
null,
|
||||
'找回账号',
|
||||
'返回',
|
||||
''
|
||||
)
|
||||
}, 2000)
|
||||
},
|
||||
'知道了'
|
||||
)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
password: '',
|
||||
code: '',
|
||||
notice: '',
|
||||
isSendVerificationCode: true,
|
||||
showVoiceCode: false,
|
||||
//TODO loading样式不对
|
||||
async sendCode() {
|
||||
this.$showLoading()
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
this.isSendVerificationCode = true
|
||||
},
|
||||
async login() {
|
||||
let res = await this.check()
|
||||
if (res) {
|
||||
this.loading = true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
return !(this.code && this.password)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
this.showVoiceCode = true
|
||||
}, 3000)
|
||||
},
|
||||
methods: {
|
||||
getVoiceCode() {
|
||||
return this.$showNoticeDialog(
|
||||
'语音验证码',
|
||||
'我们将以电话的方式告知你验证码，请注意接听',
|
||||
'',
|
||||
() => {
|
||||
setTimeout(() => {
|
||||
this.$showConfirmDialog(
|
||||
'',
|
||||
'您的手机可能由于空号/欠费/停机无法收到验证码，请恢复手机号状态，如果' +
|
||||
'您因为换号无法收到验证码，可以尝试找回账号',
|
||||
'',
|
||||
() => {},
|
||||
null,
|
||||
'找回账号',
|
||||
'返回',
|
||||
'',
|
||||
)
|
||||
}, 2000)
|
||||
},
|
||||
'知道了',
|
||||
)
|
||||
},
|
||||
//TODO loading样式不对
|
||||
async sendCode() {
|
||||
this.$showLoading()
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
this.isSendVerificationCode = true
|
||||
},
|
||||
async login() {
|
||||
let res = await this.check()
|
||||
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 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: black;
|
||||
font-size: 14rem;
|
||||
background: white;
|
||||
}
|
||||
.RetrievePassword {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
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,95 +36,95 @@
|
||||
</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 {
|
||||
name: 'VerificationCode',
|
||||
components: {
|
||||
Check,
|
||||
LoginInput,
|
||||
export default {
|
||||
name: 'VerificationCode',
|
||||
components: {
|
||||
Check,
|
||||
LoginInput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAnim: false,
|
||||
showTooltip: false,
|
||||
loading: false,
|
||||
phone: '',
|
||||
password: '',
|
||||
code: '',
|
||||
isSendVerificationCode: true,
|
||||
showVoiceCode: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
this.showVoiceCode = true
|
||||
}, 3000)
|
||||
},
|
||||
methods: {
|
||||
getVoiceCode() {
|
||||
return this.$showNoticeDialog(
|
||||
'语音验证码',
|
||||
'我们将以电话的方式告知你验证码，请注意接听',
|
||||
'',
|
||||
() => {
|
||||
setTimeout(() => {
|
||||
this.$showConfirmDialog(
|
||||
'',
|
||||
'您的手机可能由于空号/欠费/停机无法收到验证码，请恢复手机号状态，如果' +
|
||||
'您因为换号无法收到验证码，可以尝试找回账号',
|
||||
'',
|
||||
() => {},
|
||||
null,
|
||||
'找回账号',
|
||||
'返回',
|
||||
''
|
||||
)
|
||||
}, 2000)
|
||||
},
|
||||
'知道了'
|
||||
)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAnim: false,
|
||||
showTooltip: false,
|
||||
loading: false,
|
||||
phone: '',
|
||||
password: '',
|
||||
code: '',
|
||||
isSendVerificationCode: true,
|
||||
showVoiceCode: false,
|
||||
}
|
||||
//TODO loading样式不对
|
||||
async sendCode() {
|
||||
this.$showLoading()
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
this.isSendVerificationCode = true
|
||||
},
|
||||
created() {
|
||||
login() {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.showVoiceCode = true
|
||||
}, 3000)
|
||||
},
|
||||
methods: {
|
||||
getVoiceCode() {
|
||||
return this.$showNoticeDialog(
|
||||
'语音验证码',
|
||||
'我们将以电话的方式告知你验证码，请注意接听',
|
||||
'',
|
||||
() => {
|
||||
setTimeout(() => {
|
||||
this.$showConfirmDialog(
|
||||
'',
|
||||
'您的手机可能由于空号/欠费/停机无法收到验证码，请恢复手机号状态，如果' +
|
||||
'您因为换号无法收到验证码，可以尝试找回账号',
|
||||
'',
|
||||
() => {},
|
||||
null,
|
||||
'找回账号',
|
||||
'返回',
|
||||
'',
|
||||
)
|
||||
}, 2000)
|
||||
},
|
||||
'知道了',
|
||||
)
|
||||
},
|
||||
//TODO loading样式不对
|
||||
async sendCode() {
|
||||
this.$showLoading()
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
this.isSendVerificationCode = true
|
||||
},
|
||||
login() {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.isSendVerificationCode = true
|
||||
this.loading = false
|
||||
}, 1000)
|
||||
},
|
||||
},
|
||||
this.loading = false
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import 'Base.less';
|
||||
@import '../../assets/less/index';
|
||||
@import 'Base.less';
|
||||
|
||||
.VerificationCode {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: black;
|
||||
font-size: 14rem;
|
||||
background: white;
|
||||
.VerificationCode {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: black;
|
||||
font-size: 14rem;
|
||||
background: white;
|
||||
|
||||
.options {
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 20rem;
|
||||
}
|
||||
.options {
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 20rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -59,170 +59,168 @@
|
||||
/>
|
||||
</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 {
|
||||
name: 'LoginInput',
|
||||
props: {
|
||||
modelValue: '',
|
||||
placeholder: '',
|
||||
type: {
|
||||
type: String,
|
||||
default: 'phone',
|
||||
},
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isSendVerificationCode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
export default {
|
||||
name: 'LoginInput',
|
||||
props: {
|
||||
modelValue: '',
|
||||
placeholder: '',
|
||||
type: {
|
||||
type: String,
|
||||
default: 'phone'
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isTyping: false,
|
||||
verificationCodeBtnText: 60,
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isSendVerificationCode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isTyping: false,
|
||||
verificationCodeBtnText: 60
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue
|
||||
},
|
||||
set(e) {
|
||||
this.$emit('update:modelValue', e)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue
|
||||
},
|
||||
set(e) {
|
||||
this.$emit('update:modelValue', e)
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isSendVerificationCode: {
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.verificationCodeBtnText = 60
|
||||
let ticker = setInterval(() => {
|
||||
if (this.verificationCodeBtnText > 0) {
|
||||
this.verificationCodeBtnText--
|
||||
} else {
|
||||
this.verificationCodeBtnText = '重新发送'
|
||||
this.$emit('update:isSendVerificationCode', false)
|
||||
clearInterval(ticker)
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
delaySetTypingFalse() {
|
||||
setTimeout(() => {
|
||||
this.isTyping = false
|
||||
})
|
||||
},
|
||||
send() {
|
||||
if (!this.isSendVerificationCode) {
|
||||
this.$emit('send')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isSendVerificationCode: {
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.verificationCodeBtnText = 60
|
||||
let ticker = setInterval(() => {
|
||||
if (this.verificationCodeBtnText > 0) {
|
||||
this.verificationCodeBtnText--
|
||||
} else {
|
||||
this.verificationCodeBtnText = '重新发送'
|
||||
this.$emit('update:isSendVerificationCode', false)
|
||||
clearInterval(ticker)
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
delaySetTypingFalse() {
|
||||
setTimeout(() => {
|
||||
this.isTyping = false
|
||||
})
|
||||
},
|
||||
send() {
|
||||
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;
|
||||
font-size: 14rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
background: whitesmoke;
|
||||
padding: 15rem 10rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10rem;
|
||||
padding-right: 10rem;
|
||||
position: relative;
|
||||
|
||||
&.no-border {
|
||||
&::before {
|
||||
content: '';
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.flex1 {
|
||||
flex: 1;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 10rem;
|
||||
position: absolute;
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-top: 4rem;
|
||||
margin-left: 5rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 4rem solid transparent;
|
||||
border-top: 5rem solid black;
|
||||
}
|
||||
align-items: center;
|
||||
margin-right: 10rem;
|
||||
padding-right: 10rem;
|
||||
position: relative;
|
||||
|
||||
&.no-border {
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 8rem;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
background: gainsboro;
|
||||
content: '';
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
//background: red;
|
||||
position: relative;
|
||||
|
||||
&.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 10rem;
|
||||
position: absolute;
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
&.flex1 {
|
||||
flex: 1;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 90%;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: whitesmoke;
|
||||
caret-color: red;
|
||||
img {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 10rem;
|
||||
position: absolute;
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
&[type='password'] {
|
||||
//letter-spacing: 10rem;
|
||||
}
|
||||
.arrow {
|
||||
margin-top: 4rem;
|
||||
margin-left: 5rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 4rem solid transparent;
|
||||
border-top: 5rem solid black;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 8rem;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
background: gainsboro;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
//background: red;
|
||||
position: relative;
|
||||
|
||||
&.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 10rem;
|
||||
position: absolute;
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 90%;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: whitesmoke;
|
||||
caret-color: red;
|
||||
|
||||
&[type='password'] {
|
||||
//letter-spacing: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,54 +7,54 @@
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Popover',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {},
|
||||
}
|
||||
export default {
|
||||
name: 'Popover',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.scale-enter-from,
|
||||
.scale-leave-to {
|
||||
//transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
.scale-enter-from,
|
||||
.scale-leave-to {
|
||||
//transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.Tooltip {
|
||||
z-index: 2;
|
||||
.Tooltip {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
padding: 10rem;
|
||||
border-radius: 8rem;
|
||||
background: black;
|
||||
|
||||
.arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 7rem solid transparent;
|
||||
border-top: 7rem solid black;
|
||||
position: absolute;
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
padding: 10rem;
|
||||
border-radius: 8rem;
|
||||
background: black;
|
||||
|
||||
.arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 7rem solid transparent;
|
||||
border-top: 7rem solid black;
|
||||
position: absolute;
|
||||
left: 10rem;
|
||||
bottom: -14rem;
|
||||
}
|
||||
left: 10rem;
|
||||
bottom: -14rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
1221
src/pages/me/Me.vue
1221
src/pages/me/Me.vue
File diff suppressed because it is too large
Load Diff
@ -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,159 +34,159 @@
|
||||
</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 {
|
||||
name: 'MyCard',
|
||||
components: {
|
||||
Share,
|
||||
},
|
||||
export default {
|
||||
name: 'MyCard',
|
||||
components: {
|
||||
Share
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isSharing: false,
|
||||
okText: '',
|
||||
data() {
|
||||
return {
|
||||
isSharing: false,
|
||||
okText: '',
|
||||
|
||||
showSharePassword: false,
|
||||
shareToFriend: false,
|
||||
shareType: -1,
|
||||
showSharePassword: false,
|
||||
shareToFriend: false,
|
||||
shareType: -1,
|
||||
|
||||
showDouyinCode: false,
|
||||
showDouyinCode: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
shareType(newVal, oldVal) {
|
||||
if (newVal === -1) return
|
||||
this.showSharePassword = true
|
||||
switch (newVal) {
|
||||
case 2:
|
||||
case 3:
|
||||
return (this.okText = '去微信粘贴')
|
||||
case 4:
|
||||
case 5:
|
||||
return (this.okText = '去QQ粘贴')
|
||||
case 8:
|
||||
return (this.okText = '去微博粘贴')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
shareType(newVal, oldVal) {
|
||||
if (newVal === -1) return
|
||||
this.showSharePassword = true
|
||||
switch (newVal) {
|
||||
case 2:
|
||||
case 3:
|
||||
return (this.okText = '去微信粘贴')
|
||||
case 4:
|
||||
case 5:
|
||||
return (this.okText = '去QQ粘贴')
|
||||
case 8:
|
||||
return (this.okText = '去微博粘贴')
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['userinfo']),
|
||||
},
|
||||
methods: {
|
||||
_checkImgUrl,
|
||||
delayShowDialog(cb) {
|
||||
setTimeout(() => {
|
||||
cb()
|
||||
}, 100)
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['userinfo'])
|
||||
},
|
||||
methods: {
|
||||
_checkImgUrl,
|
||||
delayShowDialog(cb) {
|
||||
setTimeout(() => {
|
||||
cb()
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
#MyCard {
|
||||
background: rgb(136, 132, 133);
|
||||
#MyCard {
|
||||
background: rgb(136, 132, 133);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
font-size: 14rem;
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15rem;
|
||||
height: 60rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15rem;
|
||||
height: 60rem;
|
||||
.share {
|
||||
width: 24rem;
|
||||
height: 24rem;
|
||||
margin-left: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: var(--common-header-height);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.qrcode {
|
||||
margin-top: 12vh;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.share {
|
||||
width: 24rem;
|
||||
height: 24rem;
|
||||
margin-left: 15rem;
|
||||
.qrcode-bg {
|
||||
width: 60vw;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 25vw;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: var(--common-header-height);
|
||||
.name {
|
||||
font-weight: bold;
|
||||
margin-top: 20rem;
|
||||
font-size: 16rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notice {
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
margin-top: 20rem;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 30rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
|
||||
.btn {
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
|
||||
.qrcode {
|
||||
margin-top: 12vh;
|
||||
.wrapper {
|
||||
background: rgba(252, 250, 250, 0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
padding: 18rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.qrcode-bg {
|
||||
width: 60vw;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 25vw;
|
||||
}
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
margin-top: 20rem;
|
||||
font-size: 16rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notice {
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
margin-top: 20rem;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 30rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
|
||||
.btn {
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
|
||||
.wrapper {
|
||||
background: rgba(252, 250, 250, 0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
padding: 18rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 26rem;
|
||||
}
|
||||
img {
|
||||
width: 26rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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,376 +148,370 @@
|
||||
</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 {
|
||||
name: 'MyMusic',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Switches,
|
||||
SlideItemMusic,
|
||||
IndicatorLight,
|
||||
GuessMusic,
|
||||
CollectMusic,
|
||||
Loading,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
slideIndex: 1,
|
||||
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,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
},
|
||||
collectMusic: [],
|
||||
recommendMusic: [],
|
||||
guessMusic: [],
|
||||
//TODO 两个page页面的播放冲突未做
|
||||
export default {
|
||||
name: 'MyMusic',
|
||||
components: {
|
||||
FromBottomDialog,
|
||||
Switches,
|
||||
SlideItemMusic,
|
||||
IndicatorLight,
|
||||
GuessMusic,
|
||||
CollectMusic,
|
||||
Loading
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
slideIndex: 1,
|
||||
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,
|
||||
author: '周杰伦',
|
||||
duration: 60,
|
||||
use_count: 37441000,
|
||||
is_collect: false,
|
||||
is_play: false
|
||||
},
|
||||
collectMusic: [],
|
||||
recommendMusic: [],
|
||||
guessMusic: [],
|
||||
|
||||
isShowCollectDialog: false,
|
||||
isShowFloatPlay: false,
|
||||
isShowCollectDialog: false,
|
||||
isShowFloatPlay: false,
|
||||
|
||||
isAutoPlay: true,
|
||||
isCollect: false,
|
||||
isAutoPlay: true,
|
||||
isCollect: false,
|
||||
|
||||
page2SlideIndex: -1,
|
||||
page2IsPlay: false,
|
||||
page2SlideIndex: -1,
|
||||
page2IsPlay: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['bodyWidth']),
|
||||
page2Music() {
|
||||
return this.collectMusic.concat(this.recommendMusic)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCollectMusic()
|
||||
},
|
||||
methods: {
|
||||
togglePage2Play() {
|
||||
this.page2IsPlay = !this.page2IsPlay
|
||||
if (this.page2IsPlay) {
|
||||
this.$refs.CollectMusic.play(this.page2SlideIndex)
|
||||
} else {
|
||||
this.$refs.CollectMusic.pause()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['bodyWidth']),
|
||||
page2Music() {
|
||||
return this.collectMusic.concat(this.recommendMusic)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getCollectMusic()
|
||||
},
|
||||
methods: {
|
||||
togglePage2Play() {
|
||||
this.page2IsPlay = !this.page2IsPlay
|
||||
if (this.page2IsPlay) {
|
||||
this.$refs.CollectMusic.play(this.page2SlideIndex)
|
||||
} else {
|
||||
this.$refs.CollectMusic.pause()
|
||||
}
|
||||
},
|
||||
page2PlayMusic(item) {
|
||||
this.currentMusic = item
|
||||
this.isShowFloatPlay = true
|
||||
this.page2IsPlay = true
|
||||
this.page2SlideIndex = this.page2Music.findIndex(
|
||||
(v) => v.name === item.name,
|
||||
)
|
||||
this.isShowCollectDialog = true
|
||||
this.$refs.CollectMusic.play(this.page2SlideIndex)
|
||||
},
|
||||
async getCollectMusic() {
|
||||
this.loading = true
|
||||
let res = await userCollect()
|
||||
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,
|
||||
)
|
||||
}
|
||||
},
|
||||
page2PlayMusic(item) {
|
||||
this.currentMusic = item
|
||||
this.isShowFloatPlay = true
|
||||
this.page2IsPlay = true
|
||||
this.page2SlideIndex = this.page2Music.findIndex((v) => v.name === item.name)
|
||||
this.isShowCollectDialog = true
|
||||
this.$refs.CollectMusic.play(this.page2SlideIndex)
|
||||
},
|
||||
async getCollectMusic() {
|
||||
this.loading = true
|
||||
let res = await userCollect()
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.MyMusic {
|
||||
.MyMusic {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.header {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
|
||||
.header {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
height: 50rem;
|
||||
.back {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.indicator-ctn {
|
||||
width: 60vw;
|
||||
}
|
||||
}
|
||||
|
||||
.my-collect {
|
||||
margin-top: 50rem;
|
||||
color: rgba(88, 88, 96);
|
||||
position: relative;
|
||||
|
||||
.wrapper {
|
||||
padding: var(--page-padding);
|
||||
padding-bottom: 80rem;
|
||||
}
|
||||
|
||||
.play-all {
|
||||
margin-bottom: 20rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
color: white;
|
||||
|
||||
.back {
|
||||
z-index: 10;
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 30rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 13rem;
|
||||
color: gray;
|
||||
margin-left: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-ctn {
|
||||
width: 60vw;
|
||||
.menu {
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.my-collect {
|
||||
margin-top: 50rem;
|
||||
color: rgba(88, 88, 96);
|
||||
position: relative;
|
||||
|
||||
.wrapper {
|
||||
padding: var(--page-padding);
|
||||
padding-bottom: 80rem;
|
||||
}
|
||||
|
||||
.play-all {
|
||||
margin-bottom: 20rem;
|
||||
.collect-list,
|
||||
.recommend-list {
|
||||
.item {
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: white;
|
||||
margin-bottom: 15rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 30rem;
|
||||
.cover-wrapper {
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 13rem;
|
||||
color: gray;
|
||||
margin-left: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.collect-list,
|
||||
.recommend-list {
|
||||
.item {
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
|
||||
.cover-wrapper {
|
||||
margin-right: 10rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.cover {
|
||||
border-radius: 2rem;
|
||||
@width: 60rem;
|
||||
width: @width;
|
||||
object-fit: cover;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 40vw;
|
||||
}
|
||||
|
||||
.author,
|
||||
.desc-bottom {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
|
||||
.desc-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
font-size: 10rem;
|
||||
background: var(--second-btn-color-tran);
|
||||
padding: 2rem 5rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
|
||||
.duration {
|
||||
margin-right: 14rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.playing-icon {
|
||||
width: 24rem;
|
||||
.cover {
|
||||
border-radius: 2rem;
|
||||
@width: 60rem;
|
||||
width: @width;
|
||||
object-fit: cover;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 40vw;
|
||||
}
|
||||
|
||||
.collect-icon {
|
||||
margin-left: 30rem;
|
||||
.author,
|
||||
.desc-bottom {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 24rem;
|
||||
.desc-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
font-size: 10rem;
|
||||
background: var(--second-btn-color-tran);
|
||||
padding: 2rem 5rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
|
||||
.duration {
|
||||
margin-right: 14rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recommend {
|
||||
color: white;
|
||||
margin: 30rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.auto-play {
|
||||
font-size: 13rem;
|
||||
color: var(--second-text-color);
|
||||
margin-right: 10rem;
|
||||
.playing-icon {
|
||||
width: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playing {
|
||||
padding: 0 var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
color: white;
|
||||
background: rgba(56, 59, 68);
|
||||
.collect-icon {
|
||||
margin-left: 30rem;
|
||||
|
||||
.playing-wrapper {
|
||||
transform: translateY(-10rem);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cover-wrapper {
|
||||
background: rgba(56, 59, 68);
|
||||
padding: 7rem;
|
||||
border-radius: 50%;
|
||||
|
||||
.cover {
|
||||
background: rgba(97, 98, 103);
|
||||
padding: 3rem;
|
||||
@width: 50rem;
|
||||
height: @width;
|
||||
width: @width;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
img {
|
||||
width: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin: 0 10rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.option {
|
||||
width: 38rem;
|
||||
height: 38rem;
|
||||
margin-right: 20rem;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
width: 28rem;
|
||||
height: 28rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my-collect-dialog {
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
top: 0;
|
||||
background: rgb(136, 132, 133);
|
||||
.recommend {
|
||||
color: white;
|
||||
margin: 30rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.dialog-header {
|
||||
z-index: 9;
|
||||
font-size: 16rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
padding: var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
height: 50rem;
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.close {
|
||||
transform: rotate(-90deg) !important;
|
||||
.auto-play {
|
||||
font-size: 13rem;
|
||||
color: var(--second-text-color);
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my-collect-dialog-enter-active,
|
||||
.my-collect-dialog-leave-active {
|
||||
transition-duration: 300ms;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.playing {
|
||||
padding: 0 var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
color: white;
|
||||
background: rgba(56, 59, 68);
|
||||
|
||||
.my-collect-dialog-enter-from,
|
||||
.my-collect-dialog-leave-to {
|
||||
transition-duration: 300ms;
|
||||
transform: translateY(calc(var(--vh, 1vh) * 100));
|
||||
}
|
||||
.playing-wrapper {
|
||||
transform: translateY(-10rem);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.float-play-enter-active,
|
||||
.float-play-leave-active {
|
||||
transition-duration: 200ms;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.cover-wrapper {
|
||||
background: rgba(56, 59, 68);
|
||||
padding: 7rem;
|
||||
border-radius: 50%;
|
||||
|
||||
.float-play-enter-from,
|
||||
.float-play-leave-to {
|
||||
transition-duration: 200ms;
|
||||
transform: translateY(100%);
|
||||
.cover {
|
||||
background: rgba(97, 98, 103);
|
||||
padding: 3rem;
|
||||
@width: 50rem;
|
||||
height: @width;
|
||||
width: @width;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin: 0 10rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.option {
|
||||
width: 38rem;
|
||||
height: 38rem;
|
||||
margin-right: 20rem;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
width: 28rem;
|
||||
height: 28rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my-collect-dialog {
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
top: 0;
|
||||
background: rgb(136, 132, 133);
|
||||
|
||||
.dialog-header {
|
||||
z-index: 9;
|
||||
font-size: 16rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
padding: var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.close {
|
||||
transform: rotate(-90deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my-collect-dialog-enter-active,
|
||||
.my-collect-dialog-leave-active {
|
||||
transition-duration: 300ms;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.my-collect-dialog-enter-from,
|
||||
.my-collect-dialog-leave-to {
|
||||
transition-duration: 300ms;
|
||||
transform: translateY(calc(var(--vh, 1vh) * 100));
|
||||
}
|
||||
|
||||
.float-play-enter-active,
|
||||
.float-play-leave-active {
|
||||
transition-duration: 200ms;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.float-play-enter-from,
|
||||
.float-play-leave-to {
|
||||
transition-duration: 200ms;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,69 +21,69 @@
|
||||
</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 {
|
||||
name: 'MyRequestUpdate',
|
||||
components: { FromBottomDialog },
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
},
|
||||
created() {},
|
||||
methods: {},
|
||||
}
|
||||
export default {
|
||||
name: 'MyRequestUpdate',
|
||||
components: { FromBottomDialog },
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends'])
|
||||
},
|
||||
created() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.RequestUpdate {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
.RequestUpdate {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding: 60rem 15rem 60rem 15rem;
|
||||
.content {
|
||||
padding: 60rem 15rem 60rem 15rem;
|
||||
|
||||
.request {
|
||||
.list {
|
||||
.item {
|
||||
padding: 10rem 0;
|
||||
.request {
|
||||
.list {
|
||||
.item {
|
||||
padding: 10rem 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@width: 42rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@width: 42rem;
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
.time {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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,161 +54,159 @@
|
||||
<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 {
|
||||
name: 'RequestUpdate',
|
||||
components: { FromBottomDialog },
|
||||
data() {
|
||||
return {
|
||||
isShowOption: false,
|
||||
loading: false,
|
||||
openRequestUpdate: true,
|
||||
export default {
|
||||
name: 'RequestUpdate',
|
||||
components: { FromBottomDialog },
|
||||
data() {
|
||||
return {
|
||||
isShowOption: false,
|
||||
loading: false,
|
||||
openRequestUpdate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends'])
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
this.loading = true
|
||||
await this.$sleep(700)
|
||||
this.loading = false
|
||||
},
|
||||
toggleRequestUpdate() {
|
||||
this.openRequestUpdate = !this.openRequestUpdate
|
||||
this.isShowOption = false
|
||||
if (this.openRequestUpdate) {
|
||||
this.$notice('提醒已开启，再次点击可关闭')
|
||||
} else {
|
||||
this.$notice('提醒已关闭，再次点击可开启')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['friends']),
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
this.loading = true
|
||||
await this.$sleep(700)
|
||||
this.loading = false
|
||||
},
|
||||
toggleRequestUpdate() {
|
||||
this.openRequestUpdate = !this.openRequestUpdate
|
||||
this.isShowOption = false
|
||||
if (this.openRequestUpdate) {
|
||||
this.$notice('提醒已开启，再次点击可关闭')
|
||||
} else {
|
||||
this.$notice('提醒已关闭，再次点击可开启')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../assets/less/index';
|
||||
@import '../../assets/less/index';
|
||||
|
||||
.RequestUpdate {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
.RequestUpdate {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding: 60rem 15rem 60rem 15rem;
|
||||
.content {
|
||||
padding: 60rem 15rem 60rem 15rem;
|
||||
|
||||
.none {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.none {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-top: 100rem;
|
||||
height: 120rem;
|
||||
}
|
||||
img {
|
||||
margin-top: 100rem;
|
||||
height: 120rem;
|
||||
}
|
||||
}
|
||||
|
||||
.request {
|
||||
.list {
|
||||
margin-top: var(--page-padding);
|
||||
.request {
|
||||
.list {
|
||||
margin-top: var(--page-padding);
|
||||
|
||||
.item {
|
||||
padding: 10rem 0;
|
||||
.item {
|
||||
padding: 10rem 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@width: 42rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@width: 42rem;
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
.time {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 10rem;
|
||||
font-size: 16rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 10rem;
|
||||
font-size: 14rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.l-row {
|
||||
padding: 15rem;
|
||||
color: black;
|
||||
text-align: center;
|
||||
.title {
|
||||
margin-top: 10rem;
|
||||
font-size: 16rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 10rem;
|
||||
font-size: 14rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.l-row {
|
||||
padding: 15rem;
|
||||
color: black;
|
||||
text-align: center;
|
||||
|
||||
&:nth-child(2) {
|
||||
border-bottom: 1px solid gainsboro;
|
||||
}
|
||||
}
|
||||
|
||||
.space {
|
||||
height: 10rem;
|
||||
background: whitesmoke;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
position: fixed;
|
||||
padding: 0 15rem 15rem 15rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--main-bg);
|
||||
|
||||
.button {
|
||||
flex: 1;
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-right: 5rem;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
border-bottom: 1px solid gainsboro;
|
||||
}
|
||||
}
|
||||
|
||||
.space {
|
||||
height: 10rem;
|
||||
background: whitesmoke;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
position: fixed;
|
||||
padding: 0 15rem 15rem 15rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--main-bg);
|
||||
|
||||
.button {
|
||||
flex: 1;
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-right: 5rem;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-left: 5rem;
|
||||
}
|
||||
margin-left: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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,195 +78,104 @@
|
||||
</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 {
|
||||
name: 'MusicCollect',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
list: [],
|
||||
audio: new Audio(),
|
||||
currentItem: null,
|
||||
step: null,
|
||||
process: 0,
|
||||
export default {
|
||||
name: 'MusicCollect',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
list: [],
|
||||
audio: new Audio(),
|
||||
currentItem: null,
|
||||
step: null,
|
||||
process: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['bodyWidth'])
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
this.audio.addEventListener('loadedmetadata', (e) => {
|
||||
this.currentItem.duration = this.audio.duration
|
||||
this.step = this.bodyWidth / Math.floor(this.audio.duration)
|
||||
})
|
||||
this.audio.addEventListener('timeupdate', (e) => {
|
||||
this.process = Math.ceil(e.target.currentTime) * this.step
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
this.loading = true
|
||||
let res = await userCollect()
|
||||
this.loading = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.list = res.data.music.list
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useBaseStore, ['bodyWidth']),
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
this.audio.addEventListener('loadedmetadata', (e) => {
|
||||
this.currentItem.duration = this.audio.duration
|
||||
this.step = this.bodyWidth / Math.floor(this.audio.duration)
|
||||
})
|
||||
this.audio.addEventListener('timeupdate', (e) => {
|
||||
this.process = Math.ceil(e.target.currentTime) * this.step
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
this.loading = true
|
||||
let res = await userCollect()
|
||||
this.loading = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.list = res.data.music.list
|
||||
togglePlay(item, list) {
|
||||
list.map((v) => {
|
||||
if (v.name !== item.name) {
|
||||
v.is_play = false
|
||||
}
|
||||
},
|
||||
togglePlay(item, list) {
|
||||
list.map((v) => {
|
||||
if (v.name !== item.name) {
|
||||
v.is_play = false
|
||||
}
|
||||
})
|
||||
item.is_play = !item.is_play
|
||||
if (item.is_play) {
|
||||
if (this.currentItem) {
|
||||
if (this.currentItem.name !== item.name) {
|
||||
this.audio.pause()
|
||||
this.audio.src = item.mp3
|
||||
this.audio.currentTime = 0
|
||||
}
|
||||
} else {
|
||||
})
|
||||
item.is_play = !item.is_play
|
||||
if (item.is_play) {
|
||||
if (this.currentItem) {
|
||||
if (this.currentItem.name !== item.name) {
|
||||
this.audio.pause()
|
||||
this.audio.src = item.mp3
|
||||
this.audio.currentTime = 0
|
||||
}
|
||||
this.audio.play()
|
||||
this.audio.addEventListener('ended', () => (item.is_play = false))
|
||||
} else {
|
||||
this.stopPlay()
|
||||
this.audio.pause()
|
||||
this.audio.src = item.mp3
|
||||
this.audio.currentTime = 0
|
||||
}
|
||||
this.currentItem = item
|
||||
},
|
||||
stopPlay() {
|
||||
this.audio.pause()
|
||||
// this.audio.currentTime = 0
|
||||
this.audio.removeEventListener('ended', null)
|
||||
},
|
||||
},
|
||||
unmounted() {
|
||||
this.stopPlay()
|
||||
this.audio.play()
|
||||
this.audio.addEventListener('ended', () => (item.is_play = false))
|
||||
} else {
|
||||
this.stopPlay()
|
||||
}
|
||||
this.currentItem = item
|
||||
},
|
||||
stopPlay() {
|
||||
this.audio.pause()
|
||||
// this.audio.currentTime = 0
|
||||
this.audio.removeEventListener('ended', null)
|
||||
}
|
||||
},
|
||||
unmounted() {
|
||||
this.stopPlay()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.MusicCollect {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
.MusicCollect {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
|
||||
.list {
|
||||
.item {
|
||||
padding: 20rem 15rem;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.music {
|
||||
display: flex;
|
||||
|
||||
.cover-wrapper {
|
||||
margin-right: 10rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.play {
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cover {
|
||||
border-radius: 2rem;
|
||||
@width: 60rem;
|
||||
width: @width;
|
||||
object-fit: cover;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 40vw;
|
||||
}
|
||||
|
||||
.author,
|
||||
.desc-bottom {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
|
||||
.desc-bottom {
|
||||
display: flex;
|
||||
|
||||
.duration {
|
||||
margin-right: 14rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
img {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
margin-left: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.float-play-music {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
background: var(--main-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.process {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
height: 1px;
|
||||
width: 50vw;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.music-wrapper {
|
||||
width: 100vw;
|
||||
border-top: 1px solid #414141;
|
||||
padding: 10rem 15rem;
|
||||
.list {
|
||||
.item {
|
||||
padding: 20rem 15rem;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -293,9 +198,9 @@
|
||||
|
||||
.cover {
|
||||
border-radius: 2rem;
|
||||
object-fit: cover;
|
||||
@width: 50rem;
|
||||
@width: 60rem;
|
||||
width: @width;
|
||||
object-fit: cover;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
@ -330,10 +235,101 @@
|
||||
}
|
||||
|
||||
.option {
|
||||
.button {
|
||||
img {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
margin-left: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.float-play-music {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
background: var(--main-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.process {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
height: 1px;
|
||||
width: 50vw;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.music-wrapper {
|
||||
width: 100vw;
|
||||
border-top: 1px solid #414141;
|
||||
padding: 10rem 15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.music {
|
||||
display: flex;
|
||||
|
||||
.cover-wrapper {
|
||||
margin-right: 10rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.play {
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cover {
|
||||
border-radius: 2rem;
|
||||
object-fit: cover;
|
||||
@width: 50rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 40vw;
|
||||
}
|
||||
|
||||
.author,
|
||||
.desc-bottom {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
|
||||
.desc-bottom {
|
||||
display: flex;
|
||||
|
||||
.duration {
|
||||
margin-right: 14rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
.button {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,75 +15,73 @@
|
||||
</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 {
|
||||
name: 'VideoCollect',
|
||||
components: {
|
||||
Posters,
|
||||
Scroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
pageSize: 15,
|
||||
videos: [],
|
||||
export default {
|
||||
name: 'VideoCollect',
|
||||
components: {
|
||||
Posters,
|
||||
Scroll
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
pageSize: 15,
|
||||
videos: []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.loadData(true)
|
||||
},
|
||||
methods: {
|
||||
async loadData(init = false) {
|
||||
if (this.loading) return
|
||||
if (!init) {
|
||||
if (this.total <= this.videos.length) {
|
||||
return
|
||||
}
|
||||
this.pageNo++
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.loadData(true)
|
||||
},
|
||||
methods: {
|
||||
async loadData(init = false) {
|
||||
if (this.loading) return
|
||||
if (!init) {
|
||||
if (this.total <= this.videos.length) {
|
||||
return
|
||||
}
|
||||
this.pageNo++
|
||||
}
|
||||
this.loading = true
|
||||
let res = await myVideo({
|
||||
pageNo: this.pageNo,
|
||||
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';
|
||||
|
||||
.VideoCollect {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: var(--common-header-height);
|
||||
|
||||
.Scroll {
|
||||
height: calc(
|
||||
var(--vh, 1vh) * 100 - var(--common-header-height)
|
||||
) !important;
|
||||
this.loading = true
|
||||
let res = await myVideo({
|
||||
pageNo: this.pageNo,
|
||||
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';
|
||||
|
||||
.VideoCollect {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: var(--common-header-height);
|
||||
|
||||
.Scroll {
|
||||
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,207 +70,207 @@
|
||||
</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 {
|
||||
name: 'GuessMusic',
|
||||
components: {
|
||||
SlideVertical,
|
||||
FromBottomDialog,
|
||||
Switches,
|
||||
SlideItemMusic,
|
||||
IndicatorLight,
|
||||
Share,
|
||||
ShareToFriend,
|
||||
export default {
|
||||
name: 'GuessMusic',
|
||||
components: {
|
||||
SlideVertical,
|
||||
FromBottomDialog,
|
||||
Switches,
|
||||
SlideItemMusic,
|
||||
IndicatorLight,
|
||||
Share,
|
||||
ShareToFriend
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: [],
|
||||
page2SlideIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slideCanMove: true,
|
||||
isShowShareToFriend: false,
|
||||
isShowList: false,
|
||||
isSharing: false,
|
||||
isLoop: false,
|
||||
collectSlideIndex: 0,
|
||||
isShowCollectDialog: false,
|
||||
itemRefs: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
activeIndex: {
|
||||
get() {
|
||||
return this.page2SlideIndex
|
||||
},
|
||||
page2SlideIndex: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slideCanMove: true,
|
||||
isShowShareToFriend: false,
|
||||
isShowList: false,
|
||||
isSharing: false,
|
||||
isLoop: false,
|
||||
collectSlideIndex: 0,
|
||||
isShowCollectDialog: false,
|
||||
itemRefs: [],
|
||||
set(val) {
|
||||
this.$emit('update:page2SlideIndex', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
activeIndex(newVal, oldVal) {
|
||||
this.itemRefs.map((ref) => {
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
this.itemRefs[newVal].togglePlay(true, true)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previous() {
|
||||
if (this.activeIndex > 0) {
|
||||
this.play(this.activeIndex - 1)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
activeIndex: {
|
||||
get() {
|
||||
return this.page2SlideIndex
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:page2SlideIndex', val)
|
||||
},
|
||||
},
|
||||
next() {
|
||||
if (this.activeIndex < this.list.length - 1) {
|
||||
this.play(this.activeIndex + 1)
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
activeIndex(newVal, oldVal) {
|
||||
this.itemRefs.map((ref) => {
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
this.itemRefs[newVal].togglePlay(true, true)
|
||||
},
|
||||
delayShowDialog(cb) {
|
||||
setTimeout(() => {
|
||||
cb()
|
||||
}, 100)
|
||||
},
|
||||
methods: {
|
||||
previous() {
|
||||
if (this.activeIndex > 0) {
|
||||
this.play(this.activeIndex - 1)
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (this.activeIndex < this.list.length - 1) {
|
||||
this.play(this.activeIndex + 1)
|
||||
}
|
||||
},
|
||||
delayShowDialog(cb) {
|
||||
setTimeout(() => {
|
||||
cb()
|
||||
}, 100)
|
||||
},
|
||||
setItemRef(el) {
|
||||
if (el) {
|
||||
this.itemRefs.push(el)
|
||||
}
|
||||
},
|
||||
play(index) {
|
||||
this.activeIndex = index
|
||||
this.itemRefs.map((ref) => {
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
this.itemRefs[index].togglePlay(true, true)
|
||||
},
|
||||
pause() {
|
||||
this.itemRefs.map((ref) => {
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
},
|
||||
setItemRef(el) {
|
||||
if (el) {
|
||||
this.itemRefs.push(el)
|
||||
}
|
||||
},
|
||||
play(index) {
|
||||
this.activeIndex = index
|
||||
this.itemRefs.map((ref) => {
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
this.itemRefs[index].togglePlay(true, true)
|
||||
},
|
||||
pause() {
|
||||
this.itemRefs.map((ref) => {
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
#CollectMusic {
|
||||
//width: 100vw;
|
||||
//height: calc(var(--vh, 1vh) * 100);
|
||||
#CollectMusic {
|
||||
//width: 100vw;
|
||||
//height: calc(var(--vh, 1vh) * 100);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
}
|
||||
|
||||
.music-list-dialog {
|
||||
height: 70vh;
|
||||
@bg-color: #1e1d1d;
|
||||
background: @bg-color;
|
||||
|
||||
.music-list-header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
}
|
||||
|
||||
.music-list-dialog {
|
||||
height: 70vh;
|
||||
@bg-color: #1e1d1d;
|
||||
width: 100vw;
|
||||
background: @bg-color;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #2a2828;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 50rem;
|
||||
padding: 0 var(--page-padding);
|
||||
border-radius: 15rem 15rem 0 0;
|
||||
z-index: 9;
|
||||
|
||||
.music-list-header {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
background: @bg-color;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #2a2828;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 50rem;
|
||||
padding: 0 var(--page-padding);
|
||||
border-radius: 15rem 15rem 0 0;
|
||||
z-index: 9;
|
||||
|
||||
.left {
|
||||
font-size: 16rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
font-size: 16rem;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding-top: 50rem;
|
||||
}
|
||||
|
||||
.l-row {
|
||||
background: @bg-color;
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 var(--page-padding);
|
||||
|
||||
&.active {
|
||||
color: var(--primary-btn-color);
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.author {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
margin-left: 20rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 6rem;
|
||||
height: 0.5px;
|
||||
background: var(--second-text-color);
|
||||
position: absolute;
|
||||
left: -12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
width: 15rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: @bg-color;
|
||||
border-top: 1px solid #2a2828;
|
||||
height: 60rem;
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12rem;
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding-top: 50rem;
|
||||
}
|
||||
|
||||
.l-row {
|
||||
background: @bg-color;
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 var(--page-padding);
|
||||
|
||||
&.active {
|
||||
color: var(--primary-btn-color);
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.author {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
margin-left: 20rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 6rem;
|
||||
height: 0.5px;
|
||||
background: var(--second-text-color);
|
||||
position: absolute;
|
||||
left: -12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
width: 15rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: @bg-color;
|
||||
border-top: 1px solid #2a2828;
|
||||
height: 60rem;
|
||||
display: flex;
|
||||
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,189 +70,189 @@
|
||||
</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 {
|
||||
name: 'GuessMusic',
|
||||
components: {
|
||||
SlideVertical,
|
||||
FromBottomDialog,
|
||||
Switches,
|
||||
SlideItemMusic,
|
||||
IndicatorLight,
|
||||
Share,
|
||||
ShareToFriend,
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slideCanMove: true,
|
||||
isShowShareToFriend: false,
|
||||
isShowList: false,
|
||||
isSharing: false,
|
||||
isLoop: false,
|
||||
guessSlideIndex: 0,
|
||||
isShowCollectDialog: false,
|
||||
itemRefs: [],
|
||||
export default {
|
||||
name: 'GuessMusic',
|
||||
components: {
|
||||
SlideVertical,
|
||||
FromBottomDialog,
|
||||
Switches,
|
||||
SlideItemMusic,
|
||||
IndicatorLight,
|
||||
Share,
|
||||
ShareToFriend
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slideCanMove: true,
|
||||
isShowShareToFriend: false,
|
||||
isShowList: false,
|
||||
isSharing: false,
|
||||
isLoop: false,
|
||||
guessSlideIndex: 0,
|
||||
isShowCollectDialog: false,
|
||||
itemRefs: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
guessSlideIndex(newVal, oldVal) {
|
||||
this.itemRefs.map((ref) => {
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
this.itemRefs[newVal].togglePlay(true, true)
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
previous() {
|
||||
if (this.guessSlideIndex > 0) {
|
||||
this.play(this.guessSlideIndex - 1)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
guessSlideIndex(newVal, oldVal) {
|
||||
this.itemRefs.map((ref) => {
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
this.itemRefs[newVal].togglePlay(true, true)
|
||||
},
|
||||
next() {
|
||||
if (this.guessSlideIndex < this.list.length - 1) {
|
||||
this.play(this.guessSlideIndex + 1)
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
previous() {
|
||||
if (this.guessSlideIndex > 0) {
|
||||
this.play(this.guessSlideIndex - 1)
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (this.guessSlideIndex < this.list.length - 1) {
|
||||
this.play(this.guessSlideIndex + 1)
|
||||
}
|
||||
},
|
||||
delayShowDialog(cb) {
|
||||
setTimeout(() => {
|
||||
cb()
|
||||
}, 100)
|
||||
},
|
||||
setItemRef(el) {
|
||||
if (el) {
|
||||
this.itemRefs.push(el)
|
||||
}
|
||||
},
|
||||
play(index) {
|
||||
this.guessSlideIndex = index
|
||||
this.itemRefs.map((ref) => {
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
this.itemRefs[index].togglePlay(true, true)
|
||||
},
|
||||
delayShowDialog(cb) {
|
||||
setTimeout(() => {
|
||||
cb()
|
||||
}, 100)
|
||||
},
|
||||
setItemRef(el) {
|
||||
if (el) {
|
||||
this.itemRefs.push(el)
|
||||
}
|
||||
},
|
||||
play(index) {
|
||||
this.guessSlideIndex = index
|
||||
this.itemRefs.map((ref) => {
|
||||
ref.togglePlay(false)
|
||||
})
|
||||
this.itemRefs[index].togglePlay(true, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
#GuessMusic {
|
||||
//width: 100vw;
|
||||
//height: calc(var(--vh, 1vh) * 100);
|
||||
#GuessMusic {
|
||||
//width: 100vw;
|
||||
//height: calc(var(--vh, 1vh) * 100);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
}
|
||||
|
||||
.music-list-dialog {
|
||||
height: 70vh;
|
||||
@bg-color: #1e1d1d;
|
||||
background: @bg-color;
|
||||
|
||||
.music-list-header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
}
|
||||
|
||||
.music-list-dialog {
|
||||
height: 70vh;
|
||||
@bg-color: #1e1d1d;
|
||||
width: 100vw;
|
||||
background: @bg-color;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #2a2828;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 50rem;
|
||||
padding: 0 var(--page-padding);
|
||||
border-radius: 15rem 15rem 0 0;
|
||||
z-index: 9;
|
||||
|
||||
.music-list-header {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
background: @bg-color;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #2a2828;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 50rem;
|
||||
padding: 0 var(--page-padding);
|
||||
border-radius: 15rem 15rem 0 0;
|
||||
z-index: 9;
|
||||
|
||||
.left {
|
||||
font-size: 16rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
font-size: 16rem;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding-top: 50rem;
|
||||
}
|
||||
|
||||
.l-row {
|
||||
background: @bg-color;
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 var(--page-padding);
|
||||
|
||||
&.active {
|
||||
color: var(--primary-btn-color);
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.author {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
margin-left: 20rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 6rem;
|
||||
height: 0.5px;
|
||||
background: var(--second-text-color);
|
||||
position: absolute;
|
||||
left: -12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
width: 15rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: @bg-color;
|
||||
border-top: 1px solid #2a2828;
|
||||
height: 60rem;
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12rem;
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding-top: 50rem;
|
||||
}
|
||||
|
||||
.l-row {
|
||||
background: @bg-color;
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 var(--page-padding);
|
||||
|
||||
&.active {
|
||||
color: var(--primary-btn-color);
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.author {
|
||||
font-size: 12rem;
|
||||
color: var(--second-text-color);
|
||||
margin-left: 20rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 6rem;
|
||||
height: 0.5px;
|
||||
background: var(--second-text-color);
|
||||
position: absolute;
|
||||
left: -12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
width: 15rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: @bg-color;
|
||||
border-top: 1px solid #2a2828;
|
||||
height: 60rem;
|
||||
display: flex;
|
||||
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,445 +89,429 @@
|
||||
/>
|
||||
<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 {
|
||||
name: 'SlideItemMusic',
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
isLoop: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slideIndex: 1,
|
||||
lyricsTexts: [],
|
||||
lyricsFullTexts: [],
|
||||
isPlay: false,
|
||||
isAutoPlay: true,
|
||||
isMove: false,
|
||||
isCollect: false,
|
||||
isFullLyrics: false,
|
||||
lastPageX: 0,
|
||||
pageX: 0,
|
||||
audio: new Audio(),
|
||||
duration: 0,
|
||||
currentTime: 0,
|
||||
step: 0,
|
||||
startX: 0,
|
||||
slideBarWidth: 0,
|
||||
export default {
|
||||
name: 'SlideItemMusic',
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.audio.src = this.modelValue.mp3
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
this.audio.volume = 0.2
|
||||
isLoop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slideIndex: 1,
|
||||
lyricsTexts: [],
|
||||
lyricsFullTexts: [],
|
||||
isPlay: false,
|
||||
isAutoPlay: true,
|
||||
isMove: false,
|
||||
isCollect: false,
|
||||
isFullLyrics: false,
|
||||
lastPageX: 0,
|
||||
pageX: 0,
|
||||
audio: new Audio(),
|
||||
duration: 0,
|
||||
currentTime: 0,
|
||||
step: 0,
|
||||
startX: 0,
|
||||
slideBarWidth: 0
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.audio.src = this.modelValue.mp3
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
this.audio.volume = 0.2
|
||||
}
|
||||
this.audio.addEventListener('loadedmetadata', (e) => {
|
||||
this.duration = this.audio.duration
|
||||
this.slideBarWidth = this.$refs.slideBar.clientWidth
|
||||
this.step = this.slideBarWidth / Math.floor(this.duration)
|
||||
})
|
||||
|
||||
let lrcObj = this.createLrcObj(gaobaiqiqiu)
|
||||
this.lyricsTexts.push(lrcObj.ms[0])
|
||||
this.lyricsTexts.push(lrcObj.ms[1])
|
||||
lrcObj.ms.map((v) => {
|
||||
if (v.c) this.lyricsFullTexts.push(v)
|
||||
})
|
||||
|
||||
// console.log(lrcObj.ms)
|
||||
this.audio.addEventListener('timeupdate', (e) => {
|
||||
let currentTime = Math.ceil(e.target.currentTime)
|
||||
// let lastLyricsText = this.lyricsTexts[this.lyricsTexts.length - 1]
|
||||
// if (Number(lastLyricsText.t) < currentTime) {
|
||||
// for (let i = 0; i < lrcObj.ms.length; i++) {
|
||||
// let item = lrcObj.ms[i]
|
||||
// if (Number(item.t) > currentTime) {
|
||||
// if (item.c) {
|
||||
// console.log(item)
|
||||
// this.t(item)
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
if (!this.isMove) {
|
||||
this.currentTime = currentTime
|
||||
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
|
||||
}
|
||||
}
|
||||
this.audio.addEventListener('loadedmetadata', (e) => {
|
||||
this.duration = this.audio.duration
|
||||
this.slideBarWidth = this.$refs.slideBar.clientWidth
|
||||
this.step = this.slideBarWidth / Math.floor(this.duration)
|
||||
})
|
||||
|
||||
let lrcObj = this.createLrcObj(gaobaiqiqiu)
|
||||
this.lyricsTexts.push(lrcObj.ms[0])
|
||||
this.lyricsTexts.push(lrcObj.ms[1])
|
||||
lrcObj.ms.map((v) => {
|
||||
if (v.c) this.lyricsFullTexts.push(v)
|
||||
})
|
||||
|
||||
// console.log(lrcObj.ms)
|
||||
this.audio.addEventListener('timeupdate', (e) => {
|
||||
let currentTime = Math.ceil(e.target.currentTime)
|
||||
// let lastLyricsText = this.lyricsTexts[this.lyricsTexts.length - 1]
|
||||
// if (Number(lastLyricsText.t) < currentTime) {
|
||||
// for (let i = 0; i < lrcObj.ms.length; i++) {
|
||||
// let item = lrcObj.ms[i]
|
||||
// if (Number(item.t) > currentTime) {
|
||||
// if (item.c) {
|
||||
// console.log(item)
|
||||
// this.t(item)
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
if (!this.isMove) {
|
||||
this.currentTime = currentTime
|
||||
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
|
||||
}
|
||||
}
|
||||
})
|
||||
this.audio.addEventListener('play', (e) => (this.isPlay = true))
|
||||
this.audio.addEventListener('ended', (e) => {
|
||||
if (this.isLoop) {
|
||||
this.lastPageX = 0
|
||||
this.audio.currentTime = 0
|
||||
this.audio.play()
|
||||
} else {
|
||||
this.isPlay = false
|
||||
}
|
||||
})
|
||||
})
|
||||
this.audio.addEventListener('play', (e) => (this.isPlay = true))
|
||||
this.audio.addEventListener('ended', (e) => {
|
||||
if (this.isLoop) {
|
||||
this.lastPageX = 0
|
||||
this.audio.currentTime = 0
|
||||
this.audio.play()
|
||||
} else {
|
||||
this.isPlay = false
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
slide(state) {
|
||||
this.togglePlay(false)
|
||||
this.$emit(state)
|
||||
},
|
||||
methods: {
|
||||
slide(state) {
|
||||
this.togglePlay(false)
|
||||
this.$emit(state)
|
||||
},
|
||||
//TODO DOMException: The play() request was interrupted by a call to pause()
|
||||
//TODO page2会报错，能放歌但是进度条不动
|
||||
async togglePlay(state, reStart = false) {
|
||||
this.isPlay = state !== undefined ? state : !this.isPlay
|
||||
if (reStart) {
|
||||
this.audio.currentTime = 0
|
||||
}
|
||||
if (this.isPlay) {
|
||||
await this.audio.play()
|
||||
} else {
|
||||
this.audio.pause()
|
||||
}
|
||||
},
|
||||
async getCollectMusic() {
|
||||
this.loading = true
|
||||
let res = await userCollect()
|
||||
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,
|
||||
)
|
||||
}
|
||||
},
|
||||
createLrcObj(lrc) {
|
||||
let oLRC = {
|
||||
ti: '', //歌曲名
|
||||
ar: '', //演唱者
|
||||
al: '', //专辑名
|
||||
by: '', //歌词制作人
|
||||
offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
|
||||
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 s = t.split(':') //分离:前后文字
|
||||
if (isNaN(parseInt(s[0]))) {
|
||||
//不是数值
|
||||
for (let i in oLRC) {
|
||||
if (i != 'ms' && i == s[0].toLowerCase()) {
|
||||
oLRC[i] = s[1]
|
||||
}
|
||||
}
|
||||
} else {
|
||||
//是数值
|
||||
let arr = lrcs[i].match(/\[(\d+:.+?)\]/g) //提取时间字段，可能有多个
|
||||
let start = 0
|
||||
for (let k in arr) {
|
||||
start += arr[k].length //计算歌词位置
|
||||
}
|
||||
let content = lrcs[i].substring(start) //获取歌词内容
|
||||
for (let k in arr) {
|
||||
let t = arr[k].substring(1, arr[k].length - 1) //取[]间的内容
|
||||
let s = t.split(':') //分离:前后文字
|
||||
oLRC.ms.push({
|
||||
//对象{t:时间,c:歌词}加入ms数组
|
||||
t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
|
||||
c: content,
|
||||
})
|
||||
//TODO DOMException: The play() request was interrupted by a call to pause()
|
||||
//TODO page2会报错，能放歌但是进度条不动
|
||||
async togglePlay(state, reStart = false) {
|
||||
this.isPlay = state !== undefined ? state : !this.isPlay
|
||||
if (reStart) {
|
||||
this.audio.currentTime = 0
|
||||
}
|
||||
if (this.isPlay) {
|
||||
await this.audio.play()
|
||||
} else {
|
||||
this.audio.pause()
|
||||
}
|
||||
},
|
||||
async getCollectMusic() {
|
||||
this.loading = true
|
||||
let res = await userCollect()
|
||||
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)
|
||||
}
|
||||
},
|
||||
createLrcObj(lrc) {
|
||||
let oLRC = {
|
||||
ti: '', //歌曲名
|
||||
ar: '', //演唱者
|
||||
al: '', //专辑名
|
||||
by: '', //歌词制作人
|
||||
offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
|
||||
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 s = t.split(':') //分离:前后文字
|
||||
if (isNaN(parseInt(s[0]))) {
|
||||
//不是数值
|
||||
for (let i in oLRC) {
|
||||
if (i != 'ms' && i == s[0].toLowerCase()) {
|
||||
oLRC[i] = s[1]
|
||||
}
|
||||
}
|
||||
} else {
|
||||
//是数值
|
||||
let arr = lrcs[i].match(/\[(\d+:.+?)\]/g) //提取时间字段，可能有多个
|
||||
let start = 0
|
||||
for (let k in arr) {
|
||||
start += arr[k].length //计算歌词位置
|
||||
}
|
||||
let content = lrcs[i].substring(start) //获取歌词内容
|
||||
for (let k in arr) {
|
||||
let t = arr[k].substring(1, arr[k].length - 1) //取[]间的内容
|
||||
let s = t.split(':') //分离:前后文字
|
||||
oLRC.ms.push({
|
||||
//对象{t:时间,c:歌词}加入ms数组
|
||||
t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
|
||||
c: content
|
||||
})
|
||||
}
|
||||
}
|
||||
oLRC.ms.sort(function (a, b) {
|
||||
//按时间顺序排序
|
||||
return a.t - b.t
|
||||
})
|
||||
return oLRC
|
||||
/*
|
||||
}
|
||||
oLRC.ms.sort(function (a, b) {
|
||||
//按时间顺序排序
|
||||
return a.t - b.t
|
||||
})
|
||||
return oLRC
|
||||
/*
|
||||
for(let i in oLRC){ //查看解析结果
|
||||
console.log(i,":",oLRC[i]);
|
||||
}*/
|
||||
},
|
||||
t(txt) {
|
||||
// if (this.test.length === 2) return
|
||||
this.lyricsTexts.push(txt)
|
||||
nextTick(() => {
|
||||
let comments = this.$refs['lyrics-wrapper']
|
||||
comments.scrollTo({
|
||||
top: comments.scrollHeight - comments.clientHeight,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
})
|
||||
},
|
||||
start(e) {
|
||||
this.startX = e.touches[0].pageX
|
||||
},
|
||||
move(e) {
|
||||
this.isMove = true
|
||||
this.pageX = this.lastPageX + (e.touches[0].pageX - this.startX)
|
||||
if (this.pageX < 0) this.pageX = 0
|
||||
if (this.pageX > this.slideBarWidth) this.pageX = this.slideBarWidth - 5
|
||||
this.currentTime = Math.ceil(this.pageX / this.step)
|
||||
globalMethods.$stopPropagation(e)
|
||||
},
|
||||
end(e) {
|
||||
this.lastPageX = this.pageX
|
||||
this.currentTime = Math.ceil(this.pageX / this.step)
|
||||
this.audio.currentTime = this.currentTime
|
||||
this.audio.play()
|
||||
this.isMove = false
|
||||
globalMethods.$stopPropagation(e)
|
||||
},
|
||||
$durationTime(time) {
|
||||
if (time === 0) return '00:00'
|
||||
else {
|
||||
return this.$duration(time)
|
||||
}
|
||||
},
|
||||
durationStyle(type) {
|
||||
// return {}
|
||||
if (type === 1) {
|
||||
return { width: this.pageX + 'px' }
|
||||
}
|
||||
return { left: this.pageX + 'px' }
|
||||
},
|
||||
},
|
||||
t(txt) {
|
||||
// if (this.test.length === 2) return
|
||||
this.lyricsTexts.push(txt)
|
||||
nextTick(() => {
|
||||
let comments = this.$refs['lyrics-wrapper']
|
||||
comments.scrollTo({
|
||||
top: comments.scrollHeight - comments.clientHeight,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
})
|
||||
},
|
||||
start(e) {
|
||||
this.startX = e.touches[0].pageX
|
||||
},
|
||||
move(e) {
|
||||
this.isMove = true
|
||||
this.pageX = this.lastPageX + (e.touches[0].pageX - this.startX)
|
||||
if (this.pageX < 0) this.pageX = 0
|
||||
if (this.pageX > this.slideBarWidth) this.pageX = this.slideBarWidth - 5
|
||||
this.currentTime = Math.ceil(this.pageX / this.step)
|
||||
globalMethods.$stopPropagation(e)
|
||||
},
|
||||
end(e) {
|
||||
this.lastPageX = this.pageX
|
||||
this.currentTime = Math.ceil(this.pageX / this.step)
|
||||
this.audio.currentTime = this.currentTime
|
||||
this.audio.play()
|
||||
this.isMove = false
|
||||
globalMethods.$stopPropagation(e)
|
||||
},
|
||||
$durationTime(time) {
|
||||
if (time === 0) return '00:00'
|
||||
else {
|
||||
return this.$duration(time)
|
||||
}
|
||||
},
|
||||
durationStyle(type) {
|
||||
// return {}
|
||||
if (type === 1) {
|
||||
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 {
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
min-width: 100vw;
|
||||
min-height: 100%;
|
||||
.SlideItemMusic {
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
min-width: 100vw;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
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));
|
||||
|
||||
.cover {
|
||||
margin-top: 80rem;
|
||||
width: 80vw;
|
||||
height: 80vw;
|
||||
|
||||
img {
|
||||
border-radius: 25rem;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 15rem 5rem #514f4f;
|
||||
}
|
||||
}
|
||||
|
||||
.lyrics-wrapper {
|
||||
margin-top: 30rem;
|
||||
overflow: auto;
|
||||
height: 80rem;
|
||||
|
||||
.container {
|
||||
min-height: 80rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.lyrics {
|
||||
height: 40rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.lyrics-mask {
|
||||
top: calc(80vw + 70rem);
|
||||
height: 80rem;
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.lyrics-full {
|
||||
margin-top: 80rem;
|
||||
width: 100vw;
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
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)
|
||||
);
|
||||
//align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
.cover {
|
||||
margin-top: 80rem;
|
||||
width: 80vw;
|
||||
height: 80vw;
|
||||
.list {
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 40rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
|
||||
.desc {
|
||||
width: 100vw;
|
||||
padding: var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
img {
|
||||
border-radius: 25rem;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 15rem 5rem #514f4f;
|
||||
}
|
||||
}
|
||||
|
||||
.lyrics-wrapper {
|
||||
margin-top: 30rem;
|
||||
overflow: auto;
|
||||
height: 80rem;
|
||||
|
||||
.container {
|
||||
min-height: 80rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
width: 35rem;
|
||||
}
|
||||
|
||||
.lyrics {
|
||||
height: 40rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.lyrics-mask {
|
||||
top: calc(80vw + 70rem);
|
||||
height: 80rem;
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.lyrics-full {
|
||||
margin-top: 80rem;
|
||||
width: 100vw;
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
//align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
.list {
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 40rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
|
||||
.desc {
|
||||
width: 100vw;
|
||||
padding: var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
img {
|
||||
width: 35rem;
|
||||
.left {
|
||||
.name {
|
||||
font-size: 18rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.left {
|
||||
.name {
|
||||
font-size: 18rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 14rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 20rem;
|
||||
font-size: 12rem;
|
||||
}
|
||||
.author {
|
||||
font-size: 14rem;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: 100vw;
|
||||
font-size: 12rem;
|
||||
padding: 0 var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: gainsboro;
|
||||
|
||||
.bar {
|
||||
margin: 0 6rem;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.slide-bar {
|
||||
position: absolute;
|
||||
height: 20rem;
|
||||
width: 100%;
|
||||
top: -10rem;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
&:before {
|
||||
z-index: 8;
|
||||
content: ' ';
|
||||
height: 1.5px;
|
||||
width: 100%;
|
||||
background: gray;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bar-line {
|
||||
z-index: 9;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 1.5px;
|
||||
width: 50vw;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.bar-point {
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
left: 50vw;
|
||||
top: -3px;
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
width: 100vw;
|
||||
padding: var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
width: 38rem;
|
||||
height: 38rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
.right {
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 20rem;
|
||||
font-size: 12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 10rem;
|
||||
}
|
||||
.progress {
|
||||
width: 100vw;
|
||||
font-size: 12rem;
|
||||
padding: 0 var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: gainsboro;
|
||||
|
||||
.control {
|
||||
width: 55rem;
|
||||
height: 55rem;
|
||||
}
|
||||
.bar {
|
||||
margin: 0 6rem;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.slide-bar {
|
||||
position: absolute;
|
||||
height: 20rem;
|
||||
width: 100%;
|
||||
top: -10rem;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
&:before {
|
||||
z-index: 8;
|
||||
content: ' ';
|
||||
height: 1.5px;
|
||||
width: 100%;
|
||||
background: gray;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bar-line {
|
||||
z-index: 9;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 1.5px;
|
||||
width: 50vw;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.bar-point {
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
left: 50vw;
|
||||
top: -3px;
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
width: 100vw;
|
||||
padding: var(--page-padding);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
width: 38rem;
|
||||
height: 38rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin: 0 10rem;
|
||||
}
|
||||
|
||||
.control {
|
||||
width: 55rem;
|
||||
height: 55rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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,148 +41,142 @@
|
||||
</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 {
|
||||
name: 'lookHistory',
|
||||
components: {
|
||||
NoMore,
|
||||
Posters,
|
||||
Scroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadingVideo: false,
|
||||
loadingOther: false,
|
||||
isClearHistoryVideo: false,
|
||||
isClearHistoryOther: false,
|
||||
currentSlideItemIndex: 0,
|
||||
pageSize: 15,
|
||||
historyVideo: {
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
list: [],
|
||||
},
|
||||
historyOther: {
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
list: [],
|
||||
},
|
||||
export default {
|
||||
name: 'lookHistory',
|
||||
components: {
|
||||
NoMore,
|
||||
Posters,
|
||||
Scroll
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadingVideo: false,
|
||||
loadingOther: false,
|
||||
isClearHistoryVideo: false,
|
||||
isClearHistoryOther: false,
|
||||
currentSlideItemIndex: 0,
|
||||
pageSize: 15,
|
||||
historyVideo: {
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
list: []
|
||||
},
|
||||
historyOther: {
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isClear() {
|
||||
if (this.currentSlideItemIndex === 0) {
|
||||
return this.historyVideo.list.length
|
||||
}
|
||||
return this.historyOther.list.length
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getHistoryVideo(true)
|
||||
this.getHistoryOther(true)
|
||||
},
|
||||
methods: {
|
||||
async getHistoryVideo(init = false) {
|
||||
if (this.loadingVideo) return
|
||||
if (this.isClearHistoryVideo) return
|
||||
if (!init) {
|
||||
if (this.historyVideo.total <= this.historyVideo.list.length) return
|
||||
this.historyVideo.pageNo++
|
||||
}
|
||||
this.loadingVideo = true
|
||||
let res = await historyVideo({
|
||||
pageNo: this.historyVideo.pageNo,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
console.log(res)
|
||||
this.loadingVideo = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.historyVideo.list = this.historyVideo.list.concat(res.data.list)
|
||||
this.historyVideo.total = res.data.total
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isClear() {
|
||||
async getHistoryOther(init = false) {
|
||||
if (this.loadingOther) return
|
||||
if (this.isClearHistoryOther) return
|
||||
this.loadingOther = true
|
||||
if (!init) {
|
||||
this.historyOther.pageNo++
|
||||
}
|
||||
let res = await historyOther({
|
||||
pageNo: this.historyOther.pageNo,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
this.loadingOther = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.historyOther.list = this.historyOther.list.concat(res.data.list)
|
||||
this.historyOther.total = res.data.total
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
this.$showConfirmDialog('确定清空？', '清空后，以往观看记录不再展示', 'gray', () => {
|
||||
if (this.currentSlideItemIndex === 0) {
|
||||
return this.historyVideo.list.length
|
||||
this.historyVideo.list = []
|
||||
this.isClearHistoryVideo = true
|
||||
return
|
||||
}
|
||||
return this.historyOther.list.length
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getHistoryVideo(true)
|
||||
this.getHistoryOther(true)
|
||||
},
|
||||
methods: {
|
||||
async getHistoryVideo(init = false) {
|
||||
if (this.loadingVideo) return
|
||||
if (this.isClearHistoryVideo) return
|
||||
if (!init) {
|
||||
if (this.historyVideo.total <= this.historyVideo.list.length) return
|
||||
this.historyVideo.pageNo++
|
||||
}
|
||||
this.loadingVideo = true
|
||||
let res = await historyVideo({
|
||||
pageNo: this.historyVideo.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
})
|
||||
console.log(res)
|
||||
this.loadingVideo = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.historyVideo.list = this.historyVideo.list.concat(res.data.list)
|
||||
this.historyVideo.total = res.data.total
|
||||
}
|
||||
},
|
||||
async getHistoryOther(init = false) {
|
||||
if (this.loadingOther) return
|
||||
if (this.isClearHistoryOther) return
|
||||
this.loadingOther = true
|
||||
if (!init) {
|
||||
this.historyOther.pageNo++
|
||||
}
|
||||
let res = await historyOther({
|
||||
pageNo: this.historyOther.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
})
|
||||
this.loadingOther = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.historyOther.list = this.historyOther.list.concat(res.data.list)
|
||||
this.historyOther.total = res.data.total
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
this.$showConfirmDialog(
|
||||
'确定清空？',
|
||||
'清空后，以往观看记录不再展示',
|
||||
'gray',
|
||||
() => {
|
||||
if (this.currentSlideItemIndex === 0) {
|
||||
this.historyVideo.list = []
|
||||
this.isClearHistoryVideo = true
|
||||
return
|
||||
}
|
||||
this.historyOther.list = []
|
||||
this.isClearHistoryVideo = true
|
||||
},
|
||||
)
|
||||
},
|
||||
},
|
||||
this.historyOther.list = []
|
||||
this.isClearHistoryVideo = true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../assets/less/index';
|
||||
@import '../../../assets/less/index';
|
||||
|
||||
.lookHistory {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
.lookHistory {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
|
||||
.SlideRowList,
|
||||
.Scroll {
|
||||
height: calc(
|
||||
var(--vh, 1vh) * 100 - var(--indicator-height) -
|
||||
var(--common-header-height)
|
||||
) !important;
|
||||
.SlideRowList,
|
||||
.Scroll {
|
||||
height: calc(
|
||||
var(--vh, 1vh) * 100 - var(--indicator-height) - var(--common-header-height)
|
||||
) !important;
|
||||
}
|
||||
|
||||
.empty {
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
height: 120rem;
|
||||
}
|
||||
|
||||
.empty {
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
height: 120rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 13rem;
|
||||
margin-top: 10rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
.title {
|
||||
font-size: 13rem;
|
||||
margin-top: 10rem;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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,78 +74,78 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import enums from '../../../../utils/enums'
|
||||
import enums from '../../../../utils/enums'
|
||||
|
||||
export default {
|
||||
name: 'DetailSetting',
|
||||
data() {
|
||||
return {
|
||||
type: 0,
|
||||
enums,
|
||||
triggerTime: enums.TRIGGER_TIME.TIME60,
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.type = ~~this.$route.query.type
|
||||
let triggerTime = localStorage.getItem('changeTriggerTime')
|
||||
if (triggerTime !== null) this.triggerTime = triggerTime
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
export default {
|
||||
name: 'DetailSetting',
|
||||
data() {
|
||||
return {
|
||||
type: 0,
|
||||
enums,
|
||||
triggerTime: enums.TRIGGER_TIME.TIME60
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.type = ~~this.$route.query.type
|
||||
let triggerTime = localStorage.getItem('changeTriggerTime')
|
||||
if (triggerTime !== null) this.triggerTime = triggerTime
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../../assets/less/index';
|
||||
@import '../../../../assets/less/index';
|
||||
|
||||
.DetailSetting {
|
||||
.DetailSetting {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: var(--common-header-height);
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
bottom: 15rem;
|
||||
left: 10rem;
|
||||
right: 10rem;
|
||||
|
||||
.content {
|
||||
padding-top: var(--common-header-height);
|
||||
.notice {
|
||||
font-size: 13rem;
|
||||
margin-bottom: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 15rem;
|
||||
left: 10rem;
|
||||
right: 10rem;
|
||||
.type1 {
|
||||
.notice {
|
||||
margin: 60rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 16rem;
|
||||
color: var(--second-text-color);
|
||||
|
||||
.notice {
|
||||
font-size: 13rem;
|
||||
img {
|
||||
width: 15rem;
|
||||
margin-bottom: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.type1 {
|
||||
.notice {
|
||||
margin: 60rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 16rem;
|
||||
color: var(--second-text-color);
|
||||
|
||||
img {
|
||||
width: 15rem;
|
||||
margin-bottom: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.type2 {
|
||||
.desc {
|
||||
margin-top: 40rem;
|
||||
width: 100%;
|
||||
}
|
||||
.type2 {
|
||||
.desc {
|
||||
margin-top: 40rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -31,32 +31,32 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'index',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {},
|
||||
}
|
||||
export default {
|
||||
name: 'index',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../../assets/less/index';
|
||||
@import '../../../../assets/less/index';
|
||||
|
||||
.index {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
.index {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
}
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -34,41 +34,41 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import enums from '../../../../utils/enums'
|
||||
import enums from '../../../../utils/enums'
|
||||
|
||||
export default {
|
||||
name: 'TriggerTime',
|
||||
data() {
|
||||
return {
|
||||
enums,
|
||||
triggerTime: enums.TRIGGER_TIME.TIME60,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.triggerTime = ~~this.$route.query.triggerTime
|
||||
},
|
||||
methods: {
|
||||
setTriggerTime(type) {
|
||||
this.triggerTime = type
|
||||
localStorage.setItem('changeTriggerTime', type)
|
||||
},
|
||||
},
|
||||
export default {
|
||||
name: 'TriggerTime',
|
||||
data() {
|
||||
return {
|
||||
enums,
|
||||
triggerTime: enums.TRIGGER_TIME.TIME60
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.triggerTime = ~~this.$route.query.triggerTime
|
||||
},
|
||||
methods: {
|
||||
setTriggerTime(type) {
|
||||
this.triggerTime = type
|
||||
localStorage.setItem('changeTriggerTime', type)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../../../../assets/less/index';
|
||||
@import '../../../../assets/less/index';
|
||||
|
||||
.TriggerTime {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
color: white;
|
||||
.TriggerTime {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
color: white;
|
||||
|
||||
.content {
|
||||
padding-top: 60rem;
|
||||
}
|
||||
.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