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

修改价格设置页面、及交互

pull/114/head
zq 1 week ago
parent
cb3625f19a
commit
2e4239b30b
2 changed files with 206 additions and 155 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. 4
      src/components/SliderScondThree.vue
  2. 239
      src/views/agent/siteServiceAdd.vue

4
src/components/SliderScondThree.vue
View File

@ -15,8 +15,8 @@
:key="index1">
<span class="l-menu-name">{{ item1[renderKeyNew.subtitle] }}</span>
<span class="l-price-ing curActive_ing" v-if="!item1.unit_price && !item1.unit_num">设置价格中</span>
<span class="l-price-ing" v-if="item1.unit_price && item1.unit_num">{{ item1.unit_price }}元/{{ item1.unit_num }}字</span>
<span class="l-price-ing" v-if="item1.unit_price && !item1.unit_num">{{ item1.unit_price }}元/篇</span>
<span class="l-price-ing" v-if="item1.unit_price && item1.unit == '0'">{{ item1.unit_price }}元/{{ item1.unit_num }}字</span>
<span class="l-price-ing" v-if="item1.unit_price && item1.unit == '1'">{{ item1.unit_price }}元/篇</span>
</div>
</el-collapse-item>
</el-collapse>

239
src/views/agent/siteServiceAdd.vue
View File

@ -27,7 +27,8 @@
<div class="flex">
<label>品牌名称：</label>
<p>
<b>{{siteInfo && currentMenuItem && siteInfo['ver2info'][currentMenuItem.parentType]['name'] }}</b>
<b>{{ siteInfo && currentMenuItem && siteInfo['ver2info'][currentMenuItem.parentType]['name']
}}</b>
{{ siteInfo && currentMenuItem && siteInfo['ver2info'][currentMenuItem.parentType]['desc'] }}
</p>
</div>
@ -90,43 +91,51 @@
</div>
</div>
<!-- 售卖单位 -->
<div class="flex-common mt12 mb12 price-set">
<el-form class="el-row demo-ruleForm" ref="formRef1" :model="form1" :rules="rules">
<div class="price-top">
<span class="title">售卖单位</span>
</div>
<div class="flex-wrap">
<div class="flex-left">
<GuipRadio v-model="service_unit" :options="serviceAddInfo.set_units" label="单位类型"
prop="language" class="column" />
</div>
<template v-if="service_unit === '0'">
<div class="flex-line"></div>
<div class="flex-right">
<GuipInput width="100%" class="column" prop="unit_num" label="设置单位数" desc="如售价XX元/1000字符，单位数设为1000"
v-model="serviceInfo.unit_num" @input="priceInput" @blur="priceBlur" unit="字符"></GuipInput>
</div>
</template>
</div>
</el-form>
</div>
<!-- 网页售价 -->
<div class="flex-common mt12 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="column">
<el-tabs v-if="Object.keys(serviceAddInfo.set_units).length>1" v-model="service_unit" @tab-click="handleUnitName">
<el-tab-pane v-for="item in Object.keys(serviceAddInfo.set_units)" :label="'按'+serviceAddInfo.set_units[item] + '售卖'" :name="item" :key="item"></el-tab-pane>
</el-tabs>
<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" v-if="service_unit === '0'">
<div class="short-width">
<GuipInput width="100%" v-model="serviceInfo.price" ref="GuipInput" unit="元" @blur="priceBlur">
<GuipInput v-if="service_unit !== '0'" v-model="serviceInfo.price" width="100%"
ref="GuipInput" :unit="'元/篇'"></GuipInput>
<GuipInput v-if="service_unit === '0'" width="100%" label="非电商支付的售价" class="column" ref="priceRef1"
v-model="serviceInfo.price" @input="priceChange"
:unit="'元/' + (serviceInfo.unit_num || '') + serviceAddInfo.unit_name"
@blur="priceBlur">
</GuipInput>
</div>
<div class="short-width">
<GuipInput width="100%" v-model="serviceInfo.unit_num" ref="GuipInput" :unit="serviceAddInfo.unit_name" @blur="priceBlur">
</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>
<div class="desc">超过设定字符，按照正常售价收取</div>
</div>
<div class="flex-between">
<div class="third-width">
@ -146,8 +155,9 @@
</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>
<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>
@ -158,7 +168,8 @@
<span class="desc"></span>
</div>
<valueAdded v-for="(added_type, index) in serviceAddInfo.value_added" :key="index" :uid="uid" :type="added_type"></valueAdded>
<valueAdded v-for="(added_type, index) in serviceAddInfo.value_added" :key="index" :uid="uid"
:type="added_type"></valueAdded>
</template>
</div>
@ -167,45 +178,23 @@
<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">
<el-tabs v-if="Object.keys(serviceAddInfo.set_units).length>1" v-model="service_unit" @tab-click="handleUnitName">
<el-tab-pane v-for="item in Object.keys(serviceAddInfo.set_units)" :label="'按'+serviceAddInfo.set_units[item] + '售卖'" :name="item" :key="item"></el-tab-pane>
</el-tabs>
<!-- <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 v-if="service_unit !== '0'" v-model="serviceInfo.unit_piece" width="100%"
ref="GuipInput" :unit="'件/篇'"></GuipInput>
<GuipInput v-if="service_unit === '0'" width="100%" class="column" label="电商平台售价，保存后需关联宝贝"
v-model="serviceInfo.unit_piece" ref="priceRef2" @input="priceChange1"
:unit="'件/' + (serviceInfo.unit_num || '') + 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>
<div class="desc">超过设定字符，按照正常售价收取</div>
</div>
<div class="flex-between">
<div class="third-width">
@ -247,8 +236,8 @@
<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 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">
@ -268,8 +257,8 @@
</div>
</el-form>
<bindGoods :showBind="showBind" :uid="uid" :type="type" :pdd_pati="pdd_pati" :pdd_pagecode="pdd_pagecode"
@handleBind="handleBind">
<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"
@ -277,17 +266,17 @@
您确定要删除吗？删除后所有绑定都会删除
</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> -->
<GuipButton type="system" size="page" @click="jumpStep">取消</GuipButton>
<GuipButton type="primary" size="page" @click="jumpNextStep">设置下一项服务</GuipButton>
</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> -->
<GuipButton type="system" size="page" @click="jumpStep">取消</GuipButton>
<GuipButton type="primary" size="page" @click="jumpStep">设置下一项服务</GuipButton>
</div>
</div>
</template>
<script>
@ -299,6 +288,7 @@ import GuipButton from "@/components/GuipButton.vue";
import GuipInput from "@/components/GuipInput.vue";
import bindGoods from "@/components/bindGoods.vue";
import GuipDialog from "@/components/GuipDialog.vue";
import GuipRadio from "@/components/GuipRadio.vue";
import ValueAdded from "@/components/site/serviceSetting/valueAdded.vue";
import SyncPrice from "@/components/site/serviceSetting/syncPrice.vue";
@ -309,6 +299,7 @@ export default {
SyncPrice,
ValueAdded,
GuipDialog,
GuipRadio,
GuipInput,
// GuipSelect,
// PromptText,
@ -352,7 +343,15 @@ export default {
pricePerThousand: 0,
isValid: false
},
siteInfo:null
siteInfo: null,
form1:{
unit_num:''
},
rules:{
unit_num: [
{ required: true, message: '请设置单位数', trigger: 'blur' }
],
},
}
},
@ -373,6 +372,7 @@ export default {
//查询是否添加了此服务
this.getServiceInfo()
this.getServiceAddInfo();
this.relatedProducts = false;
},
deep: true // 添加深度监听
}
@ -413,10 +413,39 @@ export default {
const match = this.basePrice.match(/(\d+\.?\d*)/);
return match ? parseFloat(match[0]) : 0;
},
priceInput(val){
this.form1.unit_num = val;
},
priceBlur() {
const price = this.serviceAddInfo.supply_price.replace(/[^\d.]/g, '');
this.calculation = this.calculateProfitRate(this.serviceInfo.price, this.serviceInfo.unit_num, Number(price));
},
priceChange(){
if(this.service_unit == '0' && !this.serviceInfo.unit_num){
this.serviceInfo.price = ''
this.$refs.formRef1.validateField('unit_num')
// console.log(this.serviceInfo.unit_num);
this.$positionMessage({
type: 'error',
message: '请先设置单位数',
target: this.$refs.priceRef1, // 可以是DOM元素或选择器
position: 'top'
})
}
},
priceChange1(){
if(this.service_unit == '0' && !this.serviceInfo.unit_num){
this.serviceInfo.unit_piece = ''
this.$refs.formRef1.validateField('unit_num')
this.$positionMessage({
type: 'error',
message: '请先设置单位数',
target: this.$refs.priceRef2, // 可以是DOM元素或选择器
position: 'top'
})
}
},
unitNameBlur() {
},
@ -455,6 +484,12 @@ export default {
}
that.serviceAddInfo = response.data
const obj = that.serviceAddInfo.set_units
for (let key in obj) {
obj[key] = `按${obj[key]}售卖`
}
// that.serviceAddInfo.set_units =
that.service_unit = that.serviceAddInfo.unit
//拼多多渠道查询商品所需参数初始化
if (that.serviceAddInfo.shop_name === '拼多多') this.initPddParam(that.uid)
@ -557,38 +592,39 @@ export default {
secondMenu[parentType].list.forEach(item => {
if (item.type == this.currentMenuItem.type) {
item['unit_num'] = that.serviceInfo.unit_num
item['unit'] = that.service_unit
item['unit_price'] = that.serviceInfo.price
}
})
console.log(secondMenu, 'secondMenu====');
store.commit('SET_SECOND_MENU', secondMenu);
//非字符计费
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) {
// store.commit('SET_SECOND_MENU', secondMenu);
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')
})
// //非字符计费
// 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) {
// // store.commit('SET_SECOND_MENU', secondMenu);
// 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 = ''
@ -741,6 +777,9 @@ export default {
console.error(error, 'error')
})
},
jumpNextStep() {
// 设置下一项
},
calculateProfitRate(price, num, baseCost = 2.4) {
// 输入验证
if (!price || !num || price <= 0 || num <= 0) {
@ -795,9 +834,11 @@ export default {
flex-direction: column;
gap: 24px;
}
.gap6 {
gap: 6px;
}
.warn {
font-size: 12px;
font-weight: normal;
@ -805,9 +846,9 @@ export default {
letter-spacing: 0.03em;
color: #FF4D4F !important;
}
.service_info_wrap{
}
.service_info_wrap {}
.common_scss {
width: 100%;
flex: 1;
@ -820,40 +861,50 @@ export default {
padding: 14px 16px;
gap: 10px;
box-sizing: border-box;
b {
color: #23242B;
}
p {
color: #23242B;
text-align: left;
}
.blue {
color: #006AFF;
}
.green {
color: #00C261;
}
label {
white-space: nowrap;
}
}
.gap24 {
gap: 24px;
width: 100%;
align-items: stretch;
}
.green_back {
background: #EFFFE0;
}
.serviceAdd-wrap {
height: 100%;
display: flex;
flex-direction: column;
.overFlow-wrap {
flex: 1;
overflow-y: auto;
}
}
.pb80 {
padding-bottom: 80px;
}

Write Preview
Loading…
Cancel
Save