jd_logistics/jd_logistics-app/components/agreeRecharge.vue

<template>
  <!-- 用户协议勾选 -->
  <view class="agree-row mt30">
    <u-checkbox
      :customStyle="{marginBottom: '8px'}"
      label="请阅读并同意"
      name="agree"
      usedAlone
      v-model:checked="aloneChecked"
      labelSize="12"
      @change="checkboxChange"
    >
    </u-checkbox>
    <text class="agree-text">
      <text class="protocol-link" @click="openProtocol()">《充值协议》</text> 
    </text>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useToast } from "@/hooks/useToast";
const { Toast } = useToast();

const emit = defineEmits(['setAloneChecked']);

// 协议勾选状态
const aloneChecked = ref(false);

function checkboxChange(e){
  emit('setAloneChecked', e);
}

// 模拟打开协议逻辑（实际可跳转 webview 或弹窗展示）
const openProtocol = (type) => {
  uni.navigateTo({
		url: '/pages/policy/recharge_policy'
	});
};
</script>

<style scoped lang="scss">

/* 协议勾选行 */
.agree-row {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  width: 100%;
  box-sizing: border-box;
}
.agree-checkbox {
  transform: scale(0.8);
  margin-right: 10rpx;
}
.agree-text {
  font-size: 24rpx;
  color: #666;
  line-height: 36rpx;
}
.protocol-link {
  color: $theme-color;
  /* text-decoration: underline; */
}

</style>