sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

nvue页面初步更新

master
于肖磊 2026-03-06 15:25:09 +08:00
parent 276e629a4c
commit 632dfbcaff
17 changed files with 533 additions and 1738 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/common/common.vue
View File

@ -122,7 +122,12 @@
upd_data['key'] = Math.random();
upd_data['app_tabbar'] = app.globalData.get_config('app_tabbar') || null;
}
//#ifndef APP-NVUE
this.setData(upd_data);
//#endif
//#ifdef APP-NVUE
this.upd_data = upd_data;
//#endif
// 如果没有菜单数据则读取一次
if(!is_use_native_tabbar && status == 0 && (upd_data['app_tabbar'] || null) == null) {
@ -132,9 +137,14 @@
// 底部菜单高度回调事件
footer_height_value_event(value) {
//#ifndef APP-NVUE
this.setData({
footer_height_value: (value*2)+20
});
//#endif
//#ifdef APP-NVUE
this.footer_height_value = (value*2)+20;
//#endif
this.$emit('onFooterHeight', value);
// 存储底部菜单高度

3
components/popup/popup.vue
View File

@ -131,6 +131,9 @@
popup_content_style: 'left:' + left + 'px;' + (this.propTop ? 'top:' + this.propTop : '') + ';' + (this.propBottom ? 'bottom:' + this.propBottom : '') + ';padding-bottom:' + tabbar_height + 'rpx;',
});
// #endif
//#ifdef APP-NVUE
this.popup_content_style = 'left:' + left + 'px;' + (this.propTop ? 'top:' + this.propTop : '') + ';' + (this.propBottom ? 'bottom:' + this.propBottom : '') + ';padding-bottom:' + tabbar_height + 'rpx;';
//#endif
},
},
};

4
components/upload/upload.vue
View File

@ -20,9 +20,13 @@
</view>
</template>
<script>
//#ifdef APP-NVUE
import i18n from '@/locale/index.js';
//#endif
const app = getApp();
var common_static_url = app.globalData.get_static_url('common');
export default {
i18n,
props: {
// 是否使用卡槽
propSlot: {

7
locale/index-nvue.js
View File

@ -1,7 +0,0 @@
import zh from './zh.json';
import en from './en.json';
export default {
"zh": zh,
"en": en
}

6
pages/plugins/live/pull/components/goods/goods.vue
View File

@ -5,11 +5,11 @@
<view class="goods-header-fixed" :style="'width:' + propWindowWidth + 'px;'">
<view class="flex-row align-c jc-e pa-10">
<view class="flex-col" @tap="goods_order">
<component-icon propName="list-setup" propSize="36rpx" propColor="#999"></component-icon>
<u-icon propName="list-setup" propSize="36rpx" propColor="#999"></u-icon>
<text class="mt-5 size-12 cr-9">订单</text>
</view>
<view class="flex-col ml-10" @tap="goods_cart">
<component-icon propName="cart-solid" propSize="36rpx" propColor="#999"></component-icon>
<u-icon propName="cart-solid" propSize="36rpx" propColor="#999"></u-icon>
<text class="mt-5 size-12 cr-9">购物车</text>
</view>
</view>
@ -103,7 +103,6 @@
</template>
<script>
import componentIcon from "@/pages/plugins/live/pull/components/icon/icon.vue";
import componentBottomLine from '@/components/bottom-line/bottom-line.vue';
const app = getApp();
@ -114,7 +113,6 @@ const app = getApp();
export default {
name: 'Goods',
components: {
componentIcon,
componentBottomLine
},
props: {

108
pages/plugins/live/pull/components/icon/icon.vue
View File

@ -1,108 +0,0 @@
<template>
<!-- #ifdef APP-NVUE -->
<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: propColor, 'font-size': iconSize }" class="icon-font" :class="'icon-' + propName + ' cr-' + propType" @tap="_onClick"></text>
<!-- #endif -->
</template>
<script>
//#ifdef APP-NVUE
import dataIconfont from '@/static/icon/iconfont.json';
import iconUrl from '@/static/icon/iconfont.ttf';
//#endif
/**
* Icons 图标
* @description 用于展示 icons 图标
* @property {Number} propSize 图标大小
* @property {String} propName 图标图案，参考示例
* @property {String} propColor 图标颜色
* @property {String} propType 图标常规颜色 info / primary / error/ warning / success
*/
export default {
name: 'u-icon',
props: {
propName: {
type: String,
default: '',
},
propType: {
type: String,
default: 'info',
},
propSize: {
type: [Number, String],
default: 32,
},
propColor: {
type: String,
default: '',
}
},
computed: {
//#region 获取图标大小
iconSize() {
return this.getVal(this.propSize);
},
//#ifdef APP-NVUE
// appnvue页面做的特殊处理
iconfontCode() {
const code = this.dataIconfont.glyphs.find(v => v.font_class === this.propName);
if (code != null) {
return unescape(`%u${code.unicode}`);
}
return ''
}
//#endif
//#endregion
},
//#ifdef APP-NVUE
data() {
return {
dataIconfont: dataIconfont,
iconUrl: iconUrl
}
},
mounted() {
const domModule = weex.requireModule("dom");
domModule.addRule('fontFace', {
'fontFamily': 'iconfont',
'src': `url('${this.iconUrl}')`
})
},
//#endif
methods: {
//#region 获取图标大小
getVal(val) {
const reg = /^[0-9]*$/g;
return typeof val === 'number' || reg.test(val) ? val.toString() + 'rpx' : val;
},
//#endregion
//#region 点击事件处理
_onClick() {
this.$emit('click');
}
//#endregion
}
}
</script>
<style lang="scss" scoped>
/* #ifndef APP-NVUE */
@import url('@/static/icon/iconfont.css');
/* #ifndef MP-WEIXIN */
@font-face {
font-family: "iconfont";
src: url('@/static/icon/iconfont.ttf');
}
/* #endif */
/* #endif */
.icon-font {
/* #ifndef APP-NVUE */
font-family: 'iconfont' !important;
/* #endif */
text-decoration: none;
text-align: center;
}
</style>

22
pages/plugins/live/pull/components/live-content/live-content.vue
View File

@ -24,7 +24,7 @@
<text class="cr-f size-10">{{ live_data.online_count || 0 }}</text>
</view>
<view class="viewer-back ml-5 flex-row align-c jc-c " @tap="live_back">
<component-icon propName="close-fillup" class="viewer-back-icon" propSize="50rpx" propColor="#fff"></component-icon>
<u-icon propName="close-fillup" class="viewer-back-icon" propSize="50rpx" propColor="#fff"></u-icon>
</view>
</view>
</view>
@ -112,7 +112,7 @@
<text class="size-12 cr-f">讲解中</text>
</view>
<view class="explain-close flex-row align-c" @tap.stop="explain_goods_close">
<component-icon propName="close-line" propSize="18rpx" propColor="#fff"></component-icon>
<u-icon propName="close-line" propSize="18rpx" propColor="#fff"></u-icon>
</view>
</view>
</view>
@ -135,15 +135,15 @@
</view>
</template>
<view class="bottom-actions-icon" @tap="add_goods">
<component-icon propName="shopping-cart-tall" propColor="#fff" propSize="32rpx"></component-icon>
<u-icon propName="shopping-cart-tall" propColor="#fff" propSize="32rpx"></u-icon>
</view>
<component-like-button ref="likeButton" :propShowImgs="propLiveShowImgs" @handleClick="like_button_click">
<view class="bottom-actions-icon">
<component-icon propName="givealike-o" propColor="#fff" propSize="32rpx"></component-icon>
<u-icon propName="givealike-o" propColor="#fff" propSize="32rpx"></u-icon>
</view>
</component-like-button>
<view class="bottom-actions-icon" @tap="share_event">
<component-icon propName="share-solid" propColor="#fff" propSize="32rpx"></component-icon>
<u-icon propName="share-solid" propColor="#fff" propSize="32rpx"></u-icon>
</view>
</view>
</view>
@ -155,30 +155,24 @@
</view>
</view>
<!-- 商品弹出框 -->
<component-popup ref="popupGoodsRef" propMode="bottom" class="pointer-events-auto" propTitle="添加商品" :propCloseable="true">
<u-popup ref="popupGoodsRef" propMode="bottom" class="pointer-events-auto" propTitle="添加商品" :propCloseable="true">
<component-goods propIsGoodsPopup :propWindowWidth="propWindowWidth" :propWindowHeight="propWindowHeight"></component-goods>
</component-popup>
</u-popup>
<!-- 分享弹窗 -->
<component-share-popup ref="share" class="pointer-events-auto"></component-share-popup>
<u-share-popup ref="share" class="pointer-events-auto"></u-share-popup>
</view>
</template>
<script>
import componentGoods from "@/pages/plugins/live/pull/components/goods/goods.vue";
import componentIcon from "@/pages/plugins/live/pull/components/icon/icon.vue";
import componentPopup from "@/pages/plugins/live/pull/components/popup/popup";
import componentLikeButton from "@/pages/plugins/live/pull/components/like-button/like-button";
import componentSharePopup from "@/pages/plugins/live/pull/components/share-popup/share-popup.vue";
import { isEmpty } from '@/common/js/common/common.js';
const app = getApp();
export default {
name: 'LiveContent',
components: {
componentGoods,
componentIcon,
componentPopup,
componentLikeButton,
componentSharePopup
},
/**
* 直播内容组件属性

45
pages/plugins/live/pull/components/popup/keypress.js
View File

@ -1,45 +0,0 @@
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
// this.$once('hook:beforeDestroy', () => {
// document.removeEventListener('keyup', listener)
// })
},
render: () => { }
}
// #endif

709
pages/plugins/live/pull/components/popup/popup.vue
View File

@ -1,709 +0,0 @@
<template>
<view v-if="showPopup" class="uni-popup" :class="popupstyle + (isDesktop ? ' fixforpc-z-index' : '')">
<view @touchstart="touchstart">
<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="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="propIsCustomBtn" class="inline-block" :style="propCustomBtnStyle" @click="custom_change">{{ propCustomBtnText }}</text>
<text class="cr-primary" @click="comfirm">确定</text>
</view>
</view>
<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: propHeight }" :class="[popupstyle]" @click="clear">
<slot />
</view>
</view>
</component-transition>
</view>
<!-- #ifdef H5 -->
<keypress v-if="maskShow" @esc="onTap" />
<!-- #endif -->
</view>
</template>
<script>
import componentTransition from '@/pages/plugins/live/pull/components/transition/transition.vue';
import componentIcon from "@/pages/plugins/live/pull/components/icon/icon.vue";
// #ifdef H5
import keypress from './keypress.js';
// #endif
/**
* PopUp 弹出层
* @description 弹出层组件，为了解决遮罩弹层的问题
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
* @value top 顶部弹出
* @value center 中间弹出
* @value bottom 底部弹出
* @value left 左侧弹出
* @value right 右侧弹出
* @value message 消息提示
* @value dialog 对话框
* @value share 底部分享示例
* @property {Boolean} animation = [true|false] 是否开启动画
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
* @property {String} backgroundColor 主窗口背景色
* @property {String} maskBackgroundColor 蒙版颜色
* @property {Boolean} safeArea 是否适配底部安全区
* @property {Boolean} closeable Boolean | 是否显示关闭图标，默认true
* @property {String} closeIcon String | 关闭iconfont，默认‘close’ ---还有close-o，或者其他自定义icon
* @property {String} closeIconType String | 关闭颜色，默认‘6’ 参照组件u-icon
* @property {String} closeIconPos = [top-left|top-right|top-center|bottom-left|bottom-right|bottom-center] String | 关闭图标位置
* @value top-left 左上角
* @value top-right 右上角
* @value bottom-left 左下角
* @value bottom-right 右下角
* @property {Number} closeIconSize Number | 关闭图标大小，默认32(单位rpx)
* @property {Boolean} closeType Boolean | 显示关闭图标还是文本(文本包含确定和取消)，默认icon,------icon,text,
* @property {Boolean} isCustomBtn Boolean | 自定义按钮
* @property {String} customBtnText String | 自定义按钮文本
* @property {Object} customBtnStyle Object | 自定义按钮样式
* @property {String} title String | 弹窗标题
* @property {String} titleBorder String | 弹窗底部边框
* @property {String} height String | 弹窗内容高度
* @property {String} round String | 弹窗圆角
* @property {Boolean} isConfirmClose Boolean | 是否点击确认按钮时主动关闭弹窗
* @event {Function} change 打开关闭弹窗触发，e={show: false}
* @event {Function} maskClick 点击遮罩触发
* @event {Function} callBack 确定按钮回调方法
* @event {Function} custom_change 自定义按钮回调方法
*/
export default {
name: 'uniPopup',
components: {
// #ifdef H5
keypress,
// #endif
componentTransition,
componentIcon,
},
emits: ['change', 'maskClick', 'callBack', 'callBackCustom'],
props: {
// 开启动画
propAnimation: {
type: Boolean,
default: true,
},
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
// message: 消息提示 ; dialog : 对话框
propType: {
type: String,
default: 'bottom',
},
// maskClick
propIsMaskClick: {
type: Boolean,
default: null,
},
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
propMaskClick: {
type: Boolean,
default: null,
},
propBackgroundColor: {
type: String,
default: 'none',
},
propSafeArea: {
type: Boolean,
default: true,
},
propMaskBackgroundColor: {
type: String,
default: 'rgba(0, 0, 0, 0.4)',
},
// 是否显示关闭图标
propCloseable: {
type: Boolean,
default: true,
},
// icon
propCloseIcon: {
type: String,
default: 'close-line',
},
// icon颜色
propCloseIconType: {
type: String,
default: '6',
},
// 关闭图标大小
propCloseIconSize: {
type: Number,
default: 32,
},
// 关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角，top-center为外部上部中间位置， bottom-center为外部底部中间位置，
propCloseIconPos: {
type: String,
validator: (value) => ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'].includes(value),
default: 'top-right',
},
propCloseType: {
type: String,
default: 'icon',
},
propIsCustomBtn: {
type: Boolean,
default: false,
},
propCustomBtnText: {
type: String,
default: '自定义',
},
propCustomBtnStyle: {
type: String,
default: '',
},
// 标题
propTitle: {
type: String,
default: '',
},
propTitleBorder: {
type: Boolean,
default: false,
},
propHeight: {
type: String,
default: 'auto',
},
propRound: {
type: Number,
default: 0,
},
propIsConfirmClose: {
type: Boolean,
default: true,
},
},
watch: {
/**
* 监听type类型
*/
propType: {
handler: function (type) {
if (!this.config[type]) return;
this[this.config[type]](true);
},
immediate: true,
},
isDesktop: {
handler: function (newVal) {
if (!this.config[newVal]) return;
this[this.config[this.propType]](true);
},
immediate: true,
},
/**
* 监听遮罩是否可点击
* @param {Object} val
*/
propMaskClick: {
handler: function (val) {
this.mkclick = val;
},
immediate: true,
},
propIsMaskClick: {
handler: function (val) {
this.mkclick = val;
},
immediate: true,
},
// H5 下禁止底部滚动
showPopup(show) {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible';
// #endif
},
},
data() {
return {
duration: 300,
ani: [],
showPopup: false,
showTrans: false,
popupWidth: 0,
popupHeight: 0,
config: {
top: 'top',
bottom: 'bottom',
center: 'center',
left: 'left',
right: 'right',
message: 'top',
dialog: 'center',
share: 'bottom',
},
maskClass: {
position: 'fixed',
bottom: 0,
top: '-1000%',
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.4)',
},
transClass: {
position: 'fixed',
left: 0,
right: 0,
},
maskShow: true,
mkclick: true,
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top',
};
},
computed: {
isDesktop() {
return this.popupWidth >= 500 && this.popupHeight >= 500;
},
bg() {
if (this.propBackgroundColor === '' || this.propBackgroundColor === 'none') {
return '#fff';
}
return this.propBackgroundColor;
},
// transition固定样式
transitionFixedStyle() {
let style = {
backgroundColor: this.bgColor,
zIndex: this.zIndex,
};
switch (this.mode) {
case 'top':
style['borderBottomLeftRadius'] = this.propRound + 'px';
style['borderBottomRightRadius'] = this.propRound + 'px';
break;
case 'bottom':
style['borderTopLeftRadius'] = this.propRound + 'px';
style['borderTopRightRadius'] = this.propRound + 'px';
break;
case 'left':
style['borderTopRightRadius'] = this.propRound + 'px';
style['borderBottomRightRadius'] = this.propRound + 'px';
break;
case 'right':
style['borderTopLeftRadius'] = this.propRound + 'px';
style['borderBottomLeftRadius'] = this.propRound + 'px';
break;
case 'center':
style['borderRadius'] = this.propRound + 'px';
break;
}
return style;
},
// 关闭Icon样式
closeIconStyle() {
let style = {
zIndex: 999,
};
let posSize = 28;
switch (this.propCloseIconPos) {
case 'top-left':
style['position'] = 'absolute';
style['top'] = '0rpx';
style['left'] = '0rpx';
break;
case 'top-right':
style['position'] = 'absolute';
style['top'] = '0rpx';
style['right'] = '0rpx';
break;
case 'top-center':
style['position'] = 'absolute';
style['top'] = -(posSize * 4) + 'rpx';
style['left'] = '0rpx';
style['right'] = '0rpx';
break;
case 'bottom-left':
style['position'] = 'absolute';
style['bottom'] = '0rpx';
style['left'] = '0rpx';
break;
case 'bottom-right':
style['position'] = 'absolute';
style['bottom'] = '0rpx';
style['right'] = '0rpx';
break;
case 'bottom-center':
style['position'] = 'absolute';
style['bottom'] = -(posSize * 4) + 'rpx';
style['left'] = '0rpx';
style['right'] = '0rpx';
break;
default:
if (this.propTitle != '') {
style['position'] = 'absolute';
style['top'] = '0rpx';
style['right'] = '0rpx';
}
break;
}
let result = '';
Object.keys(style).forEach(key => {
result += `${key}: ${style[key]};`;
});
return result;
},
},
mounted() {
const fixSize = () => {
const { windowWidth, windowHeight, windowTop, safeArea, screenHeight, safeAreaInsets } = uni.getSystemInfoSync();
this.popupWidth = windowWidth;
this.popupHeight = windowHeight + (windowTop || 0);
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
if (safeArea && this.propSafeArea) {
// #ifdef MP-WEIXIN
this.safeAreaInsets = screenHeight - safeArea.bottom;
// #endif
// #ifndef MP-WEIXIN
this.safeAreaInsets = safeAreaInsets.bottom;
// #endif
} else {
this.safeAreaInsets = 0;
}
};
fixSize();
// #ifdef H5
// window.addEventListener('resize', fixSize)
// this.$once('hook:beforeDestroy', () => {
// window.removeEventListener('resize', fixSize)
// })
// #endif
// #ifdef APP-NVUE
// 修复nvue 遮罩层位置问题
const data = uni.getWindowInfo();
this.maskClass.top = - data.windowHeight + 'px;';
// #endif
},
// #ifndef VUE3
// TODO vue2
destroyed() {
this.setH5Visible();
},
// #endif
// #ifdef VUE3
// TODO vue3
unmounted() {
this.setH5Visible();
},
// #endif
created() {
// this.mkclick = this.propIsMaskClick || this.propMaskClick
if (this.propIsMaskClick === null && this.propMaskClick === null) {
this.mkclick = true;
} else {
this.mkclick = this.propIsMaskClick != null ? this.propIsMaskClick : this.propMaskClick;
}
if (this.propAnimation) {
this.duration = 300;
} else {
this.duration = 0;
}
// TODO 处理 message 组件生命周期异常的问题
this.messageChild = null;
// TODO 解决头条冒泡的问题
this.clearPropagation = false;
this.maskClass.backgroundColor = this.propMaskBackgroundColor;
},
methods: {
setH5Visible() {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = 'visible';
// #endif
},
/**
* 公用方法，不显示遮罩层
*/
closeMask() {
this.maskShow = false;
},
/**
* 公用方法，遮罩层禁止点击
*/
disableMask() {
this.mkclick = false;
},
// TODO nvue 取消冒泡
clear(e) {
// #ifndef APP-NVUE
e.stopPropagation();
// #endif
this.clearPropagation = true;
},
open(direction) {
// fix by mehaotian 处理快速打开关闭的情况
if (this.showPopup) {
clearTimeout(this.timer);
this.showPopup = false;
}
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'];
if (!(direction && innerType.indexOf(direction) != -1)) {
direction = this.propType;
}
if (!this.config[direction]) {
return;
}
this[this.config[direction]]();
this.$emit('change', {
show: true,
type: direction,
});
},
close(type) {
this.showTrans = false;
this.$emit('change', {
show: false,
type: this.propType,
});
clearTimeout(this.timer);
// // 自定义关闭事件
// this.customOpen && this.customClose()
this.timer = setTimeout(() => {
this.showPopup = false;
}, 300);
},
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
touchstart() {
this.clearPropagation = false;
},
onTap() {
if (this.clearPropagation) {
// fix by mehaotian 兼容 nvue
this.clearPropagation = false;
return;
}
this.$emit('maskClick');
if (!this.mkclick) return;
this.close();
},
/**
* 顶部弹出样式处理
*/
top(type) {
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top';
this.ani = ['slide-top'];
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
backgroundColor: this.bg,
};
// TODO 兼容 type 属性 ，后续会废弃
if (type) return;
this.showPopup = true;
this.showTrans = true;
this.$nextTick(() => {
if (this.messageChild && this.propType === 'message') {
this.messageChild.timerClose();
}
});
},
/**
* 底部弹出样式处理
*/
bottom(type) {
this.popupstyle = 'bottom';
this.ani = ['slide-bottom'];
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
bottom: 0,
paddingBottom: this.safeAreaInsets + 'px',
backgroundColor: this.bg,
};
// TODO 兼容 type 属性 ，后续会废弃
if (type) return;
this.showPopup = true;
this.showTrans = true;
},
/**
* 中间弹出样式处理
*/
center(type) {
this.popupstyle = 'center';
this.ani = ['zoom-out', 'fade'];
this.transClass = {
position: 'fixed',
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
bottom: 0,
left: 0,
right: 0,
top: 0,
justifyContent: 'center',
alignItems: 'center',
};
// TODO 兼容 type 属性 ，后续会废弃
if (type) return;
this.showPopup = true;
this.showTrans = true;
},
left(type) {
this.popupstyle = 'left';
this.ani = ['slide-left'];
this.transClass = {
position: 'fixed',
left: 0,
bottom: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
};
// TODO 兼容 type 属性 ，后续会废弃
if (type) return;
this.showPopup = true;
this.showTrans = true;
},
right(type) {
this.popupstyle = 'right';
this.ani = ['slide-right'];
this.transClass = {
position: 'fixed',
bottom: 0,
right: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
};
// TODO 兼容 type 属性 ，后续会废弃
if (type) return;
this.showPopup = true;
this.showTrans = true;
},
comfirm() {
if (this.propIsConfirmClose) {
this.close();
}
this.$emit('callBack');
},
// 自定义按钮点击回调
custom_change() {
if (this.propIsConfirmClose) {
this.close();
}
this.$emit('callBackCustom');
},
},
};
</script>
<style lang="scss" scoped>
.uni-popup {
position: fixed;
max-width: 1600rpx;
margin: 0 auto;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
&.top,
&.left,
&.right {
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
&.top {
.popup-close {
display: none;
}
}
&.center,
&.bottom,
&.left {
.popup-close {
display: flex;
justify-content: flex-end;
}
}
&.right {
.popup-close {
display: flex;
justify-content: flex-start;
}
}
.uni-popup__wrapper {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
overflow-y: auto;
/* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */
// padding-bottom: constant(safe-area-inset-bottom);
// padding-bottom: env(safe-area-inset-bottom);
/* #endif */
&.left,
&.right {
/* #ifdef H5 */
padding-top: var(--window-top);
/* #endif */
/* #ifndef H5 */
padding-top: 0;
/* #endif */
flex: 1;
}
}
.popup-close {
padding: 28rpx;
&.top-center,
&.bottom-center {
justify-content: center;
}
}
.title {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
.fixforpc-z-index {
/* #ifndef APP-NVUE */
z-index: 999;
/* #endif */
}
.fixforpc-top {
top: 0;
}
</style>

344
pages/plugins/live/pull/components/share-popup/share-popup.vue
View File

@ -1,344 +0,0 @@
<template>
<view :class="theme_view">
<component-popup ref="popupShareRef" mode="bottom" title="" :closeable="false">
<view class="share-popup bg-white flex-row">
<view class="close oh pa top-0 right-0 z-i-deep">
<view class="fr padding-top padding-right padding-left-sm padding-bottom-sm" @tap.stop="popup_close_event">
<component-icon name="close-line" size="28rpx" color="#999"></component-icon>
</view>
</view>
<view class="flex-1 share-popup-content">
<!-- #ifdef MP-ALIPAY -->
<view class="share-items oh cp" @tap="share_base_event">
<image class="image" :src="common_static_url + 'share-user-icon.png'" style="width: 80rpx;height: 80rpx;margin-right: 20rpx;" mode="scaleToFill"></image>
<text class="cr-grey text-size-xs single-text" :style="{ 'width': single_text_width }">{{ $t('share-popup.share-popup.h04xiy') }}</text>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO || MP-KUAISHOU -->
<view class="share-items oh cp">
<button class="btn dis-block br-0 ht-auto" type="default" size="mini" open-type="share" hover-class="none" @tap="popup_close_event">
<image class="image" :src="common_static_url + 'share-user-icon.png'" style="width: 80rpx;height: 80rpx;margin-right: 20rpx;" mode="scaleToFill"></image>
<text class="cr-grey text-size-xs single-text" :style="{ 'width': single_text_width }">{{ $t('share-popup.share-popup.h04xiy') }}</text>
</button>
</view>
<!-- #endif -->
<!-- #ifdef APP -->
<block v-if="is_app_weixin">
<view class="share-items oh cp" data-scene="WXSceneSession" data-provider="weixin" @tap="share_app_event">
<image class="image" :src="common_static_url + 'share-user-icon.png'" style="width: 80rpx;height: 80rpx;margin-right: 20rpx;" mode="scaleToFill"></image>
<text class="cr-grey text-size-xs single-text" :style="{ 'width': single_text_width }">{{ $t('share-popup.share-popup.rhs2c5') }}</text>
</view>
<view class="share-items oh cp" data-scene="WXSceneTimeline" data-provider="weixin" @tap="share_app_event">
<image class="image" :src="common_static_url + 'share-friend-icon.png'" style="width: 80rpx;height: 80rpx;margin-right: 20rpx;" mode="scaleToFill"></image>
<text class="cr-grey text-size-xs single-text" :style="{ 'width': single_text_width }">{{ $t('share-popup.share-popup.mv9l10') }}</text>
</view>
<view class="share-items oh cp" data-scene="WXSceneFavorite" data-provider="weixin" @tap="share_app_event">
<image class="image" :src="common_static_url + 'share-favor-icon.png'" style="width: 80rpx;height: 80rpx;margin-right: 20rpx;" mode="scaleToFill"></image>
<text class="cr-grey text-size-xs single-text" :style="{ 'width': single_text_width }">{{ $t('share-popup.share-popup.f08y38') }}</text>
</view>
</block>
<block v-if="is_app_qq">
<view class="share-items oh cp" data-provider="qq" @tap="share_app_event">
<image class="image":src="common_static_url + 'share-qq-icon.png'" style="width: 80rpx;height: 80rpx;margin-right: 20rpx;" mode="scaleToFill"></image>
<text class="cr-grey text-size-xs single-text" :style="{ 'width': single_text_width }">{{ $t('share-popup.share-popup.1242w9') }}</text>
</view>
</block>
<!-- #endif -->
<!-- #ifdef H5 || APP -->
<view class="share-items oh cp" :style="{ 'width': single_text_width }" @tap="share_url_copy_event">
<image class="image" :src="common_static_url + 'share-url-icon.png'" style="width: 80rpx;height: 80rpx;margin-right: 20rpx;" mode="scaleToFill"></image>
<text class="flex-1 cr-grey text-size-xs single-text">{{ $t('share-popup.share-popup.1oh013') }}</text>
</view>
<!-- #endif -->
<view v-if="is_goods_poster == 1 && (goods_id || 0) != 0" class="share-items oh cp" @tap="poster_event">
<image class="image" :src="common_static_url + 'share-poster-icon.png'" style="width: 80rpx;height: 80rpx;margin-right: 20rpx;" mode="scaleToFill"></image>
<text class="cr-grey text-size-xs single-text" :style="{ 'width': single_text_width }">{{ $t('share-popup.share-popup.dcp2qu') }}</text>
</view>
</view>
</view>
</component-popup>
<!-- #ifndef APP-NVUE -->
<!-- 用户基础 -->
<component-user-base ref="user_base"></component-user-base>
<!-- #endif -->
</view>
</template>
<script>
const app = getApp();
//#ifdef APP-NVUE
import i18n from '@/locale/index.js';
//#endif
var common_static_url = app.globalData.get_static_url('common');
import componentIcon from "@/pages/plugins/live/pull/components/icon/icon.vue";
import componentPopup from '@/pages/plugins/live/pull/components/popup/popup';
import componentUserBase from '@/components/user-base/user-base';
export default {
//#ifdef APP-NVUE
i18n,
//#endif
data() {
return {
theme_view: app.globalData.get_theme_value_view(),
common_static_url: common_static_url,
type: null,
is_goods_poster: 0,
goods_id: 0,
url: null,
images: null,
title: null,
summary: null,
is_app_weixin: true,
is_app_qq: true,
share_info: {},
single_text_width: '0px',
};
},
components: {
componentPopup,
componentUserBase,
componentIcon,
},
created: function () {
const data = uni.getWindowInfo();
const del_width = app.globalData.rpx_to_px(100);
this.single_text_width = (data.windowWidth - del_width) + 'px;';
},
methods: {
/**
* 初始化分享配置
* @param {Object} config - 配置参数
* @param {String} config.type - 分享类型
* @param {Number} config.is_goods_poster - 是否为商品海报分享 (0|1)
* @param {Number} config.goods_id - 商品ID
* @param {String} config.url - 分享链接
* @param {String} config.images - 分享图片
* @param {String} config.title - 分享标题
* @param {String} config.summary - 分享摘要
* @param {Object} config.share_info - 分享信息
* @param {Boolean} config.status - 是否显示分享弹窗
* @returns {Boolean} 初始化结果
*/
init(config = {}) {
if (!app.globalData.is_single_page_check()) {
return false;
}
if (config.status == undefined || config.status) {
this.$refs.popupShareRef.open();
}
// #ifndef APP-NVUE
this.setData({
type: config.type == undefined ? null : config.type,
is_goods_poster: config.is_goods_poster || 0,
goods_id: config.goods_id || 0,
url: config.url || null,
images: config.images || null,
title: config.title || null,
summary: config.summary || null,
share_info: config.share_info || {}
});
// #endif
// #ifdef APP-NVUE
// 更新配置信息
this.type = config.type == undefined ? null : config.type;
this.is_goods_poster = config.is_goods_poster || 0;
this.goods_id = config.goods_id || 0;
this.url = config.url || null;
this.images = config.images || null;
this.title = config.title || null;
this.summary = config.summary || null;
this.share_info = config.share_info || {};
// #endif
// 用户头像和昵称设置提示
if ((this.$refs.user_base || null) != null) {
this.$refs.user_base.init('share');
}
// #ifdef APP
// app分享通道隔离
uni.getProvider({
service: 'share',
success: (result) => {
var provider = result.provider || [];
// #ifndef APP-NVUE
this.setData({
is_app_weixin: provider.indexOf('weixin') != -1,
is_app_qq: provider.indexOf('qq') != -1,
});
// #endif
// #ifdef APP-NVUE
this.is_app_weixin = provider.indexOf('weixin') != -1;
this.is_app_qq = provider.indexOf('qq') != -1;
// #endif
},
fail: (error) => {},
});
// #endif
},
/**
* 关闭分享弹窗
*/
popup_close_event(e) {
this.$refs.popupShareRef.close();
},
/**
* 复制链接分享
*/
share_url_copy_event() {
var url = app.globalData.get_page_url();
// 增加分享标识
if(url.indexOf('referrer') == -1) {
var uid = app.globalData.get_user_cache_info('id') || null;
if(uid != null) {
var join = url.indexOf('?') == -1 ? '?' : '&';
url += join+'referrer='+uid;
}
}
app.globalData.text_copy_event(url);
},
/**
* 基础分享事件（支付宝小程序）
*/
share_base_event() {
this.$refs.popupShareRef.close();
uni.pageScrollTo({
scrollTop: 0,
duration: 300,
complete: (res) => {
setTimeout(function () {
uni.showShareMenu();
}, 500);
},
});
},
/**
* 商品海报分享
*/
poster_event() {
var user = app.globalData.get_user_info(this, 'poster_event');
if (user != false) {
uni.showLoading({
title: this.$t('detail.detail.6xvl35'),
});
uni.request({
url: app.globalData.get_request_url('goodsposter', 'distribution', 'distribution'),
method: 'POST',
data: { goods_id: this.goods_id },
dataType: 'json',
success: (res) => {
uni.hideLoading();
if (res.data.code == 0) {
uni.previewImage({
current: res.data.data,
urls: [res.data.data],
});
} else {
if (app.globalData.is_login_check(res.data, this, 'poster_event')) {
app.globalData.showToast(res.data.msg);
}
}
},
fail: () => {
uni.hideLoading();
app.globalData.showToast(this.$t('common.internet_error_tips'));
},
});
}
},
/**
* APP端分享事件
* @param {Object} e - 事件对象
* @param {Object} e.currentTarget.dataset - 事件数据集
* @param {String} e.currentTarget.dataset.provider - 分享提供商（如：weixin、qq）
* @param {String} e.currentTarget.dataset.scene - 分享场景（如：WXSceneSession、WXSceneTimeline等）
*/
share_app_event(e) {
// 分享参数
var provider = e.currentTarget.dataset.provider;
var scene = e.currentTarget.dataset.scene || null;
// 分享基础数据
var share = app.globalData.share_content_handle(this.share_info || {});
var img = this.images || share.img;
var url = app.globalData.page_url_protocol((this.url || null) == null ? share.url : app.globalData.share_query_handle(this.url))
var title = this.title || share.title;
var summary = this.summary || share.desc;
var type = this.type === null ? ((img || null) == null ? 1 : 0) : this.type;
var mini_program = {};
// #ifdef APP
// 分享到好友，是否走微信小程序，则获取微信小程序原始id
if (scene == 'WXSceneSession') {
var weixin_original_id = app.globalData.get_config('config.common_app_mini_weixin_share_original_id') || null;
if (weixin_original_id != null) {
type = 5;
mini_program = {
id: weixin_original_id,
path: url.split('#')[1],
type: 0,
webUrl: url,
};
}
}
// #endif
// 关闭分享弹窗
this.$refs.popupShareRef.close();
// 调用分享组件
uni.share({
provider: provider,
scene: scene,
type: type,
href: url,
title: title,
summary: summary,
imageUrl: img,
miniProgram: mini_program,
success: function (res) {},
fail: function (err) {},
});
},
},
};
</script>
<style lang="scss" scoped>
.share-popup {
padding: 20rpx 10rpx 0 10rpx;
position: relative;
}
.share-popup-content {
padding: 0 20rpx;
text-align: left;
}
.share-items {
padding: 30rpx 0;
min-height: 85rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.share-items:not(:first-child) {
border-top: 1px solid #f0f0f0;
}
.share-items .btn {
background: transparent;
padding: 0;
width: 100%;
text-align: left;
margin: 0;
}
.single-text {
/* width: calc(100% - 100rpx); */
line-height: 85rpx;
}
</style>

4
pages/plugins/live/pull/pull.nvue
View File

@ -9,7 +9,7 @@
<!-- 主播暂时离开的提示信息-->
<view v-if="live_be_right_back_error" class="live-pause flex-row align-c jc-c" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<view class="flex-1 flex-col align-c jc-c">
<component-icon propName="smallbell" propSize="100rpx" propColor="#fff"></component-icon>
<u-icon propName="smallbell" propSize="100rpx" propColor="#fff"></u-icon>
<text class="pointer-events-auto text-size mb-5 cr-white">主播暂时离开</text>
<text class="pointer-events-auto text-size-sm cr-white">休息片刻，更多精彩马上到来</text>
</view>
@ -31,7 +31,6 @@
</view>
</template>
<script>
import componentIcon from './components/icon/icon.vue';
import componentLiveVideo from './components/video/video.vue';
import componentLiveContent from './components/live-content/live-content.vue';
// 引入点赞效果组件
@ -41,7 +40,6 @@
const app = getApp();
export default {
components: {
componentIcon,
componentLiveVideo,
componentLiveContent,
componentFullScreenLikeEffect

6
pages/plugins/live/pull/pull.vue
View File

@ -25,12 +25,12 @@
</view>
<!-- 视频播放提示 -->
<view v-if="!is_live_ended && is_muted_auto_play_error && !live_be_right_back_error" class="live-play flex-row align-c jc-c pointer-events-none">
<component-icon propName="bofang" class="component-icon-play" propSize="200rpx" propColor="#fff" @click="muted_tap"></component-icon>
<u-icon propName="bofang" class="component-icon-play" propSize="200rpx" propColor="#fff" @click="muted_tap"></u-icon>
</view>
<!-- 主播暂时离开的提示信息-->
<view v-if="live_be_right_back_error" class="live-pause flex-row align-c jc-c pointer-events-none">
<view class="flex-1 flex-col align-c jc-c">
<component-icon propName="coffee" propSize="100rpx" propColor="#fff"></component-icon>
<u-icon propName="coffee" propSize="100rpx" propColor="#fff"></u-icon>
<text class="text-size mt-5 cr-white">主播暂时离开</text>
<text class="text-size-sm mt-5 cr-white">休息片刻，更多精彩马上到来</text>
</view>
@ -39,7 +39,6 @@
</view>
</template>
<script>
import componentIcon from './components/icon/icon.vue';
import componentLiveVideo from './components/video/video.vue';
import componentLiveContent from './components/live-content/live-content.vue';
// 引入点赞效果组件
@ -51,7 +50,6 @@
components: {
componentLiveVideo,
componentLiveContent,
componentIcon,
componentFullScreenLikeEffect
},
mixins: [mixins],

13
pages/plugins/video/components/comment-info.vue
View File

@ -27,7 +27,7 @@
<view class="comment-operation flex-row align-c jc-sb gap-10">
<view class="comment-operation-left flex-row align-c gap-10">
<view class="comment-time">{{ propComment.add_time }}</view>
<view class="comment-reply flex-row align-c gap-5">{{ propReplyContent || reply_html }}({{ propComment.comments_count }})</view>
<view class="comment-reply flex-row align-c gap-5">{{ propReplyContent || $t('common.reply') }}({{ propComment.comments_count }})</view>
</view>
<view class="comment-operation-right flex-row align-c gap-5" @tap.stop="comment_like">
<iconfont name="icon-givealike-o-fine" :color="propComment.is_give_thumbs == 0 ? '#000' : '#F4B73F'" size="28rpx" />
@ -42,13 +42,13 @@
<script>
const app = getApp();
//#ifdef APP-NVUE
import { initVueI18n } from '@dcloudio/uni-i18n'
import i18nMessages from '@/locale/index-nvue.js'
const { t } = initVueI18n(i18nMessages)
const $t = t;
import i18n from '@/locale/index.js';
//#endif
import { isEmpty } from '@/common/js/common/common.js';
export default {
//#ifdef APP-NVUE
i18n,
//#endif
props: {
propComment: {
type: Object,
@ -76,8 +76,7 @@
dropdownOptions: [
{ label: this.$t('common.del'), type: 'delete' },
{ label: this.$t('common.complaint'), type: 'report' }
],
reply_html: $t('common.reply'),
]
};
},
computed: {

15
pages/plugins/video/components/comment-more.vue
View File

@ -1,6 +1,6 @@
<template>
<view class="more-title flex-row align-c" @tap="comment_more_event">
<text>{{ propText || expand_html }}</text>
<text>{{ propText || $t('common.expand') }}</text>
<view class="ml-5">
<iconfont :name="propIconName" color="#999" size="20rpx" />
</view>
@ -9,12 +9,12 @@
<script>
//#ifdef APP-NVUE
import { initVueI18n } from '@dcloudio/uni-i18n'
import i18nMessages from '@/locale/index-nvue.js'
const { t } = initVueI18n(i18nMessages)
const $t = t;
import i18n from '@/locale/index.js';
//#endif
export default {
//#ifdef APP-NVUE
i18n,
//#endif
props: {
propId: {
type: [String, Number],
@ -33,11 +33,6 @@ export default {
default: 'icon-arrow-down'
},
},
data() {
return {
expand_html: $t('common.expand'),
};
},
methods: {
comment_more_event() {
this.$emit('comment_more_event', this.propId, this.propIsLevel);

8
pages/plugins/video/components/loading.vue
View File

@ -2,7 +2,7 @@
<view class="wh-auto ht-auto flex-row align-c jc-c">
<view class="more-history-btn cp flex-row align-c">
<view class="more-history-btn-icon margin-right-xs">
<iconfont name="icon-reset" size="28rpx" color="#999"></iconfont>
<u-icon propName="reset" propSize="28rpx" propColor="#999"></u-icon>
</view>
<text>{{ propContent || $t('common.loading_in_text') }}</text>
</view>
@ -10,7 +10,13 @@
</template>
<script>
//#ifdef APP-NVUE
import i18n from '@/locale/index.js';
//#endif
export default {
//#ifdef APP-NVUE
i18n,
//#endif
props: {
propContent: {
type: String,

14
pages/plugins/video/components/search.vue
View File

@ -11,7 +11,13 @@
</template>
<script>
//#ifdef APP-NVUE
import i18n from '@/locale/index.js';
//#endif
export default {
//#ifdef APP-NVUE
i18n,
//#endif
props: {
propSearchQuery: {
type: String,
@ -40,14 +46,10 @@ export default {
},
methods: {
init() {
this.setData({
search_keywords: this.search_keywords
})
this.search_keywords = this.search_keywords;
},
handle_search(event) {
this.setData({
search_keywords: event.target.value,
});
this.search_keywords = event.target.value;
},
perform_search() {
// 这里可以添加搜索逻辑

953
pages/plugins/video/detail/detail.nvue
View File

File diff suppressed because it is too large Load Diff