rogee/mp-qvyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: issues

Browse Source
This commit is contained in:
Rogee
2024-12-12 14:39:45 +08:00
parent 8ed78f56ea
commit 1bc12248aa
5 changed files with 141 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/src/components/List.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<van-search v-model="search" placeholder="请输入搜索关键词" />
<van-back-top bottom="80" />
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" offset="100" @load="loadData">
<list-item-card v-for="item in items" :key="item" :item="item" :bought="bought" />
</van-list>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import ListItemCard from "@/components/ListItemCard.vue";
import request from "@/utils/request";
export default defineComponent({
props: {
bought: Boolean,
},
setup(props) {
const search = ref("");
const items = ref([]);
const loading = ref(false);
const finished = ref(false);
const pageLimit = ref(10);
const offset = ref("");
const loadData = () => {
// request /v1/medias
const data = {
offset: offset.value,
action: 0,
limit: pageLimit.value,
bought: props.bought,
};
console.log("loadData, data: ", data);
request
.post("/medias", data)
.then((res) => {
console.log("response: ", res);
if (res === undefined) {
console.error("response error with undefined");
return;
}
if (offset.value == "") {
items.value = res.data;
} else {
items.value = items.value.concat(res.data);
}
offset.value = res.data[res.data.length - 1].hash;
console.log("offset: ", offset.value);
if (res.data.length < pageLimit.value) {
console.log("finished");
finished.value = true;
}
})
.catch((err) => {
console.error("ERROR", err);
})
.finally(() => {
loading.value = false;
console.log("finally: ", loading.value, finished.value);
});
};
return {
search,
items,
loading,
finished,
loadData,
};
},
});
</script>

61
frontend/src/components/ListItemCard.vue
View File

@@ -1,30 +1,53 @@
<template> <template>
<van-card <van-card :thumb="item.poster" @click="play(item)">
v-for="item in list" <template #title>
:key="item.Hash" <div class="van-card__title" style="margin-bottom: 0.5em;">
price="2.00" <strong style="font-size: 1.5em">{{ item.title }}</strong>
desc="描述信息" </div>
title="商品标题" </template>
thumb="https://fastly.jsdelivr.net/van-listt/assets/ipad.jpeg"
lazy-load="true" <template #price v-if="!bought">
@click="play(item)" <div v-if="!item.bought">
> <template v-if="item.discount == 100"> 价格：{{ item.price }} 点 </template>
<template v-else>
<del>{{ item.price }}</del>
<span>{{ (item.price * item.discount) / 100 }}</span>
</template>
</div>
<van-tag v-else type="success" size="large">已购买</van-tag>
</template>
<template #tags> <template #tags>
<van-space> <van-space>
<van-tag plain type="primary">视频</van-tag> <van-tag v-for="resource in item.resources" plain type="primary">
<van-tag plain type="primary">音频</van-tag> <template v-if="resource == 'video'">视频</template>
<van-tag plain type="primary">PDF</van-tag> <template v-if="resource == 'audio'">音频</template>
</van-tag>
</van-space> </van-space>
</template> </template>
</van-card> </van-card>
</template> </template>
<script setup> <script>
import { defineProps } from "vue"; import { defineProps } from "vue";
const props = defineProps({ import { useRouter } from "vue-router";
list: {
type: Array,
required: true, export default defineComponent({
props: {
item: Object,
bought: Boolean,
}, },
}); setup(props) {
const router = useRouter();
const play = (item) => {
router.push({ name: "play", params: { hash: item.hash } });
};
return {
play,
};
},
})
</script> </script>

15
frontend/src/views/TabView.vue
View File

@@ -2,14 +2,23 @@
<RouterView /> <RouterView />
<van-tabbar route v-model="active"> <van-tabbar route v-model="active">
<van-tabbar-item replace name="home" icon="home-o" to="/tab/home">主页 <van-tabbar-item replace name="home" icon="home-o"
:to="{ name: 'tab.home', params: { tenant: route.params.tenant } }">主页
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item replace name="bought" icon="like-o" to="/tab/bought">已购</van-tabbar-item> <van-tabbar-item replace name="bought" icon="like-o"
<van-tabbar-item replace name="me" icon="contact-o" to="/tab/me">我</van-tabbar-item> :to="{ name: 'tab.bought', params: { tenant: route.params.tenant } }">已购</van-tabbar-item>
<van-tabbar-item replace name="user" icon="contact-o"
:to="{ name: 'tab.user', params: { tenant: route.params.tenant } }">我</van-tabbar-item>
</van-tabbar> </van-tabbar>
</template> </template>
<script setup> <script setup>
import { RouterView } from "vue-router"; import { RouterView } from "vue-router";
import { useRoute, useRouter } from "vue-router";
const active = ref("home"); const active = ref("home");
const router = useRouter();
const route = useRoute();
console.log("router: ", router.params);
console.log("route: ", route.params);
</script> </script>

8
frontend/src/views/tabs/BoughtView.vue
View File

@@ -1,3 +1,7 @@
<template> <template>
<h1>Bought</h1> <list :bought=true />
</template> </template>
<script setup>
import List from "@/components/List.vue";
</script>

102
frontend/src/views/tabs/HomeView.vue
View File

@@ -1,105 +1,7 @@
<template> <template>
<van-search v-model="search" placeholder="请输入搜索关键词" /> <list :bought=false />
<van-back-top bottom="80" />
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" offset="100" @load="loadData">
<van-card v-for="item in items" :key="item" :thumb="item.poster" @click="play(item)">
<template #title>
<div class="van-card__title" style="margin-bottom: 0.5em;">
<strong style="font-size: 1.5em">{{ item.title }}</strong>
</div>
</template>
<template #price v-if="!item.bought">
<template v-if="item.discount == 100"> 价格：{{ item.price }} 点 </template>
<template v-else>
<del>{{ item.price }}</del>
<span>{{ (item.price * item.discount) / 100 }}</span>
</template>
</template>
<template #price v-else>
<van-tag type="success" size="large">已购买</van-tag>
</template>
<template #tags>
<van-space>
<van-tag v-for="resource in item.resources" plain type="primary">
<template v-if="resource == 'video'">视频</template>
<template v-if="resource == 'audio'">音频</template>
</van-tag>
</van-space>
</template>
</van-card>
</van-list>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import List from "@/components/List.vue";
import { useRouter } from "vue-router";
import request from "@/utils/request";
const router = useRouter();
const search = ref("");
const items = ref([]);
const loading = ref(false);
const finished = ref(false);
const pageLimit = ref(10);
const offset = ref("");
const play = (item) => {
// vue router goto play view
console.log("play -", item);
router.push({ name: "play", params: { hash: item.hash } });
};
const loadData = () => {
// request /v1/medias
const data = {
offset: offset.value,
action: 0,
limit: pageLimit.value,
};
console.log("loadData, data: ", data);
request
.post("/medias", data)
.then((res) => {
console.log("response: ", res);
if (res === undefined) {
console.error("response error with undefined");
return;
}
if (offset.value == "") {
items.value = res.data;
} else {
items.value = items.value.concat(res.data);
}
offset.value = res.data[res.data.length - 1].hash;
console.log("offset: ", offset.value);
if (res.data.length < pageLimit.value) {
console.log("finished");
finished.value = true;
}
})
.catch((err) => {
console.error("ERROR", err);
})
.finally(() => {
loading.value = false;
console.log("finally: ", loading.value, finished.value);
});
};
onMounted(() => {
loadData();
});
</script> </script>