2023-6-7

3 years ago · b11dd5a476
parent 0a27a5733d
commit b11dd5a476
3 changed files with 153 additions and 42 deletions
--- a/App.vue
+++ b/App.vue
@ -18,45 +18,6 @@
            })
            this.$u.vuex('vuex_token', res.token)
            this.$u.vuex('vuex_userId', res.user_id)
-            let url = location.href.split('#')[0]
-            this.$u.api.share({
-              url
-            }).then(res => {
-              jwx.config({
-                debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
-                appId: res.appId,
-                jsApiList: res.jsApiList,
-                nonceStr: res.nonceStr,
-                signature: res.signature,
-                timestamp: res.timestamp,
-              })
-              jwx.ready(() => {
-                jwx.updateAppMessageShareData({
-                  title: '疯狂赏金-192用户现金红包大派送', // 分享标题
-                  desc: '疯狂赏金-192用户现金红包大派',
-                  link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
-                  imgUrl: '/static/share-img.jpeg', // 分享图标
-                });
-                jwx.onMenuShareAppMessage({
-                  title: '疯狂赏金-192用户现金红包大派', // 分享标题
-                  desc: '疯狂赏金-192用户现金红包大派',
-                  link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
-                  imgUrl: '/static/share-img.jpeg', // 分享图标
-                });
-                jwx.updateTimelineShareData({
-                  title: '疯狂赏金-192用户现金红包大派', // 分享标题
-                  desc: '疯狂赏金-192用户现金红包大派',
-                  link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
-                  imgUrl: '/static/share-img.jpeg', // 分享图标
-                });
-                jwx.onMenuShareTimeline({
-                  title: '疯狂赏金-192用户现金红包大派', // 分享标题
-                  desc: '疯狂赏金-192用户现金红包大派',
-                  link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
-                  imgUrl: '/static/share-img.jpeg', // 分享图标
-                });
-              })
-            })
          })
        }
      } else {
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@ -46,7 +46,7 @@
          <u-input v-model="code" placeholder-style="color:#969696" :custom-style="{ 'color': '#333333' }" @input="$u.debounce(bindMobile, 1000)"></u-input>
          <u-verification-code :keep-running="true" :seconds="60" ref="uCode" start-text="发送验证码"
                               @change="t => tips = t"></u-verification-code>
-          <u-button :ripple="true" :hair-line="false" :custom-style="{ 'height': '100%','background': '#969696','color': '#fff' }" shape="circle" @click="sendCode">{{ tips }}</u-button>
+          <u-button :ripple="true" :hair-line="false" :custom-style="btnStyle" shape="circle" @click="sendCode">{{ tips }}</u-button>
        </view>

        <view class="login-tip">
@ -176,6 +176,13 @@ import popover from "@/component/popover/index.vue";
          case 3:
            return 'laugh';
        }
+      },
+      btnStyle() {
+        if(!/^1[3-9]\d{9}$/.test(`192${this.inputMobile}`)) {
+          return { 'height': '100%','background': '#969696','color': '#fff' }
+        } else {
+          return { 'height': '100%','background': '#ea3323','color': '#fff' }
+        }
      }
    },
    watch: {
--- a/pages/raffle/raffle.vue
+++ b/pages/raffle/raffle.vue
@ -102,14 +102,17 @@
          <view class="box-text__item-5" v-for="(item,index) in
          [
            {
+              i: 1,
              v: '将活动分享给小伙伴',
              b: '去分享'
            },
            {
+              i: 2,
              v: '关注江苏有线苏州分公司公众号或视频号',
              b: '去关注'
            },
            {
+              i: 3,
              v: '下载“视界观”App',
              b: '去下载'
            }
@ -121,7 +124,7 @@
              fontSize: '28rpx',
              width: '166rpx',
              height: '56rpx'
-            }" shape="circle" :hair-line="false" :ripple="true" @click="index === 0 ? toShare = true : ''">{{ item.b }}</u-button>
+            }" shape="circle" :hair-line="false" :ripple="true" @click="taskClick(item)">{{ item.b }}</u-button>
          </view>
        </view>
      </view>
@ -143,17 +146,38 @@
        </view>
      </view>
    </transition>
+
+    <transition name="share-pop" enter-active-class="fade-in" leave-to-class="fade-out">
+      <view class="share_cover" v-show="toShare" @click="toShare = false">
+        <image src="/static/share.png" class="share_cover_arrow"></image>
+        <view class="share_cover_word">
+          请点击右上角将它发送给指定朋友或分享到朋友圈
+        </view>
+      </view>
+    </transition>
+
+    <transition name="qrcode-pop" enter-active-class="fade-in" leave-to-class="fade-out">
+      <view class="qrcode-pop_cover" v-show="isShowQr" @click="isShowQr = false">
+        <image src="" class="qrcode-pop_cover_img"></image>
+        <view class="qrcode-pop_cover_word">
+          扫码{{ taskId === 2 ? '关注' : '下载' }}
+        </view>
+      </view>
+    </transition>
  </view>
 </template>

 <script>
 import popover from "@/component/popover/index.vue";
+import jwx from "jweixin-module";
 export default {
  components: {
    popover
  },
  data() {
    return {
+      taskId: '',
+      isShowQr: false,
      toShare: false,
      popoverType: 1,//1为规则，2为未中奖，3中奖，4没有机会，5做任务
      flag: '',//当前奖品显示
@ -164,6 +188,71 @@ export default {
    }
  },
  onLoad() {
+    let url = location.href.split('#')[0]
+    this.$u.api.share({
+      url
+    }).then(res => {
+      jwx.config({
+        debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
+        appId: res.appId,
+        jsApiList: res.jsApiList,
+        nonceStr: res.nonceStr,
+        signature: res.signature,
+        timestamp: res.timestamp,
+      })
+      jwx.ready(() => {
+        jwx.updateAppMessageShareData({
+          title: '疯狂赏金-192用户现金红包大派送', // 分享标题
+          desc: '疯狂赏金-192用户现金红包大派',
+          link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+          imgUrl: 'http://h5.ali251.langye.net/storage/files/1686122729648030e9447aa.jpeg', // 分享图标
+        });
+        jwx.updateTimelineShareData({
+          title: '疯狂赏金-192用户现金红包大派', // 分享标题
+          desc: '疯狂赏金-192用户现金红包大派',
+          link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+          imgUrl: 'http://h5.ali251.langye.net/storage/files/1686122729648030e9447aa.jpeg', // 分享图标
+        });
+        jwx.onMenuShareAppMessage({
+          title: '疯狂赏金-192用户现金红包大派', // 分享标题
+          desc: '疯狂赏金-192用户现金红包大派',
+          link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+          imgUrl: 'http://h5.ali251.langye.net/storage/files/1686122729648030e9447aa.jpeg', // 分享图标
+          success: () => {
+            uni.showToast({
+              icon: 'none',
+              title: '分享成功'
+            })
+            this.getProducts()
+          },
+          cancel: () => {
+            uni.showToast({
+              icon: 'none',
+              title: '分享取消'
+            })
+          }
+        });
+        jwx.onMenuShareTimeline({
+          title: '疯狂赏金-192用户现金红包大派', // 分享标题
+          desc: '疯狂赏金-192用户现金红包大派',
+          link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+          imgUrl: 'http://h5.ali251.langye.net/storage/files/1686122729648030e9447aa.jpeg', // 分享图标
+          success: () => {
+            uni.showToast({
+              icon: 'none',
+              title: '分享成功'
+            })
+            this.getProducts()
+          },
+          cancel: () => {
+            uni.showToast({
+              icon: 'none',
+              title: '分享取消'
+            })
+          }
+        });
+      })
+    })
  },
  methods: {
    toMe() {
@ -226,6 +315,20 @@ export default {
        this.popoverType = 4
        this.$refs['popover'].show();
      }
+    },
+
+    taskClick(item) {
+      this.taskId = item.i
+      if(item.i === 1) {
+        this.toShare = true
+        return
+      }
+      if(item.i === 2) {
+        this.isShowQr = true
+      }
+      if(item.i === 3) {
+        this.isShowQr = true
+      }
    }
  },
  computed: {
@ -239,6 +342,17 @@ export default {
      }
    }
  },
+  watch: {
+    isShowQr(newVal) {
+      if(!newVal) {
+        this.$u.api.endTask({
+          task_id: this.taskId
+        }).then(res => {
+          this.getProducts()
+        })
+      }
+    }
+  },
  onShow() {
    this.getProducts()
  }
@ -380,7 +494,7 @@ export default {
            &::after {
              width: 80rpx;
              content: "开始抽奖";
-              font-size: 40rpx;
+              font-size: 38rpx;
              font-weight: normal;
              color: #D8372C;
              text-shadow: 0 2rpx 0 #FCF4CA;
@ -528,7 +642,36 @@ export default {
    height: 400rpx;
  }
 }
+.qrcode-pop_cover {
+  background: rgba(0, 0, 0, 0.8);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100vh;
+  width: 100vw;
+  z-index: 100001;
+
+  &_word {
+    color: #FFFFFF;
+    font-size: 48rpx;
+    width: 60%;
+    margin: 400rpx auto;
+    text-align: center;
+    line-height: 40px;
+  }

+  &_img {
+    background: #fff;
+    transform: translate(-50%,-50%);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 300rpx;
+    height: 300rpx;
+  }
+}

 .fade-in {
  animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;