表单小组件使用说明

一、引入

1. 将组件文件夹zFormItems放入根目录components文件夹中
2. 将vuex文件夹store放入根目录中
3. 在/main.js文件中添加以下代码：

// main.js
import zFormItems from "@/components/zFormItems"; // 表单组件
import store from './store'; //引入vuex
......
Vue.use(zFormItems);
......
const app = new Vue({
	...App,
	store, // Vue实例中添加store
})

// pages.json
"easycom": {
	"autoscan": true,
	"^z-(.*)": "@/components/zFormItems/components/z-$1/index.vue"
}

4. !!! 在需要使用表单小组件的页面引入mixins:[uni.$pageMixins]

export default {
	mixins:[uni.$pageMixins], // 加入此行
	data() {...},
    methods:{...}
}

二、页面通用属性

组件成功引入后，会将组件的属性通过vuex和mixin的方式放入页面中，直接使用即可。（每日进入页面，将初始化通用属性）

1. 通用属性（通过computed方式引入）

   {
    // 客户对象
    customerNo: "",
    customerName: "",
    customerPhoneNo: "",
    customerType: "",
   
    amount: null, // 数量
   
    feeTypeName: "",
    feeRules: [], // 收费规则列表
    feeRuleIndex: 0, // 收费规则当前选择index
   
    discountNum: 100, // 打折的折扣,如：100为不打折，90为打9折
   
    remarkStr: "", // 备注
   	
    choosenBumen: [], // 选择的部门列表
   	
    choosenProperty: [], // 选择的摊位列表
   	
    // 司机对象
    driverNo: "",
    driverName: "",
    driverId: "",
    driverPhone: "",
   	
    temporaryFeeType: "", // 临时服务费收费类型，从数据字典中获取数据
    temporaryFeeName: "", // 临时服务费收费类型名称
   }

2. 手动设置通用属性（methods）

设置通用属性，只需要

将属性名字段首字母大写

-> 在字段前添加set

-> 以函数的形式调用

-> 函数传入新的值即可。

如，我想手动设置amount的值为3，则只需要使用this.setAmount(3)。

3. 几乎每个组件都可以设置 @change