diff --git a/components/u-icon/u-icon.vue b/components/u-icon/u-icon.vue
new file mode 100644
index 00000000..01ab66bf
--- /dev/null
+++ b/components/u-icon/u-icon.vue
@@ -0,0 +1,108 @@
+<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: '28rpx',
+            },
+            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>
\ No newline at end of file
diff --git a/components/u-popup/u-popup.vue b/components/u-popup/u-popup.vue
new file mode 100644
index 00000000..4ac9a4be
--- /dev/null
+++ b/components/u-popup/u-popup.vue
@@ -0,0 +1,707 @@
+<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">
+                        <u-icon :propName="propCloseIcon" :propType="propCloseIconType" :propSize="propCloseIconSize + 'rpx'"></u-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';
+    // #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,
+        },
+        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>
diff --git a/components/u-share-popup/u-share-popup.vue b/components/u-share-popup/u-share-popup.vue
new file mode 100644
index 00000000..e5f0a328
--- /dev/null
+++ b/components/u-share-popup/u-share-popup.vue
@@ -0,0 +1,340 @@
+<template>
+    <view :class="theme_view">
+        <u-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">
+                        <u-icon name="close-line" size="28rpx" color="#999"></u-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>
+        </u-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 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: {
+            componentUserBase,
+        },
+
+        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>