clunt
/
dingdong-mall
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页登录改为组件方式，方便其他页面引用

This commit is contained in:
donqi 2022-07-01 17:31:51 +08:00
parent 36e75d8768
commit 022bb0b8e4
4 changed files with 132 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
components/vertify/vertify-login.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<view>
<!-- 模态框 -->
<view class="cu-modal" :class="isShow?'show':''">
<view class="cu-dialog">
<view class="padding-xl text-left">
<view>需先授权微信登录才可正常使用功能，小程序将获取并使用以下信息：</view>
<view>1.微信昵称</view>
<view>2.微信头像</view>
</view>
<view class="cu-bar bg-white">
<navigator class="modal-bottom-oper margin-0 flex-sub text-black" open-type="exit" target="miniProgram">拒绝授权
</navigator>
<view class="modal-bottom-oper margin-0 flex-sub text-main-color solid-left" @tap="confirm">确认授权</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'vertify-login',
emits: ['reload'],
data() {
return {
isShow: false
}
},
methods: {
showModal(e) {
this.isShow = true
},
hideModal(e) {
this.isShow = false;
},
confirm(e) {
this.$request.login().then(res => {
if (res) {
this.$emit('reload');
}
})
}
}
}
</script>
<style>
</style>

50
components/vertify/vertify-phone.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<view>
<!-- 模态框 -->
<view class="cu-modal" :class="isShow?'show':''">
<view class="cu-dialog">
<view class="padding-xl">
<view>授予小程序绑定微信手机号码的权限</view>
</view>
<view class="cu-bar bg-white">
<navigator class="modal-bottom-oper margin-0 flex-sub text-black solid-right" open-type="exit" target="miniProgram">拒绝授权
</navigator>
<view class="margin-0 flex-sub">
<button class="margin-0 flex-sub cu-btn bg-white text-main-color"
open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确认授权</button>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'vertify-phone',
emits: ['reload'],
data() {
return {
isShow: false
}
},
methods: {
showModal(e) {
this.isShow = true
},
hideModal(e) {
this.isShow = false;
},
getPhoneNumber(e) {
this.$request.storagePhoneIntoUserInfo(e.detail.code).then(res => {
if (res) {
this.$emit('reload');
}
})
}
}
}
</script>
<style>
</style>

6
main.js
View File

@ -7,10 +7,14 @@ import Data from './common/js/data.js';
import globalFun from './common/js/glogalFun.js';
import validate from './common/js/validate.js';
import request from './common/js/request.js';
import globalData from './common/js/globalData.js';
import globalData from './common/js/globalData.js';
import vertifyLogin from '@/components/vertify/vertify-login.vue';
import vertifyPhone from '@/components/vertify/vertify-phone.vue';
Vue.component('cu-custom', CuCustom)
Vue.component('confirm-modal', ConfirmModal);
Vue.component('vertify-login', vertifyLogin);
Vue.component('vertify-phone', vertifyPhone);
const data = type => {
//模拟异步请求数据

87
pages/index/home.vue
View File

@ -79,38 +79,10 @@
<!-- 热门服务 -->
<vertical-goods-card :goodsInfos="hotGoods" :multiPicMode="true" title="大家都在买">
</vertical-goods-card>
</view>
<!-- 强制要求用户授权登录的弹窗 -->
<view class="cu-modal" :class="isAuthWxLoginModal?'show':''">
<view class="cu-dialog">
<view class="padding-xl text-left">
<view>需先授权微信登录才可正常使用功能，小程序将获取并使用以下信息：</view>
<view>1.微信昵称</view>
<view>2.微信头像</view>
</view>
<view class="cu-bar bg-white">
<navigator class="modal-bottom-oper margin-0 flex-sub text-black" open-type="exit" target="miniProgram">拒绝授权
</navigator>
<view class="modal-bottom-oper margin-0 flex-sub text-main-color solid-left" @tap="authWxLogin">确认授权</view>
</view>
</view>
</view>
<!-- 手机号授予 -->
<view class="cu-modal" :class="isAuthWxPhoneModal?'show':''">
<view class="cu-dialog">
<view class="padding-xl">
<view>授予小程序绑定微信手机号码的权限</view>
</view>
<view class="cu-bar bg-white">
<navigator class="modal-bottom-oper margin-0 flex-sub text-black solid-right" open-type="exit" target="miniProgram">拒绝授权
</navigator>
<view class="margin-0 flex-sub">
<button class="margin-0 flex-sub cu-btn bg-white text-main-color"
open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确认授权</button>
</view>
</view>
</view>
</view>
</view>
<vertify-login ref="vertifyLogin" @reload="loadData"></vertify-login>
<vertify-phone ref="vertifyPhone" @reload="loadData"></vertify-phone>
</view>
</template>
@ -133,8 +105,6 @@
hotGoods: [],
discountGoods: {},
InputBottom: 0,
isAuthWxLoginModal: false,
isAuthWxPhoneModal: false,
searchInfo: {},
areaList: [],
areaMultiIndex: [0, 0, 0],
@ -155,17 +125,9 @@
mask: true,
title: '加载中'
})
// 更新缓存中的userInfo
let res = await this.$request.storageExistUser();
// 获取缓存中的userInfo
let curUserInfo = this.$request.getCurUserInfo();
this.isAuthWxLoginModal = curUserInfo && curUserInfo.openId ? false : true;
if (this.isAuthWxLoginModal) {
return;
}
this.isAuthWxPhoneModal = !curUserInfo.phone ? true : false;
if (this.isAuthWxPhoneModal) {
return;
let loginRes = this.authLogin();
if (!loginRes) {
return;
}
uni.hideLoading();
@ -187,6 +149,27 @@
this.moduleBarInfos = await this.$api.data('moduleBarInfos');
// this.hotGoods = await this.$api.data('hotGoods');
// this.discountGoods = await this.$api.data('discountGoods');
},
async authLogin() {
// 更新缓存中的userInfo
let res = await this.$request.storageExistUser();
// 获取缓存中的userInfo
let curUserInfo = this.$request.getCurUserInfo();
// 校验提示登录
if (!curUserInfo || !curUserInfo.openId) {
this.$refs.vertifyLogin.showModal();
return false;
} else {
this.$refs.vertifyLogin.hideModal();
}
// 校验提示获取手机号码
if (!curUserInfo.phone) {
this.$refs.vertifyPhone.showModal();
return false;
} else {
this.$refs.vertifyPhone.hideModal();
}
return true;
},
bindEvent() {
uni.$on('index_showProductDetail', this.showDetails);
@ -306,20 +289,6 @@
uni.navigateTo({
url: '/pages/product/product-category'
})
},
authWxLogin() {
this.$request.login().then(res => {
if (res) {
this.loadData();
}
})
},
getPhoneNumber(e) {
this.$request.storagePhoneIntoUserInfo(e.detail.code).then(res => {
if (res) {
this.loadData();
}
})
}
}
}