|
|
@@ -0,0 +1,203 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="menu-title">
|
|
|
+ 智能推荐
|
|
|
+ </div>
|
|
|
+ <div class="menu-content">
|
|
|
+ <el-tabs type="border-card">
|
|
|
+ <el-tab-pane label="人物推荐">
|
|
|
+ <div>
|
|
|
+ <el-select
|
|
|
+ style="width: 100%;"
|
|
|
+ v-model="selectUserId"
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ reserve-keyword
|
|
|
+ placeholder="请输入人物关键词"
|
|
|
+ :remote-method="remoteUserMethod"
|
|
|
+ @change="handleUserSelectChange"
|
|
|
+ :loading="userLoading">
|
|
|
+ <el-option
|
|
|
+ v-for="item in userList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.fid"
|
|
|
+ :value="item.fid">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="line-item" v-for="item in recommendByUserList" :key="item.id">
|
|
|
+ <div class="title-time">
|
|
|
+ <div>{{ item.fid }}</div>
|
|
|
+ <div>{{ item.createTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="description">{{ item.description }}</div>
|
|
|
+ <div class="labels">
|
|
|
+ <el-tag v-for="la in item.labelArr">{{la}}</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="分类推荐">
|
|
|
+ <div>
|
|
|
+ <el-select
|
|
|
+ style="width: 100%;"
|
|
|
+ v-model="selectCategory"
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ reserve-keyword
|
|
|
+ placeholder="请输入分类关键词"
|
|
|
+ :remote-method="remoteCategoryMethod"
|
|
|
+ @change="handleCategorySelectChange"
|
|
|
+ :loading="categoryLoading">
|
|
|
+ <el-option
|
|
|
+ v-for="item in categoryList"
|
|
|
+ :key="item.name"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.name">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="line-item" v-for="item in recommendByCategoryList" :key="item.id">
|
|
|
+ <div class="title-time">
|
|
|
+ <div>{{ item.fid }}</div>
|
|
|
+ <div>{{ item.createTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="description">{{ item.description }}</div>
|
|
|
+ <div class="labels">
|
|
|
+ <el-tag v-for="la in item.labelArr">{{la}}</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import request from '@/utils/request';
|
|
|
+
|
|
|
+var _this;
|
|
|
+export default {
|
|
|
+ name: "recommendManage",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userList: [],
|
|
|
+ userLoading: false,
|
|
|
+ selectUserId: '',
|
|
|
+ recommendByUserList: [],
|
|
|
+
|
|
|
+ categoryList: [],
|
|
|
+ categoryLoading: false,
|
|
|
+ selectCategory: '',
|
|
|
+ recommendByCategoryList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ _this = this;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ remoteCategoryMethod(query) {
|
|
|
+ if (query !== '') {
|
|
|
+ this.categoryLoading = true;
|
|
|
+ request({
|
|
|
+ url: '/category/query_list',
|
|
|
+ method: 'post',
|
|
|
+ data: {
|
|
|
+ LIKES_name: query
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ this.categoryLoading = false;
|
|
|
+ this.categoryList = res.data;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.categoryList = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCategorySelectChange() {
|
|
|
+ request({
|
|
|
+ url: '/gorse/recommend_by_userid',
|
|
|
+ method: 'post',
|
|
|
+ data: {
|
|
|
+ userId: _this.selectCategory
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ res.data.forEach(row => {
|
|
|
+ if(row.labels) {
|
|
|
+ row.labelArr = row.labels.split(',');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.recommendByCategoryList = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ remoteUserMethod(query) {
|
|
|
+ if (query !== '') {
|
|
|
+ this.userLoading = true;
|
|
|
+ request({
|
|
|
+ url: '/risk-user/query_list',
|
|
|
+ method: 'post',
|
|
|
+ data: {
|
|
|
+ LIKES_fid: query
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ this.userLoading = false;
|
|
|
+ this.userList = res.data;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.userList = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleUserSelectChange() {
|
|
|
+ request({
|
|
|
+ url: '/gorse/popular_by_category',
|
|
|
+ method: 'post',
|
|
|
+ data: {
|
|
|
+ category: _this.selectCategory
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ res.data.forEach(row => {
|
|
|
+ if(row.labels) {
|
|
|
+ row.labelArr = row.labels.split(',');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.recommendByUserList = res.data;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+.line-item {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 32px;
|
|
|
+ margin: 20px 0;
|
|
|
+ border-bottom: 1px solid #dee0e2;
|
|
|
+ padding-bottom: 10px;
|
|
|
+
|
|
|
+ .title-time{
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ div:first-child {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #9da2a8;
|
|
|
+ }
|
|
|
+
|
|
|
+ div:last-child {
|
|
|
+ margin-left: auto;
|
|
|
+ color: #bbbcbd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .description {
|
|
|
+ color: #bbbcbd;
|
|
|
+ }
|
|
|
+
|
|
|
+ .labels {
|
|
|
+ color: #9da2a8;
|
|
|
+
|
|
|
+ .el-tag {
|
|
|
+ margin: 0 10px 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|