调整详情页面布局

src/components/BigImgCell/index.vue

@@ -9,7 +9,7 @@
         </view>
         <view class="cover-content">
           <text class="uni-subtitle uni-white">{{gData.name}} </text>
-          <text v-if="gData.subName">({{gData.subName}})</text>
+<!--          <text v-if="gData.subName">({{gData.subName}})</text>-->
         </view>
       </view>
     </template>

src/components/DlcCell/index.vue

@@ -10,7 +10,8 @@
         <text >{{data.name}}</text>
     </view>
     <view class="right-part">
-      <view class="main-price">¥{{(~~data.price/100)}}</view>
+      <view class="main-price" v-if="data.price">¥{{(data.price/100)}}</view>
+      <view class="main-price" v-if="!data.price">免费</view>
     </view>
   </view>
 </template>

src/components/ImageSwiper/index.vue

@@ -3,7 +3,7 @@
   <view class="peopleSwiper">
     <swiper class="bigImg" :current="current">
       <swiper-item v-for="(big,index) in images" :key="index">
-        <image :src="big" mode="scaleToFill"></image>
+        <image :src="big" mode="scaleToFill" class="blurImage"></image>
       </swiper-item>
     </swiper>
     <scroll-view class="smallImg" scroll-x="true" :show-scrollbar="false">
@@ -35,6 +35,7 @@ export default class extends Vue{
 
   changeBigPic(index: number){
     this.current = index;
+    this.$emit('imgChange', index)
   }
 }
 </script>
@@ -51,4 +52,5 @@ scroll-view ::-webkit-scrollbar {
   height: 0;
   background-color: transparent;
 }
+.blurImage{}
 </style>

src/components/PriceCell/index.vue

@@ -6,7 +6,7 @@
   </view>
   <view class="center-part">
     <uni-tag type="error" v-if="data.discountOff" size="small" :text="'-'+data.discountOff+'%'" class="center-child"></uni-tag>
-    <uni-tag type="success" size="small" v-if="isLow" text="史低" class="center-child"></uni-tag>
+    <uni-tag type="success" size="small" v-if="!!data.isLowestPrice" text="史低" class="center-child"></uni-tag>
     <view class="time-rest center-child" v-if="data.leftTime">
       <text >剩余{{data.leftTime}}</text>
     </view>
@@ -34,9 +34,7 @@ declare module 'vue/types/vue' {
   props: ['data'],
 })
 export default class extends Vue{
-  private isLow() {
-    return !!this.data.isLowestPrice
-  }
+
 }
 </script>
 <style>
@@ -83,9 +81,11 @@ export default class extends Vue{
 }
 .price-cell .right-part .price-tip {
   color: #666666;
-  font-size: 18rpx;
+  font-size: 16rpx;
+  //#ifdef H5
   -webkit-transform-origin-x: 0;
   -webkit-transform: scale(0.80);
+  // #endif
   line-height: 10px;
   text-align: right;
   width: 100%;

src/pages.json

@@ -36,7 +36,7 @@
 			"path": "pages/info/index",
 			"style": {
 				"navigationBarTitleText": "游戏详情",
-				"enablePullDownRefresh": true,
+				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
 		},

src/pages/index/index.vue

@@ -114,7 +114,7 @@ export default class extends Vue{
         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})
+      if (data.isLowest) data.tags.push({name: '史低', type: 'success', fill: true})
       this.games.push(data)
     }
     this.more = 'more'

src/pages/info/index.vue

@@ -1,10 +1,11 @@
 <template>
   <view class="container">
+    <image class="bgImg" :src="bgImg" ></image>
     <navigator class="nav-bar" :style="{ top: iStatusBarHeight + 'px'}" open-type="navigateBack">
-      <uni-icons type="left" size="30"></uni-icons>
+      <uni-icons type="left" size="30" class="back-icon"></uni-icons>
     </navigator>
     <!-- 幻灯 -->
-    <image-swiper :images="imgSwiperData"></image-swiper>
+    <image-swiper @imgChange="bigImgChange" :images="imgSwiperData"></image-swiper>
     <view class="game-info">
       <uni-title type ="h1" :title="name"></uni-title>
       <uni-title type="h2"  :title="subName"></uni-title>
@@ -36,6 +37,7 @@
         </uni-list-item>
       </uni-list>
     </view>
+    <view class="bottom-area"></view>
   </view>
 </template>
 
@@ -51,7 +53,7 @@ import { getGameInfo, getGamePrice } from '@/api/game_data'
   components: {
     ImageSwiper,
     PriceCell,
-    DlcCell
+    DlcCell,
   }
 })
 export default class extends Vue{
@@ -64,6 +66,8 @@ export default class extends Vue{
   private name: string = ''
   private subName: string = ''
   private desc: string = ''
+  private params: any = {}
+  private bgImg = ''
 
   onLoad(options: any) {
     this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
@@ -72,6 +76,11 @@ export default class extends Vue{
       this.fetchGameInfo()
       this.fetchGamePrice()
     }
+    this.params = {
+      width: '100%',
+      height: '100%',
+      blur:"m"
+    }
   }
   async created() {
     uni.setNavigationBarTitle({
@@ -97,6 +106,7 @@ export default class extends Vue{
       for (let u of arr) {
         this.imgSwiperData.push(u)
       }
+      this.bgImg = this.imgSwiperData[0]
     }
     this.desc = data.jumpGameExt?.longDesc || ''
     if (data.dlcList) {
@@ -110,6 +120,10 @@ export default class extends Vue{
     }
   }
 
+  private bigImgChange(index: number) {
+    this.bgImg = this.imgSwiperData[index]
+  }
+
   private async fetchGamePrice() {
     let data: any = await getGamePrice(this.gameId, 3)
     console.log(data)
@@ -123,6 +137,7 @@ export default class extends Vue{
 <style>
 .game-info{
   padding: 5px 8px;
+  z-index: 2;
 }
 .tab-list .uni-tag {
   margin-right: 5px;
@@ -131,6 +146,13 @@ export default class extends Vue{
   font-size: 14px;
   padding: 5px 0;
 }
+.bg-img{
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
 .tag-list {
   display: flex;
   flex-direction: row;
@@ -170,4 +192,22 @@ dlc-cell {
 .game-tag text {
   padding: 2px 5px!important;
 }
+.back-icon{
+  text-shadow: white 0.1em 0.1em 0.2em
+}
+.bgImg{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 150%;
+  height: 100%;
+  filter: blur(50px);
+  opacity: 0.2;
+  z-index: 10;
+  pointer-events:none;
+}
+.bottom-area{
+  height: 24px;
+}
+
 </style>

src/pages/list/index.vue

@@ -1,5 +1,6 @@
 <template>
   <view class="container">
+    <uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
     <uni-list>
       <uni-list-item v-for="item in games" >
         <game-small-cell :g-data="item" v-on:cellClicked = 'onClick'></game-small-cell>
@@ -25,9 +26,10 @@ export default class extends Vue{
   private games: IGameInfo[] = []
   private more = 'more'
   private moreCfg = {contentdown: "点击加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
+  private key = ''
 
   async onLoad() {
-    await this.fetchGames()
+    await this.fetchGames({})
   }
 
   onClick(e: any) {
@@ -40,12 +42,23 @@ export default class extends Vue{
   private async loadMore(e: any) {
     if (this.more === 'more') {
       this.more = 'loading'
-      await this.fetchGames(this.games.length)
+      await this.fetchGames({skip: this.games.length})
     }
     console.log(e)
   }
-  private async fetchGames(start: number = 0) {
-    let res: any = await searchGames({skip: start})
+  private search(e: any) {
+    console.log('search: ', e)
+    this.key = e.value
+    this.games.length = 0
+    this.fetchGames({})
+  }
+  private async fetchGames(param: any) {
+    let searchParam: any = {skip: 0}
+    if (this.key) {
+      searchParam.name = this.key
+    }
+    Object.assign(searchParam, param)
+    let res: any = await searchGames(searchParam)
     if (res.length === 0) {
       this.more = 'noMore'
       return
@@ -57,7 +70,7 @@ export default class extends Vue{
         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})
+      if (data.isLowest) data.tags.push({name: '史低', type: 'success', fill: true})
       this.games.push(data)
     }
     this.more = 'more'