前面說了配送? 和地址頁面
當地址頁面為空或需要添加地址時，需要添加地址。
我的地址頁面有個按鈕 就是添加地址
點擊 添加地址 按鈕 后，就會跳轉到地址添加的頁面
1、添加地址頁面
2、添加地址文件夾以及文件的創建
3、添加地址的代碼
<template><view class="addressForm"><!-- 地址編輯 --><u--formlabelPosition="top":model="addressForm":rules="addressRules"labelWidth="100"ref="uForm" ><u-form-itemlabel="姓名"prop="username" ><u--inputv-model="addressForm.username"placeholder="請輸入姓名"></u--input></u-form-item><u-form-itemlabel="聯系電話"prop="mobile" ><u--inputv-model="addressForm.mobile"placeholder="請輸入聯系電話"></u--input></u-form-item><u-form-itemlabel="詳細地址"prop="address" ><u--inputv-model="addressForm.address"placeholder="請輸入街道門牌號"></u--input></u-form-item><u-form-item label="是否默認"><u-switch v-model="addressForm.selected"inactiveColor="#eee"></u-switch></u-form-item><u-form-item></u-form-item><u-form-item><u-button type="primary" @click="onSubmit">提交</u-button></u-form-item></u--form></view>
</template><script>export default {data() {return {addressForm:{username:"",mobile:"",address:"",selected:false},addressRules:{username:[{required: true,message: '姓名是必填的', trigger: ['blur', 'change']},{min: 2,max: 8,message: '長度在2-8個字符之間',trigger: ['blur', 'change']}],mobile:[{required: true,message: '電話是必填的', trigger: ['blur', 'change']},{ validator: (rule, value, callback) => { return uni.$u.test.mobile(value);},message: '手機號碼不正確', trigger: ['change','blur']}],address:[{required: true,message: '地址是必填的', trigger: ['blur', 'change']}]}};},methods:{onSubmit(){this.$refs.uForm.validate().then(res => {uni.$u.toast('校驗通過')}).catch(errors => {uni.$u.toast('校驗失敗')})}}}
</script><style lang="scss">
.addressForm{padding:30rpx;
}
</style>
4、添加地址頁面解析
4.1 使用u--form 整體
Form 表單 | uView 2.0 - 全面兼容 nvue 的 uni-app 生態框架 - uni-app UI 框架
注意：
由于在nvue下，u-form名稱被uni-app官方占用，在nvue頁面中請使用u--form名稱，在vue頁面中使用u--form或者u-form均可。
<u--formlabelPosition="top":model="addressForm":rules="addressRules"labelWidth="100"ref="uForm" ></u--form>ref 后面使用的表單名字
labelwidth? 標簽寬度 就是 表頭占位的長度
rules 校驗規則
model 表單內容
lableposition? 表單布局? 左右還是上下
Form Props
| 參數 | 說明 | 類型 | 默認值 | 可選值 |
|---|---|---|---|---|
| model | 表單數據對象 | Object | - | - |
| rules | 通過ref設置，如果rules中有自定義方法等，需要使用setRules方法設置規則，見上方說明 | Object|Function|Array | - | - |
| errorType | 錯誤的提示方式，見上方說明 | String | message | none|toast|border-bottom|none |
| borderBottom | 是否顯示表單域的下劃線邊框 | Boolean | true | - |
| labelPosition | 表單域提示文字的位置，left-左側，top-上方 | String | left | top |
| labelWidth | 提示文字的寬度，單位px | String | Number | 45 | 數值 / auto |
| labelAlign | lable字體的對齊方式 | String | left | center / right |
| labelStyle | lable的樣式，對象形式 | Object | - | - |
4.2 表單每一條內容布局
都需要放到???u--form? 具體看代碼
<u-form-itemlabel="姓名"prop="username" ><u--inputv-model="addressForm.username"placeholder="請輸入姓名"></u--input></u-form-item>4.3 設置默認的按鈕
依然要放到u--from 中的 u-from-item中
<u-form-item label="是否默認"><u-switch v-model="addressForm.selected"inactiveColor="#eee"></u-switch></u-form-item>4.4 提交按鈕
依然要放到u--from 中的 u-from-item中
<u-form-item><u-button type="primary" @click="onSubmit">提交</u-button></u-form-item>方法實現：
methods:{onSubmit(){this.$refs.uForm.validate().then(res => {uni.$u.toast('校驗通過')}).catch(errors => {uni.$u.toast('校驗失敗')})}}4.5 數據內容
包含基本的數據以及校驗規則
校驗規則 就是u-view的api
實現很多校驗 包含電話，郵箱等字符串的校驗
test 規則校驗 | uView 2.0 - 全面兼容 nvue 的 uni-app 生態框架 - uni-app UI 框架
addressForm:{username:"",mobile:"",address:"",selected:false},addressRules:{username:[{required: true,message: '姓名是必填的', trigger: ['blur', 'change']},{min: 2,max: 8,message: '長度在2-8個字符之間',trigger: ['blur', 'change']}],mobile:[{required: true,message: '電話是必填的', trigger: ['blur', 'change']},{ validator: (rule, value, callback) => { return uni.$u.test.mobile(value);},message: '手機號碼不正確', trigger: ['change','blur']}],address:[{required: true,message: '地址是必填的', trigger: ['blur', 'change']}]}
)
