feat: pc企业搜索接口对接&权限控制

src/web/staticres/css/ele-reset.css

@@ -20,6 +20,10 @@
     outline: 0;
 }
 
+.el-select .el-input.is-focus .el-input__inner {
+    border-color: #2cb7ca;
+}
+
 /* tab切换颜色 */
 .el-tabs__item.is-active {
     color: #2cb7ca;
@@ -113,4 +117,54 @@ li.el-select-dropdown__item {
     align-items: center;
     justify-content: center;
     color: #fff;
+}
+
+.j-t-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 7px 50px;
+    font-size: 16px;
+    color: #686868;
+    border: 1px solid #e0e0e0;
+    border-radius: 7px;
+    background-color: #fff;
+}
+.j-t-button.confirm {
+    color: #2cb7ca;
+    border-color: #2cb7ca;
+}
+.j-t-button.confirm.active,
+.j-t-button.confirm:hover {
+    color: #fff;
+    background-color: #2cb7ca;
+}
+.j-t-button.cancel {
+    margin-left: 40px;
+}
+
+/* dialog居中布局 */
+.j-el-confirm {
+    border-radius: 8px;
+}
+.j-el-confirm .el-dialog__header,
+.j-el-confirm .el-dialog__body,
+.j-el-confirm .el-dialog__footer {
+    text-align: center;
+}
+.j-el-confirm .el-dialog__header {
+    padding-top: 30px;
+}
+.j-el-confirm .el-dialog__body {
+    color: #686868;
+    font-size: 14px;
+    line-height: 22px;
+}
+.j-el-confirm .el-dialog__footer {
+    padding-bottom: 40px;
+}
+.j-el-confirm .dialog-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

src/web/staticres/frontRouter/pc/collection/js/index-pc.js

@@ -10,6 +10,7 @@ var vm = new Vue({
     },
     data: function () {
         return {
+            powerInfo: {},
             power: false,
             powerLoaded: false,
             toast: {
@@ -39,7 +40,7 @@ var vm = new Vue({
             },
             listState: {
                 listType: 'line', // line/table
-                loaded: true, // 是否已经搜索过
+                loaded: false, // 是否已经搜索过
                 loading: false,
                 pageNum: 1, // 当前页
                 pageSize: 10, // 每页多少条数据
@@ -79,7 +80,8 @@ var vm = new Vue({
                 type: 'POST',
                 success: function (res) {
                     if (res.error_code === 0 && res.data) {
-                        this.power = res.data
+                        this.powerInfo = res.data
+                        this.checkPower()
                     }
                 }.bind(this),
                 complete: function () {
@@ -88,6 +90,9 @@ var vm = new Vue({
                 }.bind(this)
             })
         },
+        checkPower: function () {
+            this.power = this.powerInfo.entniche || this.powerInfo.member || this.powerInfo.vip !== 0
+        },
         getTagList: function () {
             $.ajax({
                 url: '/publicapply/bidcoll/getLabel',

src/web/staticres/js/ent-search-index-pc.js

@@ -1,12 +1,11 @@
-// https://app.mockplus.cn/app/GAWopftifeIg/specs/design/zOeSvzlU0mPC-w
-// element-ui输入框标签: https://blog.csdn.net/ju__ju/article/details/97801297
 var vm = new Vue({
-    el: '.search-container',
+    el: '.vue-search-container',
     delimiters: ['${', '}'],
     components: {
         areaCityComponent: areaCityComponent,
-        choiceListComponent: choiceListComponent,
-        priceComponent: priceComponent
+        selectListComponent: selectListComponent,
+        priceComponent: priceComponent,
+        noData: noDataComponent
     },
     data: function () {
         return {
@@ -17,85 +16,81 @@ var vm = new Vue({
             searchTypeList: [
                 {
                     label: '企业名称',
-                    value: 'ent-name'
+                    value: 'A'
                 },
                 {
                     label: '法定代表人',
-                    value: '法定代表人'
+                    value: 'B'
                 },
                 {
                     label: '股东',
-                    value: '股东'
+                    value: 'C'
                 },
                 {
                     label: '高管',
-                    value: '高管'
+                    value: 'D'
                 },
                 {
                     label: '中标项目/标的物',
-                    value: 'bdw'
+                    value: 'E'
                 }
             ],
             entTypeList: [
                 {
                     label: '有限责任公司',
-                    value: '有限责任公司'
+                    value: 'A'
                 },
                 {
                     label: '股份有限公司',
-                    value: '股份有限公司'
+                    value: 'B'
                 },
                 {
                     label: '有限合伙',
-                    value: '有限合伙'
+                    value: 'C'
                 },
                 {
                     label: '普通合伙',
-                    value: '普通合伙'
+                    value: 'D'
                 }
             ],
             entStateList: [
                 {
                     label: '存续（在营、开业、在业）',
-                    value: '存续'
+                    value: 'A'
                 },
                 {
-                    label: '有限合伙',
-                    value: '有限合伙'
+                    label: '吊销',
+                    value: 'B'
                 },
                 {
-                    label: '有限合伙',
-                    value: '有限合伙'
-                },
-                {
-                    label: '有限合伙',
-                    value: '有限合伙'
+                    label: '注销',
+                    value: 'C'
                 },
                 {
-                    label: '有限合伙',
-                    value: '有限合伙'
+                    label: '撤销',
+                    value: 'D'
                 }
             ],
             priceList: [
                 {
                     label: '100万以内',
-                    value: '100万以内'
+                    value: '0-100'
                 },
                 {
                     label: '100-500万',
-                    value: '100-500万'
+                    value: '100-500'
                 },
                 {
                     label: '500-1000万',
-                    value: '500-1000万'
+                    value: '500-1000'
                 },
                 {
                     label: '1000-5000万',
-                    value: '1000-5000万'
+                    value: '1000-5000'
                 },
                 {
                     label: '5000万以上',
-                    value: '5000万以上'
+                    value: '5000-'
                 },
             ],
             zblyFilterOption: {
@@ -108,61 +103,78 @@ var vm = new Vue({
                 dwlxOptions: [
                     {
                         label: '采购单位',
-                        value: '采购单位'
+                        value: '1'
                     },
                     {
                         label: '投标企业',
-                        value: '投标企业'
+                        value: '2'
                     },
                     {
                         label: '招标代理机构',
-                        value: '招标代理机构'
+                        value: '3'
                     },
                     {
                         label: '厂商',
-                        value: '厂商'
+                        value: '4'
                     }
                 ],
                 lxfsOptions: [
                     {
                         label: '固定电话',
-                        value: '固定电话'
+                        value: '1'
                     },
                     {
                         label: '手机号',
-                        value: '手机号'
+                        value: '2'
                     },
                     {
                         label: '电子邮箱',
-                        value: '电子邮箱'
+                        value: '3'
                     },
                     {
                         label: '不存在',
-                        value: '不存在'
+                        value: '4'
                     }
                 ],
             },
             filterState: {
-                searchType: '',
-                area: '',
-                zbArea: '', // 中标区域
-                dwlx: '', // 单位类型
-                lxfs: '' // 联系方式
+                searchType: [],
+                entArea: [],
+                entCity: [],
+                entType: [],
+                entStatus: [],
+                entCapital: [],
+                biddingArea: '', // 中标区域
+                entClass: '', // 单位类型
+                entContact: '' // 联系方式
             },
             listState: {
-                loaded: true, // 是否已经搜索过
+                loaded: false, // 是否已经搜索过
                 loading: false,
-                pageNum: 1, // 当前页
+                pageNum: 1, // 当前页, 从0开始
                 pageSize: 10, // 每页多少条数据
                 total: 0, // 一共多少条数据
                 list: [] // 查询请求返回的数据
-            }
+            },
+            preSearch: {
+                hover: false,
+                focus: false,
+                list: []
+            },
+            powerInfo: {
+                entniche: '',
+                member: '',
+                vip: ''
+            },
+            power: false,
+            powerLoaded: false,
+            powerDialogShow: false,
         }
     },
     watch: {
         tabActive: function (newVal, oldVal) {
             if (newVal === 'zb') {
-                if (this.this.searchContent) {
+                if (this.searchContent) {
                     location.href = '/jylab/supsearch/index.html?keywords=' + this.searchContent
                 } else {
                     location.href = '/jylab/supsearch/index.html'
@@ -170,14 +182,62 @@ var vm = new Vue({
             }
         }
     },
+    computed: {
+        preSearchListShow: function () {
+            return this.searchContent.trim().length > 2 && this.preSearch.list.length && (this.preSearch.focus || this.preSearch.hover)
+        },
+        buttonText: function () {
+            if (this.power) {
+                return '升级'
+            } else {
+                if (this.powerInfo.vip === 0) {
+                    return '开通'
+                } else if (this.powerInfo.vip === 1) {
+                    return '升级'
+                } else {
+                    return '升级'
+                }
+            }
+        }
+    },
     created: function () {
+        this.getPower()
         this.initPageData()
         this.initProvinceMapList()
     },
     mounted: function () {
         this.initDOMEvents()
+        // this.checkLogin()
     },
     methods: {
+        checkLogin: function () {
+            var moduleOpen = $('body').hasClass('modal-open')
+            if (moduleOpen) return
+            if (!loginflag) {
+                $("#bidLogin").modal("show");
+            }
+        },
+        getPower: function (callback) {
+            $.ajax({
+                url: '/publicapply/bidcoll/power',
+                type: 'POST',
+                success: function (res) {
+                    if (res.error_code === 0 && res.data) {
+                        Object.assign(this.powerInfo, res.data)
+                        this.checkPower()
+                    } else {
+                        this.checkLogin()
+                    }
+                }.bind(this),
+                complete: function () {
+                    this.powerLoaded = true
+                    callback && callback()
+                }.bind(this)
+            })
+        },
+        checkPower: function () {
+            this.power = this.powerInfo.member || this.powerInfo.vip !== 0
+        },
         initPageData: function () {
             if (pageInfo.searchContent) {
                 this.searchContent = pageInfo.searchContent
@@ -200,40 +260,180 @@ var vm = new Vue({
             refreshEwmText(this.searchContent)
         },
         isFilterShow: function () {
+            if (this.filterShow) {
+                $('.search-filters').slideUp()
+            } else {
+                $('.search-filters').slideDown()
+            }
             this.filterShow = !this.filterShow
         },
         searchTypeChange: function (t) {
-            console.info(t)
+            var eIndex = t.indexOf('E')
+            if (!this.power && eIndex !== -1) {
+                this.powerDialogShow = true
+                t.splice(eIndex, 1)
+                this.$refs.searchType.setState(t)
+                return
+            }
+            this.filterState.searchType = t
+            this.doSearch()
         },
-        areaCityChange: function (a) {
-            console.info(a)
+        areaCityChange: function (area) {
+            var city = []
+            for (var key in area) {
+                city = city.concat(area[key])
+            }
+            this.filterState.entArea = Object.keys(area)
+            this.filterState.entCity = city
+            this.doSearch()
         },
         entTypeChange: function (e) {
-            console.info(e)
+            this.filterState.entType = e
+            this.doSearch()
         },
         entStateChange: function (e) {
-            console.info(e)
+            this.filterState.entStatus = e
+            this.doSearch()
         },
+        // 标准金额区间
         inexactPriceChange: function (p) {
+            console.info('inexactPriceChange')
             console.info(p)
         },
+        // 输入金额区间
         exactPriceChange: function (p) {
+            console.info('exactPriceChange')
+            this.$refs.entCapital.setState()
             console.info(p)
         },
         zbFilterChange: function () {
-            console.info('zbFilterChange')
+            if (this.power) {
+                this.doSearch()
+            } else {
+                this.filterState.biddingArea = ''
+                this.filterState.entClass = ''
+                this.filterState.entContact = ''
+                this.powerDialogShow = true
+            }
         },
         doSearch: function () {
-            console.info(123)
+            this.resetListState()
             this.getList()
         },
+        resetListState: function () {
+            var state = {
+                loaded: false,
+                loading: false,
+                pageNum: 1,
+                total: 0,
+                list: []
+            }
+            Object.assign(this.listState, state)
+        },
+        getPreSearchList: utils.debounce(function () {
+            var data = {
+                name: this.searchContent.trim()
+            }
+            if (data.name.length <= 2) return
+            $.ajax({
+                url: '/bigmember/search/ent/association',
+                method: 'POST',
+                data: data,
+                success: function (res) {
+                    if (res.error_code === 0) {
+                        if (res.data) {
+                            this.preSearch.list = res.data.list || []
+                        }
+                    } else {
+                        this.checkLogin()
+                    }
+                }.bind(this)
+            })
+        }, 200),
         getList: function () {
+            var data = {
+                match: this.searchContent,
+                matchType: this.filterState.searchType.join(','),
+                entArea: this.filterState.entArea.join(','),
+                entCity: this.filterState.entCity.join(','),
+                entCapital: '',
+                entType: this.filterState.entType.join(','),
+                entStatus: this.filterState.entStatus.join(','),
+                biddingArea: this.filterState.biddingArea,
+                entClass: this.filterState.entClass,
+                entContact: this.filterState.entContact,
+                pageSize: this.listState.pageSize,
+                pageNum: this.listState.pageNum - 1, // 当前页, 从0开始
+            }
+            
+            if (!data.match.replace(/\s+/g, '')) return
+
+            this.listState.loading = true
+            this.listState.loaded = false
 
+            $.ajax({
+                url: '/publicapply/enterpriseSearch/doQuery',
+                method: 'POST',
+                data: data,
+                success: function (res) {
+                    if (res.error_code === 0) {
+                        if (res.data) {
+                            if (res.data.total) {
+                                if (this.power) {
+                                    this.listState.total = res.data.total
+                                } else {
+                                    this.listState.total = 9
+                                }
+                            }
+                            if (res.data.list) {
+                                if (this.power) {
+                                    this.listState.list = res.data.list || []
+                                } else {
+                                    if (res.data.list.length > 4) {
+                                        res.data.list.length = 4
+                                        res.data.list.push({
+                                            company_address: 'xxx',
+                                            company_name: 'xxx',
+                                            company_status: 'xxx',
+                                            legal_person: 'xxx',
+                                            id: 'xxx',
+                                            showMask: true
+                                        })
+                                    }
+                                    this.listState.list = res.data.list || []
+                                }
+                            }
+                        } else {
+                            this.listState.total = 0
+                            this.listState.list = []
+                        }
+                    } else {
+                        this.checkLogin()
+                    }
+                }.bind(this),
+                complete: function () {
+                    this.listState.loading = false
+                    this.listState.loaded = true
+                }.bind(this)
+            })
         },
         onPageChange: function (p) {
             this.listState.pageNum = p
             this.getList()
-        }
+        },
+        openVipPage: function () {
+            window.open('/front/subscribe.html')
+        },
+        toDetail: function (id) {
+            window.open('/swordfish/page_big_pc/svip/ent_ser_portrait/' + id)
+        },
+        calcListItemForCap: function (p) {
+            if (p) {
+                return p + '万元'
+            } else {
+                return '-'
+            }
+        },
     }
 })
 

src/web/staticres/js/selector/area-pc.js

@@ -0,0 +1,265 @@
+// var areaComponentTemplate = `
+// <div class="selector-content area-content">
+//     <div
+//         class="select-group-container"
+//         v-for="(item, key) in provinceListMap"
+//         :key="key">
+//             <span class="select-group-header index-bar" v-if="key !== '#'">{{ key }}</span>
+//             <div
+//                 class="j-button-item bgc"
+//                 v-for="(province, ii) in item"
+//                 :class="{
+//                     active: province.selected,
+//                     all: province.level === 0
+//                 }"
+//                 :key="ii*2"
+//                 @click="changeProvinceState(province)"
+//             >{{ province.name }}</div>
+//     </div>
+// </div>
+// `
+var areaComponentTemplate = "\n<div class=\"selector-content area-content\">\n    <div\n        class=\"select-group-container\"\n        v-for=\"(item, key) in provinceListMap\"\n        :key=\"key\">\n            <span class=\"select-group-header index-bar\" v-if=\"key !== '#'\">{{ key }}</span>\n            <div\n                class=\"j-button-item bgc\"\n                v-for=\"(province, ii) in item\"\n                :class=\"{\n                    active: province.selected,\n                    all: province.level === 0\n                }\"\n                :key=\"ii*2\"\n                @click=\"changeProvinceState(province)\"\n            >{{ province.name }}</div>\n    </div>\n</div>\n";
+
+var areaComponent = {
+    name: 'area-pc',
+    template: areaComponentTemplate,
+    props: {
+        initCityMap: {
+            type: Object,
+            default: function () {
+                return {
+                    // '北京': [],
+                    // '安徽': [],
+                    // '广东': [],
+                    // '河北': [],
+                    // '福建': [],
+                    // '重庆': []
+                }
+            }
+        }
+    },
+    watch: {
+        initIndustry (newVal, oldVal) {
+            this.setIndustryState(newVal)
+        },
+    },
+    data: function () {
+        return {
+            provinceListMapExp: {
+                '#': ['全国'],
+                A: ['安徽', '澳门'],
+                B: ['北京'],
+                C: ['重庆'],
+                F: ['福建'],
+                G: ['广东', '广西', '贵州', '甘肃'],
+                H: ['河北', '湖北', '黑龙江', '海南', '河南', '湖南'],
+                J: ['吉林', '江苏', '江西'],
+                L: ['辽宁'],
+                N: ['内蒙古', '宁夏'],
+                Q: ['青海'],
+                S: ['山西', '陕西', '上海', '山东', '四川'],
+                T: ['天津', '台湾'],
+                X: ['西藏', '新疆', '香港'],
+                Y: ['云南'],
+                Z: ['浙江']
+            },
+            provinceListMap: {
+                // A: [
+                //     {
+                //         name: '安徽',
+                //         selected: true,
+                //         children: []
+                //     }
+                // ]
+            },
+            // indexBar数据
+            indexList: [],
+            provinceExp: {
+                name: '全国',
+                // 选中状态
+                selected: false,
+                level: 0,
+                children: []
+            }
+        }
+    },
+    created: function () {
+        this.initIndexBarAndAreaMap()
+        this.provinceListMap['#'][0].selected = true
+        this.setCitySelected(this.initCityMap)
+    },
+    methods: {
+        // 整理数据列表
+        initIndexBarAndAreaMap: function () {
+            var _this = this
+            // 整理数据得到indexListMap()，同时获得indexList
+            var provinceListMap = {}
+            var indexList = []
+            for (var key in this.provinceListMapExp) {
+                var areaArr = []
+                indexList.push(key)
+                this.provinceListMapExp[key].forEach(function (pName) {
+                    var provinceExp = JSON.parse(JSON.stringify(_this.provinceExp))
+
+                    provinceExp.name = pName
+
+                    if (pName !== '全国') {
+                        var cities = _this.getCitiesFromJSONMap(pName)
+                        // 筛选掉直辖市和特别行政区(台湾省也不不需要展开)
+                        if (cities.ProRemark === '省份' || cities.ProRemark === '自治区') {
+                            provinceExp.level = 1
+                            if (cities.ProID === 32) {
+                                provinceExp.children = []
+                                provinceExp.selected = false
+                            } else {
+                                cities.city.forEach(function (c) {
+                                    // 将市区重组成一个新的对象
+                                    return provinceExp.children.push({
+                                        city: c.name,
+                                        selected: false,
+                                        level: 2
+                                    })
+                                })
+                            }
+                        } else {
+                            provinceExp.children = []
+                            provinceExp.selected = false
+                            provinceExp.level = 1
+                        }
+                    }
+
+                    areaArr.push(provinceExp)
+                })
+
+                provinceListMap[key] = areaArr
+            }
+
+            this.provinceListMap = provinceListMap
+            this.indexList = indexList
+
+            // 给provinceListMap赋值
+            for (var k in provinceListMap) {
+                this.$set(this.provinceListMap, k, provinceListMap[k])
+            }
+        },
+        // 循环chinaMapJSON，找到对应省下面对应的市
+        getCitiesFromJSONMap (provinceName) {
+            return chinaMapJSON.find(function (item) { return item.name.indexOf(provinceName) !== -1 })
+        },
+        // 按钮点击事件
+        changeProvinceState: function (item) {
+            // 循环所有数据，判断并改变状态
+            switch (item.level) {
+                case 0: {
+                    this.setCitySelected()
+                    break
+                }
+                case 1: {
+                    this.provinceListMap['#'][0].selected = false
+                    item.selected = !item.selected
+                    break
+                }
+                default: {
+                  console.log('未知level')
+                }
+              }
+
+              if (item.level !== 0) {
+                var allSelected = this.checkAllProvinceState()
+                if (allSelected.allSelected || allSelected.allNotSelected) {
+                  this.setCitySelected()
+                }
+              }
+        
+              this.onChange()
+        },
+        // 检查是否省份全部选中了/全部不选中
+        checkAllProvinceState: function () {
+            var stateArr = []
+            for (var key in this.provinceListMap) {
+                this.provinceListMap[key].forEach(function (item) {
+                    if (item.name !== '全国') {
+                        stateArr.push(item.selected)
+                    }
+                })
+            }
+            return {
+                allSelected: stateArr.indexOf(false) === -1,
+                allNotSelected: stateArr.indexOf(true) === -1
+            }
+        },
+        /**
+         * 初始化页面选中状态
+         * @param { Array | undefined } data 要恢复的数据
+         */
+        setCitySelected: function (data) {
+            // 设置全国
+            if (!data || Object.keys(data).length === 0) {
+                // 其他全部设置不选中，全国设置选中
+                for (var key in this.provinceListMap) {
+                    this.provinceListMap[key].forEach(function (item) {
+                        item.selected = false
+                        item.children.forEach(function (iitem) {
+                            iitem.selected = false
+                        })
+                        if (item.name === '全国') {
+                            item.selected = true
+                        }
+                    })
+                }
+            } else {
+                // 先将所有城市选择取消
+                this.setCitySelected()
+                // 设置某几个省份被选中
+                for (var key in this.provinceListMap) {
+                    this.provinceListMap[key].forEach(function (item) {
+                        var selectCityArr = data[item.name]
+                        if (Array.isArray(selectCityArr)) {
+                            if (selectCityArr.length === 0) {
+                                item.children.forEach(function (iitem) {
+                                    iitem.selected = true
+                                })
+                                item.selected = true
+                            } else {
+                                // 省份中的某些市被选中
+                                item.children.forEach(function (iitem) {
+                                    if (selectCityArr.indexOf(iitem.city) !== -1) {
+                                        iitem.selected = true
+                                    }
+                                })
+                                item.selected = false
+                            }
+                        }
+
+                        if (item.name === '全国') {
+                            item.selected = false
+                        }
+                    })
+                }
+            }
+        },
+        // 获取选中的数据
+        getSelected: function () {
+            var counter = {}
+            // 判断是否全国被选中
+            if (this.provinceListMap['#'][0].selected) {
+                return counter
+            }
+
+            // 全国没有被选中，排除循环全国
+            for (var key in this.provinceListMap) {
+                if (key === '#') continue
+                this.provinceListMap[key].forEach(function (item) {
+                    if (item.selected) {
+                        counter[item.name] = []
+                    }
+                })
+            }
+            return counter
+        },
+        onChange: function () {
+            var selected = this.getSelected()
+            this.$emit('change', selected)
+        }
+    }
+}

src/web/staticres/js/selector/select-list-pc.js

@@ -42,7 +42,7 @@ var selectListComponent = {
             type: String,
             default: 'button' // checkbox/button
         },
-        // 多选或者单选
+        // 多选或者单选(仅当selectButtonType=button时生效)
         multi: {
             type: Boolean,
             default: true
@@ -154,8 +154,8 @@ var selectListComponent = {
             } else {
                 if (this.multi) {
                     // 如果是checkbox的多选则不需要做任何操做
+                    this.selectList[0].selected = false
                     if (this.selectButtonType === 'button') {
-                        this.selectList[0].selected = false
                         item.selected = !item.selected
                     }
                 } else {

src/web/staticres/pccss/ent-search-index-pc.css

@@ -19,6 +19,9 @@
 .rotate180 {
     transform: rotate(180deg);
 }
+.search-container {
+    min-height: 400px;
+}
 .search-header {
     padding: 29px 0 15px;
     background-color: #f5f5fb;
@@ -26,9 +29,6 @@
 .search-content {
     padding: 28px 0;
 }
-.search-footer {
-    /* padding: 28px 0; */
-}
 
 .search-header-top {
     display: flex;
@@ -44,6 +44,9 @@
     height: 36px;
     cursor: pointer;
 }
+.input-container {
+    position: relative;
+}
 .input-container .el-input-group {
     width: 640px;
 }
@@ -58,6 +61,33 @@
     color: #fff;
     background-color: #2cb7ca;
 }
+.pre-search-list {
+    padding: 20px 0;
+    position: absolute;
+    z-index: 6;
+    top: 52px;
+    width: 640px;
+    background: #fff;
+    box-shadow: 0 0 20px rgb(0,0,0,0.1);
+    border-radius: 8px;
+    overflow: hidden;
+}
+.pre-search-item {
+    padding: 12px 40px;
+    width: 100%;
+    font-size: 16px;
+    line-height: 24px;
+    color: #686868;
+    box-sizing: border-box;
+    transition: all .3s;
+    cursor: pointer;
+}
+.pre-search-item:hover {
+    padding: 12px 30px;
+    color: #1d1d1d;
+    background-color: #ececec;
+}
+
 .filter-button {
     margin-left: 18px;
     color: #1D1D1D;
@@ -127,6 +157,9 @@
 .selector-card:not(:last-of-type) {
     border-bottom: 1px dashed #ECECEC;
 }
+.selector-card.price .time-content {
+    flex: none;
+}
 .selector-card.price .selector-content {
     padding-right: 26px;
 }
@@ -147,10 +180,35 @@
 }
 
 .ent-info-item {
+    position: relative;
     padding: 18px 16px;
     display: flex;
     border-bottom: 1px solid rgba(0,0,0,.05);
+    cursor: pointer;
+}
+.ent-info-item.hover:hover {
+    background-color: #f5f6f7;
+    box-shadow: inset 0 -1px 0 0 rgb(0,0,0,.05);
+}
+.ent-info-item .list-item-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url(/images/ent-search-item-mask.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: auto;
+}
+.ent-info-item .list-item-mask > p {
+    margin-bottom: 18px;
 }
+
 .ent-info-item .ei-i-l-container {
     width: 60px;
     height: 60px;
@@ -198,4 +256,17 @@
     border: 1px solid #2cb7ca;
     background-color: rgba(44,183,202,0.08);
     border-radius: 5px;
-}
+}
+
+.ent-info-list {
+    min-height: 400px;
+}
+
+.j-el-confirm {
+    width: 380px!important;
+}
+.j-el-confirm .j-t-button {
+    padding: 0;
+    height: 36px;
+    width: 132px;
+}

src/web/templates/pc/entsearchindex.html

@@ -15,7 +15,7 @@
         <script src="{{Msg "seo" "cdn"}}/js/jquery.cookie.js"></script>
 		<script src="{{Msg "seo" "cdn"}}/js/public-nav.js?v={{Msg "seo" "version"}}"></script>
         
-        <link href="//cdn.jsdelivr.net/npm/element-ui@2.9.2/lib/theme-chalk/index.css" rel="stylesheet" />
+        <link href="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css" rel="stylesheet" />
         <link rel="stylesheet" href='{{Msg "seo" "cdn"}}/css/ele-reset.css?v={{Msg "seo" "version"}}'>
         <link rel="stylesheet" href='{{Msg "seo" "cdn"}}/css/selector/selector.css?v={{Msg "seo" "version"}}'>
         <link rel="stylesheet" href='{{Msg "seo" "cdn"}}/pccss/ent-search-index-pc.css?v={{Msg "seo" "version"}}'>
@@ -31,169 +31,237 @@
 	<body>
 	{{include "/common/pchead.html"}}
 	<section class="search-container">
-        <div class="search-header">
-            <div class="search-header-content w">
-                <div class="search-header-top">
-                    <div class="input-container flex">
-                        <el-input placeholder="请输入内容" v-model="searchContent" clearable>
-                            <template slot="append">
-                                <div class="search-button no-select" @click="doSearch">搜 索</div>
-                            </template>
-                        </el-input>
-                        <div class="filter-button no-select" @click="isFilterShow">
-                            <span>筛选</span>
-                            <span class="el-icon-arrow-up" :class="filterShow ? '' : 'rotate180'"></span>
+        <div class="vue-search-container" v-cloak>
+            <div class="search-header">
+                <div class="search-header-content w">
+                    <div class="search-header-top">
+                        <div class="input-container flex">
+                            <el-input
+                                placeholder="请输入内容"
+                                v-model.trim="searchContent"
+                                clearable
+                                @focus="preSearch.focus=true"
+                                @blur="preSearch.focus=false"
+                                @input="getPreSearchList"
+                                @keyup.enter.native="doSearch">
+                                <template slot="append">
+                                    <div class="search-button no-select" @click="doSearch">搜 索</div>
+                                </template>
+                            </el-input>
+                            <div class="filter-button no-select" @click="isFilterShow">
+                                <span>筛选</span>
+                                <span class="el-icon-arrow-up" :class="filterShow ? '' : 'rotate180'"></span>
+                            </div>
+                            <div class="pre-search-list" style="display: none;" v-show="preSearchListShow" @mouseout="preSearch.hover=false" @mouseover="preSearch.hover=true">
+                                <div
+                                    class="pre-search-item ellipsis"
+                                    v-for="(item,index) in preSearch.list"
+                                    :key="index"
+                                    @click="toDetail(item.entId)"
+                                    >${ item.name }</div>
+                            </div>
                         </div>
-                    </div>
-                    <div class="search-right-wx">
-                        <img src="{{Msg "seo" "cdn"}}/images/biddingSearch/sea-right-wx.png" />
-                        <div class="search-right-wx-inner">
-                            <div class="wx-inner-title">扫码关注剑鱼标讯</div>
-                            <div class="wx-inner-ewm">
-                                <img id="keyImg" src="/front/share/{{.T.shareid}}"/>
+                        <div class="search-right-wx">
+                            <img src="{{Msg "seo" "cdn"}}/images/biddingSearch/sea-right-wx.png" />
+                            <div class="search-right-wx-inner">
+                                <div class="wx-inner-title">扫码关注剑鱼标讯</div>
+                                <div class="wx-inner-ewm">
+                                    <img id="keyImg" src="/front/share/{{.T.shareid}}"/>
+                                </div>
+                                <div class="wx-inner-bottom">微信扫一扫<br>随时随地掌握招标信息</div>
                             </div>
-                            <div class="wx-inner-bottom">微信扫一扫<br>随时随地掌握招标信息</div>
                         </div>
                     </div>
-                </div>
-                <div class="search-header-bottom">
-                    <el-tabs v-model="tabActive">
-                        <el-tab-pane label="招标搜索" name="zb"></el-tab-pane>
-                        <el-tab-pane label="企业搜索" name="qy"></el-tab-pane>
-                    </el-tabs>
-                </div>
-            </div>
-        </div>
-        <div class="search-content w">
-            <div class="selector-card-container search-filters">
-                <div class="selector-card">
-                    <div class="selector-card-header">搜索范围：</div>
-                    <div class="selector-card-content">
-                        <choice-list-component :list="searchTypeList" @change="searchTypeChange"></choice-list-component>
+                    <div class="search-header-bottom">
+                        <el-tabs v-model="tabActive">
+                            <el-tab-pane label="招标搜索" name="zb"></el-tab-pane>
+                            <el-tab-pane label="企业搜索" name="qy"></el-tab-pane>
+                        </el-tabs>
                     </div>
                 </div>
-                <div class="selector-card">
-                    <div class="selector-card-header">注册地：</div>
-                    <div class="selector-card-content">
-                        <area-city-component @change="areaCityChange"></area-city-component>
+            </div>
+            <div class="search-content w">
+                <div class="selector-card-container search-filters">
+                    <div class="selector-card">
+                        <div class="selector-card-header">搜索范围：</div>
+                        <div class="selector-card-content">
+                            <select-list-component
+                                ref="searchType"
+                                :list="searchTypeList"
+                                select-button-type="checkbox"
+                                :show-all-button="false"
+                                @change="searchTypeChange"
+                            ></select-list-component>
+                        </div>
                     </div>
-                </div>
-                <div class="selector-card price">
-                    <div class="selector-card-header">注册资本：</div>
-                    <div class="selector-card-content">
-                        <choice-list-component :multi="false" :list="priceList" @change="inexactPriceChange"></choice-list-component>
-                        <price-component @confirm="exactPriceChange"></price-component>
+                    <div class="selector-card">
+                        <div class="selector-card-header">注册地：</div>
+                        <div class="selector-card-content">
+                            <area-city-component @change="areaCityChange"></area-city-component>
+                        </div>
                     </div>
-                </div>
-                <div class="selector-card">
-                    <div class="selector-card-header">企业类型：</div>
-                    <div class="selector-card-content">
-                        <choice-list-component :multi="false" :list="entTypeList" @change="entTypeChange"></choice-list-component>
+                    <div class="selector-card price">
+                        <div class="selector-card-header">注册资本：</div>
+                        <div class="selector-card-content">
+                            <select-list-component
+                                ref="entCapital"
+                                select-button-type="checkbox"
+                                :list="priceList"
+                                :show-all-button="false"
+                                @change="inexactPriceChange"
+                            ></select-list-component>
+                            <price-component @confirm="exactPriceChange"></price-component>
+                        </div>
                     </div>
-                </div>
-                <div class="selector-card">
-                    <div class="selector-card-header">企业状态：</div>
-                    <div class="selector-card-content">
-                        <choice-list-component :multi="false" :list="entStateList" @change="entStateChange"></choice-list-component>
+                    <div class="selector-card">
+                        <div class="selector-card-header">企业类型：</div>
+                        <div class="selector-card-content">
+                            <select-list-component
+                                select-button-type="checkbox"
+                                :list="entTypeList"
+                                :show-all-button="false"
+                                @change="entTypeChange"
+                            ></select-list-component>
+                        </div>
                     </div>
-                </div>
-                <div class="selector-card vip filter-zbly">
-                    <div class="selector-card-header">
-                        <span>招标领域筛选条件</span>
-                        <span class="icon-hot-vip"></span>
+                    <div class="selector-card">
+                        <div class="selector-card-header">企业状态：</div>
+                        <div class="selector-card-content">
+                            <select-list-component
+                                select-button-type="checkbox"
+                                :list="entStateList"
+                                :show-all-button="false"
+                                @change="entStateChange"
+                            ></select-list-component>
+                        </div>
                     </div>
-                    <div class="selector-card-content flex mini-select">
-                        <el-select v-model="filterState.zbArea" filterable @change="zbFilterChange" clearable placeholder="中标区域">
-                            <el-option
-                                v-for="item in zblyFilterOption.zbAreaOptions"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value">
-                            </el-option>
-                        </el-select>
-                        <el-select v-model="filterState.dwlx" @change="zbFilterChange" clearable placeholder="单位类型">
-                            <el-option
-                                v-for="item in zblyFilterOption.dwlxOptions"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value">
-                            </el-option>
-                        </el-select>
-                        <el-select v-model="filterState.lxfs" @change="zbFilterChange" clearable placeholder="联系方式">
-                            <el-option
-                                v-for="item in zblyFilterOption.lxfsOptions"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value">
-                            </el-option>
-                        </el-select>
+                    <div class="selector-card vip filter-zbly">
+                        <div class="selector-card-header">
+                            <span>招标领域筛选条件</span>
+                            <span class="icon-hot-vip"></span>
+                        </div>
+                        <div class="selector-card-content flex mini-select">
+                            <el-select v-model="filterState.biddingArea" @change="zbFilterChange" clearable placeholder="中标区域">
+                                <el-option
+                                    v-for="item in zblyFilterOption.zbAreaOptions"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                                </el-option>
+                            </el-select>
+                            <el-select v-model="filterState.entClass" @change="zbFilterChange" clearable placeholder="单位类型">
+                                <el-option
+                                    v-for="item in zblyFilterOption.dwlxOptions"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                                </el-option>
+                            </el-select>
+                            <el-select v-model="filterState.entContact" @change="zbFilterChange" clearable placeholder="联系方式">
+                                <el-option
+                                    v-for="item in zblyFilterOption.lxfsOptions"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="search-result-container">
-                <div class="ent-info-list">
-                    <div class="ent-info-item">
-                        <div class="ei-i-left">
-                            <div class="ei-i-l-container">
-                                <!-- <img src="" alt=""> -->
-                            </div>
-                        </div>
-                        <div class="ei-i-right">
-                            <div class="ei-r-title-container flex">
-                                <div class="ei-r-title">北京剑鱼信息技术有限公司</div>
-                                <div class="ei-r-tag">存续</div>
+                <div class="search-result-container">
+                    <div class="ent-info-list" v-loading="listState.loading">
+                        <div
+                            class="ent-info-item"
+                            :class="{
+                                hover: !item.showMask
+                            }"
+                            v-for="(item,index) in listState.list"
+                            @click="toDetail(item.id)"
+                            :key="item.id">
+                            <div class="ei-i-left">
+                                <div class="ei-i-l-container">
+                                    <img src="" alt="">
+                                </div>
                             </div>
-                            <div class="ei-r-info-container">
-                                <div class="ei-r-info-item">
-                                    <div class="i-label">法定代表人：</div>
-                                    <div class="i-text">xxxxx</div>
+                            <div class="ei-i-right">
+                                <div class="ei-r-title-container flex">
+                                    <div class="ei-r-title">${ item.company_name }</div>
+                                    <div class="ei-r-tag" v-if="item.company_status">${ item.company_status }</div>
                                 </div>
-                                <div class="ei-r-info-item">
-                                    <div class="i-label">注册资本：</div>
-                                    <div class="i-text">xxxxx</div>
+                                <div class="ei-r-info-container">
+                                    <div class="ei-r-info-item">
+                                        <div class="i-label">法定代表人：</div>
+                                        <div class="i-text">${ item.legal_person ? item.legal_person : '-' }</div>
+                                    </div>
+                                    <div class="ei-r-info-item">
+                                        <div class="i-label">注册资本：</div>
+                                        <div class="i-text">${ calcListItemForCap(item.capital) }</div>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="ei-r-info-container">
-                                <div class="ei-r-info-item">
-                                    <div class="i-label">地址：</div>
-                                    <div class="i-text">xxxxx</div>
+                                <div class="ei-r-info-container">
+                                    <div class="ei-r-info-item">
+                                        <div class="i-label">地址：</div>
+                                        <div class="i-text">${ item.company_address ? item.company_address : '-' }</div>
+                                    </div>
                                 </div>
                             </div>
+                            <div @click.stop.prevent class="list-item-mask" v-if="item.showMask">
+                                <p>${ buttonText }会员，查看更多搜索结果</p>
+                                <button class="j-t-button confirm active" @click="openVipPage">
+                                    去${ buttonText }
+                                </button>
+                            </div>
                         </div>
+                        <no-data style="display: none;" v-show="listState.list.length === 0 && listState.loaded" tip-text="没有找到符合条件的企业"></no-data>
                     </div>
                 </div>
+                <div class="el-pagination-container">
+                    <el-pagination
+                        background
+                        layout="prev, pager, next, ->"
+                        :hide-on-single-page="true"
+                        :current-page="listState.pageNum"
+                        :page-size="listState.pageSize"
+                        :total="listState.total"
+                        @current-change="onPageChange"
+                    ></el-pagination>
+                </div>
             </div>
-            <div class="el-pagination-container">
-                <el-pagination
-                    background
-                    layout="prev, pager, next, ->"
-                    :hide-on-single-page="true"
-                    :current-page="listState.pageNum"
-                    :page-size="listState.pageSize"
-                    :total="listState.total"
-                    @current-change="onPageChange"
-                ></el-pagination>
-            </div>
+            <div class="search-footer w"></div>
+            <el-dialog
+                title="您暂无使用权限"
+                :visible.sync="powerDialogShow"
+                custom-class="j-el-confirm"
+                :show-close="false"
+                top="25vh"
+                width="30%">
+                <span>开通超级订阅，全国企业随手查，搜索信息更高效！</span>
+                <span slot="footer" class="dialog-footer">
+                    <button class="j-t-button confirm active" @click="openVipPage">去开通</el-button>
+                    <button class="j-t-button cancel" @click="powerDialogShow=false">取 消</button>
+                </span>
+            </el-dialog>
         </div>
-        <div class="search-footer w">footer</div>
     </section>
 
     {{include "/common/pcbottom.html"}}
     {{include "/common/baiducc.html"}}
 
-    <script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/element-ui@2.9.2/lib/index.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
     <script src="{{Msg "seo" "cdn"}}/big-member/js/utils.js?v={{Msg "seo" "version"}}"></script>
     <script>
         var pageInfo = {
             searchContent: {{.T.searchvalue}},
         }
+        haslogin({{.T.logid}})
 	</script>
     <script src='{{Msg "seo" "cdn"}}/common-module/selector/js/china_area.js'></script>
     <script src='{{Msg "seo" "cdn"}}/common-module/selector/js/provinceMap.js'></script>
-    <script src='{{Msg "seo" "cdn"}}/js/selector/choice-list-pc.js?v={{Msg "seo" "version"}}'></script>
+    <script src='{{Msg "seo" "cdn"}}/js/selector/select-list-pc.js?v={{Msg "seo" "version"}}'></script>
     <script src='{{Msg "seo" "cdn"}}/js/selector/area-city-pc.js?v={{Msg "seo" "version"}}'></script>
     <script src='{{Msg "seo" "cdn"}}/js/selector/price-pc.js?v={{Msg "seo" "version"}}'></script>
+    <script src='{{Msg "seo" "cdn"}}/js/selector/no-data-pc.js?v={{Msg "seo" "version"}}'></script>
     <script src='{{Msg "seo" "cdn"}}/js/ent-search-index-pc.js?v={{Msg "seo" "version"}}'></script>
 </body>