liebao-web/src/components/settingComponents/deliverySetting.vue

<template>
  <div class="delivery-content">
    <div>
      <!-- <el-button type="primary">保存操作</el-button> -->
    </div>
    <div class="recommend">
      <div class="title">
        <!-- <el-button type="primary" @click.stop="toPay">发起支付</el-button> -->
        <span>推荐/屏蔽运力</span>
        <span>用户选择非聚合配送发单时，优先选中的运力置顶显示，提高您的下单效率</span>
      </div>
      <div class="delivery-list">
        <div @click="changeStatus(v.deliveryId)" class="item" v-for="(v,i) in list" :key="i">
          <img :src="v.pcLogo" class="icon" />
          <div v-if="shieldDeliveryIds.includes(String(v.deliveryId))" class="mask mantle">
            {{v.name}}已屏蔽
          </div>
          <div v-if="billDeliveryIds.includes(String(v.deliveryId))" class="mask recommend-delivery">
            {{v.name}}已推荐
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="请选择对当前运力的操作！" :visible.sync="centerDialogVisible" width="600px" center>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="changeDelivery(1)">推荐运力</el-button>
        <el-button type="danger" @click="changeDelivery(2)">屏蔽运力</el-button>
        <el-button type="primary" @click="changeDelivery(3)">重置运力</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDeliveryFloorList,
  getConfig,
  updateConfig,
} from "../../api/setting.js";
export default {
  data() {
    return {
      form: "",
      list: [],
      billDeliveryIds: [], // 推荐运力ID
      shieldDeliveryIds: [], // 屏蔽运力ID
      centerDialogVisible: false,
    };
  },
  created() {
    this.getDeliveryFloorList();
    this.getConfig();
  },
  mounted() {},
  methods: {
    changeStatus(id) {
      this.id = id;
      this.centerDialogVisible = true;
    },
    changeDelivery(type) {
      console.log(2222);
      // 推荐该运力
      if (type === 1) {
        this.shieldDeliveryIds = this.shieldDeliveryIds.filter((v) => {
          return v !== String(this.id);
        });
        this.billDeliveryIds.push(String(this.id));
        this.billDeliveryIds = [...new Set(this.billDeliveryIds)];
      }
      // 屏蔽该运力
      if (type === 2) {
        this.billDeliveryIds = this.billDeliveryIds.filter((v) => {
          return v !== String(this.id);
        });
        this.shieldDeliveryIds.push(String(this.id));
        this.shieldDeliveryIds = [...new Set(this.shieldDeliveryIds)];
      }
      // 恢复为普通运力
      if (type === 3) {
        this.billDeliveryIds = this.billDeliveryIds.filter((v) => {
          return v !== String(this.id);
        });
        this.shieldDeliveryIds = this.shieldDeliveryIds.filter((v) => {
          return v !== String(this.id);
        });
      }
      this.updateConfig();
    },
    getDeliveryFloorList() {
      getDeliveryFloorList().then((res) => {
        if (res.code === 200) {
          // 电脑端暂时不支持货拉拉
          this.list = res.data.filter((v) => {
            return v.type !== 12;
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    getConfig() {
      getConfig().then((res) => {
        if (res.code === 200) {
          this.billDeliveryIds = res.data.billDeliveryIds
            ? res.data.billDeliveryIds.split(",")
            : [];
          this.shieldDeliveryIds = res.data.shieldDeliveryIds
            ? res.data.shieldDeliveryIds.split(",")
            : [];
          let a = new Set(this.shieldDeliveryIds);
          let b = new Set(this.billDeliveryIds);
          let difference = new Set([...a].filter((x) => !b.has(x)));
          this.shieldDeliveryIds = [...difference];
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.centerDialogVisible = false;
      });
    },
    updateConfig() {
      let billDeliveryIds = this.billDeliveryIds.toString();
      let shieldDeliveryIds = this.shieldDeliveryIds.toString();
      updateConfig({ billDeliveryIds, shieldDeliveryIds }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "修改成功！",
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.getConfig();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.delivery-content {
  .recommend {
    background-color: #fff;
    margin-top: 10px;
    .title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #333333;
      height: 55px;
      line-height: 55px;
      box-sizing: border-box;
      padding: 0 18px;
      border-bottom: 1px solid #eee;
      span:nth-child(2) {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #b1b1b1;
      }
    }
    .delivery-list {
      display: flex;
      flex-wrap: wrap;
      padding: 30px 18px 0;
      .item {
        position: relative;
        cursor: pointer;
        margin: 0 30px 30px 0;
        .mask {
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          top: 0;
          left: 0;
          width: 129px;
          height: 40px;
          background: #999;
          font-size: 14px;
          border-radius: 25px;
          opacity: 0.8;
        }
        .mantle {
          color: #fff;
        }
        .recommend-delivery {
          color: red;
        }
        .icon {
          width: 129px;
          height: 40px;
        }
      }
    }
  }
}
</style>