luoye / littleApp_child

chatroom.wxml 6.4 KB
edit raw blame history 
   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
 100
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117
 118
 119
<view class="main">
    <view wx:if="{{recordStatus != RecordStatus.HIDE}}" class="modal modal-record" bindtap="toggleRecordModal">
        <view class="modal-body" catchtap="toggleWithoutAction">
            <text class="desc">{{RecordDesc[recordStatus]}}</text>
            <view class="dot" catchtouchstart="handleRecording" catchtouchmove="handleRecordingMove"
                  catchtouchend="handleRecordingCancel" catchtouchcancel="handleRecordingCancel">
                <image class="icon-mic" src="../../source/imageSource/mic@2x.png"/>
            </view>
        </view>
    </view>
    <scroll-view scroll-y="true" class="scroll_view" class="{{ view }}" bindtap="cancelEmoji"
                 scroll-into-view="{{ toView }}">
        <view class="message" wx:for="{{ chatMsg }}" wx:key="" id="{{ item.mid }}">
            <view class="time">
                <text>{{item.time}}</text>
            </view>
            <view class="main" class="{{ item.style }}">
                <view class="user">
                    <!--<text>{{ item.username }}</text>-->
                </view>
                <!--<image class="avatar" src="../../source/imageSource/number.png"/>-->
                
                <image class="avatar" src="{{ item.style ? (myIcon ? myIcon : '../../source/imageSource/number.png'): (yourIcon ? yourIcon : '../../source/imageSource/number.png')}}"/>
                <view class="msg" bindlongtap="longTap" data-content="{{ item.msg.data}}">
                    <view wx:if="{{ item.msg.type == 'img' || item.msg.type == 'audio' }}">
                        <template is="{{ item.msg.type }}" data="{{ item, msgView }}"/>
                    </view>
                    <view wx:elif="{{ item.msg.type == 'txt' || item.msg.type == 'emoji' }}">
                        <view class="template" wx:for="{{ item.msg.data }}" wx:key=""  >
                            <template is="{{ item.type }}" data="{{ item }}"
                              />
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>

    <template name="txt">
        <text style="float: left;margin-top: 2px;">{{ item.data }}</text>
    </template>
    <template name="audio">
        <image bindtap="playRecord" data-mid="{{item.mid}}" data-url="{{item.msg.url}}" class="icon-play"
               src="{{ msgView[item.mid].isPlay? '../../source/imageSource/audioPause.png' : '../../source/imageSource/audioPlay.png'}}"/>
    </template>
    <template name="emoji">
        <image class="avatar" src="{{'../../source/imageSource/faces/' + item.data }}"
               style="width: 25px;height: 25px;margin: 0 0 2px 0;float: left;"/>
    </template>
    <template name="img">
        <image class="avatar" src="{{ item.msg.data }}" style="width:90px;height: 120px;margin: 2px auto;"
               mode="aspectFit" bindtap="previewImage" data-url="{{ item.msg.data }}"/>
    </template>


    <view class="room_bar">
        <form bindreset="cleanInput">
            <view class="f-row">
                <input wx:if="{{!showRecordHandler}}" class="f news" type="text" value="{{ inputMessage }}"
                       placeholder="输入新消息" placeholder-style="color:#CFCFCF;padding-left:5px;" bindinput="bindMessage"
                       bindtap="focus" bindfocus="focus"/>
                <button wx:else class="f btn-recording" catchtouchstart="handleRecording"
                        catchtouchend="handleRecordingCancel" catchtouchcancel="handleRecordingCancel">按住 说话
                </button>
                <button class="send_btn" bindtap="sendMessage" formType="reset">发送</button>
            </view>
        </form>
        <view class="other_func">
            <view class="open_emoji" bindtap="openEmoji">
                <image src="../../source/imageSource/Emoji.png"/>
            </view>
            <view class="send_image" bindtap="sendImage">
                <image src="../../source/imageSource/iconImage@2x.png" style="height: 18px;"/>
            </view>
            <view class="open_camera" bindtap="openCamera">
                <image src="../../source/imageSource/iconCamera@2x.png" style="width: 26px;"/>
            </view>
            <view hidden="true" class="v-record" bindtap="toggleRecordModal">
                <image class="icon-record"
                       src="{{recordStatus != RecordStatus.HIDE ? '../../source/imageSource/iconAudioActive@2x.png' : '../../source/imageSource/iconAudio@2x.png'}}"/>
            </view>
        </view>
        <swiper class="emoji_list" class="{{ show }}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
                interval="{{interval}}" duration="{{duration}}">
            <block>
                <swiper-item>
                    <view class="emoji_item">
                        <image wx:for="{{ emojiObj.map1 }}" src="{{ emojiObj.path + item }}" wx:key=""
                               bindtap="sendEmoji" data-emoji="{{ index }}"/>
                    </view>
                    <view class="emoji_item">
                        <image wx:for="{{ emojiObj.map2 }}" src="{{ emojiObj.path + item }}" wx:key=""
                               bindtap="sendEmoji" data-emoji="{{ index }}"/>
                    </view>
                    <view class="emoji_item">
                        <image wx:for="{{ emojiObj.map3 }}" src="{{ emojiObj.path + item }}" wx:key=""
                               bindtap="sendEmoji" data-emoji="{{ index }}"/>
                    </view>
                </swiper-item>
            </block>
            <block class="second">
                <swiper-item>
                    <view class="emoji_item">
                        <image wx:for="{{ emojiObj.map4 }}" src="{{ emojiObj.path + item }}" wx:key=""
                               bindtap="sendEmoji" data-emoji="{{ index }}"/>
                    </view>
                    <view class="emoji_item">
                        <image wx:for="{{ emojiObj.map5 }}" src="{{ emojiObj.path + item }}" wx:key=""
                               bindtap="sendEmoji" data-emoji="{{ index }}"/>
                    </view>
                    <view class="emoji_item">
                        <image wx:for="{{ emojiObj.map6 }}" src="{{ emojiObj.path + item }}" wx:key=""
                               bindtap="sendEmoji" data-emoji="{{ index }}"/>
                    </view>
                </swiper-item>
            </block>
        </swiper>
    </view>
</view>