<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 </button> </view> <view class="closeImg" @click="closeMask"> <! -- <image class="closeImg_image" src="/images/close.png"/> --> <view class="dele iconfont iconquxiao1" /> </view> </view>Copy the code

A data graph

// SWCH change switchEdit(e) {if (e.target.dataset. Id === 'is_self') {this.yzbobj.fieldid = e.target.dataset 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) } }, {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(' address ', Params). Then (res => {if (res.code === '200') {console.log(' success ')} this.flag = false})},Copy the code

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; } /* set the maskContent */. 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); }}}}Copy the code

The UI in figure