
6 changed files with 352 additions and 10 deletions
After Width: | Height: | Size: 255 B |
After Width: | Height: | Size: 114 KiB |
@ -0,0 +1,206 @@ |
|||||
|
<template> |
||||
|
<div class="demo-wrap min-flex-right"> |
||||
|
<div class="flex-between"> |
||||
|
<h2>站点列表</h2> |
||||
|
<el-form :model="form"> |
||||
|
<GuipSelect v-model="form.payword" :defaultValue="form.payword" prop="payword" width="100%" |
||||
|
:options="options_payword" /> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class=" flex-common" id=""> |
||||
|
<el-form> |
||||
|
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" |
||||
|
style="width: 100%" :key="random()"> |
||||
|
<el-table-column type="index" label="排序" width="100"> |
||||
|
</el-table-column> |
||||
|
<!-- 其他列 --> |
||||
|
<el-table-column prop="name" label="站点简称" width="210"> |
||||
|
<template slot-scope="scope"> |
||||
|
<a class="name_link flex cell_render" :href="scope.row.link" target="_blank"> |
||||
|
{{ scope.row.name }} |
||||
|
<img class="edit_icon" src="@/assets/site/form_link.svg" alt=""> |
||||
|
</a> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="registerDate" label="注册时间"></el-table-column> |
||||
|
<el-table-column prop="count" label="6月订单数" sortable width="230"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row.count }} |
||||
|
<span class="flex"><img class="edit_icon" src="@/assets/site/form_link.svg" alt="">{{ |
||||
|
scope.row.percentage }}%上年持平</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="price" label="8月订单数" sortable></el-table-column> |
||||
|
<el-table-column prop="phoneService" label="手机服务" :filters="phoneService" |
||||
|
:filter-method="filterHandler"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="status" label="状态" width="195"></el-table-column> |
||||
|
<!-- <el-table-column fixed="right" label="操作" width="182"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
<el-button @click="handleServiceClick(scope.row)" type="text">服务列表</el-button> |
||||
|
<el-button @click="handleSetClick(scope.row)" type="text">站点设置</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
</el-table> |
||||
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
||||
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
||||
|
:total="tableData.length"> |
||||
|
</el-pagination> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import GuipSelect from '@/components/GuipSelect.vue' |
||||
|
export default { |
||||
|
// 站点设置 |
||||
|
name: '', |
||||
|
props: [''], |
||||
|
components: { |
||||
|
GuipSelect, |
||||
|
// GuipSelectFilter, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
phoneService: [ |
||||
|
{ |
||||
|
text: '不限', |
||||
|
value: '0' |
||||
|
}, |
||||
|
{ |
||||
|
text: 'H5', |
||||
|
value: '1' |
||||
|
}, |
||||
|
{ |
||||
|
text: '小程序', |
||||
|
value: '2' |
||||
|
}, |
||||
|
{ |
||||
|
text: 'H5以及小程序', |
||||
|
value: '3' |
||||
|
}, |
||||
|
], |
||||
|
currentPage: 1, //当前页 |
||||
|
pageSize: 2, //每页的容量 |
||||
|
total: 0, //列表总数 |
||||
|
options_payword: [ |
||||
|
{ |
||||
|
label: '按篇', value: '0' |
||||
|
}, |
||||
|
{ |
||||
|
label: '按字符', value: '1' |
||||
|
}, |
||||
|
], |
||||
|
options: [ |
||||
|
{ label: '选项1', value: '1' }, |
||||
|
{ label: '选项2', value: '2' }, |
||||
|
{ label: '选项3', value: '3' }, |
||||
|
// 更多选项... |
||||
|
], |
||||
|
filteredOptions: this.options, |
||||
|
|
||||
|
phoneServicelist: |
||||
|
{ |
||||
|
0: '不限', |
||||
|
1: ' H5', |
||||
|
2: '小程序', |
||||
|
3: '无手机服务' |
||||
|
|
||||
|
}, |
||||
|
tableData: [ |
||||
|
{ |
||||
|
name: '哈哈哈', |
||||
|
link: 'http://www.chachongz.com', |
||||
|
registerDate: '2025.02.18', |
||||
|
group: '1', |
||||
|
phoneService: '1', |
||||
|
status: '1',//配置中中 |
||||
|
price: 10, |
||||
|
count: 23432, |
||||
|
percentage: '2.5' |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
name: '知网学诚教育', |
||||
|
link: 'http://new.checkcopy.com', |
||||
|
registerDate: '2025.02.18', |
||||
|
group: '2', |
||||
|
phoneService: '2', |
||||
|
status: '0',//运行中 |
||||
|
price: 20, |
||||
|
count: 3432, |
||||
|
percentage: '17.5' |
||||
|
}, |
||||
|
{ |
||||
|
name: '哈哈哈111', |
||||
|
link: 'http://www.chachongz.com', |
||||
|
registerDate: '2025.02.18', |
||||
|
group: '1', |
||||
|
phoneService: '1', |
||||
|
status: '1',//配置中中 |
||||
|
price: 10, |
||||
|
count: 7868, |
||||
|
percentage: '2.5' |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
name: '知网学诚教育2222', |
||||
|
link: 'http://new.checkcopy.com', |
||||
|
registerDate: '2025.02.18', |
||||
|
group: '2', |
||||
|
phoneService: '2', |
||||
|
status: '0',//运行中 |
||||
|
price: 20, |
||||
|
count: 32432, |
||||
|
percentage: '17.5' |
||||
|
}, |
||||
|
], |
||||
|
form: { |
||||
|
payword: '0', |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// this.$refs.scrollContainer.scrollTo(0) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 列筛选 |
||||
|
filterHandler(value, row, column) { |
||||
|
// console.log(value, row, column,'======'); |
||||
|
const property = column['property']; |
||||
|
if (value == 0) { |
||||
|
return row[property] != value |
||||
|
} |
||||
|
return row[property] === value; |
||||
|
}, |
||||
|
// 自定义搜索筛选 |
||||
|
customFilter(keyword, options) { |
||||
|
if (!keyword) return options |
||||
|
return options.filter(item => { |
||||
|
// 自定义筛选逻辑 |
||||
|
return item.label.includes(keyword) || item.value.includes(keyword) |
||||
|
}) |
||||
|
}, |
||||
|
handleSizeChange(val) { |
||||
|
this.pageSize = val |
||||
|
}, |
||||
|
handleCurrentChange(val) { |
||||
|
this.currentPage = val |
||||
|
}, |
||||
|
random() { |
||||
|
var randomNumber = Math.random(); |
||||
|
return randomNumber |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.demo-wrap { |
||||
|
width: 100%; |
||||
|
letter-spacing: 0.08em; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,125 @@ |
|||||
|
<template> |
||||
|
<div class="pageTemplete-wrap min-flex"> |
||||
|
<div class=" flex-common" id=""> |
||||
|
<h3>模板选择</h3> |
||||
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
||||
|
<el-tab-pane label="混合(AI+查重)" name="1"> |
||||
|
<div class="templeteImgs"> |
||||
|
<div class="templeteImgs-item" v-for="item in templeteList" :key="item.tpl_id"> |
||||
|
<img :src="item.img" alt=""> |
||||
|
<span class="look">预览</span> |
||||
|
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
||||
|
<p>{{ item.list }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="仅查重" name="2"> |
||||
|
<div class="templeteImgs"> |
||||
|
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 1})" :key="item.tpl_id"> |
||||
|
<img :src="require(item.img)" alt=""> |
||||
|
<span class="look">预览</span> |
||||
|
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
||||
|
<p>{{ item.list }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="仅AI写作" name="3"></el-tab-pane> |
||||
|
<div class="templeteImgs"> |
||||
|
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 0})" :key="item.tpl_id"> |
||||
|
<img :src="require(item.img)" alt=""> |
||||
|
<span class="look">预览</span> |
||||
|
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
||||
|
<p>{{ item.list }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
// 站点设置 |
||||
|
name: '', |
||||
|
components: { |
||||
|
// GuipInput, |
||||
|
// GuipButton, |
||||
|
// GuipSwitch, |
||||
|
// GroupFormBtns |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: '1', |
||||
|
addImgList: { |
||||
|
'万方': require('@/assets/register/wanfang.png'), |
||||
|
'维普': require('@/assets/register/weipu.svg'), |
||||
|
'学术不端': require('@/assets/register/xueshubuduan.svg'), |
||||
|
}, |
||||
|
templeteList:[ |
||||
|
{ |
||||
|
name:'清新科技蓝', |
||||
|
type:1, |
||||
|
tpl_id:'1', |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
{ |
||||
|
name:'清新科技蓝1', |
||||
|
type:0, |
||||
|
tpl_id:'11', |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
{ |
||||
|
name:'清新科技蓝2', |
||||
|
tpl_id:'12', |
||||
|
type:0, |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
{ |
||||
|
name:'清新科技蓝3', |
||||
|
tpl_id:'16', |
||||
|
type:0, |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
{ |
||||
|
name:'清新科技蓝4', |
||||
|
tpl_id:'13', |
||||
|
type:1, |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
{ |
||||
|
name:'清新科技蓝5', |
||||
|
tpl_id:'14', |
||||
|
type:1, |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
{ |
||||
|
name:'清新科技蓝6', |
||||
|
type:1, |
||||
|
tpl_id:'15', |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClick() { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.pageTemplete-wrap { |
||||
|
width: 100%; |
||||
|
letter-spacing: 0.08em; |
||||
|
padding: 12px; |
||||
|
// overflow-y: auto; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__nav-wrap { |
||||
|
border-width: 0px 0px 1px 0px; |
||||
|
border-style: solid; |
||||
|
border-color: #DFE2E6; |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue