完成了登录模块
This commit is contained in:
49
pages/projectModule/promoPop/promoPop.js
Normal file
49
pages/projectModule/promoPop/promoPop.js
Normal file
@ -0,0 +1,49 @@
|
||||
// promoPop/promoPop.js
|
||||
Component({
|
||||
properties: {
|
||||
show: { // 控制显示/隐藏
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
qrcode: { // 二维码图片
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
link: { // 推广链接
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
closeIcon: { // 关闭按钮图片
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击遮罩或关闭按钮关闭弹窗
|
||||
close() {
|
||||
this.triggerEvent('close');
|
||||
},
|
||||
// 放大二维码
|
||||
previewQrcode() {
|
||||
if (this.data.qrcode) {
|
||||
wx.previewImage({
|
||||
urls: [this.data.qrcode]
|
||||
});
|
||||
}
|
||||
},
|
||||
// 复制推广链接
|
||||
copyLink() {
|
||||
if (this.data.link) {
|
||||
wx.setClipboardData({
|
||||
data: this.data.link,
|
||||
success: () => {
|
||||
wx.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
4
pages/projectModule/promoPop/promoPop.json
Normal file
4
pages/projectModule/promoPop/promoPop.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
32
pages/projectModule/promoPop/promoPop.wxml
Normal file
32
pages/projectModule/promoPop/promoPop.wxml
Normal file
@ -0,0 +1,32 @@
|
||||
<!-- promoPop/promoPop.wxml -->
|
||||
<view>
|
||||
<!-- 遮罩层,点击即可关闭弹窗 -->
|
||||
<view class="promo-mask" wx:if="{{show}}" bindtap="close"></view>
|
||||
|
||||
<!-- 弹窗内容 -->
|
||||
<view class="flex-col page" wx:if="{{show}}">
|
||||
<view class="flex-col self-stretch section">
|
||||
<text class="self-center text">作业码</text>
|
||||
<text class="self-center font text_2 mt-23">引导用户通过扫描此码来完成相应的任务</text>
|
||||
<view class="flex-col self-stretch group mt-23">
|
||||
<image
|
||||
class="self-center image"
|
||||
src="{{qrcode}}"
|
||||
bindtap="previewQrcode"
|
||||
/>
|
||||
<view class="mt-20 flex-col items-start self-stretch">
|
||||
<text class="font text_3">点击二维码放大,长按保存</text>
|
||||
<view class="flex-col justify-start items-center text-wrapper mt-19" bindtap="copyLink">
|
||||
<text class="font text_4">复制推广链接</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右下角关闭按钮 -->
|
||||
<image
|
||||
class="self-center image_2 mt-21"
|
||||
src="{{closeIcon}}"
|
||||
bindtap="close"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
110
pages/projectModule/promoPop/promoPop.wxss
Normal file
110
pages/projectModule/promoPop/promoPop.wxss
Normal file
@ -0,0 +1,110 @@
|
||||
@import "../../../app.wxss";
|
||||
|
||||
.mt-23 {
|
||||
margin-top: 53.57rpx;
|
||||
}
|
||||
.mt-19 {
|
||||
margin-top: 44.25rpx;
|
||||
}
|
||||
.mt-21 {
|
||||
margin-top: 48.91rpx;
|
||||
}
|
||||
|
||||
/* 遮罩层样式,必须加,确保弹窗浮于上层并居中 */
|
||||
.promo-mask {
|
||||
position: fixed;
|
||||
left: 0; top: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.45); /* 比 0.5 更柔和 */
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* 弹窗整体居中 */
|
||||
.page {
|
||||
position: fixed;
|
||||
top: 45%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10000;
|
||||
width: 600rpx; /* 推荐设置定宽,防止弹窗太大 */
|
||||
max-width: 90vw;
|
||||
padding-bottom: 0; /* 去掉原有多余 padding */
|
||||
background-color: transparent;
|
||||
overflow: visible;
|
||||
border-radius: 32rpx;
|
||||
}
|
||||
|
||||
/* 弹窗内部内容区域 */
|
||||
.section {
|
||||
padding: 60rpx 40rpx 40rpx 40rpx; /* 优化内边距 */
|
||||
background-color: #fff9e5;
|
||||
border-radius: 32rpx;
|
||||
box-shadow: 0 16rpx 64rpx 0 rgba(0,0,0,0.15);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #ff6f00;
|
||||
font-size: 50rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 64rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.font {
|
||||
font-size: 34rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.text_2 {
|
||||
color: #ff9800;
|
||||
margin-top: 16rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.group {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.image {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
margin: 40rpx auto 0;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(255, 111, 0, 0.08);
|
||||
background: #fff;
|
||||
display: block;
|
||||
}
|
||||
.text_3 {
|
||||
color: #000;
|
||||
line-height: 40rpx;
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.text-wrapper {
|
||||
margin: 32rpx auto 0;
|
||||
padding: 22rpx 0;
|
||||
background-color: #ffb300;
|
||||
border-radius: 93.17rpx;
|
||||
width: 280rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255,179,0,0.07);
|
||||
cursor: pointer;
|
||||
}
|
||||
.text_4 {
|
||||
color: #fff;
|
||||
line-height: 36rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 关闭按钮右下角浮动 */
|
||||
.image_2 {
|
||||
width: 67.55rpx;
|
||||
height: 67.55rpx;
|
||||
position: absolute;
|
||||
bottom: -100rpx;
|
||||
z-index: 10100;
|
||||
cursor: pointer;
|
||||
}
|
Reference in New Issue
Block a user