wanglin
/
practice_VUE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

频道接口对接，订阅还没完成

channel_yjt
ting 7 months ago
parent
7ac66edc23
commit
2f3eb78702
4 changed files with 72 additions and 151 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      vueHomilyLink/src/api/ChannelApi.js
  2. 6
      vueHomilyLink/src/api/index.js
  3. 204
      vueHomilyLink/src/views/ChannelView.vue
  4. 11
      vueHomilyLink/vite.config.js

2
vueHomilyLink/src/api/ChannelApi.js
View File

@ -7,7 +7,7 @@ const ChannelApi = {
},
//获取shows列表
getShows(Id,UserId,FlagType){
return service.get('/channel',{Id,UserId,FlagType});
return service.post('/channel',{Id,UserId,FlagType});
},
//订阅状态
subscribe(Id,UserId){

6
vueHomilyLink/src/api/index.js
View File

@ -1,9 +1,11 @@
import axios from "axios";
const service = axios.create({
baseURL: 'http://localhost:8080',
// baseURL: 'http://192.168.8.191:8080',
// baseURL: 'http://localhost:8080',
baseURL: '/api',
});
// http://192.168.8.191:8080
//Axios的响应拦截器..
service.interceptors.response.use(resp => {

204
vueHomilyLink/src/views/ChannelView.vue
View File

@ -2,36 +2,13 @@
import Nav from '@/components/Nav.vue';
import { computed, ref } from 'vue';
import router from '@/router';
import ChannelApi from '@/api/ChannelApi';
//频道列表
const channelList = ref([]);
function getChannel() {
//查询频道列表api
channelList.value = ([
{
id: 1,
image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
name: "量价时空四维预测术",
// 订阅数量
subscriptionCount: 60,
backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
status: 1
},
{
id:2,
image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
name:"时空四维预测术",
// 订阅数量
subscriptionCount:60,
backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
status:0
}
]);
}
getChannel();
//视频上的导航栏
const currentTab = ref('all');
const flagType = ref(null);
//频道
//默认信息
const channel = ref({
@ -41,26 +18,26 @@ const channel = ref({
// 订阅数量
subscriptionCount: 60,
backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
status: 1
});
//加载频道信息
function loadChannels(channelId) {
channelList.value.forEach(ch =>{
if(ch.id == channelId){
channel.value = ch;
}
});
//1-左侧导航栏加载
function getChannels() {
//查询频道列表api
ChannelApi.getchannels().then((result) =>{
console.log(result.data);
channelList.value = result.data;
console.log("++++",channelList.value);
})
}
// loadChannels();
getChannels();
function toLink(channelId) {
router.push({ path: '/channel', query: { id: channelId } });
loadChannels(channelId);
loadShows();
loadShows(channelId,flagType);
console.log("flga",flagType.value);
}
//视频上的导航栏
const currentTab = ref('all');
const flagType = ref(null);
function changeTab(tab, flagType) {
currentTab.value = tab;
@ -70,116 +47,48 @@ function changeTab(tab, flagType) {
// 展示列表1
const shows = ref([]);
// 加载展示列表
function loadShows(flagType) {
function loadShows(channleId,flagType) {
//shows查询api,根据id,userId
shows.value = ([
{
id: 3,
cover: " https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg",
name: "联合利剑！五大机器人史诗升级",
user: {
id: 1,
username: "HomilyLink",
avatar: "https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
},
releaseTime: "2024-05-26 11:42:00",
// 视频时长
videoDuration: "01:22:11",
// 观看数量
viewCount: 796,
comments: 1,
likes: 10,
// 内容标识类型,图文还是视频
flagType: 1,
},
{
id: 4,
cover: "https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg",
name: "壁垒将至？中美博弈开启拼刺刀白热化阶段",
user: {
id: 1,
username: "HomilyLink",
avatar: "https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
},
releaseTime: "2024-01-24 09:55:00",
// 视频时长
videoDuration: "03:56:00",
// 观看数量
viewCount: "594",
comments: 50,
likes: 16,
// 内容标识类型,图文还是视频
flagType: 1,
club: {
id: 1,
image: "https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
name: "博股俱乐部",
introduction: "博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
backgroundImage: ""
},
channel: {
id: 1,
image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
name: "量价时空四维预测术",
// 订阅数量
subscriptionCount: 60,
backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg"
}
},
{
id: 5,
cover: "https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg",
name: "壁垒将至？中美博弈开启拼刺刀白热化阶段",
user: {
id: 1,
username: "HomilyLink",
avatar: "https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
password: "123456",
},
releaseTime: "2024-01-24 09:55:00",
// 视频时长
videoDurition: "03:56:00",
// 观看数量
viewCount: "594",
comments: 50,
likes: 16,
// 内容标识类型,图文还是视频
flagType: 0,
club: {
id: 1,
image: "https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
name: "博股俱乐部",
introduction: "博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
backgroundImage: ""
},
channel: {
id: 1,
image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
name: "量价时空四维预测术",
// 订阅数量
subscriptionCount: 60,
backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg"
}
}
])
ChannelApi.getShows(channleId,90000000,flagType.value).then((result)=>{
console.log(result.data)
channel.value = result.data.channel;
console.log("频道",channel.value)
shows.value = result.data.shows;
console.log("视频",shows.value);
})
}
loadShows(flagType);
loadShows(channel.value.id,flagType);
//订阅
function submit() {
//修改状态，editapi
}
function submit(channelId) {
console.log("频道id",channelId);
ChannelApi.subscribe(channelId,90000000).then((result)=>{
if(result && result.success){
alert('订阅成功！');
loadShows(channelId);
}else{
alert('订阅失败！');
}
})
}
function unsubmit(channelId){
console.log("取消频道id",channelId);
ChannelApi.unSubscribe(channelId,90000000).then((result) =>{
if(result && result.success){
alert('取消订阅成功！');
loadShows(channelId);
}
})
}
// function buttonActive(){
// }
// buttonActive();
</script>
<template>
@ -187,14 +96,15 @@ function submit() {
<ChannelNav></ChannelNav>
<div class="club-nav">
<div class="container">
<button v-for="channel in channelList" @click="toLink(channel.id)" class="nav-item">{{ channel.name }}</button>
<button v-for="ch in channelList.list" @click="toLink(ch.id)" class="nav-item">{{ ch.name }}</button>
</div>
</div>
<div class="channel">
<div class="channel-head">
<!-- 1-订阅按钮 -->
<button v-if="channel.status && channel.status == 1" class="submited">已订阅</button>
<button v-else class="submit" @click="submit">订阅</button>
<button v-if="channel.status && channel.status == 1" class="submited"
@click="unsubmit(channel.id)">取消订阅</button>
<button v-else class="submit" @click="submit(channel.id)">订阅</button>
<!-- 2-背景图片 -->
<img alt="" class="bc-image" :src="channel.backgroundImage" />
<!-- 3-频道主题 -->
@ -216,15 +126,15 @@ function submit() {
<button
class="tab"
:class="{ active: currentTab === 'all' }"
@click="changeTab('all', null)">全部</button>
@click="changeTab(channel.id,null)">全部</button>
<button
class="tab"
:class="{ active: currentTab === 'articles' }"
@click="changeTab('articles', 1)">文章</button>
@click="changeTab(channel.id,1)">文章</button>
<button
class="tab"
:class="{ active: currentTab === 'videos' }"
@click="changeTab('videos', 2)">视频</button>
@click="changeTab(channel.id, 2)">视频</button>
</div>
<component :is="currentTabComponent"></component>
<!-- 内容 -->

11
vueHomilyLink/vite.config.js
View File

@ -15,4 +15,13 @@ export default defineConfig({
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})
server: {
proxy: {
'/api': {
target: 'http://192.168.9.19:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
Write Preview
Loading…
Cancel
Save