fs-uni-template/business/wx-login.vue

<template>
	<fs-modal v-model="modelValue" :showTitle="false" :showCancel="false" :showConfirm="false" :maskClickable="maskClickable">
		<view style="padding: 20rpx;">
			<view class="title bold" style="font-size: 18px;margin-bottom: 30rpx;">授权微信访问</view>
			<view class="content" style="font-size: 15px;">
				为了保护他人的隐私，授权后可查看对方的名片
			</view>
			<view class="wxlogin-btn">
				<fs-button full round type="success" @click="getUserProfile" v-if="canIUseGetUserProfile">授权微信</fs-button>
				<fs-button full round type="success" open-type="getUserInfo" @getuserinfo="getUserInfo" v-else>授权微信</fs-button>
			</view>
			<view class="footer">
				<fs-checkbox-group v-model="checkboxArray" checkedColorType="primary">
				  <fs-checkbox value="1">
						<view class="sub">
							同意<text @click="read('/modules/common/about/agreement')">《用户服务协议》</text>和<text @click="read('/modules/common/about/policy')">《隐私政策》</text>
						</view>
				  </fs-checkbox>
				</fs-checkbox-group>
			</view>
		</view>
	</fs-modal>
</template>

<script setup>
import { ref } from 'vue'
import { wxLogin } from '@/services/common'

const props = defineProps({
	modelValue: Boolean,
	maskClickable: {
		type: Boolean,
		default: true
	}
})
const emits = defineEmits(['update:modelValue', 'success'])

const checkboxArray = ref(['1'])

const canIUseGetUserProfile = ref(wx.getUserProfile ? true : false)
const getUserProfile = () => {
	if (!checkboxArray.value.length) {
		return uni.showToast({
			title: '请勾选用户协议和隐私政策',
			icon: 'none'
		})
	}
	
	wx.getUserProfile({
		desc: '用于完善会员资料',
	}).then(res => {
		login(res)
	})
}
const getUserInfo = e => {
	if (!checkboxArray.value.length) {
		return uni.showToast({
			title: '请先勾选用户协议和隐私政策',
			icon: 'none'
		})
	}
	
	login(e)
}

const closeModal = () => {
	emits('update:modelValue', false)
}

const login = data => {
	wxLogin(data).then(() => {
		closeModal()
		emits('success')
	}).catch(() => {
		closeModal()
	})
}

const read = url => {
	uni.navigateTo({
		url
	})
}
</script>

<style scoped>
.wxlogin-btn{
	margin: 30rpx 0;
}
</style>