zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

价格设置

pull/97/head
pengda 3 months ago
parent
9ac4bbc8d4
commit
2f6c62aafb
1 changed files with 505 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 605
      src/components/site/serviceSetting/priceSet.vue

605
src/components/site/serviceSetting/priceSet.vue
View File

@ -4,37 +4,191 @@
<span class="pagetitle">{{info.type_desc}}-价格设置</span>
</div>
<div class="flex-common">
<h3>网页支付与售价</h3>
<el-form ref="formRef">
<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="set-item">
<div class="set-title flex-between">
<p>售价管理</p>
<p>供货价格：3.5元/篇</p>
<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="set-content flex">
<GuipSelect width="264px" prop="card" :options="options" class="mr12"/>
<GuipInput v-if="!info.price" width="264px" v-model="info.price" ref="GuipInput" unit="元/篇"></GuipInput>
<template v-else>
<GuipInput width="180px" v-model="info.price" ref="GuipInput" unit="元"></GuipInput>
<span class="mr12"></span>
<GuipInput v-model="info.unit_num" ref="GuipInput" width="180px" unit="字符"></GuipInput>
</template>
<div class="short-width">
<GuipInput width="100%" v-model="info.unit_num" ref="GuipInput" :unit="serviceAddInfo.unit_name">
</GuipInput>
</div>
</div>
</div>
<div class="flex-line"></div>
<div class="flex-right">
<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>
<GuipButton type="primary" @click="savePrice" 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">{{ 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="save-button">
<GuipButton type="primary" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton>
<!-- 店铺商品绑定-->
<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>
@ -43,6 +197,9 @@
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";
export default {
name: 'priceSet',
@ -55,92 +212,241 @@ export default {
components: {
GuipSelect,
GuipInput,
GuipButton
GuipButton,
PromptText,
bindGoods,
GuipDialog
},
data(){
return {
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
info:{},
//添加按钮样式
saveBtnStyleObj: {
width: '144px',
height: '46px',
borderRadius: '4px',
background: '#006AFF',
},
options: [{
value: '选项1',
label1: '黄金hhhhhh',
id1: '1',
id2: '啊11哈哈',
label: '黄金糕'
}, {
value: '选项2',
id1: '12',
id2: '啊22哈哈',
label1: '双皮奶hhhhhhhhh',
label: '双皮奶'
}, {
value: '选项3',
id1: '13',
id2: '啊33哈哈',
label1: '蚵仔煎hhhhhhhhh',
label: '蚵仔煎'
}, {
value: '选项4',
id1: '14',
id2: '啊444哈哈',
label1: '双皮奶hhhhhhhhh',
label: '龙须面'
}, {
value: '选项5',
id1: '155',
id2: '啊55哈哈',
label1: '双皮奶hhhhhhhhh',
label: '北京烤鸭'
}],
form: {
username: '',
language: '',
domain_set: '',
domainSuffix: '11',
domainSuffix1: '.chachongz.com',
card: '1',
input1: '跨年的烟火,绽放天空',
input2: '',
input3: '',
},
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:{
saveConfirm() {
let obj = {}
obj.uid = this.info.uid
obj.type = this.info.type
obj.logo_bgcolor = this.tabColor.replace('#','')
obj.link_btn_color = this.themeColor.replace('#','')
obj.selected_nav_bgcolor = this.navColor.replace('#','')
//获得要添加的服务信息
getServiceAddInfo() {
const that = this
that.$http('POST', '/agentnew/ajax_get_service_add_info', {
uid: that.uid,
type: that.type,
}, {
headers: {
'Auth': this.token
}
}).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
this.$http('POST', '/agentnew/ajax_update_service_style', obj,{
headers:{
that.$http('POST', '/agentnew/ajax_get_service_bind_goods', {
uid: that.uid,
type: that.type,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
if(response.status){
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.b_unit_price = ''
this.info.b_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,
}, {
headers: {
'Auth': this.token
}
}).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.b_unit_piece = ''
this.info.b_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,
}, {
headers: {
'Auth': this.token
}
}).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,
}, {
headers: {
'Auth': this.token
}
}).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)
let color_info = {}
color_info.logo_bgcolor = obj.logo_bgcolor
color_info.link_btn_color = obj.link_btn_color
color_info.selected_nav_bgcolor = obj.selected_nav_bgcolor
that.info.color_info = color_info
that.$emit('saveEvent', that.info)
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,
}, {
headers: {
'Auth': this.token
}
}).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,
}, {
headers: {
'Auth': this.token
}
}).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);
@ -148,27 +454,126 @@ export default {
console.error(error, 'error')
})
},
//------绑定相关 end------
}
}
</script>
<style lang="scss">
.mr12{
margin-right: 12px;
}
.set-item{
width: 540px;
.price-set {
letter-spacing: 0.08em;
.set-title{
font-size: 14px;
color: #1E2226;
margin-bottom: 12px;
p:last-child{
color: #8A9099;
.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;
}
}
.set-content{
width: 100%;
.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>
Write Preview
Loading…
Cancel
Save