详情页组件中的内容变化时，价格如何实现动态变化

来源：互联网发布：java岗前培训靠谱吗编辑：程序博客网时间：2024/04/23 16:48

组件加载完成后执行mounted( ){ }，在mounted中做两件事情：

1)初始将要提交的数据

2)调用methods中的相关事件、方法，计算出价格amount

3)渲染到页面上

<div class="sales-board-form">
<div class="sales-board-line">
<div class="sales-board-line-left">
购买数量：
</div>
<div class="sales-board-line-right">
<v-counter @on-change="onParamChange('buyNum', $event)" :max="100" :min="1"></v-counter>
</div>
</div>
<div class="sales-board-line">
<div class="sales-board-line-left">
产品类型：
</div>
<div class="sales-board-line-right">
<v-selection :selections="productTypes" @on-change="onParamChange('buyType', $event)"></v-selection>
</div>
</div>
<div class="sales-board-line">
<div class="sales-board-line-left">
有效时间：
</div>
<v-chooser :selections="periodList" @on-change="onParamChange('period', $event)"></v-chooser>
</div>
<div class="sales-board-line">
<div class="sales-board-line-left">
产品版本：
</div>
<div class="sales-board-line-right">
<v-mul-chooser :selections="versionList" @on-change="onParamChange('versions', $event)"></v-mul-chooser>
</div>
</div>
<div class="sales-board-line">
<div class="sales-board-line-left">
总价：
</div>
<div class="sales-board-line-right">
{{price}}
</div>
</div>
<div class="sales-board-line">
<div class="sales-board-line-left"> </div>
<div class="sales-board-line-right">
<div class="button" >
立即购买
</div>
</div>
</div>
</div>

import VSelection from '../../components/selection';
import VCounter from '../../components/counter';
import VChooser from '../../components/chooser';
import VMulChooser from '../../components/multiplyChooser';
import _ from 'lodash';

export default {
components: {
VSelection,
VCounter,
VChooser,
VMulChooser
},
data () {
return {
buyNum: 0,
buyType: {},
period: {},
versions: [],
amount: 0,
price: 0,
productTypes: [
{
label: '入门版',
value: 1
},
{
label: '中级版',
value: 2
},
{
label: '高级版',
value: 3
}
],
periodList: [
{
label: '半年',
value: 1
},
{
label: '一年',
value: 2
},
{
label: '三年',
value: 3
}
],
versionList: [
{
label: '客户版',
value: 1
},
{
label: '代理商版',
value: 2
},
{
label: '专家版',
value: 3
}
]
}
},
methods: {
onParamChange (attr, val) {
this[attr] = val;
this.getPrice();
},
getPrice () {
let buyVersionsArray = _.map(this.versions,(item)=>{{
console.log(item)
return item.value
}})
let reqParams = {
// cccc:buyVersionsArray,
buyNumber:this.buyNum,
buyType:this.buyType.value,
period:this.period.value,
versions:buyVersionsArray.join(','),
amount: this.buyNum*((this.buyType.value||1)*100+(this.period.value||1)*200+this.versions.length*100)
}
this.$http.post('/api/getPrice', reqParams)
.then((res)=>{
console.log(res.data);
let data = res.data;
this.price =data.amount;
});
}
},
mounted () {//组件加载完成后执行
// buyNum: 1,
// buyType: {
// type:Array,
// default:[{
// label: "入门版",
// value: 1
// }]
// },
// period: {
// type:Array,
// default:[{
// label: "半年",
// value: 1
// }]
// },
// versions: [1],
// buyNum: 1,
this.buyNum=1
this.buyType=this.productTypes[0]
this.period=this.periodList[0]
this.versions=[this.versionList[0]]
this.amount=0;
this.getPrice()
}
}

阅读全文

0 0