|
|
@@ -0,0 +1,286 @@
|
|
|
+<template>
|
|
|
+ <van-popup v-model:show="show" position="right">
|
|
|
+ <div class="select-right padding-safe-top">
|
|
|
+ <div class="select-content">
|
|
|
+ <div class="select-title">
|
|
|
+ <img src="@assets/png-zhutifenlei.png" alt="" />
|
|
|
+ <span>主题分类</span>
|
|
|
+ </div>
|
|
|
+ <div class="select-list">
|
|
|
+ <div
|
|
|
+ class="select-info"
|
|
|
+ :class="{ prim: settingId === item.id }"
|
|
|
+ v-for="(item, index) in settings"
|
|
|
+ :key="index"
|
|
|
+ @click="showBanner(item.id)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="select-content" v-if="settingId">
|
|
|
+ <div class="select-title">
|
|
|
+ <img src="@assets/png-xiliefenlei.png" alt="" />
|
|
|
+ <span>系列分类</span>
|
|
|
+ </div>
|
|
|
+ <div class="select-list">
|
|
|
+ <div
|
|
|
+ class="select-info"
|
|
|
+ :class="{ prim: bannerName === item.linkContent }"
|
|
|
+ @click="chooseBanner(item.linkContent)"
|
|
|
+ v-for="(item, index) in banners"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="select-content" v-if="classification">
|
|
|
+ <div class="select-title">
|
|
|
+ <img src="@assets/png-xiliefenlei.png" alt="" />
|
|
|
+ <span>稀有度分类</span>
|
|
|
+ </div>
|
|
|
+ <div class="select-list">
|
|
|
+ <div
|
|
|
+ class="select-info"
|
|
|
+ :class="{ prim: rarityLabel === item.value }"
|
|
|
+ @click="changeLabel(item.value)"
|
|
|
+ v-for="(item, index) in selectOptions"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="select-content" v-if="bannerName && !empty">
|
|
|
+ <div class="select-title">
|
|
|
+ <img src="@assets/png-mingcheng.png" alt="" />
|
|
|
+ <span>名称分类</span>
|
|
|
+ </div>
|
|
|
+ <van-list
|
|
|
+ v-model:loading="loading"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text=""
|
|
|
+ :immediate-check="false"
|
|
|
+ @load="getData"
|
|
|
+ class="select-list"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="select-info product"
|
|
|
+ :class="{ prim: productId === item.id }"
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index"
|
|
|
+ @click="productId = item.id"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="select-btns">
|
|
|
+ <van-button type="primary" plain round @click="refreash">重置</van-button>
|
|
|
+ <van-button type="primary" round @click="submit">确认筛选</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import list from '../../mixins/list';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show: false,
|
|
|
+ settings: [],
|
|
|
+ settingId: 0,
|
|
|
+ banners: [],
|
|
|
+ url: '/collection/all',
|
|
|
+ bannerName: '',
|
|
|
+ selectOptions: [],
|
|
|
+ classification: false,
|
|
|
+ rarityLabel: '',
|
|
|
+ productId: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mixins: [list],
|
|
|
+ mounted() {
|
|
|
+ this.$http
|
|
|
+ .post('/setting/byFlag', { flag: 1 })
|
|
|
+ .then(res => {
|
|
|
+ this.settings = res.filter(item => {
|
|
|
+ return item.pic;
|
|
|
+ });
|
|
|
+ if (this.settings.length > 0) {
|
|
|
+ this.showBanner(this.settings[0].id);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.$message.error(e.error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ refreash() {
|
|
|
+ this.settingId = 0;
|
|
|
+ this.bannerName = '';
|
|
|
+ this.rarityLabel = '';
|
|
|
+ this.productId = '';
|
|
|
+ },
|
|
|
+ chooseBanner(name) {
|
|
|
+ this.bannerName = name;
|
|
|
+ this.getLabel();
|
|
|
+ },
|
|
|
+ getLabel() {
|
|
|
+ this.$http.get('/rarityLabel/label/' + this.bannerName).then(res => {
|
|
|
+ this.selectOptions = Object.values(res);
|
|
|
+ if (Object.values(res).length > 0) {
|
|
|
+ this.classification = true;
|
|
|
+ this.rarityLabel = Object.values(res)[0].value;
|
|
|
+ } else {
|
|
|
+ this.classification = false;
|
|
|
+ this.rarityLabel = '';
|
|
|
+ }
|
|
|
+ this.getData(true);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ changeLabel(label) {
|
|
|
+ this.rarityLabel = label;
|
|
|
+
|
|
|
+ this.getData(true);
|
|
|
+ },
|
|
|
+ beforeData() {
|
|
|
+ return {
|
|
|
+ query: {
|
|
|
+ del: false,
|
|
|
+ onShelf: true,
|
|
|
+ rarityLabel: this.rarityLabel
|
|
|
+ },
|
|
|
+ sort: 'id,desc',
|
|
|
+ search: this.bannerName
|
|
|
+ };
|
|
|
+ },
|
|
|
+ showBanner(settingId) {
|
|
|
+ this.settingId = settingId;
|
|
|
+ this.bannerName = '';
|
|
|
+ this.rarityLabel = '';
|
|
|
+ this.productId = '';
|
|
|
+ this.$http
|
|
|
+ .post(
|
|
|
+ '/banner/all',
|
|
|
+ {
|
|
|
+ query: {
|
|
|
+ type: 'MARKET',
|
|
|
+ del: false,
|
|
|
+ settingId: settingId
|
|
|
+ },
|
|
|
+ size: 99,
|
|
|
+ sort: 'sort,asc;createdAt,desc'
|
|
|
+ },
|
|
|
+ { body: 'json' }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ this.banners = res.content;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ let info = [...this.list].find(item => {
|
|
|
+ return item.id === this.productId;
|
|
|
+ });
|
|
|
+ this.show = false;
|
|
|
+ this.$emit('select', {
|
|
|
+ search: this.bannerName,
|
|
|
+ rarityLabel: this.rarityLabel,
|
|
|
+ productName: info ? info.name : ''
|
|
|
+ });
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.show = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.select-right {
|
|
|
+ width: 80vw;
|
|
|
+ height: var(--app-height);
|
|
|
+ background: #222426;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: auto;
|
|
|
+ .bottom(100px);
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.select-btns {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ padding: 9px 16px;
|
|
|
+ background: #222426;
|
|
|
+ .bottom(9px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ .flex();
|
|
|
+ z-index: 20;
|
|
|
+ .van-button {
|
|
|
+ --van-button-primary-background-color: #3ab200;
|
|
|
+ &:nth-child(1) {
|
|
|
+ width: 100px;
|
|
|
+ border: 1px solid #43ce00;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.select-content {
|
|
|
+ .select-title {
|
|
|
+ .flex();
|
|
|
+ padding: 18px 12px 0px;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-list {
|
|
|
+ padding: 12px 6px 6px;
|
|
|
+ .select-info {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(50% - 12px);
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 6px;
|
|
|
+ height: 36px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 38px;
|
|
|
+ background: #383a3c;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ &.prim {
|
|
|
+ color: @prim;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.product {
|
|
|
+ width: calc(100% - 12px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
