修改点赞效果优化
于肖磊
parent
9468692f45
commit
0d4b20a376
|
|
@ -860,6 +860,9 @@ button[disabled].bg-grey {
|
|||
word-break: break-all;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
/* #endif */
|
||||
}
|
||||
.text-line-2 {
|
||||
overflow: hidden;
|
||||
|
|
@ -872,6 +875,9 @@ button[disabled].bg-grey {
|
|||
word-break: break-all;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 2;
|
||||
/* #endif */
|
||||
}
|
||||
.text-line-3 {
|
||||
overflow: hidden;
|
||||
|
|
@ -884,6 +890,9 @@ button[disabled].bg-grey {
|
|||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 3;
|
||||
/* #endif */
|
||||
}
|
||||
/**
|
||||
* 文字超出部分换行
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<view :class="theme_view">
|
||||
<view v-if="(propStatus || false)" class="data-bottom-line">
|
||||
<view class="bottom-exclude">
|
||||
<view class="line-item left" :style="'width:' + split_width"></view>
|
||||
<view class="bottom-exclude flex-row align-c jc-c" :style="'width:' + new_width">
|
||||
<view class="line-item left line-item-left" :style="'width:' + split_width"></view>
|
||||
<text class="line-item msg" :style="'width:' + split_width">{{propMsg || $t('bottom-line.bottom-line.44bct2')}}</text>
|
||||
<view class="line-item right" :style="'width:' + split_width"></view>
|
||||
<view class="line-item right line-item-right" :style="'width:' + split_width"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -15,7 +15,8 @@
|
|||
data() {
|
||||
return {
|
||||
theme_view: app.globalData.get_theme_value_view(),
|
||||
split_width: '33%'
|
||||
split_width: '33%',
|
||||
new_width: '100%'
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
|
|
@ -29,13 +30,14 @@
|
|||
},
|
||||
mounted() {
|
||||
if (this.propWidth > 0) {
|
||||
split_width.value = ((this.propWidth - 40) / 3) + 'px';
|
||||
this.new_width = this.propWidth + 'px';
|
||||
this.split_width = ((this.propWidth - 40) / 3) + 'px';
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.data-bottom-line {
|
||||
padding: 40rpx;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -55,12 +55,12 @@
|
|||
name: 'SimpleLikeEffect',
|
||||
props: {
|
||||
// 外部传入的自定义图标数组
|
||||
customIcons: {
|
||||
propCustomIcons: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 外部传入的自定义图片数组
|
||||
customImages: {
|
||||
propCustomImages: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
|
|
@ -84,11 +84,11 @@
|
|||
computed: {
|
||||
// 合并默认图标和自定义图标
|
||||
available_icons() {
|
||||
return [...ICONS, ...this.customIcons];
|
||||
return [...ICONS, ...this.propCustomIcons];
|
||||
},
|
||||
// 合并默认图片和自定义图片
|
||||
available_images() {
|
||||
return this.customImages;
|
||||
return this.propCustomImages;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -114,17 +114,17 @@
|
|||
y = event.pageY || event.detail?.y || 0;
|
||||
}
|
||||
|
||||
// 添加随机偏差 (-10px 到 10px)
|
||||
const offset_x = Math.floor(Math.random() * 41) - 10;
|
||||
const offset_y = Math.floor(Math.random() * 41) - 10;
|
||||
// 添加随机偏差 (-5px 到 5px)
|
||||
const offset_x = Math.floor(Math.random() * 41) - 5;
|
||||
const offset_y = Math.floor(Math.random() * 41) - 5;
|
||||
|
||||
// 确保图标位置不超过点击位置20px范围
|
||||
const clamped_offset_x = Math.max(-10, Math.min(10, offset_x));
|
||||
const clamped_offset_y = Math.max(-10, Math.min(10, offset_y));
|
||||
// 确保图标位置不超过点击位置10px范围
|
||||
const clamped_offset_x = Math.max(-5, Math.min(5, offset_x));
|
||||
const clamped_offset_y = Math.max(-5, Math.min(5, offset_y));
|
||||
|
||||
// 调整后的坐标
|
||||
const adjusted_x = x + clamped_offset_x - 10;
|
||||
const adjusted_y = y + clamped_offset_y - 10;
|
||||
const adjusted_x = x + clamped_offset_x - 5;
|
||||
const adjusted_y = y + clamped_offset_y - 30;
|
||||
|
||||
// 随机选择图标、图片和颜色
|
||||
let icon, image_src, color;
|
||||
|
|
@ -215,10 +215,10 @@
|
|||
// 更新最后点赞时间
|
||||
this.last_like_time = current_time;
|
||||
|
||||
// 固定位置在当前点击位置正上方40px处（避免与图标重叠）
|
||||
// 固定位置在当前点击位置正上方60px处（避免与图标重叠）
|
||||
this.like_count_position = {
|
||||
x: x, // 水平位置与点击位置对齐
|
||||
y: y - 40 // 垂直位置在点击位置正上方30px（增加10px避免重叠）
|
||||
x: x - 20, // 水平位置与点击位置对齐
|
||||
y: y - 60 // 垂直位置在点击位置正上方60px
|
||||
};
|
||||
this.like_count_color = color;
|
||||
|
||||
|
|
@ -293,7 +293,7 @@
|
|||
animation.transition(el, {
|
||||
styles: {
|
||||
opacity: 1,
|
||||
transform: 'scale(1.5) rotate(10deg)'
|
||||
transform: 'scale(2) rotate(10deg)'
|
||||
},
|
||||
duration: 1000,
|
||||
timingFunction: 'ease-out'
|
||||
|
|
@ -338,7 +338,7 @@
|
|||
animation.transition(el, {
|
||||
styles: {
|
||||
opacity: 0,
|
||||
transform: 'scale(0.5) translateY(-10px)'
|
||||
transform: 'scale(1) translateY(-10px)'
|
||||
},
|
||||
duration: 500,
|
||||
timingFunction: 'ease-out'
|
||||
|
|
@ -370,17 +370,17 @@
|
|||
|
||||
.like-item {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.like-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.like-count {
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
z-index: 10000;
|
||||
text-wrap: nowrap;
|
||||
|
|
@ -404,7 +404,7 @@
|
|||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.5) rotate(10deg);
|
||||
transform: scale(2) rotate(10deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -1,41 +1,41 @@
|
|||
<template>
|
||||
<view v-if="!is_loading" class="flex-row align-c jc-c pa-20 box-border-box oh" :style="good_style">
|
||||
<view v-if="!is_loading" class="flex-row align-c jc-c pa-20 box-border-box oh bg-f9" :style="good_style">
|
||||
<block v-if="good_list.length > 0">
|
||||
<view class="goods-header-fixed" :style="'width:' + windowWidth + 'px;'">
|
||||
<view class="flex-row align-c jc-e pa-10">
|
||||
<view class="flex-col" @tap="goods_order">
|
||||
<component-icon name="list-setup" size="36rpx" color="#999"></component-icon>
|
||||
<component-icon propName="list-setup" propSize="36rpx" propColor="#999"></component-icon>
|
||||
<text class="mt-5 size-12 cr-9">订单</text>
|
||||
</view>
|
||||
<view class="flex-col ml-10" @tap="goods_cart">
|
||||
<component-icon name="cart-solid" size="36rpx" color="#999"></component-icon>
|
||||
<component-icon propName="cart-solid" propSize="36rpx" propColor="#999"></component-icon>
|
||||
<text class="mt-5 size-12 cr-9">购物车</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- nvue 使用 list进行列表渲染 -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<list class="scroll-type" :style="good_style + (isGoodsPopup ? 'padding-bottom: 20rpx;' : '' )" :show-scrollbar="false">
|
||||
<list class="scroll-type" :style="good_style + (propIsGoodsPopup ? 'padding-bottom: 20rpx;' : '' )" :show-scrollbar="false">
|
||||
<cell v-for="(item, index) in good_list" :key="item.id">
|
||||
<!-- #endif -->
|
||||
<!-- scroll-view 只有非nvue的页面使用 -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<scroll-view scroll-y class="scroll-type" :style="good_style + (isGoodsPopup ? 'padding-bottom: 20rpx;' : '' )" :show-scrollbar="false">
|
||||
<scroll-view scroll-y class="scroll-type" :style="good_style + (propIsGoodsPopup ? 'padding-bottom: 20rpx;' : '' )" :show-scrollbar="false">
|
||||
<view v-for="(item, index) in good_list" :key="item.id">
|
||||
<!-- #endif -->
|
||||
<view :class="'goods-item flex-row align-c box-border-box' + (item.id == explanation_id ? ' bg-red-light' : '')" :style="'width:' + (windowWidth - 24) + 'px;'" :data-index="index" :data-value="item.checkbox">
|
||||
<view :class="'goods-item flex-row align-c box-border-box' + (item.id == explanation_id ? ' bg-red-light' : '')" :style="'width:' + (windowWidth - 24) + 'px;'" :data-index="index" :data-value="item.checkbox" :data-url="item.goods_url" @tap="goods_detail">
|
||||
<view class="flex-1">
|
||||
<view class="flex-row align-c">
|
||||
<view class="pr goods-item-image-container">
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<image :class="isGoodsPopup ? 'goods-item-popup-image' : 'goods-item-image'" :src="item.images" mode="aspectFit"></image>
|
||||
<image :class="propIsGoodsPopup ? 'goods-item-popup-image' : 'goods-item-image'" :src="item.images" mode="aspectFit"></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<image :class="isGoodsPopup ? 'goods-item-popup-image' : 'goods-item-image'" :src="item.images" mode="aspectFit"></image>
|
||||
<image :class="propIsGoodsPopup ? 'goods-item-popup-image' : 'goods-item-image'" :src="item.images" mode="aspectFit"></image>
|
||||
<!-- #endif -->
|
||||
<text class="image-top-index">{{ index + 1 }}</text>
|
||||
<!-- 音乐进度条 -->
|
||||
<view v-if="item.id == explanation_id" class="music-progress-container flex-row align-c jc-c" :style="isGoodsPopup ? 'width: 200rpx;' : 'width: 120rpx;'">
|
||||
<view v-if="item.id == explanation_id" class="music-progress-container flex-row align-c jc-c" :style="propIsGoodsPopup ? 'width: 200rpx;' : 'width: 120rpx;'">
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="music-progress-bars mr-5">
|
||||
<view class="music-bar bar1"></view>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
<text class="mr-5 size-14 cr-9">库存</text>
|
||||
<text class="goods-item-inventory size-14 cr-9">{{ item.inventory }}</text>
|
||||
</view>
|
||||
<button type="primary" class="btn-block cr-main bg-main mr-0 ml-0 flex-row align-c jc-c pa-5" style="width: 100rpx;height:48rpx;border-radius: 10rpx" :data-id="item.id" @tap="goods_buy"><text class="size-14 cr-f">购买</text></button>
|
||||
<button type="primary" class="btn-block cr-main bg-main mr-0 ml-0 flex-row align-c jc-c pa-5" style="width: 100rpx;height:48rpx;border-radius: 10rpx" :data-id="item.id" :data-url="item.goods_url" @tap="goods_detail"><text class="size-14 cr-f">购买</text></button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -109,9 +109,13 @@ export default {
|
|||
},
|
||||
props: {
|
||||
// isGoodsPopup 是否是商品弹出框，弹出框一般是用在直播页显示的商品列表，直播开始前isGoodsPopup是false，显示的是一整个页面
|
||||
isGoodsPopup: {
|
||||
propIsGoodsPopup: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
propLiveRoomId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -151,7 +155,7 @@ export default {
|
|||
//#region 设置页面屏幕大小
|
||||
good_style() {
|
||||
// 判断是否是弹出框形式
|
||||
if (!this.isGoodsPopup) {
|
||||
if (!this.propIsGoodsPopup) {
|
||||
return `width:${ this.windowWidth }px;height: ${ this.windowHeight }px;`;
|
||||
} else {
|
||||
// 如果是弹出框模式的就不全屏显示
|
||||
|
|
@ -213,7 +217,7 @@ export default {
|
|||
methods: {
|
||||
//#region 初始化
|
||||
init() {
|
||||
if (!this.isGoodsPopup) {
|
||||
if (!this.propIsGoodsPopup) {
|
||||
this.is_loading = true;
|
||||
} else {
|
||||
this.is_loading = false;
|
||||
|
|
@ -485,16 +489,19 @@ export default {
|
|||
// #endif
|
||||
//#endregion
|
||||
// 购买商品
|
||||
goods_buy (e) {
|
||||
console.log('购买商品');
|
||||
goods_detail(e) {
|
||||
const url = e.currentTarget.dataset.url + '&live_room_id=1';
|
||||
app.globalData.url_open(url);
|
||||
},
|
||||
// 订单
|
||||
goods_order (e) {
|
||||
console.log('查看订单');
|
||||
app.globalData.url_open('/pages/user-order/user-order');
|
||||
},
|
||||
// 购物车
|
||||
goods_cart (e) {
|
||||
console.log('查看购物车');
|
||||
app.globalData.url_open('/pages/cart-page/cart-page');
|
||||
},
|
||||
back() {
|
||||
app.globalData.page_back_prev_event();
|
||||
|
|
@ -538,14 +545,6 @@ export default {
|
|||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.goods-item-popup-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.goods-item-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.goods-item-title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
|
|
@ -559,6 +558,15 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.goods-item-popup-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.goods-item-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.image-top-index {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -6,31 +6,31 @@
|
|||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: {
|
||||
propSrc: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
autoplay: {
|
||||
propAutoplay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
controls: {
|
||||
propControls: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
objectFit: {
|
||||
propObjectFit: {
|
||||
type: String,
|
||||
default: 'contain'
|
||||
},
|
||||
muted: {
|
||||
propMuted: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
playbackRate: {
|
||||
propPlaybackRate: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
poster: {
|
||||
propPoster: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
},
|
||||
watch: {
|
||||
// 监听视频资源地址更新
|
||||
src: {
|
||||
propSrc: {
|
||||
handler(val) {
|
||||
if (!val) return
|
||||
setTimeout(() => {
|
||||
|
|
@ -71,12 +71,12 @@
|
|||
// 聚合视图层的所有数据变化，传给renderjs的渲染层
|
||||
viewportProps() {
|
||||
return {
|
||||
autoplay: this.autoplay,
|
||||
muted: this.muted,
|
||||
controls: this.controls,
|
||||
objectFit: this.objectFit,
|
||||
poster: this.poster,
|
||||
playbackRate: this.playbackRate
|
||||
autoplay: this.propAutoplay,
|
||||
muted: this.propMuted,
|
||||
controls: this.propControls,
|
||||
objectFit: this.propObjectFit,
|
||||
poster: this.propCustomImages,
|
||||
playbackRate: this.propPlaybackRate
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text :style="[{ color: color, 'font-size': iconSize, 'font-family': 'iconfont' }]" class="icon-font" :class="'cr-' + type" @tap="_onClick">{{ iconfontCode }}</text>
|
||||
<text :style="[{ color: propColor, 'font-size': iconSize, 'font-family': 'iconfont' }]" class="icon-font" :class="'cr-' + propType" @tap="_onClick">{{ iconfontCode }}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text :style="{ color: color, 'font-size': iconSize }" class="icon-font" :class="'icon-' + name + ' cr-' + type" @tap="_onClick"></text>
|
||||
<text :style="{ color: propColor, 'font-size': iconSize }" class="icon-font" :class="'icon-' + propName + ' cr-' + propType" @tap="_onClick"></text>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
|
|
@ -15,27 +15,27 @@
|
|||
/**
|
||||
* Icons 图标
|
||||
* @description 用于展示 icons 图标
|
||||
* @property {Number} size 图标大小
|
||||
* @property {String} name 图标图案，参考示例
|
||||
* @property {String} color 图标颜色
|
||||
* @property {String} type 图标常规颜色 info / primary / error/ warning / success
|
||||
* @property {Number} propSize 图标大小
|
||||
* @property {String} propName 图标图案，参考示例
|
||||
* @property {String} propColor 图标颜色
|
||||
* @property {String} propType 图标常规颜色 info / primary / error/ warning / success
|
||||
*/
|
||||
export default {
|
||||
name: 'u-icon',
|
||||
props: {
|
||||
name: {
|
||||
propName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
type: {
|
||||
propType: {
|
||||
type: String,
|
||||
default: 'info',
|
||||
},
|
||||
size: {
|
||||
propSize: {
|
||||
type: [Number, String],
|
||||
default: 32,
|
||||
},
|
||||
color: {
|
||||
propColor: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
|
|
@ -43,12 +43,12 @@
|
|||
computed: {
|
||||
//#region 获取图标大小
|
||||
iconSize() {
|
||||
return this.getVal(this.size);
|
||||
return this.getVal(this.propSize);
|
||||
},
|
||||
//#ifdef APP-NVUE
|
||||
// appnvue页面做的特殊处理
|
||||
iconfontCode() {
|
||||
const code = this.dataIconfont.glyphs.find(v => v.font_class === this.name);
|
||||
const code = this.dataIconfont.glyphs.find(v => v.font_class === this.propName);
|
||||
if (code != null) {
|
||||
return unescape(`%u${code.unicode}`);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
<view class="like-button">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<list class="animate-wrap">
|
||||
<cell class="a-img" v-for="(item,index) in viewList" :key="item.elId" :ref="item.elId" :style="{ 'right': site.x || site[0] + 'rpx', 'bottom': site.y || site[1] + 'rpx'}">
|
||||
<image :style="{ 'width': imgWidth + 'rpx', 'height': imgHeight + 'rpx'}" mode="widthFix" :src="item.src" :animation="item.animation"></image>
|
||||
<cell class="a-img" v-for="(item,index) in viewList" :key="item.elId" :ref="item.elId" :style="{ 'right': propSite.x || propSite[0] + 'rpx', 'bottom': propSite.y || propSite[1] + 'rpx'}">
|
||||
<image :style="{ 'width': propImgWidth + 'rpx', 'height': propImgHeight + 'rpx'}" mode="widthFix" :src="item.src" :animation="item.animation"></image>
|
||||
</cell>
|
||||
</list>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="animate-wrap">
|
||||
<view class="a-img" v-for="(item,index) in viewList" :key="item.elId" :ref="item.elId" :style="{ 'right': site.x || site[0] + 'rpx', 'bottom': site.y || site[1] + 'rpx'}">
|
||||
<image :style="{'width': imgWidth + 'rpx', 'height': imgHeight + 'rpx'}" mode="widthFix" :src="item.src" :animation="item.animation"></image>
|
||||
<view class="a-img" v-for="(item,index) in viewList" :key="item.elId" :ref="item.elId" :style="{ 'right': propSite.x || propSite[0] + 'rpx', 'bottom': propSite.y || propSite[1] + 'rpx'}">
|
||||
<image :style="{'width': propImgWidth + 'rpx', 'height': propImgHeight + 'rpx'}" mode="widthFix" :src="item.src" :animation="item.animation"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
|
@ -26,49 +26,45 @@
|
|||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: {
|
||||
type: String,
|
||||
default: '/static/images/green/tabbar/cart.png'
|
||||
},
|
||||
showImgs: { // 显示图标路径
|
||||
propShowImgs: { // 显示图标路径
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
duration: { // 动画效果时间
|
||||
propDuration: { // 动画效果时间
|
||||
type: Number,
|
||||
default: 5000
|
||||
},
|
||||
range: { // x 间隔幅度
|
||||
propRange: { // x 间隔幅度
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
high: {
|
||||
propHigh: { // 图标高度
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
width: { // 图标宽度
|
||||
propWidth: { // 图标宽度
|
||||
type: Number || String,
|
||||
default: 52
|
||||
},
|
||||
height: { // 图标高度
|
||||
propHeight: { // 图标高度
|
||||
type: Number || String,
|
||||
default: 52
|
||||
},
|
||||
imgWidth: { // 图标宽度
|
||||
propImgWidth: { // 图标宽度
|
||||
type: Number || String,
|
||||
default: 52
|
||||
},
|
||||
imgHeight: { // 图标高度
|
||||
propImgHeight: { // 图标高度
|
||||
type: Number || String,
|
||||
default: 52
|
||||
},
|
||||
throttle: { // 点击节流 ms
|
||||
propThrottle: { // 点击节流 ms
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
site: { // x y 坐标 [x<Number>, y<Number>]
|
||||
propSite: { // x y 坐标 [x<Number>, y<Number>]
|
||||
type: Array || Object,
|
||||
default: () => {
|
||||
return [122, 95] || {
|
||||
|
|
@ -77,11 +73,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
large: { // 是否缩放冒泡
|
||||
propLarge: { // 是否缩放冒泡
|
||||
type: [Number, Boolean],
|
||||
default: false
|
||||
},
|
||||
alone: {
|
||||
propAlone: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
|
|
@ -100,56 +96,56 @@
|
|||
handleClick(e) {
|
||||
// 函数节流
|
||||
let interval = e.timeStamp - this.oldTime
|
||||
if (interval < this.throttle) return null;
|
||||
if (interval < this.propThrottle) return null;
|
||||
this.oldTime = e.timeStamp
|
||||
let animation = {}
|
||||
// 创建animate配置
|
||||
// #ifdef APP-NVUE
|
||||
animation = weex.requireModule('animation')
|
||||
// #endif
|
||||
let randomImg = Math.floor(Math.random() * this.showImgs.length)
|
||||
let randomImg = Math.floor(Math.random() * this.propShowImgs.length)
|
||||
let _item = {
|
||||
elId: 'el_likeicon_' + this.elId, // 生成元素ref
|
||||
src: this.showImgs[randomImg], // 随机图标
|
||||
src: this.propShowImgs[randomImg], // 随机图标
|
||||
animation: animation, // 每个盒子动画
|
||||
x: Math.ceil(Math.random() * this.range), // 方向间距
|
||||
x: Math.ceil(Math.random() * this.propRange), // 方向间距
|
||||
q: Math.floor(Math.random() * 2), // 随机方向
|
||||
}
|
||||
// 动画
|
||||
let _abs = ['-', '']
|
||||
let _dirX = Number(_abs[_item.q] + _item.x) // 随机的方向和间距
|
||||
let _dirY = this.high - Math.random() * 10
|
||||
let _dirY = this.propHigh - Math.random() * 10
|
||||
// 生成DOM
|
||||
this.elId++
|
||||
this.viewList.push(_item)
|
||||
// #ifndef APP-NVUE
|
||||
_item.animation = uni.createAnimation({
|
||||
duration: this.duration,
|
||||
duration: this.propDuration,
|
||||
timingFunction: 'ease-out',
|
||||
})
|
||||
setTimeout(() => {
|
||||
// 完成后事件回调
|
||||
this.$emit('finished')
|
||||
// 逐渐消失
|
||||
if (this.alone) {
|
||||
if (this.propAlone) {
|
||||
this.waitDeleteIndex++
|
||||
this.onThrottle(this.deleteView, this.duration)
|
||||
this.onThrottle(this.deleteView, this.propDuration)
|
||||
return null;
|
||||
} else {
|
||||
// 完成动画后在n秒后清空
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
this.viewList = []
|
||||
}, this.duration)
|
||||
}, this.propDuration)
|
||||
return null;
|
||||
}
|
||||
}, this.duration)
|
||||
}, this.propDuration)
|
||||
// #endif
|
||||
// 执行动画
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
let _n = 1
|
||||
if (this.large) _n = typeof(this.large) === 'number' ? this.large : 2;
|
||||
if (this.propLarge) _n = typeof(this.propLarge) === 'number' ? this.propLarge : 2;
|
||||
// #ifndef APP-NVUE
|
||||
_item.animation.translateY(-_dirY).translateX(_dirX).scale(_n, _n).opacity(0).step()
|
||||
_item.animation = _item.animation.export()
|
||||
|
|
@ -163,7 +159,7 @@
|
|||
transformOrigin: 'center center',
|
||||
opacity: 0
|
||||
},
|
||||
duration: this.duration, // ms
|
||||
duration: this.propDuration, // ms
|
||||
timingFunction: 'ease-out',
|
||||
delay: 0 // ms
|
||||
}, () => {
|
||||
|
|
@ -171,9 +167,9 @@
|
|||
// 完成后事件回调
|
||||
this.$emit('finished')
|
||||
// 逐渐消失
|
||||
if (this.alone) {
|
||||
if (this.propAlone) {
|
||||
this.waitDeleteIndex++
|
||||
this.onThrottle(this.deleteView, this.duration)
|
||||
this.onThrottle(this.deleteView, this.propDuration)
|
||||
return null
|
||||
} else {
|
||||
// 完成动画后在n秒后清空
|
||||
|
|
|
|||
|
|
@ -20,8 +20,11 @@
|
|||
<image :src="item.avatar" class="viewer-avatar" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ml-5 people-number">
|
||||
<text class="cr-f size-10">{{ people_number }}</text>
|
||||
</view>
|
||||
<view class="viewer-back ml-5 flex-row align-c jc-c " @tap="live_back">
|
||||
<component-icon name="close-fillup" class="viewer-back-icon" size="50rpx" color="#fff"></component-icon>
|
||||
<component-icon propName="close-fillup" class="viewer-back-icon" propSize="50rpx" propColor="#fff"></component-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -108,27 +111,27 @@
|
|||
</view>
|
||||
</view>
|
||||
<!-- 底部谁来了的提示-->
|
||||
<view v-if="is_user_comes" class="flex-row mt-3 pointer-events-auto" :style="'max-width:' + (windowWidth - 100) + 'px;'">
|
||||
<!-- <view v-if="is_user_comes" class="flex-row mt-3 pointer-events-auto" :style="'max-width:' + (windowWidth - 100) + 'px;'">
|
||||
<view class="user-comes flex-row">
|
||||
<text class="user-name cr-blue">{{ commons_name }}</text>
|
||||
<text class="user-name cr-d">来了</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 底部交互区域 -->
|
||||
<view class="flex-row align-c mt-5 pointer-events-auto">
|
||||
<view class="flex-1 bottom-actions-input">
|
||||
<input :value="comment_value" type="text" confirm-type="done" :adjust-position="false" style="color: #fff;" placeholder="说点什么" @focus="add_comment" @input="(e) => comment_value = e.detail.value" @confirm="comment_input_confirm" />
|
||||
</view>
|
||||
<view class="bottom-actions-icon" @tap="add_goods">
|
||||
<component-icon name="shopping-cart-tall" color="#fff" size="32rpx"></component-icon>
|
||||
<component-icon propName="shopping-cart-tall" propColor="#fff" propSize="32rpx"></component-icon>
|
||||
</view>
|
||||
<component-like-button ref="likeButton" :show-imgs="liveShowImgs" @handleClick="like_button_click">
|
||||
<component-like-button ref="likeButton" :propShowImgs="propLiveShowImgs" @handleClick="like_button_click">
|
||||
<view class="bottom-actions-icon">
|
||||
<component-icon name="givealike-o" color="#fff" size="32rpx"></component-icon>
|
||||
<component-icon propName="givealike-o" propColor="#fff" propSize="32rpx"></component-icon>
|
||||
</view>
|
||||
</component-like-button>
|
||||
<view class="bottom-actions-icon" @tap="share_event">
|
||||
<component-icon name="share-solid" color="#fff" size="32rpx"></component-icon>
|
||||
<component-icon propName="share-solid" propColor="#fff" propSize="32rpx"></component-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -140,8 +143,8 @@
|
|||
</view>
|
||||
</view>
|
||||
<!-- 商品弹出框 -->
|
||||
<component-popup ref="popupGoodsRef" mode="bottom" class="pointer-events-auto" title="添加商品" :closeable="true">
|
||||
<component-goods isGoodsPopup></component-goods>
|
||||
<component-popup ref="popupGoodsRef" propMode="bottom" class="pointer-events-auto" propTitle="添加商品" :propCloseable="true">
|
||||
<component-goods propIsGoodsPopup></component-goods>
|
||||
</component-popup>
|
||||
<!-- 分享弹窗 -->
|
||||
<component-share-popup ref="share" class="pointer-events-auto"></component-share-popup>
|
||||
|
|
@ -166,11 +169,11 @@
|
|||
componentSharePopup
|
||||
},
|
||||
props: {
|
||||
liveConfig: {
|
||||
propLiveConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
liveShowImgs: {
|
||||
propLiveShowImgs: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
|
|
@ -182,6 +185,11 @@
|
|||
goods_popup_status: false,
|
||||
// 点赞计数
|
||||
like_count: 0,
|
||||
// 临时点赞计数
|
||||
casual_like_count: 0,
|
||||
like_timer: null,
|
||||
// 直播间人数
|
||||
people_number: 0,
|
||||
// 直播间配置信息
|
||||
live_data: {},
|
||||
userAvatar: '/static/images/common/user.png',
|
||||
|
|
@ -257,9 +265,9 @@
|
|||
// 当前观看直播用户id
|
||||
live_user_id: [],
|
||||
// 观看用户名称
|
||||
commons_name: '陌生网友', // 用户名称
|
||||
is_user_comes: false,
|
||||
is_user_comes_timer: null,
|
||||
// commons_name: '陌生网友', // 用户名称
|
||||
// is_user_comes: false,
|
||||
// is_user_comes_timer: null,
|
||||
//#endregion
|
||||
|
||||
//#region 监听键盘弹出事件
|
||||
|
|
@ -281,7 +289,7 @@
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
liveConfig: {
|
||||
propLiveConfig: {
|
||||
handler(new_value) {
|
||||
if (new_value != null) {
|
||||
// 获取配置信息
|
||||
|
|
@ -426,7 +434,6 @@
|
|||
});
|
||||
this.task.onError((res) => {
|
||||
this.task = null;
|
||||
console.log('error', res);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -461,18 +468,27 @@
|
|||
|
||||
// 加入直播间提示
|
||||
case 'join' :
|
||||
this.commons_name = data.content;
|
||||
this.is_user_comes = true;
|
||||
// 设置定时任务，如果在固定时间内有其他人进入,就清除之前的定时任务，并重新设置一个定时任务，确保关闭时间
|
||||
if (this.is_user_comes_timer != null) {
|
||||
clearTimeout(this.is_user_comes_timer)
|
||||
// 如果最后前一条是进入直播间的提示，则更新用户昵称
|
||||
if (this.bulletins.length > 0 && this.bulletins[this.bulletins.length - 1].type == 'go') {
|
||||
this.bulletins[this.bulletins.length - 1].user_name = data.content;
|
||||
} else {
|
||||
this.bulletins.push({
|
||||
id: Math.random(),
|
||||
type: 'go',
|
||||
user_avatar: '',
|
||||
user_name: data.content,
|
||||
text: '',
|
||||
});
|
||||
}
|
||||
this.is_user_comes_timer = setTimeout(() => {
|
||||
this.is_user_comes = false
|
||||
}, 1000);
|
||||
// 添加内容之后，需要滚动到最后
|
||||
this.scroll_to_lower();
|
||||
break;
|
||||
// 消息
|
||||
case 'message':
|
||||
// 如果最后前一条是进入直播间的提示，则删除
|
||||
if (this.bulletins.length > 0 && this.bulletins[this.bulletins.length - 1].type == 'go') {
|
||||
this.bulletins.splice(this.bulletins.length - 1, 1);
|
||||
}
|
||||
this.bulletins.push({
|
||||
id: Math.random(),
|
||||
type: 'user',
|
||||
|
|
@ -588,7 +604,20 @@
|
|||
},
|
||||
// 点赞计数
|
||||
like_button_click(e) {
|
||||
this.like_count++;
|
||||
// 临时存储点赞数量
|
||||
this.casual_like_count++;
|
||||
// 如果有点击，清除历史定时任务
|
||||
if (this.like_timer != null) {
|
||||
clearTimeout(this.like_timer);
|
||||
}
|
||||
// 两秒没有人点赞，则显示临时点赞数量加上原有数量
|
||||
setTimeout(() => {
|
||||
// 显示临时点赞数量加上原有数量(临时使用)
|
||||
this.like_count = this.like_count + this.casual_like_count;
|
||||
this.socket_send('likeCount', this.casual_like_count);
|
||||
// 完成之后重置临时点赞数量
|
||||
this.casual_like_count = 0;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -601,6 +630,11 @@
|
|||
z-index: 3;
|
||||
background-color: rgba(40,40,40,0.45);
|
||||
}
|
||||
.people-number {
|
||||
padding: 10rpx 20rpx;
|
||||
background-color: rgba(40,40,40,0.45);
|
||||
border-radius: 200rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 60rpx;
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
<template>
|
||||
<view v-if="showPopup" class="uni-popup" :class="popupstyle + (isDesktop ? ' fixforpc-z-index' : '')">
|
||||
<view @touchstart="touchstart">
|
||||
<component-transition key="1" v-if="maskShow" name="mask" mode="fade" :customStyle="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
|
||||
<component-transition key="2" :mode="ani" name="content" :customStyle="transClass" :duration="duration" :show="showTrans">
|
||||
<view class="pr" :style="'border-radius:' + round + 'px'">
|
||||
<view v-if="closeType == 'icon' && closeable" class="popup-close pa-14 box-border-box" :class="closeIconPos" :style="closeIconStyle" @tap="close">
|
||||
<component-icon :name="closeIcon" :type="closeIconType" :size="closeIconSize + 'rpx'"></component-icon>
|
||||
<component-transition key="1" v-if="maskShow" propName="mask" propMode="fade" :propCustomStyle="maskClass" :propDuration="duration" :propShow="showTrans" @click="onTap" />
|
||||
<component-transition key="2" :propMode="ani" propName="content" :propCustomStyle="transClass" :propDuration="duration" :propShow="showTrans">
|
||||
<view class="pr" :style="'border-radius:' + propRound + 'px'">
|
||||
<view v-if="propCloseType == 'icon' && propCloseable" class="popup-close pa-14 box-border-box" :class="propCloseIconPos" :style="closeIconStyle" @tap="close">
|
||||
<component-icon :propName="propCloseIcon" :propType="propCloseIconType" :propSize="propCloseIconSize + 'rpx'"></component-icon>
|
||||
</view>
|
||||
<view v-if="closeType == 'text' && closeable" class="flex-row jc-sb align-c w abs top-0 pa-14 z-i">
|
||||
<view v-if="propCloseType == 'text' && propCloseable" class="flex-row jc-sb align-c w abs top-0 pa-14 z-i">
|
||||
<text class="cr-info" @click="close">取消</text>
|
||||
<view class="pr">
|
||||
<text v-if="isCustomBtn" class="inline-block" :style="customBtnStyle" @click="custom_change">{{ customBtnText }}</text>
|
||||
<text v-if="propIsCustomBtn" class="inline-block" :style="propCustomBtnStyle" @click="custom_change">{{ propCustomBtnText }}</text>
|
||||
<text class="cr-primary" @click="comfirm">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="title != ''" class="pr">
|
||||
<view class="popup-close pa-14 box-border-box" :class="titleBorder ? 'br-b-e' : ''">
|
||||
<view v-if="title != ''" class="title ">
|
||||
<text class="fw tc">{{ title }}</text>
|
||||
<view v-if="propTitle != ''" class="pr">
|
||||
<view class="popup-close pa-14 box-border-box" :class="propTitleBorder ? 'br-b-e' : ''">
|
||||
<view v-if="propTitle != ''" class="title ">
|
||||
<text class="fw tc">{{ propTitle }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-popup__wrapper radius-lg" :style="{ backgroundColor: bg, maxHeight: height }" :class="[popupstyle]" @click="clear">
|
||||
<view class="uni-popup__wrapper radius-lg" :style="{ backgroundColor: bg, maxHeight: propHeight }" :class="[popupstyle]" @click="clear">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -94,98 +94,98 @@
|
|||
emits: ['change', 'maskClick', 'callBack', 'callBackCustom'],
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
propAnimation: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
type: {
|
||||
propType: {
|
||||
type: String,
|
||||
default: 'bottom',
|
||||
},
|
||||
// maskClick
|
||||
isMaskClick: {
|
||||
propIsMaskClick: {
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
|
||||
maskClick: {
|
||||
propMaskClick: {
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
backgroundColor: {
|
||||
propBackgroundColor: {
|
||||
type: String,
|
||||
default: 'none',
|
||||
},
|
||||
safeArea: {
|
||||
propSafeArea: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
maskBackgroundColor: {
|
||||
propMaskBackgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0, 0, 0, 0.4)',
|
||||
},
|
||||
// 是否显示关闭图标
|
||||
closeable: {
|
||||
propCloseable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// icon
|
||||
closeIcon: {
|
||||
propCloseIcon: {
|
||||
type: String,
|
||||
default: 'close-line',
|
||||
},
|
||||
// icon颜色
|
||||
closeIconType: {
|
||||
propCloseIconType: {
|
||||
type: String,
|
||||
default: '6',
|
||||
},
|
||||
// 关闭图标大小
|
||||
closeIconSize: {
|
||||
propCloseIconSize: {
|
||||
type: Number,
|
||||
default: 32,
|
||||
},
|
||||
// 关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角，top-center为外部上部中间位置， bottom-center为外部底部中间位置，
|
||||
closeIconPos: {
|
||||
propCloseIconPos: {
|
||||
type: String,
|
||||
validator: (value) => ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'].includes(value),
|
||||
default: 'top-right',
|
||||
},
|
||||
closeType: {
|
||||
propCloseType: {
|
||||
type: String,
|
||||
default: 'icon',
|
||||
},
|
||||
isCustomBtn: {
|
||||
propIsCustomBtn: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
customBtnText: {
|
||||
propCustomBtnText: {
|
||||
type: String,
|
||||
default: '自定义',
|
||||
},
|
||||
customBtnStyle: {
|
||||
propCustomBtnStyle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 标题
|
||||
title: {
|
||||
propTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
titleBorder: {
|
||||
propTitleBorder: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
height: {
|
||||
propHeight: {
|
||||
type: String,
|
||||
default: 'auto',
|
||||
},
|
||||
round: {
|
||||
propRound: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
isConfirmClose: {
|
||||
propIsConfirmClose: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
/**
|
||||
* 监听type类型
|
||||
*/
|
||||
type: {
|
||||
propType: {
|
||||
handler: function (type) {
|
||||
if (!this.config[type]) return;
|
||||
this[this.config[type]](true);
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
isDesktop: {
|
||||
handler: function (newVal) {
|
||||
if (!this.config[newVal]) return;
|
||||
this[this.config[this.type]](true);
|
||||
this[this.config[this.propType]](true);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
|
|
@ -213,13 +213,13 @@
|
|||
* 监听遮罩是否可点击
|
||||
* @param {Object} val
|
||||
*/
|
||||
maskClick: {
|
||||
propMaskClick: {
|
||||
handler: function (val) {
|
||||
this.mkclick = val;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
isMaskClick: {
|
||||
propIsMaskClick: {
|
||||
handler: function (val) {
|
||||
this.mkclick = val;
|
||||
},
|
||||
|
|
@ -274,10 +274,10 @@
|
|||
return this.popupWidth >= 500 && this.popupHeight >= 500;
|
||||
},
|
||||
bg() {
|
||||
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
|
||||
if (this.propBackgroundColor === '' || this.propBackgroundColor === 'none') {
|
||||
return '#fff';
|
||||
}
|
||||
return this.backgroundColor;
|
||||
return this.propBackgroundColor;
|
||||
},
|
||||
// transition固定样式
|
||||
transitionFixedStyle() {
|
||||
|
|
@ -287,23 +287,23 @@
|
|||
};
|
||||
switch (this.mode) {
|
||||
case 'top':
|
||||
style['borderBottomLeftRadius'] = this.round + 'px';
|
||||
style['borderBottomRightRadius'] = this.round + 'px';
|
||||
style['borderBottomLeftRadius'] = this.propRound + 'px';
|
||||
style['borderBottomRightRadius'] = this.propRound + 'px';
|
||||
break;
|
||||
case 'bottom':
|
||||
style['borderTopLeftRadius'] = this.round + 'px';
|
||||
style['borderTopRightRadius'] = this.round + 'px';
|
||||
style['borderTopLeftRadius'] = this.propRound + 'px';
|
||||
style['borderTopRightRadius'] = this.propRound + 'px';
|
||||
break;
|
||||
case 'left':
|
||||
style['borderTopRightRadius'] = this.round + 'px';
|
||||
style['borderBottomRightRadius'] = this.round + 'px';
|
||||
style['borderTopRightRadius'] = this.propRound + 'px';
|
||||
style['borderBottomRightRadius'] = this.propRound + 'px';
|
||||
break;
|
||||
case 'right':
|
||||
style['borderTopLeftRadius'] = this.round + 'px';
|
||||
style['borderBottomLeftRadius'] = this.round + 'px';
|
||||
style['borderTopLeftRadius'] = this.propRound + 'px';
|
||||
style['borderBottomLeftRadius'] = this.propRound + 'px';
|
||||
break;
|
||||
case 'center':
|
||||
style['borderRadius'] = this.round + 'px';
|
||||
style['borderRadius'] = this.propRound + 'px';
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
@ -315,7 +315,7 @@
|
|||
zIndex: 999,
|
||||
};
|
||||
let posSize = 28;
|
||||
switch (this.closeIconPos) {
|
||||
switch (this.propCloseIconPos) {
|
||||
case 'top-left':
|
||||
style['position'] = 'absolute';
|
||||
style['top'] = '0rpx';
|
||||
|
|
@ -349,7 +349,7 @@
|
|||
style['right'] = '0rpx';
|
||||
break;
|
||||
default:
|
||||
if (this.title != '') {
|
||||
if (this.propTitle != '') {
|
||||
style['position'] = 'absolute';
|
||||
style['top'] = '0rpx';
|
||||
style['right'] = '0rpx';
|
||||
|
|
@ -369,7 +369,7 @@
|
|||
this.popupWidth = windowWidth;
|
||||
this.popupHeight = windowHeight + (windowTop || 0);
|
||||
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
|
||||
if (safeArea && this.safeArea) {
|
||||
if (safeArea && this.propSafeArea) {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.safeAreaInsets = screenHeight - safeArea.bottom;
|
||||
// #endif
|
||||
|
|
@ -406,13 +406,13 @@
|
|||
},
|
||||
// #endif
|
||||
created() {
|
||||
// this.mkclick = this.isMaskClick || this.maskClick
|
||||
if (this.isMaskClick === null && this.maskClick === null) {
|
||||
// this.mkclick = this.propIsMaskClick || this.propMaskClick
|
||||
if (this.propIsMaskClick === null && this.propMaskClick === null) {
|
||||
this.mkclick = true;
|
||||
} else {
|
||||
this.mkclick = this.isMaskClick != null ? this.isMaskClick : this.maskClick;
|
||||
this.mkclick = this.propIsMaskClick != null ? this.propIsMaskClick : this.propMaskClick;
|
||||
}
|
||||
if (this.animation) {
|
||||
if (this.propAnimation) {
|
||||
this.duration = 300;
|
||||
} else {
|
||||
this.duration = 0;
|
||||
|
|
@ -421,7 +421,7 @@
|
|||
this.messageChild = null;
|
||||
// TODO 解决头条冒泡的问题
|
||||
this.clearPropagation = false;
|
||||
this.maskClass.backgroundColor = this.maskBackgroundColor;
|
||||
this.maskClass.backgroundColor = this.propMaskBackgroundColor;
|
||||
},
|
||||
methods: {
|
||||
setH5Visible() {
|
||||
|
|
@ -458,7 +458,7 @@
|
|||
}
|
||||
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'];
|
||||
if (!(direction && innerType.indexOf(direction) != -1)) {
|
||||
direction = this.type;
|
||||
direction = this.propType;
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
return;
|
||||
|
|
@ -473,7 +473,7 @@
|
|||
this.showTrans = false;
|
||||
this.$emit('change', {
|
||||
show: false,
|
||||
type: this.type,
|
||||
type: this.propType,
|
||||
});
|
||||
clearTimeout(this.timer);
|
||||
// // 自定义关闭事件
|
||||
|
|
@ -514,7 +514,7 @@
|
|||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.messageChild && this.type === 'message') {
|
||||
if (this.messageChild && this.propType === 'message') {
|
||||
this.messageChild.timerClose();
|
||||
}
|
||||
});
|
||||
|
|
@ -601,14 +601,14 @@
|
|||
this.showTrans = true;
|
||||
},
|
||||
comfirm() {
|
||||
if (this.isConfirmClose) {
|
||||
if (this.propIsConfirmClose) {
|
||||
this.close();
|
||||
}
|
||||
this.$emit('callBack');
|
||||
},
|
||||
// 自定义按钮点击回调
|
||||
custom_change() {
|
||||
if (this.isConfirmClose) {
|
||||
if (this.propIsConfirmClose) {
|
||||
this.close();
|
||||
}
|
||||
this.$emit('callBackCustom');
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick">
|
||||
<view v-if="isShow" ref="ani" :animation="animationData" :class="propCustomClass" :style="transformStyles" @click="onClick">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick">
|
||||
<view v-if="isShow" ref="ani" :animation="animationData" :class="propCustomClass" :style="transformStyles" @click="onClick">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
|
@ -38,39 +38,39 @@
|
|||
emits: ['click', 'change'],
|
||||
props: {
|
||||
// 是否展示组件
|
||||
show: {
|
||||
propShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 使用的动画模式
|
||||
mode: {
|
||||
propMode: {
|
||||
type: [Array, String, null],
|
||||
default() {
|
||||
return 'fade';
|
||||
},
|
||||
},
|
||||
// 动画的执行时间，单位ms
|
||||
duration: {
|
||||
propDuration: {
|
||||
type: [String, Number],
|
||||
default: 300,
|
||||
},
|
||||
// 使用的动画过渡函数
|
||||
timingFunction: {
|
||||
propTimingFunction: {
|
||||
type: String,
|
||||
default: 'ease-out',
|
||||
},
|
||||
customStyle: {
|
||||
propCustomStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
customClass: {
|
||||
propCustomClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// nvue模式下 是否直接显示，在uv-list等cell下面使用就需要设置
|
||||
cellChild: {
|
||||
propCellChild: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
propShow: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open();
|
||||
|
|
@ -106,8 +106,8 @@
|
|||
const style = {
|
||||
transform: this.transform,
|
||||
opacity: this.opacity,
|
||||
...this.addStyle(this.customStyle),
|
||||
'transition-duration': `${this.duration / 1000}s`,
|
||||
...this.addStyle(this.propCustomStyle),
|
||||
'transition-duration': `${this.propDuration / 1000}s`,
|
||||
};
|
||||
return this.addStyle(style, 'string');
|
||||
},
|
||||
|
|
@ -115,12 +115,12 @@
|
|||
created() {
|
||||
// 动画默认配置
|
||||
this.config = {
|
||||
duration: this.duration,
|
||||
timingFunction: this.timingFunction,
|
||||
duration: this.propDuration,
|
||||
timingFunction: this.propTimingFunction,
|
||||
transformOrigin: '50% 50%',
|
||||
delay: 0,
|
||||
};
|
||||
this.durationTime = this.duration;
|
||||
this.durationTime = this.propDuration;
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
|
|
@ -268,7 +268,7 @@
|
|||
this.animation = createAnimation(this.config, this);
|
||||
this.tranfromInit(false).step();
|
||||
// #ifdef APP-NVUE
|
||||
if (this.cellChild) {
|
||||
if (this.propCellChild) {
|
||||
this.opacity = 1;
|
||||
} else {
|
||||
this.animation.run();
|
||||
|
|
@ -322,10 +322,10 @@
|
|||
styles.transform += this.animationType(type)[mode] + ' ';
|
||||
}
|
||||
};
|
||||
if (typeof this.mode === 'string') {
|
||||
buildStyle(type, this.mode);
|
||||
if (typeof this.propMode === 'string') {
|
||||
buildStyle(type, this.propMode);
|
||||
} else {
|
||||
this.mode.forEach((mode) => {
|
||||
this.propMode.forEach((mode) => {
|
||||
buildStyle(type, mode);
|
||||
});
|
||||
}
|
||||
|
|
@ -354,10 +354,10 @@
|
|||
}
|
||||
this.animation[this.animationMode()[mode]](aniNum);
|
||||
};
|
||||
if (typeof this.mode === 'string') {
|
||||
buildTranfrom(type, this.mode);
|
||||
if (typeof this.propMode === 'string') {
|
||||
buildTranfrom(type, this.propMode);
|
||||
} else {
|
||||
this.mode.forEach((mode) => {
|
||||
this.propMode.forEach((mode) => {
|
||||
buildTranfrom(type, mode);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<!-- #ifdef H5 -->
|
||||
<h5-hls-video :src="src" autoplay :muted="muted" class="video-size" @hlsError="error" @ended="ended" @autoPlaySuccess="auto_play_success" @autoPlayError="auto_play_error"></h5-hls-video>
|
||||
<h5-hls-video :propSrc="propSrc" propAutoplay :propMuted="muted" class="video-size" @hlsError="error" @ended="ended" @autoPlaySuccess="auto_play_success" @autoPlayError="auto_play_error"></h5-hls-video>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<live-player :src="src" autoplay :muted="muted" class="video-size" @statechange="statechange" @error="error" />
|
||||
<live-player :src="propSrc" autoplay :muted="muted" class="video-size" @statechange="statechange" @error="error" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<video :src="src" autoplay :is-video="true" :controls="false" :muted="muted" object-fit="contain" :style="{'width': windowWidth + 'px', 'height': windowHeight + 'px', 'background-color': 'transparent'}" @error="error" @ended="ended"></video>
|
||||
<video :src="propSrc" autoplay :is-video="true" :controls="false" :muted="muted" object-fit="contain" :style="{'width': windowWidth + 'px', 'height': windowHeight + 'px', 'background-color': 'transparent'}" @error="error" @ended="ended"></video>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
H5HlsVideo
|
||||
},
|
||||
props: {
|
||||
src:{
|
||||
propSrc:{
|
||||
type: String,
|
||||
default: 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<view :class="theme_view + ' flex-row pr'" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
|
||||
<view class="flex-1 pr" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
|
||||
<live-video ref="live-video" :src="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended"></live-video>
|
||||
<live-video ref="live-video" :propSrc="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended"></live-video>
|
||||
|
||||
<!-- 简化版点赞效果组件 -->
|
||||
<full-screen-like-effect ref="fullScreenLikeEffect" :custom-images="like_show_imgs" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'"></full-screen-like-effect>
|
||||
<full-screen-like-effect ref="fullScreenLikeEffect" :propCustomImages="like_show_imgs" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'"></full-screen-like-effect>
|
||||
</view>
|
||||
<view v-if="!is_loading" class="live-content" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
|
||||
<template v-if="!is_live_ended">
|
||||
<live-content ref="liveContent" :live-config="live_config" :live-show-imgs="like_show_imgs" @live-back="live_back" @handleDoubleClick="handle_double_click" @handleTouchEnd="handle_touch_end"></live-content>
|
||||
<live-content ref="liveContent" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @live-back="live_back" @handleDoubleClick="handle_double_click" @handleTouchEnd="handle_touch_end"></live-content>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="live-ended flex-row align-c jc-c" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<view :class="theme_view + ' live-bg'">
|
||||
<view class="w h pr" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
|
||||
<live-video ref="liveVideo" :src="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended" @mutedAutoPlaySuccess="muted_auto_play_success"></live-video>
|
||||
<live-video ref="liveVideo" :propSrc="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended" @mutedAutoPlaySuccess="muted_auto_play_success"></live-video>
|
||||
<!-- 简化版点赞效果组件 -->
|
||||
<full-screen-like-effect ref="fullScreenLikeEffect" :custom-images="like_show_imgs"></full-screen-like-effect>
|
||||
<full-screen-like-effect ref="fullScreenLikeEffect" :propCustomImages="like_show_imgs"></full-screen-like-effect>
|
||||
</view>
|
||||
<view v-if="!is_loading" :class="'live-content ' + (!is_live_ended ? 'pointer-events-none' : '')">
|
||||
<template v-if="!is_live_ended">
|
||||
<live-content ref="liveContent" :live-config="live_config" :live-show-imgs="like_show_imgs" @live-back="live_back"></live-content>
|
||||
<live-content ref="liveContent" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @live-back="live_back"></live-content>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="live-ended flex-row align-c jc-c">
|
||||
|
|
|
|||
Loading…
Reference in New Issue