优化slide
This commit is contained in:
zyronon
parent
e71083a019
commit
4c5a7d81cf
@ -1258,147 +1258,6 @@ export default {
|
||||
},
|
||||
],
|
||||
my: [
|
||||
{
|
||||
"id": "ac78850c-1497-43bb-bdf8-219f3262b690",
|
||||
"cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/f520c88ca2184b8f9ecc5c0b7426e80e~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p5-ipv6.douyinpic.com/obj/tos-cn-i-0004/f520c88ca2184b8f9ecc5c0b7426e80e?from=4257465056_large",
|
||||
"origin_cover": "https://p29.douyinpic.com/tos-cn-p-0015/92d4a1ce384d4abb97219ccbfe6bd564_1629595844~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c4gqhfjc77u3f5hm465g&line=1&file_id=65b507a426ce411280a48985aa590e1e&sign=733accba61339e2f7bfd81980b1ef161&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 11165836,
|
||||
"duration": 194880,
|
||||
"desc": "小伙发现一口古老棺材，躺过之后会开天眼，能看到神的存在 #抖音电影 #我的观影报告",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 120,
|
||||
"comment_count": 0,
|
||||
"download_count": 0,
|
||||
"play_count": 0,
|
||||
"share_count": 0,
|
||||
"forward_count": 0,
|
||||
"collect_count": 2,
|
||||
"sort": 0,
|
||||
"is_top": 0,
|
||||
"city": "350100",
|
||||
"musicId": "3e4df84d-dbea-48b3-8cdd-136bb49094ad",
|
||||
"create_time": "1630391758",
|
||||
"creator_id": "54884802577",
|
||||
"status": 1,
|
||||
"topics": [
|
||||
{
|
||||
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
|
||||
"name": "我的观影报告",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
},
|
||||
{
|
||||
"id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
|
||||
"name": "抖音电影",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
}
|
||||
],
|
||||
"music": null
|
||||
},
|
||||
{
|
||||
"id": "c4ff3c09-e426-4c3d-b6e7-208fe310bb19",
|
||||
"cover": "https://p29.douyinpic.com/img/tos-cn-i-0004/8e9f70a81dab46d8b9803c8730cf5a6e~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/8e9f70a81dab46d8b9803c8730cf5a6e?from=4257465056_large",
|
||||
"origin_cover": "https://p6.douyinpic.com/tos-cn-p-0015/ed85415df6bd47f8bb7a3c608aad53e0_1629595844~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c4gqhfjc77ua1jq3rtfg&line=1&file_id=d49b873b3576436c8dbed7ecc899cc7f&sign=de5d58784bb7fd5902a183abf8d1a8b1&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 10040642,
|
||||
"duration": 180400,
|
||||
"desc": "小伙发现一口古老棺材，躺过之后会开天眼，能看到神的存在 #抖音电影 #我的观影报告",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 248,
|
||||
"comment_count": 6,
|
||||
"download_count": 0,
|
||||
"play_count": 0,
|
||||
"share_count": 4,
|
||||
"forward_count": 0,
|
||||
"collect_count": 2,
|
||||
"sort": 1,
|
||||
"is_top": 0,
|
||||
"city": "350100",
|
||||
"musicId": "222ede4d-0622-4b13-9049-b7b388a8b44d",
|
||||
"create_time": "1630391758",
|
||||
"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": null
|
||||
},
|
||||
{
|
||||
"id": "7b8cd096-a317-4a4f-80be-1490f36906c6",
|
||||
"cover": "https://p26.douyinpic.com/img/tos-cn-i-0004/8ecfe75aa5fd4ecf8314cb6c161c9097~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p9.douyinpic.com/obj/tos-cn-i-0004/8ecfe75aa5fd4ecf8314cb6c161c9097?from=4257465056_large",
|
||||
"origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/dfc079547239425dbca5281f869d5cdb_1629595842~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c4gqhfjc77ua981pv5e0&line=1&file_id=121c9edf9b0f46c386381f35bc71c7dd&sign=451e71c172ae3d039774593bfe69af07&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 13824272,
|
||||
"duration": 233280,
|
||||
"desc": "小伙发现一口古老棺材，躺过之后会开天眼，能看到神的存在 #抖音电影 #我的观影报告 ",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 103,
|
||||
"comment_count": 3,
|
||||
"download_count": 0,
|
||||
"play_count": 0,
|
||||
"share_count": 0,
|
||||
"forward_count": 0,
|
||||
"collect_count": 1,
|
||||
"sort": 2,
|
||||
"is_top": 0,
|
||||
"city": "350100",
|
||||
"musicId": "8d2c7382-5d6f-4a9b-a376-c93ed100e8d0",
|
||||
"create_time": "1630391758",
|
||||
"creator_id": "54884802577",
|
||||
"status": 1,
|
||||
"topics": [
|
||||
{
|
||||
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
|
||||
"name": "我的观影报告",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
},
|
||||
{
|
||||
"id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
|
||||
"name": "抖音电影",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
}
|
||||
],
|
||||
"music": null
|
||||
},
|
||||
{
|
||||
"id": "27149aa9-e597-4282-b234-effdb8d7db93",
|
||||
"cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/989afddc17cd47c0af09d2d9e228c153~c5_300x400.jpeg?from=4257465056_large",
|
||||
@ -14301,78 +14160,86 @@ export default {
|
||||
],
|
||||
private1: [
|
||||
{
|
||||
"id": "ac78850c-1497-43bb-bdf8-219f3262b690",
|
||||
"cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/f520c88ca2184b8f9ecc5c0b7426e80e~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p5-ipv6.douyinpic.com/obj/tos-cn-i-0004/f520c88ca2184b8f9ecc5c0b7426e80e?from=4257465056_large",
|
||||
"origin_cover": "https://p29.douyinpic.com/tos-cn-p-0015/92d4a1ce384d4abb97219ccbfe6bd564_1629595844~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c4gqhfjc77u3f5hm465g&line=1&file_id=65b507a426ce411280a48985aa590e1e&sign=733accba61339e2f7bfd81980b1ef161&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 11165836,
|
||||
"duration": 194880,
|
||||
"desc": "小伙发现一口古老棺材，躺过之后会开天眼，能看到神的存在 #抖音电影 #我的观影报告",
|
||||
"id": "c99d325c-741e-4722-9f39-82bb423a5989",
|
||||
"cover": "https://p26.douyinpic.com/img/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc?from=4257465056_large",
|
||||
"origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/d9e9b6dc783f4c13a8e5cc08df788a02_1627117997~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77ucs14tfra0&line=1&file_id=8b05a5dfb9644865a605ba13cc25f0fe&sign=07cddb6e3292bb2f4478d1f9e6187b33&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 10754240,
|
||||
"duration": 151720,
|
||||
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 120,
|
||||
"comment_count": 0,
|
||||
"digg_count": 156,
|
||||
"comment_count": 7,
|
||||
"download_count": 0,
|
||||
"play_count": 0,
|
||||
"share_count": 0,
|
||||
"forward_count": 0,
|
||||
"collect_count": 2,
|
||||
"sort": 0,
|
||||
"collect_count": 0,
|
||||
"sort": 9,
|
||||
"is_top": 0,
|
||||
"city": "350100",
|
||||
"musicId": "3e4df84d-dbea-48b3-8cdd-136bb49094ad",
|
||||
"musicId": "0da2663b-6bff-425f-a93e-9106b4889c99",
|
||||
"create_time": "1630391758",
|
||||
"creator_id": "54884802577",
|
||||
"status": 1,
|
||||
"topics": [
|
||||
{
|
||||
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
|
||||
"name": "我的观影报告",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
},
|
||||
{
|
||||
"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": null
|
||||
"music": {
|
||||
"id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
|
||||
"cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
|
||||
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
|
||||
"title": "@喵嗷污说电影创作的原声",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "c4ff3c09-e426-4c3d-b6e7-208fe310bb19",
|
||||
"cover": "https://p29.douyinpic.com/img/tos-cn-i-0004/8e9f70a81dab46d8b9803c8730cf5a6e~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/8e9f70a81dab46d8b9803c8730cf5a6e?from=4257465056_large",
|
||||
"origin_cover": "https://p6.douyinpic.com/tos-cn-p-0015/ed85415df6bd47f8bb7a3c608aad53e0_1629595844~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c4gqhfjc77ua1jq3rtfg&line=1&file_id=d49b873b3576436c8dbed7ecc899cc7f&sign=de5d58784bb7fd5902a183abf8d1a8b1&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 10040642,
|
||||
"duration": 180400,
|
||||
"desc": "小伙发现一口古老棺材，躺过之后会开天眼，能看到神的存在 #抖音电影 #我的观影报告",
|
||||
"id": "cf26d20e-577f-4e08-ae0e-77eac2f1adbb",
|
||||
"cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe?from=4257465056_large",
|
||||
"origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/15826b4e6ad54f0bbdb3bd8af024604c_1627117999~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77u4a4ivddk0&line=1&file_id=f8c9a32ba7bc4976b66db0437dd65d1b&sign=c96c9adfacde30c007555eee23f0f214&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 16850048,
|
||||
"duration": 216320,
|
||||
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 248,
|
||||
"comment_count": 6,
|
||||
"digg_count": 72,
|
||||
"comment_count": 4,
|
||||
"download_count": 0,
|
||||
"play_count": 0,
|
||||
"share_count": 4,
|
||||
"share_count": 1,
|
||||
"forward_count": 0,
|
||||
"collect_count": 2,
|
||||
"sort": 1,
|
||||
"collect_count": 0,
|
||||
"sort": 10,
|
||||
"is_top": 0,
|
||||
"city": "350100",
|
||||
"musicId": "222ede4d-0622-4b13-9049-b7b388a8b44d",
|
||||
"musicId": "28944e2e-3bcb-4173-92d2-eb9a263aa826",
|
||||
"create_time": "1630391758",
|
||||
"creator_id": "54884802577",
|
||||
"status": 1,
|
||||
@ -14392,54 +14259,70 @@ export default {
|
||||
"status": 1
|
||||
}
|
||||
],
|
||||
"music": null
|
||||
"music": {
|
||||
"id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
|
||||
"cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
|
||||
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
|
||||
"title": "@喵嗷污说电影创作的原声",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "7b8cd096-a317-4a4f-80be-1490f36906c6",
|
||||
"cover": "https://p26.douyinpic.com/img/tos-cn-i-0004/8ecfe75aa5fd4ecf8314cb6c161c9097~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p9.douyinpic.com/obj/tos-cn-i-0004/8ecfe75aa5fd4ecf8314cb6c161c9097?from=4257465056_large",
|
||||
"origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/dfc079547239425dbca5281f869d5cdb_1629595842~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c4gqhfjc77ua981pv5e0&line=1&file_id=121c9edf9b0f46c386381f35bc71c7dd&sign=451e71c172ae3d039774593bfe69af07&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 13824272,
|
||||
"duration": 233280,
|
||||
"desc": "小伙发现一口古老棺材，躺过之后会开天眼，能看到神的存在 #抖音电影 #我的观影报告 ",
|
||||
"id": "f3fd9b59-6ff5-4301-ac18-a4b8cbf35982",
|
||||
"cover": "https://p9.douyinpic.com/img/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0?from=4257465056_large",
|
||||
"origin_cover": "https://p26.douyinpic.com/tos-cn-p-0015/0d7948340d3543bda3357a9496e0cb86_1627117998~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c3ttjarc77ucsm96q040&line=1&file_id=ccc7eccfa0d746febdcf7436841281a8&sign=a4fc8eb995aad2acdcc622371ecc9c7c&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 23547094,
|
||||
"duration": 230880,
|
||||
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 103,
|
||||
"digg_count": 93,
|
||||
"comment_count": 3,
|
||||
"download_count": 0,
|
||||
"play_count": 0,
|
||||
"share_count": 0,
|
||||
"forward_count": 0,
|
||||
"collect_count": 1,
|
||||
"sort": 2,
|
||||
"sort": 11,
|
||||
"is_top": 0,
|
||||
"city": "350100",
|
||||
"musicId": "8d2c7382-5d6f-4a9b-a376-c93ed100e8d0",
|
||||
"musicId": "6fe6bbfc-d393-45f2-a2c8-432422c5904a",
|
||||
"create_time": "1630391758",
|
||||
"creator_id": "54884802577",
|
||||
"status": 1,
|
||||
"topics": [
|
||||
{
|
||||
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
|
||||
"name": "我的观影报告",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
},
|
||||
{
|
||||
"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": null
|
||||
"music": {
|
||||
"id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
|
||||
"cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
|
||||
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
|
||||
"title": "@喵嗷污说电影创作的原声",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
}
|
||||
},
|
||||
],
|
||||
users:{
|
||||
|
||||
700
src/components/BaseVideo.vue
Normal file
700
src/components/BaseVideo.vue
Normal file
@ -0,0 +1,700 @@
|
||||
<template>
|
||||
<div class="video-wrapper" ref="videoWrapper" :class="name">
|
||||
<Loading v-if="loading" style="position: absolute"/>
|
||||
<video :src="video.video + '?v=123'"
|
||||
:poster="video.video + videoPoster"
|
||||
ref="video"
|
||||
muted
|
||||
preload
|
||||
:autoplay="isPlay" loop>
|
||||
<p> 您的浏览器不支持 video 标签。</p>
|
||||
</video>
|
||||
<img src="../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying">
|
||||
<div class="float" @click="togglePlayVideo">
|
||||
<!-- @click.stop="togglePlayVideo" -->
|
||||
<div :style="{opacity:isMove ? 0:1}" class="normal">
|
||||
<div class="toolbar mb1r">
|
||||
<div class="avatar-ctn mb4r">
|
||||
<img class="avatar" :src="lVideo.author.avatar" alt=""
|
||||
@click.stop="$emit('goUserInfo')">
|
||||
<transition name="fade">
|
||||
<div v-if="!isAttention" @click.stop="attention" class="options" ref="attention-option">
|
||||
<img class="no" src="../assets/img/icon/add-light.png" alt="">
|
||||
<img class="yes" src="../assets/img/icon/ok-red.png" alt="">
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
<div class="love mb2r" @click.stop="loved($event)">
|
||||
<div>
|
||||
<img src="../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
|
||||
<img src="../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved">
|
||||
</div>
|
||||
<span>{{ $likeNum(lVideo.digg_count) }}</span>
|
||||
</div>
|
||||
<div class="message mb2r" @click.stop="$emit('showComments')">
|
||||
<!-- <div class="message mb15p" @click.stop="showComment">-->
|
||||
<img src="../assets/img/icon/message.svg" alt="" class="message-image">
|
||||
<span>{{ $likeNum(lVideo.comment_count) }}</span>
|
||||
</div>
|
||||
<div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
|
||||
<img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
||||
<span>{{ $likeNum(lVideo.share_count) }}</span>
|
||||
</div>
|
||||
<div v-else class="share mb4r" @click.stop="$emit('showShare')">
|
||||
<img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
||||
</div>
|
||||
<BaseMusic
|
||||
:cover="lVideo.music.cover"
|
||||
:key="name"
|
||||
:name="name"
|
||||
:isPlay="isPlay"
|
||||
@click.stop="$emit('goMusic')"
|
||||
/>
|
||||
</div>
|
||||
<div class="content ml1r mb1r" v-if="!isMy">
|
||||
<div class="location-wrapper" v-if=" lVideo.city || lVideo.address">
|
||||
<div class="location">
|
||||
<img src="../assets/img/icon/location.webp" alt="">
|
||||
<span>{{ lVideo.city }}</span>
|
||||
<template v-if="lVideo.address && lVideo.address">
|
||||
<div class="gang"></div>
|
||||
</template>
|
||||
<span>{{ lVideo.address }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name mb1r fb" @click.stop="$emit('goUserInfo')">@{{ lVideo.author.nickname }}</div>
|
||||
<div class="description mb1r">
|
||||
{{ lVideo.desc }}
|
||||
</div>
|
||||
<div class="music" @click.stop="$nav('/music')">
|
||||
<img src="../assets/img/icon/music.svg" alt="" class="music-image">
|
||||
<BaseMarquee :key="name"
|
||||
:name="name"
|
||||
:isPlay="isPlay"
|
||||
:text="lVideo.music.title"
|
||||
@click.stop="$emit('goMusic')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="comment-status">
|
||||
<div class="comment">
|
||||
<div class="type-comment">
|
||||
<img src="../assets/img/icon/head-image.jpeg" alt="" class="avatar">
|
||||
<div class="right">
|
||||
<p>
|
||||
<span class="name">zzzzz</span>
|
||||
<span class="time">2020-01-20</span>
|
||||
</p>
|
||||
<p class="text">北京</p>
|
||||
</div>
|
||||
</div>
|
||||
<transition-group name="comment-status" tag="div" class="loveds">
|
||||
<div class="type-loved" :key="i" v-for="i in test">
|
||||
<img src="../assets/img/icon/head-image.jpeg" alt="" class="avatar">
|
||||
<img src="../assets/img/icon/love.svg" alt="" class="loved">
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress"
|
||||
v-if="duration > 60"
|
||||
:class="progressClass"
|
||||
@touchmove="move"
|
||||
@touchend="end"
|
||||
>
|
||||
<div class="time" v-if="isMove">
|
||||
<span class="currentTime">{{ $duration(currentTime) }}</span>
|
||||
<span class="duration"> / {{ $duration(duration) }}</span>
|
||||
</div>
|
||||
<div class="line" :style="durationStyle" ref="line"></div>
|
||||
<div class="point" :style="durationStyle" ref="point"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import globalMethods from '../utils/global-methods'
|
||||
import BaseMarquee from "./BaseMarquee";
|
||||
import Dom from "../utils/dom";
|
||||
import BaseMusic from "./BaseMusic";
|
||||
import {mapState} from "vuex";
|
||||
import Loading from "./Loading";
|
||||
|
||||
export default {
|
||||
name: "Video",
|
||||
components: {
|
||||
BaseMarquee,
|
||||
BaseMusic,
|
||||
Loading
|
||||
},
|
||||
props: {
|
||||
video: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return -1
|
||||
}
|
||||
},
|
||||
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
|
||||
isPlay: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return true
|
||||
}
|
||||
},
|
||||
isMy: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
durationStyle() {
|
||||
return {left: this.pageX + 'px'}
|
||||
},
|
||||
progressClass() {
|
||||
if (this.isMove) {
|
||||
return 'stop'
|
||||
} else {
|
||||
return this.isPlaying ? '' : 'stop'
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
name: `v-${this.index}-video`,
|
||||
globalMethods: globalMethods,
|
||||
duration: 0,
|
||||
step: 0,
|
||||
currentTime: -1,
|
||||
pageX: 0,
|
||||
height: 0,
|
||||
width: 0,
|
||||
isPlaying: this.isPlay,
|
||||
isAttention: false,
|
||||
line: null,
|
||||
point: null,
|
||||
isMove: false,
|
||||
test: [1, 2],
|
||||
lVideo: this.video,
|
||||
videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
|
||||
timer: null,
|
||||
lastClickTime: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.height = document.body.clientHeight
|
||||
this.width = document.body.clientWidth
|
||||
this.line = this.$refs.line
|
||||
this.point = this.$refs.point
|
||||
let video = this.$refs.video
|
||||
video.currentTime = 0
|
||||
let fun = e => {
|
||||
this.currentTime = Math.ceil(e.target.currentTime)
|
||||
this.pageX = this.currentTime * this.step
|
||||
}
|
||||
video.addEventListener('loadedmetadata', e => {
|
||||
this.duration = video.duration
|
||||
if (this.duration > 60) {
|
||||
// if (this.duration > 6) {
|
||||
this.step = this.width / Math.floor(this.duration)
|
||||
video.addEventListener('timeupdate', fun)
|
||||
}
|
||||
})
|
||||
|
||||
let eventTester = (e, t) => {
|
||||
video.addEventListener(e, () => {
|
||||
if (e === 'playing') this.loading = false
|
||||
if (e === 'progress') this.loading = true
|
||||
if (e === 'waiting') this.loading = true
|
||||
//
|
||||
}, false);
|
||||
}
|
||||
|
||||
|
||||
// eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
|
||||
// eventTester("abort", '客户端主动终止下载（不是因为错误引起）'); //客户端主动终止下载（不是因为错误引起）
|
||||
// eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
|
||||
eventTester("progress", '客户端正在请求数据'); //客户端正在请求数据
|
||||
// // eventTester("suspend", '延迟下载'); //延迟下载
|
||||
// eventTester("abort", '客户端主动终止下载（不是因为错误引起），'); //客户端主动终止下载（不是因为错误引起），
|
||||
// eventTester("error", '请求数据时遇到错误'); //请求数据时遇到错误
|
||||
// eventTester("stalled", '网速失速'); //网速失速
|
||||
// eventTester("play", 'play()和autoplay开始播放时触发'); //play()和autoplay开始播放时触发
|
||||
// eventTester("pause", 'pause()触发'); //pause()触发
|
||||
// eventTester("loadedmetadata", '成功获取资源长度'); //成功获取资源长度
|
||||
// eventTester("loadeddata"); //
|
||||
eventTester("waiting", '等待数据，并非错误'); //等待数据，并非错误
|
||||
eventTester("playing", '开始回放'); //开始回放
|
||||
// eventTester("canplay", '/可以播放，但中途可能因为加载而暂停'); //可以播放，但中途可能因为加载而暂停
|
||||
// eventTester("canplaythrough", '可以播放，歌曲全部加载完毕'); //可以播放，歌曲全部加载完毕
|
||||
// eventTester("seeking", '寻找中'); //寻找中
|
||||
// eventTester("seeked", '寻找完毕'); //寻找完毕
|
||||
// // eventTester("timeupdate",'播放时间改变'); //播放时间改变
|
||||
// eventTester("ended", '播放结束'); //播放结束
|
||||
// eventTester("ratechange", '播放速率改变'); //播放速率改变
|
||||
// eventTester("durationchange", '资源长度改变'); //资源长度改变
|
||||
// eventTester("volumechange", '音量改变'); //音量改变
|
||||
|
||||
this.$refs.videoWrapper.addEventListener('play', this.play)
|
||||
this.$refs.videoWrapper.addEventListener('stop', this.stop)
|
||||
},
|
||||
methods: {
|
||||
//切换视频状态
|
||||
togglePlayVideo(e) {
|
||||
let checkTime = 200
|
||||
let nowTime = new Date().getTime();
|
||||
if (nowTime - this.lastClickTime < checkTime) {
|
||||
clearTimeout(this.timer);
|
||||
} else {
|
||||
this.timer = setTimeout(() => {
|
||||
if (this.isPlaying) {
|
||||
this.pause()
|
||||
} else {
|
||||
this.play()
|
||||
}
|
||||
}, checkTime);
|
||||
}
|
||||
this.lastClickTime = nowTime
|
||||
},
|
||||
play() {
|
||||
new Dom(`.${this.name}-marquee`).trigger('start')
|
||||
new Dom(`.${this.name}-music`).trigger('start')
|
||||
// console.log('trigger-play')
|
||||
this.isPlaying = true
|
||||
if (this.currentTime !== -1) {
|
||||
this.$refs.video.currentTime = this.currentTime
|
||||
}
|
||||
this.$refs.video.volume = 1
|
||||
this.$refs.video.play()
|
||||
},
|
||||
stop() {
|
||||
new Dom(`.${this.name}-marquee`).trigger('stop')
|
||||
new Dom(`.${this.name}-music`).trigger('stop')
|
||||
// console.log('trigger-stop')
|
||||
this.$refs.video.pause()
|
||||
this.isPlaying = false
|
||||
this.$refs.video.currentTime = 0
|
||||
},
|
||||
pause() {
|
||||
new Dom(`.${this.name}-marquee`).trigger('pause')
|
||||
new Dom(`.${this.name}-music`).trigger('pause')
|
||||
// console.log('trigger-pause')
|
||||
this.$refs.video.pause()
|
||||
this.isPlaying = false
|
||||
},
|
||||
$likeNum(v) {
|
||||
return globalMethods.$likeNum(v)
|
||||
},
|
||||
$duration(v) {
|
||||
return globalMethods.$duration(v)
|
||||
},
|
||||
attention() {
|
||||
let option = this.$refs['attention-option']
|
||||
option.classList.add('attention')
|
||||
setTimeout(() => {
|
||||
this.isAttention = true
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
loved(e, index) {
|
||||
this.lVideo.isLoved = !this.lVideo.isLoved
|
||||
this.$emit('update:video', this.lVideo)
|
||||
},
|
||||
start(e) {
|
||||
this.pageX = e.touches[0].pageX
|
||||
},
|
||||
move(e) {
|
||||
if (this.isPlaying) return
|
||||
this.isMove = true
|
||||
this.pause()
|
||||
this.pageX = e.touches[0].pageX
|
||||
// console.log(this.step)
|
||||
this.currentTime = Math.ceil(Math.ceil(e.touches[0].pageX) / this.step)
|
||||
globalMethods.$stopPropagation(e)
|
||||
},
|
||||
end(e) {
|
||||
if (this.isPlaying) return
|
||||
console.log('end', e)
|
||||
setTimeout(() => {
|
||||
this.isMove = false
|
||||
}, 1000)
|
||||
this.currentTime = Math.ceil(Math.ceil(e.changedTouches[0].pageX) / this.step)
|
||||
this.play()
|
||||
globalMethods.$stopPropagation(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../assets/less/color";
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: transform 0.5s linear;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
|
||||
.video-wrapper {
|
||||
position: relative;
|
||||
background: black;
|
||||
font-size: 1.4rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*position: absolute;*/
|
||||
}
|
||||
|
||||
.pause {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
top: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
animation: pause-animation 1.1s linear;
|
||||
|
||||
@scale: scale(1.2);
|
||||
|
||||
@keyframes pause-animation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(2);
|
||||
}
|
||||
10% {
|
||||
opacity: 0.5;
|
||||
transform: @scale;
|
||||
}
|
||||
100% {
|
||||
transform: @scale;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.float {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.normal {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
transition: all .3s;
|
||||
|
||||
.toolbar {
|
||||
//width: 40px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 5px;
|
||||
color: #fff;
|
||||
|
||||
.avatar-ctn {
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -5px;
|
||||
background: red;
|
||||
//background: black;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 1s;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.yes {
|
||||
opacity: 0;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
&.attention {
|
||||
background: white;
|
||||
|
||||
.no {
|
||||
opacity: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.yes {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.love, .message, .share {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@width: 3.5rem;
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.loved {
|
||||
background: red;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 75%;
|
||||
//display: flex;
|
||||
//flex-direction: column;
|
||||
|
||||
.location-wrapper {
|
||||
display: flex;
|
||||
|
||||
.location {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
padding: .4rem;
|
||||
border-radius: .3rem;
|
||||
background: @second-btn-color-tran;
|
||||
|
||||
.gang {
|
||||
height: .8rem;
|
||||
width: 1.5px;
|
||||
margin: 0 .5rem;
|
||||
background: gray;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: .7rem;
|
||||
width: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.music {
|
||||
position: relative;
|
||||
width: 60%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.music-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.comment {
|
||||
|
||||
.type-comment {
|
||||
display: flex;
|
||||
background: rgb(130, 21, 44);
|
||||
border-radius: 50px;
|
||||
padding: 3px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin: 0 10px;
|
||||
color: @second-text-color;
|
||||
|
||||
.name {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.loveds {
|
||||
}
|
||||
|
||||
.type-loved {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
animation: test 1s;
|
||||
animation-delay: .5s;
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.loved {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: red;
|
||||
padding: 3px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes test {
|
||||
from {
|
||||
display: block;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
to {
|
||||
display: none;
|
||||
transform: translate3d(0, -60px, 0);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
bottom: -1px;
|
||||
position: absolute;
|
||||
height: 7px;
|
||||
width: 100vw;
|
||||
background: black;
|
||||
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
font-size: 24px;
|
||||
bottom: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: white;
|
||||
text-align: center;
|
||||
|
||||
.duration {
|
||||
color: darkgray;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
z-index: 9;
|
||||
content: ' ';
|
||||
height: 1.5px;
|
||||
width: 100vw;
|
||||
background: gray;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.line {
|
||||
z-index: 999;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 1px;
|
||||
width: 200vw;
|
||||
transform: translate3d(-200vw, 0, 0);
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.point {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
left: 10vw;
|
||||
top: -1px;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border-radius: 50%;
|
||||
background: gray;
|
||||
}
|
||||
}
|
||||
|
||||
& .stop {
|
||||
&:before {
|
||||
height: 3.5px;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 3px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.point {
|
||||
top: -2px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
362
src/components/RecommendSlideUser.vue
Normal file
362
src/components/RecommendSlideUser.vue
Normal file
@ -0,0 +1,362 @@
|
||||
<template>
|
||||
<div id="SlideUser">
|
||||
<div class="content">
|
||||
<img class="close" src="../assets/img/icon/components/gray-close-full2.png" alt="">
|
||||
<img class="avatar" :src="modelValue.avatar">
|
||||
<div class="name">{{ modelValue.name }}</div>
|
||||
<div class="age">{{ modelValue.age }}岁</div>
|
||||
<div class="realName">通讯录朋友{{ modelValue.realName }}</div>
|
||||
<div class="poster-wrapper">
|
||||
<div class="poster-item" v-for="(i,index) in modelValue.videos.slice(0,3)" @click="globalMethods.$no">
|
||||
<img class="poster" :src="globalMethods.$imgPreview(i.cover)"/>
|
||||
<div class="num">
|
||||
<img class="love" src="../assets/img/icon/love.svg" alt="">
|
||||
<span>{{ globalMethods.$likeNum(i.digg_count) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="options">
|
||||
<base-button type="white">换一个</base-button>
|
||||
<base-button type="primary">关注</base-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Posters from "./Posters";
|
||||
import globalMethods from "../utils/global-methods";
|
||||
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": "c99d325c-741e-4722-9f39-82bb423a5989",
|
||||
"cover": "https://p26.douyinpic.com/img/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc?from=4257465056_large",
|
||||
"origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/d9e9b6dc783f4c13a8e5cc08df788a02_1627117997~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77ucs14tfra0&line=1&file_id=8b05a5dfb9644865a605ba13cc25f0fe&sign=07cddb6e3292bb2f4478d1f9e6187b33&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 10754240,
|
||||
"duration": 151720,
|
||||
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 156,
|
||||
"comment_count": 7,
|
||||
"download_count": 0,
|
||||
"play_count": 0,
|
||||
"share_count": 0,
|
||||
"forward_count": 0,
|
||||
"collect_count": 0,
|
||||
"sort": 9,
|
||||
"is_top": 0,
|
||||
"city": "350100",
|
||||
"musicId": "0da2663b-6bff-425f-a93e-9106b4889c99",
|
||||
"create_time": "1630391758",
|
||||
"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": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
|
||||
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
|
||||
"title": "@喵嗷污说电影创作的原声",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "cf26d20e-577f-4e08-ae0e-77eac2f1adbb",
|
||||
"cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe?from=4257465056_large",
|
||||
"origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/15826b4e6ad54f0bbdb3bd8af024604c_1627117999~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77u4a4ivddk0&line=1&file_id=f8c9a32ba7bc4976b66db0437dd65d1b&sign=c96c9adfacde30c007555eee23f0f214&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 16850048,
|
||||
"duration": 216320,
|
||||
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 72,
|
||||
"comment_count": 4,
|
||||
"download_count": 0,
|
||||
"play_count": 0,
|
||||
"share_count": 1,
|
||||
"forward_count": 0,
|
||||
"collect_count": 0,
|
||||
"sort": 10,
|
||||
"is_top": 0,
|
||||
"city": "350100",
|
||||
"musicId": "28944e2e-3bcb-4173-92d2-eb9a263aa826",
|
||||
"create_time": "1630391758",
|
||||
"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": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
|
||||
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
|
||||
"title": "@喵嗷污说电影创作的原声",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "f3fd9b59-6ff5-4301-ac18-a4b8cbf35982",
|
||||
"cover": "https://p9.douyinpic.com/img/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0?from=4257465056_large",
|
||||
"origin_cover": "https://p26.douyinpic.com/tos-cn-p-0015/0d7948340d3543bda3357a9496e0cb86_1627117998~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c3ttjarc77ucsm96q040&line=1&file_id=ccc7eccfa0d746febdcf7436841281a8&sign=a4fc8eb995aad2acdcc622371ecc9c7c&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 23547094,
|
||||
"duration": 230880,
|
||||
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 93,
|
||||
"comment_count": 3,
|
||||
"download_count": 0,
|
||||
"play_count": 0,
|
||||
"share_count": 0,
|
||||
"forward_count": 0,
|
||||
"collect_count": 1,
|
||||
"sort": 11,
|
||||
"is_top": 0,
|
||||
"city": "350100",
|
||||
"musicId": "6fe6bbfc-d393-45f2-a2c8-432422c5904a",
|
||||
"create_time": "1630391758",
|
||||
"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": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
|
||||
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
|
||||
"title": "@喵嗷污说电影创作的原声",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
globalMethods
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
console.log('modelValue', this.modelValue)
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#SlideUser {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//background: #e1e1e1;
|
||||
background: linear-gradient(to bottom, rgb(69, 63, 73), rgb(25, 20, 42));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.content {
|
||||
width: 85%;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 1.5rem;
|
||||
//box-shadow: 0 0 2rem 0 #b3b3b3;
|
||||
padding: 1.5rem;
|
||||
color: black;
|
||||
position: relative;
|
||||
|
||||
.close {
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 12rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: bold;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.age {
|
||||
font-size: 1rem;
|
||||
background: #f1f1f1;
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.realName {
|
||||
text-align: center;
|
||||
color: black;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
padding: 1rem 0;
|
||||
margin: 1.5rem 0;
|
||||
font-size: 1.2rem;
|
||||
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: 1.2rem;
|
||||
|
||||
|
||||
.love {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
left: 1.5rem;
|
||||
right: 1.5rem;
|
||||
|
||||
.button {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,118 +0,0 @@
|
||||
<template>
|
||||
<div id="SlideUser">
|
||||
<div class="content">
|
||||
<img class="close" src="../assets/img/icon/components/gray-close-full2.png" alt="">
|
||||
<img class="avatar" :src="user.avatar">
|
||||
<div class="name">{{ user.name }}</div>
|
||||
<div class="age">{{ user.age }}岁</div>
|
||||
<div class="realName">通讯录朋友{{ user.realName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "SlideUser",
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
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,
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#SlideUser {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #e1e1e1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.content {
|
||||
width: 85%;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 1.5rem;
|
||||
box-shadow: 0 0 2rem 0 #b3b3b3;
|
||||
padding: 1rem;
|
||||
color: black;
|
||||
position: relative;
|
||||
|
||||
.close {
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 12rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: bold;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.age {
|
||||
font-size: 1rem;
|
||||
background: #f1f1f1;
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.realName {
|
||||
text-align: center;
|
||||
color: gray;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
padding: 1rem 0;
|
||||
margin: 1.5rem 0;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -16,7 +16,9 @@ export default {
|
||||
let id = 'a' + Date.now()
|
||||
let elWidth = 80
|
||||
let rotate = randomNum(0, 1)
|
||||
let template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}" id="${id}" src="${require('../assets/img/icon/loved.svg')}" alt="">`
|
||||
let template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}"
|
||||
id="${id}"
|
||||
src="${new URL('../../assets/img/icon/loved.svg', import.meta.url).href}" alt="">`
|
||||
let el = new Dom().create(template)
|
||||
el.css({top: e.y - elWidth, left: e.x - elWidth / 2,})
|
||||
new Dom().find('.test').append(el)
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div id="TestOne">
|
||||
<SlideUser class="vue"></SlideUser>
|
||||
<RecommendSlideUser/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SlideUser from "../../components/SlideUser";
|
||||
import RecommendSlideUser from "../../components/RecommendSlideUser";
|
||||
|
||||
export default {
|
||||
name: "TestOne",
|
||||
components: {
|
||||
SlideUser
|
||||
RecommendSlideUser
|
||||
},
|
||||
props: {
|
||||
modelValue: false
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div id="TestSlide">
|
||||
<SlideRowList
|
||||
v-if="false"
|
||||
v-if="true"
|
||||
name="baseSlide"
|
||||
v-model:active-index="baseActiveIndex">
|
||||
<SlideItem>
|
||||
<SlideRowList
|
||||
style="height: calc(100% - 5rem);"
|
||||
style="height: calc(100vh - 5rem);"
|
||||
v-model:active-index="activeIndex">
|
||||
<SlideItem>
|
||||
<div id="TestSlide1"></div>
|
||||
<div id="TestSlide1" style="height: calc(100vh - 5rem);"></div>
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<div id="TestSlide2"></div>
|
||||
<div id="TestSlide2" style="height: calc(100vh - 5rem);"></div>
|
||||
</SlideItem>
|
||||
</SlideRowList>
|
||||
<Footer v-bind:init-tab="1"/>
|
||||
@ -21,14 +21,16 @@
|
||||
<div id="TestSlide3"></div>
|
||||
</SlideItem>
|
||||
</SlideRowList>
|
||||
<div id="TestSlide1" style="height: calc(100% - 5rem);"></div>
|
||||
<!-- <div id="TestSlide1" style="height: calc(100% - 5rem);"></div>-->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="jsx">
|
||||
import Slide from "./slide";
|
||||
import Video from "../../components/Video";
|
||||
import Slide from "./slide.jsx";
|
||||
import BaseVideo from "../../components/BaseVideo";
|
||||
import RecommendSlideUser from "../../components/RecommendSlideUser";
|
||||
import resource from "../../assets/data/resource.js";
|
||||
import CONST_VAR from "../../utils/const_var";
|
||||
import Dom from "../../utils/dom";
|
||||
|
||||
export default {
|
||||
name: "TestSlide",
|
||||
@ -43,6 +45,9 @@ export default {
|
||||
pageNo: 0,
|
||||
baseActiveIndex: 0,
|
||||
activeIndex: 0,
|
||||
lastClickTime: 0,
|
||||
isDbClick: false,
|
||||
dbClickTimer: null,
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -52,41 +57,216 @@ export default {
|
||||
mounted() {
|
||||
let list = resource.videos
|
||||
list = list.concat(resource.videos)
|
||||
list.splice(24, 6)
|
||||
list = list.slice(0, 1)
|
||||
list.map(v => {
|
||||
v.type = 'video'
|
||||
})
|
||||
list.unshift({
|
||||
type: 'img',
|
||||
src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
|
||||
})
|
||||
list.unshift({
|
||||
type: 'user',
|
||||
"id": "224e9a00-ffa0-4bc1-bb07-c318c7b02fa5",
|
||||
"avatar": new URL('../../assets/img/icon/avatar/1.png', import.meta.url).href,
|
||||
"name": "何以为家",
|
||||
"sex": "",
|
||||
"age": null,
|
||||
"idCard": null,
|
||||
"phone": "",
|
||||
"address": null,
|
||||
"wechat": "",
|
||||
"password": null,
|
||||
"lastLoginTime": "1629993515",
|
||||
"createTime": "1630035089",
|
||||
"isDelete": 0,
|
||||
"account": "234",
|
||||
"pinyin": "H",
|
||||
"select": false,
|
||||
})
|
||||
// list.splice(3)
|
||||
console.log('length', list.length)
|
||||
let slide = new Slide('#TestSlide1', {
|
||||
list = list.slice(0, 5)
|
||||
list.map(v => v.type = 'recommend-video')
|
||||
if (true) {
|
||||
// if (false) {
|
||||
list.map(v => {
|
||||
v.type = 'recommend-video'
|
||||
})
|
||||
list.unshift({
|
||||
type: 'img',
|
||||
src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
|
||||
})
|
||||
list.unshift({
|
||||
type: 'send-video',
|
||||
src: `http://douyin.ttentau.top/0.mp4`
|
||||
})
|
||||
list.unshift({
|
||||
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": "c99d325c-741e-4722-9f39-82bb423a5989",
|
||||
"cover": "https://p26.douyinpic.com/img/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc?from=4257465056_large",
|
||||
"origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/d9e9b6dc783f4c13a8e5cc08df788a02_1627117997~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77ucs14tfra0&line=1&file_id=8b05a5dfb9644865a605ba13cc25f0fe&sign=07cddb6e3292bb2f4478d1f9e6187b33&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 10754240,
|
||||
"duration": 151720,
|
||||
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 156,
|
||||
"comment_count": 7,
|
||||
"download_count": 0,
|
||||
"play_count": 0,
|
||||
"share_count": 0,
|
||||
"forward_count": 0,
|
||||
"collect_count": 0,
|
||||
"sort": 9,
|
||||
"is_top": 0,
|
||||
"city": "350100",
|
||||
"musicId": "0da2663b-6bff-425f-a93e-9106b4889c99",
|
||||
"create_time": "1630391758",
|
||||
"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": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
|
||||
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
|
||||
"title": "@喵嗷污说电影创作的原声",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "cf26d20e-577f-4e08-ae0e-77eac2f1adbb",
|
||||
"cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe?from=4257465056_large",
|
||||
"origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/15826b4e6ad54f0bbdb3bd8af024604c_1627117999~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77u4a4ivddk0&line=1&file_id=f8c9a32ba7bc4976b66db0437dd65d1b&sign=c96c9adfacde30c007555eee23f0f214&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 16850048,
|
||||
"duration": 216320,
|
||||
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 72,
|
||||
"comment_count": 4,
|
||||
"download_count": 0,
|
||||
"play_count": 0,
|
||||
"share_count": 1,
|
||||
"forward_count": 0,
|
||||
"collect_count": 0,
|
||||
"sort": 10,
|
||||
"is_top": 0,
|
||||
"city": "350100",
|
||||
"musicId": "28944e2e-3bcb-4173-92d2-eb9a263aa826",
|
||||
"create_time": "1630391758",
|
||||
"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": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
|
||||
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
|
||||
"title": "@喵嗷污说电影创作的原声",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "f3fd9b59-6ff5-4301-ac18-a4b8cbf35982",
|
||||
"cover": "https://p9.douyinpic.com/img/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0~c5_300x400.jpeg?from=4257465056_large",
|
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0?from=4257465056_large",
|
||||
"origin_cover": "https://p26.douyinpic.com/tos-cn-p-0015/0d7948340d3543bda3357a9496e0cb86_1627117998~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
|
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c3ttjarc77ucsm96q040&line=1&file_id=ccc7eccfa0d746febdcf7436841281a8&sign=a4fc8eb995aad2acdcc622371ecc9c7c&is_play_url=1&source=PackSourceEnum_PUBLISH",
|
||||
"video_data_size": 23547094,
|
||||
"duration": 230880,
|
||||
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 93,
|
||||
"comment_count": 3,
|
||||
"download_count": 0,
|
||||
"play_count": 0,
|
||||
"share_count": 0,
|
||||
"forward_count": 0,
|
||||
"collect_count": 1,
|
||||
"sort": 11,
|
||||
"is_top": 0,
|
||||
"city": "350100",
|
||||
"musicId": "6fe6bbfc-d393-45f2-a2c8-432422c5904a",
|
||||
"create_time": "1630391758",
|
||||
"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": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
|
||||
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
|
||||
"title": "@喵嗷污说电影创作的原声",
|
||||
"creator_id": "54884802577",
|
||||
"create_time": "1630391758",
|
||||
"status": 1
|
||||
}
|
||||
},
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
// console.log('length', list.length)
|
||||
let config = {
|
||||
render: (item, itemIndex, play) => {
|
||||
let html
|
||||
if (item.type === 'video') {
|
||||
html = <Video
|
||||
if (item.type === 'recommend-video') {
|
||||
html = <BaseVideo
|
||||
isPlay={play}
|
||||
video={item}
|
||||
index={itemIndex}
|
||||
@ -100,36 +280,64 @@ export default {
|
||||
if (item.type === 'img') {
|
||||
html = <img src={item.src} style="height:100%;"/>
|
||||
}
|
||||
if (item.type === 'send-video') {
|
||||
html = <video src={item.src} style="height:100%;"/>
|
||||
}
|
||||
if (item.type === 'user') {
|
||||
html = <div>
|
||||
user
|
||||
</div>
|
||||
html = <RecommendSlideUser modelValue={item}/>
|
||||
}
|
||||
return html
|
||||
},
|
||||
list,
|
||||
index: 0,
|
||||
request: this.$api.videos.recommended
|
||||
})
|
||||
// let slide2 = new Slide('#TestSlide2', {
|
||||
// render: (item, itemIndex, play) => {
|
||||
// return (
|
||||
// <Video
|
||||
// isPlay={play}
|
||||
// video={item}
|
||||
// index={itemIndex}
|
||||
// onShowComments={e => this.isCommenting = true}
|
||||
// onShowShare={e => this.isSharing = true}
|
||||
// onGoUserInfo={e => this.baseActiveIndex = 1}
|
||||
// onGoMusic={e => this.$nav('/home/music')}
|
||||
// v-model={[this.videos[itemIndex], 'video']}
|
||||
// />
|
||||
// )
|
||||
// },
|
||||
// request: this.$api.videos.recommended
|
||||
// })
|
||||
request: async q => {
|
||||
let res = await this.$api.videos.recommended(q)
|
||||
if (res.code === 200) {
|
||||
res.data.list.map(v => v.type = 'recommend-video')
|
||||
return {code: 200, data: res.data}
|
||||
}
|
||||
return {code: 500}
|
||||
}
|
||||
};
|
||||
let slide = new Slide('#TestSlide1', config)
|
||||
let slide2 = new Slide('#TestSlide2', config)
|
||||
|
||||
// let layout = document.querySelector('#TestSlide')
|
||||
// let checkTime = 300
|
||||
// let setIsDbClickFalse = () => {
|
||||
// this.dbClickTimer = setTimeout(() => {
|
||||
// this.isDbClick = false
|
||||
// }, checkTime);
|
||||
// }
|
||||
// layout.addEventListener('click', e => {
|
||||
// if (this.isDbClick) {
|
||||
// this.dbClick(e)
|
||||
// clearTimeout(this.dbClickTimer);
|
||||
// setIsDbClickFalse()
|
||||
// return
|
||||
// }
|
||||
// let nowTime = new Date().getTime();
|
||||
// if (nowTime - this.lastClickTime < checkTime) {
|
||||
// this.dbClick(e)
|
||||
// this.isDbClick = true
|
||||
// setIsDbClickFalse()
|
||||
// }
|
||||
// this.lastClickTime = nowTime;
|
||||
// }, true)
|
||||
},
|
||||
methods: {
|
||||
dbClick(e) {
|
||||
let id = 'a' + Date.now()
|
||||
let elWidth = 80
|
||||
let rotate = this.$randomNum(0, 1)
|
||||
let template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}" id="${id}" src="src/assets/img/icon/loved.svg">`
|
||||
let el = new Dom().create(template)
|
||||
el.css({top: e.y - elWidth - 50, left: e.x - elWidth / 2,})
|
||||
new Dom('#TestSlide').append(el)
|
||||
setTimeout(() => {
|
||||
new Dom(`#${id}`).remove()
|
||||
}, 1000)
|
||||
},
|
||||
async getData() {
|
||||
let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})
|
||||
console.log(res)
|
||||
@ -164,7 +372,7 @@ if (import.meta.hot) {
|
||||
|
||||
</style>
|
||||
|
||||
<style scoped lang="less">
|
||||
<style lang="less">
|
||||
@import "@/assets/less/index";
|
||||
|
||||
#TestSlide {
|
||||
@ -180,5 +388,69 @@ if (import.meta.hot) {
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
}
|
||||
|
||||
.love-dbclick {
|
||||
position: absolute;
|
||||
@width: 9rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
|
||||
&.left {
|
||||
animation: loveLeft 1.1s linear;
|
||||
}
|
||||
|
||||
&.right {
|
||||
animation: loveRight 1.1s linear;
|
||||
}
|
||||
|
||||
@scale: scale(1.2);
|
||||
@rotate: 10deg;
|
||||
|
||||
@keyframes loveLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(2) rotate(0-@rotate);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0-@rotate);
|
||||
}
|
||||
15% {
|
||||
opacity: 1;
|
||||
transform: @scale rotate(0-@rotate);
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: @scale rotate(0-@rotate);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-12rem) scale(2) rotate(0-@rotate);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes loveRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(2) rotate(0+@rotate);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0+@rotate);
|
||||
}
|
||||
15% {
|
||||
opacity: 1;
|
||||
transform: @scale rotate(0+@rotate);
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: @scale rotate(0+@rotate);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-12rem) scale(2) rotate(0+@rotate);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -32,6 +32,7 @@ export default class Slide {
|
||||
this.virtualTotal = 5
|
||||
|
||||
this.height = parseFloat(container.css('height'))
|
||||
// console.log('height',this.height)
|
||||
this.isDrawDown = true
|
||||
this.config = config
|
||||
this.appInsMap = new Map()
|
||||
@ -89,21 +90,23 @@ export default class Slide {
|
||||
start = start - (end - this.total)
|
||||
}
|
||||
}
|
||||
console.log('startIndex', start)
|
||||
console.log('endIndex', end)
|
||||
// console.log('startIndex', start)
|
||||
// console.log('endIndex', end)
|
||||
this.getList().slice(start, end).map((v, i) => {
|
||||
let el = this.getInsEl(v, start + i, false)
|
||||
let el = this.getInsEl(v, start + i, this.index === start + i)
|
||||
this.slideList.appendChild(el)
|
||||
})
|
||||
|
||||
//this.total > this.virtualTotal，只有总条数在不少this.virtualTotal条数的情况下用top
|
||||
//this.index > 1 和setTop保持统一，这里其实可以用this.index > 2
|
||||
if (this.index > 1 && this.total > this.virtualTotal) {
|
||||
// if (this.index > 1 && this.total > this.virtualTotal) {
|
||||
if (this.index > 1) {
|
||||
this.css(this.slideList, 'transform', `translate3d(0px, ${this.getHeight()}px, 0px)`)
|
||||
|
||||
this.slideList.childNodes.forEach(v => {
|
||||
//((this.total - 1 - this.index) > 1 ? 0 : 2),如果当前是最后两条，那么要多减去N个height
|
||||
console.log('((this.total - this.index) > 1 ? 0 : 2)', ((this.total - 1 - this.index) > 1 ? 0 : this.total - 1 - this.index))
|
||||
//(this.total - 1 - this.index) > 1 ? 0 : this.total - 1 - this.index) , 如果当前是最后两条，那么要多减去N个height
|
||||
console.log('((this.total - 1 - this.index) > 1 ? 0 : this.total - 1 - this.index)',
|
||||
(this.total - 1 - this.index) > 1 ? 0 : this.total - 1 - this.index)
|
||||
this.css(v, 'top', (this.index - 2 - ((this.total - 1 - this.index) > 1 ? 0 : this.total - 1 - this.index)) * this.height + 'px')
|
||||
})
|
||||
}
|
||||
@ -116,27 +119,29 @@ export default class Slide {
|
||||
let slideVNode = this.config.render(item, index, play)
|
||||
const app = Vue.createApp({
|
||||
render() {
|
||||
return slideVNode
|
||||
return <div class={`slide-item slide-item-${index}`}>{slideVNode}</div>
|
||||
}
|
||||
})
|
||||
const ins = app.mount(document.createElement('div'))
|
||||
this.appInsMap.set(index, app)
|
||||
|
||||
let parent = this.create(`<div class="slide-item slide-item-${index}"></div>`)
|
||||
parent.appendChild(ins.$el)
|
||||
return parent
|
||||
return ins.$el
|
||||
}
|
||||
|
||||
touchstart(e) {
|
||||
// console.log('touchstart')
|
||||
// console.log('start')
|
||||
this.startLocationX = e.touches[0].pageX
|
||||
this.startLocationY = e.touches[0].pageY
|
||||
this.moveXDistance = 0
|
||||
this.moveYDistance = 0
|
||||
|
||||
this.startTime = Date.now()
|
||||
// console.log('touchstart', this.startTime)
|
||||
this.css(this.slideList, 'transition-duration', '0ms')
|
||||
}
|
||||
|
||||
touchmove(e) {
|
||||
// console.log('move')
|
||||
this.moveXDistance = e.touches[0].pageX - this.startLocationX
|
||||
this.moveYDistance = e.touches[0].pageY - this.startLocationY
|
||||
// console.log('touchmove', this.moveXDistance)
|
||||
@ -144,7 +149,7 @@ export default class Slide {
|
||||
this.isDrawDown = this.moveYDistance < 0
|
||||
// console.log('isDrawDown', this.isDrawDown)
|
||||
if (this.isDrawDown) {
|
||||
if ( this.index === this.getList().length - 1) {
|
||||
if (this.index === this.getList().length - 1) {
|
||||
this.css(this.slideList, 'transform', `translate3d(0px, ${this.getHeight() + (Math.abs(this.moveYDistance) > this.height / 5 ? -this.height / 5 : this.moveYDistance)}px, 0px)`)
|
||||
return
|
||||
}
|
||||
@ -156,6 +161,7 @@ export default class Slide {
|
||||
}
|
||||
|
||||
touchend() {
|
||||
// console.log('end')
|
||||
//如果向下划，并且加载中，并且还是已有数据的最后一条
|
||||
if (this.isDrawDown && this.loading && this.index === this.getList().length - 1) {
|
||||
return console.log('加载中')
|
||||
@ -165,6 +171,15 @@ export default class Slide {
|
||||
if (Date.now() - this.startTime < 40) canSlide = false
|
||||
|
||||
if (canSlide) {
|
||||
let stopPreviousNodeFn = (index) => {
|
||||
setTimeout(() => {
|
||||
let previousNode = this.slideList.querySelector(`.slide-item-${index} .video-wrapper`)
|
||||
previousNode && previousNode.dispatchEvent(new Event('stop'))
|
||||
}, 300)
|
||||
}
|
||||
//index要传过去，不然是修改后的值
|
||||
stopPreviousNodeFn(this.index)
|
||||
|
||||
if (this.isDrawDown) {
|
||||
if (this.index < this.getList().length - 1) {
|
||||
this.index += 1
|
||||
@ -181,8 +196,8 @@ export default class Slide {
|
||||
}
|
||||
let res2 = this.slideList.querySelector(`.slide-item-${removeIndex}`)
|
||||
if (res2) {
|
||||
// this.appInsMap.get(removeIndex).unmount()
|
||||
this.slideList.removeChild(res2)
|
||||
this.appInsMap.get(removeIndex).unmount()
|
||||
// this.slideList.removeChild(res2)
|
||||
}
|
||||
} else {
|
||||
this.getData(this.pageNo + 1, false)
|
||||
@ -207,11 +222,14 @@ export default class Slide {
|
||||
}
|
||||
let res2 = this.slideList.querySelector(`.slide-item-${removeIndex}`)
|
||||
if (res2) {
|
||||
// this.appInsMap.get(removeIndex).unmount()
|
||||
this.slideList.removeChild(res2)
|
||||
this.appInsMap.get(removeIndex).unmount()
|
||||
// this.slideList.removeChild(res2)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let nextNode = this.slideList.querySelector(`.slide-item-${this.index} .video-wrapper`)
|
||||
nextNode && nextNode.dispatchEvent(new Event('play'))
|
||||
this.setTop()
|
||||
this.setActive()
|
||||
}
|
||||
@ -365,4 +365,14 @@ export default {
|
||||
}
|
||||
return str
|
||||
},
|
||||
$randomNum(minNum, maxNum) {
|
||||
switch (arguments.length) {
|
||||
case 1:
|
||||
return parseInt(Math.random() * minNum + 1, 10);
|
||||
case 2:
|
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user