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

频道订阅接口对接 文章视频跳转按钮

channel_yjt
ting 7 months ago
parent
2f3eb78702
commit
47b715d690
5 changed files with 287 additions and 30 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. 243
      vueHomilyLink/package-lock.json
  2. 1
      vueHomilyLink/package.json
  3. 8
      vueHomilyLink/src/api/ChannelApi.js
  4. 5
      vueHomilyLink/src/main.js
  5. 60
      vueHomilyLink/src/views/ChannelView.vue

243
vueHomilyLink/package-lock.json
View File

@ -9,6 +9,7 @@
"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"
@ -488,6 +489,24 @@
"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==",
"license": "MIT",
"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==",
"license": "MIT",
"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",
@ -879,6 +898,31 @@
"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==",
"license": "MIT",
"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==",
"license": "MIT",
"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==",
"license": "MIT"
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.5",
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@ -938,6 +982,17 @@
"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==",
"license": "MIT",
"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",
@ -1220,6 +1275,27 @@
"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==",
"license": "MIT"
},
"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==",
"license": "MIT",
"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==",
"license": "MIT"
},
"node_modules/@vitejs/plugin-vue": {
"version": "5.2.0",
"resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.0.tgz",
@ -1435,6 +1511,100 @@
"integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
"license": "MIT"
},
"node_modules/@vueuse/core": {
"version": "9.13.0",
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
"integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
"license": "MIT",
"dependencies": {
"@types/web-bluetooth": "^0.0.16",
"@vueuse/metadata": "9.13.0",
"@vueuse/shared": "9.13.0",
"vue-demi": "*"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/metadata": {
"version": "9.13.0",
"resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
"integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared": {
"version": "9.13.0",
"resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
"integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
"license": "MIT",
"dependencies": {
"vue-demi": "*"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/async-validator": {
"version": "4.2.5",
"resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
"integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
"license": "MIT"
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
@ -1588,6 +1758,12 @@
"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==",
"license": "MIT"
},
"node_modules/debug": {
"version": "4.3.7",
"resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.7.tgz",
@ -1665,6 +1841,32 @@
"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==",
"license": "MIT",
"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",
@ -1736,6 +1938,12 @@
"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==",
"license": "MIT"
},
"node_modules/estree-walker": {
"version": "2.0.2",
"resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
@ -2037,6 +2245,29 @@
"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==",
"license": "MIT"
},
"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==",
"license": "MIT"
},
"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==",
"license": "MIT",
"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",
@ -2056,6 +2287,12 @@
"@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==",
"license": "MIT"
},
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
@ -2146,6 +2383,12 @@
"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==",
"license": "BSD-3-Clause"
},
"node_modules/npm-run-path": {
"version": "5.3.0",
"resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-5.3.0.tgz",

1
vueHomilyLink/package.json
View File

@ -10,6 +10,7 @@
},
"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
}
})
}
}

5
vueHomilyLink/src/main.js
View File

@ -2,13 +2,18 @@ import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')

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