wx-csbwg-minapp/src/components/FooterProtocol/index.tsx

import { View, Text, ITouchEvent } from "@tarojs/components";
import Taro, { FC } from "@tarojs/taro";
import classNames from "classnames";
import React from "react";
import { AtIcon } from "taro-ui";
import "./index.scss";

export interface FooterProtocolProps {
  style?: React.CSSProperties;
  checked: boolean;
  setChecked: Function;
}

export const FooterProtocol: FC<FooterProtocolProps> = ({
  style,
  checked,
  setChecked,
}) => {
  const handleClick = () => {
    setChecked(!checked);
  };

  const goDetail = (e: ITouchEvent, id: number) => {
    e.stopPropagation();

    Taro.navigateTo({
      url: `/subModule/pages/protocol/index?id=${id}`,
    });
  };

  return (
    <View
      className={classNames("footer-protocol", { checked })}
      style={style}
      onClick={handleClick}
    >
      <View className="footer-protocol__checkbox">
        {checked && <AtIcon value="check" size={8} color="#589498" />}
      </View>
      阅读并同意
      <Text className="primary" onClick={(e) => goDetail(e, 2)}>
        《用户服务协议》
      </Text>
      及
      <Text className="primary" onClick={(e) => goDetail(e, 3)}>
        《个人信息保护政策》
      </Text>
    </View>
  );
};