Skip to content

H
h5-watch
Commit 449f5879 by suwenbiao
Options

Merge remote-tracking branch 'origin/master'

parents b2c08be5 a3bf34e5
Showing with 638 additions and 62 deletions
components/chat/chat.vue
<template>
<scroll-view scroll-y="true" class="chat" show-scrollbar="true">
<scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="true" @scroll="scrollBottom" :class="scrollFalg ? 'pb-5' : ''">
<view class="cavasation my-1" v-for="(item,index) in datalist" :key="index+''">
<view class="person">
<u-avatar :src="item.avatar" size="80"></u-avatar>
......@@ -17,6 +17,7 @@
name: "chat",
data() {
return {
scrollFalg:false,
datalist:[
{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
......@@ -26,7 +27,14 @@
{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
]
}
},
methods:{
scrollBottom(){
console.log("333")
this.scrollFalg = true;
}
}
}
</script>
......@@ -37,11 +45,14 @@
.my-1{
margin: 10rpx 0;
}
.pb-5{
padding-bottom: 50rpx;
}
.chat{
box-sizing: border-box;
height: 700rpx;
height:calc(100vh - 500rpx);
padding: 40rpx;
font-size: 26rpx;
// font-size: 26rpx;
letter-spacing:2rpx;
.person{
display: flex;
......
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>
<view class="input">
<u--input style="background-color: #d9d9d9;height: 64rpx;padding-left:20rpx;" type="text" border="none" shape="circle" placeholder="说点什么吧..." v-model="value" @change="change"></u--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>
</view>
<view class="icon">
<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">
<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>
<!-- 更多 -->
<more class="absolute" @moreClose="moreClose" :show="moreFalg"></more>
<!-- icontab -->
<component class="absolute" :is="currentTabComponent" @onClose="onClose" :show="show"></component>
</view>
</template>
<script>
import more from "./more/more.vue"
import more from "./more/more.vue";
import sign from "./sign/sign.vue";
import gift from "./gift/gift.vue";
import service from "./service/service.vue";
import reward from "./reward/reward.vue";
import shoplist from "./shopList/shoplist.vue"
export default {
name: "foot",
components:{more},
components: {
more,
sign,
gift,
service,
reward,
shoplist
},
data() {
return {
inputFalg: true,
currentTabComponent: '',
show: false,
value: '',
moreFalg:false,
imageList: [{
title: "商城",
url: "../../static/images/商城@2x.png"
url: "../../static/images/shopCart.png"
},
{
title: "礼物",
......@@ -68,34 +85,54 @@
};
},
methods: {
// 输入框点击事件
change(){
// 输入框聚焦事件
inputFocus() {
this.inputFalg = false
},
inputblur() {
this.inputFalg = true
},
// 图标按钮点击事件
iconbtn(title) {
this.show = true;
switch (title) {
case "商城":
this.currentTabComponent = shoplist;
break;
case "礼物":
this.currentTabComponent = gift;
break;
case "打赏":
this.currentTabComponent = reward;
break;
case "更多":
this.moreFalg = !this.moreFalg;
this.currentTabComponent = more;
break;
case "签到":
this.currentTabComponent = sign;
break;
case "举手":
break;
case "客服":
this.currentTabComponent = service;
break;
}
},
// 更多
moreClose(){ this.moreFalg = false },
onClose(str) {
this.show = false;
this.currentTabComponent = ''
},
}
}
</script>
<style lang="scss" scoped>
.absolute{
position:absolute;
.absolute {
position: absolute;
}
.content {
width: 100%;
display: flex;
......@@ -103,7 +140,8 @@
padding: 0 40rpx;
.input {
width: 294rpx;
// width: 294rpx;
flex: 1;
}
.icon {
......
components/footer/gift/gift.vue 0 → 100644
<template>
<u-popup :show="show" mode="bottom" @close="onClose" :round="20">
<view class="box">
<view class="header flex">
<text>礼物</text>
<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' : ''">
<view class="image-padding">
<image :src="item.url" style="width:94rpx;" mode="widthFix" @click="giftClick(index)">
</image>
</view>
<text class="">{{currentIndex == index ? "赠送" : item.title}}</text>
</view>
</swiper-item>
</swiper>
</view>
</u-popup>
</template>
<script>
export default {
name: "more",
props: ["show"],
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"
},
]
}
},
methods: {
onClose() {
this.$emit("onClose", "more");
},
giftClick(index) {
this.currentIndex = index;
},
}
}
</script>
<style lang="scss" scoped>
.mt-1 {
margin-top: 10rpx;
}
.flex {
display: flex;
}
.flex-around {
justify-content: space-around;
}
.image-padding {
padding: 16rpx;
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: left;
align-items: center;
width: 126rpx;
color: #777777;
font-size: 28rpx;
}
.text-center {
text-align: center;
}
.header {
justify-content: space-between;
padding: 32rpx 40rpx;
}
.box {
height: 440rpx;
}
.active {
view {
background-color: #F7F7F7;
border-radius: 10rpx 10rpx 0 0;
}
text {
display: inline-block;
width: 100%;
background-color: #FF506F;
color: white;
text-align: center;
padding: 5rpx 0;
}
}
</style>
components/footer/more/component/index.vue 0 → 100644
<template>
<u-popup :show="show" mode="bottom" @close="onClose" :round="20">
<view class="box">
<view class="header flex">
<text>{{title}}</text>
<u-icon name="close" @click="onClose"></u-icon>
</view>
<view>
<view v-for="(item,index) in data" :key="index+''" class="flex-col my">
<u-button>{{item}}</u-button>
</view>
</view>
</view>
</u-popup>
</template>
<script>
export default {
props:["show","data","title"],
data() {
return {
}
},
methods: {
onClose(){
this.$emit("onClose");
},
}
}
</script>
<style lang="scss" scoped>
.my{
margin:12rpx 0;
}
.flex{
display: flex;
}
.header{
justify-content: space-between;
padding: 32rpx 0;
}
.box{
height: 440rpx;
padding: 0 40rpx;
}
</style>
\ No newline at end of file
components/footer/more/more.vue
<template>
<u-popup :show="show" mode="bottom" @close="onClose" :round="20">
<view class="box">
<view class="header flex">
<span>更多</span>
<u-popup :show="show" mode="bottom" @close="onClose" :round="20">
<view class="box">
<view class="header flex">
<text>更多</text>
<u-icon name="close" @click="onClose"></u-icon>
</view>
<view class="flex">
<view class="flex">
<view v-for="(item,index) in datalist" :key="index+''" class="flex-col">
<image :src="item.url" style="width:60rpx;border: 1px solid grey;height: 60rpx;" mode="widthFix"></image>
<span class="mt-1">{{item.title}}</span>
<image @click="skip(index)" :src="item.url" style="width:60rpx;height: 60rpx;" mode="widthFix">
</image>
<text class="mt-1">{{item.title}}</text>
</view>
</view>
</view>
</view>
<!-- 子页面 -->
<typeSkip :show="typeFalg" :title="title" :data="typeList" @onClose="onClose"></typeSkip>
</u-popup>
</template>
<script>
export default {
name:"more",
props:["show"],
data() {
return {
datalist:[
{title:"私聊" , url:"../../../static/images/IM.png"},
{title:"线路切换" , url:"../../../static/images/skip.png"},
{title:"直播类型" , url:"../../../static/images/type.png"},
]
}
},
methods: {
onClose(){
this.$emit("moreClose");
},
}
}
import typeSkip from "./component/index.vue";
export default {
name: "more",
props: ["show"],
components: {
typeSkip
},
data() {
return {
typeFalg: false,
title:"",
typeList:[],
datalist: [{
title: "私聊",
url: "/static/images/IM.png"
},
{
title: "线路切换",
url: "/static/images/skip.png",
list: ["线路1", "线路2"]
},
{
title: "直播类型",
url: "/static/images/type.png",
list:["标准直播","快直播"]
},
]
}
},
methods: {
onClose() {
this.$emit("onClose");
},
skip(index) {
this.typeFalg = true;
this.title = this.datalist[index].title;
console.log(this.title)
this.typeList = this.datalist[index].list;
}
}
}
</script>
<style lang="scss" scoped>
.mt-1{
.mt-1 {
margin-top: 10rpx;
}
.flex{
.flex {
display: flex;
}
.flex-col{
.flex-col {
display: flex;
flex-direction: column;
justify-content: left;
......@@ -51,14 +79,17 @@
color: #777777;
font-size: 28rpx;
}
.text-center{
.text-center {
text-align: center;
}
.header{
.header {
justify-content: space-between;
padding: 32rpx 40rpx;
}
.box{
.box {
height: 440rpx;
}
</style>
\ No newline at end of file
</style>
components/footer/reward/reward.vue 0 → 100644
<template>
<u-overlay :show="show" class="flex">
<view class="box flex flex-col">
<u-icon name="close" @click="close" class="icon" color="white" size="50"></u-icon>
<view class="content">
<view class="x-between flex">
<text class="money" v-for="item in moneyList" :key="item">{{item}}</text>
</view>
<u--input class="mt-2" inputAlign="center" style="background-color: white;" placeholder="请输入其他金额" border="surround" v-model="value" @change="change"></u--input>
</view>
<text class="font-pay">支付</text>
</view>
</u-overlay>
</template>
<script>
export default {
name: "reward",
props: ["show"],
data() {
return {
moneyList: ["1元", "2元", "3元"],
value:""
};
},
methods: {
close() {
this.$emit("onClose")
}
}
}
</script>
<style lang="scss" scoped>
.mt-2{
margin-top: 24rpx;
}
.mt-5{
margin-top: 50rpx;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.flex-col {
flex-direction: column;
}
.x-between {
justify-content: space-between;
}
.icon{
position: absolute;
top: 380rpx;
right: 150rpx;
}
.money {
display: inline-block;
width: 112rpx;
height: 64rpx;
line-height: 64rpx;
background-color: #FEE287;
color: #FF7A00;
border-radius: 10rpx;
text-align: center;
}
.font-pay{
color: white;
font-size: 26rpx;
font-weight: bold;
transform: translate(0,50rpx);
}
.box {
width: 560rpx;
height: 678rpx;
background-image: url("../../../static/images/reword/bg-reward.png");
background-repeat: no-repeat;
background-size: contain;
.content {
width: 360rpx;
text-align: center;
margin-top: 300rpx;
}
}
</style>
components/footer/service/service.vue 0 → 100644
<template>
<view>
<u-popup :show="show" @close="close" mode="center" :round="20">
<view class="content">
<image class="imageHead" src="@/static/images/service.png" style="width:480rpx;" mode="widthFix"></image>
<u-icon class="icon" name="close" color="white" @click="close"></u-icon>
<swiper class="flex-8" indicator-dots>
<swiper-item class="flex" v-for="item in teacherList" :key="item.teacher">
<image :src="item.url" style="width: 240rpx;" mode="widthFix"></image>
<text>{{item.title}}</text>
</swiper-item>
</swiper>
<view class="flex-2 message">{{message}}</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
name:"service",
props:["show"],
data() {
return {
message:"扫码或长按二维码，立即咨询",
teacherList:[
{url:"/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png",title:"汪老师"},
{url:"/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png",title:"李老师"}
]
}
},
methods: {
close() {
this.$emit("onClose")
}
}
}
</script>
<style lang="scss" scoped>
.message{
text-align: center;
}
.flex{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.flex-8{
flex:9;
}
.flex-2{
flex:1;
}
.content{
width: 480rpx;
height: 624rpx;
padding-top: 172rpx;
padding-bottom: 10rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
.imageHead{
position: absolute;
top:-60rpx;
}
}
.icon{
position: absolute;
right: 24rpx;
top: 0rpx;
}
</style>
\ No newline at end of file
components/footer/shopList/shoplist.vue 0 → 100644
<template>
<u-popup :show="show" mode="bottom" @close="onClose" :round="20">
<u-icon class="icon" name="close" @click="onClose"></u-icon>
<view class="box" style="overflow-y: auto;">
<view class="flex my" v-for="(item,index) in list" :key="index+''">
<image :src="item.url" style="width: 200rpx;" mode="widthFix"></image>
<view class="ml-2">
<view>{{item.text}}</view>
<view class="flex x-between">
<text class="price">￥{{item.price}}</text>
<text class="oldprice">{{item.oldPrice}}</text>
<text class="btn">立即查看</text>
</view>
</view>
</view>
</view>
</u-popup>
</template>
<script>
export default {
name: "shoplist",
props: ["show"],
data() {
return {
list:[
{
url:"/static/images/banner.png",
text:"卡罗莱全自动机械表时尚男士手表官方新款防水腕表潮",
price:"2488.00",
oldPrice:"2988.00"
},
{
url:"/static/images/banner.png",
text:"卡罗莱全自动机械表时尚男士手表官方新款防水腕表潮",
price:"2488.00",
oldPrice:"2988.00"
},
{
url:"/static/images/banner.png",
text:"卡罗莱全自动机械表时尚男士手表官方新款防水腕表潮",
price:"2488.00",
oldPrice:"2988.00"
},
{
url:"/static/images/banner.png",
text:"卡罗莱全自动机械表时尚男士手表官方新款防水腕表潮",
price:"2488.00",
oldPrice:"2988.00"
},
{
url:"/static/images/banner.png",
text:"卡罗莱全自动机械表时尚男士手表官方新款防水腕表潮",
price:"2488.00",
oldPrice:"2988.00"
},
{
url:"/static/images/banner.png",
text:"卡罗莱全自动机械表时尚男士手表官方新款防水腕表潮",
price:"2488.00",
oldPrice:"2988.00"
}
]
}
},
methods: {
onClose() {
this.$emit("onClose");
},
}
}
</script>
<style lang="scss" scoped>
.flex {
display: flex;
}
.ml-2{
margin-left: 20rpx;
}
.my{
margin: 40rpx 0;
}
.x-between{
justify-content: space-between;
align-items: center;
}
.icon{
position: absolute;
top:20rpx;
right: 20rpx;
}
.box {
height: 700rpx;
padding: 40rpx 40rpx 0 40rpx;
.price{
color: #FE3368;
}
.oldprice{
color: #999999;
text-decoration: line-through;
font-size: 14rpx;
transform: translate(-30rpx,0);
}
.btn{
color: white;
background-color: #FE3368;
line-height: 70rpx;
padding: 0 20rpx;
border-radius: 20rpx;
font-size: 20rpx;
}
}
</style>
components/footer/sign/sign.vue 0 → 100644
<template>
<view class="font">
<u-popup :show="show" @close="close" mode="center" :round="20">
<view class="content">
<image @click="sign" class="mb-2" :src="signUrl" style="height: 252rpx;" mode="heightFix"></image>
<text v-if="messageFalg">点击上方按钮，即可完成签到</text>
</view>
<u-icon name="close" class="icon" @click="close"></u-icon>
</u-popup>
</view>
</template>
<script>
export default {
name:"sign",
props:["show"],
data() {
return {
signUrl:"/static/images/signBefore.png",
messageFalg:true
}
},
methods: {
close() {
this.$emit("onClose")
},
sign(){
this.signUrl = "/static/images/signAfter.png";
this.messageFalg = false;
}
}
}
</script>
<style lang="scss" scoped>
.mb-2{
margin-bottom: 20rpx;
}
.font{
color: #999999;
font-size: 24rpx;
}
.content{
height: 360rpx;
width: 514rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.icon{
position: absolute;
top: 30rpx;
right: 30rpx;
}
}
</style>
components/tabs/tabs.vue
......@@ -21,7 +21,7 @@
}, {
name: '课件',
}, {
name: '简介'
name: '直播详情'
}]
};
},
......@@ -36,9 +36,9 @@
<style lang="scss" scoped>
.content {
display: flex;
border: 1px solid grey;
height: 80rpx;
font-size: 32rpx;
box-shadow: 0 2rpx 10rpx #dadada;;
.items {
flex: 1;
text-align: center;
......
pages/index/index.vue
......@@ -4,10 +4,6 @@
<view class="banner"></view>
<login></login>
<tabs></tabs>
<!-- 跑马灯 -->
<view class="title">
<span>{{title}}</span>
</view>
<!-- 聊天 -->
<view class="chat">
<chat></chat>
......@@ -31,7 +27,6 @@
data() {
return {
loading: true,
title: "第五届汽车博览会精彩能容马上呈现",
value:''
}
},
......
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