我的订单+我的
This commit is contained in:
77
components/list/SelectionsList.nvue
Normal file
77
components/list/SelectionsList.nvue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="video-list">
|
||||
<list
|
||||
class="list"
|
||||
show-scrollbar="false">
|
||||
<cell
|
||||
class="cell"
|
||||
:key="item.videoId"
|
||||
v-for="item in lists">
|
||||
<view
|
||||
class="video-item"
|
||||
@click="handleClick(item)">
|
||||
<image class="video-cover" :src="item.videoCover" mode="aspectFill"></image>
|
||||
<view class="right-view">
|
||||
<text
|
||||
class="video-title"
|
||||
:class="{active : item.definition ? item.videoId === currentVideo && item.quality == currentDefinition : item.videoId === currentVideo}"
|
||||
>{{ item.videoTitle }}</text>
|
||||
<!-- <text class="video-time">{{ item.videoTime }}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</cell>
|
||||
</list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"VideoList",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
lists: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
currentVideo: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
currentDefinition: {
|
||||
type: Number,
|
||||
default: 20
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(item) {
|
||||
this.$emit('listClick', item);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.video-list
|
||||
flex 1
|
||||
.list
|
||||
flex 1
|
||||
padding 0 20rpx
|
||||
.video-item
|
||||
flex-direction row
|
||||
margin 15rpx 0
|
||||
.right-view
|
||||
margin-left 20rpx
|
||||
flex 1
|
||||
.video-cover
|
||||
width 160rpx
|
||||
height 90rpx
|
||||
border-radius 2rpx
|
||||
.video-title
|
||||
font-size 26rpx
|
||||
line-height 39rpx
|
||||
color #FFF
|
||||
&.active
|
||||
color #FF920A
|
||||
</style>
|
||||
118
components/list/VideoList.nvue
Normal file
118
components/list/VideoList.nvue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view class="video-list">
|
||||
<slot name="title"></slot>
|
||||
<list
|
||||
class="list"
|
||||
show-scrollbar="false">
|
||||
<cell
|
||||
class="cell"
|
||||
:key="item.videoId"
|
||||
v-for="item in lists">
|
||||
<view
|
||||
class="video-item"
|
||||
@click="handleClick(item)">
|
||||
<template
|
||||
v-if="pickMode"
|
||||
>
|
||||
<image
|
||||
v-if="!item.selected"
|
||||
class="radio-icon"
|
||||
src="@/static/download/unselected@2x.png"></image>
|
||||
<image
|
||||
v-else
|
||||
class="radio-icon"
|
||||
src="@/static/download/selected@2x.png"></image>
|
||||
</template>
|
||||
<image class="video-cover" :src="item.videoCover" mode="aspectFill"></image>
|
||||
<view class="right-view">
|
||||
<text
|
||||
class="video-title"
|
||||
:class="{active : item.videoId === currentVideo}"
|
||||
>{{ item.videoTitle }}</text>
|
||||
<text class="video-time">{{ item.videoTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</cell>
|
||||
</list>
|
||||
<slot name="footer"></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { mapMutations } from 'vuex'
|
||||
export default {
|
||||
name:"VideoList",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
lists: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
currentVideo: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isPushing: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
pickMode: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['makeDownloadList']),
|
||||
handleClick(item) {
|
||||
if (this.pickMode) {
|
||||
this.$set(item, 'selected', !item.selected);
|
||||
return;
|
||||
}
|
||||
if (this.isPushing) {
|
||||
uni.showToast({
|
||||
title: '投屏中，暂不支持切换',
|
||||
icon: 'none'
|
||||
})
|
||||
return;
|
||||
}
|
||||
this.$emit('listClick', item);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.video-list
|
||||
flex 1
|
||||
padding 0 30rpx
|
||||
background-color: #FFF;
|
||||
.list
|
||||
flex 1
|
||||
.video-item
|
||||
flex-direction row
|
||||
align-items: center
|
||||
margin 15rpx 0
|
||||
.right-view
|
||||
margin-left 20rpx
|
||||
flex 1
|
||||
.radio-icon
|
||||
margin-right: 20rpx
|
||||
width: 30rpx
|
||||
height: 30rpx
|
||||
.video-cover
|
||||
width 320rpx
|
||||
height 180rpx
|
||||
border-radius 10rpx
|
||||
.video-title
|
||||
font-size 28rpx
|
||||
line-height 42rpx
|
||||
color #333
|
||||
&.active
|
||||
color #FF920A
|
||||
.video-time
|
||||
margin-top 30rpx
|
||||
font-size 26rpx
|
||||
color #666
|
||||
</style>
|
||||
63
components/list/WaterFall.nvue
Normal file
63
components/list/WaterFall.nvue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<view class="video-list">
|
||||
<waterfall
|
||||
class="waterfall"
|
||||
column-count="2"
|
||||
column-gap="10"
|
||||
left-gap="10"
|
||||
right-gap="10"
|
||||
>
|
||||
<cell
|
||||
class="cell"
|
||||
:key="item.videoId"
|
||||
v-for="item in lists">
|
||||
<navigator
|
||||
class="video-item"
|
||||
hover-class="navigator-hover"
|
||||
:url="`/pages/detail/detail?videoId=${item.videoId}&userId=${item.userId}`">
|
||||
<image class="video-cover" :src="item.videoCover"></image>
|
||||
<text class="video-title">{{ item.videoTitle }}</text>
|
||||
</navigator>
|
||||
</cell>
|
||||
</waterfall>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"VideoList",
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
lists: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
column: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.video-list
|
||||
flex 1
|
||||
.waterfall
|
||||
flex 1
|
||||
.video-cover
|
||||
width 350rpx
|
||||
height 196rpx
|
||||
border-radius 10rpx
|
||||
.video-title
|
||||
margin 20rpx 0
|
||||
font-size 28rpx
|
||||
color #333333
|
||||
text-overflow ellipsis
|
||||
lines 1
|
||||
|
||||
</style>
|
||||
15
components/list/api/ip.js
Normal file
15
components/list/api/ip.js
Normal file
@@ -0,0 +1,15 @@
|
||||
export function getIP (data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: 'https://logger-data.csslcloud.net/api/detection',
|
||||
data,
|
||||
success: (res) => {
|
||||
if (res.error) {
|
||||
reject(res.data)
|
||||
} else {
|
||||
resolve(res.data)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
92
components/list/api/list.js
Normal file
92
components/list/api/list.js
Normal file
@@ -0,0 +1,92 @@
|
||||
import { baseInfo } from '../store/index.js'
|
||||
const localDataList = [{
|
||||
videoId: '7CDB7C3805062F7E753C612EB38A8D5A',
|
||||
videoTitle: '7CDB7C3805062F7E753C612EB38A8D5A',
|
||||
videoCover: 'https://4-img.bokecc.com/comimage/391E6E3340A00767/2019-05-13/2477AD327B256E5C9C33DC5901307461-1.jpg'
|
||||
|
||||
},{
|
||||
videoId: '17E1B738D75F78C63835A29B2A11961',
|
||||
videoTitle: '17E1B738D75F78C63835A29B2A11961',
|
||||
videoCover: 'https://4-img.bokecc.com/comimage/391E6E3340A00767/2019-05-13/2477AD327B256E5C9C33DC5901307461-1.jpg'
|
||||
},{
|
||||
videoId: '5D03190EE9C3F78CFC9558351D509E7C',
|
||||
videoTitle: '5D03190EE9C3F78CFC9558351D509E7C',
|
||||
videoCover: 'https://4-img.bokecc.com/comimage/391E6E3340A00767/2019-05-13/2477AD327B256E5C9C33DC5901307461-1.jpg'
|
||||
},
|
||||
{
|
||||
videoId: 'DDD7F00E720A8D8713358DE27D943A99',
|
||||
videoTitle: 'DDD7F00E720A8D8713358DE27D943A99',
|
||||
videoCover: 'https://4-img.bokecc.com/comimage/391E6E3340A00767/2019-05-13/2477AD327B256E5C9C33DC5901307461-1.jpg'
|
||||
}]
|
||||
|
||||
const listWidthUserId = [
|
||||
{
|
||||
userId: '2661F9756E5C832E',
|
||||
videoId: '67835AFD5375A87E7E6C9CEE8B422289',
|
||||
videoTitle: '数字人产品介绍视频',
|
||||
videoCover: 'http://5-img.bokecc.com/comimage/2661F9756E5C832E/2023-08-08/67835AFD5375A87E7E6C9CEE8B422289-1.jpg'
|
||||
},
|
||||
{
|
||||
userId: '2661F9756E5C832E',
|
||||
videoId: '016A4748BCF3EEF22BBA984E86119800',
|
||||
videoTitle: '3步PPT',
|
||||
videoCover: 'http://5-img.bokecc.com/comimage/2661F9756E5C832E/2023-11-24/016A4748BCF3EEF22BBA984E86119800-1.jpg'
|
||||
},
|
||||
{
|
||||
userId: '2661F9756E5C832E',
|
||||
videoId: '8D80E1FDDD31C8E52BBA984E86119800',
|
||||
videoTitle: 'ppt基础版合成-无音乐',
|
||||
videoCover: 'http://5-img.bokecc.com/comimage/2661F9756E5C832E/2024-02-27/8D80E1FDDD31C8E52BBA984E86119800-1.jpg'
|
||||
},
|
||||
{
|
||||
userId: '2661F9756E5C832E',
|
||||
videoId: '30CF0072C1E791DE63835A29B2A11961',
|
||||
videoTitle: '板书',
|
||||
videoCover: 'http://4-img.bokecc.com/comimage/2661F9756E5C832E/2023-11-24/30CF0072C1E791DE63835A29B2A11961-1.jpg'
|
||||
}
|
||||
]
|
||||
|
||||
const listWidthUserId2 = [
|
||||
{
|
||||
userId: '169A751C6B4BE3F6',
|
||||
videoId: '617B49BE28A32D61FC9558351D509E7C',
|
||||
videoTitle: '飞天·逐梦',
|
||||
videoCover: 'http://5-img.bokecc.com/comimage/169A751C6B4BE3F6/2023-11-17/617B49BE28A32D61FC9558351D509E7C-1.jpg'
|
||||
},
|
||||
{
|
||||
userId: '169A751C6B4BE3F6',
|
||||
videoId: '617B49BE28A32D610498CE5AAF1F53F5',
|
||||
videoTitle: '年度最走心广告',
|
||||
videoCover: 'http://5-img.bokecc.com/comimage/169A751C6B4BE3F6/2023-11-17/617B49BE28A32D610498CE5AAF1F53F5-1.jpg'
|
||||
},
|
||||
{
|
||||
userId: '169A751C6B4BE3F6',
|
||||
videoId: '617B49BE28A32D61B463AB73BD4C026B',
|
||||
videoTitle: '年少有为',
|
||||
videoCover: 'http://5-img.bokecc.com/comimage/169A751C6B4BE3F6/2023-11-17/617B49BE28A32D61B463AB73BD4C026B-1.jpg'
|
||||
},
|
||||
{
|
||||
userId: '169A751C6B4BE3F6',
|
||||
videoId: '8F1AF45ACE7571CBB463AB73BD4C026B',
|
||||
videoTitle: '少年-梦然',
|
||||
videoCover: 'http://5-img.bokecc.com/comimage/169A751C6B4BE3F6/2023-11-17/8F1AF45ACE7571CBB463AB73BD4C026B-1.jpg'
|
||||
}
|
||||
]
|
||||
|
||||
export function getList (callback) {
|
||||
uni.request({
|
||||
url: 'https://p.bokecc.com/demo/videoinfo.json',
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
// ========== mock start ==========
|
||||
res.data = [].concat(listWidthUserId, listWidthUserId2)
|
||||
// ========== mock end ===========
|
||||
callback(res.data);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.errMsg
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
16
components/list/api/sid copy.js
Normal file
16
components/list/api/sid copy.js
Normal file
@@ -0,0 +1,16 @@
|
||||
export function getSid (data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: 'https://spark.bokecc.com/demo/app-api/sdk-sid.bo',
|
||||
data,
|
||||
success: (res) => {
|
||||
if (res.error) {
|
||||
reject(res.data)
|
||||
} else {
|
||||
console.log('request getSid', data, res)
|
||||
resolve(res.data)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
16
components/list/api/sid.js
Normal file
16
components/list/api/sid.js
Normal file
@@ -0,0 +1,16 @@
|
||||
export function getSid (data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: 'https://spark.bokecc.com/demo/app-api/sdk-sid.bo',
|
||||
data,
|
||||
success: (res) => {
|
||||
if (res.error) {
|
||||
reject(res.data)
|
||||
} else {
|
||||
console.log('request getSid', data, res)
|
||||
resolve(res.data)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user