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

Merge branch 'channel_yjt' into study

dev
ting 7 months ago
parent
36f26cb757 47b715d690
commit
eefd3e59c0
5 changed files with 61 additions and 161 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. 150
      vueHomilyLink/package-lock.json
  2. 2
      vueHomilyLink/package.json
  3. 8
      vueHomilyLink/src/api/ChannelApi.js
  4. 2
      vueHomilyLink/src/main.js
  5. 60
      vueHomilyLink/src/views/ChannelView.vue

150
vueHomilyLink/package-lock.json
View File

@ -8,6 +8,8 @@
"name": "vuehomilylink",
"version": "0.0.0",
"dependencies": {
"axios": "^1.7.8",
"element-plus": "^2.9.0",
"pinia": "^2.2.6",
"vue": "^3.5.12",
"vue-router": "^4.4.5"
@ -487,22 +489,6 @@
"node": ">=6.9.0"
}
},
"node_modules/@ctrl/tinycolor": {
"version": "3.6.1",
"resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
"integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
"engines": {
"node": ">=10"
}
},
"node_modules/@element-plus/icons-vue": {
"version": "2.3.1",
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
"integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/@esbuild/aix-ppc64": {
"version": "0.21.5",
"resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@ -894,28 +880,6 @@
"node": ">=12"
}
},
"node_modules/@floating-ui/core": {
"version": "1.6.8",
"resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.8.tgz",
"integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
"dependencies": {
"@floating-ui/utils": "^0.2.8"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.6.12",
"resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.12.tgz",
"integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
"dependencies": {
"@floating-ui/core": "^1.6.0",
"@floating-ui/utils": "^0.2.8"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.8",
"resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz",
"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.5",
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@ -975,16 +939,6 @@
"dev": true,
"license": "MIT"
},
"node_modules/@popperjs/core": {
"name": "@sxzz/popperjs-es",
"version": "2.11.7",
"resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@rollup/pluginutils": {
"version": "5.1.3",
"resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
@ -1267,24 +1221,6 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/lodash": {
"version": "4.17.13",
"resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.13.tgz",
"integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg=="
},
"node_modules/@types/lodash-es": {
"version": "4.17.12",
"resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
"integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
"dependencies": {
"@types/lodash": "*"
}
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.16",
"resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
"integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
},
"node_modules/@vitejs/plugin-vue": {
"version": "5.2.0",
"resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.0.tgz",
@ -1500,6 +1436,23 @@
"integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
"license": "MIT"
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"license": "MIT"
},
"node_modules/axios": {
"version": "1.7.8",
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.8.tgz",
"integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/birpc": {
"version": "0.2.19",
"resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz",
@ -1624,11 +1577,6 @@
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"license": "MIT"
},
"node_modules/dayjs": {
"version": "1.11.13",
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
},
"node_modules/debug": {
"version": "4.3.7",
"resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.7.tgz",
@ -1697,31 +1645,6 @@
"dev": true,
"license": "ISC"
},
"node_modules/element-plus": {
"version": "2.9.0",
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.9.0.tgz",
"integrity": "sha512-ccOFXKsauo2dtokAr4OX7gZsb7TuAoVxA2zGRZo5o2yyDDBLBaZxOoFQPoxITSLcHbBfQuNDGK5Iag5hnyKkZA==",
"dependencies": {
"@ctrl/tinycolor": "^3.4.1",
"@element-plus/icons-vue": "^2.3.1",
"@floating-ui/dom": "^1.0.1",
"@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
"@types/lodash": "^4.14.182",
"@types/lodash-es": "^4.17.6",
"@vueuse/core": "^9.1.0",
"async-validator": "^4.2.5",
"dayjs": "^1.11.13",
"escape-html": "^1.0.3",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"lodash-unified": "^1.0.2",
"memoize-one": "^6.0.0",
"normalize-wheel-es": "^1.2.0"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@ -1793,11 +1716,6 @@
"node": ">=6"
}
},
"node_modules/escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
},
"node_modules/estree-walker": {
"version": "2.0.2",
"resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
@ -2065,26 +1983,6 @@
"dev": true,
"license": "MIT"
},
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"node_modules/lodash-unified": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
"integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
"peerDependencies": {
"@types/lodash-es": "*",
"lodash": "*",
"lodash-es": "*"
}
},
"node_modules/lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
@ -2104,11 +2002,6 @@
"@jridgewell/sourcemap-codec": "^1.5.0"
}
},
"node_modules/memoize-one": {
"version": "6.0.0",
"resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
"integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
},
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
@ -2178,11 +2071,6 @@
"dev": true,
"license": "MIT"
},
"node_modules/normalize-wheel-es": {
"version": "1.2.0",
"resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
},
"node_modules/npm-run-path": {
"version": "5.3.0",
"resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-5.3.0.tgz",

2
vueHomilyLink/package.json
View File

@ -9,6 +9,8 @@
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.7.8",
"element-plus": "^2.9.0",
"pinia": "^2.2.6",
"vue": "^3.5.12",
"vue-router": "^4.4.5"

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

@ -15,7 +15,13 @@ const ChannelApi = {
},
//取消订阅
unSubscribe(Id,UserId){
return service.delete('/subscription',{Id,UserId})
console.log("_________",Id);
return service.delete('/subscription',{
params:{
Id:Id,
UserId:UserId
}
})
}
}

2
vueHomilyLink/src/main.js
View File

@ -8,6 +8,8 @@ import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())

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

@ -1,13 +1,14 @@
<script setup>
import Nav from '@/components/Nav.vue';
import { computed, ref } from 'vue';
import {ElMessage} from 'element-plus';
import router from '@/router';
import ChannelApi from '@/api/ChannelApi';
//频道列表
const channelList = ref([]);
//视频上的导航栏
const currentTab = ref('all');
const currentTab = ref(null);
const flagType = ref(null);
//频道
//默认信息
@ -18,6 +19,7 @@ const channel = ref({
// 订阅数量
subscriptionCount: 60,
backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
status:true
});
//1-左侧导航栏加载
function getChannels() {
@ -33,15 +35,17 @@ getChannels();
function toLink(channelId) {
router.push({ path: '/channel', query: { id: channelId } });
loadShows(channelId,flagType);
flagType.value = null;
currentTab.value = null;
loadShows(channelId,flagType.value);
console.log("flga",flagType.value);
}
function changeTab(tab, flagType) {
currentTab.value = tab;
loadShows(flagType);
function changeTab(channelId, flagType) {
currentTab.value = flagType;
loadShows(channelId,flagType);
}
// 展示列表1
@ -49,38 +53,36 @@ const shows = ref([]);
// 加载展示列表
function loadShows(channleId,flagType) {
//shows查询api,根据id,userId
ChannelApi.getShows(channleId,90000000,flagType.value).then((result)=>{
ChannelApi.getShows(channleId,90000000,flagType).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(channel.value.id,flagType);
loadShows(channel.value.id,flagType.value);
//订阅
function submit(channelId) {
console.log("频道id",channelId);
ChannelApi.subscribe(channelId,90000000).then((result)=>{
if(result && result.success){
alert('订阅成功！');
loadShows(channelId);
if(result && result.data.success){
ElMessage.success('订阅成功！');
loadShows(channelId,null);
}else{
alert('订阅失败！');
ElMessage.console.error('订阅失败！');
}
})
}
//取消订阅
function unsubmit(channelId){
console.log("取消频道id",channelId);
ChannelApi.unSubscribe(channelId,90000000).then((result) =>{
if(result && result.success){
alert('取消订阅成功！');
loadShows(channelId);
if(result && result.data.success){
console.log("取消频道id+++++++",channelId);
ElMessage.success('取消订阅成功！');
loadShows(channelId,null);
}
})
}
@ -102,7 +104,7 @@ function unsubmit(channelId){
<div class="channel">
<div class="channel-head">
<!-- 1-订阅按钮 -->
<button v-if="channel.status && channel.status == 1" class="submited"
<button v-if="channel.status && channel.status == true" class="submited"
@click="unsubmit(channel.id)">取消订阅</button>
<button v-else class="submit" @click="submit(channel.id)">订阅</button>
<!-- 2-背景图片 -->
@ -115,7 +117,7 @@ function unsubmit(channelId){
<div class="title-content">
<h3 :name="channel.name">{{ channel.name }}</h3>
<span :subscriptionCount="channel.subscriptionCount">{{ channel.subscriptionCount }}已订阅</span>
<p style="line-height: 18px;">.</p>
</div>
</div>
</div>
@ -125,22 +127,22 @@ function unsubmit(channelId){
<div class="content-nav">
<button
class="tab"
:class="{ active: currentTab === 'all' }"
:class="{ active: currentTab == null }"
@click="changeTab(channel.id,null)">全部</button>
<button
class="tab"
:class="{ active: currentTab === 'articles' }"
@click="changeTab(channel.id,1)">文章</button>
:class="{ active: currentTab == 1 }"
@click="changeTab(channel.id,1)">视频</button>
<button
class="tab"
:class="{ active: currentTab === 'videos' }"
@click="changeTab(channel.id, 2)">视频</button>
:class="{ active: currentTab == 2 }"
@click="changeTab(channel.id, 2)">文章</button>
</div>
<component :is="currentTabComponent"></component>
<!-- 内容 -->
<!-- 如果是全部 -->
<div v-if="currentTab == 'all'" class="content-list">
<div v-if="currentTab == null" class="content-list">
<ul class="list-display">
<!-- 一条 -->
<li v-for="show in shows">
@ -175,7 +177,7 @@ function unsubmit(channelId){
</ul>
</div>
<div v-if="currentTab == 'videos'" class="content-list">
<div v-if="currentTab == 1" class="content-list">
<ul class="list-display">
<!-- 一条 -->
<li v-for="show in shows">
@ -211,7 +213,7 @@ function unsubmit(channelId){
</div>
<div v-if="currentTab == 'articles'" class="content-list">
<div v-if="currentTab == 2" class="content-list">
<ul class="list-display">
<!-- 一条 -->
<li v-for="show in shows">

Write Preview
Loading…
Cancel
Save