用nuiApp+php实现抖音小程序艺术签名

演示二维码，用抖音扫一扫，或者直接搜索AI智图查看签名页面

下面直接上代码

<template>
<view>
       <swiper class="banner" indicator-dots='true' mode="widthFix" indicator-color='#333' indicator-active-color='#f30' autoplay='true'>
             <swiper-item> 
             <image src='https://chatgpt.goolibao.com/static/uploads/banner.jpg' mode="widthFix" ></image>
             </swiper-item>
             <swiper-item> 
             <image src='https://chatgpt.goolibao.com/static/uploads/banner1.jpg' mode="widthFix"></image>
             </swiper-item>
             <swiper-item> 
             <image src='https://chatgpt.goolibao.com/static/uploads/banner2.jpg' mode="widthFix"></image>
             </swiper-item>
            </swiper>
<input v-model="name" placeholder="请输入2-4个字的姓名" />
<div class="tab-container">
<div :class="['tab', { active: type === '901' }]" @click="handleTabClick('901')">一笔艺术签</div>
<div :class="['tab', { active: type === '905' }]" @click="handleTabClick('905')">一笔商务签</div>
<div :class="['tab', { active: type === '5' }]" @click="handleTabClick('5')">明星手写</div>
</div>
<button class="zoom-animation" @click="handleDesign">设计签名</button>
<image v-if="imageUrl && showImage" :src="imageUrl"></image>
<view v-if="isLoading">
<text>正在加载中...</text>
</view>
</view>
</template>

<script>
export default {
data() {
return {
name: '',
type: '901',
color: '#000000',
imageUrl: '',
showImage: false,
isLoading: false
}
},
methods: {
handleTabClick(value) {
this.type = value
},
handleDesign() {
if (this.showImage) {
this.showImage = false
this.imageUrl = ''
}

  uni.request({
    url: '抖音信息安全接口地址/iii.php',
    method: 'POST',
    header: {
      'Content-Type': 'application/json'
    },
    data: {
      tasks: [
        {
          content: this.name
        }
      ]
    },
    success: (res) => {
      console.log(res.data)
      if (res.data.data[0].predicts[0].hit) {
        uni.showToast({
          title: '输入的名字疑似违规，请重新输入',
          icon: 'none'
        })
      } else {
        this.showModal()
      }
    },
    fail: (err) => {
      console.error(err)
    }
  })
},
showModal() {
  if (this.showImage) {
    this.showImage = false
    this.imageUrl = ''
  }

  uni.showModal({
    content: '获得需要观看完广告视频，才获得权限',
    cancelText: '不看了',
    confirmText: '观看',
    success: (res) => {
      if (res.confirm) {
        this.isWatch = true
        this.isLoading = true
        this.requestAPI()
      } else {
        uni.showToast({ title: '嘤嘤嘤！心诚则灵嘛', duration: 3000 })
      }
    }
  })
},
requestAPI() {
  uni.showLoading({
    title: '加载中'
  })

  const rewardedVideoAd = tt.createRewardedVideoAd({
    adUnitId: '6uxegf22tlasyahw7j'
  })

  rewardedVideoAd.onLoad(() => {
    console.log('激励视频广告加载成功')
  })

  rewardedVideoAd.onError((err) => {
    console.log('激励视频广告加载失败', err)
  })

  rewardedVideoAd.onClose((res) => {
    if (res.isEnded) {
      console.log('激励视频广告观看完整')
      if (!this.showImage) {
        this.showImage = true
      }
    } else {
      console.log('激励视频广告提前关闭')
    }
  })

  rewardedVideoAd.load().then(() => {
    console.log('激励视频广告加载成功')
    rewardedVideoAd.show().then(() => {
      console.log('激励视频广告显示成功')
    }).catch((err) => {
      console.log('激励视频广告显示失败', err)
    })
  }).catch((err) => {
    console.log('激励视频广告加载失败', err)
  })

  uni.request({
    url: '签名接口地址',
    method: 'GET',
    data: {
      id: this.name,
      zhenbi: '20191123',
      id1: '1000',
      id2: this.type,
      id3: this.color
    },
    success: (res) => {
      this.imageUrl = res.data
    },
    fail: (err) => {
      console.log(err)
    },
    complete: () => {
      uni.hideLoading()
      this.isLoading = false
    }
  })
}
}
}
</script>

<style>
.zoom-animation {
animation: zoom 2s infinite;
margin-top: 20px;
width: 80%;
}

.tab-container {
display: flex;
justify-content: center;
margin-top: 20px;
width: 100%;
max-width: 90%;
margin: 0 auto;
margin-top: 20px;
}

input {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
width: 90%;
margin: 0 auto;
margin-top: 20px;
}

.tab {
padding: 10px 20px;
cursor: pointer;
background-color: #ccc;
color: #000;
margin-right: 10px;
}

.active {
background-color: #007bff;
color: #fff;
}

.zoom-animation {
animation: zoom 2s infinite;
}

@keyframes zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

swiper {
height: 300rpx;
width: 750rpx;
}

swiper image {
width: 100%;
}
</style>