You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
418 lines
11 KiB
418 lines
11 KiB
<!--
|
|
版本声明：
|
|
* 由于 WanlLive、WanlChat、以下代码开发难度较大，已将相关代码独立申请著作权，受法律保护！！！
|
|
* 无论你购买任何版本，均不允许复制到第三方直接、间接使用，且也不能以学习为目的参考借鉴
|
|
* 你仅有在 WanlShop 中使用、二次开发权利，否则我们会追究法律责任
|
|
* 深圳前海万联科技有限公司 @www.i36k.com
|
|
-->
|
|
<template>
|
|
<view class="wanl-live-footer">
|
|
<view class="wanl-live-footer-bottom_msg">
|
|
<input type="text"
|
|
v-if="state == 1"
|
|
class="wanl-live-footer-bottom_msg_input"
|
|
confirm-type="send"
|
|
v-model="message"
|
|
@confirm="send('msg')"
|
|
placeholder-style="rgba(255, 255, 255, .8)"
|
|
placeholder-class="wanl-live-footer-bottom_msg_input-placeholder"
|
|
placeholder="问什么都告诉你~"
|
|
/>
|
|
</view>
|
|
<!-- H5 页面需要发送按钮 -->
|
|
<!-- #ifndef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || APP-PLUS -->
|
|
<view class="wanl-live-footer-bottom_send" v-if="state == 1">
|
|
<view class="wanl-live-footer-bottom_send-btn" @tap="send('msg')">
|
|
<text class="wanl-live-footer-bottom_send-btn-text">发送</text>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- 购物袋 -->
|
|
<!-- <view class="wanl-live-footer-bottom_controll"> </view> -->
|
|
<view class="wanl-live-footer-bottom_goods" @tap="popup('open')">
|
|
<view class="wanl-btn wanl-btn-transpare">
|
|
<!-- <text class="wanl-btn-text wanl-live-footer-bottom_goods-btn-text"></text> -->
|
|
<image class="wanl-btn-image" src="/static/images/live/shop.png"/>
|
|
<view class="wanl-btn-tag" v-if="goods.length != 0">
|
|
<text class="wanl-btn-tag-text">{{numFormat(goods.length)}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 发送点赞 -->
|
|
<view class="wanl-live-footer-bottom_praise" @tap="send('like')" v-if="state == 1">
|
|
<view class="wanl-btn">
|
|
<text class="wanl-btn-text wanl-live-footer-bottom_praise-btn-text"></text>
|
|
<view class="wanl-btn-tag" v-if="like != 0">
|
|
<text class="wanl-btn-tag-text">{{numFormat(like)}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 弹出窗口 -->
|
|
<uni-popup ref="goods" type="bottom">
|
|
<view class="wanl-live-popup">
|
|
<view class="wanl-live-popup-title">
|
|
<text class="wanl-live-popup-title-text">共 {{goods.length}} 件商品</text>
|
|
<text class="wanl-live-popup-title-close-text" @tap="popup('close')"></text>
|
|
</view>
|
|
<scroll-view scroll-y="true" class="wanl-live-popup-list">
|
|
<view class="wanl-live-popup-list-item" v-for="(item, index) in goods" :key="item.id">
|
|
<view class="wanl-live-popup-list-item-img">
|
|
<image :src="stcOss(item.image)" class="wanl-live-popup-list-item-image"></image>
|
|
</view>
|
|
<view class="wanl-list-tag" :class="['tagbg_' + (index + 1)]">
|
|
<text class="wanl-list-tag-text">{{index + 1}}</text>
|
|
</view>
|
|
<view class="wanl-live-popup-list-item-subject">
|
|
<view class="wanl-live-popup-list-item-subject-title">
|
|
<text class="wanl-live-popup-list-item-subject-title-text">{{item.title}}</text>
|
|
</view>
|
|
<view class="wanl-live-popup-list-item-subject-operation">
|
|
<view class="wanl-live-popup-list-item-subject-operation-price">
|
|
<text class="wanl-live-popup-list-item-subject-operation-price-text">￥{{item.price}}</text>
|
|
</view>
|
|
<view class="wanl-live-popup-list-item-subject-operation-button">
|
|
<view class="wanl-live-popup-list-item-subject-operation-button-seek" @tap="send('seek',index + 1)" v-if="state == 1">
|
|
<text class="wanl-live-popup-list-item-subject-operation-button-seek-text">求讲解</text>
|
|
</view>
|
|
<view class="wanl-live-popup-list-item-subject-operation-button-shopping" @tap="goods(item.id)">
|
|
<text class="wanl-live-popup-list-item-subject-operation-button-shopping-text"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 多终端兼容性 -->
|
|
<view :style="{height: statusFootHeight + 'px'}"></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "wanlLiveFooter",
|
|
props: {
|
|
statusFootHeight: {
|
|
default: 0
|
|
},
|
|
like:{
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
state:{
|
|
default: 0
|
|
},
|
|
goods: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
beforeCreate() {
|
|
// #ifdef APP-NVUE
|
|
var domModule = weex.requireModule('dom');
|
|
domModule.addRule('fontFace', {
|
|
fontFamily: 'iconfont',
|
|
src: "url('/static/style/iconfont.ttf')"
|
|
});
|
|
// #endif
|
|
},
|
|
data() {
|
|
return {
|
|
message: ''
|
|
};
|
|
},
|
|
methods: {
|
|
// 操作弹出框
|
|
popup(method) {
|
|
this.$refs.goods[method]();
|
|
},
|
|
// 传递给live 消息
|
|
send(type, index){
|
|
switch(type) {
|
|
// 发送消息
|
|
case 'msg':
|
|
if (this.message) {
|
|
this.$emit('change',{
|
|
type: 'msg',
|
|
message: this.message
|
|
});
|
|
this.message = '';
|
|
}
|
|
// 收起键盘
|
|
uni.hideKeyboard();
|
|
break;
|
|
// 点赞
|
|
case 'like':
|
|
this.$emit('change',{type: 'like'});
|
|
break;
|
|
// 求讲解
|
|
case 'seek':
|
|
this.$emit('change',{
|
|
type: 'seek',
|
|
key: index
|
|
});
|
|
this.popup('close');
|
|
break;
|
|
}
|
|
},
|
|
goods(id){
|
|
uni.navigateTo({
|
|
url: `/pages/product/goods?id=${id}`
|
|
})
|
|
this.popup('close');
|
|
},
|
|
stcOss(url){
|
|
let oss = this.$store.state.common.appUrl.oss;
|
|
let image = '';
|
|
if (url) {
|
|
if((/^(http|https):\/\/.+/.test(url))){
|
|
image = url;
|
|
}else{
|
|
image = oss + url;
|
|
}
|
|
}else{
|
|
image = oss + '/assets/addons/wanlshop/img/common/img_default3x.png';
|
|
}
|
|
return image;
|
|
},
|
|
numFormat(num){
|
|
return num > 9999 ? ((num-num%1000)/10000 + 'w') : num
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
@import '@/static/style/wanlnvue.css';
|
|
.wanl-live-footer {
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
padding-top: 18rpx;
|
|
padding-bottom: 18rpx;
|
|
}
|
|
/* 消息按钮 */
|
|
.wanl-live-footer-bottom_msg {
|
|
/* #ifndef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || APP-PLUS */
|
|
flex: 3;
|
|
/* #endif */
|
|
/* #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || APP-PLUS */
|
|
flex: 4;
|
|
/* #endif */
|
|
margin-left: 25rpx;
|
|
margin-right: 25rpx;
|
|
}
|
|
.wanl-live-footer-bottom_msg_input{
|
|
height: 76rpx;
|
|
background-color: rgba(0,0,0,.2);
|
|
border-radius: 100px;
|
|
color: #fff;
|
|
padding-left: 25rpx;
|
|
padding-right: 25rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.wanl-live-footer-bottom_msg_input-placeholder{
|
|
color: #FFFFFF;
|
|
}
|
|
/* 发送按钮 */
|
|
.wanl-live-footer-bottom_send {
|
|
flex: 1;
|
|
align-items: flex-start;
|
|
}
|
|
.wanl-live-footer-bottom_send-btn{
|
|
background-color: #f02b57;
|
|
border-radius: 100px;
|
|
height: 50rpx;
|
|
width: 100rpx;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.wanl-live-footer-bottom_send-btn-text{
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
|
|
/* 进度条 */
|
|
.wanl-live-footer-bottom_controll {
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
flex: 4;
|
|
z-index: 100;
|
|
position: relative;
|
|
height: 76rpx;
|
|
line-height: 76rpx;
|
|
}
|
|
.wanl-live-footer-bottom_controll-play{
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
position: relative;
|
|
}
|
|
/* 商品 */
|
|
.wanl-live-footer-bottom_goods {
|
|
position: relative;
|
|
flex: 1;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 购物袋颜色 */
|
|
.wanl-live-footer-bottom_goods-btn-text{
|
|
color: #f40;
|
|
font-size: 56rpx;
|
|
}
|
|
|
|
/* 点赞 */
|
|
.wanl-live-footer-bottom_praise {
|
|
position: relative;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
.wanl-live-footer-bottom_praise-btn-text{
|
|
color: #fff;
|
|
font-size: 41rpx;
|
|
}
|
|
/* POPUP */
|
|
.wanl-live-popup{
|
|
position: relative;
|
|
background: rgba(255, 255, 255, 0.93);
|
|
padding-left: 18rpx;
|
|
padding-right: 18rpx;
|
|
border-top-left-radius: 18rpx;
|
|
border-top-right-radius: 18rpx;
|
|
}
|
|
.wanl-live-popup-title {
|
|
height: 100rpx;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.wanl-live-popup-title-text {
|
|
font-size: 32rpx;
|
|
}
|
|
.wanl-live-popup-title-close-text{
|
|
font-size: 32rpx;
|
|
/* #ifndef APP-PLUS */
|
|
font-family: "iconfont";
|
|
/* #endif*/
|
|
font-family: iconfont;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.wanl-live-popup-list{
|
|
/* #ifdef APP-PLUS */
|
|
height: 690rpx;
|
|
/* #endif */
|
|
|
|
/* #ifdef H5 || MP */
|
|
max-height: 1000rpx;
|
|
min-height: 200rpx;
|
|
/* #endif */
|
|
}
|
|
.wanl-live-popup-list-item{
|
|
position: relative;
|
|
flex-direction: row;
|
|
background: #fff;
|
|
padding-left: 18rpx;
|
|
padding-right: 18rpx;
|
|
padding-top: 18rpx;
|
|
padding-bottom: 18rpx;
|
|
margin-bottom: 18rpx;
|
|
border-radius: 18rpx
|
|
}
|
|
|
|
.wanl-live-popup-list-item-img{
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-top-left-radius: 12rpx;
|
|
border-top-right-radius: 12rpx;
|
|
border-bottom-right-radius: 12rpx;
|
|
border-bottom-left-radius: 12rpx;
|
|
overflow: hidden;
|
|
background-color: #f7f7f7;
|
|
margin-right: 20rpx;
|
|
}
|
|
.wanl-live-popup-list-item-image{
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 18rpx;
|
|
}
|
|
|
|
.wanl-live-popup-list-item-subject{
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.wanl-live-popup-list-item-subject-title{
|
|
/* #ifdef MP || H5 */
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
/* #endif */
|
|
}
|
|
.wanl-live-popup-list-item-subject-title-text{
|
|
color: #222222;
|
|
font-size: 28rpx;
|
|
lines:2;
|
|
text-overflow:ellipsis;
|
|
/* #ifdef APP-PLUS */
|
|
line-height: 36rpx;
|
|
/* #endif */
|
|
}
|
|
|
|
.wanl-live-popup-list-item-subject-operation{
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
}
|
|
.wanl-live-popup-list-item-subject-operation-price{
|
|
|
|
}
|
|
.wanl-live-popup-list-item-subject-operation-price-text{
|
|
color: #f72b36;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
}
|
|
.wanl-live-popup-list-item-subject-operation-button{
|
|
flex-direction: row;
|
|
|
|
}
|
|
.wanl-live-popup-list-item-subject-operation-button-seek{
|
|
margin-right: 18rpx;
|
|
border-radius: 100px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 54rpx;
|
|
width: 130rpx;
|
|
border-left: 2rpx solid #6200ff;
|
|
border-right: 2rpx solid #6200ff;
|
|
border-top: 2rpx solid #6200ff;
|
|
border-bottom: 2rpx solid #6200ff;
|
|
}
|
|
.wanl-live-popup-list-item-subject-operation-button-seek-text{
|
|
color: #6200ff;
|
|
font-size: 27rpx;
|
|
}
|
|
.wanl-live-popup-list-item-subject-operation-button-shopping{
|
|
background-color: #f72b36;
|
|
border-radius: 100px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
}
|
|
.wanl-live-popup-list-item-subject-operation-button-shopping-text{
|
|
font-size: 30rpx;
|
|
color: #fff;
|
|
/* #ifndef APP-PLUS */
|
|
font-family: "iconfont";
|
|
/* #endif*/
|
|
font-family: iconfont;
|
|
}
|
|
</style> |