Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
65c5df98 1 parent 41a41ba4

✨ feat(我的作品,我的订阅，我的收藏): API联调

Inline Side-by-side
Showing 7 changed files with 88 additions and 78 deletions
<template>
<div class="video-wrapper" style="position: relative;">
<div class="status">
<div v-if="mp" class="status">
<van-image v-if="item.status === 'ENABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_enable" />
<van-image v-if="item.status === 'REFUSE'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_refuse" />
<van-image v-if="item.status === 'APPLY'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_apply" />
</div>
<div class="video-div" :id="'mui-player-' + item.id"></div>
<div v-if="item.status === 'ENABLE'" class="normal-module">
<div class="video-bar">
<van-row>
<van-col span="12" @click="goTo">
<van-image round width="2rem" height="2rem" style="vertical-align: middle;" :src="item.avatar" />&nbsp;
<span style="font-size: 1.05rem;vertical-align: middle;">{{ item.name }}</span>
</van-col>
<van-col span="12">
<div style="padding: 0.25rem; padding-top: 0.75rem; text-align: right;">
<span @click="setComment">
<van-icon :name="icon_liuyan" size="1.2rem" style="vertical-align: bottom;" />
{{ item.comment_num }}
</span>
&nbsp;&nbsp;&nbsp;
<span @click="handleAction('like', detail.id)">
<van-icon v-if="!detail.is_like" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" />
<van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" />
{{ detail.like_num }}
</span>
</div>
</van-col>
</van-row>
<div v-if="mp">
<div v-if="item.status === 'ENABLE'" class="normal-module">
<div class="video-bar">
<van-row>
<van-col span="12" @click="goTo">
<van-image round width="2rem" height="2rem" style="vertical-align: middle;" :src="item.avatar" />&nbsp;
<span style="font-size: 1.05rem;vertical-align: middle;">{{ item.name }}</span>
</van-col>
<van-col span="12">
<div style="padding: 0.25rem; padding-top: 0.75rem; text-align: right;">
<span @click="setComment">
<van-icon :name="icon_liuyan" size="1.2rem" style="vertical-align: bottom;" />
{{ item.comment_num }}
</span>
&nbsp;&nbsp;&nbsp;
<span @click="handleAction('like', detail.id)">
<van-icon v-if="!detail.is_like" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" />
<van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" />
{{ detail.like_num }}
</span>
</div>
</van-col>
</van-row>
</div>
<div @click="goTo" style="color: #999999; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} ｜ {{ item.localism_type }}
</div>
</div>
<div @click="goTo" style="color: #999999; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} ｜ {{ item.localism_type }}
</div>
</div>
<div v-else class="audit-module" style="margin-top: 1rem;">
<div style="color: #222222; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} ｜ {{ item.localism_type }}</div>
<div v-if="item.status === 'REFUSE'" style="padding: 0 1rem 1rem 1rem; font-size: 0.85rem;">
<p style="color: #999999; margin-bottom: 0.25rem;">老师留言：</p>
<p>{{ item.check_note }}</p>
<div v-else class="audit-module" style="margin-top: 1rem;">
<div style="color: #222222; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} ｜ {{ item.localism_type }}</div>
<div v-if="item.status === 'REFUSE'" style="padding: 0 1rem 1rem 1rem; font-size: 0.85rem;">
<p style="color: #999999; margin-bottom: 0.25rem;">老师留言：</p>
<p>{{ item.check_note }}</p>
</div>
</div>
</div>
</div>
......@@ -49,6 +51,7 @@
import icon_dianzan1 from '@images/icon-dianzan01@2x.png'
import icon_dianzan2 from '@images/icon-dianzan02@2x.png'
import icon_liuyan from '@images/icon-liuyan@2x.png'
import icon_refuse from '@images/icon-jujue@2x.png'
import icon_apply from '@images/icon-shenhe@2x.png'
import icon_enable from '@images/icon-tongguo@2x.png'
......@@ -77,7 +80,8 @@ export default {
props: ['item'],
data() {
return {
detail: {}
detail: {},
mp: ''
}
},
created() {
......@@ -96,6 +100,7 @@ export default {
{ attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
]
})
this.mp = mp; // 渲染速度问题，只有视频控件渲染完成后显示
this.detail = _.cloneDeep(this.item);
}, 500);
},
......
......@@ -26,7 +26,7 @@ const props = defineProps({
const emit = defineEmits(['on-click']);
const handle = () => {
if (props.type === 'C') { // 类型是客户端时，才能查看
emit('on-click', '')
emit('on-click', props.item)
}
}
......
<template>
<div class="video-wrapper">
<div class="video-div" :id="'mui-player-' + item.id"></div>
<div class="normal-module">
<div v-if="mp" class="normal-module">
<div class="video-bar">
<van-row>
<van-col span="12" @click="goTo">
......@@ -65,7 +65,8 @@ export default {
props: ['item'],
data() {
return {
detail: {}
detail: {},
mp: ''
}
},
created() {
......@@ -84,6 +85,7 @@ export default {
{ attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
]
})
this.mp = mp;
this.detail = _.cloneDeep(this.item)
}, 500);
},
......
......@@ -26,7 +26,7 @@ axios.interceptors.request.use(
// 响应拦截器
axios.interceptors.response.use(
response => {
let userType = router && router.currentRoute.value.href.indexOf('business') > 0 ? 'b' : 'c';
let userType = router && router.currentRoute.value.href?.indexOf('business') > 0 ? 'b' : 'c';
if (response.data.code === 401) {
// 未授权跳转登录页
// 带着上一个页面的信息
......
<template>
<div class="book-video-list">
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<template v-for="item in dataList" :key="item" style="height: 3rem;">
<video-card :item="item"></video-card>
</template>
</van-list>
<template v-for="item in prodList" :key="item" style="height: 3rem;">
<video-card :item="item"></video-card>
</template>
<div style="height: 2rem;"></div>
</div>
</template>
......@@ -21,31 +20,22 @@ const $route = useRoute();
const $router = useRouter();
// 处理书籍下作品列表
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => {
for (let i = 0; i < 20; i++) {
list.value.push(list.value.length + 1);
}
// 加载状态结束
loading.value = false;
// 数据全部加载完成
if (list.value.length >= 100) {
finished.value = true;
}
}, 1000);
};
onMounted(() => {
})
const prodList = ref([])
axios.get('/srv/?a=my_favor')
.then(res => {
if (res.data.code === 1) {
prodList.value = res.data.data.prod;
} else {
console.warn(res);
Toast({
icon: 'close',
message: res.data.msg
});
}
})
.catch(err => {
console.error(err);
})
</script>
<script>
......
......@@ -16,16 +16,31 @@ import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();
const items = reactive([])
onMounted(() => {
for (let index = 0; index < 20; index++) {
items.push({
id: index,
avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg'
})
const items = ref([]);
axios.get('/srv/?a=my_subscribe')
.then(res => {
if (res.data.code === 1) {
items.value = res.data.data;
} else {
console.warn(res);
Toast({
icon: 'close',
message: res.data.msg
});
}
})
.catch(err => {
console.error(err);
});
const onClick = (item) => {
$router.push({
path: '/client/bookDetail',
query: {
id: item.id
}
});
}
</script>
<script>
......@@ -33,12 +48,12 @@ import mixin from 'common/mixin';
export default {
mixins: [mixin.init],
data () {
data() {
return {
}
},
mounted () {
mounted() {
},
methods: {
......@@ -48,5 +63,4 @@ export default {
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
......
......@@ -47,7 +47,6 @@ export default {
mixins: [mixin.init],
data () {
return {
}
},
mounted () {
......