详情页接入数据

src/api/game_data.ts

@@ -16,3 +16,35 @@ export const searchGames = (params: any) => {
     });
   })
 }
+
+export const getGameInfo = (gameId: string) => {
+  let data = {oldGameId: gameId}
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: `${DATA_BASE}/getgameinfoext`,
+      data,
+      success: (res) => {
+        resolve && resolve(res.data);
+      },
+      fail: (err) => {
+        reject && reject(err)
+      }
+    });
+  })
+}
+
+export const getGamePrice = (gameId: string, nums: number = 0) => {
+  const data = {oldGameId: gameId, nums}
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: `${DATA_BASE}/getgameprice`,
+      data,
+      success: (res) => {
+        resolve && resolve(res.data);
+      },
+      fail: (err) => {
+        reject && reject(err)
+      }
+    });
+  })
+}

src/components/DlcCell/index.vue

@@ -2,15 +2,15 @@
   <view class="dlc-cell">
     <view class="left-part">
       <image
-          src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg"
+          :src="data.icon"
           mode="aspectFit"
       ></image>
     </view>
     <view class="center-part">
-        <text >dlc名字</text>
+        <text >{{data.name}}</text>
     </view>
     <view class="right-part">
-      <view class="main-price">$100.0</view>
+      <view class="main-price">¥{{(~~data.price/100)}}</view>
     </view>
   </view>
 </template>

src/components/PriceCell/index.vue

@@ -1,20 +1,20 @@
 <template>
 <view class="price-cell">
   <view class="left-part">
-    <view class="nation">日本</view>
+    <view class="nation">{{data.country}}</view>
 <!--    <view class="sub-nation">11</view>-->
   </view>
   <view class="center-part">
-    <uni-tag type="error" size="small" text="-60%" class="center-child"></uni-tag>
+    <uni-tag type="error" v-if="data.discountOff" size="small" :text="'-'+data.discountOff+'%'" class="center-child"></uni-tag>
-    <uni-tag type="success" size="small" text="史低" class="center-child"></uni-tag>
+    <uni-tag type="success" size="small" v-if="isLow" text="史低" class="center-child"></uni-tag>
-    <view class="time-rest center-child" >
+    <view class="time-rest center-child" v-if="data.leftTime">
-      <text >剩余14天</text>
+      <text >剩余{{data.leftTime}}</text>
     </view>
   </view>
   <view class="right-part">
-    <view class="price-tip">史低100</view>
+    <view class="price-tip">史低{{data.lowestPrice/100}}</view>
-    <view class="main-price">$100.0</view>
+    <view class="main-price">¥{{data.price/100}}</view>
-    <view class="price-tip">HKD210</view>
+    <view class="price-tip">{{data.coinSymbol}}{{data.priceOrigin/100}}</view>
   </view>
 </view>
 </template>
@@ -34,7 +34,9 @@ declare module 'vue/types/vue' {
   props: ['data'],
 })
 export default class extends Vue{
-
+  private isLow() {
+    return !!this.data.isLowestPrice
+  }
 }
 </script>
 <style>

src/pages/index/index.vue

@@ -60,7 +60,7 @@ export default class extends Vue{
   }
   onClick(e: any) {
     uni.navigateTo({
-      url: '/pages/info/index',
+      url: '/pages/info/index?gameId='+e,
       animationType: 'pop-in',
       animationDuration: 200})
   }
@@ -110,7 +110,10 @@ export default class extends Vue{
     for (let data of res) {
       data.gameId = data.oldGameId + ''
       data.tags = []
-      if (data.chinese) data.tags.push({name: data.chinese, type: 'error'})
+      if (data.chinese) {
+        let arr = data.chinese.split(';')
+        arr.forEach((o: string) => data.tags.push({name: o, type: 'error'}))
+      }
       if (data.isLowest) data.tags.push({name: '史低', type: 'primary', fill: true})
       this.games.push(data)
     }

src/pages/info/index.vue

@@ -6,33 +6,33 @@
     <!-- 幻灯 -->
     <image-swiper :images="imgSwiperData"></image-swiper>
     <view class="game-info">
-      <uni-title type ="h1" title="游戏中文名"></uni-title>
+      <uni-title type ="h1" :title="name"></uni-title>
-      <uni-title type="h2"  title="游戏E文名"></uni-title>
+      <uni-title type="h2"  :title="subName"></uni-title>
       <view class="tag-list">
         <uni-tag v-for="tag in tagList" class="game-tag" :text="tag" inverted="true" type="error"></uni-tag>
       </view>
       <view class="info-content">
         <text>
-          在本作中关于“口袋妖怪”未来世界的章节将逐渐明了，将是个涉及大地和海洋的壮大的故事。主人公在游戏中必须要去阻止在“红宝石/蓝宝石”中出现的两大势力的阴谋。游戏中将加入可以游玩7大战斗的“BATTLE FRONTIER”。其中包括靠战斗来一决胜负的“BATTLE DOOM”，玩家将靠3匹口袋妖怪进行连战；还有靠运气的“BATTLE TUBE”，是从3个入口中选择其一，最终目标是到达终点的充满挑战的设施。
+          {{desc}}
         </text>
       </view>
     </view>
-    <view class="price-list">
+    <view class="price-list" v-if="priceList.length > 0">
       <view class="price-title">低价排名</view>
       <uni-list>
         <uni-list-item v-for="item in priceList" >
-          <price-cell></price-cell>
+          <price-cell :data="item"></price-cell>
         </uni-list-item>
         <uni-list-item>
           <text class="more-price-cell" @click="toMorePrice">更多商店价格</text>
         </uni-list-item>
       </uni-list>
     </view>
-    <view class="price-list">
+    <view class="price-list" v-if="dlcList.length > 0">
       <view class="price-title">DLC</view>
       <uni-list>
         <uni-list-item v-for="item in dlcList" >
-          <dlc-cell></dlc-cell>
+          <dlc-cell :data="item"></dlc-cell>
         </uni-list-item>
       </uni-list>
     </view>
@@ -44,6 +44,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import ImageSwiper from '@/components/ImageSwiper/index.vue'
 import PriceCell from '@/components/PriceCell/index.vue'
 import DlcCell from '@/components/DlcCell/index.vue'
+import { getGameInfo, getGamePrice } from '@/api/game_data'
 
 @Component({
   name: 'GameInfo',
@@ -55,17 +56,22 @@ import DlcCell from '@/components/DlcCell/index.vue'
 })
 export default class extends Vue{
   private imgSwiperData: string[] = []
-  private tagList: string[] = ['fc', 'nb']
+  private tagList: string[] = []
-  private priceList: string[] = ['1', '2', '3']
+  private priceList: any[] = []
-  private dlcList: string[] = ['1', '2', '3']
+  private dlcList: any[] = []
   private iStatusBarHeight = 0
+  private gameId: string = ''
+  private name: string = ''
+  private subName: string = ''
+  private desc: string = ''
 
-  onLoad() {
+  onLoad(options: any) {
     this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
-    for (let i = 0; i< 4 ;i ++) {
+    this.gameId = options.gameId
-      this.imgSwiperData.push('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg')
+    if (this.gameId) {
+      this.fetchGameInfo()
+      this.fetchGamePrice()
     }
-
   }
   async created() {
     uni.setNavigationBarTitle({
@@ -77,9 +83,40 @@ export default class extends Vue{
   }
   private toMorePrice() {
     uni.navigateTo({
-      url: '/pages/info/priceList?gameId='
+      url: '/pages/info/priceList?gameId=' + this.gameId
     });
   }
+
+  private async fetchGameInfo() {
+    let data: any = await getGameInfo(this.gameId)
+    console.log(data)
+    this.name = data.jumpGame?.name
+    this.subName = data.jumpGame?.subName
+    if (data.jumpGameExt?.screenshots) {
+      let arr = data.jumpGameExt.screenshots.split(';')
+      for (let u of arr) {
+        this.imgSwiperData.push(u)
+      }
+    }
+    this.desc = data.jumpGameExt?.longDesc || ''
+    if (data.dlcList) {
+      for (let obj of data.dlcList) {
+        this.dlcList.push(obj)
+      }
+    }
+    if (data.jumpGame?.chinese) {
+      let arr = data.jumpGame.chinese.split(';')
+      arr.forEach((o: string) => this.tagList.push(o))
+    }
+  }
+
+  private async fetchGamePrice() {
+    let data: any = await getGamePrice(this.gameId, 3)
+    console.log(data)
+    for (let obj of data.prices) {
+      this.priceList.push(obj)
+    }
+  }
 }
 </script>
 

src/pages/info/priceList.vue

@@ -3,7 +3,7 @@
     <view class="price-list">
       <uni-list>
         <uni-list-item v-for="item in priceList" >
-          <price-cell></price-cell>
+          <price-cell :data="item"></price-cell>
         </uni-list-item>
       </uni-list>
     </view>
@@ -13,6 +13,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import PriceCell from '@/components/PriceCell/index.vue'
+import { getGamePrice } from '@/api/game_data'
 
 @Component({
   name: 'GameInfo',
@@ -21,10 +22,14 @@ import PriceCell from '@/components/PriceCell/index.vue'
   }
 })
 export default class extends Vue{
-  private priceList: string[] = ['1', '2', '3']
+  private priceList: any[] = []
-
+  private gameId: string = ''
-  onLoad() {
 
+  onLoad(options: any) {
+    this.gameId = options.gameId
+    if (this.gameId) {
+      this.fetchGamePrice()
+    }
   }
   async created() {
     uni.setNavigationBarTitle({
@@ -34,6 +39,13 @@ export default class extends Vue{
   private onClickBack() {
 
   }
+  private async fetchGamePrice() {
+    let data: any = await getGamePrice(this.gameId, 0)
+    console.log(data)
+    for (let obj of data.prices) {
+      this.priceList.push(obj)
+    }
+  }
 }
 </script>
 

src/pages/list/index.vue

@@ -32,7 +32,7 @@ export default class extends Vue{
 
   onClick(e: any) {
     uni.navigateTo({
-      url: '/pages/info/index',
+      url: '/pages/info/index?gameId=' + e,
       animationType: 'pop-in',
       animationDuration: 200})
   }
@@ -53,7 +53,10 @@ export default class extends Vue{
     for (let data of res) {
       data.gameId = data.oldGameId + ''
       data.tags = []
-      if (data.chinese) data.tags.push({name: data.chinese, type: 'error'})
+      if (data.chinese) {
+        let arr = data.chinese.split(';')
+        arr.forEach((o: string) => data.tags.push({name: o, type: 'error'}))
+      }
       if (data.isLowest) data.tags.push({name: '史低', type: 'primary', fill: true})
       this.games.push(data)
     }