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

Merge branch 'study' of http://39.101.133.168:8807/wanglin/practice_VUE into study

dev
lenghui 7 months ago
parent
b24d858241 2f3eb78702
commit
36f26cb757
4 changed files with 181 additions and 149 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. 22
      vueHomilyLink/src/api/ChannelApi.js
  2. 2
      vueHomilyLink/src/api/index.js
  3. 304
      vueHomilyLink/src/views/ChannelView.vue
  4. 2
      vueHomilyLink/vite.config.js

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

@ -0,0 +1,22 @@
import service from ".";
const ChannelApi = {
//获取频道列表
getchannels(){
return service.get('/list');
},
//获取shows列表
getShows(Id,UserId,FlagType){
return service.post('/channel',{Id,UserId,FlagType});
},
//订阅状态
subscribe(Id,UserId){
return service.post('/subscription',{Id,UserId})
},
//取消订阅
unSubscribe(Id,UserId){
return service.delete('/subscription',{Id,UserId})
}
}
export default ChannelApi;

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

@ -4,7 +4,7 @@ const service = axios.create({
// baseURL: 'http://192.168.9.19:8080',
baseURL: '/api'
});
// http://192.168.8.191:8080
//Axios的响应拦截器..
service.interceptors.response.use(resp => {

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

@ -1,38 +1,16 @@
<script setup>
import Nav from '@/components/Nav.vue';
import { ref } from 'vue';
import { computed, ref } from 'vue';
import router from '@/router';
import ChannelApi from '@/api/ChannelApi';
//频道列表
const channelList = ref([]);
function getChannel() {
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);
//频道
//获取传递的参数中的id
//默认信息
const channel = ref({
id: 1,
image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
@ -40,130 +18,76 @@ 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);
}
function changeTab(tab, flagType) {
currentTab.value = tab;
loadShows(flagType);
}
// 展示列表1
const shows = ref([]);
// 加载展示列表
function loadShows() {
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"
}
}
])
function loadShows(channleId,flagType) {
//shows查询api,根据id,userId
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();
loadShows(channel.value.id,flagType);
//订阅
function submit() {
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>
@ -172,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-频道主题 -->
@ -198,12 +123,24 @@ function submit() {
<div class="channel-content">
<!-- 导航栏 -->
<div class="content-nav">
<button class="tab">全部</button>
<button class="tab">文章</button>
<button class="tab">视频</button>
<button
class="tab"
:class="{ active: currentTab === 'all' }"
@click="changeTab(channel.id,null)">全部</button>
<button
class="tab"
:class="{ active: currentTab === 'articles' }"
@click="changeTab(channel.id,1)">文章</button>
<button
class="tab"
:class="{ active: currentTab === 'videos' }"
@click="changeTab(channel.id, 2)">视频</button>
</div>
<component :is="currentTabComponent"></component>
<!-- 内容 -->
<div class="content-list">
<!-- 如果是全部 -->
<div v-if="currentTab == 'all'" class="content-list">
<ul class="list-display">
<!-- 一条 -->
<li v-for="show in shows">
@ -237,6 +174,80 @@ function submit() {
</li>
</ul>
</div>
<div v-if="currentTab == 'videos'" class="content-list">
<ul class="list-display">
<!-- 一条 -->
<li v-for="show in shows">
<div class="sub-topic">
<!-- 左边 -->
<div class="sub-left">
<img class="sub-image" :src="show.cover" alt="视频缩略图">
<div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time">
{{ show.videoDuration }}
</div>
</div>
<!-- 右边 -->
<div class="sub-right">
<!-- title -->
<h3 :name="show.name" class="right-title">{{ show.name }}</h3>
<div class="right-inline">
<!-- 发布的用户名 -->
<div class="right-item">
<img :src="show.user.avatar" class="img1">
<div :username="show.user.username">{{ show.user.username }}</div>
</div>
<!-- 评论 -->
<span :comments="show.comments" class="right-item">{{ show.comments }}评论</span>
<!-- 日期 -->
<div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }}
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div v-if="currentTab == 'articles'" class="content-list">
<ul class="list-display">
<!-- 一条 -->
<li v-for="show in shows">
<div class="sub-topic">
<!-- 左边 -->
<div class="sub-left">
<img class="sub-image" :src="show.cover" alt="视频缩略图">
<div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time">
{{ show.videoDuration }}
</div>
</div>
<!-- 右边 -->
<div class="sub-right">
<!-- title -->
<h3 :name="show.name" class="right-title">{{ show.name }}</h3>
<div class="right-inline">
<!-- 发布的用户名 -->
<div class="right-item">
<img :src="show.user.avatar" class="img1">
<div :username="show.user.username">{{ show.user.username }}</div>
</div>
<!-- 评论 -->
<span :comments="show.comments" class="right-item">{{ show.comments }}评论</span>
<!-- 日期 -->
<div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }}
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
@ -400,9 +411,8 @@ function submit() {
}
.active {
color: red;
color: red;
border-bottom: 2px solid red;
/* 修正了属性名中的空格 */
}
.list-display {

2
vueHomilyLink/vite.config.js
View File

@ -23,5 +23,5 @@ export default defineConfig({
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
}
})
Write Preview
Loading…
Cancel
Save