You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
622 lines
16 KiB
622 lines
16 KiB
<template>
|
|
<view style="width:100%">
|
|
<block v-if="needAuth">
|
|
<view @tap.stop="toShowAuth">
|
|
<slot></slot>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view @tap.stop="go(1)">
|
|
<slot></slot>
|
|
</view>
|
|
</block>
|
|
|
|
<uni-popup ref="show_auth_item" :maskClick="false">
|
|
<view @tap.stop.prevent class="auth-box fill-base flex-column flex-center text-center radius-26">
|
|
<view class="space-md"></view>
|
|
<block v-if="pType == 'phone'">
|
|
<image mode="aspectFill" class="auth-img" :src="`https://lbqny.migugu.com/admin/public/auth.png`">
|
|
</image>
|
|
</block>
|
|
<view class="space-sm"></view>
|
|
<view class="f-caption" :style="{color:primaryColor}">{{contentList[pType][0]}}</view>
|
|
<view class="space-lg"></view>
|
|
<view class="space-lg"></view>
|
|
<block v-if="pType === 'phone'">
|
|
<button open-type="getPhoneNumber" hover-class="btn-hover" @getphonenumber="authPhone"
|
|
class="clear-btn flex-center auth-btn" :style="{background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`,color:'white'}">
|
|
{{btn_text||contentList[pType][1]}}
|
|
</button>
|
|
</block>
|
|
<block v-if="pType === 'setting'">
|
|
<button open-type="openSetting" hover-class="btn-hover" @opensetting="openSetting"
|
|
class="clear-btn flex-center auth-btn" :style="{background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`,color:'white'}">
|
|
{{btn_text||contentList[pType][1]}}
|
|
</button>
|
|
</block>
|
|
<view @tap.stop="go(pType == 'phone' && !userInfo.phone ? 2 : 1)" class="f-caption c-caption mt-md"
|
|
v-if="!pMust">{{pType=='userInfo'?'暂不授权':'暂不登录'}}</view>
|
|
<view class="space-md"></view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
|
|
<uni-popup ref="show_info_item" :maskClick="false">
|
|
<view @tap.stop.prevent class="common-popup-content popup-phone pd-lg flex-center flex-column fill-base">
|
|
<view class="f-md-title c-black">请填写用户信息</view>
|
|
<view class="space-lg pb-lg"></view>
|
|
<view class="space-lg pb-lg"></view>
|
|
<view class="flex-between" style="width:100%">
|
|
<view class="flex-y-center c-title">
|
|
<view class="c-warning">*</view>昵称
|
|
</view>
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<input v-model="infoForm.nickName" type="nickname" maxlength="15"
|
|
class="f-mini-title c-title text-right" style="width:80%" placeholder-class="c-placeholder"
|
|
:placeholder="infoRule[0].errorMsg" />
|
|
<!-- #endif -->
|
|
<!-- #ifndef MP-WEIXIN -->
|
|
<input v-model="infoForm.nickName" type="text" maxlength="15"
|
|
class="f-mini-title c-title text-right" style="width:80%" placeholder-class="c-placeholder"
|
|
:placeholder="infoRule[0].errorMsg" />
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="flex-between mt-md pt-md b-1px-t" style="width:100%">
|
|
<view class="flex-y-center c-title">
|
|
<view class="c-warning">*</view>头像
|
|
</view>
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
<image mode="aspectFill" class="avatar radius" :src="infoForm.avatarUrl || '/static/mine/default_user.png'"></image>
|
|
</button>
|
|
<!-- #endif -->
|
|
<!-- #ifndef MP-WEIXIN -->
|
|
<image @tap.stop="checkquanxian" mode="aspectFill" class="avatar radius" :src="infoForm.avatarUrl">
|
|
</image>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="button">
|
|
<view @tap.stop="$refs.show_info_item.close()" class="item-child">
|
|
取消
|
|
</view>
|
|
<view @tap.stop="submit('info')" class="item-child"
|
|
:style="{background: primaryColor,color:'#fff'}">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<uni-popup ref="show_phone_item" :maskClick="false">
|
|
<view @tap.stop.prevent class="common-popup-content popup-phone pd-lg flex-center flex-column fill-base">
|
|
<view class="f-md-title c-black">请输入手机号</view>
|
|
<view class="space-lg pb-lg"></view>
|
|
<view class="space-lg pb-lg"></view>
|
|
<view class="flex-center mb-lg">
|
|
<view class="input-info sm mr-md radius-16">
|
|
<input v-model="subForm.phone" type="number"
|
|
class="item-input flex-y-center pl-lg pr-lg f-sm-title c-title"
|
|
placeholder-class="c-placeholder" :placeholder="subRule[0].errorMsg" />
|
|
</view>
|
|
<view @tap="toSend" class="send-btn flex-center c-base radius-16"
|
|
:style="{background:primaryColor}">
|
|
{{authTime>0?`(${authTime}s)`:'发送'}}
|
|
</view>
|
|
</view>
|
|
<view class="input-info radius-16">
|
|
<input v-model="subForm.short_code" type="number"
|
|
class="item-input flex-y-center pl-lg pr-lg f-sm-title c-title" maxlength="6"
|
|
placeholder-class="c-placeholder" :placeholder="subRule[1].errorMsg" />
|
|
</view>
|
|
<view class="button">
|
|
<view @tap.stop="go(3)" class="item-child">
|
|
取消
|
|
</view>
|
|
<view @tap.stop="submit('sub')" class="item-child" :style="{background: primaryColor,color:'#fff'}">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<uni-popup ref="perpopup" type="top" :mask-click='false'>
|
|
<view class="permissions_box">
|
|
当您使用APP时，为了提供图片上传的功能，我们需要申请相机/存储权限。
|
|
</view>
|
|
</uni-popup>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapActions,
|
|
mapMutations,
|
|
} from "vuex"
|
|
import permision from '@/utils/permission.js'
|
|
export default {
|
|
components: {},
|
|
name: 'auth',
|
|
props: {
|
|
needAuth: {
|
|
type: Boolean,
|
|
default () {
|
|
return false
|
|
}
|
|
},
|
|
must: {
|
|
type: Boolean,
|
|
default () {
|
|
return false
|
|
}
|
|
},
|
|
userMust: {
|
|
type: Boolean,
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
showAuth: {
|
|
type: Boolean,
|
|
default () {
|
|
return false
|
|
}
|
|
},
|
|
type: {
|
|
type: String,
|
|
default () {
|
|
return 'phone'
|
|
}
|
|
},
|
|
btn_text: {
|
|
type: String,
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
haveGo: {
|
|
type: Boolean,
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
},
|
|
computed: mapState({
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
configInfo: state => state.config.configInfo,
|
|
commonOptions: state => state.user.commonOptions,
|
|
userInfo: state => state.user.userInfo,
|
|
}),
|
|
created() {
|
|
this.init();
|
|
},
|
|
data() {
|
|
return {
|
|
contentList: {
|
|
userInfo: ['尊贵的用户，获取授权是为了能更好的为你服务', '立即授权'],
|
|
phone: ['尊贵的用户，登录后我们才能更好的为你服务', '立即登录'],
|
|
setting: ['为了功能正常使用，你需要打开设置并开启获取相应权限', '打开设置'],
|
|
},
|
|
pType: '',
|
|
pMust: '',
|
|
authTime: 0,
|
|
timer: null,
|
|
subForm: {
|
|
phone: '',
|
|
short_code: ''
|
|
},
|
|
subRule: [{
|
|
name: "phone",
|
|
checkType: "isMobile",
|
|
errorMsg: "请输入手机号",
|
|
regText: "手机号"
|
|
}, {
|
|
name: "short_code",
|
|
checkType: "isNotNull",
|
|
errorMsg: "请输入短信验证码"
|
|
}],
|
|
infoForm: {
|
|
nickName: '',
|
|
avatarUrl: ''
|
|
},
|
|
infoRule: [{
|
|
name: "nickName",
|
|
checkType: "isNotNull",
|
|
errorMsg: "请输入用户昵称",
|
|
regType: 2
|
|
}, {
|
|
name: "avatarUrl",
|
|
checkType: "isNotNull",
|
|
errorMsg: "请上传用户头像"
|
|
}],
|
|
lockTap: false
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(['getUserInfo', 'getMineInfo', 'getAuthUserProfile', 'getAuthPhone', ]),
|
|
...mapMutations(['updateConfigItem', 'updateUserItem']),
|
|
init() {
|
|
let {
|
|
type,
|
|
must,
|
|
showAuth
|
|
} = this
|
|
this.$set(this, 'pType', type)
|
|
this.$set(this, 'pMust', must)
|
|
if (!showAuth) return
|
|
let refs_key = type === 'userInfo' ? 'show_info_item' : 'show_auth_item'
|
|
this.$refs[refs_key].open()
|
|
},
|
|
toShowAuth() {
|
|
let {
|
|
id: uid = 0,
|
|
phone = '',
|
|
} = this.userInfo
|
|
if (!uid) {
|
|
this.updateUserItem({
|
|
key: 'loginPage',
|
|
val: `/pages/mine?type=1`
|
|
})
|
|
this.$util.goUrl({
|
|
url: `/pages/login`
|
|
})
|
|
return
|
|
}
|
|
this.infoForm = this.$util.pick(this.userInfo, ['nickName',
|
|
'avatarUrl'
|
|
])
|
|
let type = !phone ? 'phone' : 'userInfo'
|
|
this.$set(this, 'pType', type)
|
|
let refs_key = 'show_info_item'
|
|
if (!phone) {
|
|
// #ifdef MP-WEIXIN
|
|
refs_key = 'show_auth_item'
|
|
// #endif
|
|
// #ifndef MP-WEIXIN
|
|
if (this.haveGo) {
|
|
refs_key = 'show_phone_item'
|
|
let {
|
|
short_code_status = 0
|
|
} = this.configInfo
|
|
if (!short_code_status) {
|
|
this.go(1)
|
|
return
|
|
}
|
|
}
|
|
// #endif
|
|
}
|
|
this.$refs[refs_key].open()
|
|
},
|
|
// 授权手机号
|
|
async authPhone(e) {
|
|
let {
|
|
pMust
|
|
} = this
|
|
let phone = await this.getAuthPhone({
|
|
e,
|
|
})
|
|
if (!phone) {
|
|
this.go(pMust ? 2 : 1)
|
|
return false
|
|
} else {
|
|
let {
|
|
nickName = '',
|
|
} = this.userInfo
|
|
if (nickName) {
|
|
this.go(1)
|
|
return
|
|
}
|
|
this.$set(this, 'pType', 'userInfo')
|
|
this.$set(this, 'pMust', this.userMust)
|
|
if (!this.pMust) return
|
|
this.$refs.show_info_item.open()
|
|
}
|
|
},
|
|
go(type = 1) {
|
|
this.lockTap = false
|
|
this.$emit(type == 1 ? 'go' : 'hide')
|
|
let refs_key = type == 3 ? 'show_phone_item' : type == 4 ? 'show_info_item' : 'show_auth_item'
|
|
let {
|
|
id: uid = 0
|
|
} = this.userInfo
|
|
if (uid) {
|
|
this.$refs[refs_key].close();
|
|
}
|
|
if (type != 3) return
|
|
this.toResetItem('sub')
|
|
},
|
|
// 重置数据
|
|
toResetItem(type) {
|
|
if (type == 'sub') {
|
|
this.timer && clearTimeout(this.timer)
|
|
this.authTime = 0
|
|
this.subForm = {
|
|
phone: '',
|
|
short_code: ''
|
|
}
|
|
return
|
|
}
|
|
this.infoForm = this.$util.pick(this.userInfo, ['nickName',
|
|
'avatarUrl'
|
|
])
|
|
},
|
|
//表单验证
|
|
validate(param, ruleType, is_send = false) {
|
|
let validate = new this.$util.Validate();
|
|
this[`${ruleType}Rule`].map(item => {
|
|
let {
|
|
name,
|
|
} = item
|
|
if (ruleType == 'sub' && name == 'short_code' && is_send) return
|
|
validate.add(param[name], item);
|
|
})
|
|
let message = validate.start();
|
|
return message;
|
|
},
|
|
// 发送验证码
|
|
async toSend() {
|
|
let {
|
|
authTime
|
|
} = this
|
|
if (authTime) return
|
|
let {
|
|
phone = ''
|
|
} = this.subForm
|
|
let msg = this.validate({
|
|
phone
|
|
}, 'sub', true);
|
|
if (msg) {
|
|
this.$util.showToast({
|
|
title: msg
|
|
});
|
|
return;
|
|
}
|
|
if (this.lockTap) return
|
|
this.lockTap = true
|
|
this.$util.showLoading()
|
|
try {
|
|
await this.$api.user.sendShortMsg({
|
|
phone
|
|
})
|
|
this.$util.hideAll()
|
|
this.lockTap = false
|
|
let time = 60
|
|
this.timer = setInterval(() => {
|
|
if (time === 0) {
|
|
clearInterval(this.timer)
|
|
return
|
|
}
|
|
time--
|
|
this.authTime = time
|
|
}, 1000)
|
|
} catch (e) {
|
|
setTimeout(() => {
|
|
this.lockTap = false
|
|
this.$util.hideAll()
|
|
}, 2000)
|
|
}
|
|
},
|
|
// 获取头像
|
|
onChooseAvatar(e) {
|
|
let {
|
|
avatarUrl
|
|
} = e.detail
|
|
this.infoForm.avatarUrl = avatarUrl
|
|
},
|
|
// toChooseImgimg(){
|
|
// let that=this
|
|
// const appAuthorizeSetting = uni.getAppAuthorizeSetting()
|
|
// console.log(9987,appAuthorizeSetting);
|
|
// if(appAuthorizeSetting.locationAuthorized!='authorized'){
|
|
// uni.showModal({
|
|
// title: '提示',
|
|
// content: '允许获取您的位置信息，以便获取您附近的服务人员，更好的为您服务',
|
|
// success: function (res) {
|
|
// if (res.confirm) {
|
|
// that.toChooseLocation(e)
|
|
// } else if (res.cancel) {
|
|
// console.log('用户点击取消');
|
|
// }
|
|
// }
|
|
// });
|
|
// }else{
|
|
// that.toChooseLocation(e)
|
|
// }
|
|
// },
|
|
async checkquanxian(){
|
|
let that = this;
|
|
if(uni.getSystemInfoSync().platform == 'android') {
|
|
plus.android.checkPermission('android.permission.WRITE_EXTERNAL_STORAGE',
|
|
granted => {
|
|
console.log(1,granted.checkResult)
|
|
if (granted.checkResult==-1){
|
|
that.$refs.perpopup.open('top')
|
|
}
|
|
},
|
|
error => {
|
|
console.error('Error checking permission:', error.message);
|
|
}
|
|
);
|
|
that.requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE')
|
|
}
|
|
},
|
|
async toChooseImg() {
|
|
|
|
let param = {
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album'],
|
|
}
|
|
let [res_upload, res_info] = await uni.chooseImage(param)
|
|
if (res_upload) return
|
|
let {
|
|
size = 0,
|
|
tempFiles,
|
|
tempFilePath = ''
|
|
} = res_info
|
|
// 格式化图片参数
|
|
this.$util.showLoading({
|
|
title: "上传中"
|
|
})
|
|
let {
|
|
attachment_path: path
|
|
} = await this.$api.base.uploadFile({
|
|
filePath: tempFiles[0].path,
|
|
formData: {
|
|
type: 'picture'
|
|
}
|
|
})
|
|
this.infoForm.avatarUrl = path
|
|
this.$util.hideAll()
|
|
},
|
|
async requestAndroidPermission(permisionID) {
|
|
let that = this;
|
|
console.log(permision)
|
|
var result = await permision.requestAndroidPermission(permisionID);
|
|
if(result != 1){
|
|
this.recorderAuthModal();
|
|
}else{
|
|
this.$refs.perpopup.close()
|
|
if(that.open_update_info == 0){
|
|
return;
|
|
}
|
|
that.toChooseImg()
|
|
}
|
|
},
|
|
recorderAuthModal: function () {
|
|
const that = this;
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '为了提供图片上传的功能，我们需要申请相机/存储权限，请您确认授权，否则无法使用该功能~',
|
|
cancelText: '关闭',
|
|
confirmText: '去授权',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
that.$refs.perpopup.close();
|
|
permision.gotoAppPermissionSetting()
|
|
}else{
|
|
that.$refs.perpopup.close();
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// sub 授权手机号，info 用户信息
|
|
async submit(formType) {
|
|
let param = this.$util.deepCopy(this[`${formType}Form`])
|
|
let msg = this.validate(param, formType);
|
|
if (msg) {
|
|
this.$util.showToast({
|
|
title: msg
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (formType == 'sub' && param.short_code.length != 6) {
|
|
this.$util.showToast({
|
|
title: `请输入6位数短信验证码`
|
|
})
|
|
return
|
|
}
|
|
|
|
if (formType == 'info' && (param.avatarUrl.includes('wxfile://') || param.avatarUrl.includes(
|
|
'//tmp/'))) {
|
|
let {
|
|
attachment_path: path
|
|
} = await this.$api.base.uploadFile({
|
|
filePath: param.avatarUrl,
|
|
formData: {
|
|
type: 'picture'
|
|
}
|
|
})
|
|
param.avatarUrl = path
|
|
}
|
|
|
|
if (this.lockTap) return
|
|
this.lockTap = true
|
|
this.$util.showLoading()
|
|
let methodModel = formType == 'sub' ? 'bindUserPhone' : 'userUpdate'
|
|
let refs_key = formType == 'sub' ? 'show_phone_item' : 'show_info_item'
|
|
try {
|
|
await this.$api.user[methodModel](param)
|
|
this.$util.hideAll()
|
|
this.lockTap = false
|
|
this.$refs[refs_key].close()
|
|
this.toResetItem(formType)
|
|
await this.getUserInfo()
|
|
setTimeout(() => {
|
|
this.$emit('go')
|
|
}, 500)
|
|
} catch (e) {
|
|
setTimeout(() => {
|
|
this.lockTap = false
|
|
this.$util.hideAll()
|
|
}, 2000)
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
.auth-box {
|
|
width: 630rpx;
|
|
height: auto;
|
|
padding: 30rpx;
|
|
|
|
.auth-img {
|
|
width: 322rpx;
|
|
height: 341rpx;
|
|
/* background: #f4f6f8; */
|
|
}
|
|
|
|
.auth-btn {
|
|
width: 367rpx;
|
|
height: 90rpx;
|
|
border-radius: 90rpx;
|
|
}
|
|
|
|
.auth-info {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background: #f4f6f8;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.popup-phone {
|
|
width: 630rpx;
|
|
|
|
.input-info {
|
|
width: 570rpx;
|
|
height: 90rpx;
|
|
background: #F7F7F7;
|
|
|
|
.item-input {
|
|
height: 90rpx;
|
|
font-size: 32rpx;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.input-info.sm {
|
|
width: 400rpx;
|
|
}
|
|
|
|
.send-btn {
|
|
width: 150rpx;
|
|
height: 90rpx;
|
|
}
|
|
}
|
|
.permissions_box{
|
|
padding: 200rpx 30rpx;
|
|
font-size: 30rpx;
|
|
line-height: 50rpx;
|
|
background-color: #fff;
|
|
}
|
|
</style> |