278 lines
6.1 KiB
Vue
278 lines
6.1 KiB
Vue
<script>
|
||
export default {
|
||
globalData:{
|
||
userInfo: {}
|
||
},
|
||
onLaunch: function() {
|
||
console.warn('当前组件仅支持 uni_modules 目录结构 ,请升级 HBuilderX 到 3.1.0 版本以上!')
|
||
console.log('App Launch')
|
||
var that = this;
|
||
// #ifdef MP-WEIXIN
|
||
// that.wxmpLogin();
|
||
// #endif
|
||
},
|
||
onShow: function() {
|
||
},
|
||
onHide: function() {
|
||
},
|
||
methods:{
|
||
wxmpLogin: function(needLoad=true) {
|
||
//微信小程序登录流程
|
||
var that = this;
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: (loginRes) => {
|
||
that.$api.wxmpLogin({code: loginRes.code}).then(res=>{
|
||
uni.hideLoading()
|
||
uni.setStorageSync('access', res.access)
|
||
that.$api.getUserInfo().then(res=>{
|
||
uni.setStorageSync('userInfo', res)
|
||
if(needLoad){
|
||
var pages = getCurrentPages(); //获取加载的页面
|
||
var currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
||
var url = currentPage.route; //当前页面url
|
||
uni.redirectTo({
|
||
url: '/' + url,
|
||
fail() {
|
||
uni.reLaunch({
|
||
url: '/' + url
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}).catch(e=>{
|
||
uni.reLaunch({
|
||
url: '/pages/auth/login?autoLoading=no'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/*每个页面公共css */
|
||
@import "@/static/iconfont.css";
|
||
@import '@/uni_modules/uni-scss/index.scss';
|
||
@import '@/uni_modules/uni-scss/theme.scss';
|
||
@import '@/uni_modules/uni-scss/variables.scss';
|
||
/* #ifndef APP-NVUE */
|
||
@import '@/static/customicons.css';
|
||
/* #endif */
|
||
|
||
// ========== 浅藻绿 设计系统 ==========
|
||
$primary: #2BA471;
|
||
$primary-light: #48C68B;
|
||
$primary-dark: #1F8C5E;
|
||
$success: #2BA471;
|
||
$warning: #E37318;
|
||
$danger: #D54941;
|
||
$text-primary: #1A2E25;
|
||
$text-secondary: #3D5347;
|
||
$text-hint: #7C9488;
|
||
$bg-page: #F5FAF7;
|
||
$bg-card: #FFFFFF;
|
||
$border-color: #C4C6D0;
|
||
$radius-sm: 8rpx;
|
||
$radius-md: 12rpx;
|
||
$radius-lg: 16rpx;
|
||
$shadow-sm: 0 2rpx 8rpx rgba(25, 27, 35, 0.03);
|
||
$shadow-md: 0 8rpx 24rpx rgba(25, 27, 35, 0.06);
|
||
$shadow-lg: 0 12rpx 40rpx rgba(25, 27, 35, 0.08);
|
||
|
||
// Precision Ethereal - Tonal Surface System
|
||
page {
|
||
background-color: $bg-page;
|
||
font-family: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
.container {
|
||
color: $text-primary;
|
||
padding: 0rpx 20rpx;
|
||
background-color: transparent;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
// ========== 卡片组件 ==========
|
||
.card {
|
||
background-color: $bg-card;
|
||
border-radius: $radius-lg;
|
||
padding: 28rpx 24rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: $shadow-sm;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: $text-primary;
|
||
margin-bottom: 16rpx;
|
||
padding-left: 16rpx;
|
||
border-left: 6rpx solid $primary;
|
||
}
|
||
|
||
// ========== 表单美化 ==========
|
||
.uni-forms-item {
|
||
margin-bottom: 8rpx !important;
|
||
}
|
||
.uni-forms-item--border {
|
||
padding: 4rpx
|
||
}
|
||
.uni-forms-item__content {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
// 表单容器卡片样式
|
||
.form-card {
|
||
background-color: $bg-card;
|
||
border-radius: $radius-lg;
|
||
padding: 20rpx 24rpx;
|
||
margin: 16rpx 0;
|
||
box-shadow: $shadow-sm;
|
||
}
|
||
|
||
// ========== 按钮美化 ==========
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, $primary, $primary-dark) !important;
|
||
color: #fff !important;
|
||
border: none !important;
|
||
border-radius: $radius-md !important;
|
||
font-weight: 500;
|
||
letter-spacing: 2rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(43, 164, 113, 0.2);
|
||
&:active {
|
||
opacity: 0.85;
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
|
||
.btn-danger {
|
||
background: linear-gradient(135deg, $danger, #DC2626) !important;
|
||
color: #fff !important;
|
||
border: none !important;
|
||
border-radius: $radius-md !important;
|
||
font-weight: 500;
|
||
box-shadow: 0 4rpx 12rpx rgba(239, 68, 68, 0.3);
|
||
}
|
||
|
||
// ========== 对话框美化 ==========
|
||
.dialogWrap {
|
||
position: fixed;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba(28, 25, 23, 0.5);
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 110;
|
||
}
|
||
|
||
.dialogCont {
|
||
width: 88vw;
|
||
position: absolute;
|
||
top: 50%;
|
||
margin: auto;
|
||
background-color: $bg-card;
|
||
left: 6vw;
|
||
transform: translateY(-50%);
|
||
padding: 32rpx;
|
||
border-radius: $radius-lg;
|
||
box-shadow: $shadow-lg;
|
||
}
|
||
|
||
.dialogTitle {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: $text-primary;
|
||
padding-bottom: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
// ========== 固定头部/底部 ==========
|
||
.header_sticky {
|
||
position: -webkit-sticky;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
background-color: $bg-card;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12rpx 8rpx;
|
||
border-radius: 0 0 $radius-md $radius-md;
|
||
box-shadow: $shadow-sm;
|
||
}
|
||
.header_fixed {
|
||
position: fixed;
|
||
width: 100%;
|
||
top: env(safe-area-inset-top)px;
|
||
z-index: 1;
|
||
background-color: $bg-card;
|
||
}
|
||
|
||
.footer_sticky {
|
||
position: sticky;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: $bg-card;
|
||
padding: 16rpx 24rpx;
|
||
box-shadow: 0 -4rpx 16rpx rgba(28, 25, 23, 0.06);
|
||
z-index: 10;
|
||
border-radius: $radius-lg $radius-lg 0 0;
|
||
}
|
||
.footer_fixed {
|
||
position: fixed;
|
||
width: 100%;
|
||
bottom: 0;
|
||
z-index: 100;
|
||
padding: 16rpx 24rpx;
|
||
left: 0;
|
||
background-color: rgba(245, 250, 247, 0.88);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
backdrop-filter: blur(20px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
box-sizing: border-box;
|
||
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
// ========== 状态标签美化 ==========
|
||
.status-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
// ========== 空状态提示 ==========
|
||
.empty-hint {
|
||
text-align: center;
|
||
padding: 80rpx 0;
|
||
color: $text-hint;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
// ========== 分割线 ==========
|
||
.divider {
|
||
height: 1rpx;
|
||
background-color: $border-color;
|
||
margin: 16rpx 0;
|
||
}
|
||
|
||
// ========== 段落间距 ==========
|
||
.section-gap {
|
||
height: 20rpx;
|
||
}
|
||
</style>
|