我是个攻城狮
535 lines
13 KiB
Vue
535 lines
13 KiB
Vue
<template>
|
|
<Layout :index="-1" :banner="0" :imgs="0" :img="'/static/img/pro.jpg'" :titles="'资产中心'" :title_content="'寻找您心仪的游戏'">
|
|
<view class="content-game bgc-02">
|
|
<view class="content-games">
|
|
<view class="select">
|
|
<picker @change="bindPickerChange" :value="index" :range="array">
|
|
<view class="select_year">
|
|
<text>{{array[index]}}</text>
|
|
<image class="xia" src="../static/img/index/xia.png"></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="content-all">
|
|
<view class="content-nav">
|
|
<view class="year-nav">
|
|
<view class="nav_title"><text class="shu">|</text>发行年份</view>
|
|
<cj-slider v-model="priceValue" :min="2010" :max="2030" :step="1" :blockWidth="25"
|
|
@start="blockStart" @moving="blockMoving" @end="blockEnd" />
|
|
<view class="years">年份:{{priceValue[0]}}-{{priceValue[1]}}</view>
|
|
|
|
<view class="sou" @tap="getGame()">搜索</view>
|
|
</view>
|
|
|
|
<view class="year-navs">
|
|
<view class="nav_title"><text class="shu">|</text>发行平台</view>
|
|
<checkbox-group @change="checkboxChange" class="d-b-cs">
|
|
<label v-for="(item, index) in gameclass" :key="String(item.id)"
|
|
:class="item.checked?'game_type_active game_type':'option_default game_type'">
|
|
<view class="checkboxHidden">
|
|
<checkbox :value="String(item.id)" :checked="item.checked" />
|
|
</view>
|
|
{{item.name}}
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
<view class="year-navs">
|
|
<view class="nav_title"><text class="shu">|</text>游戏类型</view>
|
|
<checkbox-group @change="checkboxChanges" class="d-b-cs">
|
|
<label v-for="(item, index) in type" :key="String(item.id)"
|
|
:class="item.checkeds?'game_type_active game_type':'option_default game_type'">
|
|
<view class="checkboxHidden">
|
|
<checkbox :value="String(item.id)" :checked="item.checkeds" />
|
|
</view>
|
|
{{item.name}}
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
</view>
|
|
<view class="content-lists">
|
|
<view class="content-list">
|
|
<view class="game_list" :class="{game_list2:index%3 == 1}" v-for="(item,index) in listData" :key="index" @tap="goPath('/gameDtail?id='+item.id)">
|
|
<image class="game_img" :src="item.image[0].file_path" mode="heightFix"></image>
|
|
<view class="game_name">
|
|
<view>{{item.name}}</view>
|
|
<view class="game_status" v-if="item.is_financing==1">需要融资</view>
|
|
<view class="game_status" v-else-if="item.is_financing==2">融资待定</view>
|
|
<view class="game_status" v-else>无需融资</view>
|
|
</view>
|
|
<view class="game_spec">{{item.make_company}}</view>
|
|
</view>
|
|
|
|
<view v-if="listData.length==0" class="nocontent">
|
|
暂无数据
|
|
</view>
|
|
|
|
</view>
|
|
<view style="width: 100%;">
|
|
<el-pagination background layout="prev, pager, next" :total="total" :current-page="page" :page-size="list_rows" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</Layout>
|
|
</template>
|
|
|
|
<script>
|
|
import Layout from './part/layout.vue';
|
|
import cjSlider from '@/components/jxs-slider/jxs-slider.vue'
|
|
export default {
|
|
components:{
|
|
Layout,
|
|
cjSlider
|
|
},
|
|
data(){
|
|
return {
|
|
array: ['年份最新','评分最高'],
|
|
sort: '',
|
|
index:0,
|
|
priceValue: [2020, 2024], // 可以指定默认值
|
|
listData: [],
|
|
gameclass: [],
|
|
type: [],
|
|
page: 1,
|
|
list_rows: 9,
|
|
total:0,
|
|
sclass :[],
|
|
stype :[],
|
|
hasMore: true,
|
|
}
|
|
},
|
|
created() {
|
|
const width = window.innerWidth;
|
|
const height = window.innerHeight;
|
|
const mobileWidth = 768; // 可以根据需要调整这个值
|
|
const isMobile = width <= mobileWidth || height <= mobileWidth;
|
|
if(isMobile){
|
|
this.list_rows = 30;
|
|
}
|
|
this.getGame();
|
|
this.getTypeList();
|
|
},
|
|
beforeDestroy() {
|
|
},
|
|
onPullDownRefresh() {
|
|
this.page = 1;
|
|
this.listData = [];
|
|
this.getGames();
|
|
},
|
|
onReachBottom() {
|
|
if (this.hasMore) {
|
|
this.page += 1;
|
|
this.getGames();
|
|
}
|
|
},
|
|
methods:{
|
|
/*每页多少条*/
|
|
handleSizeChange(val){
|
|
this.list_rows = val;
|
|
this.getGame();
|
|
},
|
|
/*选择第几页*/
|
|
handleCurrentChange(val){
|
|
this.page = val;
|
|
this.getGame();
|
|
},
|
|
// 多选题
|
|
checkboxChange(e) {
|
|
var items = this.gameclass,
|
|
values = e.detail.value;
|
|
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
|
const item = items[i]
|
|
if (values.includes(String(item.id))) {
|
|
this.$set(item, 'checked', true)
|
|
} else {
|
|
this.$set(item, 'checked', false)
|
|
}
|
|
}
|
|
this.stype = values.sort((a, b) => a - b);//将其排个序arr.sort((a, b) => a - b); 类型
|
|
console.log(this.stype);
|
|
},
|
|
checkboxChanges(e) {
|
|
var items = this.type,
|
|
values = e.detail.value;
|
|
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
|
const item = items[i]
|
|
if (values.includes(String(item.id))) {
|
|
this.$set(item, 'checkeds', true)
|
|
} else {
|
|
this.$set(item, 'checkeds', false)
|
|
}
|
|
}
|
|
this.sclass = values.sort((a, b) => a - b);//将其排个序arr.sort((a, b) => a - b); 分类
|
|
console.log(this.sclass);
|
|
},
|
|
getGame(){
|
|
this._get('game.index/gameList',{
|
|
page: this.page,
|
|
list_rows: this.list_rows,
|
|
order: this.sort,
|
|
year:this.priceValue,
|
|
stype:this.stype,
|
|
sclass:this.sclass,
|
|
},res=>{
|
|
if(res.code==1){
|
|
this.listData = res.data.list.data;
|
|
this.total = res.data.list.total;
|
|
}
|
|
})
|
|
},
|
|
getGames(){
|
|
this._get('game.index/gameList',{
|
|
page: this.page,
|
|
list_rows: this.list_rows,
|
|
order: this.sort,
|
|
year:this.priceValue,
|
|
stype:this.stype,
|
|
sclass:this.sclass,
|
|
},res=>{
|
|
if(res.code==1){
|
|
if(res.data.list.data.length>0){
|
|
this.listData = res.data.list.data;
|
|
//滚动
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 0 // 动画时长，默认300ms
|
|
});
|
|
}
|
|
this.total = res.data.list.total;
|
|
|
|
if (this.total >= 100) { // 假设总数据量不会超过100条
|
|
this.hasMore = false;
|
|
}
|
|
uni.stopPullDownRefresh();
|
|
}
|
|
})
|
|
},
|
|
getTypeList(){
|
|
this._get('game.index/typeList',{
|
|
},res=>{
|
|
if(res.code==1){
|
|
this.gameclass = res.data.class
|
|
this.type = res.data.type
|
|
|
|
|
|
console.log(this.gameclass,222)
|
|
console.log(this.type,222)
|
|
}
|
|
})
|
|
},
|
|
|
|
blockStart() {
|
|
// console.log('滑动触发')
|
|
},
|
|
blockMoving() {
|
|
console.log('正在滑动中',this.priceValue)
|
|
},
|
|
blockEnd() {
|
|
console.log('滑动结束',this.priceValue)
|
|
},
|
|
bindPickerChange: function(e) {
|
|
// console.log('picker发送选择改变，携带值为', e.detail.value)
|
|
this.index = e.detail.value;
|
|
if(e.detail.value==1){
|
|
this.sort = 'score desc';
|
|
this.getGame();
|
|
}else{
|
|
this.sort = '';
|
|
this.getGame();
|
|
}
|
|
|
|
|
|
},
|
|
|
|
// 鼠标移入事件
|
|
mouseover(e){
|
|
this.is_xuan = false;
|
|
},
|
|
// 鼠标移出事件
|
|
mouseleave(e){
|
|
this.is_xuan = true;
|
|
},
|
|
change(e){
|
|
this.currentIndex = e.detail.current;
|
|
},
|
|
changeSub(){
|
|
if(this.currentIndex<=0){
|
|
this.currentIndex = this.storeList.length-1;
|
|
}else{
|
|
this.currentIndex--;
|
|
}
|
|
},
|
|
changeAdd(){
|
|
if(this.currentIndex>=(this.storeList.length-1)){
|
|
this.currentIndex = 0;
|
|
}else{
|
|
this.currentIndex++;
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
// 选中的颜色
|
|
.option_active {
|
|
background: #D52101;
|
|
}
|
|
.checkboxHidden {
|
|
display: none;
|
|
}
|
|
|
|
.content-game{
|
|
width: 100%;
|
|
min-height: 800px;
|
|
background-image: url(../static/img/index/gbgs.png);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
margin: 0 auto;
|
|
.content-games{
|
|
width: 1600px;
|
|
margin: 0 auto;
|
|
}
|
|
.select{
|
|
margin-top: 21px;
|
|
float: right;
|
|
width: 349px;
|
|
height: 43px;
|
|
border: 1px solid #9E9E9E;
|
|
border-radius: 5px;
|
|
margin-bottom: 15px;
|
|
.select_year{
|
|
padding: 0 13px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 21px;
|
|
font-weight: 400;
|
|
color: #9E9E9E;
|
|
line-height: 43px;
|
|
}
|
|
.xia{
|
|
float: right;
|
|
width: 24px;
|
|
height: 13px;
|
|
}
|
|
}
|
|
.content-all{
|
|
width: 1600px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.content-nav{
|
|
width: 265px;
|
|
.year-nav{
|
|
width: 265px;
|
|
padding: 30px 19px;
|
|
min-height: 251px;
|
|
background: #383838;
|
|
border-radius: 8px;
|
|
margin-bottom: 27px;
|
|
.nav_title{
|
|
font-size: 21px;
|
|
color: #FFFFFF;
|
|
.shu{
|
|
color: #F48612;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.years{
|
|
margin-top: 80px;
|
|
font-size: 22px;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
.sou{
|
|
width: 123px;
|
|
height: 37px;
|
|
border: 1px solid #F48612;
|
|
border-radius: 19px;
|
|
margin-top: 30px;
|
|
color: #F48612;
|
|
text-align: center;
|
|
line-height: 37px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.year-navs{
|
|
width: 265px;
|
|
padding: 30px 19px;
|
|
min-height: 251px;
|
|
background: #383838;
|
|
border-radius: 8px;
|
|
margin-bottom: 27px;
|
|
|
|
.nav_title{
|
|
font-size: 21px;
|
|
color: #FFFFFF;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #727272;
|
|
.shu{
|
|
color: #F48612;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.d-b-cs{
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
.game_type{
|
|
width: 104px;
|
|
height: 37px;
|
|
border: 1px solid #9E9E9E;
|
|
border-radius: 5px;
|
|
float: left;
|
|
font-size: 19px;
|
|
font-weight: 400;
|
|
color: #9E9E9E;
|
|
text-align: center;
|
|
line-height: 37px;
|
|
margin-bottom: 18px;
|
|
cursor: pointer;
|
|
}
|
|
.game_type_active{
|
|
width: 104px;
|
|
background-image: url('../static/img/index/xz.png');
|
|
background-size: 100%;
|
|
border: 1px solid #383838
|
|
}
|
|
}
|
|
}
|
|
.content-lists{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.content-list{
|
|
width: 1273px;
|
|
// padding-bottom: 80px;
|
|
.game_list{
|
|
width: 389px;
|
|
height: 339px;
|
|
background: #3C3C3C;
|
|
border-radius: 8px;
|
|
margin-bottom: 37px;
|
|
cursor: pointer;
|
|
float: left;
|
|
text-align: center;
|
|
}
|
|
.game_list2{
|
|
margin: 0 52px;
|
|
}
|
|
.game_img{
|
|
width: 389px;
|
|
height: 219px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.game_img:hover {
|
|
transform: scale(1.05) translate(0%, 0%);
|
|
z-index: 999;
|
|
}
|
|
.game_name{
|
|
margin-top: 12px;
|
|
padding:0 23px;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 40px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.game_status{
|
|
width: 77px;
|
|
font-size: 19px;
|
|
font-weight: 400;
|
|
color: #F48715;
|
|
}
|
|
}
|
|
.game_spec{
|
|
padding:0 23px;
|
|
height: 20px;
|
|
font-size: 19px;
|
|
font-family: "Source Han Sans CN", sans-serif;
|
|
font-weight: 400;
|
|
color: #9E9E9E;
|
|
line-height: 40px;
|
|
text-align: left;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.select{
|
|
display: none;
|
|
}
|
|
.content-nav{
|
|
display: none;
|
|
}
|
|
.el-pagination{
|
|
display: none;
|
|
}
|
|
.content-game{
|
|
background-size: 100% 100%;
|
|
min-height: 500px !important;
|
|
}
|
|
.nocontent{
|
|
font-size: 12px;
|
|
margin-top: 60px;
|
|
}
|
|
.content-lists{
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
}
|
|
.content-list{
|
|
margin: 0 auto;
|
|
width: 200px !important;
|
|
}
|
|
.game_list{
|
|
width: 100% !important;
|
|
height: 160px !important;
|
|
}
|
|
.game_list2{
|
|
margin: 0 auto !important;
|
|
margin-bottom: 10px !important;
|
|
}
|
|
.game_img{
|
|
width: 178px !important;
|
|
height: 100px !important;
|
|
margin-top: 10px;
|
|
}
|
|
.game_name{
|
|
width: 90% !important;
|
|
padding:5% !important;
|
|
font-size: 13px !important;
|
|
}
|
|
.game_status{
|
|
width: 20% !important;
|
|
}
|
|
.game_spec{
|
|
width: 90% !important;
|
|
padding:0 5% !important;
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
|
|
}
|
|
.nocontent{
|
|
height: 240px;color: #ffffff;text-align: center;margin-top: 10px;
|
|
}
|
|
</style>
|