开发

components/createPoster/index.js

@@ -1,16 +1,13 @@
 Component({
     properties: {
-
     },
     data: {
-        state: true,
+        state: false,
         img: ''
     },
     methods: {
-        open(val) {
-            console.log(val);
+        open() {
             this.setData({
-                img: val.img,
                 state: true
             })
         },

components/createPoster/index.less

@@ -2,12 +2,37 @@
     position: fixed;
     top: 0px;
     left: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100vw;
     height: 100vh;
     display: flex;
     justify-content: center;
     background-color: rgba(0, 0, 0, 0.35);
 
+    .poster {
+        position: relative;
+        margin-bottom: 120rpx;
+        width: 646rpx;
+        height: 959rpx;
+
+        .close {
+            position: absolute;
+            width: 60rpx;
+            height: 60rpx;
+            top: -71rpx;
+            right: -26rpx;
+        }
+
+        .img {
+            width: 100%;
+            height: 100%;
+            border-radius: 20rpx;
+            overflow: hidden;
+        }
+    }
+
     .btns {
         position: absolute;
         bottom: 0;

components/createPoster/index.wxml

@@ -1,4 +1,8 @@
 <view class="mediaBox" wx:if="{{state}}">
+    <view class="poster">
+        <image src="/static/lollipop.png" class="close" catchtap="closeMediaBox" />
+        <image src="https://reader-wx.ai160.com/images/reader/pay/shareBg.jpg" class="img" />
+    </view>
     <view class="btns">
         <view class="btn">立即分享</view>
         <view class="btn" style="background: linear-gradient(180deg, #FFB382 0%, #FFA45D 100%);">保存海报</view>

components/createPoster/index.wxss

@@ -2,12 +2,32 @@
   position: fixed;
   top: 0px;
   left: 0px;
+  align-items: center;
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.35);
 }
+.mediaBox .poster {
+  position: relative;
+  margin-bottom: 120rpx;
+  width: 646rpx;
+  height: 959rpx;
+}
+.mediaBox .poster .close {
+  position: absolute;
+  width: 60rpx;
+  height: 60rpx;
+  top: -71rpx;
+  right: -26rpx;
+}
+.mediaBox .poster .img {
+  width: 100%;
+  height: 100%;
+  border-radius: 20rpx;
+  overflow: hidden;
+}
 .mediaBox .btns {
   position: absolute;
   bottom: 0;

components/invite/index.js

@@ -35,6 +35,10 @@ Component({
                 }
             })
         },
+        createPoster(){
+            this.closeInvite()
+            this.selectComponent('#createPoster').open()
+        },
         jump() {
             wx.navigateTo({
                 url: '/salesperson/pages/gzhShare/index',

components/invite/index.wxml

@@ -17,7 +17,7 @@
                 <image src="/static/wx.png" class="icon" />
                 <view class="label">微信好友</view>
             </view>
-            <view class="box">
+            <view class="box" bindtap="createPoster">
                 <image src="/static/hb.png" class="icon" />
                 <view class="label">生成海报</view>
             </view>
@@ -34,8 +34,8 @@
             <view class="title">
                 分享时可选用文案
             </view>
-            <swiper class="swiper" current="{{current}}" circular indicator-dots="{{true}}" indicator-active-color="#B2B8C3"
-                indicator-color='#E5E5E5'>
+            <swiper class="swiper" current="{{current}}" circular indicator-dots="{{true}}"
+                indicator-active-color="#B2B8C3" indicator-color='#E5E5E5'>
                 <swiper-item wx:for="{{3}}" wx:key="index">
                     <view class="content">
                         新课标语文素养培育,新课标语文素养培育 新课标语文素养培育,新课标语文素养培育 新课标语文素养培育,新课标语文素养培育 新课标语文素养培育,新课标语文素养培育
@@ -48,4 +48,4 @@
         </view>
     </scroll-view>
 </popUp>
-<createPoster></createPoster>
+<createPoster id="createPoster"></createPoster>

salesperson/pages/saleOffice/index.json

@@ -1,7 +1,6 @@
 {
     "usingComponents": {
-        "InvitePop":"/components/invite/index",
-        "createPoster": "/components/createPoster/index"
+        "InvitePop":"/components/invite/index"
     },
     "navigationBarTitleText": "推荐中心"
 }

salesperson/pages/saleOffice/index.wxml

@@ -51,6 +51,4 @@
         </button>
     </view>
     <InvitePop id="InvitePop"></InvitePop>
-    <createPoster id="createPoster"></createPoster>
-
 </view>