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