微信小程序涉及到用户信息收集的地方,都需要同意协议,每次都要手动写一遍,好麻烦,干脆封装成一个小组件,直接复用好了。
使用
<agreement :select.sync="select"></agreement>
验证
if (!that.select) {
uni.showToast({
title: '请同意协议',
icon: 'none'
})
return
}
组件
<template>
<view>
<div class="instructions">
<image v-if="select" @click="getSelect"
src="https://cdn.hifreeter.com/xiaochengxu/static/pay/icon_selected.png" mode="widthFix"></image>
<image v-else @click="getSelect" src="https://cdn.hifreeter.com/xiaochengxu/static/pay/icon_select.png"
mode="widthFix"></image>
<text @click="getSelect">阅读并同意</text>
<text @click="gouserAgreement">「用户协议」</text>、
<text @click="goprivacy">「隐私政策」</text>
</div>
</view>
</template>
<script>
export default {
data() {
return {
list: [],
}
},
props: {
select: {
type: Boolean,
default () {
return false;
}
}
},
methods: {
gouserAgreement() {
uni.navigateTo({
url: '/packages/pages/my/userAgreement'
})
},
getSelect() {
this.$emit('update:select', !this.select)
},
goprivacy() {
uni.navigateTo({
url: '/packages/pages/my/privacy'
})
}
}
}
</script>
<style scoped lang="scss">
.instructions {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #7D7D7D;
margin-top: 32rpx;
image {
width: 24rpx;
margin-right: 6rpx;
}
}
</style>