引导页

src/component/guidePageModal/guidePageModal.js

+// component/guidePageModal/guidePageModal.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    show: { // 显示标识
+      type: Boolean,
+      value: false
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    hidePopup(){
+      this.setData({
+        show: false
+      })
+    }
+  }
+})

src/component/guidePageModal/guidePageModal.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

src/component/guidePageModal/guidePageModal.wxml

+<!--component/guidePageModal/guidePageModal.wxml-->
+<view class="modal-container" bindtap="hidePopup" hidden="{{!show}}"></view>
+<view class="modal-content" hidden="{{!show}}">
+  <image class="guide-img"  src="/assets/imgs/7_1_0/guide.png" mode="widthFix"></image>
+  <view class="modal-close" bindtap="hidePopup">知道了</view>
+</view>

src/component/guidePageModal/guidePageModal.wxss

+/* component/guidePageModal/guidePageModal.wxss */
+@import "/app.wxss";
+.modal-container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 98; 
+}
+.modal-content {
+  position: fixed;
+  z-index: 99;
+  top: 0;
+  right: 26rpx;
+}
+.modal-close{
+  width: 250rpx;
+  height: 92rpx;
+  border-radius: 49rpx;
+  border: 4rpx solid rgba(255, 255, 255, 1);
+  line-height: 92rpx;
+  text-align: center;
+  color: #ffffff;
+  font-size: 38rpx;
+  margin-top: 40rpx;
+  margin-left: 100rpx;
+}
+.guide-img{
+  width: 599rpx;
+}
\ No newline at end of file

src/component/shareModal/shareModal.js

+// component/shareModal/shareModal.js
+const wxService = require('../../utils/wxService')
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    show: { // 显示标识
+      type: Boolean,
+      value: false
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    shareHight:0
+  },
+  observers: {
+    show() {
+      const { show } = this.data
+      if (show){
+        wxService.nextTick(() => {
+          this.getHeightFun();
+        })
+      }
+    }
+  
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    //获取高度
+    getHeightFun(){
+      //获取屏幕高度
+      let windowHeight = '';
+      wx.getSystemInfo({
+        success: function (res) {
+          console.log(res.windowHeight);
+          windowHeight = res.windowHeight
+        },
+      })
+      //获取底部元素高度
+      let query = wx.createSelectorQuery().in (this);
+        query.select('#bottom-query').boundingClientRect(rect => {
+          let height = rect.height;
+          console.log(height)
+          this.setData({
+            shareHight: windowHeight - height + 'px'
+          })
+        }).exec();
+    }
+  }
+})

src/component/shareModal/shareModal.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

src/component/shareModal/shareModal.wxml

+<!--component/shareModal/shareModal.wxml-->
+<view class="modal-container" bindtap="hidePopup" hidden="{{!show}}"></view>
+<view class="modal-content" hidden="{{!show}}">
+  <image style="height:{{shareHight}}" src="/assets/imgs/7_1_0/share-modal.png"></image>
+</view>
+<view class="share-modal-list " id="bottom-query" hidden="{{!show}}">
+    <view class="share-modal-item" bindtap="onTapForward">转发</view>
+    <view class="share-modal-item">添加到我的小程序</view>
+    <view class="share-modal-item">关于聚FUN</view>
+    <view class="share-modal-item">返回</view>
+  </view>
+

src/component/shareModal/shareModal.wxss

+/* component/shareModal/shareModal.wxss */
+@import "/app.wxss";
+.modal-container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  /* transform: translateY(100%); */
+  /* opacity: 0; */
+  /* transition: opacity 200ms; */
+  z-index: 98; 
+}
+
+
+.modal-content {
+  position: fixed;
+  z-index: 99;
+  top: 0;
+  right: 70rpx;
+  /* transition: transform 300ms;
+  transform: translateY(100%); */
+}
+
+.share-modal-list{
+  position: fixed;
+  bottom: 0;
+  z-index: 99;
+  width: 100%;
+  /* transition: transform 300ms;
+  transform: translateY(100%); */
+}
+.share-modal-item{
+  text-align: center;
+  color: #333333;
+  height: 88rpx;
+  line-height: 88rpx;
+  background-color: #ffffff;
+  margin-bottom: 2rpx;
+}
+.share-modal-item:last-child{
+  margin-bottom: 0;
+  margin-top: 8rpx;
+}
+
+

src/pages/extendProduct/extendProduct.js

@@ -7,7 +7,7 @@ Page({
   data: {
     currentTab: 0,
     isAllSelect: false,
-
+    showShareModal:false
   },
 
   /**
@@ -78,6 +78,14 @@ Page({
     }
   },
 
+  //快速分享
+  onTapShare(){
+    console.log('111')
+    this.setData({
+      showShareModal: true
+    })
+  },
+
   /**
    * 生命周期函数--监听页面显示
    */

src/pages/extendProduct/extendProduct.json

 {
   "navigationBarTitleText": "推广商品",
-  "usingComponents": {}
+  "usingComponents": {
+    "share-modal": "/component/shareModal/shareModal"
+  }
 }
\ No newline at end of file

src/pages/extendProduct/extendProduct.wxml

@@ -67,7 +67,7 @@
             </view>
         </view>
         <view class="share-wrap">
-          <view class="share-button">
+          <view class="share-button" bindtap="onTapShare">
             <image mode="widthFix"></image>
             <text>快速分享</text>
           </view>
@@ -114,3 +114,4 @@
       </swiper-item>
 	</swiper>
 </view>
+<share-modal show="{{showShareModal}}" />

src/pages/userCenter/userCenter.js

@@ -26,7 +26,8 @@ wxService.page({
     pageId: 3,
     baseUserInfo: null,
     // cardMember: null,
-    pageBackgroundColor: 0
+    pageBackgroundColor: 0,
+    guidePageModalShow:true
   },
   /**
    * 生命周期函数--监听页面加载

src/pages/userCenter/userCenter.json

@@ -11,6 +11,7 @@
     "icon-swiper": "/component/iconSwiper/iconSwiper",
     "hot-item": "/component/hotItem/hotItem",
     "bannerAd": "/component/bannerAd/bannerAd",
-    "attention": "/component/attention/attention"
+    "attention": "/component/attention/attention",
+    "guide-page-modal": "/component/guidePageModal/guidePageModal"
   }
 }
\ No newline at end of file

src/pages/userCenter/userCenter.wxml

@@ -50,4 +50,5 @@
 	</block>-->
 </view>
 <!--<authorization-modal isAuthorization='{{isAuthorization}}' />-->
+<guide-page-modal show="{{guidePageModalShow}}" />