lisenzhou 2 years ago
parent
commit
96c11eb4f2

+ 30
- 17
src/subpackages/pages/broker/invitation/poster/index.jsx View File

7
 import useCanvas from "./useCanvas";
7
 import useCanvas from "./useCanvas";
8
 import "./style.scss";
8
 import "./style.scss";
9
 
9
 
10
-export default (props) => {
11
-  const {
12
-    show,
13
-    dataSource,
14
-    onClose,
15
-    onSuccess,
16
-  } = props;
10
+export default props => {
11
+  const { show, dataSource, onClose, onSuccess } = props;
17
 
12
 
18
   const [img, setImg] = useState();
13
   const [img, setImg] = useState();
19
   const [processing, setProcessing] = useState(false);
14
   const [processing, setProcessing] = useState(false);
20
 
15
 
21
   const [canvasInited, setCanvasInited] = useState(false);
16
   const [canvasInited, setCanvasInited] = useState(false);
22
 
17
 
23
-  
24
   const posterRender = useRef();
18
   const posterRender = useRef();
25
 
19
 
26
-  useCanvas("canvas-broker-poster", (fn) => {
20
+  useCanvas("canvas-broker-poster", fn => {
27
     posterRender.current = fn;
21
     posterRender.current = fn;
28
     setCanvasInited(true);
22
     setCanvasInited(true);
29
   });
23
   });
30
 
24
 
25
+  const Save = e => {
26
+    e.stopPropagation();
27
+    if (img) {
28
+      save2Album(img).then(() => {
29
+        Taro.showToast({ title: "保存成功", icon: "none" });
30
+      });
31
+
32
+    }
33
+  };
31
 
34
 
32
   useEffect(() => {
35
   useEffect(() => {
33
     if (dataSource && canvasInited) {
36
     if (dataSource && canvasInited) {
34
       const getPoster = posterRender.current;
37
       const getPoster = posterRender.current;
35
       setProcessing(true);
38
       setProcessing(true);
36
       getPoster(dataSource)
39
       getPoster(dataSource)
37
-        .then((image) => {
38
-        
39
-          setImg(image);
40
+        .then(image => {
41
+       
42
+          base64ToFile(image.replace("data:image/jpeg;base64,", "")).then(
43
+            tmpFile => {
44
+              console.log(tmpFile, "tmpFiletmpFile");
45
+              setImg(tmpFile);
46
+            }
47
+          );
40
 
48
 
41
           setProcessing(false);
49
           setProcessing(false);
42
-       
43
         })
50
         })
44
         .catch(() => {
51
         .catch(() => {
45
           setProcessing(false);
52
           setProcessing(false);
59
                     src={img}
66
                     src={img}
60
                     mode="scaleToFill"
67
                     mode="scaleToFill"
61
                     className="centerLabel"
68
                     className="centerLabel"
62
-                    onClick={(e) => e.stopPropagation()}
69
+                    onClick={e => e.stopPropagation()}
63
                   />
70
                   />
64
                 ) : (
71
                 ) : (
65
                   <Spin2
72
                   <Spin2
68
                     size={32}
75
                     size={32}
69
                   />
76
                   />
70
                 )}
77
                 )}
71
-                
72
               </view>
78
               </view>
73
             </view>
79
             </view>
80
+            <view className="saveimg">
81
+              <text onClick={Save}>保存到手机</text>
82
+            </view>
74
           </view>
83
           </view>
75
         </View>
84
         </View>
76
       )}
85
       )}
77
 
86
 
78
-      <View style={{ width: "1px", height: "1px",overflow:'hidden' }}>
79
-        <Canvas type="2d" id="canvas-broker-poster" style={{width: '1px',height:'1px'}}/>
87
+      <View style={{ width: "1px", height: "1px", overflow: "hidden" }}>
88
+        <Canvas
89
+          type="2d"
90
+          id="canvas-broker-poster"
91
+          style={{ width: "1px", height: "1px" }}
92
+        />
80
       </View>
93
       </View>
81
     </>
94
     </>
82
   );
95
   );

+ 30
- 9
src/subpackages/pages/broker/invitation/poster/style.scss View File

5
   left: 0;
5
   left: 0;
6
   bottom: 0;
6
   bottom: 0;
7
   z-index: 1000;
7
   z-index: 1000;
8
-  background: rgba(0, 0, 0, 0.6);
9
-  >view {
8
+  // background: #fff;
9
+  background: rgba(0, 0, 0, 0.8);
10
+  > view {
10
     width: 100%;
11
     width: 100%;
11
-    >view {
12
+    > view {
12
       padding: 0 70px;
13
       padding: 0 70px;
13
       position: relative;
14
       position: relative;
14
       overflow: hidden;
15
       overflow: hidden;
15
       text-align: center;
16
       text-align: center;
16
-      >.Img {
17
+      > .Img {
17
         width: 100%;
18
         width: 100%;
18
         position: relative;
19
         position: relative;
19
         overflow: hidden;
20
         overflow: hidden;
20
         padding-bottom: 150%;
21
         padding-bottom: 150%;
21
         background: #eee;
22
         background: #eee;
22
         border-radius: 24px;
23
         border-radius: 24px;
23
-        >image {
24
+        image {
24
           width: 100%;
25
           width: 100%;
25
           height: 100%;
26
           height: 100%;
26
           // position: absolute;
27
           // position: absolute;
28
           // top: 0;
29
           // top: 0;
29
         }
30
         }
30
       }
31
       }
31
-    
32
+    }
33
+    .saveimg {
34
+      position: relative;
35
+      overflow: hidden;
36
+      margin-top: 60px;
37
+      > text {
38
+        display: block;
39
+        font-size: 32px;
40
+        line-height: 92px;
41
+
42
+        font-weight: bold;
43
+        border-radius: 92px;
44
+        text-align: center;
45
+        // border: 2px solid #193c83;
46
+        background: #fff;
47
+        color: #193c83;
48
+        border-radius: 92px;
49
+        // width: 50%;
50
+        // max-width: 360px;
51
+        // margin: 0 40px;
52
+      }
32
     }
53
     }
33
   }
54
   }
34
 }
55
 }
39
   height: 100%;
60
   height: 100%;
40
   box-sizing: border-box;
61
   box-sizing: border-box;
41
   padding: 200px 75px;
62
   padding: 200px 75px;
42
-z-index: 10;
63
+  z-index: 10;
43
   &-img-box {
64
   &-img-box {
44
     width: 100%;
65
     width: 100%;
45
     position: relative;
66
     position: relative;
46
-    >view {
67
+    > view {
47
       width: 600px;
68
       width: 600px;
48
       position: relative;
69
       position: relative;
49
       margin: 0 auto;
70
       margin: 0 auto;
67
     margin-top: 40rpx;
88
     margin-top: 40rpx;
68
     width: 100%;
89
     width: 100%;
69
     height: 92rpx;
90
     height: 92rpx;
70
-    background: #193C83;
91
+    background: #193c83;
71
     border-radius: 46rpx;
92
     border-radius: 46rpx;
72
     text-align: center;
93
     text-align: center;
73
     color: #fff;
94
     color: #fff;