接入数据接口

src/api/game_data.ts

@@ -1,9 +1,12 @@
-const DATA_BASE = ''
+const DATA_BASE = 'http://154.8.214.202:8030'
 
 export const searchGames = (params: any) => {
+  let data = {skip: 0, limit: 10}
+  Object.assign(data, params)
   return new Promise((resolve, reject) => {
     uni.request({
-      url: `${DATA_BASE}/request/games`,
+      url: `${DATA_BASE}/getgamelist`,
+      data,
       success: (res) => {
         resolve && resolve(res.data);
       },

src/components/BigImgCell/index.vue

@@ -4,28 +4,27 @@
       <view class="custom-cover" @click="onClick(gData.gameId)">
         <image class="cover-image" mode="aspectFill" :src="gData.banner">
         </image>
-        <view class="cover-tag">
+        <view class="cover-tag" v-if="gData.cutOff">
-          <text class="uni-subtitle uni-white">20%折扣</text>
+          <text class="uni-subtitle uni-white">{{gData.cutOff}}%折扣</text>
         </view>
         <view class="cover-content">
-          <text class="uni-subtitle uni-white">{{gData.name}} ({{gData.ename}})</text>
+          <text class="uni-subtitle uni-white">{{gData.name}} ({{gData.subName}})</text>
         </view>
       </view>
     </template>
-    <view class="tag-row" @click="onClick(gData.gameId)">
+    <view v-if="gData.tags.length > 0" class="tag-row" @click="onClick(gData.gameId)">
         <view class="demo-uni-col dark tag-list">
-          <uni-tag text="标签" class="game-tag" inverted="true" type="warning"></uni-tag>
+          <uni-tag v-for="tag in gData.tags" :text="tag.name" class="game-tag" :inverted="!tag.fill" :type="tag.type"></uni-tag>
-          <uni-tag text="标签" class="game-tag" inverted="true" type="warning"></uni-tag>
         </view>
     </view>
     <view class="demo-uni-row price-row" @click="onClick(gData.gameId)">
         <view class="">
-          <text class="price price-new">$200.0</text>
+          <text class="price price-new">¥{{gData.price}}</text>
-          <text class="price price-raw">$200.0</text>
+          <text class="price price-raw">¥{{gData.originPrice}}</text>
-          <text class="price price-shop">美国</text>
+          <text class="price price-shop">{{gData.priceCountry}}</text>
         </view>
-        <view class="discount-col">
+        <view class="discount-col" v-if="gData.discountLeftTime">
-          <text class="price price-discount">折扣还剩7天</text>
+          <text class="price price-discount">折扣剩余{{gData.discountLeftTime}}</text>
         </view>
     </view>
     <view slot="actions" class="card-actions">
@@ -128,6 +127,7 @@ uni-tag {
   padding-left: 15px;
   font-size: 26rpx;
   color: #fff;
+  text-shadow: black 0.1em 0.1em 0.2em;
 }
 
 .card-actions {

src/components/GameSmallCell/index.vue

@@ -2,24 +2,24 @@
 <view class="s-game-cell" @click="onClick(gData.gameId)">
   <view class="left-part">
     <image
-        src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg"
+        :src="gData.icon"
-        mode="aspectFit"
+        mode="aspectFill"
     ></image>
   </view>
   <view class="right-part">
     <view class="title-view">
-      <text>游戏名</text>
+      <text>{{gData.name}}</text>
     </view>
     <view class="sub-title-view">
-      <text>游戏英文名</text>
+      <text>{{gData.subName}}</text>
     </view>
     <view class="tags-view">
-      <uni-tag class="game-tag" v-for="tag in tagList" :text="tag" inverted="true" type="error"></uni-tag>
+      <uni-tag class="game-tag" v-for="tag in gData.tags" :text="tag.name" :inverted="!tag.fill" :type="tag.type"></uni-tag>
     </view>
     <view class="price-view">
-      <view class="price">¥100</view>
+      <view class="price">¥{{gData.price}}</view>
-      <view class="price-raw">¥150(日本)</view>
+      <view class="price-raw">¥{{gData.originPrice}}({{gData.priceCountry}})</view>
-      <uni-tag text="25%折扣" type="error"></uni-tag>
+      <uni-tag :text="gData.cutOff+'%折扣'" type="error"></uni-tag>
     </view>
   </view>
 </view>

src/modules/gameinfo.ts

@@ -1,9 +1,16 @@
+export interface ITagInfo{
+  name: string
+  // default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)、royal(紫色)
+  type: string
+
+  fill: boolean
+}
 export interface IGameInfo{
   gameId: string
   name: string
-  ename: string
+  subName: string
   platform?: number
-  tags?: string[]
+  tags?: ITagInfo[]
   icon?: string
   banner?: string
   price?: number
@@ -12,6 +19,6 @@ export interface IGameInfo{
   discountLeftTime?: string,
   cutOff?: number
 
-  collect: boolean
+  collect?: boolean
-  zan: boolean
+  zan?: boolean
 }

src/pages.json

@@ -11,7 +11,7 @@
 			"style": {
 				"navigationBarTitleText": "index",
 				"navigationStyle": "custom",
-				"enablePullDownRefresh": true,
+				"enablePullDownRefresh": false,
 				"scrollIndicator": "none"
 			}
 		},
@@ -20,6 +20,7 @@
 			"style": {
 				"navigationBarTitleText": "搜索",
 				"scrollIndicator": "none",
+				"enablePullDownRefresh": false,
 				"app-plus":{
 					"scrollIndicator":"none"
 				}

src/pages/index/index.vue

@@ -13,6 +13,7 @@
         ></big-img-cell>
       </uni-list-item>
     </uni-list>
+    <uni-load-more :status="more" :contentText="moreCfg" @clickLoadMore="loadMore"></uni-load-more>
   </view>
 </template>
 
@@ -21,6 +22,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import BigImgCell from '@/components/BigImgCell/index.vue'
 import { IGameInfo } from '@/modules/gameinfo'
 import { getZanList, updateCollectInfo, updateZanInfo } from '@/api/game'
+import { searchGames } from '@/api/game_data'
 
 @Component({
   name: 'Index',
@@ -32,18 +34,13 @@ import { getZanList, updateCollectInfo, updateZanInfo } from '@/api/game'
 export default class extends Vue{
 
   private games: IGameInfo[] = []
+  private more = 'more'
+  private moreCfg = {contentdown: "点击加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
   $onLaunched: any
 
   async onLoad() {
     await this.$onLaunched;
-    for (let i = 0; i < 10; i++) {
+    await this.fetchGames()
-      this.games.push({
-        gameId: i + '',
-        banner: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
-        name: '测试游戏' + i,
-        ename: 'test game ' + i
-      })
-    }
   }
   onShareAppMessage(res: any) {
     if (res.from === 'button') {// 来自页面内分享按钮
@@ -97,7 +94,28 @@ export default class extends Vue{
   private async fetchZanInfo() {
     await getZanList(['6500'])
   }
-
+  private async loadMore(e: any) {
+    if (this.more === 'more') {
+      this.more = 'loading'
+      await this.fetchGames(this.games.length)
+    }
+    console.log(e)
+  }
+  private async fetchGames(start: number = 0) {
+    let res: any = await searchGames({cutoff: 1, skip: start})
+    if (res.length === 0) {
+      this.more = 'noMore'
+      return
+    }
+    for (let data of res) {
+      data.gameId = data.oldGameId + ''
+      data.tags = []
+      if (data.chinese) data.tags.push({name: data.chinese, type: 'error'})
+      if (data.isLowest) data.tags.push({name: '史低', type: 'primary', fill: true})
+      this.games.push(data)
+    }
+    this.more = 'more'
+  }
 
 }
 </script>

src/pages/list/index.vue

@@ -5,6 +5,7 @@
         <game-small-cell :g-data="item" v-on:cellClicked = 'onClick'></game-small-cell>
       </uni-list-item>
     </uni-list>
+    <uni-load-more :status="more" :contentText="moreCfg" @clickLoadMore="loadMore"></uni-load-more>
   </view>
 </template>
 
@@ -12,6 +13,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { IGameInfo } from '@/modules/gameinfo'
 import GameSmallCell from '@/components/GameSmallCell/index.vue'
+import { searchGames } from '@/api/game_data'
 
 @Component({
   name: 'Index',
@@ -21,17 +23,11 @@ import GameSmallCell from '@/components/GameSmallCell/index.vue'
 })
 export default class extends Vue{
   private games: IGameInfo[] = []
+  private more = 'more'
+  private moreCfg = {contentdown: "点击加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
 
-  onLoad() {
+  async onLoad() {
-    for (let i = 0; i < 10; i++) {
+    await this.fetchGames()
-      this.games.push({
-        gameId: i + '',
-        banner: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
-        name: '测试游戏' + i,
-        ename: 'test game ' + i
-      })
-    }
-
   }
 
   onClick(e: any) {
@@ -41,6 +37,29 @@ export default class extends Vue{
       animationDuration: 200})
   }
 
+  private async loadMore(e: any) {
+    if (this.more === 'more') {
+      this.more = 'loading'
+      await this.fetchGames(this.games.length)
+    }
+    console.log(e)
+  }
+  private async fetchGames(start: number = 0) {
+    let res: any = await searchGames({cutoff: 1, skip: start})
+    if (res.length === 0) {
+      this.more = 'noMore'
+      return
+    }
+    for (let data of res) {
+      data.gameId = data.oldGameId + ''
+      data.tags = []
+      if (data.chinese) data.tags.push({name: data.chinese, type: 'error'})
+      if (data.isLowest) data.tags.push({name: '史低', type: 'primary', fill: true})
+      this.games.push(data)
+    }
+    this.more = 'more'
+  }
+
 }
 </script>