jsm-mall-h5-front/src/packageWorkorder/pages/create/index.vue

<template>
  <zj-page-layout :hasFooter="true">
    <view class="all-container">
      <view class="address-container card" @tap="chooseAddress">
        <view class="common-title"><text>*</text>客户信息</view>
        <view class="main">
          <view class="left">
            <view class="icon"><text class="iconfont icon-dingwei1"></text></view>
            <view class="nodata" v-if="!addressInfo">选择联系人地址</view>
            <view class="hasdata" v-else>
              <view class="name"
                >{{ addressInfo.name }}<text>{{ addressInfo.phone }}</text></view
              >
              <view class="address ellipsis-2"
                >{{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.area }}{{ addressInfo.street
                }}{{ addressInfo.address }}{{ addressInfo.houseNo }}</view
              >
            </view>
          </view>
          <text class="right iconfont icon-jinru"></text>
        </view>
      </view>

      <view class="service-container card">
        <view class="common-title">服务信息</view>
        <view class="item">
          <view class="label"><text>*</text>工单类型</view>
          <view class="value">{{ typeName }}</view>
        </view>
        <view class="item" v-if="isWorkerUser">
          <view class="label"><text>*</text>所属网点</view>
          <view class="picker" @tap="isShowWebsitDialog = true">
            <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">
          <view class="label"><text>*</text>预约上门时间</view>
          <view class="picker" @tap="isShowDatePicker = true">
            <text class="value" v-if="date">{{ date }}</text>
            <text class="placeholder" v-else>请选择</text>
            <text class="iconfont icon-jinru"></text>
          </view>
        </view>
      </view>

      <view class="product-container card">
        <view class="title">
          <view class="common-title"><text>*</text>产品信息</view>
          <view class="right" @tap="toChooseProduct"
            ><u-icon name="plus-circle" color="#3D8FFD" size="18"></u-icon>添加</view
          >
        </view>
        <view class="list">
          <view class="item" v-for="(item, index) in productList" :key="index">
            <image :src="item.imgUrl" mode="aspectFill"></image>
            <view class="main">
              <view class="name">{{ item.smallName }}</view>
              <view class="tags">
                <view class="it">{{ item.brandName }}</view>
              </view>
              <u-number-box min="1" v-model="item.num">
                <view slot="minus" class="ctrl">
                  <u-icon name="minus" color="#FFFFFF" size="10"></u-icon>
                </view>
                <text slot="input" class="input">{{ item.num }}</text>
                <view slot="plus" class="ctrl">
                  <u-icon name="plus" color="#FFFFFF" size="10"></u-icon>
                </view>
              </u-number-box>
            </view>
            <view class="del" @tap="deleteProduct(item, index)"><text class="iconfont icon-shanchu"></text></view>
          </view>
        </view>
      </view>

      <view class="remark-container card">
        <view class="common-title" v-if="typeName.indexOf('维修') >= 0"><text>*</text>故障描述</view>
        <view class="common-title" v-else>备注信息</view>
        <u--textarea v-model="remark" placeholder="请输入内容" border="none" autoHeight></u--textarea>
      </view>
    </view>

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

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

    <u-datetime-picker
      :show="isShowDatePicker"
      v-model="datePickerValue"
      mode="date"
      :formatter="formatter"
      @cancel="isShowDatePicker = false"
      @close="isShowDatePicker = false"
      @confirm="confirmDate"
      :minDate="minDate"
    ></u-datetime-picker>
  </zj-page-layout>
</template>

<script>
import zjDialogPicker from '@/components/zj-dialog/zj-dialog-picker.vue'

export default {
  components: {
    zjDialogPicker
  },

  data() {
    return {
      typeId: '',
      typeName: '',
      addressInfo: null,
      userInfo: {},
      websit: null,
      websitList: [],
      isShowWebsitDialog: false,
      date: '',
      datePickerValue: Number(new Date()),
      minDate: Number(new Date()),
      isShowDatePicker: false,

      productList: [],

      remark: ''
    }
  },

  computed: {
    isWorkerUser() {
      // 是否师傅
      return this.userInfo && this.userInfo.type === 'WORKER'
    }
  },

  async onLoad({ typeId, typeName }) {
    this.typeId = typeId
    this.typeName = typeName
    this.getWebsitList()

    this.userInfo = await this.$getUserInfo()

    // 接收地址信息
    this.crossPage.$on('chooseAddress', result => {
      this.addressInfo = result
    })
    // 接收产品分类
    this.crossPage.$on('chooseClassify', result => {
      let index = this.productList.findIndex(item => item.smallId == result.smallId && item.brandId == result.brandId)
      if (index !== -1) {
        this.productList.splice(index, 1, result)
      } else {
        this.productList.push(result)
      }
    })
  },

  onUnload() {
    this.crossPage.$off('chooseAddress')
    this.crossPage.$off('chooseClassify')
  },

  methods: {
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },

    // 去选择地址
    chooseAddress() {
      this.$navToPage({
        url: '/packageMine/pages/address/list?isChoose=' + true
      })
    },

    getWebsitList() {
      this.$api.get('/user/apply/websit').then(res => {
        this.websitList = res.data
      })
    },

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

    toChooseProduct() {
      this.$navToPage({
        url: '/packageWorkorder/pages/create/classify'
      })
    },

    deleteProduct(item, index) {
      this.$modal({
        content: `确定删除${item.smallName}吗？`
      })
        .then(() => {
          this.productList.splice(index, 1)
        })
        .catch(() => {})
    },

    confirmDate(e) {
      this.isShowDatePicker = false
      let time = new Date(e.value)
      let y = time.getFullYear()
      let m = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1
      let d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
      let hh = time.getHours() < 10 ? '0' + time.getHours() : time.getHours()
      let mm = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()
      let ss = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
      this.date = `${y}-${m}-${d}`
    },

    submitData() {
      if (!this.addressInfo) return this.$toast('请选择客户信息')
      if (!this.websit && this.isWorkerUser) return this.$toast('请选择所属网点')
      if (!this.date) return this.$toast('请选择预约上门时间')
      if (this.productList.length < 1) return this.$toast('请添加产品信息')
      if (this.typeName.indexOf('维修') >= 0 && !this.remark) return this.$toast('请填写故障描述')

      this.$api
        .postJson('/pg/order/base/save', {
          orderSmallType: this.typeId,
          userAddressId: this.addressInfo.userAddressId,
          websitId: this.websit ? this.websit.websitId : '',
          appointmentTime: this.date + ' 00:00:00',
          orderProducts: this.productList,
          remark: this.remark
        })
        .then(res => {
          this.$successToast()
          if (this.isWorkerUser) {
            this.$navToPage(
              {
                url: `/packageWorkorder/pages/orderList`
              },
              'redirectTo'
            )
          } else {
            this.$navToPage({
              url: `/packageWorkorder/pages/userWorkorderList`
            })
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  @include zj-card;
  margin-top: 20rpx;
  padding: 30rpx;
}
.common-title {
  font-size: 32rpx;
  font-weight: 500;
  text {
    color: $error-color;
    font-weight: normal;
  }
}
.all-container {
  padding: 0 20rpx;
}
.address-container {
  .main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;
  }
  .right {
    font-size: 32rpx;
    color: $sec-font;
    flex-shrink: 0;
  }
  .left {
    display: flex;
    align-items: center;
    margin-right: 20rpx;
    .icon {
      width: 52rpx;
      height: 52rpx;
      border-radius: 50%;
      background: $theme-color;
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
      .iconfont {
        font-size: 36rpx;
        color: #ffffff;
      }
    }
    .nodata {
      font-size: 28rpx;
      color: #999999;
    }
    .hasdata {
      .name {
        font-size: 32rpx;
        color: #333333;
        text {
          color: #999999;
          font-size: 28rpx;
          margin-left: 16rpx;
        }
      }
      .address {
        font-size: 28rpx;
        color: #666666;
        line-height: 34rpx;
        margin-top: 10rpx;
      }
    }
  }
}
.service-container {
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50rpx;
    margin-top: 30rpx;
    .label {
      margin-right: 30rpx;
      text {
        color: $error-color;
      }
    }
    .picker {
      .placeholder {
        color: $sec-font;
      }
      .iconfont {
        margin-left: 12rpx;
        color: $sec-font;
      }
    }
  }
}
.product-container {
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right {
      color: $theme-color;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      ::v-deep .u-icon {
        margin-right: 8rpx;
      }
    }
  }
  .list {
    .item {
      padding: 30rpx 0;
      border-bottom: 1px solid #eaeaea;
      display: flex;
      &:last-child {
        border: none;
      }
      image {
        width: 100rpx;
        height: 100rpx;
      }
      .main {
        flex: 1;
        margin-left: 20rpx;
        margin-right: 20rpx;
        .name {
          font-size: 28rpx;
          font-weight: 500;
          line-height: 36rpx;
        }
        .tags {
          display: flex;
          margin-top: 12rpx;
          margin-bottom: 16rpx;
          .it {
            font-size: 24rpx;
            color: $theme-color;
            background: rgba($color: $theme-color, $alpha: 0.3);
            padding: 8rpx 12rpx;
            border-radius: 8rpx;
          }
        }
        .input {
          width: 30rpx;
          text-align: center;
          padding: 0 10px;
        }
        .ctrl {
          width: 36rpx;
          height: 36rpx;
          background-color: $theme-color;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .del {
        text {
          font-size: 36rpx;
          color: $sec-font;
        }
      }
    }
  }
}
.remark-container {
  ::v-deep .u-textarea {
    margin-top: 20rpx;
    padding: 20rpx 20rpx;
    min-height: 200rpx;
    background: #f5f5f5;
  }
}
</style>