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.
621 lines
24 KiB
621 lines
24 KiB
<template>
|
|
<div class="main-content12">
|
|
<div class="flex-common">
|
|
<h3 class="mb12">服务列表</h3>
|
|
|
|
<PromptText text='PC端站点使用的“科技清新蓝”模板仅支持AI相关服务，列表中置灰的服务不支持。可编辑置灰服务，但需更换模板才能在PC端站点显示。' :type="3" class="mb24 pl-37"/>
|
|
|
|
<!-- page header -->
|
|
<div class="pageheader">
|
|
<div class="pageheader-left">
|
|
<el-checkbox @change="toggleAllSelection" :indeterminate="isIndeterminate" v-model="selectAll">全选</el-checkbox>
|
|
<span class="checked-text">共{{ serviceList.length }}条，已选{{ selectedCount }}条</span>
|
|
|
|
<GuipButton type="ignore" :btnstyle="btnInfostyleObj" @click="handleBatchDelClick">批量删除</GuipButton>
|
|
</div>
|
|
<div class="pageheader-right">
|
|
<GuipButton type="primary" :btnstyle="btnstyleObj" @click="jumpAdd(1)">添加查重服务</GuipButton>
|
|
<GuipButton type="primary" :btnstyle="btnstyleObj" @click="jumpAdd(3)">添加写作辅助</GuipButton>
|
|
<GuipButton type="primary" :btnstyle="btnstyleObj" @click="jumpAdd(2)">添加AIGC</GuipButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- page content -->
|
|
<el-form>
|
|
<GuipTable :tableData="serviceList" ref="multipleTable" autoColumn="true" :loading="tableLoading"
|
|
@selection-change="handleSelectionChange" @select="handleSelect">
|
|
<el-table-column type="selection" width="100">
|
|
<template slot="header">
|
|
<span class="selection-header-text">选择</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="type_desc" label="服务版本"></el-table-column>
|
|
|
|
<el-table-column prop="supply_price_desc" label="今日供货价"></el-table-column>
|
|
|
|
<el-table-column prop="price_desc" label="售价">
|
|
<template #default="{ row,$index }">
|
|
<el-popover v-model="row.pricePopoverVisible" :ref="`pricePopover-${row.type}`"
|
|
placement="bottom" trigger="manual" :append-to-body="false" :visible-arrow="true"
|
|
popper-class="custom-popover" @show="popshow" >
|
|
<div style="text-align: center">
|
|
<div class="flex">
|
|
<GuipInput ref="GuipInput" width="133px" v-model="row.price" label="售价" placeholder="请输入售价" :unit="row.price_unit"></GuipInput>
|
|
<template v-if="row.price_unit_num>1">
|
|
<span class="shortspan">/</span>
|
|
<GuipInput ref="GuipInput" width="133px" v-model="row.price_unit_num" unit="字符">
|
|
</GuipInput>
|
|
</template>
|
|
</div>
|
|
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
|
|
<GuipButton size="medium" @click="cancelEdit(row, 'price')">取消</GuipButton>
|
|
<GuipButton type="primary" @click="saveEdit(row, 'price')" size="medium">确定</GuipButton>
|
|
</div>
|
|
</div>
|
|
<template #reference>
|
|
<div class="flex cell_render" @click="handleEditClick(row,$index,'price')">
|
|
<span :key="random()">{{ row.price_desc }}</span>
|
|
<svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'"
|
|
:hoverColor="'#006AFF'" />
|
|
</div>
|
|
</template>
|
|
</el-popover>
|
|
</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>
|
|
|
|
<template slot-scope="scope">
|
|
<div class="flex cell_render">
|
|
<span :class="(scope.row.payment_method_desc == '默认站点支付' ? 'normal_payment' : 'self_payment')">
|
|
{{ scope.row.payment_method_desc == '默认站点支付' ? '默认站点支付' : '自定义支付' }}
|
|
</span>
|
|
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
|
|
@click="popPayMentModal(scope.row)" :color="'#8A9099'" :hoverColor="'#006AFF'" />
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="sort_id" label="排序">
|
|
<template #default="{ row,$index }">
|
|
<el-popover v-model="row.sortPopoverVisible" :ref="`popover-${row.type}`"
|
|
placement="bottom" trigger="manual" :append-to-body="false" :visible-arrow="true"
|
|
popper-class="custom-popover" @show="popshow" >
|
|
<div style="text-align: center">
|
|
<GuipInput ref="GuipInput" width="252px" v-model="row.sort_id" label="排序" placeholder="请输入数字"></GuipInput>
|
|
<p style="width: 252px;margin-left: 40px;text-align: right;color: #8A9099;letter-spacing: 0.08em;">输入＞0的数，越小排序越前；重复则新者优先；0则默认排序</p>
|
|
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
|
|
<GuipButton size="medium" @click="cancelEdit(row, 'sort')">取消</GuipButton>
|
|
<GuipButton type="primary" @click="saveEdit(row, 'sort')" size="medium">确定</GuipButton>
|
|
</div>
|
|
</div>
|
|
<template #reference>
|
|
<div class="flex cell_render" @click="handleEditClick(row,$index,'sort')">
|
|
<span :key="random()">{{ row.sort_id }}</span>
|
|
<svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'"
|
|
:hoverColor="'#006AFF'" />
|
|
</div>
|
|
</template>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="sort_id" label="上首页">
|
|
<template slot-scope="scope">
|
|
<div class="flex cell_render">
|
|
<GuipSwitch :modelValue="scope.row.is_index_display" active-value="1" inactive-value="0" @change="onSwitchChange(scope.row)"></GuipSwitch>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="操作" fixed="right">
|
|
<template slot-scope="scope">
|
|
<el-link type="primary" :href="serviceEditUrl+'?uid='+uid+'&type='+scope.row.type" target="_blank" class="mr-16">编辑</el-link>
|
|
<el-link type="primary" @click="handleDelClick(scope.row, scope.$index)">删除</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
</GuipTable>
|
|
|
|
<GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false" @confirm="handleConfirm"
|
|
@cancel="handleCancel" type="center" >
|
|
<PromptText text='按住左侧图标，上下拖动可进行排序，平台卡券只能放到最后。' :type="1" class="mb24 mt12"/>
|
|
<PaymentMethod :paymentList="payList" @confirm="confirmPayment"/>
|
|
</GuipDialog>
|
|
|
|
<GuipDialog :dialogVisible="dialogDelConfim" title="提示" :show-close-button="false" @confirm="handleDelConfirm"
|
|
@cancel="handleDelCancel">
|
|
确定要移除服务吗?
|
|
</GuipDialog>
|
|
<GuipDialog :dialogVisible="dialogBatchDelConfim" title="提示" :show-close-button="false" @confirm="handleBatchDelConfirm"
|
|
@cancel="handleBatchDelCancel">
|
|
确定要移除选中的服务吗?
|
|
</GuipDialog>
|
|
</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";
|
|
import {getServicePriceDesc} from "@/utils/common";
|
|
import PaymentMethod from "@/components/paymentMethod.vue";
|
|
import PromptText from "@/components/PromptText.vue";
|
|
|
|
export default {
|
|
name: 'siteServiceList',
|
|
components: {
|
|
PromptText,
|
|
PaymentMethod,
|
|
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: [],
|
|
//支付方式
|
|
payList: [],
|
|
|
|
selectedRows:[],//表格选中项
|
|
selectAll: false,//是否全选
|
|
isIndeterminate: false,//全选/半选状态
|
|
|
|
//编辑图片展示
|
|
popoverFlag:false,
|
|
//弹框
|
|
dialogVisible: false, //是否展示弹框
|
|
dialogTitle: "", //弹框标题
|
|
editRow:{},
|
|
|
|
//删除二次确认
|
|
dialogDelConfim: false,
|
|
delRow:{},
|
|
dialogBatchDelConfim: false,
|
|
delRows:[],
|
|
|
|
// 服务列表url
|
|
serviceAddUrl: '/agent/siteServiceAdd',
|
|
// 站点设置url
|
|
serviceEditUrl: '/agent/siteServiceEdit',
|
|
// 新增站点url
|
|
addNewSiteUrl: '/ui',
|
|
}
|
|
},
|
|
created() {
|
|
if(!this.$route.query.uid) {
|
|
this.$message.error('非法请求');
|
|
this.$router.push('/agent/siteList')
|
|
}
|
|
this.uid = this.$route.query.uid;
|
|
},
|
|
mounted() {
|
|
this.getSiteServiceList();
|
|
},
|
|
computed: {
|
|
selectedCount() {
|
|
return this.selectedRows.length;
|
|
},
|
|
},
|
|
methods: {
|
|
jumpAdd(prodid){
|
|
this.$router.push(this.serviceAddUrl + '?uid=' + this.uid + '&prodid=' + prodid)
|
|
},
|
|
toggleAllSelection() {
|
|
this.$refs.multipleTable.$refs.guiptable.toggleAllSelection();
|
|
},
|
|
// 获取服务列表
|
|
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
|
|
store.commit('SET_BREADRIGHTTEXT', response.data.site_short_name);
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
handleSelect(selection, row) {
|
|
console.log('操作的行:', row);
|
|
console.log('当前所有选中行:', selection);
|
|
},
|
|
// 处理选择变化
|
|
handleSelectionChange(rows) {
|
|
this.selectedRows = rows;
|
|
// 更新全选按钮状态
|
|
const allSelected = rows.length === this.serviceList.length;
|
|
const noneSelected = rows.length === 0;
|
|
|
|
this.selectAll = allSelected;
|
|
this.isIndeterminate = !noneSelected && !allSelected;
|
|
},
|
|
// 批量删除
|
|
handleBatchDelClick() {
|
|
this.dialogBatchDelConfim = true
|
|
},
|
|
handleBatchDelCancel(){
|
|
this.dialogBatchDelConfim = false
|
|
},
|
|
handleBatchDelConfirm(){
|
|
let delTypes = [];
|
|
this.selectedRows.forEach((row) => {
|
|
delTypes.push(row.type)
|
|
});
|
|
|
|
const that = this
|
|
this.dialogBatchDelConfim = false
|
|
this.$http('POST', '/agentnew/ajax_del_services', {
|
|
uid: that.uid,
|
|
types: JSON.stringify(delTypes)
|
|
},{
|
|
headers:{
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
if(response.status){
|
|
that.$message.success('删除成功');
|
|
that.selectedRows = [];
|
|
that.$nextTick(() => {
|
|
this.serviceList = this.serviceList.filter(row => !delTypes.includes(row.type));
|
|
})
|
|
return true;
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
//删除
|
|
handleDelClick(row, index) {
|
|
this.dialogDelConfim = true
|
|
this.delRow.index = index
|
|
this.delRow.type = row.type
|
|
},
|
|
handleDelCancel(){
|
|
this.dialogDelConfim = false
|
|
},
|
|
handleDelConfirm(){
|
|
const that = this
|
|
this.dialogDelConfim = false
|
|
this.$http('POST', '/agentnew/ajax_del_service', {
|
|
uid: that.uid,
|
|
type: that.delRow.type
|
|
},{
|
|
headers:{
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
if(response.status){
|
|
that.$message.success('删除成功');
|
|
this.$nextTick(() => {
|
|
that.serviceList.splice(that.delRow.index, 1);
|
|
})
|
|
return true;
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
// 点击价格单元格时触发
|
|
handleEditClick(row, index, type) {
|
|
// 关闭其他行的弹框
|
|
this.popoverFlag = true;
|
|
this.serviceList.forEach((item, i) => {
|
|
if (i !== index) {
|
|
item[type + 'PopoverVisible'] = false;
|
|
}
|
|
});
|
|
// 打开当前行的弹框
|
|
row[type + 'PopoverVisible'] = true;
|
|
},
|
|
popshow() {
|
|
var ariaEls = document.querySelectorAll('.el-popover')
|
|
ariaEls.forEach((item) => {
|
|
item.removeAttribute('aria-hidden')
|
|
})
|
|
|
|
ariaEls = document.querySelectorAll('.el-radio__original')
|
|
ariaEls.forEach((item) => {
|
|
item.removeAttribute('aria-hidden')
|
|
})
|
|
},
|
|
// 保存价格
|
|
saveEdit(row, type) {
|
|
row[type + 'PopoverVisible'] = false; // 关闭弹框
|
|
if(type == 'price') this.savePrice(row)
|
|
if(type == 'sort') this.saveUpdateInfo(row, true)
|
|
},
|
|
// 取消编辑
|
|
cancelEdit(row, type) {
|
|
row[type + 'PopoverVisible'] = false;
|
|
this.popoverFlag = false
|
|
// row[type + '_popover'] = false; // 关闭弹框
|
|
this.$Message.info('已取消编辑');
|
|
},
|
|
random() {
|
|
var randomNumber = Math.random();
|
|
return randomNumber
|
|
},
|
|
savePrice(row){
|
|
if (row.price === '') {
|
|
this.$message.warning('价格不能为空');
|
|
return;
|
|
}
|
|
row.price_desc = getServicePriceDesc(row.price, row.price_unit, row.price_unit_num);
|
|
|
|
let obj = {}
|
|
obj.uid = this.uid
|
|
obj.type = row.type
|
|
obj.unit_num = row.price_unit_num
|
|
if(row.price_unit == '元'){
|
|
obj.unit_price = row.price
|
|
}else{
|
|
obj.unit_piece = row.price
|
|
}
|
|
|
|
this.saveRequest('/agentnew/ajax_set_service_price', obj, row)
|
|
},
|
|
onSwitchChange(row){
|
|
row.is_index_display = row.is_index_display == "1" ? "0" : "1"
|
|
this.saveUpdateInfo(row)
|
|
},
|
|
saveUpdateInfo(row, resort = false){
|
|
let obj = {}
|
|
obj.uid = this.uid
|
|
obj.type = row.type
|
|
obj.sort_id = row.sort_id
|
|
obj.is_index_display = row.is_index_display
|
|
obj.is_display_price = row.is_display_price
|
|
obj.is_recommend = row.is_recommend
|
|
this.saveRequest('/agentnew/ajax_update_service_show', obj, row, resort)
|
|
},
|
|
saveRequest(url, obj, row, resort = false){
|
|
const that = this
|
|
this.$http('POST', url, obj,{
|
|
headers:{
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
if(response.status){
|
|
that.$message.success('保存成功');
|
|
this.$nextTick(() => {
|
|
that.$set(that.serviceList, row)
|
|
if(resort){
|
|
this.sortServiceList()
|
|
}
|
|
})
|
|
return true;
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
sortServiceList() {
|
|
const sortable = this.serviceList
|
|
.map((row, i) => ({ row, i }))
|
|
.filter(item => item.row.sort_id > 0)
|
|
.sort((a, b) => a.row.sort_id - b.row.sort_id);
|
|
|
|
let i = 0;
|
|
this.serviceList = this.serviceList.map(row => {
|
|
if (row.sort_id > 0) {
|
|
return sortable[i++].row;
|
|
}
|
|
return row;
|
|
});
|
|
},
|
|
popPayMentModal(row){
|
|
this.dialogVisible = true;
|
|
this.dialogTitle = row.type_desc + '-收款方式'
|
|
this.editRow = row
|
|
this.getPayList(row.type)
|
|
},
|
|
// 获取支付列表
|
|
getPayList(type) {
|
|
const that = this
|
|
that.payList = []
|
|
this.$http('POST', '/agentnew/ajax_get_service_pay_list', {
|
|
uid: that.uid,
|
|
type: type,
|
|
},{
|
|
headers:{
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
this.$nextTick(() => {
|
|
that.payList = response.data.paylist
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
confirmPayment(payList){
|
|
this.payList = payList
|
|
},
|
|
// 确认按钮事件
|
|
handleConfirm() {
|
|
this.dialogVisible = false;
|
|
|
|
let obj = {}
|
|
obj.uid = this.uid
|
|
obj.type = this.editRow.type
|
|
obj.info = ""
|
|
|
|
let hasClose = false
|
|
this.payList.forEach((row) => {
|
|
if(row.status == 1) {
|
|
let value = row.pay_type
|
|
if(row.id) value += ',' + row.id
|
|
|
|
obj.info = obj.info + ';' + value;
|
|
}else{
|
|
hasClose = true
|
|
}
|
|
});
|
|
obj.info = obj.info.substr(1, obj.info.length-1);
|
|
|
|
if(hasClose) this.editRow.payment_method_desc = '自定义支付';
|
|
|
|
this.saveRequest('/agentnew/ajax_payment_switch', obj, this.editRow)
|
|
},
|
|
// 取消按钮事件
|
|
handleCancel() {
|
|
this.dialogVisible = false;
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
::v-deep .custom-popover {
|
|
position: fixed !important;
|
|
// max-height: 290px;
|
|
// overflow-y: auto;
|
|
margin-top: 0 !important;
|
|
margin-left: 0 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
::v-deep .el-table__header-wrapper .el-checkbox {
|
|
display: none;
|
|
}
|
|
|
|
/* 隐藏表头的复选框 */
|
|
::v-deep .el-table__header-wrapper .el-checkbox {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 确保选择文字可见 */
|
|
::v-deep .selection-header-text {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
/* 调整位置 */
|
|
font-size: 14px;
|
|
color: #606266;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 调整表头单元格的padding */
|
|
::v-deep .el-table .el-table__header th {
|
|
padding: 8px 0;
|
|
/* 根据需要调整 */
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.mr-16 {
|
|
margin-right: 16px;
|
|
}
|
|
.pl-37{
|
|
padding-left: 37px;
|
|
}
|
|
.normal_payment,
|
|
.self_payment {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 2px 10px;
|
|
border-radius: 4px;
|
|
background: #F6F7FA;
|
|
box-sizing: border-box;
|
|
border: 1px solid #DFE2E6;
|
|
letter-spacing: 0.08em;
|
|
color: #626573;
|
|
}
|
|
|
|
.self_payment {
|
|
border: 1px solid #BFDAFF;
|
|
background: #F2F7FF;
|
|
color: #006AFF;
|
|
}
|
|
</style>
|