helpgrouplist

src/components/Poster/index.js

 import Taro, { Component } from '@tarojs/taro';
+import { ScrollView, View } from '@tarojs/components';
 import { TaroCanvasDrawer } from '@components/taro-plugin-canvas';
-import dayjs from 'dayjs'
-import './index.scss'
-import {getCanvasConfig} from './util'
-/**
- * 文档参考
- * http://taro-ext.jd.com/plugin/view/5d23051670a0f46a87c9785b
- */
-export default class Index extends Component {
-  static options = {
-    addGlobalClass: true
-  }
-  static defaultProps = {
-    data: {}
-  }
+import {} from './util';
+import './style.scss';
+
+export default class Poster extends Component {
   state = {
-    // 绘制的图片
-    shareImage: null,
-    canvasStatus: false,
-    config: null,
-    visible: false,
-    basicConfig: {
-      width: 640,
-      height: 1136,
-      backgroundColor: '#ffffff',
-      debug: false
-    }
+    images: [],
+    current: undefined,
   }
-  componentWillMount() {
-    // this.initConfig()
-    getCanvasConfig()
-    Taro.showLoading({
-      title: '生成中...',
-      icon: 'none'
+
+  onScroll = (e) => {
+    console.log('---onScroll-->', e)
+  }
+  
+  onPreview = (e) => {
+    e.stopPropagation()
+    e.preventDefault()
+    Taro.previewImage({
+      current: this.state.current,
+      urls: this.state.images
     })
   }
-  initConfig() {
-    const { data } = this.props
-    const { basicConfig } = this.state
-    const texts = [
-      {
-        x: 30,
-        y: 820,
-        text: data.buildingName,
-        fontSize: 36,
-        color: 'black',
-        baseLine: 'middle',
-        lineNum: 2,
-        lineHeight: 48,
-        // textAlign: 'center',
-        width: 560,
-        zIndex: 999
-      }, {
-        x: 30,
-        y: 890,
-        text: data.price,
-        fontSize: 36,
-        color: 'red',
-        baseLine: 'middle',
-        lineNum: 2,
-        lineHeight: 48,
-        // textAlign: 'center',
-        width: 560,
-        zIndex: 999
-      },
-      {
-        x: 30,
-        y: 1010,
-        text: '长按识别小程序码',
-        fontSize: 26,
-        color: '#999',
-        baseLine: 'middle',
-        lineHeight: 48,
-        width: 200,
-        zIndex: 11
-      },
-      {
-        x: 30,
-        y: 1065,
-        text: '进入',
-        fontSize: 26,
-        color: '#999',
-        baseLine: 'middle',
-        lineHeight: 48,
-        width: 50,
-        zIndex: 11
-      },
-      {
-        x: 100,
-        y: 1065,
-        text: '橙蕉',
-        fontSize: 28,
-        color: 'black',
-        baseLine: 'middle',
-        lineHeight: 48,
-        width: 120,
-        zIndex: 11
-      },
-      {
-        x: 240,
-        y: 1065,
-        text: '报名活动',
-        fontSize: 26,
-        color: '#999',
-        baseLine: 'middle',
-        lineHeight: 48,
-        width: 150,
-        zIndex: 11
-      },
-    ]
-    const images = [
-      {
-        url: data.poster,
-        width: 640,
-        height: 670,
-        y: 0,
-        x: 0
-      },
-      {
-        url: data.qrcode,
-        width: 160,
-        height: 160,
-        y: 950,
-        x: 450,
-        zIndex: 999
-      },
-      {
-        url: data.avatarurl || require('@assets/default-avatar.png'),
-        width: 130,
-        height: 130,
-        y: 630,
-        x: 20,
-        borderRadius: 130,
-        zIndex: 999
-      }
-    ]
 
-    const blocks = [
-      {
-        x: 0,
-        y: 936,
-        width: 640,
-        height: 200,
-        backgroundColor: 'rgba(248,248,248,1)',
-        zIndex: 1
-      }
-    ]
-    const config = Object.assign(basicConfig, { images, blocks, texts })
-    this.setState({
-      config,
-      canvasStatus: true
-    })
+  onCancel = () => {
+    if (typeof this.props.onCancel === 'function') {
+      this.props.onCancel()
+    }
+  }
+
+  saveToAlbum = () => {
+
   }
 
-  onCreateSuccess = (result) => {
+  onCreateSuccess = (inx) => (result) => {
+    if (inx + 1 === this.props.tpls.length) {
+      Taro.hideLoading();
+    }
+
     const { tempFilePath, errMsg } = result;
-    Taro.hideLoading();
     if (errMsg === 'canvasToTempFilePath:ok') {
       this.setState({
         shareImage: tempFilePath,
         visible: true
       });
     } else {
-      this.setState({
-        canvasStatus: false,
-        config: null
-      });
-      Taro.showToast({ icon: 'none', title: errMsg || '出现错误' });
       console.log(errMsg);
-      this.hidePoster()
     }
-  }
-
-  onPreview(e) {
-    e.stopPropagation()
-    e.preventDefault()
-    Taro.previewImage({
-      current: this.state.shareImage,
-      urls: [this.state.shareImage]
-    })
-  }
-
-  onCreateFail = (error) => {
-    console.log(error);
-  }
 
-  hidePoster(e) {
-    Taro.hideLoading();
-    this.props.toggle(false)
   }
 
-  // 保存图片至本地
-  saveToAlbum = (e) => {
-    e.stopPropagation()
-    e.preventDefault()
+  onCreateFail = (inx) => (err) => {
+    if (inx + 1 === this.props.tpls.length) {
+      Taro.hideLoading();
+    }
 
-    Taro.authorize({ scope: "scope.writePhotosAlbum" }).then(res => {
-      console.log('auth:', res)
-      Taro.saveImageToPhotosAlbum({
-        filePath: this.state.shareImage,
-      }).then(res => {
-        Taro.showToast({
-          title: '保存图片成功',
-          icon: 'success',
-          duration: 2000,
-        });
-      })
-    }).catch(err => {
-      console.log('err:', err)
-      Taro.showToast({
-        title: '未开启相册权限',
-        icon: 'none'
-      })
-    })
+    console.err(err);
   }
 
   render() {
+    const {
+      images,
+      configs
+    } = this.state
+
     return (
-      <Block>
-        {
-          this.state.canvasStatus && (
-            <TaroCanvasDrawer
-              config={this.state.config}
-              onCreateSuccess={this.onCreateSuccess}
-              onCreateFail={this.onCreateFail}
-            />
-          )
-        }
+      <View className="poster">
+        <View className="con">
+          <View className="con-head">
+            <Text>保存后分享图片</Text>
+            <Text className="iconfont icon-buoumaotubiao20" onClick={this.onCancel}></Text>
+          </View>
+          <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>
+              })
+            }
+          </View>
+          <Button className="save-btn" onClick={this.saveToAlbum}>保存海报</Button>
+        </View>
         {
-          this.state.visible && (
-            <View className="poster">
-              <View className="con">
-                <View className="con-head">
-                  <Text>保存后分享图片</Text>
-                  <Text className="iconfont icon-buoumaotubiao20" onClick={this.hidePoster}></Text>
-                </View>
-                <View className="con-body">
-                  <Image className="result-img" mode="aspectFit" lazy-load src={this.state.shareImage} onClick={this.onPreview}></Image>
-                </View>
-                <Button className="save-btn" onClick={this.saveToAlbum}>保存海报</Button>
-              </View>
-            </View>
+          configs && configs.length &&
+          (
+            configs.map((conf, inx) => {
+              <TaroCanvasDrawer
+                config={conf}
+                onCreateSuccess={this.onCreateSuccess(inx)}
+                onCreateFail={this.onCreateFail(inx)}
+              />
+            })
           )
         }
-      </Block>
-    )
+      </View>
+    );
   }
-}
+}

src/components/Poster/style.scss

+.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;
+  animation: fadeBottomIn 1s ease both;
+
+  .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/components/achievePhone/index.js

 import getUserPhone from '@utils/getUserPhone'
 import './index.scss'
 
+const grantIcon = require('@assets/helpgroup/shouquan.png')
+const logoImg = require('@assets/index/logo.png')
+const bgImg = require('@assets/helpgroup/bg.png')
+
 export default class Index extends Component {
 
-  state = {
-    // maskVisible: false,
-  }
+  state = {}
 
   componentDidMount() {
-    // this.setState({
-    //   maskVisible: true
-    // })
-    if (this.props.user.phone) {
+    const { user = {}} = this.props
+    if (user.phone && typeof this.props.onSuccess === 'function') {
       this.props.onSuccess();
     }
 
   }
   getPhoneNumber(e) {
-    console.log(e, "eeeeeeeeeeeee")
     getUserPhone(e, (phoneNumber) => {
       if (!phoneNumber) {
         Taro.showToast({
           icon: 'none'
         })
         return
-      } else {
-        this.props.onSuccess();
-
+      } else {        
+        if (typeof this.props.onSuccess === 'function') {
+          this.props.onSuccess();
+        }
       }
     })
   }
+
   renderMaskBanner() {
-    const { maskBanner } = this.state
     return (
       <View>
-        <Image src={require('@assets/helpgroup/bg.png')} className='bg_img'></Image>
+        <Image src={bgImg} className='bg_img'></Image>
         <View className="phone-page">
-
           <View className="content">
-            <Image src={require('@assets/index/logo.png')} className='logo_img'></Image>
+            <Image src={logoImg} className='logo_img'></Image>
             <View className="text">
               授权手机后,可享受以下功能
           </View>
             <View className="flex">
               <View className="item">
-                <Image className="shouquan" src={require('@assets/helpgroup/shouquan.png')} ></Image>在线咨询
+                <Image className="shouquan" src={grantIcon} ></Image>在线咨询
             </View>
               <View className="item">
-                <Image className="shouquan" src={require('@assets/helpgroup/shouquan.png')} ></Image>收藏分享楼盘
+                <Image className="shouquan" src={grantIcon} ></Image>收藏分享楼盘
             </View>
             </View>
             <View className="flex">
               <View className="item">
-                <Image className="shouquan" src={require('@assets/helpgroup/shouquan.png')} ></Image>专属顾问
+                <Image className="shouquan" src={grantIcon} ></Image>专属顾问
             </View>
               <View className="item">
-                <Image className="shouquan" src={require('@assets/helpgroup/shouquan.png')} ></Image>参与助力活动            </View>
+                <Image className="shouquan" src={grantIcon} ></Image>参与助力活动            </View>
             </View>
             <View className="flex">
               <View className="item">
-                <Image className="shouquan" src={require('@assets/helpgroup/shouquan.png')} ></Image>推荐客户
+                <Image className="shouquan" src={grantIcon} ></Image>推荐客户
             </View>
               <View className="item">
-                <Image className="shouquan" src={require('@assets/helpgroup/shouquan.png')} ></Image>参与拼团活动
+                <Image className="shouquan" src={grantIcon} ></Image>参与拼团活动
             </View>
             </View>
             <View className="flex">
               <View className="item">
-                <Image className="shouquan" src={require('@assets/helpgroup/shouquan.png')} ></Image>获取积分好礼
+                <Image className="shouquan" src={grantIcon} ></Image>获取积分好礼
             </View>
               <View className="item">
-                <Image className="shouquan" src={require('@assets/helpgroup/shouquan.png')} ></Image>更多精彩权益
+                <Image className="shouquan" src={grantIcon} ></Image>更多精彩权益
             </View>
             </View>
             <Button className="btn" open-type="getPhoneNumber" lang="zh_CN" onGetphonenumber={this.getPhoneNumber}>授权手机</Button>
     )
   }
   render() {
+    const { user = {}} = this.props
 
     return (
       <Block>
-        {!this.props.user.phone && this.renderMaskBanner()}
+        {!user.phone && this.renderMaskBanner()}
       </Block>
     )
   }

src/pages/activity/detail/assistance.js

 import './index.scss'
 import Notice from '@components/Notice'
 import BackHomeBtn from '@components/BackHomeBtn'
+import AchievePhone from '@components/achievePhone'
 import Poster from './poster'
 import dayjs from 'dayjs'
 // import WxParse from '@components/wxParse/wxParse'
   }
 
   componentWillUnmount() {
-    // const { recordId } = this.state
-    // recordId && updatePoint(recordId)
-
     this.clearTicker()
   }
 
-  initPageData() {
+  initPageData = () => {
     if (!this.state.detail.helpActivityId) {
       const router = Taro.getStorageSync('router')
       const id = this.$router.params.id || router.query.id
   }
 
   // 调起授权电话
-  toggleGrantPhone() {
+  toggleGrantPhone = () => {
     const { userInfo: { person: { phone } } } = this.props
     if (!phone) {
       this.setState({ grantPhoneVisible: true })
   }
 
   // 调起授权头像
-  toggleGrantAvatar() {
+  toggleGrantAvatar = () => {
     const { userInfo: { person: { avatarurl } } } = this.props
     if (!avatarurl) {
       this.setState({ grantAvatarVisible: true })
     return true
   }
 
-  toggleActionVisible() {
+  toggleActionVisible = () => {
     this.setState({
       actionSheetVisible: !this.state.actionSheetVisible
     })
   }
 
-  togglePosterVisible() {
+  togglePosterVisible = () => {
     this.setState({
-      posterVisible: !this.state.posterVisible
+      posterVisible: !this.state.posterVisible,
+      actionSheetVisible: false
     })
   }
 
     })
   }
 
-  formateLeftTime() {
+  formateLeftTime = () => {
     const nd = 1000 * 24 * 60 * 60;
     const nh = 1000 * 60 * 60;
     const nm = 1000 * 60;
   }
 
   loadDetail() {
-    const { id } = this.state
+    const { id, initiateId } = this.state
     const { userInfo } = this.props
 
     Taro.showLoading()
-    getHelpDetail(id).then(res => {
+    getHelpDetail(id, initiateId).then(res => {
       this.clearTicker()
 
       const initiateDetail = res.helpInitiateRecord || {}
         posters: res.postList || [],
         helpList: res.helpRecordList || [],
         loaded: true,
-        isStarter: !initiateDetail.person_id || userInfo.person.personId === initiateDetail.personId,
+        isStarter: !initiateDetail.personId || userInfo.person.personId === initiateDetail.personId,
       })
       
       this.updateLeftTime(res.helpActivity.startDate, res.helpActivity.endDate)
       `recommender=${personId}`
     ]
     if (initiateDetail.helpRecordInitiateId) {
-      queryParams.push(`initiateId=${helpRecordInitiateId}`)
+      queryParams.push(`initiateId=${initiateDetail.helpRecordInitiateId}`)
     }
 
-    return [
+    const res = [
       'pages/activity/detail/assistance',
       queryParams.join('&'),
     ]
+
+    console.log('--page-params->', res)
+
+    return res
   }
 
   onShareAppMessage = () => {
   }
 
   // 助力好友
-  handleHelp() {
+  handleHelp = () => {
     if (this.state.submitting) return
 
     Taro.showLoading()
         phone: person.tel || person.phone,
         avatarurl: person.avatarurl,
         helpRecordInitiateId: initiateDetail.helpRecordInitiateId,
-      }).then(() => {
+      }).then((res) => {
         Taro.hideLoading()
-        this.setState({ submitting: false })
+        const helpList = this.state.helpList || []
+        helpList.push(res.helpRecord)
+
+        this.setState({
+          submitting: false,
+          helpList,
+          initiateDetail: res.helpInitiateRecord,
+          helpState: res.helpInitiateRecord.status === undefined ? HelpInProcess : res.helpInitiateRecord.status,
+        })
+
+        Taro.showToast({
+          title: '助力成功',
+          icon: 'success'
+        })
       }).catch(err => {
         console.log('err:', err)
         Taro.hideLoading()
         this.setState({ submitting: false })
-        Taro.showToast({
-          title: '助力失败',
-          icon: 'none'
-        })
       })
     })
   }
 
   // 发起我的助力
-  startMine() {
+  startMine = () => {
     // 必须授权头像
     if (this.toggleGrantAvatar()) {
       const detail = this.state.detail
           phone: person.tel || person.phone,
           avatarurl: person.avatarurl,
         }).then(res => {
-          this.setState({ initiateDetail: res }, resolve)
+          this.setState({
+            initiateDetail: res,
+            helpList: [],
+            isStarter: true,
+            helpState: HelpInProcess,
+          }, resolve)
         }).catch(err => {
           console.log('err:', err)
           Taro.showToast({
   }
 
   // 请求好友助力
-  askForHelp() {
+  askForHelp = () => {
     // 必须授权头像
     if (this.toggleGrantAvatar()) {
       const initiateDetail = this.state.initiateDetail
 
   render() {
     const {
+      initiateId,
+      initiateDetail,
       detail,
       loaded,
       actState,
       helpList,
       helpState,
       actionSheetVisible,
-      grantAvatarVisible,
       grantPhoneVisible,
     } = this.state
 
     const { userInfo } = this.props
-    const avatar = this.state.initiateId ? this.state.initiateDetail.avatarurl : userInfo.person.avatarurl
+    const avatar = initiateId ? initiateDetail.avatarurl : userInfo.person.avatarurl
 
     return (
       <Block>
         {/* 生成海报 */}
         {posterVisible && (<Poster data={posterData} toggle={this.togglePosterStatus}></Poster>)}
+        
+        {
+          grantPhoneVisible &&
+          <AchievePhone user={this.props.userInfo.person} onSuccess={this.initPageData}></AchievePhone>
+        }
 
         {
           loaded && (
                   {
                     helpState === HelpSuccess &&
                     (
-                      <Text>TODO: 助力成功</Text>
+                      <Block>
+                        <Text>TODO: 助力成功</Text>
+                        {
+                          isStarter && (<Text>核销码 {initiateDetail.verification}</Text>)
+                        }                        
+                      </Block>
                     )
                   }
                   {
                   <View className="assistance-text">{`${detail.enlistNum || 0}/${detail.personNum}`}</View>
                   <View className='tools-main'>
                     {
-                      times(helpList.length).map((it, inx) => {
+                      helpList.map((it, inx) => {
                         return (
                           <View className='tools-item' key={`help-${inx}`}>
                             <Image src={it.avatarurl} className='tools-item-img'></Image>
                 <Image src={detail.activityInstructions}style="width:100%"></Image>
               </ScrollView>
 
-              {
-                grantPhoneVisible &&
-                <View onSuccess={this.initPageData}>TODO: 授权电话</View>
-              }
-
-              {
-                grantAvatarVisible &&
-                <View onSuccess={() => {}}>TODO: 授权头像</View>
-              }
-
               <action-sheet hidden={!actionSheetVisible} bindchange={this.toggleActionVisible}>
                 <action-sheet-item open-type="share">
-                  <Button open-type="share" className='share__friend'>分享给好友</Button>
+                  <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>
                 </action-sheet-item>
-                <action-sheet-cancel>取消</action-sheet-cancel>
+                <action-sheet-cancel onClick={this.toggleActionVisible}>取消</action-sheet-cancel>
               </action-sheet>
             
               <BackHomeBtn></BackHomeBtn>              

src/pages/activity/item/index.js

 
           <View className="left">
             <View className="time">参与截止时间：{`${dayjs(data.endDate).format('YYYY年MM月DD日 hh:mm:ss')}`}</View>
-            <View className={data.activityStatus == 0 ? "btn jionin " : data.activityStatus == 1 ? "btn nostart" : data.activityStatus == 2 ? "btn jioned" : "btn"}>{data.activityStatus == 0 ? "立即参与" : data.activityStatus == 1 ? "未开始" : data.activityStatus == 2 ? "已参与" : "已结束"}</View>
+            <View className={data.activityStatus == 0 ? "btn jionin " : data.activityStatus == 1 ? "btn nostart" : data.activityStatus == 2 ? "btn jioned" : "btn"}>{data.activityStatus == 0 ? "立即参与" : data.activityStatus == 1 ? "未开始" : data.activityStatus == 2 ? "已结束" : "已参与"}</View>
           </View>
         </View>
       </View >

src/services/activity.js

  */
 export const getActNewList = payload => fetch({ url: API_ACTNEW_LIST, payload })
 
-export const getHelpDetail = id => fetch({ url: `${API_HELP_DETAIL}/${id}`, method:'GET' })
+export const getHelpDetail = (id, initiateId) => fetch({ url: `${API_HELP_DETAIL}/${id}${ initiateId ? '?initiateId=' + initiateId : ''}`, method:'GET' })
 export const createHelpActivity = payload => fetch({ url: API_HELP_CREATE, method:'POST', payload })
 export const giveFriendHelp = payload => fetch({ url: API_HELP_FRIEND, method:'POST', payload })