完成小程序前端部分
This commit is contained in:
@ -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', {/*数据*/});
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
@ -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>
|
@ -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; /* 高度超出时滚动 */
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user