'''<template>
<view style="">
<view style="height: 45upx;"></view>
<image @click="closeSheet" src="@/static/douyin/cuowu.png" style="width: 28upx; height: 28upx; opacity: 0.6; position: absolute; right: 30upx; margin-top: 30upx;"></image>
<text style="font-size: 12px; font-weight: bold; text-align: center; color: #FFFFFF;">{{pinlunNum}}条评论</text>
<!--
评论内容
目前仅适配了 App
后期会继续优化
· 项目使用真实数据
· 由于项目使用的是 nvue 所以摒弃了 bug 很多的 rich-text
-->
<view :style="'width: '+ Width +'px; height: '+ (Height/num) +'px; margin-top: 20upx; background-color: #242424; display: flex; flex-direction: column;'">
<text v-if="pinlunList.length == 0" :style="'font-size: 14px; font-weight: bold; color: #a3a1a4; margin-top: 150upx; margin-left: '+ (Width/2.9) +'px; position: absolute;'">～ 快来评论吧 ～</text>
<list :show-scrollbar="false" :scrollable="true">
<cell v-for="(list,index) in pinlunList" :key="index">
<view :style="'width: '+ Width +'px; display: flex; flex-direction: row;'">
<!-- 1.用户的头像 -->
<image :src="list.headimage" mode="aspectFill" style="width: 75upx; height: 75upx; border-radius: 50upx; margin-top: 40upx; margin-left: 30upx;"></image>
<!-- 2.一级评论 -->
<view :style="'width: '+ (Width*0.8) +'px; display: flex; flex-direction: column; margin-top: 40upx; margin-left: 20upx;'">
<!-- 3.用户名称，并自动判断是否为视频作者 -->
<view style="display: flex; flex-direction: row;">
<text style="font-size: 12px; font-weight: bold; color: #a3a1a4;">{{list.username}}</text>
<!-- 4.如果是视频作者就显示 作者 -->
<view v-if="videouserID == list.userID" style="background-color: #E43D33; border-radius: 5upx; margin-left: 15upx;">
<text style="font-size: 8px; font-weight: bold; padding: 5upx; padding-left: 8upx; padding-right: 8upx; font-weight: bold; color: #FFFFFF;">作者</text>
</view>
</view>
<!-- 5.
由于 rich-text 有很多 bug
所以这里已经摒弃了，
使用自研文本解析器
-->
<view v-if="list.pinlunContent.length !== 0" @click="huifu(index)" :style="'width: '+ (Width*0.78) +'px; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 14upx;'">
<block v-for="(lili,inde) in list.pinlunContent[0].children" :key="inde">
<text v-if="lili.name == 'text'" :style="'font-size: 15px; font-weight: bold; color: #FFFFFF; margin-left: -3upx;'">{{lili.text}}</text>
<image v-if="lili.name == 'img'" :src="lili.attrs.src" style="width: 42upx; height: 42upx; margin-left: 2upx; margin-right: 2upx; margin-top: -4upx;"></image>
</block>
</view>
<!-- 6.如果用户输入了 GIF 表情，就会在这里显示 -->
<image v-if="list.imageURL !== ''" :src="list.imageURL" mode="aspectFill" style="width: 140upx; height: 140upx; margin-top: 20upx; border-radius: 10upx;"></image>
<!-- 7.这里就是 时间、回复、点赞、点赞量显示的地方 -->
<view :style="'width: '+ (Width*0.8) +'px; height: 40upx; display: flex; flex-direction: row; margin-top: 25upx;'">
<text style="font-size: 12px; color: #a3a1a4;">{{list.time}}</text>
<text @click="huifu(index)" style="font-size: 12px; font-weight: bold; color: #a3a1a4; margin-left: 20upx;">回复</text>
<text v-if="userID == list.userID" @click="deletepinlun(index)" style="font-size: 12px; font-weight: bold; color: #a3a1a4; margin-left: 20upx;">删除</text>
<image v-if="!list.mylike" @click="tolike(index)" src="@/static/douyin/dianzan-7.png" style="width: 35upx; height: 35upx; position: absolute; right: 45upx; margin-left: 5upx;"></image>
<image v-if="list.mylike" @click="tolike(index)" src="@/static/douyin/dianzan-6.png" style="width: 35upx; height: 35upx; position: absolute; right: 45upx; margin-left: 5upx;"></image>
<text @click="tolike(index)" style="font-size: 12px; color: #a3a1a4; position: absolute; right: 90upx; margin-top: 10upx;">{{list.like.length}}</text>
</view>
<!-- 8.用户回复的子评论会显示在这里
这里 update 用于刷新视图
-->
<block v-for="(li,inde) in list.sonPinlun" v-if="update" :key="inde">
<view :style="'width: '+ (Width*0.8) +'px; display: flex; flex-direction: row;'">
<!-- 9.子评论 用户头像 -->
<image :src="li.headimage" mode="aspectFill" style="width: 45upx; height: 45upx; border-radius: 50upx; margin-top: 40upx;"></image>
<!-- 10.动态计算宽度 子评论列表 -->
<view :style="'width: '+ (Width*0.8*0.85) +'px; display: flex; flex-direction: column; margin-top: 40upx; margin-left: 20upx;'">
<view style="display: flex; flex-direction: row;">
<view style="display: flex; flex-direction: row;">
<!-- 11.回复评论的人显示在这里 -->
<text style="font-size: 12px; font-weight: bold; color: #a3a1a4;">{{li.huifuUser}}</text>
<!-- 12.同时要判断评论人是不是作者，如果是作者就在这里显示 -->
<view v-if="videouserID == li.userID" style="background-color: #E43D33; border-radius: 5upx; margin-left: 15upx;">
<text style="font-size: 8px; font-weight: bold; padding: 5upx; padding-left: 8upx; padding-right: 8upx; font-weight: bold; color: #FFFFFF;">作者</text>
</view>
</view>
<!-- 13.图片是一个向右的小图标 -->
<image src="@/static/douyin/you-3.png" style="width: 20upx; height: 20upx; margin-top: 5upx; margin-left: 10upx;"></image>
<!-- 14.被回复用户的名称 会显示在这里 -->
<view style="display: flex; flex-direction: row; margin-left: 10upx;">
<text style="font-size: 12px; font-weight: bold; color: #a3a1a4;">{{li.gethuifuUser}}</text>
<!-- 15.同时要判断评论人是不是作者，如果是作者就在这里显示 -->
<view v-if="videouserID == li.gethuifuUserID" style="background-color: #E43D33; border-radius: 5upx; margin-left: 15upx;">
<text style="font-size: 8px; font-weight: bold; padding: 5upx; padding-left: 8upx; padding-right: 8upx; font-weight: bold; color: #FFFFFF;">作者</text>
</view>
</view>
</view>
<!-- 16.
由于 rich-text 有很多 bug
所以这里已经摒弃了，
使用自研文本表情解析器
-->
<view v-if="li.pinlunContent.length !== 0" @click="sonhuifu(index,inde)" :style="'width: '+ (Width*0.8*0.85) +'px; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 14upx;'">
<block v-for="(lili,inde) in li.pinlunContent[0].children" :key="inde">
<text v-if="lili.name == 'text'" :style="'font-size: 15px; font-weight: bold; color: #FFFFFF; margin-left: -3upx;'">{{lili.text}}</text>
<image v-if="lili.name == 'img'" :src="lili.attrs.src" style="width: 42upx; height: 42upx; margin-left: 2upx; margin-right: 2upx; margin-top: -2upx;"></image>
</block>
</view>
<!-- 17.如果 子评论 用户输入了 GIF 表情，就会在这里显示 -->
<image v-if="li.imageURL !== ''" :src="li.imageURL" mode="aspectFill" style="width: 140upx; height: 140upx; margin-top: 20upx; border-radius: 10upx;"></image>
<!-- 18.这里就是 时间、回复、点赞、点赞量显示的地方 -->
<view :style="'width: '+ (Width*0.8*0.85) +'px; height: 40upx; display: flex; flex-direction: row; margin-top: 25upx;'">
<text style="font-size: 12px; color: #a3a1a4;">{{li.time}}</text>
<text @click="sonhuifu(index,inde)" style="font-size: 12px; font-weight: bold; color: #a3a1a4; margin-left: 20upx;">回复</text>
<text @click="deletesonpinlun(index,inde)" v-if="userID == li.userID" style="font-size: 12px; font-weight: bold; color: #a3a1a4; margin-left: 20upx;">删除</text>
<image v-if="!pinlun_list[index].sonPinlun[inde].mylike" @click="tosonlike(index,inde)" src="@/static/douyin/dianzan-7.png" style="width: 35upx; height: 35upx; position: absolute; right: 20upx; margin-left: 5upx;"></image>
<image v-if="pinlun_list[index].sonPinlun[inde].mylike" @click="tosonlike(index,inde)" src="@/static/douyin/dianzan-6.png" style="width: 35upx; height: 35upx; position: absolute; right: 20upx; margin-left: 5upx;"></image>
<text @click="tosonlike(index,inde)" style="font-size: 12px; color: #a3a1a4; position: absolute; right: 62upx; margin-top: 10upx;">{{li.like.length}}</text>
</view>
</view>
</view>
</block>
<!-- 19。显示 【展开xx条评论】、【收起评论】 -->
<view v-if="list.sonpinlunLength !== 0" @click="zhangkai(index)" :style="'width: '+ (Width*0.8) +'px; display: flex; flex-direction: row; margin-top: 30upx;'">
<view style="width: 60upx; height: 1px; background-color: #a3a1a4; opacity: 0.6; margin-top: 13upx;"></view>
<text style="font-size: 12px; font-weight: bold; color: #cdcbd4; margin-left: 12upx;">{{list.sonpinlunText}}</text>
</view>
</view>
</view>
<!-- 20.留一定的高度以免视图被遮挡 -->
<view v-if="index == (pinlunList.length-1)" :style="'width: '+ Width +'px; height: 80px;'"></view>
</cell>
</list>
</view>
<!-- 21.底部，模拟假的输入框 -->
<view v-if="show && ischangepinlun==false" @touchstart="openPinglun" :style="'width: '+ Width +'px; height: '+ plHeight +'px; background-color: #000000; position: fixed; bottom: 0;'">
<view :style="'width: '+ (Width-30) +'px; height: 42px; margin-left: 15px; margin-top: 20upx; background-color: #181818; border-radius: 100upx; display: flex; flex-direction: row;'">
<text v-if="platform=='ios'" style="font-size: 14px; color: #a3a1a4; margin-top: 20upx; margin-left: 30upx;">有爱评论，说点好听的～</text>
<text v-if="platform!=='ios'" style="font-size: 14px; color: #a3a1a4; margin-top: 25upx; margin-left: 30upx;">有爱评论，说点好听的～</text>
<!-- <image src="@/static/douyin/atuser-2.png" style="width: 70upx; margin-top: 15upx; height: 70upx; position: absolute; right: 110upx; margin-top: 10upx;"></image> -->
<image src="@/static/douyin/biaoqing.png" style="width: 50upx; margin-top: 15upx; height: 50upx; position: absolute; right: 25upx;"></image>
</view>
</view>
<view v-if="show && ischangepinlun==true" @touchstart="openPinglun" :style="'width: '+ Width +'px; height: '+ plHeight +'px; background-color: #000000;'">
<view :style="'width: '+ (Width-30) +'px; height: 42px; margin-left: 15px; margin-top: 20upx; background-color: #181818; border-radius: 100upx; display: flex; flex-direction: row;'">
<text v-if="platform=='ios'" style="font-size: 14px; color: #a3a1a4; margin-top: 20upx; margin-left: 30upx;">有爱评论，说点好听的～</text>
<text v-if="platform!=='ios'" style="font-size: 14px; color: #a3a1a4; margin-top: 25upx; margin-left: 30upx;">有爱评论，说点好听的～</text>
<!-- <image src="@/static/douyin/atuser-2.png" style="width: 70upx; margin-top: 15upx; height: 70upx; position: absolute; right: 110upx; margin-top: 10upx;"></image> -->
<image src="@/static/douyin/biaoqing.png" style="width: 50upx; margin-top: 15upx; height: 50upx; position: absolute; right: 25upx;"></image>
</view>
</view>
<!--
下面就是真正的评论框
包含：
1.输入框
2.表情输入框
3.GIF表情库
4.最近使用表情和全部表情
5.自己上传表情
6. @ 自己的好友
7.自带微博表情 和 QQ 表情
8.能记忆输入
-->
<uni-popup type="bottom" ref="openPinglun" @touchmove.stop.prevent="movehandle" @change="change">
<view style="display: flex; flex-direction: column;">
<view @click="openPinglun" :style="'width: '+ Width +'px; background-color: #FFFFFF; display: flex; flex-direction: row;'">
<view :style="'width: '+ (Width-30)*percent +'px; margin-left: 15px; margin-top: 20upx; background-color: #f2f0f4; border-radius: '+ borderRadius +'upx; margin-bottom: 20upx; display: flex; flex-direction: row;'">
<!--
9.输入框
-->
<textarea
:style="'width: '+ (Width*0.6)*percent +'px; height: 20px; margin-bottom: 20upx; font-size: 15px; color: #000000; margin-top: 20upx; margin-left: 30upx;'"
:placeholder="placeholder"
:cursor-spacing="cursorSpacing"
:auto-focus="autoFocus"
:auto-height="autoHeight"
:adjust-position="adjustPosition"
v-model="value"
maxlength="150"
@linechange="linechange"
@keyboardheightchange="keyboardheightchange"
@focus="focus"
@click="clickTextarea"
@blur="blur"
></textarea>
<!-- <image src="@/static/douyin/atuser.png" style="width: 70upx; height: 70upx; position: absolute; right: 110upx; margin-top: 8upx;"></image> -->
<!-- 10.点击表情展开评论框 -->
<image v-if="!isopen" @click="toemoji" src="@/static/douyin/biaoqing-2.png" style="width: 50upx; margin-top: 15upx; height: 50upx; position: absolute; right: 25upx;"></image>
<image v-if="isopen" @click="toemoji" src="@/static/douyin/jianpan.png" style="width: 50upx; margin-top: 15upx; height: 50upx; position: absolute; right: 25upx;"></image>
</view>
<!-- 11.发送按钮
符合：有内容、或者是输入 GIF 图片都可以通过
-->
<view v-if="(value!=='' || imageURL !== '') && isSend" @click="sendSMS" style="width: 30px; height: 30px; border-radius: 40px; background-color: #ff1a63; margin-top: 30upx; margin-left: 20upx;">
<image src="@/static/douyin/shangyi.png" style="width: 30upx; height: 30upx; margin-top: 16upx; margin-left: 16upx;"></image>
</view>
</view>
</view>
<!-- 12.用于显示用户选择的 GIF 图片 -->
<view v-if="isShowImage" :style="'width: '+ Width +'px; height: 75px; background-color: #FFFFFF;'">
<view style="display: flex; flex-direction: row;">
<image :src="imageURL" mode="aspectFill" style="width: 120upx; height: 120upx; margin-top: 10upx; margin-left: 50upx;"></image>
<image @click="deleteimageURL" src="@/static/douyin/zfxsc.png" style="width: 30upx; height: 30upx; position: absolute; margin-left: 140upx; margin-top: 12upx;"></image>
</view>
</view>
<!-- 13.
表情 区
-->
<view :style="'width: '+ Width +'px; height: '+ emojiHeight +'px; background-color: #FFFFFF;'">
<!--
isToShow：这个参数用于控制显示，不动它即可
-->
<block v-if="isToShow">
<!-- 14.表情选择栏：
最近输入的 GIF 图在：timeEmoji
默认展示的 表情 ：nowEmoji
自己上传的图片：likeEmoji
GIF 图片库：gifEmoji
-->
<scroll-view :style="'width: '+ Width +'px; height: 40px; background-color: #FFFFFF;'" :scroll-x="true" style="display: flex; flex-direction: row;" :show-scrollbar="false">
<view :style="'display: flex; flex-direction: row; width: '+ Width +'px; padding-top: 10upx; padding-bottom: 10upx; border-bottom: 1upx solid #f3f1f4;'">
<view :style="'width: 90upx; height: 60upx; border-radius: 60upx; position: absolute; background-color: #f8f4f7; margin-top: -8upx; margin-left: '+ (Width*0.04)*currentNum +'px;'"></view>
<image @click="timeEmoji" src="@/static/douyin/time.png" style="width: 45upx; height: 45upx; margin-left: 50upx;"></image>
<image @click="nowEmoji" src="@/static/douyin/biaoqing-2.png" style="width: 50upx; height: 50upx; margin-left: 50upx; margin-top: -5upx;"></image>
<image @click="likeEmoji" src="@/static/douyin/xianxing.png" style="width: 55upx; height: 55upx; margin-left: 50upx; margin-top: -5upx;"></image>
<view @click="gifEmoji" style="width: 45upx; height: 45upx; border-radius: 55upx; border: 2px solid #303133; margin-left: 52upx; margin-top: 0upx;">
<image src="@/static/douyin/gif-2.png" style="width: 35upx; height: 35upx;"></image>
</view>
</view>
</scroll-view>
<!-- 15.表情选择栏：
最近输入的 GIF 图在：timeEmoji
默认展示的 表情 ：nowEmoji
自己上传的图片：likeEmoji
GIF 图片库：gifEmoji
-->
<swiper :style="'width: '+ Width +'px; height: '+ (emojiHeight-40) +'px; background-color: #FFFFFF;'" :current="current" @change="currentChange">
<swiper-item>
<scroll-view :style="'width: '+ Width +'px; height: '+ (emojiHeight-40) +'px; background-color: #FFFFFF;'" :scroll-y="true">
<text v-if="nowImage.length !== 0" @click="qingkonGIF" style="font-size: 12px; margin-top: 20upx; position: absolute; right: 40upx; color: #007AFF;">清空</text>
<view style="display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 40upx;">
<block v-for="(list,index) in nowImage" :key="index">
<image @click="clicknowImage(index)" :src="list" mode="aspectFill" style="width: 120upx; height: 120upx; margin-top: 40upx; margin-left: 55upx;"></image>
<image @click="deletenowImage(index)" src="@/static/douyin/zfxsc.png" style="width: 30upx; height: 30upx; position: absolute; right: 0; margin-top: 40upx;"></image>
</block>
<block v-if="nowImage.length == 0">
<text :style="'font-size: 14px; color: #999999; margin-top: 200upx; margin-left: '+ (Width/3.2) +'px;'">～ 您还没使用过图片 ～</text>
</block>
</view>
<view :style="'width: '+ Width +'px; height: 80px;'"></view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view :style="'width: '+ Width +'px; height: '+ (emojiHeight-40) +'px; background-color: #FFFFFF;'" :scroll-y="true">
<block v-if="nowTimeEmojiList.length !== 0">
<text style="font-size: 12px; margin-top: 20upx; margin-left: 30upx;">最近使用</text>
<text @click="qingkon" style="font-size: 12px; margin-top: 20upx; position: absolute; right: 40upx; color: #007AFF;">清空</text>
<view style="display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 20upx;">
<!-- QQ - 表情包 -->
<block v-for="(list,index) in nowTimeEmojiList" :key="index">
<image @click="clicknowTimeEmoji(index)" :src="'../../static/emojis/qq/'+list.url+''" style="width: 35px; height: 35px; margin-top: 30upx; margin-left: 36upx;"></image>
</block>
<!-- 新浪微博 - 表情包 -->
<!-- <block v-for="(list,index) in sinaEmojilist">
<image @click="clicksinaEmoji(index)" :src="list.url" style="width: 35px; height: 35px; margin-top: 30upx; margin-left: 36upx;"></image>
</block> -->
</view>
</block>
<text style="font-size: 12px; margin-top: 20upx; margin-left: 30upx;">全部表情</text>
<view style="display: flex; flex-direction: row; flex-wrap: wrap;">
<!-- QQ - 表情包 -->
<block v-for="(list,index) in emojilist" :key="index">
<image @click="clickEmoji(index)" :src="'../../static/emojis/qq/'+list.url+''" style="width: 35px; height: 35px; margin-top: 30upx; margin-left: 36upx;"></image>
</block>
<!-- 新浪微博 - 表情包 -->
<!-- <block v-for="(list,index) in sinaEmojilist">
<image @click="clicksinaEmoji(index)" :src="list.url" style="width: 35px; height: 35px; margin-top: 30upx; margin-left: 36upx;"></image>
</block> -->
</view>
<view :style="'width: '+ Width +'px; height: 80px;'"></view>
</scroll-view>
<view v-if="platform=='ios'" style="position: absolute; display: flex; flex-direction: row; bottom: 0; right: 0; width: 300upx; height: 160upx; background-color: #FFFFFF; box-shadow: -20px -40px 20px 60upx #FFFFFF; border-radius: 2upx;">
<view @click="undo" style="width: 130upx; height: 60upx; margin-top: 20upx; border-radius: 40upx; border: 1upx solid #c6c5c8;">
<image src="@/static/douyin/shanchu-3.png" style="width: 45upx; height: 30upx; margin-top: 15upx; margin-left: 40upx;"></image>
</view>
<!-- 16.发送按钮
符合：有内容、或者是输入 GIF 图片都可以通过
-->
<view v-if="(value!=='' || imageURL !== '') && isSend" @click="sendSMS" style="width: 130upx; height: 60upx; margin-top: 20upx; margin-left: 20upx; border-radius: 40upx; background-color: #ff1a63;">
<text style="font-size: 14px; font-weight: bold; text-align: center; color: #FFFFFF; padding-top: 10upx;">发送</text>
</view>
<view v-if="(value == '' && imageURL == '') && isSend" style="width: 130upx; height: 60upx; margin-top: 20upx; margin-left: 20upx; border-radius: 40upx; background-color: #bab9bb;">
<text style="font-size: 14px; font-weight: bold; text-align: center; color: #FFFFFF; padding-top: 10upx;">发送</text>
</view>
</view>
<view v-if="platform!=='ios'" style="position: absolute; display: flex; flex-direction: row; bottom: 20upx; right: 20upx; width: 300upx; height: 80upx; padding: 10upx; background-color: #eceef1; border-radius: 20upx;">
<view @click="undo" style="width: 130upx; height: 60upx; margin-top: 0; border-radius: 40upx; border: 1upx solid #c6c5c8;">
<image src="@/static/douyin/shanchu-3.png" style="width: 45upx; height: 30upx; margin-top: 15upx; margin-left: 40upx;"></image>
</view>
<!-- 16.发送按钮
符合：有内容、或者是输入 GIF 图片都可以通过
-->
<view v-if="(value!=='' || imageURL !== '') && isSend" @click="sendSMS" style="width: 130upx; height: 60upx; margin-top: 0; margin-left: 20upx; border-radius: 40upx; background-color: #ff1a63;">
<text style="font-size: 14px; font-weight: bold; text-align: center; color: #FFFFFF; padding-top: 10upx;">发送</text>
</view>
<view v-if="(value == '' && imageURL == '') && isSend" style="width: 130upx; height: 60upx; margin-top: 0; margin-left: 20upx; border-radius: 40upx; background-color: #bab9bb;">
<text style="font-size: 14px; font-weight: bold; text-align: center; color: #FFFFFF; padding-top: 10upx;">发送</text>
</view>
</view>
</swiper-item>
<swiper-item>
<scroll-view :style="'width: '+ Width +'px; height: '+ (emojiHeight-40) +'px; background-color: #FFFFFF;'" :scroll-y="true">
<view style="display: flex; flex-direction: row; flex-wrap: wrap;">
<view v-if="platform=='ios'" @click="addlikeImage" style="width: 120upx; height: 120upx; border-radius: 10upx; border: 1upx dashed #000000; margin-top: 40upx; margin-left: 55upx;">
<image src="@/static/douyin/jia-9.png" style="width: 50upx; height: 50upx; margin-top: 35upx; margin-left: 35upx;"></image>
</view>
<view v-if="platform!=='ios'" @click="addlikeImage" style="width: 120upx; height: 120upx; border-radius: 10upx; border: 1px solid #000000; margin-top: 40upx; margin-left: 55upx;">
<image src="@/static/douyin/jia-9.png" style="width: 50upx; height: 50upx; margin-top: 35upx; margin-left: 35upx;"></image>
</view>
<block v-for="(list,index) in likeImage" :key="index">
<image @click="clickLikeImage(index)" :src="list" mode="aspectFill" style="width: 120upx; height: 120upx; margin-top: 40upx; margin-left: 55upx;"></image>
<image @click="deleteImage(index)" src="@/static/douyin/zfxsc.png" style="width: 30upx; height: 30upx; position: absolute; right: 0; margin-top: 40upx;"></image>
</block>
</view>
<view :style="'width: '+ Width +'px; height: 80px;'"></view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view :style="'width: '+ Width +'px; height: '+ (emojiHeight-40) +'px; background-color: #FFFFFF;'" :scroll-y="true" @scrolltolower="scrolltolowerGIF">
<view style="display: flex; flex-direction: row; flex-wrap: wrap;">
<view v-if="platform=='ios'" @click="searchGIF" style="width: 120upx; height: 120upx; border-radius: 10upx; border: 1upx dashed #000000; margin-top: 40upx; margin-left: 55upx;">
<image src="@/static/douyin/sousuo-7.png" style="width: 50upx; height: 50upx; margin-top: 35upx; margin-left: 35upx;"></image>
</view>
<view v-if="platform!=='ios'" @click="searchGIF" style="width: 120upx; height: 120upx; border-radius: 10upx; border: 1px solid #000000; margin-top: 40upx; margin-left: 55upx;">
<image src="@/static/douyin/sousuo-7.png" style="width: 50upx; height: 50upx; margin-top: 35upx; margin-left: 35upx;"></image>
</view>
<block v-for="(list,index) in gifAndpnglist" :key="index">
<image @click="clickGIF(index)" :src="list.url" mode="aspectFill" style="width: 120upx; height: 120upx; margin-top: 40upx; margin-left: 55upx;"></image>
</block>
</view>
<view :style="'width: '+ Width +'px; height: 80px;'"></view>
</scroll-view>
</swiper-item>
</swiper>
</block>
<block v-if="!isToShow">
<!-- 这里为空即可，不加任何东西 -->
</block>
</view>
</uni-popup>
<!-- 1.
这个弹窗用于搜索 GIF
-->
<uni-popup type="bottom" ref="searchEmoji" @touchmove.stop.prevent="movesearch" @change="searchGIFChange">
<view v-if="searchGIFValue !== ''" :style="'width: '+ Width +'px; height: 80px; border-bottom: 1upx solid #e3e1e5; background-color: #FFFFFF; border-top-left-radius: 20upx; border-top-right-radius: 20upx;'">
<!-- 2.
搜出来的 GIF 都在这里
-->
<scroll-view :style="'width: '+ Width +'px; height: 80px; border-bottom: 1upx solid #e3e1e5; display: flex; flex-direction: row;'" :scroll-x="true" style="display: flex; flex-direction: row;" :show-scrollbar="false">
<block v-for="(list,index) in GifList" :key="index">
<image @click="selectGIF(index)" :src="list.url" mode="aspectFill" style="width: 120upx; height: 120upx; margin-top: 20upx; margin-left: 20upx;"></image>
</block>
<view style="width: 20upx; height: 120upx; margin-left: 10upx;"></view>
</scroll-view>
</view>
<!-- 3.
动态图输入框
-->
<view :style="'width: '+ Width +'px; background-color: #FFFFFF; display: flex; flex-direction: row;'">
<view :style="'width: '+ (Width-30) +'px; margin-left: 15px; margin-top: 20upx; background-color: #FFFFFF; margin-bottom: 20upx; display: flex; flex-direction: row;'">
<input
:style="'width: '+ (Width*0.8) +'px; height: 20px; margin-bottom: 20upx; font-size: 15px; color: #000000; margin-top: 15upx; margin-left: 30upx;'"
placeholder="搜索表情包"
v-model="searchGIFValue"
:auto-focus="true"
:adjust-position="false"
@blur="blurGIF"
/>
<image v-if="searchGIFValue !== ''" @click="clearSearchValue" src="@/static/douyin/chacha-4.png" style=" width: 25upx; height: 25upx; margin-top: 20upx; margin-left: 30upx;"></image>
</view>
</view>
<view v-if="platform=='ios'" :style="'width: '+ Width +'px; height: '+ (emojiHeight+40) +'px; background-color: #FFFFFF;'">
<!-- 这里不要动就行 -->
</view>
<view v-if="platform!=='ios'" :style="'width: '+ Width +'px; height: '+ emojiHeight +'px; background-color: #FFFFFF;'">
<!-- 这里不要动就行 -->
</view>
</uni-popup>
</view> </template>
<script>
// 1.先引入表情库，（完全手撸，十分繁琐）（这个是 QQ 的表情库）
import emojiList from '@/common/emoji/biaoqin.js'
// 2.这个表情库是新浪微博 的表情库
import sinaEmojiList from '@/common/emoji/sina.js'
// 3.这个一定要引入进来，用来解析生成的 <html>【
