4 changed files with 439 additions and 3 deletions
|
After Width: | Height: | Size: 4.8 KiB |
@ -0,0 +1,425 @@ |
|||
<template> |
|||
<div class="main-content12"> |
|||
<div class="flex-common"> |
|||
<h3>服务列表</h3> |
|||
<div class="warning-text"> |
|||
<img class="warning-icon" src="@/assets/site/info_filled.svg" alt=""> |
|||
<span>PC端站点使用的“科技清新蓝”模板仅支持AI相关服务，列表中置灰的服务不支持。可编辑置灰服务，但需更换模板才能在PC端站点显示。</span> |
|||
</div> |
|||
|
|||
<!-- page header --> |
|||
<div class="pageheader"> |
|||
<div class="pageheader-left"> |
|||
<el-checkbox @change="toggleAllSelection">全选</el-checkbox> |
|||
<span class="checked-text">共80条，已选0条</span> |
|||
<GuipButton type="ignore" :btnstyle="btnInfostyleObj">批量删除</GuipButton> |
|||
</div> |
|||
<div class="pageheader-right"> |
|||
<GuipButton type="primary" :btnstyle="btnstyleObj">添加查重服务</GuipButton> |
|||
<GuipButton type="primary" :btnstyle="btnstyleObj">添加写作辅助</GuipButton> |
|||
<GuipButton type="primary" :btnstyle="btnstyleObj">添加AIGC</GuipButton> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- page content --> |
|||
<el-form> |
|||
<GuipTable :tableData="serviceList" ref="multipleTable" @selectChange="handleSelectionChange" autoColumn="true" :loading="tableLoading"> |
|||
|
|||
<el-table-column label="选择" width="70" header-align="center" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox @change="toggleSelection(scope.row)"></el-checkbox> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="type_desc" label="服务版本"></el-table-column> |
|||
<el-table-column prop="supply_price_desc" label="今日供货价"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex cell_render"> |
|||
{{ scope.row.supply_price_desc }} |
|||
<svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" /> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="price_desc" label="售价"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex cell_render"> |
|||
{{ scope.row.price_desc }} |
|||
<svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" /> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="payment_method_desc" label="收款方式"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex cell_render"> |
|||
<span class="default-pay-method">{{scope.row.payment_method_desc}}</span> |
|||
<svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" /> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="sort_id" label="排序"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex cell_render"> |
|||
{{ scope.row.sort_id }} |
|||
<svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" /> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="sort_id" label="上首页"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex cell_render"> |
|||
<GuipSwitch :modelValue="scope.row.sort_id" activeText="默认类型" @change="onSwitchChange"></GuipSwitch> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="操作" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<el-link type="primary" :href="serviceListUrl+'?uid='+scope.row.uid" target="_blank" class="mr-16">编辑</el-link> |
|||
<el-link type="primary" :href="siteSettingUrl+'?uid='+scope.row.uid" target="_blank">删除</el-link> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</GuipTable> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import store from '@/store'; |
|||
import GuipButton from "@/components/GuipButton.vue"; |
|||
import GuipTable from "@/components/GuipTable.vue"; |
|||
import GuipDialog from "@/components/GuipDialog.vue"; |
|||
import SvgIcon from "@/components/SvgIcon.vue"; |
|||
import GuipInput from "@/components/GuipInput.vue"; |
|||
import GuipSwitch from "@/components/GuipSwitch.vue"; |
|||
|
|||
export default { |
|||
name: 'siteServiceList', |
|||
components: { |
|||
GuipSwitch, |
|||
// eslint-disable-next-line vue/no-unused-components |
|||
GuipInput, SvgIcon, GuipDialog, GuipTable, |
|||
GuipButton |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
// AUTH |
|||
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU', |
|||
//删除按钮样式 |
|||
btnInfostyleObj:{ |
|||
width: '99px', |
|||
height: '32px', |
|||
borderRadius: '2px', |
|||
}, |
|||
//添加按钮样式 |
|||
btnstyleObj: { |
|||
width: '114px', |
|||
height: '32px', |
|||
borderRadius: '4px', |
|||
background: '#006AFF', |
|||
}, |
|||
// 表格加载 |
|||
tableLoading: false, |
|||
//站点id |
|||
uid:0, |
|||
//站点简称 |
|||
siteShortName: "", |
|||
// 站点列表 |
|||
serviceList: [], |
|||
|
|||
|
|||
|
|||
|
|||
// 站点分组 |
|||
siteGroups: [], |
|||
// 分组id |
|||
gid: 0, |
|||
// 服务列表url |
|||
serviceListUrl: '/ui', |
|||
// 站点设置url |
|||
siteSettingUrl: '/agent/siteBaseSetting', |
|||
// 新增站点url |
|||
addNewSiteUrl: '/ui', |
|||
popoverFlag:false, |
|||
// 站点分组名称 |
|||
selected_group: '', |
|||
isUpIco: false, |
|||
currentIcon: require('@/assets/site/drop_icon.svg'), |
|||
currentGroup: '', |
|||
fitlerIcon: require('@/assets/site/filter.svg'), |
|||
// 手机服务 |
|||
phoneServices: [ |
|||
{'id': 0, value: '不限' }, |
|||
{'id': 1, value: '微信H5' }, |
|||
{'id': 2, value: '小程序' }, |
|||
], |
|||
// 当前选中的手机服务 |
|||
currentPhoneService: '', |
|||
// 添加分组弹框显示标识 |
|||
addGroupDialogVisible: false, |
|||
// 取消按钮显示 |
|||
showCancelButton: true, |
|||
// 确定按钮显示 |
|||
groupname: '', |
|||
} |
|||
}, |
|||
created() { |
|||
if(!this.$route.query.uid) { |
|||
this.$message.error('非法请求'); |
|||
this.$router.push('/agent/siteList') |
|||
} |
|||
this.uid = this.$route.query.uid; |
|||
}, |
|||
mounted() { |
|||
store.commit('SET_BREADRIGHTTEXT', '跳转链接'); |
|||
this.getSiteServiceList(); |
|||
}, |
|||
methods: { |
|||
toggleAllSelection() { |
|||
this.$refs.multipleTable.$refs.guiptable.toggleAllSelection(); |
|||
}, |
|||
toggleSelection(row){ |
|||
console.log(row) |
|||
}, |
|||
// 获取服务列表 |
|||
getSiteServiceList() { |
|||
this.tableLoading = true |
|||
const that = this |
|||
that.serviceList = [] |
|||
this.$http('POST', '/agentnew/ajax_get_service_list', { |
|||
uid: this.uid, |
|||
},{ |
|||
headers:{ |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.tableLoading = false |
|||
this.$nextTick(() => { |
|||
that.serviceList = response.data.service_list |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
// 获取站点分组 |
|||
getSiteGroups() { |
|||
const that = this |
|||
that.siteGroups = [] |
|||
this.$http('POST', '/agentnew/ajax_get_site_groups', { |
|||
gid: this.gid, |
|||
},{ |
|||
headers:{ |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.siteGroups = response.data |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
// 点击站点分组单元格时触发 |
|||
groupSetting(row, index) { |
|||
// 如果已经打开当前行的弹框，则关闭 |
|||
if (row.showPopover === true) { |
|||
row['showPopover'] = false; |
|||
// 切换图标 |
|||
this.toggleIcon(); |
|||
|
|||
return; |
|||
} |
|||
|
|||
// 如果存在分组 则显示已设置分组 |
|||
if (row.group) { |
|||
this.selected_group = row.group; |
|||
} |
|||
|
|||
// 关闭其他行的弹框 |
|||
this.popoverFlag = true; |
|||
this.siteList.forEach((item, i) => { |
|||
if (i !== index) { |
|||
item['showPopover'] = false; |
|||
} |
|||
}); |
|||
// 打开当前行的弹框 |
|||
row['showPopover'] = true; |
|||
|
|||
// 切换图标 |
|||
this.toggleIcon(); |
|||
}, |
|||
// 保存站点分组 |
|||
addSiteGroupIndex(row) { |
|||
this.$http('POST', '/agentnew/ajax_add_site_group_index', { |
|||
groupid: this.selected_group, |
|||
uid: row.uid, |
|||
},{ |
|||
headers:{ |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
if (response.status) { |
|||
// 保存成功弹层提示 |
|||
this.$Message.success(response.info); |
|||
|
|||
// 更新分组名称 |
|||
this.siteGroups.forEach((item) => { |
|||
if (item.id === this.selected_group) { |
|||
row['group'] = item.name; |
|||
} |
|||
}); |
|||
row['groupid'] = this.selected_group; // 更新价格 |
|||
row['showPopover'] = false; // 关闭弹框 |
|||
this.$set(this.siteList, row) |
|||
this.currentIcon = require('@/assets/site/drop_icon.svg'); |
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
// 取消编辑 |
|||
cancleGroupIndexSetting(row) { |
|||
// 关闭弹框 |
|||
row['showPopover'] = false; |
|||
this.popoverFlag = false |
|||
// row[type + '_popover'] = false; // 关闭弹框 |
|||
this.currentIcon = require('@/assets/site/drop_icon.svg'); |
|||
this.$Message.info('已取消编辑'); |
|||
|
|||
}, |
|||
toggleIcon() { |
|||
this.isUpIco = !this.isUpIco; // 切换状态 |
|||
|
|||
// 根据状态更新图标和颜色 |
|||
if (this.isUpIco) { |
|||
this.currentIcon = require('@/assets/site/up_icon.svg'); // 向上图标 |
|||
} else { |
|||
this.currentIcon = require('@/assets/site/drop_icon.svg'); // 向下图标 |
|||
} |
|||
}, |
|||
// 表格点击、选择 |
|||
handleSelectionChange(data) { |
|||
// 多选模式下的时候 data 为数组格式 |
|||
// 单选的时候是 对象 |
|||
console.log(data, '表格行信息'); |
|||
}, |
|||
// 弹框相关方法---start |
|||
showAddGroup() { |
|||
this.addGroupDialogVisible = true; |
|||
}, |
|||
// 确认按钮事件 |
|||
addGroup() { |
|||
this.addGroupDialogVisible = false; |
|||
|
|||
this.$http('POST', '/agentnew/ajax_add_site_group', { |
|||
name: this.groupname, |
|||
},{ |
|||
headers:{ |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
this.$Message.success(response.info); |
|||
// 更新分组 |
|||
this.getSiteGroups() |
|||
// 清空分组名称 |
|||
this.groupname = '' |
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
// 取消按钮事件 |
|||
cancleAddGroup() { |
|||
this.addGroupDialogVisible = false; |
|||
}, |
|||
// 关闭弹框事件 |
|||
closeAddGroup() { |
|||
this.addGroupDialogVisible = false; |
|||
}, |
|||
addGroupDialogVisibleChange(data) { |
|||
console.log(data, 'data098908090'); |
|||
}, |
|||
// 弹框相关方法---end |
|||
addNewSite() { |
|||
window.open(this.addNewSiteUrl, '_blank'); |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.warning-text{ |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 8px 37px; |
|||
align-self: stretch; |
|||
z-index: 1; |
|||
border-radius: 4px; |
|||
background: #FFF1F0; |
|||
border: 1px solid #FFA39E; |
|||
.warning-icon{ |
|||
width: 16px; |
|||
height: 16px;; |
|||
margin-right: 8px; |
|||
} |
|||
span{ |
|||
color: #1E2226; |
|||
letter-spacing: 0.08em; |
|||
} |
|||
} |
|||
.pageheader { |
|||
display: flex; |
|||
justify-content: space-between; /* 关键属性 */ |
|||
align-items: center; |
|||
margin: 16px 0px 16px 0px; |
|||
} |
|||
.pageheader-left { |
|||
display: flex; |
|||
gap: 15px; |
|||
align-items: center |
|||
} |
|||
.checked-text{ |
|||
line-height: 13px; |
|||
letter-spacing: 0.08em; |
|||
color: #8A9099; |
|||
font-size: 12px; |
|||
} |
|||
.pageheader-right{ |
|||
display: flex; |
|||
gap: 15px; |
|||
} |
|||
|
|||
.pagetitle { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
margin-top:8px; |
|||
} |
|||
.default-pay-method{ |
|||
width: 110px; |
|||
height: 22px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 2px 10px; |
|||
gap: 6px; |
|||
z-index: 0; |
|||
border: 1px solid #DFE2E6; |
|||
border-radius: 4px; |
|||
background: #F6F7FA; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue