开发修改用户信息

app.json

@@ -1,6 +1,8 @@
 {
     "pages": [
         "pages/my/index",
+        "pages/editUser/index",
+        "pages/notice/index",
         "pages/collection/index",
         "pages/follow/index",
         "pages/userWorks/index",

app.wxss

@@ -4,7 +4,7 @@ page {
   /* min-height: 100%; */
   color: #333;
   font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
-  background: #eee;
+  background: #F2F6FC;
 }
 
 view {

components/navigationBar/index.js

@@ -1,81 +1,80 @@
 const app = getApp()
 import {
-  setUserInfo
+    setUserInfo
 } from '~/api/user'
 import {
-  storeBindingsBehavior
+    storeBindingsBehavior
 } from 'mobx-miniprogram-bindings'
 import {
-  store
+    store
 } from '~/store/index'
 Component({
-  // 自动绑定
-  behaviors: [storeBindingsBehavior],
-  storeBindings: {
-    store,
-    fields: {
-      userInfo: 'userInfo'
-      // numA: () => store.numA, // 绑定字段第一种方式
-      // numB: (store) => store.numB, // 绑定字段第二种方式
-      // sum: 'sum' // 绑定字段第三种方式
+    // 自动绑定
+    behaviors: [storeBindingsBehavior],
+    storeBindings: {
+        store,
+        fields: {
+            userInfo: 'userInfo'
+        },
+        actions: {
+            setUser: 'setUser'
+        }
     },
-    actions: {
-      setUser: 'setUser'
-    }
-  },
-  properties: {
-    title: {
-      type: String,
-      value: '朗读小咖秀',
-    }
-  },
-  data: {
-    navBarHeight: app.globalData.navBarHeight,
-    menuRight: app.globalData.menuRight,
-    menuTop: app.globalData.menuTop,
-    menuHeight: app.globalData.menuHeight,
-    isGradeShow: false,
-    temporaryGrade: null
-  },
-  attached: function () {
-    // console.log(wx.getStorage(user));
-  },
-  methods: {
-    // 选择年级
-    selectGrade({
-      target
-    }) {
-      let code = target.dataset.code
-      if (!code) {
-        return
-      }
-      this.setData({
-        temporaryGrade: code
-      })
+    properties: {
+        title: {
+            type: String,
+            value: '朗读小咖秀',
+        }
     },
-    showGrade() {
-      this.setData({
-        isGradeShow: true,
-        temporaryGrade: this.data.userInfo.grade
-      })
-    },
-    // 修改年级
-    async changeGrade(e) {
-      const grade = this.data.temporaryGrade
-      if (!grade) {
-        return wx.showToast({
-          title: '请选择年级',
-          icon: 'none',
-          duration: 2000
-        })
-      }
-      this.setData({
+    data: {
+        navBarHeight: app.globalData.navBarHeight,
+        menuRight: app.globalData.menuRight,
+        menuTop: app.globalData.menuTop,
+        menuHeight: app.globalData.menuHeight,
         isGradeShow: false,
-      })
-      let res = await setUserInfo({
-        grade
-      }, 'put')
-      this.setUser(res)
+        temporaryGrade: null
     },
-  }
+    methods: {
+        closeGrade() {
+            this.setData({
+                isGradeShow: false,
+            })
+        },
+        // 选择年级
+        selectGrade({
+            target
+        }) {
+            let code = target.dataset.code
+            if (!code) {
+                return
+            }
+            this.setData({
+                temporaryGrade: code
+            })
+        },
+        showGrade() {
+            this.setData({
+                isGradeShow: true,
+                temporaryGrade: this.data.userInfo.grade
+            })
+        },
+        // 修改年级
+        async changeGrade(e) {
+            const grade = this.data.temporaryGrade
+            if (!grade) {
+                return wx.showToast({
+                    title: '请选择年级',
+                    icon: 'none',
+                    duration: 2000
+                })
+            }
+            this.setData({
+                isGradeShow: false,
+            })
+            let res = await setUserInfo({
+                grade
+            }, 'put')
+            this.setUser(res)
+        },
+    }
 })

components/navigationBar/index.wxml

@@ -1,9 +1,9 @@
 <!-- 自定义顶部栏 -->
 <view class="nav-bar" style="height:{{navBarHeight}}px;">
-  <view class="view" style="height:{{menuHeight}}px;top:{{menuTop}}px;">
-    <view class="selectGrade" bindtap="showGrade">{{userInfo.gradeName}}</view>
-    <view class="title">{{title}}</view>
-  </view>
+    <view class="view" style="height:{{menuHeight}}px;top:{{menuTop}}px;">
+        <view class="selectGrade" bindtap="showGrade">{{userInfo.gradeName}}</view>
+        <view class="title">{{title}}</view>
+    </view>
 </view>
 
 <!-- 
@@ -12,32 +12,36 @@
 -->
 <view class="content" style="margin-top:{{navBarHeight}}px;"></view>
 
-<view wx:if="{{isGradeShow}}" class="gradeContainer" catchtouchmove='true' style="margin-top:{{navBarHeight}}px;">
-  <view class="gradeBox" bindtap="selectGrade">
-    <view class="title">请选择年级</view>
-    <view class="content">
-      <view class="grade oneRow {{temporaryGrade=='PRESCHOOL'?'check':''}}" data-code="PRESCHOOL">学前班</view>
-    </view>
-    <view class="content">
-      <view class="grade {{temporaryGrade=='PRIMARY_FIRST_GRADE'?'check':''}}" data-code="PRIMARY_FIRST_GRADE">一年级
-      </view>
-      <view class="grade {{temporaryGrade=='PRIMARY_SECOND_GRADE'?'check':''}}" data-code="PRIMARY_SECOND_GRADE">二年级
-      </view>
-    </view>
-    <view class="content">
-      <view class="grade {{temporaryGrade=='PRIMARY_THREE_GRADE'?'check':''}}" data-code="PRIMARY_THREE_GRADE">三年级
-      </view>
-      <view class="grade {{temporaryGrade=='PRIMARY_SENIOR_GRADE'?'check':''}}" data-code="PRIMARY_SENIOR_GRADE">四年级
-      </view>
-    </view>
-    <view class="content">
-      <view class="grade {{temporaryGrade=='PRIMARY_THREE_GRADE'?'check':''}}" data-code="PRIMARY_THREE_GRADE">五年级
-      </view>
-      <view class="grade {{temporaryGrade=='PRIMARY_SENIOR_GRADE'?'check':''}}" data-code="PRIMARY_SENIOR_GRADE">六年级
-      </view>
-    </view>
-    <view class="submitBox">
-      <button class="resetBtn submit" bindtap="changeGrade">确定</button>
+<view wx:if="{{isGradeShow}}" class="gradeContainer" catchtouchmove='true' style="margin-top:{{navBarHeight}}px;"
+    bindtap="closeGrade">
+    <view class="gradeBox" catchtap="selectGrade">
+        <view class="title">请选择年级</view>
+        <view class="content">
+            <view class="grade oneRow {{temporaryGrade=='PRESCHOOL'?'check':''}}" data-code="PRESCHOOL">学前班</view>
+        </view>
+        <view class="content">
+            <view class="grade {{temporaryGrade=='PRIMARY_FIRST_GRADE'?'check':''}}" data-code="PRIMARY_FIRST_GRADE">一年级
+            </view>
+            <view class="grade {{temporaryGrade=='PRIMARY_SECOND_GRADE'?'check':''}}" data-code="PRIMARY_SECOND_GRADE">
+                二年级
+            </view>
+        </view>
+        <view class="content">
+            <view class="grade {{temporaryGrade=='PRIMARY_THREE_GRADE'?'check':''}}" data-code="PRIMARY_THREE_GRADE">三年级
+            </view>
+            <view class="grade {{temporaryGrade=='PRIMARY_SENIOR_GRADE'?'check':''}}" data-code="PRIMARY_SENIOR_GRADE">
+                四年级
+            </view>
+        </view>
+        <view class="content">
+            <view class="grade {{temporaryGrade=='PRIMARY_THREE_GRADE'?'check':''}}" data-code="PRIMARY_THREE_GRADE">五年级
+            </view>
+            <view class="grade {{temporaryGrade=='PRIMARY_SENIOR_GRADE'?'check':''}}" data-code="PRIMARY_SENIOR_GRADE">
+                六年级
+            </view>
+        </view>
+        <view class="submitBox">
+            <button class="resetBtn submit" bindtap="changeGrade">确定</button>
+        </view>
     </view>
-  </view>
 </view>

pages/editUser/index.js

@@ -0,0 +1,135 @@
+import {
+    createStoreBindings
+} from 'mobx-miniprogram-bindings'
+import {
+    store
+} from '~/store/index'
+import {
+    setUserInfo
+} from '~/api/user'
+let storeBindings
+Page({
+    data: {
+        gradeIndex: 0,
+        gradeArray: [{
+                value: 'PRESCHOOL',
+                key: '学前班'
+            }, {
+                value: 'PRIMARY_FIRST_GRADE',
+                key: '一年级'
+            },
+            {
+                value: 'PRIMARY_SECOND_GRADE',
+                key: '二年级'
+            },
+            {
+                value: 'PRIMARY_THREE_GRADE',
+                key: '三年级'
+            },
+            {
+                value: 'PRIMARY_SENIOR_GRADE',
+                key: '四年级'
+            },
+        ],
+    },
+    onLoad(options) {
+        // 手工绑定 
+        this.storeBindings = createStoreBindings(this, {
+            store,
+            fields: {
+                userInfo: 'userInfo'
+            },
+            actions: {
+                setUser: 'setUser'
+            }
+        })
+        // 立刻更新
+        this.storeBindings.updateStoreBindings()
+        let {
+            grade
+        } = this.data.userInfo
+        let gradeIndex = this.data.gradeArray.findIndex(item => {
+            return item.value == grade
+        })
+        this.setData({
+            gradeIndex
+        })
+    },
+    // 调用清理函数
+    onUnload() {
+        this.storeBindings.destroyStoreBindings()
+    },
+    onChooseAvatar(e) {
+        const {
+            avatarUrl
+        } = e.detail
+        this.setUserInfo({
+            avatar: avatarUrl
+        })
+    },
+    saveNickName(e) {
+        let nickName = e.detail.value;
+        if (nickName == this.data.userInfo.nickName) {
+            return
+        }
+        this.setUserInfo({
+            nickName
+        })
+    },
+    selectProfession() {
+        wx.showActionSheet({
+            itemList: ['学生', '家长'],
+            success: (res) => {
+                /*   if (res.tapIndex == this.data.userInfo.gender) {
+                      return
+                  }
+                  this.setUserInfo({
+                      gender: res.tapIndex
+                  }) */
+            },
+        })
+    },
+    selectGender() {
+        wx.showActionSheet({
+            itemList: ['女', '男'],
+            success: (res) => {
+                if (res.tapIndex == this.data.userInfo.gender) {
+                    return
+                }
+                this.setUserInfo({
+                    gender: res.tapIndex
+                })
+            },
+        })
+    },
+    bindDateChange(e) {
+        this.setUserInfo({
+            birthday: e.detail.value
+        })
+    },
+    bindGradeChange(e) {
+        let grade = this.data.gradeArray[e.detail.value].value
+        this.setUserInfo({
+            grade
+        })
+    },
+    saveSchool(e) {
+        let schoolName = e.detail.value;
+        if (schoolName == this.data.userInfo.schoolName) {
+            return
+        }
+        this.setUserInfo({
+            schoolName
+        })
+    },
+    async setUserInfo(data) {
+        wx.showLoading({
+            title: '提交中',
+        })
+        let res = await setUserInfo(data, 'put').finally(() => {
+            wx.hideLoading()
+        })
+        this.setUser(res)
+    },
+
+})

pages/editUser/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "修改资料"
+}

pages/editUser/index.less

@@ -0,0 +1,47 @@
+.editBox {
+    padding: 20rpx;
+
+    .mt40 {
+        margin-top: 40rpx;
+    }
+
+    .editRow {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 18rpx 40rpx;
+        height: 50rpx;
+        border-radius: 25rpx;
+        margin-bottom: 12rpx;
+        background-color: white;
+        box-sizing: content-box;
+
+        .name {
+            font-size: 30rpx;
+        }
+
+        .right {
+            display: flex;
+            align-items: center;
+
+            .avatar {
+                width: 60rpx;
+                height: 60rpx;
+                border-radius: 50%;
+            }
+
+            .nickName {
+                width: 400rpx;
+                text-align: right;
+            }
+
+            .black {
+                width: 16rpx;
+                height: 30rpx;
+                opacity: 0.8;
+                margin-left: 24rpx;
+            }
+        }
+
+    }
+}

pages/editUser/index.wxml

@@ -0,0 +1,65 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
+<view class="editBox">
+    <button class="resetBtn editRow" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+        <view class="name">头像</view>
+        <view class="right">
+            <image class='avatar' src='{{ userInfo.avatar}}'></image>
+            <image class='black' src='/static/black.png'></image>
+        </view>
+    </button>
+    <view class="editRow">
+        <view class="name">昵称</view>
+        <view class="right">
+            <input name='nickName' type="nickname" placeholder="请输入昵称" class='nickName' maxlength="9"
+                value='{{userInfo.nickName}}' bindblur='saveNickName'></input>
+            <image class='black' src='/static/black.png'></image>
+        </view>
+    </view>
+    <view class="editRow">
+        <view class="name">性别</view>
+        <view class="right" bindtap="selectGender">
+            <view class="name">
+                {{userInfo.gender===0?'女':'男'}}
+            </view>
+            <image class='black' src='/static/black.png'></image>
+        </view>
+    </view>
+    <view class="editRow">
+        <view class="name">生日</view>
+        <view class="right">
+            <picker mode="date" value="{{filters.formatDate( userInfo.birthday, 2)  }}" bindchange="bindDateChange"
+                end="2022-01-01">
+                <view class="name">{{userInfo.birthday?filters.formatDate(userInfo.birthday,2):'请选择生日' }}</view>
+            </picker>
+            <image class='black' src='/static/black.png'></image>
+        </view>
+    </view>
+    <view class="editRow mt40">
+        <view class="name">身份</view>
+        <view class="right" bindtap="selectProfession">
+            <view class="name">
+                {{userInfo.profession}}
+            </view>
+            <image class='black' src='/static/black.png'></image>
+        </view>
+    </view>
+    <view class="editRow">
+        <view class="name">年级</view>
+        <view class="right">
+            <picker value="{{gradeIndex}}" range="{{gradeArray}}" range-key="key" bindchange="bindGradeChange">
+                <view class="name">
+                    {{filters.gradeFilter(userInfo.grade)}}
+                </view>
+            </picker>
+            <image class='black' src='/static/black.png'></image>
+        </view>
+    </view>
+    <view class="editRow">
+        <view class="name">学校</view>
+        <view class="right">
+            <input placeholder="请输入学校" class='nickName' maxlength="18" value='{{userInfo.schoolName}}'
+                bindblur='saveSchool'></input>
+            <image class='black' src='/static/black.png'></image>
+        </view>
+    </view>
+</view>

pages/editUser/index.wxss

@@ -0,0 +1,39 @@
+.editBox {
+  padding: 20rpx;
+}
+.editBox .mt40 {
+  margin-top: 40rpx;
+}
+.editBox .editRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18rpx 40rpx;
+  height: 50rpx;
+  border-radius: 25rpx;
+  margin-bottom: 12rpx;
+  background-color: white;
+  box-sizing: content-box;
+}
+.editBox .editRow .name {
+  font-size: 30rpx;
+}
+.editBox .editRow .right {
+  display: flex;
+  align-items: center;
+}
+.editBox .editRow .right .avatar {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+}
+.editBox .editRow .right .nickName {
+  width: 400rpx;
+  text-align: right;
+}
+.editBox .editRow .right .black {
+  width: 16rpx;
+  height: 30rpx;
+  opacity: 0.8;
+  margin-left: 24rpx;
+}

pages/my/index.less

@@ -1,313 +1,329 @@
 .container {
-  padding: 30rpx 20rpx;
-
-  .userBox {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: white;
-    padding: 20rpx 12rpx 0rpx;
-    border-radius: 20rpx;
-
-    .avatar {
-      width: 152rpx;
-      height: 152rpx;
-      border-radius: 50%;
-      position: relative;
-    }
-
-    .userRight {
-      flex: 1;
-      margin-left: 30rpx;
-      padding: 0px 10rpx;
+    padding: 30rpx 20rpx;
 
-      .uRtop {
+    .userBox {
         display: flex;
+        align-items: center;
         justify-content: space-between;
-
-        .uRtopleft {
-          .nickName {
-            max-width: 340rpx;
-            color: #333;
-            font-size: 32rpx;
-          }
-
-          .gradeText {
-            margin: 18rpx 0rpx 12rpx;
-            font-size: 24rpx;
-            color: #989A9C;
-          }
+        background-color: white;
+        padding: 20rpx 12rpx 0rpx;
+        border-radius: 20rpx;
+
+        .identity {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+
+            .avatar {
+                width: 106rpx;
+                height: 106rpx;
+                border-radius: 50%;
+                position: relative;
+            }
+
+            .identityText {
+                width: 80rpx;
+                margin-top: 6rpx;
+                font-size: 24rpx;
+                color: white;
+                background-color: #10CA61;
+                border-radius: 25rpx;
+            }
         }
 
-        .uRtopRight {
-          display: flex;
-          align-items: center;
-
-          .edit {
-            width: 22rpx;
-            height: 28rpx;
-          }
-
-          text {
-            margin: 0px 10rpx;
-            font-size: 24rpx;
-            color: #666;
-          }
+        .userRight {
+            flex: 1;
+            margin-left: 30rpx;
+            padding: 0px 10rpx;
+
+            .uRtop {
+                display: flex;
+                justify-content: space-between;
+
+                .uRtopleft {
+                    .nickName {
+                        max-width: 340rpx;
+                        color: #333;
+                        font-size: 32rpx;
+                    }
+
+                    .gradeText {
+                        margin: 18rpx 0rpx 12rpx;
+                        font-size: 24rpx;
+                        color: #989A9C;
+                    }
+                }
+
+                .uRtopRight {
+                    display: flex;
+                    align-items: center;
+
+                    .edit {
+                        width: 22rpx;
+                        height: 28rpx;
+                    }
+
+                    text {
+                        margin: 0px 10rpx;
+                        font-size: 24rpx;
+                        color: #666;
+                    }
+                }
+            }
+
+            .uRBtm {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                border-top: 1px solid rgba(0, 0, 0, 0.1);
+                padding: 18rpx 0rpx;
+
+                .count {
+                    width: 33%;
+                    font-size: 28rpx;
+                    color: rgba(0, 0, 0, 0.6);
+                    border-right: 1px solid rgba(51, 51, 51, 0.3);
+                    text-align: center;
+
+                    .countNum {
+                        margin-left: 10rpx;
+                    }
+                }
+
+                .countFirst {
+                    text-align: left;
+                }
+
+                .countEnd {
+                    text-align: right;
+                    border: none;
+                }
+            }
         }
-      }
+    }
+
+    .iosVip {
+        margin: 4rpx 0px 0px 6rpx;
+        font-size: 20rpx;
+        color: #333;
+    }
 
-      .uRBtm {
+    .sectionBoxs {
+        margin-top: 20rpx;
+        padding: 20rpx 30rpx;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-        padding: 18rpx 0rpx;
-
-        .count {
-          width: 33%;
-          font-size: 28rpx;
-          color: rgba(0, 0, 0, 0.6);
-          border-right: 1px solid rgba(51, 51, 51, 0.3);
-          text-align: center;
-
-          .countNum {
-            margin-left: 10rpx;
-          }
-        }
-
-        .countFirst {
-          text-align: left;
+        background-color: white;
+        border-radius: 20rpx;
+
+        .sBox {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .img {
+                width: 69rpx;
+                height: 69rpx;
+            }
+
+            .title {
+                margin-top: 8rpx;
+                font-size: 24rpx;
+                color: #333;
+            }
         }
 
-        .countEnd {
-          text-align: right;
-          border: none;
+        .contactBtn {
+            border: none;
+            padding: 0rpx;
+            line-height: normal;
+            margin: 0;
         }
-      }
-    }
-  }
-
-  .iosVip {
-    margin: 4rpx 0px 0px 6rpx;
-    font-size: 20rpx;
-    color: #333;
-  }
-
-  .sectionBoxs {
-    margin-top: 20rpx;
-    padding: 20rpx 30rpx;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: white;
-    border-radius: 20rpx;
-
-    .sBox {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      .img {
-        width: 69rpx;
-        height: 69rpx;
-      }
-
-      .title {
-        margin-top: 8rpx;
-        font-size: 24rpx;
-        color: #333;
-      }
     }
 
-    .contactBtn {
-      border: none;
-      padding: 0rpx;
-      line-height: normal;
-      margin: 0;
-    }
-  }
-
-  .payBox {
-    margin-top: 20rpx;
-    padding: 13rpx 30rpx;
-    background-color: white;
-    border-radius: 20rpx;
-
-    .title {
-      font-size: 30rpx;
-      font-weight: bold;
-      color: #000;
-    }
+    .payBox {
+        margin-top: 20rpx;
+        padding: 13rpx 30rpx;
+        background-color: white;
+        border-radius: 20rpx;
 
-    .pay {
-      margin: 20rpx 0rpx;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0rpx 30rpx;
-      border-radius: 22rpx;
-      overflow: hidden;
-
-      .payLeft {
-        .pLTitle {
-          font-size: 36rpx;
-          font-weight: bold;
+        .title {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #000;
         }
 
-        .pLcontent {
-          font-size: 22rpx;
+        .pay {
+            margin: 20rpx 0rpx;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0rpx 30rpx;
+            border-radius: 22rpx;
+            overflow: hidden;
+
+            .payLeft {
+                .pLTitle {
+                    font-size: 36rpx;
+                    font-weight: bold;
+                }
+
+                .pLcontent {
+                    font-size: 22rpx;
+                }
+            }
+
+            .payRight {
+                margin: 24rpx 0rpx;
+                padding: 12rpx 28rpx;
+                border-radius: 40rpx;
+                font-size: 24rpx;
+                font-weight: bold;
+            }
         }
-      }
-
-      .payRight {
-        margin: 24rpx 0rpx;
-        padding: 12rpx 28rpx;
-        border-radius: 40rpx;
-        font-size: 24rpx;
-        font-weight: bold;
-      }
-    }
 
-    .vipPay {
-      background: url('http://reader-wx.ai160.com/images/reader/v3/year.png') no-repeat;
-      background-size: cover;
+        .vipPay {
+            background: url('http://reader-wx.ai160.com/images/reader/v3/year.png') no-repeat;
+            background-size: cover;
 
-      .vipTitle {
-        color: #FFE6B9;
-      }
+            .vipTitle {
+                color: #FFE6B9;
+            }
 
-      .vipContent {
-        margin-top: 4rpx;
-        color: #FFE6B9;
-      }
+            .vipContent {
+                margin-top: 4rpx;
+                color: #FFE6B9;
+            }
 
-      .vipBtn {
-        background-image: linear-gradient(to bottom, #F4E7A8, #F9EDCF);
-        color: #211501;
-      }
-    }
-
-    .buyPay {
-      background: url('http://reader-wx.ai160.com/images/reader/v3/10yuan.png') no-repeat;
-      background-size: cover;
-
-      .payLeft {
-        color: #7D320A;
-        font-size: 36rpx;
-        font-weight: bold;
-      }
-
-      .buyBtn {
-        border: 1rpx solid white;
-        color: white;
-        background-color: #7D320A;
-      }
-    }
-  }
-
-  .surplus {
-    margin-top: 20rpx;
-    padding: 22rpx 30rpx;
-    background-color: white;
-    border-radius: 20rpx;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 32rpx;
-
-    .title {
-      font-size: 30rpx;
-      font-weight: bold;
-      color: #000;
-    }
+            .vipBtn {
+                background-image: linear-gradient(to bottom, #F4E7A8, #F9EDCF);
+                color: #211501;
+            }
+        }
 
-    .num {
-      color: #F97419;
-      font-weight: bold;
-      margin-right: 10rpx;
-    }
-  }
-
-  .taskBox {
-    margin-top: 20rpx;
-    padding: 20rpx 10rpx 0rpx;
-    background-color: white;
-    border-radius: 20rpx;
-
-    .title {
-      padding: 0rpx 20rpx;
-      font-size: 30rpx;
-      font-weight: bold;
-      color: #000;
+        .buyPay {
+            background: url('http://reader-wx.ai160.com/images/reader/v3/10yuan.png') no-repeat;
+            background-size: cover;
+
+            .payLeft {
+                color: #7D320A;
+                font-size: 36rpx;
+                font-weight: bold;
+            }
+
+            .buyBtn {
+                border: 1rpx solid white;
+                color: white;
+                background-color: #7D320A;
+            }
+        }
     }
 
-    .task {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 30rpx 22rpx;
-      border-bottom: 1px solid #EAEAEA;
-
-      .taskLeft {
+    .surplus {
+        margin-top: 20rpx;
+        padding: 22rpx 30rpx;
+        background-color: white;
+        border-radius: 20rpx;
         display: flex;
         align-items: center;
         justify-content: space-between;
+        font-size: 32rpx;
+
+        .title {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #000;
+        }
 
-        .img {
-          width: 76rpx;
-          height: 76rpx;
-          border-radius: 50%;
+        .num {
+            color: #F97419;
+            font-weight: bold;
+            margin-right: 10rpx;
         }
+    }
 
-        .taskContent {
-          margin-left: 40rpx;
+    .taskBox {
+        margin-top: 20rpx;
+        padding: 20rpx 10rpx 0rpx;
+        background-color: white;
+        border-radius: 20rpx;
 
-          .tcTitle {
+        .title {
+            padding: 0rpx 20rpx;
             font-size: 30rpx;
             font-weight: bold;
-            color: #333;
-          }
-
-          .tcNum {
-            color: #FF6259;
-            font-size: 26rpx;
-          }
+            color: #000;
         }
-      }
 
-      .taskRightBox {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        /*  */
-      }
-
-      .taskRight {
-        width: 138rpx;
-        text-align: center;
-        padding: 10rpx 0rpx;
-        border-radius: 40rpx;
-        color: white;
-        background-color: #FC614E;
-        font-size: 30rpx;
-      }
-
-      .taskRight-close {
-        color: #6C6C6C;
-        background: #D0D0D0;
-        box-shadow: 0 2px 2px 0 #AEABAB;
-      }
-
-      .taskSurplus {
-        text-align: center;
-        margin-top: 4rpx;
-        color: #686868;
-        font-size: 20rpx;
-      }
-    }
+        .task {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 30rpx 22rpx;
+            border-bottom: 1px solid #EAEAEA;
+
+            .taskLeft {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                .img {
+                    width: 76rpx;
+                    height: 76rpx;
+                    border-radius: 50%;
+                }
+
+                .taskContent {
+                    margin-left: 40rpx;
+
+                    .tcTitle {
+                        font-size: 30rpx;
+                        font-weight: bold;
+                        color: #333;
+                    }
+
+                    .tcNum {
+                        color: #FF6259;
+                        font-size: 26rpx;
+                    }
+                }
+            }
+
+            .taskRightBox {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-end;
+                /*  */
+            }
+
+            .taskRight {
+                width: 138rpx;
+                text-align: center;
+                padding: 10rpx 0rpx;
+                border-radius: 40rpx;
+                color: white;
+                background-color: #FC614E;
+                font-size: 30rpx;
+            }
+
+            .taskRight-close {
+                color: #6C6C6C;
+                background: #D0D0D0;
+                box-shadow: 0 2px 2px 0 #AEABAB;
+            }
+
+            .taskSurplus {
+                text-align: center;
+                margin-top: 4rpx;
+                color: #686868;
+                font-size: 20rpx;
+            }
+        }
 
-    .advert {
-      border: none;
+        .advert {
+            border: none;
+        }
     }
-  }
 }

pages/my/index.wxml

@@ -1,143 +1,146 @@
 <wxs src="../../utils/filter.wxs" module="filters" />
 <navigationBar title="我的"></navigationBar>
 <view class="container">
-  <!-- 用户信息 -->
-  <view class="userBox">
-    <image class='avatar' src='{{ userInfo.user.avatar}}'></image>
-    <view class="userRight">
-      <view class="uRtop" bindtap="jump" data-url="/pages/user/myEdit/myEdit">
-        <view class="uRtopleft">
-          <view class="nickName textOver">昵称：{{userInfo.user.nickName||userInfo.user.eid }}</view>
-          <view class="gradeText textOver">学号：{{userInfo.user.eid}}</view>
+    <!-- 用户信息 -->
+    <view class="userBox">
+        <view class="identity">
+            <image class='avatar' src='{{ userInfo.user.avatar}}'></image>
+            <view class="identityText">{{ userInfo.user.profession}}</view>
         </view>
-        <view class="uRtopRight">
-          <image class="edit" src="/static/edit_new.png" mode="" />
-          <text>编辑</text>
+        <view class="userRight">
+            <view class="uRtop">
+                <view class="uRtopleft">
+                    <view class="nickName textOver">{{userInfo.user.nickName||'请输入昵称' }}</view>
+                    <view class="gradeText textOver">学号：{{userInfo.user.eid}}</view>
+                </view>
+                <view class="uRtopRight" bindtap="jump" data-url="/pages/editUser/index">
+                    <image class="edit" src="/static/edit_new.png" mode="" />
+                    <text>编辑</text>
+                </view>
+            </view>
+            <view class="uRBtm">
+                <view class="count countFirst">
+                    作品<text class="countNum textOver">{{filters.numFilter(userInfo.readAmount)|| 0}}</text>
+                </view>
+                <view class="count">
+                    粉丝<text class="countNum textOver">{{filters.numFilter(userInfo.fansAmount)|| '0'}}</text>
+                </view>
+                <view class="count countEnd">
+                    播放<text class="countNum textOver">{{filters.numFilter(userInfo.playAmount) || 0}}</text>
+                </view>
+            </view>
         </view>
-      </view>
-      <view class="uRBtm">
-        <view class="count countFirst">
-          作品<text class="countNum textOver">{{filters.numFilter(userInfo.readAmount)|| 0}}</text>
+    </view>
+    <!-- ios会员展示到期时间 -->
+    <view class="iosVip" wx:if="{{isIos&&vipTime}}">
+        会员至：{{filters.formatDate(vipTime,4)}}
+    </view>
+    <!-- 跳转菜单 -->
+    <view class="sectionBoxs">
+        <view class="sBox" bindtap='jump' data-url="/pages/userWorks/index">
+            <image class="img" src="/static/work.png" mode="" />
+            <text class="title">我的作品</text>
         </view>
-        <view class="count">
-          粉丝<text class="countNum textOver">{{filters.numFilter(userInfo.fansAmount)|| '0'}}</text>
+        <view class="sBox" bindtap='jump' data-url="/pages/follow/index">
+            <image class="img" src="/static/concern.png" mode="" />
+            <text class="title">我的关注</text>
         </view>
-        <view class="count countEnd">
-          播放<text class="countNum textOver">{{filters.numFilter(userInfo.playAmount) || 0}}</text>
+        <view class="sBox" bindtap='jump' data-url="/pages/mycollection/mycollection?title=我的收藏">
+            <image class="img" src="/static/collect.png" mode="" />
+            <text class="title">我的收藏</text>
         </view>
-      </view>
-    </view>
-  </view>
-  <!-- ios会员展示到期时间 -->
-  <view class="iosVip" wx:if="{{isIos&&vipTime}}">
-    会员至：{{filters.formatDate(vipTime,4)}}
-  </view>
-  <!-- 跳转菜单 -->
-  <view class="sectionBoxs">
-    <view class="sBox" bindtap='jump' data-url="/pages/userWorks/index">
-      <image class="img" src="/static/work.png" mode="" />
-      <text class="title">我的作品</text>
-    </view>
-    <view class="sBox" bindtap='jump' data-url="/pages/follow/index">
-      <image class="img" src="/static/concern.png" mode="" />
-      <text class="title">我的关注</text>
-    </view>
-    <view class="sBox" bindtap='jump' data-url="/pages/mycollection/mycollection?title=我的收藏">
-      <image class="img" src="/static/collect.png" mode="" />
-      <text class="title">我的收藏</text>
-    </view>
-    <view class="sBox" bindtap='jump' data-url="/pages/social/insideMessage/insideMessage">
-      <image class="img" src="/static/message.png" mode="" />
-      <text class="title">消息通知</text>
-    </view>
-    <button class="resetBtn contactBtn" bindtap="goToService" open-type="contact" plain="true">
-      <view class="sBox">
-        <image class="img" src="/static/contact.png" mode="" />
-        <text class="title">联系客服</text>
-      </view>
-    </button>
-  </view>
-  <!-- 支付 -->
-  <!-- <view class="payBox" wx:if="{{!isIos}}"> -->
-  <view class="payBox">
-    <view class="title">
-      付费购
+        <view class="sBox" bindtap='jump' data-url="/pages/notice/index">
+            <image class="img" src="/static/message.png" mode="" />
+            <text class="title">消息通知</text>
+        </view>
+        <button class="resetBtn contactBtn" open-type="contact" plain="true">
+            <view class="sBox">
+                <image class="img" src="/static/contact.png" mode="" />
+                <text class="title">联系客服</text>
+            </view>
+        </button>
     </view>
-    <view class="pay vipPay">
-      <view class="payLeft">
-        <view class="pLTitle vipTitle">
-          {{productVip.title}}
+    <!-- 支付 -->
+    <!-- <view class="payBox" wx:if="{{!isIos}}"> -->
+    <view class="payBox">
+        <view class="title">
+            付费购
         </view>
-        <view class="pLcontent vipContent">
-          {{vipTime?filters.formatDate(vipTime)+'过期':'购买VIP会员，即可有权使用全部资源'}}
+        <view class="pay vipPay">
+            <view class="payLeft">
+                <view class="pLTitle vipTitle">
+                    {{productVip.title}}
+                </view>
+                <view class="pLcontent vipContent">
+                    {{vipTime?filters.formatDate(vipTime,4)+'过期':'购买VIP会员，即可有权使用全部资源'}}
+                </view>
+            </view>
+            <view class="payRight vipBtn" bindtap="toBuy" data-type="{{productVip.id}}">
+                {{vipTime?'立即续费':'立即开通'}}
+            </view>
         </view>
-      </view>
-      <view class="payRight vipBtn" bindtap="toBuy" data-type="{{productVip.id}}">
-        {{vipTime?'立即续费':'立即开通'}}
-      </view>
-    </view>
-    <view class="pay buyPay">
-      <view class="payLeft">
-        {{productNum.title}}
-      </view>
-      <view class="payRight buyBtn" bindtap="toBuy" data-type="{{productNum.id}}">
-        立即购买
-      </view>
-    </view>
-  </view>
-  <!-- 剩余使用次数 -->
-  <view class="surplus">
-    <view class="title">剩余使用次数：</view>
-    <view class="num">{{userInfo.experienceAmount}}次</view>
-  </view>
-  <!-- 任务活动 -->
-  <view class="taskBox">
-    <view class="title">免费获取</view>
-    <view class="task">
-      <view class="taskLeft">
-        <image class="img" src="/static/task1.png" alt="" mode="" />
-        <view class="taskContent">
-          <view class="tcTitle">
-            {{tasks[0].title}}
-          </view>
-          <view class="tcNum">+{{tasks[0].award}}次</view>
+        <view class="pay buyPay">
+            <view class="payLeft">
+                {{productNum.title}}
+            </view>
+            <view class="payRight buyBtn" bindtap="toBuy" data-type="{{productNum.id}}">
+                立即购买
+            </view>
         </view>
-      </view>
-      <view class="taskRight {{tasks[0].completed?'taskRight-close':''}}" bindtap="submitTask"
-        data-type='{{tasks[0].id}}'>
-        {{tasks[0].completed?'已签到':'签到'}}</view>
     </view>
-    <view class="task">
-      <view class="taskLeft">
-        <image class="img" src="/static/task2.png" alt="" mode="" />
-        <view class="taskContent">
-          <view class="tcTitle">
-            {{tasks[1].title}}
-          </view>
-          <view class="tcNum">+{{tasks[1].award}}次/每位</view>
-        </view>
-      </view>
-      <button open-type="share" class="resetBtn taskRight">去邀请</button>
+    <!-- 剩余使用次数 -->
+    <view class="surplus">
+        <view class="title">剩余使用次数：</view>
+        <view class="num">{{userInfo.experienceAmount}}次</view>
     </view>
-    <view class="task advert">
-      <view class="taskLeft">
-        <image class="img" src="/static/task3.png" alt="" mode="" />
-        <view class="taskContent">
-          <view class="tcTitle">
-            {{tasks[2].title}}
-          </view>
-          <view class="tcNum">+{{tasks[2].award}}次/每条</view>
+    <!-- 任务活动 -->
+    <view class="taskBox">
+        <view class="title">免费获取</view>
+        <view class="task">
+            <view class="taskLeft">
+                <image class="img" src="/static/task1.png" alt="" mode="" />
+                <view class="taskContent">
+                    <view class="tcTitle">
+                        {{tasks[0].title}}
+                    </view>
+                    <view class="tcNum">+{{tasks[0].award}}次</view>
+                </view>
+            </view>
+            <view class="taskRight {{tasks[0].completed?'taskRight-close':''}}" bindtap="submitTask"
+                data-type='{{tasks[0].id}}'>
+                {{tasks[0].completed?'已签到':'签到'}}</view>
         </view>
-      </view>
-      <view class="taskRightBox">
-        <view class="taskRight {{tasks[2].completed?'taskRight-close':''}}" bindtap="rewardedVideo">去观看
+        <view class="task">
+            <view class="taskLeft">
+                <image class="img" src="/static/task2.png" alt="" mode="" />
+                <view class="taskContent">
+                    <view class="tcTitle">
+                        {{tasks[1].title}}
+                    </view>
+                    <view class="tcNum">+{{tasks[1].award}}次/每位</view>
+                </view>
+            </view>
+            <button open-type="share" class="resetBtn taskRight">去邀请</button>
         </view>
-        <view class="taskSurplus">
-          今日剩余{{tasks[2].num-tasks[2].completedNum}}次
+        <view class="task advert">
+            <view class="taskLeft">
+                <image class="img" src="/static/task3.png" alt="" mode="" />
+                <view class="taskContent">
+                    <view class="tcTitle">
+                        {{tasks[2].title}}
+                    </view>
+                    <view class="tcNum">+{{tasks[2].award}}次/每条</view>
+                </view>
+            </view>
+            <view class="taskRightBox">
+                <view class="taskRight {{tasks[2].completed?'taskRight-close':''}}" bindtap="rewardedVideo">去观看
+                </view>
+                <view class="taskSurplus">
+                    今日剩余{{tasks[2].num-tasks[2].completedNum}}次
+                </view>
+            </view>
         </view>
-      </view>
     </view>
-  </view>
 </view>
 <!-- 广告组件 -->
 <rewardedVideo id='advert' bind:taskOver="setUserInfo" />

pages/my/index.wxss

@@ -9,12 +9,26 @@
   padding: 20rpx 12rpx 0rpx;
   border-radius: 20rpx;
 }
-.container .userBox .avatar {
-  width: 152rpx;
-  height: 152rpx;
+.container .userBox .identity {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.container .userBox .identity .avatar {
+  width: 106rpx;
+  height: 106rpx;
   border-radius: 50%;
   position: relative;
 }
+.container .userBox .identity .identityText {
+  width: 80rpx;
+  margin-top: 6rpx;
+  font-size: 24rpx;
+  color: white;
+  background-color: #10CA61;
+  border-radius: 25rpx;
+}
 .container .userBox .userRight {
   flex: 1;
   margin-left: 30rpx;

pages/notice/index.js

@@ -0,0 +1,66 @@
+// pages/notice/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/notice/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/notice/index.wxml

@@ -0,0 +1,2 @@
+<!--pages/notice/index.wxml-->
+<text>pages/notice/index.wxml</text>

pages/notice/index.wxss

@@ -0,0 +1 @@
+/* pages/notice/index.wxss */

utils/filter.wxs

@@ -1,60 +1,62 @@
 var formatNumber = function (n) {
-  n = n.toString()
-  return n[1] ? n : '0' + n
+    n = n.toString()
+    return n[1] ? n : '0' + n
 }
 /**
  * 将时间戳(1570550400)格式转为 yyyy-MM-dd格式
  */
 //时间戳转时间
 function formatDate(time, flag) {
-  var time = time * 1
-  var t = getDate(time);
-  console.log(t, time, 'zzz');
-  var tf = function (i) {
-    return (i < 10 ? '0' : '') + i
-  };
-  var year = t.getFullYear();
-  var month = tf(t.getMonth() + 1);
-  var day = tf(t.getDate());
-  var hour = tf(t.getHours());
-  var minute = tf(t.getMinutes());
-  if (flag == 1) {
-    return month + '月' + day + '日' + ' ' + hour + ':' + minute;
-  } else if (flag == 2) {
-    return year + '-' + month + '-' + day
-  } else if (flag == 3) {
-    return month + '-' + day + ' ' + hour + ':' + minute;
-  } else if (flag == 4) {
-    return year + '年' + month + '月' + day + '日';
-  } else if (flag == 5) {
-    return day.toString().substring(1, 2)
-  } else if (flag == 6) {
-    return month + '.' + day;
-  }
+    if (!time) {
+        return
+    }
+    var time = time * 1
+    var t = getDate(time);
+    var tf = function (i) {
+        return (i < 10 ? '0' : '') + i
+    };
+    var year = t.getFullYear();
+    var month = tf(t.getMonth() + 1);
+    var day = tf(t.getDate());
+    var hour = tf(t.getHours());
+    var minute = tf(t.getMinutes());
+    if (flag == 1) {
+        return month + '月' + day + '日' + ' ' + hour + ':' + minute;
+    } else if (flag == 2) {
+        return year + '-' + month + '-' + day
+    } else if (flag == 3) {
+        return month + '-' + day + ' ' + hour + ':' + minute;
+    } else if (flag == 4) {
+        return year + '年' + month + '月' + day + '日';
+    } else if (flag == 5) {
+        return day.toString().substring(1, 2)
+    } else if (flag == 6) {
+        return month + '.' + day;
+    }
 }
 
 function gradeFilter(grade) {
-  if (!grade) {
-    return '暂无'
-  }
-  var gradeObj = {
-    "PRIMARY_FIRST_GRADE": "一年级",
-    "PRIMARY_SECOND_GRADE": "二年级",
-    "PRIMARY_THREE_GRADE": "三年级",
-    "PRIMARY_SENIOR_GRADE": "四年级",
-    "PRESCHOOL": "学前班",
-  }
-  return gradeObj[grade]
+    if (!grade) {
+        return '暂无'
+    }
+    var gradeObj = {
+        "PRIMARY_FIRST_GRADE": "一年级",
+        "PRIMARY_SECOND_GRADE": "二年级",
+        "PRIMARY_THREE_GRADE": "三年级",
+        "PRIMARY_SENIOR_GRADE": "四年级",
+        "PRESCHOOL": "学前班",
+    }
+    return gradeObj[grade]
 }
 // 数字满万补w
 function numFilter(num) {
-  if (!num || num < 10000) {
-    return num
-  }
-  return Math.floor(num / 100) / 100 + 'w'
+    if (!num || num < 10000) {
+        return num
+    }
+    return Math.floor(num / 100) / 100 + 'w'
 }
 module.exports = {
-  formatDate: formatDate,
-  gradeFilter: gradeFilter,
-  numFilter: numFilter
+    formatDate: formatDate,
+    gradeFilter: gradeFilter,
+    numFilter: numFilter
 }