From 09aace8190a9e36167787676100f72dcd25f2967 Mon Sep 17 00:00:00 2001
From: zhl <zhl010101@gmail.com>
Date: Mon, 13 Dec 2021 14:55:16 +0800
Subject: [PATCH] add game info page

---
 src/components/BigImgCell/index.vue | 172 ++++++++++++++++++++++++++++
 src/components/DlcCell/index.vue    |  66 +++++++++++
 src/components/PriceCell/index.vue  |  91 +++++++++++++++
 src/modules/gameinfo.ts             |   6 +
 src/pages.json                      |   3 +-
 src/pages/index/index.vue           | 154 +++----------------------
 src/pages/info/index.vue            |  86 +++++++++++++-
 7 files changed, 436 insertions(+), 142 deletions(-)
 create mode 100644 src/components/BigImgCell/index.vue
 create mode 100644 src/components/DlcCell/index.vue
 create mode 100644 src/components/PriceCell/index.vue
 create mode 100644 src/modules/gameinfo.ts

diff --git a/src/components/BigImgCell/index.vue b/src/components/BigImgCell/index.vue
new file mode 100644
index 0000000..f3d8656
--- /dev/null
+++ b/src/components/BigImgCell/index.vue
@@ -0,0 +1,172 @@
+<!--带缩略图轮播图组件-->
+<template>
+  <uni-card mode="style" @click="onClick(gData.gameId)">
+    <template v-slot:cover>
+      <view class="custom-cover" @click="onClick(gData.gameId)">
+        <image class="cover-image" mode="aspectFill" :src="gData.cover">
+        </image>
+        <view class="cover-tag">
+          <text class="uni-subtitle uni-white">20%折扣</text>
+        </view>
+        <view class="cover-content">
+          <text class="uni-subtitle uni-white">{{gData.name}} ({{gData.ename}})</text>
+        </view>
+      </view>
+    </template>
+    <uni-row class="demo-uni-row">
+      <uni-col :span="24">
+        <view class="demo-uni-col dark tag-list">
+          <uni-tag text="标签" inverted="true" type="warning"></uni-tag>
+          <uni-tag text="标签" inverted="true" type="warning"></uni-tag>
+        </view>
+      </uni-col>
+    </uni-row>
+    <uni-row class="demo-uni-row price-row">
+      <uni-col :span="16">
+        <view class="demo-uni-col dark">
+          <text class="price price-new">$200.0</text>
+          <text class="price price-raw">$200.0</text>
+          <text class="price price-shop">美国</text>
+        </view>
+      </uni-col>
+      <uni-col :span="8">
+        <view class="demo-uni-col dark discount-col">
+          <text class="price price-discount">折扣还剩7天</text>
+        </view>
+      </uni-col>
+    </uni-row>
+    <view slot="actions" class="card-actions">
+      <view class="card-actions-item" @click="actionsClick('分享')">
+        <uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
+        <text class="card-actions-item-text">分享</text>
+      </view>
+      <view class="card-actions-item" @click="actionsClick('点赞')">
+        <uni-icons type="heart" size="18" color="#999"></uni-icons>
+        <text class="card-actions-item-text">点赞</text>
+      </view>
+      <view class="card-actions-item" @click="actionsClick('评论')">
+        <uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
+        <text class="card-actions-item-text">评论</text>
+      </view>
+    </view>
+  </uni-card>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { IGameInfo } from '@/modules/gameinfo'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    gData?: IGameInfo
+  }
+}
+
+@Component({
+  name: 'BegImgCell',
+  props: ['gData'],
+})
+export default class extends Vue{
+  actionsClick(s: string) {
+    console.log(s)
+  }
+  onClick(s: string) {
+    console.log('on click: ', s)
+    this.$emit("cellClicked", s)
+  }
+}
+</script>
+<style>
+.custom-cover {
+  flex: 1;
+  flex-direction: row;
+  position: relative;
+}
+
+.custom-cover .cover-image {
+  width: 100%;
+  margin-top: 8px;
+  height: 180px;
+}
+.cover-tag {
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 100px;
+  height: 30px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 15px;
+  font-size: 14px;
+  color: #fff;
+  background-image: url("/static/icons/left_tip.png");
+  background-repeat:no-repeat;
+  background-size:auto;
+}
+.cover-tag .uni-subtitle {
+  margin-left: 5px;
+}
+.tag-list {
+  display: flex;
+}
+.tag-list .uni-tag {
+  margin-right: 5px;
+}
+.cover-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background-color: rgba($color: #000000, $alpha: 0.4);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 15px;
+  font-size: 14px;
+  color: #fff;
+}
+
+.card-actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  height: 45px;
+  border-top: 1px #eee solid;
+}
+
+.card-actions-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.card-actions-item-text {
+  font-size: 12px;
+  color: #666;
+  margin-left: 5px;
+}
+.price-row {
+  margin-top: 12px;
+}
+.price {
+  margin-right: 5px;
+  color: #999;
+  font-size: 16px;
+}
+.price-new {
+  color: red;
+  font-size: 25px;
+}
+.price-discount {
+  font-size: 14px;
+}
+.discount-col {
+  padding-top: 4px;
+  float: right;
+}
+.uni-card__content {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/components/DlcCell/index.vue b/src/components/DlcCell/index.vue
new file mode 100644
index 0000000..d6d8f5e
--- /dev/null
+++ b/src/components/DlcCell/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <view class="dlc-cell">
+    <view class="left-part">
+      <img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg">
+    </view>
+    <view class="center-part">
+        <text >dlc名字</text>
+    </view>
+    <view class="right-part">
+      <view class="main-price">$100.0</view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    data?: any
+  }
+}
+@Component({
+  name: 'DlcCell',
+  props: ['data'],
+})
+export default class extends Vue{
+
+}
+</script>
+<style>
+.dlc-cell{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin: 5px 0;
+}
+.dlc-cell img{
+  max-width: 100px;
+}
+.left-part {
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+}
+.center-part {
+  width: 70%;
+  font-size: 16px;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+}
+.right-part {
+  width: 10%;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  padding: 5px 0;
+}
+.main-price {
+  font-size: 18px;
+  color: #dd524d;
+  text-align: right;
+}
+</style>
diff --git a/src/components/PriceCell/index.vue b/src/components/PriceCell/index.vue
new file mode 100644
index 0000000..b9a5ede
--- /dev/null
+++ b/src/components/PriceCell/index.vue
@@ -0,0 +1,91 @@
+<template>
+<view class="price-cell">
+  <view class="left-part">
+    <view class="nation">日本</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="success" size="small" text="史低" class="center-child"></uni-tag>
+    <view class="time-rest center-child" >
+      <text >剩余14天</text>
+    </view>
+  </view>
+  <view class="right-part">
+    <view class="price-tip">史低100</view>
+    <view class="main-price">$100.0</view>
+    <view class="price-tip">HKD210</view>
+  </view>
+</view>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    data?: any
+  }
+}
+
+
+@Component({
+  name: 'PriceCell',
+  props: ['data'],
+})
+export default class extends Vue{
+
+}
+</script>
+<style>
+.price-cell{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.price-cell .left-part{
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  font-size: 16px;
+}
+.price-cell .center-part{
+  width: 45%;
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+}
+.price-cell .center-part .center-child {
+  margin-right: 5px;
+}
+.price-cell .center-part .time-rest{
+  color: #666666;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  -webkit-transform-origin-x: 0;
+  -webkit-transform: scale(0.80)
+}
+.price-cell .right-part{
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  padding: 5px 0;
+}
+.price-cell .right-part .main-price {
+  font-size: 18px;
+  color: #dd524d;
+  text-align: right;
+}
+.price-cell .right-part .price-tip {
+  color: #666666;
+  font-size: 12px;
+  -webkit-transform-origin-x: 0;
+  -webkit-transform: scale(0.80);
+  line-height: 10px;
+  text-align: right;
+  width: 100%;
+}
+</style>
diff --git a/src/modules/gameinfo.ts b/src/modules/gameinfo.ts
new file mode 100644
index 0000000..f5ac212
--- /dev/null
+++ b/src/modules/gameinfo.ts
@@ -0,0 +1,6 @@
+export interface IGameInfo{
+  gameId: string
+  name: string
+  ename: string
+  cover: string
+}
diff --git a/src/pages.json b/src/pages.json
index 78f899e..6ddf5d0 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -31,7 +31,8 @@
 			"path": "pages/info/index",
 			"style": {
 				"navigationBarTitleText": "游戏详情",
-				"enablePullDownRefresh": true
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
 			}
 		}
 	],
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index c5ca48b..84173b4 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,52 +1,8 @@
 <template>
   <view class="container">
     <uni-list>
-      <uni-list-item v-for="item in 3" :key="item">
-        <uni-card mode="style" @click="onClick(item)">
-          <template v-slot:cover>
-            <view class="custom-cover" @click="onClick(item)">
-              <image class="cover-image" mode="aspectFill" :src="cover">
-              </image>
-              <view class="cover-tag">
-                <text class="uni-subtitle uni-white">20%折扣</text>
-              </view>
-              <view class="cover-content">
-                <text class="uni-subtitle uni-white">游戏名game name</text>
-              </view>
-            </view>
-          </template>
-          <uni-row class="demo-uni-row">
-            <uni-col :span="24">
-              <view class="demo-uni-col dark tag-list">
-                <uni-tag text="标签" inverted="true" type="warning"></uni-tag>
-                <uni-tag text="标签" inverted="true" type="warning"></uni-tag>
-              </view>
-            </uni-col>
-          </uni-row>
-          <uni-row class="demo-uni-row price-row">
-            <uni-col :span="24">
-              <view class="demo-uni-col dark">
-                <text class="price price-new">$200.0</text>
-                <text class="price price-raw">$200.0</text>
-                <text class="price price-shop">美国</text>
-              </view>
-            </uni-col>
-          </uni-row>
-          <view slot="actions" class="card-actions">
-            <view class="card-actions-item" @click="actionsClick('分享')">
-              <uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
-              <text class="card-actions-item-text">分享</text>
-            </view>
-            <view class="card-actions-item" @click="actionsClick('点赞')">
-              <uni-icons type="heart" size="18" color="#999"></uni-icons>
-              <text class="card-actions-item-text">点赞</text>
-            </view>
-            <view class="card-actions-item" @click="actionsClick('评论')">
-              <uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
-              <text class="card-actions-item-text">评论</text>
-            </view>
-          </view>
-        </uni-card>
+      <uni-list-item v-for="item in games" >
+        <big-img-cell :g-data="item" v-on:cellClicked = 'onClick'></big-img-cell>
       </uni-list-item>
     </uni-list>
   </view>
@@ -54,27 +10,32 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import BigImgCell from '@/components/BigImgCell/index.vue'
+import { IGameInfo } from '@/modules/gameinfo'
 
 @Component({
   name: 'Index',
   components: {
-
+    BigImgCell
   }
 })
 
 export default class extends Vue{
-  private cover = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg'
-  private extraIcon = {
-    color: '#4cd964',
-    size: '22',
-    type: 'gear-filled'
-  }
+
+  private games: IGameInfo[] = []
 
   onLoad() {
+    for (let i = 0; i < 10; i++) {
+      this.games.push({
+        gameId: i + '',
+        cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
+        name: '测试游戏' + i,
+        ename: 'test game ' + i
+      })
+    }
 
   }
   onClick(e: any) {
-    console.log(e)
     uni.navigateTo({
       url: '/pages/info/index',
       animationType: 'pop-in',
@@ -94,91 +55,6 @@ export default class extends Vue{
   overflow: hidden;
 }
 
-.custom-cover {
-  flex: 1;
-  flex-direction: row;
-  position: relative;
-}
 
-.custom-cover .cover-image {
-  width: 100%;
-  margin-top: 8px;
-  height: 180px;
-}
-.cover-tag {
-  position: absolute;
-  top: 8px;
-  left: 0;
-  width: 100px;
-  height: 30px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-left: 15px;
-  font-size: 14px;
-  color: #fff;
-  background-image: url("/static/icons/left_tip.png");
-  background-repeat:no-repeat;
-  background-size:auto;
-}
-.cover-tag .uni-subtitle {
-  margin-left: 5px;
-}
-.tag-list {
-  display: flex;
-}
-.tag-list .uni-tag {
-  margin-right: 5px;
-}
-.cover-content {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 40px;
-  background-color: rgba($color: #000000, $alpha: 0.4);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-left: 15px;
-  font-size: 14px;
-  color: #fff;
-}
-
-.card-actions {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
-  height: 45px;
-  border-top: 1px #eee solid;
-}
-
-.card-actions-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.card-actions-item-text {
-  font-size: 12px;
-  color: #666;
-  margin-left: 5px;
-}
-.price-row {
-  margin-top: 12px;
-}
-.price {
-  margin-right: 5px;
-  color: #999;
-  font-size: 16px;
-}
-.price-new {
-  color: red;
-  font-size: 25px;
-}
-.uni-card__content {
-  padding-top: 5px;
-}
 
 </style>
diff --git a/src/pages/info/index.vue b/src/pages/info/index.vue
index 7b8c9f6..859b49f 100644
--- a/src/pages/info/index.vue
+++ b/src/pages/info/index.vue
@@ -1,22 +1,64 @@
 <template>
   <view class="page">
+    <navigator class="nav-bar" open-type="navigateBack">
+      <uni-icons type="left" size="30"></uni-icons>
+    </navigator>
     <!-- 幻灯 -->
     <image-swiper v-model="imgSwiperData"></image-swiper>
+    <view class="game-info">
+      <uni-title type ="h1" title="游戏中文名"></uni-title>
+      <uni-title type="h2"  title="游戏E文名"></uni-title>
+      <view class="tag-list">
+        <uni-tag v-for="tag in tagList" :text="tag" inverted="true" type="error"></uni-tag>
+      </view>
+      <view class="info-content">
+        <text>
+          在本作中关于“口袋妖怪”未来世界的章节将逐渐明了，将是个涉及大地和海洋的壮大的故事。主人公在游戏中必须要去阻止在“红宝石/蓝宝石”中出现的两大势力的阴谋。游戏中将加入可以游玩7大战斗的“BATTLE FRONTIER”。其中包括靠战斗来一决胜负的“BATTLE DOOM”，玩家将靠3匹口袋妖怪进行连战；还有靠运气的“BATTLE TUBE”，是从3个入口中选择其一，最终目标是到达终点的充满挑战的设施。
+        </text>
+      </view>
+    </view>
+    <view class="price-list">
+      <view class="price-title">低价排名</view>
+      <uni-list>
+        <uni-list-item v-for="item in priceList" >
+          <price-cell></price-cell>
+        </uni-list-item>
+        <uni-list-item>
+          <text class="more-price-cell">更多商店价格</text>
+        </uni-list-item>
+      </uni-list>
+    </view>
+    <view class="price-list">
+      <view class="price-title">DLC</view>
+      <uni-list>
+        <uni-list-item v-for="item in dlcList" >
+          <dlc-cell></dlc-cell>
+        </uni-list-item>
+      </uni-list>
+    </view>
   </view>
 </template>
 
 <script lang="ts">
 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'
 
 @Component({
   name: 'GameInfo',
   components: {
-    ImageSwiper
+    ImageSwiper,
+    PriceCell,
+    DlcCell
   }
 })
 export default class extends Vue{
   private imgSwiperData: string[] = []
+  private tagList: string[] = ['fc', 'nb']
+  private priceList: string[] = ['1', '2', '3']
+  private dlcList: string[] = ['1', '2', '3']
+
   onLoad() {
     this.imgSwiperData = [
       'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
@@ -30,11 +72,51 @@ export default class extends Vue{
     uni.setNavigationBarTitle({
       title: "游戏详情"
     });
+  }
+  private onClickBack() {
 
   }
 }
 </script>
 
 <style>
-
+.game-info{
+  padding: 5px 8px;
+}
+.tab-list .uni-tag {
+  margin-right: 5px;
+}
+.info-content {
+  font-size: 14px;
+  padding: 5px 0;
+}
+.tag-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  padding: 5px 0;
+}
+.tag-list .uni-tag {
+  margin-right: 5px;
+}
+.nav-bar {
+  height: 45px;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+.price-title {
+  padding: 0 8px;
+}
+.more-price-cell{
+  width: 100%;
+  text-align: center;
+  font-size: 16px;
+  height: 40px;
+  vertical-align: middle;
+  line-height: 40px;
+}
 </style>