jsm-mall-h5-front/src/packageMine/pages/masterGroup/createGroup.vue

<template>
  <zj-page-layout :hasFooter="true">
    <view class="form-container">
      <view class="item" @tap="isShowWebsitDialog = true">
        <view class="label"><text>*</text>所属网点</view>
        <view class="picker">
          <text class="value" v-if="websit">{{ websit.name }}</text>
          <text class="placeholder" v-else>请选择所属网点</text>
          <text class="iconfont icon-jinru"></text>
        </view>
      </view>
      <view class="item" @tap="isShowBrandDialog = true">
        <view class="label"><text>*</text>选择组队师傅</view>
        <view class="picker">
          <text class="value" v-if="worker">{{ worker.workerName }}</text>
          <text class="placeholder" v-else>请选择</text>
          <text class="iconfont icon-jinru"></text>
        </view>
      </view>
    </view>

    <template slot="footer">
      <view class="footer-btn-group">
        <u-button type="primary" text="提交" @click="tijiaozubie"></u-button>
      </view>
    </template>

    <zjDialogPicker
      ref="websitDialog"
      :isShow="isShowWebsitDialog"
      :multiple="false"
      :styleType="2"
      :title="'所属网点'"
      :list="websitList"
      :keyName="'name'"
      @cancel="isShowWebsitDialog = false"
      @confirm="confirmWebsitDialog"
    >
    </zjDialogPicker>

    <zjDialogPicker
      ref="workerDialog"
      :isShow="isShowBrandDialog"
      :multiple="false"
      :styleType="2"
      :title="'组队师傅'"
      :list="workerList"
      :keyName="'workerName'"
      @cancel="isShowBrandDialog = false"
      @confirm="confirmBrandDialog"
    >
    </zjDialogPicker>
  </zj-page-layout>
</template>

<script>
import zjDialogPicker from '@/components/zj-dialog/zj-dialog-picker.vue'
export default {
  components: {
    zjDialogPicker
  },

  data() {
    return {
      websit: null,
      websitList: [],
      isShowWebsitDialog: false,
      worker: null,
      workerList: [],
      isShowBrandDialog: false
    }
  },

  onLoad() {
    this.getWebsitList()
  },

  methods: {
    getWebsitList() {
      this.$api.get('/user/apply/websit').then(res => {
        this.websitList = res.data
        if (this.websitList.length == 1) {
          this.websit = this.websitList[0]
        }
      })
    },

    confirmWebsitDialog(e) {
      this.websit = this.websitList[e[0]]
      this.isShowWebsitDialog = false
      this.worker = null
      this.workerList = []
      this.getBrandList()
    },

    getBrandList() {
      this.$api.post('/worker/team/query/websit/worker', { websitId: this.websit?.websitId }).then(res => {
        this.workerList = res.data
      })
    },

    confirmBrandDialog(e) {
      this.worker = this.workerList[e[0]]
      this.isShowBrandDialog = false
    },

    tijiaozubie() {
      if (!this.websit) {
        this.$toast('请选择所属网点')
        return
      }
      if (!this.worker) {
        this.$toast('请选择组队师傅')
        return
      }
      this.$api
        .post('/worker/team/add', {
          assistantWorkerId: this.worker.workerId,
          assistantWorkerName: this.worker.workerName,
          websitId: this.websit?.websitId
        })
        .then(res => {
          this.$navToPage(
            {
              delta: 1
            },
            'navigateBack'
          )
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  background: #ffffff;
  margin-top: 20rpx;
  border-top: 1px solid #f5f5f5;
  .item {
    height: 108rpx;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    .label {
      margin-right: 30rpx;
      min-width: 200rpx;
      text {
        color: $error-color;
      }
    }
    .picker {
      .placeholder {
        color: $sec-font;
      }
      .iconfont {
        margin-left: 12rpx;
        color: $sec-font;
      }
    }
    ::v-deep .u-radio-group {
      flex: unset;
      .u-radio {
        margin-left: 50rpx;
      }
    }
  }
}
</style>