Initial commit
This commit is contained in:
@@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<div class="home" @click.stop="istypeshow = false">
|
||||
<swiper></swiper>
|
||||
<div class="header_top">
|
||||
<handleback>返回</handleback>
|
||||
<div>玩转盲盒</div>
|
||||
<div class="speac"></div>
|
||||
</div>
|
||||
<div class="box_fenlei">
|
||||
<div class="box_type_low">
|
||||
<!-- <div @click.stop="
|
||||
handleChangeType('', '盲盒类别');
|
||||
playAudio();
|
||||
" class="type_btn center" :class="boxPage.boxTypeId == '' ? 'active' : ''">
|
||||
全部
|
||||
</div> -->
|
||||
<div class="type_btn center" :class="item.boxTypeId == currentId ? 'active' : ''"
|
||||
v-for="(item, index) in headernava" :key="index" @click.stop="
|
||||
handleChangeType(item.boxTypeId, item.boxTypeName, index);
|
||||
playAudio();
|
||||
">
|
||||
{{ item.boxTypeName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box" @scroll="handleScroll">
|
||||
<div class="box_type">
|
||||
<div class="boxs grade2">
|
||||
<div v-for="(v, index) in www" :key="index" class="boxs_list btn_click" @click.stop="
|
||||
handleGo(v.boxId);
|
||||
playAudio();
|
||||
">
|
||||
<div class="hot" v-if="false">
|
||||
<div class="hots">最新</div>
|
||||
</div>
|
||||
<div class="box_list_img center">
|
||||
<img :src="v.boxImg01 | fullPath" alt width="100%" class="bg1" />
|
||||
<img v-if="v.boxImg02 " :src="v.boxImg02| fullPath" alt width="100%" class="bg2" />
|
||||
</div>
|
||||
<div class="box_list_name">{{ v.boxName }}</div>
|
||||
<div class="box_list_const">
|
||||
<money class="money"></money>
|
||||
{{ v.price }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swiper from "@/components/swiperUser.vue";
|
||||
import { getArticle, getBoxList, getBoxTypeList } from "@/api/index";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
istypeshow: false,
|
||||
boxTypeList: [],
|
||||
typePage: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
},
|
||||
boxList: [],
|
||||
tableList: [],
|
||||
boxPage: {
|
||||
boxTypeId: "",
|
||||
boxTypeName: "盲盒类别",
|
||||
gameMouldId: 1,
|
||||
page: 1,
|
||||
size: 10,
|
||||
orderByFie: 2,
|
||||
},
|
||||
getAll: false,
|
||||
isOver: "加载中",
|
||||
scroll: "",
|
||||
headernava: [],
|
||||
www: [],
|
||||
currentId:0
|
||||
};
|
||||
},
|
||||
components: { swiper },
|
||||
mounted() {
|
||||
//this.getTypeList();
|
||||
this.getList();
|
||||
},
|
||||
activated() {
|
||||
let box = document.getElementsByClassName('box')
|
||||
console.log(box);
|
||||
if (this.scroll > 0) {
|
||||
box[0].scrollTo(0, this.scroll);
|
||||
this.scroll = 0;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChangeType(res, name, index) {
|
||||
this.currentId = res
|
||||
console.log(res, name)
|
||||
this.www = this.boxList[index].boxList;
|
||||
|
||||
},
|
||||
handleScroll(e) {
|
||||
this.event = e;
|
||||
this.scroll = e.srcElement.scrollTop;
|
||||
if (
|
||||
e.srcElement.scrollTop + e.srcElement.clientHeight >=
|
||||
e.srcElement.scrollHeight
|
||||
) {
|
||||
if (this.isOver == "加载中") {
|
||||
this.boxPage.page++;
|
||||
setTimeout(() => {
|
||||
this.getList();
|
||||
}, 5);
|
||||
}
|
||||
}
|
||||
},
|
||||
playAudio() {
|
||||
this.$store.commit("playAudio");
|
||||
},
|
||||
handleilltate() {
|
||||
this.$bus.$emit("is_illustrate", true);
|
||||
setTimeout(() => {
|
||||
getArticle("wzmh").then((res) => {
|
||||
let dream = res.data.data.contentList[0].content;
|
||||
this.$bus.$emit("nr_illustrate", dream);
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
handleGo(res) {
|
||||
this.$router.push({
|
||||
path: "/openbox",
|
||||
query: {
|
||||
id: res,
|
||||
},
|
||||
});
|
||||
},
|
||||
getTypeList() {
|
||||
if (this.boxTypeList.length == 0) {
|
||||
getBoxTypeList(this.typePage).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
|
||||
console.log(res.data, 'woyao de shuju')
|
||||
this.boxTypeList.push(...res.data.data.records);
|
||||
if (res.data.data.records.length == this.typePage.size) {
|
||||
this.typePage.page++;
|
||||
this.getTypeList();
|
||||
} else {
|
||||
this.getAll = true;
|
||||
}
|
||||
}
|
||||
console.log("玩法列表", this.boxTypeList);
|
||||
});
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
let data={
|
||||
boxType:1
|
||||
}
|
||||
getBoxList(data).then((res) => {
|
||||
|
||||
if (res.data.code == 200) {
|
||||
|
||||
this.headernava = res.data.data
|
||||
this.currentId = this.headernava[0].boxTypeId
|
||||
// this.boxTypelist = res.data.data;
|
||||
/* let arr = res.data.data; */
|
||||
/* arr.map((item) => {
|
||||
return (item.boxNum = 0);
|
||||
}); */
|
||||
this.boxList = res.data.data;
|
||||
console.log(this.boxList, 'woyaode shuju ');
|
||||
this.www = res.data.data[0].boxList;
|
||||
if (res.data.data.length < this.boxPage.size) {
|
||||
this.isOver = "暂无更多";
|
||||
}
|
||||
}
|
||||
});
|
||||
// getBoxList(this.boxPage).then((res) => {
|
||||
// // console.log("箱子列表", res.data.data);
|
||||
// if (res.data.code == 200) {
|
||||
// let arr = res.data.data;
|
||||
// arr.forEach((item) => {
|
||||
// if (this.boxList.get(item.boxTypeId)) {
|
||||
// this.boxList.get(item.boxTypeId).push(item);
|
||||
// } else {
|
||||
// this.boxList.set(item.boxTypeId, [item]);
|
||||
// }
|
||||
// });
|
||||
// console.log("箱子列表map", this.boxList);
|
||||
// if (res.data.data.length < this.boxPage.size) {
|
||||
// this.isOver = "暂无更多";
|
||||
// }
|
||||
// this.boxTypeList.map((item) => {
|
||||
// return (item.children = this.boxList.get(item.id));
|
||||
// });
|
||||
// this.tableList = this.boxTypeList.filter((item) => {
|
||||
// return item.children;
|
||||
// });
|
||||
// console.log("处理后的分类", this.tableList);
|
||||
// }
|
||||
// });
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
getAll(newValue) {
|
||||
if (newValue) {
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.box_fenlei {
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
// height: 42px;
|
||||
// background: url('../../assets/pinxiangBottom_top.png') no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
// opacity: 1;
|
||||
position: absolute;
|
||||
|
||||
|
||||
@media (max-width: 550px) {
|
||||
// height: 30px;
|
||||
font-size: 11px;
|
||||
// top: 126px;
|
||||
}
|
||||
|
||||
.box_type_low {
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
top: 45px;
|
||||
// background: #323436;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
top: 35px;
|
||||
// height: 30px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #3fa2c7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
// background: linear-gradient(360deg,
|
||||
// rgba(37, 244, 132, 0.5) 0%,
|
||||
// rgba(37, 244, 132, 0.25) 100%);
|
||||
// opacity: 1;
|
||||
// border: 1px solid #3fa2c7;
|
||||
background: url('../../assets/pinxiangBottom_text_bg.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.type_btn {
|
||||
height: 42px;
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
// border-radius: 21px;
|
||||
// padding: 10px 20px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.speac {
|
||||
width: 54px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 0 auto;
|
||||
width: 98%;
|
||||
height: 500px;
|
||||
margin-top: 44px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #3fa2c7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
height: 535px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
.box_name {
|
||||
background-size: 100% 100%;
|
||||
font-size: 25px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxs {
|
||||
width: 100%;
|
||||
// display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
margin-top: 37px;
|
||||
}
|
||||
|
||||
.box_type {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.boxs_list {
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
padding-top: 1px;
|
||||
background: url('../../assets/gen-box-bg-C9N-vsd0.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
margin-top: 14px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.hot {
|
||||
width: 56px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.hots {
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
top: 8px;
|
||||
width: 69px;
|
||||
height: 21px;
|
||||
background: linear-gradient(90deg, #3a97e4 0%, #3fa2c7 100%);
|
||||
box-shadow: 0px 3px 7px 0px rgba(37, 244, 132, 0.5);
|
||||
opacity: 1;
|
||||
transform: rotate(-14deg);
|
||||
font-size: 16px;
|
||||
color: #181a1c;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxs {
|
||||
.boxs_list:last-child {
|
||||
// margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.box_list_img {
|
||||
width: 88%;
|
||||
// height: 181px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
|
||||
.bg1 {}
|
||||
|
||||
.bg2 {
|
||||
width: 151px;
|
||||
// height: 151px;
|
||||
position: absolute;
|
||||
// left: 50%;
|
||||
// left: 0;
|
||||
// transform: translateX(-50%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.bg2 {
|
||||
// animation: boxscola 2s ease infinite;
|
||||
transition: all 0.2s ease;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box_list_name {
|
||||
margin-top: 22px;
|
||||
font-size: 17px;
|
||||
color: #fff;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.box_list_const {
|
||||
margin: 0 auto;
|
||||
margin-top: 14px;
|
||||
width: 89%;
|
||||
// height: 42px;
|
||||
// background: url('../../assets/box_moeny_bg.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
line-height: 1;
|
||||
padding-bottom:30px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
// height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.header_top {
|
||||
width: 98%;
|
||||
height: 56px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
div:first-child {}
|
||||
|
||||
div:last-child {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-decoration: underline;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.home {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
// height: 100vh;
|
||||
// background: #0e1227c4;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user