caimei-applets-mcare/pages/search/search.vue

<template>
    <view class="search-container" :class="{ unScorll: showLibaray }">
        <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="handleSearchQuery"
                        @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="handleSearchQuery">搜索</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 ? '#F3B574' : '#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 ? '#F3B574' : '#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 ? '#F3B574' : '#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">
            <scroll-view scroll-y="true" class="search-library-scroll">
                <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>
            </scroll-view>
        </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="hasLogin && ((userIdentity === 4 && pros.priceFlag === 0) || (userIdentity === 2 && 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" :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">
                                <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>
import { mapState } from 'vuex'
import modalLayer from '@/components/modal-layer'
import uniGrader from '@/components/uni-grade/uni-grade.vue'
import wxLogin from '@/common/config/wxLogin.js'
import { debounce } from '@/common/config/common.js'
import cmSrsMixins from '@/utils/cmSrsMixins.js'
const myDebounce = fn => debounce(fn, 500, false)

export default {
    components: {
        modalLayer,
        uniGrader,
    },
	mixins: [cmSrsMixins],
    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
                productFlag: 1, // 是否统计关键词 1 统计 0 不统计
                linkageFlag: 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 style="color:#F3B574;">${keyword}</span>`)
                    return item
                })
                if (this.libraryWordList.length <= 0) return
                this.showLibaray = true
            } catch (e) {
                console.log(e)
            }
        }),

        // 关键词点击
        onLibraryClick(item) {
            this.showLibaray = false
            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('查询品牌列表异常')
                })
        },
        handleSearchQuery() {
            this.showLibaray = false
            this.listQuery.productFlag = 1
            this.listQuery.linkageFlag = 0
            
            //搜索
            if (this.listQuery.keyword == '') {
                this.$util.msg('请输入搜索关键词', 2000)
            } else {
                switch (this.searchKeyType) {
                    case 1:
                        this.listData = []
                        this.brandParam.keyword = this.handleProsKey = this.listQuery.keyword
						uni.setStorageSync('pageLabel',this.listQuery.keyword)
						this.checkedIsRossSet() //判断是否弹窗ross广告
                        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
                    let resData = {}
                    if (response.data) {
                        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()
            this.showLibaray = false
        },
        keywordsClick(item) {
            //关键词搜索与历史搜索
            this.listQuery.keyword = item
            this.isShowClose = true
            this.isFocus = false
            this.handleSearchQuery()
        },
        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;
}
.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: 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: #F3B574;
            font-size: 30rpx;
        }
    }
}
.search-container {
    padding-top: 89rpx;

    &.unScorll {
        height: 100vh;
        overflow: hidden;
        box-sizing: border-box;
    }
}
/*screen*/
.tui-header-screen {
    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;
}
.tui-screen-top {
    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;
}
.icon-shangxiajiantou {
    font-size: 20rpx;
    color: #999999;
    margin-left: 8rpx;
}
.tui-topitem-active {
    color: #F3B574;
}

.tui-screen-bottom {
    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;
}

.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;
}

.tui-bottom-item:last-child {
    margin-right: 0;
}

.tui-btmItem-active {
    background: #fcedea !important;
    color: #F3B574;
    font-weight: bold;
    position: relative;
}

.tui-btmItem-active::after {
    content: '';
    position: absolute;
    border: 1rpx solid #F3B574;
    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;
}

.tui-btmItem-tap::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 22rpx;
    background: #f7f7f7;
    left: 0;
    top: 58rpx;
}
.tui-active {
    color: #F3B574;
}
.tui-icon-ml .tui-icon-class {
    margin-left: 6rpx;
}

.tui-ml {
    margin-left: 6rpx;
}

.tui-seizeaseat-20 {
    height: 20rpx;
}

.tui-seizeaseat-30 {
    height: 30rpx;
}

.tui-icon-middle .tui-icon-class {
    vertical-align: middle;
}

.tui-middle {
    vertical-align: middle;
}
.search-container-history {
    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: #F3B574;
                    margin-left: 12rpx;
                }
                &.list-active {
                    background-color: #fef6f3;
                    color: #F3B574;
                }
            }
        }
    }
}
.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;
        }
    }
}
.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;
        }
    }
}
.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;
        }
    }
}
.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;
    }
}
.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;
        }
    }
}
.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;
    }
}
.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;
            }
        }
    }
}
// 筛选抽屉样式
.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: #F3B574;
        font-weight: bold;
        text-align: left;
        float: left;
    }
    .drawer-title-p {
        font-size: $font-size-24;
        float: right;
        color: #333333;
        .text {
            color: #F3B574;
        }
    }
}
.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: #F3B574;
                }
                &: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: #F3B574;
                    }
                }
            }
        }
    }
    .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: #F3B574;
            }
        }
    }
}

// 搜索关键词库样式
.search-library {
    position: fixed;
    top: 88rpx;
    left: 0;
    z-index: 1000;
    width: 100vw;
    height: calc(100vh - 88rpx);
    background: #f5f5f5;

    .search-library-scroll {
        height: 95%;
    }

    .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: #F3B574;
                }
            }
        }
    }
}
</style>