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.
565 lines
21 KiB
565 lines
21 KiB
<template>
|
|
<div>
|
|
<div class="pageheader">
|
|
<span class="pagetitle">{{info.type_desc}}-价格设置</span>
|
|
</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="info.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="info.price" ref="GuipInput" unit="元">
|
|
</GuipInput>
|
|
</div>
|
|
<div class="short-width">
|
|
<GuipInput width="100%" v-model="info.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="info.base_unit_num" ref="GuipInput"
|
|
unit="字符内"></GuipInput>
|
|
</div>
|
|
<div class="w85">
|
|
用户需支付
|
|
</div>
|
|
<div class="third-width">
|
|
<GuipInput width="100%" v-model="info.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"></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="info.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="info.unit_piece" ref="GuipInput" unit="件">
|
|
</GuipInput>
|
|
</div>
|
|
<div class="short-width">
|
|
<GuipInput width="100%" v-model="info.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="info.base_unit_num" ref="GuipInput"
|
|
unit="字符内"></GuipInput>
|
|
</div>
|
|
<div class="w85">
|
|
用户需支付
|
|
</div>
|
|
<div class="third-width">
|
|
<GuipInput width="100%" v-model="info.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" :pati="pati" :pageCode="pageCode"
|
|
@handleBind="handleBind">
|
|
</bindGoods>
|
|
|
|
<GuipDialog :dialogVisible="dialogDelBindConfim" title="提示" :show-close-button="false"
|
|
@confirm="handleDelBindConfirm" @cancel="handleDelBindCancel">
|
|
您确定要删除吗？删除后所有绑定都会删除
|
|
</GuipDialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
import GuipButton from "@/components/GuipButton.vue";
|
|
import GuipInput from "@/components/GuipInput.vue";
|
|
import GuipSelect from "@/components/GuipSelect.vue";
|
|
import bindGoods from "@/components/bindGoods.vue";
|
|
import GuipDialog from "@/components/GuipDialog.vue";
|
|
import PromptText from "@/components/PromptText.vue";
|
|
import SyncPrice from "@/components/site/serviceSetting/syncPrice.vue";
|
|
import ValueAdded from "@/components/site/serviceSetting/valueAdded.vue";
|
|
|
|
export default {
|
|
name: 'priceSet',
|
|
props: {
|
|
serviceInfo: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
components: {
|
|
ValueAdded,
|
|
SyncPrice,
|
|
GuipSelect,
|
|
GuipInput,
|
|
GuipButton,
|
|
PromptText,
|
|
bindGoods,
|
|
GuipDialog
|
|
|
|
},
|
|
data(){
|
|
return {
|
|
info:{},
|
|
uid: 0,
|
|
type: 0,
|
|
serviceAddInfo:{},
|
|
service_unit:'',
|
|
bindList: [],
|
|
showBind: false,
|
|
pati: '',
|
|
pageCode: '',
|
|
dialogDelBindConfim: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.info = JSON.parse(JSON.stringify(this.serviceInfo))
|
|
if(Object.keys(this.info).length>0){
|
|
this.uid = this.info.uid
|
|
this.type = this.info.type
|
|
this.getServiceAddInfo()
|
|
this.getServiceBindGoods()
|
|
}
|
|
},
|
|
methods:{
|
|
//获得要添加的服务信息
|
|
getServiceAddInfo() {
|
|
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(() => {
|
|
that.serviceAddInfo = response.data
|
|
that.service_unit = that.serviceAddInfo.unit
|
|
//拼多多渠道查询商品所需参数初始化
|
|
if (that.serviceAddInfo.shop_name === '拼多多') this.initPddParam(that.uid)
|
|
})
|
|
return true
|
|
}
|
|
that.$message.error(response.info);
|
|
}).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]
|
|
},
|
|
resetPrice() {
|
|
this.info.price = ''
|
|
this.info.unit_num = ''
|
|
this.info.base_unit_price = ''
|
|
this.info.base_unit_num = ''
|
|
},
|
|
savePrice() {
|
|
const that = this
|
|
//非字符计费
|
|
if(that.service_unit !== '0') {
|
|
that.info.unit_num = 1
|
|
that.info.base_unit_num = ''
|
|
that.info.base_unit_price = ''
|
|
}
|
|
this.$http('POST', "/agentnew/ajax_set_service_price", {
|
|
uid: that.uid,
|
|
type: that.type,
|
|
unit: that.service_unit,
|
|
unit_num: that.info.unit_num,
|
|
unit_price: that.info.price,
|
|
b_unit_num: that.info.base_unit_num,
|
|
b_unit_price: that.info.base_unit_price,
|
|
}).then(response => {
|
|
if (response.status) {
|
|
that.$message.success('保存成功');
|
|
return true;
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
resetShopPrice() {
|
|
this.info.unit_piece = ''
|
|
this.info.unit_num = ''
|
|
this.info.base_unit_piece = ''
|
|
this.info.base_unit_num = ''
|
|
},
|
|
saveShopPrice() {
|
|
const that = this
|
|
//非字符计费 单位默认为 1
|
|
//非字符计费
|
|
if(that.service_unit !== '0') {
|
|
that.info.unit_num = 1
|
|
that.info.base_unit_num = ''
|
|
that.info.base_unit_piece = ''
|
|
}
|
|
this.$http('POST', "/agentnew/ajax_set_service_price", {
|
|
uid: that.uid,
|
|
type: that.type,
|
|
unit: that.service_unit,
|
|
unit_num: that.info.unit_num,
|
|
unit_piece: that.info.unit_piece,
|
|
b_unit_num: that.info.base_unit_num,
|
|
b_unit_piece: that.info.base_unit_piece,
|
|
}).then(response => {
|
|
if (response.status) {
|
|
that.$message.success('保存成功');
|
|
return true;
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
//------绑定相关 start------
|
|
bindGoods() {
|
|
this.showBind = true
|
|
},
|
|
handleBind(bindRes) {
|
|
this.showBind = false
|
|
if (bindRes) this.getServiceBindGoods()
|
|
},
|
|
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.pageCode = await this.getPddPageCode(uid)
|
|
|
|
await window.PDD_OPEN_init({ code: this.pageCode })
|
|
this.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------
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.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);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|