all
This commit is contained in:
我是个攻城狮
@@ -0,0 +1,534 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user