Jelajahi Sumber

开发合成海报组件

bayi 1 tahun lalu
induk
melakukan
ec7da73bc3

+ 23 - 0
components/createPoster/index.js

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

+ 4 - 0
components/createPoster/index.json

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

+ 64 - 0
components/createPoster/index.less

@@ -0,0 +1,64 @@
+.mediaBox {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.35);
+
+    .btns {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 25rpx 60rpx;
+        padding-bottom: calc(env(safe-area-inset-bottom) + 25rpx);
+        background-color: white;
+
+        .btn {
+            width: 275rpx;
+            padding: 13rpx 0;
+            text-align: center;
+            font-size: 32rpx;
+            color: #FFFFFF;
+            background: linear-gradient(180deg, #6EC8FF 0%, #31BDFE 100%);
+            box-shadow: 0rpx 6rpx 4rpx 0rpx rgba(0, 0, 0, 0.08);
+            border-radius: 39rpx;
+        }
+    }
+}
+
+/* 转圈动画 */
+@keyframes falsh-identifier {
+    0% {
+        transform: rotate(0deg) scale(0.7);
+    }
+
+    50% {
+        transform: rotate(180deg) scale(1);
+    }
+
+    100% {
+        transform: rotate(360deg) scale(0.7);
+    }
+}
+
+@keyframes falsh-scale {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.2);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}

+ 6 - 0
components/createPoster/index.wxml

@@ -0,0 +1,6 @@
+<view class="mediaBox" wx:if="{{state}}">
+    <view class="btns">
+        <view class="btn">立即分享</view>
+        <view class="btn" style="background: linear-gradient(180deg, #FFB382 0%, #FFA45D 100%);">保存海报</view>
+    </view>
+</view>

+ 56 - 0
components/createPoster/index.wxss

@@ -0,0 +1,56 @@
+.mediaBox {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+.mediaBox .btns {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 25rpx 60rpx;
+  padding-bottom: calc(env(safe-area-inset-bottom) + 25rpx);
+  background-color: white;
+}
+.mediaBox .btns .btn {
+  width: 275rpx;
+  padding: 13rpx 0;
+  text-align: center;
+  font-size: 32rpx;
+  color: #FFFFFF;
+  background: linear-gradient(180deg, #6EC8FF 0%, #31BDFE 100%);
+  box-shadow: 0rpx 6rpx 4rpx 0rpx rgba(0, 0, 0, 0.08);
+  border-radius: 39rpx;
+}
+/* 转圈动画 */
+@keyframes falsh-identifier {
+  0% {
+    transform: rotate(0deg) scale(0.7);
+  }
+  50% {
+    transform: rotate(180deg) scale(1);
+  }
+  100% {
+    transform: rotate(360deg) scale(0.7);
+  }
+}
+@keyframes falsh-scale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

+ 3 - 3
components/invite/index.js

@@ -10,9 +10,9 @@ Component({
         current: 1
     },
     lifetimes: {
-        attached() {
-            this.openInvite()
-        }
+        /*  attached() {
+             this.openInvite()
+         } */
     },
     methods: {
         openInvite() {

+ 2 - 1
components/invite/index.json

@@ -1,6 +1,7 @@
 {
     "component": true,
     "usingComponents": {
-        "popUp": "/components/popUp/index"
+        "popUp": "/components/popUp/index",
+        "createPoster": "/components/createPoster/index"
     }
 }

+ 2 - 1
components/invite/index.wxml

@@ -47,4 +47,5 @@
             </view>
         </view>
     </scroll-view>
-</popUp>
+</popUp>
+<createPoster></createPoster>

+ 2 - 1
salesperson/pages/saleOffice/index.json

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

+ 2 - 0
salesperson/pages/saleOffice/index.wxml

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

+ 3 - 3
utils/request.js

@@ -6,13 +6,13 @@ const {
         envVersion
     }
 } = wx.getAccountInfoSync();
-if (envVersion == 'develop') {
+/* if (envVersion == 'develop') {
     baseUrl = 'https://reader-api.efunbox.cn/wx'
     oldUrl = 'https://reader-api.efunbox.cn'
-} else {
+} else { */
     baseUrl = 'https://reader-api.ai160.com/wx'
     oldUrl = 'https://reader-api.ai160.com'
-}
+// }
 
 function request(url, method, data, oldBaseUrl = false, intercept = true) {
     let header = {