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