mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-11-13 20:38:51 +08:00
a32f6d2313
- 在多个页面组件中添加动态主题样式绑定 - 将硬编码的颜色值替换为CSS变量和主题配置 - 引入主题样式计算逻辑到各个页面 - 更新优惠券、地址、订单等页面的主题适配 - 替换线性渐变背景为动态主题颜色 - 移除uni_modules组件中的$set方法调用以优化性能 - 更新README中主题色管理状态为已完成
150 lines
3.2 KiB
Vue
150 lines
3.2 KiB
Vue
<template>
|
||
<view :style="themeStyle" class="container">
|
||
<u-navbar :auto-back="false" @leftClick="back" title="公众网页登录"></u-navbar>
|
||
<view class="wx-auth-container">
|
||
<div class="box">
|
||
<view class="logo-info">
|
||
<text class="title">欢迎进入{{ projectName }}</text>
|
||
</view>
|
||
<view class="small-tips">
|
||
<view>为您提供优质服务,{{ projectName }}需要获取以下信息</view>
|
||
<view>您的公开信息（昵称、头像）</view>
|
||
</view>
|
||
<view class="btns">
|
||
<button @click="getUserProfile()" class="btn-auth">使用微信授权</button>
|
||
<div @click="backToHome" class="btn-callback">暂不登录</div>
|
||
</view>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, computed } from 'vue'
|
||
import { whetherNavigate } from '@/utils/Foundation'
|
||
import config from '@/config/config'
|
||
import api from '@/config/api.js'
|
||
import { useStore } from '@/store'
|
||
import { getThemeStyle } from '@/utils/theme'
|
||
const store = useStore()
|
||
const themeStyle = computed(() => getThemeStyle(store.state.theme))
|
||
|
||
const projectName = ref(config.name)
|
||
|
||
onMounted(() => {
|
||
uni.showShareMenu({ withShareTicket: true })
|
||
})
|
||
|
||
function back() {
|
||
whetherNavigate()
|
||
}
|
||
|
||
function getUserProfile() {
|
||
const code = 'WECHAT'
|
||
const buyer = api.buyer
|
||
window.open(buyer + `/passport/connect/connect/login/web/` + code, '_self')
|
||
}
|
||
|
||
function backToHome() {
|
||
uni.switchTab({
|
||
url: '/pages/tabbar/home/index',
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.wx-auth-container {
|
||
width: 100%;
|
||
|
||
margin-top: 20%;
|
||
}
|
||
|
||
.logo-info {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
padding: 20rpx;
|
||
flex-direction: column;
|
||
font-weight: bold;
|
||
}
|
||
|
||
image {
|
||
width: 100px;
|
||
height: 100px;
|
||
text-align: center;
|
||
-webkit-transform: scale(2.5);
|
||
transform: scale(2.5);
|
||
}
|
||
|
||
text.title,
|
||
text.shop {
|
||
display: inline-block;
|
||
font-size: 60rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.box {
|
||
margin: 0 32rpx;
|
||
}
|
||
|
||
/* 文字提示*/
|
||
.small-tips {
|
||
width: 94%;
|
||
padding: 20rpx;
|
||
font-size: 24rpx;
|
||
margin: 0 0 20rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.btn-auth {
|
||
width: 92%;
|
||
background: $light-color;
|
||
color: #fff;
|
||
margin: 0 auto 40rpx;
|
||
border-radius: 100px;
|
||
animation: mymove 5s infinite;
|
||
-webkit-animation: mymove 5s infinite; /*Safari and Chrome*/
|
||
animation-direction: alternate; /*轮流反向播放动画。*/
|
||
animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
||
/* Safari 和 Chrome */
|
||
-webkit-animation: mymove 5s infinite;
|
||
-webkit-animation-direction: alternate; /*轮流反向播放动画。*/
|
||
-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
||
}
|
||
.btn-callback {
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
background: #ededed;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
border-radius: 100px;
|
||
width: 92%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.btns {
|
||
margin-top: 100rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
@keyframes mymove {
|
||
0% {
|
||
transform: scale(1); /*开始为原始大小*/
|
||
}
|
||
25% {
|
||
transform: scale(1.1); /*放大1.1倍*/
|
||
}
|
||
50% {
|
||
transform: scale(1);
|
||
}
|
||
75% {
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
</style>
|