feat: 企微获客助手小程序 - 首页商品详情+遮蔽层跳转+工具箱
This commit is contained in:
陈誉午
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
},
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "颜色转换"
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
page {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.page-wrap {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
margin-bottom: 24rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.prefix {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.hex-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.rgb-inputs {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.rgb-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.rgb-label {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.rgb-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.result-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1a73e8;
|
||||
}
|
||||
|
||||
.color-preview {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 20rpx;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
// tools/color/index.ts
|
||||
Component({
|
||||
data: {
|
||||
hex: 'FF5000',
|
||||
rgb: 'rgb(255, 80, 0)',
|
||||
r: '255',
|
||||
g: '80',
|
||||
b: '0',
|
||||
hexFromRgb: 'FF5000',
|
||||
},
|
||||
methods: {
|
||||
onHexInput(e: any) {
|
||||
const hex = e.detail.value.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
||||
if (hex.length === 6) {
|
||||
const r = parseInt(hex.slice(0, 2), 16)
|
||||
const g = parseInt(hex.slice(2, 4), 16)
|
||||
const b = parseInt(hex.slice(4, 6), 16)
|
||||
this.setData({ hex, rgb: `rgb(${r}, ${g}, ${b})` })
|
||||
} else {
|
||||
this.setData({ hex, rgb: '' })
|
||||
}
|
||||
},
|
||||
onRInput(e: any) { this.updateRgb(e.detail.value, 'r') },
|
||||
onGInput(e: any) { this.updateRgb(e.detail.value, 'g') },
|
||||
onBInput(e: any) { this.updateRgb(e.detail.value, 'b') },
|
||||
updateRgb(val: string, key: string) {
|
||||
const v = Math.min(255, Math.max(0, parseInt(val) || 0))
|
||||
const data: any = { [key]: String(v) }
|
||||
const r = key === 'r' ? v : parseInt(String(this.data.r)) || 0
|
||||
const g = key === 'g' ? v : parseInt(String(this.data.g)) || 0
|
||||
const b = key === 'b' ? v : parseInt(String(this.data.b)) || 0
|
||||
const hex = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()
|
||||
data.hexFromRgb = hex
|
||||
this.setData(data)
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,40 @@
|
||||
<navigation-bar title="颜色转换" back="{{true}}" color="black" background="#FFF"></navigation-bar>
|
||||
<view class="page-wrap">
|
||||
<view class="section">
|
||||
<text class="section-title">HEX 转 RGB</text>
|
||||
<view class="input-row">
|
||||
<text class="prefix">#</text>
|
||||
<input class="hex-input" placeholder="FF5000" value="{{hex}}" bindinput="onHexInput" maxlength="6" />
|
||||
</view>
|
||||
<view class="result" wx:if="{{rgb}}">
|
||||
<text class="result-label">RGB：</text>
|
||||
<text class="result-value">{{rgb}}</text>
|
||||
</view>
|
||||
<view class="color-preview" style="background-color: #{{hex}};"></view>
|
||||
</view>
|
||||
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="section">
|
||||
<text class="section-title">RGB 转 HEX</text>
|
||||
<view class="rgb-inputs">
|
||||
<view class="rgb-item">
|
||||
<text class="rgb-label">R</text>
|
||||
<input class="rgb-input" value="{{r}}" bindinput="onRInput" type="number" maxlength="3" />
|
||||
</view>
|
||||
<view class="rgb-item">
|
||||
<text class="rgb-label">G</text>
|
||||
<input class="rgb-input" value="{{g}}" bindinput="onGInput" type="number" maxlength="3" />
|
||||
</view>
|
||||
<view class="rgb-item">
|
||||
<text class="rgb-label">B</text>
|
||||
<input class="rgb-input" value="{{b}}" bindinput="onBInput" type="number" maxlength="3" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="result" wx:if="{{hexFromRgb}}">
|
||||
<text class="result-label">HEX：</text>
|
||||
<text class="result-value">#{{hexFromRgb}}</text>
|
||||
</view>
|
||||
<view class="color-preview" style="background-color: #{{hexFromRgb}};"></view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
},
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "倒计时"
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
page {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.page-wrap {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
margin-bottom: 24rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.presets {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.preset {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
background-color: #f5f5f5;
|
||||
padding: 14rpx 28rpx;
|
||||
border-radius: 36rpx;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.preset-active {
|
||||
color: #1a73e8;
|
||||
background-color: #e8f0fe;
|
||||
border-color: #1a73e8;
|
||||
}
|
||||
|
||||
.timer-display {
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
.timer-min, .timer-sec {
|
||||
font-size: 100rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.timer-sep {
|
||||
font-size: 80rpx;
|
||||
font-weight: 300;
|
||||
color: #999;
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
|
||||
.timer-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
padding: 24rpx 0;
|
||||
border-radius: 44rpx;
|
||||
}
|
||||
|
||||
.action-start {
|
||||
background: linear-gradient(135deg, #1a73e8, #1557b0);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-pause {
|
||||
background: linear-gradient(135deg, #e8a020, #d4951a);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.action-resume {
|
||||
flex: 1;
|
||||
background: linear-gradient(135deg, #34a853, #2d8f47);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-reset {
|
||||
flex: 1;
|
||||
background-color: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
margin-top: 28rpx;
|
||||
height: 8rpx;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 4rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #1a73e8, #34a853);
|
||||
border-radius: 4rpx;
|
||||
transition: width 1s linear;
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
// tools/countdown/index.ts
|
||||
let timer: any = null
|
||||
|
||||
Component({
|
||||
data: {
|
||||
total: 0,
|
||||
left: 0,
|
||||
mm: '00',
|
||||
ss: '00',
|
||||
running: false,
|
||||
paused: false,
|
||||
presetIdx: -1,
|
||||
},
|
||||
lifetimes: {
|
||||
detached() {
|
||||
if (timer) clearInterval(timer)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setPreset(e: any) {
|
||||
const { idx, sec } = e.currentTarget.dataset
|
||||
if (timer) clearInterval(timer)
|
||||
const total = parseInt(sec)
|
||||
this.setData({
|
||||
total, left: total,
|
||||
mm: this.pad(Math.floor(total / 60)),
|
||||
ss: this.pad(total % 60),
|
||||
running: false, paused: false,
|
||||
presetIdx: parseInt(idx),
|
||||
})
|
||||
},
|
||||
start() {
|
||||
if (this.data.left <= 0) return
|
||||
this.setData({ running: true, paused: false })
|
||||
this.tick()
|
||||
},
|
||||
tick() {
|
||||
if (timer) clearInterval(timer)
|
||||
timer = setInterval(() => {
|
||||
const left = this.data.left - 1
|
||||
if (left <= 0) {
|
||||
clearInterval(timer)
|
||||
wx.vibrateShort({ type: 'heavy' })
|
||||
wx.showToast({ title: '时间到！', icon: 'none', duration: 3000 })
|
||||
this.setData({ left: 0, mm: '00', ss: '00', running: false, paused: false })
|
||||
return
|
||||
}
|
||||
this.setData({
|
||||
left,
|
||||
mm: this.pad(Math.floor(left / 60)),
|
||||
ss: this.pad(left % 60),
|
||||
})
|
||||
}, 1000)
|
||||
},
|
||||
pause() {
|
||||
if (timer) clearInterval(timer)
|
||||
this.setData({ running: false, paused: true })
|
||||
},
|
||||
resume() {
|
||||
this.setData({ running: true, paused: false })
|
||||
this.tick()
|
||||
},
|
||||
reset() {
|
||||
if (timer) clearInterval(timer)
|
||||
this.setData({
|
||||
left: this.data.total,
|
||||
mm: this.pad(Math.floor(this.data.total / 60)),
|
||||
ss: this.pad(this.data.total % 60),
|
||||
running: false, paused: false,
|
||||
})
|
||||
},
|
||||
pad(n: number) {
|
||||
return n < 10 ? '0' + n : String(n)
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,37 @@
|
||||
<navigation-bar title="倒计时" back="{{true}}" color="black" background="#FFF"></navigation-bar>
|
||||
<view class="page-wrap">
|
||||
<view class="section">
|
||||
<text class="section-title">设置倒计时</text>
|
||||
|
||||
<!-- 预设按钮 -->
|
||||
<view class="presets">
|
||||
<view class="preset {{presetIdx === 0 ? 'preset-active' : ''}}" bindtap="setPreset" data-idx="0" data-sec="30">30秒</view>
|
||||
<view class="preset {{presetIdx === 1 ? 'preset-active' : ''}}" bindtap="setPreset" data-idx="1" data-sec="60">1分钟</view>
|
||||
<view class="preset {{presetIdx === 2 ? 'preset-active' : ''}}" bindtap="setPreset" data-idx="2" data-sec="180">3分钟</view>
|
||||
<view class="preset {{presetIdx === 3 ? 'preset-active' : ''}}" bindtap="setPreset" data-idx="3" data-sec="300">5分钟</view>
|
||||
<view class="preset {{presetIdx === 4 ? 'preset-active' : ''}}" bindtap="setPreset" data-idx="4" data-sec="600">10分钟</view>
|
||||
</view>
|
||||
|
||||
<!-- 显示 -->
|
||||
<view class="timer-display">
|
||||
<text class="timer-min">{{mm}}</text>
|
||||
<text class="timer-sep">:</text>
|
||||
<text class="timer-sec">{{ss}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<view class="timer-actions">
|
||||
<view class="action-btn action-start" wx:if="{{!running && !paused}}" bindtap="start">开始</view>
|
||||
<view class="action-btn action-pause" wx:if="{{running}}" bindtap="pause">暂停</view>
|
||||
<view class="action-row" wx:if="{{running || paused}}">
|
||||
<view class="action-btn action-resume" wx:if="{{paused}}" bindtap="resume">继续</view>
|
||||
<view class="action-btn action-reset" bindtap="reset">重置</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 进度 -->
|
||||
<view class="progress-wrap" wx:if="{{total > 0}}">
|
||||
<view class="progress-bar" style="width: {{(left / total) * 100}}%;"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
},
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "工具箱"
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
page {
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.tools-page {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.tools-header {
|
||||
text-align: center;
|
||||
padding: 40rpx 0 48rpx;
|
||||
}
|
||||
|
||||
.tools-title {
|
||||
display: block;
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.tools-subtitle {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tools-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.tool-card {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.tool-card:active {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.tool-card-disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
font-size: 64rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.tool-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.tool-desc {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// tools/index.ts
|
||||
Component({
|
||||
methods: {
|
||||
goColor() { wx.navigateTo({ url: '/pages/tools/color/index' }) },
|
||||
goRandom() { wx.navigateTo({ url: '/pages/tools/random/index' }) },
|
||||
goCountdown() { wx.navigateTo({ url: '/pages/tools/countdown/index' }) },
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,30 @@
|
||||
<navigation-bar back="{{false}}" color="black" background="#FFF"></navigation-bar>
|
||||
<!-- 工具箱首页 -->
|
||||
<view class="tools-page">
|
||||
<view class="tools-header">
|
||||
<text class="tools-title">🛠️ 工具箱</text>
|
||||
</view>
|
||||
|
||||
<view class="tools-grid">
|
||||
<view class="tool-card" bindtap="goColor">
|
||||
<view class="tool-icon">🎨</view>
|
||||
<text class="tool-name">颜色转换</text>
|
||||
<text class="tool-desc">HEX / RGB 互转</text>
|
||||
</view>
|
||||
<view class="tool-card" bindtap="goRandom">
|
||||
<view class="tool-icon">🎲</view>
|
||||
<text class="tool-name">随机生成</text>
|
||||
<text class="tool-desc">数字 / 密码生成器</text>
|
||||
</view>
|
||||
<view class="tool-card" bindtap="goCountdown">
|
||||
<view class="tool-icon">⏱️</view>
|
||||
<text class="tool-name">倒计时</text>
|
||||
<text class="tool-desc">秒级倒计时器</text>
|
||||
</view>
|
||||
<view class="tool-card tool-card-disabled">
|
||||
<view class="tool-icon">📝</view>
|
||||
<text class="tool-name">更多工具</text>
|
||||
<text class="tool-desc">敬请期待</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
},
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "随机生成"
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
page {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.page-wrap {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
margin-bottom: 24rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.range-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.range-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.range-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.range-sep {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.range-input {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.options-input {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.result-box {
|
||||
background-color: #f0f7ff;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin: 20rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.result-num {
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
color: #1a73e8;
|
||||
}
|
||||
|
||||
.result-pwd {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1a73e8;
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: linear-gradient(135deg, #1a73e8, #1557b0);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
padding: 22rpx 0;
|
||||
border-radius: 44rpx;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
// tools/random/index.ts
|
||||
Component({
|
||||
data: {
|
||||
min: '1',
|
||||
max: '100',
|
||||
randomNum: '',
|
||||
pwdLen: '12',
|
||||
password: '',
|
||||
options: '',
|
||||
picked: '',
|
||||
},
|
||||
methods: {
|
||||
onMinInput(e: any) { this.setData({ min: e.detail.value }) },
|
||||
onMaxInput(e: any) { this.setData({ max: e.detail.value }) },
|
||||
genNumber() {
|
||||
const min = parseInt(this.data.min) || 1
|
||||
const max = parseInt(this.data.max) || 100
|
||||
const num = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
this.setData({ randomNum: String(num) })
|
||||
},
|
||||
onPwdLenInput(e: any) { this.setData({ pwdLen: e.detail.value }) },
|
||||
genPassword() {
|
||||
const len = parseInt(this.data.pwdLen) || 12
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*'
|
||||
let pwd = ''
|
||||
for (let i = 0; i < len; i++) { pwd += chars[Math.floor(Math.random() * chars.length)] }
|
||||
this.setData({ password: pwd })
|
||||
},
|
||||
|
||||
onOptionsInput(e: any) { this.setData({ options: e.detail.value }) },
|
||||
pickOne() {
|
||||
const arr = this.data.options.split(/[,，\s]+/).filter(Boolean)
|
||||
if (arr.length === 0) { wx.showToast({ title: '请先输入选项', icon: 'none' }); return }
|
||||
this.setData({ picked: arr[Math.floor(Math.random() * arr.length)] })
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,45 @@
|
||||
<navigation-bar title="随机生成" back="{{true}}" color="black" background="#FFF"></navigation-bar>
|
||||
<view class="page-wrap">
|
||||
<!-- 随机数字 -->
|
||||
<view class="section">
|
||||
<text class="section-title">随机数字</text>
|
||||
<view class="range-row">
|
||||
<view class="range-item">
|
||||
<text class="range-label">最小值</text>
|
||||
<input class="range-input" value="{{min}}" bindinput="onMinInput" type="number" />
|
||||
</view>
|
||||
<text class="range-sep">—</text>
|
||||
<view class="range-item">
|
||||
<text class="range-label">最大值</text>
|
||||
<input class="range-input" value="{{max}}" bindinput="onMaxInput" type="number" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="result-box" wx:if="{{randomNum !== ''}}">
|
||||
<text class="result-num">{{randomNum}}</text>
|
||||
</view>
|
||||
<view class="btn" bindtap="genNumber">生成随机数字</view>
|
||||
</view>
|
||||
|
||||
<!-- 随机密码 -->
|
||||
<view class="section">
|
||||
<text class="section-title">随机密码</text>
|
||||
<view class="range-item" style="margin-bottom: 20rpx;">
|
||||
<text class="range-label">密码长度</text>
|
||||
<input class="range-input" value="{{pwdLen}}" bindinput="onPwdLenInput" type="number" />
|
||||
</view>
|
||||
<view class="result-box" wx:if="{{password}}">
|
||||
<text class="result-pwd">{{password}}</text>
|
||||
</view>
|
||||
<view class="btn" bindtap="genPassword">生成随机密码</view>
|
||||
</view>
|
||||
|
||||
<!-- 随机选择 -->
|
||||
<view class="section">
|
||||
<text class="section-title">随机选择器</text>
|
||||
<textarea class="options-input" value="{{options}}" bindinput="onOptionsInput" placeholder="输入选项，用逗号分隔 例如：吃火锅,看电影,打游戏" />
|
||||
<view class="result-box" wx:if="{{picked}}">
|
||||
<text class="result-num">{{picked}}</text>
|
||||
</view>
|
||||
<view class="btn" bindtap="pickOne">随机选一个</view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user