You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
425 lines
15 KiB
425 lines
15 KiB
<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" @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>
|