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.
 
 
 
 

868 lines
33 KiB

<template>
<div class="serviceAdd-wrap">
<div class="ml12 mr12 overFlow-wrap">
<PromptText text="如何添加服务?" :type="2" class="add-info">
<template #next_desc>
<div class="alert-more flex gap12" :class="alertShow ? '' : 'alert-more-hide'" @click="handleAlert">
<div v-if="alertShow">收起</div>
<div v-else>展开</div>
<img src="@/assets/site/show_and_hide.png" alt="">
</div>
</template>
<template #desc>
<div class="alert-more-info mt12" v-show="alertShow">
<div class="flex mb10 gap10">1.点击左侧导航进入设置页,开启所需服务(<img src="@/assets/site/open_success_menu.svg"
alt="">图标表示已开启)。</div>
<div class="flex mb10 gap10">2.可开启多个服务。</div>
<div class="flex gap10">3.全部开启后,点击底部 [添加完成] 。</div>
</div>
</template>
</PromptText>
<div class="service-title flex-between" v-if="serviceAddInfo && serviceAddInfo.ver_type">
<div class="service-name flex gap12">
<img :src="require('@/assets/serviceIcon/ver_'+serviceAddInfo.ver_type+'.svg')" alt="">
<span>{{ serviceAddInfo.ver_name }}_{{ serviceAddInfo.type_name }}</span>
</div>
<div class="service-status" v-if="service_status">
<span class="service-status-close" @click="handleDelServiceClick">关闭服务</span>
<span class="service-status-desc">已开启</span>
</div>
</div>
<PromptText v-if="serviceAddInfo && serviceAddInfo.prompt && serviceAddInfo.prompt.title" :text='serviceAddInfo.prompt.title' :type="1"
class="mb12">
<template #desc v-if="serviceAddInfo.prompt.content">
<div class="alert-more-info mt12">
<div class="flex mb10" v-for="item in serviceAddInfo.prompt.content" :key="item">
{{ item }}</div>
</div>
</template>
</PromptText>
<!-- 网页售价 -->
<div class="flex-common mb12 price-set" v-if="serviceAddInfo.web_price_set">
<el-form class="el-row demo-ruleForm" ref="formRef">
<div class="price-top">
<span class="title">网页支付与售价</span>
<span class="desc"
v-if="serviceAddInfo.supply_price">供货价:{{ serviceAddInfo.supply_price }}{{ serviceAddInfo.supply_price_warning }}</span>
</div>
<div class="flex-wrap">
<div class="flex-left">
<div class="flex-between mb12">
<div>售价管理</div>
</div>
<div class="flex-between">
<div class="short-width" v-if="Object.keys(serviceAddInfo.set_units).length>1">
<GuipSelect width="100%" v-model="service_unit" placeholder="选择计费方式"
:options="serviceAddInfo.set_units" @change="handleUnitName"/>
</div>
<div class="short-width" v-if="service_unit !== '0'">
<GuipInput v-model="serviceInfo.price" width="100%"
ref="GuipInput" :unit="'元/'+serviceAddInfo.unit_name"></GuipInput>
</div>
</div>
<div class="flex-between mt12" v-if="service_unit === '0'">
<div class="short-width">
<GuipInput width="100%" v-model="serviceInfo.price" ref="GuipInput" unit="元">
</GuipInput>
</div>
<div class="short-width">
<GuipInput width="100%" v-model="serviceInfo.unit_num" ref="GuipInput" :unit="serviceAddInfo.unit_name">
</GuipInput>
</div>
</div>
</div>
<template v-if="serviceAddInfo.base_set && service_unit === '0'">
<div class="flex-line"></div>
<div class="flex-right">
<div class="flex-between mb12">
<div>起售价格(选填)</div>
<div>超过设定字符,按照正常售价收取</div>
</div>
<div class="flex-between">
<div class="third-width">
<GuipInput width="100%" v-model="serviceInfo.base_unit_num" ref="GuipInput"
unit="字符内"></GuipInput>
</div>
<div class="w85">
用户需支付
</div>
<div class="third-width">
<GuipInput width="100%" v-model="serviceInfo.base_unit_price" ref="GuipInput"
unit="元"></GuipInput>
</div>
</div>
</div>
</template>
</div>
<div class="flex service-opt mt12">
<GuipButton type="ignore" @click="resetPrice">重置</GuipButton>
<syncPrice v-if="serviceAddInfo && serviceAddInfo.is_sync" :type="serviceAddInfo.type" :type_name="serviceAddInfo.type_name"
:price="serviceInfo.price" :unit_num="serviceInfo.unit_num" :unit_name="serviceAddInfo.unit_name"></syncPrice>
<GuipButton type="primary" @click="savePrice" size="medium">保存</GuipButton>
</div>
</el-form>
<template v-if="serviceAddInfo.value_added.length>0">
<div class="price-top">
<span class="title">增值服务</span>
<span class="desc"></span>
</div>
<valueAdded v-for="(added_type, index) in serviceAddInfo.value_added" :key="index" :uid="uid" :type="added_type"></valueAdded>
</template>
</div>
<!-- 店铺售价-->
<div class="flex-common mb12 price-set" v-if="serviceAddInfo.shop_price_set">
<el-form class="el-row demo-ruleForm" ref="formRef">
<div class="price-top">
<span class="title">{{ serviceAddInfo.shop_name }}支付管理</span>
<span class="desc"
v-if="serviceAddInfo.supply_price && !serviceAddInfo.web_price_set">供货价:{{ serviceAddInfo.supply_price }}{{ serviceAddInfo.supply_price_warning }}</span>
</div>
<div class="flex-wrap">
<div class="flex-left">
<div class="flex-between mb12">
<div>售价管理</div>
</div>
<div class="flex-between">
<div class="short-width" v-if="Object.keys(serviceAddInfo.set_units).length>1">
<GuipSelect width="100%" v-model="service_unit" placeholder="选择计费方式"
:options="serviceAddInfo.set_units" @change="handleUnitName"/>
</div>
<div class="short-width" v-if="service_unit !== '0'">
<GuipInput v-model="serviceInfo.unit_piece" width="100%"
ref="GuipInput" :unit="'件/'+serviceAddInfo.unit_name"></GuipInput>
</div>
</div>
<div class="flex-between mt12" v-if="service_unit === '0'">
<div class="short-width">
<GuipInput width="100%" v-model="serviceInfo.unit_piece" ref="GuipInput" unit="件">
</GuipInput>
</div>
<div class="short-width">
<GuipInput width="100%" v-model="serviceInfo.unit_num" ref="GuipInput" :unit="serviceAddInfo.unit_name">
</GuipInput>
</div>
</div>
</div>
<template v-if="serviceAddInfo.base_set && service_unit === '0'">
<div class="flex-line"></div>
<div class="flex-right">
<div class="flex-between mb12">
<div>起售价格(选填)</div>
<div>超过设定字符,按照正常售价收取</div>
</div>
<div class="flex-between">
<div class="third-width">
<GuipInput width="100%" v-model="serviceInfo.base_unit_num" ref="GuipInput"
unit="字符内"></GuipInput>
</div>
<div class="w85">
用户需支付
</div>
<div class="third-width">
<GuipInput width="100%" v-model="serviceInfo.base_unit_piece" ref="GuipInput"
unit="件"></GuipInput>
</div>
</div>
</div>
</template>
</div>
<div class="flex service-opt mt12">
<GuipButton type="ignore" @click="resetShopPrice">重置</GuipButton>
<GuipButton type="primary" @click="saveShopPrice()" size="medium">保存</GuipButton>
</div>
</el-form>
</div>
<!-- 店铺商品绑定-->
<div class="flex-common mb12 price-set" v-if="serviceAddInfo.shop_price_set">
<el-form class="el-row demo-ruleForm" ref="formRef">
<div class="price-top">
<span class="title">关联电商商品</span>
<span class="desc">必须关联,且确保服务与{{ serviceAddInfo.shop_name }}电商商品一致</span>
</div>
<div class="flex-wrap" @click="bindGoods">
<div class="flex-left bind-button gap12">
<img src="@/assets/addIcon.svg" alt="">
<span>添加宝贝</span>
</div>
</div>
<div class="bind-list" v-if="bindList">
<div class="bind-item" v-for="(row, key) in bindList" :key="key">
<img :src="row.pic_url ? row.pic_url : require('@/assets/site/invalid.png')" alt="">
<div class="bind-goods-info">
<div class="bind-goods-title"><el-link :href="row.link"
target="_blank">{{ row.title }}</el-link>
</div>
<div class="flex-between gap12">
<div class="flex gap12">
<span v-if="row.price">{{ row.price }}</span>
<span v-if="row.sec_title">{{ row.sec_title }}</span>
</div>
<div class="flex gap12">
<span class="bind-btn bind-delete"
@click="handleDelBindClick(row, key)">删除</span>
<span class="bind-btn"
:class="row.is_default === '1' ? 'bind-default-active' : 'bind-default'"
@click="handleDefaultConfirm(row.id)">默认商品</span>
</div>
</div>
</div>
</div>
</div>
</el-form>
<bindGoods :showBind="showBind" :uid="uid" :type="type" :pdd_pati="pdd_pati" :pdd_pagecode="pdd_pagecode"
@handleBind="handleBind">
</bindGoods>
<GuipDialog :dialogVisible="dialogDelBindConfim" title="提示" :show-close-button="false"
@confirm="handleDelBindConfirm" @cancel="handleDelBindCancel">
您确定要删除吗删除后所有绑定都会删除
</GuipDialog>
</div>
<GuipDialog :dialogVisible="dialogDelServiceConfim" title="提示" :show-close-button="false"
@confirm="handleDelServiceConfirm" @cancel="handleDelServiceCancel">
确定要移除服务吗?
</GuipDialog>
</div>
<div class="register-btns flex gap12">
<span class="service-open-num">已开启 {{addNum}} 服务</span><GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">返回服务列表</GuipButton>
</div>
</div>
</template>
<script>
import store from '@/store';
import { mapState } from 'vuex';
import GuipButton from "@/components/GuipButton.vue";
import PromptText from "@/components/PromptText.vue";
import GuipSelect from "@/components/GuipSelect.vue";
import GuipInput from "@/components/GuipInput.vue";
import bindGoods from "@/components/bindGoods.vue";
import GuipDialog from "@/components/GuipDialog.vue";
import ValueAdded from "@/components/site/serviceSetting/valueAdded.vue";
import SyncPrice from "@/components/site/serviceSetting/syncPrice.vue";
export default {
name: 'siteServiceAdd',
props: [''],
components: {
SyncPrice,
ValueAdded,
GuipDialog,
GuipInput,
GuipSelect,
PromptText,
GuipButton,
bindGoods,
},
data() {
return {
uid: 0,
type: 0,
prodid: 0,
serviceAddInfo: {},
service_unit:'',
service_status: false,
serviceInfo: {},
bindList: [],
alertShow: true,
menuList: {},
siteAddUrl: '/agent/siteAdd',
showBind: false,
pdd_pati: '',
pdd_pagecode: '',
dialogDelBindConfim: false,
delRow: {},
dialogDelServiceConfim: false,
addNum: 0
}
},
computed: {
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
},
watch: {
'$store.state.currentMenuItem'(newVal) {
this.type = newVal.type
//查询是否添加了此服务
this.getServiceInfo()
this.getServiceAddInfo();
},
},
created() {
if (!this.$route.query.uid && !this.$route.query.prodid) {
this.$message.error('非法请求');
this.$router.push('/agent/siteAdd')
}
this.uid = this.$route.query.uid
this.prodid = this.$route.query.prodid
this.loadPddSDK()
},
mounted() {
store.commit('SET_PAGETITLE', '站点信息');
this.getAddServiceList();
},
methods: {
handleAlert() {
this.alertShow = !this.alertShow
},
//获得左侧菜单导航
getAddServiceList() {
const that = this
that.$http('POST', '/agentnew/ajax_get_service_add_list', {
uid: that.uid,
prodid: that.prodid,
}).then(response => {
that.$nextTick(() => {
that.menuList = response.data
store.commit('SET_SECOND_MENU', response.data);
that.setMenuList()
})
}).catch(error => {
console.error(error, 'error')
})
},
//获得要添加的服务信息
getServiceAddInfo() {
this.serviceAddInfo = {}
const that = this
that.$http('POST', '/agentnew/ajax_get_service_add_info', {
uid: that.uid,
type: that.type,
}).then(response => {
if (response.status) {
that.$nextTick(() => {
if(!response.data.web_price_set && !response.data.shop_price_set){
that.$message.error('请先绑定收款方式');
that.$router.push('/agent/siteBaseSetting?uid='+that.uid)
}
that.serviceAddInfo = response.data
that.service_unit = that.serviceAddInfo.unit
//拼多多渠道查询商品所需参数初始化
if (that.serviceAddInfo.shop_name === '拼多多') this.initPddParam(that.uid)
store.commit('SET_BREADRIGHTTEXT', {
text: that.serviceAddInfo.site_short_name,
link: that.serviceAddInfo.site_domain
});
})
return true
}
that.$message.error(response.info);
that.$router.go(-1)
}).catch(error => {
console.error(error, 'error')
})
},
//查询是否添加了此服务
getServiceInfo() {
const that = this
that.serviceInfo = {}
that.$http('POST', '/agentnew/ajax_get_service_info', {
uid: that.uid,
type: that.type,
}).then(response => {
that.$nextTick(() => {
//默认未开启
if (response.status && response.data) {
that.serviceInfo = response.data
that.service_status = true
that.getServiceBindGoods()
}
})
}).catch(error => {
console.error(error, 'error')
})
},
//查询绑定的宝贝
getServiceBindGoods() {
const that = this
that.$http('POST', '/agentnew/ajax_get_service_bind_goods', {
uid: that.uid,
type: that.type,
}).then(response => {
if (response.status && response.data) {
that.$nextTick(() => {
that.bindList = response.data
})
}
}).catch(error => {
console.error(error, 'error')
})
},
handleUnitName(){
this.serviceAddInfo.unit_name = this.serviceAddInfo.set_units[this.service_unit]
},
handleDelServiceClick() {
this.dialogDelServiceConfim = true
},
handleDelServiceCancel() {
this.dialogDelServiceConfim = false
},
handleDelServiceConfirm() {
const that = this
this.dialogDelServiceConfim = false
this.$http('POST', '/agentnew/ajax_del_service', {
uid: that.uid,
type: that.type,
}).then(response => {
if (response.status) {
that.$message.success('删除成功');
this.$nextTick(() => {
that.serviceInfo = {}
that.service_status = false;
that.setMenuList(that.type, false)
})
return true;
}
that.$message.error(response.info);
}).catch(error => {
console.error(error, 'error')
})
},
resetPrice() {
this.serviceInfo.price = ''
this.serviceInfo.unit_num = ''
this.serviceInfo.base_unit_price = ''
this.serviceInfo.base_unit_num = ''
},
savePrice() {
const that = this
//非字符计费
if(that.service_unit !== '0') {
that.serviceInfo.unit_num = 1
that.serviceInfo.base_unit_num = ''
that.serviceInfo.base_unit_price = ''
}
this.$http('POST', "/agentnew/ajax_set_service_price", {
uid: that.uid,
type: that.type,
unit: that.service_unit,
unit_num: that.serviceInfo.unit_num,
unit_price: that.serviceInfo.price,
b_unit_num: that.serviceInfo.base_unit_num,
b_unit_price: that.serviceInfo.base_unit_price,
}).then(response => {
if (response.status) {
if (that.service_status === false) {
that.service_status = true
that.setMenuList(that.type, true)
}
that.$message.success('保存成功');
return true;
}
that.$message.error(response.info);
}).catch(error => {
console.error(error, 'error')
})
},
resetShopPrice() {
this.serviceInfo.unit_piece = ''
this.serviceInfo.unit_num = ''
this.serviceInfo.base_unit_piece = ''
this.serviceInfo.base_unit_num = ''
},
saveShopPrice() {
const that = this
//非字符计费 单位默认为 1
//非字符计费
if(that.service_unit !== '0') {
that.serviceInfo.unit_num = 1
that.serviceInfo.base_unit_num = ''
that.serviceInfo.base_unit_piece = ''
}
console.log(that.serviceInfo,'ddd')
this.$http('POST', "/agentnew/ajax_set_service_price", {
uid: that.uid,
type: that.type,
unit: that.service_unit,
unit_num: that.serviceInfo.unit_num,
unit_piece: that.serviceInfo.unit_piece,
b_unit_num: that.serviceInfo.base_unit_num,
b_unit_piece: that.serviceInfo.base_unit_piece,
}).then(response => {
if (response.status) {
if (that.service_status === false) {
that.service_status = true
that.setMenuList(that.type, true)
}
that.$message.success('保存成功');
return true;
}
that.$message.error(response.info);
}).catch(error => {
console.error(error, 'error')
})
},
setMenuList(type, status) {
this.addNum = 0
Object.values(this.menuList).forEach((item) => {
let ver_select = false
item.list.forEach((item1) => {
if (item1.type === type) {
item1.is_select = status
}
if (item1.is_select === true) {
ver_select = true
this.addNum++
}
})
if (ver_select) item.is_select = true
})
store.commit('SET_SECOND_MENU', this.menuList);
},
//------绑定相关 start------
bindGoods() {
this.showBind = true
},
handleBind(bindRes) {
this.showBind = false
if (bindRes) this.getServiceBindGoods()
},
loadPddSDK() {
const script = document.createElement('script');
script.src = 'https://pfile.pddpic.com/galerie-go/open_sdk/pc.202102201613.js';
document.head.appendChild(script);
},
async getPddPageCode(uid) {
const that = this
return await that.$http('POST', '/agentnew/ajax_get_pdd_page_code', {
uid: uid,
}).then(response => {
return response.data
}).catch(error => {
console.error(error, 'error')
})
},
async initPddParam(uid) {
if (typeof window.PDD_OPEN_init === 'function') {
this.pdd_pagecode = await this.getPddPageCode(uid)
await window.PDD_OPEN_init({ code: this.pdd_pagecode })
this.pdd_pati = await window.PDD_OPEN_getPati()
} else {
console.error('PDD_OPEN_init 不存在,SDK 未正确加载');
}
},
handleDelBindClick(row, index) {
this.dialogDelBindConfim = true
this.delRow.index = index
this.delRow.row = row
},
handleDelBindCancel() {
this.dialogDelBindConfim = false
},
handleDelBindConfirm() {
const that = this
this.dialogDelBindConfim = false
this.$http('POST', '/agentnew/ajax_del_bind_service_goods', {
uid: that.uid,
type: that.type,
numiid: that.delRow.row.num_iid,
skuid: that.delRow.row.sku_id,
paytype: that.delRow.row.pay_type,
}).then(response => {
if (response.status) {
that.$message.success('删除成功');
this.$nextTick(() => {
that.bindList.splice(that.delRow.index, 1);
})
return true;
}
that.$message.error(response.info);
}).catch(error => {
console.error(error, 'error')
})
},
handleDefaultConfirm(id) {
const that = this
this.$http('POST', '/agentnew/ajax_default_bind_setting', {
uid: that.uid,
type: that.type,
id: id,
}).then(response => {
if (response.status) {
that.$message.success('设置成功');
that.bindList.forEach((item) => {
item.is_default = '0'
if (item.id === id) item.is_default = '1'
});
return true;
}
that.$message.error(response.info);
}).catch(error => {
console.error(error, 'error')
})
},
//------绑定相关 end------
jumpStep() {
const that = this
this.$http('POST', '/agentnew/ajax_get_not_finished_site', {}).then(response => {
if(Object.keys(response.data).length>0){
that.$router.push('/agent/siteAdd')
} else {
that.$router.push('/agent/siteServiceList?uid=' + that.uid)
}
}).catch(error => {
console.error(error, 'error')
})
},
}
}
</script>
<style lang="scss" scoped>
.serviceAdd-wrap{
height: 100%;
display: flex;
flex-direction: column;
.overFlow-wrap{
flex: 1;
overflow-y: auto;
}
}
.pb80 {
padding-bottom: 80px;
}
.ml12 {
margin-left: 12px;
}
.mr12 {
margin-right: 12px;
}
.mb10 {
margin-bottom: 10px;
}
.w85 {
width: 85px;
}
.add-info {
.alert-more {
color: #006AFF;
letter-spacing: 0.08em;
cursor: pointer;
user-select: none;
/* 标准语法 */
-webkit-user-select: none;
/* Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE/Edge */
}
.alert-more-hide {
img {
transform: rotate(180deg);
}
}
.alert-more-info {
color: #1E2226;
letter-spacing: 0.08em;
}
//.prompt-desc {
// font-size: 14px;
// font-weight: bold;
// color: #1E2226;
//}
}
.service-title {
margin: 20px 0;
letter-spacing: 0.08em;
.service-name {
font-size: 16px;
font-weight: bold;
color: #1E2226;
}
.service-status {
.service-status-desc {
border-radius: 4px;
border: 1px solid rgba(0, 194, 97, 0.6);
color: #0DAF49;
padding: 2px 10px 2px 32px;
background-image: url(@/assets/site/open_success.svg);
background-repeat: no-repeat;
background-position: 10px 50%;
background-size: 16px 16px;
margin-right: 12px;
}
.service-status-close {
cursor: pointer;
color: #8A9099;
background-image: url(@/assets/site/form_close.svg);
background-repeat: no-repeat;
background-position: 0 50%;
background-size: 16px 16px;
padding: 2px 10px 2px 22px;
}
}
}
.price-set {
letter-spacing: 0.08em;
.price-top {
display: flex;
align-items: center;
margin-bottom: 16px;
.title {
font-size: 14px;
font-weight: bold;
color: #1E2226;
}
.desc {
font-size: 14px;
color: #626573;
margin-left: 12px;
}
}
.el-form-item {
margin-bottom: 0;
}
.third-width {
width: calc((100% - 109px) / 2);
}
}
.service-opt {
justify-content: right;
}
.bind-button {
padding: 15px 20px;
border-radius: 4px;
border: 1px dashed #BABDC2;
justify-content: center;
align-items: center;
}
.bind-list {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
letter-spacing: 0.08em;
flex-wrap: wrap;
margin-top: 32px;
.bind-item {
display: flex;
gap: 22px;
justify-content: space-between;
width: calc((100% - 78px) / 2);
height: 80px;
border-radius: 8px;
background: #FAFAFA;
padding: 16px;
color: #626573;
img {
width: 80px;
height: 80px;
border-radius: 4px;
}
.bind-goods-info {
display: flex;
flex-direction: column;
justify-content: space-between;
width: calc(100% - 80px);
.bind-goods-title {
text-align: left;
a {
color: #1E2226;
}
a:hover {
color: #006AFF;
}
}
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bind-btn {
cursor: pointer;
background-repeat: no-repeat;
background-position: 0 50%;
background-size: 16px 16px;
padding: 2px 0 2px 22px;
}
.bind-delete {
color: #626573;
background-image: url(@/assets/site/delete.svg);
}
.bind-default {
color: #626573;
background-image: url(@/assets/site/star-icon.svg);
}
.bind-default-active {
color: #006AFF;
background-image: url(@/assets/site/star-active-icon.svg);
}
}
}
}
.register-btns {
// position: absolute;
// left: 0;
// bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
background: #FFFFFF;
padding: 16px 0px;
/* 蓝色阴影_常规 */
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
z-index: 999;
button:nth-child(1) {
margin-right: 56px;
}
.service-open-num{
color: #006AFF;
letter-spacing: 0.08em;
font-size: 12px;
}
}
</style>