|
|
@@ -48,7 +48,13 @@
|
|
|
|
|
|
<div class="toolbar color">
|
|
|
<div class="navigation">
|
|
|
- <div class="h3">專櫃導航</div>
|
|
|
+ <div class="h3">
|
|
|
+ <span>專櫃導航</span>
|
|
|
+ <div @click="showShopList = true">
|
|
|
+ <img :src="require(`@/assets/images/icon/search.svg`)" alt="" />
|
|
|
+ 搜索專櫃
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="swiper-container" id="sw-navigation">
|
|
|
<ul class="swiper-wrapper">
|
|
|
<li
|
|
|
@@ -97,6 +103,35 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div v-show="showShopList" class="shoplist">
|
|
|
+ <div class="l-title">
|
|
|
+ 專櫃列表 ({{searchList.length}})
|
|
|
+ <ui-icon type="close" @click="showShopList = false" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="search">
|
|
|
+ <img :src="require(`@/assets/images/icon/search.svg`)" alt="" />
|
|
|
+ <input v-model="searchKey" type="text" placeholder="專櫃搜索" />
|
|
|
+ <ui-icon class="close" v-if="searchKey.length > 0" @click.stop="searchKey = ''" type="state_f"></ui-icon>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ul v-if="searchList.length > 0">
|
|
|
+ <li
|
|
|
+ @click.stop="onClickShop(item)"
|
|
|
+ v-for="(item, idx) in searchList" :key="idx">
|
|
|
+ <div class="img" :style="{ 'background-image': `url(${item.shopLogo})` }"></div>
|
|
|
+ <div class="name" v-if="item.shopName">
|
|
|
+ <span :class="{ active: item.shopName.length > 6 }">
|
|
|
+ {{ item.shopName }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <ui-icon class="right" type="right"></ui-icon>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <div class="noresult" v-else>暫無結果</div>
|
|
|
+ </div>
|
|
|
</Panel>
|
|
|
</template>
|
|
|
|
|
|
@@ -111,7 +146,9 @@ import browser from "@/utils/browser";
|
|
|
const store = useStore();
|
|
|
|
|
|
const isOpen = ref(false);
|
|
|
+const searchKey = ref("");
|
|
|
|
|
|
+const showShopList = ref(false);
|
|
|
|
|
|
const toggleOpen = () => {
|
|
|
isOpen.value = !isOpen.value;
|
|
|
@@ -182,6 +219,8 @@ const categorylist = ref([]);
|
|
|
|
|
|
const brandlist = ref([]);
|
|
|
|
|
|
+const searchList = ref([]);
|
|
|
+
|
|
|
const brandScroll = () => {
|
|
|
nextTick(() => {
|
|
|
let t = setTimeout(() => {
|
|
|
@@ -269,6 +308,14 @@ watch(
|
|
|
}
|
|
|
);
|
|
|
|
|
|
+watch(
|
|
|
+ () => searchKey.value,
|
|
|
+ (val, old) => {
|
|
|
+ console.log(searchKey.value);
|
|
|
+ getSearchList();
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
const getShoplist = async () => {
|
|
|
let res = await apis.get_shop_list({
|
|
|
categoryId: currentCategory.value.id,
|
|
|
@@ -277,6 +324,14 @@ const getShoplist = async () => {
|
|
|
brandScroll();
|
|
|
};
|
|
|
|
|
|
+const getSearchList = async () => {
|
|
|
+ let res = await apis.get_shop_list({
|
|
|
+ shopName: searchKey.value,
|
|
|
+ });
|
|
|
+ searchList.value = res.data;
|
|
|
+ console.log(searchList.value);
|
|
|
+};
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
useApp().then((app) => {
|
|
|
getCategorylist();
|
|
|
@@ -347,6 +402,23 @@ onMounted(() => {
|
|
|
.h3 {
|
|
|
font-size: 14px;
|
|
|
padding: 0 14px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ > div {
|
|
|
+ width: 96px;
|
|
|
+ height: 24px;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 24px;
|
|
|
+ display: flex;
|
|
|
+ font-size: 12px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 12px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
}
|
|
|
.swiper-container {
|
|
|
width: 100%;
|
|
|
@@ -441,6 +513,110 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.shoplist {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 999;
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ height: 80vh;
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ border-radius: 10px 10px 0px 0px;
|
|
|
+ padding: 12px 15px;
|
|
|
+ .l-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ i {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search {
|
|
|
+ width: 100%;
|
|
|
+ height: 34px;
|
|
|
+ background: rgba(46, 46, 46, 0.9);
|
|
|
+ border-radius: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 8px;
|
|
|
+ margin-top: 20px;
|
|
|
+ > img {
|
|
|
+ width: 16px;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ > input {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 16px;
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .close {
|
|
|
+ color: #7d7e80;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > ul {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ overflow-y: auto;
|
|
|
+ > li {
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+ position: relative;
|
|
|
+ font-size: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 18px 0;
|
|
|
+ .img {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background-size: contain;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+ left: 0;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: left;
|
|
|
+ padding: 2px 4px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ word-break: break-all;
|
|
|
+ > span {
|
|
|
+ display: inline-block;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.noresult{
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20vh;
|
|
|
+}
|
|
|
+
|
|
|
@keyframes wordsLoop {
|
|
|
0% {
|
|
|
transform: translateX(100%);
|
tremble