个人信息修改

app.json

@@ -6,11 +6,11 @@
         "pages/tabbar/message/index",
         "pages/tabbar/workbench/index",
         "pages/annunciate/index",
-        "pages/annunciate/details"
+        "pages/annunciate/details",
+        "pages/tabbar/mine/userMsg/index"
     ],
     "usingComponents": {
         "My_card": "/components/My_card/index",
-        "My_elevatory": "/components/My_elevatory/index",
         "van-button": "@vant/weapp/button/index",
         "van-icon": "@vant/weapp/icon/index",
         "van-image": "@vant/weapp/image/index",

components/My_elevatory/index.js

@@ -1,23 +0,0 @@
-// components/My_elevatory/index.js
-Component({
-    /**
-     * 组件的属性列表
-     */
-    properties: {
-
-    },
-
-    /**
-     * 组件的初始数据
-     */
-    data: {
-
-    },
-
-    /**
-     * 组件的方法列表
-     */
-    methods: {
-
-    }
-})

components/My_elevatory/index.json

@@ -1,4 +0,0 @@
-{
-    "component": true,
-    "usingComponents": {}
-}

components/My_elevatory/index.scss

@@ -1 +0,0 @@
-/* components/My_elevatory/index.wxss */

components/My_elevatory/index.wxml

@@ -1 +0,0 @@
-<!-- <view style="height: ;"></view> -->

components/My_form/index.js

@@ -0,0 +1,103 @@
+const getTime = require("../../utils/getTime");
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        fromList: {
+            type: Array,
+            value: []
+        },
+        CompletedOrNot: Function, //完成与否回调
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        endTime: "", //结束时间
+        selectTime: "", //选择时间
+    },
+
+    lifetimes: {
+        attached: function () {
+            this.setData({
+                endTime: getTime.formatTime(new Date(), '-').split(' ')[0]
+            })
+        }
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        /* 输入 */
+        inputChange(e) {
+            let {
+                index,
+                item
+            } = e.currentTarget.dataset;
+            item.value = e.detail;
+            item.error = item.required && item.value == '' ? true : false;
+            let fromList = this.data.fromList;
+            fromList[index] = item;
+            this.setData({
+                fromList
+            })
+            this.statistics();
+        },
+        /* 日期选择器 */
+        bindDateChange(e) {
+            const {
+                index
+            } = e.currentTarget.dataset;
+            let fromList = this.data.fromList;
+            fromList[index].value = e.detail.value;
+            fromList[index].error = false;
+            this.setData({
+                fromList
+            })
+            this.statistics();
+        },
+        /* 清空输入框 */
+        inputClear(e) {
+            console.log("清空", e.target.dataset.item.label)
+            this.statistics();
+        },
+        /* 统计是否完成全部必填项 */
+        statistics() {
+            let list = this.data.fromList,
+                sumCount = 0,
+                count = 0;
+            for (let i = 0; i < list.length; i++) {
+                if (list[i].required) {
+                    sumCount++;
+                    if (list[i].value != "") count++;
+                }
+            }
+            // console.log("必填总数", sumCount, '已填', count)
+            this.triggerEvent("CompletedOrNot", sumCount == count)
+        },
+        /* 提交 */
+        getData() {
+            let list = this.data.fromList,
+                returnData = {},
+                isReturn = true;
+            for (let i = 0; i < list.length; i++) {
+                if (list[i].required && list[i].value == "") {
+                    list[i].error = true;
+                    isReturn = false;
+                } else {
+                    returnData[list[i].valueName] = list[i].value;
+                }
+            }
+            this.setData({
+                fromList: list
+            })
+            return {
+                returnData,
+                isReturn
+            }
+        }
+    }
+})

components/My_form/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "van-field": "@vant/weapp/field/index"
+    }
+}

components/My_form/index.scss

@@ -0,0 +1,6 @@
+/* components/My_form/index.wxss */
+.picker {
+    position: absolute;
+    right: 0;
+    top: 0;
+}

components/My_form/index.wxml

@@ -0,0 +1,12 @@
+<van-cell-group>
+    <van-field wx:for="{{fromList}}" wx:key="{{item.label}}" data-item="{{item}}" data-index="{{index}}" value="{{ item.value }}" label="{{item.label}}" placeholder="{{item.placeholder}}" error='{{item.error}}' required='{{item.required}}' input-align='right' bind:change='inputChange' bind:clear='inputClear' clearable>
+        <view class="section" wx:if="{{item.type=='date'}}" slot='input'>
+            <picker mode="date" value="{{item.value}}" end="{{endTime}}" data-index="{{index}}" bindchange="bindDateChange">
+                <view class="picker" style="color:{{item.error?'var(--field-input-error-text-color,#ee0a24)':'var(--field-input-text-color,#323233)'}}">
+                    <text wx:if="{{item.value==''}}" style="opacity:{{item.error?1:.4}}">请选择</text>
+                    <text wx:else>{{item.value}}</text>
+                </view>
+            </picker>
+        </view>
+    </van-field>
+</van-cell-group>

pages/tabbar/mine/index.js

@@ -77,5 +77,11 @@ Page({
      */
     onShareAppMessage() {
 
-    }
+    },
+    /* 去修改用户信息 */
+    toChangeUserMsg() {
+        wx.navigateTo({
+            url: './userMsg/index'
+        })
+    },
 })

pages/tabbar/mine/index.json

@@ -1,4 +1,6 @@
 {
     "navigationBarTitleText": "我的",
-    "usingComponents": {}
+    "usingComponents": {
+        "My_form":"/components/My_form/index"
+    }
 }

pages/tabbar/mine/index.scss

@@ -128,7 +128,6 @@
         border-bottom: 0;
     }
 }
-
 /* 退出登录 */
 .out-login {
     width: 500rpx;

pages/tabbar/mine/index.wxml

@@ -1,5 +1,5 @@
 <view class="user-box">
-    <My_card custom-class='user-con' hover>
+    <My_card custom-class='user-con' hover bindtap="toChangeUserMsg">
         <van-image image-class="v-img" round width="128rpx" height="128rpx" src="https://img.yzcdn.cn/vant/cat.jpeg" />
         <view class="user-msg">
             <view class="user-name">

pages/tabbar/mine/userMsg/index.js

@@ -0,0 +1,113 @@
+// pages/tabbar/mine/userMsg/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        fromList1: [{
+            label: "姓名",
+            error: false,
+            errMsg: "",
+            type: "text",
+            value: "",
+            placeholder: "请填写",
+            valueName: "username", //绑定的字段名称
+            required: true, //必填
+        }, {
+            label: "性别",
+            error: false,
+            errMsg: "",
+            type: "text",
+            value: "",
+            placeholder: "请填写",
+            valueName: "gender", //绑定的字段名称
+            required: true, //必填
+        }, {
+            label: "生日",
+            error: false,
+            errMsg: "",
+            type: "date",
+            value: "",
+            placeholder: "请填写",
+            valueName: "birthday", //绑定的字段名称
+            required: true, //必填
+        }]
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {},
+    /* from1监听 */
+    form1CompletedOrNot({
+        detail
+    }) {
+        this.setData({
+            form1Complete: detail
+        })
+    },
+    /* from2监听 */
+    form2CompletedOrNot({
+        detail
+    }) {
+        this.setData({
+            form1Complete: detail
+        })
+    },
+    /* 提交 */
+    submit() {
+        let a1 = this.selectComponent("#form1").getData();
+        console.log({
+            ...a1.returnData
+        })
+    },
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/tabbar/mine/userMsg/index.json

@@ -0,0 +1,6 @@
+{
+    "navigationBarTitleText": "个人信息",
+    "usingComponents": {
+        "My_form": "/components/My_form/index"
+    }
+}

pages/tabbar/mine/userMsg/index.scss

@@ -0,0 +1,68 @@
+/* 用户头像 */
+.picture {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 750rpx;
+    height: 120rpx;
+    padding: 0 30rpx;
+    background-color: #ffffff;
+    box-sizing: border-box;
+
+    .label {
+        font-size: 28rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #666666;
+        line-height: 28rpx;
+    }
+
+    .picture_right {
+        display: flex;
+        align-items: center;
+        color: #CCCCCC;
+        .user-img {
+            width: 64rpx !important;
+            height: 64rpx !important;
+            border-radius: 50% !important;
+            margin-right: 15rpx;
+        }
+    }
+
+
+}
+
+/* 职务 */
+.duty-box {
+    width: 750rpx;
+    height: 90rpx;
+    background-color: #ffffff;
+
+    .con {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: calc(100% - 60rpx);
+        height: 100%;
+        margin-left: 30rpx;
+        font-size: 28rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+
+        .duty-name {
+            color: #666666;
+        }
+
+        .job {
+            color: #262626;
+        }
+    }
+}
+
+/* 保存按钮 */
+.save-but {
+    width: 500rpx;
+    height: 90rpx;
+    background: #FA8C16;
+    border-radius: 45rpx !important;
+    opacity: 0.85;
+    margin-top: 100rpx;
+}

pages/tabbar/mine/userMsg/index.wxml

@@ -0,0 +1,24 @@
+<!-- 头像 -->
+<navigator url="#" class="picture">
+    <view class="label">头像</view>
+    <view class="picture_right">
+        <image class="user-img" src="https://img01.yzcdn.cn/vant/cat.jpeg"></image>
+        <van-icon size='30rpx' name="arrow" />
+    </view>
+</navigator>
+<view style="height: 20rpx;" />
+<My_form id='form1' fromList='{{fromList1}}' bindCompletedOrNot='form1CompletedOrNot' />
+<!-- 职务 -->
+<view class="duty-box">
+    <view class="con">
+        <view class="duty-name">职务</view>
+        <view class="job">总监</view>
+    </view>
+</view>
+<view style="height: 20rpx;" />
+<My_form id='form1' fromList='{{fromList1}}' bindCompletedOrNot='form1CompletedOrNot' />
+
+
+<view style="width: 100%;text-align: center;">
+    <van-button custom-class='save-but' color="var(--warning)">保存</van-button>
+</view>

project.private.config.json

@@ -21,6 +21,13 @@
                     "query": "",
                     "launchMode": "default",
                     "scene": null
+                },
+                {
+                    "name": "用户信息编辑",
+                    "pathName": "pages/tabbar/mine/userMsg/index",
+                    "query": "",
+                    "launchMode": "default",
+                    "scene": null
                 }
             ]
         }

utils/getTime.js

@@ -1,16 +1,16 @@
-const formatTime = date => {
-  const year = date.getFullYear()
-  const month = date.getMonth() + 1
-  const day = date.getDate()
-  const hour = date.getHours()
-  const minute = date.getMinutes()
-  const second = date.getSeconds()
-  return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
+const formatTime = (date, j1 = '/', j2 = ':') => {
+    const year = date.getFullYear()
+    const month = date.getMonth() + 1
+    const day = date.getDate()
+    const hour = date.getHours()
+    const minute = date.getMinutes()
+    const second = date.getSeconds()
+    return `${[year, month, day].map(formatNumber).join(j1)} ${[hour, minute, second].map(formatNumber).join(j2)}`
 }
 const formatNumber = n => {
-  n = n.toString()
-  return n[1] ? n : `0${n}`
+    n = n.toString()
+    return n[1] ? n : `0${n}`
 }
 module.exports = {
-  formatTime
+    formatTime
 }