feat: add trd-privacy component for example (#2434)

* feat: add trd-privacy component for example * feat: calculate current year
Tencent · Nov 15, 2023 · 690c430 · 690c430
1 parent 25335b2
commit 690c430
Show file tree

Hide file tree

Showing 8 changed files with 272 additions and 3 deletions.
diff --git a/example/components/trd-privacy/privacy.js b/example/components/trd-privacy/privacy.js
@@ -0,0 +1,60 @@
+// components/privacy/privacy.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    name: {
+      type: String,
+      value: '',
+    },
+    date: {
+      type: String,
+      value: '',
+    },
+    winStyle: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    win: false,
+    privacy: false,
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    showPrivacyDetail() {
+      this.setData({
+        win: false,
+        privacy: true,
+      });
+    },
+    privacyConfirm() {
+      this.setData({
+        privacy: false,
+        win: false,
+      });
+      wx.setStorageSync('TIMIShowPrivacy', true);
+    },
+    showPrivacyWin() {
+      this.setData({
+        win: true,
+      });
+    },
+  },
+  ready() {
+    const TIMIShowPrivacy = wx.getStorageSync('TIMIShowPrivacy');
+    if (!TIMIShowPrivacy) {
+      this.setData({
+        win: true,
+      });
+    }
+  },
+});
diff --git a/example/components/trd-privacy/privacy.json b/example/components/trd-privacy/privacy.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button"
+  }
+}
diff --git a/example/components/trd-privacy/privacy.wxml b/example/components/trd-privacy/privacy.wxml
@@ -0,0 +1,39 @@
+<view wx:if="{{privacy}}" class="privacy_wrap">
+  <view class="privacy_safe_area">
+    <view class="privacy_top">
+      <view class="privacy_title">{{name}}服务声明</view>
+      <view class="privacy_right">发布日期：{{date}}</view>
+      <view class="privacy_right">生效日期：{{date}}</view>
+    </view>
+    <view class="privacy_content">
+      <text class="privacy_bold">引言</text>
+      <text decode="{{true}}" class="privacy_normal"
+        >{{name}}是由深圳市腾讯计算机系统有限公司（以下简称“我们”）提供的产品，我们的注册地为深圳市南山区粤海街道麻岭社区科技中一路腾讯大厦35层。</text
+      >
+      <text decode="{{true}}" class="privacy_bold"
+        >我们在此特别声明：\n1.本小程序产品功能的实现不涉及收集和处理用户（以下简称“您”）的任何个人信息。\n2.如果我们更新、改进或修改小程序产品功能，并因此导致我们需要处理您的个人信息的，我们将会依据适用法律的要求对本声明进行修订，并将修订后的内容通过弹框等形式通知您并获得您同意。</text
+      >
+      <text decode="{{true}}" class="privacy_normal">
+        3.如果您对本声明有任何疑问或建议，您可以通过以下方式与我们取得联系：\n（1）将问题发送至Dataprivacy@tencent.com;\n（2）通过https://kf.qq.com/与我们联系；\n（3）将您的问题邮寄至下列地址：\n\n中国广东省深圳市南山区海天二路33号腾讯滨海大厦\n数据隐私保护部（收）\n邮编：518054\n\n我们将尽快审核所涉问题，并在15个工作日或法律法规规定的期限内予以反馈。
+      </text>
+    </view>
+    <view class="footer">
+      <t-button class="t-design-button" theme="primary" bindtap="privacyConfirm">我已知晓</t-button>
+    </view>
+  </view>
+</view>
+<view wx:if="{{win}}" class="privacy_tips_win">
+  <view class="privacy_win_content {{winStyle?'privacy_middle':''}}">
+    <view class="privacy_tips_content"
+      >我们将严格按照<text class="privacy_url" bindtap="showPrivacyDetail">《{{name}}服务声明》</text
+      >向您提供服务，不会收集和处理您的个人信息。</view
+    >
+    <view class="privacy_tips_content"
+      >如您对<text class="privacy_url" bindtap="showPrivacyDetail">《{{name}}服务声明》</text
+      >有任何疑问或建议，可以通过声明内的联系方式向我们反馈。</view
+    >
+    <view class="footer">
+      <t-button class="t-design-button" theme="primary" bindtap="privacyConfirm">我已知晓</t-button>
+    </view>
+  </view>
+</view>
diff --git a/example/components/trd-privacy/privacy.wxss b/example/components/trd-privacy/privacy.wxss
@@ -0,0 +1,137 @@
+/* components/privacy/privacy.wxss */
+.privacy_wrap {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 99999;
+  background-color: #fff;
+  color: #222;
+  font-size: 24rpx;
+}
+.privacy_safe_area {
+  width: 750rpx;
+  height: 1180rpx;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+.privacy_top {
+  padding: 50rpx 40rpx;
+  position: relative;
+  overflow: hidden;
+}
+.privacy_btn_back::before {
+  content: '<<';
+}
+.privacy_title {
+  height: 100%;
+  font-size: 32rpx;
+  font-weight: 700;
+  text-align: center;
+  line-height: 60rpx;
+}
+.privacy_right {
+  height: 48rpx;
+  line-height: 48rpx;
+  text-align: right;
+}
+.privacy_content {
+  height: 790rpx;
+  padding: 0 40rpx;
+  overflow: auto;
+  line-height: 32rpx;
+}
+.privacy_bold {
+  font-weight: 700;
+  display: inline-block;
+  padding-bottom: 12rpx;
+}
+.privacy_normal {
+  text-indent: 2em;
+  display: inline-block;
+  padding-bottom: 12rpx;
+}
+.privacy_btn_confirm {
+  width: 150rpx;
+  height: 92rpx;
+  padding: 0 85rpx;
+  border-radius: 16rpx;
+  border: #ccc solid 2rpx;
+  background-color: #06c15f;
+  font-size: 32rpx;
+  text-align: center;
+  line-height: 92rpx;
+  color: #fff;
+  margin: 30rpx auto 0;
+  text-indent: 0;
+}
+.privacy_tips_win {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 99999;
+  background: rgba(0, 0, 0, 0.75);
+  color: #222;
+  font-size: 28rpx;
+}
+.privacy_win_content {
+  width: 100vw;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 50rpx 40rpx;
+  text-indent: 2em;
+  animation: privacy_up 0.2s forwards;
+  transform: translateY(100%);
+}
+@keyframes privacy_up {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+.privacy_line {
+  display: inline-block;
+  vertical-align: middle;
+}
+.privacy_url {
+  color: #576b95;
+  text-indent: 0;
+  display: inline;
+  vertical-align: middle;
+}
+.privacy_tips_content {
+  line-height: 40rpx;
+  vertical-align: middle;
+}
+.privacy_middle {
+  width: 650rpx;
+  left: 50%;
+  bottom: 50%;
+  transform: translate(-50%, 50%);
+  border-radius: 24rpx;
+  animation: none;
+}
+
+.footer {
+  width: 100%;
+  margin-top: 30rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-indent: 0;
+}
+.t-design-button {
+  width: 300rpx;
+}
diff --git a/example/pages/home/home.json b/example/pages/home/home.json
@@ -1,6 +1,8 @@
 {
   "usingComponents": {
-    "pull-down-list": "../../components/pull-down-list/index"
+    "trd-privacy": "/components/trd-privacy/privacy",
+    "pull-down-list": "../../components/pull-down-list/index",
+    "t-footer": "tdesign-miniprogram/footer/footer"
   },
   "navigationBarTitleText": "TDesign UI",
   "navigationBarBackgroundColor": "#f6f6f6",

diff --git a/example/pages/home/home.less b/example/pages/home/home.less
@@ -8,7 +8,20 @@ page {
   padding-left: 16rpx * 2;
   padding-right: 16rpx * 2;
   padding-top: 24rpx * 2;
-  padding-bottom: 120rpx * 2;
+  padding-bottom: 24rpx * 2;
+}
+
+.footer {
+  padding: 16rpx 32rpx;
+  text-align: center;
+}
+
+.show_privacy {
+  color: #576b95;
+  text-align: right;
+  line-height: 50rpx;
+  font-size: 24rpx;
+  text-align: center;
 }
 
 .title-wrap {
@@ -25,7 +38,7 @@ page {
 }
 
 .desc {
-  color: rgba(0, 0, 0, .4);
+  color: rgba(0, 0, 0, 0.4);
   margin-top: 16rpx * 2;
   font-size: 14rpx * 2;
   font-weight: 400;

diff --git a/example/pages/home/home.ts b/example/pages/home/home.ts
@@ -3,6 +3,7 @@ import list from './data/index';
 Page({
   data: {
     list,
+    currentYear: new Date().getFullYear(),
   },
   onLoad(options) {
     const { path, q } = options;
@@ -17,6 +18,11 @@ Page({
         url: `/pages/${str.page}/${str.page}`,
       });
     }
+    this.trdPrivacy = this.selectComponent('#trdPrivacy');
+  },
+
+  showPrivacyWin() {
+    this.trdPrivacy.showPrivacyWin();
   },
 
   clickHandle(e) {

diff --git a/example/pages/home/home.wxml b/example/pages/home/home.wxml
@@ -12,3 +12,9 @@
     bind:click="clickHandle"
   />
 </view>
+
+<view class="footer">
+  <view class="show_privacy" bindtap="showPrivacyWin">《TDesign组件库服务声明》</view>
+  <t-footer text="Copyright © 1998 - {{currentYear}} Tencent. All Rights Reserved. 腾讯公司 版权所有"></t-footer>
+</view>
+<trd-privacy id="trdPrivacy" name="TDesign组件库" date="2023年11月14日" winStyle="{{winStyle}}"></trd-privacy>