Skip to content

H
h5-watch
Commit 018c7aee by liuliufashi
Options

更改发送按钮

parent 0a066635
Showing with 74 additions and 51 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="true">
<view class="cavasation my-1" v-for="(item,index) in datalist" :key="index+''">
<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">
......@@ -69,9 +69,12 @@
.ml-1 {
margin-left: 10rpx;
}
.font-14{
font-size: 14rpx;
}
.my-1 {
margin: 10rpx 0;
.my-2 {
margin: 20rpx 0;
}
.box {
......@@ -83,7 +86,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"></u--input>
shape="circle" placeholder="说点什么吧..." v-model="value" @focus="inputFocus" @blur="inputblur">
</u--input>
</view>
<u-button style="margin: 0 0 0 20rpx;width: 20%;height: 70%;" text="发送" type="success" v-show="!inputFalg"></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>
......@@ -17,7 +20,8 @@
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>
......@@ -125,8 +129,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>
pages/index/index.vue
......@@ -2,7 +2,7 @@
<view class="contents">
<!-- 视频区 -->
<view class="banner"></view>
<!-- <login></login> -->
<login></login>
<tabs @skipComponent = "skip"></tabs>
<!-- 聊天 -->
<component :is="currentTabComponent" :specialUrl="special"></component>
......@@ -33,7 +33,7 @@
}
},
onLoad() {
},
onshow() {
......
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