80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
<!--
|
||
组件功能： 解决原生组件，双向绑定问题。
|
||
@author terrfly
|
||
@site https://www.jeequan.com
|
||
@date 2022/11/18 14:32
|
||
-->
|
||
<template>
|
||
<view class="select-box" @click="changeFunc">
|
||
<button class="agree-item" id="agree-btn" open-type="agreePrivacyAuthorization"
|
||
@agreeprivacyauthorization="handAgree">
|
||
<image v-if="props.checked" class="select-img" src="@/static/login/selected.svg"></image>
|
||
<image v-else class="select-img" src="@/static/login/select.svg"></image>
|
||
</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref, onMounted } from 'vue'
|
||
|
||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||
const emit = defineEmits(['update:checked'])
|
||
onMounted(() => {
|
||
// #ifdef MP-WEIXIN
|
||
getPrivacy()
|
||
// #endif
|
||
})
|
||
// 定义组件参数
|
||
const props = defineProps({
|
||
|
||
checked: { type: Boolean, default: false },
|
||
|
||
})
|
||
const vdata = reactive({})
|
||
function changeFunc () {
|
||
emit('update:checked', !props.checked)
|
||
}
|
||
// 获取微信你用户是否同意过隐私政策
|
||
const getPrivacy = () => {
|
||
wx.getPrivacySetting({
|
||
success: (r) => {
|
||
Object.assign(vdata, r)
|
||
if (vdata.needAuthorization) {
|
||
wx.onNeedPrivacyAuthorization(res => {
|
||
vdata.resolve = res
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
const handAgree = () => {
|
||
// #ifdef MP-WEIXIN
|
||
if (vdata.needAuthorization) {
|
||
vdata.resolve({ buttonId: 'agree-btn', event: 'agree' })
|
||
}
|
||
// #endif
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.select-box {
|
||
display: inline;
|
||
|
||
.select-img {
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
}
|
||
}
|
||
|
||
.agree-item {
|
||
padding: 0;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
line-height: 0;
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
border-radius: 0;
|
||
background-color: transparent;
|
||
}
|
||
</style> |