Merge branch 'v4' of http://git.ycjcjy.com/zhiyuxing/miniapp-v3 into v4

src/components/Poster/index.js

@@ -1,19 +1,36 @@
 import Taro, { Component } from '@tarojs/taro';
-import { ScrollView, View } from '@tarojs/components';
+import { ScrollView, View, Block } from '@tarojs/components';
 import { TaroCanvasDrawer } from '@components/taro-plugin-canvas';
-import {} from './util';
+import { getCanvasConfig } from './util';
 import './style.scss';
 
 export default class Poster extends Component {
   state = {
     images: [],
     current: undefined,
+    configs: undefined,
   }
 
-  onScroll = (e) => {
-    console.log('---onScroll-->', e)
+  componentWillMount() {
+    if (!Array.isArray(this.props.tpls)) {
+      throw new Error('当前内容未维护海报信息')
+    }
+
+    let configs = this.state.configs || []
+    this.props.tpls.forEach((tpl, inx) => {
+      const conf = getCanvasConfig(tpl.configs, this.props.params)
+      configs.push(conf)
+
+      if (inx === this.props.tpls.length - 1) {
+        this.setState({ configs })
+      }
+    })
   }
-  
+
+  onScroll = inx => (e) => {
+    this.setState({ current: this.state.images[inx] })
+  }
+
   onPreview = (e) => {
     e.stopPropagation()
     e.preventDefault()
@@ -29,8 +46,35 @@ export default class Poster extends Component {
     }
   }
 
-  saveToAlbum = () => {
+  saveToAlbum = (e) => {
+    e.stopPropagation()
+    e.preventDefault()
+
+    if (!this.state.current) {
+      return
+    }
 
+    Taro.authorize({ scope: "scope.writePhotosAlbum" }).then(res => {
+      Taro.saveImageToPhotosAlbum({
+        filePath: this.state.current,
+      }).then(res => {
+        if (typeof this.props.onFinish === 'function') {
+          this.props.onFinish()
+        }
+
+        Taro.showToast({
+          title: '保存图片成功',
+          icon: 'success',
+          duration: 2000,
+        });
+      })
+    }).catch(err => {
+      console.log('err:', err)
+      Taro.showToast({
+        title: '未开启相册权限',
+        icon: 'none'
+      })
+    })
   }
 
   onCreateSuccess = (inx) => (result) => {
@@ -38,18 +82,15 @@ export default class Poster extends Component {
       Taro.hideLoading();
     }
 
+    let images = this.state.images || []
     const { tempFilePath, errMsg } = result;
     if (errMsg === 'canvasToTempFilePath:ok') {
-      this.setState({
-        shareImage: tempFilePath,
-        canvasStatus: false,
-        config: null,
-        visible: true
-      });
+      images[inx] = tempFilePath
     } else {
+      images[inx] = undefined
       console.log(errMsg);
     }
-
+    this.setState({ images });
   }
 
   onCreateFail = (inx) => (err) => {
@@ -57,6 +98,9 @@ export default class Poster extends Component {
       Taro.hideLoading();
     }
 
+    let images = this.state.images || []
+    images[inx] = undefined
+    this.setState({ images });
     console.err(err);
   }
 
@@ -76,23 +120,33 @@ export default class Poster extends Component {
           <View className="con-body">
             {
               images.map((img, inx) => {
-                <ScrollView scrollX scrollWithAnimation onScroll={this.onScroll} style="width: 100%" key={`img-${inx}`}>
-                  <Image className="result-img" mode="aspectFit" lazy-load src={img} onClick={this.onPreview}></Image>
-                </ScrollView>
+                return (
+                  <ScrollView scrollX scrollWithAnimation onScroll={this.onScroll(inx)} style="width: 100%" key={`img-${inx}`}>
+                    <Image className="result-img" mode="aspectFit" lazy-load src={img} onClick={this.onPreview}></Image>
+                  </ScrollView>
+                )
               })
             }
           </View>
           <Button className="save-btn" onClick={this.saveToAlbum}>保存海报</Button>
         </View>
         {
-          configs && configs.length &&
+          configs &&
           (
             configs.map((conf, inx) => {
-              <TaroCanvasDrawer
-                config={conf}
-                onCreateSuccess={this.onCreateSuccess(inx)}
-                onCreateFail={this.onCreateFail(inx)}
-              />
+              return (
+                <Block key={`cvs-${inx}`}>
+                  {
+                    !images[inx] && (
+                      <TaroCanvasDrawer
+                        config={conf}
+                        onCreateSuccess={this.onCreateSuccess(inx)}
+                        onCreateFail={this.onCreateFail(inx)}
+                      />
+                    )
+                  }
+                </Block>
+              )
             })
           )
         }

src/components/Poster/index.scss

@@ -1,62 +0,0 @@
-.poster {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: 999;
-  justify-content: space-around;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  top: 0;
-
-  .con {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    padding: 0 60px;
-    background: white;
-    margin: 0 auto;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
-
-    &-head {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 20px 0;
-      font-size: 32px;
-      font-weight: bold;
-
-      .iconfont {
-        font-size: 40px;
-        color: #545454;
-        font-weight: normal;
-      }
-    }
-
-    &-body {
-      width: 100%;
-      // background: #EAEAEA;
-      border-radius: 10px;
-      padding: 40px 0;
-
-      .result-img {
-        height: 60vh;
-        display: block;
-        margin: 0 auto;
-      }
-    }
-  }
-
-  .save-btn {
-    margin: 0 auto;
-    color: white;
-    border: none;
-    font-size: 36px;
-    background: linear-gradient(90deg, rgba(255, 199, 12, 1) 0%, rgba(255, 65, 65, 1) 100%);
-    border-radius: 12px;
-    margin: 20px 0;
-  }
-}

src/pages/activity/detail/assistance.js

@@ -3,7 +3,7 @@ import './index.scss'
 import Notice from '@components/Notice'
 import BackHomeBtn from '@components/BackHomeBtn'
 import AchievePhone from '@components/achievePhone'
-import Poster from './poster'
+import Poster from '@components/Poster'
 import dayjs from 'dayjs'
 // import WxParse from '@components/wxParse/wxParse'
 import getUserPhone from '@utils/getUserPhone'
@@ -51,6 +51,7 @@ export default class Detail extends Component {
     helpList: [], // 助力人员列表
     shares: [], // 分享设置
     posters: [],  // 海报设置
+    posterTpls: [], // 海报模板
     leftTime: 0,  // 剩余时间
     ltTicker: undefined,  // 剩余时间计时器
     actState: ActBeforeStart,  // 活动本身状态
@@ -76,6 +77,7 @@ export default class Detail extends Component {
     this.clearTicker()
   }
 
+  // 初始化页面数据
   initPageData = () => {
     if (!this.state.detail.helpActivityId) {
       const router = Taro.getStorageSync('router')
@@ -88,6 +90,7 @@ export default class Detail extends Component {
     }
   }
 
+  // 清除 ticker
   clearTicker() {
     if (this.state.ltTicker) {
       clearInterval(this.state.ltTicker)
@@ -117,12 +120,14 @@ export default class Detail extends Component {
     return true
   }
 
+  // 打开关闭 ActionSheet 面板
   toggleActionVisible = () => {
     this.setState({
       actionSheetVisible: !this.state.actionSheetVisible
     })
   }
 
+  // 打开关闭海报面板
   togglePosterVisible = () => {
     this.setState({
       posterVisible: !this.state.posterVisible,
@@ -130,6 +135,7 @@ export default class Detail extends Component {
     })
   }
 
+  // 计时器更新剩余时间
   updateLeftTime(startDate, endDate) {
     const st = dayjs(startDate).valueOf()
     const ed = dayjs(endDate).valueOf()
@@ -162,6 +168,7 @@ export default class Detail extends Component {
     })
   }
 
+  // 格式化剩余时间
   formateLeftTime = () => {
     const nd = 1000 * 24 * 60 * 60;
     const nh = 1000 * 60 * 60;
@@ -176,6 +183,7 @@ export default class Detail extends Component {
     return `${day}天${hour}小时${min}分${sec}秒`
   }
 
+  // 请求详情
   loadDetail() {
     const { id, initiateId } = this.state
     const { userInfo } = this.props
@@ -193,6 +201,7 @@ export default class Detail extends Component {
         helpState: initiateDetail.status === undefined ? HelpInProcess : initiateDetail.status,
         shares: res.shareContentList || [],
         posters: res.postList || [],
+        posterTpls: res.posterTemplateList || [],
         helpList: res.helpRecordList || [],
         loaded: true,
         isStarter: !initiateDetail.personId || userInfo.person.personId === initiateDetail.personId,
@@ -217,16 +226,16 @@ export default class Detail extends Component {
   }
 
   currentPageAndParams() {
-    const { detail, initiateDetail } = this.state
+    const { id, initiateId } = this.state
     const { userInfo: { person: { personId } } } = this.props
 
     let queryParams = [
-      `id=${detail.helpActivityId}`,
+      `id=${id}`,
       `from=help_share`,
       `recommender=${personId}`
     ]
-    if (initiateDetail.helpRecordInitiateId) {
-      queryParams.push(`initiateId=${initiateDetail.helpRecordInitiateId}`)
+    if (initiateId) {
+      queryParams.push(`initiateId=${initiateId}`)
     }
 
     const res = [
@@ -235,7 +244,6 @@ export default class Detail extends Component {
     ]
 
     console.log('--page-params->', res)
-
     return res
   }
 
@@ -355,68 +363,47 @@ export default class Detail extends Component {
     }
   }
 
-  handleFavor() {
-  }
-
-  getPosterData = () => {
-    return new Promise(resolve => {
-      const { posterData } = this.state
-      if (posterData.qrcode) {
-        resolve(posterData)
-        return
-      }
-
-      const { userInfo: { person } } = this.props
-      const { avatarurl, nickname } = person
-      const { detail: { posters, createDate } } = this.state
-      const [page, scene] = this.currentPageAndParams()
-      const payload = { page, scene }
-
-      const _avatarurl = getDownloadURL(avatarurl, 'avatar');
-      getMiniQrcode(payload).then(qrcode => {
-        let data = {
-          qrcode,//小程序二维码
-          nickname,//访问者名字
-          avatarurl: _avatarurl,//访问者头像
-          poster: posters[0].posterImg,
-          title: posters[0].posterTitle,//海报标题
-          createDate: createDate,//时间
-        }
-        resolve(data)
-      })
+  getQRCode() {
+    const [page, scene] = this.currentPageAndParams()
+    const payload = { page, scene }
+  
+    getMiniQrcode(payload).then(qrCode => {
+      this.setState({ qrCode, posterVisible: true })
     })
   }
 
-  // 开始生成海报
-  togglePosterStatus = (flag) => {
-    if (flag) {
-      this.getPosterData().then(posterData => {
-        this.setState({
-          posterVisible: !!flag,
-          posterData
-        })
-      })
-      // App.zhuge.track('生成助力详情海报')
-    } else {
-      this.setState({
-        posterVisible: !!flag
-      })
-    }
-    savePoint({
-      event: 'poster',
-      eventType: 'help',
-      propertyName: '生成助力详情海报',
-      data: '{}'
-    }).then(res => {
-      console.log('生成助力详情海报')
-    })
+  // 发送朋友圈
+  shareMoments = () => {
+    this.getQRCode().then(() => {
+      this.togglePosterVisible()
+    })    
   }
 
-  hideModal() {
-    this.setState({
-      canChoose: 'none'
-    })
-  }
+  // // 开始生成海报
+  // togglePosterStatus = (flag) => {
+  //   if (flag) {
+  //     this.getPosterData().then(posterData => {
+  //       this.setState({
+  //         posterVisible: !!flag,
+  //         posterData
+  //       })
+  //     })
+  //     // App.zhuge.track('生成助力详情海报')
+  //   } else {
+  //     this.setState({
+  //       posterVisible: !!flag
+  //     })
+  //   }
+
+  //   savePoint({
+  //     event: 'poster',
+  //     eventType: 'help',
+  //     propertyName: '生成助力详情海报',
+  //     data: '{}',
+  //   }).then(res => {
+  //     console.log('生成助力详情海报')
+  //   })
+  // }
 
   render() {
     const {
@@ -426,25 +413,35 @@ export default class Detail extends Component {
       loaded,
       actState,
       posterVisible,
-      posterData,
       isStarter,
       helpList,
       helpState,
       actionSheetVisible,
       grantPhoneVisible,
+      posterTpls,
+      posters,
+      qrCode,
     } = this.state
 
     const { userInfo } = this.props
     const avatar = initiateId ? initiateDetail.avatarurl : userInfo.person.avatarurl
+    const posterData = {
+      title: posters[0] ? posters[0].posterTitle : '',
+      desc: posters[0] ? posters[0].posterDescription : '',
+      poster: posters[0] ? posters[0].posterImg : '',
+      name: userInfo.person.name || userInfo.person.nickname,
+      qrcode: qrCode,
+      avatarurl: getDownloadURL(userInfo.person.avatarurl, 'avatar') || '',
+    }
 
     return (
       <Block>
         {/* 生成海报 */}
-        {posterVisible && (<Poster data={posterData} toggle={this.togglePosterStatus}></Poster>)}
-
+        {posterVisible && (<Poster tpls={posterTpls} params={posterData} onCancel={this.togglePosterVisible} onFinish={this.togglePosterVisible}></Poster>)}
+        
         {
           grantPhoneVisible &&
-          <AchievePhone user={this.props.userInfo.person} onSuccess={this.initPageData}></AchievePhone>
+          <AchievePhone user={userInfo.person} onSuccess={this.initPageData}></AchievePhone>
         }
 
         {
@@ -549,7 +546,7 @@ export default class Detail extends Component {
                   <Button open-type="share" className='share__friend' onClick={this.toggleActionVisible}>分享给好友</Button>
                 </action-sheet-item>
                 <action-sheet-item>
-                  <Button className='creat__img' onClick={this.togglePosterVisible}>发送朋友圈</Button>
+                  <Button className='creat__img' onClick={this.shareMoments}>发送朋友圈</Button>
                 </action-sheet-item>
                 <action-sheet-cancel onClick={this.toggleActionVisible}>取消</action-sheet-cancel>
               </action-sheet>