code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2026-08-06 10:57:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 更新项目配置与组件使用

Browse Source 
- 在入口文件中引入uview-plus的配置，优化字体加载逻辑
- 移除manifest.json中不必要的权限描述
- 更新package.json和package-lock.json，添加开发依赖
- 调整多个组件的样式和结构，提升用户体验
- 修复部分组件的逻辑和样式问题，确保兼容性
This commit is contained in:
pikachu1995@126.com
2026-06-30 16:02:40 +08:00
parent f4337fd030
commit e871509bf5
87 changed files with 3546 additions and 1506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

800
pages/passport/wechatMPLogin.vue
View File

@@ -1,383 +1,417 @@
<template>
<view class="container">
<u-navbar :auto-back="false" @leftClick="back" title="小程序登录"></u-navbar>
<u-modal v-model:show="phoneAuthPopup" :mask-close-able="true" :title="projectName+'商城'"
:show-confirm-button="false">
<div class="tips">
为了更好地用户体验，需要您授权手机号
</div>
<button class="register" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
去授权
</button>
</u-modal>
<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 type="primary" :disabled="logingFlag" bindtap="getUserProfile" @click="getUserProfile()"
class="btn-auth">登录</button>
<div @click="backToHome" class="btn-callback">暂不登录</div>
</view>
<div class="privacy">
<u-checkbox shape="circle" v-model="checked" :active-color="lightColor">
<div class="flex">
阅读并同意<navigator class="light-color" url="/pages/mine/help/tips?type=PRIVACY_POLICY">《隐私协议》</navigator>
<navigator class="light-color" url="/pages/mine/help/tips?type=USER_AGREEMENT">《用户协议》</navigator>
</div>
</u-checkbox>
</div>
</div>
</view>
</view>
</template>
<script>
import {
mpAutoLogin
} from "@/api/connect.js";
import {
whetherNavigate
} from "@/utils/Foundation"; //登录跳转
import {
getUserInfo
} from "@/api/members";
import storage from "@/utils/storage.js";
import config from '@/config/config'
export default {
data() {
return {
lightColor:this.$lightColor,
checked:false,
configs:config,
// 是否展示手机号码授权弹窗，默认第一步不展示，要先获取用户基础信息
phoneAuthPopup: false,
// 授权信息展示，商城名称
projectName: config.name,
//微信返回信息，用于揭秘信息，获取sessionkey
code: "",
//微信昵称
nickName: "",
logingFlag: false,
//微信头像
image: "",
};
},
//微信小程序进入页面，先获取code，否则几率出现code和后续交互数据不对应情况
mounted() {
// 小程序默认分享
uni.showShareMenu({
withShareTicket: true
});
//获取code
uni.login({
success: (res) => {
if(res.errMsg === "login:ok") {
this.code = res.code
} else {
uni.showToast({
title: "系统异常，请联系管理员！"
})
}
},
});
},
methods: {
/**
* TODO 此方法不一定是最优解，如果有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 中提出
* 小程序返回bug
* 1.介于微信登录是在login.vue的基础上作为判断跳转来
* 所以在页面栈中会自动记录回退路径，所以导致每次微信小程序点击回退就会自动返回login页面
* 当然login页面的判断就是 没有登录就会跳转到微信小程序页面 导致了无法回退到之前页面
* 2.解决方法： 尝试在回退的时候判断地址，让回退多一级这样就避免了
*/
back() {
whetherNavigate("wx");
},
backToHome() {
uni.switchTab({
url: `/pages/tabbar/home/index`,
});
},
//获取用户信息
getUserProfile(e) {
if(!this.checked){
uni.showToast({
title:"请勾选协议",
icon:'none'
})
return
}
this.logingFlag = true;
if (this.code) {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
uni.getUserProfile({
desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log("success", res)
this.nickName = res.userInfo.nickName;
this.image = res.userInfo.avatarUrl;
/**
* 根据公有的配置设置登录方式
*/
if(this.configs.enableFetchMobileLogin){
this.phoneAuthPopup = true;
return false
}
let iv = res.iv;
let encryptedData = res.encryptedData;
let code = this.code;
let image = this.image;
let nickName = this.nickName;
mpAutoLogin({
encryptedData,
iv,
code,
image,
nickName,
}).then((apiRes) => {
storage.setAccessToken(apiRes.data.result.accessToken);
storage.setRefreshToken(apiRes.data.result.refreshToken);
// 登录成功
uni.showToast({
title: "登录成功!",
icon: "none",
});
//获取用户信息
getUserInfo().then((user) => {
storage.setUserInfo(user.data.result);
storage.setHasLogin(true);
uni.navigateBack({
delta: 1,
});
});
});
},
fail: (res) => {
console.log("fail", res)
},
});
this.logingFlag = false;
}
},
//获取手机号授权
getPhoneNumber(e) {
let iv = e.detail.iv;
let encryptedData = e.detail.encryptedData;
if (!e.detail.encryptedData) {
uni.showToast({
title: "请授予手机号码权限，手机号码会和会员系统用户绑定！",
icon: "none",
});
return;
}
let code = this.code;
let image = this.image;
let nickName = this.nickName;
mpAutoLogin({
encryptedData,
iv,
code,
image,
nickName,
}).then((res) => {
storage.setAccessToken(res.data.result.accessToken);
storage.setRefreshToken(res.data.result.refreshToken);
// 登录成功
uni.showToast({
title: "登录成功!",
icon: "none",
});
//获取用户信息
getUserInfo().then((user) => {
storage.setUserInfo(user.data.result);
storage.setHasLogin(true);
uni.navigateBack({
delta: 1,
});
});
});
},
},
};
</script>
<style lang="scss" scoped>
/*微信授权*/
page {
background-color: #ffffff;
}
.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);
}
.logo-info-img {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
border: none;
}
text.title,
text.shop {
display: inline-block;
font-size: 60rpx;
color: #333;
}
text.shop {
display: inline-block;
font-size: 55rpx;
color: #333;
}
.box {
margin: 0 32rpx;
}
/* 文字提示*/
.small-tips {
width: 94%;
padding: 20rpx;
font-size: 24rpx;
margin: 0 0 20rpx;
color: #999;
}
.auth-button {
padding: 10px 20px;
width: calc(100% - 20 * 4rpx);
}
.tips {
width: 80%;
text-align: left;
margin: 6% 10%;
margin-top: 48rpx;
line-height: 1.75;
}
.register {
color: $weChat-color !important;
border: none !important;
background: #fff !important;
}
.btn-auth {
width: 92%;
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;
}
.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);
}
}
.privacy{
text-align: center;
margin-top: 20rpx;
width: 100%;
}
</style>
<template>
<view class="container">
<u-navbar :auto-back="false" :fixed="true" :placeholder="true" @leftClick="back" title="小程序登录"></u-navbar>
<u-modal v-model:show="phoneAuthPopup" :mask-close-able="true" :title="projectName+'商城'"
:show-confirm-button="false">
<div class="tips">
为了更好地用户体验，需要您授权手机号
</div>
<button class="register" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
去授权
</button>
</u-modal>
<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 type="primary" :disabled="logingFlag" bindtap="getUserProfile" @click="getUserProfile()"
class="btn-auth">登录</button>
<div @click="backToHome" class="btn-callback">暂不登录</div>
</view>
<view class="privacy">
<view class="privacy-row">
<u-checkbox
class="privacy-check"
usedAlone
shape="circle"
v-model:checked="checked"
:active-color="lightColor"
:icon-size="18"
></u-checkbox>
<view class="privacy-text">
阅读并同意
<navigator class="privacy-link" url="/pages/mine/help/tips?type=PRIVACY_POLICY">《隐私协议》</navigator>
<navigator class="privacy-link" url="/pages/mine/help/tips?type=USER_AGREEMENT">《用户协议》</navigator>
</view>
</view>
</view>
</div>
</view>
</view>
</template>
<script>
import {
mpAutoLogin
} from "@/api/connect.js";
import {
whetherNavigate
} from "@/utils/Foundation"; //登录跳转
import {
getUserInfo
} from "@/api/members";
import storage from "@/utils/storage.js";
import config from '@/config/config'
export default {
data() {
return {
lightColor:this.$lightColor,
checked:false,
configs:config,
// 是否展示手机号码授权弹窗，默认第一步不展示，要先获取用户基础信息
phoneAuthPopup: false,
// 授权信息展示，商城名称
projectName: config.name,
//微信返回信息，用于揭秘信息，获取sessionkey
code: "",
//微信昵称
nickName: "",
logingFlag: false,
//微信头像
image: "",
};
},
//微信小程序进入页面，先获取code，否则几率出现code和后续交互数据不对应情况
mounted() {
// 小程序默认分享
uni.showShareMenu({
withShareTicket: true
});
//获取code
uni.login({
success: (res) => {
if(res.errMsg === "login:ok") {
this.code = res.code
} else {
uni.showToast({
title: "系统异常，请联系管理员！"
})
}
},
});
},
methods: {
/**
* TODO 此方法不一定是最优解，如果有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 中提出
* 小程序返回bug
* 1.介于微信登录是在login.vue的基础上作为判断跳转来
* 所以在页面栈中会自动记录回退路径，所以导致每次微信小程序点击回退就会自动返回login页面
* 当然login页面的判断就是 没有登录就会跳转到微信小程序页面 导致了无法回退到之前页面
* 2.解决方法： 尝试在回退的时候判断地址，让回退多一级这样就避免了
*/
back() {
whetherNavigate("wx");
},
backToHome() {
uni.switchTab({
url: `/pages/tabbar/home/index`,
});
},
//获取用户信息
getUserProfile(e) {
if(!this.checked){
uni.showToast({
title:"请勾选协议",
icon:'none'
})
return
}
this.logingFlag = true;
if (this.code) {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
uni.getUserProfile({
desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log("success", res)
this.nickName = res.userInfo.nickName;
this.image = res.userInfo.avatarUrl;
/**
* 根据公有的配置设置登录方式
*/
if(this.configs.enableFetchMobileLogin){
this.phoneAuthPopup = true;
return false
}
let iv = res.iv;
let encryptedData = res.encryptedData;
let code = this.code;
let image = this.image;
let nickName = this.nickName;
mpAutoLogin({
encryptedData,
iv,
code,
image,
nickName,
}).then((apiRes) => {
storage.setAccessToken(apiRes.data.result.accessToken);
storage.setRefreshToken(apiRes.data.result.refreshToken);
// 登录成功
uni.showToast({
title: "登录成功!",
icon: "none",
});
//获取用户信息
getUserInfo().then((user) => {
storage.setUserInfo(user.data.result);
storage.setHasLogin(true);
uni.navigateBack({
delta: 1,
});
});
});
},
fail: (res) => {
console.log("fail", res)
},
});
this.logingFlag = false;
}
},
//获取手机号授权
getPhoneNumber(e) {
let iv = e.detail.iv;
let encryptedData = e.detail.encryptedData;
if (!e.detail.encryptedData) {
uni.showToast({
title: "请授予手机号码权限，手机号码会和会员系统用户绑定！",
icon: "none",
});
return;
}
let code = this.code;
let image = this.image;
let nickName = this.nickName;
mpAutoLogin({
encryptedData,
iv,
code,
image,
nickName,
}).then((res) => {
storage.setAccessToken(res.data.result.accessToken);
storage.setRefreshToken(res.data.result.refreshToken);
// 登录成功
uni.showToast({
title: "登录成功!",
icon: "none",
});
//获取用户信息
getUserInfo().then((user) => {
storage.setUserInfo(user.data.result);
storage.setHasLogin(true);
uni.navigateBack({
delta: 1,
});
});
});
},
},
};
</script>
<style lang="scss" scoped>
/*微信授权*/
page {
background-color: #ffffff;
}
.wx-auth-container {
width: 100%;
padding-top: 120rpx;
}
.logo-info {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0 20rpx;
font-weight: bold;
}
image {
width: 100px;
height: 100px;
text-align: center;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
.logo-info-img {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
border: none;
}
text.title,
text.shop {
display: inline-block;
font-size: 60rpx;
color: #333;
}
text.shop {
display: inline-block;
font-size: 55rpx;
color: #333;
}
.box {
margin: 0 32rpx;
}
/* 文字提示*/
.small-tips {
width: 94%;
padding: 20rpx;
font-size: 24rpx;
margin: 0 0 20rpx;
color: #999;
}
.auth-button {
padding: 10px 20px;
width: calc(100% - 20 * 4rpx);
}
.tips {
width: 80%;
text-align: left;
margin: 6% 10%;
margin-top: 48rpx;
line-height: 1.75;
}
.register {
color: $weChat-color !important;
border: none !important;
background: #fff !important;
}
.btn-auth {
width: 92%;
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;
}
.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);
}
}
.privacy {
margin-top: 32rpx;
width: 100%;
display: flex;
justify-content: center;
}
.privacy-row {
display: flex;
align-items: flex-start;
width: 92%;
}
.privacy-check {
flex-shrink: 0;
margin-top: 4rpx;
::v-deep .u-checkbox {
margin: 0;
}
}
.privacy-text {
flex: 1;
margin-left: 12rpx;
font-size: 24rpx;
line-height: 36rpx;
color: #666;
}
.privacy-link {
display: inline;
color: $light-color;
}
</style>