|
@@ -0,0 +1,92 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="mibiShop container-height">
|
|
|
|
|
+ <Breadcrumb />
|
|
|
|
|
+ <div class="list">
|
|
|
|
|
+ <div class="list_item bg_color_fff border_radius_16 box_shadow_card"
|
|
|
|
|
+ v-for="item in 10" :key="item"
|
|
|
|
|
+ >
|
|
|
|
|
+ <img src="" alt="" style="width: 291.2px; height: 291.2px;" class="bg_color_f5">
|
|
|
|
|
+ <div class="item_info padding16">
|
|
|
|
|
+ <div class="line2 font_size18 bold line_height24">
|
|
|
|
|
+ {{item==1?'小红xhs书虚拟电商赚钱项目开店选品定价上架自动发货在...':'小红xhs书虚拟'}}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="flex-center-between">
|
|
|
|
|
+ <div class="bold color_price font_size20">900米币</div>
|
|
|
|
|
+ <div class="border_radius_4 lijiduihuan color_fff gradient font_size14 flex-center mt10">
|
|
|
|
|
+ 立即兑换
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <Pagination
|
|
|
|
|
+ :total="listTotal"
|
|
|
|
|
+ :page-size="searchFom.pageSize"
|
|
|
|
|
+ :current-page="searchFom.pageNum"
|
|
|
|
|
+ @page-change="handlePageChange"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import Pagination from '@/components/Pagination.vue'
|
|
|
|
|
+import { ref, onMounted,reactive } from 'vue'
|
|
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
|
|
+import { useAppStore } from '@/pinia/appStore'
|
|
|
|
|
+const appStore = useAppStore()
|
|
|
|
|
+const route = useRoute()
|
|
|
|
|
+const query = route.query;
|
|
|
|
|
+const learnNoteId = ref(query.learnNoteId || '');
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+// 添加分页相关数据
|
|
|
|
|
+const list = ref([]);
|
|
|
|
|
+const listTotal = ref(0);
|
|
|
|
|
+const searchFom = reactive({
|
|
|
|
|
+ pageNum: 1,
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
|
+})
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ // getList();
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+const handlePageChange = (page) => {
|
|
|
|
|
+ searchFom.pageNum = page
|
|
|
|
|
+ // 这里可以添加获取数据的逻辑
|
|
|
|
|
+ console.log('当前页:', page);
|
|
|
|
|
+ getList();
|
|
|
|
|
+}
|
|
|
|
|
+// 查询寻找工作流列表
|
|
|
|
|
+const getList = async (type) => {
|
|
|
|
|
+ if(type === 'init'){
|
|
|
|
|
+ searchFom.pageNum = 1
|
|
|
|
|
+ }
|
|
|
|
|
+ // const res = await getQuestList(searchFom)
|
|
|
|
|
+ // if(res.code === 200){
|
|
|
|
|
+ // listTotal.value = res.total
|
|
|
|
|
+ // list.value = res.rows
|
|
|
|
|
+ // }
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+</script>
|
|
|
|
|
+<style lang="scss">
|
|
|
|
|
+.mibiShop{
|
|
|
|
|
+ .list{
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(291.2px, 1fr));
|
|
|
|
|
+ gap: 16px;
|
|
|
|
|
+ .list_item{
|
|
|
|
|
+ width: 291.2px;
|
|
|
|
|
+ .item_info{
|
|
|
|
|
+ height: 124px;
|
|
|
|
|
+ .line2{
|
|
|
|
|
+ height: 52px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .lijiduihuan{
|
|
|
|
|
+ height: 32px;
|
|
|
|
|
+ padding: 0 16px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|