jsm-mall-h5-front/src/components/selectionWorkers.vue

<template>
  <view class="z-popup">
    <view class="zhuangtaitubiao" style="justify-content: flex-start !important">
      <view class="title">
        <tag
          style="
            background-image: linear-gradient(to bottom right, #7fdaff, #6da7ff);
            border-radius: 4rpx;
            box-sizing: border-box;
            padding: 10rpx;
            opacity: 0;
          "
        >
          <text style="color: #ffffff">{{ detail.orderSmallTypeText.slice(0, 2) }}</text>
        </tag>
        <view>
          {{ title }}
        </view>
        <tag
          style="
            background-image: linear-gradient(to bottom right, #7fdaff, #6da7ff);
            border-radius: 4rpx;
            box-sizing: border-box;
            padding: 10rpx;
          "
        >
          <text style="color: #ffffff">{{ detail.orderSmallTypeText.slice(0, 2) }}</text>
        </tag>
      </view>
      <!-- <view class="row">
        <view class="label">工单类型：</view>
        <view class="value">
          <tag
            style="
              background-image: linear-gradient(to bottom right, #7fdaff, #6da7ff);
              border-radius: 4rpx;
              box-sizing: border-box;
              padding: 10rpx;
            "
          >
            <text style="color: #ffffff">{{ detail.orderSmallTypeText.slice(0, 2) }}</text>
          </tag>
        </view>
      </view> -->
      <view class="row">
        <view class="label">客户名称：</view>
        <view class="value">{{ detail.userName }}</view>
      </view>
      <view class="row">
        <view class="label">客户电话：</view>
        <view class="value">{{ detail.userMobile }}</view>
      </view>
      <view class="row">
        <view class="label">客户地址：</view>
        <view class="value">{{ detail.address || detail.gpsAddress }}</view>
      </view>
      <view class="row" v-if="isShow && !!workerList.length">
        <view class="label">选择小工：</view>
        <view class="value price">
          <checkbox-group @change="changeXz" style="width: 100%">
            <label
              v-for="(item, index) in workerList"
              :key="index"
              style="width: 50%; display: inline-block; margin-bottom: 20rpx"
            >
              <checkbox :value="item.workerId" :checked="item.isSelect" />{{ item.workerName }}
            </label>
          </checkbox-group>
        </view>
      </view>
      <view class="row" v-if="isShow && !workerList.length">
        <view style="color: red" v-if="detail.needSlave">您当前没有组队小工,此单必须要选小工</view>
        <view style="color: red" v-else>您当前没有组队小工</view>
      </view>
      <view class="kakakakak">
        <u-button text="取消" @click="quxiao"></u-button>
        <view style="min-width: 30rpx"></view>
        <u-button
          v-if="detail.needSlave ? !!workerList.length : true"
          type="primary"
          text="确认"
          @click="querenss"
        ></u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: [String],
      default: '接收确认'
    },
    detail: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: [String, Number],
      default: 0
    },
    callback: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      isShow: false,
      workerList: [],
      checkboxValues: []
    }
  },
  mounted() {
    this.getBrandList()
  },
  methods: {
    getBrandList() {
      if (this?.detail?.id) {
        this.$api
          .post('/pg/order/base/slave/worker/team', {
            orderBaseId: this?.detail?.id
          })
          .then(res => {
            this.isShow = true
            this.workerList = res.data
          })
      }
    },
    changeXz(v) {
      this.checkboxValues = v.target.value
    },
    querenss() {
      if (this.type == 1) {
        // 接单
        this.$api
          .post('/pg/order/base/rece', {
            orderBaseId: this.detail.id,
            workerList: (this.checkboxValues || []).join(',')
          })
          .then(res => {
            this.callback?.()
          })
      } else if (this.type == 2) {
        // 抢单
        this.$api
          .post('/pg/order/base/qd', {
            orderBaseId: this.detail.id,
            workerList: (this.checkboxValues || []).join(',')
          })
          .then(res => {
            this.callback?.()
          })
      } else if (this.type == 3) {
        // 更换
        this.$api
          .post('/pg/order/base/change/slave/worker/team', {
            orderBaseId: this.detail.id,
            workerList: (this.checkboxValues || []).join(',')
          })
          .then(res => {
            this.callback?.()
          })
      }
    },
    quxiao() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="scss">
.z-popup {
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100vh;
  z-index: 1000000000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: top 0.5s;
  box-sizing: border-box;
  padding: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .zhuangtaitubiao {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 30rpx;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .title {
    font-size: 28rpx;
    font-weight: bold;
    align-items: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .row {
    display: flex;
    align-items: left;
    margin-top: 30rpx;
    width: 100%;
    .label {
      color: $sec-font;
      min-width: 160rpx;
    }
    .price {
      width: 100%;
    }
  }
  .kakakakak {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40rpx;
  }
}
</style>