<view class="mask">
<view class="maskContent">
<view class="dlogtop">
<text>{{ acclist.stageName }}</text>
</view>
<view class="dlogcenter">
<view v-for="(item, index) in stageList" :key="index" class="dlogcenter-item">
<view class="accswitch">
<text>{{ item.name }}</text>
<switch
v-if="item.isShow"
:checked="item.status"
class="my-switch"
:data-id="item.fieldId"
:data-isshow="item.isShow"
:data-name="item.name"
color="#F1C242"
@change="switchEdit"
/>
</view>
</view>
</view>
<view class="accbottom">
<button class="isbutton" @click="showssubmit(stageList)">确定</button>
</view>
</view>
<view class="closeImg" @click="closeMask">
<!-- <image class="closeImg_image" src="/images/close.png"/> -->
<view class="dele iconfont iconquxiao1" />
</view>
</view>
数据图
// swch改变
switchEdit(e) {
if (e.target.dataset.id === 'is_self') {
this.yzbObj.fieldId = e.target.dataset.id
this.yzbObj.status = e.target.value
this.yzbObj.name = e.target.dataset.name
this.yzbObj.isShow = e.target.dataset.isshow
console.log(this.yzbObj)
}
if (e.target.dataset.id === 'is_zjx') {
this.zjxObj.fieldId = e.target.dataset.id
this.zjxObj.status = e.target.value
this.zjxObj.name = e.target.dataset.name
this.zjxObj.isShow = e.target.dataset.isshow
console.log(this.zjxObj)
}
},
// 提交状态
showssubmit() {
const data = []
if (this.yzbObj.status) {
data.push(this.yzbObj)
} else {
this.stageList.forEach(item => {
if (item.fieldId === 'is_self') {
data.push(item)
}
})
}
if (this.zjxObj.status) {
data.push(this.zjxObj)
} else {
this.stageList.forEach(item => {
if (item.fieldId === 'is_zjx') {
data.push(item)
}
})
}
// console.log(data)
// 传的参数
const params = {
stageId: '111',
setActivityVos: data,
planId: '111',
orderId: '111'
}
console.log(params)
this.$http.post('地址', params).then(res => {
if (res.code === '200') {
console.log('成功')
}
this.flag = false
})
},
css
/* 设置背景遮罩层样式 */
.mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.5);
display: flex;
// justify-content: center;
align-items: center;
flex-direction: column;
}
/* 设置遮罩内容样式 */
.maskContent {
margin-top: 243rpx;
background: #fff;
width: 596rpx;
height: 572rpx;
border-radius: 20px;
.dlogtop {
width: 523rpx;
height: 144rpx;
padding: 0 36rpx;
text-align: center;
line-height: 144rpx;
border-bottom: 2rpx solid rgba(221, 221, 221, 1);
text {
font-size: 36rpx;
font-family: PingFang SC;
font-weight: 400;
color: rgba(51, 51, 51, 1);
}
}
.dlogcenter {
height: 312rpx;
width: 596rpx;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
.dlogcenter-item {
.accswitch {
width: 380rpx;
height: 107rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 27rpx;
text {
// padding: 0rpx 26rpx 0rpx 46rpx;
padding-right: 27rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 400;
color: rgba(102, 102, 102, 1);
}
}
}
}
UI图