|
|
@@ -0,0 +1,1237 @@
|
|
|
+<template>
|
|
|
+ <div class="search-wrapper">
|
|
|
+ <!-- 头部搜索 -->
|
|
|
+ <div class="main-search-header">
|
|
|
+ <input type="text" id="search-box" v-model="keyword" @keyup.13="onClickSearchHander()" :placeholder="placeholder" @input="changeKeyWord()">
|
|
|
+ <span @click="onClickSearchHander()">搜索</span>
|
|
|
+ <a @click="cancelSearchHander()">取消</a>
|
|
|
+ <div class="main-search-header-controll clearfix">
|
|
|
+ <span :class="ChooseTop === 'component' ? 'active' : ''" @click="setChangelistHander('component')"><a>型号</a></span>
|
|
|
+ <span :class="ChooseTop === 'kind' ? 'active' : ''" @click="setChangelistHander('kind')"><a>物料名称</a></span>
|
|
|
+ <span :class="ChooseTop === 'store' ? 'active' : ''" @click="setChangelistHander('store')"><a>卖家</a></span>
|
|
|
+ <span :class="ChooseTop === 'brand' ? 'active' : ''" @click="setChangelistHander('brand')"><a>品牌</a></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul class="associate-list" v-show="associate.show" @click="associate.show = false">
|
|
|
+ <li @click.stop="onAssociateClick(similar)" v-for="similar in similarKeywords.result">
|
|
|
+ <i class="icon-sousuo iconfont"></i>
|
|
|
+ <span>{{Getsimilar(similar)}}</span>
|
|
|
+ <!--<span v-if="ChooseTop === 'component'">{{similar.code}}</span>-->
|
|
|
+ <!--<span v-else-if="ChooseTop === 'product'">{{similar}}</span>-->
|
|
|
+ <!--<span v-else-if="ChooseTop === 'store'">{{similar}}</span>-->
|
|
|
+ <!--<span v-else-if="ChooseTop === 'brand'">{{similar.nameEn}}</span>-->
|
|
|
+ </li>
|
|
|
+ <li @click.stop="onClickTosearch(keyword)">查找“{{baseUtils.filterStringEllipsis(keyword, 30)}}”</li>
|
|
|
+ </ul>
|
|
|
+ <!-- 主体内容 -->
|
|
|
+ <div class="main-search-wrapper">
|
|
|
+ <div class="search-title">搜索“<span>{{displayKeyword}}</span>”暂无此{{getNowChooseType}}{{allTotal === 0 ? '' : `，为您找到${allTotal}条相关信息`}}</div>
|
|
|
+ <template v-if="allTotal > 0">
|
|
|
+ <!-- 品牌精确查找 -->
|
|
|
+ <template v-if="ChooseTop === 'brand' && brandIsAccurate">
|
|
|
+ <div class="search-content" style="margin-bottom: 0.2rem;height: auto">
|
|
|
+ <div class="middle">
|
|
|
+ <div class="list clearfix" style="border-bottom: 1px solid #dcdcdc;padding-bottom: 0.1rem;line-height: 0.8rem;">
|
|
|
+ <img :src="'' || '/images/component/default.png'" class="pull-left">
|
|
|
+ <div class="name pull-left overHidden" style="max-width: 5rem;">{{resourceList.brand && resourceList.brand.nameEn}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">主打产品：</div>
|
|
|
+ <div class="text">
|
|
|
+ {{resourceList.brand && resourceList.brand.series}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">应用领域：</div>
|
|
|
+ <div class="text">
|
|
|
+ {{resourceList.brand && resourceList.brand.application}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">品牌介绍：</div>
|
|
|
+ <div class="text">
|
|
|
+ {{resourceList.brand && resourceList.brand.brief}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">官网地址：</div>
|
|
|
+ <div class="text" style="width: 4.5rem">
|
|
|
+ <a :href="resourceList.brand && resourceList.brand.url" target="_blank">{{resourceList.brand && resourceList.brand.url}}</a>
|
|
|
+ </div>
|
|
|
+ <div class="pull-right lookMoreBtn" @click="showBrandDetails = true">
|
|
|
+ 查看更多
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="search-nav clearfix" v-if="brandIsAccurate || (!brandIsAccurate && ChooseTop !== 'brand')">
|
|
|
+ <span class="pull-left" :class="navType === 'hasStore' ? 'active' : ''" @click="getReloadList('hasStore')">
|
|
|
+ {{ChooseTop === 'component' ? '现货': '现货卖家'}}({{stockallTotal}})条
|
|
|
+ </span>
|
|
|
+ <span class="pull-left" :class="navType === 'noHasStore' ? 'active' : ''" @click="getReloadList('noHasStore')">
|
|
|
+ {{ChooseTop === 'component' ? '期货': '期货卖家'}}({{futuresallTotal}})条</span>
|
|
|
+ </div>
|
|
|
+ <div class="search-content" id="main-search-wrapper" :class="{'searchContent2' : ChooseTop === 'brand' && brandIsAccurate, 'searchContent3': ChooseTop === 'brand' && !brandIsAccurate}">
|
|
|
+ <!-- 品牌模糊查询 -->
|
|
|
+ <template v-if="!brandIsAccurate && ChooseTop === 'brand'">
|
|
|
+ <div class="middle" v-for="item in resourceList.content">
|
|
|
+ <div class="list clearfix" style="border-bottom: 1px solid #dcdcdc;padding-bottom: 0.1rem;line-height: 0.8rem;" @click="goToBrandAccurate(item)">
|
|
|
+ <img :src="item.logoUrl || '/images/component/default.png'" class="pull-left">
|
|
|
+ <div class="name pull-left overHidden" style="max-width: 5rem;">{{item.nameEn}}</div>
|
|
|
+ <div class="more_icon pull-right"><i class="iconfont icon-swiper-right"></i></div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">主打产品：</div>
|
|
|
+ <div class="text">
|
|
|
+ {{item.series}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">应用领域：</div>
|
|
|
+ <div class="text">
|
|
|
+ {{item.application}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">品牌介绍：</div>
|
|
|
+ <div class="text">
|
|
|
+ {{item.brief}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">官网地址：</div>
|
|
|
+ <div class="text">
|
|
|
+ <a :href="item.url" target="_blank">{{item.url}}</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- /end 品牌模糊查询 -->
|
|
|
+ <template v-if="brandIsAccurate || (!brandIsAccurate && ChooseTop !== 'brand')">
|
|
|
+ <!-- 现货 -->
|
|
|
+ <template v-if="navType === 'hasStore'">
|
|
|
+ <!-- 型号结果 -->
|
|
|
+ <template v-if="ChooseTop === 'component'">
|
|
|
+ <div v-if="resourceList&&resourceList.stock&&resourceList.stock.content.length > 0">
|
|
|
+ <div v-for="(item, index) in resourceList.stock.content">
|
|
|
+ <!--@click="goProductDetail(item)"-->
|
|
|
+ <div class="middle">
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">品牌：</div>
|
|
|
+ <div class="text overHidden">{{item.brand && item.brand.nameEn || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">物料名称(类目)：</div>
|
|
|
+ <div class="text overHidden">{{item.kindNameCn || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">型号：</div>
|
|
|
+ <div class="text overHidden">{{item.code || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">规格：</div>
|
|
|
+ <div class="text overHidden">{{item.spec || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="fl">
|
|
|
+ <div class="name">包装：</div>
|
|
|
+ <div class="text overHidden" style="width: 2.3rem">{{item.packaging || '无包装信息'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="fl">
|
|
|
+ <div class="name">交期(天)：</div>
|
|
|
+ <div class="text overHidden" style="width: 1.8rem" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery != item.b2cMinDelivery)" v-text="item.b2cMinDelivery + '-'+ item.b2cMaxDelivery"></div>
|
|
|
+ <div class="text overHidden" style="width: 1.8rem" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery == item.b2cMinDelivery)" v-text="item.b2cMinDelivery"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="fl">
|
|
|
+ <div class="name">生产日期：</div>
|
|
|
+ <div class="text overHidden" style="width: 1.75rem" :title="item.produceDate">{{item.produceDate || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="fl">
|
|
|
+ <div class="name">库存：</div>
|
|
|
+ <div class="text overHidden" style="width: 2.3rem">{{item.reserve || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="fl" @click.stop="goAttach(item.attach)">
|
|
|
+ <div class="name">规格书：</div>
|
|
|
+ <div class="text">
|
|
|
+ <i class="iconfont icon-pdf" :class="{'active': item.attach && item.attach !== '' && item.attach !== '1'}"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="fl">
|
|
|
+ <div class="name">起拍：</div>
|
|
|
+ <div class="text overHidden" style="width: 2.3rem">{{item.minBuyQty || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">卖家名称：</div>
|
|
|
+ <div class="text overHidden">{{item.storeName}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name left">价格梯度<p>(pcs):</p></div>
|
|
|
+ <div class="table left">
|
|
|
+ <ul>
|
|
|
+ <li class="title">
|
|
|
+ <div>分段数量/PCS</div>
|
|
|
+ <div>分段单价</div>
|
|
|
+ </li>
|
|
|
+ <li v-for="price in item.prices">
|
|
|
+ <div>{{price.start}}+</div>
|
|
|
+ <div v-if="item.currencyName == 'RMB'">¥{{price.rMBPrice}}</div>
|
|
|
+ <div v-else>${{price.uSDPrice}}</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list clearfix">
|
|
|
+ <div class="pull-left cancat" @click.stop="cancatSeller(item)">
|
|
|
+ <i class="iconfont icon-kefu1"></i>联系卖家
|
|
|
+ </div>
|
|
|
+ <div class="pull-right clearfix">
|
|
|
+ <div class="pull-left" @click="buy(item, false, $event)">加入购物车</div>
|
|
|
+ <div class="pull-left" @click="buy(item, true, $event)">立即购买</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 卖家 物料名称 品牌-->
|
|
|
+ <template v-else-if="ChooseTop === 'kind' || ChooseTop === 'store' || ChooseTop === 'brand'">
|
|
|
+ <div v-if="resourceList&&resourceList.stock&&resourceList.stock.content.length > 0">
|
|
|
+ <div class="middle" v-for="(item, index) in resourceList.stock.content">
|
|
|
+ <nuxt-link :to="`/mobile/shop/${item.storeUuid}`" tag="div" class="list clearfix" style="border-bottom: 1px solid #dcdcdc;padding-bottom: 0.1rem">
|
|
|
+ <div class="name pull-left">{{item.enName}}</div>
|
|
|
+ <div class="more_icon pull-right"><i class="iconfont icon-swiper-right"></i></div>
|
|
|
+ </nuxt-link>
|
|
|
+ <div class="middle_bottom clearfix">
|
|
|
+ <div class="middle_bottom-left">
|
|
|
+ <img :src="item.storeLogoUrl || '/images/component/default.png'">
|
|
|
+ </div>
|
|
|
+ <div class="middle_bottom-left">
|
|
|
+ <div class="middle_bottom-leftitem clearfix">
|
|
|
+ <div class="bottom-title">电话</div><label style="float: left">：</label>
|
|
|
+ <div class="overHidden" style="width: 3.9rem">
|
|
|
+ <a :href="'tel:' + AlertstoreInfo.enterprise.enTel" target="_blank" class="content-line" style="color: #2d8cf0">{{item.enTel}}</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="middle_bottom-leftitem clearfix">
|
|
|
+ <div class="bottom-title">邮箱</div><label style="float: left">：</label><div class="overHidden" style="width: 3.9rem">{{item.enEmail}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="middle_bottom-leftitem clearfix">
|
|
|
+ <div class="bottom-title">执照号</div><label style="float: left">：</label><div class="overHidden" style="width: 3.9rem">{{item.enBusinesscode}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="middle_bottom-leftitem clearfix">
|
|
|
+ <div class="bottom-title">地址</div><label style="float: left">：</label><div style="width: 3.9rem;">{{item.enAddress}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <!-- 期货 -->
|
|
|
+ <template v-else>
|
|
|
+ <!-- 型号结果 -->
|
|
|
+ <template v-if="ChooseTop === 'component'">
|
|
|
+ <div v-if="resourceList && resourceList.futures && resourceList.futures.content.length > 0">
|
|
|
+ <div class="middle" v-for="(item, index) in resourceList.futures.content">
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">品牌：</div>
|
|
|
+ <div class="text overHidden">{{item.brandNameEn || '—'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">物料名称(类目)：</div>
|
|
|
+ <div class="text overHidden">{{item.kindNameCn || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">型号：</div>
|
|
|
+ <div class="text overHidden">{{item.code || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">规格：</div>
|
|
|
+ <div class="text overHidden">{{item.spec || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">单位：</div>
|
|
|
+ <div class="text overHidden">{{item.unit || 'PCS'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list clearfix" style="overflow: inherit;">
|
|
|
+ <div class="fl">
|
|
|
+ <div class="name">卖家：</div>
|
|
|
+ <div class="text overHidden" style="width: 4rem">{{item.storeName || '卖家名称'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="pull-right sayPriBtn" @click="publish(item)">立即询价</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 卖家 物料名称 品牌-->
|
|
|
+ <template v-else-if="ChooseTop === 'kind' || ChooseTop === 'store' || ChooseTop === 'brand'">
|
|
|
+ <div v-if="resourceList&&resourceList.futures &&resourceList.futures.content.length > 0">
|
|
|
+ <div class="middle" v-for="(item, index) in resourceList.futures.content" @click="goSupplierDetail(item)">
|
|
|
+ <div class="list clearfix" style="border-bottom: 1px solid #dcdcdc;padding-bottom: 0.1rem">
|
|
|
+ <div class="name pull-left">{{item.enName}}</div>
|
|
|
+ <div class="more_icon pull-right"><i class="iconfont icon-swiper-right"></i></div>
|
|
|
+ </div>
|
|
|
+ <div class="middle_bottom clearfix">
|
|
|
+ <div class="middle_bottom-left">
|
|
|
+ <img :src="item.storeLogoUrl || '/images/component/default.png'">
|
|
|
+ </div>
|
|
|
+ <div class="middle_bottom-left">
|
|
|
+ <div class="middle_bottom-leftitem clearfix">
|
|
|
+ <div class="bottom-title">电话</div><label style="float: left">：</label>
|
|
|
+ <div class="overHidden" style="width: 3.9rem">
|
|
|
+ <a :href="'tel:' + AlertstoreInfo.enterprise.enTel" target="_blank" class="content-line" style="color: #2d8cf0">{{item.enTel}}</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="middle_bottom-leftitem clearfix">
|
|
|
+ <div class="bottom-title">邮箱</div><label style="float: left">：</label><div class="overHidden" style="width: 3.9rem">{{item.enEmail}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="middle_bottom-leftitem clearfix">
|
|
|
+ <div class="bottom-title">执照号</div><label style="float: left">：</label><div class="overHidden" style="width: 3.9rem">{{item.enBusinesscode}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="middle_bottom-leftitem clearfix">
|
|
|
+ <div class="bottom-title">地址</div><label style="float: left">：</label><div style="width: 3.9rem;">{{item.enAddress}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="allTotal === 0">
|
|
|
+ <div class="none-state">
|
|
|
+ <img src="/images/mobile/@2x/search-empty.png">
|
|
|
+ <p>暂无数据</p>
|
|
|
+ <nuxt-link to="/">返回首页</nuxt-link>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <!-- 联系卖买家 -->
|
|
|
+ <div class="mobile-modal" v-if="showStoreInfo" @touchmove="preventTouchMove($event)">
|
|
|
+ <div class="mobile-modal-box mobile-link-en">
|
|
|
+ <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
|
|
|
+ <div class="mobile-modal-content">
|
|
|
+ <div v-if="AlertstoreInfo.enterprise.enTel"><span >电话：</span><a :href="'tel:' + AlertstoreInfo.enterprise.enTel" target="_blank" class="content-line link-url">{{AlertstoreInfo.enterprise.enTel}}</a></div>
|
|
|
+ <div v-if="AlertstoreInfo.enterprise.enPhone"><span >手机：</span><a :href="'tel:' + AlertstoreInfo.enterprise.enPhone" target="_blank" class="content-line link-url">{{AlertstoreInfo.enterprise.enPhone}}</a></div>
|
|
|
+ <div v-if="AlertstoreInfo.enterprise.enWeixin"><span >微信：</span><span class="content-line">{{AlertstoreInfo.enterprise.enWeixin}}</span></div>
|
|
|
+ <div v-if="AlertstoreInfo.enterprise.enQQ"><span >Q Q：</span><span class="content-line">{{AlertstoreInfo.enterprise.enQQ}}</span></div>
|
|
|
+ <div v-if="!empty">暂无联系方式</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 询价 -->
|
|
|
+ <publish-supplier-seek :product="currentProduct" :showPublishBox="showPublishBox" @cancelAction="showPublishBox = false" @remindAction="setRemindText"></publish-supplier-seek>
|
|
|
+ <!-- 查看品牌更多信息 -->
|
|
|
+ <modal-wrapper :showModal="showBrandDetails" :title="currentBrandItem.nameEn" @closeAction="showBrandDetails=false">
|
|
|
+ <div class="store-info" >
|
|
|
+ <div class="store-description">
|
|
|
+ <h4>主营产品</h4>
|
|
|
+ <p class="content" v-if="currentBrandItem.series">
|
|
|
+ {{currentBrandItem.series}}
|
|
|
+ </p>
|
|
|
+ <div class="com-none-state" v-else>
|
|
|
+ <p>抱歉，暂无主营产品信息</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="store-description">
|
|
|
+ <h4>应用领域</h4>
|
|
|
+ <p class="content" v-if="currentBrandItem.application">
|
|
|
+ {{currentBrandItem.application}}
|
|
|
+ </p>
|
|
|
+ <div class="com-none-state" v-else>
|
|
|
+ <p>抱歉，暂无应用领域信息</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="store-description">
|
|
|
+ <h4>品牌介绍</h4>
|
|
|
+ <p class="content" v-if="currentBrandItem.brief">
|
|
|
+ {{currentBrandItem.brief}}
|
|
|
+ </p>
|
|
|
+ <div class="com-none-state" v-else>
|
|
|
+ <p>抱歉，暂无企业介绍</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="contact-info">
|
|
|
+ <h4>联系我们</h4>
|
|
|
+ <ul class="list-unstyled clearfix">
|
|
|
+ <li>
|
|
|
+ <div>电 话：</div>
|
|
|
+ <div v-if="currentBrandItem.userDefine.userTel"><a :href="'tel:' + currentBrandItem.userDefine.userTel" >{{currentBrandItem.userDefine.userTel}}</a></div>
|
|
|
+ <div v-else><span>-</span></div>
|
|
|
+ </li>
|
|
|
+ <!-- <li>
|
|
|
+ <div>店铺地址：</div>
|
|
|
+ <div v-if="store.enterprise.address">{{store.enterprise.address}}</div>
|
|
|
+ <div v-else><span>-</span></div>
|
|
|
+ </li>-->
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </modal-wrapper>
|
|
|
+ <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
|
|
|
+ <!--<loading v-if="isSearchSearchingMore"></loading>-->
|
|
|
+ <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox" :url="url"></login-box>
|
|
|
+ <pull-up :fixId="'main-search-wrapper'" :searchMore="isSearchSearchingMore" :allPage="allPage" :page="page" @pullUpAction="onPullUp" :FixedEl="true"></pull-up>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { PublishSupplierSeek } from '~components/mobile/applyPurchase'
|
|
|
+ import { RemindBox, Loading, LoginBox, PullUp } from '~components/mobile/common'
|
|
|
+ import { ModalWrapper } from '~components/mobile/base'
|
|
|
+ import axios from '~plugins/axios'
|
|
|
+ export default {
|
|
|
+ layout: 'mobile',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ collectResult: '', // 提示性文字
|
|
|
+ timeoutCount: 0, // 弹出框计时数
|
|
|
+ isSearchSearchingMore: false, // 是否正在请求数据
|
|
|
+ showLoginBox: false, // 是否显示登录弹窗
|
|
|
+ url: '', // 登录后跳转回来的地址
|
|
|
+ keyword: '', // 关键字搜索
|
|
|
+ showStoreInfo: false, // 联系买卖家弹窗
|
|
|
+ AlertstoreInfo: { // 买卖家弹窗信息
|
|
|
+ enterprise: {}
|
|
|
+ },
|
|
|
+ navType: 'hasStore', // 现货 期货
|
|
|
+ ChooseTop: 'component', // 型号， 物料名称， 卖家， 品牌
|
|
|
+ page: 1,
|
|
|
+ currentProduct: {},
|
|
|
+ currentBrandItem: { // 查看品牌详情信息
|
|
|
+ userDefine: {}
|
|
|
+ }, // 存放当前点击的品牌内容
|
|
|
+ showBrandDetails: false, // 是否展示品牌详情
|
|
|
+ brandIsAccurate: false, // 品牌是否处于精确查找
|
|
|
+ showPublishBox: false, // 询价弹窗
|
|
|
+ resourceList: [],
|
|
|
+ futuresallTotal: 0,
|
|
|
+ stockallTotal: 0,
|
|
|
+ allPage: 0, // 总页数
|
|
|
+ allTotal: 0, // 总条数
|
|
|
+ associate: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ displayKeyword: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getNowChooseType() {
|
|
|
+ if (this.ChooseTop === 'component') {
|
|
|
+ return '型号'
|
|
|
+ } else if (this.ChooseTop === 'kind') {
|
|
|
+ return '物料'
|
|
|
+ } else if (this.ChooseTop === 'store') {
|
|
|
+ return '卖家'
|
|
|
+ } else if (this.ChooseTop === 'brand') {
|
|
|
+ return '品牌'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ empty () {
|
|
|
+ return this.checkInfo(this.AlertstoreInfo.enterprise.enTel) || this.checkInfo(this.AlertstoreInfo.enterprise.enPhone) || this.checkInfo(this.AlertstoreInfo.enterprise.enWeixin) || this.checkInfo(this.AlertstoreInfo.enterprise.enQQ)
|
|
|
+ },
|
|
|
+ placeholder() {
|
|
|
+ if (this.ChooseTop === 'component') {
|
|
|
+ return '请输入您要搜索的型号'
|
|
|
+ } else if (this.ChooseTop === 'kind') {
|
|
|
+ return '请输入您要搜索的物料名称'
|
|
|
+ } else if (this.ChooseTop === 'store') {
|
|
|
+ return '请输入您要搜索的卖家名称'
|
|
|
+ } else if (this.ChooseTop === 'brand') {
|
|
|
+ return '请输入您要搜索的品牌'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ similarKeywords () {
|
|
|
+ return this.$store.state.search.keywords.data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async asyncData({store, route}) {
|
|
|
+ let ChooseTop = route.query.choosetype || 'component'
|
|
|
+ let keyword = route.query.keyword || ''
|
|
|
+ let brandIsAccurate = false
|
|
|
+ let { data } = await axios.get(`/search/201819`, {params: {count: 10, page: 1, keyword: keyword, type: ChooseTop}})
|
|
|
+ let allTotal = 0
|
|
|
+ let futuresallTotal = data.futures ? data.futures.total : 0
|
|
|
+ let stockallTotal = data.stock ? data.stock.total : 0
|
|
|
+ let allPage = 0
|
|
|
+ let currentBrandItem = {
|
|
|
+ userDefine: {}
|
|
|
+ }
|
|
|
+ if (ChooseTop === 'brand') {
|
|
|
+ if (data.futures && data.stock) {
|
|
|
+ // 品牌查询 精准查找
|
|
|
+ brandIsAccurate = true
|
|
|
+ currentBrandItem = data.brand
|
|
|
+ // 则总条数等于 现货 + 期货
|
|
|
+ allTotal = stockallTotal + futuresallTotal
|
|
|
+ allPage = Math.ceil(data.stock.total / 10)
|
|
|
+ } else {
|
|
|
+ allTotal = data.total || 0
|
|
|
+ allPage = Math.ceil(data.total / 10)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 其他情况
|
|
|
+ allTotal = stockallTotal + futuresallTotal
|
|
|
+ allPage = Math.ceil(data.stock.total / 10)
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ ChooseTop: ChooseTop,
|
|
|
+ keyword: keyword,
|
|
|
+ resourceList: data,
|
|
|
+ allPage: allPage,
|
|
|
+ stockallTotal: stockallTotal,
|
|
|
+ futuresallTotal: futuresallTotal,
|
|
|
+ allTotal: allTotal,
|
|
|
+ brandIsAccurate: brandIsAccurate,
|
|
|
+ currentBrandItem: currentBrandItem,
|
|
|
+ displayKeyword: keyword
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onPullUp() {
|
|
|
+ this.page++
|
|
|
+ this.ReloadList()
|
|
|
+ },
|
|
|
+ // 搜索点击事件
|
|
|
+ onClickSearchHander() {
|
|
|
+ if (!this.keyword) return
|
|
|
+ this.$router.push(`/mobile/search/newkeycode?choosetype=${this.ChooseTop}&keyword=${this.keyword}`)
|
|
|
+ // this.setChangelistHander(this.ChooseTop)
|
|
|
+ // window.location.href =
|
|
|
+ },
|
|
|
+ // 现货 期货切换
|
|
|
+ getReloadList(_tp) {
|
|
|
+ this.navType = _tp
|
|
|
+ this.page = 1
|
|
|
+ this.resourceList.futures.content = []
|
|
|
+ this.resourceList.stock.content = []
|
|
|
+ this.ReloadList()
|
|
|
+ },
|
|
|
+ // 刷新数据
|
|
|
+ ReloadList(param) {
|
|
|
+ // 如果有值，则代表 是品牌 模糊到精确
|
|
|
+ // 这里发送数据请求
|
|
|
+ this.isSearchSearchingMore = true
|
|
|
+ this.$http.get(`/search/201819`, {params: {count: 10, page: this.page, keyword: this.keyword, type: this.ChooseTop}}).then(res => {
|
|
|
+ this.isSearchSearchingMore = false
|
|
|
+ if (!this.brandIsAccurate && this.ChooseTop === 'brand') {
|
|
|
+ this.resourceList.content = [...this.resourceList.content, ...res.data.content]
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.navType === 'hasStore') {
|
|
|
+ this.resourceList.stock.content = [...this.resourceList.stock.content, ...res.data.stock.content]
|
|
|
+ } else {
|
|
|
+ this.resourceList.futures.content = [...this.resourceList.futures.content, ...res.data.futures.content]
|
|
|
+ }
|
|
|
+ }, err => {
|
|
|
+ this.isSearchSearchingMore = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 模糊品牌查询结果点击
|
|
|
+ goToBrandAccurate(item) {
|
|
|
+ this.currentBrandItem = item
|
|
|
+ this.keyword = item.nameEn
|
|
|
+ this.setChangelistHander(this.ChooseTop)
|
|
|
+ },
|
|
|
+ // 取消返回事件
|
|
|
+ cancelSearchHander() {
|
|
|
+ this.$router.replace('/')
|
|
|
+ },
|
|
|
+ // 购买 加入购物车
|
|
|
+ buy: function (item, flag, e) {
|
|
|
+ this.baseUtils.buyOrCar(flag, e, this, item, '/mobile/center/user/pay/')
|
|
|
+ },
|
|
|
+ // 联系买卖家
|
|
|
+ cancatSeller(item) {
|
|
|
+ this.$http.get(`/api/store-service/stores?uuid=${item.storeid}`).then(res => {
|
|
|
+ this.AlertstoreInfo = res.data
|
|
|
+ this.showStoreInfo = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 切换顶部一级标题
|
|
|
+ setChangelistHander(str) {
|
|
|
+ if (document.querySelector('#main-search-wrapper')) document.querySelector('#main-search-wrapper').scrollTop = 0
|
|
|
+ this.ChooseTop = str
|
|
|
+ this.page = 1
|
|
|
+ if (!this.keyword) return
|
|
|
+ this.displayKeyword = this.keyword
|
|
|
+ this.brandIsAccurate = false
|
|
|
+ this.isSearchSearchingMore = true
|
|
|
+ this.$http.get(`/search/201819`, {params: {count: 10, page: 1, keyword: this.keyword, type: this.ChooseTop}}).then(data => {
|
|
|
+ data = data.data
|
|
|
+ this.resourceList = data
|
|
|
+ this.futuresallTotal = data.futures ? data.futures.total : 0
|
|
|
+ this.stockallTotal = data.stock ? data.stock.total : 0
|
|
|
+ let allTotal = 0 // 总条数
|
|
|
+ if (this.ChooseTop === 'brand') {
|
|
|
+ if (data.futures && data.stock) {
|
|
|
+ // 品牌查询 精准查找
|
|
|
+ this.brandIsAccurate = true
|
|
|
+ // 则总条数等于 现货 + 期货
|
|
|
+ allTotal = this.stockallTotal + this.futuresallTotal
|
|
|
+ this.currentBrandItem = data.brand
|
|
|
+ } else {
|
|
|
+ allTotal = data.total || 0
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 其他情况
|
|
|
+ allTotal = this.stockallTotal + this.futuresallTotal
|
|
|
+ }
|
|
|
+ this.allTotal = allTotal
|
|
|
+ this.isSearchSearchingMore = false
|
|
|
+ if (!this.brandIsAccurate && this.ChooseTop === 'brand') {
|
|
|
+ // 品牌 模糊查找
|
|
|
+ this.allPage = Math.ceil(this.resourceList.total / 10) || 0
|
|
|
+ } else {
|
|
|
+ if (this.navType === 'hasStore') {
|
|
|
+ this.allPage = this.resourceList.stock && Math.ceil(this.resourceList.stock.total / 10) || 0
|
|
|
+ } else {
|
|
|
+ this.allPage = this.resourceList.futures && Math.ceil(this.resourceList.futures.total / 10) || 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.associate.show = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 供应商详情
|
|
|
+ goSupplierDetail: function (item) {
|
|
|
+ this.$http.get('/vendor/introduction/product/count', {params: {vendUU: item.enUU}})
|
|
|
+ .then(response => {
|
|
|
+ if (response.data.success && response.data.count > 0) {
|
|
|
+ this.$router.push(`/mobile/supplier/detail/${item.enUU}?isStore=${item.isStore}`)
|
|
|
+ } else {
|
|
|
+ this.setRemindText('供应商正在完善产品信息，暂时不能查看更多。')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkInfo: function (str) {
|
|
|
+ return str && str.trim() !== ''
|
|
|
+ },
|
|
|
+ publish: function (product) {
|
|
|
+ if (this.user.logged) {
|
|
|
+ let item = {
|
|
|
+ cmpCode: product.code,
|
|
|
+ pbranden: product.brandNameEn,
|
|
|
+ brand: product.brandNameEn,
|
|
|
+ spec: product.spec,
|
|
|
+ kind: product.kindNameCn
|
|
|
+ }
|
|
|
+ this.currentProduct = item
|
|
|
+ this.showPublishBox = true
|
|
|
+ } else {
|
|
|
+ this.url = this.$route.fullPath
|
|
|
+ this.showLoginBox = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setRemindText(str) {
|
|
|
+ this.timeoutCount++
|
|
|
+ this.collectResult = str
|
|
|
+ },
|
|
|
+ onAssociateClick (word) {
|
|
|
+ if (this.ChooseTop === 'component') {
|
|
|
+ this.keyword = word.code
|
|
|
+ } else if (this.ChooseTop === 'kind') {
|
|
|
+ this.keyword = word.nameCn
|
|
|
+ } else if (this.ChooseTop === 'store') {
|
|
|
+ this.keyword = word.name
|
|
|
+ } else if (this.ChooseTop === 'brand') {
|
|
|
+ this.keyword = word.nameEn
|
|
|
+ }
|
|
|
+ this.associate.show = false
|
|
|
+ this.setChangelistHander(this.ChooseTop)
|
|
|
+ },
|
|
|
+ Getsimilar(word) {
|
|
|
+ if (this.ChooseTop === 'component') {
|
|
|
+ return word.code
|
|
|
+ } else if (this.ChooseTop === 'kind') {
|
|
|
+ return word.nameCn
|
|
|
+ } else if (this.ChooseTop === 'store') {
|
|
|
+ return word.name
|
|
|
+ } else if (this.ChooseTop === 'brand') {
|
|
|
+ return word.nameEn
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onChange () {
|
|
|
+ if (!this.keyword) {
|
|
|
+ this.associate.show = false
|
|
|
+ this.$store.dispatch('resetSearchKeywords')
|
|
|
+ } else {
|
|
|
+ this.searchKeywords()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeKeyWord() {
|
|
|
+ this.associate.show = true
|
|
|
+ this.onChange()
|
|
|
+ },
|
|
|
+ searchKeywords () {
|
|
|
+ this.$store.dispatch('searchKeywords', {keyword: this.keyword, type: this.ChooseTop})
|
|
|
+ },
|
|
|
+ onClickTosearch(str) {
|
|
|
+ this.keyword = str
|
|
|
+ this.setChangelistHander(this.ChooseTop)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ RemindBox,
|
|
|
+ Loading,
|
|
|
+ LoginBox,
|
|
|
+ PublishSupplierSeek,
|
|
|
+ ModalWrapper,
|
|
|
+ PullUp
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ '$route' (to, from) {
|
|
|
+ this.keyword = to.query.keyword
|
|
|
+ this.displayKeyword = to.query.keyword
|
|
|
+ this.setChangelistHander(to.query.choosetype)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ @mixin overFlowHidden {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ @mixin lineHeight($value) {
|
|
|
+ height: $value;
|
|
|
+ line-height: $value;
|
|
|
+ }
|
|
|
+ .search-wrapper {
|
|
|
+ background: #f1f3f6;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 1000;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ .main-search-header {
|
|
|
+ position: absolute;
|
|
|
+ background: #3e82f5;
|
|
|
+ line-height: .88rem;
|
|
|
+ margin-top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+ input {
|
|
|
+ width: 4.88rem;
|
|
|
+ height: .62rem;
|
|
|
+ line-height: .62rem;
|
|
|
+ font-size: .26rem;
|
|
|
+ color: #999;
|
|
|
+ margin-left: 0.3rem;
|
|
|
+ /*padding-left: 1.26rem;*/
|
|
|
+ border: .04rem solid #fff;
|
|
|
+ background: #fff;
|
|
|
+ outline: none;
|
|
|
+ border-radius: 0;
|
|
|
+ float: left;
|
|
|
+ margin-top: .12rem;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ border-top-left-radius: .14rem;
|
|
|
+ border-bottom-left-radius: .14rem;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 1.02rem;
|
|
|
+ text-align: center;
|
|
|
+ height: .62rem;
|
|
|
+ line-height: .62rem;
|
|
|
+ color: #366df3;
|
|
|
+ font-size: .28rem;
|
|
|
+ margin-left: .02rem;
|
|
|
+ border-top-right-radius: .14rem;
|
|
|
+ border-bottom-right-radius: .14rem;
|
|
|
+ background: #fff;
|
|
|
+ float: left;
|
|
|
+ margin-top: .12rem;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ font-size: .28rem;
|
|
|
+ color: #fff;
|
|
|
+ margin-left: .2rem;
|
|
|
+ }
|
|
|
+ .main-search-header-controll {
|
|
|
+ background: #3e82f5;
|
|
|
+ width: 6.2rem;
|
|
|
+ span {
|
|
|
+ @include lineHeight(0.66rem);
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #fff;
|
|
|
+ margin: 0;
|
|
|
+ background: rgba(0,0,0,0);
|
|
|
+ border-radius: 0;
|
|
|
+ width: 25%;
|
|
|
+ &.active a {
|
|
|
+ color: #fff;
|
|
|
+ border-bottom: 0.04rem solid #fff;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main-search-wrapper {
|
|
|
+ margin-top: 1.7rem;
|
|
|
+ }
|
|
|
+ .search-title {
|
|
|
+ font-size: 0.26rem;
|
|
|
+ text-align: center;
|
|
|
+ color: #999;
|
|
|
+ margin: 0 auto 0.2rem;
|
|
|
+ span {
|
|
|
+ color: #4290f7
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-nav {
|
|
|
+ background: #fff;
|
|
|
+ @include lineHeight(1rem);
|
|
|
+ padding: 0 0.2rem;
|
|
|
+ span {
|
|
|
+ width: 50%;
|
|
|
+ color: #666;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 0.04rem solid #dcdcdc;
|
|
|
+ @include lineHeight(0.7rem);
|
|
|
+ margin-top: 0.15rem;
|
|
|
+ &.active {
|
|
|
+ border-bottom: 0.04rem solid #4290f7;
|
|
|
+ color: #4290f7
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-content {
|
|
|
+ padding-top: 0;
|
|
|
+ margin-top: 0.2rem;
|
|
|
+ height: calc(100vh - 3.43rem);
|
|
|
+ overflow-y: auto;
|
|
|
+ .middle {
|
|
|
+ background: #fff;
|
|
|
+ padding: 0.2rem;
|
|
|
+ .lookMoreBtn {
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #2d8cf0
|
|
|
+ }
|
|
|
+ .more_icon {
|
|
|
+ font-size: 0.34rem;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .order-tag {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: .18rem;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ background: #ee1717;
|
|
|
+ height: .27rem;
|
|
|
+ width: .27rem;
|
|
|
+ line-height: .27rem;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: .05rem;
|
|
|
+ position: relative;
|
|
|
+ top: -.05rem;
|
|
|
+ margin-right: .05rem;
|
|
|
+ &.reserve-tag {
|
|
|
+ background: #07bb1c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ text-align: left;
|
|
|
+ background: #fff;
|
|
|
+ /*border-radius: 5px;*/
|
|
|
+ margin-bottom: 0.2rem;
|
|
|
+ .overHidden {
|
|
|
+ @include overFlowHidden()
|
|
|
+ }
|
|
|
+ .pms {
|
|
|
+ color: #f57710;
|
|
|
+ border: 1px solid #f57710;
|
|
|
+ border-radius: 0.4rem;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 0.24rem;
|
|
|
+ height: 0.4rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ width: 0.8rem;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ @include overFlowHidden();
|
|
|
+ width: 100%;
|
|
|
+ .left {
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .textinfo {
|
|
|
+ font-size: 0.18rem;
|
|
|
+ margin-left: 0.1rem;
|
|
|
+ display: inline-block;
|
|
|
+ background: #3f84f6;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ border-radius: 3px;
|
|
|
+ width: 0.8rem;
|
|
|
+ height: 0.32rem;
|
|
|
+ line-height: 0.32rem;
|
|
|
+ text-align: center
|
|
|
+ }
|
|
|
+ .button {
|
|
|
+ font-size: 0.3rem;
|
|
|
+ color: #1a58dd;
|
|
|
+ width: 0.92rem;
|
|
|
+ height: 0.43rem;
|
|
|
+ line-height: 0.43rem;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ border:1px solid #1a58dd;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 0.2rem;
|
|
|
+ }
|
|
|
+ margin-bottom: 0.18rem;
|
|
|
+ &::after{
|
|
|
+ clear: both;
|
|
|
+ display: block;
|
|
|
+ content: ' ';
|
|
|
+ visibility: hidden;
|
|
|
+ zoom: 1;
|
|
|
+ }
|
|
|
+ .fl {
|
|
|
+ width: 3.5rem;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .fr {
|
|
|
+ text-align: left;
|
|
|
+ width: 2.6rem;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ &.list-long {
|
|
|
+ .fl {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ color: #666;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ display: inline-block;
|
|
|
+ color: #333;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ vertical-align: top;
|
|
|
+ width: 5.5rem;
|
|
|
+ @include overFlowHidden();
|
|
|
+ }
|
|
|
+ .table {
|
|
|
+ width: 5.85rem;
|
|
|
+ margin-bottom: 0;
|
|
|
+ margin-top: 0;
|
|
|
+ margin-left: 0.1rem;
|
|
|
+ li {
|
|
|
+ height: 0.43rem;
|
|
|
+ line-height: 0.43rem;
|
|
|
+ border-left: .01rem solid #c5c5c5;
|
|
|
+ font-size: .28rem;
|
|
|
+ &::after {
|
|
|
+ clear: both;
|
|
|
+ display: block;
|
|
|
+ content: ' ';
|
|
|
+ visibility: hidden;
|
|
|
+ zoom: 1;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ text-align: center;
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ border-right: .01rem solid #c5c5c5;
|
|
|
+ border-bottom: .01rem solid #c5c5c5;
|
|
|
+ }
|
|
|
+ &:nth-child(odd) {
|
|
|
+ background: #ddd;
|
|
|
+ color: #333;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ }
|
|
|
+ &:nth-child(even) {
|
|
|
+ background: #fcfcfc;
|
|
|
+ color: #333;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ }
|
|
|
+ &:nth-last-of-type(1){
|
|
|
+ color: #f31919;
|
|
|
+ }
|
|
|
+ &.title {
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pull-right {
|
|
|
+ div {
|
|
|
+ color: #3f84f6;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ border-radius: 0.07rem;
|
|
|
+ border: 1px solid #3f84f6;
|
|
|
+ background: #fff;
|
|
|
+ width: 2rem;
|
|
|
+ line-height: 0.54rem;
|
|
|
+ height: 0.54rem;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ div:last-child {
|
|
|
+ margin-left: 0.2rem;
|
|
|
+ color: #fff;
|
|
|
+ background: #3f84f6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ &.icon-pdf {
|
|
|
+ color: #929292;
|
|
|
+ font-size: 0.4rem;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ color: #eb062b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cancat {
|
|
|
+ height: 0.56rem;
|
|
|
+ line-height: 0.56rem;
|
|
|
+ border: 1px solid #3f84f6;
|
|
|
+ color: #3f84f6;
|
|
|
+ font-size: 0.26rem;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 3px;
|
|
|
+ padding: 0 0.1rem;
|
|
|
+ overflow: hidden;
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+ img.pull-left {
|
|
|
+ width: 1.21rem;
|
|
|
+ height: 0.8rem;
|
|
|
+ border: 1px solid #dcdcdc;
|
|
|
+ border-radius: 0.07rem;
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sayPriBtn {
|
|
|
+ width: 2rem;
|
|
|
+ @include lineHeight(0.54rem);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ background: #3f84f6;
|
|
|
+ border-radius: 3px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: -0.1rem;
|
|
|
+ }
|
|
|
+ .middle_bottom {
|
|
|
+ .middle_bottom-left {
|
|
|
+ float: left;
|
|
|
+ img {
|
|
|
+ width: 1.21rem;
|
|
|
+ height: 1.21rem;
|
|
|
+ border: 1px solid #3e82f5;
|
|
|
+ border-radius: 0.07rem;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ div.middle_bottom-leftitem {
|
|
|
+ line-height: 0.5rem;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ div {
|
|
|
+ display: inline-block;
|
|
|
+ color: #666;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ &.bottom-title {
|
|
|
+ display: inline-block;
|
|
|
+ text-align: justify;
|
|
|
+ vertical-align: top;
|
|
|
+ width: 1.5rem;
|
|
|
+ height: 0.5rem;
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchContent2 {
|
|
|
+ height: calc(100vh - 7.3rem);
|
|
|
+ }
|
|
|
+ .searchContent3 {
|
|
|
+ height: calc(100vh - 2.25rem);
|
|
|
+ }
|
|
|
+ .store-info {
|
|
|
+ background: #f7f7f7;
|
|
|
+ h4{
|
|
|
+ width: 100%;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ line-height: 0.6rem;
|
|
|
+ height: 0.6rem;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: normal;
|
|
|
+ border-bottom: 1px solid #efeded;
|
|
|
+ padding-left: 0.11rem;
|
|
|
+ &:before{
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ width: 0.08rem;
|
|
|
+ height: 0.26rem;
|
|
|
+ background-color: #145dee;
|
|
|
+ margin-right: 0.13rem;
|
|
|
+ position: relative;
|
|
|
+ top: 0.02rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contact-info{
|
|
|
+ background: #fff;
|
|
|
+ margin: .2rem auto;
|
|
|
+ border-radius: .1rem;
|
|
|
+ ul{
|
|
|
+ padding: 0.22rem 0rem;
|
|
|
+ li{
|
|
|
+ div{
|
|
|
+ float: left;
|
|
|
+ font-size: .28rem;
|
|
|
+ color: #666;
|
|
|
+ line-height: .53rem;
|
|
|
+ width:80%;
|
|
|
+ text-align: left;
|
|
|
+ &:first-child{
|
|
|
+ width: 20%;
|
|
|
+ padding-left: 0.36rem;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ a{
|
|
|
+ color: #145dee;
|
|
|
+ }
|
|
|
+ .click-tel, .click-phone{
|
|
|
+ color: #f44336;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /* &:last-child{
|
|
|
+ div{
|
|
|
+ width: 74%;
|
|
|
+ padding-right:.34rem;
|
|
|
+ word-wrap: break-word;
|
|
|
+ &:first-child{
|
|
|
+ text-align: left;
|
|
|
+ padding: 0rem 0rem 0rem .36rem;
|
|
|
+ width: 26%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }*/
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .store-description{
|
|
|
+ background: #fff;
|
|
|
+ /*width: 6.96rem;*/
|
|
|
+ margin: 0 auto .2rem;
|
|
|
+ border-radius: .1rem;
|
|
|
+ .content {
|
|
|
+ text-indent:2em;
|
|
|
+ background: #fff;
|
|
|
+ margin: .2rem auto 0;
|
|
|
+ padding: .04rem .34rem .4rem .34rem;
|
|
|
+ width: 100%;
|
|
|
+ font-size: .28rem;
|
|
|
+ color: #666;
|
|
|
+ text-align: left;
|
|
|
+ height: 95%;
|
|
|
+ /*box-shadow: 0 .03rem .01rem 0 #cdcbcb96;*/
|
|
|
+ line-height: .5rem;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .none-state{
|
|
|
+ text-align: center;
|
|
|
+ padding:1.5rem 0;
|
|
|
+ background: #fff;
|
|
|
+ margin-top:.1rem;
|
|
|
+ width:100%;
|
|
|
+ img{
|
|
|
+ margin:0 auto;
|
|
|
+ width: 4.08rem;
|
|
|
+ height: 2.62rem;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: .32rem;
|
|
|
+ color: #999;
|
|
|
+ margin: 1.19rem 0 0 0;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ font-size: .28rem;
|
|
|
+ color: #fff;
|
|
|
+ width: 1.88rem;
|
|
|
+ height: .54rem;
|
|
|
+ line-height: .54rem;
|
|
|
+ background: #418bf6;
|
|
|
+ margin: .7rem auto 0;
|
|
|
+ border-radius: .05rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .associate-list {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ top: 0.8rem;
|
|
|
+ border: 1px solid #dcdcdc;
|
|
|
+ z-index: 100;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ li {
|
|
|
+ height: 0.7rem;
|
|
|
+ line-height: .9rem;
|
|
|
+ margin: 0 .45rem;
|
|
|
+ border-bottom: .04rem solid #f1f0f0;
|
|
|
+ @include overFlowHidden();
|
|
|
+ i {
|
|
|
+ font-size: .36rem;
|
|
|
+ margin-right: .24rem;
|
|
|
+ color: #ddd;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #999;
|
|
|
+ font-size: .28rem;
|
|
|
+ line-height: .58rem;
|
|
|
+ height: .58rem;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ &:active, &:hover {
|
|
|
+ background: #eee;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ text-align: center;
|
|
|
+ font-size: .3rem;
|
|
|
+ color: #3976f4;
|
|
|
+ border-bottom: none;
|
|
|
+ &:active, &:hover {
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
yangc
