添加发布视频到抖音

app_list.json

@@ -1,6 +1,6 @@
 {
   "taroConfig": {
-    "version": "1.4.3",
+    "version": "1.4.9",
     "desc": "更改人物动漫化"
   },
   "app_list": [

package.json

@@ -81,7 +81,7 @@
         "webpack": "5.69.0"
     },
     "taroConfig": {
-        "version": "1.4.3",
+        "version": "1.4.9",
         "desc": "更改人物动漫化"
     }
 }

src/api/config.js

@@ -1,7 +1,7 @@
 // 配置请求对象
 // 本地调试 dev 开发阶段
-// export const baseUrl = "https://test-openai.fyshark.com";//测试
-export const baseUrl = "https://openai.fyshark.com";//正式
+export const baseUrl = "https://test-openai.fyshark.com";//测试
+// export const baseUrl = "https://openai.fyshark.com";//正式
 // product 阶段
 // https://www.fastmock.site/mock/3f112f6cb2f621fc9c2dd6a14be19f38/beers/
 // 设计模式

src/app.config.js

@@ -36,6 +36,8 @@ export default defineAppConfig({
         "pages/realDetail/index",//资讯
         "pages/comicActivity/index",//人物动漫画活动页
         "pages/comicActivityDetail/index",//人物动漫画活动详情页
+        "pages/comicActivityCurrent/index",//人物动漫画（通用）活动页
+        "pages/comicActivityCurrentDetail/index",//人物动漫画（通用）活动详情页
       ]
     },
     

src/moduleB/pages/comic/index.jsx

@@ -19,11 +19,26 @@ export default class collection extends Component {
     repeat: 0,//广告次数
     drawTaskId: 0,//任务id
     is_week: 0,//是否是周卡
+    isIos: false,
   }
 
   componentWillMount () {
+    let that = this
+    Taro.getSystemInfo({
+      success: function (res) {
+        if (res.platform != "android") {
+          that.setState({
+            isIos: true
+          })
+        }
+      }
+    })
     this.getDrawGcImgIndex()
     this.getCoinTaskAd()
+    setTimeout(() => {
+      this.getDrawGcImgIndex()
+      this.getCoinTaskAd()
+    }, 1000);
   }
   componentDidShow () {
     //接收裁剪图片
@@ -78,7 +93,7 @@ export default class collection extends Component {
   updateButton () {
     if (!this.state.isImage) {
       this.upLode()
-    } else if ( this.state.creatInfo.is_week == 0) {
+    } else if (this.state.creatInfo.is_week == 0) {
       this.playVideoGeneratePictures()
     } else {
       this.generatePictures()
@@ -95,7 +110,7 @@ export default class collection extends Component {
       success: function (res) {
         console.log(res, 'res');
         const file = res.tempFiles[0].tempFilePath
-        console.log(res.tempFiles[0].size,'res.tempFiles[0].size');
+        console.log(res.tempFiles[0].size, 'res.tempFiles[0].size');
         if (res.tempFiles[0].size > 2000000) {
           Taro.showToast({ title: '图片大小不能超过2M', icon: 'none' })
           return
@@ -104,13 +119,13 @@ export default class collection extends Component {
         Taro.showLoading({
           title: '图片检测中...',
         })
-        api.imageDetection({ img_data: base64Img }).then(item=>{
-          if (item.code==200) {
+        api.imageDetection({ img_data: base64Img }).then(item => {
+          if (item.code == 200) {
             Taro.hideLoading()
             Taro.navigateTo({
               url: `/moduleA/pages/upload/index?image=${file}`
             })
-          }else{
+          } else {
             Taro.hideLoading()
             Taro.showToast({ title: item.msg, icon: 'none' })
           }
@@ -291,6 +306,14 @@ export default class collection extends Component {
   }
   //充值
   toOrder () {
+    if (this.state.isIos) {
+      Taro.showToast({
+        title: 'ios暂不支持充值',
+        icon: 'none',
+        duration: 2000
+      })
+      return
+    }
     let that = this
     if (process.env.TARO_ENV === 'tt') {
       Taro.showLoading({
@@ -440,8 +463,9 @@ export default class collection extends Component {
               onClick={e => (tool.throttle(this.toOrder()), 2000)}
             >
               <View className='result-recharge-button-content'>
-                <View className='result-recharge-button-top'>无广告急速制作</View>
-                <View className='result-recharge-button-bottom'>一周/{this.state.creatInfo.money_week / 100}元</View>
+                <View className='result-recharge-button-top'>【限时抢购】无广告！</View>
+                <View className='result-recharge-button-bottom'>9.9元→{this.state.models.money_week / 100}元/周！
+                </View>
               </View>
             </View>
           }
@@ -455,7 +479,7 @@ export default class collection extends Component {
 
         </View>
         <View className='tip-img'>
-          <Image className='ps-image' src='http://video-img.fyshark.com/1681720619915%E4%B8%8B%E5%9B%BE.png'></Image>
+          <Image className='ps-image' src='http://video-img.fyshark.com/1683188943973000000dhk.png'></Image>
         </View>
       </View>
     )

src/moduleB/pages/comicActivity/index.jsx

@@ -1,5 +1,5 @@
 import { Component } from 'react'
-import { View, Text, Button, Image, scrollView, Input } from '@tarojs/components'
+import { View, Text, Button, Image, scrollView, Video, Input } from '@tarojs/components'
 import * as api from '../../../service/index'
 import tool from '../../../common/tool'
 import Taro, { } from '@tarojs/taro'
@@ -19,11 +19,26 @@ export default class collection extends Component {
     drawTaskId: 0,//任务id
     is_week: 0,//是否是周卡用户
     models: {},//活动数据
+    isIos: false,
   }
 
   componentWillMount () {
+    let that = this
+    Taro.getSystemInfo({
+      success: function (res) {
+        if (res.platform != "android") {
+          that.setState({
+            isIos: true
+          })
+        }
+      }
+    })
     this.getCoinTaskAd()
     this.getDraw51ImgIndex()
+    setTimeout(() => {
+      this.getCoinTaskAd()
+      this.getDraw51ImgIndex()
+    }, 1000);
   }
   componentDidShow () {
     //接收裁剪图片
@@ -96,13 +111,13 @@ export default class collection extends Component {
         Taro.showLoading({
           title: '图片检测中...',
         })
-        api.imageDetection({ img_data: base64Img }).then(item=>{
-          if (item.code==200) {
+        api.imageDetection({ img_data: base64Img }).then(item => {
+          if (item.code == 200) {
             Taro.hideLoading()
             Taro.navigateTo({
               url: `/moduleA/pages/upload/index?image=${file}`
             })
-          }else{
+          } else {
             Taro.hideLoading()
             Taro.showToast({ title: item.msg, icon: 'none' })
           }
@@ -273,6 +288,14 @@ export default class collection extends Component {
   }
   //充值
   toOrder () {
+    if (this.state.isIos) {
+      Taro.showToast({
+        title: 'ios暂不支持充值',
+        icon: 'none',
+        duration: 2000
+      })
+      return
+    }
     let that = this
     if (process.env.TARO_ENV === 'tt') {
       Taro.showLoading({
@@ -372,7 +395,7 @@ export default class collection extends Component {
                   ></Image>
                 </View>
                 <View className='step'>
-                  <Image className='step-img' src='http://video-img.fyshark.com/1682475185108123.png'>
+                  <Image className='step-img' src='http://video-img.fyshark.com/1683196371096123.png'>
                   </Image>
                 </View>
               </View>
@@ -412,8 +435,9 @@ export default class collection extends Component {
                     onClick={e => (tool.throttle(this.toOrder()), 2000)}
                   >
                     <View className='result-recharge-button-content'>
-                      <View className='result-recharge-button-top'>无广告急速制作</View>
-                      <View className='result-recharge-button-bottom'>一周/{this.state.models.money_week / 100}元</View>
+                      <View className='result-recharge-button-top'>【限时抢购】无广告！</View>
+                      <View className='result-recharge-button-bottom'>9.9元→{this.state.models.money_week / 100}元/周！
+                      </View>
                     </View>
                   </View>
                 }

src/moduleB/pages/comicActivity/index.less

@@ -1,6 +1,6 @@
 .mine {
   padding: 48px 20px;
-  min-height: 100vh;
+  // min-height: 100vh;
   background-color: #041129;
 
   .before-painting {
@@ -33,6 +33,10 @@
         width: 100%;
         height: 100%;
       }
+      .album_swiper_video{
+        width: 100%;
+        height: 100%;
+      }
 
       .delete {
         position: absolute;

src/moduleB/pages/comicActivityCurrent/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '人物动漫化',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/moduleB/pages/comicActivityCurrent/index.jsx

@@ -0,0 +1,485 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, scrollView,Video, Input } from '@tarojs/components'
+import * as api from '../../../service/index'
+import tool from '../../../common/tool'
+import Taro, { getCurrentInstance } from '@tarojs/taro'
+import './index.less'
+
+export default class collection extends Component {
+  $instance = getCurrentInstance()
+  state = {
+    consultImg: '',
+    active_title: '',
+    sizeIndex: 0,
+    mass: 0,
+    modelIndex: 0,
+    isImage: false,
+    isOpen: false,
+    jumpurl: '',//广告id
+    task_id: 0,//任务id
+    repeat: 0,//广告次数
+    drawTaskId: 0,//任务id
+    is_week: 0,//是否是周卡用户
+    models: {},//活动数据
+    isIos: false,
+  }
+
+  componentWillMount () {
+    let that = this
+    Taro.getSystemInfo({
+      success: function (res) {
+        if (res.platform != "android") {
+          that.setState({
+            isIos: true
+          })
+        }
+      }
+    })
+    this.getCoinTaskAd()
+    this.getDrawAloneImgIndex()
+    setTimeout(() => {
+      this.getCoinTaskAd()
+      this.getDrawAloneImgIndex()
+    }, 1000);
+  }
+  componentDidShow () {
+    //接收裁剪图片
+    let pages = Taro.getCurrentPages();
+    let currentPage = pages[pages.length - 1]; // 获取当前页面
+    console.log(currentPage, 'currentPage');
+    if (process.env.TARO_ENV == 'weapp') {
+      if (currentPage.__data__.consultImg) { // 获取值
+        this.setState({
+          consultImg: currentPage.__data__.consultImg,
+          sizeIndex: currentPage.__data__.sizeIndex,
+          isImage: true
+        })
+        currentPage.__data__.consultImg = ''
+      }
+    } else if (process.env.TARO_ENV == 'tt') {
+      if (currentPage.data.consultImg) { // 获取值
+        this.setState({
+          consultImg: currentPage.data.consultImg,
+          sizeIndex: currentPage.data.sizeIndex,
+          isImage: true
+        })
+        currentPage.data.consultImg = ''
+      }
+    }
+  }
+  getDrawAloneImgIndex () {
+    let routers = this.$instance.router.params
+    api.getDrawAloneImgIndex({ style_id: routers.style_id }).then(res => {
+      if (res.code == 200) {
+        this.setState({
+          is_week: res.data.is_week,
+          models: res.data,
+          consultImg: res.data.img,
+          active_title: res.data.active_title
+        })
+      }
+    })
+  }
+  getCoinTaskAd () {
+    api.getCoinTaskAd().then(res => {
+      if (res.code == 200) {
+        this.setState({
+          jumpurl: res.data[0].jumpurl,//广告id
+          task_id: res.data[0].id,//任务id
+          repeat: res.data[0].repeat
+        })
+      }
+    })
+  }
+  changeOpen () {
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
+  }
+  //上传图片
+  upLode () {
+    let that = this
+    Taro.chooseMedia({
+      count: 1, // 默认
+      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
+      mediaType: ['image'],
+      sourceType: ['album', 'camera'],
+      success: function (res) {
+        console.log(res, 'res');
+        const file = res.tempFiles[0].tempFilePath
+        if (res.tempFiles[0].size > 2000000) {
+          Taro.showToast({ title: '图片大小不能超过2M', icon: 'none' })
+          return
+        }
+        let base64Img = Taro.getFileSystemManager().readFileSync(file, 'base64')
+        Taro.showLoading({
+          title: '图片检测中...',
+        })
+        api.imageDetection({ img_data: base64Img }).then(item => {
+          if (item.code == 200) {
+            Taro.hideLoading()
+            Taro.navigateTo({
+              url: `/moduleA/pages/upload/index?image=${file}`
+            })
+          } else {
+            Taro.hideLoading()
+            Taro.showToast({ title: item.msg, icon: 'none' })
+          }
+        })
+      }
+    })
+  }
+  //看广告画图
+  playVideoGeneratePictures () {
+
+    if (!this.state.isImage) {
+      Taro.showToast({ title: '请先上传图片', icon: 'none' })
+      return
+    }
+    api.drawGcImg({ img_url: this.state.consultImg, style_id: this.state.models.style_id }).then(res => {
+      if (res.code == 200) {
+        if (this.state.is_week == 1) {
+          Taro.navigateTo({
+            url: `/moduleB/pages/comicActivityCurrentDetail/index?task_id=${res.data.task_id}`
+          })
+        } else {
+          this.setState({
+            drawTaskId: res.data.task_id
+          }, () => {
+            this.playVideo()
+
+          })
+        }
+
+      } else {
+        Taro.hideLoading()
+        Taro.showToast({ icon: 'none', title: res.msg })
+      }
+    })
+  }
+
+  //观看广告
+  playVideo () {
+    if (process.env.TARO_ENV == 'tt') {
+      this.playVideoTT()
+    } else {
+      this.playVideoWeapp()
+    }
+  }
+  //抖音激励广告
+  playVideoTT () {
+    let that = this
+    Taro.showLoading({
+      title: '加载中...',
+    })
+    const videoAd = tt.createRewardedVideoAd({ adUnitId: this.state.jumpurl });
+    videoAd.show()
+    videoAd.onError((err) => {
+      Taro.hideLoading()
+      switch (err.errCode) {
+        case 1004:
+          // 无合适的广告
+          break;
+        default:
+        // 更多请参考错误码文档
+      }
+    });
+    try {
+      if (videoAd.closeHandler) {
+        videoAd.offClose(videoAd.closeHandler);
+        console.log("videoAd.offClose卸载成功");
+      }
+    } catch (e) {
+      console.log("videoAd.offClose 卸载失败");
+      console.error(e);
+    }
+    videoAd.closeHandler = function (data) {
+      Taro.hideLoading()
+      if (data.isEnded) {
+        Taro.navigateTo({
+          url: `/moduleB/pages/comicActivityDetail/index?task_id=${that.state.drawTaskId}`
+        })
+      } else {
+
+      }
+    }
+    // 监听视频播放完成
+    videoAd.onClose(videoAd.closeHandler);
+  }
+  //激励广告
+  playVideoWeapp () {
+    // 在页面中定义激励视频广告
+    let adUnitId = this.state.jumpurl
+    // 在页面中定义激励视频广告
+    let videoAd = null
+    let that = this
+    console.log(videoAd, 'videoAd');
+    // 在页面onLoad回调事件中创建激励视频广告实例
+    if (wx.createRewardedVideoAd) {
+      videoAd = wx.createRewardedVideoAd({
+        adUnitId: adUnitId
+      })
+      videoAd.onLoad(() => { })
+      videoAd.onError((err) => { })
+      try {
+        if (videoAd.closeHandler) {
+          videoAd.offClose(videoAd.closeHandler);
+          console.log("videoAd.offClose卸载成功");
+        }
+      } catch (e) {
+        console.log("videoAd.offClose 卸载失败");
+        console.error(e);
+      }
+      videoAd.closeHandler = function (res) {
+        // 用户点击了【关闭广告】按钮
+        if (res && res.isEnded || res === undefined) {
+          // 正常播放结束，可以下发游戏奖励
+          Taro.navigateTo({
+            url: `/moduleB/pages/comicActivityDetail/index?task_id=${that.state.drawTaskId}`
+          })
+        } else {
+          //提前关闭小程序
+        }
+      };
+      videoAd.onClose(videoAd.closeHandler);
+    }
+
+    // 用户触发广告后，显示激励视频广告
+    if (videoAd) {
+      videoAd.show().catch(() => {
+        // 失败重试
+        videoAd.load()
+          .then(() => videoAd.show())
+          .catch(err => {
+            Taro.showToast({
+              title: '暂无广告',
+              icon: 'none',
+              duration: 2000
+            })
+            console.log('激励视频 广告显示失败')
+          })
+      })
+    }
+
+  }
+  deleteImg () {
+    this.setState({
+      consultImg: this.state.models.img,
+      isImage: false,
+    })
+  }
+  onShareAppMessage = (res) => {
+    let path = `/pages/index/index?c=${Taro.getStorageSync('user_id')}&s=rightTap`
+    if (process.env.TARO_ENV == 'tt') {
+      path = `/moduleB/pages/comic/index?c=channel_name&s=neibuguazai`
+    }
+    let shareData = {
+      title: tool.shareTitle,
+      path: path,
+      imageUrl: tool.shareImg
+    }
+    return shareData;
+  }
+  changeMass (e) {
+    this.setState({
+      mass: e
+    })
+  }
+  selectModel (item, index) {
+    this.setState({
+      modelIndex: index,
+    })
+  }
+  //充值
+  toOrder () {
+    if (this.state.isIos) {
+      Taro.showToast({
+        title: 'ios暂不支持充值',
+        icon: 'none',
+        duration: 2000
+      })
+      return
+    }
+    let that = this
+    if (process.env.TARO_ENV === 'tt') {
+      Taro.showLoading({
+        title: '加载中...',
+      })
+      api.ttCreateOrder({ pay_info_id: this.state.models.shop_id }).then(res => {
+        if (res.code == 200) {
+          Taro.hideLoading()
+          tt.pay({
+            orderInfo: {
+              order_id: res.data.order_id,
+              order_token: res.data.order_token
+            },
+            service: 5,
+            success (item) {
+              if (item.code == 0) {
+                Taro.showToast({
+                  title: '购买成功',
+                  icon: 'none',
+                  duration: 2000
+                })
+                that.getDraw51ImgIndex()
+                setTimeout(() => {
+                  that.getDraw51ImgIndex()
+                }, 2000);
+                // 支付成功处理逻辑，只有res.code=0时，才表示支付成功
+                // 但是最终状态要以商户后端结果为准
+              }
+            },
+            fail (item) {
+              // 调起收银台失败处理逻辑
+            },
+          });
+        }
+      })
+    } else if (process.env.TARO_ENV === 'weapp') {
+      Taro.getSystemInfo({
+        success: function (res) {
+          Taro.showLoading({
+            title: '加载中...',
+          })
+          api.createOrder({ shop_id: that.state.models.shop_id }).then(res => {
+            if (res.code == 200) {
+              Taro.hideLoading()
+              Taro.requestPayment({
+                timeStamp: res.data.timeStamp,
+                nonceStr: res.data.nonceStr,
+                package: res.data.package,
+                signType: res.data.signType,
+                paySign: res.data.paySign,
+                success: function (res) {
+                  // console.log(res);
+                  //添加2s延迟在刷新数据
+                  setTimeout(() => {
+                    that.getDraw51ImgIndex()
+                    Taro.showToast({
+                      title: '购买成功',
+                      icon: 'none',
+                      duration: 2000
+                    })
+                  }, 2000);
+                },
+                fail: function (err) {
+                  try {
+                    const res = Taro.getSystemInfoSync()
+                    console.log(res, 'iphone=====');
+                  } catch (e) {
+                  }
+                }
+              })
+            }
+          })
+        }
+      })
+    }
+  }
+  toComic () {
+    Taro.navigateTo({
+      url: `/moduleB/pages/comic/index`
+    })
+  }
+
+  render () {
+    return (
+      <View className='mine'>
+        {
+          !this.state.isImage ?
+            <View className='before-painting'>
+              <View className='title'>
+                <Image className='tips-img' src='http://video-img.fyshark.com/1683190761038e2e0bc9b83ddbbc667fd037e9126b39bd948c66921fe-TiYNnw%402x.png'></Image>
+                <View className='tips-title'>{this.state.active_title}</View>
+                <Image className='tips-title-img' src='http://video-img.fyshark.com/1683190784437%E7%BB%84%2052%402x.png'></Image>
+                <Image className='tips-img' src='http://video-img.fyshark.com/1683190773745e2e0bc9b83ddbbc667fd037e9126b39bd948c66921fe-TiYNnw%20%E6%8B%B7%E8%B4%9D%402x.png'></Image>
+              </View>
+              <View className='banner'>
+                <View className='banner-content'>
+                  {/* <Image className='content-img'
+                    mode='aspectFit'
+                    src={this.state.consultImg}
+                  ></Image> */}
+                   <Video
+                    className='album_swiper_video'
+                    src={'http://video-img.fyshark.com/16832726796725%E6%9C%885%E6%97%A5(1).mp4'}
+                    showCenterPlayBtn={false}
+                    showPlayBtn={false}
+                    showFullscreenBtn={false}
+                    autoplay
+                    objectFit='cover'
+                    loop
+                    controls={false}
+                    muted={false}
+                    x5-video-player-type='h5-page'
+                    webkit-playsinline='true'
+                    x5-playsinline='true'
+                    x5-video-orientation='portraint'
+                  ></Video>
+                </View>
+                <View className='step'>
+                  <Image className='step-img' src='http://video-img.fyshark.com/1683196371096123.png'>
+                  </Image>
+                </View>
+              </View>
+              <View className='update' >
+                <View className='update-button-more'
+                  onClick={e => (this.toComic())}
+                >
+                  更多风格
+                </View>
+                <View className='update-button'
+                  onClick={e => (this.upLode())}
+                >
+                  上传图片
+                </View>
+              </View>
+
+            </View>
+            :
+            <View className='after-painting'>
+              <View className='result-banner'>
+                <View className='result-banner-content'>
+                  <Image className='result-content-img'
+                    mode='widthFix'
+                    src={this.state.consultImg}
+                  ></Image>
+                  {
+                    this.state.isImage &&
+                    <Image className='delete' src='http://video-img.fyshark.com/1680147210173guanbi.png' onClick={e => (this.deleteImg())}></Image>
+                  }
+                </View>
+              </View>
+              <View className='after-tips'>照片已上传，还差最后一步</View>
+              <View className='result-update' >
+                {
+                  this.state.is_week == 0 &&
+                  <View className='result-recharge-button update-active'
+                    onClick={e => (tool.throttle(this.toOrder()), 2000)}
+                  >
+                    <View className='result-recharge-button-content'>
+                      <View className='result-recharge-button-top'>【限时抢购】无广告！</View>
+                      <View className='result-recharge-button-bottom'>9.9元→{this.state.models.money_week / 100}元/周！
+                      </View>
+                    </View>
+                  </View>
+                }
+                <View className='result-update-button'
+                  onClick={e => (tool.throttle(this.playVideoGeneratePictures()), 2000)}
+                >
+                  {
+                    this.state.is_week == 0 &&
+                    <Image className='result-update-img' src='http://video-img.fyshark.com/1682414441783aghidjnl.png'></Image>
+                  }
+                  {
+                    this.state.is_week == 1 ? '开始制作' : '看广告免费制作'
+                  }
+
+                </View>
+              </View>
+            </View>
+        }
+      </View>
+    )
+  }
+}

src/moduleB/pages/comicActivityCurrent/index.less

@@ -0,0 +1,268 @@
+.mine {
+  padding: 48px 20px;
+  min-height: 100vh;
+  background-color: #041129;
+
+  .before-painting {
+    padding: 0 20px;
+  }
+
+  .title {
+    width: 100%;
+    display: flex;  
+    justify-content: center;
+    align-items: center;
+
+    .tips-img {
+      width: 56px;
+      height: 56px;
+    }
+
+    .tips-title {
+      margin: 0 10px;
+      font-size: 44px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #FDFDFD;
+      background: linear-gradient(0deg, #26FFFF 0%, #90C3FE 50%, #E9A2FF 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .tips-title-img{
+      width: 148px;
+      height: 72px;
+    }
+  }
+
+  .banner {
+    position: relative;
+    margin-top: 60px;
+
+    .banner-content {
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 100%;
+      height: 700px;
+
+      .content-img {
+        width: 100%;
+        height: 100%;
+      }
+      .album_swiper_video{
+        width: 100%;
+        height: 100%;
+      }
+      .delete {
+        position: absolute;
+        right: -20px;
+        top: -20px;
+        width: 40px;
+        height: 40px;
+      }
+    }
+
+
+    .banner-tips {
+      margin-top: 20px;
+      text-align: center;
+      font-size: 28px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #FDFDFD;
+      line-height: 40px;
+    }
+  }
+
+  .step {
+    margin-top: 60px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+
+    .step-img {
+      width: 536px;
+      height: 76px;
+    }
+  }
+
+  .update {
+    margin-top: 40px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .update-button-more {
+      width: 206px;
+      height: 94px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #2C2C2C;
+      border-radius: 46px;
+      font-size: 32px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #FDFDFD;
+    }
+
+    .update-button {
+      width: 418px;
+      height: 94px;
+      background: linear-gradient(90deg, #0F83FE, #01FBCD);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 32px;
+      border-radius: 46px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #FDFDFD;
+
+    }
+
+    .update-button:active {
+      opacity: 0.5;
+    }
+  }
+
+  .tip-img {
+    margin-top: 54px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+
+    .ps-image {
+      width: 566px;
+      height: 194px;
+    }
+  }
+
+  .after-painting {
+    padding: 0 60px;
+
+    .result-banner {
+      position: relative;
+      margin-top: 20px;
+
+      .result-banner-content {
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 440px;
+
+        .result-content-img {
+          width: 100%;
+          min-height: 440px;
+        }
+
+        .delete {
+          position: absolute;
+          right: -20px;
+          top: -20px;
+          width: 40px;
+          height: 40px;
+        }
+      }
+
+      .banner-tips {
+        margin-top: 20px;
+        text-align: center;
+        font-size: 28px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #FDFDFD;
+        line-height: 40px;
+      }
+    }
+
+    .after-tips {
+      margin-top: 60px;
+      text-align: center;
+      font-size: 36px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #FFFFFF;
+    }
+
+    .result-update {
+      margin-top: 40px;
+
+      .result-recharge-button {
+        background: linear-gradient(90deg, #C367DE, #3342FF);
+        border-radius: 46px;
+        width: 100%;
+        height: 94px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .result-recharge-button-content {
+
+          .result-recharge-button-top {
+            font-size: 32px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            text-align: center;
+            color: #FFFFFF;
+            line-height: 40px;
+          }
+
+          .result-recharge-button-bottom {
+            font-size: 24px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            text-align: center;
+            color: rgba(255, 255, 255, .7);
+            line-height: 40px;
+          }
+        }
+
+      }
+
+      .result-update-button {
+        margin-top: 38px;
+        border-radius: 46px;
+        width: 100%;
+        height: 94px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 28px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #FDFDFD;
+        border: 2px solid #FFFFFF;
+
+        .result-update-img {
+          width: 52px;
+          height: 52px;
+          display: block;
+          margin-right: 10px;
+        }
+      }
+
+      .result-update-button:active {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  /* 定义动画 */
+  @keyframes shrink {
+
+    0%,
+    100% {
+      transform: translateY(0) scale(1);
+    }
+
+    50% {
+      transform: translateY(0px) scale(0.95);
+    }
+  }
+
+  /* 应用动画 */
+  .update-active {
+    animation: shrink 1.2s ease-in-out infinite;
+  }
+}

src/moduleB/pages/comicActivityCurrentDetail/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '人物动漫化详情',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/moduleB/pages/comicActivityCurrentDetail/index.jsx

@@ -0,0 +1,459 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, ScrollView, Input } from '@tarojs/components'
+import * as api from '../../../service/index'
+import tool from '../../../common/tool'
+import ttappid from '../../../../project.tt.json'
+import Taro, { getCurrentInstance } from '@tarojs/taro'
+import './index.less'
+
+export default class collection extends Component {
+  $instance = getCurrentInstance()
+  state = {
+    jumpurl: '',//广告id
+    task_id: 0,//任务id
+    repeat: 0,//广告次数
+    current: 0,
+    interval: null,
+    draw_status: 0,
+    draw_infos: [],
+    que_cnt: 0,
+    default_img: '',
+    wallet_balance: 0,//用户当前余额
+    is_week: 0,//是否是会员
+  }
+
+  componentWillMount () {
+
+  }
+  componentDidShow () {
+    let routers = this.$instance.router.params
+    this.getCoinTaskAd()
+    api.unlockGcImg({ task_id: routers.task_id }).then(res => {
+      console.log('解锁');
+      if (res.code == 200) {
+        this.getDrawTaskStatus(routers.task_id)
+      }
+    })
+  }
+  //页面销毁之前调用
+  componentWillUnmount () {
+    //避免服务器攻击
+    clearInterval(this.state.interval)
+  }
+  getCoinTaskAd () {
+    api.getCoinTaskAd().then(res => {
+      if (res.code == 200) {
+        this.setState({
+          jumpurl: res.data[0].jumpurl,//广告id
+          task_id: res.data[0].id,//任务id
+          repeat: res.data[0].repeat
+        })
+      }
+    })
+  }
+  //解锁成功
+  unlockGcImg (item, index) {
+    console.log('解锁002');
+    api.unlockGcImg({ task_id: item.task_id }).then(res => {
+      if (res.code == 200) {
+        this.setState({
+          current: index
+        })
+        this.getDrawTaskStatus(item.task_id)
+      }
+    })
+  }
+
+  selectedLabel (item, index) {
+    let that = this
+    console.log(item, 'itemitem');
+    if (item.unlock_status == 0) {
+      if (this.state.is_week == 0) {
+
+        Taro.showModal({
+          title: '提示',
+          content: '是否观看广告解锁？',
+          success: function (res) {
+            if (res.confirm) {
+              if (item.status == 4) {
+                that.generatePictures(item, index)
+              }
+              that.playVideo(item, index)
+            } else if (res.cancel) {
+              console.log('用户点击取消')
+            }
+          }
+        })
+      } else {
+        Taro.showToast({
+          title: '解锁成功',
+          icon: 'none',
+          duration: 2000
+        })
+        that.unlockGcImg(item, index)
+        if (item.status == 4) {
+          that.generatePictures(item, index)
+        }
+      }
+    } else {
+      this.setState({
+        current: index
+      })
+    }
+
+  }
+  //观看广告
+  playVideo (item, index) {
+    if (process.env.TARO_ENV == 'tt') {
+      this.playVideoTT(item, index)
+    } else {
+      this.playVideoWeapp(item, index)
+    }
+  }
+  //抖音激励广告
+  playVideoTT (item, index) {
+    let that = this
+    Taro.showLoading({
+      title: '加载中...',
+    })
+    const videoAd = tt.createRewardedVideoAd({ adUnitId: this.state.jumpurl });
+    videoAd.show()
+    videoAd.onError((err) => {
+      Taro.hideLoading()
+      switch (err.errCode) {
+        case 1004:
+          // 无合适的广告
+          break;
+        default:
+        // 更多请参考错误码文档
+      }
+    });
+    try {
+      if (videoAd.closeHandler) {
+        videoAd.offClose(videoAd.closeHandler);
+        console.log("videoAd.offClose卸载成功");
+      }
+    } catch (e) {
+      console.log("videoAd.offClose 卸载失败");
+      console.error(e);
+    }
+    videoAd.closeHandler = function (data) {
+      Taro.hideLoading()
+      if (data.isEnded) {
+        Taro.showToast({
+          title: '解锁成功',
+          icon: 'none',
+          duration: 2000
+        })
+        that.unlockGcImg(item, index)
+      } else {
+        that.getDrawTaskStatus(item.task_id)
+        Taro.showToast({
+          title: '解锁失败',
+          icon: 'none',
+          duration: 2000
+        })
+      }
+    }
+    // 监听视频播放完成
+    videoAd.onClose(videoAd.closeHandler);
+  }
+  //激励广告
+  playVideoWeapp (item, index) {
+    console.log(item, 'guanggao');
+    // 在页面中定义激励视频广告
+    let adUnitId = this.state.jumpurl
+    // 在页面中定义激励视频广告
+    let videoAd = null
+    let that = this
+    // 在页面onLoad回调事件中创建激励视频广告实例
+    if (wx.createRewardedVideoAd) {
+      videoAd = wx.createRewardedVideoAd({
+        adUnitId: adUnitId
+      })
+      videoAd.onLoad(() => {
+      })
+      videoAd.onError((err) => { })
+      try {
+        if (videoAd.closeHandler) {
+          videoAd.offClose(videoAd.closeHandler);
+          console.log("videoAd.offClose卸载成功");
+        }
+      } catch (e) {
+        console.log("videoAd.offClose 卸载失败");
+        console.error(e);
+      }
+      videoAd.closeHandler = function (res) {
+        Taro.hideLoading()
+        // 用户点击了【关闭广告】按钮
+        if (res && res.isEnded || res === undefined) {
+          // 正常播放结束，可以下发游戏奖励
+          Taro.showToast({
+            title: '解锁成功',
+            icon: 'none',
+            duration: 2000
+          })
+          console.log(item, '关闭');
+          that.unlockGcImg(item, index)
+        } else {
+          console.log(item, '关闭1');
+          //提前关闭小程序
+          that.getDrawTaskStatus(item.task_id)
+          Taro.showToast({
+            title: '解锁失败',
+            icon: 'none',
+            duration: 2000
+          })
+        }
+      };
+      videoAd.onClose(videoAd.closeHandler);
+
+    }
+
+    // 用户触发广告后，显示激励视频广告
+    if (videoAd) {
+      videoAd.show().catch(() => {
+        // 失败重试
+        videoAd.load()
+          .then(() => videoAd.show())
+          .catch(err => {
+            Taro.showToast({
+              title: '暂无广告',
+              icon: 'none',
+              duration: 2000
+            })
+            console.log('激励视频 广告显示失败')
+          })
+      })
+    }
+
+  }
+  //画画
+  generatePictures (item, index) {
+    console.log(item, '画画');
+    api.drawGcImgTask({ task_id: item.task_id }).then(res => {
+      if (res.code == 200) {
+        this.getDrawTaskStatus(item.task_id)
+      }
+    })
+  }
+  getDrawTaskStatus (task_id) {
+    api.getDrawTaskStatusGc({ task_id: task_id }).then(res => {
+      //定时器不要轻易改，避免造成服务器攻击
+      if (res.code == 200) {
+        let draw_infos = res.data.draw_infos
+        // if (res.data.draw_status != 2) {
+        //   let params = {}
+        //   params['img'] = res.data.default_img
+        //   params['id'] = -1
+        //   draw_infos.push(params)
+        // }
+        console.log(draw_infos, 'draw_infos');
+        if (res.data.draw_status != 2 && res.data.que_cnt > 1) {
+          this.state.interval = setInterval(() => {
+            clearInterval(this.state.interval)
+            this.getDrawTaskStatus(task_id)
+          }, 1000 * 10)
+        } else if (res.data.draw_status != 2 && res.data.que_cnt <= 1) {
+          clearInterval(this.state.interval)
+          this.state.interval = setInterval(() => {
+            this.getDrawTaskStatus(task_id)
+          }, 1000 * 5)
+        } else {
+          clearInterval(this.state.interval)
+        }
+        this.setState({
+          draw_status: res.data.draw_status,
+          que_cnt: res.data.que_cnt,
+          draw_infos: draw_infos,
+          is_week: res.data.is_week,
+          wallet_balance: res.data.wallet_balance
+        })
+      }
+    })
+  }
+
+  download () {
+    this.downImg()
+  }
+  // 鉴权操作 判断是否有保存到相册的权限
+  // 有就直接下载 没有就弹窗提示给权限
+  downImg () {
+    Taro.getSetting({
+      success: res => {
+        if (!res.authSetting['scope.writePhotosAlbum']) {
+          Taro.authorize({
+            scope: 'scope.writePhotosAlbum',
+            success: () => {
+              this.doSaveImg()
+            },
+            fail: () => {
+              this.openConfirm()
+            }
+          })
+        } else {
+          this.doSaveImg()
+        }
+      }
+    })
+  }
+  // 生成临时路径 保存图片到手机
+  doSaveImg () {
+    Taro.downloadFile({
+      url: this.state.draw_infos[this.state.current].img,
+      success: res => {
+        Taro.saveImageToPhotosAlbum({
+          filePath: res.tempFilePath,
+          success: () => {
+            Taro.showToast({ title: '已保存到相册', icon: 'success' })
+          },
+          fail: () => {
+            Taro.showToast({ title: '保存失败', icon: 'none' })
+          }
+        })
+      }
+    })
+  }
+  // 权限弹窗
+  openConfirm () {
+    Taro.showModal({
+      content: '检测到您没有打开小程序相册权限，是否取设置打开？',
+      showCancel: true,
+      success: res => {
+        if (res.confirm) {
+          // 打开权限
+          Taro.openSetting({
+            success: res => {
+              this.doSaveImg()
+            }
+          })
+        }
+      }
+    })
+  }
+  toIndex () {
+    // Taro.reLaunch({
+    //   url: `/pages/index/index`
+    // })
+  }
+  previewImage () {
+    Taro.previewImage({
+      current: this.state.draw_infos[this.state.current].img, // 当前显示图片的http链接  
+      urls: [`${this.state.draw_infos[this.state.current].img}`] // 需要预览的图片http链接列表  
+    })
+  }
+  onUploadDouyinVideo  () {
+    // 通过 uploadOptions 可以拿到 button target 上的一些信息
+    // 如这里的 demo 可以拿到 id: "1"，hello: "world"
+    console.log("onUploadDouyinVideoOptions: ", uploadOptions);
+
+    // 可以利用异步能力配合其他 API 获取必要的字段信息
+    const videoPath = this.chooseVideo();
+    console.log("videoPath:", videoPath);
+    // 返回值（文档中称之为 uploadParams）将被当作发布参数传入视频发布器，发布视频
+    return {
+      videoPath,
+      stickersConfig: {
+        text: [
+          {
+            text: "这是文字贴图",
+            color: "#ffffff",
+            fontSize: 28,
+            scale: 1,
+            x: 0.5,
+            y: 0.5,
+          },
+        ],
+      },
+      success: function (callback) {
+        // 只有当发布成功且挂载成功时，success callback 才会有 videoId
+        console.log("success: ", callback);
+      },
+      fail: function (callback) {
+        console.log("fail: ", callback);
+      },
+      complete: function (callback) {
+        console.log("complete: ", callback);
+      },
+    };
+  }
+  // chooseVideo () {
+  //   return new Promise((resolve) => {
+  //     tt.chooseVideo({
+  //       sourceType: ["album", "camera"],
+  //       compressed: true,
+  //       success: (res) => {
+  //         resolve(res.tempFilePath);
+  //       },
+  //       fail: (err) => {
+  //         let errType = err.errMsg.includes("chooseVideo:fail cancel")
+  //           ? "取消选择"
+  //           : "选择失败";
+  //         tt.showModal({
+  //           title: errType,
+  //           content: err.errMsg,
+  //           showCancel: false,
+  //         });
+  //         resolve("");
+  //       },
+  //     });
+  //   });
+  // }
+
+
+  render () {
+    return (
+      <View className='mine'>
+        {
+          this.state.draw_infos.length > 0 &&
+          <View className='banner'>
+            <View className='banner-content'>
+              <Image className='content-img'
+                mode='aspectFit'
+                onClick={e => (this.previewImage())}
+                src={this.state.draw_infos[this.state.current].img}
+              ></Image>
+            </View>
+          </View>
+        }
+        <ScrollView
+          className='recharge'
+          scrollX
+        >
+          {
+            this.state.draw_infos.map((item, index) => (
+              <View className='recharge-info'
+                key={index}
+                onClick={e => (this.selectedLabel(item, index))}>
+                <Image className='recharge-image' mode='aspectFit' src={item.img}></Image>
+                {
+                  item.unlock_status == 0 &&
+                  <View className='lock'>
+                    <View className='lock-content'>
+                      <Image className='lock-img' src='http://video-img.fyshark.com/1681733630830%E8%A7%A3%E9%94%81%402x.png'></Image>
+                      <View className='lock-title'>{item.model_name}</View>
+                    </View>
+                  </View>
+                }
+              </View>
+            ))
+          }
+        </ScrollView>
+        <View className='tips'>作品可在「绘画作品」中查看</View>
+        {/* <View className='send'>
+          <View className='sendTT'>一键发抖音</View>
+        </View> */}
+        <View className='control'>
+          <View className='download' onClick={e => (this.download())}>保存图片</View>
+          <View className='toIndex' onClick={e => (this.toIndex())}>前往探索更多玩法</View>
+        </View>
+        <Button openType="uploadDouyinVideo">
+          uploadDouyinVideo
+        </Button>
+        <button open-type="uploadDouyinVideo" id="1" data-hello="world">
+          发布
+        </button>
+      </View>
+    )
+  }
+}

src/moduleB/pages/comicActivityCurrentDetail/index.less

@@ -0,0 +1,216 @@
+.mine {
+  padding: 1px 40px;
+  min-height: 100vh;
+  position: relative;
+  background-color: #041129;
+
+
+  .banner {
+    position: relative;
+    border-radius: 20px;
+    width: 100%;
+
+    .banner-content {
+      position: relative;
+      border-radius: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 100%;
+      height: 740px;
+    }
+
+    .content-img {
+      // background-color: #545353;
+      border-radius: 20px;
+      width: 100%;
+      height: 100%;
+    }
+
+    .content-wait {
+      border-radius: 20px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.6);
+
+      .wait-date {
+        margin-top: 12px;
+        margin-left: 16px;
+        font-size: 36px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #FFFFFF;
+      }
+
+      .wait-middle {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 40px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #FFFFFF;
+      }
+
+      .wait-bottom {
+        width: 100%;
+        position: absolute;
+        bottom: 40px;
+        left: 0;
+        font-size: 40px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #FFFFFF;
+
+        .wait-num {
+          text-align: center;
+        }
+
+        .wait-get-num {
+          text-align: center;
+          margin-top: 16px;
+          text-decoration: underline
+        }
+      }
+    }
+
+  }
+
+  .recharge {
+    margin-top: 30px;
+    width: 100%;
+    white-space: nowrap;
+
+    .recharge-info {
+      position: relative;
+      border-radius: 10px;
+      margin-right: 20px;
+      display: inline-block;
+
+      .recharge-image {
+        width: 130px;
+        height: 230px;
+        display: block;
+        background-color: #545353;
+        border-radius: 10px;
+      }
+
+      .lock {
+        border-radius: 10px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.6);
+
+
+        .lock-content {
+          position: relative;
+          top: 50%;
+          transform: translateY(-50%);
+
+          .lock-img {
+            position: relative;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 36px;
+            display: block;
+            height: 36px;
+          }
+
+          .lock-title {
+            text-align: center;
+            margin-top: 10px;
+            font-size: 26px;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #FFFFFF;
+          }
+        }
+      }
+    }
+
+  }
+
+  .tips {
+    margin-top: 30px;
+    font-size: 26px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #c7c5c5;
+    text-align: center;
+  }
+
+  .send {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .sendTT {
+    margin-top: 100px;
+    width: 460px;
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+    font-size: 28px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    background: linear-gradient(90deg, #1cbd67, #13c027);
+    border-radius: 14px;
+  }
+
+  /* 定义动画 */
+  @keyframes shrink {
+
+    0%,
+    100% {
+      transform: translateY(0) scale(1);
+    }
+
+    50% {
+      transform: translateY(0px) scale(0.95);
+    }
+  }
+
+  /* 应用动画 */
+  .sendTT {
+    animation: shrink 1.2s ease-in-out infinite;
+  }
+
+  .control {
+    width: 100%;
+    margin-top: 100px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 28px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+
+    .download {
+      width: 260px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      background: linear-gradient(90deg, #038EFF, #3342FF);
+      border-radius: 14px;
+    }
+
+    .toIndex {
+      width: 260px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      background: linear-gradient(90deg, #038EFF, #3342FF);
+      border-radius: 14px;
+    }
+  }
+
+}

src/service/index.js

@@ -277,6 +277,14 @@ export const imageDetection = data =>
     method: 'POST',
     data,
   });
+//通用活动
+export const getDrawAloneImgIndex = data =>
+  Request({
+    url: '/api/get_draw_alone_img_index',
+    method: 'POST',
+    data,
+  });
+