auth-btn.vue 3.2 KB
Newer Older
芊里 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<template>
	<view class="flex flex-row justify-center align-center flex-wrap auth-box">
		<!-- <image :src="item.image" v-for="(item, index) in providerList" :key="item.value" @click="clickItem" class="auth-logo hidden"></image> -->
		<image ref="logo" :src="item.image" v-for="(item, index) in providerList" :key="item.value" @click="clickItem"
			class="auth-logo auth-logo-shadow hidden"></image>
		<view ref="more" class="flex justify-center align-center auth-more" @click="startAnimation">
			<text class="font-bolder font-50">···</text>
		</view>
	</view>
</template>

<script>
	const animation = uni.requireNativePlugin('animation')
	export default {
		name: "auth-btn",
		data() {
			return {
芊里 已提交
18
				providerList: [],
芊里 已提交
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
			};
		},
		created() {
			this.initProvider();
			this.testInit();
		},
		methods: {
			/**
			 * 测试方法
			 */
			testInit() {
				const filters = ['apple', 'weixin', 'qq', 'sinaweibo'];
				this.providerList = [];
				filters.forEach(curProvider => {
					this.providerList.push({
						value: curProvider,
						image: '../../static/login/img/' + curProvider + '.png'
					});
				})

			},
			/**
			 * 初始化第三方登录
			 */
			initProvider() {
				return
				const filters = ['apple', 'weixin', 'qq', 'sinaweibo'];
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (res.provider && res.provider.length) {
							if (res.provider.indexOf('apple') !== -1) {
								this.hasAppleLogin = true;
							}
							for (let i = 0; i < res.provider.length; i++) {
								const curProvider = res.provider[i];
								if (~filters.indexOf(curProvider)) {
									this.providerList.push({
										value: curProvider,
										image: '/components/auth-btn/img/' + curProvider + '.png'
									});
								}
							}
							this.hasProvider = true;
						}
					},
					fail: (err) => {
						console.error('获取服务供应商失败:' + JSON.stringify(err));
					}
				});
			},
			clickItem(item) {
				this.$emit('login', item)
			},
			// 开始动画
			startAnimation() {
				let more = this.$refs.more;
				animation.transition(more, {
					styles: {
						opacity: '0'
					},
					duration: 100, //ms
					timingFunction: 'linear',
					delay: 0 //ms
				}, () => {});
				let logo = this.$refs.logo;
芊里 已提交
85 86 87 88 89
				
				let logo_w = uni.upx2px(parseInt(logo[0].style.width));
				let logo_m = logo_w/6;
				let logo_l = logo.length;
				let logo_c = (logo_l - 1)/2;
芊里 已提交
90
				logo.forEach((item, index)=>{
芊里 已提交
91
					let translateX = (logo_w + logo_m) * (index - logo_c);
芊里 已提交
92 93 94
					animation.transition(item, {
						styles: {
							opacity: '1',
芊里 已提交
95
							transform:`translateX(${translateX}px)`
芊里 已提交
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136
						},
						duration: 200, //ms
						timingFunction: 'linear',
						delay: 100 //ms
					}, () => {});
				})
			}
		}
	}
</script>

<style>
	@import url("../../common/myStyle.css");
	.auth-logo {
		width: 84rpx;
		height: 84rpx;
	}

	.hidden {
		opacity: 0;
	}

	.auth-box {
		position: relative;
		height: 84rpx;
		width: 750rpx;
	}

	.auth-logo-shadow {
		position: absolute;
	}

	.auth-more {
		position: absolute;
		width: 84rpx;
		height: 84rpx;
		border-radius: 45rpx;
		border-width: 2rpx;
		border-color: #000000;
	}
</style>