Skip to content

Commit

Permalink
fix: exterior
Browse files Browse the repository at this point in the history
  • Loading branch information
@TiAmo-code
TiAmo-code committed Jun 14, 2024
1 parent badadd7 commit fdb5829
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 21 deletions.
63 changes: 62 additions & 1 deletion src/assets/css/exterior/list.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
&.fewer {
.m-left {
max-width: 411px;
.m-list {
max-height: calc(100vh - @header-height - 220px);
}
.m-more__list {
.u-more_col {
width: 100%;
Expand Down Expand Up @@ -42,6 +45,7 @@
}
.m-left {
max-width: 0;
max-height: 0;
overflow: hidden;
opacity: 0;
}
Expand Down Expand Up @@ -102,7 +106,6 @@
width: 100%;
.m-list {
box-shadow: 0px 0px 10px 0px rgba(218, 128, 41, 0.3);
max-height: calc(100vh - @header-height - 180px);
.r(10px);
.mt(40px);
padding: 20px;
Expand Down Expand Up @@ -603,6 +606,17 @@
width: 0;
}
}

.u-filter {
&:hover {
background-color: #fff7ef;
svg {
fill: #da8029 !important;
}
}
}
}
.m-common-filter {
}
// 平板
@media screen and (max-width: 1133px) {
Expand All @@ -612,4 +626,51 @@
.p-main .m-left .m-list .m-box .m-new__list .m-item {
margin: 0 auto;
}
.p-main {
.m-right {
.flex();
.mt(0);
flex-direction: column-reverse;
padding-right: 0 !important;
.m-info {
.m-info__top {
.db();
.m-detail {
.ml(0);
.m-goods {
flex-wrap: wrap;
}
}
}
}
.m-action {
.ps();
.w(100%);
.mb(30px);

.m-quick {
.flex();
justify-content: center;
.u-action {
&:not(:first-child) {
.mt(0);
.ml(20px);
}
}
}
.m-change_bg,
.m-change_color {
.mt(30px);
.flex();
justify-content: center;
.u-change__btn {
&:not(:first-child) {
.mt(0);
.ml(40px);
}
}
}
}
}
}
}
7 changes: 6 additions & 1 deletion src/components/common/toolbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@ export default {
type: String,
default: "#6b52ff",
},
actColor:{
type: String,
default: "#ffffff",
},
active: {
type: [String, Number],
default: null,
Expand Down Expand Up @@ -86,7 +90,7 @@ export default {
style(val) {
const has = this.hover === val || this.type === val;
const backgroundColor = has ? this.color : "#fff";
const color = has ? "#fff" : "#949494";
const color = has ? this.actColor : "#949494";
return { backgroundColor, color };
},
},
Expand All @@ -101,6 +105,7 @@ export default {
immediate: true,
deep: true,
handler: function (list) {
console.log(list);
if (list && list.length) {
this.type = this.active || list[0].value;
}
Expand Down
3 changes: 2 additions & 1 deletion src/views/exterior/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,12 @@

<script>
import Nav from "@/components/Nav_v5.vue";
import { __imgPath, __dataPath } from "@jx3box/jx3box-common/data/jx3box.json";
import { __imgPath, __dataPath, __cdn } from "@jx3box/jx3box-common/data/jx3box.json";
export default {
name: "App",
provide: {
__imgPath,
__cdn,
},
data: function () {
return {
Expand Down
86 changes: 68 additions & 18 deletions src/views/exterior/list.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,37 @@
<div class="p-main" :class="pageStatus" v-loading="loading">
<div class="u-back__status" @click="pageStatus = 'list'">返回列表</div>
<div class="m-left">
<CommonToolbar search @update="updateToolbar"></CommonToolbar>
<CommonToolbar
color="#fff7ef"
actColor="#DA8029"
search
@update="updateToolbar"
:types="pageStatus == 'list' ? tabList : []"
>
<template v-slot:filter v-if="pageStatus == 'fewer'">
<div class="u-filter">
<el-popover placement="bottom-end" trigger="click" v-model="filterOpen">
<div class="m-common-filter">
<el-radio-group v-model="searchType">
<el-radio-button
class="u-item"
v-for="(item, index) in tabList"
:key="index"
:label="item.value"
>{{ item.label }}</el-radio-button
>
</el-radio-group>
</div>
<img svg-inline src="@/assets/img/filter.svg" slot="reference" />
</el-popover>
</div>
</template>
</CommonToolbar>

<div class="m-list">
<template v-if="searchKey">
<template v-if="searchType > 0">
<div class="m-box">
<p class="u-box__title">搜索结果</p>
<p class="u-box__title">{{ searchKey ? "搜索结果" : tabList[searchType].label }}</p>
<div class="m-new__list">
<div
class="m-item"
Expand All @@ -19,7 +44,7 @@
<div
class="u-img"
:style="{
backgroundImage: `url(${getImgPath(item.name + '-封面.png')})`,
backgroundImage: `url(${getImgPath(item.id + '-封面.png')})`,
}"
></div>
</div>
Expand Down Expand Up @@ -49,7 +74,7 @@
<div
class="u-img"
:style="{
backgroundImage: `url(${getImgPath(item.name + '-封面.png')})`,
backgroundImage: `url(${getImgPath(item.id + '-封面.png')})`,
}"
></div>
</div>
Expand All @@ -74,7 +99,7 @@
<div
class="u-img"
:style="{
backgroundImage: `url(${getImgPath(item.name + '-封面.png')})`,
backgroundImage: `url(${iconLink(item.meta.icon_id, client)})`,
}"
></div>
<span class="u-title">{{ item.name }}</span>
Expand Down Expand Up @@ -116,7 +141,7 @@
class="u-img"
:style="{
backgroundImage: `url(${getImgPath(
exteriorDetail.name + '-封面' + bodySelectKey + '.png'
exteriorDetail.id + '-封面' + bodySelectKey + '.png'
)})`,
}"
></div>
Expand Down Expand Up @@ -160,7 +185,7 @@
<div
class="u-img"
:style="{
backgroundImage: `url(${item.meta.img_urls[0]})`,
backgroundImage: `url(${iconLink(item.meta.icon_id, client)})`,
}"
></div>
</div>
Expand All @@ -177,7 +202,14 @@
<div class="u-title">外观预览</div>
<div class="u-line"></div>
</div>
<img class="u-exterior" :src="getImgPath(exteriorDetail.name + '-详情-1.png')" />
<template v-for="(item, index) in exteriorDetail.meta.img_urls">
<img
class="u-exterior"
:key="index"
v-if="item.indexOf('详情') > -1"
:src="getImgPath(item)"
/>
</template>
<div class="m-info__title">
<div class="u-line"></div>
<div class="u-title">近期价格走势</div>
Expand Down Expand Up @@ -258,16 +290,16 @@
<script>
import { Chart } from "@antv/g2";
import CommonToolbar from "@/components/common/toolbar.vue";
import { __clients } from "@jx3box/jx3box-common/data/jx3box.json";
import { __clients, __Links } from "@jx3box/jx3box-common/data/jx3box.json";
import { getExteriorsList, getExteriorsDetail, getExteriorsPriceTrending, userStarExterior } from "@/service/exterior";
import { __Links } from "@jx3box/jx3box-common/data/jx3box.json";
import User from "@jx3box/jx3box-common/js/user";
import { iconLink } from "@jx3box/jx3box-common/js/utils";
export default {
name: "ExamList",
components: {
CommonToolbar,
},
inject: ["__imgPath"],
inject: ["__imgPath", "__cdn"],
data() {
return {
loading: false,
Expand All @@ -289,9 +321,22 @@ export default {
trendChart: null,
searchKey: "",
searchType: 0,
searchTime: "",
login_url: __Links.account.login + "?redirect=" + location.href,
tabList: [
{ label: "自定义", list: [], value: 0, client: ["std", "origin"], page: 1, pages: 1 },
{ label: "物品", list: [], value: 1, client: ["std", "origin"], page: 1, pages: 1 },
{ label: "外观", list: [], value: 2, client: ["std", "origin"], page: 1, pages: 1 },
{ label: "头发", list: [], value: 3, client: ["std"], page: 1, pages: 1 },
{ label: "挂件", list: [], value: 4, client: ["std", "origin"], page: 1, pages: 1 },
{ label: "脚印&环绕", list: [], value: 5, client: ["std", "origin"], page: 1, pages: 1 },
{ label: "其他", list: [], value: 6, client: ["std", "origin"], page: 1, pages: 1 },
{ label: "宠物", list: [], value: 7, client: ["std", "origin"], page: 1, pages: 1 },
],
filterOpen: false,
};
},
computed: {
Expand All @@ -307,6 +352,7 @@ export default {
pageSize: 20,
skip: this.searchKey ? 0 : 10,
client: this.client,
source: this.searchType,
};
if (this.searchKey) {
_params.keyword = this.searchKey;
Expand Down Expand Up @@ -343,11 +389,16 @@ export default {
}
},
methods: {
iconLink,
updateToolbar(data) {
clearTimeout(this.searchTime);
this.searchTime = setTimeout(() => {
this.searchKey = data.search;
}, 500);
if (data.type != this.searchType) {
this.searchType = data.type;
} else {
clearTimeout(this.searchTime);
this.searchTime = setTimeout(() => {
this.searchKey = data.search;
}, 500);
}
},
openDetail(itemData, type) {
getExteriorsDetail(itemData.id).then((res) => {
Expand Down Expand Up @@ -461,7 +512,6 @@ export default {
// }).then((res) => {});
},
splitByColon(text) {
console.log(text);
const regex = /[:：]/;
const parts = text.split(regex);
if (parts.length > 1) {
Expand All @@ -471,7 +521,7 @@ export default {
}
},
getImgPath(path) {
return `${this.__imgPath}exterior/${this.client}/${path}`;
return `${this.__cdn}design/exterior/${path}`;
},
jumpWBL() {
window.open("https://jx3.seasunwbl.com/buyer?t=skin", "_blank");
Expand Down

0 comments on commit fdb5829

Please sign in to comment.