301 lines
7.3 KiB
Vue
301 lines
7.3 KiB
Vue
<template>
|
||
<block>
|
||
<!-- #ifdef APP-PLUS || MP-TOUTIAO -->
|
||
<button v-if="type==1" :class="['sqbtn',cname]"
|
||
:style="[{width:w+'rpx',height:h+'rpx',lineHeight:h+'rpx',},sname]" @click="getUserInfo">{{t}}</button>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-ALIPAY -->
|
||
<button v-if="type==1" :class="['sqbtn',cname]"
|
||
:style="[{width:w+'rpx',height:h+'rpx',lineHeight:h+'rpx',},sname]"
|
||
:open-type="api.platform=='ali'?'getAuthorize':'getUserInfo'" @getuserinfo="mpGetUserInfo" scope='userInfo'
|
||
@getAuthorize="onGetAuthorize">{{t}}</button>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN || MP-BAIDU -->
|
||
<button v-if="type==2" :class="['sqbtn',cname]"
|
||
:style="[{width:w+'rpx',height:h+'rpx',lineHeight:h+'rpx',},sname]" open-type="getPhoneNumber"
|
||
@getphonenumber="mpGetphonenumber">{{t}}</button>
|
||
<!-- #endif -->
|
||
<!-- 触发用户转发 -->
|
||
<!-- #ifndef H5 -->
|
||
<button @click="this.$emit('refresh')" hover-class='be' v-if="type==3" :class="['sqbtn',cname]"
|
||
:style="[{width:w+'rpx',height:h+'rpx',lineHeight:h+'rpx',},sname]" open-type="share">{{t}}</button>
|
||
<!-- #endif -->
|
||
<!-- #ifdef H5 -->
|
||
<button hover-class='be' v-if="type==3" :class="['sqbtn',cname]"
|
||
:style="[{width:w+'rpx',height:h+'rpx',lineHeight:h+'rpx',},sname]" @click="share">{{t}}</button>
|
||
<!-- #endif -->
|
||
<view v-if="type==4">
|
||
<mg-modal :ismr="true" v-model="show" width="600rpx" :z-index="3000">
|
||
<view class="bf bs30 sqtel t-c">
|
||
<view class="ptimg bsf ma">
|
||
<mg-img :src="system.icon"></mg-img>
|
||
</view>
|
||
<view class="f36 mt30 mb20 l-h1">{{system.name}}</view>
|
||
<view>绑定手机号后，将会获得更多权益哦！</view>
|
||
<!-- #ifdef MP-WEIXIN || MP-BAIDU|| MP-TOUTIAO -->
|
||
<button :disabled="loading" class="f30 telbtn cf" :style="{background:tColor}"
|
||
open-type="getPhoneNumber" @getphonenumber="mpGetphonenumber">立即绑定1</button>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
<button :disabled="loading" class="f30 telbtn cf" :style="{background:tColor}"
|
||
open-type="getAuthorize" scope='phoneNumber' @getAuthorize="getAlPhoneNumber">立即绑定</button>
|
||
<!-- #endif -->
|
||
</view>
|
||
</mg-modal>
|
||
</view>
|
||
</block>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapMutations,
|
||
mapActions
|
||
} from 'vuex'
|
||
import mgModal from '@/components/common/modal.vue'
|
||
export default {
|
||
name: 'sq-btn',
|
||
components: {
|
||
mgModal,
|
||
},
|
||
props: {
|
||
cname: '',
|
||
sname: '',
|
||
w: '',
|
||
h: '',
|
||
t: '',
|
||
type: {
|
||
type: String,
|
||
default: '1',
|
||
}, //1用户信息，2手机号3瓜分红包
|
||
storeid: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
value: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
}
|
||
},
|
||
computed: {
|
||
ptname() {
|
||
let t = ''
|
||
switch (this.api.platform) {
|
||
case 'mini':
|
||
t = '微信'
|
||
break;
|
||
case 'ali':
|
||
t = '支付宝'
|
||
break;
|
||
case 'baidu':
|
||
t = '百度'
|
||
break;
|
||
case 'toutiao':
|
||
t = '字节跳动'
|
||
break;
|
||
}
|
||
return t
|
||
},
|
||
show: {
|
||
get() {
|
||
return this.value;
|
||
},
|
||
set(newVal) {
|
||
this.$emit("input", newVal)
|
||
}
|
||
},
|
||
},
|
||
watch: {
|
||
// sname: {
|
||
// handler(newVal) {
|
||
// console.log('newVal', newVal)
|
||
// },
|
||
// immediate: true
|
||
// },
|
||
},
|
||
methods: {
|
||
share() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '点击右上角分享',
|
||
showCancel: false,
|
||
confirmText: '我知道了'
|
||
})
|
||
},
|
||
onGetAuthorize(res) {
|
||
// console.log('onGetAuthorize', res)
|
||
my.getOpenUserInfo({
|
||
fail: (res) => {},
|
||
success: (res) => {
|
||
// console.log('my.getOpenUserInfo', JSON.parse(res.response).response)
|
||
let result = JSON.parse(res.response).response
|
||
this.refreshUser({
|
||
storeId: this.storeid,
|
||
portrait: result.avatar,
|
||
userName: result.nickName,
|
||
userId: this.uId,
|
||
}).then(res => {
|
||
this.$emit('refresh')
|
||
})
|
||
}
|
||
});
|
||
},
|
||
getAlPhoneNumber() {
|
||
my.getPhoneNumber({
|
||
success: res => {
|
||
var resData = JSON.parse(res.response);
|
||
this.util.request({
|
||
url: this.api.jm,
|
||
method: 'POST',
|
||
data: {
|
||
data: resData.response
|
||
}
|
||
}).then(res => {
|
||
console.log('jm res', res)
|
||
if (res.data) {
|
||
this.show = false
|
||
if (this.type == 4) {
|
||
this.util.message('绑定成功', 1, 1000)
|
||
} else {
|
||
this.$emit('refresh', res.data)
|
||
}
|
||
this.refreshUser({
|
||
nomask: 1,
|
||
get: 1,
|
||
now: 1,
|
||
})
|
||
}
|
||
})
|
||
console.log('getAlPhoneNumber success', resData)
|
||
},
|
||
fail: res => {
|
||
console.log('getAlPhoneNumber fail', res)
|
||
}
|
||
})
|
||
},
|
||
// 获取用户信息 API 在小程序可直接使用，在 5+App 里面需要先登录才能调用
|
||
getUserInfo() {
|
||
uni.getUserInfo({
|
||
success: (result) => {
|
||
// #ifdef MP-TOUTIAO
|
||
let portrait = result.userInfo.avatarUrl,
|
||
userName = result.userInfo.nickName,
|
||
userId = this.uId
|
||
// #endif
|
||
this.refreshUser({
|
||
storeId: this.storeid,
|
||
portrait,
|
||
userName,
|
||
userId
|
||
}).then(res => {
|
||
this.$emit('refresh')
|
||
})
|
||
console.log('getUserInfo success', result);
|
||
},
|
||
fail: (error) => {
|
||
console.log('getUserInfo fail', error);
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '获取头像等信息失败',
|
||
showCancel: false
|
||
});
|
||
}
|
||
});
|
||
},
|
||
mpGetUserInfo(result) {
|
||
console.log('mpGetUserInfo', result);
|
||
if (result.detail.errMsg == 'getUserInfo:ok') {
|
||
let portrait = result.detail.userInfo.avatarUrl,
|
||
userName = result.detail.userInfo.nickName,
|
||
userId = this.uId
|
||
this.refreshUser({
|
||
storeId: this.storeid,
|
||
portrait,
|
||
userName,
|
||
userId
|
||
}).then(res => {
|
||
this.$emit('refresh')
|
||
})
|
||
console.log(portrait, userName, userId)
|
||
} else {
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '获取头像等信息失败',
|
||
showCancel: false
|
||
});
|
||
return;
|
||
}
|
||
},
|
||
mpGetphonenumber(result) {
|
||
this.loading = true
|
||
console.log('mpGetphonenumber', result);
|
||
if (result.detail.errMsg == 'getPhoneNumber:ok') {
|
||
let sessionKey = getApp().globalData.session_key,
|
||
data = result.detail.encryptedData,
|
||
iv = result.detail.iv,
|
||
userId = this.uId
|
||
this.util.request({
|
||
url: this.api.jm,
|
||
method: 'POST',
|
||
data: {
|
||
userId,
|
||
sessionKey,
|
||
data,
|
||
iv
|
||
}
|
||
}).then(res => {
|
||
this.loading = false
|
||
if (res.data) {
|
||
this.show = false
|
||
if (this.type == 4) {
|
||
this.util.message('绑定成功', 1, 1000)
|
||
} else {
|
||
this.$emit('refresh', res.data)
|
||
}
|
||
this.refreshUser({
|
||
nomask: 1,
|
||
get: 1,
|
||
now: 1,
|
||
})
|
||
}
|
||
console.log(res)
|
||
}).catch(() => {
|
||
this.loading = false
|
||
})
|
||
console.log(sessionKey, data, iv)
|
||
} else {
|
||
this.loading = false
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '授权手机号失败',
|
||
showCancel: false
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang='scss'>
|
||
.sqtel {
|
||
padding: 70rpx 40rpx;
|
||
}
|
||
|
||
.ptimg {
|
||
width: 136rpx;
|
||
height: 136rpx;
|
||
}
|
||
|
||
.telbtn {
|
||
line-height: 2.8;
|
||
margin-top: 70rpx;
|
||
}
|
||
|
||
/* #ifdef MP-ALIPAY*/
|
||
/* #endif */
|
||
</style> |