feat: 🐛 新增备用登录方案、并优化店铺名称过长导致显示错乱的样式问题、优化自动发券功能

master
学习很差啦 2023-04-10 11:18:09 +08:00
parent 6a8e666fb8
commit af4cfe7fba
6 changed files with 336 additions and 255 deletions

View File

@ -22,5 +22,6 @@ export default {
mainColor: "#ff3c2a", // 主题色 mainColor: "#ff3c2a", // 主题色
lightColor: "#ff6b35", // 高亮主题色 lightColor: "#ff6b35", // 高亮主题色
aiderLightColor: "#ff9f28", // 辅助高亮颜色 aiderLightColor: "#ff9f28", // 辅助高亮颜色
defaultUserPhoto:"/static/missing-face.png" // 默认用户头像 defaultUserPhoto: "/static/missing-face.png", // 默认用户头像
enableFetchMobileLogin: true // 是否启用获取手机号登录 如果微信小程序提示封禁手机号获取权限 可将此选项设置成false作为备用登录方案
}; };

View File

@ -40,8 +40,8 @@
> >
<!-- 店铺名称 --> <!-- 店铺名称 -->
<view class="seller-info u-flex u-row-between"> <view class="seller-info u-flex u-row-between">
<view class="seller-name" @click="navigateToStore(order)"> <view class="seller-name wes" @click="navigateToStore(order)">
<view class="name">{{ order.storeName }}</view> <view class="name wes">{{ order.storeName }}</view>
</view> </view>
<view class="order-sn">{{ <view class="order-sn">{{
order.orderStatus | orderStatusList order.orderStatus | orderStatusList
@ -689,6 +689,7 @@ page,
padding: 0 20rpx; padding: 0 20rpx;
.seller-name { .seller-name {
flex:10;
font-size: 28rpx; font-size: 28rpx;
font-weight: 600; font-weight: 600;
display: flex; display: flex;
@ -701,6 +702,9 @@ page,
} }
.order-sn { .order-sn {
flex:2;
width:120rpx;
text-align: center;
color: $aider-light-color; color: $aider-light-color;
font-size: 26rpx; font-size: 26rpx;
} }

View File

@ -156,6 +156,12 @@
order.createTime order.createTime
}}</view> }}</view>
</view> </view>
<view class="order-info-view">
<view class="title">订单备注</view>
<view class="value">{{
order.remark
}}</view>
</view>
<view class="order-info-view"> <view class="order-info-view">
<view class="title">支付状态</view> <view class="title">支付状态</view>
<view class="value"> <view class="value">
@ -753,4 +759,12 @@ page,
.address-line-height{ .address-line-height{
line-height: 1.75; line-height: 1.75;
} }
.seller-name{
>.name{
flex:10 !important;
}
>.status{
flex:2;
}
}
</style> </style>

View File

@ -1,277 +1,337 @@
<template> <template>
<view class="container"> <view class="container">
<u-navbar :custom-back="back" title="小程序登录"></u-navbar> <u-navbar :custom-back="back" title="小程序登录"></u-navbar>
<u-modal v-model="phoneAuthPopup" :mask-close-able="true" :title="projectName+'商城'" :show-confirm-button="false"> <u-modal v-model="phoneAuthPopup" :mask-close-able="true" :title="projectName+'商城'"
<div class="tips"> :show-confirm-button="false">
为了更好地用户体验需要您授权手机号 <div class="tips">
</div> 为了更好地用户体验需要您授权手机号
<button class="register" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"> </div>
去授权 <button class="register" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
</button> 去授权
</u-modal> </button>
<view class="wx-auth-container"> </u-modal>
<div class="box"> <view class="wx-auth-container">
<view class="logo-info"> <div class="box">
<text class="title">欢迎进入{{ projectName }}</text> <view class="logo-info">
</view> <text class="title">欢迎进入{{ projectName }}</text>
<view class="small-tips"> </view>
<view>为您提供优质服务,{{ projectName }}需要获取以下信息</view> <view class="small-tips">
<view>您的公开信息昵称头像</view> <view>为您提供优质服务,{{ projectName }}需要获取以下信息</view>
</view> <view>您的公开信息昵称头像</view>
<view class="btns"> </view>
<button type="primary" bindtap="getUserProfile" @click="getUserProfile()" class="btn-auth">使用微信授权</button> <view class="btns">
<div @click="backToHome" class="btn-callback">暂不登录</div> <button type="primary" bindtap="getUserProfile" @click="getUserProfile()"
</view> class="btn-auth">使用微信授权</button>
</div> <div @click="backToHome" class="btn-callback">暂不登录</div>
</view> </view>
</view> </div>
</view>
</view>
</template> </template>
<script> <script>
import { mpAutoLogin } from "@/api/connect.js"; import {
mpAutoLogin
} from "@/api/connect.js";
import { whetherNavigate } from "@/utils/Foundation"; // import {
import { getUserInfo } from "@/api/members"; whetherNavigate
import storage from "@/utils/storage.js"; } from "@/utils/Foundation"; //
import config from '@/config/config' import {
export default { getUserInfo
data() { } from "@/api/members";
return { import storage from "@/utils/storage.js";
// import config from '@/config/config'
phoneAuthPopup: false, export default {
// data() {
projectName: config.name, return {
//sessionkey configs:config,
code: "", //
// phoneAuthPopup: false,
nickName: "", //
// projectName: config.name,
image: "", //sessionkey
}; code: "",
}, //
nickName: "",
//
image: "",
};
},
//codecode //codecode
mounted() { mounted() {
// //
uni.showShareMenu({ withShareTicket: true }); uni.showShareMenu({
withShareTicket: true
});
let that = this; let that = this;
//code
uni.login({
success: (res) => {
that.code = res.code;
},
});
},
methods: {
/**
* TODO 此方法不一定是最优解如果有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues
* 小程序返回bug
* 1.介于微信登录是在login.vue的基础上作为判断跳转来
* 所以在页面栈中会自动记录回退路径所以导致每次微信小程序点击回退就会自动返回login页面
* 当然login页面的判断就是 没有登录就会跳转到微信小程序页面 导致了无法回退到之前页面
* 2.解决方法 尝试在回退的时候判断地址让回退多一级这样就避免了
*/
back() { },
whetherNavigate("wx"); methods: {
}, /**
backToHome() { * TODO 此方法不一定是最优解如果有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues
uni.switchTab({ * 小程序返回bug
url: `/pages/tabbar/home/index`, * 1.介于微信登录是在login.vue的基础上作为判断跳转来
}); * 所以在页面栈中会自动记录回退路径所以导致每次微信小程序点击回退就会自动返回login页面
}, * 当然login页面的判断就是 没有登录就会跳转到微信小程序页面 导致了无法回退到之前页面
// * 2.解决方法 尝试在回退的时候判断地址让回退多一级这样就避免了
getUserProfile(e) { */
let that = this;
// 使wx.getUserProfile back() {
uni.getUserProfile({ whetherNavigate("wx");
desc: "用于完善会员资料", // },
success: (res) => { backToHome() {
that.nickName = res.userInfo.nickName; uni.switchTab({
that.image = res.userInfo.avatarUrl; url: `/pages/tabbar/home/index`,
// });
this.phoneAuthPopup = true; },
},
fail: (res) => {
that.nickName = "微信用户";
that.image =
"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"; //
// async getUserProfile(e) {
this.phoneAuthPopup = true; let that = this;
}, //code
}); await uni.login({
}, success: (res) => {
// that.code = res.code;
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; // 使wx.getUserProfile
let image = this.image; await uni.getUserProfile({
let nickName = this.nickName; desc: "用于完善会员资料", //
mpAutoLogin({ success: (res) => {
encryptedData, that.nickName = res.userInfo.nickName;
iv, that.image = res.userInfo.avatarUrl;
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, * 根据公有的配置设置登录方式
}); */
}); 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) => {
},
});
},
//
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/*微信授权*/ /*微信授权*/
page { page {
background-color: #ffffff; background-color: #ffffff;
} }
.wx-auth-container { .wx-auth-container {
width: 100%; width: 100%;
margin-top: 20%; margin-top: 20%;
} }
.logo-info { .logo-info {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
padding: 20rpx; padding: 20rpx;
flex-direction: column; flex-direction: column;
font-weight: bold; font-weight: bold;
} }
image { image {
width: 100px; width: 100px;
height: 100px; height: 100px;
text-align: center; text-align: center;
-webkit-transform: scale(2.5); -webkit-transform: scale(2.5);
transform: scale(2.5); transform: scale(2.5);
} }
.logo-info-img { .logo-info-img {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
border-radius: 50%; border-radius: 50%;
border: none; border: none;
} }
text.title, text.title,
text.shop { text.shop {
display: inline-block; display: inline-block;
font-size: 60rpx; font-size: 60rpx;
color: #333; color: #333;
} }
text.shop { text.shop {
display: inline-block; display: inline-block;
font-size: 55rpx; font-size: 55rpx;
color: #333; color: #333;
} }
.box { .box {
margin: 0 32rpx; margin: 0 32rpx;
} }
/* 文字提示*/ /* 文字提示*/
.small-tips { .small-tips {
width: 94%; width: 94%;
padding: 20rpx; padding: 20rpx;
font-size: 24rpx; font-size: 24rpx;
margin: 0 0 20rpx; margin: 0 0 20rpx;
color: #999; color: #999;
} }
.auth-button { .auth-button {
padding: 10px 20px; padding: 10px 20px;
width: calc(100% - 20 * 4rpx); width: calc(100% - 20 * 4rpx);
} }
.tips { .tips {
width: 80%; width: 80%;
text-align: left; text-align: left;
margin: 6% 10%; margin: 6% 10%;
margin-top: 48rpx; margin-top: 48rpx;
line-height: 1.75; line-height: 1.75;
} }
.register { .register {
color: $weChat-color !important; color: $weChat-color !important;
border: none !important; border: none !important;
background: #fff !important; background: #fff !important;
} }
.btn-auth { .btn-auth {
width: 92%; width: 92%;
margin: 0 auto 40rpx; margin: 0 auto 40rpx;
border-radius: 100px; border-radius: 100px;
// animation: mymove 5s infinite; // animation: mymove 5s infinite;
// -webkit-animation: mymove 5s infinite; /*Safari and Chrome*/ // -webkit-animation: mymove 5s infinite; /*Safari and Chrome*/
// animation-direction: alternate; /**/ // animation-direction: alternate; /**/
// animation-timing-function: ease-in-out; /*线*/ // animation-timing-function: ease-in-out; /*线*/
// /* Safari Chrome */ // /* Safari Chrome */
// -webkit-animation: mymove 5s infinite; // -webkit-animation: mymove 5s infinite;
// -webkit-animation-direction: alternate; /**/ // -webkit-animation-direction: alternate; /**/
// -webkit-animation-timing-function: ease-in-out; /*线*/ // -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 { .btn-callback {
margin-top: 100rpx; text-align: center;
display: flex; font-size: 30rpx;
flex-direction: column; background: #ededed;
width: 100%; height: 90rpx;
justify-content: center; line-height: 90rpx;
} border-radius: 100px;
width: 92%;
margin: 0 auto;
}
@keyframes mymove { .btns {
0% { margin-top: 100rpx;
transform: scale(1); /*开始为原始大小*/ display: flex;
} flex-direction: column;
25% { width: 100%;
transform: scale(1.1); /*放大1.1倍*/ justify-content: center;
} }
50% {
transform: scale(1); @keyframes mymove {
} 0% {
75% { transform: scale(1);
transform: scale(1.1); /*开始为原始大小*/
} }
}
25% {
transform: scale(1.1);
/*放大1.1倍*/
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.1);
}
}
</style> </style>

View File

@ -26,7 +26,7 @@
@change="checkboxChangeDP(item)"></u-checkbox> @change="checkboxChangeDP(item)"></u-checkbox>
<!-- #endif --> <!-- #endif -->
</u-checkbox-group> </u-checkbox-group>
<span class="store-name store-line-desc" @click.stop="navigateToStore(item)">{{ <span class="store-name wes store-line-desc" @click.stop="navigateToStore(item)">{{
item.storeName item.storeName
}}</span> }}</span>
<u-icon @click="navigateToStore(item)" size="24" style="margin-left:10rpx;" name="arrow-right"></u-icon> <u-icon @click="navigateToStore(item)" size="24" style="margin-left:10rpx;" name="arrow-right"></u-icon>
@ -740,6 +740,7 @@ page {
display: flex; display: flex;
// #endif // #endif
overflow: hidden; overflow: hidden;
flex:10;
} }
.goods-config { .goods-config {
@ -758,6 +759,9 @@ page {
} }
.right-col { .right-col {
flex:2;
text-align: center;
width: 100rpx;
color: $light-color; color: $light-color;
font-size: 26rpx; font-size: 26rpx;

View File

@ -100,13 +100,11 @@ export default {
}, },
methods: { methods: {
firstGetAuto() { firstGetAuto() {
if(!this.$options.filters.isLogin('auth')) return false
let data = new Date(); let data = new Date();
let now = data.getDate(); let now = data.getDate();
let hours = data.getHours(); let hours = data.getHours();
let flagCoup = storage.getAutoCp(); let flagCoup = storage.getAutoCp();
console.log(flagCoup);
console.log(now);
if ( if (
storage.getAutoCp() && storage.getAutoCp() &&
storage.getAutoCp() != "" && storage.getAutoCp() != "" &&