热词功能完善
Chopper
parent
9b14cd633e
commit
8d9a64d84b
|
|
@ -0,0 +1,157 @@
|
||||||
|
<template>
|
||||||
|
<div class="search">
|
||||||
|
<Card>
|
||||||
|
<Row class="operation">
|
||||||
|
<Button @click="add()" type="primary">设置今日热词</Button>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<p>
|
||||||
|
<Alert type="success">
|
||||||
|
这里展示今日系统中搜索前一百的搜索热词，分数为热词在排序系统中的分数，分数越高，可以在用户获取热词时进行优先展示（首页商品搜索栏下方推荐位）（分数可以填写负数，会降低推荐度）
|
||||||
|
</Alert>
|
||||||
|
</p>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<div class="card-list">
|
||||||
|
<Card v-for="words in data" class="card-item" :key="words" onclick="">
|
||||||
|
<p>
|
||||||
|
<a href="#" slot="extra" @click.prevent="add(words)">{{ words }}</a>
|
||||||
|
</p>
|
||||||
|
<p slot="extra">
|
||||||
|
<a @click="deleteWords(words)">
|
||||||
|
<Icon type="md-close"/>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500">
|
||||||
|
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
|
||||||
|
<FormItem label="热词" prop="keywords">
|
||||||
|
<Input v-model="form.keywords" clearable style="width: 100%"/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="分数" prop="point">
|
||||||
|
<Input v-model="form.point" clearable style="width: 100%"/>
|
||||||
|
</FormItem>
|
||||||
|
</Form>
|
||||||
|
<div slot="footer">
|
||||||
|
<Button type="text" @click="modalVisible = false">取消</Button>
|
||||||
|
<Button type="primary" :loading="submitLoading" @click="handleSubmit"
|
||||||
|
>提交
|
||||||
|
</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getHotWords, setHotWords, deleteHotWords} from "@/api/index";
|
||||||
|
|
||||||
|
import {regular} from "@/utils";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "hotWords",
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
submitLoading: false,
|
||||||
|
modalTitle: "",
|
||||||
|
loading: true, // 表单加载状态
|
||||||
|
modalVisible: false, //弹出框
|
||||||
|
form: {
|
||||||
|
keywords: "",
|
||||||
|
point: 0,
|
||||||
|
},
|
||||||
|
data: [], // 表单数据
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
formValidate: {
|
||||||
|
keywords: [regular.REQUIRED, regular.VARCHAR20],
|
||||||
|
point: [regular.REQUIRED, regular.NUMBER],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
getDataList() {
|
||||||
|
this.loading = true;
|
||||||
|
getHotWords().then((res) => {
|
||||||
|
this.loading = false;
|
||||||
|
if (res.success) {
|
||||||
|
this.data = res.result;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
handleSubmit() {
|
||||||
|
this.$refs.form.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.submitLoading = true;
|
||||||
|
setHotWords(this.form).then((res) => {
|
||||||
|
this.submitLoading = false;
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("操作成功");
|
||||||
|
this.getDataList();
|
||||||
|
this.modalVisible = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//设置热词优先
|
||||||
|
add(words) {
|
||||||
|
this.modalType = 0;
|
||||||
|
this.modalTitle = "设置热词";
|
||||||
|
if (words) {
|
||||||
|
this.form.keywords = words;
|
||||||
|
} else {
|
||||||
|
this.form.keywords = "";
|
||||||
|
}
|
||||||
|
this.form.point = 1;
|
||||||
|
this.modalVisible = true;
|
||||||
|
},
|
||||||
|
deleteWords(words) {
|
||||||
|
this.$Modal.confirm({
|
||||||
|
title: "是否确定删除热词",
|
||||||
|
content: "<p>您确定要删除此热词吗？</p>",
|
||||||
|
okText: "确实",
|
||||||
|
cancelText: "取消",
|
||||||
|
onOk: () => {
|
||||||
|
let params = {words: words}
|
||||||
|
deleteHotWords(params).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("删除成功");
|
||||||
|
this.getDataList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.card-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-item {
|
||||||
|
min-width: 100px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.ivu-card-extra {
|
||||||
|
right: 3px;
|
||||||
|
top: 15px;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,157 @@
|
||||||
|
<template>
|
||||||
|
<div class="search">
|
||||||
|
<Card>
|
||||||
|
<Row class="operation">
|
||||||
|
<Button @click="add()" type="primary">设置今日热词</Button>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<p>
|
||||||
|
<Alert type="success">
|
||||||
|
这里展示今日系统中搜索前一百的搜索热词，分数为热词在排序系统中的分数，分数越高，可以在用户获取热词时进行优先展示（首页商品搜索栏下方推荐位）（分数可以填写负数，会降低推荐度）
|
||||||
|
</Alert>
|
||||||
|
</p>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<div class="card-list">
|
||||||
|
<Card v-for="words in data" class="card-item" :key="words" onclick="">
|
||||||
|
<p>
|
||||||
|
<a href="#" slot="extra" @click.prevent="add(words)">{{ words }}</a>
|
||||||
|
</p>
|
||||||
|
<p slot="extra">
|
||||||
|
<a @click="deleteWords(words)">
|
||||||
|
<Icon type="md-close"/>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500">
|
||||||
|
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
|
||||||
|
<FormItem label="热词" prop="keywords">
|
||||||
|
<Input v-model="form.keywords" clearable style="width: 100%"/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="分数" prop="point">
|
||||||
|
<Input v-model="form.point" clearable style="width: 100%"/>
|
||||||
|
</FormItem>
|
||||||
|
</Form>
|
||||||
|
<div slot="footer">
|
||||||
|
<Button type="text" @click="modalVisible = false">取消</Button>
|
||||||
|
<Button type="primary" :loading="submitLoading" @click="handleSubmit"
|
||||||
|
>提交
|
||||||
|
</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getHotWords, setHotWords, deleteHotWords} from "@/api/index";
|
||||||
|
|
||||||
|
import {regular} from "@/utils";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "hotWords",
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
submitLoading: false,
|
||||||
|
modalTitle: "",
|
||||||
|
loading: true, // 表单加载状态
|
||||||
|
modalVisible: false, //弹出框
|
||||||
|
form: {
|
||||||
|
keywords: "",
|
||||||
|
point: 0,
|
||||||
|
},
|
||||||
|
data: [], // 表单数据
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
formValidate: {
|
||||||
|
keywords: [regular.REQUIRED, regular.VARCHAR20],
|
||||||
|
point: [regular.REQUIRED, regular.NUMBER],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
getDataList() {
|
||||||
|
this.loading = true;
|
||||||
|
getHotWords().then((res) => {
|
||||||
|
this.loading = false;
|
||||||
|
if (res.success) {
|
||||||
|
this.data = res.result;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
handleSubmit() {
|
||||||
|
this.$refs.form.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.submitLoading = true;
|
||||||
|
setHotWords(this.form).then((res) => {
|
||||||
|
this.submitLoading = false;
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("操作成功");
|
||||||
|
this.getDataList();
|
||||||
|
this.modalVisible = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//设置热词优先
|
||||||
|
add(words) {
|
||||||
|
this.modalType = 0;
|
||||||
|
this.modalTitle = "设置热词";
|
||||||
|
if (words) {
|
||||||
|
this.form.keywords = words;
|
||||||
|
} else {
|
||||||
|
this.form.keywords = "";
|
||||||
|
}
|
||||||
|
this.form.point = 1;
|
||||||
|
this.modalVisible = true;
|
||||||
|
},
|
||||||
|
deleteWords(words) {
|
||||||
|
this.$Modal.confirm({
|
||||||
|
title: "是否确定删除热词",
|
||||||
|
content: "<p>您确定要删除此热词吗？</p>",
|
||||||
|
okText: "确实",
|
||||||
|
cancelText: "取消",
|
||||||
|
onOk: () => {
|
||||||
|
let params = {words: words}
|
||||||
|
deleteHotWords(params).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("删除成功");
|
||||||
|
this.getDataList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.card-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-item {
|
||||||
|
min-width: 100px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.ivu-card-extra {
|
||||||
|
right: 3px;
|
||||||
|
top: 15px;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,145 @@
|
||||||
|
<template>
|
||||||
|
<div class="layout">
|
||||||
|
<Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||||
|
|
||||||
|
<FormItem class="label-item" v-for="(point,index) in formValidate.pointSettingItems" :key="index"
|
||||||
|
:label="'签到设置'+(index+1)">
|
||||||
|
<div class="label-item">
|
||||||
|
|
||||||
|
<InputNumber :min="1" v-model="point.day"></InputNumber>
|
||||||
|
|
||||||
|
<InputNumber :min="0" v-model="point.point"></InputNumber>
|
||||||
|
|
||||||
|
<Button ghost type="error" @click="delSign(point,index)">删除</Button>
|
||||||
|
<span class="ml_10">签到<span class="theme_color">{{ point.day }}</span>天，赠送<span
|
||||||
|
class="theme_color">{{ point.point }}</span>积分</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="操作：">
|
||||||
|
<Button @click="addSign">新增签到</Button>
|
||||||
|
</FormItem>
|
||||||
|
<div class="label-btns">
|
||||||
|
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {setSetting} from "@/api/index";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formValidate: {}, // 表单数据
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: ["res", "type"],
|
||||||
|
created() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 保存
|
||||||
|
submit(name) {
|
||||||
|
let that = this;
|
||||||
|
this.setupSetting();
|
||||||
|
},
|
||||||
|
// 保存设置
|
||||||
|
setupSetting() {
|
||||||
|
setSetting(this.type, this.formValidate).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("保存成功!");
|
||||||
|
} else {
|
||||||
|
this.$Message.error("保存失败!");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
delSign(item, index) {
|
||||||
|
this.formValidate.pointSettingItems.splice(index, 1);
|
||||||
|
},
|
||||||
|
addSign() {
|
||||||
|
if (this.formValidate.pointSettingItems.length >= 5) {
|
||||||
|
this.$Message.error({
|
||||||
|
content: "最多设置5项签到设置",
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.formValidate.pointSettingItems.push({
|
||||||
|
point: "0",
|
||||||
|
day: this.formValidate.pointSettingItems.length,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 实例化数据
|
||||||
|
init() {
|
||||||
|
this.res = JSON.parse(this.res);
|
||||||
|
Object.keys(this.res).map((item) => {
|
||||||
|
if (item == "pointSettingItems") {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.res[item] += "";
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$set(this, "formValidate", {...this.res});
|
||||||
|
|
||||||
|
Object.keys(this.formValidate).forEach((item) => {
|
||||||
|
this.ruleValidate[item] = [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请填写必填项",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
if (value < 0) {
|
||||||
|
callback(new Error("不能输入负数！"));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "./style.scss";
|
||||||
|
|
||||||
|
.label-item {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
> .ivu-input-number {
|
||||||
|
width: 100px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .ivu-input-number:nth-last-of-type(1) {
|
||||||
|
width: 150px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .ivu-input {
|
||||||
|
width: 100px;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ivu-input {
|
||||||
|
width: 70px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ivu-input-wrapper {
|
||||||
|
width: 70px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-btns {
|
||||||
|
/deep/ .ivu-btn {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue