Merge remote-tracking branch 'origin/developerA' into developerB

src/main/resources/static/js/auto-input.js

@@ -67,18 +67,18 @@ class AutoCompleteBase {
         var style = document.createElement('style');
         style.textContent = `
         @media screen and (min-width: 768px) {
-            .auto-input ul.auto-select-list{margin: 0;position:absolute;left:0;top:50px;width:50%;padding:8px 0;background:#fff; z-index: 999;box-shadow: 0px 6px 12px 1px rgba(0,0,0,0.1);max-height: 420px;overflow-y:auto;}
-            .auto-input ul.auto-select-list::-webkit-scrollbar { width: 8px; background-color: #fff;}
-            .auto-input ul.auto-select-list::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #e2e2e2;}
-            .auto-input ul.auto-select-list li{padding:0 16px;font-size:14px;line-height:36px;height:36px;color:#2c3e50;user-select: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
-            .auto-input ul.auto-select-list li:hover{background:#FEF6F3;}
+            ${this.options.el} ul.auto-select-list{margin: 0;position:absolute;left:0;top:50px;width:50%;padding:8px 0;background:#fff; z-index: 999;box-shadow: 0px 6px 12px 1px rgba(0,0,0,0.1);max-height: 420px;overflow-y:auto;}
+            ${this.options.el} ul.auto-select-list::-webkit-scrollbar { width: 8px; background-color: #fff;}
+            ${this.options.el} ul.auto-select-list::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #e2e2e2;}
+            ${this.options.el} ul.auto-select-list li{padding:0 16px;font-size:14px;line-height:36px;height:36px;color:#2c3e50;user-select: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+            ${this.options.el} ul.auto-select-list li:hover{background:#FEF6F3;}
         }
         @media screen and (max-width: 768px) {
-            .auto-input ul.auto-select-list{margin: 0;position:absolute;left:0;top:5vw;width:50%;padding:2.4vw 0;background:#fff; z-index: 999;box-shadow: 0px 0.6vw 1.2vw 0.1vw rgba(0,0,0,0.1);max-height:82vw;overflow-y:auto;}
-            .auto-input ul.auto-select-list::-webkit-scrollbar { width: 1.6vw; background-color: #fff;}
-            .auto-input ul.auto-select-list::-webkit-scrollbar-thumb { border-radius: 0.8vw; background-color: #e2e2e2;}
-            .auto-input ul.auto-select-list li{padding:0 3.2vw;font-size:3.4vw;line-height:8vw;height:8vw;color:#2c3e50;user-select: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
-            .auto-input ul.auto-select-list li:hover{background:#ecf0f1;}
+            ${this.options.el} ul.auto-select-list{margin: 0;position:absolute;left:0;top:5vw;width:50%;padding:2.4vw 0;background:#fff; z-index: 999;box-shadow: 0px 0.6vw 1.2vw 0.1vw rgba(0,0,0,0.1);max-height:82vw;overflow-y:auto;}
+            ${this.options.el} ul.auto-select-list::-webkit-scrollbar { width: 1.6vw; background-color: #fff;}
+            ${this.options.el} ul.auto-select-list::-webkit-scrollbar-thumb { border-radius: 0.8vw; background-color: #e2e2e2;}
+            ${this.options.el} ul.auto-select-list li{padding:0 3.2vw;font-size:3.4vw;line-height:8vw;height:8vw;color:#2c3e50;user-select: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+            ${this.options.el} ul.auto-select-list li:hover{background:#ecf0f1;}
         }
         `
         this.container.appendChild(style);
@@ -112,7 +112,7 @@ class AutoCompleteBase {
     renderList() {
         this.list.forEach((text) => {
             const li = document.createElement('li');
-            li.innerHTML = text.replace(this.keyword, '<span style="color: #E15616;">' + this.keyword + '</span>');
+            li.innerHTML = text.replace(new RegExp(this.keyword, 'ig'), (match)=> '<span style="color: #E15616;">' + match + '</span>');
             li.addEventListener('click', () => this.listItemClick(text));
             this.ul.appendChild(li);
         });
@@ -176,4 +176,4 @@ class AutoComplete extends  AutoCompleteBase {
         this.ul.style.display = 'none';
         this.options.itemClick(text);
     }
-}
+}

src/main/resources/static/js/common/serviceapi/utils.service.js

@@ -13,6 +13,15 @@ var PublicApi = {
                 json:false,
             })
         },
+        // 获取搜索关键词
+        fetchLabelKeywordList: function(params){
+            return Http.AjaxService({
+                url:'/commodity/search/query/keyword/list',
+                type:'get',
+                data:params,
+                json:false,
+            })
+        },
         // oss 初始化 （临时凭证获取）
         fetchOssInitData: function(params){
             return Http.AjaxService({

src/main/resources/static/js/document/beauty-archive.js

@@ -7,6 +7,15 @@ $(window).on('resize', function () {
     window.location.reload();
 });
 
+function getUrlParam(name) {
+    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+    var r = decodeURIComponent(window.location.search).substr(1).match(reg);
+    if (r != null) {
+        return (r[2])
+    }
+    return null;
+}
+
 //美业资料库列表
 var beautyArchive = new Vue({
     el: '#beautyArchive',
@@ -46,9 +55,12 @@ var beautyArchive = new Vue({
             if (val) return;
             this.openSearch = false;
             this.listQuery.keyword = '';
-            this.getList();
+            // this.getList();
         }
     },
+    created(){
+        this.keyword = this.listQuery.keyword = getUrlParam('keyword') || ''
+    },
     mounted() {
         this.getList();
         this.initAuthInputComplete();
@@ -156,8 +168,8 @@ var beautyArchive = new Vue({
             this.listQuery.pageNum = 1;
             this.productList = [];
             this.openSearch = true;
-            this.getList();
-            console.log(this.listQuery.keyword);
+            // this.getList();
+            open('/document/beauty-archive.html?keyword=' + this.listQuery.keyword, '_self')
         },
         //跳转到商品详情
         handleToDetail: function (product) {

src/main/resources/static/js/supplier-center/article/article-edit.js

@@ -24,6 +24,8 @@ var articleEdit = new Vue({
             guidanceImage: '',
             // seo关键词
             keyword: '',
+            // 关联标签库
+            labelIds: '',
             // 标签
             label: '',
             // 发布人
@@ -84,7 +86,10 @@ var articleEdit = new Vue({
                 {required: true, message: '请选择文章所属分类', trigger: 'change'}
             ]
         },
-        formValidate: {}
+        formValidate: {},
+        variable: '',
+        remoteLoading: false,
+        labelList: []
     },
     watch: {
         chooseLabels: function chooseLabels(newVal) {
@@ -104,6 +109,7 @@ var articleEdit = new Vue({
     mounted: function mounted() {
         $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
         $('.navLayout').find('.navList').eq(2).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+        this.initAutoInput('.seo-auto-input', 'keyword')
     },
     beforeDestroy: function beforeDestroy() {
         localStorage.removeItem('articleId');
@@ -113,6 +119,7 @@ var articleEdit = new Vue({
         init: function init() {
             var articleId = localStorage.getItem('articleId') || 0;
             this.formData.articleId = articleId;
+            this.fetchQueryKeywordList()
             this.fetchArticleCatagory(); // 文章id就是修改文章
             this.fetchFormList();
             this.watchFormData()
@@ -137,7 +144,11 @@ var articleEdit = new Vue({
         // 设置表单初始数据
         setFormData: function setFormData(shopArticle) {
             for (var key in this.formData) {
-                this.formData[key] = shopArticle[key];
+                if(key === 'labelIds' && shopArticle[key]){
+                    this.formData[key] = shopArticle[key].split(',').map(v => parseInt(v));
+                }else{
+                    this.formData[key] = shopArticle[key];
+                }
             }
             // 初始化引导图
             if (this.formData.guidanceImage) {
@@ -194,7 +205,8 @@ var articleEdit = new Vue({
             this.$refs.ruleForm.validate(valide=>{
                 if(!valide) return;
                 // _this.save();
-                _this.sensitiveWordsValidate(_this.formData)
+                const params = {..._this.formData, labelIds: _this.formData.labelIds.join(',')}
+                _this.sensitiveWordsValidate(params)
             });
         },
 
@@ -235,17 +247,14 @@ var articleEdit = new Vue({
                         const target = JSON.stringify(params[key])
                         const bool = new RegExp(res.data, 'g').test(target)
                         if (bool) {
-                            console.log(key, true)
                             const value = self.matchWords(target, res.data)
                             self.formValidate[key] = value
                             flag = false
                         } else {
-                            console.log(key, false)
                             self.formValidate[key] = ''
                         }
                     }
                 }
-                console.log(self.formValidate)
                 if(flag) return self.onReallySave(params)
                 const tip = '当前发布内容存在敏感词，已为您标记在输入框下方，请修改后，再进行保存发布，强行保存发布将会导致审核不通过！'
                 self.$confirm(tip, '提示', { confirmButtonText: '保存', cancelButtonText: '取消' }).then(function(){
@@ -295,6 +304,43 @@ var articleEdit = new Vue({
                 }, 800)
             })
         },
+        async fetchQueryKeywordList(keyword){
+            try {
+                this.remoteLoading = true
+                const res = await PublicApi.fetchLabelKeywordList({keyword: keyword});
+                this.labelList = res.data
+                this.remoteLoading = false
+            }catch (e){
+                console.log(e);
+            }
+        },
+        async autoInputCallback(keyword){
+            try {
+                const res = await PublicApi.fetchQueryKeywordList({keyword: keyword});
+                if(!res.data) return [];
+                return res.data.map(item => item.keyword);
+            } catch (e) {
+                console.log(e);
+            }
+        },
+        initAutoInput(el, variable){
+            const self = this
+            new AutoComplete({
+                el: el,
+                callback:async function(keyword){
+                    try {
+                        const res = await PublicApi.fetchQueryKeywordList({keyword: keyword});
+                        if(!res.data) return [];
+                        return res.data.map(item => item.keyword);
+                    } catch (e) {
+                        console.log(e);
+                    }
+                },
+                itemClick: function (keyword) {
+                    self.formData[variable] = keyword
+                }
+            });
+        },
     }
 });
 

src/main/resources/static/js/supplier-center/encyclopedia/edit.js

@@ -179,6 +179,7 @@ const edit = new Vue({
             image: '', // 头图地址
             typeId: '', // 分类id
             seoKeyword: '', // seo关键字
+            labelIds: [], // 标签库
             status: 0, // 状态0保存草稿箱  1已发布
             infoList: [], //  信息栏集合
             referenceList: [], // 参考资料集合
@@ -220,11 +221,14 @@ const edit = new Vue({
         typeList: [],
         // 敏感词校验数据
         formValidate: {},
-        referenceImageList: []
+        referenceImageList: [],
+        labelList: [],
+        remoteLoading: false
     },
     created() {
-        this.formData.id = CAIMEI.getUrlParam('id')
+        this.formData.id = CAIMEI.getUrlParam('id') || ''
         this.fetchTypeList()
+        this.fetchQueryKeywordList()
         // 如果是编辑就获取表单数据
         if(this.formData.id){
             this.fetchEntryData()
@@ -236,6 +240,7 @@ const edit = new Vue({
     mounted(){
         $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
         $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+        this.initAutoInput('.seo-auto-input', 'seoKeyword')
     },
     methods: {
         // 获取表单数据
@@ -249,7 +254,11 @@ const edit = new Vue({
         initFormData(data){
             for (const key in this.formData) {
                 if(data.hasOwnProperty(key)){
-                    this.formData[key] = data[key]
+                    if(key === 'labelIds' && data[key]){
+                        this.formData[key] = data[key].split(',').map(v => parseInt(v));
+                    }else{
+                        this.formData[key] = data[key]
+                    }
                 }
             }
             const imageList = this.formData.imageList.map(item =>{
@@ -310,6 +319,7 @@ const edit = new Vue({
                     textInfoListStr: JSON.stringify(this.formData.textInfoList),
                     imageListStr: JSON.stringify(this.formData.imageList), // 概述图册集合
                     videoListStr:JSON.stringify(this.formData.videoList), // 视频集合
+                    labelIds: this.formData.labelIds.join(',') // 关联标签库列表
                 };
                 this.sensitiveWordsValidate(params)
             } catch (e) {
@@ -486,7 +496,6 @@ const edit = new Vue({
             const whiteList = [];
             const self = this;
             SupplierApi.ShopBaikeProductWordsValidate({checkPoint: 2}, function (res) {
-                console.log(res)
                 let flag = true
                 for (const key in params) {
                     if (!whiteList.includes(key)) {
@@ -535,5 +544,35 @@ const edit = new Vue({
                 }, 800)
             })
         },
+
+        async fetchQueryKeywordList(keyword){
+            try {
+                this.remoteLoading = true
+                const res = await PublicApi.fetchLabelKeywordList({keyword: keyword});
+                this.labelList = res.data
+                this.remoteLoading = false
+            }catch (e){
+                console.log(e);
+            }
+        },
+
+        initAutoInput(el, variable){
+            const self = this
+            new AutoComplete({
+                el: el,
+                callback:async function(keyword){
+                    try {
+                        const res = await PublicApi.fetchQueryKeywordList({keyword: keyword});
+                        if(!res.data) return [];
+                        return res.data.map(item => item.keyword);
+                    } catch (e) {
+                        console.log(e);
+                    }
+                },
+                itemClick: function (keyword) {
+                    self.formData[variable] = keyword
+                }
+            });
+        },
     }
 })

src/main/resources/templates/supplier-center/article/article-edit.html

@@ -64,9 +64,28 @@
                             </el-form-item>
                             <!-- SEO关键词 -->
                             <el-form-item label="SEO关键词" prop="keyword" class="mint-filter">
-                                <el-input v-model="formData.keyword" placeholder="请输入SEO关键词"></el-input>
+                                <el-input v-model="formData.keyword" placeholder="请输入SEO关键词" class="seo-auto-input"></el-input>
                                 <div class="mint-message" v-if="formValidate.keyword">{{formValidate.keyword}}</div>
                             </el-form-item>
+                            <!-- 关联标签库 -->
+                            <el-form-item label="关联标签库" prop="labelIds" class="mint-filter">
+                                <el-select
+                                        v-model="formData.labelIds"
+                                        multiple
+                                        placeholder="请选择标签"
+                                        class="max-width"
+                                        :multiple-limit="6"
+                                        clearable
+                                        filterable
+                                        remote
+                                        reserve-keyword
+                                        :remote-method="fetchQueryKeywordList"
+                                        :loading="remoteLoading"
+                                >
+                                    <el-option v-for="item in labelList" :key="item.id" :label="item.keyword" :value="item.id"></el-option>
+                                </el-select>
+                                <div class="mint-message" v-if="formValidate.labelIds">{{formValidate.labelIds}}</div>
+                            </el-form-item>
                             <!-- 发布人 -->
                             <el-form-item label="发布人" prop="publisher" class="mint-filter">
                                 <el-input v-model="formData.publisher" placeholder="请填写发布人姓名"></el-input>

src/main/resources/templates/supplier-center/encyclopedia/edit.html

@@ -131,9 +131,28 @@
                             </el-select>
                         </el-form-item>
                         <el-form-item label="SEO关键词：">
-                            <el-input v-model="formData.seoKeyword" placeholder="例如：面膜"></el-input>
+                            <el-input v-model="formData.seoKeyword" placeholder="例如：面膜" class="seo-auto-input"></el-input>
                             <div class="el-form-item__error" v-if="formValidate.seoKeyword">敏感词：{{formValidate.seoKeyword}}</div>
                         </el-form-item>
+                        <!-- 关联标签库 -->
+                        <el-form-item label="关联标签库" prop="labelIds" class="mint-filter">
+                            <el-select
+                                    v-model="formData.labelIds"
+                                    multiple
+                                    placeholder="请选择标签"
+                                    class="max-width"
+                                    :multiple-limit="6"
+                                    clearable
+                                    filterable
+                                    remote
+                                    reserve-keyword
+                                    :remote-method="fetchQueryKeywordList"
+                                    :loading="remoteLoading"
+                            >
+                                <el-option v-for="item in labelList" :key="item.id" :label="item.keyword" :value="item.id"></el-option>
+                            </el-select>
+                            <div class="mint-message" v-if="formValidate.labelIds">{{formValidate.labelIds}}</div>
+                        </el-form-item>
                         <el-form-item prop="status">
                             <div class="bk-status">
                                 <label class="el-form-item__label">状态：</label>