onixbyte/miniapp-template-ts
Template
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加 page-container 组件并更新相关页面以使用该组件

Browse Source
This commit is contained in:
熊熊熊子路
2026-01-16 15:54:25 +08:00
parent b7a9123d55
commit 89d310250d
11 changed files with 319 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/date/date.json
+3 -1
View File
@@ -1,3 +1,5 @@
{
"usingComponents": {}
"usingComponents": {
"page-container": "../../components/page-container/page-container"
}
}
miniprogram/pages/date/date.scss
-12
View File
@@ -2,18 +2,6 @@
.container {
padding: 20rpx;
background-color: #f5f5f5;
min-height: 100vh;
}
.header {
margin-bottom: 30rpx;
text-align: center;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.section {
miniprogram/pages/date/date.wxml
+66 -68
View File
@@ -1,74 +1,72 @@
<!--pages/date/date.wxml-->
<view class="container">
<view class="header">
<text class="title">日期时间格式化示例</text>
</view>
<page-container title="日期时间格式化示例" backgroundColor="#123321" textColor="#ffffff">
<view class="container">
<!-- formatTime 函数示例 -->
<view class="section">
<view class="section-title">formatTime 函数示例</view>
<view class="section-desc">固定格式：YYYY/MM/DD HH:mm:ss</view>
<view class="example-list">
<view class="example-item" wx:for="{{formatTimeExamples}}" wx:key="label">
<view class="example-label">{{item.label}}：</view>
<view class="example-value">
<text class="result-text" selectable="{{true}}">{{item.value}}</text>
<text
class="copy-btn"
data-text="{{item.value}}"
bindtap="copyText"
wx:if="{{item.value}}"
>
复制
</text>
</view>
</view>
</view>
</view>
<!-- formatTime 函数示例 -->
<view class="section">
<view class="section-title">formatTime 函数示例</view>
<view class="section-desc">固定格式：YYYY/MM/DD HH:mm:ss</view>
<view class="example-list">
<view class="example-item" wx:for="{{formatTimeExamples}}" wx:key="label">
<view class="example-label">{{item.label}}：</view>
<view class="example-value">
<text class="result-text" selectable="{{true}}">{{item.value}}</text>
<text
class="copy-btn"
data-text="{{item.value}}"
bindtap="copyText"
wx:if="{{item.value}}"
>
复制
</text>
<!-- formatDateTime 函数示例 - 不同格式模板 -->
<view class="section">
<view class="section-title">formatDateTime 函数示例 - 不同格式模板</view>
<view class="section-desc">支持自定义格式模板，灵活配置日期时间显示格式</view>
<view class="example-list">
<view class="example-item" wx:for="{{formatDateTimeExamples}}" wx:key="label">
<view class="example-label">{{item.label}}</view>
<view class="example-format">格式模板：{{item.format}}</view>
<view class="example-value">
<text class="result-text" selectable="{{true}}">{{item.value}}</text>
<text
class="copy-btn"
data-text="{{item.value}}"
bindtap="copyText"
wx:if="{{item.value}}"
>
复制
</text>
</view>
</view>
</view>
</view>
<!-- formatDateTime 函数示例 - 不同输入类型 -->
<view class="section">
<view class="section-title">formatDateTime 函数示例 - 不同输入类型</view>
<view class="section-desc">支持 Date 对象、时间戳、日期字符串等多种输入类型</view>
<view class="example-list">
<view class="example-item" wx:for="{{inputTypeExamples}}" wx:key="label">
<view class="example-label">{{item.label}}</view>
<view class="example-format">输入：{{item.input}}</view>
<view class="example-value">
<text class="result-text" selectable="{{true}}">{{item.value}}</text>
<text
class="copy-btn"
data-text="{{item.value}}"
bindtap="copyText"
wx:if="{{item.value}}"
>
复制
</text>
</view>
</view>
</view>
</view>
</view>
<!-- formatDateTime 函数示例 - 不同格式模板 -->
<view class="section">
<view class="section-title">formatDateTime 函数示例 - 不同格式模板</view>
<view class="section-desc">支持自定义格式模板，灵活配置日期时间显示格式</view>
<view class="example-list">
<view class="example-item" wx:for="{{formatDateTimeExamples}}" wx:key="label">
<view class="example-label">{{item.label}}</view>
<view class="example-format">格式模板：{{item.format}}</view>
<view class="example-value">
<text class="result-text" selectable="{{true}}">{{item.value}}</text>
<text
class="copy-btn"
data-text="{{item.value}}"
bindtap="copyText"
wx:if="{{item.value}}"
>
复制
</text>
</view>
</view>
</view>
</view>
<!-- formatDateTime 函数示例 - 不同输入类型 -->
<view class="section">
<view class="section-title">formatDateTime 函数示例 - 不同输入类型</view>
<view class="section-desc">支持 Date 对象、时间戳、日期字符串等多种输入类型</view>
<view class="example-list">
<view class="example-item" wx:for="{{inputTypeExamples}}" wx:key="label">
<view class="example-label">{{item.label}}</view>
<view class="example-format">输入：{{item.input}}</view>
<view class="example-value">
<text class="result-text" selectable="{{true}}">{{item.value}}</text>
<text
class="copy-btn"
data-text="{{item.value}}"
bindtap="copyText"
wx:if="{{item.value}}"
>
复制
</text>
</view>
</view>
</view>
</view>
</view>
</page-container>
miniprogram/pages/login/login.json
+1
View File
@@ -3,6 +3,7 @@
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"usingComponents": {
"page-container": "../../components/page-container/page-container",
"t-input": "/miniprogram_npm/tdesign-miniprogram/input/input",
"t-button": "/miniprogram_npm/tdesign-miniprogram/button/button"
}
miniprogram/pages/login/login.scss
+1 -22
View File
@@ -2,32 +2,11 @@
// 容器样式
.login-container {
min-height: 100vh;
background: white;
background: #aabbcc;
padding: 40rpx 30rpx;
box-sizing: border-box;
}
// 头部标题区域
.header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 60rpx;
.title {
font-size: 48rpx;
font-weight: bold;
color: #333333;
margin-bottom: 20rpx;
}
.subtitle {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.8);
}
}
// 功能区块样式
.form-section {
background: #ffffff;
miniprogram/pages/login/login.wxml
+24 -28
View File
@@ -1,34 +1,30 @@
<!--pages/login/login.wxml-->
<view class="login-container">
<!-- 标题区域 -->
<view class="header">
<text class="title">Request.ts 使用示例</text>
<text class="subtitle">演示网络请求封装的各种用法</text>
</view>
<page-container title="Request 使用示例">
<view class="login-container">
<!-- 登录表单区域 -->
<view class="form-section">
<view class="section-title">1. POST 请求示例 - 登录</view>
<!-- 登录表单区域 -->
<view class="form-section">
<view class="section-title">1. POST 请求示例 - 登录</view>
<t-input
placeholder="请输入用户名"
value="{{username}}"
bind:change="onUsernameChange"
class="input-item"
clearable
/>
<t-input
placeholder="请输入用户名"
value="{{username}}"
bind:change="onUsernameChange"
class="input-item"
clearable
/>
<t-input
placeholder="请输入密码"
value="{{password}}"
type="password"
bind:change="onPasswordChange"
class="input-item"
clearable
/>
<t-input
placeholder="请输入密码"
value="{{password}}"
type="password"
bind:change="onPasswordChange"
class="input-item"
clearable
/>
<view class="button-group">
<t-button theme="primary" size="large" bind:tap="handleLogin" block> 登录 </t-button>
<view class="button-group">
<t-button theme="primary" size="large" bind:tap="handleLogin" block> 登录 </t-button>
</view>
</view>
</view>
</view>
</page-container>