游戏礼包

pages/welfare-community/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="bg101010">
+    <van-skeleton :row="4" :loading="isLoading" avatar-shape="square" />
+    <div v-for="item in list" :key="item.id" class="box-card">
+      <div class="fcs">
+        <img class="wh40 m15" :src="iconURL(item.gameFileKey)" alt="">
+        <span class="txt1">{{item.gameName.length > 10 ? item.gameName.slice(0, 10) + '...' : item.gameName}}</span>
+      </div>
+      <span class="txt2">你有{{item.gameGiftBagList.length}}个礼包待领取</span>
+      <div class="fncb mt6">
+        <div class="ml15 fnc">
+          <div v-for="(ele, index) in item.gameGiftBagList" :key="ele.id"><div v-if="index < 4" class="ibox"><img class="ibox" src="~/assets/image/activity/welfare-community/box.png" alt="" /></div></div>
+          <div v-if="item.gameGiftBagList.length > 4" class="ibox"><img class="ibox" src="~/assets/image/activity/welfare-community/icon_more@2x.png" alt="" /></div>
+        </div>
+        <div class="view-btn mr10" @click="view(item.id, item.gameName)">立即查看</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { fileKeyToUrl } from '@/plugins/file-center.js';
+export default {
+  auth: false,
+  data() {
+    return {
+      list: [],
+      isLoading: false
+    }
+  },
+  async fetch() {
+    if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
+      this.token = await window.native.getToken();
+    } else {
+      this.token = this.$route.query.token;
+    }
+    this.getAppGameGiftActivityList()
+  },
+  head: {
+    title: '福利社区',
+  },
+  computed: {
+    iconURL() {
+      return (key) => {
+        return fileKeyToUrl(key)
+      }
+    }
+  },
+  methods: {
+    view(id, gameName) {
+      this.$router.push({ path: '/welfare-community/list', query: { token: this.$route.query.token, id, user: this.$route.query.user, gameName } })
+    },
+    async getAppGameGiftActivityList() {
+      try {
+        this.isLoading = true;
+        const res = await this.$axios.$post('/activity/game/giftActivity/getAppGameGiftActivityList', {}, { headers: { Authorization: this.token } });
+        this.list = res.data;
+      } finally {
+        this.isLoading = false;
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.fcs {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.mr10 {
+  margin-right: 10px;
+}
+.view-btn {
+  width: 78px;
+  height: 28px;
+  background: #3B7FFF;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 28px;
+  text-align: center;
+}
+.mt6 {
+  margin-top: 6px;
+}
+.fncb {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.bg101010 {
+  background: #101010;
+  min-height: 100vh;
+  padding-top: 15px;
+}
+.box-card {
+  width: 345px;
+  height: 136px;
+  margin: 0 auto 15px;
+  background: url('~/assets/image/activity/welfare-community/bj@2x.png');
+  background-size: 100% 100%;
+  border-radius: 15px;
+  overflow: hidden;
+}
+.wh40 {
+  width: 40px;
+  height: 40px;
+}
+.m15 {
+  margin: 15px;
+}
+.fnc {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.txt1 {
+  font-size: 20px;
+  font-weight: 500;
+  color: #FFFFFF;
+  line-height: 28px;
+}
+.txt2 {
+  font-size: 14px;
+  color: #CFD1D4;
+  line-height: 20px;
+  margin-left: 15px;
+}
+.ibox {
+  width: 26px;
+  height: 26px;
+  background: rgba(216, 216, 216, 0.1);
+  border-radius: 3px;
+  margin-right: 6px;
+}
+.ibox img {
+  width: 100%;
+  height: 100%;
+}
+.ml15 {
+  margin-left: 15px;
+}
+</style>

pages/welfare-community/list.vue

@@ -0,0 +1,369 @@
+<template>
+  <div class="bg101010">
+    <van-skeleton :row="4" :loading="isLoading" avatar-shape="square" />
+    <div v-for="item in list" :key="item.id" class="m15">
+      <div style="display: flex;align-items: center;">
+        <div class="wh60">
+          <img class="wh56" :src="iconURL(item.giftBagFileKey)" alt="" />
+        </div>
+        <div class="ml12">
+          <div class="txt1">{{item.giftBagName.length > 8 ? item.giftBagName.slice(0, 8) + '...' : item.giftBagName}}</div>
+          <div class="txt2">{{item.giftBagDetailed}}</div>
+        </div>
+      </div>
+      <div :class="item.availableStatus === 1 ? 'gift-btn disabled' : 'gift-btn'" @click="receive(item)">{{['领取', '已领完', '查看'][item.availableStatus]}}</div>
+    </div>
+    <img class="w80h67" src="~/assets/image/activity/welfare-community/return.png" alt="" @click="returnUp">
+    <van-popup v-model="showVideoSuccess" style="background: transparent;color: #999;" closeable close-icon-position="top-right" :close-on-click-overlay="false">
+      <div class="w290h215 dialog-view">
+        <div class="txt3">恭喜您获得礼包</div>
+        <div class="txt4">请在游戏中兑换<br />激活码为：{{gameActivationCode}}。<span class="c3B86FF">复制</span></div>
+        <div class="buy-btn">购买云机</div>
+      </div>
+    </van-popup>
+    <van-popup v-model="showAd" style="background: transparent;color: #999;" :close-on-click-overlay="false">
+      <div v-for="(item, index) in adlist" :key="item.id">
+        <div v-if="index === 0" class="fwc">
+          <div v-if="time" class="countdown">{{time}}s后关闭广告</div>
+          <video ref="videoPlayer" class="w290h330" src="https://file.phone.androidscloud.com:8121/document/newFile/download/0//d1cb3a61add6434b8954?fileKey=LowLevelMultipartUpload_23670475553534361666" :controls="false" :autoplay="false" :muted="true" :loop="false" @ended="ended" />
+          <van-icon name="close" color="#999999" size="34" style="margin:15px auto 0;" @click="showAd=false;getAppGameGiftActivityDetailsList()" />
+        </div>
+      </div>
+    </van-popup>
+    <van-popup v-model="showBuy" style="background: transparent;color: #999;" closeable close-icon-position="top-right" :close-on-click-overlay="false">
+      <div class="w290h276 dialog-view">
+        <div class="txt3">平台内下1单，立得惊喜礼包</div>
+        <img class="w100h107" src="~/assets/image/activity/welfare-community/gift.png" alt="">
+        <div class="buy-btn" style="margin:15px auto 0;" @click="order">下单得惊喜礼包</div>
+      </div>
+    </van-popup>
+    <van-popup v-model="showBuySuccess" style="background: transparent;color: #999;" closeable close-icon-position="top-right" :close-on-click-overlay="false">
+      <div class="w290h233 dialog-view">
+        <div class="txt3">恭喜您获得礼包</div>
+        <div class="txt4">请在游戏中兑换<br />激活码为：{{gameActivationCode}}。<span class="c3B86FF">复制</span></div>
+        <div class="fsc mt20">
+          <div class="fcc">
+            <img class="wh40" src="~/assets/image/activity/welfare-community/icon_iphone@2x.png" alt="" />
+            <span class="txt5">进入云机</span>
+          </div>
+          <img class="w12h10 ml10 mt15" src="~/assets/image/activity/welfare-community/arrow@2x.png" alt="">
+          <div class="fcc">
+            <img class="wh40" src="~/assets/image/activity/welfare-community/icon_yingyongshichang@2x.png" alt="">
+            <span class="txt5">打开应用市场</span>
+          </div>
+          <img class="w12h10 mt15" src="~/assets/image/activity/welfare-community/arrow@2x.png" alt="">
+          <div class="fcc">
+            <img class="wh40" src="~/assets/image/activity/welfare-community/icon_xiazai@2x.png" alt="">
+            <span class="txt5">下载{{gameName}}游戏</span>
+          </div>
+        </div>
+      </div>
+    </van-popup>
+    <van-popup v-model="showLogin" style="background: transparent;color: #999;" closeable close-icon-position="top-right" :close-on-click-overlay="false" @click-close-icon="returnUp">
+      <div class="w290h215 dialog-view">
+        <div class="txt3">领取礼包，请先<br />绑定手机号</div>
+        <div class="buy-btn" style="margin:30px auto 0;">立即绑定</div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { Toast } from 'vant';
+import { fileKeyToUrl } from '@/plugins/file-center.js';
+export default {
+  auth: false,
+  data() {
+    return {
+      showVideoSuccess: false,
+      showAd: false,
+      showBuy: false,
+      showBuySuccess: false,
+      showLogin: false,
+      list: [],
+      isLoading: false,
+      id: '',
+      token: '',
+      giftBagId: '',
+      gameActivationCode: '',
+      adlist: [],
+      time: 30
+    }
+  },
+  fetch() {
+    this.token = this.$route.query.token;
+    this.id = this.$route.query.id;
+    this.user = this.$route.query.user;
+    this.gameName = this.$route.query.gameName;
+    this.getAppGameGiftActivityDetailsList();
+  },
+  head: {
+    title: '福利社区',
+  },
+  computed: {
+    iconURL() {
+      return (key) => {
+        return fileKeyToUrl(key)
+      }
+    }
+  },
+  methods: {
+    order() {
+      if (this.$userAgent.isSzx && this.$userAgent.isIos) {
+        window.webkit.messageHandlers.order.postMessage({});
+      }
+    },
+    ended() {
+      this.showAd = false
+      this.getAppGameGiftActivityDetailsList();
+    },
+    returnUp() {
+      this.$router.push({ path: '/welfare-community', query: { token: this.$route.query.token, user: this.user } })
+    },
+    async receive(item) {
+      if (item.availableStatus === 2) {
+        this.buySuccess(item);
+        return
+      }
+      if (item.availableStatus === 1) {
+        return
+      }
+      this.giftBagId = item.id;
+      if (this.$route.query.user === '1') {
+        if (item.taskType === 2) {
+          this.showBuy = true
+        }
+        if (item.taskType === 1) {
+          this.adlist = await this.$axios.$post('/publics/v5/advertising/getAdInfoByAdPlace', { id: 1, adPlace: 2008, os: 1 }, { headers: { Authorization: this.token } });
+          this.showAd = true
+          this.$nextTick(() => {
+            this.$refs.videoPlayer.play();
+            this.time = 30
+            const timer = setInterval(
+              () => --this.time <= 0 && clearInterval(timer),
+              1000);
+          })
+        }
+      } else {
+        if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
+          this.showLogin = true
+        }
+        if (this.$userAgent.isSzx && this.$userAgent.isIos) {
+          window.webkit.messageHandlers.showLogin.postMessage({});
+        }
+      }
+    },
+    async getAppGameGiftActivityDetailsList() {
+      try {
+        this.isLoading = true;
+        const res = await this.$axios.$get('/activity/game/giftActivity/getAppGameGiftActivityDetailsList?giftActivityId=' + this.id, { headers: { Authorization: this.token } });
+        this.list = res.data;
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    async buySuccess(item) {
+      this.showBuy = false;
+      try {
+        const res = await this.$axios.$get('/activity/game/giftActivity/receiveGameGift?giftBagId=' + item.id, { headers: { Authorization: this.token } });
+        this.gameActivationCode = res.data.gameActivationCode;
+        if (item.taskType === 1) {
+          this.showVideoSuccess = true;
+        }
+        if (item.taskType === 2) {
+          this.showBuySuccess = true;
+        }
+      } catch (err) {
+        Toast({
+          message: err.message,
+          duration: 3000
+        });
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.w80h67 {
+  width: 80px;
+  height: 67px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+.disabled {
+  background: #2B3C5C !important;
+  color: #999999 !important;
+}
+
+.wh40 {
+  width: 40px;
+  height: 40px;
+}
+.mt20 {
+  margin-top: 20px;
+}
+.fsc {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+.ml10 {
+  margin-left: 10px;
+}
+.w12h10 {
+  width: 12px;
+  height: 10px;
+}
+.txt5 {
+  font-size: 12px;
+  color: #666666;
+  margin-top: 3px;
+}
+.fcc {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.w100h107 {
+  width: 100px;
+  height: 107px;
+  display: block;
+  margin: 17px auto 0;
+}
+.w290h233 {
+  width: 290px;
+  height: 233px;
+}
+.w290h276 {
+  width: 290px;
+  height: 276px;
+}
+.dialog-view {
+  background: linear-gradient(360deg, #FFFFFF 0%, #DFEFFF 100%);
+  box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+}
+.countdown {
+  width: 92px;
+  height: 25px;
+  background: rgba(6, 6, 6, 0.5);
+  border-radius: 13px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 11px;
+  text-align: center;
+  line-height: 25px;
+  color: #cccccc;
+}
+.mt15 {
+  margin-top: 15px;
+}
+.fwc {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+.w290h330 {
+  width: 290px;
+  height: 330px;
+}
+.buy-btn {
+  width: 207px;
+  height: 40px;
+  background: linear-gradient(90deg, #38AEFC 0%, #3B7FFF 100%); 
+  border-radius: 20px;
+  line-height: 40px;
+  text-align: center;
+  font-weight: 500;
+  color: #ffffff;
+  font-size: 16px;
+  margin: 20px auto 0;
+}
+.c3B86FF {
+  color: #3b86ff;
+}
+.txt4 {
+  width: 290px;
+  font-size: 14px;
+  color: #666666;
+  line-height: 20px;
+  margin-top: 12px;
+  text-align: center;
+}
+.txt3 {
+  width: 290px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #363636;
+  line-height: 25px;
+  text-align: center;
+  margin-top: 47px;
+}
+.w290h215 {
+  width: 290px;
+  height: 215px;
+}
+.gift-btn {
+  width: 78px;
+  height: 28px;
+  background: #3B7FFF;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 28px;
+  text-align: center;
+  justify-self: end;
+}
+.ml12 {
+  margin-left: 12px;
+}
+.txt2 {
+  font-size: 14px;
+  color: #CFD1D4;
+  line-height: 20px;
+  margin-top: 5px;
+}
+.txt1 {
+  font-size: 18px;
+  font-weight: 500;
+  color: #CFD1D4;
+  line-height: 25px;
+}
+.wh60 {
+  width: 60px;
+  height: 60px;
+  border: 1px solid #eaeaea;
+  border-radius: 50%;
+  padding: 2px;
+  box-sizing: border-box;
+}
+.wh56 {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+}
+.bg101010 {
+  background: #101010;
+  min-height: 100vh;
+  overflow: hidden;
+}
+.m15 {
+  margin: 15px;
+  height: 83px;
+  background: #1E2022;
+  box-shadow: 0px 3px 7px 0px #1E2022;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 15px 12px;
+  box-sizing: border-box;
+}
+</style>