
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