parent
18209c20bf
commit
8a117b9dcb
@ -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
|
||||
// })
|
||||
// },
|
||||
// })
|
||||
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
|
||||
"usingComponents": {
|
||||
"cloud-tip-modal": "/components/cloudTipModal/index"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
<view>
|
||||
欢迎来到Homework 界面
|
||||
</view>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
|
||||
"usingComponents": {
|
||||
"cloud-tip-modal": "/components/cloudTipModal/index"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
<view class="root">
|
||||
<scroll-view class="sv" scroll-y scroll-into-view="{{toBottom}}">
|
||||
|
||||
<view class="box" wx:for="{{content}}" id="item{{index}}">
|
||||
<view class="item" wx:if="{{item.id == 1}}">
|
||||
<image src="{{mineAvatorSrc}}" class="mineAvatorSrc"></image>
|
||||
<view class="mineTextBox">
|
||||
<text class="mineText">{{item.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="item" wx:if="{{item.id == 0}}">
|
||||
<view class="himTextBox">
|
||||
<text class="himText">{{item.text}}</text>
|
||||
</view>
|
||||
<image src="{{himAvatorSrc}}" class="himAvatorSrc"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
|
||||
<view class="sendBar">
|
||||
<input type="text" model:value="{{mess}}" class="input"/>
|
||||
<view class="button" bindtap="sendMess">
|
||||
<text class="buttonText">发送</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -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;
|
||||
}
|
||||
@ -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,
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
|
||||
"usingComponents": {
|
||||
"cloud-tip-modal": "/components/cloudTipModal/index"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
<view>
|
||||
<div class="button-wrapper">
|
||||
<button bindtap="goToPageA">Homework</button>
|
||||
<button bindtap="goToPageB">Message</button>
|
||||
</div>
|
||||
</view>
|
||||
@ -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;
|
||||
}
|
||||
@ -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,
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"cloud-tip-modal": "/components/cloudTipModal/index"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
<view class="body">
|
||||
|
||||
<view class="button-container" style="position: fixed; top: 20px; right: 20px;">
|
||||
<button bindtap="goToPageA">Be a teacher</button>
|
||||
</view>
|
||||
|
||||
<view class="image-container" >
|
||||
<img src="/images/user.png" class="user-image" alt="User Image" style="width: 10px; height: 80px;" />
|
||||
</view>
|
||||
|
||||
<view class="cover">
|
||||
<image src="/images/user.png"class="user"/>
|
||||
</view>
|
||||
|
||||
<form bindsubmit="submit">
|
||||
|
||||
<view class="section">
|
||||
<view class="title">昵称：</view>
|
||||
<input type="nickname" class="input"name="nickname"placeholder="昵称" />
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="title">性别：</view>
|
||||
<radio-group class="mg" name="gender">
|
||||
<label >
|
||||
<radio value="nan" />
|
||||
男
|
||||
</label>
|
||||
<label >
|
||||
<radio value="nv" />
|
||||
女
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="title">年龄：</view>
|
||||
<picker bindchange="dateChange" fields="year" value="{{date}}"mode="date"class="input"name="date">
|
||||
<view class="picker">出生年：{{date}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="title">地区：</view>
|
||||
<picker bindchange="regionChange" value="{{region}}" value="{{region}}"mode="region"class="input"name="region">
|
||||
<view class="picker">当前选择：{{region}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="title">可以添加到你的联系方式：</view>
|
||||
<input type="input" class="input"name="code"placeholder="昵称" />
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="title">你的基本情况：</view>
|
||||
<input type="input" class="input"name="code"placeholder="昵称" />
|
||||
</view>
|
||||
|
||||
<view class="area">
|
||||
<button style="margin:30rpx 0"type="primary"
|
||||
form-type="submit">提交</button>
|
||||
<button style="margin:30rpx 0"type="reset"
|
||||
form-type="submit">重置</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
@ -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;
|
||||
}
|
||||
Loading…
Reference in new issue