基本信息

1

pages/basic/index.js

@@ -10,14 +10,54 @@ Page({
         frameStyle: { useTop: true, name: '基本信息', leftArrow: true, useBar: false },
         // 主体高度
         infoHeight: '',
+        form: {}
+    },
+    initValidate() {
+        const rules = { name: { required: true, }, phone: { required: true, tel: true }, email: { required: true, }, address: { required: true, }, dept: { required: true, }, zw: { required: true, }, company: { required: true, } }
+        // 验证字段的提示信息，若不传则调用默认的信息
+        const messages = { name: { required: '请输入姓名', }, phone: { required: '请输入电话', }, email: { required: '请输入电子邮箱', }, address: { required: '请输入联系地址', }, dept: { required: '请输入部门', }, zw: { required: '请输入职务', }, company: { required: '请输入工作单位', } };
+        this.WxValidate = new WxValidate(rules, messages)
     },
     back: function () {
         wx.navigateBack({ url: '/pages/home/index' })
     },
+    // 取消修改
+    onReset: function () {
+        this.back()
+    },
+    // 提交修改
+    onSubmit: function (e) {
+        const params = e.detail.value;
+        if (!this.WxValidate.checkForm(params)) {
+            const error = this.WxValidate.errorList[0];
+            wx.showToast({ title: `${error.msg}`, icon: 'error', duration: 2000 })
+            return false
+        } else {
+            console.log(params);
+            // wx.request({
+            //     url: app.globalData.publicUrl + `/api/hc/user/update/${this.data.form.id}`,
+            //     method: "post",
+            //     data: { ...params },
+            //     header: {},
+            //     success: (res) => {
+            //         if (res.data.errcode == '0') {
+            //             wx.showToast({ title: `信息修改完成`, icon: 'success', duration: 2000 })
+            //             wx.setStorage({ key: "user", data: res.data.data });
+            //             app.globalData.userInfo = res.data.data;
+            //             wx.navigateTo({ url: '/pages/home/index' })
+            //         } else {
+            //             wx.showToast({ title: `${res.data.errmsg}`, icon: 'error', duration: 2000 })
+            //         }
+            //     },
+            // })
+        }
+    },
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
+        //验证规则函数
+        this.initValidate();
         // 监听用户是否登录
         this.watchLogin();
         // 计算高度

pages/basic/index.less

@@ -1,4 +1,40 @@
 .main {
     position: relative;
     width: 100%;
+
+    .one {
+        position: relative;
+        padding: 10px;
+
+        .content {
+            position: relative;
+            padding: 10px 0;
+            box-shadow: 0 0 5px #000000;
+            margin: 0 0 10px 0;
+            border-radius: 5px;
+
+            .left {
+                float: left;
+                margin: 0 10px;
+
+                .icon {
+                    color: #000000;
+                }
+            }
+
+            .right {
+                input {
+                    color: #000000;
+                }
+            }
+        }
+
+        .save {
+            text-align: center;
+
+            button {
+                margin: 10px;
+            }
+        }
+    }
 }

pages/basic/index.wxml

@@ -1,5 +1,68 @@
 <mobile-main frameStyle="{{frameStyle}}" bind:back="back">
     <view slot="info" class="main" style="height:{{infoHeight}}px;">
-        基本信息
+        <view class="one">
+            <form bindsubmit="onSubmit" catchreset="onReset">
+                <view class="content">
+                    <view class="left">
+                        <text class="icon iconfont icon-xingming1"></text>
+                    </view>
+                    <view class="right">
+                        <input name="name" value="{{form.name}}" placeholder='请输入姓名' placeholder-class="placeholder"></input>
+                    </view>
+                </view>
+                <view class="content">
+                    <view class="left">
+                        <text class="icon iconfont icon-dianhua"></text>
+                    </view>
+                    <view class="right">
+                        <input name="phone" type="number" maxlength="11" value="{{form.phone}}" placeholder='请输入电话' placeholder-class="placeholder"></input>
+                    </view>
+                </view>
+                <view class="content">
+                    <view class="left">
+                        <text class="icon iconfont icon-dianziyouxiang1"></text>
+                    </view>
+                    <view class="right">
+                        <input name="email" value="{{form.email}}" placeholder='请输入电子邮箱' placeholder-class="placeholder"></input>
+                    </view>
+                </view>
+                <view class="content">
+                    <view class="left">
+                        <text class="icon iconfont icon-dizhi"></text>
+                    </view>
+                    <view class="right">
+                        <input name="address" value="{{form.address}}" placeholder='请输入联系地址' placeholder-class="placeholder"></input>
+                    </view>
+                </view>
+                <view class="content">
+                    <view class="left">
+                        <text class="icon iconfont icon-bumen"></text>
+                    </view>
+                    <view class="right">
+                        <input name="dept" value="{{form.dept}}" placeholder='请输入部门' placeholder-class="placeholder"></input>
+                    </view>
+                </view>
+                <view class="content">
+                    <view class="left">
+                        <text class="icon iconfont icon-zhiwu"></text>
+                    </view>
+                    <view class="right">
+                        <input name="zw" value="{{form.zw}}" placeholder='请输入职务' placeholder-class="placeholder"></input>
+                    </view>
+                </view>
+                <view class="content">
+                    <view class="left">
+                        <text class="icon iconfont icon-commpany"></text>
+                    </view>
+                    <view class="right">
+                        <input name="company" value="{{form.company}}" placeholder='请输入工作单位' placeholder-class="placeholder"></input>
+                    </view>
+                </view>
+                <view class="save">
+                    <button type="warn" size="mini" formType="reset">取消修改</button>
+                    <button type="primary" size="mini" formType="submit">提交修改</button>
+                </view>
+            </form>
+        </view>
     </view>
 </mobile-main>

pages/basic/index.wxss

@@ -2,3 +2,30 @@
   position: relative;
   width: 100%;
 }
+.main .one {
+  position: relative;
+  padding: 10px;
+}
+.main .one .content {
+  position: relative;
+  padding: 10px 0;
+  box-shadow: 0 0 5px #000000;
+  margin: 0 0 10px 0;
+  border-radius: 5px;
+}
+.main .one .content .left {
+  float: left;
+  margin: 0 10px;
+}
+.main .one .content .left .icon {
+  color: #000000;
+}
+.main .one .content .right input {
+  color: #000000;
+}
+.main .one .save {
+  text-align: center;
+}
+.main .one .save button {
+  margin: 10px;
+}