|
|
@@ -1,446 +1,483 @@
|
|
|
<template>
|
|
|
- <view class="search-container">
|
|
|
- <view class="search-main">
|
|
|
- <view class="tui-header-tab">
|
|
|
- <view class="search-tab">
|
|
|
- <view class="search-tab-btn" @click="topBubble">
|
|
|
- <text>{{ tabValue }}</text> <text class="iconfont icon-xiangxiajiantou"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="gosearch-btn">
|
|
|
- <text class="iconfont icon-sousuo"></text>
|
|
|
- <input
|
|
|
- class="input"
|
|
|
- maxlength="20"
|
|
|
- :focus="isFocus"
|
|
|
- type="text"
|
|
|
- value=""
|
|
|
- confirm-type="search"
|
|
|
- @focus="onFocus"
|
|
|
- @input="onShowClose"
|
|
|
- @confirm="subMitSearch()"
|
|
|
- placeholder="请输入搜索关键字"
|
|
|
- v-model.trim="listQuery.keyword"
|
|
|
- />
|
|
|
- <text class="iconfont icon-shanchu1" v-if="isShowClose" @click.stop="delInputText()"></text>
|
|
|
- </view>
|
|
|
- <view class="search-btn" @click="subMitSearch()">搜索</view>
|
|
|
- </view>
|
|
|
- <!-- 筛选条件排序 -->
|
|
|
- <view class="tui-header-screen">
|
|
|
- <view class="tui-screen-top">
|
|
|
- <view
|
|
|
- class="tui-top-item"
|
|
|
- :class="[tabIndex == 0 ? 'tui-active' : '']"
|
|
|
- @tap="handleScreen"
|
|
|
- data-index="0"
|
|
|
- >综合</view
|
|
|
- >
|
|
|
- <view
|
|
|
- class="tui-top-item tui-icon-ml"
|
|
|
- :class="[tabIndex == 1 ? 'tui-active' : '']"
|
|
|
- data-index="1"
|
|
|
- @tap="handleScreen"
|
|
|
- >
|
|
|
- <view>销量</view> <text class="iconfont icon-shangxiajiantou" v-if="isSearchSalesFirst"></text>
|
|
|
- <template v-else>
|
|
|
- <tui-icon
|
|
|
- :name="isSearchSales ? 'turningdown' : 'turningup'"
|
|
|
- :size="18"
|
|
|
- :color="tabIndex == 1 ? '#e15616' : '#999'"
|
|
|
- tui-icon-class="tui-ml"
|
|
|
- ></tui-icon>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="tui-top-item tui-icon-ml"
|
|
|
- :class="[tabIndex == 2 ? 'tui-active' : '']"
|
|
|
- data-index="2"
|
|
|
- @tap="handleScreen"
|
|
|
- >
|
|
|
- <view>人气</view> <text class="iconfont icon-shangxiajiantou" v-if="isSearchMoodFirst"></text>
|
|
|
- <template v-else>
|
|
|
- <tui-icon
|
|
|
- :name="isSearchMood ? 'turningdown' : 'turningup'"
|
|
|
- :size="18"
|
|
|
- :color="tabIndex == 2 ? '#e15616' : '#999'"
|
|
|
- tui-icon-class="tui-ml"
|
|
|
- ></tui-icon>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="tui-top-item tui-icon-ml"
|
|
|
- :class="[tabIndex == 3 ? 'tui-active' : '']"
|
|
|
- data-index="3"
|
|
|
- @tap="handleScreen"
|
|
|
- >
|
|
|
- <view>价格</view> <text class="iconfont icon-shangxiajiantou" v-if="isSearchPriceFirst"></text>
|
|
|
- <template v-else>
|
|
|
- <tui-icon
|
|
|
- :name="isSearchPrice ? 'turningdown' : 'turningup'"
|
|
|
- :size="18"
|
|
|
- :color="tabIndex == 3 ? '#e15616' : '#999'"
|
|
|
- tui-icon-class="tui-ml"
|
|
|
- ></tui-icon>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view class="tui-top-item" @tap="handleScreen" data-index="4">
|
|
|
- <view>筛选</view> <text class="iconfont icon-shaixuan"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 小下拉 -->
|
|
|
- <view class="search-main-bubble" v-if="showBubblePopup">
|
|
|
- <tui-bubble-popup
|
|
|
- :show="showBubblePopup"
|
|
|
- :mask="true"
|
|
|
- position="absolute"
|
|
|
- direction="top"
|
|
|
- @close="topBubble"
|
|
|
- width="140rpx"
|
|
|
- left="10rpx"
|
|
|
- top="-80rpx"
|
|
|
- translateY="100%"
|
|
|
- triangleRight="60rpx"
|
|
|
- triangleTop="-22rpx"
|
|
|
- :maskBgColor="maskBgColor"
|
|
|
- >
|
|
|
- <view class="tui-menu-item" @tap="selectTabs(1)">产品</view>
|
|
|
- <view class="tui-menu-item" @tap="selectTabs(2)">供应商</view>
|
|
|
- <!-- <view class="tui-menu-item" @tap="selectTabs(3)">项目仪器</view> -->
|
|
|
- </tui-bubble-popup>
|
|
|
- </view>
|
|
|
- <!-- 搜索历史记录 -->
|
|
|
- <view class="search-container-history" v-if="!isShowWrapper">
|
|
|
- <view :class="'s-' + themeClass" v-if="serachRecordList.length > 0">
|
|
|
- <view class="header"> 搜索历史<text class="iconfont icon-shanchu" @click="confirmDetele"></text> </view>
|
|
|
- <view class="list">
|
|
|
- <view class="list-main">
|
|
|
- <view
|
|
|
- v-for="(item, index) in serachRecordList"
|
|
|
- :key="index"
|
|
|
- @click="keywordsClick(item.searchWord)"
|
|
|
- >{{ item.searchWord }}</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="s-block clearfix">
|
|
|
- <view class="header">热门搜索</view>
|
|
|
- <view class="list">
|
|
|
- <view class="list-title">产品</view>
|
|
|
- <view class="list-main">
|
|
|
- <view
|
|
|
- v-for="(item, index) in productHotSearch"
|
|
|
- :key="index"
|
|
|
- @click="keywordsClickPath(item)"
|
|
|
- :class="item.isHot == '1' ? 'list-active' : ''"
|
|
|
- >
|
|
|
- {{ item.name }} <text class="iconfont icon-resou" v-if="item.isHot === '1'"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list">
|
|
|
- <view class="list-title">仪器</view>
|
|
|
- <view class="list-main">
|
|
|
- <view
|
|
|
- v-for="(item, index) in instrumentHotSearch"
|
|
|
- :key="index"
|
|
|
- @click="keywordsClickPath(item)"
|
|
|
- :class="item.isHot == '1' ? 'list-active' : ''"
|
|
|
- >
|
|
|
- {{ item.name }} <text class="iconfont icon-resou" v-if="item.isHot === '1'"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- v-else
|
|
|
- class="commodity-list-wrapper"
|
|
|
- :style="{ overflow: 'auto', height: listData.length > 4 ? windowHeight + 'px' : 'auto' }"
|
|
|
- >
|
|
|
- <scroll-view
|
|
|
- :style="{ height: listData.length > 4 ? scrollHeight + 'px' : 'auto' }"
|
|
|
- @scrolltolower="scrolltolower"
|
|
|
- scroll-y
|
|
|
- v-if="!showEmpty"
|
|
|
- >
|
|
|
- <view
|
|
|
- v-for="(pros, index) in listData"
|
|
|
- :key="index"
|
|
|
- :id="pros.id"
|
|
|
- class="all-type-list-content commodity-list"
|
|
|
- @click.stop="navToDetailPage(pros.productId)"
|
|
|
- >
|
|
|
- <view class="list-details-image">
|
|
|
- <image mode="widthFix" :src="pros.image" class="list-img" alt="list-img"></image>
|
|
|
- <view class="list-details-type" v-if="pros.productType == 2">医疗器械</view>
|
|
|
- </view>
|
|
|
- <view class="list-details-info">
|
|
|
- <view class="list-details-title">
|
|
|
- <text class="mclap-tag" v-if="pros.beautyActFlag == 1">美博会</text>
|
|
|
- <text class="mclap" :class="pros.beautyActFlag == 1 ? 'indent' : ''">{{
|
|
|
- isInterceptHtmlFn(pros.name)
|
|
|
- }}</text>
|
|
|
- </view>
|
|
|
- <text class="list-details-specs">规格：{{ pros.unit }}</text>
|
|
|
- <view class="list-details-specs" v-if="pros.code != '' && pros.code != null">
|
|
|
- <view>商品编码：{{ pros.code }}</view>
|
|
|
- </view>
|
|
|
- <view class="list-details-price">
|
|
|
- <template v-if="userIdentity == 3">
|
|
|
- <view class="floor-item-act">
|
|
|
- <view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
|
|
|
- <template v-if="pros.actStatus == 1">
|
|
|
- <view class="floor-tags" v-if="PromotionsFormat(pros.promotions)">
|
|
|
- {{ pros.promotions.name }}
|
|
|
- <text v-if="hasLogin && pros.shopId == shopId && pros.priceFlag != 1"
|
|
|
- >:￥{{ pros.price | NumFormat }}</text
|
|
|
- >
|
|
|
- </view>
|
|
|
- <view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
|
|
|
- </template>
|
|
|
- <template v-if="pros.svipProductFlag == 1">
|
|
|
- <view class="svip-tags">
|
|
|
- <view class="tags">SVIP</view>
|
|
|
- <view
|
|
|
- class="price"
|
|
|
- v-if="hasLogin && pros.shopId == shopId && pros.priceFlag != 1"
|
|
|
- >{{ pros.svipPriceTag }}</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-else-if="userIdentity == 1">
|
|
|
- <view class="floor-item-act">
|
|
|
- <view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
|
|
|
- <template v-if="pros.actStatus == 1">
|
|
|
- <view
|
|
|
- class="floor-tags"
|
|
|
- v-if="pros.actStatus == 1 && PromotionsFormat(pros.promotions)"
|
|
|
- >
|
|
|
- {{ pros.promotions.name }} <text>:￥{{ pros.price | NumFormat }}</text>
|
|
|
- </view>
|
|
|
- <view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
|
|
|
- </template>
|
|
|
- <template v-if="pros.svipProductFlag == 1">
|
|
|
- <view class="svip-tags"><view class="tags none">SVIP</view> </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="floor-item-act">
|
|
|
- <view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
|
|
|
- <template v-if="pros.actStatus == 1">
|
|
|
- <view
|
|
|
- class="floor-tags"
|
|
|
- v-if="pros.actStatus == 1 && PromotionsFormat(pros.promotions)"
|
|
|
- >
|
|
|
- {{ pros.promotions.name }}
|
|
|
- <text v-if="pros.priceFlag != 1 && hasLogin && userIdentity == 2"
|
|
|
- >:￥{{ pros.price | NumFormat }}</text
|
|
|
- >
|
|
|
- </view>
|
|
|
- <view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
|
|
|
- </template>
|
|
|
- <template v-if="pros.svipProductFlag == 1">
|
|
|
- <view class="svip-tags">
|
|
|
- <view class="tags" :class="{ none: !isShowVipFlag(pros) }">SVIP</view>
|
|
|
- <view class="price" v-if="isShowVipFlag(pros)">{{
|
|
|
- pros.svipPriceTag
|
|
|
- }}</view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <view v-if="hasLogin" class="list-price">
|
|
|
- <!-- 协销 -->
|
|
|
- <template v-if="userIdentity == 1">
|
|
|
- <text v-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
- <text
|
|
|
- v-else
|
|
|
- class="price-larger"
|
|
|
- :class="
|
|
|
- PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1 ? 'none' : ''
|
|
|
- "
|
|
|
- >
|
|
|
- ￥{{
|
|
|
- (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price)
|
|
|
- | NumFormat
|
|
|
- }}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- <!-- 普通机构且不是超级会员 -->
|
|
|
- <template v-if="userIdentity == 4 && vipFlag != 1">
|
|
|
- <view class="price-larger" v-if="pros.priceFlag == 1">
|
|
|
- <text class="txt">￥未公开价格</text>
|
|
|
- </view>
|
|
|
- <text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
- <template v-else>
|
|
|
- <view class="price-larger" v-if="pros.priceFlag == 2">
|
|
|
- <text class="txt">￥价格仅会员可见</text>
|
|
|
- </view>
|
|
|
- <view class="price-larger" v-else-if="pros.priceFlag == 3">
|
|
|
- <text class="txt">￥仅医美机构可见</text>
|
|
|
- </view>
|
|
|
- <text
|
|
|
- v-else
|
|
|
- class="price-larger"
|
|
|
- :class="
|
|
|
- PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
- ? 'none'
|
|
|
- : ''
|
|
|
- "
|
|
|
- >
|
|
|
- ￥{{
|
|
|
- (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price)
|
|
|
- | NumFormat
|
|
|
- }}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <!-- 供应商 -->
|
|
|
- <template v-if="userIdentity == 3">
|
|
|
- <template v-if="pros.supplierId == shopId">
|
|
|
- <view class="price-larger" v-if="pros.priceFlag == 1">
|
|
|
- <text class="txt">￥未公开价格</text>
|
|
|
- </view>
|
|
|
- <text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
- <text
|
|
|
- v-else
|
|
|
- class="price-larger"
|
|
|
- :class="
|
|
|
- PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
- ? 'none'
|
|
|
- : ''
|
|
|
- "
|
|
|
- >
|
|
|
- ￥{{
|
|
|
- (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price)
|
|
|
- | NumFormat
|
|
|
- }}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="list-login-now">
|
|
|
- <text class="p-no">￥</text>
|
|
|
- <uni-grader :grade="Number(pros.priceGrade)"></uni-grader>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <!-- 会员机构 && 普通机构且是超级会员 -->
|
|
|
- <template v-if="userIdentity == 2 || (userIdentity == 4 && vipFlag == 1)">
|
|
|
- <view class="price-larger" v-if="pros.priceFlag == 1">
|
|
|
- <text class="txt">￥未公开价格</text>
|
|
|
- </view>
|
|
|
- <text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
- <template v-else>
|
|
|
- <view class="price-larger" v-if="pros.priceFlag == 3 && (firstClubType!=1)">
|
|
|
- <text class="txt">￥仅医美机构可见</text>
|
|
|
- </view>
|
|
|
- <text
|
|
|
- v-else
|
|
|
- class="price-larger"
|
|
|
- :class="
|
|
|
- PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1 ? 'none' : ''
|
|
|
- "
|
|
|
- >
|
|
|
- ￥{{
|
|
|
- (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price)
|
|
|
- | NumFormat
|
|
|
- }}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view v-else class="list-login-now">
|
|
|
- <text class="p-no">￥</text>
|
|
|
- <uni-grader :grade="Number(pros.priceGrade)"></uni-grader>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-if="showLoading && listData.length > 4">
|
|
|
- <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow"
|
|
|
- >{{ loadingText }}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view
|
|
|
- >
|
|
|
- <view class="loading-wrapper loading-wrapper-btm" v-else
|
|
|
- >———<text class="btm-text">已至底部</text>———</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <view class="empty-container" v-if="showEmpty">
|
|
|
- <image
|
|
|
- class="empty-container-image"
|
|
|
- src="https://img.caimei365.com/group1/M00/03/8D/Cmis215XHXWAHCoqAAELHadZ9Xg365.png"
|
|
|
- ></image>
|
|
|
- <text class="error-text">抱歉，没有相关商品！</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!--筛选条件右抽屉-->
|
|
|
- <tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
|
|
|
- <view class="drawer-title">
|
|
|
- <view class="drawer-title-h1">品牌</view>
|
|
|
- <view class="drawer-title-p"
|
|
|
- >已选中<text class="text">{{ checkedBrandLength }}</text
|
|
|
- >个品牌</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="drawer-container clearfix"
|
|
|
- scroll-y
|
|
|
- :style="{ paddingBottom: isIphoneX ? '180rpx' : '146rpx' }"
|
|
|
- @scroll="drawerScroll(event)"
|
|
|
- >
|
|
|
- <scroll-view class="tui-drawer-scroll" scroll-y :style="{ height: drawerH + 'px' }">
|
|
|
- <view class="drawer-main">
|
|
|
- <view class="drawer-main-brand clearfix">
|
|
|
- <view class="drawer-brand-list" :class="isAllcheckedBrand ? 'checked' : ''" @click="choiceBrandAll">全部</view>
|
|
|
- <view
|
|
|
- class="drawer-brand-list"
|
|
|
- :class="brand.isChecked ? 'checked' : ''"
|
|
|
- v-for="(brand, index) in brandLists"
|
|
|
- :key="index"
|
|
|
- @click="choiceBrand(brand, index)"
|
|
|
- >
|
|
|
- {{ brand.name }}
|
|
|
- </view>
|
|
|
- <view class="drawer-brand-more" v-if="!isShowAllBrands" @click="showAllBrands"
|
|
|
- >查看全部<text class="iconfont icon-xiangxiajiantou"></text
|
|
|
- ></view>
|
|
|
- </view>
|
|
|
- <view class="drawer-main-radio">
|
|
|
- <view class="drawer-radio-name">新品</view>
|
|
|
- <view class="drawer-radio-input" @click="choiceNewType">
|
|
|
- <text
|
|
|
- class="iconfont"
|
|
|
- :class="isChoiceNewType ? 'icon-yixuanze' : 'icon-weixuanze'"
|
|
|
- ></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="drawer-main-radio">
|
|
|
- <view class="drawer-radio-name">促销商品</view>
|
|
|
- <view class="drawer-radio-input" @click="choiceActiType">
|
|
|
- <text
|
|
|
- class="iconfont"
|
|
|
- :class="isChoiceActiType ? 'icon-yixuanze' : 'icon-weixuanze'"
|
|
|
- ></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <view class="drawer-input btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
|
|
|
- <view class="drawer-btn clear" @click="closeDrawer">取消</view>
|
|
|
- <view class="drawer-btn comfrim" @click="handSearchList">确定</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </tui-drawer>
|
|
|
- <!-- 透明模态层 -->
|
|
|
- <modal-layer v-if="isModallayer"></modal-layer>
|
|
|
- </view>
|
|
|
+ <view class="search-container">
|
|
|
+ <view class="search-main">
|
|
|
+ <view class="tui-header-tab">
|
|
|
+ <view class="search-tab">
|
|
|
+ <view class="search-tab-btn" @click="topBubble">
|
|
|
+ <text>{{ tabValue }}</text>
|
|
|
+ <text class="iconfont icon-xiangxiajiantou"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="gosearch-btn">
|
|
|
+ <text class="iconfont icon-sousuo"></text>
|
|
|
+ <input
|
|
|
+ class="input"
|
|
|
+ maxlength="20"
|
|
|
+ :focus="isFocus"
|
|
|
+ type="text"
|
|
|
+ value=""
|
|
|
+ confirm-type="search"
|
|
|
+ @focus="onFocus"
|
|
|
+ @input="onShowClose"
|
|
|
+ @confirm="subMitSearch()"
|
|
|
+ @blur="onBlur"
|
|
|
+ placeholder="请输入搜索关键字"
|
|
|
+ v-model.trim="listQuery.keyword"
|
|
|
+ />
|
|
|
+ <text class="iconfont icon-shanchu1" v-if="isShowClose" @click.stop="delInputText()"></text>
|
|
|
+ </view>
|
|
|
+ <view class="search-btn" @click="subMitSearch()">搜索</view>
|
|
|
+ </view>
|
|
|
+ <!-- 筛选条件排序 -->
|
|
|
+ <view class="tui-header-screen">
|
|
|
+ <view class="tui-screen-top">
|
|
|
+ <view
|
|
|
+ class="tui-top-item"
|
|
|
+ :class="[tabIndex == 0 ? 'tui-active' : '']"
|
|
|
+ @tap="handleScreen"
|
|
|
+ data-index="0"
|
|
|
+ >
|
|
|
+ 综合
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="tui-top-item tui-icon-ml"
|
|
|
+ :class="[tabIndex == 1 ? 'tui-active' : '']"
|
|
|
+ data-index="1"
|
|
|
+ @tap="handleScreen"
|
|
|
+ >
|
|
|
+ <view>销量</view>
|
|
|
+ <text class="iconfont icon-shangxiajiantou" v-if="isSearchSalesFirst"></text>
|
|
|
+ <template v-else>
|
|
|
+ <tui-icon
|
|
|
+ :name="isSearchSales ? 'turningdown' : 'turningup'"
|
|
|
+ :size="18"
|
|
|
+ :color="tabIndex == 1 ? '#e15616' : '#999'"
|
|
|
+ tui-icon-class="tui-ml"
|
|
|
+ ></tui-icon>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="tui-top-item tui-icon-ml"
|
|
|
+ :class="[tabIndex == 2 ? 'tui-active' : '']"
|
|
|
+ data-index="2"
|
|
|
+ @tap="handleScreen"
|
|
|
+ >
|
|
|
+ <view>人气</view>
|
|
|
+ <text class="iconfont icon-shangxiajiantou" v-if="isSearchMoodFirst"></text>
|
|
|
+ <template v-else>
|
|
|
+ <tui-icon
|
|
|
+ :name="isSearchMood ? 'turningdown' : 'turningup'"
|
|
|
+ :size="18"
|
|
|
+ :color="tabIndex == 2 ? '#e15616' : '#999'"
|
|
|
+ tui-icon-class="tui-ml"
|
|
|
+ ></tui-icon>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="tui-top-item tui-icon-ml"
|
|
|
+ :class="[tabIndex == 3 ? 'tui-active' : '']"
|
|
|
+ data-index="3"
|
|
|
+ @tap="handleScreen"
|
|
|
+ >
|
|
|
+ <view>价格</view>
|
|
|
+ <text class="iconfont icon-shangxiajiantou" v-if="isSearchPriceFirst"></text>
|
|
|
+ <template v-else>
|
|
|
+ <tui-icon
|
|
|
+ :name="isSearchPrice ? 'turningdown' : 'turningup'"
|
|
|
+ :size="18"
|
|
|
+ :color="tabIndex == 3 ? '#e15616' : '#999'"
|
|
|
+ tui-icon-class="tui-ml"
|
|
|
+ ></tui-icon>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view class="tui-top-item" @tap="handleScreen" data-index="4">
|
|
|
+ <view>筛选</view>
|
|
|
+ <text class="iconfont icon-shaixuan"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 小下拉 -->
|
|
|
+ <view class="search-main-bubble" v-if="showBubblePopup">
|
|
|
+ <tui-bubble-popup
|
|
|
+ :show="showBubblePopup"
|
|
|
+ :mask="true"
|
|
|
+ position="absolute"
|
|
|
+ direction="top"
|
|
|
+ @close="topBubble"
|
|
|
+ width="140rpx"
|
|
|
+ left="10rpx"
|
|
|
+ top="-80rpx"
|
|
|
+ translateY="100%"
|
|
|
+ triangleRight="60rpx"
|
|
|
+ triangleTop="-22rpx"
|
|
|
+ :maskBgColor="maskBgColor"
|
|
|
+ >
|
|
|
+ <view class="tui-menu-item" @tap="selectTabs(1)">产品</view>
|
|
|
+ <view class="tui-menu-item" @tap="selectTabs(2)">供应商</view>
|
|
|
+ <!-- <view class="tui-menu-item" @tap="selectTabs(3)">项目仪器</view> -->
|
|
|
+ </tui-bubble-popup>
|
|
|
+ </view>
|
|
|
+ <!-- 搜索关键词库提示 -->
|
|
|
+ <view class="search-library" v-show="showLibaray && userIdentity === 1">
|
|
|
+ <div class="search-library-wrapper">
|
|
|
+ <view class="keyword-item" v-for="item in libraryWordList" :key="item" @click="onLibraryClick(item)">
|
|
|
+ <text class="iconfont icon-sousuo"></text>
|
|
|
+ <view class="content" v-html="item.text"></view>
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ <!-- 搜索历史记录 -->
|
|
|
+ <view class="search-container-history" v-if="!isShowWrapper">
|
|
|
+ <view :class="'s-' + themeClass" v-if="serachRecordList.length > 0">
|
|
|
+ <view class="header">
|
|
|
+ 搜索历史
|
|
|
+ <text class="iconfont icon-shanchu" @click="confirmDetele"></text>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="list-main">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in serachRecordList"
|
|
|
+ :key="index"
|
|
|
+ @click="keywordsClick(item.searchWord)"
|
|
|
+ >
|
|
|
+ {{ item.searchWord }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="s-block clearfix">
|
|
|
+ <view class="header">热门搜索</view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="list-title">产品</view>
|
|
|
+ <view class="list-main">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in productHotSearch"
|
|
|
+ :key="index"
|
|
|
+ @click="keywordsClickPath(item)"
|
|
|
+ :class="item.isHot == '1' ? 'list-active' : ''"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ <text class="iconfont icon-resou" v-if="item.isHot === '1'"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="list-title">仪器</view>
|
|
|
+ <view class="list-main">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in instrumentHotSearch"
|
|
|
+ :key="index"
|
|
|
+ @click="keywordsClickPath(item)"
|
|
|
+ :class="item.isHot == '1' ? 'list-active' : ''"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ <text class="iconfont icon-resou" v-if="item.isHot === '1'"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-else
|
|
|
+ class="commodity-list-wrapper"
|
|
|
+ :style="{ overflow: 'auto', height: listData.length > 4 ? windowHeight + 'px' : 'auto' }"
|
|
|
+ >
|
|
|
+ <scroll-view
|
|
|
+ :style="{ height: listData.length > 4 ? scrollHeight + 'px' : 'auto' }"
|
|
|
+ @scrolltolower="scrolltolower"
|
|
|
+ scroll-y
|
|
|
+ v-if="!showEmpty"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-for="(pros, index) in listData"
|
|
|
+ :key="index"
|
|
|
+ :id="pros.id"
|
|
|
+ class="all-type-list-content commodity-list"
|
|
|
+ @click.stop="navToDetailPage(pros.productId)"
|
|
|
+ >
|
|
|
+ <view class="list-details-image">
|
|
|
+ <image mode="widthFix" :src="pros.image" class="list-img" alt="list-img"></image>
|
|
|
+ <view class="list-details-type" v-if="pros.productType == 2">医疗器械</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-details-info">
|
|
|
+ <view class="list-details-title">
|
|
|
+ <text class="mclap-tag" v-if="pros.beautyActFlag == 1">美博会</text>
|
|
|
+ <text class="mclap" :class="pros.beautyActFlag == 1 ? 'indent' : ''">
|
|
|
+ {{ isInterceptHtmlFn(pros.name) }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <text class="list-details-specs">规格：{{ pros.unit }}</text>
|
|
|
+ <view class="list-details-specs" v-if="pros.code != '' && pros.code != null">
|
|
|
+ <view>商品编码：{{ pros.code }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-details-price">
|
|
|
+ <template v-if="userIdentity == 3">
|
|
|
+ <view class="floor-item-act">
|
|
|
+ <view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
|
|
|
+ <template v-if="pros.actStatus == 1">
|
|
|
+ <view class="floor-tags" v-if="PromotionsFormat(pros.promotions)">
|
|
|
+ {{ pros.promotions.name }}
|
|
|
+ <text v-if="hasLogin && pros.shopId == shopId && pros.priceFlag != 1">
|
|
|
+ :￥{{ pros.price | NumFormat }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
|
|
|
+ </template>
|
|
|
+ <template v-if="pros.svipProductFlag == 1">
|
|
|
+ <view class="svip-tags">
|
|
|
+ <view class="tags">SVIP</view>
|
|
|
+ <view
|
|
|
+ class="price"
|
|
|
+ v-if="hasLogin && pros.shopId == shopId && pros.priceFlag != 1"
|
|
|
+ >
|
|
|
+ {{ pros.svipPriceTag }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="userIdentity == 1">
|
|
|
+ <view class="floor-item-act">
|
|
|
+ <view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
|
|
|
+ <template v-if="pros.actStatus == 1">
|
|
|
+ <view
|
|
|
+ class="floor-tags"
|
|
|
+ v-if="pros.actStatus == 1 && PromotionsFormat(pros.promotions)"
|
|
|
+ >
|
|
|
+ {{ pros.promotions.name }}
|
|
|
+ <text>:￥{{ pros.price | NumFormat }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
|
|
|
+ </template>
|
|
|
+ <template v-if="pros.svipProductFlag == 1">
|
|
|
+ <view class="svip-tags"><view class="tags none">SVIP</view></view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view class="floor-item-act">
|
|
|
+ <view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
|
|
|
+ <template v-if="pros.actStatus == 1">
|
|
|
+ <view
|
|
|
+ class="floor-tags"
|
|
|
+ v-if="pros.actStatus == 1 && PromotionsFormat(pros.promotions)"
|
|
|
+ >
|
|
|
+ {{ pros.promotions.name }}
|
|
|
+ <text v-if="pros.priceFlag != 1 && hasLogin && userIdentity == 2">
|
|
|
+ :￥{{ pros.price | NumFormat }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
|
|
|
+ </template>
|
|
|
+ <template v-if="pros.svipProductFlag == 1">
|
|
|
+ <view class="svip-tags">
|
|
|
+ <view class="tags" :class="{ none: !isShowVipFlag(pros) }">SVIP</view>
|
|
|
+ <view class="price" v-if="isShowVipFlag(pros)">
|
|
|
+ {{ pros.svipPriceTag }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view v-if="hasLogin" class="list-price">
|
|
|
+ <!-- 协销 -->
|
|
|
+ <template v-if="userIdentity == 1">
|
|
|
+ <text v-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
+ <text
|
|
|
+ v-else
|
|
|
+ class="price-larger"
|
|
|
+ :class="
|
|
|
+ PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1 ? 'none' : ''
|
|
|
+ "
|
|
|
+ >
|
|
|
+ ￥{{
|
|
|
+ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price)
|
|
|
+ | NumFormat
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ </template>
|
|
|
+ <!-- 普通机构且不是超级会员 -->
|
|
|
+ <template v-if="userIdentity == 4 && vipFlag != 1">
|
|
|
+ <view class="price-larger" v-if="pros.priceFlag == 1">
|
|
|
+ <text class="txt">￥未公开价格</text>
|
|
|
+ </view>
|
|
|
+ <text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
+ <template v-else>
|
|
|
+ <view class="price-larger" v-if="pros.priceFlag == 2">
|
|
|
+ <text class="txt">￥价格仅会员可见</text>
|
|
|
+ </view>
|
|
|
+ <view class="price-larger" v-else-if="pros.priceFlag == 3">
|
|
|
+ <text class="txt">￥仅医美机构可见</text>
|
|
|
+ </view>
|
|
|
+ <text
|
|
|
+ v-else
|
|
|
+ class="price-larger"
|
|
|
+ :class="
|
|
|
+ PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
+ ? 'none'
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ >
|
|
|
+ ￥{{
|
|
|
+ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price)
|
|
|
+ | NumFormat
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <!-- 供应商 -->
|
|
|
+ <template v-if="userIdentity == 3">
|
|
|
+ <template v-if="pros.supplierId == shopId">
|
|
|
+ <view class="price-larger" v-if="pros.priceFlag == 1">
|
|
|
+ <text class="txt">￥未公开价格</text>
|
|
|
+ </view>
|
|
|
+ <text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
+ <text
|
|
|
+ v-else
|
|
|
+ class="price-larger"
|
|
|
+ :class="
|
|
|
+ PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
+ ? 'none'
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ >
|
|
|
+ ￥{{
|
|
|
+ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price)
|
|
|
+ | NumFormat
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view class="list-login-now">
|
|
|
+ <text class="p-no">￥</text>
|
|
|
+ <uni-grader :grade="Number(pros.priceGrade)"></uni-grader>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <!-- 会员机构 && 普通机构且是超级会员 -->
|
|
|
+ <template v-if="userIdentity == 2 || (userIdentity == 4 && vipFlag == 1)">
|
|
|
+ <view class="price-larger" v-if="pros.priceFlag == 1">
|
|
|
+ <text class="txt">￥未公开价格</text>
|
|
|
+ </view>
|
|
|
+ <text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
+ <template v-else>
|
|
|
+ <view class="price-larger" v-if="pros.priceFlag == 3 && firstClubType != 1">
|
|
|
+ <text class="txt">￥仅医美机构可见</text>
|
|
|
+ </view>
|
|
|
+ <text
|
|
|
+ v-else
|
|
|
+ class="price-larger"
|
|
|
+ :class="
|
|
|
+ PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
+ ? 'none'
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ >
|
|
|
+ ￥{{
|
|
|
+ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price)
|
|
|
+ | NumFormat
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view v-else class="list-login-now">
|
|
|
+ <text class="p-no">￥</text>
|
|
|
+ <uni-grader :grade="Number(pros.priceGrade)"></uni-grader>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="showLoading && listData.length > 4">
|
|
|
+ <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">
|
|
|
+ {{ loadingText }}
|
|
|
+ <text v-if="loadingText === '已至底部'">‧ ‧ ‧</text>
|
|
|
+ </view>
|
|
|
+ <view class="loading-wrapper loading-wrapper-btm" v-else>
|
|
|
+ ———
|
|
|
+ <text class="btm-text">已至底部</text>
|
|
|
+ ———
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="empty-container" v-if="showEmpty">
|
|
|
+ <image
|
|
|
+ class="empty-container-image"
|
|
|
+ src="https://img.caimei365.com/group1/M00/03/8D/Cmis215XHXWAHCoqAAELHadZ9Xg365.png"
|
|
|
+ ></image>
|
|
|
+ <text class="error-text">抱歉，没有相关商品！</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--筛选条件右抽屉-->
|
|
|
+ <tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
|
|
|
+ <view class="drawer-title">
|
|
|
+ <view class="drawer-title-h1">品牌</view>
|
|
|
+ <view class="drawer-title-p">
|
|
|
+ 已选中
|
|
|
+ <text class="text">{{ checkedBrandLength }}</text>
|
|
|
+ 个品牌
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="drawer-container clearfix"
|
|
|
+ scroll-y
|
|
|
+ :style="{ paddingBottom: isIphoneX ? '180rpx' : '146rpx' }"
|
|
|
+ @scroll="drawerScroll(event)"
|
|
|
+ >
|
|
|
+ <scroll-view class="tui-drawer-scroll" scroll-y :style="{ height: drawerH + 'px' }">
|
|
|
+ <view class="drawer-main">
|
|
|
+ <view class="drawer-main-brand clearfix">
|
|
|
+ <view
|
|
|
+ class="drawer-brand-list"
|
|
|
+ :class="isAllcheckedBrand ? 'checked' : ''"
|
|
|
+ @click="choiceBrandAll"
|
|
|
+ >
|
|
|
+ 全部
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="drawer-brand-list"
|
|
|
+ :class="brand.isChecked ? 'checked' : ''"
|
|
|
+ v-for="(brand, index) in brandLists"
|
|
|
+ :key="index"
|
|
|
+ @click="choiceBrand(brand, index)"
|
|
|
+ >
|
|
|
+ {{ brand.name }}
|
|
|
+ </view>
|
|
|
+ <view class="drawer-brand-more" v-if="!isShowAllBrands" @click="showAllBrands">
|
|
|
+ 查看全部
|
|
|
+ <text class="iconfont icon-xiangxiajiantou"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="drawer-main-radio">
|
|
|
+ <view class="drawer-radio-name">新品</view>
|
|
|
+ <view class="drawer-radio-input" @click="choiceNewType">
|
|
|
+ <text
|
|
|
+ class="iconfont"
|
|
|
+ :class="isChoiceNewType ? 'icon-yixuanze' : 'icon-weixuanze'"
|
|
|
+ ></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="drawer-main-radio">
|
|
|
+ <view class="drawer-radio-name">促销商品</view>
|
|
|
+ <view class="drawer-radio-input" @click="choiceActiType">
|
|
|
+ <text
|
|
|
+ class="iconfont"
|
|
|
+ :class="isChoiceActiType ? 'icon-yixuanze' : 'icon-weixuanze'"
|
|
|
+ ></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="drawer-input btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
|
|
|
+ <view class="drawer-btn clear" @click="closeDrawer">取消</view>
|
|
|
+ <view class="drawer-btn comfrim" @click="handSearchList">确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </tui-drawer>
|
|
|
+ <!-- 透明模态层 -->
|
|
|
+ <modal-layer v-if="isModallayer"></modal-layer>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -449,1262 +486,1358 @@ import modalLayer from '@/components/modal-layer'
|
|
|
import uniGrader from '@/components/uni-grade/uni-grade.vue'
|
|
|
import authorize from '@/common/config/authorize.js'
|
|
|
import wxLogin from '@/common/config/wxLogin.js'
|
|
|
+import { debounce } from '@/common/config/common.js'
|
|
|
+const myDebounce = fn => debounce(fn, 500, false)
|
|
|
|
|
|
export default {
|
|
|
- components: {
|
|
|
- modalLayer,
|
|
|
- uniGrader
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
- isIphoneX: this.$store.state.isIphoneX,
|
|
|
- shopId: 0,
|
|
|
- userId: 0,
|
|
|
- tabValue: '产品',
|
|
|
- themeClass: 'block',
|
|
|
- showBubblePopup: false,
|
|
|
- vipFlag: 0,
|
|
|
- userIdentity: 0,
|
|
|
- firstClubType:0,
|
|
|
- searchKeyType: 1,
|
|
|
- tabIndex: 0,
|
|
|
- rightDrawer: false,
|
|
|
- isShowAllBrands: false,
|
|
|
- isSearchSalesFirst: true,
|
|
|
- isSearchMoodFirst: true,
|
|
|
- isSearchPriceFirst: true,
|
|
|
- isSearchSales: true,
|
|
|
- isSearchMood: true,
|
|
|
- isSearchPrice: true,
|
|
|
- isChoiceNewType: false,
|
|
|
- isChoiceActiType: false,
|
|
|
- isAllcheckedBrand:false,
|
|
|
- isShowClose: false, //是否显示清空输入框图标
|
|
|
- isSearchHistory: false, //是都显示搜索历史
|
|
|
- serachRecordList: [], //历史搜索记录
|
|
|
- instrumentHotSearch: [],
|
|
|
- productHotSearch: [],
|
|
|
- isShowWrapper: false,
|
|
|
- isModallayer: false,
|
|
|
- isFocus: false,
|
|
|
- priceLoading: true,
|
|
|
- windowHeight: '',
|
|
|
- showEmpty: false,
|
|
|
- scrollHeight: '',
|
|
|
- listData: [],
|
|
|
- brandLists: [],
|
|
|
- defaultBrandLists: [],
|
|
|
- checkedBrandList: [],
|
|
|
- checkedBrandLength: 0,
|
|
|
- productIds: '', //查询价格的商品ID
|
|
|
- showLoading: false,
|
|
|
- loadingNow: true,
|
|
|
- loadingText: '上拉加载更多',
|
|
|
- pullFlag: true,
|
|
|
- listQuery: {
|
|
|
- identity: 0,
|
|
|
- keyword: '',
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 20,
|
|
|
- sortField: '',
|
|
|
- sortType: 1,
|
|
|
- newType: 1,
|
|
|
- actiType: 1,
|
|
|
- brandIds:'', // 品牌Id
|
|
|
- newFlag:0, // 查询新品标记，默认0，新品1
|
|
|
- promotionFlag:0, // 查询促销标记，默认0，促销1
|
|
|
- },
|
|
|
- brandParam: {
|
|
|
- keyword: '',
|
|
|
- id: '',
|
|
|
- idType: '',
|
|
|
- identity: 0
|
|
|
- },
|
|
|
- total: 0,
|
|
|
- height: 0,
|
|
|
- drawerH: 0 // 抽屉内部scrollview高度
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['hasLogin', 'userInfo', 'clubType', 'identity'])
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- console.log(option)
|
|
|
- if (option.type == 'share') {
|
|
|
- wxLogin.wxLoginAuthorize()
|
|
|
- }
|
|
|
- this.initGetStotage(option)
|
|
|
- },
|
|
|
- filters: {
|
|
|
- NumFormat: function(text) {
|
|
|
- //处理金额
|
|
|
- return Number(text).toFixed(2)
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async initGetStotage(option) {
|
|
|
- const userInfo = await this.$api.getStorage()
|
|
|
- this.userId = userInfo.userId ? userInfo.userId : 0
|
|
|
- this.shopId = userInfo.shopId ? userInfo.shopId : 0
|
|
|
- this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
|
|
|
- this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
|
|
|
- this.listQuery.identity = this.identity
|
|
|
- this.firstClubType = this.clubType
|
|
|
- if (option.keyWord) {
|
|
|
- this.listQuery.keyword = option.keyWord
|
|
|
- this.setSearchHistoryAdd()
|
|
|
- this.getListFromServer()
|
|
|
- this.isFocus = false
|
|
|
- } else {
|
|
|
- this.isFocus = true
|
|
|
- this.initGetSerachRecord()
|
|
|
- }
|
|
|
- },
|
|
|
- GetHomeHotSearchTerms() {
|
|
|
- //金刚区分类
|
|
|
- this.CommonService.GetHomeHotSearchTerms({})
|
|
|
- .then(response => {
|
|
|
- let data = response.data
|
|
|
- console.log(data)
|
|
|
- this.instrumentHotSearch = data.instrumentHotSearch
|
|
|
- this.productHotSearch = data.productHotSearch
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- initGetSerachRecord() {
|
|
|
- //查询搜索历史记录
|
|
|
- this.ProductService.GetProductSearchHistory({ userId: this.userId }).then(response => {
|
|
|
- if (response.code == 0) {
|
|
|
- this.serachRecordList = response.data
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getCommoditySearchQUeryBrand() {
|
|
|
- // 查询筛选项品牌
|
|
|
- this.ProductService.getCommoditySearchQUeryBrand(this.brandParam)
|
|
|
- .then(response => {
|
|
|
- const data = response.data
|
|
|
- this.defaultBrandLists = data.map((el, index) => {
|
|
|
- el.isChecked = false
|
|
|
- return el
|
|
|
- })
|
|
|
- if(this.defaultBrandLists.length>11){
|
|
|
- this.isShowAllBrands = false
|
|
|
- }else{
|
|
|
- this.isShowAllBrands = true
|
|
|
- }
|
|
|
- this.brandLists = this.defaultBrandLists.slice(0,11)
|
|
|
- console.log('品牌=============>', this.brandLists)
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.log('查询品牌列表异常')
|
|
|
- })
|
|
|
- },
|
|
|
- subMitSearch() {
|
|
|
- //搜索
|
|
|
- if (this.listQuery.keyword == '') {
|
|
|
- this.$util.msg('请输入搜索关键词', 2000)
|
|
|
- } else {
|
|
|
- switch (this.searchKeyType) {
|
|
|
- case 1:
|
|
|
- this.listData = []
|
|
|
- this.brandParam.keyword = this.listQuery.keyword
|
|
|
- this.setSearchHistoryAdd()
|
|
|
- this.getCommoditySearchQUeryBrand()
|
|
|
- this.getListFromServer()
|
|
|
- this.isFocus = false
|
|
|
- // 友盟埋点商品搜索点击
|
|
|
- if (process.env.NODE_ENV != 'development') {
|
|
|
- this.$uma.trackEvent('Um_Event_SearchProductSubmit', {
|
|
|
- Um_Key_Keyword: `${this.listQuery.keyword}`,
|
|
|
- Um_Key_PageName: '商品',
|
|
|
- Um_Key_SourcePage: '搜索商品'
|
|
|
- })
|
|
|
- }
|
|
|
- break
|
|
|
- case 2:
|
|
|
- this.setSearchHistoryAdd()
|
|
|
- this.$api.navigateTo(`/pages/search/search-supplier?keyWord=${this.listQuery.keyword}`)
|
|
|
- break
|
|
|
- case 3:
|
|
|
- this.setSearchHistoryAdd()
|
|
|
- this.$api.navigateTo(`/pages/search/search-instrument?keyWord=${this.listQuery.keyword}`)
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- handSearchList() {
|
|
|
- //确定筛选
|
|
|
- this.rightDrawer = false
|
|
|
- this.listQuery.pageNum =1
|
|
|
- this.getListFromServer(false)
|
|
|
- },
|
|
|
- scrolltolower() {
|
|
|
- if (this.total > this.listData.length && this.pullFlag) {
|
|
|
- this.getListFromServer(true)
|
|
|
- }
|
|
|
- },
|
|
|
- getListFromServer(loadMore) {
|
|
|
- this.showLoading = true
|
|
|
- this.loadingNow = true
|
|
|
- this.loadingText = '加载中'
|
|
|
- this.showEmpty = false
|
|
|
- if (loadMore) {
|
|
|
- this.listQuery.pageNum += 1
|
|
|
- }
|
|
|
- this.ProductService.GetProductSearchList(this.listQuery)
|
|
|
- .then(response => {
|
|
|
- this.isShowWrapper = true
|
|
|
- const resData = JSON.parse(response.data)
|
|
|
- const resList = resData.items
|
|
|
- if (resList && resList.length > 0) {
|
|
|
- this.total = resData.total
|
|
|
- this.showEmpty = false
|
|
|
- if (loadMore) {
|
|
|
- this.listData = [...this.listData, ...resList]
|
|
|
- this.getProductPrice()
|
|
|
- } else {
|
|
|
- this.listData = [...resList]
|
|
|
- this.getProductPrice()
|
|
|
- }
|
|
|
- // 防上拉暴滑
|
|
|
- this.pullFlag = false
|
|
|
- setTimeout(() => {
|
|
|
- this.pullFlag = true
|
|
|
- }, 500)
|
|
|
- // 底部提示文案
|
|
|
- if (this.totalPage > this.listData.length) {
|
|
|
- this.loadingText = '上拉加载更多'
|
|
|
- } else {
|
|
|
- this.showLoading = true
|
|
|
- this.loadingNow = false
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (!loadMore) {
|
|
|
- this.showEmpty = true
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.log('商品搜索异常',error.msg)
|
|
|
- })
|
|
|
- },
|
|
|
- setSearchHistoryAdd() {
|
|
|
- //添加搜索记录
|
|
|
- if (!this.hasLogin) {
|
|
|
- return false
|
|
|
- }
|
|
|
- this.ProductService.GetAddProductSearchHistory({ userId: this.userId, keyword: this.listQuery.keyword })
|
|
|
- .then(response => {
|
|
|
- //此为每次搜索同时添加用户的搜索记录
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- getProductPrice() {
|
|
|
- //获取价格
|
|
|
- let productIdArr = []
|
|
|
- this.listData.map(item => {
|
|
|
- // 0公开价格 1不公开价格 2仅对资质机构公开
|
|
|
- productIdArr.push(item.productId)
|
|
|
- })
|
|
|
- this.priceLoading = true
|
|
|
- this.productIds = productIdArr.join(',')
|
|
|
- this.ProductService.querySearchProductPrice({
|
|
|
- userId: this.userId,
|
|
|
- productIds: this.productIds,
|
|
|
- source: 2 // 来源 1 WWW 2 小程序
|
|
|
- })
|
|
|
- .then(response => {
|
|
|
- if (response.data) {
|
|
|
- this.listData = this.ReturnNewProducts(this.listData, response.data)
|
|
|
- }
|
|
|
- this.priceLoading = false
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- ReturnNewProducts(Array, list) {
|
|
|
- //处理对应商品ID的商品价格
|
|
|
- let NewArray = []
|
|
|
- Array.map(item => {
|
|
|
- for (let i = 0; i < list.length; i++) {
|
|
|
- if (item.productId == list[i].productId) {
|
|
|
- NewArray.push(Object.assign(item, list[i]))
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- return NewArray
|
|
|
- },
|
|
|
- handleScreen(e) {
|
|
|
- let index = e.currentTarget.dataset.index
|
|
|
- if (index == 0) {
|
|
|
- this.tabIndex = 0
|
|
|
- this.isSearchSalesFirst = true
|
|
|
- this.isSearchMoodFirst = true
|
|
|
- this.isSearchPriceFirst = true
|
|
|
- this.listQuery.sortType = 1
|
|
|
- this.listQuery.sortField = ''
|
|
|
- this.getListFromServer()
|
|
|
- } else if (index == 1) {
|
|
|
- this.tabIndex = 1
|
|
|
- this.isSearchSalesFirst = false
|
|
|
- this.isSearchMoodFirst = true
|
|
|
- this.isSearchPriceFirst = true
|
|
|
- this.isSearchSales = !this.isSearchSales
|
|
|
- if (this.isSearchSales) {
|
|
|
- this.listQuery.sortType = 1
|
|
|
- } else {
|
|
|
- this.listQuery.sortType = 0
|
|
|
- }
|
|
|
- this.listQuery.sortField = 'sales'
|
|
|
- this.getListFromServer()
|
|
|
- } else if (index == 2) {
|
|
|
- this.tabIndex = 2
|
|
|
- this.isSearchSalesFirst = true
|
|
|
- this.isSearchPriceFirst = true
|
|
|
- this.isSearchMoodFirst = false
|
|
|
- this.isSearchMood = !this.isSearchMood
|
|
|
- if (this.isSearchMood) {
|
|
|
- this.listQuery.sortType = 1
|
|
|
- } else {
|
|
|
- this.listQuery.sortType = 0
|
|
|
- }
|
|
|
- this.listQuery.sortField = 'favorite'
|
|
|
- this.getListFromServer()
|
|
|
- } else if (index == 3) {
|
|
|
- this.tabIndex = 3
|
|
|
- this.isSearchSalesFirst = true
|
|
|
- this.isSearchMoodFirst = true
|
|
|
- this.isSearchPriceFirst = false
|
|
|
- this.isSearchPrice = !this.isSearchPrice
|
|
|
- if (this.isSearchPrice) {
|
|
|
- this.listQuery.sortType = 1
|
|
|
- } else {
|
|
|
- this.listQuery.sortType = 0
|
|
|
- }
|
|
|
- this.listQuery.sortField = 'price'
|
|
|
- this.getListFromServer()
|
|
|
- } else if (index == 4) {
|
|
|
- this.brandParam.keyword = this.listQuery.keyword
|
|
|
- this.showRightDrawer()
|
|
|
- }
|
|
|
- },
|
|
|
- showRightDrawer() {
|
|
|
- //弹出右侧抽屉
|
|
|
- this.rightDrawer = true
|
|
|
- },
|
|
|
- closeDrawer(e) {
|
|
|
- //关闭抽屉
|
|
|
- this.rightDrawer = false
|
|
|
- },
|
|
|
- PromotionsFormat(promo) {
|
|
|
- //促销活动类型数据处理
|
|
|
- if (promo != null) {
|
|
|
- if (promo.type == 1 && promo.mode == 1) {
|
|
|
- return true
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- return false
|
|
|
- },
|
|
|
- isShowVipFlag(pros) {
|
|
|
- /**
|
|
|
- *显示SVIP和超级会员价格：
|
|
|
- * 个人机构（不是超级会员，但价格所有机构可见），
|
|
|
- * 资质机构（不是超级会员，但价格所有机构可见或仅会员可见），
|
|
|
- * 超级会员（价格所有机构可见或仅会员可见），超级会员（是医美机构，价格仅医美可见）
|
|
|
- *商品价格是否可见：priceFlag 0:所有机构可见 1：未公开价格 2：仅会员可见 3：仅医美机构可见
|
|
|
- * 普通机构
|
|
|
- * 超级会员 && priceFlag === 0
|
|
|
- * 资质机构
|
|
|
- * priceFlag !== 1 ||
|
|
|
- * 超级会员
|
|
|
- * 商品priceFlag === 3 && 是否是医美机构
|
|
|
- */
|
|
|
- // 未登录 || 非会员
|
|
|
- if(!this.hasLogin || !this.vipFlag === 1) return false
|
|
|
- // 商品所有机构可见
|
|
|
- if(pros.priceFlag === 0 ) return true
|
|
|
- // 商品价格仅资质机构可见
|
|
|
- if(pros.priceFlag === 2 && this.userIdentity === 2) return true
|
|
|
- // 商品价格仅医美机构可见
|
|
|
- if(pros.priceFlag === 3 && this.userIdentity === 2 && this.firstClubType == 1) return true
|
|
|
- // 其它
|
|
|
- return false
|
|
|
- },
|
|
|
- onShowClose() {
|
|
|
- //输入框输入时触发
|
|
|
- this.inputEmpty(this.listQuery.keyword)
|
|
|
- },
|
|
|
- onFocus() {
|
|
|
- //输入框获取焦点时触发
|
|
|
- this.inputEmpty(this.listQuery.keyword)
|
|
|
- this.initGetSerachRecord()
|
|
|
- },
|
|
|
- delInputText() {
|
|
|
- //清除输入框内容
|
|
|
- this.listQuery.keyword = ''
|
|
|
- this.isShowClose = false
|
|
|
- this.isShowWrapper = false
|
|
|
- this.inputEmpty(this.listQuery.keyword)
|
|
|
- this.initGetSerachRecord()
|
|
|
- },
|
|
|
- keywordsClick(item) {
|
|
|
- //关键词搜索与历史搜索
|
|
|
- this.listQuery.keyword = item
|
|
|
- this.isShowClose = true
|
|
|
- this.isFocus = false
|
|
|
- this.subMitSearch()
|
|
|
- },
|
|
|
- keywordsClickPath(item) {
|
|
|
- this.$api.FlooryNavigateTo(item)
|
|
|
- },
|
|
|
- confirmDetele() {
|
|
|
- //清空历史记录
|
|
|
- this.$util.modal('提示', '确定删除历史记录？', '确定', '取消', true, () => {
|
|
|
- this.ProductService.GetDeleteProductSearchHistory({ userId: this.userId })
|
|
|
- .then(response => {
|
|
|
- this.$util.msg('删除成功', 2000, true, 'success')
|
|
|
- this.serachRecordList = []
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- inputEmpty(val) {
|
|
|
- this.isShowWrapper = false
|
|
|
- if (val != '') {
|
|
|
- this.isShowClose = true
|
|
|
- this.isFocus = true
|
|
|
- } else {
|
|
|
- this.isShowClose = false
|
|
|
- this.isFocus = true
|
|
|
- }
|
|
|
- },
|
|
|
- isInterceptHtmlFn(text) {
|
|
|
- let name = this.$reg.interceptHtmlFn(text)
|
|
|
- return name
|
|
|
- },
|
|
|
- navToDetailPage(id) {
|
|
|
- this.isModallayer = true
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
- this.isModallayer = false
|
|
|
- },
|
|
|
- setScrollHeight() {
|
|
|
- let obj = {}
|
|
|
- const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
|
|
|
- uni.getSystemInfo({
|
|
|
- success: res => {
|
|
|
- this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
|
|
|
- this.drawerH = res.windowHeight - uni.upx2px(180) - this.height
|
|
|
- }
|
|
|
- })
|
|
|
- this.windowHeight = windowHeight - 1
|
|
|
- this.scrollHeight = windowHeight - 1
|
|
|
- },
|
|
|
- toLoginPage() {
|
|
|
- let searchLoginType = 'search'
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/login/login?type=${searchLoginType}`
|
|
|
- })
|
|
|
- },
|
|
|
- selectTabs(index) {
|
|
|
- //选择搜索项
|
|
|
- this.showBubblePopup = false
|
|
|
- this.searchKeyType = index
|
|
|
- switch (index) {
|
|
|
- case 1:
|
|
|
- this.tabValue = '产品'
|
|
|
- break
|
|
|
- case 2:
|
|
|
- this.tabValue = '供应商'
|
|
|
- break
|
|
|
- case 3:
|
|
|
- this.tabValue = '项目仪器'
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
- showAllBrands() {
|
|
|
- // 显示全部品牌
|
|
|
- this.isShowAllBrands = true
|
|
|
- this.brandLists = this.defaultBrandLists
|
|
|
- },
|
|
|
- choiceBrand(brand, index) {
|
|
|
- // 选择品牌
|
|
|
- brand.isChecked = !brand.isChecked
|
|
|
- if (brand.isChecked) {
|
|
|
- this.checkedBrandList.push(brand.id)
|
|
|
- } else {
|
|
|
- this.checkedBrandList.splice(index, 1)
|
|
|
- }
|
|
|
- this.isAllcheckedBrand = false
|
|
|
- this.checkedBrandLength = this.checkedBrandList.length
|
|
|
- console.log('checkedBrandList', this.checkedBrandList)
|
|
|
- this.listQuery.brandIds = this.checkedBrandList.join(',')
|
|
|
- console.log('this.listQuery.brandIds', this.listQuery.brandIds)
|
|
|
- },
|
|
|
- choiceBrandAll(){
|
|
|
- // 点击选择全部品牌
|
|
|
- this.isAllcheckedBrand = true
|
|
|
- this.listQuery.brandIds = ''
|
|
|
- this.brandLists.forEach(el=>{
|
|
|
- el.isChecked = false
|
|
|
- })
|
|
|
- },
|
|
|
- choiceNewType() {
|
|
|
- // 选择筛选项新品
|
|
|
- this.isChoiceNewType = !this.isChoiceNewType
|
|
|
- if(this.isChoiceNewType){
|
|
|
- this.listQuery.newFlag = 1
|
|
|
- }else{
|
|
|
- this.listQuery.newFlag = 0
|
|
|
- }
|
|
|
- },
|
|
|
- choiceActiType() {
|
|
|
- // 选择筛选项促销商品
|
|
|
- this.isChoiceActiType = !this.isChoiceActiType
|
|
|
- if(this.isChoiceNewType){
|
|
|
- this.listQuery.promotionFlag = 1
|
|
|
- }else{
|
|
|
- this.listQuery.promotionFlag = 0
|
|
|
- }
|
|
|
- },
|
|
|
- topBubble() {
|
|
|
- console.log('1111111111')
|
|
|
- //显隐搜索项
|
|
|
- this.showBubblePopup = !this.showBubblePopup
|
|
|
- }
|
|
|
- },
|
|
|
- onShareAppMessage(res) {
|
|
|
- //分享转发
|
|
|
- if (res.from === 'button') {
|
|
|
- // 来自页面内转发按钮
|
|
|
- }
|
|
|
- return {
|
|
|
- title: `点击查看“${this.listQuery.keyword}”相关的商品`,
|
|
|
- path: `pages/search/search?type=share&keyWord=${this.listQuery.keyword}`
|
|
|
- }
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.setScrollHeight()
|
|
|
- this.GetHomeHotSearchTerms()
|
|
|
- }
|
|
|
+ components: {
|
|
|
+ modalLayer,
|
|
|
+ uniGrader
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
+ isIphoneX: this.$store.state.isIphoneX,
|
|
|
+ shopId: 0,
|
|
|
+ userId: 0,
|
|
|
+ tabValue: '产品',
|
|
|
+ themeClass: 'block',
|
|
|
+ showBubblePopup: false,
|
|
|
+ vipFlag: 0,
|
|
|
+ userIdentity: 0,
|
|
|
+ firstClubType: 0,
|
|
|
+ searchKeyType: 1,
|
|
|
+ tabIndex: 0,
|
|
|
+ rightDrawer: false,
|
|
|
+ isShowAllBrands: false,
|
|
|
+ isSearchSalesFirst: true,
|
|
|
+ isSearchMoodFirst: true,
|
|
|
+ isSearchPriceFirst: true,
|
|
|
+ isSearchSales: true,
|
|
|
+ isSearchMood: true,
|
|
|
+ isSearchPrice: true,
|
|
|
+ isChoiceNewType: false,
|
|
|
+ isChoiceActiType: false,
|
|
|
+ isAllcheckedBrand: false,
|
|
|
+ isShowClose: false, //是否显示清空输入框图标
|
|
|
+ isSearchHistory: false, //是都显示搜索历史
|
|
|
+ serachRecordList: [], //历史搜索记录
|
|
|
+ instrumentHotSearch: [],
|
|
|
+ productHotSearch: [],
|
|
|
+ isShowWrapper: false,
|
|
|
+ isModallayer: false,
|
|
|
+ isFocus: false,
|
|
|
+ priceLoading: true,
|
|
|
+ windowHeight: '',
|
|
|
+ showEmpty: false,
|
|
|
+ scrollHeight: '',
|
|
|
+ listData: [],
|
|
|
+ brandLists: [],
|
|
|
+ defaultBrandLists: [],
|
|
|
+ checkedBrandList: [],
|
|
|
+ checkedBrandLength: 0,
|
|
|
+ productIds: '', //查询价格的商品ID
|
|
|
+ showLoading: false,
|
|
|
+ loadingNow: true,
|
|
|
+ loadingText: '上拉加载更多',
|
|
|
+ pullFlag: true,
|
|
|
+ listQuery: {
|
|
|
+ identity: 0,
|
|
|
+ keyword: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ sortField: '',
|
|
|
+ sortType: 1,
|
|
|
+ newType: 1,
|
|
|
+ actiType: 1,
|
|
|
+ brandIds: '', // 品牌Id
|
|
|
+ newFlag: 0, // 查询新品标记，默认0，新品1
|
|
|
+ promotionFlag: 0 // 查询促销标记，默认0，促销1
|
|
|
+ },
|
|
|
+ brandParam: {
|
|
|
+ keyword: '',
|
|
|
+ id: '',
|
|
|
+ idType: '',
|
|
|
+ identity: 0
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ height: 0,
|
|
|
+ drawerH: 0, // 抽屉内部scrollview高度
|
|
|
+ showLibaray: false,
|
|
|
+ libraryWordList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin', 'userInfo', 'clubType', 'identity'])
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ console.log(option)
|
|
|
+ if (option.type == 'share') {
|
|
|
+ wxLogin.wxLoginAuthorize()
|
|
|
+ }
|
|
|
+ this.initGetStotage(option)
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ NumFormat: function(text) {
|
|
|
+ //处理金额
|
|
|
+ return Number(text).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 搜素关键词库
|
|
|
+ fetchLibraryWordList: myDebounce(async function() {
|
|
|
+ try {
|
|
|
+ const keyword = this.listQuery.keyword
|
|
|
+ const res = await this.LibraryService.GetSearchKeywordList({ keyword })
|
|
|
+ if (!res.data) {
|
|
|
+ this.libraryWordList = []
|
|
|
+ }
|
|
|
+ this.libraryWordList = res.data.map(item => {
|
|
|
+ item.text = item.keyword.replace(keyword, `<span sytle="color:#E15616;">${keyword}</span>`)
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ this.showLibaray = true
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }),
|
|
|
+
|
|
|
+ // 关键词点击
|
|
|
+ onLibraryClick(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/search/search-library?keyword=${item.keyword}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 失去焦点
|
|
|
+ onBlur() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.showLibaray = false
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+
|
|
|
+ async initGetStotage(option) {
|
|
|
+ const userInfo = await this.$api.getStorage()
|
|
|
+ this.userId = userInfo.userId ? userInfo.userId : 0
|
|
|
+ this.shopId = userInfo.shopId ? userInfo.shopId : 0
|
|
|
+ this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
|
|
|
+ this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
|
|
|
+ this.listQuery.identity = this.identity
|
|
|
+ this.firstClubType = this.clubType
|
|
|
+ if (option.keyWord) {
|
|
|
+ this.listQuery.keyword = option.keyWord
|
|
|
+ this.setSearchHistoryAdd()
|
|
|
+ this.getListFromServer()
|
|
|
+ this.isFocus = false
|
|
|
+ } else {
|
|
|
+ this.isFocus = true
|
|
|
+ this.initGetSerachRecord()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ GetHomeHotSearchTerms() {
|
|
|
+ //金刚区分类
|
|
|
+ this.CommonService.GetHomeHotSearchTerms({})
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data
|
|
|
+ console.log(data)
|
|
|
+ this.instrumentHotSearch = data.instrumentHotSearch
|
|
|
+ this.productHotSearch = data.productHotSearch
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initGetSerachRecord() {
|
|
|
+ //查询搜索历史记录
|
|
|
+ this.ProductService.GetProductSearchHistory({ userId: this.userId }).then(response => {
|
|
|
+ if (response.code == 0) {
|
|
|
+ this.serachRecordList = response.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCommoditySearchQUeryBrand() {
|
|
|
+ // 查询筛选项品牌
|
|
|
+ this.ProductService.getCommoditySearchQUeryBrand(this.brandParam)
|
|
|
+ .then(response => {
|
|
|
+ const data = response.data
|
|
|
+ this.defaultBrandLists = data.map((el, index) => {
|
|
|
+ el.isChecked = false
|
|
|
+ return el
|
|
|
+ })
|
|
|
+ if (this.defaultBrandLists.length > 11) {
|
|
|
+ this.isShowAllBrands = false
|
|
|
+ } else {
|
|
|
+ this.isShowAllBrands = true
|
|
|
+ }
|
|
|
+ this.brandLists = this.defaultBrandLists.slice(0, 11)
|
|
|
+ console.log('品牌=============>', this.brandLists)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.log('查询品牌列表异常')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ subMitSearch() {
|
|
|
+ //搜索
|
|
|
+ if (this.listQuery.keyword == '') {
|
|
|
+ this.$util.msg('请输入搜索关键词', 2000)
|
|
|
+ } else {
|
|
|
+ switch (this.searchKeyType) {
|
|
|
+ case 1:
|
|
|
+ this.listData = []
|
|
|
+ this.brandParam.keyword = this.listQuery.keyword
|
|
|
+ this.setSearchHistoryAdd()
|
|
|
+ this.getCommoditySearchQUeryBrand()
|
|
|
+ this.getListFromServer()
|
|
|
+ this.isFocus = false
|
|
|
+ // 友盟埋点商品搜索点击
|
|
|
+ if (process.env.NODE_ENV != 'development') {
|
|
|
+ this.$uma.trackEvent('Um_Event_SearchProductSubmit', {
|
|
|
+ Um_Key_Keyword: `${this.listQuery.keyword}`,
|
|
|
+ Um_Key_PageName: '商品',
|
|
|
+ Um_Key_SourcePage: '搜索商品'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ this.setSearchHistoryAdd()
|
|
|
+ this.$api.navigateTo(`/pages/search/search-supplier?keyWord=${this.listQuery.keyword}`)
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ this.setSearchHistoryAdd()
|
|
|
+ this.$api.navigateTo(`/pages/search/search-instrument?keyWord=${this.listQuery.keyword}`)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handSearchList() {
|
|
|
+ //确定筛选
|
|
|
+ this.rightDrawer = false
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ this.getListFromServer(false)
|
|
|
+ },
|
|
|
+ scrolltolower() {
|
|
|
+ if (this.total > this.listData.length && this.pullFlag) {
|
|
|
+ this.getListFromServer(true)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getListFromServer(loadMore) {
|
|
|
+ this.showLoading = true
|
|
|
+ this.loadingNow = true
|
|
|
+ this.loadingText = '加载中'
|
|
|
+ this.showEmpty = false
|
|
|
+ if (loadMore) {
|
|
|
+ this.listQuery.pageNum += 1
|
|
|
+ }
|
|
|
+ this.ProductService.GetProductSearchList(this.listQuery)
|
|
|
+ .then(response => {
|
|
|
+ this.isShowWrapper = true
|
|
|
+ const resData = JSON.parse(response.data)
|
|
|
+ const resList = resData.items
|
|
|
+ if (resList && resList.length > 0) {
|
|
|
+ this.total = resData.total
|
|
|
+ this.showEmpty = false
|
|
|
+ if (loadMore) {
|
|
|
+ this.listData = [...this.listData, ...resList]
|
|
|
+ this.getProductPrice()
|
|
|
+ } else {
|
|
|
+ this.listData = [...resList]
|
|
|
+ this.getProductPrice()
|
|
|
+ }
|
|
|
+ // 防上拉暴滑
|
|
|
+ this.pullFlag = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.pullFlag = true
|
|
|
+ }, 500)
|
|
|
+ // 底部提示文案
|
|
|
+ if (this.totalPage > this.listData.length) {
|
|
|
+ this.loadingText = '上拉加载更多'
|
|
|
+ } else {
|
|
|
+ this.showLoading = true
|
|
|
+ this.loadingNow = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!loadMore) {
|
|
|
+ this.showEmpty = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.log('商品搜索异常', error.msg)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setSearchHistoryAdd() {
|
|
|
+ //添加搜索记录
|
|
|
+ if (!this.hasLogin) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.ProductService.GetAddProductSearchHistory({ userId: this.userId, keyword: this.listQuery.keyword })
|
|
|
+ .then(response => {
|
|
|
+ //此为每次搜索同时添加用户的搜索记录
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getProductPrice() {
|
|
|
+ //获取价格
|
|
|
+ let productIdArr = []
|
|
|
+ this.listData.map(item => {
|
|
|
+ // 0公开价格 1不公开价格 2仅对资质机构公开
|
|
|
+ productIdArr.push(item.productId)
|
|
|
+ })
|
|
|
+ this.priceLoading = true
|
|
|
+ this.productIds = productIdArr.join(',')
|
|
|
+ this.ProductService.querySearchProductPrice({
|
|
|
+ userId: this.userId,
|
|
|
+ productIds: this.productIds,
|
|
|
+ source: 2 // 来源 1 WWW 2 小程序
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ if (response.data) {
|
|
|
+ this.listData = this.ReturnNewProducts(this.listData, response.data)
|
|
|
+ }
|
|
|
+ this.priceLoading = false
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ ReturnNewProducts(Array, list) {
|
|
|
+ //处理对应商品ID的商品价格
|
|
|
+ let NewArray = []
|
|
|
+ Array.map(item => {
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ if (item.productId == list[i].productId) {
|
|
|
+ NewArray.push(Object.assign(item, list[i]))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return NewArray
|
|
|
+ },
|
|
|
+ handleScreen(e) {
|
|
|
+ let index = e.currentTarget.dataset.index
|
|
|
+ if (index == 0) {
|
|
|
+ this.tabIndex = 0
|
|
|
+ this.isSearchSalesFirst = true
|
|
|
+ this.isSearchMoodFirst = true
|
|
|
+ this.isSearchPriceFirst = true
|
|
|
+ this.listQuery.sortType = 1
|
|
|
+ this.listQuery.sortField = ''
|
|
|
+ this.getListFromServer()
|
|
|
+ } else if (index == 1) {
|
|
|
+ this.tabIndex = 1
|
|
|
+ this.isSearchSalesFirst = false
|
|
|
+ this.isSearchMoodFirst = true
|
|
|
+ this.isSearchPriceFirst = true
|
|
|
+ this.isSearchSales = !this.isSearchSales
|
|
|
+ if (this.isSearchSales) {
|
|
|
+ this.listQuery.sortType = 1
|
|
|
+ } else {
|
|
|
+ this.listQuery.sortType = 0
|
|
|
+ }
|
|
|
+ this.listQuery.sortField = 'sales'
|
|
|
+ this.getListFromServer()
|
|
|
+ } else if (index == 2) {
|
|
|
+ this.tabIndex = 2
|
|
|
+ this.isSearchSalesFirst = true
|
|
|
+ this.isSearchPriceFirst = true
|
|
|
+ this.isSearchMoodFirst = false
|
|
|
+ this.isSearchMood = !this.isSearchMood
|
|
|
+ if (this.isSearchMood) {
|
|
|
+ this.listQuery.sortType = 1
|
|
|
+ } else {
|
|
|
+ this.listQuery.sortType = 0
|
|
|
+ }
|
|
|
+ this.listQuery.sortField = 'favorite'
|
|
|
+ this.getListFromServer()
|
|
|
+ } else if (index == 3) {
|
|
|
+ this.tabIndex = 3
|
|
|
+ this.isSearchSalesFirst = true
|
|
|
+ this.isSearchMoodFirst = true
|
|
|
+ this.isSearchPriceFirst = false
|
|
|
+ this.isSearchPrice = !this.isSearchPrice
|
|
|
+ if (this.isSearchPrice) {
|
|
|
+ this.listQuery.sortType = 1
|
|
|
+ } else {
|
|
|
+ this.listQuery.sortType = 0
|
|
|
+ }
|
|
|
+ this.listQuery.sortField = 'price'
|
|
|
+ this.getListFromServer()
|
|
|
+ } else if (index == 4) {
|
|
|
+ this.brandParam.keyword = this.listQuery.keyword
|
|
|
+ this.showRightDrawer()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showRightDrawer() {
|
|
|
+ //弹出右侧抽屉
|
|
|
+ this.rightDrawer = true
|
|
|
+ },
|
|
|
+ closeDrawer(e) {
|
|
|
+ //关闭抽屉
|
|
|
+ this.rightDrawer = false
|
|
|
+ },
|
|
|
+ PromotionsFormat(promo) {
|
|
|
+ //促销活动类型数据处理
|
|
|
+ if (promo != null) {
|
|
|
+ if (promo.type == 1 && promo.mode == 1) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ isShowVipFlag(pros) {
|
|
|
+ /**
|
|
|
+ *显示SVIP和超级会员价格：
|
|
|
+ * 个人机构（不是超级会员，但价格所有机构可见），
|
|
|
+ * 资质机构（不是超级会员，但价格所有机构可见或仅会员可见），
|
|
|
+ * 超级会员（价格所有机构可见或仅会员可见），超级会员（是医美机构，价格仅医美可见）
|
|
|
+ *商品价格是否可见：priceFlag 0:所有机构可见 1：未公开价格 2：仅会员可见 3：仅医美机构可见
|
|
|
+ * 普通机构
|
|
|
+ * 超级会员 && priceFlag === 0
|
|
|
+ * 资质机构
|
|
|
+ * priceFlag !== 1 ||
|
|
|
+ * 超级会员
|
|
|
+ * 商品priceFlag === 3 && 是否是医美机构
|
|
|
+ */
|
|
|
+ // 未登录 || 非会员
|
|
|
+ if (!this.hasLogin || !this.vipFlag === 1) return false
|
|
|
+ // 商品所有机构可见
|
|
|
+ if (pros.priceFlag === 0) return true
|
|
|
+ // 商品价格仅资质机构可见
|
|
|
+ if (pros.priceFlag === 2 && this.userIdentity === 2) return true
|
|
|
+ // 商品价格仅医美机构可见
|
|
|
+ if (pros.priceFlag === 3 && this.userIdentity === 2 && this.firstClubType == 1) return true
|
|
|
+ // 其它
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ onShowClose() {
|
|
|
+ //输入框输入时触发
|
|
|
+ this.inputEmpty(this.listQuery.keyword)
|
|
|
+ this.fetchLibraryWordList()
|
|
|
+ },
|
|
|
+ onFocus() {
|
|
|
+ //输入框获取焦点时触发
|
|
|
+ this.inputEmpty(this.listQuery.keyword)
|
|
|
+ this.initGetSerachRecord()
|
|
|
+ },
|
|
|
+ delInputText() {
|
|
|
+ //清除输入框内容
|
|
|
+ this.listQuery.keyword = ''
|
|
|
+ this.isShowClose = false
|
|
|
+ this.isShowWrapper = false
|
|
|
+ this.inputEmpty(this.listQuery.keyword)
|
|
|
+ this.initGetSerachRecord()
|
|
|
+ },
|
|
|
+ keywordsClick(item) {
|
|
|
+ //关键词搜索与历史搜索
|
|
|
+ this.listQuery.keyword = item
|
|
|
+ this.isShowClose = true
|
|
|
+ this.isFocus = false
|
|
|
+ this.subMitSearch()
|
|
|
+ },
|
|
|
+ keywordsClickPath(item) {
|
|
|
+ this.$api.FlooryNavigateTo(item)
|
|
|
+ },
|
|
|
+ confirmDetele() {
|
|
|
+ //清空历史记录
|
|
|
+ this.$util.modal('提示', '确定删除历史记录？', '确定', '取消', true, () => {
|
|
|
+ this.ProductService.GetDeleteProductSearchHistory({ userId: this.userId })
|
|
|
+ .then(response => {
|
|
|
+ this.$util.msg('删除成功', 2000, true, 'success')
|
|
|
+ this.serachRecordList = []
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ inputEmpty(val) {
|
|
|
+ this.isShowWrapper = false
|
|
|
+ if (val != '') {
|
|
|
+ this.isShowClose = true
|
|
|
+ this.isFocus = true
|
|
|
+ } else {
|
|
|
+ this.isShowClose = false
|
|
|
+ this.isFocus = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isInterceptHtmlFn(text) {
|
|
|
+ let name = this.$reg.interceptHtmlFn(text)
|
|
|
+ return name
|
|
|
+ },
|
|
|
+ navToDetailPage(id) {
|
|
|
+ this.isModallayer = true
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
+ this.isModallayer = false
|
|
|
+ },
|
|
|
+ setScrollHeight() {
|
|
|
+ let obj = {}
|
|
|
+ const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: res => {
|
|
|
+ this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
|
|
|
+ this.drawerH = res.windowHeight - uni.upx2px(180) - this.height
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.windowHeight = windowHeight - 1
|
|
|
+ this.scrollHeight = windowHeight - 1
|
|
|
+ },
|
|
|
+ toLoginPage() {
|
|
|
+ let searchLoginType = 'search'
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/login/login?type=${searchLoginType}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectTabs(index) {
|
|
|
+ //选择搜索项
|
|
|
+ this.showBubblePopup = false
|
|
|
+ this.searchKeyType = index
|
|
|
+ switch (index) {
|
|
|
+ case 1:
|
|
|
+ this.tabValue = '产品'
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ this.tabValue = '供应商'
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ this.tabValue = '项目仪器'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showAllBrands() {
|
|
|
+ // 显示全部品牌
|
|
|
+ this.isShowAllBrands = true
|
|
|
+ this.brandLists = this.defaultBrandLists
|
|
|
+ },
|
|
|
+ choiceBrand(brand, index) {
|
|
|
+ // 选择品牌
|
|
|
+ brand.isChecked = !brand.isChecked
|
|
|
+ if (brand.isChecked) {
|
|
|
+ this.checkedBrandList.push(brand.id)
|
|
|
+ } else {
|
|
|
+ this.checkedBrandList.splice(index, 1)
|
|
|
+ }
|
|
|
+ this.isAllcheckedBrand = false
|
|
|
+ this.checkedBrandLength = this.checkedBrandList.length
|
|
|
+ console.log('checkedBrandList', this.checkedBrandList)
|
|
|
+ this.listQuery.brandIds = this.checkedBrandList.join(',')
|
|
|
+ console.log('this.listQuery.brandIds', this.listQuery.brandIds)
|
|
|
+ },
|
|
|
+ choiceBrandAll() {
|
|
|
+ // 点击选择全部品牌
|
|
|
+ this.isAllcheckedBrand = true
|
|
|
+ this.listQuery.brandIds = ''
|
|
|
+ this.brandLists.forEach(el => {
|
|
|
+ el.isChecked = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ choiceNewType() {
|
|
|
+ // 选择筛选项新品
|
|
|
+ this.isChoiceNewType = !this.isChoiceNewType
|
|
|
+ if (this.isChoiceNewType) {
|
|
|
+ this.listQuery.newFlag = 1
|
|
|
+ } else {
|
|
|
+ this.listQuery.newFlag = 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ choiceActiType() {
|
|
|
+ // 选择筛选项促销商品
|
|
|
+ this.isChoiceActiType = !this.isChoiceActiType
|
|
|
+ if (this.isChoiceNewType) {
|
|
|
+ this.listQuery.promotionFlag = 1
|
|
|
+ } else {
|
|
|
+ this.listQuery.promotionFlag = 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ topBubble() {
|
|
|
+ console.log('1111111111')
|
|
|
+ //显隐搜索项
|
|
|
+ this.showBubblePopup = !this.showBubblePopup
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ //分享转发
|
|
|
+ if (res.from === 'button') {
|
|
|
+ // 来自页面内转发按钮
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ title: `点击查看“${this.listQuery.keyword}”相关的商品`,
|
|
|
+ path: `pages/search/search?type=share&keyWord=${this.listQuery.keyword}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.setScrollHeight()
|
|
|
+ this.GetHomeHotSearchTerms()
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
@import '@/uni.scss';
|
|
|
page {
|
|
|
- background-color: #f7f7f7 !important;
|
|
|
+ background-color: #f7f7f7 !important;
|
|
|
}
|
|
|
-.search-main-bubble{
|
|
|
- width: 100%;
|
|
|
- height: 88rpx;
|
|
|
- position: fixed;
|
|
|
- top: 30rpx;
|
|
|
- left: 0;
|
|
|
- z-index: 1200;
|
|
|
- box-sizing: border-box;
|
|
|
- line-height: 70rpx;
|
|
|
- color: #666666;
|
|
|
- font-size: $font-size-24;
|
|
|
- text-align: center;
|
|
|
+.search-main-bubble {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ position: fixed;
|
|
|
+ top: 30rpx;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1200;
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 70rpx;
|
|
|
+ color: #666666;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
.search-main {
|
|
|
- width: 100%;
|
|
|
- height: 88rpx;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- background: #ffffff;
|
|
|
- z-index: 990;
|
|
|
- box-sizing: border-box;
|
|
|
- .tui-header-tab {
|
|
|
- height: 88rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 9rpx 0;
|
|
|
- float: left;
|
|
|
- .search-tab {
|
|
|
- width: 160rpx;
|
|
|
- height: 70rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- color: #666666;
|
|
|
- font-size: $font-size-24;
|
|
|
- text-align: center;
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- .icon-xiangxiajiantou {
|
|
|
- margin-left: 10rpx;
|
|
|
- font-size: $font-size-30;
|
|
|
- }
|
|
|
- }
|
|
|
- .gosearch-btn {
|
|
|
- width: 470rpx;
|
|
|
- height: 100%;
|
|
|
- float: left;
|
|
|
- border-radius: 40rpx;
|
|
|
- background: #f0f0f0;
|
|
|
- margin: 0 auto;
|
|
|
- padding: 0 20rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- padding-left: 70rpx;
|
|
|
- color: #8a8a8a;
|
|
|
- background: #f7f7f7;
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- .icon-sousuo {
|
|
|
- width: 70rpx;
|
|
|
- height: 70rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- text-align: center;
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- font-size: 34rpx;
|
|
|
- color: #8a8a8a;
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
- .icon-shanchu1 {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #8a8a8a;
|
|
|
- position: absolute;
|
|
|
- right: 10rpx;
|
|
|
- top: 0;
|
|
|
- padding: 0 10rpx;
|
|
|
- z-index: 100;
|
|
|
- }
|
|
|
- .input {
|
|
|
- width: 400rpx;
|
|
|
- height: 100%;
|
|
|
- float: left;
|
|
|
- font-size: $font-size-24;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-right: 66rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .search-btn {
|
|
|
- width: 120rpx;
|
|
|
- height: 70rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- float: right;
|
|
|
- text-align: center;
|
|
|
- color: #666666;
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: #ffffff;
|
|
|
+ z-index: 990;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .tui-header-tab {
|
|
|
+ height: 88rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 9rpx 0;
|
|
|
+ float: left;
|
|
|
+ .search-tab {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ .icon-xiangxiajiantou {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .gosearch-btn {
|
|
|
+ width: 470rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ padding-left: 70rpx;
|
|
|
+ color: #8a8a8a;
|
|
|
+ background: #f7f7f7;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .icon-sousuo {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ font-size: 34rpx;
|
|
|
+ color: #8a8a8a;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .icon-shanchu1 {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #8a8a8a;
|
|
|
+ position: absolute;
|
|
|
+ right: 10rpx;
|
|
|
+ top: 0;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ width: 400rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 66rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-btn {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ float: right;
|
|
|
+ text-align: center;
|
|
|
+ color: #E15616;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.search-container {
|
|
|
- padding-top: 89rpx;
|
|
|
+ padding-top: 89rpx;
|
|
|
}
|
|
|
/*screen*/
|
|
|
.tui-header-screen {
|
|
|
- width: 100%;
|
|
|
- height: 88rpx;
|
|
|
- float: left;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #fff;
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
}
|
|
|
.tui-screen-top,
|
|
|
.tui-screen-bottom {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #999999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999999;
|
|
|
}
|
|
|
.tui-screen-top {
|
|
|
- height: 88rpx;
|
|
|
- position: relative;
|
|
|
- background: #fff;
|
|
|
- border-bottom: 1px solid #efefef;
|
|
|
+ height: 88rpx;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ border-bottom: 1px solid #efefef;
|
|
|
}
|
|
|
.tui-top-item {
|
|
|
- height: 28rpx;
|
|
|
- line-height: 28rpx;
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ height: 28rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
.icon-shangxiajiantou {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #999999;
|
|
|
- margin-left: 8rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin-left: 8rpx;
|
|
|
}
|
|
|
.tui-topitem-active {
|
|
|
- color: #e15616;
|
|
|
+ color: #e15616;
|
|
|
}
|
|
|
|
|
|
.tui-screen-bottom {
|
|
|
- height: 100rpx;
|
|
|
- padding: 0 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: 24rpx;
|
|
|
- align-items: center;
|
|
|
- overflow: hidden;
|
|
|
+ height: 100rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 24rpx;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.tui-bottom-text {
|
|
|
- line-height: 26rpx;
|
|
|
- max-width: 82%;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
+ line-height: 26rpx;
|
|
|
+ max-width: 82%;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.tui-bottom-item {
|
|
|
- flex: 1;
|
|
|
- width: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 0 12rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #f7f7f7;
|
|
|
- margin-right: 20rpx;
|
|
|
- white-space: nowrap;
|
|
|
- height: 60rpx;
|
|
|
- border-radius: 40rpx;
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #f7f7f7;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
}
|
|
|
|
|
|
.tui-bottom-item:last-child {
|
|
|
- margin-right: 0;
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
|
|
|
.tui-btmItem-active {
|
|
|
- background: #fcedea !important;
|
|
|
- color: #e15616;
|
|
|
- font-weight: bold;
|
|
|
- position: relative;
|
|
|
+ background: #fcedea !important;
|
|
|
+ color: #e15616;
|
|
|
+ font-weight: bold;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
.tui-btmItem-active::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- border: 1rpx solid #e15616;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 40rpx;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ border: 1rpx solid #e15616;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
|
|
|
.tui-btmItem-tap {
|
|
|
- position: relative;
|
|
|
- border-bottom-left-radius: 0;
|
|
|
- border-bottom-right-radius: 0;
|
|
|
+ position: relative;
|
|
|
+ border-bottom-left-radius: 0;
|
|
|
+ border-bottom-right-radius: 0;
|
|
|
}
|
|
|
|
|
|
.tui-btmItem-tap::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 22rpx;
|
|
|
- background: #f7f7f7;
|
|
|
- left: 0;
|
|
|
- top: 58rpx;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 22rpx;
|
|
|
+ background: #f7f7f7;
|
|
|
+ left: 0;
|
|
|
+ top: 58rpx;
|
|
|
}
|
|
|
.tui-active {
|
|
|
- color: #e15616;
|
|
|
+ color: #e15616;
|
|
|
}
|
|
|
.tui-icon-ml .tui-icon-class {
|
|
|
- margin-left: 6rpx;
|
|
|
+ margin-left: 6rpx;
|
|
|
}
|
|
|
|
|
|
.tui-ml {
|
|
|
- margin-left: 6rpx;
|
|
|
+ margin-left: 6rpx;
|
|
|
}
|
|
|
|
|
|
.tui-seizeaseat-20 {
|
|
|
- height: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
}
|
|
|
|
|
|
.tui-seizeaseat-30 {
|
|
|
- height: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
}
|
|
|
|
|
|
.tui-icon-middle .tui-icon-class {
|
|
|
- vertical-align: middle;
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
.tui-middle {
|
|
|
- vertical-align: middle;
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
|
.search-container-history {
|
|
|
- width: 100%;
|
|
|
- min-height: 300rpx;
|
|
|
- position: fixed;
|
|
|
- top: 88rpx;
|
|
|
- left: 0;
|
|
|
- z-index: 999;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 300rpx;
|
|
|
+ position: fixed;
|
|
|
+ top: 88rpx;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
}
|
|
|
.s-block {
|
|
|
- background: #ffffff;
|
|
|
- .header {
|
|
|
- font-size: 32rpx;
|
|
|
- padding: 40rpx 24rpx 22rpx 24rpx;
|
|
|
- line-height: 42rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- box-sizing: border-box;
|
|
|
- .icon-shanchu {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #333333;
|
|
|
- float: right;
|
|
|
- padding: 0 10rpx;
|
|
|
- z-index: 10;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- }
|
|
|
- .list {
|
|
|
- width: 100%;
|
|
|
- height: auot;
|
|
|
- float: left;
|
|
|
- padding: 0 24rpx 30rpx 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- .list-title {
|
|
|
- width: 100%;
|
|
|
- height: 40rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- .list-main {
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- view {
|
|
|
- color: #8a8a8a;
|
|
|
- font-size: 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- height: 48rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- border-radius: 24rpx;
|
|
|
- margin: 12rpx 12rpx 12rpx 0;
|
|
|
- padding: 0 20rpx;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- background-color: #f3f3f3;
|
|
|
- .iconfont {
|
|
|
- font-size: $font-size-30;
|
|
|
- color: #e15616;
|
|
|
- margin-left: 12rpx;
|
|
|
- }
|
|
|
- &.list-active {
|
|
|
- background-color: #fef6f3;
|
|
|
- color: #e15616;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ background: #ffffff;
|
|
|
+ .header {
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 40rpx 24rpx 22rpx 24rpx;
|
|
|
+ line-height: 42rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .icon-shanchu {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333333;
|
|
|
+ float: right;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ z-index: 10;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ width: 100%;
|
|
|
+ height: auot;
|
|
|
+ float: left;
|
|
|
+ padding: 0 24rpx 30rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .list-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .list-main {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ view {
|
|
|
+ color: #8a8a8a;
|
|
|
+ font-size: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin: 12rpx 12rpx 12rpx 0;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ .iconfont {
|
|
|
+ font-size: $font-size-30;
|
|
|
+ color: #e15616;
|
|
|
+ margin-left: 12rpx;
|
|
|
+ }
|
|
|
+ &.list-active {
|
|
|
+ background-color: #fef6f3;
|
|
|
+ color: #e15616;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.s-circle {
|
|
|
- margin-top: 30rpx;
|
|
|
- .header {
|
|
|
- font-size: 32rpx;
|
|
|
- padding: 30rpx;
|
|
|
- border-bottom: 2rpx solid #f9f9f9;
|
|
|
- position: relative;
|
|
|
- image {
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- padding: 10rpx;
|
|
|
- position: absolute;
|
|
|
- right: 40rpx;
|
|
|
- top: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 0 30rpx 20rpx;
|
|
|
- view {
|
|
|
- padding: 8rpx 30rpx;
|
|
|
- margin: 20rpx 30rpx 0 0;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #8a8a8a;
|
|
|
- background-color: #f7f7f7;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- border-radius: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .header {
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ border-bottom: 2rpx solid #f9f9f9;
|
|
|
+ position: relative;
|
|
|
+ image {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 40rpx;
|
|
|
+ top: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 30rpx 20rpx;
|
|
|
+ view {
|
|
|
+ padding: 8rpx 30rpx;
|
|
|
+ margin: 20rpx 30rpx 0 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #8a8a8a;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.wanted-block {
|
|
|
- margin-top: 30rpx;
|
|
|
- .header {
|
|
|
- font-size: 32rpx;
|
|
|
- padding: 30rpx;
|
|
|
- }
|
|
|
- .list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- view {
|
|
|
- width: 50%;
|
|
|
- color: #8a8a8a;
|
|
|
- font-size: 28rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- padding: 20rpx 0;
|
|
|
- border-top: 2rpx solid #fff;
|
|
|
- border-left: 2rpx solid #fff;
|
|
|
- background-color: #f7f7f7;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- }
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .header {
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ view {
|
|
|
+ width: 50%;
|
|
|
+ color: #8a8a8a;
|
|
|
+ font-size: 28rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-top: 2rpx solid #fff;
|
|
|
+ border-left: 2rpx solid #fff;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.wanted-circle {
|
|
|
- margin-top: 30rpx;
|
|
|
- .header {
|
|
|
- font-size: 32rpx;
|
|
|
- padding: 30rpx;
|
|
|
- }
|
|
|
- .list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 0 30rpx 20rpx;
|
|
|
- view {
|
|
|
- padding: 8rpx 30rpx;
|
|
|
- margin: 20rpx 30rpx 0 0;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #8a8a8a;
|
|
|
- background-color: #f7f7f7;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- border-radius: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .header {
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 30rpx 20rpx;
|
|
|
+ view {
|
|
|
+ padding: 8rpx 30rpx;
|
|
|
+ margin: 20rpx 30rpx 0 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #8a8a8a;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.commodity-list-wrapper {
|
|
|
- padding-top: 88rpx;
|
|
|
- scroll-view {
|
|
|
- height: 100%;
|
|
|
- overflow: scroll;
|
|
|
- }
|
|
|
- .empty-container-image {
|
|
|
- margin-top: -300rpx;
|
|
|
- }
|
|
|
- .toIndexPage {
|
|
|
- bottom: 390rpx;
|
|
|
- }
|
|
|
- .show-more-btn {
|
|
|
- width: 276rpx;
|
|
|
- height: 52rpx;
|
|
|
- line-height: 52rpx;
|
|
|
- border: 2rpx solid #d8d8d8;
|
|
|
- background: #f7f7f7;
|
|
|
- font-size: 26rpx;
|
|
|
- margin: 26rpx 0;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- margin-left: -138rpx;
|
|
|
- }
|
|
|
+ padding-top: 88rpx;
|
|
|
+ scroll-view {
|
|
|
+ height: 100%;
|
|
|
+ overflow: scroll;
|
|
|
+ }
|
|
|
+ .empty-container-image {
|
|
|
+ margin-top: -300rpx;
|
|
|
+ }
|
|
|
+ .toIndexPage {
|
|
|
+ bottom: 390rpx;
|
|
|
+ }
|
|
|
+ .show-more-btn {
|
|
|
+ width: 276rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ border: 2rpx solid #d8d8d8;
|
|
|
+ background: #f7f7f7;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin: 26rpx 0;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -138rpx;
|
|
|
+ }
|
|
|
}
|
|
|
.all-type-list-content {
|
|
|
- height: 216rpx;
|
|
|
- padding: 24rpx;
|
|
|
- background: #fff;
|
|
|
- margin-bottom: 2rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- box-sizing: content-box;
|
|
|
- .list-details-image{
|
|
|
- width: 218rpx;
|
|
|
- height: 218rpx !important;
|
|
|
- margin-right: 26rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- border: 2rpx solid #f3f3f3;
|
|
|
- position: relative;
|
|
|
- .list-img {
|
|
|
- width: 218rpx;
|
|
|
- height: 218rpx !important;
|
|
|
- }
|
|
|
- .list-details-type{
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- text-align: justify;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 10rpx;
|
|
|
- border-radius: 0 0 8rpx 8rpx;
|
|
|
- background-color: #33CCBF;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 25rpx;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ height: 216rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 2rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ box-sizing: content-box;
|
|
|
+ .list-details-image {
|
|
|
+ width: 218rpx;
|
|
|
+ height: 218rpx !important;
|
|
|
+ margin-right: 26rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ border: 2rpx solid #f3f3f3;
|
|
|
+ position: relative;
|
|
|
+ .list-img {
|
|
|
+ width: 218rpx;
|
|
|
+ height: 218rpx !important;
|
|
|
+ }
|
|
|
+ .list-details-type {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ text-align: justify;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10rpx;
|
|
|
+ border-radius: 0 0 8rpx 8rpx;
|
|
|
+ background-color: #33ccbf;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 25rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.list-details-info {
|
|
|
- width: 466rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- font-size: 26rpx;
|
|
|
- position: relative;
|
|
|
- .list-details-title {
|
|
|
- position: relative;
|
|
|
- .mclap {
|
|
|
- line-height: 38rpx;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- &.indent {
|
|
|
- text-indent: 95rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .mclap-tag {
|
|
|
- display: block;
|
|
|
- width: 84rpx;
|
|
|
- height: 32rpx;
|
|
|
- background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
|
|
|
- border-radius: 4rpx 48rpx 4px 4px;
|
|
|
- line-height: 32rpx;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-details-specs {
|
|
|
- margin-top: 8rpx;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- .list-details-miniQuantity {
|
|
|
- margin-top: 7rpx;
|
|
|
- }
|
|
|
+ width: 466rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 26rpx;
|
|
|
+ position: relative;
|
|
|
+ .list-details-title {
|
|
|
+ position: relative;
|
|
|
+ .mclap {
|
|
|
+ line-height: 38rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ &.indent {
|
|
|
+ text-indent: 95rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mclap-tag {
|
|
|
+ display: block;
|
|
|
+ width: 84rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
|
|
|
+ border-radius: 4rpx 48rpx 4px 4px;
|
|
|
+ line-height: 32rpx;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-details-specs {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .list-details-miniQuantity {
|
|
|
+ margin-top: 7rpx;
|
|
|
+ }
|
|
|
}
|
|
|
.list-details-price {
|
|
|
- width: 100%;
|
|
|
- height: 54rpx;
|
|
|
- line-height: 54rpx;
|
|
|
- position: absolute;
|
|
|
- bottom: -10rpx;
|
|
|
- right: 0;
|
|
|
- .floor-item-act {
|
|
|
- height: 54rpx;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- float: right;
|
|
|
- padding: 11rpx 0;
|
|
|
- }
|
|
|
- .price-icon {
|
|
|
- width: 22rpx;
|
|
|
- height: 28rpx;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- .price-icon + text {
|
|
|
- font-size: 25rpx;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- .list-login-now {
|
|
|
- color: #f8c499;
|
|
|
- float: left;
|
|
|
- line-height: 54rpx;
|
|
|
- .p-no {
|
|
|
- float: left;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $text-color;
|
|
|
- }
|
|
|
- }
|
|
|
- .login-now {
|
|
|
- padding: 10rpx 10rpx 10rpx 0;
|
|
|
- }
|
|
|
- .list-price {
|
|
|
- color: #ff2a2a;
|
|
|
- height: 44rpx;
|
|
|
- float: left;
|
|
|
- .price-larger {
|
|
|
- width: 100%;
|
|
|
- font-size: 32rpx;
|
|
|
- &.none {
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- &.small {
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- .txt {
|
|
|
- font-size: $font-size-24;
|
|
|
- display: inline-block;
|
|
|
- line-height: 44rpx;
|
|
|
- text-align: left;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ height: 54rpx;
|
|
|
+ line-height: 54rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -10rpx;
|
|
|
+ right: 0;
|
|
|
+ .floor-item-act {
|
|
|
+ height: 54rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: right;
|
|
|
+ padding: 11rpx 0;
|
|
|
+ }
|
|
|
+ .price-icon {
|
|
|
+ width: 22rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ .price-icon + text {
|
|
|
+ font-size: 25rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .list-login-now {
|
|
|
+ color: #f8c499;
|
|
|
+ float: left;
|
|
|
+ line-height: 54rpx;
|
|
|
+ .p-no {
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .login-now {
|
|
|
+ padding: 10rpx 10rpx 10rpx 0;
|
|
|
+ }
|
|
|
+ .list-price {
|
|
|
+ color: #ff2a2a;
|
|
|
+ height: 44rpx;
|
|
|
+ float: left;
|
|
|
+ .price-larger {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 32rpx;
|
|
|
+ &.none {
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ &.small {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: left;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
// 筛选抽屉样式
|
|
|
.drawer-title {
|
|
|
- width: 580rpx;
|
|
|
- height: 72rpx;
|
|
|
- line-height: 72rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 30rpx;
|
|
|
- background-color: #f7f7f7;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 99;
|
|
|
- .drawer-title-h1 {
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #e15616;
|
|
|
- font-weight: bold;
|
|
|
- text-align: left;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .drawer-title-p {
|
|
|
- font-size: $font-size-24;
|
|
|
- float: right;
|
|
|
- color: #333333;
|
|
|
- .text {
|
|
|
- color: #e15616;
|
|
|
- }
|
|
|
- }
|
|
|
+ width: 580rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 99;
|
|
|
+ .drawer-title-h1 {
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #e15616;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: left;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .drawer-title-p {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ float: right;
|
|
|
+ color: #333333;
|
|
|
+ .text {
|
|
|
+ color: #e15616;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.drawer-container {
|
|
|
- width: 580rpx;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #f7f7f7;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- padding-top: 72rpx;
|
|
|
- .drawer-main {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- .drawer-main-brand {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 12rpx 24rpx 24rpx 24rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- .drawer-brand-list {
|
|
|
- width: 160rpx;
|
|
|
- height: 56rpx;
|
|
|
- line-height: 56rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 26rpx;
|
|
|
- background-color: #f7f7f7;
|
|
|
- color: #999999;
|
|
|
- border-radius: 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 15rpx;
|
|
|
- float: left;
|
|
|
- margin: 12rpx 24rpx 12rpx 0;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- line-clamp: 1;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- &.checked {
|
|
|
- background-color: #fef6f3;
|
|
|
- color: #e15616;
|
|
|
- }
|
|
|
- &:nth-child(3n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .drawer-brand-more {
|
|
|
- width: 100%;
|
|
|
- height: 42rpx;
|
|
|
- line-height: 42rpx;
|
|
|
- float: left;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #999999;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .drawer-main-radio {
|
|
|
- width: 100%;
|
|
|
- height: 72rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- margin-top: 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- .drawer-radio-name {
|
|
|
- float: left;
|
|
|
- line-height: 72rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .drawer-radio-input {
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- float: right;
|
|
|
- line-height: 72rpx;
|
|
|
- text-align: right;
|
|
|
- .iconfont {
|
|
|
- font-size: $font-size-36;
|
|
|
- &.icon-weixuanze {
|
|
|
- color: #b2b2b2;
|
|
|
- }
|
|
|
- &.icon-yixuanze {
|
|
|
- color: #e15616;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .drawer-input {
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 24rpx 10rpx 0 10rpx;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
- border-radius: 4rpx;
|
|
|
- position: relative;
|
|
|
- background-color: #ffffff;
|
|
|
- &.btn {
|
|
|
- border: none;
|
|
|
- display: flex;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- }
|
|
|
- .drawer-btn {
|
|
|
- width: 210rpx;
|
|
|
- height: 84rpx;
|
|
|
- border-radius: 42rpx;
|
|
|
- background: $btn-confirm;
|
|
|
- line-height: 84rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #ffffff;
|
|
|
- flex: 1;
|
|
|
- margin: 0 10rpx;
|
|
|
- &.comfrim {
|
|
|
- background: $btn-confirm;
|
|
|
- }
|
|
|
- &.clear {
|
|
|
- background: #ffe6dc;
|
|
|
- color: #e15616;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ width: 580rpx;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ padding-top: 72rpx;
|
|
|
+ .drawer-main {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .drawer-main-brand {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 12rpx 24rpx 24rpx 24rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ .drawer-brand-list {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ color: #999999;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ float: left;
|
|
|
+ margin: 12rpx 24rpx 12rpx 0;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ &.checked {
|
|
|
+ background-color: #fef6f3;
|
|
|
+ color: #e15616;
|
|
|
+ }
|
|
|
+ &:nth-child(3n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .drawer-brand-more {
|
|
|
+ width: 100%;
|
|
|
+ height: 42rpx;
|
|
|
+ line-height: 42rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #999999;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .drawer-main-radio {
|
|
|
+ width: 100%;
|
|
|
+ height: 72rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .drawer-radio-name {
|
|
|
+ float: left;
|
|
|
+ line-height: 72rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .drawer-radio-input {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ float: right;
|
|
|
+ line-height: 72rpx;
|
|
|
+ text-align: right;
|
|
|
+ .iconfont {
|
|
|
+ font-size: $font-size-36;
|
|
|
+ &.icon-weixuanze {
|
|
|
+ color: #b2b2b2;
|
|
|
+ }
|
|
|
+ &.icon-yixuanze {
|
|
|
+ color: #e15616;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .drawer-input {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24rpx 10rpx 0 10rpx;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 4rpx;
|
|
|
+ position: relative;
|
|
|
+ background-color: #ffffff;
|
|
|
+ &.btn {
|
|
|
+ border: none;
|
|
|
+ display: flex;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ .drawer-btn {
|
|
|
+ width: 210rpx;
|
|
|
+ height: 84rpx;
|
|
|
+ border-radius: 42rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ line-height: 84rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #ffffff;
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ &.comfrim {
|
|
|
+ background: $btn-confirm;
|
|
|
+ }
|
|
|
+ &.clear {
|
|
|
+ background: #ffe6dc;
|
|
|
+ color: #e15616;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 搜索关键词库样式
|
|
|
+.search-library {
|
|
|
+ position: fixed;
|
|
|
+ top: 88rpx;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ width: 100vw;
|
|
|
+ height: calc(100vh - 88rpx);
|
|
|
+ background: #f5f5f5;
|
|
|
+
|
|
|
+ .search-library-wrapper {
|
|
|
+ background: #fff;
|
|
|
+ padding-top: 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ max-height: calc(100vh - 88rpx);
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .keyword-item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 90rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 48rpx 0 32rpx;
|
|
|
+ border-top: 1rpx solid #e1e1e1;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: 1rpx solid #e1e1e1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ display: block;
|
|
|
+ width: 34rpx;
|
|
|
+ margin-right: 26rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 34rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ flex-shrink: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1; // 这里控制几行显示省略号
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #e15616;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
yuwenjun1997