proginn-frontend/pages/work_down/index.vue

<template>
    <div
        class='work_down_main'
        :class="mobile ? 'mobileMain' : ''"
        :style="{marginTop: mobile ? '0px !important':mainMarginTop,  marginBottom: mobile ? '0px !important' : '30px !important'}">
        <div class="works-wrapper" v-if="!mobile">
            <div class="works-category">
                <div class="works-category-one">
                    <div class="work-category-one-body">
                        <a
                        class="works-category-one-item"
                        :class="pagination.selectedCateIdOne == '' ? 'active' : ''"
                        href="/works/">
                        全部
                    </a>
                    <a
                        class="works-category-one-item"
                        :class="pagination.selectedCateIdOne == category.f_name ? 'active' : ''"
                        v-for="(category) in categoryList"
                        :key="`category-one-${category.category_id}`"
                        :href="`/works/${category.f_name}/`">
                        {{ category.name }}
                    </a>
                    </div>
                </div>
                <div class="works-category-two">
                    <!-- 展开按钮 -->
                    <img
                        src="@/assets/img/works/expand-arrow@2x.png"
                        alt="expand"
                        class="works-expand-arrow"
                        :class="categoryExpanded ? 'active' : ''"
                        @click="handleClickExpandCategory">
                    <!-- 全部二级分类 -->
                    <div
                        class="works-category-two-wrapper"
                        :class="categoryExpanded ? 'expand' : ''"
                        v-show="pagination.selectedCateIdOne == ''">
                        <a
                            class="works-category-two-item"
                            :class="pagination.cate_id_two.indexOf(category.f_name) > -1 ? 'active' : ''"
                            v-for="category in categoryAll"
                            :key="`category-all-${category.category_id}`"
                            :href="`/works/${category.f_name}/`">
                            {{ category.name }}
                        </a>
                    </div>
                    <!-- 接口返回的二级分类 -->
                    <div
                        class="works-category-two-wrapper"
                        :class="categoryExpanded ? 'expand' : ''"
                        v-for="(category) in categoryList"
                        :key="`category-two-wrapper-${category.category_id}`"
                        v-show="pagination.selectedCateIdOne == category.f_name">
                        <a
                            class="works-category-two-item"
                            :class="pagination.cate_id_two.indexOf(categoryChild.f_name) > -1 ? 'active' : ''"
                            v-for="categoryChild in category.child"
                            :key="`category-two-${categoryChild.category_id}`"
                            :href="`/works/${categoryChild.f_name}/`">
                            {{ categoryChild.name }}
                        </a>
                    </div>
                </div>
            </div>
            <!-- 资源筛选 -->
            <div class="filter-wrapper">
                <!-- 价格排序 -->
                <div class="sort-content" @click="handleClickPriceSort">
                    <img src="@/assets/img/common/filter-icon@2x.png">
                    <span>{{ priceSortText }}</span>
                </div>
                <!-- 价格筛选 -->
                <div class="price-filter">
                    <el-radio-group v-model="pagination.filter_price" @change="handlePriceFilterChange">
                        <el-radio :label="0">全部</el-radio>
                        <el-radio :label="1">付费</el-radio>
                        <el-radio :label="2">免费</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="works-list" v-if="worksList.length" v-loading="loadingWorksList">
                <div
                    class="works-item"
                    v-for="(works, index) in worksList"
                    :key="`works-item-${index}-${works.wid}`">
                    <a style="display:block" :href="`${baseUrl}/w/${works.wid}`" @click="cnzz('资源下载','资源商城+项目点击','图片')" target="_blank">
                        <div class="works-detail-wrapper">
                            <img v-if="works.image" class="works-image" :src="works.image" alt="works-image">
                            <div class="works-detail" >
                                <a class="works-name" @click="cnzz('资源下载','资源商城+项目点击','标题')" :href="`${baseUrl}/w/${works.wid}`">{{ works.name }}</a>
                                <div class="works-description">{{ works.description }}</div>
                                <div class="more-info-wrapper">
                                    <div class="price-info">
                                        <span class="works-price">{{ Number(works.price) > 0 ? '￥' + works.price : '免费' }}</span>
                                        <span class="download-count" v-if="Number(works.down_num) > 0">{{ works.down_num }}人已下载</span>
                                        <span class="file-format">{{ works.file_type }}格式</span>
                                        <span class="file-size">{{ works.file_size }}</span>
                                    </div>
                                    <div class="more-info">
                                        <img class="plus-img" src="@/assets/img/works/plus-icon@2x.png" alt="">
                                        <span class="plus-count">{{ works.plus_co }}</span>
                                        <span class="time">{{ works.update_time }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    <!-- <a class="works-user-wrapper" :href="`${baseUrl}/wo/${works.uid}/works`">
                        <img class="user-avatar" :src="works.icon_url" alt="avatar">
                        <div class="username">{{ works.nickname }}</div>
                        <div class="company">{{ works.company }} {{ works.kill_title || '' }}</div>
                    </a> -->
                </div>
            </div>
            <div class="result-empty-wrapper" style="margin-top: 10px;" v-else>
                <img src="@/assets/img/common/empty@2x.png" alt="empty">
                <span>暂无搜索内容</span>
            </div>
            <div class="pagination-wrapper" v-if="pagination.total > pagination.pagesize">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="pagination.page"
                    :total="pagination.total"
                    :page-size="pagination.pagesize"
                    @current-change="handlePageChange">
                </el-pagination>
            </div>
            <!-- 留言 modal -->
            <el-dialog
                :visible.sync="isShowRemarkDialog"
                width="520px"
                top="10vh"
                class="remark-modal">
                <div class="remark-title" slot="title">寻找源码</div>
                <div class="remark-content">
                    <el-form
                        ref="remarkForm"
                        :model="remarkModel"
                        :rules="remarkRules"
                        class="remark-form">
                        <el-form-item label="源码描述" prop="remarkDescription">
                            <el-input
                                class="remark-description"
                                type="textarea"
                                placeholder="请输入您要寻找的源码描述"
                                maxlength="1000"
                                :autosize="{ minRows: 6, maxRows: 12 }"
                                show-word-limit
                                v-model="remarkModel.remarkDescription"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式" prop="remarkContact">
                            <el-input
                                class="remark-contact"
                                type="input"
                                placeholder="请输入您的手机号，方便我们找到源码后第一时间通知您"
                                v-model="remarkModel.remarkContact"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="action-wrapper">
                        <el-button
                            :loading="saveRemarkIsLoading"
                            class="confirm-btn"
                            @click="handleSaveRemark">提交</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
        <div class="works-wrapper-mobile" v-else>
            <div class="works-category">
                <div class="works-category-one">
                    <div class="category-scroller">
                        <div
                            class="works-category-one-item"
                            :class="currentCategoryIndex === 0 ? 'active' : ''"
                            @click="handleClickCategoryOne(0)">
                            全部
                        </div>
                        <div
                            class="works-category-one-item"
                            :class="currentCategoryIndex === index + 1 ? 'active' : ''"
                            v-for="(category, index) in categoryList"
                            :key="`category-one-${category.category_id}`"
                            @click="handleClickCategoryOne(index + 1)">
                            {{ category.name }}
                        </div>
                    </div>
                    <!-- filter -->
                    <div class="filter-bg"></div>
                    <div class="filter-wrapper" @click="handleShowCategoryDrawer">
                        <img src="@/assets/img/works/filter-icon@2x.png" alt="filter">
                    </div>
                </div>
                <div class="works-category-two">
                    <!-- 全部二级分类 -->
                    <div
                        class="works-category-two-wrapper"
                        :class="categoryExpanded ? 'expand' : ''"
                        v-show="currentCategoryIndex === 0">
                        <div
                            class="works-category-two-item"
                            :class="pagination.cate_id_two.indexOf(category.f_name) > -1 ? 'active' : ''"
                            v-for="category in categoryAll"
                            :key="`category-all-${category.category_id}`"
                            @click="handleClickCategoryTwo(category.f_name)">
                            {{ category.name }}
                        </div>
                    </div>
                    <!-- 接口返回的二级分类 -->
                    <div
                        class="works-category-two-wrapper"
                        :class="categoryExpanded ? 'expand' : ''"
                        v-for="(category, index) in categoryList"
                        :key="`category-two-wrapper-${category.category_id}`"
                        v-show="currentCategoryIndex === index + 1">
                        <div
                            class="works-category-two-item"
                            :class="pagination.cate_id_two.indexOf(categoryChild.f_name) > -1 ? 'active' : ''"
                            v-for="categoryChild in category.child"
                            :key="`category-two-${categoryChild.category_id}`"
                            @click="handleClickCategoryTwo(categoryChild.f_name)">
                            {{ categoryChild.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="works-list" :class="showWxHeader ? 'works-list__showWxHeader' : ''">
                <ul
                    class="works-list-wrapper"
                    v-infinite-scroll="handleLoadMoreWorks"
                    :infinite-scroll-disabled="pagination.noMore"
                    :infinite-scroll-immediate="false">
                    <div
                        class="works-item"
                        v-for="(works, index) in worksList"
                        :key="`works-item-${index}-${works.wid}`"
                        @click="handleClickWorkItem(works.wid)">
                        <img v-if="works.image" class="works-image" v-lazy="works.image" alt="works-image">
                        <div class="works-detail" :class="works.image ? '' : 'without-img'">
                            <div class="works-name">{{ works.name }}</div>
                            <div class="works-description">{{ works.description }}</div>
                            <div class="price-info">
                                <span class="works-price">{{ Number(works.price) > 0 ? '￥' + works.price : '免费' }}</span>
                                <span class="download-count">{{ works.down_num }}人已下载</span>
                            </div>
                        </div>
                    </div>
                    <!-- 空数据 -->
                    <div class="result-empty-wrapper" v-if="!worksList.length && !pagination.loading">
                        <img src="@/assets/img/common/empty@2x.png" alt="empty">
                        <span>暂无搜索内容</span>
                    </div>
                    <p v-if="pagination.loading" class="works-list-tips">加载中...</p>
                    <p v-if="worksList.length && pagination.noMore && !firstLoad" class="works-list-tips">没有更多了</p>
                </ul>
            </div>
            <!-- 弹出的分类选择 -->
            <el-drawer
                ref="categoryDrawer"
                class="category-drawer"
                :visible.sync="showCategoryDrawer"
                direction="ttb"
                :withHeader="false">
                <div class="drawer-category-one">
                    <div
                        class="drawer-category-one-item"
                        :class="currentDrawerCategoryIndex === 0 ? 'active' : ''"
                        @click="handleClickDrawerCategoryOne(0)">
                        全部
                    </div>
                    <div
                        class="drawer-category-one-item"
                        :class="currentDrawerCategoryIndex === index + 1 ? 'active' : ''"
                        v-for="(category, index) in categoryList"
                        :key="`drawer-category-one-${category.category_id}`"
                        @click="handleClickDrawerCategoryOne(index + 1)">
                        {{ category.name }}
                    </div>
                </div>
                <div class="drawer-category-two">
                    <!-- 全部二级分类 -->
                    <div
                        class="drawer-category-two-wrapper"
                        v-show="currentDrawerCategoryIndex === 0">
                        <div
                            class="drawer-category-two-item"
                            :class="pagination.cate_id_two.indexOf(category.category_id) > -1 ? 'active' : ''"
                            v-for="category in categoryAll"
                            :key="`drawer-category-all-${category.category_id}`"
                            @click="handleClickDrawerCategoryTwo(category.category_id)">
                            {{ category.name }}
                        </div>
                    </div>
                    <!-- 接口返回的二级分类 -->
                    <div
                        class="drawer-category-two-wrapper"
                        v-for="(category, index) in categoryList"
                        :key="`drawer-category-two-wrapper-${category.category_id}`"
                        v-show="currentDrawerCategoryIndex === index + 1">
                        <div
                            class="drawer-category-two-item"
                            :class="pagination.cate_id_two.indexOf(categoryChild.category_id) > -1 ? 'active' : ''"
                            v-for="categoryChild in category.child"
                            :key="`drawer-category-two-${categoryChild.category_id}`"
                            @click="handleClickDrawerCategoryTwo(categoryChild.category_id)">
                            {{ categoryChild.name }}
                        </div>
                    </div>
                </div>
            </el-drawer>
        </div>

        <div class="works-aside">
            <div class="works-aside-body">
                    <!-- 关键字筛选 -->
                    <div class="search-wrapper">
                        <div class="search-content">
                            <el-input
                                v-model="pagination.keywords"
                                @keyup.enter.native="handleKeywordSearch"
                                class="search-input"
                                placeholder="源码搜索"></el-input>
                            <el-button class="search-btn" @click="handleKeywordSearch">搜索</el-button>
                        </div>
                        <div class="search-tips">找不到想要的源码？<span @click="handleClickRemark">请留言给我们</span></div>
                    </div>
                    <div class="add-works-btn-wraps">
                        <a class="add-works-btn" target="_blank" href="/otherpage/works/create">上传资源</a>
                        <a class="add-works-btn" target="_blank" href="/workbench/works/index">我的资源</a>

                    </div>

            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex";
import DealSeoList from "@/components/work_down/dealSeoList"
import qs from "qs"

export default {
    data () {
        // 验证留言手机号
        var validateContact = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('联系方式不能为空'))
            }
            var reg = /^[0-9-]*$/
            if (!reg.test(value)) {
                callback(new Error('联系方式只能为数字'))
            } else if (value.length > 15) {
                callback(new Error('联系方式支持填写不超过15字符'))
            } else {
                callback()
            }
        };
        return {
            baseUrl: '',
            // categoryAll: [],
            // categoryList: [],
            // worksList: [],
            currentCategoryIndex: 0,
            currentDrawerCategoryIndex: 0,
            categoryExpanded: false,
            firstLoad: false,
            loadingWorksList: false,
            showCategoryDrawer: false,
            // pagination: {
            //     page: 1,
            //     keywords: '',
            //     cate_id_two: [],
            //     // 非接口参数
            //     pagesize: 20,
            //     total: 0,
            //     loading: true,
            //     noMore: true
            // },
            isWeixinApp: true,
            // 寻找源码弹窗
            isShowRemarkDialog: false,
            saveRemarkIsLoading: false,
            remarkModel: {
                remarkDescription: '', // 源码描述
                remarkContact: '', // 联系方式
            },
            remarkRules: {
                remarkDescription: [
                    { required: true, message: '源码描述不能为空', trigger: 'blur' },
                    { min: 5, max: 1000, message: '源码描述支持填写5-1000字符', trigger: 'blur' }
                ],
                remarkContact: [
                    { required: true, message: '联系方式不能为空', trigger: 'blur' },
                    { validator: validateContact, trigger: 'blur' }
                ]
            }
        }
    },
    head() {
        const {
            title = "",
            keyword = "",
            description = "",
            h1 = "",
            canonical = "",
            metaLocation
        } = this.head || {}
        let obj = {
            title: title,
            meta: [{
                name: "keywords",
                content: keyword
            }, {
                name: "description",
                content: description
            }, {
                name: "h1",
                content: h1
            }],
            link: [{rel: "canonical", href: canonical}]
        }
        if (metaLocation) {
            obj.meta.push({name: "location", content: metaLocation})
        }
        return obj
    },
    computed: {
        ...mapState(["deviceType"]),
        showWxHeader () {
            return !this.deviceType.app && !this.isWeixinApp &&
                (this.deviceType.android || this.deviceType.ios)
        },
        mainMarginTop () {
            if (this.mobile && this.showWxHeader) {
                return '64px !important'
            } else if (this.mobile) {
                return '0px !important'
            } else {
                return '55px !important'
            }
        },
        priceSortText () {
            let text = '价格'

            if (this.pagination.sort == 1) {
                text = '从高到低'
            } else if (this.pagination.sort == 2) {
                text = '从低到高'
            }

            return text
        }
    },
    async asyncData ({...params}) {
        let dealDataObj = new DealSeoList(params)
        let ans = await dealDataObj.dealData()

        return {
            ...ans
        }
    },
    mounted () {
        this.baseUrl = this.$store.state.domainConfig.siteUrl
        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
        // const self = this
        // const getWorksCategoryPromise = this._getWorksCategory()
        // const getWorksListPromise =  this._getWorksList()

        // Promise.all([getWorksCategoryPromise, getWorksListPromise]).then(([a, b]) => {
        //     console.log(a, b)
        //     self.firstLoad = false
        // })
    },
    methods: {
        /**
         * 获取作品资源分类
         */
        _getWorksCategory () {
            const self = this
            const promise = new Promise((resolve, reject) => {
                self.$axios.$post('/api/user_works/cate', { root_type: this.root_type }).then(res => {
                    if (res.status === 1) {
                        let categoryAll = []
                        self.categoryList = res.data || []
                        self.categoryList.forEach(category => {
                            if (category.child && category.child.length) {
                                category.child.forEach(categoryChild => {
                                    categoryAll.push(categoryChild)
                                })
                            }
                        })
                        self.categoryAll = categoryAll
                    }
                    resolve()
                }).catch(err => {
                    reject(err)
                })
            })

            return promise
        },
        /**
         * 获取作品列表
         */
        _getWorksList () {
            const self = this

            if (!this.firstLoad) {
                this.loadingWorksList = true
                this.pagination.loading = true
                this.pagination.noMore = false
            }

            const data = {
                page: this.pagination.page,
                keywords: this.pagination.keywords,
                cate_id_two: this.pagination.cate_id_two.join(','),
                root_type: this.root_type,
                filter_price: this.pagination.filter_price,
                sort: this.pagination.sort
            }

            const promise = new Promise((resolve, reject) => {
                self.$axios.$post('/api/user_works/workFileList', data).then(res => {
                    if (res.status === 1) {
                        const worksList = res.data.list || []
                        self.pagination.pagesize = res.data.pagesize || 20
                        self.pagination.total = res.data.total || 0
                        if (self.mobile) {
                            self.worksList = self.worksList.concat(worksList)
                        } else {
                            self.worksList = worksList
                        }

                        if (self.pagination.page * self.pagination.pagesize >= self.pagination.total) {
                            self.pagination.noMore = true
                        } else {
                            self.pagination.noMore = false
                        }
                    }
                    resolve()
                }).catch(err => {
                    reject(err)
                }).then(() => {
                    self.loadingWorksList = false
                    self.pagination.loading = false
                })
            })

            return promise
        },
        /**
         * 保存留言
         */
        _saveRemark () {
            const self = this
            this.saveRemarkIsLoading = true
            const data = {
                content: this.remarkModel.remarkDescription,
                phone: this.remarkModel.remarkContact
            }

            this.$axios.$post('/api/UserWorks/addRemark', data).then((res) => {
                if (Number(res.status) === 1) {
                    self.$message.success('提交成功，请耐心等待')
                    self.isShowRemarkDialog = false
                } else {
                    self.$message.error(res.info)
                }
            }).then(() => {
                self.saveRemarkIsLoading = false
            })
        },
        /**
         * 点击一级分类
         */
        handleClickCategoryOne (id) {
            if (id === 0) {
                // 点击全部时，移除筛选分类
                this.currentCategoryIndex = id
                this.pagination.cate_id_two = []
                this.pagination.page = 1
                this.worksList = []
                window.scroll(0, 0)

                this._getWorksList()
                return
            }
            if (id !== this.currentCategoryIndex) {
                this.currentCategoryIndex = id
            }
        },
        /**
         * 点击二级分类
         */
        handleClickCategoryTwo (id) {
            if (this.mobile) {
                // 移动端单选
                const index = this.pagination.cate_id_two.indexOf(id)
                if (index > -1) {
                    this.pagination.cate_id_two = []
                } else {
                    this.pagination.cate_id_two = [id]
                }
                this.pagination.page = 1
                this.worksList = []
                window.scroll(0, 0)

                this._getWorksList()
            } else {
                // web 端多选
                const index = this.pagination.cate_id_two.indexOf(id)
                if (index > -1) {
                    // 已选择，移除
                    this.pagination.cate_id_two.splice(index, 1)
                } else {
                    // 未选择，添加
                    this.pagination.cate_id_two.push(id)
                }
                this.pagination.page = 1

                this._getWorksList()
            }
        },
        /**
         * 展开二级分类
         */
        handleClickExpandCategory () {
            this.categoryExpanded = !this.categoryExpanded
        },
        /**
         * 分页页码改变时
         */
        handlePageChange (val) {
            this.pagination.page = val

            this._getWorksList()
            // let query = {
            //     page: val
            // }
            // if (this.root_type && Number(this.root_type) > 0) {
            //     query.root_type = this.root_type
            // }
            // window.location.href = `${window.location.origin}${window.location.pathname}?${qs.stringify(query)}`
        },
        /**
         * mobile 加载更多
         */
        handleLoadMoreWorks () {
            if (this.pagination.loading) {
                return
            }

            this.pagination.page++

            this._getWorksList()
        },
        /**
         * 弹出分类选择 drawer
         */
        handleShowCategoryDrawer () {
            this.showCategoryDrawer = true
        },
        /**
         * 点击 mobile 分类 drawer 一级分类
         */
        handleClickDrawerCategoryOne (id) {
            if (id === 0) {
                this.showCategoryDrawer = false
                return
            }
            if (id !== this.currentDrawerCategoryIndex) {
                this.currentDrawerCategoryIndex = id
            }
        },
        /**
         * 点击 mobile 分类 drawer 二级分类
         */
        handleClickDrawerCategoryTwo (id) {
            const index = this.pagination.cate_id_two.indexOf(id)
            if (index > -1) {
                this.pagination.cate_id_two = []
            } else {
                this.pagination.cate_id_two = [id]
            }
            this.showCategoryDrawer = false
            this.pagination.page = 1
            this.worksList = []
            window.scroll(0, 0)

            this._getWorksList()
        },
        /**
         * 点击 mobile 每一项列表
         */
        handleClickWorkItem (wid) {
            if (this.deviceType.ios || this.deviceType.android) {
                let jumpUrl = `${this.baseUrl}/w/${wid}`
                location.href = `proginn://webview?url=${jumpUrl}`
            } else {
                location.href = `${this.baseUrl}/w/${wid}`
            }
        },
        /**
         * 点击上传资源时
         */
        // handleClickCreate () {
        //     location.href = '/otherpage/works/create'

        // },
        /**
         * 回车、点击按钮：根据关键词搜索
         */
        handleKeywordSearch () {
            this.cnzz("资源下载","资源商城+搜索","");
            this.pagination.page = 1
            this._getWorksList()
        },
        /**
         * 点击留言时
         */
        handleClickRemark () {
            this.cnzz("资源下载","资源商城+留言","");
            if (this.remarkModel.remarkContact == '') {
                // 若已登录，自动填写手机号
                if (this.userinfo && this.userinfo.login_mobile) {
                    this.remarkModel.remarkContact = this.userinfo.login_mobile
                }
            }

            this.isShowRemarkDialog = true
        },
        /**
         * 留言点击保存时
         */
        handleSaveRemark () {
            const self = this
            this.cnzz("资源下载","资源商城+留言保存","");
            this.$refs.remarkForm.validate((valid) => {
                if (valid) {
                    self._saveRemark()
                }
            })
        },
        /**
         * 价格筛选改变时
         */
        handlePriceFilterChange () {
            this.pagination.page = 1
            this._getWorksList()
        },
        /**
         * 点击价格排序时
         */
        handleClickPriceSort () {
            if (this.pagination.sort == 0) {
                this.pagination.sort = 1
            } else if (this.pagination.sort == 1) {
                this.pagination.sort = 2
            } else if (this.pagination.sort == 2) {
                this.pagination.sort = 0
            }

            this.pagination.page = 1
            this._getWorksList()
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/work_down/index.scss";
</style>
<style lang="scss" scoped>
.work_down_main {
    display: flex;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
.works-aside {
    position: relative;
    padding-left: 20px;
    width: 370px;
    .works-aside-body {
        position: fixed;
        min-height: 200px;
        width: 350px;
        .add-works-btn-wraps {
            padding-top: 10px;
            display: flex;
            width: 100%;
        }
        .add-works-btn {
            margin: 0;
            display: block;
            text-align: center;
            color: #308eff;
            background-color: white;
            height: 44px;
            line-height: 44px;
            width: 100%;
            outline: none;
            border-radius: 0;
            font-weight: normal;
            font-size: 14px;
            &:first-child {
                border-right: 1px solid rgba(0,0,0,0.05);
            }
        }
        .search-wrapper {
            width: 100%;
            height: 100%;
            .search-content {
                position: relative;
                display: flex;
                width: 100%;
                height: 44px;
                display: flex;
                align-items: center;
                .search-input {
                    flex: 1;
                    height: 100%;
                    input {
                        border-radius: 0;
                        outline: none;
                        border: none;
                        height: 100%;
                    }
                }
                .search-btn {
                    width: 80px;
                    height: 100%;
                    padding: 0;
                    border: none;
                    background: #308eff;
                    border-radius: 0px;
                    text-align: center;
                    color: #ffffff;
                }
            }
            .search-tips {
                margin-top: 10px;
                line-height: 18px;
                font-size: 13px;
                font-family: PingFangSC, PingFangSC-Regular;
                color: #999999;
                span {
                    color: #308eff;
                    cursor: pointer;
                }
            }
        }
    }
}
.category-drawer {
    .el-drawer {
        height: 100vh !important;
        .el-drawer__body {
            position: relative;
            width: 100%;
            display: flex;
        }
    }
    .drawer-category-one {
        width: 100px;
        height: 100vh;
        padding-bottom: 34px;
        background: #f4f5f9;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        &::-webkit-scrollbar {
            display: none;
        }
        .drawer-category-one-item {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 15px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            color: #222222;
            background: inherit;
            &.active {
                color: #308eff;
                background: #ffffff;
            }
        }
    }
    .drawer-category-two {
        width: calc(100% - 100px);
        height: 100vh;
        padding: 4px 10px 34px;
        background: #ffffff;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        &::-webkit-scrollbar {
            display: none;
        }
        .drawer-category-two-wrapper {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .drawer-category-two-item {
                margin: 8px 8px 0 0;
                padding: 0 12px;
                height: 35px;
                line-height: 35px;
                background: rgba(244,245,249,.8);
                border-radius: 4px;
                // opacity: 0.8;
                font-size: 13px;
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                color: #222222;
                &.active {
                    height: 33px;
                    line-height: 33px;
                    border: 1px solid #308eff;
                    background: #ffffff;
                    font-size: 12px;
                    font-family: PingFangSC, PingFangSC-Medium;
                    font-weight: 500;
                    color: #308eff;
                }
            }
        }
    }
}
.wx-header-custom-list {
    position: fixed !important;
    z-index: 11 !important;
}
.search-input {
    width: 100%;
    height: 34px;
    input {
        width: 100%;
        height: 34px;
        line-height: 34px;
        padding-left: 10px;
        padding-right: 70px;
    }
}
.remark-modal .el-dialog__body {
    padding-top: 15px !important;
}
.remark-modal .el-form-item__label {
    font-weight: 700;
}
.price-filter .el-radio {
    margin-right: 18px;
}
</style>