xiaoe_mp_npm 0.0.28-t1206

package/src/AliveInvite/LiveRoomVertical/components/friends/friends.wxss

@@ -0,0 +1,82 @@
+@keyframes popping {
+    from {
+      transform: translateY(11.2px);
+      opacity: 0.5;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+}
+.container-friends {
+    animation: popping ease 300ms;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 750px;
+    height: 1120px;
+    background-color: #fff !important;
+    background: url("https://wechatapppro-1252524126.cos.ap-shanghai.myqcloud.com/appgwaqerxu2025/image/b_u_5b2225aa46488_oGKN7IvA/kpzb2l510aau.png?imageView2/2/w/200/q/60");
+    background-size: contain;
+    background-repeat: no-repeat;
+    border-radius: 16px 16px 0 0;
+}
+.header {
+    height: 146px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: PingFangSC-Medium;
+    font-size: 36px;
+    color: #333333;
+    text-align: center;
+}
+.count-style {
+    position: absolute;
+    left: 65%;
+}
+.icon-left-back {
+    position: absolute;
+    left: 20px;
+    transform: rotate(270deg);
+    width: 45px;
+    height: 45px;
+}
+.detail {
+    padding: 32px;
+}
+.friend-list {
+    flex: 1;
+    overflow: scroll;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    padding: 0 16px;
+}
+.friend-item {
+    display: flex;
+    text-align: center;
+    height: 152px;
+    margin: 0 20px 32px 20px;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+}
+.img-avatar {
+    width: 96px;
+    height: 96px;
+    border-radius: 100%;
+}
+.name {
+    margin-top: 12px;
+    width: 96px;
+    font-family: PingFangSC-Medium;
+    font-size: 24px;
+    color: #333333;
+    text-align: center;
+    /* margin-left: 20px; */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/src/AliveInvite/LiveRoomVertical/components/invite-poster/invite-poster.js

@@ -0,0 +1,227 @@
+// associate/alive_pusher/components/invite-poster2/invite-poster2.js
+// import { Current } from "@tarojs/taro";
+// let app = Current.app;
+// import EventBus from '../../../libs/alive_pusher/eventBus/EventBus';
+// import untils from '../../../libs/alive_pusher/user_acction';
+// import store from "@/store";
+// import { GET_ALIVE_INVITE_IMAGE, GET_SHORT_SHARE_URL } from "../../../libs/alive_pusher/constant/api/live";
+import { BASE_URL, ENV_NAME } from "../../../../common/libs/playerRequestUrl";
+// import Taro from '@tarojs/taro';
+// import api from '@/api/index';
+import {
+    getShareUrl
+} from "../../../../common/api/eLiveInvite";
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        alive_id: {
+            type: String,
+            value: ""
+        },
+        alive_mode: {
+            type: Number,
+            value: 0
+        },
+        userId: {
+            type: String
+        },
+        appId: {
+            type: String
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        user_handle: {
+            index: 1, //海报选择
+            pic_url: '', // 海报图片
+            base_pic_url: ''
+        },
+        poster_list: [
+            '/assets/alive_pusher/poster1.png',
+            '/assets/alive_pusher/poster2.png',
+            '/assets/alive_pusher/poster3.png',
+        ],
+    },
+    error_report_image: '', //数据上报图片url
+
+    /**
+     * 组件生命周期函数，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）
+     */
+    ready() {
+        // 海报相关 TODOlist FIXME 
+        // let picUrl = BASE_URL +
+        //     '_alive/client/get_alive_invite_image' + '?' +
+        //     `app_id=${this.properties.appId}&` +
+        //     `user_id=${this.properties.userId}&` +
+        //     `alive_id=${this.properties.alive_id}&` +
+        //     `wx_nickname=${store.state.GlobalModule.userInfo.nickname}&` +
+        //     `wx_avatar=${store.state.GlobalModule.userInfo.headimgurl}&` +
+        //     `token=${store.state.GlobalModule.baseInfo.token}&` +
+        //     'type='
+        // this.setData({
+        //     ['user_handle.base_pic_url']: picUrl,
+        //     ['user_handle.pic_url']: picUrl + '1'
+        // });
+        //TODO 上报数据
+        // this.reportData('click_inviteinalive');
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        // 图片加载完成
+        picShow() {
+            wx.hideLoading();
+            this.setData({
+                hasClick: false
+            });
+        },
+        // 图片加载失败
+        picError() {
+            wx.hideLoading();
+        },
+        //关闭直播邀请海报
+        closeInvite() {
+            this.setData({
+                error_report_image: '', //数据上报图片url: ''
+            }),
+                console.log('close====mo-0000-----')
+            this.triggerEvent("changeShowInvite", { showInvite: false });
+        },
+        //切换海报样式
+        switchIndex(e) {
+            if (Number(e.currentTarget.dataset['index']) + 1 == this.data.user_handle.index) {
+                return
+            } else {
+                this.setData({
+                    hasClick: false
+                })
+            }
+            if (this.data.hasClick) return;
+            this.setData({
+                hasClick: true
+            });
+            wx.showLoading({
+                title: '加载中', //提示的内容,
+                mask: true, //显示透明蒙层，防止触摸穿透
+            });
+            console.warn('base ====>', this.data)
+            let url = this.data.user_handle.base_pic_url + `${Number(e.currentTarget.dataset['index']) + 1}`;
+            this.setData({
+                ['user_handle.index']: Number(e.currentTarget.dataset['index']) + 1,
+                ['user_handle.pic_url']: url
+            });
+        },
+
+        // 保存到本地相册 TODO FIXME eventBus 的替代使用
+        // keepPic() {
+        //     let that = this;
+        //     EventBus.$on('cancelKeep', that, function (res) {
+        //         if (!res) {
+        //             wx.showToast({
+        //                 title: '请前往设置页面点击邀请好友开启授权', //提示的内容,
+        //                 icon: 'none', //图标,
+        //                 duration: 2000, //延迟时间
+        //             });
+        //         }
+        //     })
+        //     untils.keepImg(this.data.user_handle.pic_url);
+        // },
+        //数据上报 TODO FIXME 找到app的替代
+        // reportData(type) {
+        //     const params = {
+        //         app_id: app.networkData.SHOP_APP_ID,
+        //         user_id: app.networkData.B_USER_ID,
+        //     };
+        //     // TODO开发暂时屏蔽数据埋点
+        //     // app.mtj.trackEvent(type, params);
+        // },
+        // 复制直播间链接
+        handleCopyLink() {
+            // const LIVE_BASE_URL = `https://${this.properties.appId}.h5${ENV_NAME ? `.${ENV_NAME}` : '' }.xiaoeknow.com/v2/course/alive/`;
+            // const shareUrl = `${LIVE_BASE_URL}${this.properties.alive_id}?app_id=${this.properties.appId}&alive_mode=1&pro_id=&type=2&share_user_id=${this.properties.userId}`;
+            const LIVE_BASE_URL = `https://appmzd7lhrj6214.h5${ENV_NAME ? `.${ENV_NAME}` : '' }.xiaoeknow.com/v2/course/alive/`;
+            const shareUrl = `${LIVE_BASE_URL}l_61935f8260b219ba0025f301?app_id=appmzd7lhrj6214&alive_mode=1&pro_id=&type=2&share_user_id=u_6119db8f279b3_BLLGPeghc5`;
+
+            this.getClipboardData(shareUrl);
+        },
+        getClipboardData(shareUrl) {
+            const that = this;
+            // let params = {
+            //     alive_id: this.properties.alive_id,
+            //     alive_mode: 1,
+            //     app_id: this.properties.appId,
+            //     query: shareUrl
+            // }
+            let params = {
+                alive_id: "l_61935f8260b219ba0025f301",
+                alive_mode: 1,
+                app_id: "appmzd7lhrj6214",
+                query: shareUrl
+            }
+            getShareUrl(params).then((res) => {
+                console.log("debug 复制分享链接的url", res.data);
+                wx.setClipboardData({
+                    data: decodeURIComponent(res.data.data.url_link),
+                    success: res => {
+                        wx.getClipboardData({
+                            success(res) {
+                                console.log("debug share url", res.data);
+                                wx.showToast({
+                                    title: "复制链接成功",
+                                    icon: "success",
+                                    duration: 2000,
+                                });
+                                that.closeInvite();
+                            }
+                        })
+                    },
+                    fail: () => {
+                        wx.showToast({
+                            title: '复制失败',
+                            icon: 'none'
+                        })
+                    }
+                })
+            }, reason => {
+                wx.showToast({
+                  title: '复制失败',
+                  icon: 'none'
+                })
+                console.error(reason); // 出错了！
+            })
+
+        },
+        handleLoadImage() {
+            wx.hideLoading()
+        },
+        toShare() {
+            const LIVE_BASE_URL = `https://${this.properties.appId}.h5${ENV_NAME ? `.${ENV_NAME}` : '' }.xiaoeknow.com/v2/course/alive/`;
+            let shareUrl = `${LIVE_BASE_URL}${this.properties.alive_id}?app_id=${this.properties.appId}&alive_mode=1&pro_id=&type=2`
+            let that = this;
+            let webViewUrl = "/pages/webView/webView";
+            //TODO FIX ME TARO改为原生的分享
+            // Taro.Current.page.onShareAppMessage = function (res) {
+            //     // 跳转
+            //     let params = {
+            //         pageUrl: shareUrl,
+            //         alive_id: that.properties.alive_id,
+            //     };
+            //     let totalParams = encodeURIComponent(JSON.stringify(params));
+            //     return {
+            //         title: 'Custom Title',
+            //         path: `${webViewUrl}?params=${totalParams}`,
+            //         // imageUrl: that.detailMsg.img_url,
+            //     };
+            // };
+        },
+
+    }
+})
+
+

package/src/AliveInvite/LiveRoomVertical/components/invite-poster/invite-poster.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/src/AliveInvite/LiveRoomVertical/components/invite-poster/invite-poster.wxml

@@ -0,0 +1,64 @@
+<!--associate/alive_pusher/components/invite-poster2/invite-poster2.wxml-->
+<view class="poster">
+	<view class="mask-layer" bindtap="closeInvite"></view>
+	<view class="poster-wrap">
+		<view class="poster-header">
+			<view class="header-text">分享给</view>
+			<view bindtap="closeInvite" class="close-icon-view">
+				<image src="../../../images/liveClose.png" class="poster-header_icon" catchtap="closeInvite"/>
+			</view>
+		</view>
+		<!-- <view class="poster-content" hidden="{{true}}">
+			<image src="{{user_handle.pic_url}}" class="poster-content_image" bindload="handleLoadImage" binderror="picError"/>
+		</view>
+		<view class="poster-list" hidden="{{true}}">
+			<scroll-view scroll-x="{{true}}" bindscroll="scroll" class="scroll-view">
+				<image class="poster-item {{user_handle.index===index+1?'active-poster':''}}" wx:for="{{poster_list}}" src="{{item}}" catchtap="switchIndex" data-index="{{index}}"/>
+			</scroll-view>
+			<view class="poster-list_mask"></view>
+		</view> -->
+		<view class="poster-bottom" >
+			<view class="bottom-item">
+        <button open-type="share" class="share-btn">
+          <image src="../../../images/wechat.png" class="bottom-item_img"/>
+        </button>
+				<view class="bottom-item-text">分享给好友</view>
+			</view>
+			<view class="bottom-item" catchtap="handleCopyLink">
+				<image src="../../../images/copylink.png" class="bottom-item_img"/>
+				<view class="bottom-item-text" catchtap="handleCopyLink">复制链接</view>
+			</view>
+		</view>
+    <!-- <view class="cancel-btn" catchtap="closeInvite">取消</view>
+    <view class="blank-view"></view> -->
+	</view>
+	<!-- <view class="poster-top">
+		<view class="poster-pic">
+			<image class="poster_image" src="{{user_handle.pic_url}}" bindload="picShow" binderror="picError"></image>
+		</view>
+		<view class="poster-pic_icon" catchtap="closeInvite">
+			<image class="poster-pic_image" src="/assets/alive_pusher/close.png"></image>
+		</view>
+	</view>
+	<view class="poster-bottom">
+		<view class="poster_tips">保存邀请海报发送给好友</view>
+		<view class="poster-container">
+			<view class="poster_keep" catchtap="keepPic">
+				<image class="poster_keep-image" src="/assets/alive_pusher/download.png"></image>
+				<view class="poster_keep-text">保存到相册</view>
+			</view>
+			<view class="poster-list">
+				<view class="poster-item {{user_handle.index==1?'indexset':''}}" catchtap="switchIndex" data-index="1">
+					<image class="poster_image" src="/assets/alive_pusher/poster1.png"></image>
+				</view>
+				<view class="poster-item {{user_handle.index==2?'indexset':''}}" catchtap="switchIndex" data-index="2">
+					<image class="poster_image" src="/assets/alive_pusher/poster2.png"></image>
+				</view>
+				<view class="poster-item {{user_handle.index==3?'indexset':''}}" catchtap="switchIndex" data-index="3">
+					<image class="poster_image" src="/assets/alive_pusher/poster3.png"></image>
+				</view>
+			</view>
+		</view>
+	</view> -->
+</view>
+

package/src/AliveInvite/LiveRoomVertical/components/invite-poster/invite-poster.wxss

@@ -0,0 +1,167 @@
+/* associate/alive_pusher/components/invite-poster2/invite-poster2.wxss */
+.poster {
+  width: 100%;
+  height: 100vh;
+  z-index: 2;
+  position: fixed;
+  top: 0;
+  left: 0;
+  /* background-color: rgba(0, 0, 0, 0.6); */
+}
+
+.poster-wrap{
+  width: 100%;
+  height: 384rpx;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 16rpx 16rpx 0 0;
+  backdrop-filter: blur(16px);
+  animation: popping ease 300ms;
+}
+  @keyframes popping {
+    from {
+      opacity: 0.5;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+.poster-header{
+  height: 176rpx;
+  color: #333;
+  font-family: PingFangSC-Medium;
+  font-size: 32rpx;
+  color: #FFFFFF;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.close-icon-view{
+  width: 60rpx;
+  height: 60rpx;
+  position: absolute;
+  top: 64rpx;
+  right: 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.mask-layer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-color:#ffffff;
+  opacity: 0;
+}
+.poster-header_icon{
+  width: 48rpx;
+  height: 48rpx;
+}
+.header-text {
+  font-size: 36rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  color: #FFFFFF;
+}
+.poster-content{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+.poster-content_image{
+  width: 420rpx;
+  height: 736rpx;
+  border-radius: 16rpx;
+  background-color: #D1E3FF;
+}
+.poster-list{
+  padding: 8rpx 68rpx 8rpx 0;
+  position: relative;
+}
+.scroll-view{
+  width: 100%;
+  position: relative;
+  white-space: nowrap;
+}
+.poster-item{
+  width: 68rpx;
+  height: 120rpx;
+  border-radius: 12rpx;
+  margin-left: 32rpx;
+  background-color: #D1E3FF;
+  display: inline-block;
+}
+.poster-list_mask{
+  width: 64rpx;
+  height: 152rpx;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: #FFFFFF;
+  box-shadow: -8px 0px 8px -8px rgba(0, 0, 0, 0.3);
+}
+.poster-bottom{
+  display: flex;
+  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
+  padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
+}
+.bottom-item{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #FFFFFF;
+  font-size: 28rpx;
+}
+.bottom-item .view{
+  height: 36rpx;
+  margin-top: 16rpx;
+  background-color: #FFFFFF;
+  font-size: 24rpx;
+}
+.bottom-item-text {
+  height: 36rpx;
+  margin-top: 16rpx;
+  font-size: 24rpx;
+}
+.bottom-item_img{
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+}
+.share-btn {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  padding: 0;
+}
+.active-poster{
+  border: 2px solid #1472FF;
+}
+
+.cancel-btn {
+  width: 100%;
+  height: 96rpx;
+  background: #FFFFFF;
+  color: #000000;
+  font-size: 28rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  bottom: 68rpx;
+}
+.blank-view {
+  position: absolute;
+  bottom: 0;
+  height: 68rpx;
+  width: 100%;
+  background: #FFFFFF;
+}

package/src/AliveInvite/LiveRoomVertical/components/rewards/rewards.js

@@ -0,0 +1,116 @@
+// import room from '@/api/room';
+import {
+    getActivityRules
+} from "../../../../common/api/eLiveInvite";
+Component({
+    properties: {
+        inActivity: {
+            type: Boolean,
+            value: false
+        },
+        roomInfo: {
+            type: Object,
+            value: {}
+        },
+        appId: {
+            type: String,
+            value: ""
+        },
+        userId: {
+            type: String,
+            value: ""
+        }
+    },
+    data: {
+        rewardList: [],
+        // 折叠后展示的奖品
+        displayRewardList: [
+            {
+                prize: '一个钻石',
+                min: 1,
+                max: 1
+            },
+            {
+                prize: '一个项链',
+                min: 2,
+                max: 5
+            },
+            {
+                prize: '一个戒指戒指戒指戒指戒指戒指戒指戒指',
+                min: 6,
+                max: 10
+            },
+            {
+                prize: '一个石头石头石头石头石头石头石头石头石头石头',
+                min: 11,
+                max: 20
+            }
+        ],
+        isShowRules: false,
+        isShowReward: true,
+        isFold: true // 折叠奖品
+    },
+    ready() {
+        this.getRewardsList();
+    },
+    methods: {
+        getRewardsList() {
+            // let params = {
+            //     bizData: {
+            //         resource_id: this.properties.roomInfo.alive_id,
+            //         resource_type: 4
+            //     },
+            //     user_id: this.properties.userId,
+            //     app_id: this.properties.appId
+
+            // }
+            let params = {
+                bizData: {
+                    resource_id: "l_61935f8260b219ba0025f301",
+                    resource_type: 4
+                },
+                user_id: "u_6119db8f279b3_BLLGPeghc5",
+                app_id: "appmzd7lhrj6214"
+
+            }
+            getActivityRules(params).then(res => {
+                let DATA = res.data;
+                if (DATA.code === 0) {
+                    this.setData({
+                        rewardList: DATA.data.prize_rules,
+                        isShowRules: !!DATA.data.is_show_remark
+                    })
+                    this.computedDisplayReward(this.data.isFold, this.data.rewardList)
+                } else {
+                    wx.showToast({
+                        title: DATA.msg,
+                        icon: 'error'
+                    })
+                }
+            }).catch(err => {
+                wx.showToast({
+                    title: err.data.msg,
+                    icon: 'error'
+                })
+            })
+        },
+        // 重新计算展示奖品数目
+        computedDisplayReward(ISFOLD, REWARD) {
+            let displayRewardList = ISFOLD ? REWARD.slice(0, 1) : REWARD;
+            this.setData({
+                displayRewardList: displayRewardList
+            })
+        },
+        // 切换折叠效果
+        switchFold() {
+            this.setData({
+                isFold: !this.data.isFold
+            })
+            this.computedDisplayReward(this.data.isFold, this.data.rewardList);
+        },
+        // 向父组件发送事件：打开规则详情弹窗
+        openRuleDetail() {
+            this.triggerEvent('openRuleDetail')
+        }
+    }
+})

package/src/AliveInvite/LiveRoomVertical/components/rewards/rewards.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}