|
|
@@ -23,12 +23,24 @@
|
|
|
</div>
|
|
|
<div class="works-category-two">
|
|
|
<!-- 展开按钮 -->
|
|
|
- <img
|
|
|
+ <!-- <img
|
|
|
src="@/assets/img/works/expand-arrow@2x.png"
|
|
|
alt="expand"
|
|
|
class="works-expand-arrow"
|
|
|
:class="categoryExpanded ? 'active' : ''"
|
|
|
- @click="handleClickExpandCategory">
|
|
|
+ @click="handleClickExpandCategory"> -->
|
|
|
+ <!-- 关键字筛选 -->
|
|
|
+ <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="works-category-two-wrapper"
|
|
|
@@ -61,6 +73,22 @@
|
|
|
</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"
|
|
|
@@ -95,7 +123,7 @@
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="result-empty-wrapper" v-else>
|
|
|
+ <div class="result-empty-wrapper" style="margin-top: 10px;" v-else>
|
|
|
<img src="@/assets/img/common/empty@2x.png" alt="empty">
|
|
|
<span>暂无搜索内容</span>
|
|
|
</div>
|
|
|
@@ -109,6 +137,45 @@
|
|
|
@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">
|
|
|
@@ -263,6 +330,20 @@ 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: [],
|
|
|
@@ -270,7 +351,7 @@ export default {
|
|
|
// worksList: [],
|
|
|
currentCategoryIndex: 0,
|
|
|
currentDrawerCategoryIndex: 0,
|
|
|
- categoryExpanded: false,
|
|
|
+ categoryExpanded: true,
|
|
|
firstLoad: false,
|
|
|
loadingWorksList: false,
|
|
|
showCategoryDrawer: false,
|
|
|
@@ -284,7 +365,24 @@ export default {
|
|
|
// loading: true,
|
|
|
// noMore: true
|
|
|
// },
|
|
|
- isWeixinApp: 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() {
|
|
|
@@ -329,6 +427,17 @@ export default {
|
|
|
} else {
|
|
|
return '20px !important'
|
|
|
}
|
|
|
+ },
|
|
|
+ priceSortText () {
|
|
|
+ let text = '价格'
|
|
|
+
|
|
|
+ if (this.pagination.sort == 1) {
|
|
|
+ text = '从高到低'
|
|
|
+ } else if (this.pagination.sort == 2) {
|
|
|
+ text = '从低到高'
|
|
|
+ }
|
|
|
+
|
|
|
+ return text
|
|
|
}
|
|
|
},
|
|
|
async asyncData ({...params}) {
|
|
|
@@ -395,7 +504,9 @@ export default {
|
|
|
page: this.pagination.page,
|
|
|
keywords: this.pagination.keywords,
|
|
|
cate_id_two: this.pagination.cate_id_two.join(','),
|
|
|
- root_type: this.root_type
|
|
|
+ root_type: this.root_type,
|
|
|
+ filter_price: this.pagination.filter_price,
|
|
|
+ sort: this.pagination.sort
|
|
|
}
|
|
|
|
|
|
const promise = new Promise((resolve, reject) => {
|
|
|
@@ -428,6 +539,28 @@ export default {
|
|
|
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) {
|
|
|
@@ -488,16 +621,16 @@ export default {
|
|
|
* 分页页码改变时
|
|
|
*/
|
|
|
handlePageChange (val) {
|
|
|
- // this.pagination.page = 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)}`
|
|
|
+ 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 加载更多
|
|
|
@@ -562,6 +695,60 @@ export default {
|
|
|
*/
|
|
|
handleClickCreate () {
|
|
|
location.href = '/otherpage/works/create'
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 回车、点击按钮：根据关键词搜索
|
|
|
+ */
|
|
|
+ handleKeywordSearch () {
|
|
|
+ this.pagination.page = 1
|
|
|
+ this._getWorksList()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击留言时
|
|
|
+ */
|
|
|
+ handleClickRemark () {
|
|
|
+ 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.$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()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -652,4 +839,24 @@ export default {
|
|
|
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>
|
huan-jie
