528

app.json

@@ -3,6 +3,7 @@
     "pages/index/index",
     "pages/main/class/class",
     "pages/main/reading/reading",
+    "pages/social/works/works",
     "pages/user/myEdit/myEdit"
   ],
   "window": {

app.wxss

@@ -7,5 +7,5 @@
   justify-content: space-between;
   padding: 80rpx 0;
   box-sizing: border-box;
-  background: #f0f1f5
+  /* background: #f0f1f5 */
 } 

component/group/group.js

@@ -0,0 +1,9 @@
+export const groupInit =  (that) => {
+    that.setData({
+      groupData: {
+        title: '关注'
+      }
+    })
+    //请求数据封装
+  
+  }

component/group/group.wxml

@@ -0,0 +1,3 @@
+<template name="group">
+  <view> group 热团 </view>
+</template>

component/hot/hot.js

@@ -1,48 +1,48 @@
 export const hotInit = (that) => {
   that.setData({
-    hotData: {
-      title: '热门',
-      imgUrls: [
-        'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
-        'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
-        'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
-      ],
-      indicatorDots: true,
-      autoplay: true,
-      interval: 5000,
-      duration: 700,
-      circular: true,
-      hotWareCardFirst: 'hotWareCardFirst',
-      hotWareCard: 'hotWareCard',
-      hotSearch: '鹅鹅鹅',
-      wareCards: [
-        {
-          title: "铺满金色巴掌的水泥道",
-          grade: "一年级 上学期",
-          img: "../../static/image/timg.jpg",
-          plays: "1",
-          likes: "2",
-          classId: "1"
-        },
-        {
-          title: "铺满金色巴掌的水泥道",
-          grade: "一年级 上学期",
-          img: "../../static/image/timg.jpg",
-          plays: "12345",
-          likes: "54321",
-          classId: "2"
-        },
-        {
-          title: "铺满金色巴掌的水泥道",
-          grade: "一年级 上学期",
-          img: "../../static/image/timg.jpg",
-          plays: "12345",
-          likes: "54321",
-          classId: "2"
-        },
-      ]
-    }
-  }),
+      hotData: {
+        title: '热门',
+        imgUrls: [
+          'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
+          'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
+          'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
+        ],
+        indicatorDots: true,
+        autoplay: true,
+        interval: 5000,
+        duration: 700,
+        circular: true,
+        hotWareCardFirst: 'hotWareCardFirst',
+        hotWareCard : 'hotWareCard',
+        hotSearch: '鹅鹅鹅',
+        wareCards:[
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "1",
+            likes: "2",
+            classId: "1"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321",
+            classId: "2"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321",
+            classId: "2"
+          },
+        ]
+      }
+    }),
     // 搜索方法
     that.searchHandler = () => {
       console.log('搜索按钮')
@@ -55,12 +55,20 @@ export const hotInit = (that) => {
       });
       console.log(that.data.hotInput)
     }
-  // 打开课程页面
-  that.openClass = (e) => {
-    let classId = e.currentTarget.dataset.classid;
-    let title = e.currentTarget.dataset.title;
-    wx.navigateTo({
-      url: `../social/works/works?id=${classId}&title=${title}`
-    })
-  }
+    // 打开课程页面
+    that.openClass = (e) =>{
+      let classId = e.currentTarget.dataset.classid;
+      let title = e.currentTarget.dataset.title;
+      wx.navigateTo({
+        url: `../main/class/class?id=${classId}&title=${title}`
+      })
+    }
+    // 打开用户作品页面
+    that.openWorks = (e) =>{
+      let classId = e.currentTarget.dataset.classid;
+      let title = e.currentTarget.dataset.title;
+      wx.navigateTo({
+        url: `../social/works/works?id=${classId}&title=${title}`
+      })
+    }
 }

component/hot/hot.wxml

@@ -15,12 +15,12 @@
     </view>
     <view class="hotSection">
         <view class="title">
-            <image src="../../static/image/hot_recommand.png" alt="" />
-            <text>热门推荐</text>
+            <image src="../../static/image/hot_recommend.png" alt="" />
+            <text>人气推荐</text>
         </view>
         <view class="hotWares" style="flex-direction:row;">
-            <view wx:for="{{hotData.wareCards}}" wx:key="{{index}}" class="{{index === 0 ? hotData.hotWareCardFirst: hotData.hotWareCard}}" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
-                <image class="wareCardImg" src="{{item.img}}" />
+            <view wx:for="{{hotData.wareCards}}" wx:key="{{index}}" class="hotWareCard" bindtap="openWorks" data-classId="{{item.classId}}" data-title="{{item.title}}">
+                <!-- <image class="wareCardImg" src="{{item.img}}" />
                 <view wx:if="{{index===0}}" class="wrapper">
                     <text class="wareCardTitle">{{item.title}}</text>
                     <view class="bottomData">
@@ -48,8 +48,57 @@
                             <text>{{item.likes}}</text>
                         </view>
                     </view>
+                </view> -->
+                <image class="wareCardImg" src="{{item.img}}" />
+                <text class="wareCardTitle">{{item.title}}</text>
+                <view class="bottomData">
+                    <text class="wareCardTip">{{item.grade}}</text>
+                    <view class="wareCardPlays">
+                        <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
+                        <text>{{item.plays}}</text>
+                    </view>
+                    <view class="wareCardLikes">
+                        <image class="wareCardLikesImg" src="../../static/image/like.png" />
+                        <text>{{item.likes}}</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    
+    </view>
+
+    <view class="hotSection">
+        <view class="title">
+            <image class="recommendTag" src="../../static/image/class_recommend.png" alt="" />
+            <text>本周课程推荐</text>
+        </view>
+        <view class="hotWares" style="flex-direction:row;">
+            <view wx:for="{{hotData.wareCards}}" wx:key="{{index}}" class="hotWareCard" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
+                <image class="wareCardImg" src="{{item.img}}" />
+                <text class="wareCardTitle">{{item.title}}</text>
+                <view class="bottomData">
+                    <text class="wareCardTip">{{item.grade}}</text>
+                    <view class="wareCardPlays">
+                        <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
+                        <text>{{item.plays}}</text>
+                    </view>
+                </view>
+                <view wx:if="{{index!==0}}">
+                    <text class="wareCardTitle">{{item.title}}</text>
+                    <text class="wareCardTip">{{item.grade}}</text>
+                    <view class="bottomData">
+                        <view class="wareCardPlays">
+                            <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
+                            <text>{{item.plays}}</text>
+                        </view>
+                        <view class="wareCardLikes">
+                            <image class="wareCardLikesImg" src="../../static/image/like.png" />
+                            <text>{{item.likes}}</text>
+                        </view>
+                    </view>
                 </view>
             </view>
         </view>
+    
     </view>
 </template>

component/hot/hot.wxss

@@ -62,28 +62,35 @@ swiper {
     width: 100%;
     /* height: 50rpx; */
     background: #fff;
-    margin-top: 8rpx;
+    margin-top: 10rpx;
 }
 
 .hotSection .title {
     display: flex;
     align-items: center;
-    margin: 20rpx 0 20rpx 20rpx;
+    margin: 8rpx 20rpx 20rpx 8rpx;
 }
 
 .hotSection .title image {
-    /* margin-left: 24rpx; */
-    width: 34rpx;
-    height: 38rpx;
+    width: 54rpx;
+    height: 60rpx;
+    margin-left: 14rpx;
+}
+
+.hotSection .title .recommendTag {
+    width: 38rpx;
+    height: 34rpx;
 }
+
 .hotSection .title text {
-    width: 112rpx;
+    width: 224rpx;
+    letter-spacing: 4rpx;
     height: 40rpx;
     margin-left: 12rpx;
-    font-size: 28rpx;
-    line-height: 50rpx;
+    font-size: 32rpx;
+    line-height: 40rpx;
     font-family: PingFangSC-regular;
-    color: #101010
+    color: #414141;
 }
 
 .hotWares {
@@ -94,79 +101,162 @@ swiper {
 .hotSection .hotWares .hotWareCard {
     position: relative;
     overflow: hidden;
-    width: 352rpx;
-    height: 322rpx;
-    margin: 0 0 18rpx 16rpx;
-    box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28);
+    width: 704rpx;
+    height: 402rpx;
+    /* margin: 0 0 18rpx 16rpx; */
+    margin: 0 auto 20rpx;
+    /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */
 }
 
 
 
 .hotWareCard .wareCardImg {
     width: 100%;
-    height: 200rpx;
+    height: 290rpx;
+    border-radius: 20rpx;
 }
 
 
 
 .hotWareCard .wareCardTitle {
-    margin: 0 auto;
-    width: 320rpx;
+    /* margin: 0 auto; */
+    width: 100%;
     height: 46rpx;
     display: block;
-    text-align: center;
-    color: rgba(16, 16, 16, 1);
+    /* text-align: left; */
+    color: #414141;
     font-size: 32rpx;
+    letter-spacing: 4rpx;
+    font-family: MicrosoftYaHei;
+}
+.hotWareCard .bottomData {
+    height: 34rpx;
+    margin-top: 10rpx;
+    display: flex;
+    /* flex-direction: row; */
+    justify-content: space-between;
+    align-items: center;
 }
 
+.hotWareCard .bottomData .wareCardPlays {
+    width: 100rpx;
+    margin-left: 270rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
 
+.hotWareCard .wareCardTip {
 
+    width: 178rpx;
+    height: 40rpx;
+    display: block;
+    text-align: center;
+    color: #414141;
+    font-size: 24rpx;
+}
 
+.hotWareCard .wareCardPlays .wareCardPlaysImg {
+    width: 30rpx;
+    height: 30rpx;
+}
 
-.hotWareCard .wareCardTip {
+.hotWareCard .wareCardPlays text {
+    margin-left: 4rpx;
+    color: #61CA54;
+    font-size: 24rpx;
+}
+
+.hotWareCard .wareCardLikes {
+    width: 100rpx;
+    margin-right: 18rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.hotWareCard .wareCardLikes .wareCardLikesImg {
+    width: 30rpx;
+    height: 30rpx;
+}
+
+.hotWareCard .wareCardLikes text {
+    margin-left: 4rpx;
+    color: #FF9800;
+    font-size: 24rpx;
+}
+
+/** 第一个大图**/
+.hotSection .hotWares .hotWareCardFirst {
+    position: relative;
+    overflow: hidden;
+    width: 740rpx;
+    height: 342rpx;
+    margin: 10rpx auto 20rpx;
+    box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28);
+}
+
+.hotWareCardFirst .wareCardImg {
+    width: 100%;
+    height: 100%;
+}
+
+.hotWareCardFirst .wrapper {
+    width: 100%;
+    height: 100rpx;
+    background: #fff;
     position: absolute;
-    top: 10rpx;
-    left: 4rpx;
-    z-index: 2;
+    bottom: 0;
+}
+
+.hotWareCardFirst .wareCardTitle {
+    margin: 10rpx 20rpx 0;
+    display: block;
+    /* text-align: center; */
+    color: rgba(16, 16, 16, 1);
+    font-size: 32rpx;
+}
+
+.hotWareCardFirst .wareCardTip {
+    margin: 0 20rpx;
     width: 178rpx;
-    height: 40rpx;
+    height: 34rpx;
     display: block;
     text-align: center;
     color: rgba(16, 16, 16, 1);
     font-size: 28rpx;
 }
 
-
-
-.hotWareCard .bottomData {
+.hotWareCardFirst .bottomData {
+    width: 100%;
     height: 34rpx;
-    margin-top: 10rpx;
+    margin-top: 5rpx;
     display: flex;
-    /* flex-direction: row; */
+    flex-direction: row;
     justify-content: space-between;
     align-items: center;
 }
 
-.hotWareCard .wareCardPlays {
+.hotWareCardFirst .wareCardPlays {
     width: 100rpx;
-    margin-left: 18rpx;
+    margin-left: 230rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
 }
 
-.hotWareCard .wareCardPlays .wareCardPlaysImg {
+.hotWareCardFirst .wareCardPlays .wareCardPlaysImg {
     width: 30rpx;
     height: 30rpx;
 }
 
-.hotWareCard .wareCardPlays text {
+.hotWareCardFirst .wareCardPlays text {
     margin-left: 4rpx;
     color: #61CA54;
     font-size: 24rpx;
 }
 
-.hotWareCard .wareCardLikes {
+.hotWareCardFirst .wareCardLikes {
     width: 100rpx;
     margin-right: 18rpx;
     display: flex;
@@ -174,12 +264,12 @@ swiper {
     align-items: center;
 }
 
-.hotWareCard .wareCardLikes .wareCardLikesImg {
+.hotWareCardFirst .wareCardLikes .wareCardLikesImg {
     width: 30rpx;
     height: 30rpx;
 }
 
-.hotWareCard .wareCardLikes text {
+.hotWareCardFirst .wareCardLikes text {
     margin-left: 4rpx;
     color: #FF9800;
     font-size: 24rpx;

component/my/my.wxml

@@ -1,5 +1,5 @@
 <template name="my">
-  <view class='container'> 
+  <view class='containers'> 
     <view class='mine-top' bindtap='toAttentionMe'>
       <view class='avatar-box'>
         <image src="{{ myData.imgUrl }}" background-size="cover"></image>

component/my/my.wxss

@@ -1,3 +1,7 @@
+.containers{
+  padding-top: 0;
+}
+
 .mine-top{
   margin-top: 16rpx;
   position: relative;

pages/index/index.js

@@ -1,6 +1,7 @@
 //index.js
 //获取应用实例
 const app = getApp()
+import { groupInit } from '../../component/group/group';
 import { hotInit } from '../../component/hot/hot';
 import { myInit } from '../../component/my/my';
 import { followInit } from '../../component/follow/follow';
@@ -11,7 +12,11 @@ Page({
   data: {
     tab:[
       {
-        name: '热门',
+        name: '热团',
+        templates: 'group',
+      }, 
+      {
+        name: '推荐',
         templates: 'hot',
       },  
       {
@@ -23,7 +28,7 @@ Page({
         templates: 'my',
       }
     ],
-    myIndex: 0,
+    myIndex: 1,
     templates: 'hot',
     title:'index中的title',
     jurisdictionFlag: true,
@@ -43,12 +48,15 @@ Page({
       templates
     });
     if (myIndex == 0) {
-      hotInit(this);
+      groupInit(this);
     }
     if (myIndex == 1) {
-      followInit(this);
+      hotInit(this);
     }
     if (myIndex == 2) {
+      followInit(this);
+    }
+    if (myIndex == 3) {
       myInit(this);
     }
   },

pages/index/index.wxml

@@ -1,11 +1,12 @@
 <!-- index.wxml -->
 <view class="container">
   <!-- 引入组件 -->
+  <import src="/component/group/group.wxml" />
   <import src="/component/hot/hot.wxml" />
   <import src="/component/follow/follow.wxml" />
   <import src="/component/my/my.wxml" />
   <!-- 调用组件 -->
-  <template is="{{templates}}" data="{{hotData: hotData, followData: followData, myData: myData}}"></template>
+  <template is="{{templates}}" data="{{groupData: groupData, hotData: hotData, followData: followData, myData: myData}}"></template>
   <!-- 顶部导航 -->
   <view class="top-tab">
     <block wx:for="{{tab}}" wx:key="{{index}}">

pages/index/index.wxss

@@ -5,6 +5,9 @@
 /* @import "/component/search/search.wxss"; */
 /*我的*/
 @import "/component/my/my.wxss";
+.container{
+  background: rgba(240,241,245,1);
+}
 .template {
   height: 100%;
 }
@@ -22,6 +25,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 15rpx;
 }
 
 .tabbar {
@@ -31,14 +35,15 @@
   align-items: center;
   width: 125rpx;
   height: 60rpx;
-  font-size: 32rpx;
+  font-size: 36rpx;
   border-radius: 100rpx;
   background: #fff;
 }
 
 .select {
-  background: #61ca54;
-  color: #fff;
+  color: #000;
+  font-size: 40rpx;
+  font-family: SourceHanSansSC-bold;
 }
 
 .bottom-tab image {

pages/social/works/works.js

@@ -0,0 +1,55 @@
+Page({
+    data: {
+        fullScreenBtn: false,
+        playBtn: false,
+        gesture: true,
+        user: [{
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            }
+        ]
+    },
+    onLoad: function (option) {
+        if (option.title) {
+            wx.setNavigationBarTitle({
+                title: option.title //页面标题为路由参数
+            })
+            this.setData({
+                title: option.title,
+                id: option.id
+            })
+        }
+    },
+
+    goToReading: function () {
+        let id = this.data.id;
+        let title = this.data.title;
+        wx.navigateTo({
+            url: `../../main/reading/reading?id=${id}&title=${title}`
+        })
+    }
+})

pages/social/works/works.json

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

pages/social/works/works.wxml

@@ -0,0 +1,63 @@
+<view>
+    用户作品
+    <video class="videoSection" src="http://efunvideo.ai160.com/vs2m/001/00103075/00103075012/00103075012.m3u8" controls show-fullscreen-btn="{{fullScreenBtn}}" show-play-btn="{{playBtn}}"></video>
+    <view class="readAuthorSection">
+        <image class="avatar" src="../../../static/image/timg.jpg" />
+        <text class="nickName">萝莉小猫咪</text>
+        <view class="like">
+            <image src="../../../static/image/liked.png" />
+            <text class="likeBtn">点赞</text>
+        </view>
+        <view class="follow">
+            <text class="followBtn">关注</text>
+        </view>
+    </view>
+    <view class="userSection">
+        <view class="title">共有12345人完成了录音</view>
+        <view class="avatarRow">
+            <view class="userItem" wx:for="{{user}}" wx:key="{{index}}">
+                <image src="{{item.image}}" />
+                <text class="nickName">{{item.nickName}}</text>
+            </view>
+        </view>
+    </view>
+    <view class="commentSection">
+        <view class="title">
+            评论（38）
+        </view>
+        <input class="commentInput"  placeholder="听了这么多，说点什么吧"/>
+        <view class="commentArea">
+            <view class="commentItem">
+                <iamge class="avatar" />
+                <text class="nickName"></text>
+                <text class="time"></text>
+                <text class="gut"></text>
+                <view class="commentBtn">
+                    <image class="" />
+                    <text >评论</text>
+                </view>
+                <view class="likes">
+                    <image class="" />
+                    <text >165</text>
+                </view>
+                <view class="commentAll">
+                    共有123条评论
+                </view>
+            </view>
+        </view>
+    </view>
+    <view class="footSection">
+        <view class="collectBtn footerBtn">
+            <image src="../../../static/image/hot_recommand.png" />
+            <text>收藏</text>
+        </view>
+        <view class="readingBtn footerBtn" bindtap="goToReading">
+            <image src="../../../static/image/hot_recommand.png" />
+            <text>我要朗读</text>
+        </view>
+        <view class="shareBtn footerBtn">
+            <image src="../../../static/image/hot_recommand.png" />
+            <text>分享</text>
+        </view>
+    </view>
+</view>

pages/social/works/works.wxss

@@ -0,0 +1,124 @@
+.videoSection{
+    width: 750rpx;
+    height: 428rpx;
+}
+.readAuthorSection{
+    width: 100%;
+    height: 152rpx;
+    display: flex;
+    /* justify-items: center; */
+    align-items: center
+    
+}
+.readAuthorSection .avatar{
+    width: 108rpx;
+    height: 108rpx;
+    border-radius: 50%;
+    margin-left: 22rpx;
+}
+.readAuthorSection .nickName{
+    margin-left: 8rpx;
+    width: 160rpx;
+    height: 46rpx;
+    font-size: 32rpx;
+    color: #101010;
+
+}
+.readAuthorSection .like{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 90rpx;
+    width: 160rpx;
+    height: 60rpx;
+    border: 2rpx solid rgba(255,152,0,1);
+    font-size: 28rpx;
+    border-radius: 30rpx;
+    text-align: center;
+    /* line-height: 60rpx; */
+    color: #ff9800;
+}
+.readAuthorSection .like image{
+    width: 36rpx;
+    height: 36rpx;
+    margin-right: 15rpx;
+
+}
+.readAuthorSection .follow{
+    margin-left: 12rpx;
+    width: 160rpx;
+    height: 60rpx;
+    border: 2rpx solid #259b24;
+    font-size: 28rpx;
+    border-radius: 30rpx;
+    text-align: center;
+    line-height: 60rpx;
+    color: #259b24;
+}
+.userSection{
+    width: 100%;
+    height: 196rpx;
+}
+.userSection .title{
+    
+}
+.userSection .avatarRow{
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+.userSection .avatarRow .userItem{
+    margin-right: 20rpx;
+}
+.avatarRow .userItem image {
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 50%;
+}
+.avatarRow .userItem .nickName {
+    width: 100rpx;
+    height: 20rpx;
+    color: #101010;
+    font-size: 24rpx;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+.commentSection{
+
+}
+.commentSection .title{
+
+}
+.commentSection .commentInput{
+
+}
+.commentSection .commentArea{
+    
+}
+
+.footSection{
+    width: 750rpx;
+    height: 124rpx;
+    position: fixed;
+    bottom: 0;
+    background: #aaa;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.readingBtn{
+    width: 148rpx;
+    height: 148rpx;
+    border-radius: 50%;
+    background: #aaa;
+}
+.footerBtn{
+    display: flex;
+    flex-direction: column;
+}
+.footerBtn image{
+    width: 48rpx;    
+    height: 48rpx;
+}

pages/user/myEdit/myEdit.js

@@ -4,9 +4,29 @@ 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
+    })
   },
-
   /**
    * 生命周期函数--监听页面加载
    */
@@ -18,7 +38,7 @@ Page({
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {
-    
+     
   },
 
   /**

pages/user/myEdit/myEdit.wxml

@@ -1,5 +1,45 @@
 <view class='container'>
-  <form>
-    
+  <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

@@ -1,4 +1,139 @@
+page{
+  background: #F7F7F7;
+}
 .container{
+  padding: 0;
+}
+
+.nickname-box{
+  position: relative;
   width: 750rpx;
-  height: 428rpx;
-}
+  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

@@ -13,7 +13,7 @@
 	"compileType": "miniprogram",
 	"libVersion": "2.3.0",
 	"appid": "wx8961a3e5512f307c",
-	"projectname": "reading",
+	"projectname": "reader",
 	"debugOptions": {
 		"hidedInDevtools": []
 	},