admin/qingcheng-xiaochengxu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成小程序前端部分

Browse Source
This commit is contained in:
chen-xin-zhi
2025-05-29 21:29:32 +08:00
parent 40faa24750
commit 48e92710d6
27 changed files with 576 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
pages/personCenter/component/InvitationCodePop/InvitationCodePop.js
View File

@ -1,24 +1,32 @@
// pages/personCenter/component/InvitationCodePop/InvitationCodePop.js
Component({
/**
* 组件的属性列表
*/
properties: {
// 接收传递进来的二维码图片路径
show: { // 控制显示/隐藏
type: Boolean,
value: false
},
qrcode: {
type: String,
value: ""
},
},
/**
* 组件的初始数据
*/
data: {
closeIcon: "./images/cha.png", // 关闭按钮的图标
},
/**
* 组件的方法列表
*/
methods: {
// 关闭弹窗
close() {
// 触发关闭弹窗事件
this.triggerEvent('close');
},
// 预览二维码
previewQrcode() {
wx.previewImage({
urls: [this.data.qrcode], // 预览图片
});
}
}
})
});

7
pages/personCenter/component/InvitationCodePop/InvitationCodePop.wxml
View File

@ -6,8 +6,8 @@
<!-- 弹窗内容 -->
<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>
<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"
@ -16,9 +16,6 @@
/>
<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>

2
pages/personCenter/component/InvitationCodePop/InvitationCodePop.wxss
View File

@ -1,4 +1,4 @@
@import "../../../app.wxss";
@import "../../../../app.wxss";
.mt-23 {
margin-top: 53.57rpx;

BIN
pages/personCenter/component/InvitationCodePop/images/cha.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

41
pages/personCenter/component/commissionPop/commissionPop.js
View File

@ -1,24 +1,57 @@
// pages/personCenter/component/commissionPop/commissionPop.js
Component({
/**
* 组件的属性列表
*/
properties: {
show: {
type: Boolean,
value: false,
},
},
/**
* 组件的初始数据
*/
data: {
commissionRate: "", // 用户输入的抽佣比例
},
/**
* 组件的方法列表
*/
methods: {
// 获取用户输入的比例
handleInput(e) {
this.setData({
commissionRate: e.detail.value,
});
},
}
// 提交设置
submit() {
const rate = parseFloat(this.data.commissionRate);
if (isNaN(rate) || rate <= 0 || rate > 5) {
wx.showToast({
title: `请输入有效的比例，最大为 5%`,
icon: 'none',
});
return;
}
// 触发父组件的事件，将设置的比例传递出去
this.triggerEvent('submit', {
commissionRate: rate,
});
// 关闭弹窗
this.triggerEvent('close');
},
// 关闭弹窗
close() {
this.triggerEvent('close');
}
}
})

31
pages/personCenter/component/commissionPop/commissionPop.wxml
View File

@ -1,16 +1,19 @@
<view class="flex-col section">
<text class="self-center text">一键设置</text>
<view class="flex-col self-stretch mt-36">
<view class="flex-row justify-between items-baseline self-stretch">
<input class="font text_2" placeholder="请设置抽佣比例" />
<text class="font text_3">%</text>
</view>
<view class="self-start group mt-17">
<text class="font_2 text_4">注意：最高抽成比例</text>
<text class="font_2 text_5">5%</text>
</view>
<view class="flex-col justify-start items-center self-center text-wrapper mt-17">
<text class="font_2 text_6">确认设置</text>
<view wx:if="{{show}}" class="popup-wrapper">
<view class="promo-mask" bindtap="close"></view>
<view class="flex-col section popup-content">
<text class="self-center text">一键设置</text>
<view class="flex-col self-stretch mt-36">
<view class="flex-row justify-between items-baseline self-stretch">
<input class="font text_2" placeholder="请设置抽佣比例" bindinput="handleInput" />
<text class="font text_3">%</text>
</view>
<view class="self-start group mt-17">
<text class="font_2 text_4">注意：最高抽成比例</text>
<text class="font_2 text_5">5%</text>
</view>
<view class="flex-col justify-start items-center self-center text-wrapper mt-17" bindtap="submit">
<text class="font_2 text_6">确认设置</text>
</view>
</view>
</view>
</view>
</view>

31
pages/personCenter/component/commissionPop/commissionPop.wxss
View File

@ -1,3 +1,4 @@
@import "../../../../app.wxss";
.mt-17 {
margin-top: 31.88rpx;
}
@ -50,4 +51,32 @@
.text_6 {
color: #ffffff;
line-height: 20.83rpx;
}
}
/* 弹窗整体容器，覆盖全屏，层级最高，居中弹窗 */
.popup-wrapper {
position: fixed;
top: -15%; left: 0; right: 0; bottom: 0;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
background: transparent; /* 透明，遮罩层单独控制 */
}
/* 遮罩层，覆盖全屏半透明黑色 */
.promo-mask {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.45);
z-index: 9999;
}
/* 弹窗内容的容器，承载你现有的.section */
.popup-content {
position: relative;
z-index: 10001; /* 比遮罩层高 */
max-width: 90vw;
width: 600rpx; /* 你可以根据需求调整 */
max-height: 90vh;
overflow-y: auto; /* 超高时滚动 */
}

28
pages/personCenter/component/commissionRatePop/commissionRatePop.js
View File

@ -1,24 +1,28 @@
// pages/personCenter/component/commissionRatePop/commissionRatePop.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
show: { // 控制显示/隐藏
type: Boolean,
value: false
},
},
/**
* 组件的方法列表
*/
methods: {
close() {
this.triggerEvent('close');
},
cancel() {
this.triggerEvent('cancel');
},
confirm() {
// 触发confirm事件带数据
this.triggerEvent('confirm', {/*数据*/});
},
}
})
})

83
pages/personCenter/component/commissionRatePop/commissionRatePop.wxml
View File

@ -1,45 +1,50 @@
<view class="flex-col section">
<text class="self-center font text">代理价设置</text>
<view class="flex-col self-stretch mt-24">
<view class="flex-col">
<text class="self-start font_2 text_2">我的价格0.30，我的抽成0.17元</text>
<view class="flex-col self-stretch section_2 mt-13">
<view class="flex-row justify-between items-center">
<text class="font_2 text_4">结算标准</text>
<text class="font_2 text_3">3.6元购买30元券包3.6元购买</text>
</view>
<view class="flex-row justify-between items-center group">
<text class="font_2 text_5">代理价</text>
<view class="flex-col justify-start items-start text-wrapper">
<input class="text_6 font" placeholder="0.30" />
<view wx:if="{{show}}" class="popup-wrapper">
<view class="promo-mask" bindtap="close"></view>
<view class="flex-col section popup-content">
<text class="self-center font text">代理价设置</text>
<view class="flex-col self-stretch mt-24">
<view class="flex-col">
<text class="self-start font_2 text_2">我的价格0.30，我的抽成0.17元</text>
<view class="flex-col self-stretch section_2 mt-13">
<view class="flex-row justify-between items-center">
<text class="font_2 text_4">结算标准</text>
<text class="font_2 text_3">3.6元购买30元券包3.6元购买</text>
</view>
<view class="flex-row justify-between items-center group">
<text class="font_2 text_5">代理价</text>
<view class="flex-col justify-start items-start text-wrapper">
<input class="text_6 font" placeholder="0.30" />
</view>
</view>
<view class="flex-row justify-between items-center group_2">
<text class="font_2 text_7">抽成比例</text>
<view class="flex-col justify-start items-start text-wrapper">
<input class="text_8 font" placeholder="0.30" />
</view>
</view>
<view class="flex-row justify-between items-center group_3">
<text class="font_2 text_10">设价方式</text>
<radio-group class="flex-col group_4">
<view class="flex-row items-center">
<radio class="radio" color="#FF8D1A"></radio>
<text class="font_2 text_9 ml-7">代理价</text>
</view>
<view class="flex-row items-center mt-14">
<radio class="radio_1" color="#FF8D1A"></radio>
<text class="font_2 text_11 ml-7">抽成比例</text>
</view>
</radio-group>
</view>
</view>
</view>
<view class="flex-row justify-between items-center group_2">
<text class="font_2 text_7">抽成比例</text>
<view class="flex-col justify-start items-start text-wrapper">
<input class="text_8 font" placeholder="0.30" />
<view class="flex-col items-center mt-22">
<view class="flex-col justify-start items-center text-wrapper_2"><text class="font_3 text_12">确定</text></view>
<view class="flex-col justify-start items-center text-wrapper_3 mt-12">
<text class="font_3 text_13">取消</text>
</view>
</view>
<view class="flex-row justify-between items-center group_3">
<text class="font_2 text_10">设价方式</text>
<radio-group class="flex-col group_4">
<view class="flex-row items-center">
<radio class="radio"></radio>
<text class="font_2 text_9 ml-7">代理价</text>
</view>
<view class="flex-row items-center mt-14">
<radio class="radio_1"></radio>
<text class="font_2 text_11 ml-7">抽成比例</text>
</view>
</radio-group>
</view>
</view>
</view>
<view class="flex-col items-center mt-22">
<view class="flex-col justify-start items-center text-wrapper_2"><text class="font_3 text_12">确定</text></view>
<view class="flex-col justify-start items-center text-wrapper_3 mt-12">
<text class="font_3 text_13">取消</text>
</view>
</view>
</view>
</view>
</view>

40
pages/personCenter/component/commissionRatePop/commissionRatePop.wxss
View File

@ -1,3 +1,4 @@
@import "../../../../app.wxss";
.mt-13 {
margin-top: 24.38rpx;
}
@ -40,11 +41,10 @@
}
.text-wrapper {
margin-right: 12.02rpx;
padding: 17.89rpx 0 13.73rpx;
padding: 13.89rpx 0 9.73rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
width: 211.88rpx;
height: 54.38rpx;
}
.text_6 {
margin-left: 16.5rpx;
@ -115,4 +115,38 @@
border-radius: 50%;
width: 30rpx;
height: 30rpx;
}
}
radio {
transform: scale(0.8); /* 调整为你需要的缩放比例 */
}
/* 弹窗外围容器，覆盖全屏并居中 */
.popup-wrapper {
position: fixed;
top: -10%; left: 0; right: 0; bottom: 0;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
background: transparent; /* 遮罩层单独负责 */
}
/* 遮罩层 */
.promo-mask {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.45);
z-index: 9999;
}
/* 弹窗内容容器，使用你现有的.section样式 */
.popup-content {
position: relative;
z-index: 10001;
max-width: 90vw;
width: 600rpx; /* 你可以根据需求调整 */
max-height: 90vh;
overflow-y: auto; /* 高度超出时滚动 */
}