fix #5325

config/dev.js

@@ -5,12 +5,12 @@ module.exports = {
   defineConstants: {
 		// HOST: '"http://47.101.36.130:8085"',//测试
     // WSS_HOST: '"wss://47.101.36.130:8085"',
-    // HOST: '"https://dev.jinchengjiaye.com"',//测试
-    // WSS_HOST: '"wss://dev.jinchengjiaye.com"',
+    HOST: '"https://dev.jinchengjiaye.com"',//测试
+    WSS_HOST: '"wss://dev.jinchengjiaye.com"',
     // HOST: '"https://lt.pawoma.cn"',
     // WSS_HOST: '"wss://lt.pawoma.cn"',
-    HOST: '"http://127.0.0.1:8080"',
-    WSS_HOST: '"ws://127.0.0.1:8080"',
+    // HOST: '"http://127.0.0.1:8080"',
+    // WSS_HOST: '"ws://127.0.0.1:8080"',
   },
   weapp: {},
   h5: {}

project.config.json

@@ -23,5 +23,44 @@
 	"compileType": "miniprogram",
 	"simulatorType": "wechat",
 	"simulatorPluginLibVersion": {},
-	"condition": {}
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"plugin": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"list": []
+		},
+		"gamePlugin": {
+			"current": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": [
+				{
+					"id": -1,
+					"name": "pages/im/list/index",
+					"pathName": "pages/im/list/index",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "pages/activity/detail/assistance",
+					"pathName": "pages/activity/detail/assistance",
+					"query": "id=85",
+					"scene": null
+				}
+			]
+		}
+	}
 }

src/components/Poster/index.js

@@ -5,29 +5,34 @@ import { getCanvasConfig } from './util';
 import './style.scss';
 
 export default class Poster extends Component {
+  static options = {
+    addGlobalClass: true,
+  }
+  static defaultProps = {
+    configs: {}
+  }
+
   state = {
     images: [],
+    done: false,
     current: undefined,
-    configs: undefined,
+  }
+
+  static transTPLs2Configs(tpls, params) {
+    return tpls.map((tpl) => {
+      const conf = getCanvasConfig(tpl.configs, params)
+      return { ...conf }
+    })
   }
 
   componentWillMount() {
-    if (!Array.isArray(this.props.tpls)) {
-      throw new Error('当前内容未维护海报信息')
+    if (!Array.isArray(this.props.configs)) {
+      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) => {
+  onScroll = (e) => {
+    const inx = e.detail.current
     this.setState({ current: this.state.images[inx] })
   }
 
@@ -77,38 +82,39 @@ export default class Poster extends Component {
     })
   }
 
-  onCreateSuccess = (inx) => (result) => {
-    if (inx + 1 === this.props.tpls.length) {
-      Taro.hideLoading();
-    }
+  tmpImgs = []
 
-    let images = this.state.images || []
-    const { tempFilePath, errMsg } = result;
-    if (errMsg === 'canvasToTempFilePath:ok') {
-      images[inx] = tempFilePath
-    } else {
-      images[inx] = undefined
-      console.log(errMsg);
+  onCreateSuccess = (inx) => {
+    return (result) => {
+      const { tempFilePath, errMsg } = result;
+      if (errMsg === 'canvasToTempFilePath:ok') {
+        this.tmpImgs[inx] = tempFilePath
+      } else {
+        this.tmpImgs[inx] = undefined
+        console.log(errMsg);
+      }
+
+      if (inx + 1 === this.props.configs.length) {
+        this.setState({ done: true, images: [...this.tmpImgs] });
+        this.tmpImgs = [];
+        Taro.hideLoading();
+      }
     }
-    this.setState({ images });
   }
 
   onCreateFail = (inx) => (err) => {
-    if (inx + 1 === this.props.tpls.length) {
+    this.tmpImgs[inx] = undefined
+    if (inx + 1 === this.props.configs.length) {
+      this.setState({ done: true, images: [...this.tmpImgs] });
+      this.tmpImgs = [];
       Taro.hideLoading();
     }
-
-    let images = this.state.images || []
-    images[inx] = undefined
-    this.setState({ images });
     console.err(err);
   }
 
   render() {
-    const {
-      images,
-      configs
-    } = this.state
+    const { images, done } = this.state
+    const { configs } = this.props
 
     return (
       <View className="poster">
@@ -118,20 +124,22 @@ export default class Poster extends Component {
             <Text className="iconfont icon-buoumaotubiao20" onClick={this.onCancel}></Text>
           </View>
           <View className="con-body">
+            <Swiper className="preview-box" onChange={this.onScroll} >
             {
-              images.map((img, inx) => {
+              done && images.map((img, inx) => {
                 return (
-                  <ScrollView scrollX scrollWithAnimation onScroll={this.onScroll(inx)} style="width: 100%" key={`img-${inx}`}>
+                  <SwiperItem key={`img-${inx}`}>
                     <Image className="result-img" mode="aspectFit" lazy-load src={img} onClick={this.onPreview}></Image>
-                  </ScrollView>
+                  </SwiperItem>
                 )
               })
             }
+            </Swiper>
           </View>
           <Button className="save-btn" onClick={this.saveToAlbum}>保存海报</Button>
         </View>
         {
-          configs &&
+          !done && configs && configs.length &&
           (
             configs.map((conf, inx) => {
               return (

src/components/Poster/style.scss

@@ -43,10 +43,15 @@
       border-radius: 10px;
       padding: 40px 0;
 
-      .result-img {
+      .preview-box {
+        width: 100%;
         height: 60vh;
-        display: block;
+      }
+
+      .result-img {
+        height: 100%;
         margin: 0 auto;
+        display: inline-block;
       }
     }
   }

src/components/Poster/util.js

@@ -9,23 +9,30 @@ export function getCanvasConfig(config, params) {
   const itemConf = items.reduce((conf, item) => {
     const { type, remark, value, variable, ...others } = item
     const settingOfType = conf[type] || []
-    
+    let val = variable ? params[variable] : value
+
     let mainVal = {}
     switch (type) {
-      case 'text':
-        mainVal = { text: variable ? params[variable] : value }
+      case 'texts':
+        mainVal = { text: val }
         break;
-      case 'image':
-        mainVal = { url: variable ? params[variable] : value }
+      case 'images':
+        mainVal = { url: val }
         break;
       default:
+        val = true
         break;
     }
 
-    settingOfType.push({
-      ...mainVal,
-      ...others,
-    })
+    if (val) {
+      settingOfType.push({
+        ...mainVal,
+        ...others,
+      })
+      conf[type] = settingOfType
+    }
+    
+    return conf
   }, {})
 
   return {

src/components/taro-plugin-canvas/index.js

@@ -40,12 +40,14 @@ export default class CanvasDrawer extends Component {
   }
 
   componentDidMount() {
-    const sysInfo = Taro.getSystemInfoSync();
-    const screenWidth = sysInfo.screenWidth;
-    this.setState({
-      factor: screenWidth / 750
-    })
-    this.onCreate();
+    setTimeout(() => {
+      const sysInfo = Taro.getSystemInfoSync();
+      const screenWidth = sysInfo.screenWidth;
+      this.setState({
+        factor: screenWidth / 750
+      })
+      this.onCreate();
+    }, 0)
   }
 
   componentWillUnmount() { }
@@ -139,11 +141,15 @@ export default class CanvasDrawer extends Component {
    */
   initCanvas = (w, h, debug) => {
     return new Promise((resolve) => {
+      console.debug('-----------start to init canvas state------------')
       this.setState({
         pxWidth: this.toPx(w),
         pxHeight: this.toPx(h),
         debug,
-      }, resolve);
+      }, () => {
+        console.debug('-----------finish init canvas state------------')
+        resolve()
+      });
     });
   }
   /**
@@ -152,8 +158,10 @@ export default class CanvasDrawer extends Component {
   onCreate = () => {
     const { onCreateFail, config } = this.props;
     Taro.showLoading({ mask: true, title: '生成中...' });
+    console.debug('-----start to download images---')
       return this.downloadResourceTransit()
       .then(() => {
+        console.debug('-----finish download images---')
         this.create(config);
       })
       .catch((err) => {
@@ -171,10 +179,14 @@ export default class CanvasDrawer extends Component {
    * @param  { object } config
    */
   create = (config) => {
+    console.debug('-----create canvas---', this.canvasId, this.$scope)
     this.ctx = Taro.createCanvasContext(this.canvasId, this.$scope);
+    console.debug('-----finish create canvas---')
     const height = getHeight(config);
+    console.debug('-----ready to init canvas---')
     this.initCanvas(config.width, height, config.debug)
       .then(() => {
+        console.debug('-----finish init canvas---')
         // 设置画布底色
         if (config.backgroundColor) {
           this.ctx.save();
@@ -231,8 +243,11 @@ export default class CanvasDrawer extends Component {
           // 在安卓平台，经测试发现如果海报过于复杂在转换时需要做延时，要不然样式会错乱
           time = 300;
         }
+        console.debug('-----start to draw---')
         this.ctx.draw(false, () => {
+          console.debug('-----finish draw---')
           setTimeout(() => {
+            console.debug('-----ready to read file---')
             this.getTempFile();
           }, time);
         });
@@ -248,6 +263,7 @@ export default class CanvasDrawer extends Component {
     Taro.canvasToTempFilePath({
       canvasId: this.canvasId,
       success: (result) => {
+        console.debug('-----read file success---')
         if (!onCreateSuccess) {
           console.warn('您必须实现 taro-plugin-canvas 组件的 onCreateSuccess 方法，详见文档 https://github.com/chuyun/taro-plugin-canvas#success');
         }
@@ -272,6 +288,8 @@ export default class CanvasDrawer extends Component {
   }
 
   render() {
+    console.log('------render canvas----')
+
     const { pxWidth, pxHeight, debug } = this.state;
     if(pxWidth && pxHeight){
       return (

src/pages/activity/detail/assemble.js

@@ -52,7 +52,8 @@ export default class Detail extends Component {
     recordDetail: {}, // 发团记录
     memberList: [], // 团员记录
     shares: [], // 分享设置
-    posters: [], // 海报模板
+    posters: [],  // 海报设置
+    posterTpls: [], // 海报模板
     leftTime: 0,  // 剩余时间
     ltTicker: undefined,  // 剩余时间计时器
     actState: ActBeforeStart,  // 活动本身状态
@@ -76,10 +77,18 @@ export default class Detail extends Component {
   }
 
   componentWillUnmount() {
-    this.clearTicker()
+    this.stopTicker()
     this.state.pointRecordId && updatePoint(pointRecordId)
   }
 
+  componentDidShow() {
+    this.startTicker()
+  }
+  
+  componentDidHide() {
+    this.stopTicker()
+  }
+
   // 初始化页面数据
   initPageData = () => {
     if (!this.state.detail.groupActivityId) {
@@ -98,11 +107,17 @@ export default class Detail extends Component {
     }
   }
 
+  // 启动 ticker
+  startTicker() {
+    if (this.state.ltTicker && !this.state.ltTicker.processing) {
+      this.state.ltTicker.start()
+    }
+  }
+
   // 清除 ticker
-  clearTicker() {
+  stopTicker() {
     if (this.state.ltTicker) {
-      clearInterval(this.state.ltTicker)
-      this.setState({ ltTicker: undefined })
+      this.state.ltTicker.stop()
     }
   }
 
@@ -130,15 +145,32 @@ export default class Detail extends Component {
 
   // 打开关闭 ActionSheet 面板
   toggleActionVisible = () => {
+    debugger
+    const { actionSheetVisible } = this.state
+
+    if (this.state.ltTicker) {
+      actionSheetVisible ? this.startTicker() : this.stopTicker()
+    }
+
     this.setState({
-      actionSheetVisible: !this.state.actionSheetVisible
+      actionSheetVisible: !actionSheetVisible
     })
   }
 
   // 打开关闭海报面板
   togglePosterVisible = () => {
+    const { posterVisible, posters } = this.state
+
+    if (!posters || !posters.length) {
+      Taro.showToast({
+        title: '未设置海报模板',
+        icon: 'none'
+      })
+      return
+    }
+
     this.setState({
-      posterVisible: !this.state.posterVisible,
+      posterVisible: !posterVisible,
       actionSheetVisible: false
     })
   }
@@ -161,21 +193,38 @@ export default class Detail extends Component {
   }
 
   // 计时器更新剩余时间
-  updateLeftTime(startDate, endDate) {
-    this.setState({
-      ltTicker: setInterval(() => {
-        const [actState, leftTime] = this.compActState(startDate, endDate)
-        this.setState({ actState, leftTime })
+  getLeftTimeTicker(startDate, endDate) {
+    let processing = false
+    let ticker = undefined
 
-        if (actState === ActFinished) {
-          this.clearTicker()
-        }
-      }, 1000)
-    })
+    const stop = () => {
+      ticker && clearInterval(ticker)
+      processing = false
+    }
+
+    const fn = () => {
+      const [actState, leftTime] = this.compActState(startDate, endDate)
+      this.setState({ actState, leftTime })
+
+      if (actState === ActFinished) {
+        stop()
+      }
+    }
+
+    const start = () => {
+      ticker = setInterval(fn, 1000)
+      processing = true
+    }
+
+    return {
+      start,
+      stop,
+      processing,
+    }
   }
 
   loadDetail() {
-    const { id, recordId } = this.state
+    let { id, recordId, ltTicker } = this.state
     const { userInfo } = this.props
 
     Taro.showLoading()
@@ -189,6 +238,10 @@ export default class Detail extends Component {
         actState = ActFinished
       }
 
+      if (actState != ActFinished) {
+        ltTicker = this.getLeftTimeTicker(res.taShareActivity.startTime, res.taShareActivity.endTime)
+      }
+
       Taro.hideLoading()
       this.setState({
         detail: res.taShareActivity,
@@ -203,11 +256,8 @@ export default class Detail extends Component {
         isStarter: !recordDetail.personId || userInfo.person.personId === recordDetail.personId,
         actState,
         leftTime,
-      })
-
-      if (actState != ActFinished) {
-        this.updateLeftTime(res.taShareActivity.startTime, res.taShareActivity.endTime)
-      }
+        ltTicker
+      }, () => this.startTicker())
 
       // Taro.setNavigationBarTitle({ title: res.taShareActivity.activityName })
 
@@ -378,8 +428,10 @@ export default class Detail extends Component {
     const [page, scene] = this.currentPageAndParams()
     const payload = { page, scene }
 
-    getMiniQrcode(payload).then(qrCode => {
-      this.setState({ qrCode, posterVisible: true })
+    return new Promise((resolve) => {
+      getMiniQrcode(payload).then(qrCode => {
+        this.setState({ qrCode, posterVisible: true }, resolve)
+      })
     })
   }
 
@@ -407,6 +459,7 @@ export default class Detail extends Component {
       posters,
       qrCode,
       leftTime,
+      ltTicker,
     } = this.state
 
     const { userInfo } = this.props
@@ -424,10 +477,17 @@ export default class Detail extends Component {
 
     const joinedNum = detail.groupBuyPeople - (recordDetail.recordId ? 1 : 0) - memberList.length
 
+    const posterConfigs = Poster.transTPLs2Configs(posterTpls, posterData)
+
+    console.log('------posterConfigs------', posterConfigs)
     return (
       <Block>
         {/* 生成海报 */}
-        {posterVisible && (<Poster tpls={posterTpls} params={posterData} onCancel={this.togglePosterVisible} onFinish={this.togglePosterVisible}></Poster>)}
+        { posterVisible && !ltTicker.processing &&
+          (
+            <Poster configs={posterConfigs} onCancel={this.togglePosterVisible} onFinish={this.togglePosterVisible}></Poster>
+          )
+        }
 
         {
           grantPhoneVisible &&

src/pages/activity/detail/assistance.js

@@ -64,7 +64,7 @@ export default class Detail extends Component {
     handleHelpBtn: true, // 立即助力好友
     pointRecordId: undefined, // 埋点ID
   }
-
+  
   componentWillMount() {
     ready.queue(() => {
       // 必须先授权电话
@@ -75,10 +75,18 @@ export default class Detail extends Component {
   }
 
   componentWillUnmount() {
-    this.clearTicker()
+    this.stopTicker()
     this.state.pointRecordId && updatePoint(pointRecordId)
   }
 
+  componentDidShow() {
+    this.startTicker()
+  }
+  
+  componentDidHide() {
+    this.stopTicker()
+  }
+
   // 初始化页面数据
   initPageData = () => {
     if (!this.state.detail.helpActivityId) {
@@ -97,11 +105,17 @@ export default class Detail extends Component {
     }
   }
 
+  // 启动 ticker
+  startTicker() {
+    if (this.state.ltTicker && !this.state.ltTicker.processing) {
+      this.state.ltTicker.start()
+    }
+  }
+
   // 清除 ticker
-  clearTicker() {
+  stopTicker() {
     if (this.state.ltTicker) {
-      clearInterval(this.state.ltTicker)
-      this.setState({ ltTicker: undefined })
+      this.state.ltTicker.stop()
     }
   }
 
@@ -129,15 +143,32 @@ export default class Detail extends Component {
 
   // 打开关闭 ActionSheet 面板
   toggleActionVisible = () => {
+    debugger
+    const { actionSheetVisible } = this.state
+
+    if (this.state.ltTicker) {
+      actionSheetVisible ? this.startTicker() : this.stopTicker()
+    }
+
     this.setState({
-      actionSheetVisible: !this.state.actionSheetVisible
+      actionSheetVisible: !actionSheetVisible
     })
   }
 
   // 打开关闭海报面板
   togglePosterVisible = () => {
+    const { posterVisible, posters } = this.state
+    
+    if (!posters || !posters.length) {
+      Taro.showToast({
+        title: '未设置海报模板',
+        icon: 'none'
+      })
+      return
+    }
+
     this.setState({
-      posterVisible: !this.state.posterVisible,
+      posterVisible: !posterVisible,
       actionSheetVisible: false
     })
   }
@@ -160,28 +191,44 @@ export default class Detail extends Component {
   }
 
   // 计时器更新剩余时间
-  updateLeftTime(startDate, endDate) {
-    this.setState({
-      ltTicker: setInterval(() => {
-        const [actState, leftTime] = this.compActState(startDate, endDate)
-        this.setState({ actState, leftTime })
+  getLeftTimeTicker(startDate, endDate) {
+    let processing = false
+    let ticker = undefined
 
-        if (actState === ActFinished) {
-          this.clearTicker()
-        }
-      }, 1000)
-    })
+    const stop = () => {
+      ticker && clearInterval(ticker)
+      processing = false
+    }
+
+    const fn = () => {
+      const [actState, leftTime] = this.compActState(startDate, endDate)
+      this.setState({ actState, leftTime })
+
+      if (actState === ActFinished) {
+        stop()
+      }
+    }
+
+    const start = () => {
+      ticker = setInterval(fn, 1000)
+      processing = true
+    }
+
+    return {
+      start,
+      stop,
+      processing,
+    }
   }
 
   // 请求详情
   loadDetail() {
-    // debugger
-    const { id, initiateId } = this.state
+    let { id, initiateId, ltTicker } = this.state
     const { userInfo } = this.props
 
     Taro.showLoading()
     getHelpDetail(id, initiateId).then(res => {
-      this.clearTicker()
+      this.stopTicker()
 
       const initiateDetail = res.helpInitiateRecord || {}
       let [actState, leftTime] = this.compActState(res.helpActivity.startDate, res.helpActivity.endDate)
@@ -190,6 +237,10 @@ export default class Detail extends Component {
         actState = ActFinished
       }
 
+      if (actState != ActFinished) {
+        ltTicker = this.getLeftTimeTicker(res.helpActivity.startDate, res.helpActivity.endDate)
+      }
+
       Taro.hideLoading()
       this.setState({
         detail: res.helpActivity,
@@ -204,12 +255,9 @@ export default class Detail extends Component {
         isStarter: !initiateDetail.personId || userInfo.person.personId === initiateDetail.personId,
         actState,
         leftTime,
-        isJoin: res.isJoin
-      })
-
-      if (actState != ActFinished) {
-        this.updateLeftTime(res.helpActivity.startDate, res.helpActivity.endDate)
-      }
+        isJoin: res.isJoin,
+        ltTicker
+      }, () => this.startTicker())
 
       // Taro.setNavigationBarTitle({ title: res.helpActivity.title })
 
@@ -366,7 +414,6 @@ export default class Detail extends Component {
     // 必须授权头像
     if (this.toggleGrantAvatar()) {
       const initiateDetail = this.state.initiateDetail
-      // debugger
       if (!initiateDetail.helpRecordInitiateId) {
         // 如果是未发起的助力, 先以当前人身份发起
         this.startMine().then(() => {
@@ -382,8 +429,10 @@ export default class Detail extends Component {
     const [page, scene] = this.currentPageAndParams()
     const payload = { page, scene }
 
-    getMiniQrcode(payload).then(qrCode => {
-      this.setState({ qrCode, posterVisible: true })
+    return new Promise((resolve) => {
+      getMiniQrcode(payload).then(qrCode => {
+        this.setState({ qrCode }, resolve)
+      })
     })
   }
 
@@ -411,6 +460,7 @@ export default class Detail extends Component {
       posters,
       qrCode,
       leftTime,
+      ltTicker,
     } = this.state
 
     const { userInfo } = this.props
@@ -424,10 +474,18 @@ export default class Detail extends Component {
       avatarurl: getDownloadURL(userInfo.person.avatarurl, 'avatar') || '',
     }
 
+    const posterConfigs = Poster.transTPLs2Configs(posterTpls, posterData)
+
+    console.log('------posterConfigs------', posterConfigs)
+
     return (
-      <Block>
+      <View>
         {/* 生成海报 */}
-        {posterVisible && (<Poster tpls={posterTpls} params={posterData} onCancel={this.togglePosterVisible} onFinish={this.togglePosterVisible}></Poster>)}
+        { posterVisible && !ltTicker.processing &&
+          (
+            <Poster configs={posterConfigs} onCancel={this.togglePosterVisible} onFinish={this.togglePosterVisible}></Poster>
+          )
+        }
 
         {
           grantPhoneVisible &&
@@ -553,7 +611,7 @@ export default class Detail extends Component {
             </View>
           )
         }
-      </Block>
+      </View>
     )
   }
 }

src/pages/project/detail/poster.js

@@ -27,6 +27,7 @@ export default class Index extends Component {
     }
   }
   componentWillMount() {
+    debugger
     this.initConfig()
     Taro.showLoading({
       title: '生成中...',