添加地址功能：手机号需要添加正则验证

pages/address/add.vue

@@ -0,0 +1,167 @@
+<script setup>
+  import { reactive, ref } from 'vue'
+
+  const formRef = ref(null)
+  const formData = reactive({
+    name: '',
+    phone: '',
+    address: '',
+    /** 省市区选择 */
+    selectAddress: '',
+    /** 是否默认地址 */
+    defaultAddress: false
+  })
+  const rules = {
+    name: {
+      rules: [
+        {
+          required: true,
+          errorMessage: '收件人不能为空'
+        }
+      ]
+    },
+    phone: {
+      rules: [
+        {
+          required: true,
+          errorMessage: '手机号不能为空'
+        },
+        {
+          format: 'number',
+          errorMessage: '手机号只能输入数字'
+        }
+      ]
+    },
+    selectAddress: {
+      rules: [
+        {
+          required: true,
+          errorMessage: '所在地区不能为空'
+        }
+      ]
+    }
+  }
+
+  const submitForm = () => {
+    formRef.value.validate().then(res => {
+      console.log(res, '校验通过')
+    })
+  }
+</script>
+
+<template>
+  <view class="address-add">
+    <view class="address-box">
+      <view class="top-name">
+        <text class="left-name">地址信息</text>
+        <view
+          class="right-box"
+          @click="formData.defaultAddress = !formData.defaultAddress"
+        >
+          <view class="check">
+            <image
+              v-show="formData.defaultAddress"
+              src="/static/images/public/check-to-confirm.png"
+              mode="aspectFit"
+              class="check-icon"
+            ></image>
+          </view>
+          <text>默认收货地址</text>
+        </view>
+      </view>
+      <!-- 表单 -->
+      <uni-forms
+        ref="formRef"
+        :rules="rules"
+        :modelValue="formData"
+        label-width="150rpx"
+      >
+        <uni-forms-item label="收件人" required name="name">
+          <uni-easyinput
+            v-model="formData.name"
+            placeholder="请输入收件人"
+          />
+        </uni-forms-item>
+        <uni-forms-item label="手机号" required name="phone">
+          <uni-easyinput
+            v-model="formData.phone"
+            placeholder="请输入手机号"
+          />
+        </uni-forms-item>
+        <uni-forms-item label="所在地区" required name="selectAddress">
+          <uni-easyinput
+            v-model="formData.selectAddress"
+            placeholder="请选择地区"
+          />
+        </uni-forms-item>
+        <uni-forms-item label="详细地址" name="address">
+          <uni-easyinput
+            type="textarea"
+            v-model="formData.address"
+            placeholder="请输入详细地址"
+          />
+        </uni-forms-item>
+      </uni-forms>
+    </view>
+
+    <!-- 底部按钮 -->
+    <bottom-view>
+      <cb-button @click="submitForm">确认添加</cb-button>
+    </bottom-view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  page {
+    background: #f9f9f9;
+  }
+  .address-add {
+    padding: 34rpx 32rpx;
+    .address-box {
+      padding: 34rpx 32rpx;
+      border-radius: 32rpx;
+      background: #ffffff;
+      .top-name {
+        margin-bottom: 32rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-family: PingFang SC, PingFang SC;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        .left-name {
+          font-weight: bold;
+          font-size: 28rpx;
+          color: #333333;
+        }
+      }
+
+      .right-box {
+        display: flex;
+        align-items: center;
+
+        .check {
+          width: 30rpx;
+          height: 30rpx;
+          border-radius: 28rpx;
+          border: 2rpx solid #d9d9d9;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-right: 10rpx;
+          .check-icon {
+            width: 34rpx;
+            height: 34rpx;
+          }
+        }
+
+        text {
+          font-weight: 500;
+          font-size: 26rpx;
+          color: #333333;
+        }
+      }
+    }
+  }
+</style>

pages/address/edit.vue

@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+  <view class="address-edit">修改地址</view>
+</template>
+
+<style lang="scss" scoped></style>

pages/address/index.vue

@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+  <view class="address-index">地址列表</view>
+</template>
+
+<style lang="scss" scoped></style>