|
@@ -0,0 +1,125 @@
|
|
|
+<template>
|
|
|
+ <view class="editAddress">
|
|
|
+ <page-navbar bgColor="#fff" title="新增地址"></page-navbar>
|
|
|
+ <base-card padding="24rpx">
|
|
|
+ <view class="f-s-32 text-333 u-m-b-24"> 地址信息</view>
|
|
|
+ <u--form
|
|
|
+ labelPosition="left"
|
|
|
+ :model="model1"
|
|
|
+ :rules="rules"
|
|
|
+ ref="uForm"
|
|
|
+ labelWidth="80"
|
|
|
+ :labelStyle="labelStyle"
|
|
|
+ >
|
|
|
+ <u-form-item label="用户名" prop="userInfo.name" borderBottom ref="item1">
|
|
|
+ <u--input
|
|
|
+ v-model="model1.userInfo.name"
|
|
|
+ border="none"
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ ></u--input>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="联系方式" prop="userInfo.name" borderBottom ref="item1">
|
|
|
+ <u--input
|
|
|
+ v-model="model1.userInfo.name"
|
|
|
+ border="none"
|
|
|
+ placeholder="请输入联系方式"
|
|
|
+ ></u--input>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <u-form-item label="所属地区" prop="userInfo.sex" borderBottom ref="item1">
|
|
|
+ <u--input
|
|
|
+ v-model="model1.userInfo.sex"
|
|
|
+ disabled
|
|
|
+ disabledColor="#ffffff"
|
|
|
+ placeholder="请选择所属地区"
|
|
|
+ border="none"
|
|
|
+ ></u--input>
|
|
|
+ <u-icon slot="right" name="arrow-right" color="#999999" size="12"></u-icon>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <u-form-item label="详细地址" prop="userInfo.sex" borderBottom ref="item1">
|
|
|
+ <u--input
|
|
|
+ v-model="model1.userInfo.sex"
|
|
|
+ disabled
|
|
|
+ disabledColor="#ffffff"
|
|
|
+ placeholder="请输入详情地址"
|
|
|
+ border="none"
|
|
|
+ ></u--input>
|
|
|
+ <u-icon slot="right" name="map" color="#000" size="20"></u-icon>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <u-form-item>
|
|
|
+ <view class="fl-flex-item">
|
|
|
+ <view class="f-s-28 text-primary">设置为默认地址</view>
|
|
|
+ <u-switch></u-switch>
|
|
|
+ </view>
|
|
|
+ </u-form-item>
|
|
|
+ </u--form>
|
|
|
+ </base-card>
|
|
|
+ <view class="editAddress-bottom">
|
|
|
+ <base-button text="保存" :buttonStyle="customStyle"></base-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'editAddress',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showSex: false,
|
|
|
+ model1: {
|
|
|
+ userInfo: {
|
|
|
+ name: '',
|
|
|
+ sex: '',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ 'userInfo.name': {
|
|
|
+ type: 'string',
|
|
|
+ required: true,
|
|
|
+ message: '请填写姓名',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ },
|
|
|
+ 'userInfo.sex': {
|
|
|
+ type: 'string',
|
|
|
+ max: 1,
|
|
|
+ required: true,
|
|
|
+ message: '请选择男或女',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ radio: '',
|
|
|
+ switchVal: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ sexSelect(e) {
|
|
|
+ this.model1.userInfo.sex = e.name;
|
|
|
+ this.$refs.uForm.validateField('userInfo.sex');
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ labelStyle() {
|
|
|
+ return {
|
|
|
+ color: '#0C1223',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ //如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
|
|
|
+ this.$refs.uForm.setRules(this.rules);
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.editAddress {
|
|
|
+ padding: 24rpx 32rpx 0 32rpx;
|
|
|
+ .editAddress-bottom {
|
|
|
+ width: 90%;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 10%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|