Web_TracerMethodology/pages/configure/configure.vue

<template>
  <view class="configure-page">
    <view class="greyTitle">
      <text>为结果选项配置后续操作</text>
      <text class="recovery" @click="recoveryList">恢复初始配置</text>
    </view>
    <view class="configureCont">
      <view
        v-for="(item, index) in resultConfigList"
        :key="index"
        class="configure-cont"
        @click="changeIndex(index)"
      >
        <view class="contTitle">{{ item.name }}</view>
        <view class="contCon">
          <tm-radio-group
            :list="configList"
            label=""
            :defaultValue="item.resultType"
            @change="changeSelect"
            :setting="{
              value: 'value',
              name: 'label',
            }"
          />
        </view>
      </view>
    </view>
    <view class="sure-button">
      <button @click="sureList">保存</button>
    </view>
    <tm-tabbar />
  </view>
</template>

<script>
export default {
  data() {
    return {
      resultConfigList: [],
      configList: [
        {
          value: 1,
          label: "无需操作",
        },
        {
          value: 2,
          label: "需改善回复",
        },
        {
          value: 3,
          label: "需使用改善工具",
        },
      ],
      showPopup: false,
      radioVal: null,
      index: null,
      timer: null,
    };
  },
  created() {
    this.getResultConfig();
  },
  methods: {
    //获取最新配置
    getResultConfig() {
      this.$store
        .dispatch({
          type: "configure/commActions",
          payload: {
            key: "getResultConfig",
          },
        })
        .then((res) => {
          this.resultConfigList = res ? res : [];
        });
    },
    //恢复最初配置
    recoveryList() {
      this.$store
        .dispatch({
          type: "configure/commActions",
          payload: {
            key: "getDefault",
          },
        })
        .then((res) => {
          this.resultConfigList = res ? res : [];
        });
    },
    //保存配置
    sureList() {
      this.$store
        .dispatch({
          type: "configure/commActions",
          payload: {
            key: "postResultConfig",
            data: {
              list: this.resultConfigList,
            },
          },
        })
        .then(() => {
          this.getResultConfig();
          clearTimeout(this.timer);
        });
    },
    showConfig() {
      uni.navigateTo({
        url: "/pages/configure-detail/detail",
      });
    },
    changeSelect(selectVal, selectData, i) {
      this.timer = setTimeout(() => {
        this.resultConfigList[this.index].resultType = selectVal;
      }, 0);
    },
    changeIndex(index) {
      this.index = index;
    },
  },
  components: {},
};
</script>

<style lang="less">
.configure-page {
  height: 100%;
  background-color: #f5f6fa;
  .greyTitle {
    padding: 0rpx 25rpx;
    height: 105rpx;
    line-height: 105rpx;
    font-size: 30rpx;
    color: #292c33;
    .recovery {
      float: right;
      text-align: center;
      color: #7a8599;
      font-size: 22.5rpx;
    }
  }
  .configureCont {
    height: calc(100vh - 280rpx);
    overflow-y: auto;
  }
  .configure-cont {
    font-size: 22.5rpx;
    border-bottom: 0.62rpx solid #dadee6;
    background-color: #fff;
    .contTitle {
      padding: 25rpx 0rpx 15rpx 25rpx;
      font-size: 22.5rpx;
      color: #666f80;
      background-color: #f5f6fa;
    }
    .contCon {
      padding-left: 25rpx;
      color: #292c33;
    }
    .moreImg {
      margin-top: 31.23rpx;
      margin-right: 18.68rpx;
      padding: 1.89rpx 6.31rpx;
      float: right;
      width: 12.37rpx;
      height: 21.21rpx;
    }
  }
  .configure-cont:nth-child(6) {
    border-bottom: none;
  }
  .sure-button {
    width: 100%;
    position: fixed;
    bottom: 100rpx;
    button {
      width: 625rpx;
      height: 62.5rpx;
      line-height: 62.5rpx;
      border-radius: 37.5rpx;
      background-color: #3377ff;
      color: #fff;
      font-size: 22.5rpx;
    }
  }
}
</style>