Skip to content

H
h5-watch
Commit 75f6c674 by suwenbiao
Options

no message

parent 55478b93
Showing with 80 additions and 52 deletions
components/chat/chat.vue
<template>
<view class="box">
<view class="box font-14">
<!-- 特效礼物 -->
<special :url="specialUrl"></special>
<scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="false" :scroll-top="scrollTop">
<view class="cavasation my-1" v-for="(item,index) in msgList" :key="index">
<scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="true">
<view class="cavasation my-2" v-for="(item,index) in datalist" :key="index">
<view class="person">
<u-avatar :src="item.avatar" size="80"></u-avatar>
<u-avatar :src="item.avatar" size="60"></u-avatar>
<span class="ml-1">{{item.name}}</span>
</view>
<view class="content">
<span class="text">{{item.content}}</span>
</view>
</view>
</scroll-view>
</view>
</scroll-view>
</view>
</template>
......@@ -129,9 +133,12 @@
.ml-1 {
margin-left: 10rpx;
}
.font-14{
font-size: 14rpx;
}
.my-1 {
margin: 10rpx 0;
.my-2 {
margin: 20rpx 0;
}
.box {
......@@ -143,7 +150,6 @@
box-sizing: border-box;
height: calc(100vh - 500rpx);
padding: 40rpx;
// font-size: 26rpx;
letter-spacing: 2rpx;
.person {
......
components/footer/footer.vue
<template>
<view class="content">
<image v-show="!inputFalg" src="../../static/images/IM.png" mode="widthFix"
style="width: 68rpx;margin: 0 20rpx 0 0;"></image>
style="width: 68rpx;margin: 0 20rpx 0 0;">
</image>
<view class="input">
<u--input style="background-color: #d9d9d9;height: 64rpx;padding-left:20rpx;" type="text" border="none"
shape="circle" placeholder="说点什么吧..." v-model="value" @focus="inputFocus" @blur="inputblur"
confirmType="发送" confirm="send"></u--input>
</u--input>
</view>
<u-button style="margin: 0 0 0 20rpx;width: 20%;height: 70%;" text="发送" type="success" v-show="!inputFalg" @click="send">
</u-button>
<view class="icon" v-show="inputFalg">
<image v-for="(item,index) in imageList" :key="index+''" :src="item.url" style="width:68rpx" mode="widthFix"
@click="iconbtn(item.title)"></image>
</view>
<view class="icon-right" v-show="inputFalg">
<image class="iconright" v-for="(item,index) in imageListRight" :key="index+''" :src="item.url"
style="width:68rpx" mode="widthFix" @click="iconbtn(item.title)"></image>
</view>
<!-- icontab -->
<component class="absolute" :is="currentTabComponent" @onClose="onClose" :show="show" @specialShow="specialShow"></component>
<component class="absolute" :is="currentTabComponent" @onClose="onClose" :show="show"
@specialShow="specialShow"></component>
</view>
</template>
......@@ -88,10 +93,10 @@
},
methods: {
//提交输入
send(){
send() {
var obj = {
type:1,
sendText:this.value
type: 1,
sendText: this.value
}
msg.methods.send(obj)
this.value = ""
......@@ -136,8 +141,8 @@
this.currentTabComponent = ''
},
// 点击发送特效
specialShow(url){
this.$emit("specialShow",url)
specialShow(url) {
this.$emit("specialShow", url)
}
}
}
......
components/footer/gift/gift.vue
......@@ -6,14 +6,17 @@
<u-icon name="close" @click="onClose"></u-icon>
</view>
<swiper indicator-dots>
<swiper-item class="flex flex-around">
<view v-for="(item,index) in datalist" :key="index+''" class="flex-col"
:class="currentIndex == index ? 'active' : ''">
<swiper-item class="flex" :class="[pers.length >= 5 ? 'flex-around' : '']"
v-for="(pers,index) in datalist" :key="index+''">
<view v-for="(item,i) in pers" :key="item.id" class="w-20 flex-col"
:class="currentIndex == index+i.toString() ? 'active' : ''">
<view class="image-padding">
<image :src="item.url" style="width:94rpx;" mode="widthFix" @click="giftClick(index)">
<image :src="item.giftPicUrl" style="width:94rpx;" mode="widthFix"
@click="giftClick(index,i)">
</image>
</view>
<text @click="send(index)">{{currentIndex == index ? "赠送" : item.title}}</text>
<text v-if="currentIndex == index+i.toString()" @click='send(index,i)'>赠送</text>
<text v-else>{{item.giftPrice == 0 ? "免费" : item.giftPrice+"币"}}</text>
</view>
</swiper-item>
</swiper>
......@@ -27,46 +30,66 @@
data() {
return {
currentIndex: "",
datalist: [{
title: "免费",
url: "/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png"
},
{
title: "免费",
url: "/static/images/gift/0ea40b8376ef8157791b928a339ed9c9_tplv-obj 1@2x.png"
},
{
title: "免费",
url: "/static/images/gift/898bc8988a737b909e952854747c8f7e_tplv-obj 1@2x.png"
},
{
title: "免费",
url: "/static/images/gift/a7ccf403bd4b727447d9ab06f1d9231c 1@2x.png"
},
{
title: "99币",
url: "/static/images/gift/e1972046aa7cc5ae870041a655ddf016_tplv-obj 1@2x.png"
},
total: '00',
datalist: [
// {
// title: "免费",
// url: "/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png"
// },
// {
// title: "免费",
// url: "/static/images/gift/0ea40b8376ef8157791b928a339ed9c9_tplv-obj 1@2x.png"
// },
// {
// title: "免费",
// url: "/static/images/gift/898bc8988a737b909e952854747c8f7e_tplv-obj 1@2x.png"
// },
// {
// title: "免费",
// url: "/static/images/gift/a7ccf403bd4b727447d9ab06f1d9231c 1@2x.png"
// },
// {
// title: "99币",
// url: "/static/images/gift/e1972046aa7cc5ae870041a655ddf016_tplv-obj 1@2x.png"
// },
]
}
},
mounted() {
let _this = this
this.$api.getclientgift().then(res => {
if (res.data.code == 200) {
let data = res.data.data;
let total = Math.ceil(data.length / 5);
_this.total = total
for (let i = 0; i < total - 1; i++) {
if (i == total) break;
let gif = data.splice(i * 5, i * 5 + 5)
_this.datalist.push(gif)
}
}
})
},
methods: {
onClose() {
this.$emit("onClose");
},
giftClick(index) {
this.currentIndex = index;
giftClick(index, i) {
this.currentIndex = index + i.toString();
},
send(index){
if(this.currentIndex != index) return;
send(index, i) {
if (this.currentIndex != index + i.toString()) return;
this.onClose()
this.$emit("specialShow",this.datalist[index].url)
this.$emit("specialShow", this.datalist[index][i].giftPicUrl)
},
}
}
</script>
<style lang="scss" scoped>
.inline{
display: inline-block;
}
.mt-1 {
margin-top: 10rpx;
}
......@@ -84,7 +107,7 @@
}
.flex-col {
display: flex;
display: inline-flex;
flex-direction: column;
justify-content: left;
align-items: center;
......@@ -121,10 +144,4 @@
padding: 5rpx 0;
}
}
@keyframes gift{
from {
}
to{}
}
</style>
unpackage/dist/build/h5/index.html
......@@ -2,4 +2,4 @@
.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2772579d.css><script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script src=https://static.oclive.cn/live.player_commons_5.2.js></script><link rel=stylesheet href=https://g.alicdn.com/de/prismplayer/2.9.19/skins/default/aliplayer-min.css><link href=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.min.css rel=stylesheet><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/TXLivePlayer-1.2.3.min.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/hls.min.1.1.5.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/flv.min.1.6.3.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.v4.5.4.min.js></script><script src=//unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js charset=utf-8></script><script src=//unpkg.byted-static.com/xgplayer-hls/2.5.2/dist/index.min.js charset=utf-8></script></head><body><div id=app></div><script src=/static/js/chunk-vendors.eceae362.js></script><script src=/static/js/index.9df6f2ec.js></script></body></html>
\ No newline at end of file
(coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2772579d.css><script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script src=https://static.oclive.cn/live.player_commons_5.2.js></script><link rel=stylesheet href=https://g.alicdn.com/de/prismplayer/2.9.19/skins/default/aliplayer-min.css><link href=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.min.css rel=stylesheet><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/TXLivePlayer-1.2.3.min.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/hls.min.1.1.5.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/flv.min.1.6.3.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.v4.5.4.min.js></script><script src=//unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js charset=utf-8></script><script src=//unpkg.byted-static.com/xgplayer-hls/2.5.2/dist/index.min.js charset=utf-8></script></head><body><div id=app></div><script src=/static/js/chunk-vendors.eceae362.js></script><script src=/static/js/index.fd6d2792.js></script></body></html>
\ No newline at end of file
unpackage/dist/build/h5/static/js/pages-index-index.25de38a3.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
unpackage/dist/build/h5/static/js/pages-index-index.635484c2.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment