nvue页面初步更新
于肖磊
parent
276e629a4c
commit
632dfbcaff
|
|
@ -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);
|
||||
|
||||
// 存储底部菜单高度
|
||||
|
|
|
|||
|
|
@ -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
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
import zh from './zh.json';
|
||||
import en from './en.json';
|
||||
|
||||
export default {
|
||||
"zh": zh,
|
||||
"en": en
|
||||
}
|
||||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
},
|
||||
/**
|
||||
* 直播内容组件属性
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||