feat: 企微获客助手小程序 - 首页商品详情+遮蔽层跳转+工具箱
This commit is contained in:
陈誉午
@@ -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