xinkeaboard/xinkeaboard-web/components/Store/HeaderCat.vue

<!-- 店铺头部数据（条幅和店铺分类） @zjf-2020-01-04 -->
<template>
  <div class="sld_store_header">
    <NavTopBar></NavTopBar>
    <div class="container">
      <div class="ld left">
        <a href="javascript:void(0)" class="sld_img_center fl" @click="go_home">
          <img :src="filtersStore.getSiteLogo" :onerror="defaultImg" alt />
        </a>
        <!-- <span class="fl line"></span> -->
        <div class="sld_store_rate fl">
          <p class="name"><span>{{ storeData.info.storeName }} </span>  <i class="sld_sjx"></i></p>
          <div class="sld_store_info_more">
            <div class="top clearfix">
              <div class="fl">
                <p>
                {{ L["服务承诺"] }}：<a href="JavaScript:;">{{ L["正品保障"] }}</a>
              </p>
              <p>{{ L["客服电话"] }}：{{ storeData.info.servicePhone }}</p>
              <p>
                {{ L["主营商品"] }}：{{
                  storeData.info.mainBusiness
                    ? storeData.info.mainBusiness
                        .replace(/(.*),/, "$1。")
                        .replace(/,/g, "、")
                    : "--"
                }}
              </p>
              </div>
              <div class="fr flex_row_center_center">
                <img :src="storeData.info.storeLogoUrl" alt="" />
              </div>
            </div>

            <div class="bottom">
              <router-link   :to="'/store/'+ calcProductName(storeData.info.storeName) +'_v-'+ vid"
                              class="go_store_btn">
                {{ L["店铺首页"] }}
              </router-link>
            </div>
          </div>
        </div>
        <div class="sld_store_follow" @click="followStore" v-if="loginFlag">
          {{ storeData.info.isFollow == "true" ? L["取消关注"] : L["关注"] }}
        </div>
      </div>
      <div class="search_wrap clearfix">
        <div class="search_wrap-content">
          <form class="fl" action="javascript:void(0)" method="get">
          <el-select 
             v-model="searchType" 
             placeholder="Select" 
             popper-class="select-search-type"
            >
              <el-option
                v-for="item in searchTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <input
              type="text"
              v-model="keyword"
              class="text"
              :placeholder="L['请输入关键词']"
              autocomplete="off"
              style="color: rgb(153, 153, 153)"
              ref="searchInput"
              @focus="inputFocus"
              @input="inputChange"
              @blur="inputBlur"
            />
            <input type="submit" :value="L['搜索']" class="button" @click="unifySearch" />
          </form>
          <!-- <input
            type="submit"
            :value="L['搜本店']"
            class="button fl"
            @click="searchStore('keyword')"
            style="background: #333"
          /> -->
        </div>
        


      </div>

      <div class="sld_cart_wrap">
        <dl class="">
          <dt
            class="ld cart_icon_text_wrap"
          >
            <span class="iconfont "><img src="/email.svg" /></span>

            <router-link target="_blank"  :to="'/store/contact/'+ calcProductName(storeData.info.storeName) +'_v-'+ vid" >
              {{ L["询价"] }}
            </router-link>
            <!-- 没有商品显示0 -->
          </dt>

        </dl>
      </div>
    </div>
    <div class="sld_store_label_nav_wrap" v-if="showNav">
      <div class="sld_store_label_wrap">
        <img
          :src="storeData.info.storeBannerPcUrl  ? storeData.info.storeBannerPcUrl : defaultStoreBanner"
          alt=""
          :onerror="defaultStoreBanner"
        />

      </div>
      <div class="logo_banner_left container" v-if="storeData.info.storeBannerPcSource == 'platform'">
        <img :src="storeData.info.storeLogoUrl ? storeData.info.storeLogoUrl : defaultStoreBanner" class="" />
      </div>
      <div class="sld_store_nav">
        <ul class="clearfix">
          <li class="sld_all_store_cat">
            <p class="all_type">
              <span>{{ L["本店全部分类"] }}</span> <i class="iconfont"></i>
            </p>
            <ul class="sld_store_first_cat">
              <li v-for="(item, index) in storeData.cat" :key="index">
                <nuxt-link
                target="_blank"
                :to="'/store/goods/'+ calcProductName(storeData.info.storeName) +'_v-'+ vid + '_c-' + item.innerLabelId"

                >
                  <span :title="item.innerLabelName">{{ item.innerLabelName }}</span>
                  <i v-if="item.children.length" class="iconfont fr"></i>
                </nuxt-link>
                <ul class="sld_store_second_cat" v-if="item.children.length">
                  <li
                    v-for="(item_child, index_child) in item.children"
                    :key="index_child"
                  >
                    <nuxt-link
                    target="_blank"
                    :title="item_child.innerLabelName"
                    :to="'/store/goods/'+ calcProductName(storeData.info.storeName) +'_v-'+ vid + '_c-' + item_child.innerLabelId"
                    >
                      {{ item_child.innerLabelName }}
                    </nuxt-link>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <ul class="sld_store_cat_horizontal" v-if="storeData.info.storeName">
            <li :class="{ 'active': routePath === '/store/'+ calcProductName(storeData.info.storeName) +'_'+ vid }">
              <nuxt-link  :to="'/store/'+ calcProductName(storeData.info.storeName) +'_'+ vid"  >
                {{ L["首页"] }}
              </nuxt-link>
            </li>
            <li :class="{'active': routePath === '/store/goods/'+ calcProductName(storeData.info.storeName) +'_v-'+ vid}">
              <nuxt-link :to="'/store/goods/'+ calcProductName(storeData.info.storeName) +'_v-'+ vid" >{{
                L["所有商品"]
              }}</nuxt-link>
            </li>

            <li :class="{ 'active': routePath === '/store/about/'+ calcProductName(storeData.info.storeName) +'_v-'+ vid }">
              <nuxt-link :to="'/store/about/'+ calcProductName(storeData.info.storeName) +'_v-'+ vid" >{{
                L["关于我们"]
              }}</nuxt-link>


            </li>
            <li :class="{ 'active': routePath === '/store/contact/'+ calcProductName(storeData.info.storeName) +'_v-'+ vid }">
              <nuxt-link :to="'/store/contact/'+ calcProductName(storeData.info.storeName) +'_v-'+ vid" >{{
                L["联系我们"]
              }}</nuxt-link>
            </li>
          </ul>
          <!-- 分割线 -->
          <div class="search_line"></div>
          <!-- 搜索框 start -->
          <div class="search_modle flex_row_center_center">
            <input
              type="text"
              v-model="keywordStore"
              class="search_input"
              :placeholder="L['请输入关键词进行查询...']"
              @keyup.enter="searchStore('keywordStore')"
            />
            <span class="search_input_button" @click="searchStore('keywordStore')">{{
              L["搜索"]
            }}</span>
          </div>
          <!-- 搜索框 end -->
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from '@/composables/common.js';
import {goodsInfo,useUserInfo} from '@/store/user.js'
import { useFiltersStore } from "@/store/filter.js";

const filtersStore = useFiltersStore();
const goodsInfox = goodsInfo();
const showNav = ref(false);
// const L = lang_zn;
const L = getCurLanguage();
const emit = defineEmits(['updateFllow','sendGoodsName'])
const defaultStoreBanner =  ref("") ;
const router = useRouter();
const route = useRoute();
const vid = ref("");
const storeData = reactive({
  cat: [ ],
  info: {}
}); //店铺数据，cat：店铺分类，info：店铺基本信息
const searchType = ref('store');
const searchTypeOptions = [
  {
    value: 'store',
    label: L['店铺内'],
  },
  {
    value: 'site',
    label: L['全平台'],
  },
]
const otherMenuData = reactive({data:[]})
const { proxy } = getCurrentInstance();
const keyword = ref(
  route.query != undefined && route.query.keyword != undefined && route.query.keyword
    ? route.query.keyword
    : ""
);
const keywordStore = ref("");
const loginFlag = ref(filtersStore.getLoginFlag);
const defaultImg = ref("/assets/common_top_logo.png");
const SAList = ref([]);
const SAShow = ref(false);

const routePath = computed(() => route.fullPath);
console.log(routePath, 'routePath')

const go_home = () => {
  window.location.href="/"
};

//只有列表页面通过nuxt3的路由获取vid
const setVid = (v) => {
  vid.value = v
  getStoreInfoBaseInfo();
  getStoreCatData();
}

const setfollowStore = (v) => {
  storeData.info.isFollow = v
}
defineExpose({setVid,setfollowStore})

//获取店铺基本信息
const getStoreInfoBaseInfo = async () => {
  const {data:value} = await useFetchRaw(apiUrl + 'v3/seller/front/store/detail',{params:{storeId: vid.value}, headers:{Authorization:'Bearer ' + filtersStore.getToken}})
  const res = value._rawValue
  if (res.state == 200) {
      storeData.info = res.data;
      emit("sendGoodsName", storeData.info.storeName);
      storeData.info.storeAverageScore = (
        (res.data.deliverScore * 1 +
          res.data.descriptionScore * 1 +
          res.data.serviceScore * 1) /
        3
      ).toFixed(1);
      showNav.value = true;
    }
};
//获取店铺分类数据
const getStoreCatData = async () => {
  const {data:value} = await useFetchRaw(apiUrl + 'v3/seller/front/store/storeCategory',{params:{storeId: vid.value}})
  const res = value._rawValue
  if (res.state == 200) {
        storeData.cat = res.data;
  }
};

const inputFocus = () => {
  proxy.$refs.searchInput.style.color = "#333";
  SAShow.value = true;
  if (keyword.value && SAList.value.length == 0) {
    searchAssociation(keyword.value);
  }
};

watchEffect(() => {
  let tmpRoute = router.currentRoute.value;
  if (tmpRoute.query.keyword != undefined) {
    keyword.value = tmpRoute.query.keyword;
  } else {
    keyword.value = "";
  }
  if (tmpRoute.fullPath.indexOf("/goods/detail") > -1) {
     get("v3/goods/front/goods/details", { productId: calcProductId(tmpRoute.path) })
        .then((res) => {
          if (res.state == 200) {
            vid.value = res.data.storeInf.storeId;
            getStoreInfoBaseInfo();
            getStoreCatData();
          }
        });
  }
  // -1代表没值  0有值
  if (
      (tmpRoute.fullPath.indexOf("/store") > -1 &&  tmpRoute.fullPath.indexOf("/store/goods") == -1)
      || tmpRoute.fullPath.indexOf("/store/about") > -1
      || tmpRoute.fullPath.indexOf("/store/contact") > -1
  ) {
    vid.value = calcUrlShopId(tmpRoute.path) || calcProductId(tmpRoute.path);
    getStoreInfoBaseInfo();
    getStoreCatData();
  }
  //老版的通过query传递vid的方法
  // if (tmpRoute.query != undefined && tmpRoute.query.vid != undefined && tmpRoute.query.vid) {
  //     vid.value = tmpRoute.query.vid;
  //     getStoreInfoBaseInfo();
  //     getStoreCatData();
  // }

});

const unifySearch = () => {
  if (searchType.value === 'store') {
    searchStore('keyword')
  } else {
    search()
  }
}

//搜索事件(搜全站)
const search = () => {
  if (keyword.value) {
    router.push({ path: `/goods/list/search_keyword-`+keyword.value});
  }
  keyword.value = "";
};
//搜索事件(搜本站)
const searchStore = (type, arg) => {

  //return
  if (type == "keywordStore") {
    router.push({
      path:  "/store/goods/"+ calcProductName(storeData.info.storeName)+"_v-"+ vid.value +"_k-" + keywordStore.value
    });
    // keywordStore.value = "";
  } else if (type == "keyword") {
    router.push({
      path: "/store/goods/"+ calcProductName(storeData.info.storeName)+"_v-"+ vid.value +"_k-" + keyword.value
    });
    // keyword.value = "";
  }
};



const followStore = () => {
  //关注店铺及取消关注
  if (filtersStore.getLoginFlag) {
    //已登录
    let params = {
      storeIds: storeData.info.storeId,
      isCollect: !eval(storeData.info.isFollow),
    };
    post("v3/member/front/followStore/edit", params).then((res) => {
      if (res.state == 200) {
        storeData.info.isFollow = !eval(storeData.info.isFollow) ? "true" : "false";
        emit("updateFllow", { state: storeData.info.isFollow });
        if (storeData.info.isFollow) {
          sldStatEvent({ behaviorType: "fol", storeId: storeData.info.storeId });
        }
      }
    });
  }
};

const searchAssociation = (input) => {
  get("v3/goods/front/goods/searchWords/list", {
    keyWord: input,
  }).then((res) => {
    if (res.state == 200) {
      SAList.value = res.data;
    }
  });
};

const inputChange = (e) => {
  let input = e.target.value;
  SAShow.value = true;
  if (input) {
    searchAssociation(input);
  } else {
    SAList.value = [];
  }
};

const inputBlur = () => {
  SAShow.value = false;
};
</script>


<style lang="scss">
.select-search-type {
  .el-select-dropdown__item {
    &.is-selected { 
          color: #036EB8;
    }
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/style/store/storeHeader.scss";

:deep(.el-select) {
  border-right: 1px solid $colorMain;
}

:deep(.el-select__wrapper) {
  position: relative;
  top: 2px;
  box-shadow: none;

  &:hover {
      box-shadow: none;
  }
}

.kefu {
  img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }
}

.sld_store_follow {
  margin-left: 15px;
  padding: 7px 9px;
  border-radius: 15px;
  color: #fff;
  background-color: $colorMain;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

input::placeholder {
  font-size: 12px;
  /*font-family: Microsoft YaHei;*/
  font-weight: 400;
  color: rgb(153, 153, 153);
}

::-webkit-input-placeholder {
  margin-left: 20px;
  font-size: 12px;
  /*font-family: Microsoft YaHei;*/
  font-weight: 400;
  color: rgb(153, 153, 153);
}

/* 使用webkit内核的浏览器 */
:-moz-placeholder {
  font-size: 12px;
  /*font-family: Microsoft YaHei;*/
  font-weight: 400;
  color: rgb(153, 153, 153);
}

/* Firefox版本19+ */
:-ms-input-placeholder {
  font-size: 12px;
  /*font-family: Microsoft YaHei;*/
  font-weight: 400;
  color: rgb(153, 153, 153);
}

/* IE浏览器 */
</style>