From 8a117b9dcb868eb0214a551bf4e7f7d9a8a72be4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B8=A9=E9=9B=8D=E6=95=AC?= <2622604517@qq.com> Date: Tue, 26 Sep 2023 22:11:59 +0800 Subject: [PATCH] program --- src/miniprogram/pages/msg 1/msg 1.js | 359 +++++++++++++++++++++ src/miniprogram/pages/msg 1/msg 1.json | 6 + src/miniprogram/pages/msg 1/msg 1.wxml | 3 + src/miniprogram/pages/msg 1/msg 1.wxss | 312 ++++++++++++++++++ src/miniprogram/pages/msg 2/msg 2.js | 212 ++++++++++++ src/miniprogram/pages/msg 2/msg 2.json | 6 + src/miniprogram/pages/msg 2/msg 2.wxml | 28 ++ src/miniprogram/pages/msg 2/msg 2.wxss | 121 +++++++ src/miniprogram/pages/msg/msg.js | 33 ++ src/miniprogram/pages/msg/msg.json | 6 + src/miniprogram/pages/msg/msg.wxml | 6 + src/miniprogram/pages/msg/msg.wxss | 58 ++++ src/miniprogram/pages/profile/profile.js | 22 ++ src/miniprogram/pages/profile/profile.json | 5 + src/miniprogram/pages/profile/profile.wxml | 66 ++++ src/miniprogram/pages/profile/profile.wxss | 56 ++++ 16 files changed, 1299 insertions(+) create mode 100644 src/miniprogram/pages/msg 1/msg 1.js create mode 100644 src/miniprogram/pages/msg 1/msg 1.json create mode 100644 src/miniprogram/pages/msg 1/msg 1.wxml create mode 100644 src/miniprogram/pages/msg 1/msg 1.wxss create mode 100644 src/miniprogram/pages/msg 2/msg 2.js create mode 100644 src/miniprogram/pages/msg 2/msg 2.json create mode 100644 src/miniprogram/pages/msg 2/msg 2.wxml create mode 100644 src/miniprogram/pages/msg 2/msg 2.wxss create mode 100644 src/miniprogram/pages/msg/msg.js create mode 100644 src/miniprogram/pages/msg/msg.json create mode 100644 src/miniprogram/pages/msg/msg.wxml create mode 100644 src/miniprogram/pages/msg/msg.wxss create mode 100644 src/miniprogram/pages/profile/profile.js create mode 100644 src/miniprogram/pages/profile/profile.json create mode 100644 src/miniprogram/pages/profile/profile.wxml create mode 100644 src/miniprogram/pages/profile/profile.wxss diff --git a/src/miniprogram/pages/msg 1/msg 1.js b/src/miniprogram/pages/msg 1/msg 1.js new file mode 100644 index 0000000..ea177c5 --- /dev/null +++ b/src/miniprogram/pages/msg 1/msg 1.js @@ -0,0 +1,359 @@ + +// var utils = require("../../utils/util.js") +// const app = getApp() +// const api = require('../../utils/request.js'); //相对路径 +// Page({ + +// /** +// * 页面的初始数据 +// */ +// data: { +// receivebaseInfo:{}, +// sendAvatar:'', +// newsList:[ +// { +// date: "2020.10.19", +// message:'哈喽,好久不见', +// type: 0 +// }, +// { +// date: "2020.10.20", +// message:'是呀,好久不见', +// type: 1 +// }, +// { +// date: "2020.10.20", +// message:'是呀,好久不见', +// type: 1 +// }, +// ],//消息列表 +// historyList:[], +// input:null, +// openid:null, +// connectemoji: ["😘","😡","😔","😄","❤"], +// emoji_list: ['emoji1i1', 'emoji2i2', 'emoji3i3', 'emoji4i4', 'emoji5i5'], +// emotionVisible: false, +// inputShowed: false, +// scrollTop: 0, +// inputBottom: '0px', +// receiveMemberId:null, +// sendMemberId:null, +// scrollid:'scrollid', +// scrollHeight:'300px', +// // 下拉刷新 +// triggered:true, +// // 历史记录当前页 +// pageNo: 1, +// }, + +// /** +// * 生命周期函数--监听页面加载 +// */ +// onLoad: function (options) { +// var receiveMemberId = options.receiveMemberId +// var sendMemberId = app.globalData.open_id +// var sendAvatar = app.globalData.sendAvatar +// var _this = this; +// _this.setData({ +// receiveMemberId, +// sendMemberId, +// sendAvatar +// }) +// console.log(app.globalData.sendAvatar,'hahha') +// // 获取内存中的数据 +// this.getStorageBaseInfo() +// // 设置滚动区域的高度 +// this.setScrollHeight() +// // 获取历史记录 +// this.getHistory() +// // 初始化websocket +// this.initWebSocket() +// // 页面进入滚动到底部 +// this.scrollBottom() +// }, + +// /** +// * 生命周期函数--监听页面初次渲染完成 +// */ +// onReady: function () { + +// }, + +// // websocket初始化 +// initWebSocket: function(){ +// var _this = this; +// var {receiveMemberId, sendMemberId} = this.data +// //建立连接 +// wx.connectSocket({ +// url: `ws://10.200.18.18:1818/zxxt/${sendMemberId}/${receiveMemberId}`,//本地 +// success: function () { +// console.log('websocket连接成功~') +// }, +// fail: function () { +// console.log('websocket连接失败~') +// }, +// }) + +// //连接成功 +// wx.onSocketOpen(function () { +// console.log('onSocketOpen','连接成功,真正的成功'); +// }) + +// // 接收服务器的消息事件 +// wx.onSocketMessage(function(res){ + +// // 接收到的消息{date,message,type} type类型为 1 是对方的消息 为 0 是自己的消息 + +// var list = []; +// list = _this.data.newsList; +// var _data = JSON.parse(res.data); + +// list.push(_data); +// console.log(list) +// _this.setData({ +// newsList:list +// }) +// _this.scrollBottom() +// }, +// ) + +// // 监听连接关闭 +// wx.onSocketClose(function(){ +// console.log('监听 WebSocket 连接关闭事件') +// }) + +// }, + +// // 获取历史记录 +// getHistory: function(){ +// var {receiveMemberId, sendMemberId,pageNo} = this.data +// var params = { +// receiveMemberId, +// sendMemberId, +// pageNo, +// pageSize:5, +// } +// api.get("/zxxt/chat/msg/list", params, (res) => { +// if (res.code == 'success') { +// // var historyList = res.data.data +// var historyList = [...res.data.data,...this.data.historyList] +// if (historyList && historyList.length > 0) { +// historyList.forEach(item => { +// if (item.send_member_id == sendMemberId) { +// item.type = 0 +// }else { +// item.type = 1 +// } +// }); +// this.setData({ +// historyList +// }) +// console.log(this.data.historyList,'历史记录数据') +// }else { +// // 判断是否是第一次进入查看历史记录:是(不显示弹框,不是则显示弹框) +// if(this.data.pageNo > 1) { +// wx.showToast({ +// title: "没有更多历史记录了", +// icon: 'none', +// duration: 2000 +// }) +// } +// } +// } else { +// if (res.message) { +// wx.showToast({ +// title: res.message, +// icon: 'none', +// duration: 2000 +// }) +// } +// } +// }, (res) => { +// if (res.message) { +// wx.showToast({ +// title: res.message, +// icon: 'none', +// duration: 2000 +// }) +// } +// }) +// }, + +// // 滚动到底部 +// scrollBottom:function() { +// var {newsList} = this.data +// var scrollid = `scrollid${newsList.length - 1}` +// this.setData({ +// scrollid +// }) +// }, + +// // 设置滚动区域的高度 +// setScrollHeight:function(){ +// const client = wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 +// var scrollHeight = (client - 236) + 'px' +// this.setData({ +// scrollHeight +// }) +// }, + +// // 获取内存中聊天列表的用户信息 +// getStorageBaseInfo: function(){ +// //获取存储信息 +// wx.getStorage({ +// key: 'receivebaseInfo', +// success: (res)=>{ +// this.setData({ +// receivebaseInfo:res.data +// }) +// } +// }) +// }, + +// // 自定义下拉刷新 +// refresh: function(){ +// // 下拉的实际操作 +// var pageNo = this.data.pageNo + 1 +// this.setData({ +// pageNo +// }) +// if (this.timer) { +// clearTimeout(this.timer) +// } +// this.timer = setTimeout(()=>{ +// this.setData({ +// triggered:false +// }) +// this.getHistory() +// },2000) +// }, + +// /** +// * 生命周期函数--监听页面显示 +// */ +// onShow: function () { + +// }, + +// /** +// * 生命周期函数--监听页面隐藏 +// */ +// onHide: function () { + +// }, + +// /** +// * 生命周期函数--监听页面卸载 +// */ +// onUnload: function () { + +// }, + +// /** +// * 页面相关事件处理函数--监听用户下拉动作 +// */ +// onPullDownRefresh: function () { + +// }, + +// /** +// * 页面上拉触底事件的处理函数 +// */ +// onReachBottom: function () { + +// }, + +// /** +// * 用户点击右上角分享 +// */ +// onShareAppMessage: function () { + +// }, +// send :function(){ +// var _this = this; +// if(_this.data.input){ +// wx.sendSocketMessage({ +// data: _this.data.input, +// success: (res) =>{ +// console.log(res) +// }, +// fail: (err)=>{ +// console.log('sendSocketMessage','失败') +// } +// }) +// var list = []; +// list = this.data.newsList; +// var temp = { 'message': _this.data.input, 'date': utils.formatTime(new Date()), type: 0 }; +// list.push(temp); +// this.setData({ +// newsList:list, +// input:null +// }) + +// this.scrollBottom() +// // 表情选择隐藏 +// this.setData({ +// emotionVisible:false, +// }) + +// } + +// // this.bottom() +// const client = wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 +// console.log(client,'shurugaodu') + +// }, +// bindChange:function(res){ +// this.setData({ +// input: res.detail.value, +// }) +// }, +// back:function(){ +// wx.closeSocket(); +// console.log('连接断开'); +// }, +// emotionChange:function(){ +// this.setData({ +// emotionVisible:!this.data.emotionVisible +// }) +// }, +// addemotion:function(e){ +// console.log(e.currentTarget.dataset.index,"点了设默默") +// let {connectemoji,input} = this.data +// if (input) { +// input = input + connectemoji[e.currentTarget.dataset.index]; +// }else { +// input = connectemoji[e.currentTarget.dataset.index] +// } + +// console.log(input,'输入框额值') +// this.setData({ +// input +// }) +// }, +// // 公共聚焦方法,方法比较笨,但是过度效果平滑流畅 +// bottom: function() { + +// var that = this; + +// // 获取元素的高度 +// let query = wx.createSelectorQuery(); +// query.select('.news').boundingClientRect(rect => { +// //获取到元素 +// let scrollTop = rect.height; +// this.setData({ +// scrollTop +// }) +// }).exec(); + +// console.log(this.data.scrollTop,'hahah') + +// wx.pageScrollTo({ +// // scrollTop: this.data.scrollTop + 30, +// scrollTop: 10000, +// // duration: 0 +// }) +// }, +// }) + + diff --git a/src/miniprogram/pages/msg 1/msg 1.json b/src/miniprogram/pages/msg 1/msg 1.json new file mode 100644 index 0000000..3034aaf --- /dev/null +++ b/src/miniprogram/pages/msg 1/msg 1.json @@ -0,0 +1,6 @@ +{ + + "usingComponents": { + "cloud-tip-modal": "/components/cloudTipModal/index" + } +} \ No newline at end of file diff --git a/src/miniprogram/pages/msg 1/msg 1.wxml b/src/miniprogram/pages/msg 1/msg 1.wxml new file mode 100644 index 0000000..875fa55 --- /dev/null +++ b/src/miniprogram/pages/msg 1/msg 1.wxml @@ -0,0 +1,3 @@ + + 欢迎来到Homework 界面 + \ No newline at end of file diff --git a/src/miniprogram/pages/msg 1/msg 1.wxss b/src/miniprogram/pages/msg 1/msg 1.wxss new file mode 100644 index 0000000..a868d47 --- /dev/null +++ b/src/miniprogram/pages/msg 1/msg 1.wxss @@ -0,0 +1,312 @@ +/* pages/wechat2/wechat2.wxss */ +page { + background-color: #f3f3f4; + + } + + /* 新增样式 */ + .chat-header { + display: flex; + align-items: center; + justify-content: flex-start; + height: 88px; + padding: 0 12px; + background-color: #fff; + border-radius: 0px 0px 10px 10px; + } + + .header-image-box { + width: 64px; + height: 64px; + border-radius: 50%; + margin-right: 12px; + } + + .header-image { + width: 100%; + height: 100%; + border-radius: 50%; + } + + .chat-name { + color: #333; + font-size: 16px; + font-weight: 700; + } + + .chat-company { + font-size: 14px; + color: rgba(81, 81, 81, 100); + } + + .tab { + padding: 20rpx 20rpx 40rpx 50rpx; + height: 20%; + background-color: white; + } + + .tab .tent { + font-size: 33rpx; + margin-bottom: 30rpx; + } + .jia_img{ + height: 80rpx; + width: 90rpx; + } + .new_imgtent{ + height: 180rpx; + width: 190rpx; + } + .tab .fabu { + font-size: 33rpx; + margin-top: 30rpx; + margin-bottom: 30rpx; + } + + .xiahuaxia { + width: 80%; + text-align: center; + margin: 0 auto; + position: relative; + top: 60rpx; + } + + .chat-time { + text-align: center; + padding: 5rpx 20rpx 5rpx 20rpx; + width: 200rpx; + font-size: 26rpx; + background-color: #e6e6e6; + } + + .new_top_txt { + width: 50%; + position: relative; + top: 38rpx; + text-align: center; + margin: 0 auto; + font-size: 30rpx; + color: #787878; + background-color: #f7f7f7; + } + + /* 聊天内容 */ + + .news { + margin-top: 30px; + text-align: center; + margin-bottom: 98px; + } + + .img_null { + height: 60rpx; + } + + .l { + height: 5rpx; + width: 20%; + margin-top: 30rpx; + color: #000; + } + + /* 聊天 */ + + .my_right { + float: right; + position: relative; + right: 40rpx; + } + + .you_left { + float: left; + position: relative; + left: 5rpx; + } + + .new_img { + width: 100rpx; + height: 100rpx; + border-radius: 50%; + } + + .sanjiao { + top: 20rpx; + position: relative; + width: 0px; + height: 0px; + border-width: 10px; + border-style: solid; + } + + .my { + border-color: transparent transparent transparent #95d4ff; + } + + .you { + border-color: transparent #95d4ff transparent transparent; + } + + .sendmessage { + /* display: flex; + align-items: center; + flex-direction: row; */ + width: 100%; + min-height: 60px; + position: fixed; + bottom: 0px; + padding: 0 16px; + background-color: rgba(242, 242, 242, 100); + box-shadow: 0px -1px 5px 1px rgba(57, 57, 57, 0.1); + } + + .send-message { + display: flex; + align-items: center; + padding: 16px; + } + + .sendmessage input { + height: 80rpx; + background-color: white; + line-height: 80rpx; + font-size: 28rpx; + padding-left: 20rpx; + } + + .sendmessage button { + width: 52px !important; + height: 32px; + line-height: 32px; + background: #169171 !important; + color: #fff !important; + font-size: 14px !important; + text-align: center; + border: 0 !important; + padding: 0 !important; + margin: 0 !important; + } + + .historycon { + height: 90%; + /* background-color: pink; */ + width: 100%; + flex-direction: column; + display: flex; + /* margin-top: 100rpx; */ + border-top: 0px; + } + .hei{ + margin-top: 50px; + height: 20rpx; + } + .history { + /* height: 300px; */ + margin-top: 30rpx; + margin: 20rpx; + font-size: 28rpx; + line-height: 80rpx; + word-break: break-all; + } + .chat-input{ + width: 60%; + height: 40px; + border: 0; + border-radius: 8px; + margin-left: 5rpx; + } + + .back-icon{ + margin-top: 25rpx; + margin-left: 25rpx; + width:40rpx; + height:40rpx; + } + .other-record-content{ + background-color: #fff; + width: 180px; + border-radius: 7px; + padding: 0 20px; + text-align: left; + margin: 6px 0; + } + .other-record{ + + display: flex; + justify-content:flex-start; + } + .other-head-img{ + width:70rpx; + height:70rpx; + border-radius: 50%; + margin: 10rpx 10rpx 10rpx 10rpx; + } + .other-record-content-triangle{ + width: 0; + height: 0; + border-top: 10rpx solid transparent; + border-right: 15rpx solid #fff; + border-bottom: 10rpx solid transparent; + margin-top: 36rpx; + } + .own-record{ + display: flex; + justify-content:flex-end; + padding-right:30rpx; + } + .own-record-content{ + background-color: #209072; + width: 180px; + border-radius: 8px; + padding: 0 20px; + color: #fff; + text-align: left; + margin: 6px 0; + } + .own-record-content-triangle { + width: 0; + height: 0; + /* border-top: 20rpx solid transparent; + border-left: 40rpx solid #F0F0F0; + border-bottom: 20rpx solid transparent; */ + border-top: 10rpx solid transparent; + border-left: 15rpx solid #209072; + border-bottom: 10rpx solid transparent; + margin-top: 36rpx; + } + .own-head-img{ + width:70rpx; + height:70rpx; + border-radius: 50%; + margin: 10rpx 10rpx 10rpx 10rpx; + } + ::-webkit-scrollbar{ + width: 0; + height: 0; + color: transparent; + } + + .chat-emotion { + width: 28px; + height: 28px; + margin: 0 12px; + } + + .emotions { + display: flex; + align-items: flex-start; + justify-content: flex-start; + width: 200px; + height: 36px; + margin: 6px; + } + + .emotions-item { + width: 24px; + height: 24px; + margin: 0 8px; + } + + .historyText { + color: #ccc; + } + diff --git a/src/miniprogram/pages/msg 2/msg 2.js b/src/miniprogram/pages/msg 2/msg 2.js new file mode 100644 index 0000000..352d199 --- /dev/null +++ b/src/miniprogram/pages/msg 2/msg 2.js @@ -0,0 +1,212 @@ +const app = getApp() +const db = wx.cloud.database() + +Page({ + + /** + * 页面的初始数据 + */ + data: { + mess : '', + content : [],//聊天信息 + mineAvatorSrc : '/images/user_male.jpg', + himAvatorSrc : '/images/user_female.jpg', + }, + + //获取格式化的时间 yyyy-mm-dd-hh:mm-ss + getFormatTime(){ + let date = new Date(); + let ymd = date.toISOString().substring(0,10);//年-月-日 + let hms = date.toTimeString().substring(0,8);//小时-分钟-秒钟 + console.log(ymd + "-" + hms); + return ymd + "-" + hms;//拼接 + }, + + //“发送” + sendMess(){ + let that = this; + let mess = that.data.mess; + let content = that.data.content; + let date = that.getFormatTime(); + let id = that.data.currentId; + wx.showLoading({ + title: '发送ing...', + mask: true, + success: (res) => {}, + fail: (res) => {}, + complete: (res) => { + db.collection('chatTest') + .doc(id) + .update({ + data : { + chatContent : content.concat({ + id : 0,//用户自己发送,为0 + text : mess, + date : date + }) + }, + success:function(res){ + console.log("添加成功!",res); + }, + fail:function(err){ + console.log("添加失败!",err); + }, + complete:function(){ + that.setData({ + mess : '', + }) + wx.hideLoading({ + noConflict: true, + success: (res) => {}, + fail: (res) => {}, + complete: (res) => {}, + }) + } + }) + }, + }) + }, + + //初始化数据库的字段 + initChatContent(){ + let that = this; + wx.showLoading({ + title: '初始化数据库的字段中...', + mask: true, + success: (res) => {}, + fail: (res) => {}, + complete: (res) => { + db.collection('chatTest') + .add({ + data : { + chatContent : [],//设置一个空的聊天循环体 + }, + success(res){ + console.log("初始化成功!",res); + that.setData({ + currentId : res._id//设置当前的id + }) + }, + fail(err){ + console.log("初始化失败!",err); + }, + complete(){ + wx.hideLoading({ + noConflict: true, + success: (res) => {}, + fail: (res) => {}, + complete: (res) => {}, + }) + } + }) + }, + }) + }, + + //查询聊天 + queryChat(){ + let that = this; + wx.showLoading({ + title: '查询...', + mask: true, + success: (res) => {}, + fail: (res) => {}, + complete: (res) => { + db.collection('chatTest') + //.doc('4efa204964219ab20003873513331ef9') + .get({ + success:function(res){ + console.log("查询成功!",res); + if(res.data.length == 0){ + that.initChatContent();//初始化数据库字段 + } + else{ + that.setData({ + currentId : res.data[0]._id,//设置当前的id + content : res.data[0].chatContent//赋值给当前的聊天循环体 + }) + + //定位到最后一行 + that.setData({ + toBottom : `item${that.data.content.length - 1}`, + }) + } + }, + fail:function(err){ + console.log("查询失败!",err); + }, + complete:function(){ + wx.hideLoading({ + noConflict: true, + success: (res) => {}, + fail: (res) => {}, + complete: (res) => {}, + }) + } + }) + }, + }) + }, + + //数据库的监听器 + dbWatcher(){ + let that = this; + db.collection('chatTest').where({ + }) + .watch({ + onChange: function (res) { + //监控数据发生变化时触发 + console.log("res:",res); + if(res.docChanges != null){ + if(res.docChanges[0].dataType == "update"){//数据库监听到的内容 + let length = res.docChanges[0].doc.chatContent.length; + console.log("length : ",length); + let value = res.docChanges[0].doc.chatContent[length - 1];//要增添的内容 + console.log("value : ",value); + that.setData({ + content : that.data.content.concat(value) + }) + //定位到最后一行 + that.setData({ + toBottom : `item${that.data.content.length - 1}`, + }) + } + } + }, + onError:(err) => { + console.error(err) + } + }) + }, + + //获取时间并格式化时间 + checkDateAndTime(){ + let date = new Date(); + let ymd = date.toISOString().substring(0,10);//年-月-日 + let time = date.toTimeString().substring(0,8);//时:分:秒 + + console.log("年-月-日 : ",ymd); + console.log("时:分:秒 : ",time); + + let resDate = ymd + '-' + time; + console.log("resDate : ",resDate); +}, + + + /** + * 生命周期函数--监听页面加载 + */ + // 生命周期函数--监听页面加载 + onLoad: function (options) { + + this.dbWatcher(); + + this.queryChat(); + + }, + + onReady(){ + + }, + +}) \ No newline at end of file diff --git a/src/miniprogram/pages/msg 2/msg 2.json b/src/miniprogram/pages/msg 2/msg 2.json new file mode 100644 index 0000000..3034aaf --- /dev/null +++ b/src/miniprogram/pages/msg 2/msg 2.json @@ -0,0 +1,6 @@ +{ + + "usingComponents": { + "cloud-tip-modal": "/components/cloudTipModal/index" + } +} \ No newline at end of file diff --git a/src/miniprogram/pages/msg 2/msg 2.wxml b/src/miniprogram/pages/msg 2/msg 2.wxml new file mode 100644 index 0000000..181f7f3 --- /dev/null +++ b/src/miniprogram/pages/msg 2/msg 2.wxml @@ -0,0 +1,28 @@ + + + + + + + + {{item.text}} + + + + + + {{item.text}} + + + + + + + + + + + 发送 + + + \ No newline at end of file diff --git a/src/miniprogram/pages/msg 2/msg 2.wxss b/src/miniprogram/pages/msg 2/msg 2.wxss new file mode 100644 index 0000000..37cc085 --- /dev/null +++ b/src/miniprogram/pages/msg 2/msg 2.wxss @@ -0,0 +1,121 @@ +.root { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; +} + +.sv { + background-color: white; + width: 80%; + height: 90vh; +} + +.sendBar { + width: 80%; + height: 10vh; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + border: 2px solid #1E90FF; +} + +.input { + background-color: white; + border: 2px solid #1E90FF; +} + +.box { + width: 100%; + display: flex; + flex-direction: row; + margin-top: 2px; + margin-bottom: 2px; +} + +.item { + background-color: white; + width: 100%; + min-height: 50px; + display: flex; + flex-direction: row; + align-items: center; +} + +.mineText { + font-size: 12px; + color: white; +} + +.himText { + font-size: 12px; + color: white; +} + +.adText { + position: absolute; + margin: auto; + right: 20px; +} + +.button { + background-color: #1E90FF; + width: 60px; + height: 30px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin-left: 20rpx; +} + +.buttonText { + font-size: 14px; + color: white; +} + +.mineAvatorSrc { + height: 45px; + width: 45px; + position: relative; + margin-left: 20rpx; +} + +.himAvatorSrc { + height: 45px; + width: 45px; + position: relative; + right: 20rpx; +} + +.mineTextBox { + background-color: #1E90FF; + max-width: 50%; + border-radius: 15rpx; + padding-left: 5px; + padding-right: 5px; + padding-top: 5px; + padding-bottom: 5px; + margin: auto; + margin-left: 40rpx; + display: block; + text-overflow:ellipsis; + word-wrap:break-word; +} + +.himTextBox { + background-color: #1E90FF; + max-width: 50%; + border-radius: 15rpx; + padding-left: 5px; + padding-right: 5px; + padding-top: 5px; + padding-bottom: 5px; + margin: auto; + margin-right: 40rpx; + display: block; + text-overflow:ellipsis; + word-wrap:break-word; +} \ No newline at end of file diff --git a/src/miniprogram/pages/msg/msg.js b/src/miniprogram/pages/msg/msg.js new file mode 100644 index 0000000..d4e368e --- /dev/null +++ b/src/miniprogram/pages/msg/msg.js @@ -0,0 +1,33 @@ +Page({ + + goToPageA: function() { + wx.navigateTo({ + url: '/pages/msg 1/msg 1', + }) + }, + goToPageB: function() { + wx.navigateTo({ + url: '/pages/msg 2/msg 2', + }) + }, + data:{ + date:"", + region:"", + }, + submit:function(e){ + console.log(e); + }, + + dateChange:function(e){ + this.setData({ + date:e.detail.value, + }); + }, + regionChange:function(e){ + this.setData({ + region:e.detail.value, + }); + }, + + +}); \ No newline at end of file diff --git a/src/miniprogram/pages/msg/msg.json b/src/miniprogram/pages/msg/msg.json new file mode 100644 index 0000000..3034aaf --- /dev/null +++ b/src/miniprogram/pages/msg/msg.json @@ -0,0 +1,6 @@ +{ + + "usingComponents": { + "cloud-tip-modal": "/components/cloudTipModal/index" + } +} \ No newline at end of file diff --git a/src/miniprogram/pages/msg/msg.wxml b/src/miniprogram/pages/msg/msg.wxml new file mode 100644 index 0000000..2972d81 --- /dev/null +++ b/src/miniprogram/pages/msg/msg.wxml @@ -0,0 +1,6 @@ + +
+ + +
+
\ No newline at end of file diff --git a/src/miniprogram/pages/msg/msg.wxss b/src/miniprogram/pages/msg/msg.wxss new file mode 100644 index 0000000..db3c1eb --- /dev/null +++ b/src/miniprogram/pages/msg/msg.wxss @@ -0,0 +1,58 @@ +.button-wrapper { + display: flex; + justify-content: space-between; /* 将两个按钮分别放置在容器的两端 */ +} +.goToPageB { + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; +} + +.goToPageB:hover { + background-color: #0056b3; +} + +/* Page({ + handleButtonTap: function() { + // 点击事件处理逻辑 + wx.navigateTo({ + url: '/pages/profile', + }) + } +}) */ + +.body{ + margin: 40rpx; +} +.section{ + margin: 40rpx 0 80rpx; +} +.title{ + font-weight: 36rpx; +} +.input{ + margin:30rpx 0; + border-bottom: 1px solid #666; + padding: 20rpx 0; + width:100% +} +.mg{ + margin: 30rpx 0; +} +.area{ + margin:100rpx auto; + display:flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.desc{ + font-weight: 500; + color: #000; + font-size: 44rpx; + margin: 50rpx 32rpx; +} \ No newline at end of file diff --git a/src/miniprogram/pages/profile/profile.js b/src/miniprogram/pages/profile/profile.js new file mode 100644 index 0000000..132c640 --- /dev/null +++ b/src/miniprogram/pages/profile/profile.js @@ -0,0 +1,22 @@ +Page({ + data:{ + date:"", + region:"", + }, + submit:function(e){ + console.log(e); + }, + + dateChange:function(e){ + this.setData({ + date:e.detail.value, + }); + }, + regionChange:function(e){ + this.setData({ + region:e.detail.value, + }); + }, + + +}); \ No newline at end of file diff --git a/src/miniprogram/pages/profile/profile.json b/src/miniprogram/pages/profile/profile.json new file mode 100644 index 0000000..3ea1434 --- /dev/null +++ b/src/miniprogram/pages/profile/profile.json @@ -0,0 +1,5 @@ +{ + "usingComponents": { + "cloud-tip-modal": "/components/cloudTipModal/index" + } +} \ No newline at end of file diff --git a/src/miniprogram/pages/profile/profile.wxml b/src/miniprogram/pages/profile/profile.wxml new file mode 100644 index 0000000..09914c7 --- /dev/null +++ b/src/miniprogram/pages/profile/profile.wxml @@ -0,0 +1,66 @@ + + + + + + + + User Image + + + + + + +
+ + + 昵称: + + + + + 性别: + + + + + + + + 年龄: + + 出生年:{{date}} + + + + 地区: + + 当前选择:{{region}} + + + + + 可以添加到你的联系方式: + + + + + 你的基本情况: + + + + + + + +
+
\ No newline at end of file diff --git a/src/miniprogram/pages/profile/profile.wxss b/src/miniprogram/pages/profile/profile.wxss new file mode 100644 index 0000000..c3e6595 --- /dev/null +++ b/src/miniprogram/pages/profile/profile.wxss @@ -0,0 +1,56 @@ +.image-container { + display: flex; + justify-content: center; + align-items: center; + width: 300px; /* 适当调整容器的宽度 */ + height: 200px; /* 适当调整容器的高度 */ +} + +.user-image { + max-width: 10%; + max-height: 10%; +} + +.button-container { + position: relative; + display: flex; + justify-content: flex-end; + align-items: flex-start; +} + +.small-button { + font-size: 12px; + padding: 5px 10px; +} + +.body{ + margin: 40rpx; +} +.section{ + margin: 40rpx 0 80rpx; +} +.title{ + font-weight: 36rpx; +} +.input{ + margin:30rpx 0; + border-bottom: 1px solid #666; + padding: 20rpx 0; + width:100% +} +.mg{ + margin: 30rpx 0; +} +.area{ + margin:100rpx auto; + display:flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.desc{ + font-weight: 500; + color: #000; + font-size: 44rpx; + margin: 50rpx 32rpx; +} \ No newline at end of file