Browse Source

优化微信授权

zyh
Gao xiaosong 4 years ago
parent
commit
4fb75be4b0
  1. 328
      pages/authorization/index.vue
  2. 541
      pages/user/User/index.vue
  3. 1854
      utils/index.js

328
pages/authorization/index.vue

@ -7,7 +7,8 @@
<open-data class="user-avatar" type="userAvatarUrl"></open-data> <open-data class="user-avatar" type="userAvatarUrl"></open-data>
<open-data class="user-name" type="userNickName"></open-data> <open-data class="user-name" type="userNickName"></open-data>
<view class="login-notice">为了提供更优质的服务需要获取您的头像昵称</view> <view class="login-notice">为了提供更优质的服务需要获取您的头像昵称</view>
<button class="cu-btn author-btn" @getuserinfo="getUserInfo" open-type="getUserInfo">授权并查看</button> <button class="cu-btn author-btn" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">授权并查看</button>
<button class="cu-btn author-btn" v-else @getuserinfo="getUserInfo" open-type="getUserInfo">授权并查看</button>
<button class="cu-btn close-btn" @tap="back">暂不授权</button> <button class="cu-btn close-btn" @tap="back">暂不授权</button>
</view> </view>
</view> </view>
@ -25,169 +26,204 @@
</template> </template>
<script> <script>
import { import { mapState, mapMutations, mapActions } from 'vuex'
mapState, import { wxappAuth, getUser } from '@/api/user'
mapMutations, import dayjs from 'dayjs'
mapActions import cookie from '@/utils/store/cookie'
} from "vuex"; import { login, authorize } from '@/utils'
import {
wxappAuth,
getUser
} from "@/api/user";
import dayjs from "dayjs";
import cookie from "@/utils/store/cookie";
import {
login,
authorize
} from "@/utils";
export default { export default {
data() { data() {
return { return {
authorize: false, authorize: false,
}; canIUseGetUserProfile: false,
}, }
computed: { },
...mapState(["isAuthorization", "$deviceType", "token"]), computed: {
}, ...mapState(['isAuthorization', '$deviceType', 'token']),
onShow() { },
// // onLoad() {
}, console.log(wx.getUserProfile)
onHide() { if (wx.getUserProfile) {
this.updateAuthorizationPage(false); console.log(this)
this.changeAuthorization(false); this.canIUseGetUserProfile = true
console.log(this.canIUseGetUserProfile)
}
// //
},
onHide() {
this.updateAuthorizationPage(false)
this.changeAuthorization(false)
},
onUnload() {
this.updateAuthorizationPage(false)
this.changeAuthorization(false)
},
methods: {
...mapActions(['changeAuthorization', 'setUserInfo']),
...mapMutations(['updateAuthorizationPage']),
toLogin() {
this.$yrouter.push({
path: '/pages/user/Login/index',
query: {},
})
}, },
onUnload() { back() {
this.updateAuthorizationPage(false); this.$yrouter.switchTab({
this.changeAuthorization(false); path: '/pages/home/index',
query: {},
})
}, },
methods: { getUserInfo(data) {
...mapActions(["changeAuthorization", "setUserInfo"]), console.log(data)
...mapMutations(["updateAuthorizationPage"]), console.log('getUserInfo')
toLogin() { if (data.detail.errMsg == 'getUserInfo:fail auth deny') {
this.$yrouter.push({ uni.showToast({
path: "/pages/user/Login/index", title: '取消授权',
query: {}, icon: 'none',
}); duration: 2000,
}, })
back() { return
this.$yrouter.switchTab({ }
path: "/pages/home/index", uni.showLoading({
query: {}, title: '登录中',
}); })
}, login()
getUserInfo(data) { .then(e => {
if (data.detail.errMsg == "getUserInfo:fail auth deny") { uni.hideLoading()
console.log('重定向')
this.$yrouter.reLaunch({
path: cookie.get('redirect').replace(/\ /g, ''),
})
})
.catch(error => {
uni.hideLoading()
console.log(error)
uni.showToast({ uni.showToast({
title: "取消授权", title: error,
icon: "none", icon: 'none',
duration: 2000, duration: 2000,
});
return;
}
uni.showLoading({
title: "登录中",
});
login()
.then((res) => {
console.log('重定向')
this.$yrouter.reLaunch({
path: cookie.get("redirect").replace(/\ /g, '')
});
}) })
.catch((error) => { })
console.log(error); },
uni.showToast({ getUserInfoProfile(data) {
title: error, console.log('getUserInfoProfile')
icon: "none", wx.getUserProfile({
duration: 2000, lang: 'zh_CN',
}); desc: '需要获取您的信息用来展示',
}); success: res => {
}, console.log(res)
uni.showLoading({
title: '登录中',
})
login(res)
.then(e => {
console.log('重定向')
this.$yrouter.reLaunch({
path: cookie.get('redirect').replace(/\ /g, ''),
})
})
.catch(error => {
console.log(error)
uni.showToast({
title: error,
icon: 'none',
duration: 2000,
})
})
},
})
}, },
mounted() {}, },
}; mounted() {
if (wx.getUserProfile) {
console.log(this)
this.canIUseGetUserProfile = true
console.log(this.canIUseGetUserProfile)
}
},
}
</script> </script>
<style lang="less"> <style lang="less">
.container { .container {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
position: relative; position: relative;
} }
.force-login-wrap { .force-login-wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
z-index: 11111; z-index: 11111;
top: 0; top: 0;
.logo-bg { .logo-bg {
width: 640rpx; width: 640rpx;
height: 300rpx; height: 300rpx;
} }
.force-login__content { .force-login__content {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
.user-avatar { .user-avatar {
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
margin-bottom: 40rpx; margin-bottom: 40rpx;
} }
.user-name { .user-name {
font-size: 35rpx; font-size: 35rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
color: #000; color: #000;
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
.login-notice { .login-notice {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: #000; color: #000;
line-height: 44rpx; line-height: 44rpx;
width: 500rpx; width: 500rpx;
text-align: center; text-align: center;
margin-bottom: 80rpx; margin-bottom: 80rpx;
} }
.author-btn { .author-btn {
width: 630rpx; width: 630rpx;
height: 80rpx; height: 80rpx;
background: linear-gradient(to right, #f35447 0%, #ff8e3c 100%); background: linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
background: -moz-linear-gradient(to right, #f35447 0%, #ff8e3c 100%); background: -moz-linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22); // box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
border-radius: 40rpx; border-radius: 40rpx;
font-size: 30rpx; font-size: 30rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
.close-btn { .close-btn {
width: 630rpx; width: 630rpx;
height: 80rpx; height: 80rpx;
margin-top: 30rpx; margin-top: 30rpx;
border-radius: 40rpx; border-radius: 40rpx;
border: 2rpx solid #eb3729; border: 2rpx solid #eb3729;
background: none; background: none;
font-size: 30rpx; font-size: 30rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #eb3729; color: #eb3729;
}
} }
} }
}
</style> </style>

541
pages/user/User/index.vue

@ -1,6 +1,6 @@
<template> <template>
<view class="user"> <view class="user">
<view v-if="$store.getters.token||userInfo.uid"> <view v-if="$store.getters.token || userInfo.uid">
<view class="header bg-color-red acea-row row-between-wrapper"> <view class="header bg-color-red acea-row row-between-wrapper">
<view class="picTxt acea-row row-between-wrapper"> <view class="picTxt acea-row row-between-wrapper">
<view class="pictrue"> <view class="pictrue">
@ -15,7 +15,7 @@
</view> </view>
</view> </view>
<view @click="goPersonalData()" class="id" v-if="userInfo.phone"> <view @click="goPersonalData()" class="id" v-if="userInfo.phone">
<text>ID{{ userInfo.uid || 0}}</text> <text>ID{{ userInfo.uid || 0 }}</text>
<text class="iconfont icon-bianji1"></text> <text class="iconfont icon-bianji1"></text>
</view> </view>
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
@ -64,40 +64,35 @@
<view @click="goMyOrder(0)" class="item"> <view @click="goMyOrder(0)" class="item">
<view class="pictrue"> <view class="pictrue">
<image src="@/static/images/dfk.png" /> <image src="@/static/images/dfk.png" />
<text class="order-status-num" <text class="order-status-num" v-if="userInfo.orderStatusNum.unpaidCount > 0">{{ userInfo.orderStatusNum.unpaidCount }}</text>
v-if="userInfo.orderStatusNum.unpaidCount > 0">{{ userInfo.orderStatusNum.unpaidCount }}</text>
</view> </view>
<view>待付款</view> <view>待付款</view>
</view> </view>
<view @click="goMyOrder(1)" class="item"> <view @click="goMyOrder(1)" class="item">
<view class="pictrue"> <view class="pictrue">
<image src="@/static/images/dfh.png" /> <image src="@/static/images/dfh.png" />
<text class="order-status-num" <text class="order-status-num" v-if="userInfo.orderStatusNum.unshippedCount > 0">{{ userInfo.orderStatusNum.unshippedCount }}</text>
v-if="userInfo.orderStatusNum.unshippedCount > 0">{{ userInfo.orderStatusNum.unshippedCount }}</text>
</view> </view>
<view>待发货</view> <view>待发货</view>
</view> </view>
<view @click="goMyOrder(2)" class="item"> <view @click="goMyOrder(2)" class="item">
<view class="pictrue"> <view class="pictrue">
<image src="@/static/images/dsh.png" /> <image src="@/static/images/dsh.png" />
<text class="order-status-num" <text class="order-status-num" v-if="userInfo.orderStatusNum.receivedCount > 0">{{ userInfo.orderStatusNum.receivedCount }}</text>
v-if="userInfo.orderStatusNum.receivedCount > 0">{{ userInfo.orderStatusNum.receivedCount }}</text>
</view> </view>
<text>待收货</text> <text>待收货</text>
</view> </view>
<view @click="goMyOrder(3)" class="item"> <view @click="goMyOrder(3)" class="item">
<view class="pictrue"> <view class="pictrue">
<image src="@/static/images/dpj.png" /> <image src="@/static/images/dpj.png" />
<text class="order-status-num" <text class="order-status-num" v-if="userInfo.orderStatusNum.evaluatedCount > 0">{{ userInfo.orderStatusNum.evaluatedCount }}</text>
v-if="userInfo.orderStatusNum.evaluatedCount > 0">{{ userInfo.orderStatusNum.evaluatedCount }}</text>
</view> </view>
<text>待评价</text> <text>待评价</text>
</view> </view>
<view @click="goReturnList()" class="item"> <view @click="goReturnList()" class="item">
<view class="pictrue"> <view class="pictrue">
<image src="@/static/images/sh.png" /> <image src="@/static/images/sh.png" />
<text class="order-status-num" <text class="order-status-num" v-if="userInfo.orderStatusNum.refundCount > 0">{{ userInfo.orderStatusNum.refundCount }}</text>
v-if="userInfo.orderStatusNum.refundCount > 0">{{ userInfo.orderStatusNum.refundCount }}</text>
</view> </view>
<text>售后/退款</text> <text>售后/退款</text>
</view> </view>
@ -132,300 +127,280 @@
</view> </view>
</template> </template>
<script> <script>
import { import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
mapState, import { getUserInfo, getMenuUser, bindingPhone } from '@/api/user'
mapGetters, import { isWeixin, VUE_APP_RESOURCES_URL } from '@/utils'
mapMutations, import cookie from '@/utils/store/cookie'
mapActions import SwitchWindow from '@/components/SwitchWindow'
} from "vuex"; import Authorization from '@/pages/authorization/index'
import {
getUserInfo,
getMenuUser,
bindingPhone
} from "@/api/user";
import {
isWeixin,
VUE_APP_RESOURCES_URL
} from "@/utils";
import cookie from "@/utils/store/cookie";
import SwitchWindow from "@/components/SwitchWindow";
import Authorization from "@/pages/authorization/index";
const NAME = "User"; const NAME = 'User'
export default { export default {
name: NAME, name: NAME,
components: { components: {
SwitchWindow, SwitchWindow,
Authorization Authorization,
},
props: {},
data: function() {
return {
MyMenus: [],
switchActive: false,
isWeixin: false,
}
},
computed: mapGetters(['userInfo']),
methods: {
...mapMutations(['updateAuthorizationPage']),
goReturnList() {
this.$yrouter.push('/pages/order/ReturnList/index')
}, },
props: {}, goMyOrder(type) {
data: function () { this.$yrouter.push({
return { path: '/pages/order/MyOrder/index',
MyMenus: [], query: {
switchActive: false, type,
isWeixin: false },
}; })
}, },
computed: mapGetters(["userInfo"]), goBindPhone() {
methods: { this.$yrouter.push({
...mapMutations(["updateAuthorizationPage"]), path: '/pages/user/BindingPhone/index',
goReturnList() { })
this.$yrouter.push("/pages/order/ReturnList/index"); },
}, goUserCoupon() {
goMyOrder(type) { this.$yrouter.push('/pages/user/coupon/UserCoupon/index')
this.$yrouter.push({ },
path: "/pages/order/MyOrder/index", goIntegral() {
query: { this.$yrouter.push('/pages/user/signIn/Integral/index')
type },
} goUserPromotion() {
}); this.$yrouter.push('/pages/user/promotion/UserPromotion/index')
}, },
goBindPhone() { goUserAccount() {
this.$yrouter.push({ this.$yrouter.push({
path: "/pages/user/BindingPhone/index", path: '/pages/user/UserAccount/index',
}); })
}, },
goUserCoupon() { goPersonalData() {
this.$yrouter.push("/pages/user/coupon/UserCoupon/index"); this.$yrouter.push('/pages/user/PersonalData/index')
}, },
goIntegral() { getPhoneNumber: function(e) {
this.$yrouter.push("/pages/user/signIn/Integral/index"); let thit = this
}, console.log(e)
goUserPromotion() { //
this.$yrouter.push("/pages/user/promotion/UserPromotion/index"); if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
}, uni.showLoading({
goUserAccount() { title: '绑定中',
this.$yrouter.push({ })
path: "/pages/user/UserAccount/index" wxappBindingPhone({
}); encryptedData: e.mp.detail.encryptedData,
}, iv: e.mp.detail.iv,
goPersonalData() { })
this.$yrouter.push("/pages/user/PersonalData/index");
},
getPhoneNumber: function (e) {
let thit = this;
//
if (e.mp.detail.errMsg == "getPhoneNumber:ok") {
uni.showLoading({
title: "绑定中"
});
bindingPhone({
encryptedData: e.mp.detail.encryptedData,
iv: e.mp.detail.iv
})
.then(res => {
// this.User();
thit.$store.dispatch("userInfo", true);
uni.hideLoading();
uni.showToast({
title: res.msg,
icon: "success",
duration: 2000
});
})
.catch(error => {
uni.hideLoading();
thit.$store.dispatch("userInfo", true);
console.log(error);
uni.showToast({
title: error.msg ||
error.response.data.msg ||
error.response.data.message,
icon: "none",
duration: 2000
});
});
// //
// uni.getProvider({
// service: "oauth",
// success: function (res) {
// // h5
// if (res.provider) {
// uni.login({
// success: loginRes => {
// bindingPhone({
// code: loginRes.code,
// encryptedData: e.mp.detail.encryptedData,
// iv: e.mp.detail.iv
// })
// .then(res => {
// // this.User();
// thit.$store.dispatch("userInfo", true);
// uni.hideLoading();
// uni.showToast({
// title: res.msg,
// icon: "success",
// duration: 2000
// });
// })
// .catch(error => {
// uni.hideLoading();
// thit.$store.dispatch("userInfo", true);
// console.log(error);
// uni.showToast({
// title: error.msg ||
// error.response.data.msg ||
// error.response.data.message,
// icon: "none",
// duration: 2000
// });
// });
// },
// fail() {
// reject("");
// }
// });
// }
// },
// fail() {
// reject("");
// }
// });
} else {
uni.showToast({
title: "已拒绝授权",
icon: "none",
duration: 2000
});
}
},
changeswitch: function (data) {
this.switchActive = data;
},
MenuUser: function () {
let that = this;
getMenuUser()
.then(res => { .then(res => {
uni.hideLoading(); // this.User();
that.MyMenus = res.data.routine_my_menus; thit.$store.dispatch('userInfo', true)
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'success',
duration: 2000,
})
}) })
.catch(error => { .catch(error => {
uni.hideLoading(); uni.hideLoading()
console.log(error); thit.$store.dispatch('userInfo', true)
}); console.log(error)
},
goPages: function (index) {
let url = this.MyMenus[index].uniapp_url;
if (
url === "/pages/user/promotion/UserPromotion/index" &&
this.userInfo.statu === 1
) {
if (!this.userInfo.isPromoter) {
uni.showToast({ uni.showToast({
title: "您还没有推广权限!!", title: error.msg || error.response.data.msg || error.response.data.message,
icon: "none", icon: 'none',
duration: 2000 duration: 2000,
}); })
return; })
} // //
} // uni.getProvider({
// service: "oauth",
if ( // success: function (res) {
url === "/pages/orderAdmin/OrderIndex/index" && // // h5
!this.userInfo.adminid // if (res.provider) {
) { // uni.login({
uni.showToast({ // success: loginRes => {
title: "您还不是管理员!!", // bindingPhone({
icon: "none", // code: loginRes.code,
duration: 2000 // encryptedData: e.mp.detail.encryptedData,
}); // iv: e.mp.detail.iv
return; // })
} // .then(res => {
console.log(this.userInfo) // // this.User();
if (url === "/pages/orderAdmin/OrderCancellation/index" && !this.userInfo.checkStatus) { // thit.$store.dispatch("userInfo", true);
// uni.hideLoading();
// uni.showToast({
// title: res.msg,
// icon: "success",
// duration: 2000
// });
// })
// .catch(error => {
// uni.hideLoading();
// thit.$store.dispatch("userInfo", true);
// console.log(error);
// uni.showToast({
// title: error.msg ||
// error.response.data.msg ||
// error.response.data.message,
// icon: "none",
// duration: 2000
// });
// });
// },
// fail() {
// reject("");
// }
// });
// }
// },
// fail() {
// reject("");
// }
// });
} else {
uni.showToast({
title: '已拒绝授权',
icon: 'none',
duration: 2000,
})
}
},
changeswitch: function(data) {
this.switchActive = data
},
MenuUser: function() {
let that = this
getMenuUser()
.then(res => {
uni.hideLoading()
that.MyMenus = res.data.routine_my_menus
})
.catch(error => {
uni.hideLoading()
console.log(error)
})
},
goPages: function(index) {
let url = this.MyMenus[index].uniapp_url
if (url === '/pages/user/promotion/UserPromotion/index' && this.userInfo.statu === 1) {
if (!this.userInfo.isPromoter) {
uni.showToast({ uni.showToast({
title: "您没有核销权限,请后台店员设置!!", title: '您还没有推广权限!!',
icon: "none", icon: 'none',
duration: 2000 duration: 2000,
}); })
return; return
} }
}
this.$yrouter.push({ if (url === '/pages/orderAdmin/OrderIndex/index' && !this.userInfo.adminid) {
path: this.MyMenus[index].uniapp_url uni.showToast({
}); title: '您还不是管理员!!',
}, icon: 'none',
goPages2: function () { duration: 2000,
this.$yrouter.push({ })
path: "/pages/shop/GoodsList/index", return
query: {
// id: 0,
title: '积分商城',
isIntegral: true,
}
});
} }
}, console.log(this.userInfo)
watch: { if (url === '/pages/orderAdmin/OrderCancellation/index' && !this.userInfo.checkStatus) {
userInfo() { uni.showToast({
this.MenuUser(); title: '您没有核销权限,请后台店员设置!!',
icon: 'none',
duration: 2000,
})
return
} }
this.$yrouter.push({
path: this.MyMenus[index].uniapp_url,
})
}, },
onShow() { goPages2: function() {
if (this.$store.getters.token) { this.$yrouter.push({
// path: '/pages/shop/GoodsList/index',
uni.showLoading({ query: {
title: "加载中" // id: 0,
}); title: '积分商城',
this.$store.dispatch("getUser", true); isIntegral: true,
this.MenuUser(); },
this.isWeixin = isWeixin(); })
} },
},
watch: {
userInfo() {
this.MenuUser()
}, },
onHide() { },
console.log("离开用户中心"); onShow() {
this.updateAuthorizationPage(false); if (this.$store.getters.token) {
//
uni.showLoading({
title: '加载中',
})
this.$store.dispatch('getUser', true)
this.MenuUser()
this.isWeixin = isWeixin()
} }
}; },
onHide() {
console.log('离开用户中心')
this.updateAuthorizationPage(false)
},
}
</script> </script>
<style lang="less"> <style lang="less">
.footer-line-height { .footer-line-height {
height: 1 * 100rpx; height: 1 * 100rpx;
} }
.order-status-num { .order-status-num {
min-width: 0.33 * 100rpx; min-width: 0.33 * 100rpx;
background-color: #fff; background-color: #fff;
color: #eb3729; color: #eb3729;
border-radius: 15px; border-radius: 15px;
position: absolute; position: absolute;
right: -0.14 * 100rpx; right: -0.14 * 100rpx;
top: -0.15 * 100rpx; top: -0.15 * 100rpx;
font-size: 0.2 * 100rpx; font-size: 0.2 * 100rpx;
padding: 0 0.08 * 100rpx; padding: 0 0.08 * 100rpx;
border: 1px solid #eb3729; border: 1px solid #eb3729;
} }
.pictrue { .pictrue {
position: relative; position: relative;
} }
.switch-h5 { .switch-h5 {
margin-left: 0.2 * 100rpx; margin-left: 0.2 * 100rpx;
} }
.binding { .binding {
margin-top: 0.1 * 100rpx; margin-top: 0.1 * 100rpx;
display: inline-block; display: inline-block;
padding: 0.05 * 100rpx 0.2 * 100rpx; padding: 0.05 * 100rpx 0.2 * 100rpx;
background-color: #ca1f10; background-color: #ca1f10;
border-radius: 50px; border-radius: 50px;
font-size: 0.22 * 100rpx; font-size: 0.22 * 100rpx;
line-height: 1.5; line-height: 1.5;
border: 1px solid #e8695e; border: 1px solid #e8695e;
color: #ffffff; color: #ffffff;
} }
.by { .by {
text-align: center; text-align: center;
padding: 30rpx 0; padding: 30rpx 0;
} }
.by-text { .by-text {
text-align: center; text-align: center;
font-size: 24rpx; font-size: 24rpx;
} }
</style> </style>

1854
utils/index.js

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save