342 lines
10 KiB
Vue
342 lines
10 KiB
Vue
<template>
|
|
<view>
|
|
<image src="https://aliyunoss.hn12301.net/learnlaw/gift_bj1_1.jpg" mode="widthFix"
|
|
style="width: 750rpx;position: absolute;top: 0rpx;"></image>
|
|
<image src="https://aliyunoss.hn12301.net/learnlaw/gift_dtcj1.png" @tap="goRegister"
|
|
style="width: 180rpx;position: absolute;top:1920rpx;left: 165rpx;" mode="widthFix"></image>
|
|
|
|
<view style="width: 630rpx;height: 200rpx;position: absolute;top: 635rpx;left: 60rpx;">
|
|
<view style="display: flex;align-items: center;width: 630rpx;justify-content: space-evenly;font-weight: bold;color:#503318;"><view class="tag"></view> {{ fiveStar ? '本轮答题赢好礼达成' : '本轮答题赢好礼未达成' }} <view class="tag1"></view></view>
|
|
<view style="display: flex;align-items: center;width: 630rpx;justify-content: space-evenly;">
|
|
<image :src="item<6 && fiveStar?'https://aliyunoss.hn12301.net/learnlaw/gift_yzg.png':'https://aliyunoss.hn12301.net/learnlaw/gift_mzg.png' " style="width: 120rpx;height: 120rpx;" v-for="item in 5" :key="item"></image>
|
|
</view>
|
|
|
|
<view style="width: 630rpx;display: flex;align-items: center;justify-content: center;margin-top: -10rpx;font-size: 24rpx;color: #503318;" @tap="goRegister">{{ subTitle }}</view>
|
|
</view>
|
|
<image src="https://aliyunoss.hn12301.net/learnlaw/gift_ftxx1.png" @tap="goStudy"
|
|
style="width: 180rpx;position: absolute;top:1920rpx;right:45rpx;" mode="widthFix"></image>
|
|
<view class="rules-btn" @tap="goRules">
|
|
<text class="rules-btn-text">活动规则</text>
|
|
</view>
|
|
|
|
<image src="https://aliyunoss.hn12301.net/learnlaw/gift_ckjpxq1.png" @tap="toPrize()"
|
|
style="width: 200rpx;position: absolute;top:1740rpx;right:275rpx;" mode="widthFix"></image>
|
|
<u-tabbar :list="tabbarList" :hideTabBar="true" activeColor="#E88300" inactiveColor="#606060" :borderTop="false"
|
|
height="120rpx" iconSize="48"></u-tabbar>
|
|
<view class="blocked-mask" v-if="blocked">
|
|
<text class="blocked-tip">{{ blockTip }}</text>
|
|
<text class="blocked-sub">本活动仅支持手机微信访问</text>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const APP_ID = 'wx71c218bd9ff0e2da'
|
|
const SCOPE = 'snsapi_base'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
fiveStar: false,
|
|
registered: false,
|
|
lvShow:false,
|
|
blocked: false,
|
|
blockTip: '',
|
|
tabbarList: [{
|
|
pagePath: "/pages/index/index",
|
|
iconPath: "/static/shouye.png",
|
|
selectedIconPath: "/static/shouye_select.png",
|
|
text: "首页"
|
|
},
|
|
{
|
|
pagePath: "/pages/records/records",
|
|
iconPath: "/static/zhongjiangjilu.png",
|
|
selectedIconPath: "/static/zhongjiangjilu_select.png",
|
|
text: "中奖记录"
|
|
},
|
|
{
|
|
pagePath: "/pages/profile/profile",
|
|
iconPath: "/static/wode.png",
|
|
selectedIconPath: "/static/wode_select.png",
|
|
text: "我的"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
subTitle() {
|
|
if (!this.registered) {
|
|
return '您未注册，点击参与挑战去注册'
|
|
}
|
|
return this.fiveStar ? '本轮您已进入抽奖池' : '本轮您未进入抽奖池，坚持答题参与抽奖'
|
|
}
|
|
},
|
|
onLoad() {
|
|
if (new Date().getTime() < new Date('2026/08/29 10:00:00')) {
|
|
this.lvShow = true
|
|
uni.redirectTo({
|
|
url:'/pages/jqqd/jqqd'
|
|
})
|
|
}
|
|
this.initLogin()
|
|
uni.$on('authorizationExpired', this.onAuthExpired)
|
|
},
|
|
onUnload() {
|
|
uni.$off('authorizationExpired', this.onAuthExpired)
|
|
},
|
|
onShow() {
|
|
if (this.blocked) return
|
|
const openId = uni.getStorageSync('openIdGift')
|
|
const isRegisteredGift = uni.getStorageSync('isRegisteredGift')
|
|
const userId = uni.getStorageSync('userIdGift')
|
|
const auth = uni.getStorageSync('authorizationGift')
|
|
this.registered = !!isRegisteredGift
|
|
if (openId && (!auth || !isRegisteredGift || !userId)) {
|
|
this.loginWithOpenId(openId)
|
|
} else if (isRegisteredGift && userId) {
|
|
this.fetchUserResult()
|
|
}
|
|
},
|
|
methods: {
|
|
fetchUserResult() {
|
|
const userId = uni.getStorageSync('userIdGift')
|
|
if (!userId) return
|
|
this.$u.api.getUserResult({ wenjuanId: 1003, userId }).then(res => {
|
|
if (res.code !== 0 || !res.Data) return
|
|
this.fiveStar = Number(res.Data.correct_question_num) === 5
|
|
}).catch(err => {
|
|
console.error('获取答题结果失败', err)
|
|
})
|
|
},
|
|
initLogin() {
|
|
if (!this.isWechatBrowser()) {
|
|
this.block('请在微信中打开')
|
|
return
|
|
}
|
|
if (this.isPcWechat()) {
|
|
this.block('请使用手机微信打开')
|
|
return
|
|
}
|
|
let openId = uni.getStorageSync('openIdGift')
|
|
if (openId) {
|
|
this.loginWithOpenId(openId)
|
|
return
|
|
}
|
|
const code = this.getCodeFromUrl()
|
|
if (code) {
|
|
this.exchangeOpenId(code)
|
|
} else {
|
|
this.wechatAuth()
|
|
}
|
|
},
|
|
block(tip) {
|
|
this.blocked = true
|
|
this.blockTip = tip
|
|
},
|
|
isWechatBrowser() {
|
|
return /MicroMessenger/i.test(navigator.userAgent)
|
|
},
|
|
isPcWechat() {
|
|
return /MicroMessenger/i.test(navigator.userAgent) && /WindowsWechat|MacWechat/i.test(navigator.userAgent)
|
|
},
|
|
getCodeFromUrl() {
|
|
const match = window.location.href.match(/[?&]code=([^&#]+)/)
|
|
return match ? match[1] : null
|
|
},
|
|
cleanUrlCode() {
|
|
const cleanUrl = window.location.href.replace(/[?&]code=[^&#]*(&|#|$)/, (m, p1) => p1 === '&' ? '?' : (
|
|
p1 === '#' ? '#' : ''))
|
|
window.history.replaceState({}, '', cleanUrl)
|
|
},
|
|
wechatAuth() {
|
|
const redirectUri = encodeURIComponent(window.location.href.split('?')[0].split('#')[0])
|
|
const url =
|
|
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APP_ID}&redirect_uri=${redirectUri}&response_type=code&scope=${SCOPE}&state=STATE#wechat_redirect`
|
|
window.location.href = url
|
|
},
|
|
exchangeOpenId(code) {
|
|
this.$u.api.getWxOpenId(code).then(res => {
|
|
if (res.code !== 0 || !res.Data || !res.Data.openid) return
|
|
const openId = res.Data.openid
|
|
uni.setStorageSync('openIdGift', openId)
|
|
this.cleanUrlCode()
|
|
return this.$u.api.wxOpenidLogin({ wenjuan_id: 1003, open_id: openId })
|
|
}).then(loginRes => {
|
|
if (loginRes && loginRes.code === 0 && loginRes.Data && loginRes.Data.user_name && loginRes.Data.user_phone) {
|
|
uni.setStorageSync('isRegisteredGift', true)
|
|
uni.setStorageSync('userIdGift', loginRes.Data.user_id || loginRes.Data.uesr_id)
|
|
uni.setStorageSync('userNameGift', loginRes.Data.user_name)
|
|
uni.setStorageSync('userPhoneGift', loginRes.Data.user_phone)
|
|
this.registered = true
|
|
this.fetchUserResult()
|
|
} else if (loginRes && !loginRes.Data) {
|
|
uni.setStorageSync('isRegisteredGift', false)
|
|
this.registered = false
|
|
}
|
|
}).catch(err => {
|
|
console.error('请求失败', err)
|
|
})
|
|
},
|
|
onAuthExpired() {
|
|
const openId = uni.getStorageSync('openIdGift')
|
|
if (openId) this.loginWithOpenId(openId)
|
|
},
|
|
loginWithOpenId(openId) {
|
|
if (this._loginPromise) return this._loginPromise
|
|
this._loginPromise = this.$u.api.wxOpenidLogin({ wenjuan_id: 1003, open_id: openId }).then(loginRes => {
|
|
if (!loginRes.Data) {
|
|
uni.setStorageSync('isRegisteredGift', false)
|
|
this.registered = false
|
|
return
|
|
}
|
|
if (loginRes.code === 0 && loginRes.Data?.user_name && loginRes.Data?.user_phone) {
|
|
uni.setStorageSync('isRegisteredGift', true)
|
|
uni.setStorageSync('userIdGift', loginRes.Data.user_id || loginRes.Data.uesr_id)
|
|
uni.setStorageSync('userNameGift', loginRes.Data.user_name)
|
|
uni.setStorageSync('userPhoneGift', loginRes.Data.user_phone)
|
|
this.registered = true
|
|
this.fetchUserResult()
|
|
}
|
|
}).catch(err => {
|
|
console.error('登录请求失败', err)
|
|
}).finally(() => {
|
|
this._loginPromise = null
|
|
})
|
|
return this._loginPromise
|
|
},
|
|
toPrize() {
|
|
uni.navigateTo({
|
|
url: '/pages/prize/prize'
|
|
})
|
|
},
|
|
goStudy() {
|
|
uni.navigateTo({ url: '/pages/study/preview' })
|
|
},
|
|
goRules() {
|
|
uni.navigateTo({ url: '/pages/rules/rules' })
|
|
},
|
|
goPrize() {
|
|
uni.navigateTo({ url: '/pages/prize/prize' })
|
|
},
|
|
goRegister() {
|
|
if (uni.getStorageSync('isRegisteredGift')) {
|
|
if (uni.getStorageSync('userIdGift') && uni.getStorageSync('userPhoneGift')) {
|
|
uni.navigateTo({ url: '/pages/answer/answer' })
|
|
return
|
|
}
|
|
uni.showLoading({ title: '加载中...' })
|
|
this.loginWithOpenId(uni.getStorageSync('openIdGift')).then(() => {
|
|
uni.hideLoading()
|
|
if (uni.getStorageSync('userIdGift')) {
|
|
uni.navigateTo({ url: '/pages/answer/answer' })
|
|
} else {
|
|
uni.showToast({ title: '用户信息获取失败，请重试', icon: 'none' })
|
|
}
|
|
})
|
|
return
|
|
}
|
|
uni.navigateTo({ url: '/pages/register/register' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #7CC6EB;
|
|
}
|
|
|
|
|
|
.page-body {
|
|
flex: 1;
|
|
}
|
|
|
|
.blocked-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
background-color: #7CC6EB;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.blocked-tip {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.blocked-sub {
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.tag {
|
|
width: 48rpx;
|
|
height: 6rpx;
|
|
border-radius: 3rpx;
|
|
background: rgba(80, 51, 24, 0.45);
|
|
}
|
|
|
|
.tag1 {
|
|
width: 48rpx;
|
|
height: 6rpx;
|
|
border-radius: 3rpx;
|
|
background: rgba(80, 51, 24, 0.45);
|
|
}
|
|
|
|
.rules-btn {
|
|
position: absolute;
|
|
top: 950rpx;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 60rpx;
|
|
padding: 0 26rpx;
|
|
background: linear-gradient(135deg, #FFC24D, #FF8A3D);
|
|
border-radius: 30rpx 0 0 30rpx;
|
|
box-shadow: 0 4rpx 14rpx rgba(255, 138, 61, 0.45);
|
|
}
|
|
|
|
.rules-btn:active {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.rules-btn-text {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
::v-deep .u-tabbar__content {
|
|
background: linear-gradient(to bottom, #FAFFC7, #B2FFC9) !important;
|
|
}
|
|
|
|
::v-deep .u-tabbar__content__item {
|
|
background: linear-gradient(to bottom, #FAFFC7, #B2FFC9) !important;
|
|
}
|
|
|
|
::v-deep .u-tabbar {
|
|
.u-border-top {
|
|
border-top: none !important;
|
|
}
|
|
}
|
|
|
|
::v-deep .u-icon__img {
|
|
object-fit: contain !important;
|
|
}
|
|
|
|
::v-deep .u-tabbar__content__item {
|
|
padding: 16rpx 0 !important;
|
|
}
|
|
</style>
|