add a dialog component

1 year ago · 80ee48d8ba
parent 3b82cb9c2f
commit 80ee48d8ba
11 changed files with 184 additions and 50 deletions
--- a/src/miniprogram/app.js
+++ b/src/miniprogram/app.js
@ -14,6 +14,8 @@ App({
      });
    }

-    this.globalData = {};
+    this.globalData = {
+      // OPENID: wx.cloud.getWXContext().OPENID
+    };
  }
 });
--- a/src/miniprogram/app.json
+++ b/src/miniprogram/app.json
@ -1,40 +1,40 @@
-{
-  "pages": [
-    "pages/MainTest/MainTest",
-    "pages/Msg/msg",
-    "pages/Profile/profile",
-    "pages/Tprofile/Tprofile",
-    "pages/Comments/Comments"
-  ],
-  "window": {
-    "backgroundColor": "#FFF",
-    "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#FFF",
-    "navigationBarTitleText": "家教帮",
-    "navigationBarTextStyle": "black"
-  },
-  "tabBar": {
-    "list": [
-      {
-        "pagePath": "pages/MainTest/MainTest",
-        "text": "main",
-        "iconPath": "images/main.png",
-        "selectedIconPath": "images/main_on.png"
-      },
-      {
-        "pagePath": "pages/Msg/msg",
-        "text": "msg",
-        "iconPath": "images/msg.png",
-        "selectedIconPath": "images/msg_on.png"
-      },
-      {
-        "pagePath": "pages/Profile/profile",
-        "text": "profile",
-        "iconPath": "images/profile.png",
-        "selectedIconPath": "images/profile_on.png"
-      }
-    ]
-  },
-  "sitemapLocation": "sitemap.json",
-  "style": "v2"
+{
+  "pages": [
+    "pages/MainTest/MainTest",
+    "pages/Msg/msg",
+    "pages/Profile/profile",
+    "pages/Tprofile/Tprofile",
+    "pages/Comments/Comments"
+  ],
+  "window": {
+    "backgroundColor": "#FFF",
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#FFF",
+    "navigationBarTitleText": "家教帮",
+    "navigationBarTextStyle": "black"
+  },
+  "tabBar": {
+    "list": [
+      {
+        "pagePath": "pages/MainTest/MainTest",
+        "text": "main",
+        "iconPath": "images/main.png",
+        "selectedIconPath": "images/main_on.png"
+      },
+      {
+        "pagePath": "pages/Msg/msg",
+        "text": "msg",
+        "iconPath": "images/msg.png",
+        "selectedIconPath": "images/msg_on.png"
+      },
+      {
+        "pagePath": "pages/Profile/profile",
+        "text": "profile",
+        "iconPath": "images/profile.png",
+        "selectedIconPath": "images/profile_on.png"
+      }
+    ]
+  },
+  "sitemapLocation": "sitemap.json",
+  "style": "v2"
 }
--- a/src/miniprogram/components/dialog/dialog.js
+++ b/src/miniprogram/components/dialog/dialog.js
@ -0,0 +1,24 @@
+// components/dialog/dialog.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    showModal: true
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})
--- a/src/miniprogram/components/dialog/dialog.json
+++ b/src/miniprogram/components/dialog/dialog.json
@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
--- a/src/miniprogram/components/dialog/dialog.wxml
+++ b/src/miniprogram/components/dialog/dialog.wxml
@ -0,0 +1,13 @@
+<!--components/dialog/dialog.wxml-->
+<view class="container-view">
+  <view>主题内容</view>
+</view>
+<!--modal-->
+<!--弹窗-->
+<view>
+  <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}">
+    <view class="modal-dialog" wx:if="{{showModal}}">
+      <video src="https://res.wx.qq.com/wxaliveplayer/htdocs/video14e1eea.mov"></video>
+    </view>
+  </view>
+</view>
--- a/src/miniprogram/components/dialog/dialog.wxss
+++ b/src/miniprogram/components/dialog/dialog.wxss
@ -0,0 +1,41 @@
+/* components/dialog/dialog.wxss */
+.container-view {
+  width: 100vh;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-mask {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+.modal-dialog {
+  width: 80%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: fixed;
+  margin: 0 auto;
+  z-index: 9999;
+  background: #f9f9f9;
+  border-radius: 36rpx;
+}
+
+.container-view {
+  width: 100%;
+  height: 100%;
+}
--- a/src/miniprogram/pages/MainTest/MainTest.js
+++ b/src/miniprogram/pages/MainTest/MainTest.js
@ -1,4 +1,5 @@
 const that = this;
+const app = getApp();
 // pages/MainTest/MainTest.js
 Page({

@ -8,13 +9,27 @@ Page({
  data: {
    currentTab: 0,
    showPopup: false,
-    teacher: {}
+    teacher: {},
+    exist: false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
+    //检测用户是否注册过
+    wx.cloud.database()
+    .collection('user_Data')
+    .get({
+      success: (res) => {
+        var exist = (res.data.length>0)? true: false
+        this.setData({
+          exist
+        })
+        console.log(this.data.exist);
+      }
+    })
+  
    // 调用云函数获取教师信息
    wx.cloud.callFunction({
      name: "recommend",
--- a/src/miniprogram/pages/MainTest/MainTest.json
+++ b/src/miniprogram/pages/MainTest/MainTest.json
@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "dialog": "/components/dialog/dialog"
+  }
 }
--- a/src/miniprogram/pages/profile/profile.js
+++ b/src/miniprogram/pages/profile/profile.js
@ -1,13 +1,43 @@
 const db = wx.cloud.database().collection("user_Data");
+const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0' //默认头像地址

 Page({
  //页面数据
  data:{
-    avatarUrl: "cloud://cloud1-7gyjwcyfbdf819da.636c-cloud1-7gyjwcyfbdf819da-1321167991/1678762683308.png",
+    avatarUrl: defaultAvatarUrl,
    birthday: "",
    region:"",
  },

+  onLoad(options) {
+    //检测是否有头像缓存
+    try {
+      var avatarUrl = wx.getStorageSync('avatarUrl')
+      if (avatarUrl) {
+        this.setData({
+          avatarUrl
+        })
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  },
+
+  //选择头像后存储头像地址
+  onChooseAvatar(e) {
+    var { avatarUrl } = e.detail 
+    this.setData({
+      avatarUrl
+    })
+    // console.log(e.detail);
+    //存储头像地址到本地
+    try {
+      wx.setStorageSync('avatarUrl', avatarUrl)
+    } catch (e) {
+      console.log(e);
+    }
+  },
+
  //表单提交方法
  submit: function(e){
    console.log(e.detail.value);
--- a/src/miniprogram/pages/profile/profile.wxml
+++ b/src/miniprogram/pages/profile/profile.wxml
@ -1,12 +1,12 @@
 <view class="body">
  <view class="button-container" >
-    <button bindtap="navigateToPageTpro">Be a teacher</button>
-  </view>
-  
-  <view class="user-avatar">
-    <image src="{{avatarUrl}}" mode="aspectFill"/>
+    <button bindtap="navigateToPageTpro">去入驻</button>
  </view>

+  <button class="avatar-wrapper" hover-class="none" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+    <image class="avatar" src="{{avatarUrl}}"></image>
+  </button> 
+
  <form bindsubmit="submit">
      
    <view class="section">
--- a/src/miniprogram/pages/profile/profile.wxss
+++ b/src/miniprogram/pages/profile/profile.wxss
@ -7,16 +7,19 @@
 }

 /* 头像 */
-.user-avatar {
+.avatar-wrapper {
  display: flex;
  justify-content: center;
 }

 /* 子元素选择器 */
-.user-avatar > image {
+.avatar-wrapper > image {
  height: 100px;
  width: 100px;
  border-radius: 50%;
+  border-style: solid;
+  border-color: #000;
+  border-width: 1px;
 }

 .user-image {