wangfukang
3 months ago
12 changed files with 1028 additions and 126 deletions
@ -0,0 +1,128 @@ |
|||||
|
<template> |
||||
|
<view |
||||
|
v-if="visible" |
||||
|
class="common-loading" |
||||
|
:class="{'common-loading--mask': mask}" |
||||
|
@touchmove.stop.prevent="noop" |
||||
|
@tap.stop="noop" |
||||
|
> |
||||
|
<view class="common-loading__box"> |
||||
|
<view class="common-loading__halo"></view> |
||||
|
<image class="common-loading__gif" src="/static/images/img/loading.gif" mode="aspectFit"></image> |
||||
|
<view v-if="title" class="common-loading__text">{{ title }}</view> |
||||
|
<view class="common-loading__hint">请稍候，正在为你处理</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { LOADING_HIDE_EVENT, LOADING_SHOW_EVENT, getLoadingState } from '@/utils/loading.js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'CommonLoading', |
||||
|
data() { |
||||
|
return { |
||||
|
visible: false, |
||||
|
title: '加载中...', |
||||
|
mask: true |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
const state = getLoadingState() |
||||
|
this.visible = state.visible |
||||
|
this.title = state.title |
||||
|
this.mask = state.mask |
||||
|
uni.$on(LOADING_SHOW_EVENT, this.show) |
||||
|
uni.$on(LOADING_HIDE_EVENT, this.hide) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
uni.$off(LOADING_SHOW_EVENT, this.show) |
||||
|
uni.$off(LOADING_HIDE_EVENT, this.hide) |
||||
|
}, |
||||
|
methods: { |
||||
|
show(options = {}) { |
||||
|
this.visible = true |
||||
|
this.title = options.title || '加载中...' |
||||
|
this.mask = options.mask !== false |
||||
|
}, |
||||
|
hide() { |
||||
|
this.visible = false |
||||
|
}, |
||||
|
noop() {} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.common-loading { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
z-index: 99999; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
pointer-events: none; |
||||
|
background: rgba(13, 18, 34, 0.46); |
||||
|
backdrop-filter: blur(16rpx); |
||||
|
} |
||||
|
|
||||
|
.common-loading--mask { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
|
||||
|
.common-loading__box { |
||||
|
position: relative; |
||||
|
min-width: 280rpx; |
||||
|
min-height: 242rpx; |
||||
|
overflow: hidden; |
||||
|
padding: 44rpx 44rpx 36rpx; |
||||
|
border-radius: 40rpx; |
||||
|
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,255,.96)); |
||||
|
border: 1rpx solid rgba(255,255,255,.86); |
||||
|
box-shadow: 0 28rpx 82rpx rgba(28, 35, 74, 0.28); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.common-loading__halo { |
||||
|
position: absolute; |
||||
|
top: -82rpx; |
||||
|
right: -74rpx; |
||||
|
width: 220rpx; |
||||
|
height: 220rpx; |
||||
|
border-radius: 50%; |
||||
|
background: rgba(169, 255, 231, .72); |
||||
|
} |
||||
|
|
||||
|
.common-loading__gif { |
||||
|
position: relative; |
||||
|
width: 92rpx; |
||||
|
height: 92rpx; |
||||
|
} |
||||
|
|
||||
|
.common-loading__text { |
||||
|
position: relative; |
||||
|
margin-top: 18rpx; |
||||
|
max-width: 380rpx; |
||||
|
font-size: 28rpx; |
||||
|
line-height: 40rpx; |
||||
|
color: #11162a; |
||||
|
font-weight: 900; |
||||
|
white-space: pre-line; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.common-loading__hint { |
||||
|
position: relative; |
||||
|
margin-top: 10rpx; |
||||
|
color: rgba(17, 22, 42, .48); |
||||
|
font-size: 22rpx; |
||||
|
line-height: 32rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,211 @@ |
|||||
|
<template> |
||||
|
<view v-if="visible" class="auth-mask" @touchmove.stop.prevent="noop" @tap.stop="cancel"> |
||||
|
<view class="auth-card" @tap.stop> |
||||
|
<view class="auth-glow auth-glow-a"></view> |
||||
|
<view class="auth-glow auth-glow-b"></view> |
||||
|
<view class="auth-badge">{{ badge }}</view> |
||||
|
<view class="auth-title">{{ title }}</view> |
||||
|
<view class="auth-content">{{ content }}</view> |
||||
|
<view class="auth-steps" v-if="steps && steps.length"> |
||||
|
<view class="auth-step" v-for="(step, index) in steps" :key="step"> |
||||
|
<view class="step-dot">{{ index + 1 }}</view> |
||||
|
<view>{{ step }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="auth-actions"> |
||||
|
<view class="auth-btn ghost" @tap="cancel">{{ cancelText }}</view> |
||||
|
<view class="auth-btn primary" @tap="confirm">{{ confirmText }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'IeAuthDialog', |
||||
|
data() { |
||||
|
return { |
||||
|
visible: false, |
||||
|
badge: 'i/e 安全认证', |
||||
|
title: '', |
||||
|
content: '', |
||||
|
confirmText: '继续', |
||||
|
cancelText: '暂不继续', |
||||
|
steps: [], |
||||
|
resolver: null |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
uni.$on('ie-auth-dialog:show', this.show) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
uni.$off('ie-auth-dialog:show', this.show) |
||||
|
}, |
||||
|
methods: { |
||||
|
show(options = {}) { |
||||
|
if (typeof options.handled === 'function') { |
||||
|
options.handled() |
||||
|
} |
||||
|
this.badge = options.badge || 'i/e 安全认证' |
||||
|
this.title = options.title || '进阶实名认证' |
||||
|
this.content = options.content || '' |
||||
|
this.confirmText = options.confirmText || '继续' |
||||
|
this.cancelText = options.cancelText || '暂不继续' |
||||
|
this.steps = options.steps || [] |
||||
|
this.resolver = options.resolve || null |
||||
|
this.visible = true |
||||
|
}, |
||||
|
confirm() { |
||||
|
this.close(true) |
||||
|
}, |
||||
|
cancel() { |
||||
|
this.close(false) |
||||
|
}, |
||||
|
close(value) { |
||||
|
this.visible = false |
||||
|
if (this.resolver) { |
||||
|
this.resolver(value) |
||||
|
} |
||||
|
this.resolver = null |
||||
|
}, |
||||
|
noop() {} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.auth-mask { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
z-index: 99998; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 48rpx; |
||||
|
background: rgba(13, 18, 34, 0.48); |
||||
|
backdrop-filter: blur(18rpx); |
||||
|
} |
||||
|
|
||||
|
.auth-card { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
padding: 46rpx 38rpx 34rpx; |
||||
|
border-radius: 46rpx; |
||||
|
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,255,.96)); |
||||
|
border: 1rpx solid rgba(255,255,255,.88); |
||||
|
box-shadow: 0 34rpx 90rpx rgba(28, 35, 74, .28); |
||||
|
} |
||||
|
|
||||
|
.auth-glow { |
||||
|
position: absolute; |
||||
|
border-radius: 999rpx; |
||||
|
filter: blur(4rpx); |
||||
|
opacity: .72; |
||||
|
} |
||||
|
|
||||
|
.auth-glow-a { |
||||
|
right: -80rpx; |
||||
|
top: -90rpx; |
||||
|
width: 230rpx; |
||||
|
height: 230rpx; |
||||
|
background: rgba(169,255,231,.78); |
||||
|
} |
||||
|
|
||||
|
.auth-glow-b { |
||||
|
left: -70rpx; |
||||
|
bottom: 120rpx; |
||||
|
width: 190rpx; |
||||
|
height: 190rpx; |
||||
|
background: rgba(255,126,179,.22); |
||||
|
} |
||||
|
|
||||
|
.auth-badge { |
||||
|
position: relative; |
||||
|
display: inline-flex; |
||||
|
padding: 10rpx 18rpx; |
||||
|
border-radius: 999rpx; |
||||
|
color: #6c55d8; |
||||
|
background: rgba(122,77,255,.09); |
||||
|
font-size: 22rpx; |
||||
|
font-weight: 800; |
||||
|
} |
||||
|
|
||||
|
.auth-title { |
||||
|
position: relative; |
||||
|
margin-top: 22rpx; |
||||
|
color: #11162a; |
||||
|
font-size: 42rpx; |
||||
|
line-height: 54rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.auth-content { |
||||
|
position: relative; |
||||
|
margin-top: 16rpx; |
||||
|
color: rgba(17,22,42,.62); |
||||
|
font-size: 26rpx; |
||||
|
line-height: 42rpx; |
||||
|
} |
||||
|
|
||||
|
.auth-steps { |
||||
|
position: relative; |
||||
|
margin-top: 26rpx; |
||||
|
padding: 22rpx; |
||||
|
border-radius: 28rpx; |
||||
|
background: rgba(241,247,255,.82); |
||||
|
} |
||||
|
|
||||
|
.auth-step { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 16rpx; |
||||
|
min-height: 48rpx; |
||||
|
color: rgba(17,22,42,.72); |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
|
||||
|
.step-dot { |
||||
|
width: 34rpx; |
||||
|
height: 34rpx; |
||||
|
line-height: 34rpx; |
||||
|
text-align: center; |
||||
|
border-radius: 50%; |
||||
|
color: #11162a; |
||||
|
background: #a9ffe7; |
||||
|
font-size: 20rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.auth-actions { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
gap: 18rpx; |
||||
|
margin-top: 34rpx; |
||||
|
} |
||||
|
|
||||
|
.auth-btn { |
||||
|
flex: 1; |
||||
|
height: 84rpx; |
||||
|
line-height: 84rpx; |
||||
|
text-align: center; |
||||
|
border-radius: 999rpx; |
||||
|
font-size: 27rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.auth-btn.ghost { |
||||
|
color: rgba(17,22,42,.56); |
||||
|
background: rgba(17,22,42,.06); |
||||
|
} |
||||
|
|
||||
|
.auth-btn.primary { |
||||
|
color: #11162a; |
||||
|
background: linear-gradient(135deg, #a9ffe7, #ffcf7b); |
||||
|
box-shadow: 0 16rpx 32rpx rgba(76, 209, 184, .22); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,155 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view class="safe-tip" v-if="showTip">请勿发送涉黄、涉暴、反动、侮辱等内容，违规会被封禁</view> |
||||
|
<view class="bottom-actions"> |
||||
|
<view class="bottom-item" :class="{ active: active === 'index' }" @tap="goTab('index')"> |
||||
|
<text class="tab-icon">🪐</text> |
||||
|
<text>此刻</text> |
||||
|
</view> |
||||
|
<view class="bottom-item message-tab" :class="{ active: active === 'messages' }" @tap="goTab('messages')"> |
||||
|
<text class="tab-icon">💬</text> |
||||
|
<text>消息</text> |
||||
|
<text class="unread-badge" v-if="displayUnreadCount > 0">{{ unreadText }}</text> |
||||
|
</view> |
||||
|
<view class="bottom-item" :class="{ active: active === 'universe' }" @tap="goTab('universe')"> |
||||
|
<text class="tab-icon">🌙</text> |
||||
|
<text>我的</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
const TAB_PATHS = { |
||||
|
index: '/package1/ieBrowser/index', |
||||
|
messages: '/package1/ieBrowser/messages', |
||||
|
universe: '/package1/ieBrowser/universe' |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
name: 'IeBottomTab', |
||||
|
props: { |
||||
|
active: { |
||||
|
type: String, |
||||
|
default: 'index' |
||||
|
}, |
||||
|
unreadCount: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
showTip: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
displayUnreadCount() { |
||||
|
return Number(this.unreadCount) || 0 |
||||
|
}, |
||||
|
unreadText() { |
||||
|
return this.displayUnreadCount > 99 ? '99+' : String(this.displayUnreadCount) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
goTab(tab) { |
||||
|
if (tab === this.active) return |
||||
|
const path = TAB_PATHS[tab] |
||||
|
if (!path) return |
||||
|
uni.redirectTo({ |
||||
|
url: path + '?unreadCount=' + encodeURIComponent(String(this.displayUnreadCount)) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.safe-tip { |
||||
|
position: fixed; |
||||
|
left: 36rpx; |
||||
|
right: 36rpx; |
||||
|
bottom: 142rpx; |
||||
|
z-index: 10; |
||||
|
padding: 12rpx 18rpx; |
||||
|
border-radius: 22rpx; |
||||
|
text-align: center; |
||||
|
color: rgba(22, 27, 46, .5); |
||||
|
background: rgba(255, 255, 255, .74); |
||||
|
border: 1rpx solid rgba(255, 255, 255, .9); |
||||
|
backdrop-filter: blur(18rpx); |
||||
|
box-shadow: 0 14rpx 38rpx rgba(96, 112, 160, .1); |
||||
|
font-size: 20rpx; |
||||
|
line-height: 28rpx; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
|
||||
|
.bottom-actions { |
||||
|
position: fixed; |
||||
|
left: 30rpx; |
||||
|
right: 30rpx; |
||||
|
bottom: 30rpx; |
||||
|
z-index: 10; |
||||
|
display: flex; |
||||
|
padding: 12rpx; |
||||
|
border: 1rpx solid rgba(255, 255, 255, .92); |
||||
|
border-radius: 999rpx; |
||||
|
overflow: hidden; |
||||
|
background: rgba(255, 255, 255, .92); |
||||
|
backdrop-filter: blur(24rpx); |
||||
|
box-shadow: 0 24rpx 80rpx rgba(96, 112, 160, .18); |
||||
|
} |
||||
|
|
||||
|
.bottom-item { |
||||
|
position: relative; |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 80rpx; |
||||
|
border-radius: 999rpx; |
||||
|
color: rgba(22, 27, 46, .4); |
||||
|
font-size: 21rpx; |
||||
|
font-weight: 700; |
||||
|
transition: transform .16s ease, background .24s ease; |
||||
|
} |
||||
|
|
||||
|
.bottom-item:active { |
||||
|
transform: scale(.94); |
||||
|
} |
||||
|
|
||||
|
.bottom-item.active { |
||||
|
color: #161b2e; |
||||
|
background: linear-gradient(135deg, #eafff8, #a9ffe7); |
||||
|
box-shadow: 0 12rpx 30rpx rgba(169, 255, 231, .34), inset 0 1rpx 0 rgba(255, 255, 255, .95); |
||||
|
} |
||||
|
|
||||
|
.tab-icon { |
||||
|
margin-bottom: 4rpx; |
||||
|
font-size: 30rpx; |
||||
|
filter: grayscale(1); |
||||
|
opacity: .55; |
||||
|
} |
||||
|
|
||||
|
.bottom-item.active .tab-icon { |
||||
|
filter: none; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.unread-badge { |
||||
|
position: absolute; |
||||
|
right: 16rpx; |
||||
|
top: 2rpx; |
||||
|
min-width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
line-height: 30rpx; |
||||
|
padding: 0 8rpx; |
||||
|
border-radius: 999rpx; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
background: linear-gradient(135deg, #ff8ba0, #e85d75); |
||||
|
box-shadow: 0 8rpx 20rpx rgba(232, 93, 117, .28); |
||||
|
font-size: 18rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue