活动页面的弹窗

src/pages/activity/components/overlay.vue

@@ -0,0 +1,291 @@
+<template>
+  <wd-popup :show="true" @tap="cancle">
+    <view class="flex_items flex_center" style="width: 100%; height: 100vh">
+      <view
+        v-if="istype == 'guize'"
+        class="gz plr50 f26 pos"
+        @tap.stop="gonone"
+        style="width: 707rpx; height: 1080rpx; color: #8e4d41; line-height: 45rpx"
+      >
+        <view style="width: 100%; height: 946rpx" class="gznei f26">
+          <view class="bold f-center mt20 f32">2024年成都工行消费达标礼活动细则</view>
+          <view class="mt40 bold">一、活动时间：</view>
+          <view class="mt20 ss" style="">达标统计时间：2024年6月1日至2024年12月 31日</view>
+          <view class="ss">
+            达标领券时间：2024年7月1日至2025年3月31日（
+            按月开展，每月15日将上新3000份立减金，本月未被领取的立减金将累计至下个月供达标客户领取。
+            符合活动条件的客户，领取机会最晚保留至2025年 3月31日23:59:59）
+          </view>
+          <view class="mt20 bold">二、活动对象：</view>
+          <view class="mt20 ss">成都工商银行消费达标客户</view>
+          <view class="mt20 bold">三、活动内容：</view>
+          <view class="mt20 ss">
+            活动期间，成都工商银行消费达标客户，有机会获得1次领取机会。每位客户领取立减金金额从15元至
+            500元不等。活动名额有限，先领先得。
+          </view>
+        </view>
+
+        <view style="width: 100%; height: 40rpx"></view>
+        <view
+          @click="cancle"
+          class="flex_items flex_center abs"
+          style="width: 100%; bottom: -70rpx; left: 0"
+        >
+          <image class="" :src="close" style="width: 45rpx; height: 45rpx" mode=""></image>
+        </view>
+      </view>
+      <view v-if="istype == 'iszj'" class="iszj flex_column flex_items" @tap.stop="gonone">
+        <view class="flex_column flex_items" style="width: 100%">
+          <image
+            :src="hdl"
+            style="width: 208rpx; height: 246rpx; margin-top: 66rpx"
+            mode=""
+          ></image>
+          <view class="bold f28 mt10" style="color: #fa483d">
+            {{ title }}
+          </view>
+          <view class="mt10 f26" style="color: #fa483d">请到【我的奖品】中查看并兑换</view>
+        </view>
+        <view class="flex_between flex_items" style="margin-top: 100rpx; width: calc(100% - 80rpx)">
+          <view
+            @click="cancle"
+            class="f-center f30 bold"
+            style="
+              width: 194rpx;
+              height: 65rpx;
+              border-radius: 48rpx;
+              line-height: 65rpx;
+              border: 1px solid #fff2a3;
+              color: #fff2a3;
+              letter-spacing: 5rpx;
+            "
+          >
+            继续领取
+          </view>
+          <image :src="godui" style="width: 194rpx; height: 69rpx" @click="qudui" mode=""></image>
+        </view>
+      </view>
+      <view
+        v-if="istype == 'out'"
+        class="flex_column flex_items bgwhite plr20 ptb40"
+        @tap.stop="gonone"
+        style="border-radius: 48rpx; width: 500rpx"
+      >
+        <view class="f34 bold">退出登录</view>
+        <view class="mt20 f30" style="color: #666666">您是否确认退出登录</view>
+        <view class="f30 mt10" style="color: #666">退出后我们会继续保留您的账号数据</view>
+        <view class="mt60 flex_between flex_items" style="width: calc(100% - 50rpx)">
+          <view
+            @click="goout"
+            class="f-center f32"
+            style="
+              width: 200rpx;
+              height: 68rpx;
+              border: 1px solid #666;
+              border-radius: 48rpx;
+              line-height: 68rpx;
+            "
+          >
+            退出
+          </view>
+          <image @click="cancle" :src="qx" style="width: 200rpx; height: 72rpx" mode=""></image>
+        </view>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<script>
+import { debounce } from '@/utils/index'
+import can from '@/static/images/activity/can.png'
+import close from '@/static/images/activity/close.png'
+import okbtn from '@/static/images/activity/okbtn.png'
+import hdl from '@/static/images/activity/hdl.png'
+import godui from '@/static/images/activity/godui.png'
+export default {
+  data() {
+    return {
+      show: true,
+      codemsg: '获取验证码',
+      codesecond: 60,
+      qx: can,
+      form: {
+        phone: '',
+        code: '',
+        activity_id: 1,
+      },
+      close,
+      okbtn,
+      hdl,
+      godui,
+      iscut: 0,
+    }
+  },
+  props: ['istype', 'isshow', 'title', 'link'],
+  mounted() {
+    // eslint-disable-next-line no-debugger
+    debugger
+    this.show = this.isshow
+  },
+  methods: {
+    gook() {
+      console.log(1212)
+    },
+    cancle(types) {
+      const tt = {
+        types: '',
+        show: false,
+      }
+      // eslint-disable-next-line eqeqeq
+      if (this.istype == 'login') {
+        return false
+      }
+      if (types) {
+        tt.types = types
+      }
+      this.show = false
+      this.$emit('backshow', tt)
+    },
+    getcode: debounce(function () {
+      // eslint-disable-next-line eqeqeq
+      if (this.form.phone == '') {
+        uni.showToast({
+          title: '手机号不能为空',
+          icon: 'none',
+        })
+        return false
+      }
+      // eslint-disable-next-line eqeqeq
+      if (this.iscut == 1) {
+        return false
+      }
+      // this.getphonecode()
+    }, 1000),
+    getphonecode() {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const that = this
+      uni.showLoading({
+        title: '发送中...',
+      })
+      that.api
+        .getcodes({
+          phone: that.form.phone,
+        })
+        .then((res) => {
+          console.log(res)
+          // eslint-disable-next-line eqeqeq
+          if (res.data.code == '200') {
+            this.iscut = 1
+            uni.showToast({
+              title: '发送成功',
+              icon: 'success',
+              duration: 800,
+            })
+            setTimeout(function () {
+              // eslint-disable-next-line eqeqeq
+              if (that.codemsg == '获取验证码') {
+                // that.getphonecode()
+                that.codesecond = 60
+                that.codemsg = that.codesecond + 's'
+                that.int = setInterval(() => {
+                  that.codesecond -= 1
+                  that.codemsg = that.codesecond + 's'
+                  // eslint-disable-next-line eqeqeq
+                  if (that.codesecond == 0) {
+                    clearInterval(that.int)
+                    that.codemsg = '重新发送'
+                  }
+                }, 1000)
+              }
+            }, 800)
+          } else {
+            uni.showToast({
+              title: res.data.message,
+              icon: 'none',
+            })
+            this.reset()
+            this.show = false
+          }
+        })
+    },
+    qudui() {
+      window.open(this.link, '_blank')
+    },
+    gologin() {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const that = this
+      uni.showLoading({
+        title: '登录中...',
+      })
+      that.api.loglin(that.form).then((res) => {
+        // eslint-disable-next-line eqeqeq
+        if (res.data.code == '200') {
+          getApp().globalData.token = res.data.data.token
+          uni.setStorageSync('token', res.data.data.token)
+          uni.showToast({
+            title: '登录成功',
+            icon: 'success',
+            duration: 800,
+          })
+          setTimeout(function () {
+            that.$emit('backshow', {
+              types: 'loginok',
+              show: false,
+            })
+          }, 800)
+        } else {
+          uni.showToast({
+            title: res.data.message,
+            icon: 'none',
+          })
+        }
+      })
+    },
+    goout() {
+      uni.showLoading({
+        title: '退出中...',
+      })
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const that = this
+      setTimeout(function () {
+        uni.showToast({
+          title: '退出成功',
+          icon: 'success',
+          duration: 800,
+        })
+        setTimeout(function () {
+          uni.removeStorageSync('token')
+          uni.reLaunch({
+            url: '/pages/index/index',
+          })
+        }, 800)
+      }, 800)
+    },
+    gonone() {},
+  },
+}
+</script>
+
+<style>
+.gz {
+  background-image: url('@/static/images/activity/rule_popp.png') !important;
+  background-size: 100% 100%;
+}
+
+.gznei {
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin-top: 80rpx;
+}
+
+.iszj {
+  background-image: url('@/static/images/activity/gxhd.png') !important;
+  background-size: 100% 100%;
+  height: 630rpx;
+  width: 501rpx;
+}
+
+.ss {
+  text-indent: 2em;
+}
+</style>

src/pages/activity/index.vue

@@ -153,10 +153,19 @@
         </view>
       </view>
     </view>
+    <Overlay
+      v-if="isshow"
+      :istype="istype"
+      :isshow="isshow"
+      :title="zjtitle"
+      :link="link"
+      @backshow="backshow"
+    />
   </view>
 </template>
 
 <script lang="ts" setup>
+import Overlay from './components/overlay.vue'
 import Api from '@/service/activity/index'
 import { debounce } from '@/utils/index'
 import { useUserStore } from '@/store'
@@ -189,7 +198,10 @@ const receive_num = ref<number>(null)
 // eslint-disable-next-line camelcase
 const lottery_code = ref<string>('')
 const prizes = reactive([])
+const query = reactive<any>({})
 const link = ref<string>('')
+const isshow = ref<boolean>(true)
+const istype = ref<string>('')
 const imgs = [
   {
     src: imgCard,
@@ -218,8 +230,35 @@ const zjtitle = ref<string>('')
 const cardStateArray = reactive([])
 const useStore = useUserStore()
 
+const getUrlParm = () => {
+  const url = window.location.href
+  const theRequest = {}
+  if (url.indexOf('?') !== -1) {
+    const index = url.indexOf('?')
+    const str = url.slice(index + 1)
+    const strs = str.split('&')
+    for (let i = 0; i < strs.length; i++) {
+      theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1]
+    }
+  }
+  return theRequest
+}
+
+function backshow(e) {
+  isshow.value = false
+  // eslint-disable-next-line eqeqeq
+  if (e.types == 'loginok') {
+    getData()
+  }
+  // eslint-disable-next-line eqeqeq
+  if (e.types == 'go') {
+    createState()
+  }
+}
+
 onLoad(async () => {
   // activity_id 方式
+  Object.assign(query, getUrlParm())
   // if (useStore.userInfo.token) {
   getData()
   // }
@@ -252,8 +291,8 @@ const flip = debounce(function (index) {
         item.state = true
       })
       setTimeout(function () {
-        // istype = 'iszj'
-        // isshow = true
+        istype.value = 'iszj'
+        isshow.value = true
       }, 800)
       getAccountInfo()
     } else {
@@ -266,7 +305,7 @@ const flip = debounce(function (index) {
 }, 300)
 function getAccountInfo() {
   const params = {
-    activity_id: 3,
+    activity_code: query.activity_code,
   }
   Api.getCode(params).then((res: any) => {
     if (res.code === 200) {
@@ -305,7 +344,7 @@ function getData(aa?: any) {
   //   })
   // }
   const params = {
-    activity_id: 3,
+    activity_code: query.activity_code,
   }
   Api.getCode(params).then((res: any) => {
     if (res.code === 200) {
@@ -327,11 +366,11 @@ const shuffleArray = (array) => {
 }
 function gethome() {
   Api.getProducts({
-    id: 3,
+    activity_code: query.activity_code,
   }).then((res: any) => {
     if (res.code === 200) {
       // eslint-disable-next-line camelcase
-      process_rate.value = Math.round((res.data.winning_times / res.data.inventory) * 100)
+      process_rate.value = Math.round((res.data.winning_times / (res.data.inventory || 1)) * 100)
       if (cardStateArray.length > 0) {
         cardStateArray.forEach((item, index) => {
           item.state = false

src/pages/index/index.vue

@@ -1,5 +1,5 @@
 <!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
-<route lang="json5" type="page">
+<route lang="json5" type="home">
 {
   style: {
     navigationStyle: 'custom',
@@ -36,6 +36,7 @@ import PLATFORM from '@/utils/platform'
 import { getContent } from '@/service/index/foo'
 import { getUrlObj } from '@/utils/index'
 import activity from '@/service/activity'
+import { useUserStore } from '@/store'
 
 defineOptions({
   name: 'Home',
@@ -44,6 +45,8 @@ defineOptions({
 // 获取屏幕边界到安全区域距离
 const { safeAreaInsets } = uni.getSystemInfoSync()
 const contentData = reactive<any>({})
+const query = ref<string>('')
+const useStore = useUserStore()
 
 interface SrcListType {
   url?: string
@@ -71,24 +74,40 @@ const getUrlParm = () => {
   }
   return theRequest
 }
+
+const getUrlPathName = () => {
+  const url = window.location.pathname
+  const str = url.split('/')
+  return str[1] || ''
+}
+
 window.parent.addEventListener('message', function (event) {
+  let srcData = {}
   if (event.data.data.type === 'login') {
-    Object.assign(srcList, {
-      url: contentData.content_templates.source,
+    srcData = {
+      url: contentData.content_templates.source + `?activity_code=${query.value}`,
       title: contentData.content_templates.moduledesc,
-    })
+    }
   } else if (event.data.data.type === 'coupon') {
-    Object.assign(srcList, {
+    srcData = {
       url: contentData.user_content_templates.source,
       title: contentData.user_content_templates.moduledesc,
-    })
+    }
   }
+  nextTick(() => {
+    Object.assign(srcList, srcData)
+    uni.setNavigationBarTitle({
+      title: srcList.title,
+    })
+    useStore.setUserInfo({ srcList, contentData })
+  })
 })
-onLoad(async () => {
-  // activity_id 方式
-  const query = getUrlParm()
+
+const initContent = async () => {
+  query.value = getUrlPathName()
+  console.log(query.value, 'zgp')
   const params = {
-    activity_id: 87,
+    activity_code: query.value || 87,
   }
   const res: any = await getContent(params)
   Object.assign(contentData, res.data)
@@ -106,6 +125,20 @@ onLoad(async () => {
       icon: 'none',
     })
   }
+  useStore.setUserInfo({ srcList, contentData })
+}
+
+onLoad(() => {
+  // activity_id 方式
+  if (!useStore.userInfo.srcList.url) {
+    initContent()
+  } else {
+    Object.assign(srcList, useStore.userInfo.srcList)
+    Object.assign(contentData, useStore.userInfo.contentData)
+    uni.setNavigationBarTitle({
+      title: srcList.title,
+    })
+  }
 })
 </script>
 

src/store/user.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
-const initState = { nickname: '', avatar: '', token: '' }
+const initState = { nickname: '', avatar: '', token: '', srcList: { url: '' }, contentData: {} }
 
 export const useUserStore = defineStore(
   'user',

src/typings.ts

@@ -15,12 +15,19 @@ type IUniUploadFileOptions = {
   formData?: any
 }
 
+interface SrcListType {
+  url?: string
+  title?: string
+}
+
 type IUserInfo = {
   nickname?: string
   avatar?: string
   /** 微信的 openid，非微信没有这个字段 */
   openid?: string
   token?: string
+  srcList?: SrcListType
+  contentData?: object
 }
 
 enum TestEnum {