活动页面的弹窗

This commit is contained in:
lf 2024-06-11 18:40:33 +08:00
parent 9b7c4e1630
commit ca2a7286db
12 changed files with 387 additions and 17 deletions

View File

@ -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>

View File

@ -153,10 +153,19 @@
</view> </view>
</view> </view>
</view> </view>
<Overlay
v-if="isshow"
:istype="istype"
:isshow="isshow"
:title="zjtitle"
:link="link"
@backshow="backshow"
/>
</view> </view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Overlay from './components/overlay.vue'
import Api from '@/service/activity/index' import Api from '@/service/activity/index'
import { debounce } from '@/utils/index' import { debounce } from '@/utils/index'
import { useUserStore } from '@/store' import { useUserStore } from '@/store'
@ -189,7 +198,10 @@ const receive_num = ref<number>(null)
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
const lottery_code = ref<string>('') const lottery_code = ref<string>('')
const prizes = reactive([]) const prizes = reactive([])
const query = reactive<any>({})
const link = ref<string>('') const link = ref<string>('')
const isshow = ref<boolean>(true)
const istype = ref<string>('')
const imgs = [ const imgs = [
{ {
src: imgCard, src: imgCard,
@ -218,8 +230,35 @@ const zjtitle = ref<string>('')
const cardStateArray = reactive([]) const cardStateArray = reactive([])
const useStore = useUserStore() 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 () => { onLoad(async () => {
// activity_id // activity_id
Object.assign(query, getUrlParm())
// if (useStore.userInfo.token) { // if (useStore.userInfo.token) {
getData() getData()
// } // }
@ -252,8 +291,8 @@ const flip = debounce(function (index) {
item.state = true item.state = true
}) })
setTimeout(function () { setTimeout(function () {
// istype = 'iszj' istype.value = 'iszj'
// isshow = true isshow.value = true
}, 800) }, 800)
getAccountInfo() getAccountInfo()
} else { } else {
@ -266,7 +305,7 @@ const flip = debounce(function (index) {
}, 300) }, 300)
function getAccountInfo() { function getAccountInfo() {
const params = { const params = {
activity_id: 3, activity_code: query.activity_code,
} }
Api.getCode(params).then((res: any) => { Api.getCode(params).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
@ -305,7 +344,7 @@ function getData(aa?: any) {
// }) // })
// } // }
const params = { const params = {
activity_id: 3, activity_code: query.activity_code,
} }
Api.getCode(params).then((res: any) => { Api.getCode(params).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
@ -327,11 +366,11 @@ const shuffleArray = (array) => {
} }
function gethome() { function gethome() {
Api.getProducts({ Api.getProducts({
id: 3, activity_code: query.activity_code,
}).then((res: any) => { }).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
// eslint-disable-next-line camelcase // 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) { if (cardStateArray.length > 0) {
cardStateArray.forEach((item, index) => { cardStateArray.forEach((item, index) => {
item.state = false item.state = false

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

View File

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

View File

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