Jelajahi Sumber

关键词库v1.0.0版本开发

yuwenjun1997 2 tahun lalu
induk
melakukan
f818ea8693

File diff ditekan karena terlalu besar
+ 0 - 0
common/css/iconfont.scss


TEMPAT SAMPAH
common/fonts/iconfont.ttf


TEMPAT SAMPAH
common/fonts/iconfont.woff


TEMPAT SAMPAH
common/fonts/iconfont.woff2


+ 12 - 0
main.js

@@ -4,6 +4,7 @@ import App from './App'
 import './services/index.js'
 import * as Api from '@/common/config/caimeiApi.js'
 import * as Regs from '@/common/config/common.js'
+import { dateFormat } from './utils/util.js'
 // 友盟
 import Uma from './plugins/uma'
 
@@ -30,6 +31,17 @@ Vue.prototype.$getStorage = function(key) {
     }
 }
 
+// 格式化时间
+Vue.filter('dateFormat', function(value) {
+    if (!value) return '未知'
+    if (value instanceof Date) {
+        return dateFormat(value, 'yyyy-MM-dd')
+    } else {
+        value = new Date(value)
+        return dateFormat(value, 'yyyy-MM-dd')
+    }
+})
+
 // Vue实例化
 Vue.config.productionTip = false
 Vue.prototype.$fire = new Vue()

+ 6 - 0
pages.json

@@ -950,6 +950,12 @@
 				"style": {
 					"navigationBarTitleText": "二手搜索"
 				}
+			}, {
+				"path": "search-library",
+				"style": {
+					"navigationBarTitleText": "搜索",
+                    "enablePullDownRefresh": false
+				}
 			}]
 		}, {
 			"root": "pages/second/",

+ 3 - 1
pages/h5/article/path.vue

@@ -43,7 +43,9 @@
                 //是pdf链接
                 let URL_CONFIG = ''
                 if(process.env.NODE_ENV === 'development'){
-                    URL_CONFIG = 'https://www-b.caimei365.com'
+                    URL_CONFIG = 'http://zzjtest.gz.aeert.com'
+                }else{
+                    URL_CONFIG = 'https://www.caimei365.com/'
                 }
                 this.activityPath = `${URL_CONFIG}/document/pdfdetails.html?type=1&src=${link}`
             }

+ 267 - 0
pages/search/components/article-list.vue

@@ -0,0 +1,267 @@
+<template>
+    <view class="article-wrapper">
+        <view class="search-sort">
+            <view class="sort">
+                <view class="drop-btn" @click="dropFlag = !dropFlag">
+                    <text class="text" v-text="showDropText"></text>
+                    <text class="iconfont" :class="dropFlag ? 'icon-xiangshang' : 'icon-xiangxia'"></text>
+                </view>
+                <view class="drop-select" v-show="dropFlag">
+                    <template v-for="(item, index) in dropItems">
+                        <view
+                            class="drop-select-item"
+                            :class="{ active: index === dropCurrent }"
+                            :key="index"
+                            v-text="item.name"
+                            @click="onDropItemClick(index, item)"
+                        ></view>
+                    </template>
+                </view>
+            </view>
+        </view>
+        <view class="article-list">
+            <view class="article-item" v-for="item in list" :key="item.articleId" @click="onToDetail(item)">
+                <view class="cover"><image :src="item.image"></image></view>
+                <view class="content">
+                    <view class="title" v-text="item.title"></view>
+                    <view class="description" v-text="item.intro"></view>
+                    <view class="tag">
+                        <text class="iconfont icon-biaoqian1"></text>
+                        <text v-text="item.labelText"></text>
+                    </view>
+                    <view class="info">
+                        <view class="item author">
+                            <text class="iconfont icon-bianji2"></text>
+                            <text v-text="item.publisher"></text>
+                        </view>
+                        <view class="item view">
+                            <text class="iconfont icon-liulan"></text>
+                            <text v-text="item.pv"></text>
+                        </view>
+                        <view class="item date">
+                            <text class="iconfont icon-shijian2"></text>
+                            <text>{{ item.publishDate | dateFormat }}</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="mask" v-show="dropFlag" @click="dropFlag = false"></view>
+    </view>
+</template>
+
+<script>
+import { debounce } from '@/common/config/common'
+const myDebounce = fn => debounce(fn, 200, false)
+
+export default {
+    props: {
+        list: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            dropItems: [{ name: '综合排序', status: 1 }, { name: '时间排序', status: 2 }],
+            dropFlag: false,
+            dropCurrent: 0
+        }
+    },
+    computed: {
+        showDropText() {
+            return this.dropItems[this.dropCurrent].name
+        }
+    },
+    created() {
+        console.log('article-list')
+    },
+    methods: {
+        onDropItemClick(index, dropItems) {
+            this.dropCurrent = index
+            this.dropFlag = false
+            this.$emit('change', dropItems) 
+        },
+
+        onToDetail: myDebounce(function(item) {
+            let URL_CONFIG = ''
+            if (process.env.NODE_ENV === 'development') {
+                URL_CONFIG = 'http://zzjtest.gz.aeert.com'
+            } else {
+                URL_CONFIG = 'https://www.caimei365.com/'
+            }
+            const link = `${URL_CONFIG}/info/detail-${item.articleId}-1.html`
+            this.$api.navigateTo(`/pages/h5/activity/activity?link=${link}&title=${item.title}`)
+        })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+/* scss中可以用mixin来扩展 */
+@mixin ellipsis($line: 1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: $line;
+    -webkit-box-orient: vertical;
+}
+
+.article-wrapper {
+    .mask {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        min-height: 100vh;
+        background: transparent;
+        z-index: 9;
+        left: 0;
+        top: 0;
+    }
+
+    .search-sort {
+        padding: 0 32rpx;
+        height: 90rpx;
+
+        .sort {
+            position: relative;
+            z-index: 10;
+            .drop-btn {
+                display: flex;
+                align-items: center;
+                .text {
+                    font-size: 28rpx;
+                    color: #333;
+                    font-weight: 500;
+                    line-height: 90rpx;
+                }
+                .iconfont {
+                    font-size: 14rpx;
+                    color: #333;
+                    margin-left: 20rpx;
+                    line-height: 90rpx;
+                }
+            }
+            .drop-select {
+                position: absolute;
+                background: #fff;
+                width: 340rpx;
+                left: 0;
+                top: 90rpx;
+                box-shadow: 0px 6rpx 16rpx 1rpx rgba(0, 0, 0, 0.1);
+                .drop-select-item {
+                    position: relative;
+                    line-height: 90rpx;
+                    height: 90rpx;
+                    padding-left: 88rpx;
+                    font-size: 28rpx;
+                    color: #22272e;
+
+                    &:first-child {
+                        border-bottom: 1rpx solid #e1e1e1;
+                    }
+
+                    &.active {
+                        color: #e15616;
+
+                        &::before {
+                            background: #e15616;
+                            border-color: #e15616;
+                        }
+                    }
+
+                    &::before,
+                    &::after {
+                        content: '';
+                        display: block;
+                        position: absolute;
+                        border-radius: 50%;
+                        background: #fff;
+                        box-sizing: border-box;
+                    }
+
+                    &::before {
+                        width: 32rpx;
+                        height: 32rpx;
+                        left: 40rpx;
+                        top: 29rpx;
+                        border: 1rpx solid #999999;
+                    }
+
+                    &::after {
+                        width: 14rpx;
+                        height: 14rpx;
+                        left: 49rpx;
+                        top: 38rpx;
+                    }
+                }
+            }
+        }
+    }
+
+    .article-item {
+        display: flex;
+        padding: 32rpx;
+        border-top: 1rpx solid #e1e1e1;
+        .cover {
+            width: 220rpx;
+            height: 220rpx;
+            flex-shrink: 0;
+            image {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .content {
+            flex: 1;
+            margin-left: 24rpx;
+            .title {
+                @include ellipsis(2);
+                font-size: 28rpx;
+                color: #22272e;
+                line-height: 36rpx;
+                height: 72rpx;
+            }
+            .description {
+                @include ellipsis(1);
+                font-size: 22rpx;
+                color: #666;
+                height: 28rpx;
+                margin-top: 8rpx;
+            }
+            .tag {
+                font-size: 24rpx;
+                color: #999999;
+                height: 28rpx;
+                margin-top: 34rpx;
+                @include ellipsis(1);
+
+                .iconfont {
+                    font-size: 24rpx;
+                    margin-right: 8rpx;
+                }
+            }
+            .info {
+                display: flex;
+                height: 28rpx;
+                margin-top: 16rpx;
+                .item {
+                    color: #999999;
+                    font-size: 22rpx;
+                    margin-right: 32rpx;
+
+                    &.date {
+                        margin-right: 0;
+                    }
+
+                    .iconfont {
+                        font-size: 24rpx;
+                        margin-right: 8rpx;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

+ 147 - 0
pages/search/components/encyclopedia-list.vue

@@ -0,0 +1,147 @@
+<template>
+    <view class="material-wrapper">
+        <view class="encyclopedia-list">
+            <view class="encyclopedia-item" v-for="item in list" :key="item.productId" @click="onToDetail(item)">
+                <view class="cover"><image :src="item.image"></image></view>
+                <view class="content">
+                    <view class="title" v-text="item.name"></view>
+                    <view class="description" v-text="item.discription"></view>
+                    <view class="question">
+                        <template v-for="(querytion, index) in item.questionList">
+                            <view class="item" v-text="querytion" :key="index"></view>
+                        </template>
+                    </view>
+                    <view class="tag-list">
+                        <view class="tag">常见问题</view>
+                        <view class="tag">效果展示</view>
+                        <view class="tag">技术原理</view>
+                        <view class="tag">术前术后</view>
+                    </view>
+                    <view class="foot">
+                        <text class="date">{{ item.publishTime | dateFormat }}</text>
+                        <text class="view">浏览量:{{ item.pv }}</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        list: {
+            type: Array,
+            default: () => []
+        }
+    },
+    created() {
+        console.log('encyclopedia-list')
+    },
+    methods: {
+        onToDetail(item) {
+            let URL_CONFIG = ''
+            if (process.env.NODE_ENV === 'development') {
+                URL_CONFIG = 'http://zzjtest.gz.aeert.com'
+            } else {
+                URL_CONFIG = 'https://www.caimei365.com/'
+            }
+            const link = `${URL_CONFIG}/encyclopedia/instrument-${item.productId}.html`
+            this.$api.navigateTo(`/pages/h5/activity/activity?link=${link}&title=${item.name}`)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+/* scss中可以用mixin来扩展 */
+@mixin ellipsis($line: 1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: $line;
+    -webkit-box-orient: vertical;
+}
+
+.material-wrapper {
+    .encyclopedia-item {
+        display: flex;
+        padding: 32rpx;
+        border-top: 1rpx solid #e1e1e1;
+
+        &:first-child {
+            border-top: 0;
+        }
+
+        .cover {
+            width: 220rpx;
+            height: 220rpx;
+            flex-shrink: 0;
+            image {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .content {
+            flex: 1;
+            margin-left: 24rpx;
+            .title {
+                @include ellipsis(1);
+                font-size: 28rpx;
+                color: #333;
+                line-height: 40rpx;
+                height: 40rpx;
+                font-weight: bold;
+            }
+
+            .description {
+                @include ellipsis(2);
+                font-size: 24rpx;
+                color: #666666;
+                margin-top: 15rpx;
+                margin-bottom: 28rpx;
+                line-height: 32rpx;
+                height: 64rpx;
+            }
+
+            .question {
+                .item {
+                    @include ellipsis(1);
+                    font-size: 22rpx;
+                    color: #999999;
+                    line-height: 30rpx;
+                    height: 30rpx;
+                    margin-top: 8rpx;
+                }
+            }
+
+            .tag-list {
+                display: flex;
+                align-items: center;
+                margin-top: 20rpx;
+                .tag {
+                    height: 40rpx;
+                    padding: 0 8rpx;
+                    color: #e15616;
+                    font-size: 22rpx;
+                    background: #fef6f3;
+                    margin-right: 8rpx;
+                    line-height: 40rpx;
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+
+            .foot {
+                display: flex;
+                justify-content: space-between;
+                color: #999999;
+                font-size: 22rpx;
+                margin-top: 24rpx;
+            }
+        }
+    }
+}
+</style>

+ 102 - 0
pages/search/components/material-list.vue

@@ -0,0 +1,102 @@
+<template>
+    <view class="material-wrapper">
+        <view class="material-list">
+            <view class="material-item" v-for="item in list" :key="item.archiveId" @click="onToDetail(item)">
+                <view class="cover"><image :src="item.productImage"></image></view>
+                <view class="content">
+                    <view class="title" v-text="item.productName"></view>
+                    <view class="shop-name">
+                        <text class="label">供应商:</text>
+                        <text class="value" v-text="item.shopName"></text>
+                    </view>
+                    <view class="property">
+                        <text class="label">商品属性:</text>
+                        <text class="value">{{ item.productType === 1 ? '仪器' : '产品' }}</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { debounce } from '@/common/config/common'
+const myDebounce = fn => debounce(fn, 200, false)
+export default {
+    props: {
+        list: {
+            type: Array,
+            default: () => []
+        }
+    },
+    created() {
+        console.log('material-list')
+    },
+    methods: {
+        onToDetail: myDebounce(function(item) {
+            this.$api.navigateTo(`/pages/goods/goods-doc-detail?id=${item.archiveId}`)
+        })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+/* scss中可以用mixin来扩展 */
+@mixin ellipsis($line: 1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: $line;
+    -webkit-box-orient: vertical;
+}
+
+.material-wrapper {
+    .material-item {
+        display: flex;
+        padding: 32rpx;
+        border-top: 1rpx solid #e1e1e1;
+        &:first-child {
+            border-top: 0;
+        }
+
+        .cover {
+            width: 220rpx;
+            height: 220rpx;
+            flex-shrink: 0;
+            image {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .content {
+            flex: 1;
+            margin-left: 24rpx;
+            .title {
+                @include ellipsis(2);
+                font-size: 28rpx;
+                color: #22272e;
+                line-height: 40rpx;
+                height: 80rpx;
+            }
+            .shop-name {
+                margin-top: 24rpx;
+            }
+            .property {
+                margin-top: 16rpx;
+            }
+            .shop-name,
+            .property {
+                font-size: 24rpx;
+                @include ellipsis(1);
+                .label {
+                    color: #999999;
+                }
+                .value {
+                    color: #333333;
+                }
+            }
+        }
+    }
+}
+</style>

+ 254 - 0
pages/search/components/product-filter.vue

@@ -0,0 +1,254 @@
+<template>
+    <view class="product-filter">
+        <scroll-view scroll-y="true" class="scroll-view">
+            <view class="center">
+                <!-- 品牌选中数量提示 -->
+                <view class="brand-tip">
+                    <view class="name">品牌</view>
+                    <view class="number">
+                        <text>已选中</text>
+                        <text class="enhance" v-text="checkedBrandSize"></text>
+                        <text>个品牌</text>
+                    </view>
+                </view>
+                <!-- 品牌列表 -->
+                <view class="brand-list">
+                    <view class="content">
+                        <view class="brand-item" :class="{ active: isCheckedAllBrand }" @click="onChoiceAllBrand">
+                            全部
+                        </view>
+                        <template v-for="brand in brandItemList">
+                            <view
+                                class="brand-item"
+                                :class="{ active: brand.checked }"
+                                :key="brand.id"
+                                v-text="brand.name"
+                                @click="onChoiceBrand(brand)"
+                            ></view>
+                        </template>
+                    </view>
+                    <view class="toggle-all" @click="showAllBrand = !showAllBrand" v-if="hasMoreBrand">
+                        <text class="name">{{ showAllBrand ? '收起全部' : '查看全部' }}</text>
+                        <text
+                            class="iconfont"
+                            :class="showAllBrand ? 'icon-xiangshangjiantou' : 'icon-xiangxiajiantou'"
+                        ></text>
+                    </view>
+                </view>
+                <!-- 选择新品 -->
+                <view class="cell-radio" @click="newFlag = !newFlag">
+                    <text class="cell-radio-name">选择新品</text>
+                    <text class="iconfont" :class="newFlag ? 'icon-yixuanze' : 'icon-weixuanze'"></text>
+                </view>
+                <!-- 促销商品 -->
+                <view class="cell-radio" @click="promotionFlag = !promotionFlag">
+                    <text class="cell-radio-name">促销商品</text>
+                    <text class="iconfont" :class="promotionFlag ? 'icon-yixuanze' : 'icon-weixuanze'"></text>
+                </view>
+            </view>
+        </scroll-view>
+        <view class="footer">
+            <view class="btn btn-reset" @click="onReset">重置</view>
+            <view class="btn btn-confirm" @click="onConfirm">确定</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        brandList: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            showAllBrand: false,
+            newFlag: false, // 选择新品
+            promotionFlag: false // 促销商品
+        }
+    },
+    computed: {
+        isCheckedAllBrand() {
+            return this.brandList.every(brand => !brand.checked)
+        },
+        checkedBrandSize() {
+            return this.brandList.filter(brand => brand.checked).length
+        },
+        brandItemList() {
+            return this.brandList.filter((brand, index) => this.showAllBrand || index < 8)
+        },
+        hasMoreBrand() {
+            return this.brandList.length > this.showAllBrand
+        }
+    },
+    methods: {
+        // 提交/确定
+        onConfirm() {
+            const e = {
+                newFlag: this.newFlag ? 1 : 0,
+                promotionFlag: this.promotionFlag ? 1 : 0,
+                brandList: this.brandList.filter(brand => brand.checked)
+            }
+            this.$emit('confirm', e)
+        },
+        // 重置
+        onReset() {
+            this.brandList.forEach(brand => (brand.checked = false))
+            this.newFlag = false
+            this.promotionFlag = false
+            this.showAllBrand = false
+            const e = { newFlag: 0, promotionFlag: 0, brandList: [] }
+            this.$emit('reset', e)
+        },
+        // 选中全部品牌
+        onChoiceAllBrand() {
+            this.brandList.forEach(brand => (brand.checked = false))
+        },
+        // 选中品牌
+        onChoiceBrand(brand) {
+            brand.checked = !brand.checked
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.product-filter {
+    width: 580rpx;
+    height: 100vh;
+    box-sizing: border-box;
+    padding-bottom: 180rpx;
+    position: relative;
+    background: #f7f7f7;
+
+    .scroll-view {
+        height: calc(100vh - 180rpx);
+
+        .brand-tip {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 24rpx 0 32rpx;
+            line-height: 72rpx;
+            background: #f7f7f7;
+            .name {
+                font-size: 26rpx;
+                color: #e15616;
+            }
+            .number {
+                font-size: 24rpx;
+                color: #333333;
+                .enhance {
+                    color: #e15616;
+                }
+            }
+        }
+
+        .brand-list {
+            background: #fff;
+            overflow: hidden;
+            .content {
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                padding: 0 20rpx 24rpx 32rpx;
+
+                .brand-item {
+                    width: 160rpx;
+                    height: 56rpx;
+                    line-height: 56rpx;
+                    border-radius: 28rpx;
+                    text-align: center;
+                    font-size: 26rpx;
+                    color: #999999;
+                    background: #f7f7f7;
+                    margin: 24rpx 24rpx 0 0;
+
+                    &:nth-child(3n) {
+                        margin-right: 0;
+                    }
+
+                    &.active {
+                        color: #e15616;
+                        background: #fef6f3;
+                    }
+                }
+            }
+
+            .toggle-all {
+                width: 140rpx;
+                text-align: center;
+                line-height: 36rpx;
+                margin: 0 auto 24rpx;
+                .name,
+                .iconfont {
+                    font-size: 24rpx;
+                    color: #999999;
+                }
+
+                .iconfont {
+                    margin-left: 16rpx;
+                }
+            }
+        }
+
+        .cell-radio {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            line-height: 72rpx;
+            height: 72rpx;
+            padding: 0 34rpx 0 24rpx;
+            margin: 24rpx 0;
+            background: #fff;
+
+            .cell-radio-name {
+                font-size: 26rpx;
+                color: #333333;
+            }
+
+            .icon-weixuanze {
+                font-size: 28rpx;
+                color: #b2b2b2;
+            }
+
+            .icon-yixuanze {
+                font-size: 28rpx;
+                color: #e15616;
+            }
+        }
+    }
+
+    .footer {
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: 0;
+        height: 168rpx;
+        display: flex;
+        align-items: center;
+
+        .btn {
+            width: 210rpx;
+            height: 84rpx;
+            border-radius: 42rpx;
+            text-align: center;
+            line-height: 84rpx;
+            font-size: 30rpx;
+
+            &.btn-reset {
+                background: #ffe6dc;
+                color: #e15616;
+                margin: 0 24rpx 0 112rpx;
+            }
+
+            &.btn-confirm {
+                background: linear-gradient(135deg, #f28f31 0%, #e15616 100%);
+                color: #ffffff;
+            }
+        }
+    }
+}
+</style>

+ 273 - 0
pages/search/components/product-list.vue

@@ -0,0 +1,273 @@
+<template>
+    <view class="product-wrapper">
+        <!-- 文章搜索筛选 -->
+        <view class="search-sort">
+            <template v-for="item in sortItems">
+                <view
+                    class="sort-item"
+                    :key="item.id"
+                    :class="{ active: item.id === currentSortItem }"
+                    @click="onSortItemClick(item)"
+                >
+                    <text v-text="item.name"></text>
+                    <text :class="[item.icon, item.sortType]"></text>
+                </view>
+            </template>
+        </view>
+        <!-- 文章搜索列表 -->
+        <view class="product-list">
+            <view class="product" v-for="product in list" :key="product.productId" @click="onToDetail(product)">
+                <view class="cover"><image :src="product.image"></image></view>
+                <view class="content">
+                    <view class="title" v-text="product.name"></view>
+                    <view class="unit">
+                        <text class="label">规格:</text>
+                        <text class="value" v-text="product.unit"></text>
+                    </view>
+                    <view class="code">
+                        <text class="label">商品编码:</text>
+                        <text class="value" v-text="product.code"></text>
+                    </view>
+                    <view class="foot">
+                        <view class="price">
+                            <view class="real-price">¥{{ makePrice(product) }}</view>
+                            <!-- <view class="old-price">¥480.00</view> -->
+                        </view>
+                        <view class="tag-list">
+                            <view class="tag coupon" v-if="product.couponsLogo">优惠券</view>
+                            <view class="tag svip" v-if="product.svipProductFlag == 1">svip</view>
+                            <template v-if="product.actStatus == 1">
+                                <template v-if="isPromotion(product.promotions)">
+                                    <view class="tag other">
+                                        {{ product.promotions.name }}
+                                        <text>:¥{{ product.price | priceFormat }}</text>
+                                    </view>
+                                </template>
+                                <template v-else>
+                                    <view class="tag other">{{ product.promotions.name }}</view>
+                                </template>
+                            </template>
+                            <!-- <view class="tag reduce">活动价</view> -->
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { debounce } from '@/common/config/common'
+const myDebounce = fn => debounce(fn, 200, false)
+
+export default {
+    filters: {
+        priceFormat(price) {
+            if (!price) return ''
+            return Number(text).toFixed(2)
+        }
+    },
+    props: {
+        list: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        const sortItems = [
+            { id: 1, name: '综合', icon: '', sortType: '' },
+            { id: 2, name: '销量', icon: 'sort', sortType: 'asc' }, // asc 升序  desc 降序
+            { id: 3, name: '人气', icon: 'sort', sortType: 'asc' }, // asc 升序  desc 降序
+            { id: 4, name: '价格', icon: 'sort', sortType: 'asc' }, // asc 升序  desc 降序
+            { id: 5, name: '筛选', icon: 'iconfont icon-shaixuan', sortType: '' }
+        ]
+        return {
+            sortItems: sortItems,
+            currentSortItem: 1
+        }
+    },
+    methods: {
+        // 跳转产品详情
+        onToDetail: myDebounce(function(product) {
+            this.$api.navigateTo(`/pages/goods/product?id=${product.productId}`)
+        }),
+
+        // 是否有促销价
+        isPromotion(promo) {
+            if (!promo) return false
+            return promo.type == 1 && promo.mode == 1
+        },
+
+        // 返回产品价格
+        makePrice(product) {
+            const price = this.isPromotion(product.promotions) ? product.originalPrice : product.price
+            return Number(price).toFixed(2)
+        },
+
+        // sort item click
+        onSortItemClick(item) {
+            if (item.id === 5) {
+                console.log('filter')
+            } else if (item.id === this.currentSortItem) {
+                item.sortType = item.sortType === 'asc' ? 'desc' : 'asc'
+            } else {
+                const lastCurrent = this.sortItems.find(a => a.id === this.currentSortItem)
+                this.currentSortItem = item.id
+                lastCurrent.sortType = 'asc'
+            }
+            this.$emit('change', item)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+/* scss中可以用mixin来扩展 */
+@mixin ellipsis($line: 1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: $line;
+    -webkit-box-orient: vertical;
+}
+
+.product-wrapper {
+    .search-sort {
+        background: #fff;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        line-height: 90rpx;
+        .sort-item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+            font-size: 26rpx;
+            color: #999999;
+
+            text:first-child {
+                margin-right: 4rpx;
+            }
+
+            &.active,
+            &.active .sort.desc::after,
+            &.active .sort.asc::before,
+            &.active .icon-shaixuan {
+                color: #e15616;
+            }
+
+            .icon-shaixuan {
+                font-size: 24rpx;
+                color: #999999;
+            }
+
+            .sort {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                line-height: 0.9;
+                font-size: 14rpx;
+                color: #aaa;
+                transform: scale(0.7);
+                &::after {
+                    content: '▼';
+                }
+                &::before {
+                    content: '▲';
+                }
+            }
+        }
+    }
+
+    .product {
+        display: flex;
+        padding: 32rpx;
+        border-top: 1rpx solid #e1e1e1;
+        .cover {
+            flex-shrink: 0;
+            width: 220rpx;
+            height: 220rpx;
+            image {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .content {
+            flex: 1;
+            margin-left: 24rpx;
+            .title {
+                font-size: 26rpx;
+                color: #333333;
+                line-height: 36rpx;
+                height: 72rpx;
+                @include ellipsis(2);
+            }
+            .unit,
+            .code {
+                font-size: 20rpx;
+                color: #666666;
+                margin-top: 8rpx;
+                height: 28rpx;
+                @include ellipsis(1);
+
+                .value {
+                    color: #999;
+                }
+            }
+
+            .foot {
+                margin-top: 34rpx;
+                display: flex;
+                justify-content: space-between;
+                align-items: flex-end;
+                .price {
+                    display: flex;
+                    align-items: flex-end;
+                    .real-price {
+                        color: #e15616;
+                        font-size: 24rpx;
+                    }
+                    .old-price {
+                        text-decoration: line-through;
+                        font-size: 20rpx;
+                        color: #999;
+                        margin-left: 8rpx;
+                    }
+                }
+                .tag-list {
+                    display: flex;
+                    .tag {
+                        height: 32rpx;
+                        font-size: 22rpx;
+                        flex-shrink: 0;
+                        box-sizing: border-box;
+                        padding: 0 8rpx;
+                        margin-right: 8rpx;
+                        border-radius: 6rpx;
+
+                        &:last-child {
+                            margin-right: 0;
+                        }
+
+                        &.coupon,
+                        &.reduce,
+                        &.other {
+                            border: 1rpx solid rgba(225, 86, 22, 0.2);
+                            line-height: 30rpx;
+                            color: #e15616;
+                        }
+                        &.svip {
+                            line-height: 32rpx;
+                            color: #f0cb72;
+                            background: #333333;
+                            text-transform: uppercase;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

+ 712 - 0
pages/search/search-library.vue

@@ -0,0 +1,712 @@
+<template>
+    <view class="search-library">
+        <!-- 搜索框区域 -->
+        <view class="sticky-container">
+            <view class="search-container">
+                <view class="search-tab" @click="showBubblePopup = true">
+                    <text v-text="currentMenu.name"></text>
+                    <text class="iconfont icon-xiangxiajiantou"></text>
+                </view>
+                <view class="search-control">
+                    <text class="iconfont icon-sousuo"></text>
+                    <input
+                        class="control"
+                        type="text"
+                        v-model.trim="keyword"
+                        placeholder="请输入搜索关键字"
+                        @confirm="onSearch"
+                        @input="onInput"
+                        @blur="onBlur"
+                    />
+                    <text class="iconfont icon-shanchu1" v-show="showClearBtn" @click="onClear"></text>
+                </view>
+                <view class="search-submit" @click="onSearch">搜索</view>
+            </view>
+            <!-- 搜索分类区域 -->
+            <view class="search-category">
+                <tui-tabs
+                    :tabs="tabs"
+                    :currentTab="currentTab"
+                    :sliderWidth="40"
+                    :bold="true"
+                    :unlined="true"
+                    :height="60"
+                    sliderBgColor="#E15616"
+                    selectedColor="#E15616"
+                    @change="onTabChange"
+                ></tui-tabs>
+            </view>
+        </view>
+
+        <!-- 搜索结果区域 -->
+        <view class="search-wrapper">
+            <!-- 产品列表 -->
+            <product-list v-if="currentTab === 0" :list="productList" @change="onProductFilterItemChange" />
+            <!-- 相关文章 -->
+            <article-list v-if="currentTab === 1" :list="articleList" @change="onArticleFilterItemChange" />
+            <!-- 相关资料 -->
+            <material-list v-if="currentTab === 2" :list="materialList" />
+            <!-- 相关百科 -->
+            <encyclopedia-list v-if="currentTab === 3" :list="encyclopediaList" />
+        </view>
+        <!-- 列表为空 -->
+        <view class="empty-box" v-if="!isLoading && isListEmpty">
+            <image
+                class="empty-image"
+                src="https://img.caimei365.com/group1/M00/03/8D/Cmis215XHXWAHCoqAAELHadZ9Xg365.png"
+            ></image>
+            <text class="empty-text">抱歉,没有{{ currentTabItem.name }}!</text>
+        </view>
+        <!-- 列表底部显示 -->
+        <template v-if="!isListEmpty">
+            <tui-loadmore :index="2" :visible="isLoading"></tui-loadmore>
+            <tui-nomore
+                :text="hasMore ? '上拉加载更多' : '没有更多了'"
+                :visible="!isLoading"
+                backgroundColor="#f5f5f5"
+            ></tui-nomore>
+        </template>
+
+        <!-- 搜索设备分类 -->
+        <tui-bubble-popup
+            :show="showBubblePopup"
+            :mask="true"
+            position="fixed"
+            direction="top"
+            width="140rpx"
+            left="10rpx"
+            top="80rpx"
+            triangleRight="60rpx"
+            triangleTop="-22rpx"
+            maskBgColor="rgba(0,0,0,0)"
+            @close="showBubblePopup = false"
+        >
+            <view class="bubble-popup-container">
+                <view
+                    class="menu-item"
+                    v-for="item in menuItemList"
+                    :key="item.id"
+                    @click="onMenuItemClick(item)"
+                    v-text="item.name"
+                ></view>
+            </view>
+        </tui-bubble-popup>
+        <!-- 搜索关键词库提示 -->
+        <view class="search-library" v-show="showLibaray">
+            <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>
+
+        <!-- 商品筛选框 -->
+        <tui-drawer mode="right" :visible="showDrawer" @close="showDrawer = false">
+            <product-filter :brandList="brandList" @confirm="onDrawerConfirm" @reset="onDrawerConfirm"></product-filter>
+        </tui-drawer>
+    </view>
+</template>
+
+<script>
+import ProductList from './components/product-list.vue'
+import ArticleList from './components/article-list.vue'
+import MaterialList from './components/material-list.vue'
+import EncyclopediaList from './components/encyclopedia-list.vue'
+import ProductFilter from './components/product-filter.vue'
+import { debounce } from '@/common/config/common'
+import { mapGetters } from 'vuex'
+const myDebounce = fn => debounce(fn, 200, false)
+
+export default {
+    components: {
+        ProductList,
+        ArticleList,
+        MaterialList,
+        EncyclopediaList,
+        ProductFilter
+    },
+    data() {
+        const menuItemList = [{ id: 1, name: '产品' }, { id: 2, name: '供应商' }]
+        const currentMenu = menuItemList[0]
+        const tabs = [{ name: '相关产品' }, { name: '相关文章' }, { name: '相关资料' }, { name: '相关百科' }]
+        return {
+            // 容器相关
+            showLibaray: false,
+            showBubblePopup: false,
+            menuItemList: menuItemList,
+            currentMenu: currentMenu,
+            keyword: '',
+            libraryWordList: [],
+            tabs: tabs,
+            currentTab: 0,
+            isLoading: true,
+            // 用户信息
+            userInfo: {
+                userId: 0,
+                userIdentity: 1,
+                vipFlag: 0,
+                firstClubType: 0
+            },
+            // 产品相关
+            currentSortItem: {},
+            showDrawer: false,
+            brandList: [],
+            productList: [],
+            productTotal: 0,
+            productHasMore: true,
+            productListQuery: {
+                identity: 1,
+                keyword: '',
+                pageNum: 1,
+                pageSize: 10,
+                sortField: '',
+                sortType: 1,
+                newType: 1,
+                actiType: 1,
+                brandIds: '', // 品牌Id
+                newFlag: 0, // 查询新品标记,默认0,新品1
+                promotionFlag: 0 // 查询促销标记,默认0,促销1
+            },
+            brandListQuery: {
+                keyword: '',
+                id: '',
+                idType: '',
+                identity: 1
+            },
+            // 美业资料
+            materialList: [],
+            materialTotal: 0,
+            materialHasMore: true,
+            materialListQuery: {
+                keyword: '', //查询关键词
+                productType: 0, //商品类型 0 全部 1 仪器 2 产品
+                pageNum: 1,
+                pageSize: 10
+            },
+            // 采美文章
+            articleList: [],
+            articleTotal: 0,
+            articleHasMore: true,
+            articleListQuery: {
+                keyword: '',
+                pageSize: 10,
+                pageNum: 1,
+                status: 1
+            },
+            // 采美百科
+            encyclopediaList: [],
+            encyclopediaTotal: 0,
+            encyclopediaHasMore: true,
+            encyclopediaListQuery: {
+                keyword: '',
+                pageSize: 10,
+                pageNum: 1
+            }
+        }
+    },
+    computed: {
+        ...mapGetters(['identity']),
+        // 显示输入框clear按钮
+        showClearBtn() {
+            return this.keyword.length > 0
+        },
+        // 当前选中tab
+        currentTabItem() {
+            return this.tabs[this.currentTab]
+        },
+        // 列表是否为空
+        isListEmpty() {
+            return (
+                (this.currentTab === 0 && this.productList.length === 0) ||
+                (this.currentTab === 1 && this.articleList.length === 0) ||
+                (this.currentTab === 2 && this.materialList.length === 0) ||
+                (this.currentTab === 3 && this.encyclopediaList.length === 0)
+            )
+        },
+        // 是否还有更多
+        hasMore() {
+            return (
+                (this.currentTab === 0 && this.productHasMore) ||
+                (this.currentTab === 1 && this.articleHasMore) ||
+                (this.currentTab === 2 && this.materialHasMore) ||
+                (this.currentTab === 3 && this.encyclopediaHasMore)
+            )
+        }
+    },
+    onLoad(option) {
+        this.keyword = option.keyword || ''
+        this.initStorage()
+        this.initList()
+    },
+    onReachBottom() {
+        this.getList()
+    },
+    methods: {
+        // 获取用户信息
+        async initStorage(option) {
+            const userInfo = await this.$api.getStorage()
+            if (!userInfo) return
+            this.userInfo = { ...this.userInfo, ...userInfo }
+        },
+
+        // 初始化
+        initList() {
+            const action = {
+                0: this.initProductList,
+                1: this.initArticleList,
+                2: this.initMaterialList,
+                3: this.initEncyclopediaList
+            }
+            this.isLoading = true
+            action[this.currentTab] && action[this.currentTab]()
+        },
+
+        // 获取列表
+        getList() {
+            const action = {
+                0: this.fetchProductList,
+                1: this.fetchArticleList,
+                2: this.fetchMaterialList,
+                3: this.fetchEncyclopediaList
+            }
+            if (!this.hasMore) return
+            this.isLoading = true
+            action[this.currentTab] && action[this.currentTab]()
+        },
+
+        // 初始化采美百科文章列表
+        initEncyclopediaList() {
+            this.encyclopediaList = []
+            this.encyclopediaListQuery.keyword = this.keyword
+            this.encyclopediaListQuery.pageNum = 1
+            this.fetchEncyclopediaList()
+        },
+
+        // 获取采美百科文章列表
+        fetchEncyclopediaList: myDebounce(async function() {
+            try {
+                this.isLoading = true
+                const res = await this.LibraryService.GetEncyclopediaList(this.encyclopediaListQuery)
+                this.encyclopediaList = [...this.encyclopediaList, ...res.data.results]
+                this.encyclopediaHasMore = res.data.hasNextPage
+                this.encyclopediaTotal = res.data.totalRecord
+                this.encyclopediaListQuery.pageNum++
+            } catch (e) {
+                console.log(e)
+            } finally {
+                this.isLoading = false
+            }
+        }),
+
+        // 初始化采美文章列表
+        initArticleList() {
+            this.articleList = []
+            this.articleListQuery.keyword = this.keyword
+            this.articleListQuery.pageNum = 1
+            this.fetchArticleList()
+        },
+
+        // 获取采美文章列表
+        fetchArticleList: myDebounce(async function() {
+            try {
+                this.isLoading = true
+                const res = await this.LibraryService.GetArticleList(this.articleListQuery)
+                if (!res.data) return
+                const result = JSON.parse(res.data)
+                this.articleList = [...this.articleList, ...result.items]
+                this.articleTotal = result.articleTotal
+                this.articleHasMore = result.articleTotal > this.articleList.length
+                this.articleListQuery.pageNum++
+            } catch (e) {
+                console.log(e)
+            } finally {
+                this.isLoading = false
+            }
+        }),
+
+        // 采美文章筛选
+        onArticleFilterItemChange(filterData) {
+            this.isLoading = true
+            this.articleList = []
+            this.articleListQuery.keyword = this.keyword
+            this.articleListQuery.pageNum = 1
+            this.articleListQuery.status = filterData.status
+            this.fetchArticleList()
+        },
+
+        // 初始化美业资料列表
+        initMaterialList() {
+            this.materialList = []
+            this.materialListQuery.keyword = this.keyword
+            this.materialListQuery.pageNum = 1
+            this.materialListQuery.productType = 0
+            this.fetchMaterialList()
+        },
+
+        // 获取美业资料列表
+        fetchMaterialList: myDebounce(async function() {
+            try {
+                this.isLoading = true
+                const res = await this.LibraryService.GetProductArchive(this.materialListQuery)
+                this.materialList = [...this.materialList, ...res.data.results]
+                this.materialHasMore = res.data.hasNextPage
+                this.materialTotal = res.data.totalRecord
+                this.materialListQuery.pageNum++
+            } catch (e) {
+                console.log(e)
+            } finally {
+                this.isLoading = false
+            }
+        }),
+
+        // 初始化产品列表
+        initProductList() {
+            this.productList = []
+            this.productListQuery.pageNum = 1
+            this.productListQuery.keyword = this.keyword
+            this.productListQuery.identity = this.userInfo.userIdentity
+            this.productListQuery.sortType = 1
+            this.productListQuery.sortField = ''
+            this.fetchProductList()
+            this.fetchBrandList()
+        },
+
+        // 获取产品列表
+        fetchProductList: myDebounce(async function() {
+            try {
+                this.isLoading = true
+                const { data } = await this.ProductService.GetProductSearchList(this.productListQuery)
+                if (!data) return
+                const result = JSON.parse(data)
+                this.productTotal = result.total
+                this.fetchProductPrice(result.items)
+                this.productListQuery.pageNum++
+            } catch (e) {
+                console.log(e)
+            }
+        }),
+
+        // 获取产品价格
+        async fetchProductPrice(productItems = []) {
+            try {
+                //获取价格
+                const productIds = productItems.map(item => item.productId).join(',')
+                const { data } = await this.ProductService.querySearchProductPrice({
+                    userId: this.userInfo.userId,
+                    productIds: productIds,
+                    source: 2 // 来源 1 WWW 2 小程序
+                })
+                const productList = productItems.map(productItem => {
+                    const product = data.find(item => item.productId === productItem.productId)
+                    return { ...productItem, ...product }
+                })
+                this.productList = [...this.productList, ...productList]
+                this.productHasMore = this.productTotal > this.productList.length
+                console.log(this.productList)
+            } catch (e) {
+                console.log(e)
+            } finally {
+                this.isLoading = false
+            }
+        },
+
+        // 产品筛选
+        productFilter() {
+            this.isLoading = true
+            this.productList = []
+            this.productListQuery.pageNum = 1
+            const sortType = { asc: 0, desc: 1 }
+            const currentSortItem = this.currentSortItem
+            switch (currentSortItem.id) {
+                case 1:
+                    this.productListQuery.sortField = ''
+                    this.productListQuery.sortType = 1
+                    break
+                case 2:
+                    this.productListQuery.sortField = 'sales'
+                    this.productListQuery.sortType = sortType[currentSortItem.sortType]
+                    break
+                case 3:
+                    this.productListQuery.sortField = 'favorite'
+                    this.productListQuery.sortType = sortType[currentSortItem.sortType]
+                    break
+                case 4:
+                    this.productListQuery.sortField = 'price'
+                    this.productListQuery.sortType = sortType[currentSortItem.sortType]
+                    break
+            }
+            this.fetchProductList()
+        },
+
+        // 获取品牌列表
+        async fetchBrandList() {
+            try {
+                this.brandListQuery.keyword = this.keyword
+                const { data } = await this.ProductService.getCommoditySearchQUeryBrand(this.brandListQuery)
+                if (!data) return
+                this.brandList = data.map(brand => {
+                    brand.checked = false
+                    return brand
+                })
+            } catch (e) {
+                console.log(e)
+            }
+        },
+
+        // drawer reset or confirm
+        onDrawerConfirm(e) {
+            this.showDrawer = false
+            this.productListQuery.brandIds = e.brandList.map(brand => brand.id).join(',')
+            this.productListQuery.promotionFlag = e.promotionFlag
+            this.productListQuery.newFlag = e.newFlag
+            this.productFilter()
+        },
+
+        // 产品筛选切换
+        onProductFilterItemChange(item) {
+            if (item.id === 5) {
+                this.showDrawer = true
+                return
+            }
+            this.currentSortItem = item
+            this.productFilter()
+        },
+
+        // 搜素关键词库
+        fetchLibraryWordList: myDebounce(async function() {
+            try {
+                const keyword = this.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
+                })
+                if (this.libraryWordList.length <= 0) return
+                this.showLibaray = true
+            } catch (e) {
+                console.log(e)
+            }
+        }),
+
+        // 关键词点击
+        onLibraryClick(item) {
+            this.keyword = item.keyword
+            this.initList()
+        },
+
+        // menu-item 点击事件
+        onMenuItemClick(item) {
+            this.currentMenu = item
+            this.showBubblePopup = false
+        },
+
+        // tab 切换
+        onTabChange(current) {
+            this.currentTab = current.index
+            this.initList()
+        },
+
+        // 搜索
+        onSearch: myDebounce(function() {
+            if (this.currentMenu.id === 1) {
+                this.initList()
+            } else {
+                this.$api.navigateTo(`/pages/search/search-supplier?keyWord=${this.keyword}`)
+            }
+        }),
+
+        // 清空搜索框
+        onClear() {
+            this.keyword = ''
+        },
+
+        // 失去焦点
+        onBlur() {
+            setTimeout(() => {
+                this.showLibaray = false
+            }, 200)
+        },
+
+        // 用户输入
+        onInput() {
+            this.fetchLibraryWordList()
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-library {
+    min-height: 100vh;
+    background: #f5f5f5;
+
+    .sticky-container {
+        position: sticky;
+        width: 100%;
+        left: 0;
+        top: 0;
+        z-index: 99;
+        background: #f5f5f5;
+    }
+
+    .search-container {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 10rpx 24rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 86rpx;
+        background: #fff;
+
+        .search-tab {
+            font-size: 30rpx;
+            color: #666;
+            flex-shrink: 0;
+
+            .icon-xiangxiajiantou {
+                font-size: 34rpx;
+                color: #666;
+                margin-left: 10rpx;
+            }
+        }
+        .search-control {
+            width: 473rpx;
+            height: 100%;
+            background: #f7f7f7;
+            border-radius: 33rpx;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .icon-sousuo {
+                display: block;
+                width: 36rpx;
+                margin-left: 32rpx;
+                margin-right: 16rpx;
+                flex-shrink: 0;
+                color: #999999;
+            }
+
+            .icon-shanchu1 {
+                width: 36rpx;
+                margin: 0 12rpx;
+                flex-shrink: 0;
+                color: #999999;
+            }
+
+            .control {
+                flex: 1;
+                height: 100%;
+                font-size: 28rpx;
+                color: #333333;
+            }
+        }
+        .search-submit {
+            font-size: 30rpx;
+            color: #e15616;
+            flex-shrink: 0;
+        }
+    }
+    .search-category {
+        padding: 20rpx 0;
+        background: #fff;
+        margin-bottom: 24rpx;
+    }
+
+    .search-wrapper {
+        background: #fff;
+    }
+
+    .empty-box {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        margin-top: 140rpx;
+
+        .empty-image {
+            width: 500rpx;
+            height: 395rpx;
+        }
+
+        .empty-text {
+            font-size: 24rpx;
+            color: #999;
+            margin-top: 32rpx;
+        }
+    }
+
+    .bubble-popup-container {
+        padding: 10rpx 0;
+        .menu-item {
+            text-align: center;
+            line-height: 60rpx;
+            font-size: 28rpx;
+        }
+    }
+
+    .search-library {
+        position: fixed;
+        top: 86rpx;
+        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>

+ 1739 - 1606
pages/search/search.vue

@@ -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>

+ 4 - 1
services/index.js

@@ -14,6 +14,7 @@ import PublicService from './public.service.js'
 import OtherService from './other.service.js'
 import UploadService from './upload.service.js'
 import BeautyArchive from './beautyArchive.service.js'
+import LibraryService from './library.service.js'
 
 let commonService = new CommonService(ajaxService)
 let userService = new UserService(ajaxService)
@@ -28,6 +29,7 @@ let publicService = new PublicService(ajaxService)
 let otherService = new OtherService(ajaxService)
 let uploadService = new UploadService(ajaxService)
 let beautyArchive = new BeautyArchive(ajaxService)
+let libraryService = new LibraryService(ajaxService)
 
 Vue.prototype.AjaxService = ajaxService
 Vue.prototype.CommonService = commonService
@@ -42,4 +44,5 @@ Vue.prototype.SecondService = secondService
 Vue.prototype.PublicService = publicService
 Vue.prototype.OtherService = otherService
 Vue.prototype.UploadService = uploadService
-Vue.prototype.BeautyArchive = beautyArchive
+Vue.prototype.BeautyArchive = beautyArchive
+Vue.prototype.LibraryService = libraryService

+ 42 - 0
services/library.service.js

@@ -0,0 +1,42 @@
+export default class LibraryService {
+    constructor(AjaxService) {
+        Object.assign(this, { AjaxService })
+        this.name = 'LibraryService'
+    }
+
+    // 美业资料列表
+    GetProductArchive(data = {}) {
+        return this.AjaxService.get({
+            url: '/commodity/product/archive',
+            data,
+            isLoading: true,
+        })
+    }
+
+    // 采美文章列表
+    GetArticleList(data = {}) {
+        return this.AjaxService.get({
+            url: '/commodity/search/query/article',
+            data,
+            isLoading: true
+        })
+    }
+
+    // 采美百科列表
+    GetEncyclopediaList(data = {}) {
+        return this.AjaxService.get({
+            url: '/commodity/search/query/baike/keyword',
+            data,
+            isLoading: true 
+        })
+    }
+
+    // 获取关键词库关键词列表
+    GetSearchKeywordList(data = {}) {
+        return this.AjaxService.post({
+            url: '/commodity/search/query/get/keyword/list',
+            data,
+            isLoading: false
+        })
+    }
+}

+ 28 - 0
utils/util.js

@@ -64,3 +64,31 @@ export const boundingClientRect = (component, selector, flag = false) => {
         }
     })
 }
+
+/** 
+ * @description 时间日期格式化
+ * @param {dateTime} date 标准时间格式 -> new Date()
+ * @param {string} format 时间格式化的格式 'yyyy-MM-dd hh:mm:ss'
+ * @returns {string} 格式化后的时间  '2017-01-01 01:00:00'
+ */
+export function dateFormat(date = new Date(), format = 'yyyy-MM-dd hh:mm:ss') {
+    var o = {
+        'M+': date.getMonth() + 1, // month
+        'd+': date.getDate(), // day
+        'h+': date.getHours(), // hour
+        'm+': date.getMinutes(), // minute
+        's+': date.getSeconds(), // second
+        'q+': Math.floor((date.getMonth() + 3) / 3), // quarter
+        S: date.getMilliseconds(), // millisecond
+    }
+    if (/(y+)/.test(format)) {
+        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+    }
+    for (var k in o) {
+        if (new RegExp('(' + k + ')').test(format)) {
+            format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k])
+                .length))
+        }
+    }
+    return format
+}

Beberapa file tidak ditampilkan karena terlalu banyak file yang berubah dalam diff ini