liugang
/
channel_business
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

修改聊一聊样式。

release/210823_需求对对碰
王饶冀 3 年前
父节点
0df6345a45
当前提交
4a641a4ffd
共有 9 个文件被更改，包括 54 次插入 和 428 次删除
分列视图 显示文件统计
  1. 二进制
      images/home/expression-msg-icon.png
  2. 二进制
      images/home/img-msg-icon.png
  3. 0
    128
      pages/msgModule/wechat2 copy/wechat2.js
  4. 0
    3
      pages/msgModule/wechat2 copy/wechat2.json
  5. 0
    44
      pages/msgModule/wechat2 copy/wechat2.wxml
  6. 0
    228
      pages/msgModule/wechat2 copy/wechat2.wxss
  7. 14
    2
      pages/msgModule/wechat2/wechat2.js
  8. 13
    3
      pages/msgModule/wechat2/wechat2.wxml
  9. 27
    20
      pages/msgModule/wechat2/wechat2.wxss

二进制
images/home/expression-msg-icon.png 查看文件


二进制
images/home/img-msg-icon.png 查看文件


+ 0
- 128
pages/msgModule/wechat2 copy/wechat2.js 查看文件

@@ -1,128 +0,0 @@
const $request = require('../../../utils/request.js');
const $util = require('../../../utils/util.js');

Page({

/**
* 页面的初始数据
*/
data: {
newsList: [],
input: null,
openid: null
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this;
wx.getStorage({
key: 'OPENID',
success: function (res) {
_this.setData({
openid: res.data
})
},
})
var _this = this;
//建立连接
wx.connectSocket({
url: `ws://192.168.18.156/webSocket/{"userno":"666678","messageModule":"007"}`,
})

//连接成功
wx.onSocketOpen(function () {
console.log('连接成功');
})
wx.onSocketMessage(function (res) {

var list = [];
list = _this.data.newsList;
var _data = JSON.parse(res.data);

list.push(_data);
console.log(list,'输出的list')
_this.setData({
newsList: list
})

})
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
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,
})
var list = [];
list = this.data.newsList;
var temp = { 'message': _this.data.input, 'date': $util.formatTime(new Date()), type: 1 };
list.push(temp);
console.log(list,'我发出的list')
this.setData({
newsList: list,
input: null
})
}

},
bindChange: function (res) {
this.setData({
input: res.detail.value
})
},
back: function () {
wx.closeSocket();
console.log('连接断开');
}
})

+ 0
- 3
pages/msgModule/wechat2 copy/wechat2.json 查看文件

@@ -1,3 +0,0 @@
{
"usingComponents": {}
}

+ 0
- 44
pages/msgModule/wechat2 copy/wechat2.wxml 查看文件

@@ -1,44 +0,0 @@
<view class='top-content'>
<!-- <image src='images/back.png' class='back-icon' bindtap='back'></image> -->
<view class="weui-cells__title" style=' display: flex;flex-direction: row;justify-content: center;margin-left:210rpx'>
匿名聊天X
</view>
</view>
<view class='news'>
<view class="historycon">
<scroll-view scroll-y="true" class="history">
<block wx:for="{{newsList}}" wx:key>
<!-- 此处为other -->
<view wx:if="{{item.type==0}}">
<view>
<text class='chat-time'>{{item.date}}</text>
</view>
<view class='other-record'>
<!-- <image class='other-head-img' src='images/headimg.png'></image> -->
<view class='other-record-content-triangle'></view>
<view class='other-record-content'>{{item.message}}</view>
</view>
</view>
<!-- 此处为结尾 -->
<!-- 此处为own -->
<view wx:else>
<view>
<text class='chat-time'>{{item.date}}</text>
</view>
<view class='own-record'>
<view class='own-record-content'>{{item.message}}</view>
<view class='own-record-content-triangle'></view>
<image class='own-head-img' src='images/headimg.png'></image>
</view>
</view>
<!-- own结尾 -->
</block>
</scroll-view>
</view>
</view>
<view class='hei' id="hei"></view>
<view class="sendmessage">
<input class="chat-input" type="emoji" bindinput="bindChange" confirm-type="done" value='{{input}}' placeholder="" />
<button class="btn" type="primary" plain="true" bindtap='send'>发送</button>
<input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" />
</view>

+ 0
- 228
pages/msgModule/wechat2 copy/wechat2.wxss 查看文件

@@ -1,228 +0,0 @@
page {
background-color: white;
}

.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: 30rpx;
text-align: center;
margin-bottom: 150rpx;
}

.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 {
background-color: white;
width: 100%;
position: fixed;
bottom: 0rpx;
display: flex;
flex-direction: row;
}

.sendmessage input {
width: 80%;
height: 80rpx;
background-color: white;
line-height: 80rpx;
font-size: 28rpx;
border: 2rpx solid #d0d0d0;
padding-left: 20rpx;
}

.sendmessage button {
border: 2rpx solid white;
width: 18%;
height: 80rpx;
background: #fff;
color: #000;
line-height: 80rpx;
font-size: 28rpx;
}

.historycon {
height: 90%;
width: 100%;
flex-direction: column;
display: flex;
margin-top: 100rpx;
border-top: 0px;
}
.hei {
margin-top: 50px;
height: 20rpx;
}
.history {
height: 100%;
margin-top: 30rpx;
margin: 20rpx;
font-size: 28rpx;
line-height: 80rpx;
word-break: break-all;
}
.btn {
margin-left: 5rpx;
margin-right: 4rpx;
}
.chat-input {
margin-left: 5rpx;
}
.top-content {
display: flex;
}
.back-icon {
margin-top: 25rpx;
margin-left: 25rpx;
width: 40rpx;
height: 40rpx;
}
.other-record-content {
background-color: #ffefdb;
width: 380rpx;
border-radius: 7px;
padding: 0rpx 30rpx 0rpx 30rpx;
}
.other-record {
display: flex;
justify-content: flex-start;
}
.other-head-img {
width: 70rpx;
height: 70rpx;
margin: 10rpx 10rpx 10rpx 10rpx;
}
.other-record-content-triangle {
width: 0;
height: 0;
border-top: 20rpx solid transparent;
border-right: 40rpx solid #ffefdb;
border-bottom: 15rpx solid transparent;
margin-top: 20rpx;
}
.own-record {
display: flex;
justify-content: flex-end;
}
.own-record-content {
background-color: #f0f0f0;
width: 380rpx;
border-radius: 7px;
padding: 0rpx 30rpx 0rpx 30rpx;
}
.own-record-content-triangle {
width: 0;
height: 0;
border-top: 20rpx solid transparent;
border-left: 40rpx solid #f0f0f0;
border-bottom: 20rpx solid transparent;
margin-top: 20rpx;
}
.own-head-img {
width: 70rpx;
height: 70rpx;
margin: 10rpx 10rpx 10rpx 10rpx;
padding-right: 30rpx;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}

+ 14
- 2
pages/msgModule/wechat2/wechat2.js 查看文件

@@ -7,8 +7,10 @@ Page({
* 页面的初始数据
*/
data: {
receivebaseInfo: {},
sendAvatar: '',
receivebaseInfo: {
avatar:"http://wx.qlogo.cn/mmopen/ajNVdqHZLLAIliaZvz5B1ibTzTehYzXdfBZ9hXTL7yuhuCUQGyzbuHeYS2yr8rO5PkbUBbHuWb5h9SibpRQkj3GTw/0",
},
sendAvatar: 'http://wx.qlogo.cn/mmopen/ajNVdqHZLLAIliaZvz5B1ibTzTehYzXdfBZ9hXTL7yuhuCUQGyzbuHeYS2yr8rO5PkbUBbHuWb5h9SibpRQkj3GTw/0',
newsList: [
{
date: "2020.10.19",
@@ -25,6 +27,16 @@ Page({
message: '是呀，好久不见',
type: 1
},
{
date: "2020.10.20",
message: 'sad加撒恐龙当家撒了框架到拉喀什就科利达杀伤力肯定会萨克雷号地块了撒接口连接达萨罗凯撒将到拉萨就来的就是sad就卡了😘',
type: 1
},
{
date: "2020.10.19",
message: '自行车金坷垃上架了靠的就是卡旅行者沉默现在你沙雕萨比许昌办是撒娇登记卡数据库大数据库写注册表你现在从现在是阿斯顿撒多😄',
type: 0
},
],//消息列表
historyList: [],
input: null,

+ 13
- 3
pages/msgModule/wechat2/wechat2.wxml 查看文件

@@ -76,9 +76,19 @@
</view>
<view class="sendmessage">
<view class="send-message">
<input class="chat-input" type="text" bindinput="bindChange" confirm-type="done" value='{{input}}' cursor-spacing="16px" hold-keyboard="{{true}}" placeholder="" />
<image class="chat-emotion" src="../../static/img/chat-emotion.svg" bindtap="emotionChange"></image>
<button class="btn" bindtap='send'>发送</button>
<input
class="chat-input"
type="text"
bindinput="bindChange"
confirm-type="send"
value='{{input}}'
cursor-spacing="16px"
hold-keyboard="{{true}}"
placeholder=""
bindconfirm="send"
/>
<image class="expression-msg-img" src="/images/home/expression-msg-icon.png" />
<image class="img-msg-img" src="/images/home/img-msg-icon.png" />
</view>
<view class="emotions" wx:if="{{emotionVisible}}">
<view class="emotions-item" wx:for="{{connectemoji}}" wx:key="index" bindtap="addemotion" data-index="{{index}}">

+ 27
- 20
pages/msgModule/wechat2/wechat2.wxss 查看文件

@@ -153,7 +153,6 @@ page {
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);
}
@@ -165,26 +164,22 @@ page {
}

.sendmessage input {
height: 80rpx;
background-color: white;
line-height: 80rpx;
height: 81rpx;
background-color: #fff;
line-height: 81rpx;
font-size: 28rpx;
padding-left: 20rpx;
width: 530rpx;
}

.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;
.sendmessage .expression-msg-img,
.sendmessage .img-msg-img{
width: 71rpx;
height: 71rpx;
margin-left: 18rpx;
}


.historycon {
height: 90%;
/* background-color: pink; */
@@ -222,11 +217,17 @@ page {
}
.other-record-content {
background-color: #fff;
box-shadow: -2px 9px 21px 0px
rgba(0, 0, 0, 0.05);
width: 180px;
border-radius: 7px;
padding: 0 20px;
border-radius: 8px;
padding: 15rpx 20rpx;
text-align: left;
margin: 6px 0;
line-height: 40rpx;
box-sizing: border-box;
display: flex;
align-items:center; /*实现垂直居中*/
}
.other-record {
display: flex;
@@ -252,13 +253,19 @@ page {
padding-right: 30rpx;
}
.own-record-content {
background-color: #209072;
background-color: #5e73e5;
box-shadow: -2px 9px 21px 0px
rgba(0, 0, 0, 0.05);
width: 180px;
border-radius: 8px;
padding: 0 20px;
padding: 15rpx 20rpx;
color: #fff;
text-align: left;
margin: 6px 0;
line-height: 40rpx;
box-sizing: border-box;
display: flex;
align-items:center; /*实现垂直居中*/
}
.own-record-content-triangle {
width: 0;
@@ -267,7 +274,7 @@ page {
border-left: 40rpx solid #F0F0F0;
border-bottom: 20rpx solid transparent; */
border-top: 10rpx solid transparent;
border-left: 15rpx solid #209072;
border-left: 15rpx solid #5e73e5;
border-bottom: 10rpx solid transparent;
margin-top: 36rpx;
}

撰写 预览
正在加载...
取消
保存