ali_ai_learn_web/src/pages/mibiShop/mibiShop.vue

<template>
  <div class="mibiShop container-height">
    <Breadcrumb />
    <div class="list">
      <div class="list_item bg_color_fff border_radius_16 box_shadow_card list_item_animation"
      v-for="item in list" :key="item"
      >
        <img :src="item.imageUrl" alt="" style="width: 291.2px; height: 291.2px;border-radius: 16px 16px 0 0;" class="bg_color_f5">
        <div class="item_info padding16">
          <div class="line2 font_size18 bold line_height24">
            {{item.itemName}}
          </div>
          <div class="flex-center-between">
            <div v-if="appStore.userInfo?.memberType==1 || appStore.userInfo?.memberType==2">
              <div class="font_size20">
                <div class="bold color_price "> {{item.discountPoints}} {{$t('common.mibi')}}</div>
                <div class="line_through gray999 mr10 ml10 font_size14">{{item.points}}{{$t('common.mibi')}}</div>
              </div>
            </div>
            <div class="bold color_price font_size20" v-else>{{item.points}}{{$t('common.mibi')}}</div>
            <div class="border_radius_4 lijiduihuan  color_fff gradient font_size14 flex-center"
             @click="isLogin({callback: openLoginDialog,t}) && confirmBuy({
                callback:initList,
                appStore,
                router,
                type:'pointsBalance',
                price:appStore.userInfo?.memberType==1 || appStore.userInfo?.memberType==2 ? item.discountPoints:item.points,
                t,
                productId:item.itemId,
                orderType:'mi_mall',
                payMethod:'MI'
              })"
            >
              {{$t('common.exchange')}}
            </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, inject } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/pinia/appStore'
import { getMallList } from '@/api/mall.js'
import { confirmBuy,isLogin } from '@/utils/util.js'
import { useI18n } from 'vue-i18n' 
const { t } = useI18n() 
const appStore = useAppStore()
const router = useRouter()
const openLoginDialog = inject('openLoginDialog')


// 添加分页相关数据
const list = ref([]);
const listTotal = ref(0);
const searchFom = reactive({
  pageNum: 1,
  pageSize: 20,
})
onMounted(() => {
  getList('init');
});

const handlePageChange = (page) => {
  searchFom.pageNum = page
  // 这里可以添加获取数据的逻辑
  console.log('当前页:', page);
  getList();
}
const initList = ()=>{
  getList('init');
};
// 查询寻找工作流列表
const getList = async (type) => {
  if(type === 'init'){
    searchFom.pageNum = 1
  }
  const res = await getMallList(searchFom)
  if(res.code === 200){
    listTotal.value = res.total || 0;
    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: 144px;
        .line2{
          height: 52px;
        }
        .lijiduihuan{
          height: 32px;
          padding: 0 16px;
        }
      }
    }
  }
}
</style>