diff --git a/package.json b/package.json
index dd3e35815..6ca44f5ec 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
         "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common-ui@latest @jx3box/jx3box-common@latest @jx3box/jx3box-facedat@latest @jx3box/jx3box-comment-ui@latest @jx3box/jx3box-data@latest @jx3box/jx3box-editor@latest @jx3box/jx3box-map@latest"
     },
     "dependencies": {
+        "@antv/g2": "^4.1.20",
         "@jx3box/jx3box-comment-ui": "^1.8.8",
         "@jx3box/jx3box-common": "^8.2.18",
         "@jx3box/jx3box-common-ui": "^8.6.0",
diff --git a/src/assets/css/exterior/list.less b/src/assets/css/exterior/list.less
index 4f1ac0eae..1effa1111 100644
--- a/src/assets/css/exterior/list.less
+++ b/src/assets/css/exterior/list.less
@@ -1,14 +1,22 @@
+.m-main {
+    .pb(0);
+}
 .p-main {
-    .pt(40px);
     .flex();
     .pr();
     transition: 0.3s all;
+    .ml(-10px);
     .u-back__status {
         .none();
     }
     &.fewer {
         .m-left {
             max-width: 411px;
+            .m-more__list {
+                .u-more_col {
+                    width: 100%;
+                }
+            }
         }
         .m-right {
             .pr(80px);
@@ -38,10 +46,15 @@
         }
         .m-right {
             .pr(80px);
-            max-width: 100%;
             .w(100%);
+            .pb(40px);
+            max-width: 100%;
             .m-info {
                 .ml(0);
+                .m-info__scroll {
+                    max-height: initial;
+                    overflow: initial !important;
+                }
             }
             .m-action {
                 .m-close {
@@ -84,7 +97,9 @@
     }
     .m-left {
         transition: 0.3s all;
-        max-width: 100%;
+        max-height: calc(100vh - @header-height - 80px);
+        padding: 40px 10px;
+        width: 100%;
         .m-list {
             box-shadow: 0px 0px 10px 0px rgba(218, 128, 41, 0.3);
             .r(10px);
@@ -140,12 +155,15 @@
                         .mt(20px);
                         .flex();
                         .flex(y);
+                        .pointer();
                         background: rgba(255, 193, 134, 0.3);
                         padding: 11px 13px;
                         box-sizing: border-box;
                         .u-img {
                             .r(5px);
                             .size(38px);
+                            background-size: cover;
+                            background-position: center;
                         }
                         .u-title {
                             .ml(10px);
@@ -157,6 +175,23 @@
                         }
                     }
                 }
+                .m-archive-pages {
+                    .x();
+                    li {
+                        background-color: white;
+                        &:hover {
+                            .color(#da8029);
+                        }
+                        &.active {
+                            background-color: #da8029;
+                            color: white;
+                        }
+                    }
+                    .btn-prev,
+                    .btn-next {
+                        background-color: white;
+                    }
+                }
                 &:not(:first-child) {
                     .mt(20px);
                 }
@@ -164,15 +199,20 @@
         }
     }
     .m-right {
+        .mt(40px);
         max-width: 0;
         overflow: hidden;
         align-self: self-start;
         .pr();
         .flex();
+        .m-info__scroll {
+            max-height: calc(100vh - @header-height - 120px);
+        }
         .m-info {
-            .ml(40px);
+            .ml(30px);
             .r(30px);
             .pr();
+            box-sizing: border-box;
             transition: 0.3s all;
             flex-grow: 1;
             padding: 40px;
@@ -183,6 +223,7 @@
                 .m-body {
                     .x();
                     .w(22px);
+                    .mr(2px);
                     .u-item {
                         .dbi();
                         .color(#958b71);
@@ -190,6 +231,7 @@
                         .mt(4px);
                         .pr();
                         .z(1);
+                        .pointer();
                         padding: 4px 2px;
                         border: 1px solid #afa089;
                         &.act {
@@ -209,7 +251,6 @@
                 .m-preview {
                     .w(158px);
                     .h(248px);
-                    .ml(2px);
                     padding: 5px;
                     box-sizing: border-box;
                     background-image: url(../../img/exterior/exterior_border.svg);
@@ -313,17 +354,20 @@
                 }
                 .u-exterior {
                     .db();
-                    .size(100% , 400px);
+                    .w(100%);
                     .mt(28px);
                 }
+                .m-trend-chart {
+                    .mt(40px);
+                }
             }
             &::after {
                 content: "";
                 .db();
                 .pa();
                 .lt(0);
-                .rb(0);
                 .z(0);
+                .size(100%,100%);
                 .r(30px);
             }
             &.info-bg1 {
@@ -360,8 +404,28 @@
                 .flex(o);
                 .pointer();
                 .r(50%);
+                .pr();
+                .m-img__pr {
+                    .pr();
+                    .size(20px);
+                }
                 .u-img {
                     .size(20px);
+                    .db();
+                    transition: 0.3s all;
+                    &.u-img__hover {
+                        .pa();
+                        .lt(50%);
+                        transform: translateX(-50%) translateY(-50%);
+                        opacity: 0;
+                    }
+                }
+                .u-img__fill {
+                    .pa();
+                    .lt(50%);
+                    transform: translateX(-50%) translateY(-50%);
+                    padding: 10px;
+                    .r(50%);
                 }
                 &.u-close {
                     background: var(
@@ -382,6 +446,15 @@
                         .w(100%);
                         .x();
                     }
+                    .u-img__fill {
+                        background: #ff4365;
+                        opacity: 0;
+                    }
+                    &:hover {
+                        .u-img__fill {
+                            opacity: 1;
+                        }
+                    }
                 }
                 &.u-bag {
                     background: #da8029;
@@ -398,6 +471,11 @@
                 &:not(:first-child) {
                     .mt(10px);
                 }
+                &:hover {
+                    .u-img.u-img__hover {
+                        opacity: 1;
+                    }
+                }
             }
             .m-quick {
                 .mt(30px);
@@ -507,4 +585,20 @@
             }
         }
     }
+    .m-left,
+    .m-right .m-info__scroll {
+        overflow-y: scroll;
+        &::-webkit-scrollbar {
+            width: 0;
+        }
+    }
+}
+// 平板
+@media screen and (max-width: 1133px) {
+}
+// 手机
+@media screen and (max-width: 768px) {
+    .p-main .m-left .m-list .m-box .m-new__list .m-item {
+        margin: 0 auto;
+    }
 }
diff --git a/src/assets/img/exterior/icon/mdi_heart_act.png b/src/assets/img/exterior/icon/mdi_heart_act.png
new file mode 100644
index 000000000..bca8d5742
Binary files /dev/null and b/src/assets/img/exterior/icon/mdi_heart_act.png differ
diff --git a/src/assets/img/exterior/icon/ri_dislike-fill.png b/src/assets/img/exterior/icon/ri_dislike-fill.png
new file mode 100644
index 000000000..eb5dd7080
Binary files /dev/null and b/src/assets/img/exterior/icon/ri_dislike-fill.png differ
diff --git a/src/pages/exterior.js b/src/pages/exterior.js
index bfd495f7a..c61b15e23 100644
--- a/src/pages/exterior.js
+++ b/src/pages/exterior.js
@@ -16,7 +16,7 @@ reporter.install(Vue);
 
 // 数据与路由
 import router from "../router/exterior";
-import store from "../store";
+import store from "../store/exterior";
 
 import App from "@/views/exterior/index.vue";
 new Vue({
diff --git a/src/service/exterior.js b/src/service/exterior.js
index 7732bcc5d..853cf51fa 100644
--- a/src/service/exterior.js
+++ b/src/service/exterior.js
@@ -1,4 +1,4 @@
-import { $node } from "@jx3box/jx3box-common/js/https";
+import { $node, $cms } from "@jx3box/jx3box-common/js/https";
 
 // 外观类型列表
 function getExteriorsTypes() {
@@ -6,8 +6,49 @@ function getExteriorsTypes() {
 }
 
 // 外观列表/搜索
-function getExteriorsList() {
-    return $node().get(`/api/node/v2/exterior/list`);
+function getExteriorsList(params) {
+    return $node().get(`/api/node/v2/exterior/list`, {
+        params,
+    });
 }
 
-export { getExteriorsTypes, getExteriorsList };
+// 外观详情
+function getExteriorsDetail(id) {
+    return $node().get(`/api/node/v2/exterior/${id}`);
+}
+
+// 外观价格趋势
+function getExteriorsPriceTrending(params) {
+    return $node().get(`/api/node/v2/exterior/price-trending`, {
+        params,
+    });
+}
+
+// 用户入库外观
+function entWarehouse(params) {
+    return $cms().post(`/api/cms/pvx/exterior/user/store`, {
+        params,
+    });
+}
+
+// 用户查看自己关注的外观列表
+function exteriorUserStar(params) {
+    return $cms().get(`/api/cms/pvx/exterior/user/star`, {
+        params,
+    });
+}
+
+// 用户获取/关注/取消收藏外观
+function userStarExterior(type, id, params) {
+    return $cms()[type](`/api/cms/pvx/exterior/user/star/${id}`, params);
+}
+
+export {
+    getExteriorsTypes,
+    getExteriorsList,
+    getExteriorsDetail,
+    getExteriorsPriceTrending,
+    entWarehouse,
+    exteriorUserStar,
+    userStarExterior,
+};
diff --git a/src/store/exterior.js b/src/store/exterior.js
new file mode 100644
index 000000000..6f6658697
--- /dev/null
+++ b/src/store/exterior.js
@@ -0,0 +1,32 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import { exteriorUserStar } from "@/service/exterior";
+
+Vue.use(Vuex);
+
+let store = {
+    state: {
+        client: location.href.includes("origin") ? "origin" : "std",
+        userStarExteriorList: [],
+    },
+    mutations: {
+        toState(state, data) {
+            Object.keys(data).forEach((item) => {
+                state[item] = data[item];
+            });
+        },
+        toExteriorList(state, data) {
+            state.userStarExteriorList = data;
+        },
+    },
+
+    actions: {
+        getExteriorUserStar(ctx) {
+            exteriorUserStar().then((res) => {
+                ctx.commit("toExteriorList", res.data.data);
+            });
+        },
+    },
+};
+
+export default new Vuex.Store(store);
diff --git a/src/views/exterior/index.vue b/src/views/exterior/index.vue
index cbc37efbe..b472a71ad 100644
--- a/src/views/exterior/index.vue
+++ b/src/views/exterior/index.vue
@@ -13,10 +13,13 @@
 </template>
 
 <script>
-import Nav from "@/components/Nav_v4.vue";
+import Nav from "@/components/Nav_v5.vue";
+import { __imgPath, __dataPath } from "@jx3box/jx3box-common/data/jx3box.json";
 export default {
     name: "App",
-    provide: {},
+    provide: {
+        __imgPath,
+    },
     data: function () {
         return {
             navStatusClass: "is-regular",
diff --git a/src/views/exterior/list.vue b/src/views/exterior/list.vue
index 6ae7200db..66b454ab3 100644
--- a/src/views/exterior/list.vue
+++ b/src/views/exterior/list.vue
@@ -5,104 +5,181 @@
             <CommonToolbar search @update="updateToolbar"></CommonToolbar>
 
             <div class="m-list">
-                <div class="m-box">
-                    <p class="u-box__title">商城上新</p>
-                    <div class="m-new__list">
-                        <div class="m-item" @click="pageStatus = 'fewer'" v-for="item in Array(15)" :key="item">
-                            <div class="m-item__img">
-                                <div
-                                    class="u-img"
-                                    :style="{
-                                        backgroundImage: `url(${require('@/assets/img/exterior/test.png')})`,
-                                    }"
-                                ></div>
+                <template v-if="searchKey">
+                    <div class="m-box">
+                        <p class="u-box__title">搜索结果</p>
+                        <div class="m-new__list">
+                            <div
+                                class="m-item"
+                                @click="openDetail(item)"
+                                v-for="(item, index) in otherExteriorList"
+                                :key="index"
+                            >
+                                <div class="m-item__img">
+                                    <div
+                                        class="u-img"
+                                        :style="{
+                                            backgroundImage: `url(${getImgPath(item.name + '-封面.png')})`,
+                                        }"
+                                    ></div>
+                                </div>
+                                <div class="u-title">{{ item.name }}</div>
                             </div>
-                            <div class="u-title">彩 · 朝云幕霞</div>
                         </div>
                     </div>
-                </div>
-                <div class="m-box">
-                    <p class="u-box__title">其他</p>
-                    <el-row :gutter="20" class="m-more__list">
-                        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="item in Array(21)" :key="item">
-                            <div class="m-item">
-                                <div class="u-img"></div>
-                                <span class="u-title">外观名字</span>
+                </template>
+                <template v-else>
+                    <div class="m-box">
+                        <p class="u-box__title">商城上新</p>
+                        <div class="m-new__list">
+                            <div
+                                class="m-item"
+                                @click="openDetail(item)"
+                                v-for="(item, index) in newExteriorList"
+                                :key="index"
+                            >
+                                <div class="m-item__img">
+                                    <div
+                                        class="u-img"
+                                        :style="{
+                                            backgroundImage: `url(${getImgPath(item.name + '-封面.png')})`,
+                                        }"
+                                    ></div>
+                                </div>
+                                <div class="u-title">{{ item.name }}</div>
                             </div>
-                        </el-col>
-                    </el-row>
-                </div>
+                        </div>
+                    </div>
+                    <div class="m-box">
+                        <p class="u-box__title">其他</p>
+                        <el-row :gutter="20" class="m-more__list">
+                            <el-col
+                                :xs="24"
+                                :sm="12"
+                                :md="12"
+                                :lg="6"
+                                :xl="6"
+                                v-for="(item, index) in otherExteriorList"
+                                :key="index"
+                                class="u-more_col"
+                            >
+                                <div class="m-item" @click="openDetail(item)">
+                                    <div
+                                        class="u-img"
+                                        :style="{
+                                            backgroundImage: `url(${getImgPath(item.name + '-封面.png')})`,
+                                        }"
+                                    ></div>
+                                    <span class="u-title">{{ item.name }}</span>
+                                </div>
+                            </el-col>
+                        </el-row>
+
+                        <el-pagination
+                            class="m-archive-pages"
+                            background
+                            layout="total, prev, pager, next, jumper"
+                            :hide-on-single-page="true"
+                            :page-size="per_page"
+                            :total="total"
+                            :current-page.sync="page"
+                        ></el-pagination>
+                    </div>
+                </template>
             </div>
         </div>
         <div class="m-right">
-            <div class="m-info" :class="[selectColor, selectBg]">
-                <div class="m-info__top">
-                    <div class="m-body">
-                        <span class="u-item">成男</span>
-                        <span class="u-item act">成男</span>
-                        <span class="u-item">成男</span>
-                        <span class="u-item">成男</span>
-                    </div>
-                    <div class="m-preview">
-                        <div
-                            class="u-img"
-                            :style="{
-                                backgroundImage: `url(${require('@/assets/img/exterior/test.png')})`,
-                            }"
-                        ></div>
-                    </div>
-                    <div class="m-detail">
-                        <p class="u-name">花醉良辰·凤卜礼盒</p>
-                        <div class="m-info__list">
-                            <div class="m-list__ul">
-                                <div class="m-list__li">
-                                    <div class="u-title">包身礼盒</div>
-                                </div>
-                                <div class="m-list__li">
-                                    <div class="u-title">售价</div>
-                                    <div class="u-value">￥880</div>
+            <div class="m-info" :class="[selectColor, selectBg]" v-if="exteriorDetail">
+                <div class="m-info__scroll">
+                    <div class="m-info__top">
+                        <div class="m-body" v-if="bodyList.length > 1">
+                            <span
+                                class="u-item"
+                                v-for="(item, index) in bodyList"
+                                :class="{
+                                    act: item.key == bodySelectKey,
+                                }"
+                                :key="index"
+                                @click="bodySelectKey = item.key"
+                                >{{ item.name }}</span
+                            >
+                        </div>
+                        <div class="m-preview">
+                            <div
+                                class="u-img"
+                                :style="{
+                                    backgroundImage: `url(${getImgPath(
+                                        exteriorDetail.name + '-封面' + bodySelectKey + '.png'
+                                    )})`,
+                                }"
+                            ></div>
+                        </div>
+                        <div class="m-detail">
+                            <p class="u-name">{{ exteriorDetail.name }}</p>
+                            <div class="m-info__list">
+                                <div class="m-list__ul">
+                                    <div
+                                        class="m-list__li"
+                                        v-for="(item, index) in exteriorDetail.meta.tags"
+                                        :key="index"
+                                    >
+                                        <div class="u-title">{{ item }}</div>
+                                    </div>
+                                    <div class="m-list__li">
+                                        <div class="u-title">售价</div>
+                                        <div class="u-value">￥{{ exteriorDetail.meta.price / 100 }}</div>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="m-list__ul">
-                                <div class="m-list__li">
-                                    <div class="u-title">发行时间</div>
-                                    <div class="u-value">2023-05-18</div>
+                                <div class="m-list__ul">
+                                    <div
+                                        class="m-list__li"
+                                        v-for="(item, index) in exteriorDetail.meta.get_types"
+                                        :key="index"
+                                    >
+                                        <div class="u-title">{{ splitByColon(item)[0] }}</div>
+                                        <div class="u-value" v-if="splitByColon(item)[1]">
+                                            {{ splitByColon(item)[1] }}
+                                        </div>
+                                    </div>
                                 </div>
-                                <div class="m-list__li">
-                                    <div class="u-title">获取方式</div>
-                                    <div class="u-value">限时抢购</div>
+                                <div class="m-list__ul" v-if="exteriorDetail.sub_exteriors">
+                                    <div class="m-list__li">
+                                        <div class="u-title">内含单品</div>
+                                    </div>
                                 </div>
                             </div>
-                            <div class="m-list__ul">
-                                <div class="m-list__li">
-                                    <div class="u-title">内含单品</div>
+                            <div class="m-goods">
+                                <div class="m-item" v-for="(item, index) in exteriorDetail.sub_exteriors" :key="index">
+                                    <div
+                                        class="u-img"
+                                        :style="{
+                                            backgroundImage: `url(${item.meta.img_urls[0]})`,
+                                        }"
+                                    ></div>
                                 </div>
-                            </div>
-                        </div>
-                        <div class="m-goods">
-                            <div class="m-item">
-                                <div class="u-img"></div>
-                            </div>
-                            <div class="m-item">
-                                <div class="u-img"></div>
-                            </div>
-                            <div class="u-gap">选一</div>
-                            <div class="m-item">
-                                <div class="u-img"></div>
-                            </div>
+                                <!-- <div class="u-gap">选一</div>
                             <div class="m-item">
                                 <div class="u-img"></div>
+                            </div> -->
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="m-info__bottom">
-                    <div class="m-info__title">
-                        <div class="u-line"></div>
-                        <div class="u-title">外观预览</div>
-                        <div class="u-line"></div>
+                    <div class="m-info__bottom">
+                        <div class="m-info__title">
+                            <div class="u-line"></div>
+                            <div class="u-title">外观预览</div>
+                            <div class="u-line"></div>
+                        </div>
+                        <img class="u-exterior" :src="getImgPath(exteriorDetail.name + '-详情-1.png')" />
+                        <div class="m-info__title">
+                            <div class="u-line"></div>
+                            <div class="u-title">近期价格走势</div>
+                            <div class="u-line"></div>
+                        </div>
+                        <div class="m-trend-chart">
+                            <div id="u-chart"></div>
+                        </div>
                     </div>
-                    <img class="u-exterior" src="" />
                 </div>
             </div>
             <div class="m-action">
@@ -112,14 +189,21 @@
                     </div>
                 </div>
                 <div class="m-quick">
-                    <div class="u-action u-like">
-                        <img class="u-img" src="@/assets/img/exterior/icon/mdi_heart.png" />
-                        <div class="u-text">1/5</div>
+                    <div class="u-action u-like" @click="userStar">
+                        <div class="m-img__pr" v-if="!exteriorDetail.isStar">
+                            <img class="u-img" src="@/assets/img/exterior/icon/mdi_heart.png" />
+                            <img class="u-img u-img__hover" src="@/assets/img/exterior/icon/mdi_heart_act.png" />
+                        </div>
+                        <template v-else>
+                            <img class="u-img" src="@/assets/img/exterior/icon/mdi_heart_act.png" />
+                            <img class="u-img u-img__fill" src="@/assets/img/exterior/icon/ri_dislike-fill.png" />
+                        </template>
+                        <div class="u-text">{{ `${userStarExteriorList.length}/5` }}</div>
                     </div>
-                    <div class="u-action u-bag">
+                    <div class="u-action u-bag" @click="userEntWarehouse">
                         <img class="u-img" src="@/assets/img/exterior/icon/solar_inbox-in-bold.png" />
                     </div>
-                    <div class="u-action u-wbl">
+                    <div class="u-action u-wbl" @click="jumpWBL">
                         <img class="u-img" src="@/assets/img/exterior/icon/wbl-icon.png" />
                     </div>
                     <div class="u-action u-unfold" @click="pageStatus = 'unfold'">
@@ -153,29 +237,210 @@
     </div>
 </template>
 <script>
+import { Chart } from "@antv/g2";
 import CommonToolbar from "@/components/common/toolbar.vue";
 import { __clients } from "@jx3box/jx3box-common/data/jx3box.json";
-import { getExteriorsList } from "@/service/exterior";
+import {
+    getExteriorsList,
+    getExteriorsDetail,
+    getExteriorsPriceTrending,
+    entWarehouse,
+    userStarExterior,
+} from "@/service/exterior";
 export default {
     name: "ExamList",
     components: {
         CommonToolbar,
     },
+    inject: ["__imgPath"],
     data() {
         return {
             loading: false,
             pageStatus: "list",
             selectBg: "info-bg1",
             selectColor: "color1",
+
+            page: 1,
+            per_page: 50,
+            total: 0,
+
+            newExteriorList: [],
+            otherExteriorList: [],
+
+            exteriorDetail: false,
+
+            bodyList: [],
+            bodySelectKey: "",
+
+            trendChart: null,
+            searchKey: "",
+            searchTime: "",
         };
     },
-    computed: {},
-    watch: {},
+    computed: {
+        client() {
+            return this.$store.state.client;
+        },
+        userStarExteriorList() {
+            return this.$store.state.userStarExteriorList;
+        },
+        params() {
+            let _params = {
+                page: this.page || 1,
+                pageSize: 20,
+                skip: this.searchKey ? 0 : 10,
+                client: this.client,
+            };
+            if (this.searchKey) {
+                _params.keyword = this.searchKey;
+            }
+            return _params;
+        },
+    },
+    watch: {
+        params: {
+            deep: true,
+            handler(val) {
+                this.getListData();
+            },
+        },
+    },
     mounted() {
-        getExteriorsList();
+        // 获取商城上新
+        getExteriorsList({
+            pageSize: 10,
+        }).then((res) => {
+            this.newExteriorList = res.data.data.list;
+        });
+        // 获取其他类的外观
+        this.getListData();
+        this.$store.dispatch("getExteriorUserStar");
     },
     methods: {
-        updateToolbar(data) {},
+        updateToolbar(data) {
+            clearTimeout(this.searchTime);
+            this.searchTime = setTimeout(() => {
+                this.searchKey = data.search;
+            }, 500);
+        },
+        openDetail(itemData) {
+            getExteriorsDetail(itemData.id).then((res) => {
+                res.data.data.isStar = this.userStarExteriorList.some((item) => item.exterior_id === res.data.data.id);
+                this.exteriorDetail = res.data.data;
+                this.bodyList = [];
+                this.bodySelectKey = "";
+                this.exteriorDetail.meta.img_urls.map((item) => {
+                    if (item.indexOf("m2") > -1) {
+                        this.bodyList.push({
+                            name: "成男",
+                            key: "-m2",
+                        });
+                    } else if (item.indexOf("封面.png") > -1) {
+                        this.bodyList.push({
+                            name: "成女",
+                            key: "-f2",
+                        });
+                    } else if (item.indexOf("m1") > -1) {
+                        this.bodyList.push({
+                            name: "正太",
+                            key: "-m1",
+                        });
+                    } else if (item.indexOf("f2") > -1) {
+                        this.bodyList.push({
+                            name: "萝莉",
+                            key: "",
+                        });
+                    }
+                });
+                this.bodySelectKey = this.bodyList.length > 1 ? this.bodyList[0]?.key : "";
+                if (window.innerWidth < 1280) {
+                    this.pageStatus = "unfold";
+                } else {
+                    this.pageStatus = "fewer";
+                }
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        getExteriorsPriceTrending({
+                            ids: itemData.id,
+                        }).then((res) => {
+                            if (!res.data.data) {
+                                return;
+                            }
+                            if (!this.trendChart) {
+                                this.trendChart = new Chart({
+                                    container: "u-chart",
+                                    autoFit: true,
+                                    width: "100%",
+                                    height: 300,
+                                    padding: [20, 50, 20, 50], // 上, 右, 下, 左的间距
+                                });
+                            } else {
+                                this.trendChart.clear();
+                            }
+                            this.trendChart.axis("avg_price", {
+                                label: {
+                                    formatter: (val) => {
+                                        return "￥" + (val / 100).toFixed(2) * 1;
+                                    },
+                                },
+                            });
+                            this.trendChart.tooltip({
+                                showCrosshairs: true,
+                                shared: true,
+                                customItems: (items) => {
+                                    items.forEach((item) => {
+                                        item.name = "平均价";
+                                        item.value = `￥` + ((item.value * 1) / 100).toFixed(2) * 1;
+                                    });
+                                    return items;
+                                },
+                            });
+
+                            this.trendChart.line().color("#886542").position("date*avg_price");
+                            this.trendChart.point().color("#886542").position("date*avg_price");
+                            this.trendChart.data(res.data.data[itemData.id]).render();
+                        });
+                    }, 300);
+                });
+            });
+        },
+        getListData() {
+            getExteriorsList(this.params).then((res) => {
+                this.total = res.data.data.total;
+                this.otherExteriorList = res.data.data.list;
+            });
+        },
+        userStar() {
+            let reqType = this.exteriorDetail.isStar ? "delete" : "post";
+            userStarExterior(reqType, this.exteriorDetail.id, {
+                order: 0,
+            }).then((res) => {
+                this.exteriorDetail.isStar = !this.exteriorDetail.isStar;
+                this.$store.dispatch("getExteriorUserStar");
+            });
+        },
+        userEntWarehouse() {
+            // entWarehouse({
+            //     exterior_id: this.exteriorDetail.id,
+            //     count: 1,
+            // }).then((res) => {});
+        },
+        splitByColon(text) {
+            console.log(text);
+            const regex = /[:：]/;
+            const parts = text.split(regex);
+            if (parts.length > 1) {
+                return [parts[0].trim(), parts[1].trim()];
+            } else {
+                return [parts[0].trim(), ""];
+            }
+        },
+        getImgPath(path) {
+            return `${this.__imgPath}exterior/${this.client}/${path}`;
+        },
+        jumpWBL() {
+            window.open("https://jx3.seasunwbl.com/buyer?t=skin", "_blank");
+        },
     },
 };
 </script>