admin1/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 08:56:35 +08:00
parent fc3ba7e04b
commit 0a77ba1515
12 changed files with 458 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
pages/personCenter/component/InvitationCodePop/InvitationCodePop.js Normal file
View File

@ -0,0 +1,24 @@
// pages/personCenter/component/InvitationCodePop/InvitationCodePop.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})

4
pages/personCenter/component/InvitationCodePop/InvitationCodePop.json Normal file
View File

@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

32
pages/personCenter/component/InvitationCodePop/InvitationCodePop.wxml Normal file
View 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/personCenter/component/InvitationCodePop/InvitationCodePop.wxss Normal file
View 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;
}

24
pages/personCenter/component/commissionPop/commissionPop.js Normal file
View File

@ -0,0 +1,24 @@
// pages/personCenter/component/commissionPop/commissionPop.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})

4
pages/personCenter/component/commissionPop/commissionPop.json Normal file
View File

@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

16
pages/personCenter/component/commissionPop/commissionPop.wxml Normal file
View File

@ -0,0 +1,16 @@
<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>
</view>
</view>

53
pages/personCenter/component/commissionPop/commissionPop.wxss Normal file
View File

@ -0,0 +1,53 @@
.mt-17 {
margin-top: 31.88rpx;
}
.section {
margin-left: 52.5rpx;
margin-right: 50.63rpx;
padding: 44.04rpx 38.44rpx 41.25rpx;
background-color: #ffffff;
border-radius: 18.75rpx;
}
.text {
color: #000000;
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 27.84rpx;
}
.font {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
color: #000000;
}
.text_2 {
line-height: 24.34rpx;
}
.text_3 {
margin-right: 9.28rpx;
line-height: 19.93rpx;
}
.group {
line-height: 21.06rpx;
}
.font_2 {
font-size: 22.5rpx;
font-family: SourceHanSansCN;
line-height: 21.06rpx;
}
.text_4 {
color: #000000;
}
.text_5 {
color: #ff5733;
line-height: 17.08rpx;
}
.text-wrapper {
padding: 20.85rpx 0 16.44rpx;
background-color: #ff8d1a;
border-radius: 93.75rpx;
width: 255rpx;
}
.text_6 {
color: #ffffff;
line-height: 20.83rpx;
}

24
pages/personCenter/component/commissionRatePop/commissionRatePop.js Normal file
View File

@ -0,0 +1,24 @@
// pages/personCenter/component/commissionRatePop/commissionRatePop.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})

4
pages/personCenter/component/commissionRatePop/commissionRatePop.json Normal file
View File

@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

45
pages/personCenter/component/commissionRatePop/commissionRatePop.wxml Normal file
View File

@ -0,0 +1,45 @@
<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>
</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"></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>

118
pages/personCenter/component/commissionRatePop/commissionRatePop.wxss Normal file
View File

@ -0,0 +1,118 @@
.mt-13 {
margin-top: 24.38rpx;
}
.ml-7 {
margin-left: 13.13rpx;
}
.section {
margin-left: 52.5rpx;
margin-right: 50.63rpx;
padding: 29.06rpx 35.63rpx 26.25rpx;
background-color: #ffffff;
border-radius: 18.75rpx;
}
.font_2 {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 22.76rpx;
color: #000000;
}
.text_2 {
line-height: 24.96rpx;
}
.section_2 {
padding: 35.46rpx 59.23rpx 60rpx 81.17rpx;
background-color: #f5f5f5;
border-radius: 18.75rpx;
}
.text_4 {
line-height: 24.3rpx;
}
.text_3 {
line-height: 31.88rpx;
width: 223.13rpx;
}
.group {
margin-top: 46.41rpx;
}
.text_5 {
line-height: 24.41rpx;
}
.text-wrapper {
margin-right: 12.02rpx;
padding: 17.89rpx 0 13.73rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
width: 211.88rpx;
height: 54.38rpx;
}
.text_6 {
margin-left: 16.5rpx;
}
.group_2 {
margin-top: 54.38rpx;
}
.text_7 {
line-height: 24.34rpx;
}
.text_8 {
margin-left: 18.38rpx;
}
.font {
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 22.76rpx;
color: #000000;
}
.text {
line-height: 27.9rpx;
}
.group_3 {
margin-top: 45rpx;
}
.text_10 {
line-height: 24.52rpx;
}
.group_4 {
width: 223.31rpx;
}
.text_9 {
line-height: 24.41rpx;
}
.text_11 {
line-height: 24.34rpx;
}
.text-wrapper_2 {
padding: 20.76rpx 0 16.44rpx;
background-color: #ff8d1a;
border-radius: 93.75rpx;
width: 206.25rpx;
}
.font_3 {
font-size: 22.5rpx;
font-family: SourceHanSansCN;
}
.text_12 {
color: #ffffff;
line-height: 20.93rpx;
}
.text-wrapper_3 {
padding: 20.89rpx 0 16.52rpx;
background-color: #f5f5f5;
border-radius: 93.75rpx;
width: 206.25rpx;
}
.text_13 {
color: #424242;
line-height: 20.72rpx;
}
.radio .wx-radio-input {
border-radius: 50%;
width: 30rpx;
height: 30rpx;
}
.radio_1 .wx-radio-input {
border-radius: 50%;
width: 30rpx;
height: 30rpx;
}