前言

  在自己的项目开发和学习过程中使用Vue是十分频繁的,所以就把学习的过程写在这里方便查看。另外,还是声明,最好的参考文档一定是官方的文档。下面给两个官方文档的连接,有什么问题可以到里面字寻找。
Vue官方文档
Ant Design of Vue官方文档

Form

<template>
<a-modal
:visible="addCouponVisible"
title="添加优惠策略"
cancelText="取消"
okText="确定"
@cancel="cancel"
@ok="handleSubmit"
>
<!-- 这里是添加策略模态框区域,请编写表单 -->
<a-form :form="form" style="margin-top: 30px" v-bind="formItemLayout">
<a-form-item label="优惠券类型" v-bind="formItemLayout">
<a-select
v-decorator="[
'type',
{ rules: [{ required: true, message: '请选择优惠券类型' }] }]"
>
<a-select-option value="1">生日优惠</a-select-option>
<a-select-option value="2">多间优惠</a-select-option>
<a-select-option value="3">满减优惠</a-select-option>
<a-select-option value="4">限时优惠</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="券名" v-bind="formItemLayout">
<a-input
placeholder="请填写券名"
v-decorator="['name', { rules: [{ required: true, message: '请填写券名' }] }]"
/>
</a-form-item>
<a-form-item label="优惠简介" v-bind="formItemLayout">
<a-textarea
placeholder="请填写优惠简介"
:rows="4"
v-decorator="['description', { rules: [{ required: true, message: '请填写优惠简介' }] }]"
/>
</a-form-item>
<a-form-item label="达标金额" v-bind="formItemLayout">
<a-input
placeholder="请填写达标金额"
v-decorator="['targetMoney', { rules: [{ required: true, message: '请填写达标金额' }] }]"
/>
</a-form-item>
<a-form-item label="优惠金额" v-bind="formItemLayout">
<a-input
placeholder="请填写优惠金额"
v-decorator="['discountMoney', { rules: [{ required: true, message: '请填写优惠金额' }] }]"
/>
</a-form-item>
</a-form>

</a-modal>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
name: 'addCouponModal',
data() {
return {
formItemLayout: {
labelCol: {
xs: { span: 12 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
},
}
},
computed: {
...mapGetters([
'activeHotelId',
'addCouponVisible',
])
},
beforeCreate() {
// 表单名默认为“form”
this.form = this.$form.createForm(this, { name: 'addCouponModal' });
},
mounted() {

},
methods: {
...mapMutations([
'set_addCouponVisible'
]),
...mapActions([
// addHotelCoupon:添加酒店策略接口
'addHotelCoupon'
]),
cancel() {
this.set_addCouponVisible(false)
this.form=null

},
changeType(v){
if( v == '3') {

}else{
this.$message.warning('请实现')
}
},
handleSubmit(e) {
e.preventDefault();
this.form.validateFieldsAndScroll((err, values) => {
if (!err) {
const data = {
// 这里添加接口参数
type: this.form.getFieldValue('type'),
name: (this.form.getFieldValue('name')),
description: (this.form.getFieldValue('description')),
targetMoney: Number(this.form.getFieldValue('targetMoney')),
discountMoney: Number(this.form.getFieldValue('discountMoney')),
hotelId:Number(this.activeHotelId),
status:1
}
this.addHotelCoupon(data)
}
});
},
}
}
</script>

说明一下这段代码,就是这个的确是form的代码,但是下面的script代码请自行添加,结构较为清晰我就直接放在这里,也不做特殊解释了,基本上都是直接能看懂的。

然后唯一的稍稍难懂一点的就是后面的数据传回的部分,关于这个部分可以看看后端的接口或者是直接看database中的示例,然后从form中进行获取就可以了。

Table

  Table的实现还是比较魔幻的,我现在还不是非常知道为什么能够做到动态的数据读取和显示。直接给代码吧。

<template>
<div>
<a-modal
:visible="couponVisible"
title="优惠策略"
width="900px"
:footer="null"
@cancel="cancel"
>
<!-- 这里是模态框内容区域,请编写列表代码与添加策略按钮 -->
<div class="button">
<a-button type="primary" @click="addCoupon">
<a-icon type="plus"/>
添加优惠策略
</a-button>
</div>
<a-table :dataSource="couponList" :columns="columns" bordered>
<a-tag slot="couponName" slot-scope="couponName" color="red">{{couponName}}</a-tag>
</a-table>

</a-modal>
<AddCoupon></AddCoupon>
</div>
</template>

然后如果有人知道这个为什么能够做到后端数据的联通请留言告诉我。现在猜测的是有可能是Vue的datasource的自动获取和匹配。

作业中用到的js知识点

  • 现在知道的就是js中的赋值可以通过commit函数传参实现。

    例如将res传递给一个列表可以写作commit('set_couponList',res)

    再例如将一个窗口显示属性设置为隐藏就可以commit('set_addCouponVisible',false)

  • 还有就是和commit高度相似的dispatch函数,这个函数是处理异步操作的,简单来说就是dispatch调用的应该是actions中的方法,而commit用的是mutations中的方法。