|
|
@@ -10,7 +10,8 @@
|
|
|
<li>
|
|
|
<!-- <ui-icon type="icon_other_on" @click.stop="onMusicClick"></ui-icon> -->
|
|
|
|
|
|
- <img class="iconImg" @click.stop="onMusicClick" :src="require(`@/assets/images/christmas/icon_other_on@3x.png`)" alt="">
|
|
|
+ <img class="iconImg" v-if="showMusicPlaying.value" @click.stop="onMusicClick" :src="require(`@/assets/images/christmas/icon_other_on@3x.png`)" alt="">
|
|
|
+ <img class="iconImg" v-else @click.stop="onMusicClick" :src="require(`@/assets/images/christmas/icon_other_on@3x.png`)" alt="">
|
|
|
<div>{{$t('mode.music')}}</div>
|
|
|
</li>
|
|
|
|
|
|
@@ -20,10 +21,10 @@
|
|
|
<img class="iconImg" @click.stop="
|
|
|
onClickMenu({
|
|
|
icon: 'guided_shopping',
|
|
|
- id: 'heguided_shoppinglp',
|
|
|
+ id: 'guided_shopping',
|
|
|
name: $t('common.mode'),
|
|
|
})
|
|
|
- " :src="require(`@/assets/images/christmas/icon_shopping@3x.png`)" alt="">
|
|
|
+ " :src="require(`@/assets/images/christmas/icon_shopping_together@3x.png`)" alt="">
|
|
|
<!-- <ui-icon
|
|
|
type="icon_shopping"
|
|
|
@click.stop="
|
|
|
@@ -72,7 +73,7 @@
|
|
|
<ui-icon type="preview" @click.stop="playTour"></ui-icon>
|
|
|
<div>{{$t('common.tour')}}</div>
|
|
|
</li>
|
|
|
- <li v-show="metadata.cdfProductSource.region == 'AM'" @click.stop="onClickMenu(item)" v-for="(item, i) in menulist" :key="i">
|
|
|
+ <li v-show="metadata.cdfRegionData?.region == 'AM'" @click.stop="onClickMenu(item)" v-for="(item, i) in menulist" :key="i">
|
|
|
<!-- <ui-icon :type="item.icon"></ui-icon> -->
|
|
|
<img class="iconImg" :src="require(`@/assets/images/christmas/icon_customer_service@3x.png`)" alt="">
|
|
|
<div>{{ item.name }}</div>
|
|
|
@@ -133,30 +134,30 @@
|
|
|
</div> -->
|
|
|
<div class="search">
|
|
|
<img :src="require(`@/assets/images/icon/search.svg`)" alt="" />
|
|
|
- <input v-model="searchKey" type="text" :placeholder="$t('common.guideSearch')" />
|
|
|
- <ui-icon class="close" v-if="searchKey.length > 0" @click.stop="searchKey = ''" type="state_f"></ui-icon>
|
|
|
+ <input v-model="searchKey" type="text" @focus="searchKeyFocus" @blur="searchKeyBlur" :placeholder="$t('common.guideSearch')" />
|
|
|
+ <ui-icon class="close" v-if="searchKey.length > 0" @click.stop="searchKey = '';inputFocus = false" type="state_f"></ui-icon>
|
|
|
</div>
|
|
|
<div class="brandList">
|
|
|
- <div class="recommendList" v-show="searchKey.length == 0">
|
|
|
+ <div class="recommendList" v-if="!inputFocus">
|
|
|
<div class="recommenditem recommendListTop">
|
|
|
<div class="recommenditemText">
|
|
|
- <p>精选推荐</p>
|
|
|
- <div>{{metadata.sceneRecommend?.selectionMsg||'圣诞主题妆容商品，独家优惠！'}}</div>
|
|
|
+ <p>{{ $t('common.recommendSelection') }}</p>
|
|
|
+ <div>{{metadata.sceneRecommend?.selectionMsg|| $t('common.recommendSelectiontips') }}</div>
|
|
|
</div>
|
|
|
- <div class="swiper-container" id="sw-navigation">
|
|
|
+ <div class="swiper-container" id="sw-navigation" :class="{nobg:tags.filter(res => res.recommendSelection == 1).length<8}">
|
|
|
<ul class="swiper-wrapper">
|
|
|
<li
|
|
|
class="swiper-slide"
|
|
|
:class="{ liactive: item.sceneUrl === currentM && item.inPosition.indexOf(currentPose) > -1 }"
|
|
|
@click.stop="onClickHotItem(item)"
|
|
|
- v-for="(item, i) in tags.filter(res => res.recommendBrand == 1)"
|
|
|
+ v-for="(item, i) in tags.filter(res => res.recommendSelection == 1)"
|
|
|
:key="i"
|
|
|
>
|
|
|
<div class="img" :style="{ 'background-image': `url(${item.brand && item.brand.brandLogo || item.icon})` }"></div>
|
|
|
<div v-if="item.brand && item.brand.outlineImage" class="imgborder" :style="{ 'background-image': `url(${item.brand.outlineImage})` }"></div>
|
|
|
- <div class="name" v-if="item.shopName">
|
|
|
- <span :class="{ active: item.shopName.length > 6 }">
|
|
|
- {{ item.shopName }}
|
|
|
+ <div class="name" v-if="item.title">
|
|
|
+ <span :class="{ active: item.title.length > 4 }">
|
|
|
+ {{ item.title }}
|
|
|
</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
@@ -165,23 +166,23 @@
|
|
|
</div>
|
|
|
<div class="recommenditem recommendListBottom">
|
|
|
<div class="recommenditemText">
|
|
|
- <p>品牌推荐</p>
|
|
|
- <div>{{metadata.sceneRecommend?.brandMsg||'Top 10最受欢迎品牌推荐！'}}</div>
|
|
|
+ <p>{{ $t('common.recommendBrand') }}</p>
|
|
|
+ <div>{{metadata.sceneRecommend?.brandMsg|| $t('common.recommendBrandtips')}}</div>
|
|
|
</div>
|
|
|
- <div class="swiper-container" id="sw-navigation">
|
|
|
+ <div class="swiper-container" id="sw-navigation" :class="{nobg:tags.filter(res => res.recommendBrand == 1).length<8}">
|
|
|
<ul class="swiper-wrapper">
|
|
|
<li
|
|
|
class="swiper-slide"
|
|
|
:class="{ liactive: item.sceneUrl === currentM && item.inPosition.indexOf(currentPose) > -1 }"
|
|
|
@click.stop="onClickHotItem(item)"
|
|
|
- v-for="(item, i) in tags.filter(res => res.recommendSelection == 1)"
|
|
|
+ v-for="(item, i) in tags.filter(res => res.recommendBrand == 1)"
|
|
|
:key="i"
|
|
|
>
|
|
|
<div class="img" :style="{ 'background-image': `url(${item.brand && item.brand.brandLogo || item.icon})` }"></div>
|
|
|
<div v-if="item.brand && item.brand.outlineImage" class="imgborder" :style="{ 'background-image': `url(${item.brand.outlineImage})` }"></div>
|
|
|
- <div class="name" v-if="item.shopName">
|
|
|
- <span :class="{ active: item.shopName.length > 6 }">
|
|
|
- {{ item.shopName }}
|
|
|
+ <div class="name" v-if="item.title">
|
|
|
+ <span :class="{ active: item.title.length > 4 }">
|
|
|
+ {{ item.title }}
|
|
|
</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
@@ -189,8 +190,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-show="searchKey.length != 0" class="searchKeyList">
|
|
|
- <div v-if="searchList.length > 0">
|
|
|
+ <div v-else class="searchKeyList">
|
|
|
+ <div v-if="searchList.length != 0">
|
|
|
<div @click="onClickHotItem(item)" class="searchKeyItem" v-for="(item, index) in searchList" :key="index">
|
|
|
<div class="img" :style="{ 'background-image': `url(${item.brand && item.brand.brandLogo || item.icon})` }"></div>
|
|
|
<span>{{ item.title }}</span>
|
|
|
@@ -311,7 +312,7 @@ const categorylist = ref([]);
|
|
|
const brandlist = ref([]);
|
|
|
|
|
|
const searchList = ref([]);
|
|
|
-
|
|
|
+const inputFocus = ref(false)
|
|
|
const brandScroll = () => {
|
|
|
nextTick(() => {
|
|
|
let t = setTimeout(() => {
|
|
|
@@ -352,19 +353,21 @@ const brandScroll = () => {
|
|
|
};
|
|
|
|
|
|
const onClickMenu = (item) => {
|
|
|
+ console.log('onClickMenu',item);
|
|
|
if (item.id == 'kefu') {
|
|
|
let mglink =
|
|
|
'https://webpage.qidian.qq.com/2/chat/h5/index.html?linkType=1&env=ol&kfuin=3009110132&fid=3655&key=9b4334768c39150ead3f23e11e5dc2e4&cate=7&source=0&isLBS=0&isCustomEntry=0&type=10&ftype=1&_type=wpa&qidian=true&_pid=kvrmvu.74cg11.l43qvbcu&translateSwitch=0&isSsc=0&roleValue=4&roleData=922223821';
|
|
|
window.open(mglink, '_blank');
|
|
|
} else if (item.id == 'shopping') {
|
|
|
browser.openLink('/subPackage/pages/shoppingcart/shoppingcart',
|
|
|
- 'https://m.cdfmembers.com/shop/600667208/shoppingcart',
|
|
|
+ `${metadata.value.cdfProductSource.cdfHost}/shop/${metadata.value.cdfProductSource.cdfMchId}/shoppingcart`,
|
|
|
'/subPackage/pages/shoppingcart/shoppingcart',
|
|
|
- `https://glp.cdfmembers.com/shoppingcart`
|
|
|
+ `${metadata.value.cdfProductSource.cdfHostPc}/shoppingcart`
|
|
|
);
|
|
|
} else if (item.id == 'help') {
|
|
|
store.commit('showUserGuide', true);
|
|
|
} else if (item.id == 'guided_shopping') {
|
|
|
+ console.log('showShoppingguide');
|
|
|
store.commit('showShoppingguide', true);
|
|
|
}
|
|
|
};
|
|
|
@@ -394,7 +397,16 @@ const onClickShop = (item) => {
|
|
|
};
|
|
|
const onClickHotItem = (item) => {
|
|
|
guideclicktag(item)
|
|
|
- console.log('onClickHotItem',item);
|
|
|
+}
|
|
|
+function searchKeyBlur() {
|
|
|
+ if(!searchKey){
|
|
|
+ searchList.value = []
|
|
|
+ inputFocus.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+function searchKeyFocus() {
|
|
|
+ searchList.value = tags.value
|
|
|
+ inputFocus.value = true
|
|
|
}
|
|
|
watch(
|
|
|
() => currentCategory,
|
|
|
@@ -424,6 +436,10 @@ const getShoplist = async () => {
|
|
|
};
|
|
|
|
|
|
const guideclicktag = (tag) => {
|
|
|
+ store.commit('tag/setTagClickType', {
|
|
|
+ type: '',
|
|
|
+ data: {},
|
|
|
+ });
|
|
|
useApp().then((app) => {
|
|
|
app.Plugins.TagView.focus(tag.sid)
|
|
|
showShopList.value = false
|
|
|
@@ -444,7 +460,7 @@ const getSearchList = async () => {
|
|
|
let search = searchKey.value.toLowerCase()
|
|
|
arr = arr.filter((row) => {
|
|
|
if(row.recommendBrand == 1){
|
|
|
- return row.title.includes(search) || row.brand.enName.toLowerCase().includes(search) || row.brand.zhName.includes(search) || row.brand.ftName.includes(search)
|
|
|
+ return row.title.includes(search) || row.brand&&((row.brand.enName&&row.brand.enName.toLowerCase().includes(search)) || row.brand.zhName&&row.brand.zhName.toLowerCase().includes(search) || row.brand.ftName&&row.brand.ftName.toLowerCase().includes(search))
|
|
|
}else{
|
|
|
return row.title.includes(search)
|
|
|
}
|
|
|
@@ -455,13 +471,12 @@ const getSearchList = async () => {
|
|
|
onMounted(() => {
|
|
|
useApp().then((app) => {
|
|
|
app.Scene.on("loaded", () => {
|
|
|
- console.log('treasureTag',treasureTag.value);
|
|
|
+ musicPlayer.pause()
|
|
|
if(treasureTag.value.show){
|
|
|
handleTreasure()
|
|
|
}
|
|
|
});
|
|
|
- // getCategorylist();
|
|
|
- // getShoplist();
|
|
|
+ brandScroll();
|
|
|
});
|
|
|
});
|
|
|
musicPlayer.on('play', () => (showMusicPlaying.value = true))
|
|
|
@@ -469,6 +484,11 @@ musicPlayer.on('pause', () => (showMusicPlaying.value = false))
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.nobg{
|
|
|
+ &::after{
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+}
|
|
|
.iconImg{
|
|
|
height: 18px;
|
|
|
width: 18px;
|
|
|
@@ -710,6 +730,7 @@ musicPlayer.on('pause', () => (showMusicPlaying.value = false))
|
|
|
padding: 2px 4px;
|
|
|
box-sizing: border-box;
|
|
|
word-break: break-all;
|
|
|
+ z-index: 2;
|
|
|
> span {
|
|
|
display: inline-block;
|
|
|
white-space: nowrap;
|
|
|
@@ -829,7 +850,7 @@ musicPlayer.on('pause', () => (showMusicPlaying.value = false))
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #FFFFFF;
|
|
|
- line-height: 17px;
|
|
|
+ line-height: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -856,7 +877,7 @@ musicPlayer.on('pause', () => (showMusicPlaying.value = false))
|
|
|
}
|
|
|
.swiper-container {
|
|
|
width: 100%;
|
|
|
- height: 130px;
|
|
|
+ height: 3.47rem;
|
|
|
overflow: hidden;
|
|
|
margin-top: 14px;
|
|
|
margin-bottom: 5px;
|
|
|
@@ -919,6 +940,7 @@ musicPlayer.on('pause', () => (showMusicPlaying.value = false))
|
|
|
padding: 2px 4px;
|
|
|
box-sizing: border-box;
|
|
|
word-break: break-all;
|
|
|
+ z-index: 2;
|
|
|
> span {
|
|
|
display: inline-block;
|
|
|
white-space: nowrap;
|
