first

components/JeepayCheckbox/JeepayCheckbox.vue

@@ -0,0 +1,80 @@
+<!--
+  组件功能：  解决原生组件，双向绑定问题。 
+  @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>