update code

app.wxss

@@ -33,4 +33,12 @@ button[type=primary]{
   background-color: #f7f8fa;
   text-align: center;
   line-height:100rpx;
-}
+}
+.headTitle{
+  background-color: var(--themeColor);
+  text-align: center;
+  line-height: 80rpx;
+  color: #ffffff;
+  font-weight: bolder;
+  border-radius: 10rpx;
+}

myComponents/formItem/formItem.js

@@ -1,5 +1,8 @@
 // myComponents/formItem/formItem.js
 Component({
+  options:{
+    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+  },
   /**
    * 组件的属性列表
    */
@@ -11,13 +14,14 @@ Component({
     labelWidth:{
       type:Number,
       value:'',
-      observers:function(val){
-
-      }
     },
     labelPosition:{
       type:String,
       value:'left'
+    },
+    customClass:{
+      type:String,
+      value:''
     }
   },
 

myComponents/formItem/formItem.wxml

@@ -1,7 +1,10 @@
 <!--myComponents/formItem/formItem.wxml-->
-<view class="myFormItem">
+<view class="myFormItem {{customClass}}">
 	<view class="left" id="label" style="width: {{labelWidth?labelWidth:200}}rpx;text-align: {{labelPosition}};">
-		{{label}}
+		<view class="left_label">
+      <slot name="label"></slot>
+    </view>
+    <text class="left_text">{{label}}</text>
 	</view>
 	<view class="right">
 		<slot></slot>

myComponents/formItem/formItem.wxss

@@ -27,4 +27,14 @@ page{
 	padding: var(--padding);
 	width: 100%;
 	height: initial;
+}
+
+.left_label:empty{
+  display: none;
+}
+.left_text{
+  display: none;
+}
+.left_label:empty + .left_text{
+  display: block;
 }

pages/form/application/application.js

@@ -5,7 +5,9 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    validateMessages: {
+      required: '%s 字段为必填',
+  },
   },
 
   /**
@@ -29,6 +31,34 @@ Page({
 
   },
 
+
+  /**
+   * 页面方法集合
+   */
+  //表单栏位值发生变化时
+  onValuesChange(e) {
+    console.log(e)
+    const { changedValues, allValues } = e.detail
+    // this.setValues(changedValues)
+    Object.keys(changedValues).forEach((field) => {
+      this.setData({
+          ['loginMessage.'+field]: changedValues[field],
+      })
+    })
+    console.log('onValuesChange \n', changedValues, allValues)
+  },
+  //手机号校验
+  checkPhone(rule, value){
+    if(!value){
+      return Promise.reject(new Error('手机号不能为空!'))
+    }
+    const isTel = (value) => /^1[34578]\d{9}$/.test(value)
+    if(!isTel(value)){
+      return Promise.reject(new Error('手机号输入错误!'))
+    }
+    return Promise.resolve()
+  },
+
   /**
    * 生命周期函数--监听页面隐藏
    */

pages/form/application/application.json

@@ -1,3 +1,12 @@
 {
-  "usingComponents": {}
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "wux-form": "/miniprogram_npm/wux-weapp/form",
+    "wux-field":"/miniprogram_npm/wux-weapp/field/index",
+    "wux-input":"/miniprogram_npm/wux-weapp/input/index",
+    "navBar": "/myComponents/navBar/navBar",
+    "van-dropdown-menu": "/miniprogram_npm/@vant/weapp/dropdown-menu/index",
+    "van-dropdown-item": "/miniprogram_npm/@vant/weapp/dropdown-item/index",
+    "my-form-item":"/myComponents/formItem/formItem"
+  }
 }

pages/form/application/application.wxml

@@ -1,2 +1,26 @@
 <!--pages/form/application/application.wxml 申请-->
-<text>pages/form/application/application.wxml</text>
+<navBar></navBar>
+<van-notify id="van-notify" />
+<view class="application">
+  <view class="headTitle">
+    我要申请专利
+  </view>
+  <view class="form">
+    <wux-form
+      id="wux-form"
+      layout="none"
+      validateMessages="{{ validateMessages }}"
+      bind:change="onValuesChange"
+    >
+      <wux-field name="phone" label="手机号" initialValue="{{''}}" rules="{{ [{ required: true },{validator:'checkPhone'} ] }}">
+        
+        <my-form-item custom-class="form_label">
+          <view slot="label" >
+            申请类型
+          </view>
+          <wux-input maxlength="11" placeholder="请输入手机号" />
+        </my-form-item>
+      </wux-field>
+    </wux-form>
+  </view>
+</view>

pages/form/application/application.wxss

@@ -1 +1,10 @@
-/* pages/form/application/application.wxss */
+/* pages/form/application/application.wxss */
+.application{
+  padding: 0 25rpx;
+  height: calc(100% - 150rpx);
+}
+.form_label .left{
+  font-size: 35rpx;
+  background-color: var(--themeColor) !important;
+  border-radius: 15rpx;
+}

pages/index/index.js

@@ -18,22 +18,26 @@ Page({
       {
         type:'1',
         label:'我要查风险',
-        color:'#4095e5'
+        color:'#4095e5',
+        page:'/pages/riskAssessment/riskAssessment'
       },
       {
         type:'2',
         label:'我要申诉',
-        color:'#fcca00'
+        color:'#fcca00',
+        page:'/pages/form/appeal/appeal'
       },
       {
         type:'3',
         label:'我要维权',
-        color:'#bd3124'
+        color:'#bd3124',
+        page:'/pages/form/rightsProtection/rightsProtection'
       },
       {
         type:'4',
         label:'我要申请',
-        color:'#000a7b'
+        color:'#000a7b',
+        page:'/pages/form/application/application'
       }
     ]
   },
@@ -79,13 +83,11 @@ Page({
   //点击四个功能按钮（我要查风险）
   btnClick:function(e){
     console.log(e)
-    var type = e.currentTarget.dataset.type
-    console.log(type)
-    if(type == 1){
-      wx.navigateTo({
-        url:'/pages/riskAssessment/riskAssessment'
-      })
-    }
+    var page = e.currentTarget.dataset.page
+    console.log(page)
+    wx.navigateTo({
+      url:page
+    })
   },
   onChooseAvatar(e) {
     const { avatarUrl } = e.detail

pages/index/index.wxml

@@ -13,7 +13,7 @@
     </view>
     <view class="btns">
       <block wx:for="{{btnList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
-        <i-button custom-class="btn" color="{{item.color}}" data-type='{{item.type}}' bind:click='btnClick'>{{item.label}}</i-button>
+        <i-button custom-class="btn" color="{{item.color}}" data-page='{{item.page}}' bind:click='btnClick'>{{item.label}}</i-button>
       </block>
     </view>
   </view>