首页

app.json

@@ -4,8 +4,8 @@
     "pages/social/works/works",
     "pages/main/class/class",
     "pages/main/books/books",
-    "pages/main/reading/reading"
-    
+    "pages/main/reading/reading",
+    "pages/user/myEdit/myEdit"
   ],
   "window": {
     "backgroundTextStyle": "light",

component/my/my.js

@@ -11,6 +11,10 @@ export const myInit =  (that) => {
         flowerNum: 56245
     }
   })
-  //请求数据封装
+  that.toAttentionMe = (e) => {
+    wx.navigateTo({
+      url: '../user/myEdit/myEdit'
+    })
+  }
 
 }

component/my/my.wxml

@@ -1,11 +1,14 @@
 <template name="my">
-  <view> 
-    <view class='mine-top'>
+  <view class='mine-container'>
+    
+  </view>
+  <!-- <view class='containers'> 
+    <view class='mine-top' bindtap='toAttentionMe'>
       <view class='avatar-box'>
         <image src="{{ myData.imgUrl }}" background-size="cover"></image>
       </view>
       <view class='mine-info'>
-        <view>用户昵称{{ myData.name }}</view>
+        <view>用户{{ myData.name }}</view>
         <view>{{ myData.address[0] }}，{{ myData.address[1] }}，{{ myData.address[2] }}</view>
       </view>
       <view class='edit'>
@@ -76,5 +79,5 @@
       </view>
       <view class='attention-me-detail'> > </view>
     </view>
-  </view>
+  </view> -->
 </template>

component/my/my.wxss

@@ -1,3 +1,22 @@
+.mine-container{
+  width: 750rpx;
+  height: 1116rpx;
+  background: #F0F1F5;
+  padding: 0 17rpx;
+}
+
+
+
+
+
+
+
+
+
+/* .containers{
+  padding-top: 0;
+}
+
 .mine-top{
   margin-top: 16rpx;
   position: relative;
@@ -142,4 +161,4 @@
   margin-right: 20rpx;
 }
 
-
+ */

pages/main/reading/reading.js

@@ -133,9 +133,8 @@ Page({
     //     })
     // },
    
-    videoComplete: function(res){
+    videoComplete: function(){
         let videoUrl = 'http://efunvideo.ai160.com/vs2m/001/00103075/00103075012/00103075012.m3u8';
-        console.log(res);
         this.setData({
             videoUrl: videoUrl,
             recordFlag: 1

pages/user/mine/mine.js

@@ -0,0 +1,84 @@
+// pages/user/mine/mine.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    imgUrl:'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18102320',
+    editUrl:'../../../static/image/white.png',
+    nickName:'凤姐',
+    editTitle: '修改资料',
+    address: ['北京市', '海淀区中关村三小']
+  },
+  editDetail: function(e){
+    let title = e.currentTarget.dataset.title;
+    console.log(title);
+    wx.navigateTo({
+      url: `../myEdit/myEdit?title=${title}`
+    });
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    console.log(options.title);
+    if (options.title) {
+      wx.setNavigationBarTitle({
+        title: options.title //页面标题为路由参数
+      });
+      this.setData({
+        title: options.title
+      });
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/user/mine/mine.json

@@ -0,0 +1 @@
+{}

pages/user/mine/mine.wxml

@@ -0,0 +1,22 @@
+<!--pages/user/mine/mine.wxml-->
+<view class='mine-container'>
+  <view class='mine-border-radius'></view>
+  <view class='caret-left'></view>
+  <view class='caret-right'></view>
+  <view class='mine-top'>
+    <view class='mine-circle'></view>
+    <view class='avatar-box'>
+      <image class='avatar-image' src="{{ imgUrl }}" background-size="cover"></image>
+    </view>
+    <view class='edit-detail' bindtap='editDetail' data-title='{{ editTitle }}'>
+      <view class='edit-box'>
+        <image class='edit-image' src='{{ editUrl }}'></image>
+      </view>
+      <text class='edit-text'>修改个人资料</text>
+    </view>
+    <view class='nick-name'>
+      <text class='text'>{{ nickName }}</text>
+    </view>
+    <view class='nick-address'>{{ address[0] }}，{{ address[1] }}</view>
+  </view>
+</view>

pages/user/mine/mine.wxss

@@ -0,0 +1,113 @@
+/* pages/user/mine/mine.wxss */
+.mine-container{
+  width: 750rpx;
+  height: 1280rpx;
+  background: #F0F1F5;
+  position: relative;
+}
+
+.mine-border-radius{
+  width: 750rpx;
+  height: 190rpx;
+  background: #61CA54;
+}
+
+.caret-left{
+  position: absolute;
+  left: 0;
+  top: 190rpx;
+  width: 0;
+  height: 0;
+  border: 17rpx solid transparent;
+  border-top-color: #61CA54;
+}
+
+.caret-right{
+  position: absolute;
+  right: 0;
+  top: 190rpx;
+  width: 0;
+  height: 0;
+  border: 17rpx solid transparent;
+  border-top-color: #61CA54;
+}
+
+.mine-top{
+  position: absolute;
+  top: 88rpx;
+  left: 17rpx;
+  width: 716rpx;
+  height: 344rpx;
+  border-radius: 20rpx;
+  background: #FFFFFF;
+}
+
+.mine-circle{
+  width: 152rpx;
+  height: 76rpx; 
+  background-color: #61CA54;
+  border-radius:0 0 76rpx 76rpx; /* 左上、右上、右下、左下 */
+  margin: 0 auto;
+}
+
+.avatar-box{
+  position: absolute;
+  left: 290rpx;
+  bottom: 274rpx;
+  width: 138rpx;
+  height: 138rpx;
+  border-radius: 50%;
+}
+
+.avatar-image{
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.edit-detail{
+  position: absolute;
+  top: 10rpx;
+  left: 430rpx;
+  width: 230rpx;
+  height: 50rpx;
+  display: flex;
+  align-items: flex-end;
+}
+
+.edit-box{
+  margin-left: 10rpx;
+  width: 46rpx;
+  height: 50rpx;
+}
+
+.edit-image{
+  width: 100%;
+  height: 100%;
+}
+
+.edit-text{
+  font-size: 24rpx;
+  color: #5E5E5E;
+  margin-left: 8rpx;
+}
+
+.nick-name{
+  width: 716rpx;
+  text-align: center;
+  line-height: 60rpx;
+}
+
+.nick-name>.text{
+  color: #000000;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.nick-address{
+  width: 716rpx;
+  line-height: 40rpx;
+  text-align: center;
+  font-size: 28rpx;
+  color: #4C4C4C;
+}

pages/user/myEdit/myEdit.js

@@ -0,0 +1,85 @@
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    items: [
+      { sex: '女', checked: 'true' },
+      { sex: '男' }
+    ],
+    checkbox:[
+      { occupation: '家长', checked: 'true' },
+      { occupation: '老师' },
+      { occupation: '学生' },
+    ],
+    region: ['北京市', '海淀区','清华大学']
+  },
+  radioChange: function(e){
+    console.log(e.detail.value);
+  },
+  formSubmit: function (e) {
+    console.log('form发生了submit事件，携带数据为：', e.detail.value)
+  },
+  bindRegionChange: function (e) {
+    console.log('picker发送选择改变，携带值为', e.detail.value)
+    this.setData({
+      region: e.detail.value
+    })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+     
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+    
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+    
+  }
+})

pages/user/myEdit/myEdit.json

@@ -0,0 +1 @@
+{}

pages/user/myEdit/myEdit.wxml

@@ -0,0 +1,45 @@
+<view class='container'>
+  <form bindsubmit="formSubmit">
+  <view class='nickname-box'>
+    <text class='text'>昵称</text>
+    <input class='nickname' type='text' placeholder='喔喔' placeholder-class='placeholderStyle'>
+    </input>
+    <image src='https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18102320' class='icon'></image>
+  </view>
+  <view class='sex-box'>
+    <text class='sex'>性别</text>
+    <radio-group class="radio-group" bindchange="radioChange">
+      <label class='radios' wx:for="{{ items }}" wx:key="{{ index }}">
+        <text>{{ item.sex }}</text>
+        <radio class='radio' value="{{ item.sex }}" checked="{{item.checked}}"/>
+      </label>
+    </radio-group>
+  </view>
+  <view class='birthday-box'>
+    <text class='birthday'>生日</text>
+    <view class='date'>2001年12月12日</view>
+  </view>
+  <view class='occupation-box'>
+    <radio-group class="radio-groups" bindchange="checkboxChange">
+      <text class='occupation'>职业</text>
+      <label class="checkbox" wx:for="{{ checkbox }}" wx:key="{{ index }}">
+        <text>{{ item.occupation }}</text>
+        <radio value="{{ item.occupation }}" checked="{{item.checked}}"/>
+      </label>
+    </radio-group>
+  </view>
+  <view class='school-box'>
+    <text class='sex'>学校</text>
+    <view class="address-box">
+      <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
+      <view class="picker">
+        当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
+      </view>
+    </picker>
+    </view>
+  </view>
+   <view class="submit-btn">
+    <button class='btn' formType="submit">完成</button>
+  </view>
+  </form>
+</view>

pages/user/myEdit/myEdit.wxss

@@ -0,0 +1,139 @@
+page{
+  background: #F7F7F7;
+}
+.container{
+  padding: 0;
+}
+
+.nickname-box{
+  position: relative;
+  width: 750rpx;
+  line-height: 80rpx;
+  display: flex;
+  align-items: center;
+  background: #FFFFFF;
+}
+
+.nickname-box .text{
+  margin-left: 26rpx;
+  width: 100rpx;
+  height: 80rpx;
+  font-size: 28rpx;
+}
+
+.nickname{
+  width: 100%;
+  height: 40rpx;
+}
+
+.placeholderStyle{
+  font-size: 28rpx;
+}
+
+.icon{
+  width: 34rpx;
+  height: 34rpx;
+  position: absolute;
+  left: 210rpx;
+  top: 20rpx;
+}
+
+.sex-box{
+  margin-top: 4rpx;
+  width: 750rpx;
+  line-height: 80rpx;
+  display: flex;
+  background: #FFFFFF;
+  font-size: 28rpx;
+}
+
+.sex-box .sex{
+  margin-left: 26rpx;
+}
+
+.radio-group{
+  margin-left: 26rpx; 
+}
+
+.radios{
+  margin-left: 26rpx;
+}
+
+/* .sex-box .radio{
+  width: 34rpx;
+  height: 34rpx;
+  border: 2rpx solid #8BC34A;
+} */
+
+radio{
+  transform:scale(0.6);
+}
+
+.birthday-box{
+  margin-top: 4rpx;
+  width: 750rpx;
+  line-height: 80rpx;
+  display: flex;
+  background: #FFFFFF;
+  font-size: 28rpx;
+}
+
+.birthday-box .birthday{
+  margin-left: 26rpx;
+}
+
+.date{
+  margin-left: 26rpx;
+}
+
+/* .picker{
+  width: 500rpx;
+  background: red;
+} */
+
+.occupation-box{
+  margin-top: 4rpx;
+  width: 750rpx;
+  line-height: 80rpx;
+  display: flex;
+  background: #FFFFFF;
+  font-size: 28rpx;
+}
+
+.occupation-box .occupation{
+  margin-left: 26rpx;
+}
+
+.checkbox{
+  margin-left: 26rpx;
+}
+
+.school-box{
+  margin-top: 4rpx;
+  width: 750rpx;
+  line-height: 80rpx;
+  display: flex;
+  background: #FFFFFF;
+  font-size: 28rpx;
+}
+
+.submit-btn{
+  margin-top: 534rpx;
+  width: 750rpx;
+  height: 200rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn{
+  font-size: 28rpx;
+  color: #FFFFFF;
+  width: 694rpx;
+  height: 100rpx;
+  line-height: 100rpx;
+  background: #259B24;
+}
+
+
+

project.config.json

@@ -27,13 +27,30 @@
 			"current": -1,
 			"list": []
 		},
+		"plugin": {
+			"current": -1,
+			"list": []
+		},
 		"game": {
 			"currentL": -1,
 			"list": []
 		},
 		"miniprogram": {
-			"current": -1,
-			"list": []
+			"current": 1,
+			"list": [
+				{
+					"id": 0,
+					"name": "edit",
+					"pathName": "pages/user/myEdit/myEdit",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "edit",
+					"pathName": "pages/user/myEdit/myEdit",
+					"query": ""
+				}
+			]
 		}
 	}
 }