小程序使用mpvue时switch状态问题

241 阅读1分钟
     <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图