edit pages

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;
+}