xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

package/miniprogram_dist/SharePoster/PosterDom/index.json

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

package/miniprogram_dist/SharePoster/PosterDom/index.less

@@ -0,0 +1,57 @@
+.canvasPosition{
+    //把canvas定位到可视区外，这样切换励志语录时，不会看到页面级抖动
+    position: absolute;
+    left:9999px;
+    top:9999px;
+}
+.posterDetail{ 
+   position: fixed; 
+   left:50%;
+   transform: translateX(-50%);
+   bottom:470rpx;
+   display: flex;
+   flex-direction: column;
+   .posterContent{
+        height: calc(100vh - 570rpx);
+        border-radius: 16rpx;
+        box-shadow: 0rpx 12rpx 20rpx 0rpx rgb(0 0 0 / 8%);
+        width: calc((100vh - 570rpx)*9/16);
+    }
+    .saveDes,.switch-motive-btn{
+        .finger-print,.refresh {
+            width: 32rpx;
+            height: 32rpx;
+            margin-right: 10rpx;
+        }
+    }
+    .saveDes {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 24rpx;
+        color: #fff;
+        font-size: 24rpx;
+    }
+    .switch-motive-btn{
+        position: absolute;
+        top: 27%;
+        right: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 192rpx;
+        height: 48rpx;
+        border-radius: 24rpx 0 0 24rpx;
+        background: rgba(0, 0, 0, 0.4);
+        color: #fff;
+        font-weight: 400;
+        font-size: 20rpx;
+    }
+    &.single-poster {
+        bottom: 410rpx;
+        .posterContent {
+            height: calc(100vh - 500rpx);
+            width: calc((100vh - 500rpx)*9/16);
+        }
+    }
+}

package/miniprogram_dist/SharePoster/PosterDom/index.wxml

@@ -0,0 +1,13 @@
+<view class="container">
+        <view>
+        <canvas class="canvasPosition" wx-if="{{isVisible}}"  type="2d" style="height: 1344px; width:750px;"  id='customCanvas'></canvas>
+        </view>
+        <view class="posterDetail">
+                <image lazy-load="true" class="posterContent" src="{{imageUrl}}" show-menu-by-longpress="true" alt="" bindlongpress="longPress"></image>
+                <view class="saveDes">
+                    <image class="finger-print" src="../../common/assets/images/fingerprint.png"></image>
+                    <view>长按上方图片保存并分享</view>
+                </view>
+                <view wx-if="{{isSwitchBtnShow}}" class="switch-motive-btn" bindtap="changeRecTxt"><image class="refresh" src="../../common/assets/images/refresh_white.svg"></image>切换励志语录 </view>
+        </view>   
+  </view>

package/miniprogram_dist/SharePoster/PosterDom/index.wxss

@@ -0,0 +1,57 @@
+.canvasPosition {
+  position: absolute;
+  left: 9999px;
+  top: 9999px;
+}
+.posterDetail {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 512rpx;
+  display: flex;
+  flex-direction: column;
+}
+.posterDetail .posterContent {
+  height: calc(100vh - 616rpx);
+  border-radius: 16rpx;
+  box-shadow: 0rpx 12rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
+  width: calc((100vh - 616rpx)*9/16);
+}
+.posterDetail .saveDes .finger-print,
+.posterDetail .switch-motive-btn .finger-print,
+.posterDetail .saveDes .refresh,
+.posterDetail .switch-motive-btn .refresh {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 10rpx;
+}
+.posterDetail .saveDes {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 24rpx;
+  color: #fff;
+  font-size: 24rpx;
+}
+.posterDetail .switch-motive-btn {
+  position: absolute;
+  top: 27%;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 192rpx;
+  height: 48rpx;
+  border-radius: 24rpx 0 0 24rpx;
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  font-weight: 400;
+  font-size: 20rpx;
+}
+.posterDetail.single-poster {
+  bottom: 410rpx;
+}
+.posterDetail.single-poster .posterContent {
+  height: calc(100vh - 500rpx);
+  width: calc((100vh - 500rpx)*9/16);
+}

package/miniprogram_dist/SharePoster/README.md

@@ -0,0 +1,10 @@
+- 开发：曹颖丽
+
+- 用处：直播列表页分享，分享海报
+
+- 使用说明
+
+  ```javascript
+  // 这里写使用这个组件的demo
+  
+  ```

package/miniprogram_dist/SharePoster/ShareTextPopup/index.js

@@ -0,0 +1,66 @@
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        recommendInfo: {
+            type: Array,
+            value: () => {
+                return [];
+            }
+        },
+        recommendPopupVisible:{
+            type:Boolean,
+            value:false
+        }
+    },
+    lifetimes: {
+    },
+    
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        title:"推荐语",
+        noticeText:"分享到好友/朋友圈，附上推荐语更有诚意。",
+        recommendWord:"看，这个课程绝对棒，不看你会后悔的，来跟我一起学习吧",
+        shareText:"换一条",
+    },
+  
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+          onClose() {
+            this.triggerEvent("changePopupVisible", false)
+          },
+          copyWord(){
+              this.triggerEvent("changePopupVisible", false)
+              wx.setClipboardData({
+                data: this.data.recommendWord,
+                success (res) {
+                    wx.getClipboardData({
+                        success (res) {
+                            wx.showToast({
+                                title:'复制文案成功'
+                            })
+                        }, fail() {
+                          wx.showToast({
+                              title: '复制失败',
+                              icon: 'none'
+                          })
+                      }
+                    })
+                }
+            })
+          },
+          changeShareText(){
+              console.log(this,this.data.recommendInfo,'shareAddInfo');
+              let temText = this.data.recommendInfo;
+              let random = Math.floor(Math.random() * temText.length);
+              this.setData({
+                recommendWord:temText[random]
+              })
+          }
+    }
+  })

package/miniprogram_dist/SharePoster/ShareTextPopup/index.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+      "van-popup": "@vant/weapp/popup/index",
+      "van-icon": "@vant/weapp/icon/index"
+    }
+  }

package/miniprogram_dist/SharePoster/ShareTextPopup/index.less

@@ -0,0 +1,75 @@
+view.van-popup--bottom{
+    padding-bottom:0 !important
+}
+.popUp {
+    padding: 0 32rpx;
+    border-radius: 16rpx;
+    .header-content {
+        height: 76rpx;
+        width: 100%;
+        background-color: #ffffff;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        .header-title {
+            width:100%;
+            display:flex;
+            justify-content: center;
+            align-items: center;
+            padding-left:32rpx;
+            font-size: 32rpx;
+        }
+        .header-close{
+            width:32rpx;
+        }
+    }
+    .notice{
+        margin: 0 auto;
+        color: #333;
+        text-align: center;
+        font-size: 24rpx;
+    }
+    .recommend-content{
+        margin: 24rpx 32rpx;
+        padding: 32rpx;
+        border-radius: 16rpx;
+        background: #eeeeee;
+        color: #333;
+        font-size: 28rpx;
+        line-height: 42rpx;
+    }
+    .change{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        color: #333;
+        font-size: 28rpx;
+        .refreshImg{
+            width: 32rpx;
+            height: 32rpx;
+        }
+        .desc{
+            margin-left: 10rpx;
+        }
+    }
+    .copy-recommend {
+        display: flex;
+        justify-content: center;
+        padding: 48rpx 0 96rpx 0;
+        .copy-btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 368rpx;
+            height: 80rpx;
+            border: none;
+            border-radius: 40rpx;
+            background: rgba(20, 114, 255, 1);
+            color: #fff;
+            font-weight: 500;
+            font-size: 28rpx;
+        }
+    }
+  }

package/miniprogram_dist/SharePoster/ShareTextPopup/index.wxml

@@ -0,0 +1,29 @@
+<view class="share-text-popup">
+    <van-popup show="{{ recommendPopupVisible }}" bind:close="onClose" position="bottom" custom-class="popUp">
+        <view class="header-content">
+            <view class="header-title">{{ title }}</view>
+            <view class="header-close">
+                <van-icon name="cross" bindtap="onClose" />
+            </view>
+        </view>
+        <view class="notice">
+            {{noticeText}}
+        </view>
+        <view class="recommend-content">
+            <view class="recommend-word">
+                {{recommendWord}}
+            </view>
+        </view>
+        <view class="change">
+            <image src="../../common/assets/images/refresh.svg" class="refreshImg"></image>
+            <view bindtap="changeShareText" class="desc">{{shareText}}</view>
+        </view>
+        <view class="copy-recommend">
+            <button 
+                class="copy-btn" 
+                bindtap="copyWord"> 
+                复制文案
+          </button>
+        </view>
+  </van-popup>
+</view>

package/miniprogram_dist/SharePoster/ShareTextPopup/index.wxss

@@ -0,0 +1,75 @@
+view.van-popup--bottom {
+  padding-bottom: 0 !important;
+}
+.popUp {
+  padding: 0 32rpx;
+  border-radius: 16rpx;
+}
+.popUp .header-content {
+  height: 76rpx;
+  width: 100%;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+.popUp .header-content .header-title {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: 32rpx;
+  font-size: 32rpx;
+}
+.popUp .header-content .header-close {
+  width: 32rpx;
+}
+.popUp .notice {
+  margin: 0 auto;
+  color: #333;
+  text-align: center;
+  font-size: 24rpx;
+}
+.popUp .recommend-content {
+  margin: 24rpx 32rpx;
+  padding: 32rpx;
+  border-radius: 16rpx;
+  background: #eeeeee;
+  color: #333;
+  font-size: 28rpx;
+  line-height: 42rpx;
+}
+.popUp .change {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  color: #333;
+  font-size: 28rpx;
+}
+.popUp .change .refreshImg {
+  width: 32rpx;
+  height: 32rpx;
+}
+.popUp .change .desc {
+  margin-left: 10rpx;
+}
+.popUp .copy-recommend {
+  display: flex;
+  justify-content: center;
+  padding: 48rpx 0 96rpx 0;
+}
+.popUp .copy-recommend .copy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 368rpx;
+  height: 80rpx;
+  border: none;
+  border-radius: 40rpx;
+  background: #1472ff;
+  color: #fff;
+  font-weight: 500;
+  font-size: 28rpx;
+}

package/miniprogram_dist/SharePoster/components/saveTip/index.js

@@ -0,0 +1,40 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    firstContent: {
+      type: String,
+      value: ''
+    },
+    secondContent: {
+      type: String,
+      value: ''
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+  },
+
+  /**
+ * 生命周期函数--监听页面显示
+ */
+  ready: function () {
+    
+  },
+
+  /**
+   *  计算属性
+   */
+  computed: {
+   },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+  }
+})

package/miniprogram_dist/SharePoster/components/saveTip/index.json

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

package/miniprogram_dist/SharePoster/components/saveTip/index.wxml

@@ -0,0 +1,6 @@
+<view class="setting-modal">
+    <view class="content-box">
+        <view class="first-line">{{firstContent}}</view>
+        <view class="second-line">{{secondContent}}</view>
+    </view>
+</view>

package/miniprogram_dist/SharePoster/components/saveTip/index.wxss

@@ -0,0 +1,21 @@
+.setting-modal {
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.content-box {
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 24rpx 32rpx;
+  border-radius: 8rpx;
+  margin-bottom: 176rpx;
+  font-size: 28rpx;
+  font-weight: 400;
+  line-height: 40rpx;
+  color: #fff;
+  text-align: center;
+}

package/miniprogram_dist/SharePoster/components/settingModal/index.js

@@ -0,0 +1,38 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+  },
+
+  /**
+ * 生命周期函数--监听页面显示
+ */
+  ready: function () {
+    
+  },
+
+  /**
+   *  计算属性
+   */
+  computed: {
+   },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    closeModal() {
+      this.triggerEvent('close')
+    },
+    confirm(){
+      this.triggerEvent('confirm')
+    }
+  }
+})

package/miniprogram_dist/SharePoster/components/settingModal/index.json

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

package/miniprogram_dist/SharePoster/components/settingModal/index.wxml

@@ -0,0 +1,9 @@
+<view class="setting-modal" catchtap="closeModal">
+    <view class="content-box" catchtap>
+        <view class="content">无法访问相册，请前往设置允许鹅直播访问你的照片</view>
+        <view class="btn">
+            <view class="cancel" catchtap="closeModal">取消</view>
+            <view class="confirm" catchtap="confirm">去设置</view>
+        </view>
+    </view>
+</view>

package/miniprogram_dist/SharePoster/components/settingModal/index.wxss

@@ -0,0 +1,45 @@
+.setting-modal {
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.content-box {
+  background-color: #fff;
+  width: 576rpx;
+  border-radius: 16rpx;
+  margin-bottom: 176rpx;
+}
+.content-box .content {
+  padding: 48rpx;
+  font-size: 28rpx;
+  font-weight: 400;
+  line-height: 40rpx;
+  color: #000;
+  text-align: center;
+}
+.content-box .btn {
+  display: flex;
+}
+.content-box .btn .cancel,
+.content-box .btn .confirm {
+  flex: 1;
+  height: 96rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #999;
+  font-weight: 500;
+}
+.content-box .btn .cancel {
+  box-shadow: inset 0 0.1rpx 0 0 #ebebeb;
+}
+.content-box .btn .confirm {
+  color: #1472FF;
+  box-shadow: inset 0 0.1rpx 0 0 #ebebeb, inset 0.1rpx 0 0 0 #ebebeb;
+}

package/miniprogram_dist/SharePoster/components/shareCircleTip/index.js

@@ -0,0 +1,35 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+  },
+
+  /**
+ * 生命周期函数--监听页面显示
+ */
+  ready: function () {
+    
+  },
+
+  /**
+   *  计算属性
+   */
+  computed: {
+   },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    closeModal() {
+      this.triggerEvent('close')
+    }
+  }
+})

package/miniprogram_dist/SharePoster/components/shareCircleTip/index.json

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

package/miniprogram_dist/SharePoster/components/shareCircleTip/index.wxml

@@ -0,0 +1,5 @@
+<view class="setting-modal" catchtap="closeModal">
+    <view class="instructor">
+        点击屏幕右上角「…」将直播间分享到朋友圈
+    </view>
+</view>

package/miniprogram_dist/SharePoster/components/shareCircleTip/index.wxss

@@ -0,0 +1,35 @@
+.setting-modal {
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.instructor {
+  position: absolute;
+  top: 16rpx;
+  color: #fff;
+  border-radius: 8rpx;
+  background-color: #1472FF;
+  padding: 24rpx 32rpx;
+  font-size: 28rpx;
+  font-weight: 400;
+  line-height: 44rpx;
+  box-shadow: 0 -4rpx 80rpx 0 rgba(51, 51, 51, 0.2);
+}
+.instructor:after {
+  content: '';
+  position: absolute;
+  top: -30rpx;
+  right: 60rpx;
+  border: 16rpx solid #1472FF;
+  border-color: transparent;
+  border-bottom-color: #1472FF;
+}
+.instructor .share-tip {
+  width: 624rpx;
+}