商品列表：对接接口

src/api.js

@@ -76,5 +76,21 @@ export default {
         return
       }
     })
+  },
+  getPrizeList: function (pageNum, pageSize) {
+    return axios({
+      method: 'post',
+      url: `${process.env.VUE_APP_DEPLOY_ORIGIN}/api/cms/game/prize/pageList`,
+      headers: {
+        token: store.state.token,
+      },
+      data: {
+        pageNum,
+        pageSize,
+        searchKey: '',
+      }
+    }).then((res) => {
+      return res.data.data
+    })
   }
 }

src/views/ShopView.vue

@@ -19,6 +19,14 @@
       </button>
     </menu>
 
+    <button
+      v-show="tabIdx === 0"
+      class="prev-page"
+      :class="{
+        hide: pageNumber === 0
+      }"
+      @click="onClickPrevPage"
+    />
     <ul
       v-show="tabIdx === 0"
       class="prize-list"
@@ -34,7 +42,7 @@
       >
         <img
           class="thumb"
-          :src="prizeItem.thumb"
+          :src="`${$env.VUE_APP_DEPLOY_ORIGIN}${prizeItem.thumb}`"
           alt=""
           draggable="false"
         >
@@ -69,6 +77,10 @@
     <button
       v-show="tabIdx === 0"
       class="next-page"
+      :class="{
+        hide: !haveNextPage
+      }"
+      @click="onClickNextPage"
     />
 
     <div
@@ -128,16 +140,17 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from "vue"
+import { ref, computed, watch, onMounted, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import PrizeRedeem from '@/components/PrizeRedeem.vue'
 
-
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
+const $env = inject('$env')
+
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -145,64 +158,29 @@ const {
 
 const tabIdx = ref(0)
 
-const prizeList = ref([
-  {
-    id: 0,
-    stock: 10,
-    thumb: require('@/assets/images/login-page-title.png'),
-    name: 'K线上的解放了开始的',
-    score: 120,
-  },
-  {
-    id: 0,
-    stock: 10,
-    thumb: require('@/assets/images/login-page-title.png'),
-    name: 'K线上的解放了开始的',
-    score: 120,
-  },
-  {
-    id: 0,
-    stock: 10,
-    thumb: require('@/assets/images/login-page-title.png'),
-    name: 'K线上的解放了开始的',
-    score: 120,
-  },
-  {
-    id: 0,
-    stock: 10,
-    thumb: require('@/assets/images/login-page-title.png'),
-    name: 'K线上的解放了开始的',
-    score: 120,
-  },
-  {
-    id: 0,
-    stock: 10,
-    thumb: require('@/assets/images/login-page-title.png'),
-    name: 'K线上的解放了开始的',
-    score: 120,
-  },
-  {
-    id: 0,
-    stock: 10,
-    thumb: require('@/assets/images/login-page-title.png'),
-    name: 'K线上的解放了开始的',
-    score: 120,
-  },
-  {
-    id: 0,
-    stock: 10,
-    thumb: require('@/assets/images/login-page-title.png'),
-    name: 'K线上的解放了开始的',
-    score: 120,
-  },
-  {
-    id: 0,
-    stock: 10,
-    thumb: require('@/assets/images/login-page-title.png'),
-    name: 'K线上的解放了开始的',
-    score: 120,
-  },
-])
+/**
+ * 一页页的商品
+ */
+const prizeList = ref([])
+const pageNumber = ref(0)
+function onClickPrevPage() {
+  if (pageNumber.value > 0) {
+    pageNumber.value--
+  }
+}
+function onClickNextPage() {
+  if (haveNextPage.value) {
+    pageNumber.value++
+  }
+}
+const total = ref(0)
+const haveNextPage = computed(() => {
+  return total.value > ((pageNumber.value + 1) * 8)
+})
+api.getPrizeList(pageNumber.value, 8).then((res) => {
+  total.value = res.total
+  prizeList.value = res.records
+})
 
 const isShowRedeem = ref(false)
 const redeemPrizeData = ref({})
@@ -318,6 +296,19 @@ const items = ref([
       margin-bottom: 38px;
     }
   }
+  >button.prev-page{
+    width: 58px;
+    height: 58px;
+    background-image: url(@/assets/images/icon_arrow-left-round.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    margin-right: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    &.hide {
+      pointer-events: none;
+      opacity: 0;
+    }
+  }
   >ul.prize-list{
     flex: 0 0 auto;
     width: calc(1400 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -397,16 +388,16 @@ const items = ref([
     }
   }
   >button.next-page{
-    position: absolute;
-    top: 50%;
-    right: calc(102 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    transform: translate(0, -50%);
     width: 58px;
     height: 58px;
     background-image: url(@/assets/images/icon_arrow-right-round.png);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    &.hide {
+      pointer-events: none;
+      opacity: 0;
+    }
   }
   >.redeem-record-content{
     flex: 1 0 1px;