liugang
/
channel_business
İzle 1
Yıldızla 0
Çatalla 0
Kod Sorunlar 0 Değişiklik İstekleri 0 Sürümler 0 Wiki Aktivite
Kaynağa Gözat

修改聊一聊样式。

release/210823_需求对对碰
王饶冀 4 yıl önce
ebeveyn
0df6345a45
işleme
4a641a4ffd
9 değiştirilmiş dosya ile 54 ekleme ve 428 silme
Görünümü Böl Farklılık Durumunu Göster
  1. BIN
      images/home/expression-msg-icon.png
  2. BIN
      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

BIN
images/home/expression-msg-icon.png Dosyayı Görüntüle


BIN
images/home/img-msg-icon.png Dosyayı Görüntüle


+ 0
- 128
pages/msgModule/wechat2 copy/wechat2.js Dosyayı Görüntüle

@@ -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 Dosyayı Görüntüle

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

+ 0
- 44
pages/msgModule/wechat2 copy/wechat2.wxml Dosyayı Görüntüle

@@ -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 Dosyayı Görüntüle

@@ -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 Dosyayı Görüntüle

@@ -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 Dosyayı Görüntüle

@@ -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 Dosyayı Görüntüle

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

Write Preview
Loading…
İptal
Kaydet