<template><!-- 选择游戏 --><div class="game" :class="{'game__spacing': selectedGame.length > 0}"><!-- 搜索 --><div @click="searchGame" class="game__search"><div class="game__search-box"><span class="game__search-icon"></span><input@keyup="searchGame"ref="searchInput"v-focusclass="game__search-input"type="text"placeholder="搜索"v-model="searchGameName"></div></div><!-- 游戏名称列表 --><ul><li @click="handleOtherGame" class="game__block"><div class="game__item">其他游戏</div></li><!-- 热门游戏 --><li class="game__block"><div @click="handleGame(item)"v-for="(item,index) in hotGameList":key="'hot'+index"class="game__item":class="{'selected' : judgSelectedGame(item)}">{{item.app_name}}</div></li><li v-for="(item,key,idx) in gameList":key="idx"class="game__block"><div class="game__head" :class="{'selected': selectGameIndex === idx}">{{key}}</div><div @click="handleGame(member)"v-for="(member,index) in item":key="index"class="game__item":class="{'selected' : judgSelectedGame(member)}">{{member.app_name}}</div></li></ul><!-- 悬浮字符 --><ul class="game__pop-key"><li @click="handleKey(0, 'search')" class="game__pop-key-con"><i class="game__pop-key-search"></i></li><li @click="handleKey(1, 'hot')" class="game__pop-key-con"><i class="game__pop-key-hot"></i></li><li @click="handleKey(idx, 'list')"v-for="(item,key,idx) in gameList":key="'key'+idx"class="game__pop-key-con":class="{'selected':selectGameIndex === idx}"><div class="game__pop-key-box">{{key}}</div></li></ul><!-- 悬浮底部按钮 --><div v-if="selectedGame.length > 0" class="game__footer bottom-container"><ui-button @click="handleCancel" class="demo-button__small" :inline="true" :primary="false">取消</ui-button><ui-button @click="handelDefine" class="demo-button__small" :inline="true">确认</ui-button></div></div>
</template><script>
import { makePy } from "../assets/js/pinying"//导入插件获取所有城市中文的大写首字母
export default {name: 'SelectGame',components: {},data() {return{pageStatus: 'loading', //初始载入searchGameName: '', // 搜索名称games: [], //游戏数据gameList: [], //游戏列表hotGameList: [], //热门游戏selectGameIndex: 0, //当前游戏列表字符索引offsetTopArr: [], //所有字符head的offsetTopselectedGame: [], //}},computed: {},directives: {focus: {// 指令的定义inserted: function(el) {el.focus();}}},created() {this.initData();},mounted() {this.initGameData();window.addEventListener("scroll", this.pageScroll);},methods: {/*** 初始化页面数据*/initData() {let data = {gameList: [{id: "0", app_name: "爱心觉罗"},{id: "1", app_name: "地下城与勇士"},{id: "2", app_name: "穿越火线"},{id: "17", app_name: "QQ飞车"},{id: "1261", app_name: "QQ飞车手游"},{id: "214", app_name: "使命召唤"},{id: "232", app_name: "炫舞时代"},{id: "236", app_name: "流放之路"},{id: "237", app_name: "灵山奇缘"},{id: "1124", app_name: "欢乐麻将"},{id: "1183", app_name: "奇迹暖暖"},{id: "1104", app_name: "天天爱消除"},{id: "1194", app_name: "穿越火线（手游）"},{id: "1243", app_name: "魂斗罗"},{id: "1266", app_name: "拳皇命运"},{id: "10006", app_name: "部落冲突"},{id: "20063", app_name: "FIFAonline3"},],hotGame: [{id: "3", app_name: "穿越火线"},{id: "4", app_name: "王者荣耀"},{id: "5", app_name: "和平精英"}]}this.pageStatus = 'normal';this.games = data.gameList;this.picGameData(data.gameList);this.hotGameList = data.hotGame;this.selectedGame = this.$storage.get(this.$storage.keys.SELECT_GAME) ? this.$storage.get(this.$storage.keys.SELECT_GAME) : [];},/*** 格式化游戏字母排序* @param data 后台获取的游戏列表*/picGameData(data) {let gameList = [];data.map((item) => {//遍历数组,拿到城市名称let fristName = makePy(item.app_name)[0].substring(0, 1); //这里截取首字母的第一位//取全部城市的首字母if (!gameList[fristName]) {gameList[fristName] = [];}gameList[fristName].push(item)});this.gameList = Utils.kSort(gameList); //根据首字母键值对给原数据按首字母分类},/*** 获取所有锚点元素的 offsetTop*/initGameData() {let headContent = document.querySelectorAll('.game__head'); // 获取所有字符锚点元素let offsetTopArr = [];headContent.forEach(item => {this.offsetTopArr.push(item.offsetTop);})},/*** 点击开始搜索游戏*/searchGame () {this.$nextTick( () => {this.$refs.searchInput.focus();})let gameList = this.games;if (this.searchGameName !== '') {gameList = this.games.filter((item) => {return item.app_name.indexOf(this.searchGameName) !== -1})}this.picGameData(gameList);},/*** 点击其他游戏搜索*/handleOtherGame() {this.dialog = this.$createDialog({type: 'comment',showClose: true,title: '填写游戏名称',prompt: {value: '',placeholder: '请输入游戏名称，游戏名之间用"，"隔开...',maxlength: 200,indicator: 'indicator',autoExpand: true},confirmBtn: {text: '提交',active: true,disabled: true,href: 'javascript:;'},onConfirm: (e, promptValue) => {let list = [];list = promptValue.toString().split(',');this.$storage.set(this.$storage.keys.SELECT_GAME, list); // this.$router.go(-1);}});this.dialog.show();},/*** 点击选择游戏* @param item 游戏名称item*/handleGame(item) {if (this.judgSelectedGame(item)) {return}this.selectedGame.push(item.app_name);},/*** 判断是否选择了游戏* @param item 游戏名称item*/judgSelectedGame(item) {console.log('judg')let count = 0;this.selectedGame.map(it => {if (it === item.app_name) {count = 1;}})return count > 0 ? true : false;},/*** 页面滚动监听*/pageScroll() {// let scrollTop = $(window).scrollTop(); // 获取当前文档流的 scrollTop// // 定义当前点亮的导航下标// let keyIndex = 0;// this.offsetTopArr.map((item, index) => {// if (scrollTop >= item - 100) {// keyIndex = index// }// })// this.selectGameIndex = keyIndex;},/*** 点击字符搜索游戏* @param index 字母序列索引* @param type 区分字母和图标*/handleKey(index, type) {if (type == 'search'){console.log('search')this.selectGameIndex = 0;$(window).scrollTop(0);this.$nextTick( () => {this.$refs.searchInput.focus();})return}if (type == 'search'){this.selectGameIndex = 0;$(window).scrollTop(0);return} let scrollTop = $(window).scrollTop(); // 获取当前文档流的 scrollTopthis.selectGameIndex = index;let targetOffsetTop = this.offsetTopArr[index];$(window).scrollTop(targetOffsetTop);},/*** 点击取消*/handleCancel() {this.selectedGame = [];},/*** 点击确认*/handelDefine() {this.$storage.set(this.$storage.keys.SELECT_GAME, this.selectedGame);this.$router.go(-1);}},beforeDestroy() {window.removeEventListener("scroll", this.pageScroll);}
}
</script><style lang="less" scoped>
@import "~@/assets/css/mixin.less";
@import "~@/assets/css/varibles.less";
@imgUrl: "../assets/img";
input {outline: none;caret-color: #2caf7d;outline-color: invert;outline-style: none;outline-width: 0px;border: none;border-style: none;text-shadow: none;-webkit-appearance: none;-webkit-user-select: text;outline-color: transparent;box-shadow: none;
}
input::-webkit-input-placeholder {color: #989898;
}
/deep/ .ui-cell::before {left: 0rem;
}
.game{min-height: 100vh;padding-bottom: 0.2rem;
}
.game__spacing{padding-bottom: 1.5rem;
}
.game__search{background: #fff;padding: 0.2rem 0.36rem;
}
.game__search-box{height: 0.6rem;background-color: #f0f5f6;border-radius: 0.3rem;.flex-second;padding: 0 0.3rem;
}
.game__search-icon{width: 0.31rem;height: 0.3rem;background: url('@{imgUrl}/search.png') no-repeat center center;background-size: 0.31rem 0.3rem;margin-right: 0.2rem;
}
.game__search-input{flex: 1;height: 0.6rem;background-color: #f0f5f6;border-radius: 0.3rem;
}
.game__block{background: #fff;
}
.game__head{height: 0.64rem;background-color: #f0f5f6;padding: 0 0.38rem;font-size: @fz28;color: #888888;.flex-second;
}
.game__head.selected{color: #01d5d8;
}
.game__item{height: 1rem;.flex-second;padding: 0 0.38rem;font-size: @fz28;color: #000;.line-one(top);
}
.game__item.selected{position: relative;&::before{content: '';width: 0.3rem;height: 0.22rem;background: url('@{imgUrl}/select.png') no-repeat center center;background-size: 0.3rem 0.22rem;position: absolute;top: 50%;right: 1rem;transform: translateY(-50%);}
}
.game__pop-key{position: fixed;top: 50%;right: 0rem;transform: translateY(-50%);
}
.game__pop-key-search{width: 0.3rem;height: 0.3rem;background: url('@{imgUrl}/pop-search.png') no-repeat center center;background-size: 0.16rem 0.16rem;
}
.game__pop-key-hot{width: 0.3rem;height: 0.3rem;background: url('@{imgUrl}/pop-start.png') no-repeat center center;background-size: 0.16rem 0.16rem;
}
.game__pop-key-con{.flex-center;width: 1rem;height: 0.46rem;
}
.game__pop-key-box{width: 0.3rem;height: 0.3rem;font-size: 0.18rem;color: #333;.flex-center;padding-top: 0.04rem;
}
.selected .game__pop-key-box{background-image: linear-gradient(0deg, #47d998 0%, #01d5d8 100%);color: #fff;border-radius: 50%;
}
.game__footer{position: fixed;bottom: 0;left: 0;width: 100%;background-color: #ffffff;box-shadow: 0px -10px 16px 0px rgba(174, 174, 192, 0.1);padding: 0.31rem 0.36rem;.flex-second;justify-content: space-between;
}
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {.game__spacing{padding-bottom: 1.9rem;}
}
</style>
utils.jsfunction kSort (obj) {let keys = Object.keys(obj).sort(),sortedObj = {};for (var i in keys) {sortedObj[keys[i]] = obj[keys[i]];}return sortedObj;
}export default {kSort
}
pinying：https://gitee.com/dou_i_jiang/file_download
Mint UI实现A-Z字母排序的城市选择列表：http://www.uxys.com/html/Vue/20191228/26616.html
